views-ui.pcss.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/views-ui.pcss.css
  2. 10 core/themes/claro/css/components/views-ui.pcss.css
  3. 11.x core/themes/claro/css/components/views-ui.pcss.css
/**
 * Views styling
 */

@import "../base/variables.pcss.css";

/* @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: 6px;
  margin-bottom: 6px;
}

.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: 12px; /* LTR */
}
[dir="rtl"] .views-admin .button .links li {
  padding-left: 12px;
}

.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 {
  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 5px 5px 6px; /* LTR */
}
[dir="rtl"] .views-tabs li {
  margin-right: 6px;
  margin-left: 5px;
}
.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: 10px;
  border: var(--input-border-size) solid #cbcbcb;
  border-radius: 7px;
  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: 8px;
  border: 2px solid #ed541d;
}
.views-tabs a:focus {
  outline: none;
}
.views-tabs li a {
  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: 9px 13px 9px 9px;
  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: 38px;
  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;
}
/* 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 6px 4px;
}

.views-ui-display-tab-bucket .links li + li {
  margin-left: 3px; /* LTR */
}
[dir="rtl"] .views-ui-display-tab-bucket .links li + li {
  margin-right: 3px;
  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-radius: 7px;
  -webkit-border-horizontal-spacing: 1px;
  -webkit-border-vertical-spacing: 1px;
}

.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: 13px;
}

/* @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: 4px;
  /* This selector is aggressive because Claro's reset for .form-items is aggressive. */
  padding-bottom: 4px;
  padding-left: 4px; /* LTR */
}
[dir="rtl"] .filterable-option .form-item.form-type-checkbox {
  padding-right: 4px;
  padding-left: 8px;
}

/* @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(0 - var(--space-m)); /* 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(0 - var(--space-m));
  left: auto;
  padding-right: 0.4rem;
  padding-left: 0.3rem;
}

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /**
   * Remove borders from IE11 filter config in IE11, as it does not fully support
   * the CSS needed to size and position them properly. This results in a
   * slightly different presentation for IE11, but one that users are accustomed
   * to with the Seven theme.
   */
  .views-config-group-region .views-group-box--value > .form-item::before,
  .views-config-group-region .views-group-box--value > .form-item::after {
    content: "";
    border: none;
  }
  .views-config-group-region,
  .views-config-group-region .views-group-box {
    border: none;
  }

  /**
   * IE11 has trouble correctly using `justify-content: space-between` when a
   * flex item has the `.visually-hidden` class. This addresses the issue and
   * the end result is the extra action button remains in it's own column on
   * wrap, which matches the experience when using the Seven theme.
   */
  .views-display-top {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .views-display-top__extra-actions-wrapper {
    margin-left: auto; /* LTR */
  }
  [dir="rtl"] .views-display-top__extra-actions-wrapper {
    margin-right: auto;
    margin-left: calc(var(--space-xs) / 2);
  }
}

File

core/themes/claro/css/components/views-ui.pcss.css

