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 */

    .gin--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);
      }

      .gin--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);
    }

    /* Hover/Focus state */
    &:active,
    &:focus {
      box-shadow:
        0 0 0 1px var(--admin-color-focus-border),
        0 0 0 4px var(--admin-color-focus);
    }

    /* 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);
        }

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

        .gin--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;
      }
    }

    @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.     .gin--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.       .gin--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.     /* Hover/Focus state */

  74.     &:active,

  75.     &:focus {

  76.       box-shadow:

  77.         0 0 0 1px var(--admin-color-focus-border),

  78.         0 0 0 4px var(--admin-color-focus);

  79.     }

  80. 

  81.     /* Active state */

  82.     &:checked {

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

  84. 

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

  86.       &[class] {

  87.         background-image: none;

  88.       }

  89. 

  90.       &::before {

  91.         transform: translateX(1rem);

  92.         background-color: #fff;

  93. 

  94.         &:dir(rtl) {

  95.           transform: translateX(-1rem);

  96.         }

  97. 

  98.         .gin--dark-mode 
  99. 

  100.         .gin--high-contrast-mode 
  101. 

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

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

  104.           background-color: LinkText !important;

  105.         }

  106.       }

  107. 

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

  109.         &::after {

  110.           transform: translateX(1rem);

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

  112.           mask-position: 2px 2px;

  113. 

  114.           &:dir(rtl) {

  115.             transform: translateX(-1rem);

  116.           }

  117.         }

  118.       }

  119.     }

  120. 

  121.     /* Disabled state */

  122.     &:disabled {

  123.       opacity: 0.75;

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

  125.       box-shadow: none;

  126. 

  127.       &::before {

  128.         opacity: 0.6;

  129.         background-color: #fff;

  130.       }

  131.     }

  132. 

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

  134.       border-width: 2px;

  135.     }

  136. 

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

  138.       &::after {

  139.         position: absolute;

  140.         width: 100%;

  141.         height: 100%;

  142.         content: "";

  143.         transform: translateX(-1rem);

  144.         background-color: Canvas;

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

  146.         mask-size: 1rem 1rem;

  147.         mask-position: 1.0625rem 2px;

  148.         mask-repeat: no-repeat;

  149. 

  150.         &:dir(rtl) {

  151.           transform: translateX(1rem);

  152.         }

  153. 

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

  155.           transition: transform 0.3s;

  156.         }

  157.       }

  158.     }

  159.   }

  160. 

  161.   label {

  162.     position: relative;

  163.     z-index: 1;

  164.     padding-block-end: 0;

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

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

  167.   }

  168. }

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