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/service-table.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/service-table.scss')
-rw-r--r-- | src/styles/service-table.scss | 39 |
1 files changed, 20 insertions, 19 deletions
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss index 66d5ac941..f2090685b 100644 --- a/src/styles/service-table.scss +++ b/src/styles/service-table.scss | |||
@@ -1,62 +1,63 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .service-table { | ||
4 | .service-table__icon.has-custom-icon { border: 1px solid $dark-theme-gray-dark; } | ||
5 | .service-table__column-info .mdi { color: $dark-theme-gray-lightest; } | ||
6 | |||
7 | .service-table__row { | ||
8 | border-bottom: 1px solid $dark-theme-gray-darker; | ||
9 | |||
10 | &:hover { background: $dark-theme-gray-darker; } | ||
11 | &.service-table__row--disabled { color: $dark-theme-gray; } | ||
12 | } | ||
13 | } | ||
14 | |||
3 | .service-table { | 15 | .service-table { |
4 | width: 100%; | 16 | width: 100%; |
5 | 17 | ||
6 | .service-table__toggle { | 18 | .service-table__toggle { |
7 | width: 60px; | 19 | width: 60px; |
8 | 20 | ||
9 | .franz-form__field { | 21 | .franz-form__field { margin-bottom: 0; } |
10 | margin-bottom: 0; | ||
11 | } | ||
12 | } | 22 | } |
13 | 23 | ||
14 | .service-table__icon { | 24 | .service-table__icon { |
15 | width: 35px; | 25 | width: 35px; |
16 | 26 | ||
17 | &.has-custom-icon { | 27 | &.has-custom-icon { |
18 | border-radius: $theme-border-radius; | ||
19 | border: 1px solid $theme-gray-lighter; | 28 | border: 1px solid $theme-gray-lighter; |
29 | border-radius: $theme-border-radius; | ||
20 | width: 37px; | 30 | width: 37px; |
21 | } | 31 | } |
22 | } | 32 | } |
23 | 33 | ||
24 | .service-table__column-icon { | 34 | .service-table__column-icon, |
25 | width: 40px; | 35 | .service-table__column-action { width: 40px } |
26 | } | ||
27 | |||
28 | .service-table__column-action { | ||
29 | width: 40px | ||
30 | } | ||
31 | 36 | ||
32 | .service-table__column-info { | 37 | .service-table__column-info { |
33 | width: 40px; | 38 | width: 40px; |
34 | 39 | ||
35 | .mdi { | 40 | .mdi { |
41 | color: $theme-gray-light; | ||
36 | display: block; | 42 | display: block; |
37 | font-size: 18px; | 43 | font-size: 18px; |
38 | color: $theme-gray-light; | ||
39 | } | 44 | } |
40 | } | 45 | } |
41 | 46 | ||
42 | .service-table__row { | 47 | .service-table__row { |
43 | border-bottom: 1px solid $theme-gray-lightest; | 48 | border-bottom: 1px solid $theme-gray-lightest; |
44 | 49 | ||
45 | &:hover { | 50 | &:hover { background: $theme-gray-lightest; } |
46 | background: $theme-gray-lightest; | ||
47 | } | ||
48 | 51 | ||
49 | &.service-table__row--disabled { | 52 | &.service-table__row--disabled { |
50 | color: $theme-gray-light; | 53 | color: $theme-gray-light; |
51 | 54 | ||
52 | .service-table__column-icon { | 55 | .service-table__column-icon { |
53 | filter: grayscale(100%); | 56 | filter: grayscale(100%); |
54 | opacity: 0.5; | 57 | opacity: .5; |
55 | } | 58 | } |
56 | } | 59 | } |
57 | } | 60 | } |
58 | 61 | ||
59 | td { | 62 | td { padding: 10px; } |
60 | padding: 10px; | ||
61 | } | ||
62 | } | 63 | } |