views-ui.pcss.css

Same filename in other branches
  1. 9 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
 */

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

/* @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-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
 *
 * @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 {
  overflow: visible;
  margin: 0 200px 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: 200px;
  text-align: right;
}
.views-tabs > li {
  float: left; /* LTR */
  padding: 0;
  border-right: 0 none; /* LTR */
}
[dir="rtl"] .views-tabs > li {
  float: right;
  border-right: 1px solid #bfbfbf;
  border-left: 0 none;
}
.views-tabs .open > a {
  position: relative;
  z-index: 51;
}
.views-tabs .views-display-deleted-link {
  text-decoration: line-through;
}
.views-tabs .add {
  position: relative;
}
.views-tabs .action-list {
  position: absolute;
  z-index: 50;
  top: 23px;
  left: 0; /* LTR */
  margin: 0;
}
[dir="rtl"] .views-tabs .action-list {
  right: 0;
  left: auto;
}
.views-tabs .action-list li {
  display: block;
}

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

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

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

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

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

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

.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: 3px 7px;
  border: 1px 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: 1px 6px;
  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 .open > a {
  position: relative;
  border-bottom: 1px solid transparent;
  background-color: #f1f1f1;
}
.views-tabs .open > a:hover {
  color: #0074bd;
  background-color: #f1f1f1;
}
.views-tabs .action-list li {
  padding: 2px 9px;
  border-width: 0 1px;
  border-style: solid;
  border-color: #cbcbcb;
  background-color: #f1f1f1;
}
.views-tabs .action-list li:first-child {
  border-width: 1px 1px 0;
}
.views-displays .action-list li:last-child {
  border-width: 0 1px 1px;
}
.views-tabs .action-list li:last-child {
  border-width: 0 1px 1px;
}
.views-tabs .action-list input.form-submit {
  margin: 0;
  padding: 0;
  border: medium none;
  background: none repeat scroll 0 0 transparent;
}
.views-tabs .action-list input.form-submit:hover {
  box-shadow: none;
}
.views-tabs .action-list li:hover {
  background-color: #ddd;
}

