liquid_feedback_frontend
view style/mdl/_variables.scss @ 1818:2d4136357989
Final version of survey
| author | bsw |
|---|---|
| date | Tue Jan 04 14:31:01 2022 +0100 (2022-01-04) |
| 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 /*------------------------------------*\
18 $CONTENTS
19 \*------------------------------------*/
20 /**
21 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
22 * -----Typography
23 * -----Colors
24 * -----Textfield
25 * -----Switch
26 * -----Spinner
27 * -----Radio
28 * -----Menu
29 * -----List
30 * -----Layout
31 * -----Icon toggles
32 * -----Footer
33 * -----Column
34 * -----Checkbox
35 * -----Card
36 * -----Button
37 * -----Animation
38 * -----Progress
39 * -----Badge
40 * -----Shadows
41 * -----Grid
42 * -----Data table
43 * -----Dialog
44 * -----Snackbar
45 * -----Tooltip
46 * -----Chip
47 *
48 * Even though all variables have the `!default` directive, most of them
49 * should not be changed as they are dependent one another. This can cause
50 * visual distortions (like alignment issues) that are hard to track down
51 * and fix.
52 */
55 /* ========== TYPOGRAPHY ========== */
57 /* We're splitting fonts into "preferred" and "performance" in order to optimize
58 page loading. For important text, such as the body, we want it to load
59 immediately and not wait for the web font load, whereas for other sections,
60 such as headers and titles, we're OK with things taking a bit longer to load.
61 We do have some optional classes and parameters in the mixins, in case you
62 definitely want to make sure you're using the preferred font and don't mind
63 the performance hit.
64 We should be able to improve on this once CSS Font Loading L3 becomes more
65 widely available.
66 */
67 $preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
68 $performance_font: 'Helvetica', 'Arial', sans-serif !default;
70 /* ========== COLORS ========== */
72 /**
73 *
74 * Material design color palettes.
75 * @see http://www.google.com/design/spec/style/color.html
76 *
77 **/
79 @import "color-definitions";
80 @import "functions";
82 /* ========== IMAGES ========== */
83 $image_path: '/static/mdl' !default;
85 /* ========== Color & Themes ========== */
87 // Define whether individual color palette items should have classes created.
88 // Setting this to true will remove individual color classes for each color in the palettes.
89 // To improve overall performance (assuming they aren't used) by:
90 // * Saving server bandwidth sending the extra classes
91 // * Save client computation against the classes
92 // it is RECOMMENDED you set this to true.
93 $trim-color-classes: false !default;
95 // Use color primarily for emphasis. Choose colors that fit with
96 // your brand and provide good contrast between visual components.
97 $color-primary: $palette-indigo-500 !default;
98 $color-primary-dark: $palette-indigo-700 !default;
99 $color-accent: $palette-pink-A200 !default;
101 // Our primary is dark, so use $color-dark-contrast for overlaid text.
102 $color-primary-contrast: $color-dark-contrast !default;
103 // Our accent is dark, so use $color-dark-contrast for overlaid text.
104 $color-accent-contrast: $color-dark-contrast !default;
106 // Replace all colors with placeholders if we're generating a template.
107 @if $styleguide-generate-template == true {
108 $color-primary: '$color-primary';
109 $color-primary-dark: '$color-primary-dark';
110 $color-accent: '$color-accent';
111 $color-primary-contrast: '$color-primary-contrast';
112 $color-accent-contrast: '$color-accent-contrast';
113 }
115 /* ========== Typography ========== */
117 // We use the following default color styles: text-color-primary and
118 // text-color-secondary. For light themes, use text-color-primary-inverse
119 // and text-color-secondary-inverse.
121 $text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
122 $text-link-color: unquote("rgb(#{$color-accent})") !default;
124 // Define whether to target elements directly for typographic enhancements.
125 // Turning this off means you need to use mdl-* classes more often.
126 // Other components may also fail to adhere to MD without these rules.
127 // It is strongly recommended you leave this as true.
129 $target-elements-directly: true !default;
131 /* ========== Components ========== */
133 /* ========== Standard Buttons ========== */
135 // Default button colors.
136 $button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
137 $button-secondary-color: unquote("rgb(#{$color-black})") !default;
138 $button-hover-color: $button-primary-color !default;
139 $button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
140 $button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
142 // Colored button colors.
143 $button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
144 $button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
145 $button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
146 $button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
147 $button-focus-color-alt: $button-focus-color !default;
149 // Ripple color for colored raised buttons.
150 $button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
152 // Disabled button colors.
153 $button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
154 $button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
156 // FAB colors and sizes.
157 $button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
158 $button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
159 $button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
160 $button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
161 $button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
163 // Icon button colors and sizes.
164 $button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
165 $button-icon-focus-color: $button-focus-color !default;
167 /* ========== Icon Toggles ========== */
169 $icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
170 $icon-toggle-focus-color: $button-focus-color !default;
171 $icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
172 $icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
173 $icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
175 /* ========== Radio Buttons ========== */
177 $radio-color: unquote("rgb(#{$color-primary})") !default;
178 $radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
179 $radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
181 /* ========== Ripple effect ========== */
183 $ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
185 /* ========== Layout ========== */
187 $layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
189 // Drawer
190 $layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
191 $layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
192 $layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
193 $layout-drawer-navigation-color: #757575 !default;
194 $layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-300})") !default;
195 $layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !default;
197 // Header
198 $layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
199 $layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
200 $layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
201 $layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
203 // Tabs
204 $layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
206 /* ========== Content Tabs ========== */
208 $tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
209 $tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
210 $tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
211 $tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
213 /* ========== Checkboxes ========== */
215 $checkbox-color: unquote("rgb(#{$color-primary})") !default;
216 $checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
217 $checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
218 $checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
219 $checkbox-image-path: $image_path;
221 /* ========== Switches ========== */
223 $switch-color: unquote("rgb(#{$color-primary})") !default;
224 $switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
225 $switch-thumb-color: $switch-color !default;
226 $switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
228 $switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
229 $switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
230 $switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
231 $switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
233 /* ========== Spinner ========== */
235 $spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
236 $spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
237 $spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
238 $spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
240 $spinner-single-color: unquote("rgb(#{$color-primary})") !default;
242 /* ========== Text fields ========== */
244 $input-text-background-color: transparent !default;
245 $input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
246 $input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
247 $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
248 $input-text-disabled-color: $input-text-bottom-border-color !default;
249 $input-text-disabled-text-color: $input-text-label-color !default;
250 $input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
252 /* ========== Card ========== */
254 $card-background-color: unquote("rgb(#{$color-white})") !default;
255 $card-text-color: unquote("rgb(#{$color-black})") !default;
256 $card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
257 $card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
258 $card-border-color: rgba(0,0,0,0.1) !default;
259 $card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
261 /* ========== Sliders ========== */
263 $range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
264 $range-color: unquote("rgb(#{$color-primary})") !default;
265 $range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
266 $range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
268 /* ========== Progress ========== */
269 $progress-main-color: unquote("rgb(#{$color-primary})") !default;
270 $progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
271 $progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
272 $progress-image-path: $image_path;
274 /* ========== List ========== */
276 $list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
277 $list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
278 $list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
279 $list-avatar-color: white !default;
281 /* ========== Item ========== */
283 // Default Item Colors
284 $default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
285 $default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
286 $default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
287 $default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
288 $default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
289 $default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
291 // Disabled Button Colors
292 $disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
294 /* ========== Dropdown menu ========== */
296 $default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
298 /* ========== Tooltips ========== */
300 $tooltip-text-color: unquote("rgb(#{$color-white})") !default;
301 $tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
303 /* ========== Footer ========== */
305 $footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
306 $footer-color: unquote("rgb(#{$palette-grey-500})") !default;
307 $footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
308 $footer-button-fill-color: $footer-color !default;
309 $footer-underline-color: $footer-color !default;
312 /* TEXTFIELD */
314 $input-text-font-size: 16px !default;
315 $input-text-width: 100% !default;
316 $input-text-padding: 4px !default;
317 $input-text-vertical-spacing: 20px !default;
319 $input-text-button-size: 32px !default;
320 $input-text-floating-label-fontsize: 12px !default;
321 $input-text-expandable-icon-top: 16px !default;
324 /* SWITCH */
326 $switch-label-font-size: 16px !default;
327 $switch-label-height: 24px !default;
328 $switch-track-height: 14px !default;
329 $switch-track-length: 36px !default;
330 $switch-thumb-size: 20px !default;
331 $switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default;
332 $switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default;
333 $switch-ripple-size: $switch-label-height * 2 !default;
334 $switch-helper-size: 8px !default;
336 /* SPINNER */
338 $spinner-size: 28px !default;
339 $spinner-stroke-width: 3px !default;
341 // Amount of circle the arc takes up.
342 $spinner-arc-size: 270deg !default;
343 // Time it takes to expand and contract arc.
344 $spinner-arc-time: 1333ms !default;
345 // How much the start location of the arc should rotate each time.
346 $spinner-arc-start-rot: 216deg !default;
348 $spinner-duration: 360 * $spinner-arc-time / (
349 strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
352 /* RADIO */
354 $radio-label-font-size: 16px !default;
355 $radio-label-height: 24px !default;
356 $radio-button-size: 16px !default;
357 $radio-inner-margin: $radio-button-size / 4;
358 $radio-padding: 8px !default;
359 $radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
360 $radio-ripple-size: 42px !default;
363 /* MENU */
365 $menu-expand-duration: 0.3s !default;
366 $menu-fade-duration: 0.2s !default;
368 /* LIST */
370 $list-border: 8px !default;
371 $list-min-height: 48px !default;
372 $list-min-padding: 16px !default;
373 $list-bottom-padding: 20px !default;
374 $list-avatar-text-left-distance: 72px !default;
375 $list-icon-text-left-distance: 72px !default;
377 $list-avatar-size: 40px !default;
378 $list-icon-size: 24px !default;
380 $list-two-line-height: 72px !default;
381 $list-three-line-height: 88px !default;
383 /* LAYOUT */
385 $layout-drawer-narrow: 240px !default;
386 $layout-drawer-wide: 456px !default;
387 $layout-drawer-width: $layout-drawer-narrow !default;
389 $layout-header-icon-size: 32px !default;
390 $layout-screen-size-threshold: 1024px !default;
391 $layout-header-icon-margin: 24px !default;
392 $layout-drawer-button-mobile-size: 32px !default;
393 $layout-drawer-button-desktop-size: 48px !default;
395 $layout-header-mobile-row-height: 56px !default;
396 $layout-mobile-header-height: $layout-header-mobile-row-height;
397 $layout-header-desktop-row-height: 64px !default;
398 $layout-desktop-header-height: $layout-header-desktop-row-height;
400 $layout-header-desktop-baseline: 80px !default;
401 $layout-header-mobile-baseline: 72px !default;
402 $layout-header-mobile-indent: 16px !default;
403 $layout-header-desktop-indent: 40px !default;
405 $layout-tab-font-size: 14px !default;
406 $layout-tab-bar-height: 48px !default;
407 $layout-tab-mobile-padding: 12px !default;
408 $layout-tab-desktop-padding: 24px !default;
409 $layout-tab-highlight-thickness: 2px !default;
412 /* ICON TOGGLE */
414 $icon-toggle-size: 32px !default;
415 $icon-toggle-font-size: 24px !default;
416 $icon-toggle-ripple-size: 36px !default;
418 /* FOOTER */
420 /*mega-footer*/
421 $footer-min-padding: 16px !default;
422 $footer-padding-sides: 40px !default;
423 $footer-heading-font-size: 14px !default;
424 $footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
425 $footer-btn-size: 36px !default;
427 /*mini-footer*/
428 $padding: 16px !default;
429 $footer-heading-font-size: 24px !default;
430 $footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
431 $footer-btn-size: 36px !default;
433 /* CHECKBOX */
435 $checkbox-label-font-size: 16px !default;
436 $checkbox-label-height: 24px !default;
437 $checkbox-button-size: 16px !default;
438 $checkbox-inner-margin: 2px !default;
439 $checkbox-padding: 8px !default;
440 $checkbox-top-offset:
441 ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;
442 $checkbox-ripple-size: $checkbox-label-height * 1.5;
444 /* CARD */
446 /* Card dimensions */
447 $card-width: 330px !default;
448 $card-height: 200px !default;
449 $card-font-size: 16px !default;
450 $card-title-font-size: 24px !default;
451 $card-subtitle-font-size: 14px !default;
452 $card-horizontal-padding: 16px !default;
453 $card-vertical-padding: 16px !default;
455 $card-title-perspective-origin-x: 165px !default;
456 $card-title-perspective-origin-y: 56px !default;
458 $card-title-transform-origin-x: 165px !default;
459 $card-title-transform-origin-y: 56px !default;
461 $card-title-text-transform-origin-x: 149px !default;
462 $card-title-text-transform-origin-y: 48px !default;
464 $card-supporting-text-font-size: 1rem !default;
465 $card-supporting-text-line-height: 18px !default;
467 $card-actions-font-size: 16px !default;
469 $card-title-text-font-weight: 300 !default;
470 $card-z-index: 1 !default;
472 /* Cover image */
473 $card-cover-image-height: 186px !default;
474 $card-background-image-url: '' !default;
477 /* BUTTON */
478 /**
479 *
480 * Dimensions
481 *
482 */
483 $button-min-width: 64px !default;
484 $button-height: 36px !default;
485 $button-padding: 16px !default;
486 $button-margin: 4px !default;
487 $button-border-radius: 2px !default;
489 $button-fab-size: 56px !default;
490 $button-fab-size-mini: 40px !default;
491 $button-fab-font-size: 24px !default;
493 $button-icon-size: 32px !default;
494 $button-icon-size-mini: 24px !default;
497 /* ANIMATION */
498 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
499 $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
500 $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
502 $animation-curve-default: $animation-curve-fast-out-slow-in !default;
505 /* PROGRESS */
506 $bar-height: 4px !default;
508 /* BADGE */
509 $badge-font-size: 12px !default;
510 $badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
511 $badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
512 $badge-background: unquote("rgb(#{$color-accent})") !default;
513 $badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
514 $badge-size : 22px !default;
515 $badge-padding: 2px !default;
516 $badge-overlap: 12px !default;
518 /* SHADOWS */
520 $shadow-key-umbra-opacity: 0.2 !default;
521 $shadow-key-penumbra-opacity: 0.14 !default;
522 $shadow-ambient-shadow-opacity: 0.12 !default;
524 /* GRID */
526 $grid-desktop-columns: 12 !default;
527 $grid-desktop-gutter: 16px !default;
528 $grid-desktop-margin: 16px !default;
530 $grid-desktop-breakpoint: 840px !default;
532 $grid-tablet-columns: 8 !default;
533 $grid-tablet-gutter: $grid-desktop-gutter !default;
534 $grid-tablet-margin: $grid-desktop-margin !default;
536 $grid-tablet-breakpoint: 480px !default;
538 $grid-phone-columns: 4 !default;
539 $grid-phone-gutter: $grid-desktop-gutter !default;
540 $grid-phone-margin: $grid-desktop-margin !default;
542 $grid-cell-default-columns: $grid-phone-columns !default;
543 $grid-max-columns: $grid-desktop-columns !default;
545 /* DATA TABLE */
547 $data-table-font-size: 13px !default;
548 $data-table-header-font-size: 12px !default;
549 $data-table-header-sort-icon-size: 16px !default;
551 $data-table-header-color: rgba(#000, 0.54) !default;
552 $data-table-header-sorted-color: rgba(#000, 0.87) !default;
553 $data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
554 $data-table-divider-color: rgba(#000, 0.12) !default;
556 $data-table-hover-color: #eeeeee !default;
557 $data-table-selection-color: #e0e0e0 !default;
559 $data-table-dividers: 1px solid $data-table-divider-color !default;
561 $data-table-row-height: 48px !default;
562 $data-table-last-row-height: 56px !default;
563 $data-table-header-height: 56px !default;
565 $data-table-column-spacing: 36px !default;
566 $data-table-column-padding: $data-table-column-spacing / 2;
568 $data-table-card-header-height: 64px !default;
569 $data-table-card-title-top: 20px !default;
570 $data-table-card-padding: 24px !default;
571 $data-table-button-padding-right: 16px !default;
572 $data-table-cell-top: $data-table-card-padding / 2;
574 /* DIALOG */
575 $dialog-content-color: $card-supporting-text-text-color;
577 /* SNACKBAR */
579 // Hard coded since the color is not present in any palette.
580 $snackbar-background-color: #323232 !default;
581 $snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
582 $snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
584 /* TOOLTIP */
585 $tooltip-font-size: 10px !default;
586 $tooltip-font-size-large: 14px !default;
588 /* CHIP */
589 $chip-bg-color: rgb(222, 222, 222) !default;
590 $chip-bg-active-color: rgb(214, 214, 214) !default;
591 $chip-height: 32px !default;
592 $chip-font-size: 13px !default;