@telekom/scale-components

Version:

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

47 lines (40 loc) • 1.05 kB

CSS

:host,
.checkbox-group {
  /* checkbox-group container */
  --spacing-left-container: var(--telekom-spacing-composition-space-10);

  /* checkbox-group checkbox */
  --spacing-left-checkbox: var(--telekom-spacing-composition-space-04);

  /* slotted item */
  --spacing-top-slotted-item: var(--telekom-spacing-composition-space-05);
}

.checkbox-group {
  display: inline-flex;
  flex-direction: column;
  position: relative;
}
.checkbox-group [part='fieldset'] {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  margin: 0;
  margin-left: var(--spacing-left-container);
}

.checkbox-group [part='parent-checkbox'] {
  line-height: var(--telekom-typography-line-spacing-standard);
  --font-weight-label: var(--telekom-typography-font-weight-bold);
}

.checkbox-group legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.checkbox-group scale-checkbox {
  margin-top: var(--spacing-top-slotted-item);
}