form--checkbox-toggle.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/css/components/form--checkbox-toggle.pcss.css
/*
 * @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(-16px);
      border-radius: 21px;
      background-color: #fff;

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

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

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

        .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(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(--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(-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(--gin-spacing-xxs);
    color: var(--gin-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. 

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

  7.   position: relative;

  8.   margin-inline-start: 0;

  9. 

  10.   input {

  11.     all: unset;

  12.     appearance: none;

  13.     position: relative;

  14.     display: inline-block;

  15.     overflow: hidden;

  16.     box-sizing: border-box;

  17.     width: 2.5rem;

  18.     height: 1.5rem;

  19.     cursor: pointer;

  20.     vertical-align: top;

  21.     border: 3px solid transparent;

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

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

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

  25. 

  26.     .gin--dark-mode 
  27. 

  28.     &::before {

  29.       position: absolute;

  30.       width: 100%;

  31.       height: 100%;

  32.       content: "";

  33.       transform: translateX(-16px);

  34.       border-radius: 21px;

  35.       background-color: #fff;

  36. 

  37.       &:dir(rtl) {

  38.         transform: translateX(16px);

  39.       }

  40. 

  41.       .gin--dark-mode 
  42. 

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

  44.         transition: transform 0.3s;

  45.       }

  46. 

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

  48.         background-color: CanvasText;

  49.       }

  50.     }

  51. 

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

  53.     &:disabled {

  54.       cursor: not-allowed;

  55.     }

  56. 

  57.     /* Hover state */

  58.     &:hover {

  59.       opacity: 0.9;

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

  61.     }

  62. 

  63.     /* Hover/Focus state */

  64.     &:active,

  65.     &:focus {

  66.       box-shadow:

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

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

  69.     }

  70. 

  71.     /* Active state */

  72.     &:checked {

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

  74. 

  75.       .gin--dark-mode 
  76. 

  77.       &::before {

  78.         transform: translateX(16px);

  79.         background-color: #fff;

  80. 

  81.         &:dir(rtl) {

  82.           transform: translateX(-16px);

  83.         }

  84. 

  85.         .gin--dark-mode 
  86. 

  87.         .gin--high-contrast-mode 
  88. 

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

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

  91.           background-color: LinkText !important;

  92.         }

  93.       }

  94. 

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

  96.         &::after {

  97.           transform: translateX(16px);

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

  99.           mask-position: 2px 2px;

  100. 

  101.           &:dir(rtl) {

  102.             transform: translateX(-16px);

  103.           }

  104.         }

  105.       }

  106.     }

  107. 

  108.     /* Disabled state */

  109.     &:disabled {

  110.       opacity: 0.75;

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

  112.       box-shadow: none;

  113. 

  114.       &::before {

  115.         opacity: 0.6;

  116.         background-color: #fff;

  117.       }

  118.     }

  119. 

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

  121.       border-width: 2px;

  122.     }

  123. 

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

  125.       &::after {

  126.         position: absolute;

  127.         width: 100%;

  128.         height: 100%;

  129.         content: "";

  130.         transform: translateX(-16px);

  131.         background-color: Canvas;

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

  133.         mask-size: 16px 16px;

  134.         mask-position: 17px 2px;

  135.         mask-repeat: no-repeat;

  136. 

  137.         &:dir(rtl) {

  138.           transform: translateX(16px);

  139.         }

  140. 

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

  142.           transition: transform 0.3s;

  143.         }

  144.       }

  145.     }

  146.   }

  147. 

  148.   label {

  149.     position: relative;

  150.     z-index: 1;

  151.     padding-block-end: 0;

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

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

  154.   }

  155. }

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