@norges-domstoler/dds-components 18.0.0 → 18.2.0

package/dist/index.css

@@ -3663,6 +3663,169 @@
   gap: var(--dds-spacing-x0-5);
 }
 
+/* src/components/Toggle/Toggle.module.css */
+.Toggle_label {
+  display: flex;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
+  gap: var(--dds-spacing-x0-75);
+}
+.Toggle_track {
+  display: flex;
+  align-items: center;
+  background-color: var(--dds-color-surface-medium);
+  border-radius: var(--dds-border-radius-rounded);
+  border: 1px solid var(--dds-color-border-default);
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 0.2s,
+      border 0.2s,
+      var(--dds-focus-transition);
+  }
+}
+.Toggle_thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--dds-border-radius-rounded);
+  background-color: var(--dds-color-surface-field-default);
+  border: 1px solid var(--dds-color-border-default);
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      transform 0.2s,
+      border 0.2s,
+      width 0.2s;
+  }
+}
+.Toggle_thumb .Toggle_checkmark {
+  opacity: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 0.2s;
+  }
+}
+.Toggle_labeltext--readonly {
+  display: flex;
+  .Toggle_icon--read-only {
+    align-self: center;
+    flex-shrink: 0;
+    margin-inline-end: var(--dds-spacing-x0-125);
+  }
+}
+.Toggle_medium {
+  .Toggle_track {
+    height: var(--dds-spacing-x1-5);
+    width: 2.8125rem;
+  }
+  .Toggle_thumb {
+    margin-inline-start: var(--dds-spacing-x0-125);
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+  input:checked ~ .Toggle_track > .Toggle_thumb {
+    transform: translateX(1.25rem);
+  }
+  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+    transform: translateX(var(--dds-spacing-x1));
+  }
+  input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+    width: 1.5rem;
+  }
+}
+.Toggle_large {
+  .Toggle_track {
+    height: 2.125rem;
+    width: 3.25rem;
+  }
+  .Toggle_thumb {
+    margin-inline-start: var(--dds-spacing-x0-25);
+    height: 1.75rem;
+    width: 1.75rem;
+  }
+  input:checked ~ .Toggle_track > .Toggle_thumb {
+    transform: translateX(var(--dds-spacing-x1));
+  }
+  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+    transform: translateX(var(--dds-spacing-x0-75));
+  }
+  input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+    width: var(--dds-spacing-x2);
+  }
+}
+.Toggle_label,
+.Toggle_label--is-loading {
+  input:checked:enabled:not([aria-readonly]) ~ .Toggle_track {
+    background-color: var(--dds-color-surface-action-selected);
+    border-color: var(--dds-color-border-action-default);
+    & > .Toggle_thumb {
+      border-color: var(--dds-color-border-action-default);
+      .Toggle_checkmark {
+        color: var(--dds-color-icon-action-resting);
+        opacity: 1;
+      }
+    }
+  }
+}
+.Toggle_label {
+  cursor: pointer;
+  &:hover input:enabled:checked:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track {
+    background-color: var(--dds-color-surface-action-hover);
+    border-color: var(--dds-color-border-action-hover);
+    .Toggle_thumb {
+      border-color: var(--dds-color-border-action-hover);
+    }
+  }
+  &:hover input:enabled:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track {
+    background-color: var(--dds-color-surface-hover-default);
+    border-color: var(--dds-color-border-action-hover);
+    .Toggle_thumb {
+      border-color: var(--dds-color-border-action-hover);
+      .Toggle_checkmark {
+        color: var(--dds-color-icon-action-hover);
+      }
+    }
+  }
+}
+.Toggle_label--disabled {
+  cursor: not-allowed;
+  color: var(--dds-color-text-subtle);
+  input:disabled ~ .Toggle_track {
+    background-color: var(--dds-color-surface-field-disabled);
+  }
+  input:checked:disabled ~ .Toggle_track {
+    background-color: var(--dds-color-surface-action-selected-disabled);
+    border-color: var(--dds-color-surface-action-selected-disabled);
+  }
+  input:checked:disabled ~ .Toggle_track > .Toggle_thumb {
+    border-color: var(--dds-color-surface-action-selected-disabled);
+    .Toggle_checkmark {
+      color: var(--dds-color-icon-subtle);
+      opacity: 1;
+    }
+  }
+}
+.Toggle_label--read-only {
+  cursor: default;
+  color: var(--dds-color-text-medium);
+  input ~ .Toggle_track {
+    background-color: var(--dds-color-surface-default);
+  }
+  input:checked ~ .Toggle_track {
+    background-color: var(--dds-color-surface-inverse-default);
+    border-color: var(--dds-color-surface-inverse-default);
+  }
+  input:checked ~ .Toggle_track > .Toggle_thumb {
+    border-color: var(--dds-color-surface-inverse-default);
+    .Toggle_checkmark {
+      color: var(--dds-color-icon-medium);
+      opacity: 1;
+    }
+  }
+}
+.Toggle_label--is-loading {
+  cursor: not-allowed;
+}
+
 /* src/components/ToggleBar/ToggleBar.module.css */
 .ToggleBar_container {
   display: flex;