@navikt/ds-css 0.12.6 → 0.12.10

package/form/select.css

@@ -21,7 +21,6 @@
 
 .navds-select__input {
   appearance: none;
-  padding: 0.5rem;
   background-color: var(--navds-select-color-background);
   border-radius: 4px;
   border: 1px solid var(--navds-select-color-border);
@@ -30,6 +29,7 @@
   min-height: 48px;
   display: inline-block;
   position: relative;
+  padding: 0.5rem;
   padding-right: 2.5rem;
 }
 
@@ -59,6 +59,7 @@
 .navds-form-field--small .navds-select__input {
   min-height: 32px;
   padding: 0.25rem;
+  padding-right: 2rem;
 }
 
 /**

package/form/switch.css

@@ -1,14 +1,17 @@
 :root {
-  --navds-switch-color-label: var(--navds-color-text-primary);
+  --navds-switch-color-label: var(--navds-semantic-color-text);
   --navds-switch-color-label-hover: var(
     --navds-semantic-color-interaction-primary
   );
   --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
   --navds-switch-color-track-background-checked: var(
-    --navds-semantic-color-interaction-primary
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-switch-color-track-background-hover: var(
+    --navds-global-color-gray-800
   );
   --navds-switch-color-track-background-hover-checked: var(
-    --navds-semantic-color-interaction-primary-hover
+    --navds-semantic-color-feedback-success-icon
   );
   --navds-switch-color-track-shadow-inner-focus: var(
     --navds-semantic-color-component-background-light
@@ -16,8 +19,12 @@
   --navds-switch-color-thumb: var(
     --navds-semantic-color-component-background-light
   );
+  --navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-thumb-icon-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
   --navds-switch-color-thumb-loader-checked: var(
-    --navds-semantic-color-interaction-primary
+    --navds-semantic-color-feedback-success-border
   );
 }
 
@@ -27,6 +34,10 @@
   width: fit-content;
 }
 
+.navds-switch--right {
+  width: auto;
+}
+
 .navds-switch--small {
   position: relative;
   min-height: 32px;
@@ -61,11 +72,22 @@
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
   padding: calc(var(--navds-spacing-2) - 2px) 0
     calc(var(--navds-spacing-2) - 2px) 3.25rem;
 }
 
+.navds-switch--right.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 3.25rem
+    calc(var(--navds-spacing-2) - 2px) 0;
+}
+
 .navds-switch--with-description,
 .navds-switch--small
   > .navds-switch__label-wrapper
@@ -73,7 +95,8 @@
   padding-bottom: 0;
 }
 
-.navds-switch__input:hover ~ .navds-switch__label-wrapper {
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
   color: var(--navds-switch-color-label-hover);
 }
 
@@ -89,7 +112,7 @@
   position: absolute;
   top: var(--navds-spacing-3);
   left: 0;
-  border-radius: var(--navds-spacing-4);
+  border-radius: 4px;
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -97,10 +120,20 @@
   top: var(--navds-spacing-1);
 }
 
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+
 .navds-switch__input:checked ~ .navds-switch__track {
   background-color: var(--navds-switch-color-track-background-checked);
 }
 
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover);
+}
+
 .navds-switch__input:hover:checked ~ .navds-switch__track {
   background-color: var(--navds-switch-color-track-background-hover-checked);
 }
@@ -121,7 +154,8 @@
 /* Thumb */
 .navds-switch__thumb {
   background-color: var(--navds-switch-color-thumb);
-  border-radius: 50%;
+  color: var(--navds-switch-color-thumb-icon);
+  border-radius: 2.5px;
   width: 20px;
   height: 20px;
   position: absolute;
@@ -136,16 +170,19 @@
 
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(20px);
+  color: var(--navds-switch-color-thumb-icon-checked);
 }
 
-.navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(2px);
-}
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(2px);
+  }
 
-.navds-switch__input:checked:hover
-  ~ .navds-switch__track
-  > .navds-switch__thumb {
-  transform: translateX(18px);
+  .navds-switch__input:checked:hover
+    ~ .navds-switch__track
+    > .navds-switch__thumb {
+    transform: translateX(18px);
+  }
 }
 
 .navds-switch__input:disabled:hover

package/index.css

@@ -18,6 +18,7 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "speech-bubble.css";
+@import "step-indicator.css";
 @import "table.css";
 
 /* Navno spesific packages */

package/loader.css

@@ -12,8 +12,6 @@
   );
   --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
   --navds-loader-color-transparent-background: transparent;
-  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
-  --navds-loader-color-on-button-foreground: currentColor;
 }
 
 .navds-loader {
@@ -78,27 +76,6 @@
   width: 1rem;
 }
 
