gin-views.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-views.pcss.css
@import "media-queries.pcss.css";

.views-exposed-form.views-exposed-form {
  padding-block-start: var(--gin-spacing-xs);

  .form-element--type-select {
    max-width: 240px;
  }

  .form-type--boolean .form-boolean {
    margin-inline-start: 0;
    margin-inline-end: var(--gin-spacing-xs);
  }

  /* Single on/off checkbox (through Better Exposed Filters) */
  .form-type--boolean.form-type--checkbox {
    margin-block-start: auto;
    margin-block-end: var(--gin-spacing-s);

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

  .fieldset--group {
    margin-block-start: var(--gin-spacing-s);
  }

  /* Exposed filter with fieldgroup */
  fieldset {
    margin-block-end: 0.4rem;
    margin-inline-end: var(--gin-spacing-s);

    > .fieldset__legend > .fieldset__label {
      margin-block-end: var(--gin-spacing-xxs);
      padding: 0 var(--gin-spacing-xs);
      font-size: var(--gin-font-size-s);
    }

    .fieldset__wrapper {
      display: flex;
      margin: 0;
      margin-inline-start: var(--gin-spacing-xs);
    }

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

.views-exposed-form.views-exposed-form.views-exposed-form--preview {
  border-color: var(--gin-border-color);
  border-radius: var(--gin-border-l);
  background: none;
}

.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
  margin-inline-end: var(--gin-spacing-xs);
}

.views-exposed-form .form-item--no-label,
.views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {
  margin-block: var(--gin-spacing-s) 0;
  align-self: flex-end;
}

.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);
  }

  @media (--admin-medium) {
    padding: var(--gin-spacing-l);
  }
}

/* Preview form */
.view-preview-form__title {
  padding: 0;
  border-block-end: 0 none;
  background-color: transparent;
}

.view-preview-form {
  .preview-section {
    padding: var(--gin-spacing-m);
    border: 1px dashed var(--gin-border-color-layer2);
  }

  .view-filters .preview-section {
    display: flex;
    flex-wrap: wrap;
  }

  .form-actions {
    align-items: flex-end;
  }

  .form-item--live-preview {
    position: static !important;
    margin-block-start: var(--gin-spacing-l);
  }

  .arguments-preview {
    margin-inline-start: 0;
  }
}

.views-live-preview {
  padding: 0;

  .section-title {
    color: var(--gin-color-text);
  }

  .gin-layer-wrapper {
    border-color: var(--gin-border-color);
  }
}

.views-displays {
  border: 1px solid var(--gin-border-color);
  border-radius: var(--gin-border-l);
}

.views-admin {
  .icon.add {
    background: none;

    &::before {
      content: "+";
      font-size: var(--gin-font-size);
      line-height: 0.1;
    }
  }
}

.views-display-top {
  border: 0 none;
  border-radius: var(--gin-border-l);
  background-color: var(--gin-bg-header);
  padding-block: var(--gin-spacing-m) var(--gin-spacing-xs);

  .dropbutton-wrapper {
    inset-block-start: 20px;
    inset-inline-end: var(--gin-spacing-l);
  }
}

/* #3186729: Drupal 9.1 fix */
.views-display-top__extra-actions-wrapper {
  margin-block: 0;
}

#edit-displays {
  .views-display-top {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}

.edit-display-settings {
  margin: 0;
  padding: var(--gin-spacing-l);
}

