views-ui.css

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

/* @group Forms */

/**
 * Seven 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-add-form details details .seven-details__wrapper {
  padding-right: 0;
  padding-left: 0;
}

.views-display-tab details.box-padding .seven-details__wrapper {
  padding: 0;
}

.views-admin input.form-submit,
.views-ui-dialog input.form-submit,
.views-admin a.button,
.views-ui-dialog a.button {
  margin-top: 0;
  margin-right: 0; /* LTR */
  margin-bottom: 0;
}
[dir="rtl"] .views-admin input.form-submit,
[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-admin input.form-submit:first-child,
[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;
}

.form-radios > .form-item {
  margin-top: 3px;
}

/* @group Dependent options
 */

/* This is necessary to supersede the Seven .form-item
 * reset declaration that sets the margin to zero.
 */
.form-item-options-expose-required,
.form-item-options-expose-label,
.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-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-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 ul.secondary,
.views-admin .item-list ul {
  margin: 0;
  padding: 0;
}

.views-displays ul.secondary li a,
.views-displays ul.secondary li.is-active a,
.views-displays ul.secondary li.is-active a.is-active {
  padding: 2px 7px 3px;
}

.views-displays ul.secondary li a {
  color: #0074bd;
}

.views-displays ul.secondary li.is-active a,
.views-displays ul.secondary li.is-active a.is-active {
  border: 1px solid transparent;
}

.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 ul.secondary {
  float: left; /* LTR */
  background-color: transparent;
}
[dir="rtl"] .views-display-top ul.secondary {
  float: right;
}

.views-display-top .secondary .action-list li {
  float: none;
  margin: 0;
}

/* @end */

/* @group Tables */

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

/* @end */

/* @group Attachment details */

#edit-display-settings-title {
  color: #008bcb;
}

/* @end */

/* @group Attachment details tabs
 *
 * The tabs that switch between sections
 */

.views-displays .secondary {
  text-align: left; /* LTR */
}
[dir="rtl"] .views-displays .secondary {
  text-align: right;
}

.views-admin .icon.add {
  background-position: center 3px;
}

.views-displays .secondary a:hover > .icon.add {
  background-position: center -25px;
}

.views-displays .secondary .open > a {
  border-radius: 7px 7px 0 0;
}

.views-displays .secondary .open > a:hover,
.views-displays .secondary .open > a:focus {
  color: #008bcb;
  background-color: #f1f1f1;
}

.views-displays .secondary .action-list li:first-child {
  border-radius: 0 7px 0 0; /* LTR */
}
[dir="rtl"] .views-displays .secondary .action-list li:first-child {
  border-radius: 7px 0 0 0;
}

.views-displays .secondary .action-list li:last-child {
  border-radius: 0 0 7px 7px;
}

.views-displays .secondary .action-list input.form-submit {
  color: #008bcb;
}

/* @end */

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

.views-ui-display-tab-bucket h3 {
  text-transform: uppercase;
}

.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 .action-links {
  float: left;
  margin: 0 0 1em;
  padding: 0;
}
.views-ui-rearrange-filter-form .tabledrag-toggle-weight-wrapper {
  float: right;
  margin-bottom: 1em;
}

.views-ui-rearrange-filter-form table {
  border: medium none;
}

.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;
}

/* @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 Seven 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 Seven'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 */

File

core/themes/seven/css/components/views-ui.css

