@telekom/scale-components/dist/collection/components/checkbox/checkbox.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

/* TODO: remove `scale-checkbox duplicate selectors/prefixes when enabling shadow DOM`  */

:host,
scale-checkbox {
  --spacing-x: var(--telekom-spacing-composition-space-04);
  --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --color-text: var(--telekom-color-text-and-icon-standard);
  --color-error: var(--telekom-color-functional-danger-standard);
  --color-disabled: var(--telekom-color-text-and-icon-disabled);
  /* FIXME unused variable */
  --color-standard: var(--telekom-color-background-surface);
  --background-disabled: none;
  --color-primary: var(--telekom-color-primary-standard);
  --color-focus: var(--telekom-color-functional-focus-standard);
  --color-primary-hover: var(--telekom-color-text-and-icon-standard);
  --color-primary-active: var(--telekom-color-text-and-icon-standard);

  /*control*/
  --width-control: var(--telekom-spacing-composition-space-07);
  --height-control: var(--telekom-spacing-composition-space-07);
  --transition-control: var(--transition);
  --spacing-control: var(--telekom-spacing-composition-space-02);
  --spacing-left-control: var(--telekom-spacing-composition-space-03);
  --radius-control: var(--telekom-radius-small);
  --border-width-control: var(--telekom-line-weight-standard);

  /*helper-text*/
  --transition-helper-text: var(--transition);
  --spacing-left-helper-text: calc(var(--width-control) + var(--spacing-x));
  --font-size-helper-text: var(--telekom-typography-font-size-small);
  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);
  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);
  --color-helper-text: var(
    --telekom-color-text-and-icon-functional-informational
  );
  /*label*/
  --font-weight-label: var(--telekom-typography-font-weight-medium);
  --transition-label: var(--transition);

  /*icon*/
  --color-icon-checked-disabled: var(--telekom-color-text-and-icon-disabled);
  --color-icon-checked-active: var(
    --telekom-color-text-and-icon-white-standard
  );
  --width-icon: var(--telekom-spacing-composition-space-06);
  --height-icon: var(--telekom-spacing-composition-space-06);
  --stroke-width: var(--stroke-width-checkbox, 0.5px);
}

scale-checkbox {
  position: relative;
  display: flex;
  width: fit-content;
  flex-direction: column;
  color: var(--color-text);
}

scale-checkbox [part='icon'],
scale-checkbox [part='checkbox'],
scale-checkbox [part='label'],
scale-checkbox [part='helper-text'] {
  transition: var(--transition);
}

