@navikt/ds-css 7.17.3 → 7.18.0

package/dist/darkside/version/{7.17.3 → 7.18.0}/component/modal.css

@@ -19,7 +19,7 @@
 
   .aksel-modal[open] {
     flex-direction: column;
-    animation: .35s cubic-bezier(.15, 1, .3, 1) akselModalFadeIn;
+    animation: .7s cubic-bezier(.15, 1, .3, 1) akselModalFadeIn;
     display: flex;
   }
 
@@ -88,12 +88,12 @@
   }
 
   .aksel-modal::backdrop {
-    background: rgba(2, 20, 49, .49);
-    animation: .35s cubic-bezier(.15, 1, .3, 1) akselModalBackdropFadeIn;
+    background: rgba(2, 20, 49, .8);
+    animation: .7s cubic-bezier(.15, 1, .3, 1) akselModalBackdropFadeIn;
   }
 
   .aksel-modal--polyfilled + .backdrop {
-    background: rgba(2, 20, 49, .49);
+    background: rgba(2, 20, 49, .8);
     position: fixed;
     inset: 0;
   }
@@ -154,7 +154,7 @@
   @keyframes akselModalFadeIn {
     0% {
       opacity: .0001;
-      transform: translate3d(0, calc(2% + 4px), 0);
+      transform: translate3d(0, 4px, 0);
     }
 
     50% {
@@ -167,11 +167,15 @@
   }
 
   @keyframes akselModalBackdropFadeIn {
-    from {
-      opacity: 0;
+    0% {
+      opacity: .0001;
     }
 
-    to {
+    50% {
+      opacity: 1;
+    }
+
+    100% {
       opacity: 1;
     }
   }

package/dist/darkside/version/7.18.0/component/modal.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-modal__document-body{overflow:hidden}.aksel-modal{--__axc-modal-bg: var(--ax-bg-raised);background-color:var(--__axc-modal-bg);border:1px solid var(--ax-border-neutral-subtleA);border-radius:var(--ax-border-radius-xlarge);box-shadow:var(--ax-shadow-dialog);max-width:100%;max-height:100%;color:var(--ax-text-neutral);margin:auto;padding:0;position:fixed}.aksel-modal[open]{flex-direction:column;animation:.7s cubic-bezier(.15,1,.3,1) akselModalFadeIn;display:flex}.aksel-modal--polyfilled{width:fit-content;height:fit-content;margin:auto;top:50%;left:0;right:0;transform:translateY(-50%)}.aksel-modal--polyfilled:not([open]){display:none}.aksel-modal--polyfilled .aksel-modal--polyfilled{overflow:auto}._dialog_overlay{position:fixed;inset:0}.aksel-modal--medium{width:700px}.aksel-modal--small{width:450px}.aksel-modal--small .aksel-modal__header{padding:var(--ax-space-16)}.aksel-modal--small .aksel-modal__body{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-modal--small .aksel-modal__footer{padding:var(--ax-space-16)}@media (min-width: 480px){.aksel-modal{max-width:calc(100% - 2em)}.aksel-modal--autowidth{max-width:min(700px,100% - 2em)}}@media (min-height: 480px){.aksel-modal{max-height:calc(100% - 2em)}.aksel-modal--top{max-height:calc(100% - 4em);margin-top:2em}}.aksel-modal::backdrop{background:#021431cc;animation:.7s cubic-bezier(.15,1,.3,1) akselModalBackdropFadeIn}.aksel-modal--polyfilled+.backdrop{background:#021431cc;position:fixed;inset:0}.aksel-modal__button{margin-left:var(--ax-space-16);float:right}.aksel-modal__header{padding:var(--ax-space-20)}.aksel-modal__header-icon svg{vertical-align:-.25rem;margin-right:var(--ax-space-4);display:inline}.aksel-modal__label{font-weight:var(--ax-font-weight-bold);color:var(--ax-text-neutral-subtle)}.aksel-modal__body{padding:var(--ax-space-16) var(--ax-space-20);overscroll-behavior:contain;background:linear-gradient(var(--__axc-modal-bg) 30%,transparent) top,linear-gradient(transparent,var(--__axc-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),transparent) top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),transparent) bottom;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;background-attachment:local,local,scroll,scroll;position:relative;overflow:auto}.aksel-modal__header+.aksel-modal__body{padding-top:var(--ax-space-0)}.aksel-modal__footer{gap:var(--ax-space-16);padding:var(--ax-space-20);flex-flow:row-reverse wrap;display:flex}.aksel-modal__footer :nth-of-type(2){margin-left:auto}.aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal{min-width:fit-content;max-width:100vw;max-height:100vh;animation:none}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media (forced-colors: active){.aksel-modal{outline:2px solid rgba(0,0,0,0)}}}

package/dist/darkside/version/{7.17.3 → 7.18.0}/component/table.css

@@ -13,7 +13,7 @@
     display: table-row-group;
   }
 
-  .aksel-table__body .aksel-table__row--shade-on-hover:not(.aksel-table__expandable-row--expansion-disabled):hover {
+  .aksel-table__body .aksel-table__row--shade-on-hover:hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
     transition: background-color 70ms cubic-bezier(.2, 0, 0, 1);
   }

package/dist/darkside/version/7.18.0/component/table.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-table{border-collapse:collapse;width:100%;display:table}.aksel-table__header{display:table-header-group}.aksel-table__body{display:table-row-group}.aksel-table__body .aksel-table__row--shade-on-hover:hover{background-color:var(--ax-bg-neutral-moderate-hoverA);transition:background-color 70ms cubic-bezier(.2,0,0,1)}.aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover{background-color:var(--ax-bg-accent-moderate-hoverA)}.aksel-table__row{display:table-row}.aksel-table__row--selected{background-color:var(--ax-bg-accent-softA)}.aksel-table__row--selected+.aksel-table__expanded-row{background-color:var(--ax-bg-accent-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n+1):not(.aksel-table__row--selected)){background-color:#0000}.aksel-table--zebra-stripes .aksel-table__body .aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__row--selected+.aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-accent-softA)}.aksel-table__header-cell,.aksel-table__data-cell{padding:var(--ax-space-12) var(--ax-space-8);border-bottom:1px solid var(--ax-border-neutral-subtleA);text-align:left;display:table-cell}.aksel-table__header .aksel-table__header-cell,.aksel-table__header .aksel-table__data-cell{border-bottom-width:2px}.aksel-table__header-cell--align-right,.aksel-table__data-cell--align-right{text-align:right}.aksel-table__header-cell--align-center,.aksel-table__data-cell--align-center{text-align:center}:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell{border-bottom-color:#0000}.aksel-table--large .aksel-table__header-cell,.aksel-table--large .aksel-table__data-cell{padding:var(--ax-space-16) var(--ax-space-8)}.aksel-table--small .aksel-table__header-cell,.aksel-table--small .aksel-table__data-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox .aksel-checkbox__input{top:-.75rem}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox--small .aksel-checkbox__input{top:-.375rem}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox .aksel-checkbox__label{padding:0}.aksel-table .aksel-checkbox__input:focus+.aksel-checkbox__label:after,.aksel-table .aksel-radio__input:focus+.aksel-radio__label:after{height:100%}.aksel-table__header-cell[aria-sort]{padding:0}.aksel-table__sort-button{appearance:none;color:var(--ax-text-accent-subtle);cursor:pointer;padding:var(--ax-space-16) var(--ax-space-12);gap:var(--ax-space-4);width:100%;line-height:inherit;font-weight:inherit;background:none;border:none;align-items:center;margin:0;display:flex}.aksel-table--small .aksel-table__sort-button{padding:var(--ax-space-8) var(--ax-space-12)}.aksel-table__sort-button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__sort-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-5px}.aksel-table__header-cell[aria-sort=ascending] .aksel-table__sort-button,.aksel-table__header-cell[aria-sort=descending] .aksel-table__sort-button{background-color:var(--ax-bg-accent-moderate-pressedA);color:var(--ax-text-accent)}.aksel-table__header-cell--align-right .aksel-table__sort-button{justify-content:flex-end}.aksel-table__header-cell--align-center .aksel-table__sort-button{justify-content:center}.aksel-table__sort-button svg{flex-shrink:0;font-size:1.5rem}.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell,.aksel-table__header-cell){transition:border-bottom-color .15s cubic-bezier(.95,.05,.8,.04)}.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover{cursor:pointer}.aksel-table__expandable-row--open :where(.aksel-table__data-cell,.aksel-table__header-cell){border-bottom-color:#0000}.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open{border-color:#0000}.aksel-table__toggle-expand-cell{width:3rem;padding:0}.aksel-table--large .aksel-table__toggle-expand-cell{padding:0 var(--ax-space-8)}.aksel-table--small .aksel-table__toggle-expand-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-border-radius-medium);background:none;border:none;place-content:center;width:2rem;height:2rem;margin:0 auto;font-size:1.5rem;transition:background-color 70ms cubic-bezier(.2,0,0,1);display:grid}.aksel-table__expandable-icon{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover{cursor:pointer}.aksel-table__toggle-expand-button:hover,.aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover,:scope .aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,:scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button){background-color:var(--ax-bg-accent-moderate-hoverA)}.aksel-table__toggle-expand-cell--open>:where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon){transform:rotateX(180deg)}.aksel-table__toggle-expand-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-table__expanded-row-cell{padding:0}.aksel-table__expanded-row-cell:empty{display:none}.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),.aksel-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-table__expanded-row-content{--__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);padding-block:var(--ax-space-16)}.aksel-table--small .aksel-table__expanded-row-content{padding-block:var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-both{padding-inline:var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-left{padding-inline:var(--__ac-table-expanded-row-pi) var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-right{padding-inline:var(--ax-space-8) var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-none{padding-inline:var(--ax-space-8)}}

package/dist/darkside/version/{7.17.3 → 7.18.0}/components.css

@@ -4138,7 +4138,7 @@
 
   .aksel-modal[open] {
     flex-direction: column;
-    animation: .35s cubic-bezier(.15, 1, .3, 1) akselModalFadeIn;
+    animation: .7s cubic-bezier(.15, 1, .3, 1) akselModalFadeIn;
     display: flex;
   }
 
@@ -4207,12 +4207,12 @@
   }
 
   .aksel-modal::backdrop {
-    background: rgba(2, 20, 49, .49);
-    animation: .35s cubic-bezier(.15, 1, .3, 1) akselModalBackdropFadeIn;
+    background: rgba(2, 20, 49, .8);
+    animation: .7s cubic-bezier(.15, 1, .3, 1) akselModalBackdropFadeIn;
   }
 
   .aksel-modal--polyfilled + .backdrop {
-    background: rgba(2, 20, 49, .49);
+    background: rgba(2, 20, 49, .8);
     position: fixed;
     inset: 0;
   }
@@ -4273,7 +4273,7 @@
   @keyframes akselModalFadeIn {
     0% {
       opacity: .0001;
-      transform: translate3d(0, calc(2% + 4px), 0);
+      transform: translate3d(0, 4px, 0);
     }
 
     50% {
@@ -4286,11 +4286,15 @@
   }
 
   @keyframes akselModalBackdropFadeIn {
-    from {
-      opacity: 0;
+    0% {
+      opacity: .0001;
     }
 
-    to {
+    50% {
+      opacity: 1;
+    }
+
+    100% {
       opacity: 1;
     }
   }
@@ -5588,7 +5592,7 @@
     display: table-row-group;
   }
 
-  .aksel-table__body .aksel-table__row--shade-on-hover:not(.aksel-table__expandable-row--expansion-disabled):hover {
+  .aksel-table__body .aksel-table__row--shade-on-hover:hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
     transition: background-color 70ms cubic-bezier(.2, 0, 0, 1);
   }