.views-tabs a:hover > .icon.add {
  background-position: center -25px;
}
.views-tabs .open a:hover > .icon.add {
  background-position: center 3px;
}

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

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. /* @group Dependent options

  44.  */

  45. 

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

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

  48.  */

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

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

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

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

  53. }

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

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

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

  57.   margin-right: 1.5em;

  58.   margin-left: 0;

  59. }

  60. 

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

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

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

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

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

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

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

  68.   margin-top: 6px;

  69.   margin-bottom: 6px;

  70. }

  71. 

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

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

  74.   margin-top: 2px;

  75.   margin-bottom: 2px;

  76. }

  77. 

  78. /* @end */

  79. 

  80. /* @group Lists */

  81. 

  82. .views-admin ul.secondary,

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

  84.   margin: 0;

  85.   padding: 0;

  86. }

  87. 

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

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

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

  91.   padding: 2px 7px 3px;

  92. }

  93. 

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

  95.   color: #0074bd;

  96. }

  97. 

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

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

  100.   border: 1px solid transparent;

  101. }

  102. 

  103. .views-admin .links li {

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

  105. }

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

  107.   padding-left: 0;

  108. }

  109. 

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

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

  112. }

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

  114.   padding-left: 12px;

  115. }

  116. 

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

  118.   float: left; /* LTR */

  119.   background-color: transparent;

  120. }

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

  122.   float: right;

  123. }

  124. 

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

  126.   float: none;

  127.   margin: 0;

  128. }

  129. 

  130. /* @end */

  131. 

  132. /* @group Tables */

  133. 

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

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

  136.   vertical-align: top;

  137. }

  138. 

  139. /* @end */

  140. 

  141. /* @group Attachment details */

  142. 

  143. #edit-display-settings-title {

  144.   color: #008bcb;

  145. }

  146. 

  147. /* @end */

  148. 

  149. /* @group Attachment details tabs

  150.  *

  151.  * The tabs that switch between sections

  152.  *

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

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

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

  156.  */

  157. 

  158. .views-tabs {

  159.   overflow: visible;

  160.   margin: 0 200px 0 0; /* LTR */

  161.   padding: 0;

  162.   list-style: none;

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

  164.   border-bottom: 0 none;

  165. }

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

  167.   margin-right: 0;

  168.   margin-left: 200px;

  169.   text-align: right;

  170. }

  171. .views-tabs > li {

  172.   float: left; /* LTR */

  173.   padding: 0;

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

  175. }

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

  177.   float: right;

  178.   border-right: 1px solid #bfbfbf;

  179.   border-left: 0 none;

  180. }

  181. .views-tabs .open > a {

  182.   position: relative;

  183.   z-index: 51;

  184. }

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

  186.   text-decoration: line-through;

  187. }

  188. .views-tabs .add {

  189.   position: relative;

  190. }

  191. .views-tabs .action-list {

  192.   position: absolute;

  193.   z-index: 50;

  194.   top: 23px;

  195.   left: 0; /* LTR */

  196.   margin: 0;

  197. }

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

  199.   right: 0;

  200.   left: auto;

  201. }

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

  203.   display: block;

  204. }

  205. 

  206. .views-tab a:hover > .icon.add {

  207.   background-position: center -25px;

  208. }

  209. 

  210. .views-tab .open > a {

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

  212. }

  213. 

  214. .views-tab .open > a:hover,

  215. .views-tab .open > a:focus {

  216.   color: #008bcb;

  217.   background-color: #f1f1f1;

  218. }

  219. 

  220. .views-tab .action-list li:first-child {

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

  222. }

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

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

  225. }

  226. 

  227. .views-tab .action-list li:last-child {

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

  229. }

  230. 

  231. .views-tab .action-list input.form-submit {

  232.   color: #008bcb;

  233. }

  234. 

  235. .views-tabs li,

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

  237.   width: auto;

  238.   padding: 0;

  239.   border: 0;

  240.   background: transparent;

  241. }

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

  243.   margin: 0;

  244. }

  245. .views-tabs li {

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

  247. }

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

  249.   margin-right: 6px;

  250.   margin-left: 5px;

  251. }

  252. .views-tabs li + li {

  253.   border-top: 0;

  254. }

  255. .views-tabs li:hover {

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

  257.   border: 0;

  258. }

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

  260.   padding-right: 0;

  261. }

  262. .views-tabs a {

  263.   display: inline-block;

  264.   padding: 3px 7px;

  265.   border: 1px solid #cbcbcb;

  266.   border-radius: 7px;

  267.   font-size: small;

  268.   line-height: 1.3333;

  269. }

  270. 

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

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

  273. .views-tabs .error {

  274.   padding: 1px 6px;

  275.   border: 2px solid #ed541d;

  276. }

  277. .views-tabs a:focus {

  278.   outline: none;

  279. }

  280. .views-tabs li a {

  281.   text-decoration: none;

  282.   background-color: #fff;

  283. }

  284. .views-tabs li a:hover,

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

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

  287.   color: #fff;

  288.   background-color: #555;

  289. }

  290. .views-tabs .open > a {

  291.   position: relative;

  292.   border-bottom: 1px solid transparent;

  293.   background-color: #f1f1f1;

  294. }

  295. .views-tabs .open > a:hover {

  296.   color: #0074bd;

  297.   background-color: #f1f1f1;

  298. }

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

  300.   padding: 2px 9px;

  301.   border-width: 0 1px;

  302.   border-style: solid;

  303.   border-color: #cbcbcb;

  304.   background-color: #f1f1f1;

  305. }

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

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

  308. }

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

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

  311. }

  312. .views-tabs .action-list li:last-child {

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

  314. }

  315. .views-tabs .action-list input.form-submit {

  316.   margin: 0;

  317.   padding: 0;

  318.   border: medium none;

  319.   background: none repeat scroll 0 0 transparent;

  320. }

  321. .views-tabs .action-list input.form-submit:hover {

  322.   box-shadow: none;

  323. }

  324. .views-tabs .action-list li:hover {

  325.   background-color: #ddd;

  326. }

  327. 

  328. .views-tabs a:hover > .icon.add {

  329.   background-position: center -25px;

  330. }

  331. .views-tabs .open a:hover > .icon.add {

  332.   background-position: center 3px;

  333. }

  334. 

  335. /* @end */

  336. 

  337. /* @group Attachment buckets

  338.  *

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

  340.  */

  341. 

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

  343.   text-transform: uppercase;

  344. }

  345. 

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

  347.   padding: 2px 6px 4px;

  348. }

  349. 

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

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

  352. }

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

  354.   margin-right: 3px;

  355.   margin-left: 0;

  356. }

  357. 

  358. /* @end */

  359. 

  360. /* @group Rearrange filter criteria */

  361. 

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

  363.   float: left;

  364.   margin: 0 0 1em;

  365.   padding: 0;

  366. }

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

  368.   float: right;

  369.   margin-bottom: 1em;

  370. }

  371. 

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

  373.   border: medium none;

  374. }

  375. 

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

  377.   border: medium none;

  378. }

  379. 

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

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

  382. }

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

  384.   border-right: initial;

  385.   border-left: medium none;

  386. }

  387. 

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

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

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

  391. }

  392. 

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

  394.   background-color: #fe7 !important;

  395. }

  396. 

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

  398.   background-color: #ffb !important;

  399. }

  400. 

  401. /* @end */

  402. 

  403. /* @group Live preview elements */

  404. 

  405. .views-query-info pre {

  406.   margin-top: 0;

  407.   margin-bottom: 0;

  408. }

  409. 

  410. /* @group Query info table */

  411. 

  412. .views-query-info table {

  413.   border-radius: 7px;

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

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

  416. }

  417. 

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

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

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

  421. }

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

  423.   border-right: initial;

  424.   border-left: 0 none;

  425. }

  426. 

  427. /* @end */

  428. 

  429. /* @end */

  430. 

  431. /* @group Add view */

  432. 

  433. .form-item-page-create,

  434. .form-item-block-create {

  435.   margin-top: 13px;

  436. }

  437. 

  438. /* @end */

  439. 

  440. /* @group Modal dialog box

  441.  *

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

  443.  */

  444. 

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

  446.   padding-top: 4px;

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

  448.   padding-bottom: 4px;

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

  450. }

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

  452.   padding-right: 4px;

  453.   padding-left: 8px;

  454. }

  455. 

  456. /* @end */

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