soft-components/dist/collection/components/sc-dial/sc-dial.css

Simple soft flexible set of web components

:host {
  --sc-dial-angle: 0deg;
  /**
    @prop --sc-dial-size:
      Size (diameter) of the dial control
      - default: 80px
  */
  --sc-dial-size: 80px;
  --sc-dial-size: 5rem;
  display: inline-block;
  height: var(--sc-dial-size);
  width: var(--sc-dial-size);
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(30px * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.6) calc(var(--sc-highlight-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.6) calc(var(--sc-shadow-dist-y) * 0.6) calc(1.875rem * 0.6) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  border-radius: 50%;
}
:host .dial-circle {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: block;
  transform: rotate(-180deg);
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
:host .dial-circle .temp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
}
:host .dial-circle .pointer {
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  transform-origin: center center;
  transform: rotate(var(--sc-dial-angle));
  will-change: transform;
}
:host .dial-circle .pointer-circle {
  margin: 20px;
  margin: 1.25rem;
  width: 30px;
  width: 1.875rem;
  height: 30px;
  height: 1.875rem;
  border-radius: 50%;
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.15) calc(var(--sc-highlight-dist-y) * 0.15) calc(30px * 0.15) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.15) calc(var(--sc-shadow-dist-y) * 0.15) calc(30px * 0.15) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.15) calc(var(--sc-highlight-dist-y) * 0.15) calc(1.875rem * 0.15) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.15) calc(var(--sc-shadow-dist-y) * 0.15) calc(1.875rem * 0.15) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  --sc-shadow-color: rgba(0, 0, 0, 0.5);
  transform: rotate(calc(180deg - var(--sc-dial-angle)));
}