ui/src/widgets/checkbox.scss

// Copyright (C) 2023 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "../assets/theme";

// Custom checkbox element: a hidden native input followed by a styled span.
// The tick is an inline SVG path, which gives crisp antialiased rendering at
// any size. The switch variant uses CSS for the sliding thumb.

$box-label-padding: 0.5em;

// 'Switch' style checkbox properties
$switch-border-width: 2px;
$switch-height: 1em;
$switch-slide-distance: 0.75em;

.pf-checkbox {
  $tick-anim-time: 200ms;

  display: inline;
  align-items: baseline;
  position: relative; // Turns this container into a positioned element
  user-select: none;
  cursor: pointer;

  // Hide the default checkbox
  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  &__box {
    display: inline-block;
    position: relative;
    top: -0.1em;
    vertical-align: middle;
    height: 1em;
  }

  input:focus-visible + .pf-checkbox__box {
    @include focus;
  }

  &.pf-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  &__label {
    padding-left: $box-label-padding;
  }

  &__label-left {
    padding-right: $box-label-padding;
  }

  // 'Check' style checkbox
  &__box--check {
    aspect-ratio: 1;
    border-radius: $border-radius;
    border: solid 1px currentColor;
    background: none;
    position: relative;
  }

  &__tick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--pf-color-text-on-primary);
    opacity: 0;
  }

  &:hover .pf-checkbox__box--check {
    background: color_hover(transparent);
  }

  input:checked + .pf-checkbox__box--check {
    border-color: var(--pf-color-primary);
    background: var(--pf-color-primary);
  }

  input:checked + .pf-checkbox__box--check .pf-checkbox__tick {
    opacity: 1;
  }

  &__box--switch {
    // Slice distance + thumb width
    width: $switch-slide-distance + $switch-height;
    height: $switch-height;
    position: relative;

    // The before element forms the track of the switch
    &:before {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      border-radius: 100px;
      background: var(--pf-color-border);
      border: solid $switch-border-width var(--pf-color-border);
      transition:
        border $anim-timing,
        background $anim-timing;
    }

    // The :after element forms the "thumb" of the switch
    &:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: $switch-height;
      height: $switch-height;
      background: white;
      box-sizing: border-box;
      border-radius: 50%;
      transition:
        border $anim-timing,
        left $anim-timing;
      border: solid $switch-border-width var(--pf-color-border);
    }
  }

  input:checked + .pf-checkbox__box--switch:before {
    background: var(--pf-color-primary);
    border-color: var(--pf-color-primary);
  }

  input:checked + .pf-checkbox__box--switch:after {
    border-color: var(--pf-color-primary);
  }

  input:checked + .pf-checkbox__box--switch:after {
    left: $switch-slide-distance;
  }
}