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