| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 /*! | 
|  | 2  * This file is part of universal-design-language | 
|  | 3  * Copyright (C) 2016 Eyeo GmbH | 
|  | 4  * | 
|  | 5  * universal-design-language is free software: you can redistribute it and/or | 
|  | 6  * modify it under the terms of the GNU General Public License as published by | 
|  | 7  * the Free Software Foundation, either version 3 of the License, or | 
|  | 8  * (at your option) any later version. | 
|  | 9  * | 
|  | 10  * universal-design-language is distributed in the hope that it will be useful, | 
|  | 11  * but WITHOUT ANY WARRANTY; without even the implied warranty of | 
|  | 12  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | 
|  | 13  * GNU General Public License for more details. | 
|  | 14  * | 
|  | 15  * You should have received a copy of the GNU General Public License | 
|  | 16  * along with web.starter-kit.  If not, see <http://www.gnu.org/licenses/>. | 
|  | 17  */ | 
|  | 18 | 
|  | 19 /* colors | 
|  | 20  ******************************************************************************/ | 
|  | 21 | 
|  | 22 $white: #fafafa; | 
|  | 23 $gray-light: #e0e0e0; | 
|  | 24 $gray: #9e9e9e; | 
|  | 25 $gray-dark: #616161; | 
|  | 26 $black: #212121; | 
|  | 27 | 
|  | 28 $red-light: #ffcdd2; | 
|  | 29 $red: #f44336; | 
|  | 30 $red-dark: #b71c1c; | 
|  | 31 | 
|  | 32 $green-light: #c8e6c9; | 
|  | 33 $green: #4caf50; | 
|  | 34 $green-dark: #1b5e20; | 
|  | 35 | 
|  | 36 $blue-light: #bbdefb; | 
|  | 37 $blue: #2196f3; | 
|  | 38 $blue-dark: #0d47a1; | 
|  | 39 | 
|  | 40 $primary: $white; | 
|  | 41 $primary-foreground: $black; | 
|  | 42 $primary-background: $white; | 
|  | 43 | 
|  | 44 $inverted: $black; | 
|  | 45 $inverted-foreground: $white; | 
|  | 46 $inverted-background: $black; | 
|  | 47 | 
|  | 48 $secondary: $gray-dark; | 
|  | 49 $secondary-foreground: $gray-light; | 
|  | 50 $secondary-background: $gray-dark; | 
|  | 51 | 
|  | 52 $accent: $blue; | 
|  | 53 $accent-foreground: $white; | 
|  | 54 $accent-background: $blue-dark; | 
|  | 55 | 
|  | 56 $error: $red; | 
|  | 57 $error-foreground: $white; | 
|  | 58 $error-background: $red-dark; | 
|  | 59 | 
|  | 60 /* font sizes | 
|  | 61  ******************************************************************************/ | 
|  | 62 | 
|  | 63 $large-font: 18px; | 
|  | 64 $medium-font: 16px; | 
|  | 65 $small-font: 14px; | 
|  | 66 | 
|  | 67 /* font weights | 
|  | 68  ******************************************************************************/ | 
|  | 69 | 
|  | 70 $bold-weight: 600; | 
|  | 71 $normal-weight: 400; | 
|  | 72 $thin-weight: 300; | 
|  | 73 | 
|  | 74 /* spacing | 
|  | 75  ******************************************************************************/ | 
|  | 76 | 
|  | 77 $large-space: 48px; | 
|  | 78 $medium-space: 24px; | 
|  | 79 $small-space: 12px; | 
|  | 80 | 
|  | 81 /* breakpoints | 
|  | 82  ******************************************************************************/ | 
|  | 83 | 
|  | 84 $mobile-breakpoint: 576px; | 
|  | 85 $tablet-breakpoint: 768px; | 
|  | 86 $desktop-breakpoint: 992px; | 
| OLD | NEW | 
|---|