diff options
Diffstat (limited to 'client/src/sass/include/_variables.scss')
-rw-r--r-- | client/src/sass/include/_variables.scss | 42 |
1 files changed, 40 insertions, 2 deletions
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 7fd178c3b..792a3f9c2 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss | |||
@@ -8,8 +8,6 @@ $grey-hoover-color: #EFEFEF;; | |||
8 | $orange-color: #F1680D; | 8 | $orange-color: #F1680D; |
9 | $orange-hoover-color: #F97D46; | 9 | $orange-hoover-color: #F97D46; |
10 | 10 | ||
11 | $black-background: #000; | ||
12 | $grey-background: #f6f2f2; | ||
13 | $bg-color: #fff; | 11 | $bg-color: #fff; |
14 | $fg-color: #000; | 12 | $fg-color: #000; |
15 | 13 | ||
@@ -27,11 +25,14 @@ $header-height: 50px; | |||
27 | $header-border-color: #e9eff6; | 25 | $header-border-color: #e9eff6; |
28 | $search-input-width: 375px; | 26 | $search-input-width: 375px; |
29 | 27 | ||
28 | $menu-background: #000; | ||
30 | $menu-color: #fff; | 29 | $menu-color: #fff; |
31 | $menu-bottom-color: #C6C6C6; | 30 | $menu-bottom-color: #C6C6C6; |
32 | $menu-width: 240px; | 31 | $menu-width: 240px; |
33 | $menu-left-padding: 26px; | 32 | $menu-left-padding: 26px; |
34 | 33 | ||
34 | $sub-menu-color: #F7F7F7; | ||
35 | |||
35 | $footer-height: 30px; | 36 | $footer-height: 30px; |
36 | $footer-margin: 30px; | 37 | $footer-margin: 30px; |
37 | 38 | ||
@@ -41,3 +42,40 @@ $video-thumbnail-height: 110px; | |||
41 | $video-thumbnail-width: 200px; | 42 | $video-thumbnail-width: 200px; |
42 | 43 | ||
43 | $theater-bottom-space: 85px; | 44 | $theater-bottom-space: 85px; |
45 | |||
46 | $input-color: $bg-color; | ||
47 | $input-placeholder-color: #898989; | ||
48 | |||
49 | /*** theme ***/ | ||
50 | |||
51 | body { | ||
52 | // now beware node-sass requires interpolation | ||
53 | // for css custom properties #{$var} | ||
54 | --mainColor: #{$orange-color}; | ||
55 | --mainHoverColor: #{$orange-hoover-color}; | ||
56 | --mainBackgroundColor: #{$bg-color}; | ||
57 | --mainForegroundColor: #{$fg-color}; | ||
58 | --submenuColor: #{$sub-menu-color}; | ||
59 | --inputColor: #{$input-color}; | ||
60 | --inputPlaceholderColor: #{$input-placeholder-color}; | ||
61 | } | ||
62 | |||
63 | /*** map theme ***/ | ||
64 | |||
65 | // pass variables into a sass map, | ||
66 | // to be warned of non-existing variables | ||
67 | $variables: ( | ||
68 | --mainColor: var(--mainColor), | ||
69 | --mainHoverColor: var(--mainHoverColor), | ||
70 | --mainBackgroundColor: var(--mainBackgroundColor), | ||
71 | --mainForegroundColor: var(--mainForegroundColor), | ||
72 | --submenuColor: var(--submenuColor), | ||
73 | --inputColor: var(--inputColor), | ||
74 | --inputPlaceholderColor: var(--inputPlaceholderColor) | ||
75 | ); | ||
76 | |||
77 | /*** theme helper ***/ | ||
78 | |||
79 | @function var($variable) { | ||
80 | @return map-get($variables, $variable); | ||
81 | } | ||