vgapp 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,312 +1,312 @@
1
- @charset "UTF-8";
2
- /**
3
- *--------------------------------------------------------------------------
4
- * Модуль: VGNav
5
- * Автор: Vegas DEV
6
- * Лицензия: смотри LICENSE
7
- *--------------------------------------------------------------------------
8
- **/
9
- .vg-nav {
10
- --vg-nav-transition: all 0.2s ease-in-out ;
11
- --vg-nav-item-margin: 0 ;
12
- --vg-nav-item-padding: 23px 25px ;
13
- --vg-nav-item-font-size: 1rem ;
14
- --vg-nav-item-font-weight: 400 ;
15
- --vg-nav-item-line-height: 1.4 ;
16
- --vg-nav-item-color: #212529 ;
17
- --vg-nav-item-decoration: none ;
18
- --vg-nav-item-display: inline-block ;
19
- --vg-nav-item-border: none ;
20
- --vg-nav-item-border-radius: 0 ;
21
- --vg-nav-item-white-space: nowrap ;
22
- --vg-nav-item-position: relative ;
23
- --vg-nav-drop-z-index: 10 ;
24
- --vg-nav-drop-transition: all 0.2s ease-in-out ;
25
- --vg-nav-drop-width: 200px ;
26
- --vg-nav-drop-border-color: rgba(0, 0, 0, 0.2) ;
27
- --vg-nav-drop-border-radius: 0 ;
28
- --vg-nav-drop-padding: 0 ;
29
- --vg-nav-drop-bg: #fff ;
30
- --vg-nav-drop-mega-width: 100% ;
31
- --vg-nav-drop-mega-min-height: 300px ;
32
- --vg-nav-drop-mega-bg: #fff ;
33
- --vg-nav-drop-mega-border-color: rgba(0, 0, 0, 0.2) ;
34
- --vg-nav-drop-mega-border-radius: 0 ;
35
- --vg-nav-drop-mega-padding: 1rem ;
36
- --vg-nav-drop-mega-z-index: 10 ;
37
- --vg-nav-drop-mega-transition: all 0.2s ease-in-out ;
38
- --vg-nav-drop-item-padding: 0.75rem 1rem ;
39
- --vg-nav-drop-item-border-color: transparent ;
40
- --vg-nav-drop-item-border-color-hover: transparent ;
41
- --vg-nav-drop-item-bg: transparent ;
42
- --vg-nav-drop-item-bg-hover: transparent ;
43
- --vg-nav-drop-item-color: inherit ;
44
- --vg-nav-drop-item-color-hover: inherit ;
45
- --vg-nav-drop-item-transition: all 0.2s ease-in-out ;
46
- --vg-nav-hamburger-height: 27px ;
47
- --vg-nav-hamburger-line-width: 35px ;
48
- --vg-nav-hamburger-line-color: #333333 ;
49
- --vg-nav-hamburger-line-height: 3px ;
50
- --vg-nav-hamburger-line-indent-top: 7px ;
51
- /** set placement **/
52
- /** set hamburger **/
53
- }
54
- .vg-nav .vg-nav-wrapper {
55
- display: flex;
56
- padding: 0;
57
- margin: 0;
58
- position: relative;
59
- }
60
- .vg-nav .vg-nav-wrapper > li {
61
- list-style: none;
62
- margin: var(--vg-nav-item-margin);
63
- /** set toggle **/
64
- }
65
- .vg-nav .vg-nav-wrapper > li > a {
66
- white-space: var(--vg-nav-item-white-space);
67
- position: var(--vg-nav-item-position);
68
- display: var(--vg-nav-item-display);
69
- padding: var(--vg-nav-item-padding);
70
- font-size: var(--vg-nav-item-font-size);
71
- font-weight: var(--vg-nav-item-font-weight);
72
- line-height: var(--vg-nav-item-line-height);
73
- color: var(--vg-nav-item-color);
74
- text-decoration: var(--vg-nav-item-decoration);
75
- border: var(--vg-nav-item-border);
76
- border-radius: var(--vg-nav-item-border-radius);
77
- }
78
- .vg-nav .vg-nav-wrapper > li .toggle {
79
- transition: var(--vg-nav-transition);
80
- transform: rotate(0);
81
- }
82
- .vg-nav .vg-nav-wrapper > li .toggle span.default {
83
- border-top: 0.3em solid;
84
- border-right: 0.3em solid transparent;
85
- border-bottom: 0;
86
- border-left: 0.3em solid transparent;
87
- width: 0;
88
- height: 0;
89
- transition: var(--vg-nav-transition);
90
- transform: rotate(0);
91
- display: inline-block;
92
- margin-left: 0.355em;
93
- vertical-align: 0.255em;
94
- }
95
- .vg-nav .vg-nav-wrapper .dropdown {
96
- position: relative;
97
- }
98
- .vg-nav .vg-nav-wrapper .dropdown .dropdown-content {
99
- transition: var(--vg-nav-drop-transition);
100
- list-style: none;
101
- z-index: var(--vg-nav-drop-z-index);
102
- position: absolute;
103
- top: 120%;
104
- opacity: 0;
105
- visibility: hidden;
106
- width: var(--vg-nav-drop-width);
107
- padding: var(--vg-nav-drop-padding);
108
- border: 1px solid var(--vg-nav-drop-border-color);
109
- border-radius: var(--vg-nav-drop-border-radius);
110
- background-color: var(--vg-nav-drop-bg);
111
- }
112
- .vg-nav .vg-nav-wrapper .dropdown .dropdown-content:not(.show) {
113
- display: none;
114
- }
115
- .vg-nav .vg-nav-wrapper .dropdown .dropdown-content.fade {
116
- visibility: visible;
117
- opacity: 1;
118
- top: 100%;
119
- }
120
- .vg-nav .vg-nav-wrapper .dropdown .dropdown-content .dropdown-content.fade {
121
- top: 0;
122
- }
123
- .vg-nav .vg-nav-wrapper .dropdown .dropdown-content li a {
124
- display: block;
125
- padding: var(--vg-nav-drop-item-padding);
126
- border-top: 1px solid var(--vg-nav-drop-item-border-color);
127
- background-color: var(--vg-nav-drop-item-bg);
128
- transition: var(--vg-nav-drop-item-transition);
129
- color: var(--vg-nav-drop-item-color);
130
- }
131
- .vg-nav .vg-nav-wrapper .dropdown .dropdown-content li a:hover {
132
- background-color: var(--vg-nav-drop-item-bg-hover);
133
- color: var(--vg-nav-drop-item-color-hover);
134
- border-color: var(--vg-nav-drop-item-border-color-hover);
135
- }
136
- .vg-nav .vg-nav-wrapper .dropdown .dropdown-content li:first-child a {
137
- border-top: none;
138
- }
139
- .vg-nav .vg-nav-wrapper .dropdown.dropdown-mega {
140
- position: static;
141
- }
142
- .vg-nav .vg-nav-wrapper .dropdown.dropdown-mega .dropdown-content {
143
- transition: var(--vg-nav-drop-mega-transition);
144
- position: absolute;
145
- left: 0;
146
- width: var(--vg-nav-drop-mega-width);
147
- min-height: var(--vg-nav-drop-mega-min-height);
148
- padding: var(--vg-nav-drop-mega-padding);
149
- border: 1px solid var(--vg-nav-drop-mega-border-color);
150
- border-radius: var(--vg-nav-drop-mega-border-radius);
151
- background-color: var(--vg-nav-drop-mega-bg);
152
- z-index: var(--vg-nav-drop-z-index);
153
- }
154
- .vg-nav .vg-nav-wrapper .dropdown.dropdown-mega .dropdown-content:not(.show) {
155
- display: none;
156
- }
157
- .vg-nav.vg-nav-horizontal .vg-nav-wrapper {
158
- flex-direction: row;
159
- }
160
- .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul.left, .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .left {
161
- left: 0;
162
- }
163
- .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul.right, .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .right {
164
- right: 0;
165
- }
166
- .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .dropdown ul.left {
167
- left: 100%;
168
- }
169
- .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .dropdown ul.right {
170
- right: 100%;
171
- }
172
- .vg-nav.vg-nav-vertical .vg-nav-wrapper {
173
- flex-direction: column;
174
- }
175
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul {
176
- top: 100%;
177
- }
178
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul.left, .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul .left {
179
- left: 100%;
180
- }
181
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul.right, .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul .right {
182
- right: 100%;
183
- }
184
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul.fade {
185
- top: 0;
186
- }
187
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown.show > ul {
188
- top: 0;
189
- }
190
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown-mega {
191
- position: relative;
192
- }
193
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown-mega .dropdown-mega-container {
194
- left: 100%;
195
- top: 100%;
196
- }
197
- .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown-mega .dropdown-mega-container.fade {
198
- top: 0;
199
- }
200
- .vg-nav .vg-nav-hamburger {
201
- display: none;
202
- align-items: flex-start;
203
- }
204
- .vg-nav .vg-nav-hamburger--lines {
205
- display: inline-flex;
206
- align-items: center;
207
- justify-content: center;
208
- width: var(--vg-nav-hamburger-line-width);
209
- height: calc(var(--vg-nav-hamburger-line-height) * 3 + var(--vg-nav-hamburger-line-indent-top) * 2);
210
- position: relative;
211
- }
212
- .vg-nav .vg-nav-hamburger--lines span {
213
- background-color: var(--vg-nav-hamburger-line-color);
214
- height: var(--vg-nav-hamburger-line-height);
215
- width: var(--vg-nav-hamburger-line-width);
216
- right: 0;
217
- cursor: pointer;
218
- border-radius: 2px;
219
- position: absolute;
220
- display: block;
221
- transition: all 0.4s ease;
222
- transform: rotate(0);
223
- opacity: 1;
224
- }
225
- .vg-nav .vg-nav-hamburger--lines span:first-child {
226
- top: 0;
227
- }
228
- .vg-nav .vg-nav-hamburger--lines span:nth-child(2) {
229
- top: calc(var(--vg-nav-hamburger-line-height) + var(--vg-nav-hamburger-line-indent-top));
230
- }
231
- .vg-nav .vg-nav-hamburger--lines span:nth-child(3) {
232
- top: calc((var(--vg-nav-hamburger-line-height) + var(--vg-nav-hamburger-line-indent-top)) * 2);
233
- }
234
- .vg-nav .vg-nav-hamburger--title {
235
- position: relative;
236
- display: inline-block;
237
- margin-right: 3px;
238
- }
239
- .vg-nav .vg-nav-hamburger.vg-nav-hamburger-active .vg-nav-hamburger--lines span:first-child {
240
- opacity: 0;
241
- }
242
- .vg-nav .vg-nav-hamburger.vg-nav-hamburger-active .vg-nav-hamburger--lines span:nth-child(2) {
243
- transform: rotate(45deg);
244
- }
245
- .vg-nav .vg-nav-hamburger.vg-nav-hamburger-active .vg-nav-hamburger--lines span:last-child {
246
- transform: rotate(-45deg);
247
- top: 10px;
248
- }
249
- @media (max-width: 575.98px) {
250
- .vg-nav:not(.vg-nav-expand).vg-nav-xs .vg-nav-hamburger {
251
- display: flex;
252
- }
253
- .vg-nav:not(.vg-nav-expand).vg-nav-xs > .vg-nav-wrapper {
254
- display: none;
255
- }
256
- }
257
- @media (max-width: 767.98px) {
258
- .vg-nav:not(.vg-nav-expand).vg-nav-sm .vg-nav-hamburger {
259
- display: flex;
260
- }
261
- .vg-nav:not(.vg-nav-expand).vg-nav-sm > .vg-nav-wrapper {
262
- display: none;
263
- }
264
- }
265
- @media (max-width: 991.98px) {
266
- .vg-nav:not(.vg-nav-expand).vg-nav-md .vg-nav-hamburger {
267
- display: flex;
268
- }
269
- .vg-nav:not(.vg-nav-expand).vg-nav-md > .vg-nav-wrapper {
270
- display: none;
271
- }
272
- }
273
- @media (max-width: 1199.98px) {
274
- .vg-nav:not(.vg-nav-expand).vg-nav-lg .vg-nav-hamburger {
275
- display: flex;
276
- }
277
- .vg-nav:not(.vg-nav-expand).vg-nav-lg > .vg-nav-wrapper {
278
- display: none;
279
- }
280
- }
281
- @media (max-width: 1399.98px) {
282
- .vg-nav:not(.vg-nav-expand).vg-nav-xl .vg-nav-hamburger {
283
- display: flex;
284
- }
285
- .vg-nav:not(.vg-nav-expand).vg-nav-xl > .vg-nav-wrapper {
286
- display: none;
287
- }
288
- }
289
- @media (max-width: 1599.98px) {
290
- .vg-nav:not(.vg-nav-expand).vg-nav-xxl .vg-nav-hamburger {
291
- display: flex;
292
- }
293
- .vg-nav:not(.vg-nav-expand).vg-nav-xxl > .vg-nav-wrapper {
294
- display: none;
295
- }
296
- }
297
- @media (max-width: 1799.98px) {
298
- .vg-nav:not(.vg-nav-expand).vg-nav-xxxl .vg-nav-hamburger {
299
- display: flex;
300
- }
301
- .vg-nav:not(.vg-nav-expand).vg-nav-xxxl > .vg-nav-wrapper {
302
- display: none;
303
- }
304
- }
305
- .vg-nav.vg-nav-hamburger-always .vg-nav-hamburger {
306
- display: flex;
307
- }
308
- .vg-nav.vg-nav-hamburger-always .vg-nav-wrapper {
309
- display: none;
310
- }
311
-
312
- /*# sourceMappingURL=vgnav.css.map */
1
+ @charset "UTF-8";
2
+ /**
3
+ *--------------------------------------------------------------------------
4
+ * Модуль: VGNav
5
+ * Автор: Vegas DEV
6
+ * Лицензия: смотри LICENSE
7
+ *--------------------------------------------------------------------------
8
+ **/
9
+ .vg-nav {
10
+ --vg-nav-transition: all 0.2s ease-in-out ;
11
+ --vg-nav-item-margin: 0 ;
12
+ --vg-nav-item-padding: 23px 25px ;
13
+ --vg-nav-item-font-size: 1rem ;
14
+ --vg-nav-item-font-weight: 400 ;
15
+ --vg-nav-item-line-height: 1.4 ;
16
+ --vg-nav-item-color: #212529 ;
17
+ --vg-nav-item-decoration: none ;
18
+ --vg-nav-item-display: inline-block ;
19
+ --vg-nav-item-border: none ;
20
+ --vg-nav-item-border-radius: 0 ;
21
+ --vg-nav-item-white-space: nowrap ;
22
+ --vg-nav-item-position: relative ;
23
+ --vg-nav-drop-z-index: 10 ;
24
+ --vg-nav-drop-transition: all 0.2s ease-in-out ;
25
+ --vg-nav-drop-width: 200px ;
26
+ --vg-nav-drop-border-color: rgba(0, 0, 0, 0.2) ;
27
+ --vg-nav-drop-border-radius: 0 ;
28
+ --vg-nav-drop-padding: 0 ;
29
+ --vg-nav-drop-bg: #fff ;
30
+ --vg-nav-drop-mega-width: 100% ;
31
+ --vg-nav-drop-mega-min-height: 300px ;
32
+ --vg-nav-drop-mega-bg: #fff ;
33
+ --vg-nav-drop-mega-border-color: rgba(0, 0, 0, 0.2) ;
34
+ --vg-nav-drop-mega-border-radius: 0 ;
35
+ --vg-nav-drop-mega-padding: 1rem ;
36
+ --vg-nav-drop-mega-z-index: 10 ;
37
+ --vg-nav-drop-mega-transition: all 0.2s ease-in-out ;
38
+ --vg-nav-drop-item-padding: 0.75rem 1rem ;
39
+ --vg-nav-drop-item-border-color: transparent ;
40
+ --vg-nav-drop-item-border-color-hover: transparent ;
41
+ --vg-nav-drop-item-bg: transparent ;
42
+ --vg-nav-drop-item-bg-hover: transparent ;
43
+ --vg-nav-drop-item-color: inherit ;
44
+ --vg-nav-drop-item-color-hover: inherit ;
45
+ --vg-nav-drop-item-transition: all 0.2s ease-in-out ;
46
+ --vg-nav-hamburger-height: 27px ;
47
+ --vg-nav-hamburger-line-width: 35px ;
48
+ --vg-nav-hamburger-line-color: #333333 ;
49
+ --vg-nav-hamburger-line-height: 3px ;
50
+ --vg-nav-hamburger-line-indent-top: 7px ;
51
+ /** set placement **/
52
+ /** set hamburger **/
53
+ }
54
+ .vg-nav .vg-nav-wrapper {
55
+ display: flex;
56
+ padding: 0;
57
+ margin: 0;
58
+ position: relative;
59
+ }
60
+ .vg-nav .vg-nav-wrapper > li {
61
+ list-style: none;
62
+ margin: var(--vg-nav-item-margin);
63
+ /** set toggle **/
64
+ }
65
+ .vg-nav .vg-nav-wrapper > li > a {
66
+ white-space: var(--vg-nav-item-white-space);
67
+ position: var(--vg-nav-item-position);
68
+ display: var(--vg-nav-item-display);
69
+ padding: var(--vg-nav-item-padding);
70
+ font-size: var(--vg-nav-item-font-size);
71
+ font-weight: var(--vg-nav-item-font-weight);
72
+ line-height: var(--vg-nav-item-line-height);
73
+ color: var(--vg-nav-item-color);
74
+ text-decoration: var(--vg-nav-item-decoration);
75
+ border: var(--vg-nav-item-border);
76
+ border-radius: var(--vg-nav-item-border-radius);
77
+ }
78
+ .vg-nav .vg-nav-wrapper > li .toggle {
79
+ transition: var(--vg-nav-transition);
80
+ transform: rotate(0);
81
+ }
82
+ .vg-nav .vg-nav-wrapper > li .toggle span.default {
83
+ border-top: 0.3em solid;
84
+ border-right: 0.3em solid transparent;
85
+ border-bottom: 0;
86
+ border-left: 0.3em solid transparent;
87
+ width: 0;
88
+ height: 0;
89
+ transition: var(--vg-nav-transition);
90
+ transform: rotate(0);
91
+ display: inline-block;
92
+ margin-left: 0.355em;
93
+ vertical-align: 0.255em;
94
+ }
95
+ .vg-nav .vg-nav-wrapper .dropdown {
96
+ position: relative;
97
+ }
98
+ .vg-nav .vg-nav-wrapper .dropdown .dropdown-content {
99
+ transition: var(--vg-nav-drop-transition);
100
+ list-style: none;
101
+ z-index: var(--vg-nav-drop-z-index);
102
+ position: absolute;
103
+ top: 120%;
104
+ opacity: 0;
105
+ visibility: hidden;
106
+ width: var(--vg-nav-drop-width);
107
+ padding: var(--vg-nav-drop-padding);
108
+ border: 1px solid var(--vg-nav-drop-border-color);
109
+ border-radius: var(--vg-nav-drop-border-radius);
110
+ background-color: var(--vg-nav-drop-bg);
111
+ }
112
+ .vg-nav .vg-nav-wrapper .dropdown .dropdown-content:not(.show) {
113
+ display: none;
114
+ }
115
+ .vg-nav .vg-nav-wrapper .dropdown .dropdown-content.fade {
116
+ visibility: visible;
117
+ opacity: 1;
118
+ top: 100%;
119
+ }
120
+ .vg-nav .vg-nav-wrapper .dropdown .dropdown-content .dropdown-content.fade {
121
+ top: 0;
122
+ }
123
+ .vg-nav .vg-nav-wrapper .dropdown .dropdown-content li a {
124
+ display: block;
125
+ padding: var(--vg-nav-drop-item-padding);
126
+ border-top: 1px solid var(--vg-nav-drop-item-border-color);
127
+ background-color: var(--vg-nav-drop-item-bg);
128
+ transition: var(--vg-nav-drop-item-transition);
129
+ color: var(--vg-nav-drop-item-color);
130
+ }
131
+ .vg-nav .vg-nav-wrapper .dropdown .dropdown-content li a:hover {
132
+ background-color: var(--vg-nav-drop-item-bg-hover);
133
+ color: var(--vg-nav-drop-item-color-hover);
134
+ border-color: var(--vg-nav-drop-item-border-color-hover);
135
+ }
136
+ .vg-nav .vg-nav-wrapper .dropdown .dropdown-content li:first-child a {
137
+ border-top: none;
138
+ }
139
+ .vg-nav .vg-nav-wrapper .dropdown.dropdown-mega {
140
+ position: static;
141
+ }
142
+ .vg-nav .vg-nav-wrapper .dropdown.dropdown-mega .dropdown-content {
143
+ transition: var(--vg-nav-drop-mega-transition);
144
+ position: absolute;
145
+ left: 0;
146
+ width: var(--vg-nav-drop-mega-width);
147
+ min-height: var(--vg-nav-drop-mega-min-height);
148
+ padding: var(--vg-nav-drop-mega-padding);
149
+ border: 1px solid var(--vg-nav-drop-mega-border-color);
150
+ border-radius: var(--vg-nav-drop-mega-border-radius);
151
+ background-color: var(--vg-nav-drop-mega-bg);
152
+ z-index: var(--vg-nav-drop-z-index);
153
+ }
154
+ .vg-nav .vg-nav-wrapper .dropdown.dropdown-mega .dropdown-content:not(.show) {
155
+ display: none;
156
+ }
157
+ .vg-nav.vg-nav-horizontal .vg-nav-wrapper {
158
+ flex-direction: row;
159
+ }
160
+ .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul.left, .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .left {
161
+ left: 0;
162
+ }
163
+ .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul.right, .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .right {
164
+ right: 0;
165
+ }
166
+ .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .dropdown ul.left {
167
+ left: 100%;
168
+ }
169
+ .vg-nav.vg-nav-horizontal .vg-nav-wrapper .dropdown > ul .dropdown ul.right {
170
+ right: 100%;
171
+ }
172
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper {
173
+ flex-direction: column;
174
+ }
175
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul {
176
+ top: 100%;
177
+ }
178
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul.left, .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul .left {
179
+ left: 100%;
180
+ }
181
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul.right, .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul .right {
182
+ right: 100%;
183
+ }
184
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown > ul.fade {
185
+ top: 0;
186
+ }
187
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown.show > ul {
188
+ top: 0;
189
+ }
190
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown-mega {
191
+ position: relative;
192
+ }
193
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown-mega .dropdown-mega-container {
194
+ left: 100%;
195
+ top: 100%;
196
+ }
197
+ .vg-nav.vg-nav-vertical .vg-nav-wrapper .dropdown-mega .dropdown-mega-container.fade {
198
+ top: 0;
199
+ }
200
+ .vg-nav .vg-nav-hamburger {
201
+ display: none;
202
+ align-items: flex-start;
203
+ }
204
+ .vg-nav .vg-nav-hamburger--lines {
205
+ display: inline-flex;
206
+ align-items: center;
207
+ justify-content: center;
208
+ width: var(--vg-nav-hamburger-line-width);
209
+ height: calc(var(--vg-nav-hamburger-line-height) * 3 + var(--vg-nav-hamburger-line-indent-top) * 2);
210
+ position: relative;
211
+ }
212
+ .vg-nav .vg-nav-hamburger--lines span {
213
+ background-color: var(--vg-nav-hamburger-line-color);
214
+ height: var(--vg-nav-hamburger-line-height);
215
+ width: var(--vg-nav-hamburger-line-width);
216
+ right: 0;
217
+ cursor: pointer;
218
+ border-radius: 2px;
219
+ position: absolute;
220
+ display: block;
221
+ transition: all 0.4s ease;
222
+ transform: rotate(0);
223
+ opacity: 1;
224
+ }
225
+ .vg-nav .vg-nav-hamburger--lines span:first-child {
226
+ top: 0;
227
+ }
228
+ .vg-nav .vg-nav-hamburger--lines span:nth-child(2) {
229
+ top: calc(var(--vg-nav-hamburger-line-height) + var(--vg-nav-hamburger-line-indent-top));
230
+ }
231
+ .vg-nav .vg-nav-hamburger--lines span:nth-child(3) {
232
+ top: calc((var(--vg-nav-hamburger-line-height) + var(--vg-nav-hamburger-line-indent-top)) * 2);
233
+ }
234
+ .vg-nav .vg-nav-hamburger--title {
235
+ position: relative;
236
+ display: inline-block;
237
+ margin-right: 3px;
238
+ }
239
+ .vg-nav .vg-nav-hamburger.vg-nav-hamburger-active .vg-nav-hamburger--lines span:first-child {
240
+ opacity: 0;
241
+ }
242
+ .vg-nav .vg-nav-hamburger.vg-nav-hamburger-active .vg-nav-hamburger--lines span:nth-child(2) {
243
+ transform: rotate(45deg);
244
+ }
245
+ .vg-nav .vg-nav-hamburger.vg-nav-hamburger-active .vg-nav-hamburger--lines span:last-child {
246
+ transform: rotate(-45deg);
247
+ top: 10px;
248
+ }
249
+ @media (max-width: 575.98px) {
250
+ .vg-nav:not(.vg-nav-expand).vg-nav-xs .vg-nav-hamburger {
251
+ display: flex;
252
+ }
253
+ .vg-nav:not(.vg-nav-expand).vg-nav-xs > .vg-nav-wrapper {
254
+ display: none;
255
+ }
256
+ }
257
+ @media (max-width: 767.98px) {
258
+ .vg-nav:not(.vg-nav-expand).vg-nav-sm .vg-nav-hamburger {
259
+ display: flex;
260
+ }
261
+ .vg-nav:not(.vg-nav-expand).vg-nav-sm > .vg-nav-wrapper {
262
+ display: none;
263
+ }
264
+ }
265
+ @media (max-width: 991.98px) {
266
+ .vg-nav:not(.vg-nav-expand).vg-nav-md .vg-nav-hamburger {
267
+ display: flex;
268
+ }
269
+ .vg-nav:not(.vg-nav-expand).vg-nav-md > .vg-nav-wrapper {
270
+ display: none;
271
+ }
272
+ }
273
+ @media (max-width: 1199.98px) {
274
+ .vg-nav:not(.vg-nav-expand).vg-nav-lg .vg-nav-hamburger {
275
+ display: flex;
276
+ }
277
+ .vg-nav:not(.vg-nav-expand).vg-nav-lg > .vg-nav-wrapper {
278
+ display: none;
279
+ }
280
+ }
281
+ @media (max-width: 1399.98px) {
282
+ .vg-nav:not(.vg-nav-expand).vg-nav-xl .vg-nav-hamburger {
283
+ display: flex;
284
+ }
285
+ .vg-nav:not(.vg-nav-expand).vg-nav-xl > .vg-nav-wrapper {
286
+ display: none;
287
+ }
288
+ }
289
+ @media (max-width: 1599.98px) {
290
+ .vg-nav:not(.vg-nav-expand).vg-nav-xxl .vg-nav-hamburger {
291
+ display: flex;
292
+ }
293
+ .vg-nav:not(.vg-nav-expand).vg-nav-xxl > .vg-nav-wrapper {
294
+ display: none;
295
+ }
296
+ }
297
+ @media (max-width: 1799.98px) {
298
+ .vg-nav:not(.vg-nav-expand).vg-nav-xxxl .vg-nav-hamburger {
299
+ display: flex;
300
+ }
301
+ .vg-nav:not(.vg-nav-expand).vg-nav-xxxl > .vg-nav-wrapper {
302
+ display: none;
303
+ }
304
+ }
305
+ .vg-nav.vg-nav-hamburger-always .vg-nav-hamburger {
306
+ display: flex;
307
+ }
308
+ .vg-nav.vg-nav-hamburger-always .vg-nav-wrapper {
309
+ display: none;
310
+ }
311
+
312
+ /*# sourceMappingURL=vgnav.css.map */