form--checkbox-toggle.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/css/components/form--checkbox-toggle.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @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(-1rem);
      border-radius: 1.3125rem;
      background-color: #fff;

      &:dir(rtl) {
        transform: translateX(1rem);
      }

      .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(1rem);
        background-color: #fff;

        &:dir(rtl) {
          transform: translateX(-1rem);
        }

        .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(1rem);
          mask-image: var(--admin-icon-checked);
          mask-position: 2px 2px;

          &:dir(rtl) {
            transform: translateX(-1rem);
          }
        }
      }
    }

    /* 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(-1rem);
        background-color: Canvas;
        mask-image: var(--admin-icon-toggle-unchecked);
        mask-size: 1rem 1rem;
        mask-position: 1.0625rem 2px;
        mask-repeat: no-repeat;

        &:dir(rtl) {
          transform: translateX(1rem);
        }

        @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.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /*

  9.  * @file

  10.  * Single checkbox: show as toggle.

  11.  *

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

  13.  * hard coded while in dark mode.

  14.  */

  15. 

  16. :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 {

  17.   position: relative;

  18.   margin-inline-start: 0;

  19. 

  20.   input {

  21.     all: unset;

  22.     appearance: none;

  23.     position: relative;

  24.     display: inline-block;

  25.     overflow: hidden;

  26.     box-sizing: border-box;

  27.     width: 2.5rem;

  28.     height: 1.5rem;

  29.     cursor: pointer;

  30.     vertical-align: top;

  31.     border: 3px solid transparent;

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

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

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

  35. 

  36.     .dark-mode 
  37. 

  38.     &::before {

  39.       position: absolute;

  40.       width: 100%;

  41.       height: 100%;

  42.       content: "";

  43.       transform: translateX(-1rem);

  44.       border-radius: 1.3125rem;

  45.       background-color: #fff;

  46. 

  47.       &:dir(rtl) {

  48.         transform: translateX(1rem);

  49.       }

  50. 

  51.       .dark-mode 
  52. 

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

  54.         transition: transform 0.3s;

  55.       }

  56. 

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

  58.         background-color: CanvasText;

  59.       }

  60.     }

  61. 

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

  63.     &:disabled {

  64.       cursor: not-allowed;

  65.     }

  66. 

  67.     /* Hover state */

  68.     &:hover {

  69.       opacity: 0.9;

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

  71.     }

  72. 

  73.     /* Active/Focus state */

  74.     &:active,

  75.     &:focus {

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

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

  78.     }

  79. 

  80.     /* Active state */

  81.     &:checked {

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

  83. 

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

  85.       &[class] {

  86.         background-image: none;

  87.       }

  88. 

  89.       &::before {

  90.         transform: translateX(1rem);

  91.         background-color: #fff;

  92. 

  93.         &:dir(rtl) {

  94.           transform: translateX(-1rem);

  95.         }

  96. 

  97.         .dark-mode 
  98. 

  99.         .high-contrast-mode 
  100. 

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

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

  103.           background-color: LinkText !important;

  104.         }

  105.       }

  106. 

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

  108.         &::after {

  109.           transform: translateX(1rem);

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

  111.           mask-position: 2px 2px;

  112. 

  113.           &:dir(rtl) {

  114.             transform: translateX(-1rem);

  115.           }

  116.         }

  117.       }

  118.     }

  119. 

  120.     /* Disabled state */

  121.     &:disabled {

  122.       opacity: 0.75;

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

  124.       box-shadow: none;

  125. 

  126.       &::before {

  127.         opacity: 0.6;

  128.         background-color: #fff;

  129.       }

  130. 

  131.       ~ label {

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

  133.       }

  134.     }

  135. 

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

  137.       border-width: 2px;

  138.     }

  139. 

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

  141.       &::after {

  142.         position: absolute;

  143.         width: 100%;

  144.         height: 100%;

  145.         content: "";

  146.         transform: translateX(-1rem);

  147.         background-color: Canvas;

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

  149.         mask-size: 1rem 1rem;

  150.         mask-position: 1.0625rem 2px;

  151.         mask-repeat: no-repeat;

  152. 

  153.         &:dir(rtl) {

  154.           transform: translateX(1rem);

  155.         }

  156. 

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

  158.           transition: transform 0.3s;

  159.         }

  160.       }

  161.     }

  162.   }

  163. 

  164.   label {

  165.     position: relative;

  166.     z-index: 1;

  167.     padding-block-end: 0;

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

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

  170.   }

  171. }

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