views-ui.css

Same filename in this branch
  1. 9 core/themes/seven/css/components/views-ui.css
Same filename in other branches
  1. 8.9.x core/themes/seven/css/components/views-ui.css
  2. 8.9.x core/themes/claro/css/components/views-ui.css
  3. 10 core/themes/claro/css/components/views-ui.css
  4. 11.x 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: 1rem;
  margin-bottom: 1rem;
}

.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 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid #d3d4d9;
  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(2.3125rem - 2px); /* iOS. */
  padding: calc(0.5rem - 2px) calc(1rem - 1px);
  font-size: 0.79rem;
  line-height: 1.3125rem;
}

[dir="ltr"] .views-ui-dialog .form-element--type-select {
  padding-right: calc(2rem - 1px);
}

[dir="rtl"] .views-ui-dialog .form-element--type-select {
  padding-left: calc(2rem - 1px);
}

.views-ui-dialog .form-element--type-select {
  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: 0.25rem 0.5rem 0.5rem;
}

/* @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: #3371ff;
}

/* @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 1.5rem 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: 1.5rem;
  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 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: 1px 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 {
  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: #55565b;
  border: none;
  border-radius: 2px;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 700;
}

.views-tabs .add a::before {
  display: inline-block;
  width: 1em;
  height: calc(1em - 2px);
  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: #0036b1;
  background-color: #f5f8ff;
}

.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: #e5edff;
  box-shadow: 0 0 0 3px #26a769;
}

.views-tabs .add.open a {
  color: #fff;
  background-color: #003ecc;
}

.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: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[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 2px 0 0; /* LTR */
}

[dir="rtl"] .views-tabs .action-list li:first-child {
  border-radius: 0 0 0 2px;
}

.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: 2px;
  border-bottom-left-radius: 2px;
}

.views-tabs__action-list-button {
  width: 100%;
  margin: 0;
  padding: 0.75rem 1.5rem;
  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: #fff;
  background-color: #003ecc;
}

/* 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 #d3d4d9;
}

.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: 0;
  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: 0.4375rem;
  -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: 0;
  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: 1.5rem 0;
  border: 0.0625rem solid #d3d4d9;
  border-collapse: collapse;
}

.views-config-group-region .views-group-box {
  position: relative;
  display: table-cell;
  padding: 1.5rem;
  border: 0.0625rem solid #d3d4d9;
}

.views-config-group-region .views-group-box--operator {
  padding-right: 3rem;
  border-right-width: 0;
}

[dir="rtl"] .views-config-group-region .views-group-box--operator {
  padding-right: 1.5rem;
  padding-left: 3rem;
  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: 1.5rem; /* LTR */
  margin-left: 3rem; /* LTR */
}

