package.scss.forms._star-rating.scss Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of boosted Show documentation

Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library.

The newest version!

//
// Star rating
//

.star-rating {
  --#{$prefix}star-rating-checked-color: #{$form-star-rating-checked-color};
  --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-unchecked-color};
  --#{$prefix}star-rating-hover-color: #{$form-star-rating-hover-color};
  --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon};
  --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon};

  font-size: $form-star-size;
  background-color: transparent;

  &:disabled {
    pointer-events: none;
    --#{$prefix}star-rating-checked-color: #{$form-star-rating-disabled-color};
    --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-disabled-color};
  }

  > label {
    cursor: pointer;
  }

  > label,
  span {
    float: left;
    width: 1em;
    height: 1em;

    &::before {
      display: block;
      width: 100%;
      height: 100%;
      content: "";
      background-color: var(--#{$prefix}star-rating-checked-color);
      mask-image: var(--#{$prefix}star-rating-checked-icon);
    }

    &:not(:first-of-type){
      margin-left: $form-star-margin-between;
    }
  }

  > input:checked ~ label::before,
  .checked ~ span::before {
    background-color: var(--#{$prefix}star-rating-unchecked-color);
    mask-image: var(--#{$prefix}star-rating-unchecked-icon);
  }

  > input:checked + label::before {
    background-color: var(--#{$prefix}star-rating-checked-color);
    mask-image: var(--#{$prefix}star-rating-checked-icon);
  }

  > [data-focus-visible-added]:focus + label {
    @include focus-visible();
    outline-offset: -1px;
    box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
  }

  &:hover input + label::before {
    background-color: var(--#{$prefix}star-rating-hover-color);
    mask-image: var(--#{$prefix}star-rating-checked-icon);
  }

  > input:hover ~ label::before {
    background-color: var(--#{$prefix}star-rating-unchecked-color);
    mask-image: var(--#{$prefix}star-rating-unchecked-icon);
  }

  > input:hover + label::before {
    background-color: var(--#{$prefix}star-rating-hover-color);
    mask-image: var(--#{$prefix}star-rating-checked-icon);
  }
}

.star-rating-sm {
  --#{$prefix}star-rating-checked-icon: #{$form-star-rating-sm-checked-icon};
  --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-sm-unchecked-icon};
  font-size: $form-star-size-sm;
}