gin-form.pcss.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/migration/css/base/gin-form.pcss.css
/* cspell:ignore Darkmode, tablesaw */
.form-element {
  box-sizing: border-box;
  min-height: calc((var(--input-padding-vertical) * 2) + var(--input-line-height));
  color: var(--gin-color-text);
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-border-m);
  background-color: var(--gin-bg-input);
  line-height: var(--input-line-height);
  padding-block: calc(var(--input-padding-vertical) - 1px);
  padding-inline: var(--input-padding-horizontal);

  &:hover {
    border-color: var(--gin-color-text);
    box-shadow: inset 0 0 0 1px var(--gin-color-text);
  }

  &[disabled],
  &[disabled]:hover {
    cursor: not-allowed;
    color: var(--gin-color-disabled);
    border-color: var(--gin-color-disabled-border);
    background-color: var(--gin-color-disabled-bg) !important;
    box-shadow: none;
  }

  .gin--dark-mode & {
    color-scheme: dark;
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: var(--gin-transition);
  }
}

.form-element--small,
.form-element--extrasmall {
  border-radius: var(--gin-border-s);
  font-size: var(--gin-font-size-s);
  line-height: 1.5;
}

.form-textarea-wrapper {
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, .15); */
  border-radius: var(--gin-border-m);

  textarea {
    max-width: 100%;
  }
}

.form-item--editor-format,
.form-element--editor-format {
  width: auto;

  .form-item__label {
    inset-block-start: 3px;
    padding-block-end: 0;
  }
}

/* Password */
.password-field {
  width: 100%;
}

.password-confirm {
  width: 100%;
  max-width: var(--gin-max-line-length);
}

.password-strength__title {
  color: var(--gin-color-text-light);
}

.password-strength__text {
  color: var(--gin-color-title);
}

.password-suggestions {
  color: var(--gin-color-text-light);
  border: 1px solid var(--gin-border-color-layer2);
  background-color: transparent;
}

.subfield-option {
  border: 1px solid var(--gin-border-color-layer2);
  border-radius: var(--gin-border-m);
}

/* Select */
.form-element--type-select {
  padding-inline-end: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);

  .gin--dark-mode & {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
  }
}

.form-element--type-select--small {
  min-height: 2.25rem;
  background-position: 100% 52%;
  font-size: var(--gin-font-size-xs);
  line-height: 1.4;
  padding-block: 0.474rem; /* 0.79rem * 1.2 / 2 */

  &:dir(rtl) {
    background-position: 0% 52%;
  }
}

.form-boolean {
  width: 21px;
  height: 21px;
  border-color: var(--gin-border-color-form-element);
  border-radius: var(--gin-border-xs);
}

/* Darkmode Checkbox */
.form-boolean--type-checkbox {
  &:not(:checked) {
    .gin--dark-mode & {
      background: var(--gin-bg-input);
    }
  }

  &:checked {
    background-color: var(--gin-color-primary);

    &:not(:disabled) {
      .gin--dark-mode & {
        background-image: var(--admin-icon-checked);
      }
    }

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

    &:active {
      background-color: var(--gin-color-primary-active);
    }
  }
}

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

/* Correctly align bulk action checkboxes when used in combination with tabledrag */
table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {
  margin-inline-start: calc(var(--tabledrag-handle-icon-size, calc(17rem / 16)) + var(--gin-spacing-m));
}

.form-boolean {
  &:hover,
  &:active {
    .gin--dark-mode & {
      border-color: var(--gin-color-text);
      box-shadow: none;
    }
  }
}

