layers.css

Same filename and directory in other branches
  1. main core/themes/default_admin/css/components/layers.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @file
 * These are random styles that are applicable throughout the entire theme.
 *
 * @todo Refactor this file out. This file was imported from Gin.
 */

/* cspell:ignore imageapi */

.gin-layer-wrapper {
  padding: var(--gin-spacing-s);

  & + .gin-layer-wrapper {
    margin-block-start: var(--gin-spacing-l);
  }

  & + h2,
  & + h3 {
    margin-block-start: var(--gin-spacing-xl);
  }

  .responsive-enabled {
    margin-block-start: 0;
  }

  @media (min-width: 61em) {
    padding: var(--gin-spacing-l);
  }
}

.gin-layer-wrapper,
.gin-layer-wrapper-shadow,
.block-system > form,
.views-edit-view,
.views-preview-wrapper,
#views-entity-list,
.admin.my-workbench,
.media-library-views-form,
.user-admin-permissions,
.field-config-form {
  margin-block-start: 0;
  border-radius: var(--gin-border-l);
  box-shadow: var(--gin-shadow-l1);

  .gin--dark-mode & {
    box-shadow: 0 6px 16px var(--gin-border-color-layer);
  }

  .gin--high-contrast-mode & {
    box-shadow: none;
  }
}

.block-system > form .gin-layer-wrapper {
  padding: 0;
  padding-block-end: 1px; /* fix overflow issue in FF */
  border: 0 none;
  box-shadow: none;
}

.block-system > form .dataset-table-wrapper {
  padding: 0;
  border: 0 none;
  box-shadow: none;
}

.gin-layer-wrapper,
.block-system-main-block > form,
.views-edit-view,
.views-preview-wrapper,
#views-entity-list,
.admin.my-workbench,
.media-library-views-form,
.user-admin-permissions,
.field-config-form {
  box-sizing: border-box;
  width: 100%;
  padding: var(--gin-spacing-s);
  border: 1px solid var(--gin-border-color-layer);
  background: var(--gin-bg-layer);

  /* Remove extra spacing on top of form. */
  > .form-wrapper:first-of-type .form-item,
  .layout-region-node-main > .form-wrapper:first-of-type .form-item {
    margin-block-start: 0;
  }

  @media (min-width: 48em) {
    padding: var(--gin-spacing-l);
  }
}

.field-config-form > .form-item:first-child {
  margin-block-start: 0;
}

#system-clear-cache + #system-performance-settings,
.gin-layer-wrapper + .imageapi-optimize-default-pipeline {
  margin-block-start: var(--gin-spacing-l);
}

/* Unpublished node */

.node--unpublished {
  background-color: var(--gin-bg-unpublished);
}

/* Has table filter */

.block-system-main-block > form:has(.table-filter) {
  .table-filter {
    margin-block-end: var(--gin-spacing-l);
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;

    .form-type--search {
      margin-block: 0;
    }

    .winnow-input,
    .table-filter-text {
      width: 100%;
    }

    .table-filter-text {
      margin-block-start: 0;
      padding: var(--gin-spacing-m);
    }
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/css/components/layers.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.  * These are random styles that are applicable throughout the entire theme.

  11.  *

  12.  * @todo Refactor this file out. This file was imported from Gin.

  13.  */

  14. 

  15. /* cspell:ignore imageapi */

  16. 

  17. .gin-layer-wrapper {

  18.   padding: var(--gin-spacing-s);

  19. 

  20.   & + .gin-layer-wrapper {

  21.     margin-block-start: var(--gin-spacing-l);

  22.   }

  23. 

  24.   & + h2,

  25.   & + h3 {

  26.     margin-block-start: var(--gin-spacing-xl);

  27.   }

  28. 

  29.   .responsive-enabled {

  30.     margin-block-start: 0;

  31.   }

  32. 

  33.   @media (min-width: 61em) {

  34.     padding: var(--gin-spacing-l);

  35.   }

  36. }

  37. 

  38. .gin-layer-wrapper,

  39. .gin-layer-wrapper-shadow,

  40. .block-system > form,

  41. .views-edit-view,

  42. .views-preview-wrapper,

  43. #views-entity-list,

  44. .admin.my-workbench,

  45. .media-library-views-form,

  46. .user-admin-permissions,

  47. .field-config-form {

  48.   margin-block-start: 0;

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

  50.   box-shadow: var(--gin-shadow-l1);

  51. 

  52.   .gin--dark-mode 
  53. 

  54.   .gin--high-contrast-mode 
  55. }

  56. 

  57. .block-system > form .gin-layer-wrapper {

  58.   padding: 0;

  59.   padding-block-end: 1px; /* fix overflow issue in FF */

  60.   border: 0 none;

  61.   box-shadow: none;

  62. }

  63. 

  64. .block-system > form .dataset-table-wrapper {

  65.   padding: 0;

  66.   border: 0 none;

  67.   box-shadow: none;

  68. }

  69. 

  70. .gin-layer-wrapper,

  71. .block-system-main-block > form,

  72. .views-edit-view,

  73. .views-preview-wrapper,

  74. #views-entity-list,

  75. .admin.my-workbench,

  76. .media-library-views-form,

  77. .user-admin-permissions,

  78. .field-config-form {

  79.   box-sizing: border-box;

  80.   width: 100%;

  81.   padding: var(--gin-spacing-s);

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

  83.   background: var(--gin-bg-layer);

  84. 

  85.   /* Remove extra spacing on top of form. */

  86.   > .form-wrapper:first-of-type .form-item,

  87.   .layout-region-node-main > .form-wrapper:first-of-type .form-item {

  88.     margin-block-start: 0;

  89.   }

  90. 

  91.   @media (min-width: 48em) {

  92.     padding: var(--gin-spacing-l);

  93.   }

  94. }

  95. 

  96. .field-config-form > .form-item:first-child {

  97.   margin-block-start: 0;

  98. }

  99. 

  100. #system-clear-cache + #system-performance-settings,

  101. .gin-layer-wrapper + .imageapi-optimize-default-pipeline {

  102.   margin-block-start: var(--gin-spacing-l);

  103. }

  104. 

  105. /* Unpublished node */

  106. 

  107. .node--unpublished {

  108.   background-color: var(--gin-bg-unpublished);

  109. }

  110. 

  111. /* Has table filter */

  112. 

  113. .block-system-main-block > form:has(.table-filter) {

  114.   .table-filter {

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

  116.     padding: 0;

  117.     border: none;

  118.     background: none;

  119.     box-shadow: none;

  120. 

  121.     .form-type--search {

  122.       margin-block: 0;

  123.     }

  124. 

  125.     .winnow-input,

  126.     .table-filter-text {

  127.       width: 100%;

  128.     }

  129. 

  130.     .table-filter-text {

  131.       margin-block-start: 0;

  132.       padding: var(--gin-spacing-m);

  133.     }

  134.   }

  135. }

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