[6a3a178] | 1 | @use '../core/style/variables';
|
---|
| 2 | @use '../core/style/elevation';
|
---|
| 3 | @use '../core/style/button-common';
|
---|
| 4 | @use '../core/style/private';
|
---|
| 5 |
|
---|
| 6 |
|
---|
| 7 | // Flat and raised button standards
|
---|
| 8 | $padding: 0 16px !default;
|
---|
| 9 | $min-width: 64px !default;
|
---|
| 10 | $margin: 0 !default;
|
---|
| 11 | $line-height: 36px !default;
|
---|
| 12 | $border-radius: 4px !default;
|
---|
| 13 | $focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function,
|
---|
| 14 | background-color 200ms variables.$swift-ease-in-out-timing-function !default;
|
---|
| 15 |
|
---|
| 16 | // Stroked button padding is 1px less horizontally than default/flat/raised
|
---|
| 17 | // button's padding.
|
---|
| 18 | $stroked-button-line-height: $line-height - 2;
|
---|
| 19 | $stroked-button-padding: 0 15px;
|
---|
| 20 | $stroked-button-border-width: 1px;
|
---|
| 21 |
|
---|
| 22 | // Icon Button standards
|
---|
| 23 | $button-size: 40px !default;
|
---|
| 24 | $button-border-radius: 50% !default;
|
---|
| 25 | $button-line-height: 24px !default;
|
---|
| 26 |
|
---|
| 27 | // Fab standards
|
---|
| 28 | $fab-border-radius: 50% !default;
|
---|
| 29 | $fab-size: 56px !default;
|
---|
| 30 | $fab-padding: 16px !default;
|
---|
| 31 |
|
---|
| 32 | $mini-fab-size: 40px !default;
|
---|
| 33 | $mini-fab-padding: 8px !default;
|
---|
| 34 |
|
---|
| 35 | // Applies base styles to all button types.
|
---|
| 36 | @mixin base {
|
---|
| 37 | box-sizing: border-box;
|
---|
| 38 | position: relative;
|
---|
| 39 |
|
---|
| 40 | // Reset browser <button> styles.
|
---|
| 41 | @include button-common.reset();
|
---|
| 42 |
|
---|
| 43 | // Make anchors render like buttons.
|
---|
| 44 | display: inline-block;
|
---|
| 45 | white-space: nowrap;
|
---|
| 46 | text-decoration: none;
|
---|
| 47 | vertical-align: baseline;
|
---|
| 48 | text-align: center;
|
---|
| 49 |
|
---|
| 50 | // Sizing.
|
---|
| 51 | margin: $margin;
|
---|
| 52 | min-width: $min-width;
|
---|
| 53 | line-height: $line-height;
|
---|
| 54 | padding: $padding;
|
---|
| 55 | border-radius: $border-radius;
|
---|
| 56 |
|
---|
| 57 | // Explicitly set the default overflow to `visible`. It is already set
|
---|
| 58 | // on most browsers except on IE11 where it defaults to `hidden`.
|
---|
| 59 | overflow: visible;
|
---|
| 60 |
|
---|
| 61 | &.mat-button-disabled {
|
---|
| 62 | cursor: default;
|
---|
| 63 | }
|
---|
| 64 |
|
---|
| 65 | &.cdk-keyboard-focused, &.cdk-program-focused {
|
---|
| 66 | .mat-button-focus-overlay {
|
---|
| 67 | opacity: 0.12;
|
---|
| 68 | }
|
---|
| 69 | }
|
---|
| 70 |
|
---|
| 71 | &::-moz-focus-inner {
|
---|
| 72 | border: 0;
|
---|
| 73 | }
|
---|
| 74 | }
|
---|
| 75 |
|
---|
| 76 | // Applies styles to buttons with backgrounds: raised, fab, and mini-fab
|
---|
| 77 | @mixin raised-button {
|
---|
| 78 | @include base;
|
---|
| 79 | @include private.private-animation-noop();
|
---|
| 80 |
|
---|
| 81 | // Force hardware acceleration.
|
---|
| 82 | transform: translate3d(0, 0, 0);
|
---|
| 83 |
|
---|
| 84 | // Animation.
|
---|
| 85 | transition: background variables.$swift-ease-out-duration
|
---|
| 86 | variables.$swift-ease-out-timing-function, elevation.private-transition-property-value();
|
---|
| 87 | }
|
---|
| 88 |
|
---|
| 89 | // Applies styles to fab and mini-fab button types only
|
---|
| 90 | @mixin fab($size, $padding) {
|
---|
| 91 | @include raised-button;
|
---|
| 92 |
|
---|
| 93 | // Reset the min-width from the button base.
|
---|
| 94 | min-width: 0;
|
---|
| 95 |
|
---|
| 96 | border-radius: $fab-border-radius;
|
---|
| 97 | width: $size;
|
---|
| 98 | height: $size;
|
---|
| 99 | padding: 0;
|
---|
| 100 |
|
---|
| 101 | flex-shrink: 0;
|
---|
| 102 |
|
---|
| 103 | .mat-button-wrapper {
|
---|
| 104 | padding: $padding 0;
|
---|
| 105 | display: inline-block;
|
---|
| 106 | line-height: $button-line-height;
|
---|
| 107 | }
|
---|
| 108 | }
|
---|