liquid_feedback_frontend
view style/mdl/button/_button.scss @ 1585:020fd82c6cb4
Updated include_roles parameter type to boolean
| author | bsw |
|---|---|
| date | Tue Jan 26 18:57:19 2021 +0100 (2021-01-26) |
| parents | 32cc544d5a5b |
| children |
line source
1 /**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
17 @import "../variables";
18 @import "../mixins";
20 // The button component. Defaults to a flat button.
21 .mdl-button {
22 background: transparent;
23 border: none;
24 border-radius: $button-border-radius;
25 color: $button-secondary-color;
26 position: relative;
27 height: $button-height;
28 margin: 0;
29 min-width: $button-min-width;
30 padding: 0 $button-padding;
31 display: inline-block;
32 @include typo-button();
33 overflow: hidden;
34 will-change: box-shadow;
35 transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
36 background-color 0.2s $animation-curve-default,
37 color 0.2s $animation-curve-default;
38 outline: none;
39 cursor: pointer;
40 text-decoration: none;
41 text-align: center;
42 line-height: $button-height;
43 vertical-align: middle;
45 &::-moz-focus-inner {
46 border: 0;
47 }
49 &:hover {
50 background-color: $button-hover-color;
51 }
53 &:focus:not(:active) {
54 background-color: $button-focus-color;
55 }
57 &:active {
58 background-color: $button-active-color;
59 }
61 &.mdl-button--colored {
62 color: $button-primary-color-alt;
64 &:focus:not(:active) {
65 background-color: $button-focus-color-alt;
66 }
67 }
68 }
70 input.mdl-button[type="submit"] {
71 -webkit-appearance:none;
72 }
74 // Raised buttons
75 .mdl-button--raised {
76 background: $button-primary-color;
77 @include shadow-2dp();
79 &:active {
80 @include shadow-4dp();
81 background-color: $button-active-color;
82 }
84 &:focus:not(:active) {
85 @include focus-shadow();
86 background-color: $button-active-color;
87 }
89 &.mdl-button--colored {
90 background: $button-primary-color-alt;
91 color: $button-secondary-color-alt;
93 &:hover {
94 background-color: $button-hover-color-alt;
95 }
97 &:active {
98 background-color: $button-active-color-alt;
99 }
101 &:focus:not(:active) {
102 background-color: $button-active-color-alt;
103 }
105 & .mdl-ripple {
106 background: $button-ripple-color-alt;
107 }
108 }
109 }
112 // FABs
113 .mdl-button--fab {
114 border-radius: 50%;
115 font-size: $button-fab-font-size;
116 height: $button-fab-size;
117 margin: auto;
118 min-width: $button-fab-size;
119 width: $button-fab-size;
120 padding: 0;
121 overflow: hidden;
122 background: $button-primary-color;
123 box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
124 position: relative;
125 line-height: normal;
127 & .material-icons {
128 position: absolute;
129 top: 50%;
130 left: 50%;
131 transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
132 line-height: $button-fab-font-size;
133 width: $button-fab-font-size;
134 }
136 &.mdl-button--mini-fab {
137 height: $button-fab-size-mini;
138 min-width: $button-fab-size-mini;
139 width: $button-fab-size-mini;
140 }
142 & .mdl-button__ripple-container {
143 border-radius: 50%;
144 // Fixes clipping bug in Safari.
145 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
146 }
148 &:active {
149 @include shadow-4dp();
150 background-color: $button-active-color;
151 }
153 &:focus:not(:active) {
154 @include focus-shadow();
155 background-color: $button-active-color;
156 }
158 &.mdl-button--colored {
159 background: $button-fab-color-alt;
160 color: $button-fab-text-color-alt;
162 &:hover {
163 background-color: $button-fab-hover-color-alt;
164 }
166 &:focus:not(:active) {
167 background-color: $button-fab-active-color-alt;
168 }
170 &:active {
171 background-color: $button-fab-active-color-alt;
172 }
174 & .mdl-ripple {
175 background: $button-fab-ripple-color-alt;
176 }
177 }
178 }
181 // Icon buttons
182 .mdl-button--icon {
183 border-radius: 50%;
184 font-size: $button-fab-font-size;
185 height: $button-icon-size;
186 margin-left: 0;
187 margin-right: 0;
188 min-width: $button-icon-size;
189 width: $button-icon-size;
190 padding: 0;
191 overflow: hidden;
192 color: inherit;
193 line-height: normal;
195 & .material-icons {
196 position: absolute;
197 top: 50%;
198 left: 50%;
199 transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
200 line-height: $button-fab-font-size;
201 width: $button-fab-font-size;
202 }
204 &.mdl-button--mini-icon {
205 height: $button-icon-size-mini;
206 min-width: $button-icon-size-mini;
207 width: $button-icon-size-mini;
209 & .material-icons {
210 top: ($button-icon-size-mini - $button-fab-font-size) / 2;
211 left: ($button-icon-size-mini - $button-fab-font-size) / 2;
212 }
213 }
215 & .mdl-button__ripple-container {
216 border-radius: 50%;
217 // Fixes clipping bug in Safari.
218 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
219 }
220 }
223 // Ripples
224 .mdl-button__ripple-container {
225 display: block;
226 height: 100%;
227 left: 0px;
228 position: absolute;
229 top: 0px;
230 width: 100%;
231 z-index: 0;
232 overflow: hidden;
234 .mdl-button[disabled] & .mdl-ripple,
235 .mdl-button.mdl-button--disabled & .mdl-ripple {
236 background-color: transparent;
237 }
238 }
240 // Colorized buttons
242 .mdl-button--primary.mdl-button--primary {
243 color: $button-primary-color-alt;
244 & .mdl-ripple {
245 background: $button-secondary-color-alt;
246 }
247 &.mdl-button--raised, &.mdl-button--fab {
248 color: $button-secondary-color-alt;
249 background-color: $button-primary-color-alt;
250 }
251 }
253 .mdl-button--accent.mdl-button--accent {
254 color: $button-fab-color-alt;
255 & .mdl-ripple {
256 background: $button-fab-text-color-alt;
257 }
258 &.mdl-button--raised, &.mdl-button--fab {
259 color: $button-fab-text-color-alt;
260 background-color: $button-fab-color-alt;
261 }
262 }
264 // Disabled buttons
266 .mdl-button {
267 // Bump up specificity by using [disabled] twice.
268 &[disabled][disabled],
269 &.mdl-button--disabled.mdl-button--disabled {
270 color: $button-secondary-color-disabled;
271 cursor: default;
272 background-color: transparent;
273 }
275 &--fab {
276 // Bump up specificity by using [disabled] twice.
277 &[disabled][disabled],
278 &.mdl-button--disabled.mdl-button--disabled {
279 background-color: $button-primary-color-disabled;
280 color: $button-secondary-color-disabled;
281 }
282 }
284 &--raised {
285 // Bump up specificity by using [disabled] twice.
286 &[disabled][disabled],
287 &.mdl-button--disabled.mdl-button--disabled {
288 background-color: $button-primary-color-disabled;
289 color: $button-secondary-color-disabled;
290 box-shadow: none;
291 }
292 }
293 &--colored {
294 // Bump up specificity by using [disabled] twice.
295 &[disabled][disabled],
296 &.mdl-button--disabled.mdl-button--disabled {
297 color: $button-secondary-color-disabled;
298 }
299 }
300 }
302 // Align icons inside buttons with text
303 .mdl-button .material-icons {
304 vertical-align: middle;
305 }