@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/components/CheckBox/CheckBox.css

@@ -1,234 +1,234 @@
-/* Normal State */
-
-/* Label */
-.label {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 0.875rem;
-  line-height: 15.6px;
-  letter-spacing: -0.13px;
-  color: var(--checkbox-default-text);
-  cursor: pointer;
-}
-
-/* Checkbox Container */
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Checkbox (Normal) */
-.input-checkbox {
-  appearance: none;
-  background-color: var(--checkbox-default-bg);
-  margin: 0;
-  padding: 0;
-  /* Width and height will be set by density classes */
-  border: 1px solid;
-  border-radius: 4px;
-  display: grid;
-  place-content: center;
-  transform: translateY(-0.075em);
-  border-color: var(--checkbox-default-border);
-  cursor: pointer;
-}
-
-.input-checkbox:hover {
-  border-width: 2px;
-  background-color: var(--checkbox-hovered-bg);
-  border-color: var(--checkbox-hovered-border);
-}
-
-.input-checkbox::before {
-  content: '';
-  /* Width and height will be set by density classes */
-  transform: scale(0);
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--checkbox-default-checkmark);
-  background-color: var(--checkbox-default-checkmark);
-  border-radius: 2px;
-}
-
-.input-checkbox:checked::before {
-  transform: scale(1);
-  background-color: var(--checkbox-default-checkmark);
-}
-
-.input-checkbox:checked {
-  border-width: 2px;
-  border-color: var(--checkbox-checked-border);
-  background-color: var(--checkbox-checked-bg);
-}
-
-.input-checkbox:hover::before {
-  box-shadow: inset 1em 1em var(--checkbox-hovered-checkmark);
-  background-color: var(--checkbox-hovered-checkmark);
-}
-
-/* Density Levels */
-
-/* Comfortable */
-.density-comfortable.input-checkbox {
-  width: 32px;
-  height: 32px;
-}
-
-.density-comfortable.input-checkbox::before {
-  width: 20px;
-  height: 20px;
-}
-
-/* Default */
-.density-default.input-checkbox {
-  width: 28px;
-  height: 28px;
-}
-
-.density-default.input-checkbox::before {
-  width: 16px;
-  height: 16px;
-}
-
-/* Compact */
-.density-compact.input-checkbox {
-  width: 24px;
-  height: 24px;
-}
-
-.density-compact.input-checkbox::before {
-  width: 12px;
-  height: 12px;
-}
-
-/* Success State */
-
-/* Success Label */
-.label-success {
-  color: var(--checkbox-success-text);
-}
-
-/* Success Checkbox */
-.input-success {
-  border-color: var(--checkbox-success-border);
-  background-color: var(--checkbox-success-bg);
-}
-
-.input-success:hover {
-  border-color: var(--checkbox-success-border);
-  background-color: var(--checkbox-success-bg);
-}
-
-.input-success.input-checkbox:checked {
-  border-color: var(--checkbox-success-border);
-  background-color: var(--checkbox-success-bg);
-}
-
-.input-success.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--checkbox-success-checkmark);
-  background-color: var(--checkbox-success-checkmark);
-}
-
-.input-success.input-checkbox:hover::before {
-  box-shadow: inset 1em 1em var(--checkbox-success-checkmark);
-  background-color: var(--checkbox-success-checkmark);
-}
-
-/* Error State */
-
-/* Error Label */
-.label-error {
-  color: var(--checkbox-error-text);
-}
-
-/* Error Checkbox */
-.input-error {
-  border-color: var(--checkbox-error-border);
-  background-color: var(--checkbox-error-bg);
-}
-
-.input-error:hover {
-  border-color: var(--checkbox-error-border);
-  background-color: var(--checkbox-error-bg);
-}
-
-.input-error.input-checkbox:checked {
-  border-color: var(--checkbox-error-border);
-  background-color: var(--checkbox-error-bg);
-}
-
-.input-error.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--checkbox-error-checkmark);
-  background-color: var(--checkbox-error-checkmark);
-}
-
-.input-error.input-checkbox:hover::before {
-  box-shadow: inset 1em 1em var(--checkbox-error-checkmark);
-  background-color: var(--checkbox-error-checkmark);
-}
-
-/* Disabled State */
-
-/* Disabled Label */
-.label-disabled {
-  color: var(--checkbox-disabled-text);
-  cursor: not-allowed;
-}
-
-/* Disabled Checkbox */
-.input-disabled {
-  border-color: var(--checkbox-disabled-border);
-  background-color: var(--checkbox-disabled-bg);
-  cursor: not-allowed;
-}
-
-.input-checkbox:disabled::before {
-  box-shadow: inset 1em 1em var(--checkbox-disabled-checkmark);
-  background-color: var(--checkbox-disabled-checkmark);
-}
-
-.input-disabled.input-checkbox:hover {
-  border-width: 1px;
-  background-color: var(--checkbox-disabled-bg);
-  border-color: var(--checkbox-disabled-border);
-}
-
-.input-disabled.input-checkbox:hover::before {
-  box-shadow: inset 1em 1em var(--checkbox-disabled-checkmark);
-  background-color: var(--checkbox-disabled-checkmark);
-}
-
-/* Label Text */
-.label-text {
-  font-weight: 300;
-}
-
-/* =====================================================
-   ACCESSIBILITY: Focus Indicators
-   WCAG 2.4.7: Focus Visible (Level AA)
-   ===================================================== */
-
-.input-checkbox:focus-visible {
-  outline: 2px solid var(--checkbox-checked-border);
-  outline-offset: 2px;
-}
-
-.input-success:focus-visible {
-  outline-color: var(--checkbox-success-border);
-}
-
-.input-error:focus-visible {
-  outline-color: var(--checkbox-error-border);
-}
-
-/* High contrast mode support */
-@media (forced-colors: active) {
-  .input-checkbox {
-    border: 2px solid currentColor;
-  }
-
-  .input-checkbox:checked::before {
-    background-color: currentColor;
-  }
-}
+/* Normal State */
+
+/* Label */
+.label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.875rem;
+  line-height: 15.6px;
+  letter-spacing: -0.13px;
+  color: var(--checkbox-default-text);
+  cursor: pointer;
+}
+
+/* Checkbox Container */
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Checkbox (Normal) */
+.input-checkbox {
+  appearance: none;
+  background-color: var(--checkbox-default-bg);
+  margin: 0;
+  padding: 0;
+  /* Width and height will be set by density classes */
+  border: 1px solid;
+  border-radius: 4px;
+  display: grid;
+  place-content: center;
+  transform: translateY(-0.075em);
+  border-color: var(--checkbox-default-border);
+  cursor: pointer;
+}
+
+.input-checkbox:hover {
+  border-width: 2px;
+  background-color: var(--checkbox-hovered-bg);
+  border-color: var(--checkbox-hovered-border);
+}
+
+.input-checkbox::before {
+  content: '';
+  /* Width and height will be set by density classes */
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--checkbox-default-checkmark);
+  background-color: var(--checkbox-default-checkmark);
+  border-radius: 2px;
+}
+
+.input-checkbox:checked::before {
+  transform: scale(1);
+  background-color: var(--checkbox-default-checkmark);
+}
+
+.input-checkbox:checked {
+  border-width: 2px;
+  border-color: var(--checkbox-checked-border);
+  background-color: var(--checkbox-checked-bg);
+}
+
+.input-checkbox:hover::before {
+  box-shadow: inset 1em 1em var(--checkbox-hovered-checkmark);
+  background-color: var(--checkbox-hovered-checkmark);
+}
+
+/* Density Levels */
+
+/* Comfortable */
+.density-comfortable.input-checkbox {
+  width: 32px;
+  height: 32px;
+}
+
+.density-comfortable.input-checkbox::before {
+  width: 20px;
+  height: 20px;
+}
+
+/* Default */
+.density-default.input-checkbox {
+  width: 28px;
+  height: 28px;
+}
+
+.density-default.input-checkbox::before {
+  width: 16px;
+  height: 16px;
+}
+
+/* Compact */
+.density-compact.input-checkbox {
+  width: 24px;
+  height: 24px;
+}
+
+.density-compact.input-checkbox::before {
+  width: 12px;
+  height: 12px;
+}
+
+/* Success State */
+
+/* Success Label */
+.label-success {
+  color: var(--checkbox-success-text);
+}
+
+/* Success Checkbox */
+.input-success {
+  border-color: var(--checkbox-success-border);
+  background-color: var(--checkbox-success-bg);
+}
+
+.input-success:hover {
+  border-color: var(--checkbox-success-border);
+  background-color: var(--checkbox-success-bg);
+}
+
+.input-success.input-checkbox:checked {
+  border-color: var(--checkbox-success-border);
+  background-color: var(--checkbox-success-bg);
+}
+
+.input-success.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--checkbox-success-checkmark);
+  background-color: var(--checkbox-success-checkmark);
+}
+
+.input-success.input-checkbox:hover::before {
+  box-shadow: inset 1em 1em var(--checkbox-success-checkmark);
+  background-color: var(--checkbox-success-checkmark);
+}
+
+/* Error State */
+
+/* Error Label */
+.label-error {
+  color: var(--checkbox-error-text);
+}
+
+/* Error Checkbox */
+.input-error {
+  border-color: var(--checkbox-error-border);
+  background-color: var(--checkbox-error-bg);
+}
+
+.input-error:hover {
+  border-color: var(--checkbox-error-border);
+  background-color: var(--checkbox-error-bg);
+}
+
+.input-error.input-checkbox:checked {
+  border-color: var(--checkbox-error-border);
+  background-color: var(--checkbox-error-bg);
+}
+
+.input-error.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--checkbox-error-checkmark);
+  background-color: var(--checkbox-error-checkmark);
+}
+
+.input-error.input-checkbox:hover::before {
+  box-shadow: inset 1em 1em var(--checkbox-error-checkmark);
+  background-color: var(--checkbox-error-checkmark);
+}
+
+/* Disabled State */
+
+/* Disabled Label */
+.label-disabled {
+  color: var(--checkbox-disabled-text);
+  cursor: not-allowed;
+}
+
+/* Disabled Checkbox */
+.input-disabled {
+  border-color: var(--checkbox-disabled-border);
+  background-color: var(--checkbox-disabled-bg);
+  cursor: not-allowed;
+}
+
+.input-checkbox:disabled::before {
+  box-shadow: inset 1em 1em var(--checkbox-disabled-checkmark);
+  background-color: var(--checkbox-disabled-checkmark);
+}
+
+.input-disabled.input-checkbox:hover {
+  border-width: 1px;
+  background-color: var(--checkbox-disabled-bg);
+  border-color: var(--checkbox-disabled-border);
+}
+
+.input-disabled.input-checkbox:hover::before {
+  box-shadow: inset 1em 1em var(--checkbox-disabled-checkmark);
+  background-color: var(--checkbox-disabled-checkmark);
+}
+
+/* Label Text */
+.label-text {
+  font-weight: 300;
+}
+
+/* =====================================================
+   ACCESSIBILITY: Focus Indicators
+   WCAG 2.4.7: Focus Visible (Level AA)
+   ===================================================== */
+
+.input-checkbox:focus-visible {
+  outline: 2px solid var(--checkbox-checked-border);
+  outline-offset: 2px;
+}
+
+.input-success:focus-visible {
+  outline-color: var(--checkbox-success-border);
+}
+
+.input-error:focus-visible {
+  outline-color: var(--checkbox-error-border);
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .input-checkbox {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox:checked::before {
+    background-color: currentColor;
+  }
+}