gin-views.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/migration/css/base/gin-views.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
.views-exposed-form.views-exposed-form {
  padding-block-start: var(--gin-spacing-xs);

  .form-element--type-select {
    max-width: 15rem;
  }

  .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 (min-width: 61em) {
    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: 1.25rem;
    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: 2.25rem;
    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: 0.875rem;
    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.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. .views-exposed-form.views-exposed-form {

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

  9. 

  10.   .form-element--type-select {

  11.     max-width: 15rem;

  12.   }

  13. 

  14.   .form-type--boolean .form-boolean {

  15.     margin-inline-start: 0;

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

  17.   }

  18. 

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

  20.   .form-type--boolean.form-type--checkbox {

  21.     margin-block-start: auto;

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

  23. 

  24.     .form-item__label {

  25.       margin-block-end: 0;

  26.     }

  27.   }

  28. 

  29.   .fieldset--group {

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

  31.   }

  32. 

  33.   /* Exposed filter with fieldgroup */

  34.   fieldset {

  35.     margin-block-end: 0.4rem;

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

  37. 

  38.     > .fieldset__legend > .fieldset__label {

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

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

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

  42.     }

  43. 

  44.     .fieldset__wrapper {

  45.       display: flex;

  46.       margin: 0;

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

  48.     }

  49. 

  50.     .form-item {

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

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

  53.     }

  54.   }

  55. }

  56. .views-exposed-form.views-exposed-form.views-exposed-form--preview {

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

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

  59.   background: none;

  60. }

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

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

  63. }

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

  65. .views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {

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

  67.   align-self: flex-end;

  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 (min-width: 61em) {

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

  83.   }

  84. }

  85. /* Preview form */

  86. .view-preview-form__title {

  87.   padding: 0;

  88.   border-block-end: 0 none;

  89.   background-color: transparent;

  90. }

  91. .view-preview-form {

  92.   .preview-section {

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

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

  95.   }

  96. 

  97.   .view-filters .preview-section {

  98.     display: flex;

  99.     flex-wrap: wrap;

  100.   }

  101. 

  102.   .form-actions {

  103.     align-items: flex-end;

  104.   }

  105. 

  106.   .form-item--live-preview {

  107.     position: static !important;

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

  109.   }

  110. 

  111.   .arguments-preview {

  112.     margin-inline-start: 0;

  113.   }

  114. }

  115. .views-live-preview {

  116.   padding: 0;

  117. 

  118.   .section-title {

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

  120.   }

  121. 

  122.   .gin-layer-wrapper {

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

  124.   }

  125. }

  126. .views-displays {

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

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

  129. }

  130. .views-admin {

  131.   .icon.add {

  132.     background: none;

  133. 

  134.     &::before {

  135.       content: "+";

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

  137.       line-height: 0.1;

  138.     }

  139.   }

  140. }

  141. .views-display-top {

  142.   border: 0 none;

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

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

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

  146. 

  147.   .dropbutton-wrapper {

  148.     inset-block-start: 1.25rem;

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

  150.   }

  151. }

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

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

  154.   margin-block: 0;

  155. }

  156. #edit-displays {

  157.   .views-display-top {

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

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

  160.   }

  161. }

  162. .edit-display-settings {

  163.   margin: 0;

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

  165. }

  166. .views-tabs.views-tabs {

  167.   a {

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

  169. 

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

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

  172. 

  173.       &::before {

  174.         display: inline-block;

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

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

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

  178.         content: "";

  179.         background-color: currentColor;

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

  181.         mask-repeat: no-repeat;

  182.         mask-position: center left;

  183.         mask-size: contain;

  184. 

  185.         &:dir(rtl) {

  186.           mask-position: center right;

  187.         }

  188.       }

  189.     }

  190.   }

  191. 

  192.   .add a,

  193.   li a {

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

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

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

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

  198.     background: transparent;

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

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

  201. 

  202.     &::before {

  203.       display: none !important;

  204.     }

  205. 

  206.     .icon.add {

  207.       display: block;

  208.     }

  209.   }

  210. 

  211.   .add a:hover,

  212.   .add a:focus,

  213.   li a:hover,

  214.   li a:focus,

  215.   li.is-active a,

  216.   li.is-active a.is-active {

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

  218.     border-color: transparent;

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

  220.   }

  221. 

  222.   .add a:focus,

  223.   li a:focus {

  224.     outline: none;

  225.     box-shadow:

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

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

  228.   }

  229. 

  230.   .add {

  231.     &.open {

  232.       a {

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

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

  235. 

  236.         &:hover,

  237.         &:focus,

  238.         &:active {

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

  240.         }

  241.       }

  242.     }

  243.   }

  244. 

  245.   .action-list {

  246.     inset-block-start: 2.25rem;

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

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

  249. 

  250.     li {

  251.       border: none;

  252.       background-color: transparent;

  253. 

  254.       input.button {

  255.         width: 100%;

  256.         text-align: start;

  257.         border: none !important;

  258.         box-shadow: none;

  259.         line-height: 1.2;

  260.       }

  261. 

  262.       &:hover,

  263.       &:focus,

  264.       &:active {

  265.         &,

  266.         input.button {

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

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

  269.         }

  270.       }

  271.     }

  272.   }

  273. }

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

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

  276.   padding: 0;

  277. }

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

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

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

  281.     text-transform: none;

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

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

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

  285.   }

  286. 

  287.   .views-display-setting,

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

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

  290.   }

  291. 

  292.   .views-display-setting {

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

  294.   }

  295. 

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

  297.     background-color: transparent;

  298.   }

  299. 

  300.   .dropbutton-wrapper {

  301.     inset-block-start: 0.875rem;

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

  303.   }

  304. }

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

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

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

  308.   padding-inline: 0;

  309. 

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

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

  312.   }

  313. 

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

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

  316.   }

  317. }

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

  319.   margin: 0;

  320. }

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

  322.   margin-block-end: 0;

  323.   padding-block-start: 0;

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

  325. }

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

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

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

  329.   }

  330. }

  331. .views-query-info table tr {

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

  333. 

  334.   td {

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

  336.   }

  337. }

  338. .system-modules,

  339. .locale-translation-status-form {

  340.   tr.even,

  341.   tr.odd {

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

  343.     border-block-end: none;

  344.     background: none;

  345.   }

  346. }

  347. .system-modules td {

  348.   height: auto;

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

  350. 

  351.   details summary {

  352.     background-color: transparent;

  353.   }

  354. }

  355. .views-display-column,

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

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

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

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

  360.   box-shadow: none;

  361. }

  362. .views-ui-dialog {

  363.   .form--inline {

  364.     padding-block-start: 0;

  365.   }

  366. 

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

  368.     border-block-end: 0 none;

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

  370.   }

  371. 

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

  373.     display: inline-block;

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

  375.   }

  376. }

  377. a.views-field-excluded {

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

  379. }

  380. .views-filterable-options {

  381.   border-block-start: none;

  382. }

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

  384.   margin-block-start: 0;

  385. }

  386. .views-display-columns {

  387.   .details-wrapper {

  388.     margin: 0;

  389.   }

  390. }

  391. .machine-name-label {

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

  393. }

  394. .machine-name-value {

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

  396. }

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

  398.   margin-block-end: 0;

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

  400. }

  401. .view-header {

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

  403. }

  404. /* Disabled */

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

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

  407.   background-color: transparent;

  408. }

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

  410.   opacity: 0.75;

  411. }

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