.form-boolean--type-radio {
  &,
  &:hover,
  &:active,
  &:focus,
  &:hover:focus {
    border-color: var(--gin-border-color-form-element);
    border-radius: 50%;
    background-color: var(--gin-bg-input);
    background-image: none;
  }

  &:hover {
    box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);

    &,
    .gin--dark-mode & {
      border-color: var(--gin-color-text);
    }
  }

  &:active,
  &:focus {
    box-shadow:
      inset 0 0 0 1px var(--gin-border-color-layer2),
      0 0 0 1px var(--gin-color-focus-border),
      0 0 0 4px var(--gin-color-focus);
  }

  &:checked:not(:disabled) {
    &,
    &:hover {
      background-color: var(--gin-bg-layer);
      background-image: none;
      box-shadow: inset 0 0 0 5px var(--gin-color-primary);
    }

    &:active,
    &:focus,
    &:hover:focus {
      border-color: var(--gin-color-focus-border);
      box-shadow:
        inset 0 0 0 5px var(--gin-color-primary),
        0 0 0 1px var(--gin-color-focus-border),
        0 0 0 4px var(--gin-color-focus);
    }
  }

  &:disabled {
    &,
    &:hover {
      cursor: not-allowed;
      border-color: var(--gin-color-disabled-border);
      background: var(--gin-color-disabled-bg);
    }
  }

  &:checked:disabled {
    &,
    &:hover {
      background: var(--gin-color-disabled);
      box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);
    }
  }
}

.form-boolean--type-checkbox[disabled] {
  &,
  &:hover {
    cursor: not-allowed;
    border-color: var(--gin-color-disabled-border);
    background-color: var(--gin-color-disabled-bg);

    &:checked {
      border-color: var(--gin-color-disabled-border);
      background-color: var(--gin-color-disabled-bg);
      box-shadow: none;
    }
  }
}

.form-radios,
.form-checkboxes {
  .form-type--boolean {
    margin-block: var(--gin-spacing-xs);
  }
}

.form-actions {
  margin-block-end: 0;
}

.form-edit .form-actions {
  margin-block-end: 0;
  padding: 0;
  border: 0 none;
  background-color: transparent;
}

/* Fieldgroup */
fieldset:not(.fieldgroup) {
  padding-block-start: var(--gin-spacing-xs);
  color: var(--gin-color-text-light);
  border-color: var(--gin-border-color);
  border-radius: var(--gin-border-m);
  background: transparent;
  box-shadow: none;
  padding-inline: 0;

  > legend {
    inset-block-start: 20px;
  }

  > .fieldset-wrapper {
    margin-block-start: 20px;
  }

  &.error {
    border: 2px solid var(--gin-color-danger);
  }
}

.fieldset__label,
.fieldset__label--group,
.form-item__label {
  margin-block-start: 0;
  margin-block-end: var(--gin-spacing-xs);
  color: var(--gin-color-title);
  font-size: var(--gin-font-size-s);
  font-weight: var(--gin-font-weight-semibold);
}

.form-item__label.has-error,
.form-item__error-message {
  color: var(--gin-color-danger);
}

.form-item__description,
.fieldset__description,
.filter-guidelines__item {
  max-width: var(--gin-max-line-length);
  color: var(--gin-color-text-light);
}

.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.form-required > .fieldset__label::after,
.horizontal-tab-button .form-required::after,
.vertical-tabs__menu-link .form-required::after {
  content: "*";
  vertical-align: text-top;
  color: var(--gin-color-danger);
  background: none;
  line-height: 1;
  margin-inline: 0.15em;
}

.gin-details.error {
  border: 2px solid var(--gin-color-danger);
}

.gin-details__summary:not(.form-required) {
  .required-mark {
    display: none;
  }
}

.form-item__warning {
  display: inline-block;
  margin-block-start: var(--gin-spacing-xs);
}

html.js .form-autocomplete {
  padding-inline-end: 36px;
}

.entity-form-display-form {
  > .form-actions {
    margin-block: 0;
  }
}

.required-mark {
  &::after {
    background: var(--gin-color-danger);
    mask-image: var(--admin-icon-asterisk);
    mask-position: center center;
    mask-size: 100% 100%;
  }
}

.form-wrapper,
.form-composite {
  .form-item__label {
    position: relative;
  }
}

.field--type-text-with-summary,
.field--widget-text-textarea {
  .form-item {
    margin-block-end: 0;
  }

  .filter-wrapper {
    border: 0 none;
    padding-inline: 0;
  }
}

.claro-autocomplete {
  width: calc(100% - var(--gin-spacing-m));

  .form-autocomplete {
    width: 100%;
  }
}

