diff options
Diffstat (limited to 'src/styles/tabs.scss')
-rw-r--r-- | src/styles/tabs.scss | 58 |
1 files changed, 39 insertions, 19 deletions
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 31a239387..df10da77c 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -4,11 +4,17 @@ | |||
4 | &.is-active { | 4 | &.is-active { |
5 | background: $dark-theme-gray; | 5 | background: $dark-theme-gray; |
6 | 6 | ||
7 | .tab-item__icon { margin-left: -4px; } | 7 | .tab-item__icon { |
8 | margin-left: -4px; | ||
9 | } | ||
8 | } | 10 | } |
9 | 11 | ||
10 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); } | 12 | &.is-disabled .tab-item__icon { |
11 | .tab-item__icon { width: 34px; } | 13 | filter: grayscale(100%) opacity(0.2); |
14 | } | ||
15 | .tab-item__icon { | ||
16 | width: 34px; | ||
17 | } | ||
12 | } | 18 | } |
13 | 19 | ||
14 | .tabs { | 20 | .tabs { |
@@ -29,22 +35,34 @@ | |||
29 | justify-content: center; | 35 | justify-content: center; |
30 | min-height: 50px; | 36 | min-height: 50px; |
31 | position: relative; | 37 | position: relative; |
32 | transition: background $theme-transition-time; | 38 | @media (prefers-reduced-motion: no-preference) { |
39 | transition: background $theme-transition-time; | ||
40 | } | ||
33 | width: $theme-sidebar-width; | 41 | width: $theme-sidebar-width; |
34 | 42 | ||
35 | &.is-active { | 43 | &.is-active { |
36 | background: change-color($theme-brand-primary, | 44 | background: change-color( |
37 | $lightness: min(lightness($theme-brand-primary) * 1.35, 100)); | 45 | $theme-brand-primary, |
46 | $lightness: min(lightness($theme-brand-primary) * 1.35, 100) | ||
47 | ); | ||
38 | border-left-width: 4px; | 48 | border-left-width: 4px; |
39 | border-left-style: solid; | 49 | border-left-style: solid; |
40 | color: $theme-brand-primary; | 50 | color: $theme-brand-primary; |
41 | 51 | ||
42 | .tab-item__icon { margin-left: -4px; } | 52 | .tab-item__icon { |
53 | margin-left: -4px; | ||
54 | } | ||
43 | } | 55 | } |
44 | 56 | ||
45 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); } | 57 | &.is-disabled .tab-item__icon { |
46 | &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; } | 58 | filter: grayscale(100%) opacity(0.2); |
47 | &:active .tab-item__icon { opacity: .7; } | 59 | } |
60 | &.has-custom-icon .tab-item__icon { | ||
61 | border-radius: $theme-border-radius; | ||
62 | } | ||
63 | &:active .tab-item__icon { | ||
64 | opacity: 0.7; | ||
65 | } | ||
48 | 66 | ||
49 | .tab-item__icon { | 67 | .tab-item__icon { |
50 | height: auto; | 68 | height: auto; |
@@ -56,7 +74,7 @@ | |||
56 | background: $theme-brand-danger; | 74 | background: $theme-brand-danger; |
57 | border-radius: 20px; | 75 | border-radius: 20px; |
58 | bottom: 8px; | 76 | bottom: 8px; |
59 | color: #FFF; | 77 | color: #fff; |
60 | display: flex; | 78 | display: flex; |
61 | font-size: 11px; | 79 | font-size: 11px; |
62 | justify-content: center; | 80 | justify-content: center; |
@@ -66,13 +84,13 @@ | |||
66 | position: absolute; | 84 | position: absolute; |
67 | right: 8px; | 85 | right: 8px; |
68 | 86 | ||
69 | &.is-indirect { | 87 | &.is-indirect { |
70 | padding-top: 0; | 88 | padding-top: 0; |
71 | background: #0088cc; | 89 | background: #0088cc; |
72 | } | 90 | } |
73 | &.hibernating { | 91 | &.hibernating { |
74 | padding-top: 0; | 92 | padding-top: 0; |
75 | background: $theme-gray; | 93 | background: $theme-gray; |
76 | font-size: 0px; | 94 | font-size: 0px; |
77 | min-height: 10px; | 95 | min-height: 10px; |
78 | min-width: 10px; | 96 | min-width: 10px; |
@@ -96,11 +114,13 @@ | |||
96 | right: 8px; | 114 | right: 8px; |
97 | width: 17px; | 115 | width: 17px; |
98 | 116 | ||
99 | &.is-indirect { | 117 | &.is-indirect { |
100 | padding-top: 0; | 118 | padding-top: 0; |
101 | background: #0088cc; | 119 | background: #0088cc; |
102 | } | 120 | } |
103 | } | 121 | } |
104 | 122 | ||
105 | &.is-reordering { z-index: 99999; } | 123 | &.is-reordering { |
124 | z-index: 99999; | ||
125 | } | ||
106 | } | 126 | } |