From 312b2d859943900a8784d0fbdc1cc03db0ab2be4 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Thu, 2 Apr 2020 16:46:30 +0200 Subject: [PATCH] :art: better disposal for theme selector --- src/app/app.component.html | 112 ++++++++++-------- src/app/app.component.scss | 10 +- src/app/config/PollConfig.ts | 2 +- .../theme-selector.component.html | 8 +- .../theme-selector.component.scss | 4 + src/assets/scss/themes/_all.scss | 3 + src/assets/scss/themes/_dark.scss | 44 +++++++ src/assets/scss/themes/_light.scss | 57 --------- src/assets/scss/themes/_red.scss | 14 +++ src/styles.scss | 2 +- 10 files changed, 135 insertions(+), 121 deletions(-) create mode 100644 src/assets/scss/themes/_all.scss create mode 100644 src/assets/scss/themes/_dark.scss create mode 100644 src/assets/scss/themes/_red.scss diff --git a/src/app/app.component.html b/src/app/app.component.html index 38558bb5..90e7c6cd 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,61 +2,73 @@ id='big_container' class={{this.config.themeClass}} > -
- -

- Frama - date (démo) -

-
proposé par - Frama - soft -
-
-
-
- location icon - menu icon - - Menu -
+
+
+
+ +
+
+
+ location icon + menu icon + + Menu +
+ +
+
+
+ +
+
+
-
- -
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index bfbfe33c..558e632f 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,13 +1,7 @@ @charset "UTF-8"; -header { - h1, - a { - &::before, - &::after { - display: none; - } - } +.big-header { + padding: 0.5rem; } i { diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts index 2bc809bf..4299c25a 100644 --- a/src/app/config/PollConfig.ts +++ b/src/app/config/PollConfig.ts @@ -31,7 +31,7 @@ export class PollConfig { // front end choices themeChoices: string[] = ['light-watermelon', 'dark-crystal', 'hot-covid']; themeSelected: number = 0; - themeClass: string = 'light-watermelon'; + themeClass: string = 'theme-light-watermelon'; title: string = 'titre'; description: string = 'ma description'; myName: string = 'mon pseudo'; diff --git a/src/app/ui/theme-selector/theme-selector.component.html b/src/app/ui/theme-selector/theme-selector.component.html index 6c5e6cdd..a72bd49a 100644 --- a/src/app/ui/theme-selector/theme-selector.component.html +++ b/src/app/ui/theme-selector/theme-selector.component.html @@ -1,22 +1,22 @@
-

Thème ( {{config.themeClass}})

+

Thème

light dark diff --git a/src/app/ui/theme-selector/theme-selector.component.scss b/src/app/ui/theme-selector/theme-selector.component.scss index e69de29b..11a14ba2 100644 --- a/src/app/ui/theme-selector/theme-selector.component.scss +++ b/src/app/ui/theme-selector/theme-selector.component.scss @@ -0,0 +1,4 @@ +:host { + text-align: center; + padding: 0.5em; +} diff --git a/src/assets/scss/themes/_all.scss b/src/assets/scss/themes/_all.scss new file mode 100644 index 00000000..8dd2cea3 --- /dev/null +++ b/src/assets/scss/themes/_all.scss @@ -0,0 +1,3 @@ +@import "light"; +@import "dark"; +@import "red"; diff --git a/src/assets/scss/themes/_dark.scss b/src/assets/scss/themes/_dark.scss new file mode 100644 index 00000000..34c6e185 --- /dev/null +++ b/src/assets/scss/themes/_dark.scss @@ -0,0 +1,44 @@ +#big_container { + + &.theme-dark-crystal { + background: #222; + color: #ddd; + + main { + background: #444; + } + + h1::after { + background-color: #1b6d85; + } + + .btn--primary:focus, .btn--primary:hover, .btn--primary:active, + .btn--primary { + background-color: #1b6d85; + } + + .btn--warning:focus, .btn--warning:hover, .btn--warning:active, + .btn--warning { + background-color: #554685; + } + + select { + background: #1b6d85; + border-color: #1b6d85; + + &:hover { + color: #ccc; + } + } + + .title { + color: #ccc; + } + + .lang_icon, .menu_icon { + fill: #1b6d85 !important; + color: #1b6d85 !important; + } + + } +} diff --git a/src/assets/scss/themes/_light.scss b/src/assets/scss/themes/_light.scss index 5e638f7a..fd612607 100644 --- a/src/assets/scss/themes/_light.scss +++ b/src/assets/scss/themes/_light.scss @@ -3,61 +3,4 @@ background: #fff; } - &.theme-dark-crystal { - background: #222; - color: #ddd; - - main { - background: #444; - padding-top: 4em; - padding-bottom: 6em; - } - - h1::after { - background-color: #1b6d85; - } - - .btn--primary:focus, .btn--primary:hover, .btn--primary:active, - .btn--primary { - background-color: #1b6d85; - } - - .btn--warning:focus, .btn--warning:hover, .btn--warning:active, - .btn--warning { - background-color: #554685; - } - - select { - background: #1b6d85; - border-color: #1b6d85; - - &:hover { - color: #ccc; - } - } - - .title { - color: #ccc; - } - - .lang_icon, .menu_icon { - fill: #1b6d85 !important; - color: #1b6d85 !important; - } - - } - - &.theme-hot-covid { - background: #ffbca4; - color: #501016; - - h1::after { - background-color: #850003; - } - - .btn--primary:focus, .btn--primary:hover, .btn--primary:active, .btn--primary { - background-color: #850003 !important; - } - } - } diff --git a/src/assets/scss/themes/_red.scss b/src/assets/scss/themes/_red.scss new file mode 100644 index 00000000..154e2e7c --- /dev/null +++ b/src/assets/scss/themes/_red.scss @@ -0,0 +1,14 @@ +#big_container { + &.theme-hot-covid { + background: #ffbca4; + color: #501016; + + h1::after { + background-color: #850003; + } + + .btn--primary:focus, .btn--primary:hover, .btn--primary:active, .btn--primary { + background-color: #850003 !important; + } + } +} diff --git a/src/styles.scss b/src/styles.scss index 01c88de0..5d489038 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -2,7 +2,7 @@ @import "~bulma/bulma"; @import "assets/scss/variables"; @import "assets/scss/default"; -@import "assets/scss/themes/light"; +@import "assets/scss/themes/all"; @import "assets/scss/useful_classes"; @import "assets/scss/atoms/main";