mdb-ui-kit/scss/_buttons.scss

235 lines
5.9 KiB
SCSS

// specification: https://www.google.com/design/spec/components/buttons.html
// bmd default buttons are flat by default
.btn {
position: relative;
margin-bottom: $bmd-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
font-size: $bmd-btn-font-size;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
transition: box-shadow 0.2s $bmd-animation-curve-fast-out-linear-in, background-color 0.2s $bmd-animation-curve-default, color 0.2s $bmd-animation-curve-default;
will-change: box-shadow, transform;
@include undo-bs-tab-focus();
//--
// Colors
// flat removes bg, add color variations to text
@include bmd-flat-button-color();
// fab and raised
// - colored, add their text and bg
// - hover color contrasted
// - shared shadow state on hover/active/focus
&.bmd-btn-fab,
&.btn-raised,
.btn-group-raised & {
@include bmd-raised-button-color();
// enlarged shadow on hover, focus
@include hover-focus() {
//border: 1px solid $blue;
z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
@include box-shadow($bmd-shadow-4dp);
}
// :active - momentary press: big shadow, release and it is gone
// .active - persistent big shadow
&.active,
&:active {
z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
@include box-shadow($bmd-shadow-focus);
//border: 1px solid $green;
}
}
//---
// btn-raised
&.btn-raised,
.btn-group-raised & {
// baseline shadow
@include box-shadow($bmd-shadow-2dp);
// reverse any of the above for links
&.btn-link {
box-shadow: none;
@include bmd-hover-focus-active() {
box-shadow: none;
}
}
@include bmd-disabled() {
box-shadow: none;
}
}
//---
// btn-outline
@include bmd-outline-button-color();
// https://www.google.com/design/spec/components/buttons-floating-action-button.html
&.bmd-btn-fab,
&.bmd-btn-icon {
overflow: hidden;
font-size: $bmd-btn-fab-font-size;
line-height: normal;
.btn-group-lg &,
.btn-group-sm &,
& {
padding: 0; // need specificity
border-radius: 50%;
}
.material-icons {
position: absolute;
top: 50%;
left: 50%;
width: $bmd-btn-fab-font-size;
line-height: $bmd-btn-fab-font-size;
transform: translate(-($bmd-btn-fab-font-size / 2), -($bmd-btn-fab-font-size / 2));
}
}
&.bmd-btn-fab {
// see above for color variations
width: $bmd-btn-fab-size;
min-width: $bmd-btn-fab-size;
height: $bmd-btn-fab-size;
//margin: auto;
//margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
.ripple-container {
border-radius: 50%;
}
&.bmd-btn-fab-sm,
.btn-group-sm & {
width: $bmd-btn-fab-size-sm;
min-width: $bmd-btn-fab-size-sm;
height: $bmd-btn-fab-size-sm;
//margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
//.material-icons {
// top: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2;
// left: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2;
//}
}
}
// Icon buttons
&.bmd-btn-icon {
width: $bmd-btn-icon-size;
min-width: $bmd-btn-icon-size;
height: $bmd-btn-icon-size;
margin: 0;
color: inherit;
line-height: 0;
&.bmd-btn-icon-sm,
.btn-group-sm & {
width: $bmd-btn-icon-size-sm;
min-width: $bmd-btn-icon-size-sm;
height: $bmd-btn-icon-size-sm;
font-size: $bmd-btn-icon-font-size-sm;
.material-icons {
width: $bmd-btn-icon-font-size-sm;
font-size: $bmd-btn-icon-font-size-sm;
line-height: 1;
vertical-align: middle;
transform: translate(-($bmd-btn-icon-font-size-sm / 2), -($bmd-btn-icon-font-size-sm / 2));
}
}
}
// Align icons inside buttons with text
.material-icons {
position: relative;
display: inline-block;
top: .25em;
margin-top: -1em;
margin-bottom: -1em;
font-size: 1.5em;
vertical-align: middle;
}
// Size variations
&.btn-lg,
.btn-group-lg & {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $bmd-btn-font-size-lg, $btn-border-radius-lg);
}
&.btn-sm,
.btn-group-sm & {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $bmd-btn-font-size-sm, $btn-border-radius-sm);
font-size: $bmd-btn-font-size-sm;
}
}
// Disabled buttons and button groups
.btn,
.input-group-btn .btn,
.btn-group,
.btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
@include bmd-disabled() {
color: $bmd-btn-disabled;
.bg-inverse & {
color: $bmd-inverse-btn-disabled;
}
// flat buttons shouldn't lose transparency on disabled hover/focus
&,
&:hover,
&:focus {
background: transparent;
}
}
}
// btn-group variations
.btn-group,
.btn-group-vertical {
position: relative;
margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
//&.open {
// .dropdown-toggle {
// }
//
// > .dropdown-toggle.btn {
// @include bmd-raised-button-color-bg();
// }
//}
.dropdown-menu {
border-radius: 0 0 $border-radius $border-radius;
}
&.btn-group-raised {
@include box-shadow($bmd-shadow-2dp);
}
.btn + .btn,
.btn,
.btn:active,
.btn-group {
margin: 0;
}
// remove margin from nested btn-group(s) to properly align them with the outer buttons
> .btn-group {
margin: 0;
}
}