mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

#745 btn and btn-group size variations

Browse Source
This commit is contained in:
Kevin Ross 2015-11-24 14:27:01 -06:00
parent 188b87cabc
commit 76d49769ab
3 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
bootstrap-elements.html
View File

@ -535,10 +535,10 @@
<h3>Button sizes</h3> <h3>Button sizes</h3>
<p class="bs-component"> <p class="bs-component">
<a href="javascript:void(0)" class="btn btn-primary btn-lg">Large button</a> <a href="javascript:void(0)" class="btn btn-raised btn-lg">Large button</a>
<a href="javascript:void(0)" class="btn btn-primary">Default button</a> <a href="javascript:void(0)" class="btn btn-raised">Default button</a>
<a href="javascript:void(0)" class="btn btn-primary btn-sm">Small button</a> <a href="javascript:void(0)" class="btn btn-raised btn-sm">Small button</a>
<a href="javascript:void(0)" class="btn btn-primary btn-xs">Mini button</a> <a href="javascript:void(0)" class="btn btn-raised btn-xs">xs button</a>
</p> </p>
<h3>Floating action buttons</h3> <h3>Floating action buttons</h3>

30
less/_buttons.less
View File

@ -1,15 +1,7 @@
// specification: https://www.google.com/design/spec/components/buttons.html // specification: https://www.google.com/design/spec/components/buttons.html
//.btn-shadow() {
// .shadow-z-1();
// transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
// &:active:not(.btn-link) {
// .shadow-z-1-hover();
// }
//}
.typo-button(@colorContrast: false) { .typo-button(@colorContrast: false) {
font-size: 14px; font-size: @mdb-btn-font-size-base;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
//line-height: 1; //line-height: 1;
@ -63,7 +55,8 @@
} }
} }
// **raised** only styles (we are raised buttons by default) //---
// btn-raised
&.btn-raised { &.btn-raised {
.background-variations(~".btn", ~"", @mdb-btn-background-color); .background-variations(~".btn", ~"", @mdb-btn-background-color);
@ -95,18 +88,21 @@
} }
// Size variations // Size variations
&.btn-sm { &.btn-lg,
.btn-group-lg & {
font-size: @mdb-btn-font-size-lg;
}
&.btn-sm,
.btn-group-sm & {
padding: 5px 20px; padding: 5px 20px;
font-size: @mdb-btn-font-size-sm;
} }
&.btn-xs { &.btn-xs,
.btn-group-xs & {
padding: 4px 15px; padding: 4px 15px;
font-size: 10px; font-size: @mdb-btn-font-size-xs;
} }
//&.btn-raised {
// .btn-shadow();
//}
&.btn-fab { &.btn-fab {
border-radius: 50%; border-radius: 50%;
font-size: @mdb-btn-fab-font-size; font-size: @mdb-btn-fab-font-size;

6
less/_variables.less
View File

@ -142,6 +142,12 @@
@mdb-radio-border-color: @mdb-checkbox-border-color; @mdb-radio-border-color: @mdb-checkbox-border-color;
// Buttons: // Buttons:
@mdb-btn-font-size-base: 14px;
@mdb-btn-font-size-lg: 16px;
@mdb-btn-font-size-sm: 12px;
@mdb-btn-font-size-xs: 10px;
@mdb-btn-background-color: transparent; @mdb-btn-background-color: transparent;
@mdb-btn-background-color-text: @mdb-text-color-primary; @mdb-btn-background-color-text: @mdb-text-color-primary;