views-ui.css

Same filename in other branches
  1. 9 core/themes/seven/css/components/views-ui.css
  2. 9 core/themes/claro/css/components/views-ui.css
  3. 8.9.x core/themes/seven/css/components/views-ui.css
  4. 8.9.x core/themes/claro/css/components/views-ui.css
  5. 10 core/themes/claro/css/components/views-ui.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * Views styling
 */

/* @group Forms */

/**
 * Claro positions the summary absolutely, but does not have a way to ignore
 * details without a summary so we make one up.
 *
 * @todo Neither a fieldset without legend nor a details without summary is
 *   valid HTML markup in any way. Refactor Views UI to not produce such invalid
 *   markup.
 */

details.fieldset-no-legend {
  padding-top: 0;
}

/**
 * Being extra safe here and scoping this to the add view wizard form (where
 * a layout problem occurs for the Display format details if we don't fix its
 * padding), but it's probably safe to just let it apply everywhere.
 */

.views-ui-dialog input.form-submit,
.views-admin a.button,
.views-ui-dialog a.button {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
}

[dir="rtl"] .views-ui-dialog input.form-submit,
[dir="rtl"] .views-admin a.button,
[dir="rtl"] .views-ui-dialog a.button {
  margin-right: 1em;
  margin-left: 0;
}

[dir="rtl"] .views-ui-dialog input.form-submit:first-child,
[dir="rtl"] .views-admin a.button:first-child,
[dir="rtl"] .views-ui-dialog a.button:first-child {
  margin-right: 0;
}

.views-ui-dialog .form--flex {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
}

.views-ui-dialog .form-item {
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}

.views-ui-dialog .form-type--boolean {
  margin-right: 0;
  margin-left: 0;
}

.views-ui-dialog .form-type--boolean .form-boolean {
  top: 0;
  float: none;
  margin: 0 0.25rem 0 0; /* LTR */
  transform: none;
}

[dir="rtl"] .views-ui-dialog .form-type--boolean .form-boolean {
  margin-right: 0;
  margin-left: 0.25rem;
}

.views-ui-dialog .form-boolean-group .form-type--boolean {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

.views-ui-dialog .form-item:first-of-type.description {
  margin: 0 0 var(--space-l) 0;
  padding-bottom: var(--space-s);
  border-bottom: 0.0625rem solid var(--color-gray-200);
  font-weight: bold;
}

/* So "remove" link appears next to the checkbox. */

.views-ui-dialog .draggable .form-type--checkbox {
  display: inline-block;
  margin: 0 0.25rem;
}

.views-ui-dialog .form-element {
  min-height: calc(((var(--input-padding-vertical--small) + var(--input-border-size)) * 2) + var(--input-line-height--small)); /* iOS. */
  padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small);
  font-size: var(--input-font-size--small);
  line-height: var(--input-line-height--small);
}

.views-ui-dialog .form-element--type-select {
  padding-inline-end: calc(2rem - var(--input-border-size));
  background-position-y: 56%;
}

.views-ui-dialog td .form-element {
  width: auto;
}

/* @group Dependent options */

/* This is necessary to supercede the Claro .form-item
 * reset declaration that sets the margin to zero.
 */

.form-item-options-expose-required,
.form-item-options-expose-label,
.form-item-options-expose-field-identifier,
.form-item-options-expose-description {
  margin-left: 1.5em; /* LTR */
}

[dir="rtl"] .form-item-options-expose-required,
[dir="rtl"] .form-item-options-expose-label,
[dir="rtl"] .form-item-options-expose-field-identifier,
[dir="rtl"] .form-item-options-expose-description {
  margin-right: 1.5em;
  margin-left: 0;
}

.views-admin-dependent .form-item .form-item,
.views-admin-dependent .form-type-checkboxes,
.views-admin-dependent .form-type-radios,
.views-admin-dependent .form-item .form-item,
.form-item-options-expose-required,
.form-item-options-expose-label,
.form-item-options-expose-field-identifier,
.form-item-options-expose-description {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.views-admin-dependent .form-type-radio,
.views-admin-dependent .form-radios .form-item {
  margin-top: 2px;
  margin-bottom: 2px;
}

/* @end */

/* @group Lists */

.views-admin .item-list ul {
  margin: 0;
  padding: 0;
}

.views-admin .links li {
  padding-right: 0; /* LTR */
}

[dir="rtl"] .views-admin .links li {
  padding-left: 0;
}

.views-admin .button .links li {
  padding-right: 0.75rem; /* LTR */
}

[dir="rtl"] .views-admin .button .links li {
  padding-left: 0.75rem;
}

.views-display-top__extra-actions-wrapper {
  margin: calc(var(--space-xs) / 2) var(--space-xs) var(--space-xs);
}

/* @end */

/* @group Tables */

.views-ui-rearrange-filter-form td,
.views-ui-rearrange-filter-form th {
  vertical-align: top;
}

/* @end */

/* @group Attachment details */

#edit-display-settings-title {
  color: var(--color-blue-400);
}

