Permalink
Fetching contributors…
Cannot retrieve contributors at this time
200 lines (159 sloc) 6.56 KB
/*===============================================
Variables - Co-op Front-end Toolkit
===============================================*/
// These default settings can be overriden in your project's stylesheet.
// To do so, declare them before this file is included, which will
// replace the defaults given here.
// Base URL for any linked assets. This should be the path to your assets
// relative to the generated stylesheet.
$base-asset-url: '../' !default;
// Maximum IE version targetted by the generated stylesheet.
$ie: 999 !default;
$base-line-height: 1.6 !default; // 32px
$base-spacing-unit: 64px !default;
$three-quarter-spacing-unit: $base-spacing-unit / 4 * 3 !default; // 45px
$half-spacing-unit: $base-spacing-unit / 2 !default; // 32px
$quarter-spacing-unit: $half-spacing-unit / 2 !default; // 16px
$sixth-spacing-unit: $base-spacing-unit / 6 !default; // 10.66666667px (legacy)
$eighth-spacing-unit: $base-spacing-unit / 8 !default; // 8px
$typographic-scale: (
base: (
body: 16px,
h-mega: 36px,
h1: 30px,
h2: 20px,
h3: 18px,
h4: 18px,
h5: 18px,
h6: 13px,
blockquote: 20px,
lead: 20px,
small: 13px,
base-line-height: 1.7,
base-spacing-unit: 32px,
),
medium: (
body: 20px,
h-mega: 60px,
h1: 46px,
h2: 26px,
h3: 22px,
h4: 22px,
h5: 22px,
h6: 16px,
blockquote: 26px,
lead: 26px,
small: 13px,
base-line-height: 1.6,
base-spacing-unit: 64px,
)
) !default;
// Border radius
$border-radius: 7px !default;
$regular: 'AvenirNextLTW01-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$medium: 'AvenirNextLTW01-Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$regular-italic: 'AvenirNextLTW01-Italic', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$bold: 'AvenirNextLTW01-Demi', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$bold-italic: 'AvenirNextLTW01-DemiIta', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
// Grid settings
$grid-gutter: $half-spacing-unit !default;
$grid-screen-sizes: ("xsmall", "small", "medium", "large", "xlarge") !default; // Only classes listed here will be generated. These classes should follow the breakpoints given below.
$grid-total-columns: 12 !default; // If less than 12 columns are required, setting this lower will reduce the amount of column width classes generated.
$grid-include-center-classes: true !default; // If set to false, column centring classes (e.g. '.small-centered') will not be generated.
$grid-include-pull-classes: true !default; // If set to false, column pull classes (e.g. '.small-pull-2') will not be generated.
$grid-include-push-classes: true !default; // If set to false, column push classes (e.g. '.small-push-2') will not be generated.
$grid-include-offset-classes: true !default; // If set to false, column offset classes (e.g. '.small-offset-4') will not be generated.
// Breakpoints
$breakpoints: (
xsmall: 320px,
small: 480px,
medium: 750px,
large: 960px,
xlarge: 1300px
) !default;
// Viewport orientation
$landscape: "only screen and (orientation: landscape)" !default;
$portrait: "only screen and (orientation: portrait)" !default;
/*
Colour
===============================================*/
// Transitioning to rational variable names
// Where colours are attached to an element. They should be named as the element where possible
// in case it changes colour in the future. EG: $link
// Where the colour is an explicit part of the palette it should be named as: $colour-hue
// Brand
$coop-brand-blue: #00B1E7 !default;
$brand: $coop-brand-blue;
// Text
$body-copy: #282828 !default;
$text: $body-copy;
// Page
$white: #FFFFFF !default;
$page: $white;
// Links
$coop-link-blue: #00729A !default;
$coop-link-hover-blue: #00394E !default;
$coop-blue-highlighted: #00A1CC !default;
$coop-link-visited: #551A8B !default;
$link: $coop-link-blue;
$link-hover: $coop-link-hover-blue;
$link-focus: $coop-blue-highlighted;
$link-visited: $coop-link-visited;
// Buttons
$button-green: #0F8482 !default;
$button-green-highlighted: #2B9E9C !default;
$button-primary: $button-green;
$button-primary-hover: $button-green-highlighted;
$button-grey: #374C63 !default;
$button-grey-highlighted: #4A6683 !default;
$button-primary-dark: $button-grey;
$button-primary-dark-hover: $button-grey-highlighted;
// Secondary colours
$yellow-bright: #FFFF00 !default;
$yellow-light: #FFEC00 !default;
$yellow-mid: #FFD308 !default;
$green-bright: #EDFB3C !default;
$green-light: #BAD303 !default;
$green-mid: #4F820D !default;
$green-dark: #385C0A !default;
$green-blue-bright: #0AFBFB !default;
$green-blue-light: #72DCDB !default;
$green-blue-mid: #0F8482 !default;
$green-blue-dark: #166D66 !default;
$blue-bright: #418CFC !default;
$blue-light: #92D8FE !default;
$blue-mid: #326BB7 !default;
$blue-dark: #334C89 !default;
$pink-bright: #FC43D3 !default;
$pink-light: #FF80D3 !default;
$purple-mid: #AD208E !default;
$purple-dark: #61307D !default;
$orange-mid: #F8642C !default;
$red-mid: #D63118 !default;
$red-dark: #9F2A00 !default;
// These legacy vars now fall into the secondary palette
// and will later be removed
$success-green: $green-mid;
$info-orange: $orange-mid;
$saleerror-red: $red-mid;
$added-to-page: $yellow-light;
// Greys
// Reclassified as $foo-grey below
$offwhite: #F3F3F3 !default;
$offwhite-highlighted: #C4C4C4 !default;
$light-grey: #C4C4C4 !default;
$mid-grey: $light-grey;
$dark-grey: $light-grey;
$coop-border-grey: #C4C4C4 !default;
$coop-grey: #6E6E6E !default;
// New grey vars
$grey-light: $offwhite;
$grey-mid: $coop-border-grey;
$grey-dark: $coop-grey;
$black: #000000 !default;
// Escaped classification (for now)
$bluey-dark-grey: #3E464C !default;
$coop-grey-unselected: #949494 !default;
$darker-grey: #333333 !default;
// The ugly duckling
$coop-blue: #00A1CC !default;