layers.pcss.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/css/components/layers.pcss.css
/*
 * @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 */
@import "../base/media-queries.pcss.css";
.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 (--admin-medium) {
    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 (--admin-small) {
    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.pcss.css

View source 
  1. /*

  2.  * @file

  3.  * These are random styles that are applicable throughout the entire theme.

  4.  *

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

  6.  */

  7. 

  8. /* cspell:ignore imageapi */

  9. @import "../base/media-queries.pcss.css";

  10. .gin-layer-wrapper {

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

  12. 

  13.   & + .gin-layer-wrapper {

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

  15.   }

  16. 

  17.   & + h2,

  18.   & + h3 {

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

  20.   }

  21. 

  22.   .responsive-enabled {

  23.     margin-block-start: 0;

  24.   }

  25. 

  26.   @media (--admin-medium) {

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

  28.   }

  29. }

  30. 

  31. .gin-layer-wrapper,

  32. .gin-layer-wrapper-shadow,

  33. .block-system > form,

  34. .views-edit-view,

  35. .views-preview-wrapper,

  36. #views-entity-list,

  37. .admin.my-workbench,

  38. .media-library-views-form,

  39. .user-admin-permissions,

  40. .field-config-form {

  41.   margin-block-start: 0;

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

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

  44. 

  45.   .gin--dark-mode 
  46. 

  47.   .gin--high-contrast-mode 
  48. }

  49. 

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

  51.   padding: 0;

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

  53.   border: 0 none;

  54.   box-shadow: none;

  55. }

  56. 

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

  58.   padding: 0;

  59.   border: 0 none;

  60.   box-shadow: none;

  61. }

  62. 

  63. .gin-layer-wrapper,

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

  65. .views-edit-view,

  66. .views-preview-wrapper,

  67. #views-entity-list,

  68. .admin.my-workbench,

  69. .media-library-views-form,

  70. .user-admin-permissions,

  71. .field-config-form {

  72.   box-sizing: border-box;

  73.   width: 100%;

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

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

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

  77. 

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

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

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

  81.     margin-block-start: 0;

  82.   }

  83. 

  84.   @media (--admin-small) {

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

  86.   }

  87. }

  88. 

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

  90.   margin-block-start: 0;

  91. }

  92. 

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

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

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

  96. }

  97. 

  98. /* Unpublished node */

  99. .node--unpublished {

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

  101. }

  102. 

  103. /* Has table filter */

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

  105.   .table-filter {

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

  107.     padding: 0;

  108.     border: none;

  109.     background: none;

  110.     box-shadow: none;

  111. 

  112.     .form-type--search {

  113.       margin-block: 0;

  114.     }

  115. 

  116.     .winnow-input,

  117.     .table-filter-text {

  118.       width: 100%;

  119.     }

  120. 

  121.     .table-filter-text {

  122.       margin-block-start: 0;

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

  124.     }

  125.   }

  126. }

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