@import "../colors"; @import "../globals"; @import "../mixins"; @import "./config"; @import "./mixins"; .button { position: relative; } %button { @include typo-button(); position: relative; display: inline-block; height: $button-height; flex-direction: row; align-content: center; align-items: center; justify-content: center; line-height: $button-height; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; outline: none; transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default; &::-moz-focus-inner { border: 0; } > span:not([data-react-toolbox="tooltip"]) { display: inline-block; line-height: $button-height; vertical-align: middle; } > svg { display: inline-block; width: 1em; height: $button-height; font-size: 120%; vertical-align: middle; fill: currentColor; } > * { pointer-events: none; } > .rippleWrapper { overflow: hidden; } &[disabled] { color: $button-disabled-text-color; pointer-events: none; cursor: auto; } } %squared { min-width: $button-squared-min-width; padding: $button-squared-padding; border-radius: $button-border-radius; .icon { margin-right: $button-squared-icon-margin; font-size: 120%; vertical-align: middle; } > svg { margin-right: .5 * $unit; } } %solid { &[disabled] { @include shadow-2dp(); background-color: $button-disabled-background-color; } &:active { @include shadow-4dp(); } &:focus:not(:active) { @include focus-shadow(); } } .raised { @extend %button; @extend %squared; @extend %solid; @include shadow-2dp(); } .flat { @extend %button; @extend %squared; background: transparent; } .floating { @extend %button; @extend %solid; width: $button-floating-height; height: $button-floating-height; font-size: $button-floating-font-size; border-radius: 50%; box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24); .icon { line-height: $button-floating-height; } > .rippleWrapper { border-radius: 50%; } &.mini { width: $button-floating-mini-height; height: $button-floating-mini-height; font-size: $button-floating-mini-font-size; .icon { line-height: $button-floating-mini-height; } } } .toggle { @extend %button; width: $button-height; background: transparent; border-radius: 50%; > .icon, svg { font-size: $button-toggle-font-size; line-height: $button-height; vertical-align: middle; } > .rippleWrapper { border-radius: 50%; } } .neutral:not([disabled]) { &.raised, &.floating { color: $button-neutral-color-contrast; background-color: $button-neutral-color; } &.flat, &.toggle { color: $button-neutral-color-contrast; &:focus:not(:active) { background: $button-neutral-color-hover; } } &.flat:hover { background: $button-neutral-color-hover; } &.inverse { &.raised, &.floating { color: $button-neutral-color; background-color: $button-neutral-color-contrast; } &.flat, &.toggle { color: $button-neutral-color; &:focus:not(:active) { background: $button-neutral-color-hover; } } &.flat:hover { background: $button-neutral-color-hover; } } } @include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover); @include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);