/* @end */

/* @group Attachment details tabs
 *
 * The tabs that switch between sections
 *
 * @todo this group contains lots of duplicates from core styles because Claro
 *   has its custom markup for views tabs. Some of these could be removed after
 *   https://www.drupal.org/node/3051605 has been solved.
 */

.views-tabs {
  display: flex;
  overflow: visible;
  flex-wrap: wrap;
  margin: 0 var(--space-l) 0 0; /* LTR */
  padding: 0;
  list-style: none;
  text-align: left; /* LTR */
  border-bottom: 0 none;
}

[dir="rtl"] .views-tabs {
  margin-right: 0;
  margin-left: var(--space-l);
  text-align: right;
}

.views-tabs .views-display-deleted-link {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

.views-tabs li,
.views-tabs li.is-active {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.views-tabs li.add ul.action-list li {
  margin: 0;
}

.views-tabs li {
  margin: 0 0.3125rem 0.3125rem 0.375rem; /* LTR */
}

[dir="rtl"] .views-tabs li {
  margin-right: 0.375rem;
  margin-left: 0.3125rem;
}

.views-tabs li + li {
  border-top: 0;
}

.views-tabs li:hover {
  padding-left: 0; /* LTR */
  border: 0;
}

[dir="rtl"] .views-tabs li:hover {
  padding-right: 0;
}

.views-tabs a {
  display: inline-block;
  padding: 0.625rem;
  border: var(--input-border-size) solid #cbcbcb;
  border-radius: 0.4375rem;
  font-size: small;
  line-height: 1.3333;
}

/* Display a red border if the display doesn't validate. */

.views-tabs li.is-active a.is-active.error,
.views-tabs .error {
  padding: 0.5rem;
  border: 2px solid #ed541d;
}

.views-tabs a:focus {
  outline: none;
}

.views-tabs li a {
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: #fff;
}

.views-tabs li a:hover,
.views-tabs li.is-active a,
.views-tabs li.is-active a.is-active {
  color: #fff;
  background-color: #555;
}

.views-tabs .add {
  position: relative;
}

.views-tabs .add a {
  padding: 0.5625rem 0.8125rem 0.5625rem 0.5625rem;
  color: var(--color-gray-800);
  border: none;
  border-radius: var(--base-border-radius);
  background-color: transparent;
  font-size: var(--font-size-base);
  font-weight: 700;
}

.views-tabs .add a::before {
  display: inline-block;
  width: 1em;
  height: calc(1em - (var(--input-border-size) * 2));
  content: "";
  /* Copy of icon from .action-link--icon-plus */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
}

.views-tabs .add a:hover {
  color: var(--color-absolutezero-hover);
  background-color: var(--color-bgblue-hover);
}

.views-tabs .add a:hover::before {
  /* Copy of icon from .action-link--icon-plus:hover */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%230036b1'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
}

.views-tabs .add a:focus {
  background-color: var(--color-bgblue-active);
  box-shadow: 0 0 0 3px #26a769;
}

.views-tabs .add.open a {
  color: var(--color-white);
  background-color: var(--color-absolutezero);
}

.views-tabs .add.open a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23FFFFFF'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
}

/* Hide core icon, added via JS that isn't accessible via theme function. */

.views-tabs .add .icon.add {
  display: none;
}

.views-tabs .action-list {
  position: absolute;
  z-index: 50;
  top: 2.375rem;
  left: -2px; /* LTR */
  margin: 0;
  box-shadow: var(--details-box-shadow);
}

[dir="rtl"] .views-tabs .action-list {
  right: 0;
  left: auto;
}

.views-tabs .action-list li {
  display: block;
}

.views-tabs .action-list li {
  border-width: 0 1px;
  border-style: solid;
  border-color: #cbcbcb;
  background-color: #fff;
}

.views-tabs .action-list li:first-child {
  border-width: 1px 1px 0;
  border-radius: 0 var(--base-border-radius) 0 0; /* LTR */
}

[dir="rtl"] .views-tabs .action-list li:first-child {
  border-radius: 0 0 0 var(--base-border-radius);
}

.views-tabs .action-list li:last-child,
.views-displays .action-list li:last-child {
  padding-bottom: 0.4rem;
  border-width: 0 1px 1px;
  border-bottom-right-radius: var(--button-border-radius-size);
  border-bottom-left-radius: var(--button-border-radius-size);
}

.views-tabs__action-list-button {
  width: 100%;
  margin: 0;
  padding: var(--space-s) var(--space-l);
  text-align: left;
  border: medium none;
  border-radius: 0;
  background: none repeat scroll 0 0 transparent;
  font-weight: normal;
}

/* JS moves Views action buttons under a secondary tabs container, which causes
a large layout shift. We mitigate this by using animations to temporarily hide
the buttons, but they will appear after a set amount of time just in case the JS
is loaded but does not properly run. */

@media (scripting: enabled) {
  .views-tabs__action-list-button:not(.views-tabs--secondary *) {
    animation-name: appear;
    animation-duration: 0.1s;
    /* Buttons will be hidden for the amount of time in the animation-delay if
    not moved. Note this is the approximate time to download the views
    aggregate CSS with slow 3G. */
    animation-delay: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
  }
}

@keyframes appear {
  from {
    display: none;
  }

  to {
    display: unset;
  }
}

/* RTL required for precedence over core's styles. */

[dir="rtl"] .views-tabs__action-list-button {
  margin: 0;
}

.views-tabs__action-list-button.button:hover,
.views-tabs__action-list-button.button:focus {
  color: var(--color-white);
  background-color: var(--color-absolutezero);
}

/* Remove outline provided by default styling */

.views-tabs__action-list-button:not(:focus) {
  box-shadow: none;
}

/* @end */

/* @group Attachment buckets
 *
 * These are the individual "buckets," or boxes, inside the display settings area
 */

.views-ui-display-tab-bucket .links {
  padding: 2px 0.375rem 0.25rem;
}

.views-ui-display-tab-bucket .links li + li {
  margin-left: 0.1875rem; /* LTR */
}

[dir="rtl"] .views-ui-display-tab-bucket .links li + li {
  margin-right: 0.1875rem;
  margin-left: 0;
}

/* @end */

/* @group Rearrange filter criteria */

.views-ui-rearrange-filter-form tr {
  border-bottom: 0;
}

.views-ui-rearrange-filter-form tr:first-of-type {
  border-top: 0.0625rem solid var(--color-gray-200);
}

.views-ui-rearrange-filter-form tr:not(.draggable):hover {
  background: inherit;
}

.views-ui-rearrange-filter-form .action-links {
  float: left;
  margin: 0 0 1em;
  padding: 0;
}

.views-ui-rearrange-filter-form .tabledrag-toggle-weight-wrapper {
  float: right;
}

.views-ui-rearrange-filter-form .tabledrag-cell {
  position: relative;
}

.views-ui-rearrange-filter-form [id^="views-row"] {
  border: medium none;
}

.views-ui-rearrange-filter-form tr td:last-child {
  border-right: medium none; /* LTR */
}

[dir="rtl"] .views-ui-rearrange-filter-form tr td:last-child {
  border-right: initial;
  border-left: medium none;
}

.views-ui-rearrange-filter-form .filter-group-operator-row {
  border-right: 1px solid transparent !important;
  border-left: 1px solid transparent !important;
}

.views-ui-rearrange-filter-form tr.drag td {
  background-color: #fe7 !important;
}

.views-ui-rearrange-filter-form tr.drag-previous td {
  background-color: #ffb !important;
}

.views-ui-rearrange-filter-form .draggable td {
  vertical-align: middle;
}

/* @end */

/* @group Live preview elements */

.views-query-info pre {
  margin-top: 0;
  margin-bottom: 0;
}

/* @group Query info table */

.views-query-info table {
  border-spacing: 1px;
  border-radius: 0.4375rem;
}

.views-query-info table tr td:last-child {
  /* Fixes a Claro style that bleeds down into this table unnecessarily */
  border-right: 0 none; /* LTR */
}

[dir="rtl"] .views-query-info table tr td:last-child {
  border-right: initial;
  border-left: 0 none;
}

/* @end */

/* @end */

/* @group Add view */

.form-item-page-create,
.form-item-block-create {
  margin-top: 0.8125rem;
}

/* @end */

/* @group Modal dialog box
 *
 * The contents of the popup dialog on the views edit form.
 */

.filterable-option .form-item.form-type-checkbox {
  padding-top: 0.25rem;
  /* This selector is aggressive because Claro's reset for .form-items is aggressive. */
  padding-bottom: 0.25rem;
  padding-left: 0.25rem; /* LTR */
}

[dir="rtl"] .filterable-option .form-item.form-type-checkbox {
  padding-right: 0.25rem;
  padding-left: 0.5rem;
}

/* @end */

/* @group Grouping styles
 *
 * For grouping related form elements together, mainly used with exposed
 * filters.
 */

.views-config-group-region {
  display: table;
  margin: var(--space-l) 0;
  border: 0.0625rem solid var(--color-gray-200);
  border-collapse: collapse;
}

.views-config-group-region .views-group-box {
  position: relative;
  display: table-cell;
  padding: var(--space-l);
  border: 0.0625rem solid var(--color-gray-200);
}

.views-config-group-region .views-group-box--operator {
  padding-right: var(--space-xl);
  border-right-width: 0;
}

[dir="rtl"] .views-config-group-region .views-group-box--operator {
  padding-right: var(--space-l);
  padding-left: var(--space-xl);
  border-right-width: 0.0625rem;
  border-left-width: 0;
}

.views-config-group-region .views-group-box--value {
  padding: 0;
  border-left-width: 0; /* LTR */
}

[dir="rtl"] .views-config-group-region .views-group-box--value {
  border-right-width: 0;
  border-left-width: 0.0625rem;
}

.views-config-group-region .views-group-box--value > .form-item {
  margin-right: var(--space-l); /* LTR */
  margin-left: var(--space-xl); /* LTR */
}

[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item {
  margin-right: var(--space-xl); /* LTR */
  margin-left: var(--space-l); /* LTR */
}

.views-config-group-region .views-group-box--value > .form-item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.0625rem;
  height: 100%;
  content: "";
  border-left: 0.0625rem solid var(--color-gray-200);
}

[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::before {
  right: 0;
}

.views-config-group-region .views-group-box--value > .form-item::after {
  position: absolute;
  z-index: 1;
  top: 3.8rem;
  left: calc(var(--space-m) * -1); /* LTR */
  padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */
  content: ">";
  color: var(--color-gray-600);
  border: 0.0625rem solid var(--color-gray-200);
  background: #fff;
  font-size: var(--font-size-h1);
  font-weight: bold;
  line-height: var(--font-size-h1);
}

[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::after {
  right: calc(var(--space-m) * -1);
  left: auto;
  padding-right: 0.4rem;
  padding-left: 0.3rem;
}

File

core/themes/claro/css/components/views-ui.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.  * Views styling

  10.  */

  11. 

  12. /* @group Forms */

  13. 

  14. /**

  15.  * Claro positions the summary absolutely, but does not have a way to ignore

  16.  * details without a summary so we make one up.

  17.  *

  18.  * @todo Neither a fieldset without legend nor a details without summary is

  19.  *   valid HTML markup in any way. Refactor Views UI to not produce such invalid

  20.  *   markup.

  21.  */

  22. 

  23. details.fieldset-no-legend {

  24.   padding-top: 0;

  25. }

  26. 

  27. /**

  28.  * Being extra safe here and scoping this to the add view wizard form (where

  29.  * a layout problem occurs for the Display format details if we don't fix its

  30.  * padding), but it's probably safe to just let it apply everywhere.

  31.  */

  32. 

  33. .views-ui-dialog input.form-submit,

  34. .views-admin a.button,

  35. .views-ui-dialog a.button {

  36.   margin-top: 0;

  37.   margin-right: 0;

  38.   margin-bottom: 0;

  39. }

  40. 

  41. [dir="rtl"] .views-ui-dialog input.form-submit,

  42. [dir="rtl"] .views-admin a.button,

  43. [dir="rtl"] .views-ui-dialog a.button {

  44.   margin-right: 1em;

  45.   margin-left: 0;

  46. }

  47. 

  48. [dir="rtl"] .views-ui-dialog input.form-submit:first-child,

  49. [dir="rtl"] .views-admin a.button:first-child,

  50. [dir="rtl"] .views-ui-dialog a.button:first-child {

  51.   margin-right: 0;

  52. }

  53. 

  54. .views-ui-dialog .form--flex {

  55.   display: flex;

  56.   overflow: hidden;

  57.   flex-wrap: wrap;

  58. }

  59. 

  60. .views-ui-dialog .form-item {

  61.   margin-top: var(--space-m);

  62.   margin-bottom: var(--space-m);

  63. }

  64. 

  65. .views-ui-dialog .form-type--boolean {

  66.   margin-right: 0;

  67.   margin-left: 0;

  68. }

  69. 

  70. .views-ui-dialog .form-type--boolean .form-boolean {

  71.   top: 0;

  72.   float: none;

  73.   margin: 0 0.25rem 0 0; /* LTR */

  74.   transform: none;

  75. }

  76. 

  77. [dir="rtl"] .views-ui-dialog .form-type--boolean .form-boolean {

  78.   margin-right: 0;

  79.   margin-left: 0.25rem;

  80. }

  81. 

  82. .views-ui-dialog .form-boolean-group .form-type--boolean {

  83.   margin-top: 0.4em;

  84.   margin-bottom: 0.4em;

  85. }

  86. 

  87. .views-ui-dialog .form-item:first-of-type.description {

  88.   margin: 0 0 var(--space-l) 0;

  89.   padding-bottom: var(--space-s);

  90.   border-bottom: 0.0625rem solid var(--color-gray-200);

  91.   font-weight: bold;

  92. }

  93. 

  94. /* So "remove" link appears next to the checkbox. */

  95. 

  96. .views-ui-dialog .draggable .form-type--checkbox {

  97.   display: inline-block;

  98.   margin: 0 0.25rem;

  99. }

  100. 

  101. .views-ui-dialog .form-element {

  102.   min-height: calc(((var(--input-padding-vertical--small) + var(--input-border-size)) * 2) + var(--input-line-height--small)); /* iOS. */

  103.   padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small);

  104.   font-size: var(--input-font-size--small);

  105.   line-height: var(--input-line-height--small);

  106. }

  107. 

  108. .views-ui-dialog .form-element--type-select {

  109.   padding-inline-end: calc(2rem - var(--input-border-size));

  110.   background-position-y: 56%;

  111. }

  112. 

  113. .views-ui-dialog td .form-element {

  114.   width: auto;

  115. }

  116. 

  117. /* @group Dependent options */

  118. 

  119. /* This is necessary to supercede the Claro .form-item

  120.  * reset declaration that sets the margin to zero.

  121.  */

  122. 

  123. .form-item-options-expose-required,

  124. .form-item-options-expose-label,

  125. .form-item-options-expose-field-identifier,

  126. .form-item-options-expose-description {

  127.   margin-left: 1.5em; /* LTR */

  128. }

  129. 

  130. [dir="rtl"] .form-item-options-expose-required,

  131. [dir="rtl"] .form-item-options-expose-label,

  132. [dir="rtl"] .form-item-options-expose-field-identifier,

  133. [dir="rtl"] .form-item-options-expose-description {

  134.   margin-right: 1.5em;

  135.   margin-left: 0;

  136. }

  137. 

  138. .views-admin-dependent .form-item .form-item,

  139. .views-admin-dependent .form-type-checkboxes,

  140. .views-admin-dependent .form-type-radios,

  141. .views-admin-dependent .form-item .form-item,

  142. .form-item-options-expose-required,

  143. .form-item-options-expose-label,

  144. .form-item-options-expose-field-identifier,

  145. .form-item-options-expose-description {

  146.   margin-top: 0.375rem;

  147.   margin-bottom: 0.375rem;

  148. }

  149. 

  150. .views-admin-dependent .form-type-radio,

  151. .views-admin-dependent .form-radios .form-item {

  152.   margin-top: 2px;

  153.   margin-bottom: 2px;

  154. }

  155. 

  156. /* @end */

  157. 

  158. /* @group Lists */

  159. 

  160. .views-admin .item-list ul {

  161.   margin: 0;

  162.   padding: 0;

  163. }

  164. 

  165. .views-admin .links li {

  166.   padding-right: 0; /* LTR */

  167. }

  168. 

  169. [dir="rtl"] .views-admin .links li {

  170.   padding-left: 0;

  171. }

  172. 

  173. .views-admin .button .links li {

  174.   padding-right: 0.75rem; /* LTR */

  175. }

  176. 

  177. [dir="rtl"] .views-admin .button .links li {

  178.   padding-left: 0.75rem;

  179. }

  180. 

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

  182.   margin: calc(var(--space-xs) / 2) var(--space-xs) var(--space-xs);

  183. }

  184. 

  185. /* @end */

  186. 

  187. /* @group Tables */

  188. 

  189. .views-ui-rearrange-filter-form td,

  190. .views-ui-rearrange-filter-form th {

  191.   vertical-align: top;

  192. }

  193. 

  194. /* @end */

  195. 

  196. /* @group Attachment details */

  197. 

  198. #edit-display-settings-title {

  199.   color: var(--color-blue-400);

  200. }

  201. 

  202. /* @end */

  203. 

  204. /* @group Attachment details tabs

  205.  *

  206.  * The tabs that switch between sections

  207.  *

  208.  * @todo this group contains lots of duplicates from core styles because Claro

  209.  *   has its custom markup for views tabs. Some of these could be removed after

  210.  *   https://www.drupal.org/node/3051605 has been solved.

  211.  */

  212. 

  213. .views-tabs {

  214.   display: flex;

  215.   overflow: visible;

  216.   flex-wrap: wrap;

  217.   margin: 0 var(--space-l) 0 0; /* LTR */

  218.   padding: 0;

  219.   list-style: none;

  220.   text-align: left; /* LTR */

  221.   border-bottom: 0 none;

  222. }

  223. 

  224. [dir="rtl"] .views-tabs {

  225.   margin-right: 0;

  226.   margin-left: var(--space-l);

  227.   text-align: right;

  228. }

  229. 

  230. .views-tabs .views-display-deleted-link {

  231.   -webkit-text-decoration: line-through;

  232.   text-decoration: line-through;

  233. }

  234. 

  235. .views-tabs li,

  236. .views-tabs li.is-active {

  237.   width: auto;

  238.   padding: 0;

  239.   border: 0;

  240.   background: transparent;

  241. }

  242. 

  243. .views-tabs li.add ul.action-list li {

  244.   margin: 0;

  245. }

  246. 

  247. .views-tabs li {

  248.   margin: 0 0.3125rem 0.3125rem 0.375rem; /* LTR */

  249. }

  250. 

  251. [dir="rtl"] .views-tabs li {

  252.   margin-right: 0.375rem;

  253.   margin-left: 0.3125rem;

  254. }

  255. 

  256. .views-tabs li + li {

  257.   border-top: 0;

  258. }

  259. 

  260. .views-tabs li:hover {

  261.   padding-left: 0; /* LTR */

  262.   border: 0;

  263. }

  264. 

  265. [dir="rtl"] .views-tabs li:hover {

  266.   padding-right: 0;

  267. }

  268. 

  269. .views-tabs a {

  270.   display: inline-block;

  271.   padding: 0.625rem;

  272.   border: var(--input-border-size) solid #cbcbcb;

  273.   border-radius: 0.4375rem;

  274.   font-size: small;

  275.   line-height: 1.3333;

  276. }

  277. 

  278. /* Display a red border if the display doesn't validate. */

  279. 

  280. .views-tabs li.is-active a.is-active.error,

  281. .views-tabs .error {

  282.   padding: 0.5rem;

  283.   border: 2px solid #ed541d;

  284. }

  285. 

  286. .views-tabs a:focus {

  287.   outline: none;

  288. }

  289. 

  290. .views-tabs li a {

  291.   -webkit-text-decoration: none;

  292.   text-decoration: none;

  293.   background-color: #fff;

  294. }

  295. 

  296. .views-tabs li a:hover,

  297. .views-tabs li.is-active a,

  298. .views-tabs li.is-active a.is-active {

  299.   color: #fff;

  300.   background-color: #555;

  301. }

  302. 

  303. .views-tabs .add {

  304.   position: relative;

  305. }

  306. 

  307. .views-tabs .add a {

  308.   padding: 0.5625rem 0.8125rem 0.5625rem 0.5625rem;

  309.   color: var(--color-gray-800);

  310.   border: none;

  311.   border-radius: var(--base-border-radius);

  312.   background-color: transparent;

  313.   font-size: var(--font-size-base);

  314.   font-weight: 700;

  315. }

  316. 

  317. .views-tabs .add a::before {

  318.   display: inline-block;

  319.   width: 1em;

  320.   height: calc(1em - (var(--input-border-size) * 2));

  321.   content: "";

  322.   /* Copy of icon from .action-link--icon-plus */

  323.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");

  324. }

  325. 

  326. .views-tabs .add a:hover {

  327.   color: var(--color-absolutezero-hover);

  328.   background-color: var(--color-bgblue-hover);

  329. }

  330. 

  331. .views-tabs .add a:hover::before {

  332.   /* Copy of icon from .action-link--icon-plus:hover */

  333.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%230036b1'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");

  334. }

  335. 

  336. .views-tabs .add a:focus {

  337.   background-color: var(--color-bgblue-active);

  338.   box-shadow: 0 0 0 3px #26a769;

  339. }

  340. 

  341. .views-tabs .add.open a {

  342.   color: var(--color-white);

  343.   background-color: var(--color-absolutezero);

  344. }

  345. 

  346. .views-tabs .add.open a::before {

  347.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23FFFFFF'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");

  348. }

  349. 

  350. /* Hide core icon, added via JS that isn't accessible via theme function. */

  351. 

  352. .views-tabs .add .icon.add {

  353.   display: none;

  354. }

  355. 

  356. .views-tabs .action-list {

  357.   position: absolute;

  358.   z-index: 50;

  359.   top: 2.375rem;

  360.   left: -2px; /* LTR */

  361.   margin: 0;

  362.   box-shadow: var(--details-box-shadow);

  363. }

  364. 

  365. [dir="rtl"] .views-tabs .action-list {

  366.   right: 0;

  367.   left: auto;

  368. }

  369. 

  370. .views-tabs .action-list li {

  371.   display: block;

  372. }

  373. 

  374. .views-tabs .action-list li {

  375.   border-width: 0 1px;

  376.   border-style: solid;

  377.   border-color: #cbcbcb;

  378.   background-color: #fff;

  379. }

  380. 

  381. .views-tabs .action-list li:first-child {

  382.   border-width: 1px 1px 0;

  383.   border-radius: 0 var(--base-border-radius) 0 0; /* LTR */

  384. }

  385. 

  386. [dir="rtl"] .views-tabs .action-list li:first-child {

  387.   border-radius: 0 0 0 var(--base-border-radius);

  388. }

  389. 

  390. .views-tabs .action-list li:last-child,

  391. .views-displays .action-list li:last-child {

  392.   padding-bottom: 0.4rem;

  393.   border-width: 0 1px 1px;

  394.   border-bottom-right-radius: var(--button-border-radius-size);

  395.   border-bottom-left-radius: var(--button-border-radius-size);

  396. }

  397. 

  398. .views-tabs__action-list-button {

  399.   width: 100%;

  400.   margin: 0;

  401.   padding: var(--space-s) var(--space-l);

  402.   text-align: left;

  403.   border: medium none;

  404.   border-radius: 0;

  405.   background: none repeat scroll 0 0 transparent;

  406.   font-weight: normal;

  407. }

  408. 

  409. /* JS moves Views action buttons under a secondary tabs container, which causes

  410. a large layout shift. We mitigate this by using animations to temporarily hide

  411. the buttons, but they will appear after a set amount of time just in case the JS

  412. is loaded but does not properly run. */

  413. 

  414. @media (scripting: enabled) {

  415.   .views-tabs__action-list-button:not(.views-tabs--secondary *) {

  416.     animation-name: appear;

  417.     animation-duration: 0.1s;

  418.     /* Buttons will be hidden for the amount of time in the animation-delay if

  419.     not moved. Note this is the approximate time to download the views

  420.     aggregate CSS with slow 3G. */

  421.     animation-delay: 5s;

  422.     animation-iteration-count: 1;

  423.     animation-fill-mode: backwards;

  424.   }

  425. }

  426. 

  427. @keyframes appear {

  428.   from {

  429.     display: none;

  430.   }

  431. 

  432.   to {

  433.     display: unset;

  434.   }

  435. }

  436. 

  437. /* RTL required for precedence over core's styles. */

  438. 

  439. [dir="rtl"] .views-tabs__action-list-button {

  440.   margin: 0;

  441. }

  442. 

  443. .views-tabs__action-list-button.button:hover,

  444. .views-tabs__action-list-button.button:focus {

  445.   color: var(--color-white);

  446.   background-color: var(--color-absolutezero);

  447. }

  448. 

  449. /* Remove outline provided by default styling */

  450. 

  451. .views-tabs__action-list-button:not(:focus) {

  452.   box-shadow: none;

  453. }

  454. 

  455. /* @end */

  456. 

  457. /* @group Attachment buckets

  458.  *

  459.  * These are the individual "buckets," or boxes, inside the display settings area

  460.  */

  461. 

  462. .views-ui-display-tab-bucket .links {

  463.   padding: 2px 0.375rem 0.25rem;

  464. }

  465. 

  466. .views-ui-display-tab-bucket .links li + li {

  467.   margin-left: 0.1875rem; /* LTR */

  468. }

  469. 

  470. [dir="rtl"] .views-ui-display-tab-bucket .links li + li {

  471.   margin-right: 0.1875rem;

  472.   margin-left: 0;

  473. }

  474. 

  475. /* @end */

  476. 

  477. /* @group Rearrange filter criteria */

  478. 

  479. .views-ui-rearrange-filter-form tr {

  480.   border-bottom: 0;

  481. }

  482. 

  483. .views-ui-rearrange-filter-form tr:first-of-type {

  484.   border-top: 0.0625rem solid var(--color-gray-200);

  485. }

  486. 

  487. .views-ui-rearrange-filter-form tr:not(.draggable):hover {

  488.   background: inherit;

  489. }

  490. 

  491. .views-ui-rearrange-filter-form .action-links {

  492.   float: left;

  493.   margin: 0 0 1em;

  494.   padding: 0;

  495. }

  496. 

  497. .views-ui-rearrange-filter-form .tabledrag-toggle-weight-wrapper {

  498.   float: right;

  499. }

  500. 

  501. .views-ui-rearrange-filter-form .tabledrag-cell {

  502.   position: relative;

  503. }

  504. 

  505. .views-ui-rearrange-filter-form [id^="views-row"] {

  506.   border: medium none;

  507. }

  508. 

  509. .views-ui-rearrange-filter-form tr td:last-child {

  510.   border-right: medium none; /* LTR */

  511. }

  512. 

  513. [dir="rtl"] .views-ui-rearrange-filter-form tr td:last-child {

  514.   border-right: initial;

  515.   border-left: medium none;

  516. }

  517. 

  518. .views-ui-rearrange-filter-form .filter-group-operator-row {

  519.   border-right: 1px solid transparent !important;

  520.   border-left: 1px solid transparent !important;

  521. }

  522. 

  523. .views-ui-rearrange-filter-form tr.drag td {

  524.   background-color: #fe7 !important;

  525. }

  526. 

  527. .views-ui-rearrange-filter-form tr.drag-previous td {

  528.   background-color: #ffb !important;

  529. }

  530. 

  531. .views-ui-rearrange-filter-form .draggable td {

  532.   vertical-align: middle;

  533. }

  534. 

  535. /* @end */

  536. 

  537. /* @group Live preview elements */

  538. 

  539. .views-query-info pre {

  540.   margin-top: 0;

  541.   margin-bottom: 0;

  542. }

  543. 

  544. /* @group Query info table */

  545. 

  546. .views-query-info table {

  547.   border-spacing: 1px;

  548.   border-radius: 0.4375rem;

  549. }

  550. 

  551. .views-query-info table tr td:last-child {

  552.   /* Fixes a Claro style that bleeds down into this table unnecessarily */

  553.   border-right: 0 none; /* LTR */

  554. }

  555. 

  556. [dir="rtl"] .views-query-info table tr td:last-child {

  557.   border-right: initial;

  558.   border-left: 0 none;

  559. }

  560. 

  561. /* @end */

  562. 

  563. /* @end */

  564. 

  565. /* @group Add view */

  566. 

  567. .form-item-page-create,

  568. .form-item-block-create {

  569.   margin-top: 0.8125rem;

  570. }

  571. 

  572. /* @end */

  573. 

  574. /* @group Modal dialog box

  575.  *

  576.  * The contents of the popup dialog on the views edit form.

  577.  */

  578. 

  579. .filterable-option .form-item.form-type-checkbox {

  580.   padding-top: 0.25rem;

  581.   /* This selector is aggressive because Claro's reset for .form-items is aggressive. */

  582.   padding-bottom: 0.25rem;

  583.   padding-left: 0.25rem; /* LTR */

  584. }

  585. 

  586. [dir="rtl"] .filterable-option .form-item.form-type-checkbox {

  587.   padding-right: 0.25rem;

  588.   padding-left: 0.5rem;

  589. }

  590. 

  591. /* @end */

  592. 

  593. /* @group Grouping styles

  594.  *

  595.  * For grouping related form elements together, mainly used with exposed

  596.  * filters.

  597.  */

  598. 

  599. .views-config-group-region {

  600.   display: table;

  601.   margin: var(--space-l) 0;

  602.   border: 0.0625rem solid var(--color-gray-200);

  603.   border-collapse: collapse;

  604. }

  605. 

  606. .views-config-group-region .views-group-box {

  607.   position: relative;

  608.   display: table-cell;

  609.   padding: var(--space-l);

  610.   border: 0.0625rem solid var(--color-gray-200);

  611. }

  612. 

  613. .views-config-group-region .views-group-box--operator {

  614.   padding-right: var(--space-xl);

  615.   border-right-width: 0;

  616. }

  617. 

  618. [dir="rtl"] .views-config-group-region .views-group-box--operator {

  619.   padding-right: var(--space-l);

  620.   padding-left: var(--space-xl);

  621.   border-right-width: 0.0625rem;

  622.   border-left-width: 0;

  623. }

  624. 

  625. .views-config-group-region .views-group-box--value {

  626.   padding: 0;

  627.   border-left-width: 0; /* LTR */

  628. }

  629. 

  630. [dir="rtl"] .views-config-group-region .views-group-box--value {

  631.   border-right-width: 0;

  632.   border-left-width: 0.0625rem;

  633. }

  634. 

  635. .views-config-group-region .views-group-box--value > .form-item {

  636.   margin-right: var(--space-l); /* LTR */

  637.   margin-left: var(--space-xl); /* LTR */

  638. }

  639. 

  640. [dir="rtl"] .views-config-group-region .views-group-box--value > .form-item {

  641.   margin-right: var(--space-xl); /* LTR */

  642.   margin-left: var(--space-l); /* LTR */

  643. }

  644. 

  645. .views-config-group-region .views-group-box--value > .form-item::before {

  646.   position: absolute;

  647.   top: 0;

  648.   left: 0;

  649.   width: 0.0625rem;

  650.   height: 100%;

  651.   content: "";

  652.   border-left: 0.0625rem solid var(--color-gray-200);

  653. }

  654. 

  655. [dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::before {

  656.   right: 0;

  657. }

  658. 

  659. .views-config-group-region .views-group-box--value > .form-item::after {

  660.   position: absolute;

  661.   z-index: 1;

  662.   top: 3.8rem;

  663.   left: calc(var(--space-m) * -1); /* LTR */

  664.   padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */

  665.   content: ">";

  666.   color: var(--color-gray-600);

  667.   border: 0.0625rem solid var(--color-gray-200);

  668.   background: #fff;

  669.   font-size: var(--font-size-h1);

  670.   font-weight: bold;

  671.   line-height: var(--font-size-h1);

  672. }

  673. 

  674. [dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::after {

  675.   right: calc(var(--space-m) * -1);

  676.   left: auto;

  677.   padding-right: 0.4rem;

  678.   padding-left: 0.3rem;

  679. }

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