@navikt/ds-css 5.8.0 → 5.9.1

package/dist/component/modal.css

@@ -59,12 +59,17 @@
 
 @media (min-width: 480px) {
   .navds-modal {
-    max-width: calc((100% - 6px) - 2em);
-    max-height: calc((100% - 6px) - 2em);
+    max-width: calc(100% - 6px - 2em);
   }
 
   .navds-modal--autowidth {
-    max-width: min(700px, calc((100% - 6px) - 2em));
+    max-width: min(700px, calc(100% - 6px - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 6px - 2em);
   }
 }
 
@@ -130,6 +135,15 @@
   margin-left: auto;
 }
 
+/* When Datepicker is used nested inside a Modal */
+
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
 @keyframes akselModalFadeIn {
   from {
     opacity: 0;

package/dist/component/modal.min.css

@@ -1 +1 @@
-.navds-modal__document-body{overflow:hidden}.navds-modal{background-color:var(--ac-modal-bg,var(--a-surface-default));border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);max-height:100%;max-width:100%;padding:0;position:fixed}.navds-modal[open]{-webkit-animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:0;margin:auto;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-height:calc(100% - 6px - 2em);max-width:calc(100% - 6px - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 6px - 2em))}}.navds-modal::-webkit-backdrop{-webkit-animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,rgba(2,20,49,.49))}.navds-modal::backdrop{-webkit-animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,rgba(2,20,49,.49))}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,rgba(2,20,49,.49));bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal__footer :nth-of-type(2){margin-left:auto}@-webkit-keyframes akselModalFadeIn{0%{opacity:0;-webkit-transform:translate3d(0,calc(5% + 4px),0);transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{-webkit-transform:none;transform:none}}@keyframes akselModalFadeIn{0%{opacity:0;-webkit-transform:translate3d(0,calc(5% + 4px),0);transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{-webkit-transform:none;transform:none}}@-webkit-keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}
+.navds-modal__document-body{overflow:hidden}.navds-modal{background-color:var(--ac-modal-bg,var(--a-surface-default));border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);max-height:100%;max-width:100%;padding:0;position:fixed}.navds-modal[open]{-webkit-animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:0;margin:auto;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 6px - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 6px - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 6px - 2em)}}.navds-modal::-webkit-backdrop{-webkit-animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,rgba(2,20,49,.49))}.navds-modal::backdrop{-webkit-animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,rgba(2,20,49,.49))}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,rgba(2,20,49,.49));bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{-webkit-animation:none;animation:none;max-height:100vh;max-width:100vw;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@-webkit-keyframes akselModalFadeIn{0%{opacity:0;-webkit-transform:translate3d(0,calc(5% + 4px),0);transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{-webkit-transform:none;transform:none}}@keyframes akselModalFadeIn{0%{opacity:0;-webkit-transform:translate3d(0,calc(5% + 4px),0);transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{-webkit-transform:none;transform:none}}@-webkit-keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}

package/dist/components.css

@@ -4413,12 +4413,17 @@ button.navds-internalheader__title:active,
 
 @media (min-width: 480px) {
   .navds-modal {
-    max-width: calc((100% - 6px) - 2em);
-    max-height: calc((100% - 6px) - 2em);
+    max-width: calc(100% - 6px - 2em);
   }
 
   .navds-modal--autowidth {
-    max-width: min(700px, calc((100% - 6px) - 2em));
+    max-width: min(700px, calc(100% - 6px - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 6px - 2em);
   }
 }
 
@@ -4484,6 +4489,15 @@ button.navds-internalheader__title:active,
   margin-left: auto;
 }
 
+/* When Datepicker is used nested inside a Modal */
+
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
 @keyframes akselModalFadeIn {
   from {
     opacity: 0;
@@ -4790,19 +4804,6 @@ button.navds-internalheader__title:active,
   width: fit-content;
 }
 
-/* Focus layering */
-
-.navds-date__field-input:focus-visible,
-.navds-date__field-button {
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field-input:focus {
-    z-index: 1;
-  }
-}
-
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
   color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -4843,11 +4844,11 @@ button.navds-internalheader__title:active,
 }
 
 .navds-date__field-input {
-  padding-right: var(--a-spacing-14);
+  padding-right: var(--a-spacing-12);
 }
 
 .navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-10);
+  padding-right: var(--a-spacing-8);
 }
 
 /* Error-handling */
@@ -4925,10 +4926,6 @@ button.navds-internalheader__title:active,
   pointer-events: none;
 }
 
-.navds-date__popover:where(.navds-popover) {
-  border: none;
-}
-
 /* Readonly */
 
 .navds-date__field--readonly .navds-date__field-button {
@@ -4954,11 +4951,35 @@ button.navds-internalheader__title:active,
   margin: 0;
 }
 
+.navds-date__modal.navds-date {
+  padding: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__modal-body > .navds-date {
+  padding: 0;
+}
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
 @media (min-width: 480px) {
   .navds-date {
     padding: var(--a-spacing-5) var(--a-spacing-4);
   }
 
+  .navds-date__modal-body {
+    padding: var(--a-spacing-6);
+  }
+
   .navds-date__caption {
     gap: var(--a-spacing-2);
   }