[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item {
  margin-right: 3rem; /* LTR */
  margin-left: 1.5rem; /* 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 #d3d4d9;
}

[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: -1rem; /* LTR */
  padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */
  content: ">";
  color: #828388;
  border: 0.0625rem solid #d3d4d9;
  background: #fff;
  font-size: 2.027rem;
  font-weight: bold;
  line-height: 2.027rem;
}

[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::after {
  right: -1rem;
  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: 0.25rem;
  }
}

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: 1rem;

  62.   margin-bottom: 1rem;

  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 1.5rem 0;

  89.   padding-bottom: 0.75rem;

  90.   border-bottom: 0.0625rem solid #d3d4d9;

  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(2.3125rem - 2px); /* iOS. */

  103.   padding: calc(0.5rem - 2px) calc(1rem - 1px);

  104.   font-size: 0.79rem;

  105.   line-height: 1.3125rem;

  106. }

  107. 

  108. [dir="ltr"] .views-ui-dialog .form-element--type-select {

  109.   padding-right: calc(2rem - 1px);

  110. }

  111. 

  112. [dir="rtl"] .views-ui-dialog .form-element--type-select {

  113.   padding-left: calc(2rem - 1px);

  114. }

  115. 

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

  117.   background-position-y: 56%;

  118. }

  119. 

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

  121.   width: auto;

  122. }

  123. 

  124. /* @group Dependent options */

  125. 

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

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

  128.  */

  129. 

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

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

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

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

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

  135. }

  136. 

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

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

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

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

  141.   margin-right: 1.5em;

  142.   margin-left: 0;

  143. }

  144. 

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

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

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

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

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

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

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

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

  153.   margin-top: 0.375rem;

  154.   margin-bottom: 0.375rem;

  155. }

  156. 

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

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

  159.   margin-top: 2px;

  160.   margin-bottom: 2px;

  161. }

  162. 

  163. /* @end */

  164. 

  165. /* @group Lists */

  166. 

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

  168.   margin: 0;

  169.   padding: 0;

  170. }

  171. 

  172. .views-admin .links li {

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

  174. }

  175. 

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

  177.   padding-left: 0;

  178. }

  179. 

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

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

  182. }

  183. 

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

  185.   padding-left: 0.75rem;

  186. }

  187. 

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

  189.   margin: 0.25rem 0.5rem 0.5rem;

  190. }

  191. 

  192. /* @end */

  193. 

  194. /* @group Tables */

  195. 

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

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

  198.   vertical-align: top;

  199. }

  200. 

  201. /* @end */

  202. 

  203. /* @group Attachment details */

  204. 

  205. #edit-display-settings-title {

  206.   color: #3371ff;

  207. }

  208. 

  209. /* @end */

  210. 

  211. /* @group Attachment details tabs

  212.  *

  213.  * The tabs that switch between sections

  214.  *

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

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

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

  218.  */

  219. 

  220. .views-tabs {

  221.   display: flex;

  222.   overflow: visible;

  223.   flex-wrap: wrap;

  224.   margin: 0 1.5rem 0 0; /* LTR */

  225.   padding: 0;

  226.   list-style: none;

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

  228.   border-bottom: 0 none;

  229. }

  230. 

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

  232.   margin-right: 0;

  233.   margin-left: 1.5rem;

  234.   text-align: right;

  235. }

  236. 

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

  238.   text-decoration: line-through;

  239. }

  240. 

  241. .views-tabs li,

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

  243.   width: auto;

  244.   padding: 0;

  245.   border: 0;

  246.   background: transparent;

  247. }

  248. 

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

  250.   margin: 0;

  251. }

  252. 

  253. .views-tabs li {

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

  255. }

  256. 

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

  258.   margin-right: 0.375rem;

  259.   margin-left: 0.3125rem;

  260. }

  261. 

  262. .views-tabs li + li {

  263.   border-top: 0;

  264. }

  265. 

  266. .views-tabs li:hover {

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

  268.   border: 0;

  269. }

  270. 

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

  272.   padding-right: 0;

  273. }

  274. 

  275. .views-tabs a {

  276.   display: inline-block;

  277.   padding: 0.625rem;

  278.   border: 1px solid #cbcbcb;

  279.   border-radius: 0.4375rem;

  280.   font-size: small;

  281.   line-height: 1.3333;

  282. }

  283. 

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

  285. 

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

  287. .views-tabs .error {

  288.   padding: 0.5rem;

  289.   border: 2px solid #ed541d;

  290. }

  291. 

  292. .views-tabs a:focus {

  293.   outline: none;

  294. }

  295. 

  296. .views-tabs li a {

  297.   text-decoration: none;

  298.   background-color: #fff;

  299. }

  300. 

  301. .views-tabs li a:hover,

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

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

  304.   color: #fff;

  305.   background-color: #555;

  306. }

  307. 

  308. .views-tabs .add {

  309.   position: relative;

  310. }

  311. 

  312. .views-tabs .add a {

  313.   padding: 0.5625rem 0.8125rem 0.5625rem 0.5625rem;

  314.   color: #55565b;

  315.   border: none;

  316.   border-radius: 2px;

  317.   background-color: transparent;

  318.   font-size: 1rem;

  319.   font-weight: 700;

  320. }

  321. 

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

  323.   display: inline-block;

  324.   width: 1em;

  325.   height: calc(1em - 2px);

  326.   content: "";

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

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

  329. }

  330. 

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

  332.   color: #0036b1;

  333.   background-color: #f5f8ff;

  334. }

  335. 

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

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

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

  339. }

  340. 

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

  342.   background-color: #e5edff;

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

  344. }

  345. 

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

  347.   color: #fff;

  348.   background-color: #003ecc;

  349. }

  350. 

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

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

  353. }

  354. 

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

  356. 

  357. .views-tabs .add .icon.add {

  358.   display: none;

  359. }

  360. 

  361. .views-tabs .action-list {

  362.   position: absolute;

  363.   z-index: 50;

  364.   top: 2.375rem;

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

  366.   margin: 0;

  367.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  368. }

  369. 

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

  371.   right: 0;

  372.   left: auto;

  373. }

  374. 

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

  376.   display: block;

  377. }

  378. 

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

  380.   border-width: 0 1px;

  381.   border-style: solid;

  382.   border-color: #cbcbcb;

  383.   background-color: #fff;

  384. }

  385. 

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

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

  388.   border-radius: 0 2px 0 0; /* LTR */

  389. }

  390. 

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

  392.   border-radius: 0 0 0 2px;

  393. }

  394. 

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

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

  397.   padding-bottom: 0.4rem;

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

  399.   border-bottom-right-radius: 2px;

  400.   border-bottom-left-radius: 2px;

  401. }

  402. 

  403. .views-tabs__action-list-button {

  404.   width: 100%;

  405.   margin: 0;

  406.   padding: 0.75rem 1.5rem;

  407.   text-align: left;

  408.   border: medium none;

  409.   border-radius: 0;

  410.   background: none repeat scroll 0 0 transparent;

  411.   font-weight: normal;

  412. }

  413. 

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

  415. 

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

  417.   margin: 0;

  418. }

  419. 

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

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

  422.   color: #fff;

  423.   background-color: #003ecc;

  424. }

  425. 

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

  427. 

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

  429.   box-shadow: none;

  430. }

  431. 

  432. /* @end */

  433. 

  434. /* @group Attachment buckets

  435.  *

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

  437.  */

  438. 

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

  440.   padding: 2px 0.375rem 0.25rem;

  441. }

  442. 

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

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

  445. }

  446. 

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

  448.   margin-right: 0.1875rem;

  449.   margin-left: 0;

  450. }

  451. 

  452. /* @end */

  453. 

  454. /* @group Rearrange filter criteria */

  455. 

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

  457.   border-bottom: 0;

  458. }

  459. 

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

  461.   border-top: 0.0625rem solid #d3d4d9;

  462. }

  463. 

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

  465.   background: inherit;

  466. }

  467. 

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

  469.   float: left;

  470.   margin: 0 0 1em;

  471.   padding: 0;

  472. }

  473. 

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

  475.   float: right;

  476. }

  477. 

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

  479.   position: relative;

  480. }

  481. 

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

  483.   border: medium none;

  484. }

  485. 

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

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

  488. }

  489. 

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

  491.   border-right: 0;

  492.   border-right: initial;

  493.   border-left: medium none;

  494. }

  495. 

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

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

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

  499. }

  500. 

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

  502.   background-color: #fe7 !important;

  503. }

  504. 

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

  506.   background-color: #ffb !important;

  507. }

  508. 

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

  510.   vertical-align: middle;

  511. }

  512. 

  513. /* @end */

  514. 

  515. /* @group Live preview elements */

  516. 

  517. .views-query-info pre {

  518.   margin-top: 0;

  519.   margin-bottom: 0;

  520. }

  521. 

  522. /* @group Query info table */

  523. 

  524. .views-query-info table {

  525.   border-radius: 0.4375rem;

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

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

  528. }

  529. 

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

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

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

  533. }

  534. 

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

  536.   border-right: 0;

  537.   border-right: initial;

  538.   border-left: 0 none;

  539. }

  540. 

  541. /* @end */

  542. 

  543. /* @end */

  544. 

  545. /* @group Add view */

  546. 

  547. .form-item-page-create,

  548. .form-item-block-create {

  549.   margin-top: 0.8125rem;

  550. }

  551. 

  552. /* @end */

  553. 

  554. /* @group Modal dialog box

  555.  *

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

  557.  */

  558. 

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

  560.   padding-top: 0.25rem;

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

  562.   padding-bottom: 0.25rem;

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

  564. }

  565. 

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

  567.   padding-right: 0.25rem;

  568.   padding-left: 0.5rem;

  569. }

  570. 

  571. /* @end */

  572. 

  573. /* @group Grouping styles

  574.  *

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

  576.  * filters.

  577.  */

  578. 

  579. .views-config-group-region {

  580.   display: table;

  581.   margin: 1.5rem 0;

  582.   border: 0.0625rem solid #d3d4d9;

  583.   border-collapse: collapse;

  584. }

  585. 

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

  587.   position: relative;

  588.   display: table-cell;

  589.   padding: 1.5rem;

  590.   border: 0.0625rem solid #d3d4d9;

  591. }

  592. 

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

  594.   padding-right: 3rem;

  595.   border-right-width: 0;

  596. }

  597. 

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

  599.   padding-right: 1.5rem;

  600.   padding-left: 3rem;

  601.   border-right-width: 0.0625rem;

  602.   border-left-width: 0;

  603. }

  604. 

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

  606.   padding: 0;

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

  608. }

  609. 

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

  611.   border-right-width: 0;

  612.   border-left-width: 0.0625rem;

  613. }

  614. 

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

  616.   margin-right: 1.5rem; /* LTR */

  617.   margin-left: 3rem; /* LTR */

  618. }

  619. 

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

  621.   margin-right: 3rem; /* LTR */

  622.   margin-left: 1.5rem; /* LTR */

  623. }

  624. 

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

  626.   position: absolute;

  627.   top: 0;

  628.   left: 0;

  629.   width: 0.0625rem;

  630.   height: 100%;

  631.   content: "";

  632.   border-left: 0.0625rem solid #d3d4d9;

  633. }

  634. 

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

  636.   right: 0;

  637. }

  638. 

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

  640.   position: absolute;

  641.   z-index: 1;

  642.   top: 3.8rem;

  643.   left: -1rem; /* LTR */

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

  645.   content: ">";

  646.   color: #828388;

  647.   border: 0.0625rem solid #d3d4d9;

  648.   background: #fff;

  649.   font-size: 2.027rem;

  650.   font-weight: bold;

  651.   line-height: 2.027rem;

  652. }

  653. 

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

  655.   right: -1rem;

  656.   left: auto;

  657.   padding-right: 0.4rem;

  658.   padding-left: 0.3rem;

  659. }

  660. 

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

  662.   /**

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

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

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

  666.    * to with the Seven theme.

  667.    */

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

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

  670.     content: "";

  671.     border: none;

  672.   }

  673.   .views-config-group-region,

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

  675.     border: none;

  676.   }

  677. 

  678.   /**

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

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

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

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

  683.    */

  684.   .views-display-top {

  685.     flex-wrap: nowrap;

  686.     justify-content: flex-start;

  687.   }

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

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

  690.   }

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

  692.     margin-right: auto;

  693.     margin-left: 0.25rem;

  694.   }

  695. }

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