form--checkbox-toggle.pcss.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/css/components/form--checkbox-toggle.pcss.css
/*
 * @file
 * Single checkbox: show as toggle.
 *
 * @todo Background color should use relative color notation, with lightness
 * hard coded while in dark mode.
 */

:not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox {
  position: relative;
  margin-inline-start: 0;

  input {
    all: unset;
    appearance: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 2.5rem;
    height: 1.5rem;
    cursor: pointer;
    vertical-align: top;
    border: 3px solid transparent;
    border-radius: var(--admin-radius-l);
    background-color: var(--admin-color-text-disabled);
    clip-path: circle(var(--admin-space-l) at 50% 50%); /* Fix Safari bug */

    .dark-mode & {
      background-color: var(--admin-color-bg-input);
    }

    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      transform: translateX(-16px);
      border-radius: 21px;
      background-color: #fff;

      &:dir(rtl) {
        transform: translateX(16px);
      }

      .dark-mode & {
        background-color: var(--admin-color-border-input);
      }

      @media (prefers-reduced-motion: no-preference) {
        transition: transform 0.3s;
      }

      @media (forced-colors: active) {
        background-color: CanvasText;
      }
    }

    /* Disabled state: set cursor to not-allowed */
    &:disabled {
      cursor: not-allowed;
    }

    /* Hover state */
    &:hover {
      opacity: 0.9;
      box-shadow: 0 0 2px rgb(0, 0, 0, 0.2);
    }

    /* Active/Focus state */
    &:active,
    &:focus {
      outline: var(--focus-outline);
      outline-offset: var(--outline-offset);
    }

    /* Active state */
    &:checked {
      background-color: var(--admin-color-switch);

      /* @todo refactor out this specificity. Win over form--checkbox-radio.css. */
      &[class] {
        background-image: none;
      }

      &::before {
        transform: translateX(16px);
        background-color: #fff;

        &:dir(rtl) {
          transform: translateX(-16px);
        }

        .dark-mode & {
          background-color: var(--admin-color-primary-hover);
        }

        .high-contrast-mode & {
          background-color: var(--admin-color-border);
        }

        @media (forced-colors: active) {
          padding-inline-start: var(--admin-space-xs);
          background-color: LinkText !important;
        }
      }

      @media (forced-colors: active) {
        &::after {
          transform: translateX(16px);
          mask-image: var(--admin-icon-checked);
          mask-position: 2px 2px;

          &:dir(rtl) {
            transform: translateX(-16px);
          }
        }
      }
    }

    /* Disabled state */
    &:disabled {
      opacity: 0.75;
      background-color: var(--admin-color-text-disabled);
      box-shadow: none;

      &::before {
        opacity: 0.6;
        background-color: #fff;
      }

      ~ label {
        color: var(--input--disabled-fg-color);
      }
    }

    @media (forced-colors: active) {
      border-width: 2px;
    }

    @media (forced-colors: active) {
      &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        transform: translateX(-16px);
        background-color: Canvas;
        mask-image: var(--admin-icon-toggle-unchecked);
        mask-size: 16px 16px;
        mask-position: 17px 2px;
        mask-repeat: no-repeat;

        &:dir(rtl) {
          transform: translateX(16px);
        }

        @media (prefers-reduced-motion: no-preference) {
          transition: transform 0.3s;
        }
      }
    }
  }

  label {
    position: relative;
    z-index: 1;
    padding-block-end: 0;
    padding-inline-start: var(--admin-space-2xs);
    color: var(--admin-color-text);
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/css/components/form--checkbox-toggle.pcss.css

View source 
  1. /*

  2.  * @file

  3.  * Single checkbox: show as toggle.

  4.  *

  5.  * @todo Background color should use relative color notation, with lightness

  6.  * hard coded while in dark mode.

  7.  */

  8. 

  9. :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox {

  10.   position: relative;

  11.   margin-inline-start: 0;

  12. 

  13.   input {

  14.     all: unset;

  15.     appearance: none;

  16.     position: relative;

  17.     display: inline-block;

  18.     overflow: hidden;

  19.     box-sizing: border-box;

  20.     width: 2.5rem;

  21.     height: 1.5rem;

  22.     cursor: pointer;

  23.     vertical-align: top;

  24.     border: 3px solid transparent;

  25.     border-radius: var(--admin-radius-l);

  26.     background-color: var(--admin-color-text-disabled);

  27.     clip-path: circle(var(--admin-space-l) at 50% 50%); /* Fix Safari bug */

  28. 

  29.     .dark-mode 
  30. 

  31.     &::before {

  32.       position: absolute;

  33.       width: 100%;

  34.       height: 100%;

  35.       content: "";

  36.       transform: translateX(-16px);

  37.       border-radius: 21px;

  38.       background-color: #fff;

  39. 

  40.       &:dir(rtl) {

  41.         transform: translateX(16px);

  42.       }

  43. 

  44.       .dark-mode 
  45. 

  46.       @media (prefers-reduced-motion: no-preference) {

  47.         transition: transform 0.3s;

  48.       }

  49. 

  50.       @media (forced-colors: active) {

  51.         background-color: CanvasText;

  52.       }

  53.     }

  54. 

  55.     /* Disabled state: set cursor to not-allowed */

  56.     &:disabled {

  57.       cursor: not-allowed;

  58.     }

  59. 

  60.     /* Hover state */

  61.     &:hover {

  62.       opacity: 0.9;

  63.       box-shadow: 0 0 2px rgb(0, 0, 0, 0.2);

  64.     }

  65. 

  66.     /* Active/Focus state */

  67.     &:active,

  68.     &:focus {

  69.       outline: var(--focus-outline);

  70.       outline-offset: var(--outline-offset);

  71.     }

  72. 

  73.     /* Active state */

  74.     &:checked {

  75.       background-color: var(--admin-color-switch);

  76. 

  77.       /* @todo refactor out this specificity. Win over form--checkbox-radio.css. */

  78.       &[class] {

  79.         background-image: none;

  80.       }

  81. 

  82.       &::before {

  83.         transform: translateX(16px);

  84.         background-color: #fff;

  85. 

  86.         &:dir(rtl) {

  87.           transform: translateX(-16px);

  88.         }

  89. 

  90.         .dark-mode 
  91. 

  92.         .high-contrast-mode 
  93. 

  94.         @media (forced-colors: active) {

  95.           padding-inline-start: var(--admin-space-xs);

  96.           background-color: LinkText !important;

  97.         }

  98.       }

  99. 

  100.       @media (forced-colors: active) {

  101.         &::after {

  102.           transform: translateX(16px);

  103.           mask-image: var(--admin-icon-checked);

  104.           mask-position: 2px 2px;

  105. 

  106.           &:dir(rtl) {

  107.             transform: translateX(-16px);

  108.           }

  109.         }

  110.       }

  111.     }

  112. 

  113.     /* Disabled state */

  114.     &:disabled {

  115.       opacity: 0.75;

  116.       background-color: var(--admin-color-text-disabled);

  117.       box-shadow: none;

  118. 

  119.       &::before {

  120.         opacity: 0.6;

  121.         background-color: #fff;

  122.       }

  123. 

  124.       ~ label {

  125.         color: var(--input--disabled-fg-color);

  126.       }

  127.     }

  128. 

  129.     @media (forced-colors: active) {

  130.       border-width: 2px;

  131.     }

  132. 

  133.     @media (forced-colors: active) {

  134.       &::after {

  135.         position: absolute;

  136.         width: 100%;

  137.         height: 100%;

  138.         content: "";

  139.         transform: translateX(-16px);

  140.         background-color: Canvas;

  141.         mask-image: var(--admin-icon-toggle-unchecked);

  142.         mask-size: 16px 16px;

  143.         mask-position: 17px 2px;

  144.         mask-repeat: no-repeat;

  145. 

  146.         &:dir(rtl) {

  147.           transform: translateX(16px);

  148.         }

  149. 

  150.         @media (prefers-reduced-motion: no-preference) {

  151.           transition: transform 0.3s;

  152.         }

  153.       }

  154.     }

  155.   }

  156. 

  157.   label {

  158.     position: relative;

  159.     z-index: 1;

  160.     padding-block-end: 0;

  161.     padding-inline-start: var(--admin-space-2xs);

  162.     color: var(--admin-color-text);

  163.   }

  164. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.