@lucca-front/scss 7.1.0 → 7.2.0-rc.2

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.
Files changed (4) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +1 -1
  3. package/src/components/_main.scss +1 -1
  4. package/src/components/_nav-side.scss +135 -93
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "7.1.0",
3
+ "version": "7.2.0-rc.2",
4
4
  "description": "a scss-framework based on trello's css naming",
5
5
  "main": "src/main.scss",
6
6
  "scripts": {},
package/src/components/_main.scss CHANGED
@@ -35,6 +35,6 @@
35
35
 
36
36
  .navSide.mod-withBanner ~ .main-content, .main-content.mod-withBanner, .mod-withBanner .main-content {
37
37
  height: calc(100vh - #{_theme("commons.banner-height")} - #{_component("navSide.mobile.toggle-height")});
38
- margin-top: _component("navSide.mobile.toggle-height");
38
+ margin-top: calc(#{_theme("commons.banner-height")} + #{_component("navSide.mobile.toggle-height")});
39
39
  }
40
40
  }
package/src/components/_nav-side.scss CHANGED
@@ -1,17 +1,26 @@
1
1
  .navSide {
2
2
  background-color: _component("navSide.fullwidth-palette.bg-color");
3
3
  bottom: 0;
4
- display: block;
5
4
  left: 0;
6
5
  padding-top: _component("navSide.padding-top");
7
6
  position: fixed;
8
7
  top: 0;
9
8
  width: _component("navSide.width");
10
9
  z-index: 100;
10
+ display: flex;
11
+ flex-direction: column;
12
+ }
13
+
14
+ .navSide-wrapper {
15
+ display: flex;
16
+ flex-direction: column;
17
+ flex-grow: 1;
18
+ min-height: 0;
11
19
  }
12
20
 
13
21
  // NECESSARY TO AVOID MOVEMENT WHEN THE SCROLLBAR APPEARS
14
22
  .navSide-mainSection {
23
+ flex-grow: 1;
15
24
  display: block;
16
25
  height: 100%;
17
26
  overflow-x: hidden;
@@ -41,27 +50,56 @@
41
50
 
42
51
  .navSide-scrollWrapper {
43
52
  width: _component("navSide.width");
44
- padding: _theme("spacings.smaller");
53
+ padding: 0.5em;
54
+ margin: 0;
55
+ list-style-type: none;
45
56
  }
46
57
 
47
- .navSide-item + .navSide-item, .navSide-item-subMenu-link + .navSide-item-subMenu-link {
48
- margin-top: 2px;
58
+ .navSide-item:not(.mod-mobileToggle) + .navSide-item, .navSide-item-subMenu-link + .navSide-item-subMenu-link,
59
+ .navSide-item-subMenu-item + .navSide-item-subMenu-item {
60
+ margin-top: .125em;
49
61
  }
50
62
 
63
+
51
64
  // MOBILE TOGGLE
52
65
  .navSide-item.mod-mobileToggle {
53
66
  display: none;
54
67
  }
55
68
 
56
69
  .navSide-item-link, .navSide-item-subMenu-link {
70
+ background-color: transparent;
71
+ border: 0;
72
+ cursor: pointer;
73
+ text-align: left;
74
+ width: 100%;
75
+ height: 100%;
57
76
  align-items: center;
58
77
  color: _component("navSide.fullwidth-palette.text");
59
78
  display: flex;
60
79
  text-decoration: none;
61
80
  transition: all _theme("commons.animations.durations.fast") ease;
62
81
  user-select: none;
63
- height: 100%;
64
82
  border-radius: _theme("commons.border.radius");
83
+
84
+ &[aria-expanded="true"] {
85
+ .navSide-item-arrow {
86
+ transform: rotate(-0.25turn);
87
+ }
88
+ }
89
+
90
+ &:focus-visible {
91
+ outline: none;
92
+ box-shadow: 0 0 0 2px _component("navSide.fullwidth-palette.selected-text");
93
+ background-color: _component("navSide.fullwidth-palette.hovered-bg");
94
+ color: _component("navSide.fullwidth-palette.hovered-text");
95
+ position: relative;
96
+ z-index: 1;
97
+ }
98
+
99
+ &.is-active {
100
+ background-color: _component("navSide.fullwidth-palette.selected-bg");
101
+ color: _component("navSide.fullwidth-palette.selected-text");
102
+ }
65
103
  }
66
104
 
67
105
  // MAIN-ITEM
@@ -70,8 +108,8 @@
70
108
  .navSide-item-link {
71
109
  font-size: _component("navSide.main-font-size");
72
110
  font-weight: 600;
73
- line-height: 1rem;
74
- padding: _theme("spacings.small");
111
+ line-height: 1em;
112
+ padding: 1em;
75
113
 
76
114
  &:hover {
77
115
  background-color: _component("navSide.fullwidth-palette.hovered-bg");
@@ -82,51 +120,51 @@
82
120
  .navSide-item-link-title {
83
121
  line-height: 1.2;
84
122
  margin-left: 1em;
85
- margin-right: 10px;
123
+ margin-right: .625em;
86
124
  vertical-align: middle;
87
125
  width: 100%;
88
126
  }
89
127
 
90
128
  .navSide-item-alert {
91
129
  background-color: _component("navSide.fullwidth-palette.alert-color");
92
- border-radius: .5rem;
130
+ border-radius: .666em;
93
131
  color: _component("navSide.fullwidth-palette.alert-text");
94
132
  font-size: _theme("sizes.smaller.font-size");
95
- height: 1rem;
96
- line-height: 1rem;
133
+ height: 1.333em;
134
+ line-height: 1.333em;
97
135
  margin-left: auto;
98
- margin-right: .5rem;
99
- padding: 0 .5em;
136
+ margin-right: .666em;
137
+ padding: 0 .666em;
100
138
  transition: background-color _theme("commons.animations.durations.standard") ease;
101
139
  }
102
140
 
103
141
  .navSide-item-arrow {
104
- font-size: .8rem;
105
- height: .6rem;
142
+ font-size: .8em;
106
143
  margin-left: auto;
107
144
  transform: rotate(0);
108
145
  transition: transform _theme("commons.animations.durations.fast") ease-out;
146
+ flex-shrink: 0;
147
+ width: 1em;
148
+ height: 1em;
149
+ display: grid;
150
+ place-items: center;
151
+ transform-origin: 50% 50%;
109
152
  }
110
153
 
111
154
  // SUB MENU
112
155
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
113
156
  .navSide-item-subMenu {
114
157
  font-size: _component("navSide.sub-font-size");
115
- max-height: 0;
116
- overflow: hidden;
117
- transition-duration: _theme("commons.animations.durations.fast");
118
- transition-property: max-height;
119
- transition-timing-function: ease-in-out;
158
+ margin: 0;
159
+ padding: 0;
160
+ list-style-type: none;
161
+ overflow: visible;
120
162
  }
121
163
 
122
164
  .navSide-item-subMenu-link {
123
165
  font-weight: 400;
124
166
  line-height: 1.4;
125
- opacity: 0;
126
- padding: _theme("spacings.smaller") 1rem _theme("spacings.smaller") 3.2rem;
127
- transform: translate3d(-1.5em, 0, 0);
128
- transition: opacity _theme("commons.animations.durations.fast") ease-out,
129
- transform _theme("commons.animations.durations.standard") ease-out .05s;
167
+ padding: .5em 1em .5em 3.2em;
130
168
  vertical-align: middle;
131
169
  }
132
170
 
@@ -140,7 +178,7 @@
140
178
  .navSide-item, .navSide-item-link {
141
179
  height: 100%;
142
180
  background-color: transparent;
143
- padding: _theme("spacings.smaller");
181
+ padding: .5em;
144
182
  }
145
183
 
146
184
  .navSide-item-link {
@@ -148,7 +186,7 @@
148
186
  color: _component("navSide.bottom-section-palette.text");
149
187
  cursor: pointer;
150
188
  box-sizing: border-box;
151
- padding: _theme("spacings.small");
189
+ padding: 1em;
152
190
 
153
191
  &:hover {
154
192
  background-color: _component("navSide.bottom-section-palette.hovered-bg");
@@ -162,43 +200,31 @@
162
200
  }
163
201
  }
164
202
 
165
- .navSide.mod-withBottomSection {
166
- .navSide-mainSection {
167
- height: calc(100% - #{_component("navSide.bottom-section-height")});
168
- }
169
- }
170
-
171
203
  // ACTIVE & OPEN STATE
172
204
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
173
- .navSide-item.is-active {
174
- .navSide-item-link {
175
- opacity: 1;
176
- }
177
- }
178
-
179
- .navSide-item.is-open {
180
- .navSide-item-arrow {
181
- transform: rotate(-.25turn);
182
- }
183
205
 
184
- .navSide-item-subMenu {
185
- max-height: _component("navSide.submenu.max-height"); // TODO: SEE IF THIS CAN BE REMOVED
186
- transition-duration: _theme("commons.animations.durations.slow");
187
- }
206
+ .navSide-item {
207
+ &.is-open {
208
+ .navSide-item-arrow {
209
+ transform: rotate(-.25turn);
210
+ }
188
211
 
189
- .navSide-item-subMenu-link {
190
- opacity: 1;
191
- transform: translate3d(0, 0, 0);
192
- transition: all _theme("commons.animations.durations.fast") ease-out 0;
212
+ .navSide-item-subMenu-link {
213
+ &:hover {
214
+ background-color: _component("navSide.fullwidth-palette.hovered-bg");
215
+ color: _component("navSide.fullwidth-palette.hovered-text");
216
+ }
193
217
 
194
- &:hover {
195
- background-color: _component("navSide.fullwidth-palette.hovered-bg");
196
- color: _component("navSide.fullwidth-palette.hovered-text");
218
+ &.is-active {
219
+ background-color: _component("navSide.fullwidth-palette.selected-bg");
220
+ color: _component("navSide.fullwidth-palette.selected-text");
221
+ }
197
222
  }
223
+ }
198
224
 
199
- &.is-active {
200
- background-color: _component("navSide.fullwidth-palette.selected-bg");
201
- color: _component("navSide.fullwidth-palette.selected-text");
225
+ &:not(.is-open) {
226
+ .navSide-item-subMenu {
227
+ display: none;
202
228
  }
203
229
  }
204
230
  }
@@ -208,9 +234,14 @@
208
234
  color: _component("navSide.fullwidth-palette.selected-text");
209
235
  opacity: 1;
210
236
 
237
+
238
+ }
239
+
240
+ .navSide-item-subMenu-link.is-active,
241
+ .navSide-item-link.is-active {
211
242
  .navSide-item-alert {
212
- background-color: _component("navSide.fullwidth-palette.selected-alert-color");
213
- color: _component("navSide.fullwidth-palette.selected-alert-text");
243
+ background-color: _component("navSide.fullwidth-palette.selected-alert-text");
244
+ color: _component("navSide.fullwidth-palette.selected-alert-color");
214
245
  }
215
246
  }
216
247
 
@@ -276,8 +307,9 @@
276
307
  flex-direction: column;
277
308
  font-size: _component("navSide.compact.font-size");
278
309
  justify-content: center;
279
- padding: _theme("spacings.small") _theme("spacings.smaller");
310
+ padding: 1em .5em;
280
311
  position: relative;
312
+ text-align: center;
281
313
 
282
314
  .navSide-item-link-title {
283
315
  margin: .8em 0 0;
@@ -293,8 +325,8 @@
293
325
  color: _component("navSide.compact-palette.alert-text");
294
326
  padding: 0 .4em;
295
327
  position: relative;
296
- top: 10px;
297
- margin: auto;
328
+ top: .625em;
329
+ margin: .166em;
298
330
  }
299
331
 
300
332
  .navSide-item-placeholder {
@@ -355,44 +387,50 @@
355
387
 
356
388
 
357
389
  // Mobile version
358
- @include media_smaller_than(_theme("commons.mobile", true)) {
390
+ @include media_smaller_than("s") {
359
391
  .navSide {
360
- position: relative;
361
392
  padding-top: _component("navSide.mobile.toggle-height");
362
393
  width: 100%;
394
+ bottom: auto;
363
395
 
364
- &, &.mod-withBottomSection {
365
- .navSide-mainSection, .navSide-scrollWrapper {
366
- width: 100%;
367
- height: auto;
396
+
397
+ .navSide-mainSection, .navSide-scrollWrapper {
398
+ width: 100%;
399
+ height: auto;
400
+ }
401
+
402
+
403
+ &:not(.is-open) {
404
+ .navSide-item {
405
+ &:not(.mod-mobileToggle) {
406
+ display: none;
407
+ }
368
408
  }
369
409
  }
370
410
  }
411
+
371
412
  .navSide-scrollWrapper {
372
413
  padding: 0;
373
414
  }
374
415
 
375
- .navSide-item:not(.mod-mobileToggle), .navSide-item-placeholder {
376
- position: absolute;
377
- visibility: hidden;
378
- transform: translateX(-15px);
379
- opacity: 0;
380
- top: 0;
381
- bottom: 100%;
382
- overflow: hidden;
383
- }
384
-
385
416
  .navSide-item.mod-mobileToggle {
386
417
  display: block;
387
418
  height: _component("navSide.mobile.toggle-height");
388
419
  background-color: _color("primary", 800);
389
420
  cursor: pointer;
390
- overflow: hidden;
391
421
  position: fixed;
392
422
  top: 0;
393
423
  left: 0;
394
424
  right: 0;
395
425
  z-index: 1;
426
+
427
+ .navSide-item-link {
428
+ border-radius: 0;
429
+
430
+ &:focus-visible {
431
+ box-shadow: 0 0 0 2px _component("navSide.fullwidth-palette.selected-text") inset;
432
+ }
433
+ }
396
434
  }
397
435
 
398
436
  .navSide.mod-withBanner {
@@ -417,20 +455,24 @@
417
455
  }
418
456
 
419
457
  .navSide-scrollWrapper {
420
- padding: _theme("spacings.smaller");
421
- }
422
-
423
- .navSide-item:not(.mod-mobileToggle), .navSide-item-placeholder {
424
- position: static;
425
- visibility: visible;
426
- transform: translateX(0);
427
- opacity: 1;
428
- transition: all .2s cubic-bezier(.25, .8, .25, 1);
429
- @for $i from 0 through 10 {
430
- &:nth-child(#{$i+2}) {
431
- transition-delay: $i*.05s;
432
- }
433
- }
458
+ padding: .5em;
434
459
  }
435
460
  }
436
461
  }
462
+
463
+ ::ng-deep {
464
+ @include media_smaller_than('s') {
465
+ .hasMenu {
466
+ &,
467
+ body {
468
+ touch-action: none;
469
+ overscroll-behavior: none;
470
+ -webkit-overflow-scrolling: auto;
471
+ }
472
+
473
+ body {
474
+ overflow: hidden !important;
475
+ }
476
+ }
477
+ }
478
+ }