@i-cell/ids-styles 0.0.51 → 0.0.52
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.
- package/dist/checkbox/checkbox.css +69 -3
- package/dist/checkbox/checkbox.min.css +1 -1
- package/dist/checkbox/checkbox.plugin.js +81 -3
- package/dist/components.css +163 -44
- package/dist/components.min.css +1 -1
- package/dist/components.plugin.js +125 -40
- package/dist/side-nav/side-nav.css +94 -41
- package/dist/side-nav/side-nav.min.css +1 -1
- package/dist/side-nav/side-nav.plugin.js +44 -37
- package/package.json +1 -1
|
@@ -3455,6 +3455,31 @@ module.exports = function ComponentsPlugin() {
|
|
|
3455
3455
|
fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-dense)',
|
|
3456
3456
|
lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-dense)',
|
|
3457
3457
|
},
|
|
3458
|
+
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
|
|
3459
|
+
{
|
|
3460
|
+
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-hovered)',
|
|
3461
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
|
|
3462
|
+
},
|
|
3463
|
+
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
|
|
3464
|
+
{
|
|
3465
|
+
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-hovered)',
|
|
3466
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
|
|
3467
|
+
},
|
|
3468
|
+
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled)+.ids-checkbox__icon': {
|
|
3469
|
+
color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)',
|
|
3470
|
+
},
|
|
3471
|
+
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
|
|
3472
|
+
{
|
|
3473
|
+
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-pressed)',
|
|
3474
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
|
|
3475
|
+
},
|
|
3476
|
+
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
|
|
3477
|
+
{
|
|
3478
|
+
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-pressed)',
|
|
3479
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
|
|
3480
|
+
},
|
|
3481
|
+
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled)+.ids-checkbox__icon':
|
|
3482
|
+
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
|
|
3458
3483
|
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
|
|
3459
3484
|
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-default)',
|
|
3460
3485
|
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
|
|
@@ -3502,7 +3527,6 @@ module.exports = function ComponentsPlugin() {
|
|
|
3502
3527
|
{
|
|
3503
3528
|
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-disabled)',
|
|
3504
3529
|
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-disabled)',
|
|
3505
|
-
color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)',
|
|
3506
3530
|
},
|
|
3507
3531
|
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
|
|
3508
3532
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default)' },
|
|
@@ -3512,6 +3536,8 @@ module.exports = function ComponentsPlugin() {
|
|
|
3512
3536
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
|
|
3513
3537
|
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
|
|
3514
3538
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
|
|
3539
|
+
'.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled+.ids-checkbox__icon':
|
|
3540
|
+
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)' },
|
|
3515
3541
|
'.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
|
|
3516
3542
|
color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
|
|
3517
3543
|
},
|
|
@@ -3525,6 +3551,31 @@ module.exports = function ComponentsPlugin() {
|
|
|
3525
3551
|
{ color: 'var(--ids-comp-checkbox-label-color-fg-light-focused)' },
|
|
3526
3552
|
'.ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
|
|
3527
3553
|
{ color: 'var(--ids-comp-checkbox-label-color-fg-light-disabled)' },
|
|
3554
|
+
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
|
|
3555
|
+
{
|
|
3556
|
+
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered)',
|
|
3557
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
|
|
3558
|
+
},
|
|
3559
|
+
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
|
|
3560
|
+
{
|
|
3561
|
+
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-hovered)',
|
|
3562
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
|
|
3563
|
+
},
|
|
3564
|
+
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled)+.ids-checkbox__icon': {
|
|
3565
|
+
color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)',
|
|
3566
|
+
},
|
|
3567
|
+
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
|
|
3568
|
+
{
|
|
3569
|
+
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed)',
|
|
3570
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
|
|
3571
|
+
},
|
|
3572
|
+
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
|
|
3573
|
+
{
|
|
3574
|
+
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-pressed)',
|
|
3575
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
|
|
3576
|
+
},
|
|
3577
|
+
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled)+.ids-checkbox__icon':
|
|
3578
|
+
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
|
|
3528
3579
|
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
|
|
3529
3580
|
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-default)',
|
|
3530
3581
|
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
|
|
@@ -3572,7 +3623,6 @@ module.exports = function ComponentsPlugin() {
|
|
|
3572
3623
|
{
|
|
3573
3624
|
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-disabled)',
|
|
3574
3625
|
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled)',
|
|
3575
|
-
color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)',
|
|
3576
3626
|
},
|
|
3577
3627
|
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
|
|
3578
3628
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default)' },
|
|
@@ -3582,6 +3632,8 @@ module.exports = function ComponentsPlugin() {
|
|
|
3582
3632
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
|
|
3583
3633
|
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
|
|
3584
3634
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
|
|
3635
|
+
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled+.ids-checkbox__icon':
|
|
3636
|
+
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)' },
|
|
3585
3637
|
'.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
|
|
3586
3638
|
color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
|
|
3587
3639
|
},
|
|
@@ -3595,6 +3647,31 @@ module.exports = function ComponentsPlugin() {
|
|
|
3595
3647
|
{ color: 'var(--ids-comp-checkbox-label-color-fg-dark-focused)' },
|
|
3596
3648
|
'.ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
|
|
3597
3649
|
{ color: 'var(--ids-comp-checkbox-label-color-fg-dark-disabled)' },
|
|
3650
|
+
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
|
|
3651
|
+
{
|
|
3652
|
+
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered)',
|
|
3653
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
|
|
3654
|
+
},
|
|
3655
|
+
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
|
|
3656
|
+
{
|
|
3657
|
+
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-hovered)',
|
|
3658
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
|
|
3659
|
+
},
|
|
3660
|
+
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled)+.ids-checkbox__icon': {
|
|
3661
|
+
color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)',
|
|
3662
|
+
},
|
|
3663
|
+
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
|
|
3664
|
+
{
|
|
3665
|
+
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed)',
|
|
3666
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
|
|
3667
|
+
},
|
|
3668
|
+
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
|
|
3669
|
+
{
|
|
3670
|
+
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
|
|
3671
|
+
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
|
|
3672
|
+
},
|
|
3673
|
+
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled)+.ids-checkbox__icon':
|
|
3674
|
+
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
|
|
3598
3675
|
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
|
|
3599
3676
|
borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-default)',
|
|
3600
3677
|
backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
|
|
@@ -3642,7 +3719,6 @@ module.exports = function ComponentsPlugin() {
|
|
|
3642
3719
|
{
|
|
3643
3720
|
borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-disabled)',
|
|
3644
3721
|
backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled)',
|
|
3645
|
-
color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)',
|
|
3646
3722
|
},
|
|
3647
3723
|
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
|
|
3648
3724
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default)' },
|
|
@@ -3652,6 +3728,8 @@ module.exports = function ComponentsPlugin() {
|
|
|
3652
3728
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
|
|
3653
3729
|
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
|
|
3654
3730
|
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
|
|
3731
|
+
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled+.ids-checkbox__icon':
|
|
3732
|
+
{ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)' },
|
|
3655
3733
|
'.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
|
|
3656
3734
|
color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
|
|
3657
3735
|
},
|
|
@@ -10897,6 +10975,16 @@ module.exports = function ComponentsPlugin() {
|
|
|
10897
10975
|
{ color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused)' },
|
|
10898
10976
|
'.ids-form-field>.ids-form-field__field-wrapper:active .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
|
|
10899
10977
|
{ color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed)' },
|
|
10978
|
+
'@keyframes expand-submenu': {
|
|
10979
|
+
'0%': { overflow: 'hidden', visibility: 'hidden' },
|
|
10980
|
+
'99%': { overflow: 'hidden', visibility: 'visible' },
|
|
10981
|
+
'100%': { overflow: 'visible', visibility: 'visible' },
|
|
10982
|
+
},
|
|
10983
|
+
'@keyframes collapse-submenu': {
|
|
10984
|
+
'0%': { overflow: 'visible', visibility: 'visible' },
|
|
10985
|
+
'99%': { overflow: 'hidden', visibility: 'visible' },
|
|
10986
|
+
'100%': { overflow: 'hidden', visibility: 'hidden' },
|
|
10987
|
+
},
|
|
10900
10988
|
'.ids-side-nav': {
|
|
10901
10989
|
boxSizing: 'border-box',
|
|
10902
10990
|
borderWidth: '0',
|
|
@@ -10928,11 +11016,12 @@ module.exports = function ComponentsPlugin() {
|
|
|
10928
11016
|
maxHeight: '0',
|
|
10929
11017
|
opacity: 0,
|
|
10930
11018
|
transition: 'all 300ms ease-out',
|
|
11019
|
+
animation: 'collapse-submenu .3s forwards',
|
|
10931
11020
|
},
|
|
10932
11021
|
'.ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-submenu.expanded': {
|
|
10933
|
-
maxHeight: '10000px',
|
|
10934
11022
|
opacity: 1,
|
|
10935
11023
|
transition: 'all 300ms ease-in',
|
|
11024
|
+
animation: 'expand-submenu .3s forwards',
|
|
10936
11025
|
},
|
|
10937
11026
|
'.ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-summary>button[idsIconButton]': {
|
|
10938
11027
|
marginLeft: 'auto',
|
|
@@ -10982,10 +11071,6 @@ module.exports = function ComponentsPlugin() {
|
|
|
10982
11071
|
letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-compact)',
|
|
10983
11072
|
lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-compact)',
|
|
10984
11073
|
},
|
|
10985
|
-
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-item': {
|
|
10986
|
-
'--submenu-outline-compensation':
|
|
10987
|
-
'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-compact) + 2px )',
|
|
10988
|
-
},
|
|
10989
11074
|
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single': {
|
|
10990
11075
|
borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-compact)',
|
|
10991
11076
|
borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-compact)',
|
|
@@ -11048,21 +11133,24 @@ module.exports = function ComponentsPlugin() {
|
|
|
11048
11133
|
left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-compact)*-1)',
|
|
11049
11134
|
marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact)*-1)',
|
|
11050
11135
|
},
|
|
11051
|
-
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
|
|
11052
|
-
|
|
11136
|
+
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
|
|
11137
|
+
'--submenu-item-height':
|
|
11138
|
+
'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-compact), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-compact) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact) * var(--submenu-items-count)) )',
|
|
11139
|
+
maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
|
|
11053
11140
|
gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact)',
|
|
11054
11141
|
padding:
|
|
11055
|
-
'
|
|
11142
|
+
'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact)',
|
|
11056
11143
|
},
|
|
11057
11144
|
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable': {
|
|
11058
|
-
gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-compact)',
|
|
11059
11145
|
padding:
|
|
11060
11146
|
'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-compact) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-compact)',
|
|
11061
11147
|
},
|
|
11148
|
+
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
|
|
11149
|
+
{ gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-compact)' },
|
|
11062
11150
|
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
|
|
11063
11151
|
{
|
|
11064
11152
|
paddingLeft:
|
|
11065
|
-
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact)
|
|
11153
|
+
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact))',
|
|
11066
11154
|
},
|
|
11067
11155
|
'.ids-side-nav.ids-side-nav-compact .ids-side-nav-title+.ids-side-nav-item': {
|
|
11068
11156
|
marginTop: 'var(--ids-comp-sidenav-section-size-gap-compact)',
|
|
@@ -11095,10 +11183,6 @@ module.exports = function ComponentsPlugin() {
|
|
|
11095
11183
|
letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-comfortable)',
|
|
11096
11184
|
lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-comfortable)',
|
|
11097
11185
|
},
|
|
11098
|
-
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item': {
|
|
11099
|
-
'--submenu-outline-compensation':
|
|
11100
|
-
'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-comfortable) + 2px )',
|
|
11101
|
-
},
|
|
11102
11186
|
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single': {
|
|
11103
11187
|
borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-comfortable)',
|
|
11104
11188
|
borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-comfortable)',
|
|
@@ -11161,21 +11245,24 @@ module.exports = function ComponentsPlugin() {
|
|
|
11161
11245
|
left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-comfortable)*-1)',
|
|
11162
11246
|
marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable)*-1)',
|
|
11163
11247
|
},
|
|
11164
|
-
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
|
|
11165
|
-
|
|
11248
|
+
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
|
|
11249
|
+
'--submenu-item-height':
|
|
11250
|
+
'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-comfortable), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-comfortable) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable) * var(--submenu-items-count)) )',
|
|
11251
|
+
maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
|
|
11166
11252
|
gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable)',
|
|
11167
11253
|
padding:
|
|
11168
|
-
'
|
|
11254
|
+
'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable)',
|
|
11169
11255
|
},
|
|
11170
11256
|
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable': {
|
|
11171
|
-
gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable)',
|
|
11172
11257
|
padding:
|
|
11173
11258
|
'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-comfortable)',
|
|
11174
11259
|
},
|
|
11260
|
+
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
|
|
11261
|
+
{ gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable)' },
|
|
11175
11262
|
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
|
|
11176
11263
|
{
|
|
11177
11264
|
paddingLeft:
|
|
11178
|
-
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable)
|
|
11265
|
+
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable))',
|
|
11179
11266
|
},
|
|
11180
11267
|
'.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title+.ids-side-nav-item': {
|
|
11181
11268
|
marginTop: 'var(--ids-comp-sidenav-section-size-gap-comfortable)',
|
|
@@ -11208,10 +11295,6 @@ module.exports = function ComponentsPlugin() {
|
|
|
11208
11295
|
letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-spacious)',
|
|
11209
11296
|
lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-spacious)',
|
|
11210
11297
|
},
|
|
11211
|
-
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item': {
|
|
11212
|
-
'--submenu-outline-compensation':
|
|
11213
|
-
'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-spacious) + 2px )',
|
|
11214
|
-
},
|
|
11215
11298
|
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single': {
|
|
11216
11299
|
borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-spacious)',
|
|
11217
11300
|
borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-spacious)',
|
|
@@ -11274,21 +11357,24 @@ module.exports = function ComponentsPlugin() {
|
|
|
11274
11357
|
left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-spacious)*-1)',
|
|
11275
11358
|
marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious)*-1)',
|
|
11276
11359
|
},
|
|
11277
|
-
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
|
|
11278
|
-
|
|
11360
|
+
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
|
|
11361
|
+
'--submenu-item-height':
|
|
11362
|
+
'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-spacious), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-spacious) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious) * var(--submenu-items-count)) )',
|
|
11363
|
+
maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
|
|
11279
11364
|
gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious)',
|
|
11280
11365
|
padding:
|
|
11281
|
-
'
|
|
11366
|
+
'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious)',
|
|
11282
11367
|
},
|
|
11283
11368
|
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable': {
|
|
11284
|
-
gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious)',
|
|
11285
11369
|
padding:
|
|
11286
11370
|
'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-spacious)',
|
|
11287
11371
|
},
|
|
11372
|
+
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
|
|
11373
|
+
{ gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious)' },
|
|
11288
11374
|
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
|
|
11289
11375
|
{
|
|
11290
11376
|
paddingLeft:
|
|
11291
|
-
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious)
|
|
11377
|
+
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious))',
|
|
11292
11378
|
},
|
|
11293
11379
|
'.ids-side-nav.ids-side-nav-spacious .ids-side-nav-title+.ids-side-nav-item': {
|
|
11294
11380
|
marginTop: 'var(--ids-comp-sidenav-section-size-gap-spacious)',
|
|
@@ -11320,10 +11406,6 @@ module.exports = function ComponentsPlugin() {
|
|
|
11320
11406
|
letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-dense)',
|
|
11321
11407
|
lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-dense)',
|
|
11322
11408
|
},
|
|
11323
|
-
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-item': {
|
|
11324
|
-
'--submenu-outline-compensation':
|
|
11325
|
-
'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-dense) + 2px )',
|
|
11326
|
-
},
|
|
11327
11409
|
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single': {
|
|
11328
11410
|
borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-dense)',
|
|
11329
11411
|
borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-dense)',
|
|
@@ -11385,21 +11467,24 @@ module.exports = function ComponentsPlugin() {
|
|
|
11385
11467
|
left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-dense)*-1)',
|
|
11386
11468
|
marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense)*-1)',
|
|
11387
11469
|
},
|
|
11388
|
-
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
|
|
11389
|
-
|
|
11470
|
+
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
|
|
11471
|
+
'--submenu-item-height':
|
|
11472
|
+
'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-dense), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-dense) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense) * var(--submenu-items-count)) )',
|
|
11473
|
+
maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
|
|
11390
11474
|
gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense)',
|
|
11391
11475
|
padding:
|
|
11392
|
-
'
|
|
11476
|
+
'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense)',
|
|
11393
11477
|
},
|
|
11394
11478
|
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable': {
|
|
11395
|
-
gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-dense)',
|
|
11396
11479
|
padding:
|
|
11397
11480
|
'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-dense) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-dense)',
|
|
11398
11481
|
},
|
|
11482
|
+
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
|
|
11483
|
+
{ gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-dense)' },
|
|
11399
11484
|
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
|
|
11400
11485
|
{
|
|
11401
11486
|
paddingLeft:
|
|
11402
|
-
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense)
|
|
11487
|
+
'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense))',
|
|
11403
11488
|
},
|
|
11404
11489
|
'.ids-side-nav.ids-side-nav-dense .ids-side-nav-title+.ids-side-nav-item': {
|
|
11405
11490
|
marginTop: 'var(--ids-comp-sidenav-section-size-gap-dense)',
|
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
@keyframes expand-submenu {
|
|
2
|
+
0% {
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
visibility: hidden;
|
|
5
|
+
}
|
|
6
|
+
99% {
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
visibility: visible;
|
|
9
|
+
}
|
|
10
|
+
100% {
|
|
11
|
+
overflow: visible;
|
|
12
|
+
visibility: visible;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
@keyframes collapse-submenu {
|
|
16
|
+
0% {
|
|
17
|
+
overflow: visible;
|
|
18
|
+
visibility: visible;
|
|
19
|
+
}
|
|
20
|
+
99% {
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
visibility: visible;
|
|
23
|
+
}
|
|
24
|
+
100% {
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
visibility: hidden;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
1
29
|
.ids-side-nav {
|
|
2
30
|
box-sizing: border-box;
|
|
3
31
|
border-width: 0;
|
|
@@ -32,11 +60,12 @@
|
|
|
32
60
|
max-height: 0;
|
|
33
61
|
opacity: 0;
|
|
34
62
|
transition: all 300ms ease-out;
|
|
63
|
+
animation: collapse-submenu 0.3s forwards;
|
|
35
64
|
}
|
|
36
65
|
.ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-submenu.expanded {
|
|
37
|
-
max-height: 10000px;
|
|
38
66
|
opacity: 1;
|
|
39
67
|
transition: all 300ms ease-in;
|
|
68
|
+
animation: expand-submenu 0.3s forwards;
|
|
40
69
|
}
|
|
41
70
|
.ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-summary > button[idsIconButton] {
|
|
42
71
|
margin-left: auto;
|
|
@@ -106,11 +135,6 @@
|
|
|
106
135
|
letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-compact);
|
|
107
136
|
line-height: var(--ids-comp-sidenav-section-title-typography-line-height-compact);
|
|
108
137
|
}
|
|
109
|
-
.ids-side-nav.ids-side-nav-compact .ids-side-nav-item {
|
|
110
|
-
--submenu-outline-compensation: calc(
|
|
111
|
-
var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-compact) + 2px
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
138
|
.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single {
|
|
115
139
|
border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-compact);
|
|
116
140
|
border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-compact);
|
|
@@ -173,17 +197,28 @@
|
|
|
173
197
|
left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-compact) * -1);
|
|
174
198
|
margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact) * -1);
|
|
175
199
|
}
|
|
176
|
-
.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
|
|
177
|
-
|
|
200
|
+
.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
|
|
201
|
+
--submenu-item-height: calc(
|
|
202
|
+
max(
|
|
203
|
+
var(--ids-comp-sidenav-navitem-single-size-height-compact),
|
|
204
|
+
var(--ids-comp-sidenav-navitem-expandable-summary-size-height-compact)
|
|
205
|
+
) +
|
|
206
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) +
|
|
207
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) +
|
|
208
|
+
calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact) * var(--submenu-items-count))
|
|
209
|
+
);
|
|
210
|
+
max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
|
|
178
211
|
gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact);
|
|
179
|
-
padding:
|
|
212
|
+
padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact);
|
|
180
213
|
}
|
|
181
214
|
.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable {
|
|
182
|
-
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-compact);
|
|
183
215
|
padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-compact) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-compact);
|
|
184
216
|
}
|
|
217
|
+
.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded) {
|
|
218
|
+
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-compact);
|
|
219
|
+
}
|
|
185
220
|
.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
|
|
186
|
-
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact)
|
|
221
|
+
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact));
|
|
187
222
|
}
|
|
188
223
|
.ids-side-nav.ids-side-nav-compact .ids-side-nav-title + .ids-side-nav-item {
|
|
189
224
|
margin-top: var(--ids-comp-sidenav-section-size-gap-compact);
|
|
@@ -215,11 +250,6 @@
|
|
|
215
250
|
letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-comfortable);
|
|
216
251
|
line-height: var(--ids-comp-sidenav-section-title-typography-line-height-comfortable);
|
|
217
252
|
}
|
|
218
|
-
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item {
|
|
219
|
-
--submenu-outline-compensation: calc(
|
|
220
|
-
var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-comfortable) + 2px
|
|
221
|
-
);
|
|
222
|
-
}
|
|
223
253
|
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single {
|
|
224
254
|
border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-comfortable);
|
|
225
255
|
border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-comfortable);
|
|
@@ -282,17 +312,28 @@
|
|
|
282
312
|
left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-comfortable) * -1);
|
|
283
313
|
margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable) * -1);
|
|
284
314
|
}
|
|
285
|
-
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
|
|
286
|
-
|
|
315
|
+
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
|
|
316
|
+
--submenu-item-height: calc(
|
|
317
|
+
max(
|
|
318
|
+
var(--ids-comp-sidenav-navitem-single-size-height-comfortable),
|
|
319
|
+
var(--ids-comp-sidenav-navitem-expandable-summary-size-height-comfortable)
|
|
320
|
+
) +
|
|
321
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) +
|
|
322
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) +
|
|
323
|
+
calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable) * var(--submenu-items-count))
|
|
324
|
+
);
|
|
325
|
+
max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
|
|
287
326
|
gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable);
|
|
288
|
-
padding:
|
|
327
|
+
padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable);
|
|
289
328
|
}
|
|
290
329
|
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable {
|
|
291
|
-
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable);
|
|
292
330
|
padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-comfortable);
|
|
293
331
|
}
|
|
332
|
+
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded) {
|
|
333
|
+
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable);
|
|
334
|
+
}
|
|
294
335
|
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
|
|
295
|
-
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable)
|
|
336
|
+
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable));
|
|
296
337
|
}
|
|
297
338
|
.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title + .ids-side-nav-item {
|
|
298
339
|
margin-top: var(--ids-comp-sidenav-section-size-gap-comfortable);
|
|
@@ -324,11 +365,6 @@
|
|
|
324
365
|
letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-spacious);
|
|
325
366
|
line-height: var(--ids-comp-sidenav-section-title-typography-line-height-spacious);
|
|
326
367
|
}
|
|
327
|
-
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item {
|
|
328
|
-
--submenu-outline-compensation: calc(
|
|
329
|
-
var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-spacious) + 2px
|
|
330
|
-
);
|
|
331
|
-
}
|
|
332
368
|
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single {
|
|
333
369
|
border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-spacious);
|
|
334
370
|
border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-spacious);
|
|
@@ -391,17 +427,28 @@
|
|
|
391
427
|
left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-spacious) * -1);
|
|
392
428
|
margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious) * -1);
|
|
393
429
|
}
|
|
394
|
-
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
|
|
395
|
-
|
|
430
|
+
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
|
|
431
|
+
--submenu-item-height: calc(
|
|
432
|
+
max(
|
|
433
|
+
var(--ids-comp-sidenav-navitem-single-size-height-spacious),
|
|
434
|
+
var(--ids-comp-sidenav-navitem-expandable-summary-size-height-spacious)
|
|
435
|
+
) +
|
|
436
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) +
|
|
437
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) +
|
|
438
|
+
calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious) * var(--submenu-items-count))
|
|
439
|
+
);
|
|
440
|
+
max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
|
|
396
441
|
gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious);
|
|
397
|
-
padding:
|
|
442
|
+
padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious);
|
|
398
443
|
}
|
|
399
444
|
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable {
|
|
400
|
-
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious);
|
|
401
445
|
padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-spacious);
|
|
402
446
|
}
|
|
447
|
+
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded) {
|
|
448
|
+
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious);
|
|
449
|
+
}
|
|
403
450
|
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
|
|
404
|
-
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious)
|
|
451
|
+
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious));
|
|
405
452
|
}
|
|
406
453
|
.ids-side-nav.ids-side-nav-spacious .ids-side-nav-title + .ids-side-nav-item {
|
|
407
454
|
margin-top: var(--ids-comp-sidenav-section-size-gap-spacious);
|
|
@@ -433,11 +480,6 @@
|
|
|
433
480
|
letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-dense);
|
|
434
481
|
line-height: var(--ids-comp-sidenav-section-title-typography-line-height-dense);
|
|
435
482
|
}
|
|
436
|
-
.ids-side-nav.ids-side-nav-dense .ids-side-nav-item {
|
|
437
|
-
--submenu-outline-compensation: calc(
|
|
438
|
-
var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-dense) + 2px
|
|
439
|
-
);
|
|
440
|
-
}
|
|
441
483
|
.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single {
|
|
442
484
|
border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-dense);
|
|
443
485
|
border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-dense);
|
|
@@ -500,17 +542,28 @@
|
|
|
500
542
|
left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-dense) * -1);
|
|
501
543
|
margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense) * -1);
|
|
502
544
|
}
|
|
503
|
-
.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
|
|
504
|
-
|
|
545
|
+
.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded {
|
|
546
|
+
--submenu-item-height: calc(
|
|
547
|
+
max(
|
|
548
|
+
var(--ids-comp-sidenav-navitem-single-size-height-dense),
|
|
549
|
+
var(--ids-comp-sidenav-navitem-expandable-summary-size-height-dense)
|
|
550
|
+
) +
|
|
551
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) +
|
|
552
|
+
var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) +
|
|
553
|
+
calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense) * var(--submenu-items-count))
|
|
554
|
+
);
|
|
555
|
+
max-height: calc(var(--submenu-items-count) * var(--submenu-item-height));
|
|
505
556
|
gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense);
|
|
506
|
-
padding:
|
|
557
|
+
padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense);
|
|
507
558
|
}
|
|
508
559
|
.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable {
|
|
509
|
-
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-dense);
|
|
510
560
|
padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-dense) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-dense);
|
|
511
561
|
}
|
|
562
|
+
.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded) {
|
|
563
|
+
gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-dense);
|
|
564
|
+
}
|
|
512
565
|
.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
|
|
513
|
-
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense)
|
|
566
|
+
padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense));
|
|
514
567
|
}
|
|
515
568
|
.ids-side-nav.ids-side-nav-dense .ids-side-nav-title + .ids-side-nav-item {
|
|
516
569
|
margin-top: var(--ids-comp-sidenav-section-size-gap-dense);
|