@navikt/ds-css 5.3.0 → 5.3.2

package/dist/global/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Aug 2023 11:42:10 GMT
+ * Generated on Wed, 06 Sep 2023 09:14:55 GMT
  */
 
 :root, :host {

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 31 Aug 2023 11:42:10 GMT
+ * Generated on Wed, 06 Sep 2023 09:14:55 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -1199,6 +1199,9 @@ body,
     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;
 }
@@ -1206,7 +1209,6 @@ body,
  * 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);
 
@@ -2367,67 +2369,90 @@ body,
     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
@@ -5224,7 +5249,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;