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

Unified Diff: scss/_variables.scss

Issue 29361647: Issue 4607 - Default content styles (Closed)
Patch Set: Removed accidental default in license header Created Nov. 8, 2016, 3:51 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « scss/_reset.scss ('k') | scss/main.scss » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: scss/_variables.scss
===================================================================
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -11,76 +11,114 @@
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
*/
-/* colors
+/** UDL variables */
+
+/* Table of contents
+ *******************************************************************************
+ * - Basic colors
+ * - Gray scale
+ * - RGB scale
+ * - Brand colors
+ * - Primary
+ * - Secondary
+ * - Accent
+ * - Error
+ * - Fonts
+ * - Font families
+ * - Font sizes
+ * - Font weights
+ * - Spacing
+ * - Breakpoints
******************************************************************************/
-$white: #fafafa;
-$gray-light: #e0e0e0;
-$gray: #9e9e9e;
-$gray-dark: #616161;
-$black: #212121;
-
-$red-light: #ffcdd2;
-$red: #f44336;
-$red-dark: #b71c1c;
-
-$green-light: #c8e6c9;
-$green: #4caf50;
-$green-dark: #1b5e20;
-
-$blue-light: #bbdefb;
-$blue: #2196f3;
-$blue-dark: #0d47a1;
-
-$primary: $white;
-$primary-foreground: $black;
-$primary-background: $white;
-
-$inverted: $black;
-$inverted-foreground: $white;
-$inverted-background: $black;
-
-$secondary: $gray-dark;
-$secondary-foreground: $gray-light;
-$secondary-background: $gray-dark;
-
-$accent: $blue;
-$accent-foreground: $white;
-$accent-background: $blue-dark;
-
-$error: $red;
-$error-foreground: $white;
-$error-background: $red-dark;
-
-/* font sizes
+/* Basic colors
******************************************************************************/
-$large-font: 24px;
-$medium-font: 16px;
-$small-font: 12px;
+/* Gray scale */
-/* font weights
+$white: #fafafa !default;
+$gray-light: #e0e0e0 !default;
+$gray: #9e9e9e !default;
+$gray-dark: #616161 !default;
+$black: #212121 !default;
+
+/* RGB scale */
+
+$red-light: #ffcdd2 !default;
+$red: #f44336 !default;
+$red-dark: #b71c1c !default;
+
+$green-light: #c8e6c9 !default;
+$green: #4caf50 !default;
+$green-dark: #1b5e20 !default;
+
+$blue-light: #bbdefb !default;
+$blue: #2196f3 !default;
+$blue-dark: #0d47a1 !default;
+
+/* Brand colors
******************************************************************************/
-$bold-weight: 600;
-$normal-weight: 400;
-$thin-weight: 300;
+/* Primary - The most widely used across all screens and components. */
-/* spacing
+$primary: $white !default;
+$primary-foreground: $black !default;
+$primary-background: $white !default;
+
+/* Secondary - Used to indicate a related action or information. */
+
+$secondary: $gray-dark !default;
+$secondary-foreground: $gray-light !default;
+$secondary-background: $gray-dark !default;
+
+/* Accent - Used for action buttons and interactive elements. */
+
+$accent: $blue !default;
+$accent-foreground: $white !default;
+$accent-background: $blue-dark !default;
+
+/* Error - Used for error messages and warnings. */
+
+$error: $red !default;
+$error-foreground: $white !default;
+$error-background: $red-dark !default;
+
+/* Fonts
******************************************************************************/
-$large-space: 56px;
-$medium-space: 34px;
-$small-space: 12px;
+/* Font families */
-/* breakpoints
+$sans-font: sans-serif !default;
+$serif-font: serif !default;
+$monospace-font: monospace !default;
+
+/* Font sizes */
+
+$large-font: 24px !default;
+$medium-font: 16px !default;
+$small-font: 12px !default;
+
+/* Font weights */
+
+$bold-weight: 600 !default;
+$normal-weight: 400 !default;
+$thin-weight: 300 !default;
+
+/* Spacing
******************************************************************************/
-$mobile-breakpoint: 576px;
-$tablet-breakpoint: 768px;
-$desktop-breakpoint: 992px;
+$large-space: 64px !default;
+$medium-space: 32px !default;
+$small-space: 16px !default;
+
+/* Breakpoints
+ ******************************************************************************/
+
+$mobile-breakpoint: 576px !default;
+$tablet-breakpoint: 768px !default;
+$desktop-breakpoint: 992px !default;
« no previous file with comments | « scss/_reset.scss ('k') | scss/main.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld