@navikt/ds-css 5.3.0 → 5.3.2

package/dist/component/skeleton.css

@@ -1,5 +1,4 @@
 .navds-skeleton {
-  display: block;
   background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
   height: 1.3em;
   animation: akselSkeletonAnimation 0.8s linear infinite alternate;

package/dist/component/skeleton.min.css

@@ -1 +1 @@
-.navds-skeleton{-webkit-animation:akselSkeletonAnimation .8s linear infinite alternate;animation:akselSkeletonAnimation .8s linear infinite alternate;background-color:var(--ac-skeleton-bg,var(--a-surface-neutral-moderate));display:block;height:1.3em;pointer-events:none}.navds-skeleton--has-children{color:transparent}.navds-skeleton--has-children>*{visibility:hidden}.navds-skeleton--has-children.navds-skeleton--no-height{height:auto}.navds-skeleton--has-children.navds-skeleton--no-width{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-skeleton--text{border-radius:var(--a-border-radius-medium);height:auto;-webkit-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:0 55%;transform-origin:0 55%}.navds-skeleton--text:empty:before{content:"\00a0"}.navds-skeleton--circle{border-radius:var(--a-border-radius-full)}.navds-skeleton--rectangle{border-radius:0}.navds-skeleton--rounded{border-radius:var(--a-border-radius-xlarge)}@-webkit-keyframes akselSkeletonAnimation{0%{opacity:1}to{opacity:.4}}@keyframes akselSkeletonAnimation{0%{opacity:1}to{opacity:.4}}
+.navds-skeleton{-webkit-animation:akselSkeletonAnimation .8s linear infinite alternate;animation:akselSkeletonAnimation .8s linear infinite alternate;background-color:var(--ac-skeleton-bg,var(--a-surface-neutral-moderate));height:1.3em;pointer-events:none}.navds-skeleton--has-children{color:transparent}.navds-skeleton--has-children>*{visibility:hidden}.navds-skeleton--has-children.navds-skeleton--no-height{height:auto}.navds-skeleton--has-children.navds-skeleton--no-width{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-skeleton--text{border-radius:var(--a-border-radius-medium);height:auto;-webkit-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:0 55%;transform-origin:0 55%}.navds-skeleton--text:empty:before{content:"\00a0"}.navds-skeleton--circle{border-radius:var(--a-border-radius-full)}.navds-skeleton--rectangle{border-radius:0}.navds-skeleton--rounded{border-radius:var(--a-border-radius-xlarge)}@-webkit-keyframes akselSkeletonAnimation{0%{opacity:1}to{opacity:.4}}@keyframes akselSkeletonAnimation{0%{opacity:1}to{opacity:.4}}

package/dist/components.css

@@ -409,6 +409,9 @@
     grid-column: span 12;
   }
 }
+.navds-accordion {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+}
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -416,7 +419,6 @@
  * Header *
  *************************/
 .navds-accordion__header {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
   --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
     inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
 
@@ -1618,67 +1620,90 @@
     transform: translateY(0);
   }
 }
-/**
- * GuidePanel component
- */
 .navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
   position: relative;
-  padding-left: var(--a-spacing-10);
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
 }
 .navds-guide-panel__content {
   background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-  min-height: 7.25rem;
-  padding: var(--a-spacing-6);
-  padding-left: var(--a-spacing-14);
-}
-.navds-guide-panel--poster {
-  padding-left: 0;
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
   padding-top: var(--a-spacing-12);
 }
-.navds-guide-panel--poster .navds-guide-panel__content {
-  padding: var(--a-spacing-8);
-  padding-top: var(--a-spacing-16);
-}
-.navds-guide-panel .navds-guide {
-  position: absolute;
-  top: var(--a-spacing-4);
-  transform: translateX(-50%);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
 }
-.navds-guide-panel--poster .navds-guide {
-  left: 50%;
-  top: 0;
+/* not-poster */
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
 }
-/**
- * Guide component
- */
-.navds-guide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--a-border-radius-full);
-}
-/* Guide illustration frame */
-.navds-guide__illustration {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
-  border-radius: var(--a-border-radius-full);
-  overflow: hidden;
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
 }
-.navds-guide__illustration svg,
-.navds-guide__illustration img {
-  height: 100%;
-  width: 100%;
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
 }
-/* Illustration sizes */
-.navds-guide__illustration--small {
-  height: 5rem;
-  width: 5rem;
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
 }
-.navds-guide__illustration--medium {
-  height: 6rem;
-  width: 6rem;
+/* responsive-poster (on desktop) */
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
 }
 /*
   Order matters; rearrange with care
@@ -4475,7 +4500,6 @@ button.navds-internalheader__title:active,
   transform: translateY(-1px) rotate(-180deg);
 }
 .navds-skeleton {
-  display: block;
   background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
   height: 1.3em;
   animation: akselSkeletonAnimation 0.8s linear infinite alternate;