gin-field-ui.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

.draggable.field-plugin-settings-editing,
.draggable.drag-previous.field-plugin-settings-editing {
  background: var(--gin-bg-app);
}

.field-plugin-summary {
  color: var(--gin-color-text-light);
  font-size: var(--gin-font-size-xs);
}

/* Need to increase specificity */

.field-option.field-option {
  --thumb-size: 5rem;

  align-items: baseline;
  padding: 0;
  border: 1px solid var(--gin-border-color);
  border-radius: var(--gin-border-m);
  background-color: transparent;
  gap: var(--gin-spacing-m);

  .field-option__thumb {
    border-radius: 0;
    background-color: var(--gin-bg-layer2);
    border-start-start-radius: var(--gin-border-s);
    border-end-start-radius: var(--gin-border-s);

    .add-field-container & {
      background-color: var(--gin-bg-layer2);
    }
  }

  .field-option__icon {
    filter: brightness(0);

    .gin--dark-mode & {
      filter: brightness(0) invert(1);
    }
  }

  .field-option__words {
    padding-block: var(--gin-spacing-s);

    .field-option__label {
      display: block;
      margin-block-end: var(--gin-spacing-xxs);
      font-weight: var(--gin-font-weight-semibold);
    }
  }

  .field-option__item {
    column-gap: 0;
    padding-block: var(--gin-spacing-s);

    .form-item__label {
      margin-block-end: var(--gin-spacing-xxs);
      font-weight: var(--gin-font-weight-semibold);
    }
  }

  .field-option__description {
    color: var(--gin-color-text-light);
    font-size: var(--gin-font-size-xs);
    line-height: 1.3;
  }

  .field-option-radio {
    all: unset !important;
  }

  &.selected,
  &:focus-within,
  &:has(.field-option-radio:checked) {
    background-color: var(--gin-bg-layer2);

    .field-option__thumb {
      background-color: var(--gin-color-primary);
    }

    .field-option__icon {
      filter: brightness(0) invert(1);

      .gin--dark-mode & {
        filter: brightness(0);
      }
    }
  }

  &:focus-within,
  &:focus-within:has(.field-option-radio:checked) {
    .field-option__thumb {
      background-color: var(--gin-color-primary-active);
    }
  }
}

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

  .item-list {
    margin-block-start: var(--gin-spacing-xs);
    color: var(--gin-color-text-light);
    font-size: var(--gin-font-size-xs);
  }

  &.selected,
  &:focus-within {
    background-color: var(--gin-bg-layer2);
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-field-ui.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. .draggable.field-plugin-settings-editing,

  9. .draggable.drag-previous.field-plugin-settings-editing {

  10.   background: var(--gin-bg-app);

  11. }

  12. 

  13. .field-plugin-summary {

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

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

  16. }

  17. 

  18. /* Need to increase specificity */

  19. 

  20. .field-option.field-option {

  21.   --thumb-size: 5rem;

  22. 

  23.   align-items: baseline;

  24.   padding: 0;

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

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

  27.   background-color: transparent;

  28.   gap: var(--gin-spacing-m);

  29. 

  30.   .field-option__thumb {

  31.     border-radius: 0;

  32.     background-color: var(--gin-bg-layer2);

  33.     border-start-start-radius: var(--gin-border-s);

  34.     border-end-start-radius: var(--gin-border-s);

  35. 

  36.     .add-field-container 
  37.   }

  38. 

  39.   .field-option__icon {

  40.     filter: brightness(0);

  41. 

  42.     .gin--dark-mode 
  43.   }

  44. 

  45.   .field-option__words {

  46.     padding-block: var(--gin-spacing-s);

  47. 

  48.     .field-option__label {

  49.       display: block;

  50.       margin-block-end: var(--gin-spacing-xxs);

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

  52.     }

  53.   }

  54. 

  55.   .field-option__item {

  56.     column-gap: 0;

  57.     padding-block: var(--gin-spacing-s);

  58. 

  59.     .form-item__label {

  60.       margin-block-end: var(--gin-spacing-xxs);

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

  62.     }

  63.   }

  64. 

  65.   .field-option__description {

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

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

  68.     line-height: 1.3;

  69.   }

  70. 

  71.   .field-option-radio {

  72.     all: unset !important;

  73.   }

  74. 

  75.   &.selected,

  76.   &:focus-within,

  77.   &:has(.field-option-radio:checked) {

  78.     background-color: var(--gin-bg-layer2);

  79. 

  80.     .field-option__thumb {

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

  82.     }

  83. 

  84.     .field-option__icon {

  85.       filter: brightness(0) invert(1);

  86. 

  87.       .gin--dark-mode 
  88.     }

  89.   }

  90. 

  91.   &:focus-within,

  92.   &:focus-within:has(.field-option-radio:checked) {

  93.     .field-option__thumb {

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

  95.     }

  96.   }

  97. }

  98. 

  99. .subfield-option {

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

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

  102. 

  103.   .item-list {

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

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

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

  107.   }

  108. 

  109.   &.selected,

  110.   &:focus-within {

  111.     background-color: var(--gin-bg-layer2);

  112.   }

  113. }

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