gin-layers.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-layers.pcss.css
/* cspell:ignore imageapi */
@import "media-queries.pcss.css";

.page-content {
  margin-block-start: 0;

  > .help,
  > .region-content,
  > .region-highlighted {
    @media (--admin-small) {
      margin-block-start: var(--gin-spacing-l);
    }
  }
}

.gin-layer-wrapper,
.gin-layer-wrapper-shadow,
.block-system > form,
.views-exposed-form.views-exposed-form,
.views-edit-view,
.views-preview-wrapper,
.modules-tabs,
#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;
  }
}

.gin-layer-wrapper,
.block-system-main-block > form,
.views-exposed-form.views-exposed-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/migration/css/base/gin-layers.pcss.css

View source 
  1. /* cspell:ignore imageapi */

  2. @import "media-queries.pcss.css";

  3. 

  4. .page-content {

  5.   margin-block-start: 0;

  6. 

  7.   > .help,

  8.   > .region-content,

  9.   > .region-highlighted {

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

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

  12.     }

  13.   }

  14. }

  15. 

  16. .gin-layer-wrapper,

  17. .gin-layer-wrapper-shadow,

  18. .block-system > form,

  19. .views-exposed-form.views-exposed-form,

  20. .views-edit-view,

  21. .views-preview-wrapper,

  22. .modules-tabs,

  23. #views-entity-list,

  24. .admin.my-workbench,

  25. .media-library-views-form,

  26. .user-admin-permissions,

  27. .field-config-form {

  28.   margin-block-start: 0;

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

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

  31. 

  32.   .gin--dark-mode 
  33. 

  34.   .gin--high-contrast-mode 
  35. }

  36. 

  37. .gin-layer-wrapper,

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

  39. .views-exposed-form.views-exposed-form,

  40. .views-edit-view,

  41. .views-preview-wrapper,

  42. #views-entity-list,

  43. .admin.my-workbench,

  44. .media-library-views-form,

  45. .user-admin-permissions,

  46. .field-config-form {

  47.   box-sizing: border-box;

  48.   width: 100%;

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

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

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

  52. 

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

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

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

  56.     margin-block-start: 0;

  57.   }

  58. 

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

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

  61.   }

  62. }

  63. 

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

  65.   margin-block-start: 0;

  66. }

  67. 

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

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

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

  71. }

  72. 

  73. /* Unpublished node */

  74. .node--unpublished {

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

  76. }

  77. 

  78. /* Has table filter */

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

  80.   .table-filter {

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

  82.     padding: 0;

  83.     border: none;

  84.     background: none;

  85.     box-shadow: none;

  86. 

  87.     .form-type--search {

  88.       margin-block: 0;

  89.     }

  90. 

  91.     .winnow-input,

  92.     .table-filter-text {

  93.       width: 100%;

  94.     }

  95. 

  96.     .table-filter-text {

  97.       margin-block-start: 0;

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

  99.     }

  100.   }

  101. }

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