views-ui.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/views-ui.pcss.css
  2. 8.9.x core/themes/claro/css/components/views-ui.pcss.css
  3. 10 core/themes/claro/css/components/views-ui.pcss.css
/**
 * 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: 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;
}

/* 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 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-spacing: 1px;
  border-radius: 7px;
}

.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(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.pcss.css

View source 
  1. /**

  2.  * Views styling

  3.  */

  4. 

  5. /* @group Forms */

  6. 

  7. /**

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

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

  10.  *

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

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

  13.  *   markup.

  14.  */

  15. details.fieldset-no-legend {

  16.   padding-top: 0;

  17. }

  18. 

  19. /**

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

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

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

  23.  */

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

  25. .views-admin a.button,

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

  27.   margin-top: 0;

  28.   margin-right: 0;

  29.   margin-bottom: 0;

  30. }

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

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

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

  34.   margin-right: 1em;

  35.   margin-left: 0;

  36. }

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

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

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

  40.   margin-right: 0;

  41. }

  42. 

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

  44.   display: flex;

  45.   overflow: hidden;

  46.   flex-wrap: wrap;

  47. }

  48. 

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

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

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

  52. }

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

  54.   margin-right: 0;

  55.   margin-left: 0;

  56. }

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

  58.   top: 0;

  59.   float: none;

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

  61.   transform: none;

  62. }

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

  64.   margin-right: 0;

  65.   margin-left: 0.25rem;

  66. }

  67. 

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

  69.   margin-top: 0.4em;

  70.   margin-bottom: 0.4em;

  71. }

  72. 

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

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

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

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

  77.   font-weight: bold;

  78. }

  79. 

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

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

  82.   display: inline-block;

  83.   margin: 0 0.25rem;

  84. }

  85. 

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

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

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

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

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

  91. }

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

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

  94.   background-position-y: 56%;

  95. }

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

  97.   width: auto;

  98. }

  99. 

  100. /* @group Dependent options */

  101. 

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

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

  104.  */

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

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

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

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

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

  110. }

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

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

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

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

  115.   margin-right: 1.5em;

  116.   margin-left: 0;

  117. }

  118. 

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

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

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

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

  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-top: 6px;

  128.   margin-bottom: 6px;

  129. }

  130. 

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

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

  133.   margin-top: 2px;

  134.   margin-bottom: 2px;

  135. }

  136. 

  137. /* @end */

  138. 

  139. /* @group Lists */

  140. 

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

  142.   margin: 0;

  143.   padding: 0;

  144. }

  145. 

  146. .views-admin .links li {

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

  148. }

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

  150.   padding-left: 0;

  151. }

  152. 

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

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

  155. }

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

  157.   padding-left: 12px;

  158. }

  159. 

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

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

  162. }

  163. 

  164. /* @end */

  165. 

  166. /* @group Tables */

  167. 

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

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

  170.   vertical-align: top;

  171. }

  172. 

  173. /* @end */

  174. 

  175. /* @group Attachment details */

  176. 

  177. #edit-display-settings-title {

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

  179. }

  180. 

  181. /* @end */

  182. 

  183. /* @group Attachment details tabs

  184.  *

  185.  * The tabs that switch between sections

  186.  *

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

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

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

  190.  */

  191. 

  192. .views-tabs {

  193.   display: flex;

  194.   overflow: visible;

  195.   flex-wrap: wrap;

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

  197.   padding: 0;

  198.   list-style: none;

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

  200.   border-bottom: 0 none;

  201. }

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

  203.   margin-right: 0;

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

  205.   text-align: right;

  206. }

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

  208.   text-decoration: line-through;

  209. }

  210. .views-tabs li,

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

  212.   width: auto;

  213.   padding: 0;

  214.   border: 0;

  215.   background: transparent;

  216. }

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

  218.   margin: 0;

  219. }

  220. .views-tabs li {

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

  222. }

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

  224.   margin-right: 6px;

  225.   margin-left: 5px;

  226. }

  227. .views-tabs li + li {

  228.   border-top: 0;

  229. }

  230. .views-tabs li:hover {

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

  232.   border: 0;

  233. }

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

  235.   padding-right: 0;

  236. }

  237. .views-tabs a {

  238.   display: inline-block;

  239.   padding: 10px;

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

  241.   border-radius: 7px;

  242.   font-size: small;

  243.   line-height: 1.3333;

  244. }

  245. 

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

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

  248. .views-tabs .error {

  249.   padding: 8px;

  250.   border: 2px solid #ed541d;

  251. }

  252. .views-tabs a:focus {

  253.   outline: none;

  254. }

  255. .views-tabs li a {

  256.   text-decoration: none;

  257.   background-color: #fff;

  258. }

  259. .views-tabs li a:hover,

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

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

  262.   color: #fff;

  263.   background-color: #555;

  264. }

  265. .views-tabs .add {

  266.   position: relative;

  267. }

  268. .views-tabs .add a {

  269.   padding: 9px 13px 9px 9px;

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

  271.   border: none;

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

  273.   background-color: transparent;

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

  275.   font-weight: 700;

  276. }

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

  278.   display: inline-block;

  279.   width: 1em;

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

  281.   content: "";

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

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

  284. }

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

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

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

  288. }

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

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

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

  292. }

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

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

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

  296. }

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

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

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

  300. }

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

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

  303. }

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

  305. .views-tabs .add .icon.add {

  306.   display: none;

  307. }

  308. .views-tabs .action-list {

  309.   position: absolute;

  310.   z-index: 50;

  311.   top: 38px;

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

  313.   margin: 0;

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

  315. }

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

  317.   right: 0;

  318.   left: auto;

  319. }

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

  321.   display: block;

  322. }

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

  324.   border-width: 0 1px;

  325.   border-style: solid;

  326.   border-color: #cbcbcb;

  327.   background-color: #fff;

  328. }

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

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

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

  332. }

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

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

  335. }

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

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

  338.   padding-bottom: 0.4rem;

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

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

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

  342. }

  343. .views-tabs__action-list-button {

  344.   width: 100%;

  345.   margin: 0;

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

  347.   text-align: left;

  348.   border: medium none;

  349.   border-radius: 0;

  350.   background: none repeat scroll 0 0 transparent;

  351.   font-weight: normal;

  352. }

  353. 

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

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

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

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

  358. @media (scripting: enabled) {

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

  360.     animation-name: appear;

  361.     animation-duration: 0.1s;

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

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

  364.     aggregate CSS with slow 3G. */

  365.     animation-delay: 5s;

  366.     animation-iteration-count: 1;

  367.     animation-fill-mode: backwards;

  368.   }

  369. }

  370. 

  371. @keyframes appear {

  372.   from {

  373.     display: none;

  374.   }

  375. 

  376.   to {

  377.     display: unset;

  378.   }

  379. }

  380. 

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

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

  383.   margin: 0;

  384. }

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

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

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

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

  389. }

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

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

  392.   box-shadow: none;

  393. }

  394. 

  395. /* @end */

  396. 

  397. /* @group Attachment buckets

  398.  *

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

  400.  */

  401. 

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

  403.   padding: 2px 6px 4px;

  404. }

  405. 

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

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

  408. }

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

  410.   margin-right: 3px;

  411.   margin-left: 0;

  412. }

  413. 

  414. /* @end */

  415. 

  416. /* @group Rearrange filter criteria */

  417. 

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

  419.   border-bottom: 0;

  420. }

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

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

  423. }

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

  425.   background: inherit;

  426. }

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

  428.   float: left;

  429.   margin: 0 0 1em;

  430.   padding: 0;

  431. }

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

  433.   float: right;

  434. }

  435. 

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

  437.   position: relative;

  438. }

  439. 

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

  441.   border: medium none;

  442. }

  443. 

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

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

  446. }

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

  448.   border-right: initial;

  449.   border-left: medium none;

  450. }

  451. 

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

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

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

  455. }

  456. 

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

  458.   background-color: #fe7 !important;

  459. }

  460. 

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

  462.   background-color: #ffb !important;

  463. }

  464. 

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

  466.   vertical-align: middle;

  467. }

  468. 

  469. /* @end */

  470. 

  471. /* @group Live preview elements */

  472. 

  473. .views-query-info pre {

  474.   margin-top: 0;

  475.   margin-bottom: 0;

  476. }

  477. 

  478. /* @group Query info table */

  479. 

  480. .views-query-info table {

  481.   border-spacing: 1px;

  482.   border-radius: 7px;

  483. }

  484. 

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

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

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

  488. }

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

  490.   border-right: initial;

  491.   border-left: 0 none;

  492. }

  493. 

  494. /* @end */

  495. 

  496. /* @end */

  497. 

  498. /* @group Add view */

  499. 

  500. .form-item-page-create,

  501. .form-item-block-create {

  502.   margin-top: 13px;

  503. }

  504. 

  505. /* @end */

  506. 

  507. /* @group Modal dialog box

  508.  *

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

  510.  */

  511. 

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

  513.   padding-top: 4px;

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

  515.   padding-bottom: 4px;

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

  517. }

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

  519.   padding-right: 4px;

  520.   padding-left: 8px;

  521. }

  522. 

  523. /* @end */

  524. 

  525. /* @group Grouping styles

  526.  *

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

  528.  * filters.

  529.  */

  530. .views-config-group-region {

  531.   display: table;

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

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

  534.   border-collapse: collapse;

  535. }

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

  537.   position: relative;

  538.   display: table-cell;

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

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

  541. }

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

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

  544.   border-right-width: 0;

  545. }

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

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

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

  549.   border-right-width: 0.0625rem;

  550.   border-left-width: 0;

  551. }

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

  553.   padding: 0;

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

  555. }

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

  557.   border-right-width: 0;

  558.   border-left-width: 0.0625rem;

  559. }

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

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

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

  563. }

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

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

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

  567. }

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

  569.   position: absolute;

  570.   top: 0;

  571.   left: 0;

  572.   width: 0.0625rem;

  573.   height: 100%;

  574.   content: "";

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

  576. }

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

  578.   right: 0;

  579. }

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

  581.   position: absolute;

  582.   z-index: 1;

  583.   top: 3.8rem;

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

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

  586.   content: ">";

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

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

  589.   background: #fff;

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

  591.   font-weight: bold;

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

  593. }

  594. 

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

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

  597.   left: auto;

  598.   padding-right: 0.4rem;

  599.   padding-left: 0.3rem;

  600. }

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