| @import '../core/style/variables'; |
| @import '../core/style/elevation'; |
| @import '../core/style/button-common'; |
| @import '../core/style/private'; |
| |
| |
| // Flat and raised button standards |
| $mat-button-padding: 0 16px !default; |
| $mat-button-min-width: 64px !default; |
| $mat-button-margin: 0 !default; |
| $mat-button-line-height: 36px !default; |
| $mat-button-border-radius: 4px !default; |
| $mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function, |
| background-color 200ms $swift-ease-in-out-timing-function !default; |
| |
| // Stroked button padding is 1px less horizontally than default/flat/raised |
| // button's padding. |
| $mat-stroked-button-line-height: $mat-button-line-height - 2; |
| $mat-stroked-button-padding: 0 15px; |
| $mat-stroked-button-border-width: 1px; |
| |
| // Icon Button standards |
| $mat-icon-button-size: 40px !default; |
| $mat-icon-button-border-radius: 50% !default; |
| $mat-icon-button-line-height: 24px !default; |
| |
| // Fab standards |
| $mat-fab-border-radius: 50% !default; |
| $mat-fab-size: 56px !default; |
| $mat-fab-padding: 16px !default; |
| |
| $mat-mini-fab-size: 40px !default; |
| $mat-mini-fab-padding: 8px !default; |
| |
| // Applies base styles to all button types. |
| @mixin mat-button-base { |
| box-sizing: border-box; |
| position: relative; |
| |
| // Reset browser <button> styles. |
| @include mat-button-reset(); |
| |
| // Make anchors render like buttons. |
| display: inline-block; |
| white-space: nowrap; |
| text-decoration: none; |
| vertical-align: baseline; |
| text-align: center; |
| |
| // Sizing. |
| margin: $mat-button-margin; |
| min-width: $mat-button-min-width; |
| line-height: $mat-button-line-height; |
| padding: $mat-button-padding; |
| border-radius: $mat-button-border-radius; |
| |
| // Explicitly set the default overflow to `visible`. It is already set |
| // on most browsers except on IE11 where it defaults to `hidden`. |
| overflow: visible; |
| |
| &.mat-button-disabled { |
| cursor: default; |
| } |
| |
| &.cdk-keyboard-focused, &.cdk-program-focused { |
| .mat-button-focus-overlay { |
| opacity: 0.12; |
| } |
| } |
| |
| &::-moz-focus-inner { |
| border: 0; |
| } |
| } |
| |
| // Applies styles to buttons with backgrounds: raised, fab, and mini-fab |
| @mixin mat-raised-button { |
| @include mat-button-base; |
| @include mat-private-animation-noop(); |
| |
| // Force hardware acceleration. |
| transform: translate3d(0, 0, 0); |
| |
| // Animation. |
| transition: background $swift-ease-out-duration $swift-ease-out-timing-function, |
| mat-elevation-transition-property-value(); |
| } |
| |
| // Applies styles to fab and mini-fab button types only |
| @mixin mat-fab($size, $padding) { |
| @include mat-raised-button; |
| |
| // Reset the min-width from the button base. |
| min-width: 0; |
| |
| border-radius: $mat-fab-border-radius; |
| width: $size; |
| height: $size; |
| padding: 0; |
| |
| flex-shrink: 0; |
| |
| .mat-button-wrapper { |
| padding: $padding 0; |
| display: inline-block; |
| line-height: $mat-icon-button-line-height; |
| } |
| } |