source: trip-planner-front/node_modules/@angular/material/button/_button-base.scss

Last change on this file was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 2.6 KB
RevLine 
[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}
Note: See TracBrowser for help on using the repository browser.