@telekom/scale-components/dist/collection/components/rating-stars/rating-stars.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/.
 */

:host {
  --stars-color: var(--telekom-color-text-and-icon-primary-standard);
  --stars-hover-color: var(--telekom-color-text-and-icon-primary-hovered);
  --stars-active-color: var(--telekom-color-text-and-icon-primary-pressed);
  --stars-inactive-color: transparent;
  --stars-placeholder-color: var(--telekom-color-ui-border-standard);
  --stars-placeholder-hover-color: var(--telekom-color-ui-border-hovered);
  --stars-disabled-color: var(--telekom-color-text-and-icon-disabled);
  --stars-spacing: var(--telekom-spacing-composition-space-02);
  --stars-transition: color var(--telekom-motion-duration-immediate);
  --stars-size: 24px;
  --label-font: var(--telekom-text-style-ui);
  --infotext-font: var(--telekom-text-style-body);
  --infotext-font-small: var(--telekom-text-style-body);
  --infotext-color: var(--telekom-color-text-and-icon-additional);
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
}

[star-size='small'],
[size='small'] {
  --stars-size: 16px;
}

[part='container'] {
  display: inline-flex;
  flex-direction: column;
  position: relative;
}

[part='range-slider'] {
  position: absolute;
  border: 0;
  margin: 0;
  left: calc(-1 * var(--stars-size));
  bottom: 0;
  z-index: 2;
  width: calc(100% + var(--stars-size) * 2);
  opacity: 0;
  height: var(--stars-size);
}

@media (hover: hover) {
  /* hide the range slider from pointing device */
  [part='range-slider'] {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
  }
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0;
  height: var(--stars-size);
  width: var(--stars-size);
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0;
}

[part='content'] {
  display: flex;
  align-items: center;
}

[part='wrapper'] {
  display: inline-flex;
  border-radius: var(--telekom-spacing-composition-space-03);
  margin-left: calc(-1 * var(--stars-spacing));
}

[part='wrapper']:hover [part='star'] [part='selected-star'] {
  opacity: 1;
}

[part='star'] > * {
  /* prevent event bubbling for icons  */
  pointer-events: none;
}

[part='label'] {
  font: var(--label-font);
  margin-bottom: var(--telekom-spacing-composition-space-04);
  white-space: nowrap;
}

[part='infotext'] {
  margin-left: var(--telekom-spacing-composition-space-04);
  display: flex;
  align-items: center;
  font: var(--infotext-font);
  color: var(--infotext-color);
  white-space: nowrap;
}

:host([size='small']) [part='infotext'] {
  font: var(--infotext-font-small);
}

[part='star'] {
  --decimal-width: 100%;

  display: inline-flex;
  position: relative;
  color: var(--stars-color);
  cursor: pointer;
  padding: 0 var(--stars-spacing);
}

[part='placeholder-star'] {
  display: inline-flex;
  color: var(--stars-placeholder-color);
  transition: var(--stars-transition);
}

[part='selected-star'] {
  color: var(--stars-inactive-color);
  margin-left: 0px;
  position: relative;
  transition: var(--stars-transition);
}

.icon-clip {
  overflow: hidden;
  position: absolute;
  width: var(--decimal-width);
  height: 100%;
}

[part='star'][data-half] {
  --decimal-width: calc(50% - var(--stars-spacing));
}

/* selected state */

[part='star'][data-selected] {
  --stars-placeholder-color: transparent;
}

[part='star'][data-half] {
  --stars-placeholder-color: currentColor;
}

[part='star'][data-selected] [part='selected-star'] {
  color: var(--stars-color);
}

/* hover states */
@media (hover: hover) {
  [part='wrapper']:hover {
    --stars-color: var(--stars-hover-color);
    --stars-placeholder-color: transparent;
  }

  [part='wrapper']:hover [part='star'] {
    --decimal-width: 100%;
  }

  [part='wrapper']:hover [part='star'][data-half] {
    --stars-placeholder-color: transparent;
  }

  [part='wrapper']:hover [part='selected-star'] {
    color: var(--stars-color);
  }

  [part='star']:hover ~ [part='star'] [part='selected-star'] {
    color: var(--stars-inactive-color);
  }

  [part='star']:hover ~ [part='star'] [part='placeholder-star'] {
    color: var(--stars-placeholder-hover-color);
  }
}

/* active states */

[part='wrapper']:active {
  --stars-color: var(--stars-active-color);
}

/* focus states */

:host(:focus-within) [part='wrapper'],
[part='wrapper']:focus {
  outline: var(--focus-outline);
}

/* readonly states */

:host(.readonly) [part='wrapper'] {
  --stars-placeholder-color: var(--stars-disabled-color);

  pointer-events: none;
}

/* disabled states */

:host(.disabled) [part='label'],
:host(.disabled) [part='infotext'] {
  color: var(--stars-disabled-color);
}

:host(.disabled) [part='wrapper'] {
  --stars-color: var(--stars-disabled-color);
  --stars-placeholder-color: var(--stars-disabled-color);

  pointer-events: none;
}

/* hidden label */

:host(.hideLabel) [part='label'] {
  visibility: hidden;
  height: 0;
  margin-bottom: 0;
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  [part='star'] [part='placeholder-star'] {
    color: var(--telekom-color-text-and-icon-inverted-standard);
  }
  [part='star'][data-selected] [part='placeholder-star'] {
    color: var(--stars-inactive-color);
  }
  [part='star']:hover ~ [part='star'] [part='placeholder-star'] {
    color: var(--telekom-color-text-and-icon-inverted-standard);
  }
  [part='wrapper']:hover [part='placeholder-star'] {
    color: var(--stars-inactive-color);
  }
}