@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

package/dist/collection/components/checkbox/checkbox.css

@@ -1,437 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-:host {
-  --ix-checkbox-check-color: var(--theme-color-primary--contrast);
-  /* width */
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-  display: inline-block;
-  position: relative;
-}
-:host *,
-:host *::after,
-:host *::before {
-  box-sizing: border-box;
-}
-:host ::-webkit-scrollbar-button {
-  display: none;
-}
-@-moz-document url-prefix() {
-  :host * {
-    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
-    scrollbar-width: thin;
-  }
-}
-:host ::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-:host ::-webkit-scrollbar-track {
-  border-radius: 5px;
-  background: var(--theme-scrollbar-track--background);
-}
-:host ::-webkit-scrollbar-track:hover {
-  background: var(--theme-scrollbar-track--background--hover);
-}
-:host ::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background: var(--theme-scrollbar-thumb--background);
-}
-:host ::-webkit-scrollbar-thumb:hover {
-  background: var(--theme-scrollbar-thumb--background--hover);
-}
-:host ::-webkit-scrollbar-corner {
-  display: none;
-}
-:host button {
-  all: unset;
-}
-:host button {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: 1.125rem;
-  min-width: 1.125rem;
-  max-width: 1.125rem;
-  height: 1.125rem;
-  min-height: 1.125rem;
-  max-height: 1.125rem;
-  margin-right: 0.5rem;
-}
-:host button:disabled {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-:host button:focus-visible {
-  outline: 0.0625rem solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-checkbox--focus--outline-offset);
-}
-:host input[type=checkbox] {
-  display: none;
-}
-:host label {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
-}
-:host ix-typography {
-  margin-top: 0.125rem;
-}
-
-:host button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.checked) button,
-:host([indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.checked:hover) button,
-:host([indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.checked:active) button,
-:host([indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(:disabled) button,
-:host(.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-
-:host(.checked:disabled) button,
-:host(.checked.disabled) button,
-:host([indeterminate]:disabled) button,
-:host([indeterminate].disabled) button {
-  background-color: var(--theme-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-info) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--info);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--info--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--info--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--info);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--info--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--info--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--info);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--info--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--info--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--info);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--info--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--info--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--info);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--info--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--info--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--info);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--info--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--info--active);
-}
-
-:host(.ix-info) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-info:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-info:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-info.checked) button,
-:host(.ix-info[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-info.checked:hover) button,
-:host(.ix-info[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-info.checked:active) button,
-:host(.ix-info[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-info:disabled) button,
-:host(.ix-info.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-
-:host(.ix-info.checked:disabled) button,
-:host(.ix-info.checked.disabled) button,
-:host(.ix-info[indeterminate]:disabled) button,
-:host(.ix-info[indeterminate].disabled) button {
-  background-color: var(--theme-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-warning) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--warning);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--warning--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--warning--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--warning);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--warning--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--warning--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--warning);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--warning--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--warning--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--warning);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--warning--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--warning--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--warning);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--warning--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--warning--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--warning);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--warning--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--warning--active);
-}
-
-:host(.ix-warning) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-warning:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-warning:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-warning.checked) button,
-:host(.ix-warning[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-warning.checked:hover) button,
-:host(.ix-warning[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-warning.checked:active) button,
-:host(.ix-warning[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-warning:disabled) button,
-:host(.ix-warning.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-
-:host(.ix-warning.checked:disabled) button,
-:host(.ix-warning.checked.disabled) button,
-:host(.ix-warning[indeterminate]:disabled) button,
-:host(.ix-warning[indeterminate].disabled) button {
-  background-color: var(--theme-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-invalid--required) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--invalid);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--invalid--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--invalid--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--invalid);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--invalid--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--invalid--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--invalid);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--invalid--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--invalid--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--invalid);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--invalid--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--invalid--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--invalid);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--invalid--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--invalid--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--invalid);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--invalid--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--invalid--active);
-}
-
-:host(.ix-invalid--required) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-invalid--required:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-invalid--required:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-invalid--required.checked) button,
-:host(.ix-invalid--required[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-invalid--required.checked:hover) button,
-:host(.ix-invalid--required[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-invalid--required.checked:active) button,
-:host(.ix-invalid--required[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-invalid--required:disabled) button,
-:host(.ix-invalid--required.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-
-:host(.ix-invalid--required.checked:disabled) button,
-:host(.ix-invalid--required.checked.disabled) button,
-:host(.ix-invalid--required[indeterminate]:disabled) button,
-:host(.ix-invalid--required[indeterminate].disabled) button {
-  background-color: var(--theme-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(.ix-invalid) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--invalid);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--invalid--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--invalid--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--invalid);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--invalid--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--invalid--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--invalid);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--invalid--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--invalid--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--invalid);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--invalid--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--invalid--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--invalid);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--invalid--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--invalid--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--invalid);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--invalid--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--invalid--active);
-}
-
-:host(.ix-invalid) button {
-  background-color: var(--theme-checkbox-unchecked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
-}
-
-:host(.ix-invalid:hover) button {
-  background-color: var(--theme-checkbox-unchecked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
-}
-
-:host(.ix-invalid:active) button {
-  background-color: var(--theme-checkbox-unchecked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
-}
-
-:host(.ix-invalid.checked) button,
-:host(.ix-invalid[indeterminate]) button {
-  background-color: var(--theme-checkbox-checked--background);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
-}
-
-:host(.ix-invalid.checked:hover) button,
-:host(.ix-invalid[indeterminate]:hover) button {
-  background-color: var(--theme-checkbox-checked--background--hover);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
-}
-
-:host(.ix-invalid.checked:active) button,
-:host(.ix-invalid[indeterminate]:active) button {
-  background-color: var(--theme-checkbox-checked--background--active);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
-}
-
-:host(.ix-invalid:disabled) button,
-:host(.ix-invalid.disabled) button {
-  background-color: var(--theme-checkbox-unchecked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
-}
-
-:host(.ix-invalid.checked:disabled) button,
-:host(.ix-invalid.checked.disabled) button,
-:host(.ix-invalid[indeterminate]:disabled) button,
-:host(.ix-invalid[indeterminate].disabled) button {
-  background-color: var(--theme-checkbox-checked--background--disabled);
-  border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
-}
-
-:host(:disabled),
-:host(.disabled) {
-  pointer-events: none;
-}
-:host(:disabled) button,
-:host(:disabled) label,
-:host(:disabled) input,
-:host(.disabled) button,
-:host(.disabled) label,
-:host(.disabled) input {
-  pointer-events: none;
-}