-/*
- * Button spesific styling
- */
-
-.navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--navds-loader-color-on-button-foreground);
-}
-
-.navds-button:hover .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
-.navds-button:active .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
 @keyframes loader-rotate {
   100% {
     transform: rotate(360deg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.12.6",
+  "version": "0.12.10",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,11 +21,11 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.7.0",
+    "@navikt/ds-tokens": "^0.7.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2"
   },
-  "gitHead": "ce1c6de93566f930f4f9fc917ce6be9a997a9aa6"
+  "gitHead": "ebb04c4a564d7524e5815a87be7690a64f7a7c8f"
 }

package/step-indicator.css

@@ -0,0 +1,202 @@
+:root {
+  --navds-step-indicator-color-step-line: var(--navds-semantic-color-divider);
+  --navds-step-indicator-color-step-text: var(--navds-semantic-color-text);
+  --navds-step-indicator-color-step-label: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-step-indicator-color-step-number-background: var(
+    --navds-semantic-color-canvas-background-light
+  );
+  --navds-step-indicator-color-step-number-background-finished: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-step-indicator-color-step-number-shadow: var(
+    --navds-semantic-color-border
+  );
+  --navds-step-indicator-color-step-number-shadow-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-step-indicator-color-step-number-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-step-indicator-color-step-number-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-step-indicator-color-step-number-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-step-indicator-color-step-number-shadow-inset: var(
+    --navds-semantic-color-component-background-light
+  );
+}
+
+/* StepIndicator */
+.navds-step-indicator {
+  display: flex;
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+}
+
+/* Step */
+.navds-step-indicator__step-wrapper {
+  padding: 0 var(--navds-spacing-2);
+  flex: 1;
+  position: relative;
+  list-style: none;
+  min-width: 10rem;
+}
+
+.navds-step-indicator__step-wrapper--hidelabel {
+  min-width: 5rem;
+}
+
+.navds-step-indicator__step {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 0;
+  background: none;
+  border: none;
+  appearance: none;
+  width: 100%;
+  flex-shrink: 1;
+  color: var(--navds-step-indicator-color-step-text);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.navds-step-indicator__step-number {
+  flex-shrink: 0;
+  display: flex;
+  width: 2rem;
+  height: 2rem;
+  margin: 0.5rem;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
+  background-color: var(--navds-step-indicator-color-step-number-background);
+}
+
+.navds-step-indicator__step-wrapper:first-child
+  > .navds-step-indicator__step
+  > .navds-step-indicator__step-number {
+  padding-right: 0;
+}
+
+.navds-step-indicator__step-wrapper:last-child
+  > .navds-step-indicator__step
+  > .navds-step-indicator__step-number {
+  padding-left: 0;
+}
+
+.navds-step-indicator__step-label {
+  width: 100%;
+  margin-top: var(--navds-spacing-4);
+  text-align: center;
+  color: var(--navds-step-indicator-color-step-label);
+  text-decoration: underline;
+}
+
+.navds-step-indicator__step-line {
+  flex: 1 1 100%;
+  position: absolute;
+  top: 1.5rem;
+  right: calc(50% + 2rem);
+  left: calc(-50% + 2rem);
+  display: block;
+  border-top: 2px solid var(--navds-step-indicator-color-step-line);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-label {
+  color: var(--navds-step-indicator-color-step-text);
+  font-weight: bold;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-number {
+  background-color: var(
+    --navds-step-indicator-color-step-number-background-active
+  );
+  color: var(--navds-step-indicator-color-step-number-text-active);
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0.25rem;
+}
+
+.navds-step-indicator__step:focus {
+  outline: none;
+}
+
+.navds-step-indicator__step:hover > .navds-step-indicator__step-label {
+  text-decoration: none;
+}
+
+.navds-step-indicator__step.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-label {
+  text-decoration: underline;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-label,
+.navds-step-indicator__step--active.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-label {
+  text-decoration: none;
+}
+
+.navds-step-indicator__step:hover > .navds-step-indicator__step-number {
+  background: var(--navds-step-indicator-color-step-number-background);
+  box-shadow: 0 0 0 2px
+    var(--navds-step-indicator-color-step-number-shadow-hover);
+}
+
+.navds-step-indicator__step--active:hover > .navds-step-indicator__step-number {
+  background-color: var(
+    --navds-step-indicator-color-step-number-background-active
+  );
+  color: var(--navds-step-indicator-color-step-number-text-active);
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+}
+
+.navds-step-indicator__step:focus > .navds-step-indicator__step-number {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-step-indicator__step--active:focus > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px inset
+      var(--navds-step-indicator-color-step-number-shadow-inset),
+    var(--navds-shadow-focus);
+}
+
+.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
+}
+
+.navds-step-indicator__step--disabled.navds-step-indicator__step--active:disabled
+  > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+}
+
+/* Finished state */
+.navds-step-indicator__step--finished > .navds-step-indicator__step-number,
+.navds-step-indicator__step--finished.navds-step-indicator__step--disabled
+  > .navds-step-indicator__step-number {
+  background: var(--navds-step-indicator-color-step-number-background-finished);
+}
+
+/* Disabled */
+.navds-step-indicator__step--disabled > .navds-step-indicator__step-number,
+.navds-step-indicator__step--disabled > .navds-step-indicator__step-label {
+  opacity: 0.3;
+}
+
+.navds-step-indicator__step--disabled {
+  cursor: not-allowed;
+}