@siemens/ix 2.4.1 → 2.6.0

package/dist/collection/components/radio/radio.css

@@ -0,0 +1,430 @@
+/*
+ * 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 {
+  /* 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;
+  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;
+  border: 1px solid white;
+  border-radius: 100px;
+  margin-right: 0.5rem;
+}
+:host button:focus-visible {
+  outline: 0.0625rem solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-radiobtn--focus--outline-offset);
+}
+:host input[type=radio] {
+  display: none;
+}
+:host label {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+}
+:host .checkmark {
+  border-radius: 100px;
+  background-color: var(--theme-color-primary--contrast);
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+:host button {
+  background-color: var(--theme-radiobtn-unchecked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
+}
+
+:host(:hover) button {
+  background-color: var(--theme-radiobtn-unchecked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
+}
+
+:host(:active) button {
+  background-color: var(--theme-radiobtn-unchecked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
+}
+
+:host(.checked) button,
+:host([indeterminate]) button {
+  background-color: var(--theme-radiobtn-checked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
+}
+
+:host(.checked:hover) button,
+:host([indeterminate]:hover) button {
+  background-color: var(--theme-radiobtn-checked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
+}
+
+:host(.checked:active) button,
+:host([indeterminate]:active) button {
+  background-color: var(--theme-radiobtn-checked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
+}
+
+:host(:disabled),
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(:disabled) button,
+:host(.disabled) button {
+  background-color: var(--theme-radiobtn-unchecked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
+}
+
+:host(.checked:disabled) button,
+:host(.checked.disabled) button,
+:host([indeterminate]:disabled) button,
+:host([indeterminate].disabled) button {
+  background-color: var(--theme-radiobtn-checked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
+}
+
+ix-typography {
+  margin-top: 0.125rem;
+}
+
+:host(.ix-info:not(.disabled)) button {
+  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--info);
+  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--info--hover);
+  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--info--active);
+  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--info);
+  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--info--hover);
+  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--info--active);
+  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--info);
+  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--info--hover);
+  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--info--active);
+  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--info);
+  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--info--hover);
+  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--info--active);
+  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--info);
+  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--info--hover);
+  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--info--active);
+  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--info);
+  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--info--hover);
+  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--info--active);
+}
+
+:host(.ix-info) button {
+  background-color: var(--theme-radiobtn-unchecked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
+}
+
+:host(.ix-info:hover) button {
+  background-color: var(--theme-radiobtn-unchecked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
+}
+
+:host(.ix-info:active) button {
+  background-color: var(--theme-radiobtn-unchecked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
+}
+
+:host(.ix-info.checked) button,
+:host(.ix-info[indeterminate]) button {
+  background-color: var(--theme-radiobtn-checked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
+}
+
+:host(.ix-info.checked:hover) button,
+:host(.ix-info[indeterminate]:hover) button {
+  background-color: var(--theme-radiobtn-checked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
+}
+
+:host(.ix-info.checked:active) button,
+:host(.ix-info[indeterminate]:active) button {
+  background-color: var(--theme-radiobtn-checked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
+}
+
+:host(.ix-info:disabled) button,
+:host(.ix-info.disabled) button {
+  background-color: var(--theme-radiobtn-unchecked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-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-radiobtn-checked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
+}
+
+:host(.ix-warning:not(.disabled)) button {
+  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--warning);
+  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--warning--hover);
+  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--warning--active);
+  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--warning);
+  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--warning--hover);
+  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--warning--active);
+  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--warning);
+  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--warning--hover);
+  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--warning--active);
+  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--warning);
+  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--warning--hover);
+  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--warning--active);
+  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--warning);
+  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--warning--hover);
+  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--warning--active);
+  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--warning);
+  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--warning--hover);
+  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--warning--active);
+}
+
+:host(.ix-warning) button {
+  background-color: var(--theme-radiobtn-unchecked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
+}
+
+:host(.ix-warning:hover) button {
+  background-color: var(--theme-radiobtn-unchecked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
+}
+
+:host(.ix-warning:active) button {
+  background-color: var(--theme-radiobtn-unchecked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
+}
+
+:host(.ix-warning.checked) button,
+:host(.ix-warning[indeterminate]) button {
+  background-color: var(--theme-radiobtn-checked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
+}
+
+:host(.ix-warning.checked:hover) button,
+:host(.ix-warning[indeterminate]:hover) button {
+  background-color: var(--theme-radiobtn-checked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
+}
+
+:host(.ix-warning.checked:active) button,
+:host(.ix-warning[indeterminate]:active) button {
+  background-color: var(--theme-radiobtn-checked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
+}
+
+:host(.ix-warning:disabled) button,
+:host(.ix-warning.disabled) button {
+  background-color: var(--theme-radiobtn-unchecked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-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-radiobtn-checked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
+}
+
+:host(.ix-invalid--required:not(.disabled)) button {
+  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--invalid);
+  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--invalid--hover);
+  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--invalid--active);
+  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--invalid);
+  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--invalid--hover);
+  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--invalid--active);
+  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--invalid);
+  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--invalid--hover);
+  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--invalid--active);
+  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--invalid);
+  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--invalid--hover);
+  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--invalid--active);
+  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--invalid);
+  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--invalid--hover);
+  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--invalid--active);
+  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--invalid);
+  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--invalid--hover);
+  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--invalid--active);
+}
+
+:host(.ix-invalid--required) button {
+  background-color: var(--theme-radiobtn-unchecked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
+}
+
+:host(.ix-invalid--required:hover) button {
+  background-color: var(--theme-radiobtn-unchecked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
+}
+
+:host(.ix-invalid--required:active) button {
+  background-color: var(--theme-radiobtn-unchecked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
+}
+
+:host(.ix-invalid--required.checked) button,
+:host(.ix-invalid--required[indeterminate]) button {
+  background-color: var(--theme-radiobtn-checked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
+}
+
+:host(.ix-invalid--required.checked:hover) button,
+:host(.ix-invalid--required[indeterminate]:hover) button {
+  background-color: var(--theme-radiobtn-checked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
+}
+
+:host(.ix-invalid--required.checked:active) button,
+:host(.ix-invalid--required[indeterminate]:active) button {
+  background-color: var(--theme-radiobtn-checked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
+}
+
+:host(.ix-invalid--required:disabled) button,
+:host(.ix-invalid--required.disabled) button {
+  background-color: var(--theme-radiobtn-unchecked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-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-radiobtn-checked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
+}
+
+:host(.ix-invalid:not(.disabled)) button {
+  --theme-radiobtn-unchecked--background: var(--theme-radiobtn-unchecked--background--invalid);
+  --theme-radiobtn-unchecked--background--hover: var(--theme-radiobtn-unchecked--background--invalid--hover);
+  --theme-radiobtn-unchecked--background--active: var(--theme-radiobtn-unchecked--background--invalid--active);
+  --theme-radiobtn-unchecked--border-color: var(--theme-radiobtn-unchecked--border-color--invalid);
+  --theme-radiobtn-unchecked--border-color--hover: var(--theme-radiobtn-unchecked--border-color--invalid--hover);
+  --theme-radiobtn-unchecked--border-color--active: var(--theme-radiobtn-unchecked--border-color--invalid--active);
+  --theme-radiobtn-checked--background: var(--theme-radiobtn-checked--background--invalid);
+  --theme-radiobtn-checked--background--hover: var(--theme-radiobtn-checked--background--invalid--hover);
+  --theme-radiobtn-checked--background--active: var(--theme-radiobtn-checked--background--invalid--active);
+  --theme-radiobtn-checked--border-color: var(--theme-radiobtn-checked--border-color--invalid);
+  --theme-radiobtn-checked--border-color--hover: var(--theme-radiobtn-checked--border-color--invalid--hover);
+  --theme-radiobtn-checked--border-color--active: var(--theme-radiobtn-checked--border-color--invalid--active);
+  --theme-radiobtn-mixed--background: var(--theme-radiobtn-mixed--background--invalid);
+  --theme-radiobtn-mixed--background--hover: var(--theme-radiobtn-mixed--background--invalid--hover);
+  --theme-radiobtn-mixed--background--active: var(--theme-radiobtn-mixed--background--invalid--active);
+  --theme-radiobtn-mixed--border-color: var(--theme-radiobtn-mixed--border-color--invalid);
+  --theme-radiobtn-mixed--border-color--hover: var(--theme-radiobtn-mixed--border-color--invalid--hover);
+  --theme-radiobtn-mixed--border-color--active: var(--theme-radiobtn-mixed--border-color--invalid--active);
+}
+
+:host(.ix-invalid) button {
+  background-color: var(--theme-radiobtn-unchecked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
+}
+
+:host(.ix-invalid:hover) button {
+  background-color: var(--theme-radiobtn-unchecked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
+}
+
+:host(.ix-invalid:active) button {
+  background-color: var(--theme-radiobtn-unchecked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
+}
+
+:host(.ix-invalid.checked) button,
+:host(.ix-invalid[indeterminate]) button {
+  background-color: var(--theme-radiobtn-checked--background);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
+}
+
+:host(.ix-invalid.checked:hover) button,
+:host(.ix-invalid[indeterminate]:hover) button {
+  background-color: var(--theme-radiobtn-checked--background--hover);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
+}
+
+:host(.ix-invalid.checked:active) button,
+:host(.ix-invalid[indeterminate]:active) button {
+  background-color: var(--theme-radiobtn-checked--background--active);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
+}
+
+:host(.ix-invalid:disabled) button,
+:host(.ix-invalid.disabled) button {
+  background-color: var(--theme-radiobtn-unchecked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-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-radiobtn-checked--background--disabled);
+  border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
+}