.no-touchevents .form-element--type-select.form-element--extrasmall {
  min-height: 1.75rem;
  font-size: var(--gin-font-size-s);
  line-height: 1.5;
}

/* Special case, form starts with a form item, remove margin-block-start. */
#block-gin-content > form > .form-item:first-of-type {
  margin-block-start: 0;
}

.image-style-new {
  .form-item {
    margin-inline-end: var(--gin-spacing-xxs);
  }
}

tr .form-item {
  margin-block: 0;
}

.container-inline .form-item {
  margin-block: var(--gin-spacing-density-s);
}

.field-plugin-settings-edit-form {
  margin-block-start: var(--gin-spacing-s);

  .form-item {
    margin-block: var(--gin-spacing-m);
  }

  .form-boolean-group .form-item {
    margin-block: var(--gin-spacing-xs);
  }
}

/* Length indicator */
.length-indicator {
  margin-block-end: var(--gin-spacing-l);
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-form.pcss.css

View source 
  1. /* cspell:ignore Darkmode, tablesaw */

  2. .form-element {

  3.   box-sizing: border-box;

  4.   min-height: calc((var(--input-padding-vertical) * 2) + var(--input-line-height));

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

  6.   border: 1px solid var(--gin-border-color-form-element);

  7.   border-radius: var(--gin-border-m);

  8.   background-color: var(--gin-bg-input);

  9.   line-height: var(--input-line-height);

  10.   padding-block: calc(var(--input-padding-vertical) - 1px);

  11.   padding-inline: var(--input-padding-horizontal);

  12. 

  13.   &:hover {

  14.     border-color: var(--gin-color-text);

  15.     box-shadow: inset 0 0 0 1px var(--gin-color-text);

  16.   }

  17. 

  18.   &[disabled],

  19.   &[disabled]:hover {

  20.     cursor: not-allowed;

  21.     color: var(--gin-color-disabled);

  22.     border-color: var(--gin-color-disabled-border);

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

  24.     box-shadow: none;

  25.   }

  26. 

  27.   .gin--dark-mode 
  28. 

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

  30.     transition: var(--gin-transition);

  31.   }

  32. }

  33. 

  34. .form-element--small,

  35. .form-element--extrasmall {

  36.   border-radius: var(--gin-border-s);

  37.   font-size: var(--gin-font-size-s);

  38.   line-height: 1.5;

  39. }

  40. 

  41. .form-textarea-wrapper {

  42.   /* box-shadow: 0 1px 2px rgba(0, 0, 0, .15); */

  43.   border-radius: var(--gin-border-m);

  44. 

  45.   textarea {

  46.     max-width: 100%;

  47.   }

  48. }

  49. 

  50. .form-item--editor-format,

  51. .form-element--editor-format {

  52.   width: auto;

  53. 

  54.   .form-item__label {

  55.     inset-block-start: 3px;

  56.     padding-block-end: 0;

  57.   }

  58. }

  59. 

  60. /* Password */

  61. .password-field {

  62.   width: 100%;

  63. }

  64. 

  65. .password-confirm {

  66.   width: 100%;

  67.   max-width: var(--gin-max-line-length);

  68. }

  69. 

  70. .password-strength__title {

  71.   color: var(--gin-color-text-light);

  72. }

  73. 

  74. .password-strength__text {

  75.   color: var(--gin-color-title);

  76. }

  77. 

  78. .password-suggestions {

  79.   color: var(--gin-color-text-light);

  80.   border: 1px solid var(--gin-border-color-layer2);

  81.   background-color: transparent;

  82. }

  83. 

  84. .subfield-option {

  85.   border: 1px solid var(--gin-border-color-layer2);

  86.   border-radius: var(--gin-border-m);

  87. }

  88. 

  89. /* Select */

  90. .form-element--type-select {

  91.   padding-inline-end: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);

  92. 

  93.   .gin--dark-mode 
  94. }

  95. 

  96. .form-element--type-select--small {

  97.   min-height: 2.25rem;

  98.   background-position: 100% 52%;

  99.   font-size: var(--gin-font-size-xs);

  100.   line-height: 1.4;

  101.   padding-block: 0.474rem; /* 0.79rem * 1.2 / 2 */

  102. 

  103.   &:dir(rtl) {

  104.     background-position: 0% 52%;

  105.   }

  106. }

  107. 

  108. .form-boolean {

  109.   width: 21px;

  110.   height: 21px;

  111.   border-color: var(--gin-border-color-form-element);

  112.   border-radius: var(--gin-border-xs);

  113. }

  114. 

  115. /* Darkmode Checkbox */

  116. .form-boolean--type-checkbox {

  117.   &:not(:checked) {

  118.     .gin--dark-mode 
  119.   }

  120. 

  121.   &:checked {

  122.     background-color: var(--gin-color-primary);

  123. 

  124.     &:not(:disabled) {

  125.       .gin--dark-mode 
  126.     }

  127. 

  128.     &:hover {

  129.       background-color: var(--gin-color-primary-hover);

  130.     }

  131. 

  132.     &:active {

  133.       background-color: var(--gin-color-primary-active);

  134.     }

  135.   }

  136. }

  137. 

  138. /* Single Checkbox: show as toggle */

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

  140.   position: relative;

  141.   margin-inline-start: 0;

  142. 

  143.   input {

  144.     all: unset;

  145.     appearance: none;

  146.     position: relative;

  147.     display: inline-block;

  148.     overflow: hidden;

  149.     box-sizing: border-box;

  150.     width: 2.5rem;

  151.     height: 1.5rem;

  152.     cursor: pointer;

  153.     vertical-align: top;

  154.     border: 3px solid transparent;

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

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

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

  158. 

  159.     .gin--dark-mode 
  160. 

  161.     &::before {

  162.       position: absolute;

  163.       width: 100%;

  164.       height: 100%;

  165.       content: "";

  166.       transform: translateX(-16px);

  167.       border-radius: 21px;

  168.       background-color: #fff;

  169. 

  170.       &:dir(rtl) {

  171.         transform: translateX(16px);

  172.       }

  173. 

  174.       .gin--dark-mode 
  175. 

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

  177.         transition: transform 0.3s;

  178.       }

  179. 

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

  181.         background-color: CanvasText;

  182.       }

  183.     }

  184. 

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

  186.     &:disabled {

  187.       cursor: not-allowed;

  188.     }

  189. 

  190.     /* Hover state */

  191.     &:hover {

  192.       opacity: 0.9;

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

  194.     }

  195. 

  196.     /* Hover/Focus state */

  197.     &:active,

  198.     &:focus {

  199.       box-shadow:

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

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

  202.     }

  203. 

  204.     /* Active state */

  205.     &:checked {

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

  207. 

  208.       .gin--dark-mode 
  209. 

  210.       &::before {

  211.         transform: translateX(16px);

  212.         background-color: #fff;

  213. 

  214.         &:dir(rtl) {

  215.           transform: translateX(-16px);

  216.         }

  217. 

  218.         .gin--dark-mode 
  219. 

  220.         .gin--high-contrast-mode 
  221. 

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

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

  224.           background-color: LinkText !important;

  225.         }

  226.       }

  227. 

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

  229.         &::after {

  230.           transform: translateX(16px);

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

  232.           mask-position: 2px 2px;

  233. 

  234.           &:dir(rtl) {

  235.             transform: translateX(-16px);

  236.           }

  237.         }

  238.       }

  239.     }

  240. 

  241.     /* Disabled state */

  242.     &:disabled {

  243.       opacity: 0.75;

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

  245.       box-shadow: none;

  246. 

  247.       &::before {

  248.         opacity: 0.6;

  249.         background-color: #fff;

  250.       }

  251.     }

  252. 

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

  254.       border-width: 2px;

  255.     }

  256. 

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

  258.       &::after {

  259.         position: absolute;

  260.         width: 100%;

  261.         height: 100%;

  262.         content: "";

  263.         transform: translateX(-16px);

  264.         background-color: Canvas;

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

  266.         mask-size: 16px 16px;

  267.         mask-position: 17px 2px;

  268.         mask-repeat: no-repeat;

  269. 

  270.         &:dir(rtl) {

  271.           transform: translateX(16px);

  272.         }

  273. 

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

  275.           transition: transform 0.3s;

  276.         }

  277.       }

  278.     }

  279.   }

  280. 

  281.   label {

  282.     position: relative;

  283.     z-index: 1;

  284.     padding-block-end: 0;

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

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

  287.   }

  288. }

  289. 

  290. /* Correctly align bulk action checkboxes when used in combination with tabledrag */

  291. table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {

  292.   margin-inline-start: calc(var(--tabledrag-handle-icon-size, calc(17rem / 16)) + var(--gin-spacing-m));

  293. }

  294. 

  295. .form-boolean {

  296.   &:hover,

  297.   &:active {

  298.     .gin--dark-mode 
  299.   }

  300. }

  301. 

  302. .form-boolean--type-radio {

  303.   &,

  304.   &:hover,

  305.   &:active,

  306.   &:focus,

  307.   &:hover:focus {

  308.     border-color: var(--gin-border-color-form-element);

  309.     border-radius: 50%;

  310.     background-color: var(--gin-bg-input);

  311.     background-image: none;

  312.   }

  313. 

  314.   &:hover {

  315.     box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);

  316. 

  317.     &,

  318.     .gin--dark-mode 
  319.   }

  320. 

  321.   &:active,

  322.   &:focus {

  323.     box-shadow:

  324.       inset 0 0 0 1px var(--gin-border-color-layer2),

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

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

  327.   }

  328. 

  329.   &:checked:not(:disabled) {

  330.     &,

  331.     &:hover {

  332.       background-color: var(--gin-bg-layer);

  333.       background-image: none;

  334.       box-shadow: inset 0 0 0 5px var(--gin-color-primary);

  335.     }

  336. 

  337.     &:active,

  338.     &:focus,

  339.     &:hover:focus {

  340.       border-color: var(--gin-color-focus-border);

  341.       box-shadow:

  342.         inset 0 0 0 5px var(--gin-color-primary),

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

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

  345.     }

  346.   }

  347. 

  348.   &:disabled {

  349.     &,

  350.     &:hover {

  351.       cursor: not-allowed;

  352.       border-color: var(--gin-color-disabled-border);

  353.       background: var(--gin-color-disabled-bg);

  354.     }

  355.   }

  356. 

  357.   &:checked:disabled {

  358.     &,

  359.     &:hover {

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

  361.       box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);

  362.     }

  363.   }

  364. }

  365. 

  366. .form-boolean--type-checkbox[disabled] {

  367.   &,

  368.   &:hover {

  369.     cursor: not-allowed;

  370.     border-color: var(--gin-color-disabled-border);

  371.     background-color: var(--gin-color-disabled-bg);

  372. 

  373.     &:checked {

  374.       border-color: var(--gin-color-disabled-border);

  375.       background-color: var(--gin-color-disabled-bg);

  376.       box-shadow: none;

  377.     }

  378.   }

  379. }

  380. 

  381. .form-radios,

  382. .form-checkboxes {

  383.   .form-type--boolean {

  384.     margin-block: var(--gin-spacing-xs);

  385.   }

  386. }

  387. 

  388. .form-actions {

  389.   margin-block-end: 0;

  390. }

  391. 

  392. .form-edit .form-actions {

  393.   margin-block-end: 0;

  394.   padding: 0;

  395.   border: 0 none;

  396.   background-color: transparent;

  397. }

  398. 

  399. /* Fieldgroup */

  400. fieldset:not(.fieldgroup) {

  401.   padding-block-start: var(--gin-spacing-xs);

  402.   color: var(--gin-color-text-light);

  403.   border-color: var(--gin-border-color);

  404.   border-radius: var(--gin-border-m);

  405.   background: transparent;

  406.   box-shadow: none;

  407.   padding-inline: 0;

  408. 

  409.   > legend {

  410.     inset-block-start: 20px;

  411.   }

  412. 

  413.   > .fieldset-wrapper {

  414.     margin-block-start: 20px;

  415.   }

  416. 

  417.   &.error {

  418.     border: 2px solid var(--gin-color-danger);

  419.   }

  420. }

  421. 

  422. .fieldset__label,

  423. .fieldset__label--group,

  424. .form-item__label {

  425.   margin-block-start: 0;

  426.   margin-block-end: var(--gin-spacing-xs);

  427.   color: var(--gin-color-title);

  428.   font-size: var(--gin-font-size-s);

  429.   font-weight: var(--gin-font-weight-semibold);

  430. }

  431. 

  432. .form-item__label.has-error,

  433. .form-item__error-message {

  434.   color: var(--gin-color-danger);

  435. }

  436. 

  437. .form-item__description,

  438. .fieldset__description,

  439. .filter-guidelines__item {

  440.   max-width: var(--gin-max-line-length);

  441.   color: var(--gin-color-text-light);

  442. }

  443. 

  444. .form-item__label.form-required::after,

  445. .fieldset__label.form-required::after,

  446. .form-required > .fieldset__label::after,

  447. .horizontal-tab-button .form-required::after,

  448. .vertical-tabs__menu-link .form-required::after {

  449.   content: "*";

  450.   vertical-align: text-top;

  451.   color: var(--gin-color-danger);

  452.   background: none;

  453.   line-height: 1;

  454.   margin-inline: 0.15em;

  455. }

  456. 

  457. .gin-details.error {

  458.   border: 2px solid var(--gin-color-danger);

  459. }

  460. 

  461. .gin-details__summary:not(.form-required) {

  462.   .required-mark {

  463.     display: none;

  464.   }

  465. }

  466. 

  467. .form-item__warning {

  468.   display: inline-block;

  469.   margin-block-start: var(--gin-spacing-xs);

  470. }

  471. 

  472. html.js .form-autocomplete {

  473.   padding-inline-end: 36px;

  474. }

  475. 

  476. .entity-form-display-form {

  477.   > .form-actions {

  478.     margin-block: 0;

  479.   }

  480. }

  481. 

  482. .required-mark {

  483.   &::after {

  484.     background: var(--gin-color-danger);

  485.     mask-image: var(--admin-icon-asterisk);

  486.     mask-position: center center;

  487.     mask-size: 100% 100%;

  488.   }

  489. }

  490. 

  491. .form-wrapper,

  492. .form-composite {

  493.   .form-item__label {

  494.     position: relative;

  495.   }

  496. }

  497. 

  498. .field--type-text-with-summary,

  499. .field--widget-text-textarea {

  500.   .form-item {

  501.     margin-block-end: 0;

  502.   }

  503. 

  504.   .filter-wrapper {

  505.     border: 0 none;

  506.     padding-inline: 0;

  507.   }

  508. }

  509. 

  510. .claro-autocomplete {

  511.   width: calc(100% - var(--gin-spacing-m));

  512. 

  513.   .form-autocomplete {

  514.     width: 100%;

  515.   }

  516. }

  517. 

  518. .no-touchevents .form-element--type-select.form-element--extrasmall {

  519.   min-height: 1.75rem;

  520.   font-size: var(--gin-font-size-s);

  521.   line-height: 1.5;

  522. }

  523. 

  524. /* Special case, form starts with a form item, remove margin-block-start. */

  525. #block-gin-content > form > .form-item:first-of-type {

  526.   margin-block-start: 0;

  527. }

  528. 

  529. .image-style-new {

  530.   .form-item {

  531.     margin-inline-end: var(--gin-spacing-xxs);

  532.   }

  533. }

  534. 

  535. tr .form-item {

  536.   margin-block: 0;

  537. }

  538. 

  539. .container-inline .form-item {

  540.   margin-block: var(--gin-spacing-density-s);

  541. }

  542. 

  543. .field-plugin-settings-edit-form {

  544.   margin-block-start: var(--gin-spacing-s);

  545. 

  546.   .form-item {

  547.     margin-block: var(--gin-spacing-m);

  548.   }

  549. 

  550.   .form-boolean-group .form-item {

  551.     margin-block: var(--gin-spacing-xs);

  552.   }

  553. }

  554. 

  555. /* Length indicator */

  556. .length-indicator {

  557.   margin-block-end: var(--gin-spacing-l);

  558. }

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