.views-tabs.views-tabs {
  a {
    padding: var(--gin-spacing-xs) var(--gin-spacing-m);

    &.views-display-disabled-link {
      padding-inline-start: var(--gin-spacing-l);

      &::before {
        display: inline-block;
        width: var(--gin-spacing-l);
        height: var(--gin-spacing-s);
        margin-inline-start: calc(var(--gin-spacing-m) * -1);
        content: "";
        background-color: currentColor;
        mask-image: var(--admin-icon-hide);
        mask-repeat: no-repeat;
        mask-position: center left;
        mask-size: contain;

        &:dir(rtl) {
          mask-position: center right;
        }
      }
    }
  }

  .add a,
  li a {
    padding: var(--gin-spacing-xs) var(--gin-spacing-m);
    color: var(--gin-color-primary);
    border: 2px solid var(--gin-color-primary);
    border-radius: var(--gin-border-xs);
    background: transparent;
    font-size: var(--gin-font-size-xs);
    font-weight: var(--gin-font-weight-heavy);

    &::before {
      display: none !important;
    }

    .icon.add {
      display: block;
    }
  }

  .add a:hover,
  .add a:focus,
  li a:hover,
  li a:focus,
  li.is-active a,
  li.is-active a.is-active {
    color: var(--gin-bg-app);
    border-color: transparent;
    background: var(--gin-color-primary);
  }

  .add a:focus,
  li a:focus {
    outline: none;
    box-shadow:
      0 0 0 1px var(--gin-color-focus-border),
      0 0 0 4px var(--gin-color-focus);
  }

  .add {
    &.open {
      a {
        color: var(--gin-color-primary);
        background: var(--gin-bg-layer2);

        &:hover,
        &:focus,
        &:active {
          color: var(--gin-color-primary);
        }
      }
    }
  }

  .action-list {
    inset-block-start: 36px;
    background: var(--gin-bg-layer3);
    box-shadow: 0 1px 2px var(--gin-shadow-button);

    li {
      border: none;
      background-color: transparent;

      input.button {
        width: 100%;
        text-align: start;
        border: none !important;
        box-shadow: none;
        line-height: 1.2;
      }

      &:hover,
      &:focus,
      &:active {
        &,
        input.button {
          color: var(--gin-color-button-text);
          background: var(--gin-color-primary);
        }
      }
    }
  }
}

/* #3186729: Drupal 9.1 fix */
.views-ui-display-tab-bucket__header {
  padding: 0;
}

.views-ui-display-tab-bucket {
  .views-ui-display-tab-bucket__title {
    padding: var(--gin-spacing-m);
    text-transform: none;
    color: var(--gin-color-title);
    font-size: var(--gin-font-size-xl);
    font-weight: var(--gin-font-weight-semibold);
  }

  .views-display-setting,
  .views-ui-display-tab-bucket > .views-display-setting {
    padding: var(--gin-spacing-xs) var(--gin-spacing-m);
  }

  .views-display-setting {
    color: var(--gin-color-text);
  }

  .views-display-setting:nth-of-type(even) {
    background-color: transparent;
  }

  .dropbutton-wrapper {
    inset-block-start: 14px;
    inset-inline-end: var(--gin-spacing-m);
  }
}

/* #3186729: Drupal 9.1 fix */
.views-ui-display-tab-bucket__header {
  padding-block: var(--gin-spacing-m) var(--gin-spacing-xs);
  padding-inline: 0;

  .views-ui-display-tab-bucket__title {
    padding: 0 var(--gin-spacing-m);
  }

  .views-ui-display-tab-bucket__actions {
    margin-inline-end: var(--gin-spacing-m);
  }
}

.views-ui-display-tab-bucket.pager {
  margin: 0;
}

.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
  margin-block-end: 0;
  padding-block-start: 0;
  border-block-end-color: var(--gin-border-color);
}

.views-ui-display-tab-actions {
  .views-ui-display-tab-setting {
    padding: var(--gin-spacing-m);
  }
}

.views-query-info table tr {
  background-color: var(--gin-bg-layer2);

  td {
    color: var(--gin-color-text);
  }
}

.system-modules,
.locale-translation-status-form {
  tr.even,
  tr.odd {
    border-block-start: 1px solid var(--gin-border-color);
    border-block-end: none;
    background: none;
  }
}

.system-modules td {
  height: auto;
  padding: var(--gin-spacing-m);

  details summary {
    background-color: transparent;
  }
}

.views-display-column,
.edit-display-settings-top.views-ui-display-tab-bucket {
  margin-block-end: var(--gin-spacing-m);
  border-color: var(--gin-border-color);
  border-radius: var(--gin-border-m);
  box-shadow: none;
}

.views-ui-dialog {
  .form--inline {
    padding-block-start: 0;
  }

  .views-override:not(:empty) {
    border-block-end: 0 none;
    background-color: var(--gin-bg-app);
  }

  .form-item--fields-area-text-custom-removed {
    display: inline-block;
    margin-inline-end: var(--gin-spacing-xxs);
  }
}

