rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use sass varaiables to set custom css properties

This commit is contained in:
Ray Elliott 2020-04-20 18:43:19 +00:00
parent de1aa40c3e
commit 720eb44ce0
1 changed files with 84 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/css/imports/variables.scss
View File

@ -3,54 +3,93 @@ $bp-s: 40em;
$bp-m: 50em; $bp-m: 50em;
$bp-l: 80em; $bp-l: 80em;
$bp-footer-s: 28em;
$bp-footer-m: 60em;
$bp-hero: $bp-m;
$z-index__header: 100; $z-index__header: 100;
:root { $color-primary-100: #eff8ff;
--primary-100: #eff8ff; $color-primary-200: #aad4f5;
--primary-200: #aad4f5; $color-primary-300: #63a2d8;
--primary-300: #63a2d8; $color-primary-400: #3183c8;
--primary-400: #3183c8; $color-primary-500: #2368a2;
--primary-500: #2368a2; $color-primary-600: #1a4971;
--primary-600: #1a4971; $color-primary-700: #203d54;
--primary-700: #203d54; // $color-primary-800: #203d54;
// --primary-800: #203d54; // $color-primary-900: #203d54;
// --primary-900: #203d54; $color-neutral-100: #f8f9fa;
--neutral-100: #f8f9fa; $color-neutral-200: #e1e7ec;
--neutral-200: #e1e7ec; $color-neutral-300: #cfd6de;
--neutral-300: #cfd6de; $color-neutral-400: #b8c4ce;
--neutral-400: #b8c4ce; $color-neutral-500: #8895a7;
--neutral-500: #8895a7; $color-neutral-600: #5f6b7a;
--neutral-600: #5f6b7a; $color-neutral-700: #212934;
--neutral-700: #212934; // $color-neutral-800: #212934;
// --neutral-800: #212934; // $color-neutral-900: #212934;
// --neutral-900: #212934; $color-accent-primary-100: #e3fcec;
--accent-primary-100: #e3fcec; $color-accent-primary-200: #a8eec1;
--accent-primary-200: #a8eec1; $color-accent-primary-300: #74d99f;
--accent-primary-300: #74d99f; $color-accent-primary-400: #38c172;
--accent-primary-400: #38c172; $color-accent-primary-500: #259d58;
--accent-primary-500: #259d58; $color-accent-primary-600: #197741;
--accent-primary-600: #197741; $color-accent-primary-700: #145239;
--accent-primary-700: #145239; // $color-accent-primary-800: #145239;
// --accent-primary-800: #145239; // $color-accent-primary-900: #145239;
// --accent-primary-900: #145239; $color-accent-secondary-100: #fce8e8;
--accent-secondary-100: #fce8e8; $color-accent-secondary-200: #f5aaaa;
--accent-secondary-200: #f5aaaa; $color-accent-secondary-300: #e46464;
--accent-secondary-300: #e46464; $color-accent-secondary-400: #dc3030;
--accent-secondary-400: #dc3030; $color-accent-secondary-500: #b82020;
--accent-secondary-500: #b82020; $color-accent-secondary-600: #891b1b;
--accent-secondary-600: #891b1b; $color-accent-secondary-700: #611818;
--accent-secondary-700: #611818; // $color-accent-secondary-800: #611818;
// --accent-secondary-800: #611818; // $color-accent-secondary-900: #611818;
// --accent-secondary-900: #611818;
// --accent-tertiary-100: #e7ffee; // $color-accent-tertiary-100: #e7ffee;
// --accent-quaternary-100: #fffcf4; // $color-accent-quaternary-100: #fffcf4;
// --accent-quinary-100: #ffeefc; // $color-accent-quinary-100: #ffeefc;
$color-color__body: $color-neutral-600;
$color-color-bg: $color-neutral-100;
:root {
--primary-100: #{$color-primary-100};
--primary-200: #{$color-primary-200};
--primary-300: #{$color-primary-300};
--primary-400: #{$color-primary-400};
--primary-500: #{$color-primary-500};
--primary-600: #{$color-primary-600};
--primary-700: #{$color-primary-700};
// --primary-800: #{$color-primary-800};
// --primary-900: #{$color-primary-900};
--neutral-100: #{$color-neutral-100};
--neutral-200: #{$color-neutral-200};
--neutral-300: #{$color-neutral-300};
--neutral-400: #{$color-neutral-400};
--neutral-500: #{$color-neutral-500};
--neutral-600: #{$color-neutral-600};
--neutral-700: #{$color-neutral-700};
// --neutral-800: #{$color-neutral-800};
// --neutral-900: #{$color-neutral-900};
--accent-primary-100: #{$color-accent-primary-100};
--accent-primary-200: #{$color-accent-primary-200};
--accent-primary-300: #{$color-accent-primary-300};
--accent-primary-400: #{$color-accent-primary-400};
--accent-primary-500: #{$color-accent-primary-500};
--accent-primary-600: #{$color-accent-primary-600};
--accent-primary-700: #{$color-accent-primary-700};
//--accent-primary-800: #{$color-accent-primary-800};
//--accent-primary-900: #{$color-accent-primary-900};
--accent-secondary-100: #{$color-accent-secondary-100};
--accent-secondary-200: #{$color-accent-secondary-200};
--accent-secondary-300: #{$color-accent-secondary-300};
--accent-secondary-400: #{$color-accent-secondary-400};
--accent-secondary-500: #{$color-accent-secondary-500};
--accent-secondary-600: #{$color-accent-secondary-600};
--accent-secondary-700: #{$color-accent-secondary-700};
//--accent-secondary-800: #{$color-accent-secondary-800};
//--accent-secondary-900: #{$color-accent-secondary-900};
//--accent-tertiary-100: #{$color-color-accent-tertiary-100};
//--accent-quaternary-100: #{$color-accent-quaternary-100};
//--accent-quinary-100: #{$color-accent-quinary-100};
--color__body: var(--neutral-600); --color__body: var(--neutral-600);
--color-bg: var(--neutral-100); --color-bg: var(--neutral-100);