View source 
  1. /**

  2.  * Views styling

  3.  */

  4. 

  5. @import "../base/variables.pcss.css";

  6. 

  7. /* @group Forms */

  8. 

  9. /**

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

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

  12.  *

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

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

  15.  *   markup.

  16.  */

  17. details.fieldset-no-legend {

  18.   padding-top: 0;

  19. }

  20. 

  21. /**

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

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

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

  25.  */

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

  27. .views-admin a.button,

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

  29.   margin-top: 0;

  30.   margin-right: 0;

  31.   margin-bottom: 0;

  32. }

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

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

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

  36.   margin-right: 1em;

  37.   margin-left: 0;

  38. }

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

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

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

  42.   margin-right: 0;

  43. }

  44. 

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

  46.   display: flex;

  47.   overflow: hidden;

  48.   flex-wrap: wrap;

  49. }

  50. 

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

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

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

  54. }

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

  56.   margin-right: 0;

  57.   margin-left: 0;

  58. }

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

  60.   top: 0;

  61.   float: none;

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

  63.   transform: none;

  64. }

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

  66.   margin-right: 0;

  67.   margin-left: 0.25rem;

  68. }

  69. 

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

  71.   margin-top: 0.4em;

  72.   margin-bottom: 0.4em;

  73. }

  74. 

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

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

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

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

  79.   font-weight: bold;

  80. }

  81. 

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

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

  84.   display: inline-block;

  85.   margin: 0 0.25rem;

  86. }

  87. 

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

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

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

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

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

  93. }

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

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

  96.   background-position-y: 56%;

  97. }

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

  99.   width: auto;

  100. }

  101. 

  102. /* @group Dependent options */

  103. 

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

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

  106.  */

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

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

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

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

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

  112. }

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

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

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

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

  117.   margin-right: 1.5em;

  118.   margin-left: 0;

  119. }

  120. 

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

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

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

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

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

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

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

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

  129.   margin-top: 6px;

  130.   margin-bottom: 6px;

  131. }

  132. 

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

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

  135.   margin-top: 2px;

  136.   margin-bottom: 2px;

  137. }

  138. 

  139. /* @end */

  140. 

  141. /* @group Lists */

  142. 

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

  144.   margin: 0;

  145.   padding: 0;

  146. }

  147. 

  148. .views-admin .links li {

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

  150. }

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

  152.   padding-left: 0;

  153. }

  154. 

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

  156.   padding-right: 12px; /* LTR */

  157. }

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

  159.   padding-left: 12px;

  160. }

  161. 

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

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

  164. }

  165. 

  166. /* @end */

  167. 

  168. /* @group Tables */

  169. 

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

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

  172.   vertical-align: top;

  173. }

  174. 

  175. /* @end */

  176. 

  177. /* @group Attachment details */

  178. 

  179. #edit-display-settings-title {

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

  181. }

  182. 

  183. /* @end */

  184. 

  185. /* @group Attachment details tabs

  186.  *

  187.  * The tabs that switch between sections

  188.  *

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

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

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

  192.  */

  193. 

  194. .views-tabs {

  195.   display: flex;

  196.   overflow: visible;

  197.   flex-wrap: wrap;

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

  199.   padding: 0;

  200.   list-style: none;

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

  202.   border-bottom: 0 none;

  203. }

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

  205.   margin-right: 0;

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

  207.   text-align: right;

  208. }

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

  210.   text-decoration: line-through;

  211. }

  212. .views-tabs li,

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

  214.   width: auto;

  215.   padding: 0;

  216.   border: 0;

  217.   background: transparent;

  218. }

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

  220.   margin: 0;

  221. }

  222. .views-tabs li {

  223.   margin: 0 5px 5px 6px; /* LTR */

  224. }

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

  226.   margin-right: 6px;

  227.   margin-left: 5px;

  228. }

  229. .views-tabs li + li {

  230.   border-top: 0;

  231. }

  232. .views-tabs li:hover {

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

  234.   border: 0;

  235. }

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

  237.   padding-right: 0;

  238. }

  239. .views-tabs a {

  240.   display: inline-block;

  241.   padding: 10px;

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

  243.   border-radius: 7px;

  244.   font-size: small;

  245.   line-height: 1.3333;

  246. }

  247. 

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

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

  250. .views-tabs .error {

  251.   padding: 8px;

  252.   border: 2px solid #ed541d;

  253. }

  254. .views-tabs a:focus {

  255.   outline: none;

  256. }

  257. .views-tabs li a {

  258.   text-decoration: none;

  259.   background-color: #fff;

  260. }

  261. .views-tabs li a:hover,

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

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

  264.   color: #fff;

  265.   background-color: #555;

  266. }

  267. .views-tabs .add {

  268.   position: relative;

  269. }

  270. .views-tabs .add a {

  271.   padding: 9px 13px 9px 9px;

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

  273.   border: none;

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

  275.   background-color: transparent;

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

  277.   font-weight: 700;

  278. }

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

  280.   display: inline-block;

  281.   width: 1em;

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

  283.   content: "";

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

  285.   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");

  286. }

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

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

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

  290. }

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

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

  293.   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");

  294. }

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

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

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

  298. }

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

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

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

  302. }

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

  304.   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");

  305. }

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

  307. .views-tabs .add .icon.add {

  308.   display: none;

  309. }

  310. .views-tabs .action-list {

  311.   position: absolute;

  312.   z-index: 50;

  313.   top: 38px;

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

  315.   margin: 0;

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

  317. }

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

  319.   right: 0;

  320.   left: auto;

  321. }

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

  323.   display: block;

  324. }

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

  326.   border-width: 0 1px;

  327.   border-style: solid;

  328.   border-color: #cbcbcb;

  329.   background-color: #fff;

  330. }

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

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

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

  334. }

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

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

  337. }

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

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

  340.   padding-bottom: 0.4rem;

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

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

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

  344. }

  345. .views-tabs__action-list-button {

  346.   width: 100%;

  347.   margin: 0;

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

  349.   text-align: left;

  350.   border: medium none;

  351.   border-radius: 0;

  352.   background: none repeat scroll 0 0 transparent;

  353.   font-weight: normal;

  354. }

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

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

  357.   margin: 0;

  358. }

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

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

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

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

  363. }

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

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

  366.   box-shadow: none;

  367. }

  368. 

  369. /* @end */

  370. 

  371. /* @group Attachment buckets

  372.  *

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

  374.  */

  375. 

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

  377.   padding: 2px 6px 4px;

  378. }

  379. 

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

  381.   margin-left: 3px; /* LTR */

  382. }

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

  384.   margin-right: 3px;

  385.   margin-left: 0;

  386. }

  387. 

  388. /* @end */

  389. 

  390. /* @group Rearrange filter criteria */

  391. 

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

  393.   border-bottom: 0;

  394. }

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

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

  397. }

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

  399.   background: inherit;

  400. }

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

  402.   float: left;

  403.   margin: 0 0 1em;

  404.   padding: 0;

  405. }

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

  407.   float: right;

  408. }

  409. 

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

  411.   position: relative;

  412. }

  413. 

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

  415.   border: medium none;

  416. }

  417. 

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

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

  420. }

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

  422.   border-right: initial;

  423.   border-left: medium none;

  424. }

  425. 

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

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

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

  429. }

  430. 

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

  432.   background-color: #fe7 !important;

  433. }

  434. 

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

  436.   background-color: #ffb !important;

  437. }

  438. 

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

  440.   vertical-align: middle;

  441. }

  442. 

  443. /* @end */

  444. 

  445. /* @group Live preview elements */

  446. 

  447. .views-query-info pre {

  448.   margin-top: 0;

  449.   margin-bottom: 0;

  450. }

  451. 

  452. /* @group Query info table */

  453. 

  454. .views-query-info table {

  455.   border-radius: 7px;

  456.   -webkit-border-horizontal-spacing: 1px;

  457.   -webkit-border-vertical-spacing: 1px;

  458. }

  459. 

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

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

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

  463. }

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

  465.   border-right: initial;

  466.   border-left: 0 none;

  467. }

  468. 

  469. /* @end */

  470. 

  471. /* @end */

  472. 

  473. /* @group Add view */

  474. 

  475. .form-item-page-create,

  476. .form-item-block-create {

  477.   margin-top: 13px;

  478. }

  479. 

  480. /* @end */

  481. 

  482. /* @group Modal dialog box

  483.  *

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

  485.  */

  486. 

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

  488.   padding-top: 4px;

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

  490.   padding-bottom: 4px;

  491.   padding-left: 4px; /* LTR */

  492. }

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

  494.   padding-right: 4px;

  495.   padding-left: 8px;

  496. }

  497. 

  498. /* @end */

  499. 

  500. /* @group Grouping styles

  501.  *

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

  503.  * filters.

  504.  */

  505. .views-config-group-region {

  506.   display: table;

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

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

  509.   border-collapse: collapse;

  510. }

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

  512.   position: relative;

  513.   display: table-cell;

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

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

  516. }

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

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

  519.   border-right-width: 0;

  520. }

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

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

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

  524.   border-right-width: 0.0625rem;

  525.   border-left-width: 0;

  526. }

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

  528.   padding: 0;

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

  530. }

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

  532.   border-right-width: 0;

  533.   border-left-width: 0.0625rem;

  534. }

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

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

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

  538. }

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

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

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

  542. }

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

  544.   position: absolute;

  545.   top: 0;

  546.   left: 0;

  547.   width: 0.0625rem;

  548.   height: 100%;

  549.   content: "";

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

  551. }

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

  553.   right: 0;

  554. }

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

  556.   position: absolute;

  557.   z-index: 1;

  558.   top: 3.8rem;

  559.   left: calc(0 - var(--space-m)); /* LTR */

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

  561.   content: ">";

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

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

  564.   background: #fff;

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

  566.   font-weight: bold;

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

  568. }

  569. 

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

  571.   right: calc(0 - var(--space-m));

  572.   left: auto;

  573.   padding-right: 0.4rem;

  574.   padding-left: 0.3rem;

  575. }

  576. 

  577. @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  578.   /**

  579.    * Remove borders from IE11 filter config in IE11, as it does not fully support

  580.    * the CSS needed to size and position them properly. This results in a

  581.    * slightly different presentation for IE11, but one that users are accustomed

  582.    * to with the Seven theme.

  583.    */

  584.   .views-config-group-region .views-group-box--value > .form-item::before,

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

  586.     content: "";

  587.     border: none;

  588.   }

  589.   .views-config-group-region,

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

  591.     border: none;

  592.   }

  593. 

  594.   /**

  595.    * IE11 has trouble correctly using `justify-content: space-between` when a

  596.    * flex item has the `.visually-hidden` class. This addresses the issue and

  597.    * the end result is the extra action button remains in it's own column on

  598.    * wrap, which matches the experience when using the Seven theme.

  599.    */

  600.   .views-display-top {

  601.     flex-wrap: nowrap;

  602.     justify-content: flex-start;

  603.   }

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

  605.     margin-left: auto; /* LTR */

  606.   }

  607.   [dir="rtl"] .views-display-top__extra-actions-wrapper {

  608.     margin-right: auto;

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

  610.   }

  611. }

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