diff options
author | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
---|---|---|
committer | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/content-tabs.scss | |
parent | 5.0.0 beta.18 (diff) | |
download | ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip |
Update stylesheets and added darkMode variable and toggle.
Diffstat (limited to 'src/styles/content-tabs.scss')
-rw-r--r-- | src/styles/content-tabs.scss | 34 |
1 files changed, 12 insertions, 22 deletions
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index 47dfea2c4..ca3820fb4 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -2,53 +2,43 @@ | |||
2 | 2 | ||
3 | .content-tabs { | 3 | .content-tabs { |
4 | .content-tabs__tabs { | 4 | .content-tabs__tabs { |
5 | display: flex; | ||
6 | border-top-left-radius: $theme-border-radius-small; | 5 | border-top-left-radius: $theme-border-radius-small; |
7 | border-top-right-radius: $theme-border-radius-small; | 6 | border-top-right-radius: $theme-border-radius-small; |
7 | display: flex; | ||
8 | overflow: hidden; | 8 | overflow: hidden; |
9 | 9 | ||
10 | .content-tabs__item { | 10 | .content-tabs__item { |
11 | padding: 10px; | ||
12 | flex: 1; | ||
13 | // border: 1px solid $theme-gray-lightest; | ||
14 | color: $theme-gray-dark; | ||
15 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); | 11 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); |
16 | border-right: 1px solid $theme-gray-lighter; | 12 | border-right: 1px solid $theme-gray-lighter; |
13 | color: $theme-gray-dark; | ||
14 | flex: 1; | ||
15 | padding: 10px; | ||
17 | transition: background $theme-transition-time; | 16 | transition: background $theme-transition-time; |
18 | 17 | ||
19 | &:last-of-type { | 18 | &:last-of-type { border-right: 0; } |
20 | border-right: 0; | ||
21 | } | ||
22 | 19 | ||
23 | &.is-active { | 20 | &.is-active { |
24 | background: $theme-brand-primary; | 21 | background: $theme-brand-primary; |
25 | color: #FFF; | ||
26 | box-shadow: none; | 22 | box-shadow: none; |
23 | color: #FFF; | ||
27 | } | 24 | } |
28 | } | 25 | } |
29 | } | 26 | } |
30 | 27 | ||
31 | .content-tabs__content { | 28 | .content-tabs__content { |
32 | padding: 20px 20px; | 29 | background: $theme-gray-lightest; |
33 | border-bottom-left-radius: $theme-border-radius-small; | 30 | border-bottom-left-radius: $theme-border-radius-small; |
34 | border-bottom-right-radius: $theme-border-radius-small; | 31 | border-bottom-right-radius: $theme-border-radius-small; |
35 | background: $theme-gray-lightest; | 32 | padding: 20px 20px; |
36 | 33 | ||
37 | .content-tabs__item { | 34 | .content-tabs__item { |
38 | top: 0; | ||
39 | display: none; | 35 | display: none; |
36 | top: 0; | ||
40 | 37 | ||
41 | &.is-active { | 38 | &.is-active { display: block; } |
42 | display: block; | ||
43 | } | ||
44 | } | ||
45 | |||
46 | .franz-form__input-wrapper { | ||
47 | background: #FFF; | ||
48 | } | 39 | } |
49 | 40 | ||
50 | .franz-form__field:last-of-type { | 41 | .franz-form__input-wrapper { background: #FFF; } |
51 | margin-bottom: 0; | 42 | .franz-form__field:last-of-type { margin-bottom: 0; } |
52 | } | ||
53 | } | 43 | } |
54 | } | 44 | } |