View source 
  1. /**

  2.  * Views styling

  3.  */

  4. 

  5. /* @group Forms */

  6. 

  7. /**

  8.  * Seven 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-add-form details details .seven-details__wrapper {

  25.   padding-right: 0;

  26.   padding-left: 0;

  27. }

  28. 

  29. .views-display-tab details.box-padding .seven-details__wrapper {

  30.   padding: 0;

  31. }

  32. 

  33. .views-admin input.form-submit,

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

  35. .views-admin a.button,

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

  37.   margin-top: 0;

  38.   margin-right: 0; /* LTR */

  39.   margin-bottom: 0;

  40. }

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

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

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

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

  45.   margin-right: 1em;

  46.   margin-left: 0;

  47. }

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

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

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

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

  52.   margin-right: 0;

  53. }

  54. 

  55. .form-radios > .form-item {

  56.   margin-top: 3px;

  57. }

  58. 

  59. /* @group Dependent options

  60.  */

  61. 

  62. /* This is necessary to supersede the Seven .form-item

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

  64.  */

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

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

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

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

  69. }

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

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

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

  73.   margin-right: 1.5em;

  74.   margin-left: 0;

  75. }

  76. 

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

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

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

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

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

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

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

  84.   margin-top: 6px;

  85.   margin-bottom: 6px;

  86. }

  87. 

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

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

  90.   margin-top: 2px;

  91.   margin-bottom: 2px;

  92. }

  93. 

  94. /* @end */

  95. 

  96. /* @group Lists */

  97. 

  98. .views-admin ul.secondary,

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

  100.   margin: 0;

  101.   padding: 0;

  102. }

  103. 

  104. .views-displays ul.secondary li a,

  105. .views-displays ul.secondary li.is-active a,

  106. .views-displays ul.secondary li.is-active a.is-active {

  107.   padding: 2px 7px 3px;

  108. }

  109. 

  110. .views-displays ul.secondary li a {

  111.   color: #0074bd;

  112. }

  113. 

  114. .views-displays ul.secondary li.is-active a,

  115. .views-displays ul.secondary li.is-active a.is-active {

  116.   border: 1px solid transparent;

  117. }

  118. 

  119. .views-admin .links li {

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

  121. }

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

  123.   padding-left: 0;

  124. }

  125. 

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

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

  128. }

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

  130.   padding-left: 12px;

  131. }

  132. 

  133. .views-display-top ul.secondary {

  134.   float: left; /* LTR */

  135.   background-color: transparent;

  136. }

  137. [dir="rtl"] .views-display-top ul.secondary {

  138.   float: right;

  139. }

  140. 

  141. .views-display-top .secondary .action-list li {

  142.   float: none;

  143.   margin: 0;

  144. }

  145. 

  146. /* @end */

  147. 

  148. /* @group Tables */

  149. 

  150. .views-ui-rearrange-filter-form table td,

  151. .views-ui-rearrange-filter-form table th {

  152.   vertical-align: top;

  153. }

  154. 

  155. /* @end */

  156. 

  157. /* @group Attachment details */

  158. 

  159. #edit-display-settings-title {

  160.   color: #008bcb;

  161. }

  162. 

  163. /* @end */

  164. 

  165. /* @group Attachment details tabs

  166.  *

  167.  * The tabs that switch between sections

  168.  */

  169. 

  170. .views-displays .secondary {

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

  172. }

  173. [dir="rtl"] .views-displays .secondary {

  174.   text-align: right;

  175. }

  176. 

  177. .views-admin .icon.add {

  178.   background-position: center 3px;

  179. }

  180. 

  181. .views-displays .secondary a:hover > .icon.add {

  182.   background-position: center -25px;

  183. }

  184. 

  185. .views-displays .secondary .open > a {

  186.   border-radius: 7px 7px 0 0;

  187. }

  188. 

  189. .views-displays .secondary .open > a:hover,

  190. .views-displays .secondary .open > a:focus {

  191.   color: #008bcb;

  192.   background-color: #f1f1f1;

  193. }

  194. 

  195. .views-displays .secondary .action-list li:first-child {

  196.   border-radius: 0 7px 0 0; /* LTR */

  197. }

  198. [dir="rtl"] .views-displays .secondary .action-list li:first-child {

  199.   border-radius: 7px 0 0 0;

  200. }

  201. 

  202. .views-displays .secondary .action-list li:last-child {

  203.   border-radius: 0 0 7px 7px;

  204. }

  205. 

  206. .views-displays .secondary .action-list input.form-submit {

  207.   color: #008bcb;

  208. }

  209. 

  210. /* @end */

  211. 

  212. /* @group Attachment buckets

  213.  *

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

  215.  */

  216. 

  217. .views-ui-display-tab-bucket h3 {

  218.   text-transform: uppercase;

  219. }

  220. 

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

  222.   padding: 2px 6px 4px;

  223. }

  224. 

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

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

  227. }

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

  229.   margin-right: 3px;

  230.   margin-left: 0;

  231. }

  232. 

  233. /* @end */

  234. 

  235. /* @group Rearrange filter criteria */

  236. 

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

  238.   float: left;

  239.   margin: 0 0 1em;

  240.   padding: 0;

  241. }

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

  243.   float: right;

  244.   margin-bottom: 1em;

  245. }

  246. 

  247. .views-ui-rearrange-filter-form table {

  248.   border: medium none;

  249. }

  250. 

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

  252.   border: medium none;

  253. }

  254. 

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

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

  257. }

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

  259.   border-right: initial;

  260.   border-left: medium none;

  261. }

  262. 

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

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

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

  266. }

  267. 

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

  269.   background-color: #fe7 !important;

  270. }

  271. 

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

  273.   background-color: #ffb !important;

  274. }

  275. 

  276. /* @end */

  277. 

  278. /* @group Live preview elements */

  279. 

  280. .views-query-info pre {

  281.   margin-top: 0;

  282.   margin-bottom: 0;

  283. }

  284. 

  285. /* @group Query info table */

  286. 

  287. .views-query-info table {

  288.   border-radius: 7px;

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

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

  291. }

  292. 

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

  294.   /* Fixes a Seven style that bleeds down into this table unnecessarily */

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

  296. }

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

  298.   border-right: initial;

  299.   border-left: 0 none;

  300. }

  301. 

  302. /* @end */

  303. 

  304. /* @end */

  305. 

  306. /* @group Add view */

  307. 

  308. .form-item-page-create,

  309. .form-item-block-create {

  310.   margin-top: 13px;

  311. }

  312. 

  313. /* @end */

  314. 

  315. /* @group Modal dialog box

  316.  *

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

  318.  */

  319. 

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

  321.   padding-top: 4px;

  322.   /* This selector is aggressive because Seven's reset for .form-items is aggressive. */

  323.   padding-bottom: 4px;

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

  325. }

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

  327.   padding-right: 4px;

  328.   padding-left: 8px;

  329. }

  330. 

  331. /* @end */

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