@telekom/scale-components

Version:
Scale is the digital design system for Telekom products and experiences.
179 lines (146 loc) • 4.34 kB
CSS
:host {
  display: inline-flex;
  --size-outer-small: 24px;
  --size-outer-large: 48px;
  --size-inner-small: 24px;
  --size-inner-large: 48px;

  --line-height-size-small: 24px;
  --line-height-size-large: 48px;

  --font: var(--telekom-text-style-ui-bold);

  --color-circle-primary: var(--telekom-color-primary-standard);
  --color-circle-primary-inner: var(--telekom-color-ui-subtle);
  --color-text-primary: var(--telekom-color-text-and-icon-additional);
  --color-circle-white: var(--telekom-color-ui-base);
  --color-circle-white-inner: var(--telekom-color-ui-regular);
  --color-text-white: var(--telekom-color-text-and-icon-white-standard);

  --spacing-vertical: var(--telekom-spacing-composition-space-05);
  --spacing-horizontal: var(--telekom-spacing-composition-space-06);
}

.sr-only {
  position: absolute;
  left: -10000px;
  overflow: hidden;
}

.spinner {
  display: inline-flex;
  align-items: center;
}

.spinner.spinner--alignment-vertical {
  flex-direction: column;
}

.spinner .spinner__text {
  font: var(--telekom-text-style-ui-bold);
  color: var(--color-text-primary);
}

.spinner.spinner--variant-white .spinner__text {
  color: var(--color-text-white);
}

.spinner.spinner--alignment-horizontal .spinner__text {
  display: flex;
  align-self: center;
  margin-left: var(--spacing-horizontal);
}

.spinner.spinner--alignment-horizontal.spinner--size-small .spinner__text {
  line-height: var(--line-height-size-small);
}

.spinner.spinner--alignment-horizontal.spinner--size-large .spinner__text {
  line-height: var(--line-height-size-large);
}

.spinner.spinner--alignment-vertical .spinner__text {
  margin-top: var(--spacing-vertical);
}

.spinner.spinner--alignment-vertical.spinner--size-small .spinner__container {
  height: var(--size-inner-small);
  width: var(--size-inner-small);
}

.spinner.spinner--alignment-vertical.spinner--size-large .spinner__container {
  height: var(--size-outer-large);
  width: var(--size-outer-large);
}

.spinner.spinner--alignment-horizontal.spinner--size-small .spinner__container {
  height: var(--size-inner-small);
  width: var(--size-inner-small);
  text-align: left;
}

.spinner.spinner--alignment-horizontal.spinner--size-large .spinner__container {
  height: var(--size-outer-large);
  width: var(--size-outer-large);
  text-align: left;
}

.spinner .spinner__container {
  align-items: center;
  display: inline-flex;
}

.spinner .spinner__container .spinner__circle {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  width: var(--size-inner-small);
  height: var(--size-inner-small);
}

.spinner .spinner__container .spinner__circle-background {
  animation: rotate 2s linear infinite;
  position: absolute;
  width: var(--size-outer-small);
  height: var(--size-outer-small);
}

.spinner.spinner--size-large .spinner__container .spinner__circle-background {
  width: var(--size-outer-large);
  height: var(--size-outer-large);
}

.spinner.spinner--size-large .spinner__container .spinner__circle {
  width: var(--size-inner-large);
  height: var(--size-inner-large);
}

.spinner.spinner--variant-white
  .spinner__container
  .spinner__circle-background
  .path {
  stroke: var(--color-circle-white-inner);
}

.spinner .spinner__container .spinner__circle-background .path {
  stroke: var(--color-circle-primary-inner);
}

.spinner.spinner--variant-white .spinner__container .spinner__circle .path {
  stroke: white;
}

.spinner .spinner__container .spinner__circle .path {
  animation: dash 1.5s ease-in-out infinite;
  stroke: var(--color-circle-primary);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .spinner .spinner__container .spinner__circle-background .path {
    stroke: none;
  }

  .spinner .spinner__container .spinner__circle .path {
    stroke: white;
  }

  .spinner.spinner--variant-white
    .spinner__container
    .spinner__circle-background
    .path {
    stroke: none;
  }

  .spinner.spinner--variant-white .spinner__container .spinner__circle .path {
    stroke: white;
  }
}