a.views-field-excluded {
  color: var(--gin-color-disabled);
}

.views-filterable-options {
  border-block-start: none;
}

.view-block-content .views-table {
  margin-block-start: 0;
}

.views-display-columns {
  .details-wrapper {
    margin: 0;
  }
}

.machine-name-label {
  color: var(--gin-color-text);
}

.machine-name-value {
  color: var(--gin-color-title);
}

.views-exposed-form .form-datetime-wrapper {
  margin-block-end: 0;
  margin-inline-end: var(--gin-spacing-xs);
}

.view-header {
  margin-block-end: var(--gin-spacing-l);
}

/* Disabled */
.views-edit-view.disabled .views-displays,
.views-edit-view.disabled .views-display-column {
  background-color: transparent;
}

.views-edit-view.disabled .views-display-column {
  opacity: 0.75;
}

File

View on git.drupalcode.org

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

View source 
  1. @import "media-queries.pcss.css";

  2. 

  3. .views-exposed-form.views-exposed-form {

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

  5. 

  6.   .form-element--type-select {

  7.     max-width: 240px;

  8.   }

  9. 

  10.   .form-type--boolean .form-boolean {

  11.     margin-inline-start: 0;

  12.     margin-inline-end: var(--gin-spacing-xs);

  13.   }

  14. 

  15.   /* Single on/off checkbox (through Better Exposed Filters) */

  16.   .form-type--boolean.form-type--checkbox {

  17.     margin-block-start: auto;

  18.     margin-block-end: var(--gin-spacing-s);

  19. 

  20.     .form-item__label {

  21.       margin-block-end: 0;

  22.     }

  23.   }

  24. 

  25.   .fieldset--group {

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

  27.   }

  28. 

  29.   /* Exposed filter with fieldgroup */

  30.   fieldset {

  31.     margin-block-end: 0.4rem;

  32.     margin-inline-end: var(--gin-spacing-s);

  33. 

  34.     > .fieldset__legend > .fieldset__label {

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

  36.       padding: 0 var(--gin-spacing-xs);

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

  38.     }

  39. 

  40.     .fieldset__wrapper {

  41.       display: flex;

  42.       margin: 0;

  43.       margin-inline-start: var(--gin-spacing-xs);

  44.     }

  45. 

  46.     .form-item {

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

  48.       margin-inline: 0 var(--gin-spacing-xs);

  49.     }

  50.   }

  51. }

  52. 

  53. .views-exposed-form.views-exposed-form.views-exposed-form--preview {

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

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

  56.   background: none;

  57. }

  58. 

  59. .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {

  60.   margin-inline-end: var(--gin-spacing-xs);

  61. }

  62. 

  63. .views-exposed-form .form-item--no-label,

  64. .views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {

  65.   margin-block: var(--gin-spacing-s) 0;

  66.   align-self: flex-end;

  67. }

  68. 

  69. .gin-layer-wrapper {

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

  71. 

  72.   & + .gin-layer-wrapper {

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

  74.   }

  75. 

  76.   & + h2,

  77.   & + h3 {

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

  79.   }

  80. 

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

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

  83.   }

  84. }

  85. 

  86. /* Preview form */

  87. .view-preview-form__title {

  88.   padding: 0;

  89.   border-block-end: 0 none;

  90.   background-color: transparent;

  91. }

  92. 

  93. .view-preview-form {

  94.   .preview-section {

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

  96.     border: 1px dashed var(--gin-border-color-layer2);

  97.   }

  98. 

  99.   .view-filters .preview-section {

  100.     display: flex;

  101.     flex-wrap: wrap;

  102.   }

  103. 

  104.   .form-actions {

  105.     align-items: flex-end;

  106.   }

  107. 

  108.   .form-item--live-preview {

  109.     position: static !important;

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

  111.   }

  112. 

  113.   .arguments-preview {

  114.     margin-inline-start: 0;

  115.   }

  116. }

  117. 

  118. .views-live-preview {

  119.   padding: 0;

  120. 

  121.   .section-title {

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

  123.   }

  124. 

  125.   .gin-layer-wrapper {

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

  127.   }

  128. }

  129. 

  130. .views-displays {

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

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

  133. }

  134. 

  135. .views-admin {

  136.   .icon.add {

  137.     background: none;

  138. 

  139.     &::before {

  140.       content: "+";

  141.       font-size: var(--gin-font-size);

  142.       line-height: 0.1;

  143.     }

  144.   }

  145. }

  146. 

  147. .views-display-top {

  148.   border: 0 none;

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

  150.   background-color: var(--gin-bg-header);

  151.   padding-block: var(--gin-spacing-m) var(--gin-spacing-xs);

  152. 

  153.   .dropbutton-wrapper {

  154.     inset-block-start: 20px;

  155.     inset-inline-end: var(--gin-spacing-l);

  156.   }

  157. }

  158. 

  159. /* #3186729: Drupal 9.1 fix */

  160. .views-display-top__extra-actions-wrapper {

  161.   margin-block: 0;

  162. }

  163. 

  164. #edit-displays {

  165.   .views-display-top {

  166.     border-end-start-radius: 0;

  167.     border-end-end-radius: 0;

  168.   }

  169. }

  170. 

  171. .edit-display-settings {

  172.   margin: 0;

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

  174. }

  175. 

  176. .views-tabs.views-tabs {

  177.   a {

  178.     padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  179. 

  180.     &.views-display-disabled-link {

  181.       padding-inline-start: var(--gin-spacing-l);

  182. 

  183.       &::before {

  184.         display: inline-block;

  185.         width: var(--gin-spacing-l);

  186.         height: var(--gin-spacing-s);

  187.         margin-inline-start: calc(var(--gin-spacing-m) * -1);

  188.         content: "";

  189.         background-color: currentColor;

  190.         mask-image: var(--admin-icon-hide);

  191.         mask-repeat: no-repeat;

  192.         mask-position: center left;

  193.         mask-size: contain;

  194. 

  195.         &:dir(rtl) {

  196.           mask-position: center right;

  197.         }

  198.       }

  199.     }

  200.   }

  201. 

  202.   .add a,

  203.   li a {

  204.     padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  205.     color: var(--gin-color-primary);

  206.     border: 2px solid var(--gin-color-primary);

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

  208.     background: transparent;

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

  210.     font-weight: var(--gin-font-weight-heavy);

  211. 

  212.     &::before {

  213.       display: none !important;

  214.     }

  215. 

  216.     .icon.add {

  217.       display: block;

  218.     }

  219.   }

  220. 

  221.   .add a:hover,

  222.   .add a:focus,

  223.   li a:hover,

  224.   li a:focus,

  225.   li.is-active a,

  226.   li.is-active a.is-active {

  227.     color: var(--gin-bg-app);

  228.     border-color: transparent;

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

  230.   }

  231. 

  232.   .add a:focus,

  233.   li a:focus {

  234.     outline: none;

  235.     box-shadow:

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

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

  238.   }

  239. 

  240.   .add {

  241.     &.open {

  242.       a {

  243.         color: var(--gin-color-primary);

  244.         background: var(--gin-bg-layer2);

  245. 

  246.         &:hover,

  247.         &:focus,

  248.         &:active {

  249.           color: var(--gin-color-primary);

  250.         }

  251.       }

  252.     }

  253.   }

  254. 

  255.   .action-list {

  256.     inset-block-start: 36px;

  257.     background: var(--gin-bg-layer3);

  258.     box-shadow: 0 1px 2px var(--gin-shadow-button);

  259. 

  260.     li {

  261.       border: none;

  262.       background-color: transparent;

  263. 

  264.       input.button {

  265.         width: 100%;

  266.         text-align: start;

  267.         border: none !important;

  268.         box-shadow: none;

  269.         line-height: 1.2;

  270.       }

  271. 

  272.       &:hover,

  273.       &:focus,

  274.       &:active {

  275.         &,

  276.         input.button {

  277.           color: var(--gin-color-button-text);

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

  279.         }

  280.       }

  281.     }

  282.   }

  283. }

  284. 

  285. /* #3186729: Drupal 9.1 fix */

  286. .views-ui-display-tab-bucket__header {

  287.   padding: 0;

  288. }

  289. 

  290. .views-ui-display-tab-bucket {

  291.   .views-ui-display-tab-bucket__title {

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

  293.     text-transform: none;

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

  295.     font-size: var(--gin-font-size-xl);

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

  297.   }

  298. 

  299.   .views-display-setting,

  300.   .views-ui-display-tab-bucket > .views-display-setting {

  301.     padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  302.   }

  303. 

  304.   .views-display-setting {

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

  306.   }

  307. 

  308.   .views-display-setting:nth-of-type(even) {

  309.     background-color: transparent;

  310.   }

  311. 

  312.   .dropbutton-wrapper {

  313.     inset-block-start: 14px;

  314.     inset-inline-end: var(--gin-spacing-m);

  315.   }

  316. }

  317. 

  318. /* #3186729: Drupal 9.1 fix */

  319. .views-ui-display-tab-bucket__header {

  320.   padding-block: var(--gin-spacing-m) var(--gin-spacing-xs);

  321.   padding-inline: 0;

  322. 

  323.   .views-ui-display-tab-bucket__title {

  324.     padding: 0 var(--gin-spacing-m);

  325.   }

  326. 

  327.   .views-ui-display-tab-bucket__actions {

  328.     margin-inline-end: var(--gin-spacing-m);

  329.   }

  330. }

  331. 

  332. .views-ui-display-tab-bucket.pager {

  333.   margin: 0;

  334. }

  335. 

  336. .views-ui-display-tab-bucket.views-ui-display-tab-bucket {

  337.   margin-block-end: 0;

  338.   padding-block-start: 0;

  339.   border-block-end-color: var(--gin-border-color);

  340. }

  341. 

  342. .views-ui-display-tab-actions {

  343.   .views-ui-display-tab-setting {

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

  345.   }

  346. }

  347. 

  348. .views-query-info table tr {

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

  350. 

  351.   td {

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

  353.   }

  354. }

  355. 

  356. .system-modules,

  357. .locale-translation-status-form {

  358.   tr.even,

  359.   tr.odd {

  360.     border-block-start: 1px solid var(--gin-border-color);

  361.     border-block-end: none;

  362.     background: none;

  363.   }

  364. }

  365. 

  366. .system-modules td {

  367.   height: auto;

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

  369. 

  370.   details summary {

  371.     background-color: transparent;

  372.   }

  373. }

  374. 

  375. .views-display-column,

  376. .edit-display-settings-top.views-ui-display-tab-bucket {

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

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

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

  380.   box-shadow: none;

  381. }

  382. 

  383. .views-ui-dialog {

  384.   .form--inline {

  385.     padding-block-start: 0;

  386.   }

  387. 

  388.   .views-override:not(:empty) {

  389.     border-block-end: 0 none;

  390.     background-color: var(--gin-bg-app);

  391.   }

  392. 

  393.   .form-item--fields-area-text-custom-removed {

  394.     display: inline-block;

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

  396.   }

  397. }

  398. 

  399. a.views-field-excluded {

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

  401. }

  402. 

  403. .views-filterable-options {

  404.   border-block-start: none;

  405. }

  406. 

  407. .view-block-content .views-table {

  408.   margin-block-start: 0;

  409. }

  410. 

  411. .views-display-columns {

  412.   .details-wrapper {

  413.     margin: 0;

  414.   }

  415. }

  416. 

  417. .machine-name-label {

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

  419. }

  420. 

  421. .machine-name-value {

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

  423. }

  424. 

  425. .views-exposed-form .form-datetime-wrapper {

  426.   margin-block-end: 0;

  427.   margin-inline-end: var(--gin-spacing-xs);

  428. }

  429. 

  430. .view-header {

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

  432. }

  433. 

  434. /* Disabled */

  435. .views-edit-view.disabled .views-displays,

  436. .views-edit-view.disabled .views-display-column {

  437.   background-color: transparent;

  438. }

  439. 

  440. .views-edit-view.disabled .views-display-column {

  441.   opacity: 0.75;

  442. }

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