ndf-elements/src/templates/my-star-rating.tpl.html

My collection of useful custom elements.

<!--

Example:

<style>
:root {
  --my-star-rating-size: 5rem;
  --my-no-star-color: #ddd;
  --my-star-color: #b00;
  --my-star-ring-color: blue;
}
</style>

<my-star-rating name="rating-1"> Rate our service </my-star-rating>

-->

<meta name="robots" content="noindex">

<template id="my-radio-star-rating-element">
  <style>
  /* Reset */
  fieldset { border: none; padding: 0; }
  fieldset legend { position: relative; left: -.3rem; }

  .radio-star-rating-set label {
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    margin-right: var(--my-star-margin, .2rem);
    max-height: var(--my-star-rating-max-size, 4rem);
    max-width: var(--my-star-rating-max-size, 4rem);
    height: 15vw;
    width: 15vw;
  }

  @media screen and (max-width: 750px) { /* 800px */
    .radio-star-rating-set label {
      margin-right: .6vw;
    }
  }

  .radio-star-rating-set label:hover,
  .radio-star-rating-set label.focused {
    box-shadow: 0 0 4px 2px var(--my-star-ring-color, #444);
    transition: all .2s;
  }

  /* Visually hidden / 'sr-only'
   * https://css-tricks.com/inclusively-hidden/
   * https://github.com/twbs/bootstrap/blob/v4.6.1/scss/mixins/_screen-reader.scss#L6-L16;
   * https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
   */
  .radio-star-rating-set label i,
  .radio-star-rating-set [ type = radio ] {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .radio-star-rating-set label svg {
    height: 100%;
    width: 100%; /* Width: 1235px !! */
    position: relative;
    top: -.2rem;
  }

  /* data-star = no */
  .radio-star-rating-set label .path-star {
    fill: var(--my-no-star-color, #ccc);
    X-stroke: #aaa;
    X-stroke-width: 3px;
    transition: all .3s;
  }

  .radio-star-rating-set [ data-star = yes ] .path-star {
    fill: var(--my-star-color, #555);
  }
  </style>

  <fieldset class="radio-star-rating-set" data-stars="">
    <legend><slot> Rate me </slot></legend>

    <label data-star="no" class="star-1" aria-label="1 star"  ><input type="radio" name="rsrg-1" value="1" /></label>
    <label data-star="no" class="star-2" aria-label="2 stars" ><input type="radio" name="rsrg-1" value="2" /></label>
    <label data-star="no" class="star-3" aria-label="3 stars" ><input type="radio" name="rsrg-1" value="3" /></label>
    <label data-star="no" class="star-4" aria-label="4 stars" ><input type="radio" name="rsrg-1" value="4" /></label>
    <label data-star="no" class="star-5" aria-label="5 stars" ><input type="radio" name="rsrg-1" value="5" /></label>
  </fieldset>
</template>


<!--
  https://commons.wikimedia.org/wiki/File:Red_star.svg
  https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg
-->
<template id="star-svg">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1235" height="1175" viewBox="0 0 1235 1175">
    <!--<title>Star</title>-->
    <path class="path-star" part="star" d="M0,449h1235l-999,726 382-1175 382,1175z"/>
  </svg>
</template>