adjust framework css
This commit is contained in:
@@ -63,7 +63,7 @@ p,
|
|||||||
li,
|
li,
|
||||||
td,
|
td,
|
||||||
label {
|
label {
|
||||||
color: colours.$grey-dark;
|
color: colours.$grey-darker;
|
||||||
font-family: fonts.$font;
|
font-family: fonts.$font;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$button}.#{$name}.inverted {
|
#{$button}.#{$name}.outline {
|
||||||
color: $hex;
|
color: $hex;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-color: $hex;
|
border-color: $hex;
|
||||||
|
|||||||
@@ -13,48 +13,50 @@ $secondary: #5bc0de;
|
|||||||
$tertiary: color.invert($primary);
|
$tertiary: color.invert($primary);
|
||||||
$quaternary: color.invert($secondary);
|
$quaternary: color.invert($secondary);
|
||||||
|
|
||||||
|
//== Shades
|
||||||
|
$white: #FFFFFF;
|
||||||
|
$grey: #808080;
|
||||||
|
$black: #000000;
|
||||||
|
|
||||||
//== Primary Tints
|
//== Primary Tints
|
||||||
$primary-darkest: color.adjust($primary, $lightness: -30%);
|
$primary-darkest: color.adjust($primary, $lightness: -45%);
|
||||||
$primary-darker: color.adjust($primary, $lightness: -20%);
|
$primary-darker: color.adjust($primary, $lightness: -30%);
|
||||||
$primary-dark: color.adjust($primary, $lightness: -10%);
|
$primary-dark: color.adjust($primary, $lightness: -15%);
|
||||||
$primary-light: color.adjust($primary, $lightness: 10%);
|
$primary-light: color.adjust($primary, $lightness: 15%);
|
||||||
$primary-lighter: color.adjust($primary, $lightness: 20%);
|
$primary-lighter: color.adjust($primary, $lightness: 30%);
|
||||||
$primary-lightest: color.adjust($primary, $lightness: 30%);
|
$primary-lightest: color.adjust($primary, $lightness: 45%);
|
||||||
|
|
||||||
//== Secondary Tints
|
//== Secondary Tints
|
||||||
$secondary-darkest: color.adjust($secondary, $lightness: -30%);
|
$secondary-darkest: color.adjust($secondary, $lightness: -45%);
|
||||||
$secondary-darker: color.adjust($secondary, $lightness: -20%);
|
$secondary-darker: color.adjust($secondary, $lightness: -30%);
|
||||||
$secondary-dark: color.adjust($secondary, $lightness: -10%);
|
$secondary-dark: color.adjust($secondary, $lightness: -15%);
|
||||||
$secondary-light: color.adjust($secondary, $lightness: 10%);
|
$secondary-light: color.adjust($secondary, $lightness: 15%);
|
||||||
$secondary-lighter: color.adjust($secondary, $lightness: 20%);
|
$secondary-lighter: color.adjust($secondary, $lightness: 30%);
|
||||||
$secondary-lightest: color.adjust($secondary, $lightness: 30%);
|
$secondary-lightest: color.adjust($secondary, $lightness: 45%);
|
||||||
|
|
||||||
//== Tertiary Tints
|
//== Tertiary Tints
|
||||||
$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
|
$tertiary-darkest: color.adjust($tertiary, $lightness: -45%);
|
||||||
$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
|
$tertiary-darker: color.adjust($tertiary, $lightness: -30%);
|
||||||
$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
|
$tertiary-dark: color.adjust($tertiary, $lightness: -15%);
|
||||||
$tertiary-light: color.adjust($tertiary, $lightness: 10%);
|
$tertiary-light: color.adjust($tertiary, $lightness: 15%);
|
||||||
$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
|
$tertiary-lighter: color.adjust($tertiary, $lightness: 30%);
|
||||||
$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
|
$tertiary-lightest: color.adjust($tertiary, $lightness: 45%);
|
||||||
|
|
||||||
//== quaternary Tints
|
//== quaternary Tints
|
||||||
$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
|
$quaternary-darkest: color.adjust($quaternary, $lightness: -45%);
|
||||||
$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
|
$quaternary-darker: color.adjust($quaternary, $lightness: -30%);
|
||||||
$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
|
$quaternary-dark: color.adjust($quaternary, $lightness: -15%);
|
||||||
$quaternary-light: color.adjust($quaternary, $lightness: 10%);
|
$quaternary-light: color.adjust($quaternary, $lightness: 15%);
|
||||||
$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
|
$quaternary-lighter: color.adjust($quaternary, $lightness: 30%);
|
||||||
$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
|
$quaternary-lightest: color.adjust($quaternary, $lightness: 45%);
|
||||||
|
|
||||||
//== Shades
|
//== six shades of grey
|
||||||
$white: white;
|
$grey-darkest: color.adjust(grey, $lightness: -40%);
|
||||||
$grey-lightest: color.adjust(black, $lightness: 95%);
|
$grey-darker: color.adjust(grey, $lightness: -25%);
|
||||||
$grey-lighter: color.adjust(black, $lightness: 80%);
|
$grey-dark: color.adjust(grey, $lightness: -10%);
|
||||||
$grey-light: color.adjust(black, $lightness: 70%);
|
$grey-light: color.adjust(grey, $lightness: 10%);
|
||||||
$grey: color.adjust(black, $lightness: 50%);
|
$grey-lighter: color.adjust(grey, $lightness: 25%);
|
||||||
$grey-dark: color.adjust(black, $lightness: 40%);
|
$grey-lightest: color.adjust(grey, $lightness: 40%);
|
||||||
$grey-darker: color.adjust(black, $lightness: 20%);
|
|
||||||
$grey-darkest: color.adjust(black, $lightness: 05%);
|
|
||||||
$black: black;
|
|
||||||
|
|
||||||
//## Colour Array (used in generating colour classes).
|
//## Colour Array (used in generating colour classes).
|
||||||
$colors: (
|
$colors: (
|
||||||
|
|||||||
Reference in New Issue
Block a user