maccounter
225 строк · 3.7 Кб
1.sidebar {
2position: sticky;
3top: 100px;
4padding: 20px;
5height: max-content;
6display: flex;
7flex-direction: column;
8transition: .2s;
9user-select: none;
10z-index: 999;
11flex-shrink: 0;
12}
13
14.prompt {
15position: absolute;
16transform-origin: left center;
17opacity: 0;
18pointer-events: none;
19
20background-color: var(--color-bg-component);
21padding: 10px 10px 10px 20px;
22border-radius: var(--size-border-rad-component);
23margin-left: -7px;
24overflow: hidden;
25transition: 0.2s;
26z-index: 0;
27}
28
29.sidebarItem {
30position: relative;
31display: flex;
32align-items: center;
33
34color: var(--color-disable);
35transition: .2s;
36cursor: pointer;
37
38--svg-color-fill: var(--color-bg-component);
39--svg-color-stroke: var(--color-disable);
40
41&:not(:last-child) {
42margin-bottom: 50px;
43}
44
45svg {
46width: 24px;
47height: 24px;
48transition: 0.08s;
49position: relative;
50fill: var(--svg-color-fill);
51z-index: 1;
52
53path {
54transition: 0.08s;
55stroke: var(--svg-color-stroke);
56}
57}
58}
59
60.sidebarProfile {
61display: flex;
62align-items: center;
63justify-content: center;
64width: 24px;
65height: 24px;
66color: var(--color-disable);
67border: 1px solid var(--color-disable);
68border-radius: 50%;
69font-size: var(--size-font-icon);
70transition: .2s;
71position: relative;
72z-index: 1;
73}
74
75.expand {
76svg {
77fill: none;
78
79path {
80stroke: var(--svg-color-stroke);
81}
82}
83}
84
85/* При активной вкладке */
86.active {
87.sidebarProfile {
88background-color: var(--color-disable);
89color: var(--color-side);
90border-color: var(--color-side);
91}
92
93svg {
94--svg-color-fill: var(--color-disable);
95
96path {
97--svg-color-stroke: var(--color-side);
98}
99}
100
101&.expand {
102path {
103stroke: var(--color-disable);
104}
105}
106}
107
108/* При наведении */
109
110.sidebarItem:hover {
111
112.sidebarProfile {
113background-color: var(--color-main);
114border-color: var(--color-main);
115color: var(--color-bg-component);
116}
117
118svg {
119--svg-color-fill: var(--color-main);
120
121path {
122--svg-color-stroke: var(--color-bg-component);
123}
124}
125
126&.expand {
127path {
128stroke: var(--svg-color-fill);
129}
130}
131}
132
133/* При наведении и ожидании 0.5с */
134
135.promptActive {
136position: relative;
137
138&.sidebarItem {
139svg {
140--svg-color-fill: var(--color-main);
141
142path {
143--svg-color-stroke: var(--color-bg-component);
144}
145}
146
147.sidebarProfile {
148background-color: var(--color-main);
149border-color: var(--color-bg-component);
150}
151
152&.expand {
153path {
154stroke: var(--svg-color-stroke);
155}
156}
157}
158
159.prompt {
160transform: scaleX(1);
161
162opacity: 1;
163
164background-color: var(--color-main);
165padding: 10px 10px 10px 54px;
166color: var(--color-bg-component);
167z-index: 0;
168}
169}
170
171/* При двойном щелчке */
172
173.opened {
174.sidebarItem {
175overflow: hidden;
176
177svg {
178
179path {
180--svg-color-stroke: var(--color-txt);
181transition: 0.2s;
182}
183}
184
185.sidebarProfile {
186border-color: var(--color-txt);
187color: var(--color-txt);
188}
189
190.prompt {
191pointer-events: unset;
192opacity: 1;
193transform: scaleX(1);
194color: var(--color-txt);
195margin-left: 20px;
196padding-right: 0;
197}
198
199&.expand {
200path {
201stroke: var(--svg-color-stroke);
202}
203}
204
205&:hover {
206.sidebarProfile {
207background: none;
208border-color: var(--color-main);
209color: var(--color-main);
210}
211
212svg {
213--svg-color-fill: var(--color-bg-component);
214
215path {
216--svg-color-stroke: var(--color-main);
217}
218}
219
220.prompt {
221color: var(--color-main);
222}
223}
224}
225}
226