@navikt/ds-css 4.2.0 → 4.4.0
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/CHANGELOG.md +16 -0
- package/date.css +4 -0
- package/dist/component/date.css +4 -0
- package/dist/component/date.min.css +1 -1
- package/dist/component/expansioncard.css +6 -3
- package/dist/component/expansioncard.min.css +1 -1
- package/dist/component/helptext.css +1 -1
- package/dist/component/helptext.min.css +1 -1
- package/dist/component/index.css +19 -11
- package/dist/component/index.min.css +2 -2
- package/dist/component/linkpanel.css +1 -1
- package/dist/component/linkpanel.min.css +1 -1
- package/dist/component/modal.css +1 -0
- package/dist/component/modal.min.css +1 -1
- package/dist/component/popover.css +1 -0
- package/dist/component/popover.min.css +1 -1
- package/dist/components.css +13 -5
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +6 -6
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +19 -11
- package/dist/index.min.css +2 -2
- package/expansioncard.css +6 -3
- package/help-text.css +1 -1
- package/link-panel.css +1 -1
- package/modal.css +1 -0
- package/package.json +2 -2
- package/popover.css +1 -0
package/dist/component/modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ReactModal__Body--open{overflow:hidden}.navds-modal{background-color:var(--ac-modal-bg,var(--a-surface-default));border-radius:var(--a-border-radius-medium);display:block;max-height:100%;overflow:auto;position:relative}.navds-modal__content{padding:var(--a-spacing-4)}.navds-modal--focus,.navds-modal:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-modal--focus,.navds-modal:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-modal__overlay{align-items:center;background-color:var(--ac-modal-backdrop,var(--a-surface-backdrop));bottom:0;display:flex;justify-content:center;left:0;padding:var(--a-spacing-4);position:fixed;right:0;top:0;z-index:var(--a-z-index-modal)}.navds-modal__button--shake{-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:-webkit-transform .1s cubic-bezier(.82,2,1,.3);transition:transform .1s cubic-bezier(.82,2,1,.3);transition:transform .1s cubic-bezier(.82,2,1,.3),-webkit-transform .1s cubic-bezier(.82,2,1,.3)}.navds-modal__overlay:active>.navds-modal:not(:active)>.navds-modal__button--shake{-webkit-transform:rotate(10deg);transform:rotate(10deg);transition:-webkit-transform .1s cubic-bezier(.82,-2,1,.3);transition:transform .1s cubic-bezier(.82,-2,1,.3);transition:transform .1s cubic-bezier(.82,-2,1,.3),-webkit-transform .1s cubic-bezier(.82,-2,1,.3)}.navds-modal__button{display:flex;padding:var(--a-spacing-2);position:absolute;right:var(--a-spacing-4);top:var(--a-spacing-4)}.navds-modal__button svg{height:1.5rem;width:1.5rem}
|
|
1
|
+
.ReactModal__Body--open{overflow:hidden}.navds-modal{background-color:var(--ac-modal-bg,var(--a-surface-default));border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-xlarge);display:block;max-height:100%;overflow:auto;position:relative}.navds-modal__content{padding:var(--a-spacing-4)}.navds-modal--focus,.navds-modal:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-modal--focus,.navds-modal:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-modal__overlay{align-items:center;background-color:var(--ac-modal-backdrop,var(--a-surface-backdrop));bottom:0;display:flex;justify-content:center;left:0;padding:var(--a-spacing-4);position:fixed;right:0;top:0;z-index:var(--a-z-index-modal)}.navds-modal__button--shake{-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:-webkit-transform .1s cubic-bezier(.82,2,1,.3);transition:transform .1s cubic-bezier(.82,2,1,.3);transition:transform .1s cubic-bezier(.82,2,1,.3),-webkit-transform .1s cubic-bezier(.82,2,1,.3)}.navds-modal__overlay:active>.navds-modal:not(:active)>.navds-modal__button--shake{-webkit-transform:rotate(10deg);transform:rotate(10deg);transition:-webkit-transform .1s cubic-bezier(.82,-2,1,.3);transition:transform .1s cubic-bezier(.82,-2,1,.3);transition:transform .1s cubic-bezier(.82,-2,1,.3),-webkit-transform .1s cubic-bezier(.82,-2,1,.3)}.navds-modal__button{display:flex;padding:var(--a-spacing-2);position:absolute;right:var(--a-spacing-4);top:var(--a-spacing-4)}.navds-modal__button svg{height:1.5rem;width:1.5rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-medium);z-index:var(--a-z-index-popover)}.navds-popover__content{padding:var(--a-spacing-4)}.navds-popover--hidden{display:none}.navds-popover:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-popover:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-popover__arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:1rem;z-index:-1}.navds-popover[data-placement^=top]>.navds-popover__arrow{border-left-color:transparent;border-top-color:transparent}.navds-popover[data-placement^=bottom]>.navds-popover__arrow{border-bottom-color:transparent;border-right-color:transparent}.navds-popover[data-placement^=left]>.navds-popover__arrow{border-bottom-color:transparent;border-left-color:transparent}.navds-popover[data-placement^=right]>.navds-popover__arrow{border-right-color:transparent;border-top-color:transparent}
|
|
1
|
+
.navds-popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-medium);max-width:calc(100vw - var(--a-spacing-6));z-index:var(--a-z-index-popover)}.navds-popover__content{padding:var(--a-spacing-4)}.navds-popover--hidden{display:none}.navds-popover:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-popover:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-popover__arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:1rem;z-index:-1}.navds-popover[data-placement^=top]>.navds-popover__arrow{border-left-color:transparent;border-top-color:transparent}.navds-popover[data-placement^=bottom]>.navds-popover__arrow{border-bottom-color:transparent;border-right-color:transparent}.navds-popover[data-placement^=left]>.navds-popover__arrow{border-bottom-color:transparent;border-left-color:transparent}.navds-popover[data-placement^=right]>.navds-popover__arrow{border-right-color:transparent;border-top-color:transparent}
|
package/dist/components.css
CHANGED
|
@@ -1445,7 +1445,7 @@
|
|
|
1445
1445
|
.navds-expansioncard__title--large {
|
|
1446
1446
|
margin-top: var(--a-spacing-1);
|
|
1447
1447
|
}
|
|
1448
|
-
.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
|
|
1448
|
+
.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
|
|
1449
1449
|
margin-top: var(--a-spacing-05);
|
|
1450
1450
|
}
|
|
1451
1451
|
.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
|
|
@@ -1477,7 +1477,7 @@
|
|
|
1477
1477
|
.navds-expansioncard__header-chevron {
|
|
1478
1478
|
transition: transform 150ms ease-in-out;
|
|
1479
1479
|
}
|
|
1480
|
-
.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
|
|
1480
|
+
.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
|
|
1481
1481
|
transform: translateY(0) rotate(180deg);
|
|
1482
1482
|
}
|
|
1483
1483
|
.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
|
|
@@ -1493,7 +1493,10 @@
|
|
|
1493
1493
|
box-shadow: var(--a-shadow-focus);
|
|
1494
1494
|
}
|
|
1495
1495
|
}
|
|
1496
|
-
.navds-expansioncard--open
|
|
1496
|
+
.navds-expansioncard--open
|
|
1497
|
+
> :where(.navds-expansioncard__header)
|
|
1498
|
+
> :where(.navds-expansioncard__header-button):hover
|
|
1499
|
+
:where(.navds-expansioncard__header-chevron) {
|
|
1497
1500
|
transform: translateY(-1px) rotate(180deg);
|
|
1498
1501
|
}
|
|
1499
1502
|
.navds-expansioncard__header-button::after {
|
|
@@ -2489,7 +2492,7 @@
|
|
|
2489
2492
|
}
|
|
2490
2493
|
.navds-help-text__popover.navds-popover {
|
|
2491
2494
|
background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
|
|
2492
|
-
max-width: min(65ch,
|
|
2495
|
+
max-width: min(65ch, calc(100vw - 1.5rem));
|
|
2493
2496
|
|
|
2494
2497
|
--ac-popover-border: var(--a-border-info);
|
|
2495
2498
|
}
|
|
@@ -2735,6 +2738,7 @@ button.navds-internalheader__title:active,
|
|
|
2735
2738
|
position: relative;
|
|
2736
2739
|
overflow: auto;
|
|
2737
2740
|
max-height: 100%;
|
|
2741
|
+
box-shadow: var(--a-shadow-xlarge);
|
|
2738
2742
|
}
|
|
2739
2743
|
.navds-modal__content {
|
|
2740
2744
|
padding: var(--a-spacing-4);
|
|
@@ -2845,6 +2849,7 @@ button.navds-internalheader__title:active,
|
|
|
2845
2849
|
border: 1px solid;
|
|
2846
2850
|
border-color: var(--ac-popover-border, var(--a-border-default));
|
|
2847
2851
|
border-radius: var(--a-border-radius-medium);
|
|
2852
|
+
max-width: calc(100vw - var(--a-spacing-6));
|
|
2848
2853
|
}
|
|
2849
2854
|
.navds-popover__content {
|
|
2850
2855
|
padding: var(--a-spacing-4);
|
|
@@ -3125,6 +3130,9 @@ button.navds-internalheader__title:active,
|
|
|
3125
3130
|
visibility: hidden;
|
|
3126
3131
|
pointer-events: none;
|
|
3127
3132
|
}
|
|
3133
|
+
.navds-date__popover:where(.navds-popover) {
|
|
3134
|
+
border: none;
|
|
3135
|
+
}
|
|
3128
3136
|
.navds-tag {
|
|
3129
3137
|
border: 1px solid;
|
|
3130
3138
|
border-radius: var(--a-border-radius-small);
|
|
@@ -3770,7 +3778,7 @@ button.navds-internalheader__title:active,
|
|
|
3770
3778
|
color: var(--ac-link-panel-hover-text, var(--a-text-action));
|
|
3771
3779
|
}
|
|
3772
3780
|
.navds-link-panel:hover {
|
|
3773
|
-
box-shadow: var(--a-shadow-
|
|
3781
|
+
box-shadow: var(--a-shadow-small);
|
|
3774
3782
|
border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
|
|
3775
3783
|
}
|
|
3776
3784
|
.navds-link-panel:focus-visible {
|