diff options
Diffstat (limited to 'src/styles/tabs.scss')
-rw-r--r-- | src/styles/tabs.scss | 99 |
1 files changed, 42 insertions, 57 deletions
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index ac48aabd6..384495481 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -1,104 +1,89 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .tab-item { | ||
4 | &.is-active { | ||
5 | background: $dark-theme-gray; | ||
6 | border-left: 0; | ||
7 | |||
8 | .tab-item__icon { margin-left: -4px; } | ||
9 | } | ||
10 | |||
11 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); } | ||
12 | .tab-item__icon { width: 34px; } | ||
13 | } | ||
14 | |||
3 | .tabs { | 15 | .tabs { |
4 | display: flex; | 16 | display: flex; |
5 | // flex: 1; | ||
6 | flex-direction: column; | 17 | flex-direction: column; |
7 | flex-shrink: 1; | 18 | flex-shrink: 1; |
8 | // align-items: center; | ||
9 | // height: auto; | ||
10 | 19 | ||
11 | .placeholder { | 20 | .placeholder { |
12 | width: 100%; | ||
13 | height: 40px; | 21 | height: 40px; |
22 | width: 100%; | ||
14 | } | 23 | } |
15 | } | 24 | } |
16 | 25 | ||
17 | .tab-item { | 26 | .tab-item { |
18 | display: flex; | ||
19 | justify-content: center; | ||
20 | align-items: center; | 27 | align-items: center; |
21 | position: relative; | 28 | display: flex; |
22 | width: $theme-sidebar-width; | ||
23 | height: 65px; | 29 | height: 65px; |
30 | justify-content: center; | ||
24 | min-height: 50px; | 31 | min-height: 50px; |
32 | position: relative; | ||
25 | transition: background $theme-transition-time; | 33 | transition: background $theme-transition-time; |
34 | width: $theme-sidebar-width; | ||
26 | 35 | ||
27 | &.is-active { | 36 | &.is-active { |
28 | border-left: 4px solid $theme-brand-primary; | ||
29 | background: lighten($theme-brand-primary, 35%); | 37 | background: lighten($theme-brand-primary, 35%); |
38 | border-left: 4px solid $theme-brand-primary; | ||
30 | 39 | ||
31 | .tab-item__icon { | 40 | .tab-item__icon { margin-left: -4px; } |
32 | margin-left: -4px; | ||
33 | } | ||
34 | } | ||
35 | |||
36 | &.is-disabled { | ||
37 | .tab-item__icon { | ||
38 | filter: grayscale(100%) opacity(0.2); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | &.has-custom-icon { | ||
43 | .tab-item__icon { | ||
44 | border-radius: $theme-border-radius; | ||
45 | // border: 1px solid $theme-gray-lighter; | ||
46 | // width: 32px; | ||
47 | } | ||
48 | } | 41 | } |
49 | 42 | ||
50 | &:active { | 43 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); } |
51 | .tab-item__icon { | 44 | &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; } |
52 | opacity: 0.7; | 45 | &:active .tab-item__icon { opacity: .7; } |
53 | } | ||
54 | } | ||
55 | 46 | ||
56 | .tab-item__icon { | 47 | .tab-item__icon { |
57 | width: 30px; | ||
58 | height: auto; | 48 | height: auto; |
49 | width: 30px; | ||
59 | } | 50 | } |
60 | 51 | ||
61 | .tab-item__message-count { | 52 | .tab-item__message-count { |
62 | min-width: 17px; | 53 | align-items: center; |
63 | min-height: 17px; | ||
64 | background: $theme-brand-danger; | 54 | background: $theme-brand-danger; |
65 | color: #FFF; | ||
66 | border-radius: 20px; | 55 | border-radius: 20px; |
67 | padding: 0px 5px; | ||
68 | font-size: 11px; | ||
69 | position: absolute; | ||
70 | right: 8px; | ||
71 | bottom: 8px; | 56 | bottom: 8px; |
57 | color: #FFF; | ||
72 | display: flex; | 58 | display: flex; |
59 | font-size: 11px; | ||
73 | justify-content: center; | 60 | justify-content: center; |
74 | align-items: center; | 61 | min-height: 17px; |
62 | min-width: 17px; | ||
63 | padding: 0px 5px; | ||
64 | position: absolute; | ||
65 | right: 8px; | ||
75 | 66 | ||
76 | &.is-indirect { | 67 | &.is-indirect { padding-top: 0; } |
77 | padding-top: 0px; | ||
78 | } | ||
79 | } | 68 | } |
80 | 69 | ||
81 | .tab-item__info-badge { | 70 | .tab-item__info-badge { |
82 | width: 17px; | 71 | align-items: center; |
83 | height: 17px; | ||
84 | background: $theme-gray-light; | 72 | background: $theme-gray-light; |
85 | color: $theme-gray-lighter; | 73 | bottom: 8px; |
86 | border-radius: 20px; | 74 | border-radius: 20px; |
87 | padding: 0px 5px; | 75 | color: $theme-gray-lighter; |
76 | display: flex; | ||
88 | font-size: 11px; | 77 | font-size: 11px; |
78 | height: 17px; | ||
79 | justify-content: center; | ||
80 | padding: 0px 5px; | ||
89 | position: absolute; | 81 | position: absolute; |
90 | right: 8px; | 82 | right: 8px; |
91 | bottom: 8px; | 83 | width: 17px; |
92 | display: flex; | ||
93 | justify-content: center; | ||
94 | align-items: center; | ||
95 | 84 | ||
96 | &.is-indirect { | 85 | &.is-indirect { padding-top: 0; } |
97 | padding-top: 0px; | ||
98 | } | ||
99 | } | 86 | } |
100 | 87 | ||
101 | &.is-reordering { | 88 | &.is-reordering { z-index: 99999; } |
102 | z-index: 99999; | ||
103 | } | ||
104 | } | 89 | } |