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

: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(--gin-border-l);
    background-color: var(--gin-color-disabled);
    clip-path: circle(var(--gin-spacing-l) at 50% 50%); /* Fix Safari bug */

    .gin--dark-mode & {
      background-color: var(--gin-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(--gin-border-color-form-element);
      }

      @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(--gin-color-focus-border),
        0 0 0 4px var(--gin-color-focus);
    }

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

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

      &::before {
        transform: translateX(1rem);
        background-color: #fff;

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

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

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

        @media (forced-colors: active) {
          padding-inline-start: var(--gin-spacing-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(--gin-color-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(--gin-spacing-xxs);
    color: var(--gin-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. 

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

  14.   position: relative;

  15.   margin-inline-start: 0;

  16. 

  17.   input {

  18.     all: unset;

  19.     appearance: none;

  20.     position: relative;

  21.     display: inline-block;

  22.     overflow: hidden;

  23.     box-sizing: border-box;

  24.     width: 2.5rem;

  25.     height: 1.5rem;

  26.     cursor: pointer;

  27.     vertical-align: top;

  28.     border: 3px solid transparent;

  29.     border-radius: var(--gin-border-l);

  30.     background-color: var(--gin-color-disabled);

  31.     clip-path: circle(var(--gin-spacing-l) at 50% 50%); /* Fix Safari bug */

  32. 

  33.     .gin--dark-mode 
  34. 

  35.     &::before {

  36.       position: absolute;

  37.       width: 100%;

  38.       height: 100%;

  39.       content: "";

  40.       transform: translateX(-1rem);

  41.       border-radius: 1.3125rem;

  42.       background-color: #fff;

  43. 

  44.       &:dir(rtl) {

  45.         transform: translateX(1rem);

  46.       }

  47. 

  48.       .gin--dark-mode 
  49. 

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

  51.         transition: transform 0.3s;

  52.       }

  53. 

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

  55.         background-color: CanvasText;

  56.       }

  57.     }

  58. 

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

  60.     &:disabled {

  61.       cursor: not-allowed;

  62.     }

  63. 

  64.     /* Hover state */

  65.     &:hover {

  66.       opacity: 0.9;

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

  68.     }

  69. 

  70.     /* Hover/Focus state */

  71.     &:active,

  72.     &:focus {

  73.       box-shadow:

  74.         0 0 0 1px var(--gin-color-focus-border),

  75.         0 0 0 4px var(--gin-color-focus);

  76.     }

  77. 

  78.     /* Active state */

  79.     &:checked {

  80.       background-color: var(--gin-switch);

  81. 

  82.       .gin--dark-mode 
  83. 

  84.       &::before {

  85.         transform: translateX(1rem);

  86.         background-color: #fff;

  87. 

  88.         &:dir(rtl) {

  89.           transform: translateX(-1rem);

  90.         }

  91. 

  92.         .gin--dark-mode 
  93. 

  94.         .gin--high-contrast-mode 
  95. 

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

  97.           padding-inline-start: var(--gin-spacing-xs);

  98.           background-color: LinkText !important;

  99.         }

  100.       }

  101. 

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

  103.         &::after {

  104.           transform: translateX(1rem);

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

  106.           mask-position: 2px 2px;

  107. 

  108.           &:dir(rtl) {

  109.             transform: translateX(-1rem);

  110.           }

  111.         }

  112.       }

  113.     }

  114. 

  115.     /* Disabled state */

  116.     &:disabled {

  117.       opacity: 0.75;

  118.       background-color: var(--gin-color-disabled);

  119.       box-shadow: none;

  120. 

  121.       &::before {

  122.         opacity: 0.6;

  123.         background-color: #fff;

  124.       }

  125.     }

  126. 

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

  128.       border-width: 2px;

  129.     }

  130. 

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

  132.       &::after {

  133.         position: absolute;

  134.         width: 100%;

  135.         height: 100%;

  136.         content: "";

  137.         transform: translateX(-1rem);

  138.         background-color: Canvas;

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

  140.         mask-size: 1rem 1rem;

  141.         mask-position: 1.0625rem 2px;

  142.         mask-repeat: no-repeat;

  143. 

  144.         &:dir(rtl) {

  145.           transform: translateX(1rem);

  146.         }

  147. 

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

  149.           transition: transform 0.3s;

  150.         }

  151.       }

  152.     }

  153.   }

  154. 

  155.   label {

  156.     position: relative;

  157.     z-index: 1;

  158.     padding-block-end: 0;

  159.     padding-inline-start: var(--gin-spacing-xxs);

  160.     color: var(--gin-color-text);

  161.   }

  162. }

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