@universal-material/web/checkbox/checkbox.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);
    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
    display: inline-block;
    vertical-align: middle;
  }

  .container {
    cursor: pointer;
    position: relative;
    width: var(--_width);
    height: var(--_height);
    padding: var(--_state-layer-padding);
    border-radius: var(--u-shape-corner-full, 9999px);
  }

  :host([hide-state-layer]) .container {
    width: var(--_indicator-size);
    height: var(--_indicator-size);
    padding: 0;
  }
  :host([hide-state-layer]) u-ripple {
    display: none;
  }

  input {
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: inherit;
    appearance: none;
  }

  u-ripple {
    padding: var(--_state-layer-padding);
  }

  .indicator-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    pointer-events: none;
  }

  input:checked ~ .indicator-container {
    --_indicator-color: var(--u-checkbox-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
  }

  :host([disabled]) {
    opacity: var(--u-checkbox-disabled-state-opacity, 0.38);
  }
  :host([disabled]) input,
  :host([disabled]) .container {
    cursor: default;
  }
  :host([disabled]) .indicator-container {
    --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
  }

  :host {
    --_indicator-size: var(--u-checkbox-indicator-size, 1.125rem);
    --_width: var(--u-checkbox-size, 3rem);
    --_height: var(--_width);
  }

  .border {
    width: var(--_indicator-size);
    height: var(--_indicator-size);
    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;
    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);
    transition: box-shadow 175ms 175ms;
  }

  .indicator {
    position: absolute;
    display: flex;
    justify-content: center;
    width: var(--_indicator-size);
    height: var(--_indicator-size);
    overflow: hidden;
    clip: rect(0, 0, var(--_indicator-size), 0);
    transition: clip 275ms;
  }
  .indicator::before {
    position: relative;
    top: 25%;
    box-sizing: border-box;
    display: block;
    width: 0.75rem;
    height: 0.35rem;
    content: "";
    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary, rgb(255, 255, 255));
    border-top-style: none;
    border-right-style: none;
    transform: rotate(-45deg);
    transition: border 175ms, transform 175ms;
  }

  input.indeterminate ~ .indicator-container .border,
  input:checked ~ .indicator-container .border {
    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;
    transition: box-shadow 175ms;
  }
  input.indeterminate ~ .indicator-container .indicator,
  input:checked ~ .indicator-container .indicator {
    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);
    transition: clip 175ms 175ms;
  }

  input.indeterminate ~ .indicator-container {
    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));
  }
  input.indeterminate ~ .indicator-container .indicator::before {
    border-left-style: none;
    transform: rotate(0);
    width: 0.6rem;
  }
`;
//# sourceMappingURL=checkbox.styles.js.map