mdb-ui-kit/less/_buttons.less

230 lines
5.0 KiB
Plaintext
Raw Normal View History

// specification: https://www.google.com/design/spec/components/buttons.html
.typo-button(@colorContrast: false) {
2015-11-24 23:27:01 +03:00
font-size: @mdb-btn-font-size-base;
font-weight: 500;
text-transform: uppercase;
//line-height: 1;
letter-spacing: 0;
& when (@colorContrast) {
opacity: 0.87;
}
}
// mdb default buttons are flat by default
// synchronized with mdl 11/23/15
.btn,
.input-group-btn .btn {
border: none;
border-radius: @border-radius-base;
2014-12-18 15:59:34 +03:00
position: relative;
padding: 8px 30px;
margin: 10px 1px;
.typo-button();
will-change: box-shadow, transform;
transition: box-shadow 0.2s @mdb-animation-curve-fast-out-linear-in,
background-color 0.2s @mdb-animation-curve-default,
color 0.2s @mdb-animation-curve-default;
outline: none;
2014-12-18 15:59:34 +03:00
cursor: pointer;
text-decoration: none;
2014-08-18 18:25:33 +04:00
&::-moz-focus-inner {
border: 0;
}
//---
// btn-flat
background: transparent;
&:not(.btn-raised) {
.variations(~".btn", ~"", color, @mdb-text-color-primary);
box-shadow: none;
&:not(.btn-link) {
&:hover,
&:focus {
// spec: flat/light bg Hover: 20% #999999
background-color: fade(#999999, 20%);
.theme-dark & {
// spec: dark bg Hover: 15% #CCCCCC
background-color: fade(#CCCCCC, 15%);
}
}
2015-11-22 19:23:34 +03:00
}
2014-12-18 15:59:34 +03:00
}
2015-11-22 19:23:34 +03:00
2015-11-24 23:27:01 +03:00
//---
// btn-raised
&.btn-raised {
.background-variations(~".btn", ~"", @mdb-btn-background-color);
&:not(.btn-link) {
.shadow-2dp();
&:hover {
// Spec:
// - Raised Light/Light theme no hover.
// - Raised Dark/Dark theme Hover color: 600
.theme-dark & {
//// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
//.generic-variations(~".btn", ~"", @mdb-btn-background-color, {
// // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
// background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor);
//});
}
}
&.active,
&:active {
.shadow-4dp();
}
&:focus:not(:active) {
.focus-shadow();
}
}
}
2015-03-17 20:32:39 +03:00
// Size variations
2015-11-24 23:27:01 +03:00
&.btn-lg,
.btn-group-lg & {
font-size: @mdb-btn-font-size-lg;
}
&.btn-sm,
.btn-group-sm & {
2015-03-17 20:32:39 +03:00
padding: 5px 20px;
2015-11-24 23:27:01 +03:00
font-size: @mdb-btn-font-size-sm;
2015-03-17 20:32:39 +03:00
}
2015-11-24 23:27:01 +03:00
&.btn-xs,
.btn-group-xs & {
2015-03-17 20:32:39 +03:00
padding: 4px 15px;
2015-11-24 23:27:01 +03:00
font-size: @mdb-btn-font-size-xs;
2015-03-17 20:32:39 +03:00
}
2014-12-18 15:59:34 +03:00
&.btn-fab {
border-radius: 50%;
font-size: @mdb-btn-fab-font-size;
height: @mdb-btn-fab-size;
margin: auto;
min-width: @mdb-btn-fab-size;
width: @mdb-btn-fab-size;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
position: relative;
line-height: normal;
//&,
//&:hover,
//&:active {
// //.variations(~"", background-color, transparent);
// //.variations(~".btn", ~"", background-color, @mdb-btn-primary-color);
//}
//&,
//&:hover {
// .shadow-z-1();
//}
//&:active {
// .shadow-z-1-hover();
//}
.ripple-container {
border-radius: 50%;
2014-12-18 15:59:34 +03:00
}
2014-12-18 15:59:34 +03:00
&.btn-fab-mini {
width: 40px;
height: 40px;
2015-05-10 01:16:03 +03:00
padding: 13px 0;
2014-12-18 15:59:34 +03:00
font-size: 15px;
&.material-icons {
top: (@mdb-btn-icon-size-mini - @mdb-btn-fab-font-size) / 2;
left: (@mdb-btn-icon-size-mini - @mdb-btn-fab-font-size) / 2;
}
2014-12-18 15:59:34 +03:00
}
i.material-icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-(@mdb-btn-fab-font-size / 2), -(@mdb-btn-fab-font-size / 2));
line-height: @mdb-btn-fab-font-size;
width: @mdb-btn-fab-font-size;
2014-12-18 15:59:34 +03:00
}
}
// Align icons inside buttons with text
i.material-icons {
vertical-align: middle;
2014-12-18 15:59:34 +03:00
}
}
// Disabled buttons and button groups
.btn,
.input-group-btn .btn,
.btn-group {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
fieldset[disabled][disabled] &,
&.disabled,
&:disabled,
&[disabled][disabled] {
// spec: light theme: Disabled text: 26% #000000
color: fade(#000000, 26%);
.theme-dark & {
// spec: dark theme: Disabled text: 30% #FFFFFF
color: fade(#FFFFFF, 30%);
}
background: transparent;
// no box-shadow on disabled
&.btn-raised,
&.btn-group-raised {
&,
&.active,
&:active,
&:focus:not(:active) {
box-shadow: none;
}
}
}
2014-08-18 18:25:33 +04:00
}
// btn-group variations
.btn-group,
.btn-group-vertical {
position: relative;
//border-radius: 2px;
margin: 10px 1px;
&.open {
.dropdown-toggle {
//box-shadow: none;
}
& > .dropdown-toggle.btn {
.variations(~".btn", ~"", background-color, @mdb-btn-background-color);
}
}
.dropdown-menu {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
&.btn-group-raised {
.shadow-2dp();
}
& .btn + .btn,
.btn,
.btn:active,
.btn-group {
margin: 0;
}
}