scale-checkbox [part='input'],
/* :host(.hideLabel) [part='label'], */
scale-checkbox.hideLabel [part='label'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

scale-checkbox [part='checkbox'] {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: var(--width-control);
  height: var(--height-control);
  border-radius: var(--radius-control);
  border: var(--border-width-control) solid
    var(--telekom-color-ui-border-standard);
}

scale-checkbox [part='label'] {
  font-weight: var(--font-weight-label);
  margin-left: var(--spacing-x);
}
scale-checkbox [part='icon'] {
  width: var(--width-icon);
  height: var(--height-icon);
  color: var(--color-icon-checked-active);
}

scale-checkbox [part='icon'] svg {
  width: 100%;
  height: 100%;
}
scale-checkbox [part='icon'] svg rect,
scale-checkbox [part='icon'] svg path {
  stroke: currentColor;
  stroke-width: var(--stroke-width);
}

scale-checkbox [part='container'] {
  align-items: center;
  display: flex;
  line-height: var(--telekom-typography-line-spacing-standard);
}

scale-checkbox [part='helper-text'] {
  font-size: var(--font-size-helper-text);
  font-weight: var(--font-weight-helper-text);
  line-height: var(--line-height-helper-text);
  color: var(--color-helper-text);
  padding-left: calc(
    var(--width-control) + var(--spacing-control) + var(--spacing-x) +
      calc(var(--border-width-control) * 2)
  );
  display: flex;
  align-items: center;
}

/* :host([checked]) [part='checkbox'], */
/* :host([indeterminate]) [part='checkbox'], */
scale-checkbox.indeterminate [part='checkbox'] {
  background: var(--telekom-color-primary-standard);
  border: none;
  color: var(--color-icon-checked-active);
}
scale-checkbox.indeterminate [part='icon'] {
  color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
scale-checkbox.checked [part='checkbox']
/* :host([indeterminate]) [part='checkbox'], */ {
  background: var(--telekom-color-primary-standard);
  border-color: var(--telekom-color-primary-standard);
  color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
scale-checkbox [part='container']:hover
/* :host([indeterminate]) [part='checkbox'], */
[part='checkbox'] {
  background: var(--telekom-color-ui-state-fill-hovered);
  border-color: var(--telekom-color-ui-border-hovered);
  color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
scale-checkbox.checked [part='container']:hover
/* :host([indeterminate]) [part='checkbox'], */
[part='checkbox'] {
  background: var(--telekom-color-primary-hovered);
  border-color: var(--telekom-color-ui-border-hovered);
  color: var(--color-icon-checked-active);
}

/* :host([checked]) [part='checkbox'], */
scale-checkbox [part='container']:active
/* :host([indeterminate]) [part='checkbox'], */
[part='checkbox'] {
  background: var(--telekom-color-ui-state-fill-pressed);
  border-color: var(--telekom-color-ui-border-pressed);
  color: var(--color-icon-checked-active);
}

/* focus states */

scale-checkbox [part='input']:focus ~ [part='container'] [part='checkbox'] {
  outline: var(--telekom-spacing-composition-space-02) solid var(--color-focus);
  outline-offset: var(--telekom-spacing-composition-space-01);
}

/* hover states */

scale-checkbox [part='container']:hover {
  color: var(--color-primary-hover);
  cursor: pointer;
}

/* :host([checked]) [part='container']:hover [part='checkbox'], */
scale-checkbox.checked [part='container']:hover [part='checkbox'],
/* :host([indeterminate]) [part='container']:hover [part='checkbox'], */
scale-checkbox.indeterminate [part='container']:hover [part='checkbox'] {
  background: var(--telekom-color-primary-hovered);
  border-color: var(--telekom-color-primary-hovered);
}

/* active states */

scale-checkbox.checked [part='input']:active ~ [part='container'],
scale-checkbox.checked [part='container']:active {
  color: var(--color-primary-active);
}

scale-checkbox [part='input']:active ~ [part='container'] [part='checkbox'],
/* :host([checked]) [part='container']:active [part='checkbox'], */
scale-checkbox.checked [part='container']:active [part='checkbox'],
/* :host([indeterminate]) [part='container']:active [part='checkbox'], */
scale-checkbox.indeterminate [part='container']:active [part='checkbox'] {
  background: var(--telekom-color-primary-pressed);
  border-color: var(--telekom-color-primary-pressed);
}

scale-checkbox:not(.checked) [part='container']:active [part='checkbox'] {
  background: var(--telekom-color-ui-state-fill-pressed);
  border-color: var(--telekom-color-ui-border-pressed);
}

scale-icon-alert-information,
scale-icon-alert-error {
  color: var(--color-helper-text);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: var(--telekom-spacing-composition-space-03);
}

/* error states */

/* :host(.error) [part='helper-text'], */
scale-checkbox.error [part='helper-text'] {
  color: var(--telekom-color-text-and-icon-functional-danger);
}

scale-checkbox.error [part='helper-text'] scale-icon-alert-error {
  color: var(--telekom-color-text-and-icon-functional-danger);
}

/* :host(.error) [part='checkbox'], */
scale-checkbox.error [part='checkbox'] {
  box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--color-error);
  border: none;
}

scale-checkbox.error
  [part='input']:focus
  ~ [part='container']
  [part='checkbox'] {
  box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--color-error);
}

scale-checkbox.error [part='checkbox']:hover {
  background-color: var(--telekom-color-ui-state-fill-hovered);
  box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-danger-hovered);
}

scale-checkbox.error [part='checkbox']:active {
  background-color: var(--telekom-color-ui-state-fill-pressed);
  box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-danger-pressed);
}

scale-checkbox.error:not(.checked) [part='container']:active [part='checkbox'] {
  background: var(--telekom-color-ui-state-fill-pressed);
  box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-danger-pressed);
}

scale-checkbox.checked.error [part='container']:hover [part='checkbox'] {
  background-color: var(--telekom-color-primary-hovered);
  box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-danger-hovered);
}

scale-checkbox.error [part='helper-text'] {
  padding-left: calc(
    var(--width-control) + var(--spacing-control) + var(--spacing-x)
  );
}

/* disabled states */

/* :host([disabled]), */
scale-checkbox.disabled {
  cursor: not-allowed;
}

/* :host([disabled]) [part='container'], */
scale-checkbox.disabled [part='container'],
/* :host([disabled]) [part='helper-text'], */
scale-checkbox.disabled [part='helper-text'] {
  color: var(--color-disabled);
  pointer-events: none;
}

/* :host([checked][disabled]) [part='checkbox'], */
scale-checkbox.disabled [part='checkbox'] {
  background: var(--telekom-color-ui-solid-fill-disabled);
  border-color: var(--telekom-color-ui-border-disabled);
}

scale-checkbox.checked.disabled [part='checkbox'] {
  background-color: var(--telekom-color-ui-disabled);
  border-color: transparent;
}

/* :host([checked][disabled]) [part='icon'], */
scale-checkbox.checked.disabled [part='icon'] {
  color: var(--color-icon-checked-disabled);
  background-color: var(--telekom-color-ui-disabled);
}

scale-checkbox.disabled [part='helper-text'] scale-icon-alert-information,
scale-checkbox.disabled.error [part='helper-text'] scale-icon-alert-error {
  color: var(--color-disabled);
}