liquid_feedback_frontend
view style/mdl/_mixins.scss @ 1676:8fde003bdeb0
Added support for alternative DN string
| author | bsw |
|---|---|
| date | Mon Jun 07 20:58:31 2021 +0200 (2021-06-07) |
| 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 /* Typography */
19 @mixin typo-preferred-font($usePreferred: true) {
20 @if $usePreferred {
21 font-family: $preferred_font;
22 }
23 }
25 @mixin typo-display-4($colorContrast: false, $usePreferred: true) {
26 @include typo-preferred-font($usePreferred);
27 font-size: 112px;
28 font-weight: 300;
29 line-height: 1;
30 letter-spacing: -0.04em;
32 @if $colorContrast {
33 opacity: 0.54;
34 }
35 }
37 @mixin typo-display-3($colorContrast: false, $usePreferred: true) {
38 @include typo-preferred-font($usePreferred);
39 font-size: 56px;
40 font-weight: 400;
41 line-height: 1.35;
42 letter-spacing: -0.02em;
44 @if $colorContrast {
45 opacity: 0.54;
46 }
47 }
49 @mixin typo-display-2($colorContrast: false, $usePreferred: true) {
50 @include typo-preferred-font($usePreferred);
51 font-size: 45px;
52 font-weight: 400;
53 line-height: 48px;
55 @if $colorContrast {
56 opacity: 0.54;
57 }
58 }
60 @mixin typo-display-1($colorContrast: false, $usePreferred: true) {
61 @include typo-preferred-font($usePreferred);
62 font-size: 34px;
63 font-weight: 400;
64 line-height: 40px;
66 @if $colorContrast {
67 opacity: 0.54;
68 }
69 }
71 @mixin typo-headline($colorContrast: false, $usePreferred: true) {
72 @include typo-preferred-font($usePreferred);
73 font-size: 24px;
74 font-weight: 400;
75 line-height: 32px;
76 -moz-osx-font-smoothing: grayscale;
78 @if $colorContrast {
79 opacity: 0.87;
80 }
81 }
83 @mixin typo-title($colorContrast: false, $usePreferred: true) {
84 @include typo-preferred-font($usePreferred);
85 font-size: 20px;
86 font-weight: 500;
87 line-height: 1;
88 letter-spacing: 0.02em;
90 @if $colorContrast {
91 opacity: 0.87;
92 }
93 }
95 @mixin typo-subhead($colorContrast: false, $usePreferred: true) {
96 @include typo-preferred-font($usePreferred);
97 font-size: 16px;
98 font-weight: 400;
99 line-height: 24px;
100 letter-spacing: 0.04em;
102 @if $colorContrast {
103 opacity: 0.87;
104 }
105 }
107 @mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
108 @include typo-preferred-font($usePreferred);
109 font-size: 16px;
110 font-weight: 400;
111 line-height: 28px;
112 letter-spacing: 0.04em;
114 @if $colorContrast {
115 opacity: 0.87;
116 }
117 }
119 @mixin typo-body-2($colorContrast: false, $usePreferred: false) {
120 @include typo-preferred-font($usePreferred);
121 font-size: 14px;
122 @if $usePreferred {
123 font-weight: 500;
124 } @else {
125 font-weight: bold;
126 }
127 line-height: 24px;
128 letter-spacing: 0;
130 @if $colorContrast {
131 opacity: 0.87;
132 }
133 }
135 @mixin typo-body-1($colorContrast: false, $usePreferred: false) {
136 @include typo-preferred-font($usePreferred);
137 font-size: 14px;
138 font-weight: 400;
139 line-height: 24px;
140 letter-spacing: 0;
142 @if $colorContrast {
143 opacity: 0.87;
144 }
145 }
147 @mixin typo-caption($colorContrast: false, $usePreferred: false) {
148 @include typo-preferred-font($usePreferred);
149 font-size: 12px;
150 font-weight: 400;
151 line-height: 1;
152 letter-spacing: 0;
154 @if $colorContrast {
155 opacity: 0.54;
156 }
157 }
159 @mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
160 @include typo-preferred-font($usePreferred);
161 position: relative;
162 font-size: 24px;
163 font-weight: 300;
164 font-style: italic;
165 line-height: 1.35;
166 letter-spacing: 0.08em;
168 &:before {
169 position: absolute;
170 left: -0.5em;
171 content: '“';
172 }
174 &:after {
175 content: '”';
176 margin-left: -0.05em;
177 }
179 @if $colorContrast {
180 opacity: 0.54;
181 }
182 }
184 @mixin typo-menu($colorContrast: false, $usePreferred: true) {
185 @include typo-preferred-font($usePreferred);
186 font-size: 14px;
187 font-weight: 500;
188 line-height: 1;
189 letter-spacing: 0;
191 @if $colorContrast {
192 opacity: 0.87;
193 }
194 }
196 @mixin typo-button($colorContrast: false, $usePreferred: true) {
197 @include typo-preferred-font($usePreferred);
198 font-size: 14px;
199 font-weight: 500;
200 text-transform: uppercase;
201 line-height: 1;
202 letter-spacing: 0;
204 @if $colorContrast {
205 opacity: 0.87;
206 }
207 }
209 @mixin typo-icon() {
210 font-family: 'Material Icons';
211 font-weight: normal;
212 font-style: normal;
213 font-size: 24px;
214 line-height: 1;
215 letter-spacing: normal;
216 text-transform: none;
217 display: inline-block;
218 word-wrap: normal;
219 font-feature-settings: 'liga';
220 -webkit-font-feature-settings: 'liga';
221 -webkit-font-smoothing: antialiased;
222 }
224 /* Shadows */
226 // Focus shadow mixin.
227 @mixin focus-shadow() {
228 box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
229 }
231 @mixin shadow-2dp() {
232 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
233 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
234 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
235 }
236 @mixin shadow-3dp() {
237 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
238 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
239 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
240 }
241 @mixin shadow-4dp() {
242 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
243 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
244 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
245 }
246 @mixin shadow-6dp() {
247 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
248 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
249 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
250 }
251 @mixin shadow-8dp() {
252 box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
253 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
254 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
255 }
257 @mixin shadow-16dp() {
258 box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
259 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
260 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
261 }
263 @mixin shadow-24dp() {
264 box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
265 0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
266 0 24px 38px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
267 }
269 /* Animations */
271 @mixin material-animation-fast-out-slow-in($duration:0.2s) {
272 transition-duration: $duration;
273 transition-timing-function: $animation-curve-fast-out-slow-in;
274 }
276 @mixin material-animation-linear-out-slow-in($duration:0.2s) {
277 transition-duration: $duration;
278 transition-timing-function: $animation-curve-linear-out-slow-in;
279 }
281 @mixin material-animation-fast-out-linear-in($duration:0.2s) {
282 transition-duration: $duration;
283 transition-timing-function: $animation-curve-fast-out-linear-in;
284 }
286 @mixin material-animation-default($duration:0.2s) {
287 transition-duration: $duration;
288 transition-timing-function: $animation-curve-default;
289 }
291 /* Dialog */
293 @mixin dialog-width($units:5) {
294 @if(type_of($units) != 'number') {
295 @error "The unit given to dialog-width should be a number.";
296 }
297 // 56dp is the base unit width for Dialogs.
298 // With 5 units being the number of units for a mobile device.
299 // https://goo.gl/sK2O5o
300 width: $units * 56px;
301 }