Skip to content

Commit 433314c

Browse files
desig9steindesig9stein
authored
refactor(nav-drawer): Update material, fluent, and bootstrap themes (#14266)
1 parent ab4dad7 commit 433314c

File tree

6 files changed

+249
-128
lines changed

6 files changed

+249
-128
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@
1313

1414
@extend %navdrawer-display !optional;
1515

16+
@include m(pinned) {
17+
@extend %navdrawer-display-pinned !optional;
18+
}
19+
20+
@include mx(mini, pinned) {
21+
@extend %navdrawer-display-mini-pinned !optional;
22+
}
23+
1624
// Main aside element
1725
@include e(aside) {
1826
@extend %aside !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss‎

Lines changed: 136 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -141,31 +141,61 @@
141141
@mixin navdrawer($theme) {
142142
@include css-vars($theme);
143143

144-
$drawer-item-margin: rem(8px);
145-
$drawer-item-min-h: auto;
146-
$drawer-item-max-h: rem(48px);
147-
$drawer-item-min-w: rem(32px);
148-
149144
$variant: map.get($theme, '_meta', 'variant');
145+
$drawer-icon-size: rem(24px);
146+
147+
$aside-padding: map.get((
148+
material: rem(8px),
149+
fluent: 0,
150+
bootstrap: rem(16px),
151+
indigo-design: rem(8px),
152+
), $variant);
153+
154+
$item-padding: map.get((
155+
material: rem(12px) rem(8px),
156+
fluent: rem(10px) rem(8px),
157+
bootstrap: rem(8px) rem(16px),
158+
indigo-design: rem(8px) rem(16px),
159+
), $variant);
160+
161+
$item-gap: map.get((
162+
material: rem(32px),
163+
fluent: rem(8px),
164+
bootstrap: rem(8px),
165+
indigo-design: rem(16px),
166+
), $variant);
150167

151-
$drawer-width: rem(240px);
152-
$drawer-mini-width: map.get((
153-
material: rem(68px),
154-
fluent: rem(68px),
155-
bootstrap: rem(68px),
156-
indigo-design: rem(48px)
168+
$item-min-height: map.get((
169+
material: rem(48px),
170+
fluent: rem(44px),
171+
bootstrap: rem(40px),
172+
indigo-design: rem(32px),
173+
), $variant);
174+
175+
$item-mini-size: map.get((
176+
material: rem(56px),
177+
fluent: rem(40px),
178+
bootstrap: rem(88px),
179+
indigo-design: rem(48px),
157180
), $variant);
158181

159182
%navdrawer-display {
183+
--igx-nav-drawer-size: #{rem(240px)};
184+
--igx-nav-drawer-size--mini: #{$item-mini-size};
185+
186+
flex-basis: 0;
160187
transition: flex-basis;
161188
transition-duration: .3s;
162189
transition-timing-function: $out-quad;
163190
flex-shrink: 0;
164-
flex-basis: $drawer-width;
191+
}
165192

166-
&:has(.igx-nav-drawer__aside--mini) {
167-
flex-basis: $drawer-mini-width;
168-
}
193+
%navdrawer-display-pinned {
194+
flex-basis: var(--igx-nav-drawer-size);
195+
}
196+
197+
%navdrawer-display-mini-pinned {
198+
flex-basis: var(--igx-mini-nav-drawer-size, #{$item-mini-size});
169199
}
170200

171201
%aside {
@@ -176,18 +206,21 @@
176206
background: var-get($theme, 'background');
177207
top: 0;
178208
bottom: 0;
209+
width: var(--igx-nav-drawer-size);
179210
inset-inline-start: 0;
180211
z-index: 999;
181-
transition: width, transform;
182-
transition-timing-function: $out-quad, $out-quad;
212+
transition: width, padding, transform;
213+
transition-timing-function: $in-out-quad, $in-out-quad;
183214
box-shadow: var-get($theme, 'shadow');
184-
border-inline-end: rem(1px) solid var-get($theme, 'border-color');
185-
border-radius: var-get($theme, 'border-radius');
215+
padding: $aside-padding;
186216

187-
@if $variant == 'indigo-design' {
188-
transition: padding, width, transform;
189-
padding: rem(8px);
217+
@if $variant != 'fluent' {
218+
border-inline-end: rem(1px) solid var-get($theme, 'border-color');
219+
} @else {
220+
border: rem(1px) solid var-get($theme, 'border-color');
190221
}
222+
223+
border-radius: var-get($theme, 'border-radius');
191224
}
192225

193226
%aside-panning {
@@ -197,7 +230,6 @@
197230

198231
%aside--pinned {
199232
position: relative;
200-
max-width: 100%;
201233
box-shadow: none;
202234
z-index: 0;
203235
}
@@ -216,6 +248,7 @@
216248
width: 0;
217249
overflow: hidden;
218250
border: none;
251+
padding: 0;
219252
}
220253

221254
%aside--collapsed {
@@ -226,35 +259,40 @@
226259
}
227260

228261
box-shadow: none;
229-
230-
@if $variant == 'indigo-design' {
231-
padding: 0;
232-
}
233262
}
234263

235264
%aside--right {
236265
inset-inline-start: auto;
237266
inset-inline-end: 0;
238267
border-inline-end: none;
239-
border-inline-start: rem(1px) solid var-get($theme, 'border-color');
268+
269+
@if $variant != 'fluent' {
270+
border-inline-start: rem(1px) solid var-get($theme, 'border-color');
271+
}
240272
}
241273

242274
%aside--mini {
243-
width: $drawer-mini-width;
244275
transition-duration: .2s, .2s;
276+
width: var(--igx-nav-drawer-size--mini);
245277

246278
%item {
247279
justify-content: center;
248280

281+
@if $variant == 'indigo-design' {
282+
//max-width: rem(32px);
283+
// important is needed to override the typography margins
284+
margin: rem(14px) auto !important;
285+
}
286+
249287
igx-icon {
250288
margin-inline-start: 0;
251289
}
252290
}
253291
}
254292

255293
%aside--normal {
256-
width: $drawer-width;
257294
transition-duration: .3s, .3s;
295+
width: var(--igx-nav-drawer-size);
258296
}
259297

260298
%overlay {
@@ -295,38 +333,40 @@
295333
align-items: center;
296334
flex-flow: row nowrap;
297335
color: var-get($theme, 'item-text-color');
298-
max-height: $drawer-item-max-h;
299-
min-width: $drawer-item-min-w;
336+
max-height: $item-min-height;
337+
gap: $item-gap;
338+
padding: $item-padding;
339+
340+
@if $variant == 'indigo-design' {
341+
margin-block-end: rem(4px) !important;
342+
}
343+
300344
cursor: pointer;
301345
user-select: none;
302346
outline: transparent;
303347
white-space: nowrap;
304-
border-radius: var-get($theme, 'item-border-radius');
348+
349+
// For material the radius is on the after element
350+
@if $variant != 'material' {
351+
border-radius: var-get($theme, 'item-border-radius');
352+
}
353+
305354
text-decoration: none;
306-
width: calc(100% - #{$drawer-item-margin * 2});
307355
border: none;
308356
justify-content: flex-start;
309357

310-
@if $variant != 'indigo-design' {
311-
// important is needed to override the typography margins
312-
margin: $drawer-item-margin !important;
313-
padding: rem(12px) rem(8px);
314-
gap: rem(32px);
315-
} @else {
316-
// important is needed to override the typography margins
317-
margin: 0 !important;
318-
margin-block-end: rem(4px) !important;
319-
padding: rem(8px) rem(16px);
320-
gap: rem(16px);
321-
width: 100%;
322-
}
323-
324358
igx-icon {
325359
--component-size: 3;
360+
326361
color: var-get($theme, 'item-icon-color');
362+
@if $variant == 'indigo-design' {
363+
margin-inline-start: rem(4px);
364+
}
365+
}
327366

367+
span {
328368
@if $variant == 'indigo-design' {
329-
--component-size: 2;
369+
padding-inline-start: rem(8px);
330370
}
331371
}
332372

@@ -337,17 +377,37 @@
337377
}
338378

339379
&%igx-button--fab {
340-
min-height: $drawer-item-min-h;
380+
min-height: auto;
341381
}
342382

343383
&%igx-icon-button-display {
344384
height: auto;
345385
transition: none;
346386
}
347387

388+
@if $variant == 'material' {
389+
&::after {
390+
content: '';
391+
position: absolute;
392+
width: 100%;
393+
inset-block-start: rem(4px);
394+
inset-inline-start: 0;
395+
height: calc(100% - #{rem(8px)});
396+
border-radius: var-get($theme, 'item-border-radius');
397+
z-index: -1;
398+
}
399+
}
400+
348401
&:hover,
349402
&:focus {
350-
background: var-get($theme, 'item-hover-background');
403+
@if $variant == 'material' {
404+
&::after {
405+
background: var-get($theme, 'item-hover-background');
406+
}
407+
} @else {
408+
background: var-get($theme, 'item-hover-background');
409+
}
410+
351411
color: var-get($theme, 'item-hover-text-color');
352412
box-shadow: none;
353413

@@ -360,7 +420,15 @@
360420
%item--active {
361421
// should be app primary color
362422
color: var-get($theme, 'item-active-text-color');
363-
background: var-get($theme, 'item-active-background');
423+
424+
@if $variant == 'material' {
425+
&::after {
426+
background: var-get($theme, 'item-active-background');
427+
}
428+
} @else {
429+
background: var-get($theme, 'item-active-background');
430+
}
431+
364432

365433
igx-icon {
366434
color: var-get($theme, 'item-active-icon-color');
@@ -369,7 +437,14 @@
369437
&:focus,
370438
&:hover {
371439
color: var-get($theme, 'item-active-text-color');
372-
background: var-get($theme, 'item-active-background');
440+
441+
@if $variant == 'material' {
442+
&::after {
443+
background: var-get($theme, 'item-active-background');
444+
}
445+
} @else {
446+
background: var-get($theme, 'item-active-background');
447+
}
373448

374449
igx-icon {
375450
color: var-get($theme, 'item-active-icon-color');
@@ -384,6 +459,9 @@
384459
box-shadow: none;
385460

386461
igx-icon {
462+
width: var(--igx-icon-size, #{$drawer-icon-size});
463+
height: var(--igx-icon-size, #{$drawer-icon-size});
464+
font-size: var(--igx-icon-size, #{$drawer-icon-size});
387465
margin: 0;
388466
}
389467

@@ -396,13 +474,15 @@
396474
}
397475

398476
%item--header {
399-
display: block;
400-
padding: rem(12px) rem(16px);
477+
display: flex;
478+
align-items: center;
479+
padding: $item-padding;
480+
min-height: $item-min-height;
401481
white-space: nowrap;
402482
color: var-get($theme, 'item-header-text-color');
403483

404484
@if $variant == 'indigo-design' {
405-
padding-block: rem(8px);
485+
margin-block-end: rem(4px) !important;
406486
}
407487
}
408488

‎projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
));
8585
@include navdrawer-typography($categories: (
8686
item: 'body-2',
87-
header: 'caption'
87+
header: 'subtitle-1'
8888
));
8989
@include radio-typography($categories: (
9090
label: 'body-2'

0 commit comments

Comments
 (0)