Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: scss/_variables.scss

Issue 29361647: Issue 4607 - Default content styles (Closed)
Left Patch Set: Added container & simplified html/scss Created Nov. 10, 2016, 1:22 p.m.
Right Patch Set: Removed extra list items and changed image text capitilization Created Nov. 17, 2016, 4:17 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« scss/_content.scss ('K') | « scss/_reset.scss ('k') | scss/main.scss » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 /*! 1 /*!
2 * This file is part of universal-design-language 2 * This file is part of universal-design-language
3 * Copyright (C) 2016 Eyeo GmbH 3 * Copyright (C) 2016 Eyeo GmbH
4 * 4 *
5 * universal-design-language is free software: you can redistribute it and/or 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 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 7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version. 8 * (at your option) any later version.
9 * 9 *
10 * universal-design-language is distributed in the hope that it will be useful, 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 11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details. 13 * GNU General Public License for more details.
14 * 14 *
15 * You should have received a copy of the GNU General Public License 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/>. 16 * along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
17 */ 17 */
18 18
19 /** UDL variables */ 19 /* UDL variables
20
21 /* Table of contents
22 ******************************************************************************* 20 *******************************************************************************
23 * - Basic colors 21 * ~ WARNING ~ DO NOT EDIT THIS FILE!
24 * - Gray scale 22 * Set variables within project specfic SCSS before including UDL styles.
25 * - RGB scale 23 *******************************************************************************
26 * - Brand colors 24 * - Brand colors
27 * - Primary
28 * - Secondary
29 * - Accent
30 * - Error
31 * - Fonts 25 * - Fonts
32 * - Font families
33 * - Font sizes
34 * - Font weights
35 * - Spacing 26 * - Spacing
36 * - Breakpoints 27 * - Breakpoints
37 ******************************************************************************/ 28 ******************************************************************************/
38
39 /* Basic colors
40 ******************************************************************************/
41
42 /* Gray scale */
43
44 $white: #fafafa !default;
45 $gray-light: #e0e0e0 !default;
46 $gray: #9e9e9e !default;
47 $gray-dark: #616161 !default;
48 $black: #212121 !default;
49
50 /* RGB scale */
51
52 $red-light: #ffcdd2 !default;
53 $red: #f44336 !default;
54 $red-dark: #b71c1c !default;
55
56 $green-light: #c8e6c9 !default;
57 $green: #4caf50 !default;
58 $green-dark: #1b5e20 !default;
59
60 $blue-light: #bbdefb !default;
61 $blue: #2196f3 !default;
62 $blue-dark: #0d47a1 !default;
63 29
64 /* Brand colors 30 /* Brand colors
65 ******************************************************************************/ 31 ******************************************************************************/
66 32
67 /* Primary - The most widely used across all screens and components. */ 33 /* Primary - The most widely used across all screens and components. */
68 34
69 $primary: $white !default; 35 $primary: #212121 !default;
70 $primary-foreground: $black !default; 36 $primary-light: #fafafa !default;
71 $primary-background: $white !default; 37 $primary-dark: #000 !default;
72 38
73 /* Secondary - Used to indicate a related action or information. */ 39 /* Secondary - Used to indicate a related action or information. */
74 40
75 $secondary: $gray-dark !default; 41 $secondary: #9e9e9e !default;
76 $secondary-foreground: $gray-light !default; 42 $secondary-light: #9e9e9e !default;
77 $secondary-background: $gray-dark !default; 43 $secondary-dark: #424242 !default;
78 44
79 /* Accent - Used for action buttons and interactive elements. */ 45 /* Accent - Used for action buttons and interactive elements. */
80 46
81 $accent: $blue !default; 47 $accent: #1565c0 !default;
82 $accent-foreground: $white !default; 48 $accent-light: #e3f2fd !default;
83 $accent-background: $blue-dark !default; 49 $accent-dark: #0d47a1 !default;
84 50
85 /* Error - Used for error messages and warnings. */ 51 /* Error - Used for error messages and warnings. */
86 52
87 $error: $red !default; 53 $error: #f44336 !default;
88 $error-foreground: $white !default; 54 $error-light: #ffebee !default;
89 $error-background: $red-dark !default; 55 $error-dark: #b71c1c !default;
90 56
91 /* Fonts 57 /* Fonts
92 ******************************************************************************/ 58 ******************************************************************************/
93 59
94 /* Font families */ 60 $primary-font: sans-serif !default;
95 61 $secondary-font: serif !default;
96 $sans-font: sans-serif !default;
97 $serif-font: serif !default;
98 $monospace-font: monospace !default; 62 $monospace-font: monospace !default;
99 63
100 /* Font sizes */ 64 $large-font: 20px !default;
101
102 $large-font: 24px !default;
103 $medium-font: 16px !default; 65 $medium-font: 16px !default;
104 $small-font: 12px !default; 66 $small-font: 12px !default;
105
106 /* Font weights */
107 67
108 $bold-weight: 600 !default; 68 $bold-weight: 600 !default;
109 $normal-weight: 400 !default; 69 $normal-weight: 400 !default;
110 $thin-weight: 300 !default; 70 $thin-weight: 300 !default;
111 71
112 /* Spacing 72 /* Spacing
113 ******************************************************************************/ 73 ******************************************************************************/
114 74
115 $large-space: 64px !default; 75 $large-space: 64px !default;
116 $medium-space: 32px !default; 76 $medium-space: 32px !default;
117 $small-space: 16px !default; 77 $small-space: 16px !default;
118 78
119 /* Breakpoints 79 /* Breakpoints
120 ******************************************************************************/ 80 ******************************************************************************/
121 81
122 $mobile-breakpoint: 576px !default;
123 $tablet-breakpoint: 768px !default; 82 $tablet-breakpoint: 768px !default;
saroyanm 2016/11/24 15:18:44 We will remove "!default", because people should n
juliandoucette 2016/11/25 16:28:45 Done.
124 $desktop-breakpoint: 992px !default; 83 $desktop-breakpoint: 992px !default;
84
85 /* Container widths
saroyanm 2016/11/21 18:44:41 Not sure if we need this variables, see my comment
juliandoucette 2016/11/22 00:54:05 Acknowledged. See my comment on the other page.
juliandoucette 2016/11/25 16:28:44 Done.
86 ******************************************************************************/
87
88 $mobile-width: 540px !default;
89 $tablet-width: 720px !default;
90 $desktop-width: 960px !default;
LEFTRIGHT

Powered by Google App Engine
This is Rietveld