From 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 Mon Sep 17 00:00:00 2001 From: Gareth Coles Date: Tue, 5 Jun 2018 16:07:35 +0100 Subject: Move from CSS to SCSS (#86) * Rewrite existing style.css with sass * Add "uses-rst" class for pages that use rendered RST This replaces the previous method of just listing every page in the sass * Remove old debug print * Mixins and error pages * Newly built CSS * Add SASS cache to .gitignore * New error SASS * Slight changes to error template * Add UIKit SCSS to repo This includes the LICENSE and our customizations, which makes life way easier for contributors * Reorganize sass folder; your watchers can avoid uikit now * Sass folder should be called scss * Change variable names * [SCSS] Linting * Fix scss_lint gem name [ci skip] * [SCSS] Now you can compile with just Python! * Temporary hack to make the wiki editor taller * [SCSS] @jchristgit * [SCSS.py] Require specification of include dir to simplify the SCSS imports * [SCSS] All inline styles have been removed * [SCSS] Update UIKit theme to import from our variables * [SCSS] Remove extra newlines in errors/_common.scss --- scss/uikit/components/variables.scss | 117 +++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 scss/uikit/components/variables.scss (limited to 'scss/uikit/components/variables.scss') diff --git a/scss/uikit/components/variables.scss b/scss/uikit/components/variables.scss new file mode 100644 index 00000000..a08406a0 --- /dev/null +++ b/scss/uikit/components/variables.scss @@ -0,0 +1,117 @@ +// +// Component: Variables +// Description: Defines common values which are used across all components +// +// ======================================================================== + + +// Breakpoints +// ======================================================================== + +// Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736) +// Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414) +// Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280), +// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366), +// Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024) + +$breakpoint-small: 640px !default; // Phone landscape +$breakpoint-medium: 960px !default; // Tablet Landscape +$breakpoint-large: 1200px !default; // Desktop +$breakpoint-xlarge: 1600px !default; // Large Screens + +$breakpoint-xsmall-max: ($breakpoint-small - 1) !default; +$breakpoint-small-max: ($breakpoint-medium - 1) !default; +$breakpoint-medium-max: ($breakpoint-large - 1) !default; +$breakpoint-large-max: ($breakpoint-xlarge - 1) !default; + + +// Global variables +// ======================================================================== + +// +// Typography +// + +$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$global-font-size: 16px !default; +$global-line-height: 1.5 !default; // 24px + +$global-xxlarge-font-size: 2.625rem !default; // 42px +$global-xlarge-font-size: 2rem !default; // 32px +$global-large-font-size: 1.5rem !default; // 24px +$global-medium-font-size: 1.25rem !default; // 20px +$global-small-font-size: 0.875rem !default; // 14px + +// +// Colors +// + +$global-color: #666 !default; +$global-emphasis-color: #333 !default; +$global-muted-color: #999 !default; + +$global-link-color: #1e87f0 !default; +$global-link-hover-color: #0f6ecd !default; + +$global-inverse-color: #fff !default; + +// +// Backgrounds +// + +$global-background: #fff !default; + +$global-muted-background: #f8f8f8 !default; +$global-primary-background: #1e87f0 !default; +$global-secondary-background: #222 !default; + +$global-success-background: #32d296 !default; +$global-warning-background: #faa05a !default; +$global-danger-background: #f0506e !default; + +// +// Borders +// + +$global-border-width: 1px !default; +$global-border: #e5e5e5 !default; + +// +// Box-Shadows +// + +$global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default; +$global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default; +$global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default; +$global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default; + +// +// Spacings +// + +// Used in margin, section, list +$global-margin: 20px !default; +$global-small-margin: 10px !default; +$global-medium-margin: 40px !default; +$global-large-margin: 70px !default; +$global-xlarge-margin: 140px !default; + +// Used in grid, column, container, align, card, padding +$global-gutter: 30px !default; +$global-small-gutter: 15px !default; +$global-medium-gutter: 40px !default; +$global-large-gutter: 70px !default; + +// +// Controls +// + +$global-control-height: 40px !default; +$global-control-small-height: 30px !default; +$global-control-large-height: 55px !default; + +// +// Z-index +// + +$global-z-index: 1000 !default; \ No newline at end of file -- cgit v1.2.3