@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.
@@ -9,6 +9,7 @@
9
9
  position: relative;
10
10
  overflow: auto;
11
11
  max-height: 100%;
12
+ box-shadow: var(--a-shadow-xlarge);
12
13
  }
13
14
 
14
15
  .navds-modal__content {
@@ -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}
@@ -5,6 +5,7 @@
5
5
  border: 1px solid;
6
6
  border-color: var(--ac-popover-border, var(--a-border-default));
7
7
  border-radius: var(--a-border-radius-medium);
8
+ max-width: calc(100vw - var(--a-spacing-6));
8
9
  }
9
10
 
10
11
  .navds-popover__content {
@@ -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}
@@ -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 :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
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, 90vw);
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-medium);
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 {