maccounter

1
.sidebar {
2
  position: sticky;
3
  top: 100px;
4
  padding: 20px;
5
  height: max-content;
6
  display: flex;
7
  flex-direction: column;
8
  transition: .2s;
9
  user-select: none;
10
  z-index: 999;
11
  flex-shrink: 0;
12
}
13

14
.prompt {
15
  position: absolute;
16
  transform-origin: left center;
17
  opacity: 0;
18
  pointer-events: none;
19

20
  background-color: var(--color-bg-component);
21
  padding: 10px 10px 10px 20px;
22
  border-radius: var(--size-border-rad-component);
23
  margin-left: -7px;
24
  overflow: hidden;
25
  transition: 0.2s;
26
  z-index: 0;
27
}
28

29
.sidebarItem {
30
  position: relative;
31
  display: flex;
32
  align-items: center;
33

34
  color: var(--color-disable);
35
  transition: .2s;
36
  cursor: pointer;
37

38
  --svg-color-fill: var(--color-bg-component);
39
  --svg-color-stroke: var(--color-disable);
40

41
  &:not(:last-child) {
42
    margin-bottom: 50px;
43
  }
44

45
  svg {
46
    width: 24px;
47
    height: 24px;
48
    transition: 0.08s;
49
    position: relative;
50
    fill: var(--svg-color-fill);
51
    z-index: 1;
52

53
    path {
54
      transition: 0.08s;
55
      stroke: var(--svg-color-stroke);
56
    }
57
  }
58
}
59

60
.sidebarProfile {
61
  display: flex;
62
  align-items: center;
63
  justify-content: center;
64
  width: 24px;
65
  height: 24px;
66
  color: var(--color-disable);
67
  border: 1px solid var(--color-disable);
68
  border-radius: 50%;
69
  font-size: var(--size-font-icon);
70
  transition: .2s;
71
  position: relative;
72
  z-index: 1;
73
}
74

75
.expand {
76
  svg {
77
    fill: none;
78

79
    path {
80
      stroke: var(--svg-color-stroke);
81
    }
82
  }
83
}
84

85
/* При активной вкладке */
86
.active {
87
  .sidebarProfile {
88
    background-color: var(--color-disable);
89
    color: var(--color-side);
90
    border-color: var(--color-side);
91
  }
92

93
  svg {
94
    --svg-color-fill: var(--color-disable);
95

96
    path {
97
      --svg-color-stroke: var(--color-side);
98
    }
99
  }
100

101
  &.expand {
102
    path {
103
      stroke: var(--color-disable);
104
    }
105
  }
106
}
107

108
/* При наведении */
109

110
.sidebarItem:hover {
111

112
  .sidebarProfile {
113
    background-color: var(--color-main);
114
    border-color: var(--color-main);
115
    color: var(--color-bg-component);
116
  }
117

118
  svg {
119
    --svg-color-fill: var(--color-main);
120

121
    path {
122
      --svg-color-stroke: var(--color-bg-component);
123
    }
124
  }
125

126
  &.expand {
127
    path {
128
      stroke: var(--svg-color-fill);
129
    }
130
  }
131
}
132

133
/* При наведении и ожидании 0.5с */
134

135
.promptActive {
136
  position: relative;
137

138
  &.sidebarItem {
139
    svg {
140
      --svg-color-fill: var(--color-main);
141

142
      path {
143
        --svg-color-stroke: var(--color-bg-component);
144
      }
145
    }
146

147
    .sidebarProfile {
148
      background-color: var(--color-main);
149
      border-color: var(--color-bg-component);
150
    }
151

152
    &.expand {
153
      path {
154
        stroke: var(--svg-color-stroke);
155
      }
156
    }
157
  }
158

159
  .prompt {
160
    transform: scaleX(1);
161

162
    opacity: 1;
163

164
    background-color: var(--color-main);
165
    padding: 10px 10px 10px 54px;
166
    color: var(--color-bg-component);
167
    z-index: 0;
168
  }
169
}
170

171
/* При двойном щелчке */
172

173
.opened {
174
  .sidebarItem {
175
    overflow: hidden;
176

177
    svg {
178

179
      path {
180
        --svg-color-stroke: var(--color-txt);
181
        transition: 0.2s;
182
      }
183
    }
184

185
    .sidebarProfile {
186
      border-color: var(--color-txt);
187
      color: var(--color-txt);
188
    }
189

190
    .prompt {
191
      pointer-events: unset;
192
      opacity: 1;
193
      transform: scaleX(1);
194
      color: var(--color-txt);
195
      margin-left: 20px;
196
      padding-right: 0;
197
    }
198

199
    &.expand {
200
      path {
201
        stroke: var(--svg-color-stroke);
202
      }
203
    }
204

205
    &:hover {
206
      .sidebarProfile {
207
        background: none;
208
        border-color: var(--color-main);
209
        color: var(--color-main);
210
      }
211

212
      svg {
213
        --svg-color-fill: var(--color-bg-component);
214

215
        path {
216
          --svg-color-stroke: var(--color-main);
217
        }
218
      }
219

220
      .prompt {
221
        color: var(--color-main);
222
      }
223
    }
224
  }
225
}
226