views_ui.admin.theme.css

Same filename in this branch
  1. 9 core/themes/stable9/css/views_ui/views_ui.admin.theme.css
  2. 9 core/themes/stable/css/views_ui/views_ui.admin.theme.css
  3. 9 core/modules/views_ui/css/views_ui.admin.theme.css
Same filename and directory in other branches
  1. 11.x core/themes/stable9/css/views_ui/views_ui.admin.theme.css
  2. 11.x core/themes/claro/css/theme/views_ui.admin.theme.css
  3. 11.x core/modules/views_ui/css/views_ui.admin.theme.css
  4. 10 core/themes/stable9/css/views_ui/views_ui.admin.theme.css
  5. 10 core/themes/claro/css/theme/views_ui.admin.theme.css
  6. 10 core/modules/views_ui/css/views_ui.admin.theme.css
  7. 8.9.x core/themes/claro/css/theme/views_ui.admin.theme.css
  8. 8.9.x core/themes/stable/css/views_ui/views_ui.admin.theme.css
  9. 8.9.x core/modules/views_ui/css/views_ui.admin.theme.css

View UI admin theme.

Replaces the styles provided by the views_ui module.

File

core/themes/claro/css/theme/views_ui.admin.theme.css

View on git.drupalcode.org
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.  * @file

  10.  * View UI admin theme.

  11.  *

  12.  * Replaces the styles provided by the views_ui module.

  13.  */

  14. 

  15. .views-admin .links {

  16.   margin: 0;

  17.   list-style: none outside none;

  18. }

  19. 

  20. .views-admin a:hover {

  21.   text-decoration: none;

  22. }

  23. 

  24. .views-admin .icon {

  25.   width: 1rem;

  26.   height: 1rem;

  27. }

  28. 

  29. .views-admin .icon,

  30. .views-admin .icon-text {

  31.   background-image: url(../../../../modules/views_ui/images/sprites.png);

  32.   background-repeat: no-repeat;

  33.   background-attachment: scroll;

  34.   background-position: left top; /* LTR */

  35. }

  36. 

  37. [dir="rtl"] .views-admin .icon,

  38. [dir="rtl"] .views-admin .icon-text {

  39.   background-position: right top;

  40. }

  41. 

  42. .views-admin a.icon {

  43.   border: 1px solid #ddd;

  44.   border-radius: 0.25rem;

  45.   background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;

  46.   box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;

  47. }

  48. 

  49. .views-admin a.icon:hover {

  50.   border-color: #d0d0d0;

  51.   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3333) inset;

  52. }

  53. 

  54. .views-admin a.icon:active {

  55.   border-color: #c0c0c0;

  56. }

  57. 

  58. .views-admin span.icon {

  59.   position: relative;

  60.   float: left; /* LTR */

  61. }

  62. 

  63. [dir="rtl"] .views-admin span.icon {

  64.   float: right;

  65. }

  66. 

  67. .views-admin .icon.compact {

  68.   display: block;

  69.   overflow: hidden;

  70.   text-indent: -624.9375rem;

  71.   direction: ltr;

  72. }

  73. 

  74. /* Targets any element with an icon -> text combo */

  75. 

  76. .views-admin .icon-text {

  77.   padding-left: 1.1875rem; /* LTR */

  78. }

  79. 

  80. [dir="rtl"] .views-admin .icon-text {

  81.   padding-right: 1.1875rem;

  82.   padding-left: 0;

  83. }

  84. 

  85. .views-admin .icon.linked {

  86.   background-position: center -153px;

  87. }

  88. 

  89. .views-admin .icon.unlinked {

  90.   background-position: center -195px;

  91. }

  92. 

  93. .views-admin .icon.delete {

  94.   background-position: center -52px;

  95. }

  96. 

  97. .views-admin a.icon.delete {

  98.   background-position: center -52px, left top; /* LTR */

  99. }

  100. 

  101. [dir="rtl"] .views-admin a.icon.delete {

  102.   background-position: center -52px, right top;

  103. }

  104. 

  105. .views-admin .icon.rearrange {

  106.   background-position: center -111px;

  107. }

  108. 

  109. .views-admin a.icon.rearrange {

  110.   background-position: center -111px, left top; /* LTR */

  111. }

  112. 

  113. [dir="rtl"] .views-admin a.icon.rearrange {

  114.   background-position: center -111px, right top;

  115. }

  116. 

  117. details.box-padding {

  118.   border: none;

  119. }

  120. 

  121. .views-admin details details {

  122.   margin-bottom: 0;

  123. }

  124. 

  125. .form-item {

  126.   margin-top: 0.5625rem;

  127.   padding-top: 0;

  128.   padding-bottom: 0;

  129. }

  130. 

  131. .form-type-checkbox {

  132.   margin-top: 0.375rem;

  133. }

  134. 

  135. .form-checkbox,

  136. .form-radio {

  137.   vertical-align: baseline;

  138. }

  139. 

  140. /* Indent form elements so they're directly underneath the label of the checkbox that reveals them */

  141. 

  142. .views-admin .form-type-checkbox + .form-wrapper {

  143.   margin-left: 1rem; /* LTR */

  144. }

  145. 

  146. [dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {

  147.   margin-right: 1rem;

  148.   margin-left: 0;

  149. }

  150. 

  151. /* Hide 'remove' checkboxes. */

  152. 

  153. .views-remove-checkbox {

  154.   display: none;

  155. }

  156. 

  157. /* sizes the labels of checkboxes and radio button to the height of the text */

  158. 

  159. .views-admin .form-type-checkbox label,

  160. .views-admin .form-type-radio label {

  161.   line-height: 2;

  162. }

  163. 

  164. .views-admin-dependent .form-item {

  165.   margin-top: 0.375rem;

  166.   margin-bottom: 0.375rem;

  167. }

  168. 

  169. .views-ui-view-name h3 {

  170.   margin: 0.25em 0;

  171.   font-weight: bold;

  172. }

  173. 

  174. .view-changed {

  175.   margin-bottom: 1.3125rem;

  176. }

  177. 

  178. .views-admin .unit-title {

  179.   margin-top: 1.125rem;

  180.   margin-bottom: 0;

  181.   font-size: 0.9375rem;

  182.   line-height: 1.6154;

  183. }

  184. 

  185. .views-ui-view-displays ul {

  186.   margin-left: 0; /* LTR */

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

  188.   list-style: none;

  189. }

  190. 

  191. [dir="rtl"] .views-ui-view-displays ul {

  192.   margin-right: 0;

  193.   margin-left: inherit;

  194.   padding-right: 0;

  195.   padding-left: inherit;

  196. }

  197. 

  198. /* These header classes are ambiguous and should be scoped to th elements */

  199. 

  200. .views-ui-name {

  201.   width: 20%;

  202. }

  203. 

  204. .views-ui-description {

  205.   width: 30%;

  206. }

  207. 

  208. .views-ui-machine-name {

  209.   width: 15%;

  210. }

  211. 

  212. .views-ui-displays {

  213.   width: 25%;

  214. }

  215. 

  216. .views-ui-operations {

  217.   width: 10%;

  218. }

  219. 

  220. /**

  221.  * I wish this didn't have to be so specific

  222.  */

  223. 

  224. .form-item-description-enable + .form-item-description {

  225.   margin-top: 0;

  226. }

  227. 

  228. .form-item-description-enable label {

  229.   font-weight: bold;

  230. }

  231. 

  232. .form-item-page-create,

  233. .form-item-block-create {

  234.   margin-top: 0.8125rem;

  235. }

  236. 

  237. .form-item-page-create label,

  238. .form-item-block-create label,

  239. .form-item-rest-export-create label {

  240.   font-weight: bold;

  241. }

  242. 

  243. /* This makes the form elements after the "Display Format" label flow underneath the label */

  244. 

  245. .form-item-page-style-style-plugin > label,

  246. .form-item-block-style-style-plugin > label {

  247.   display: block;

  248. }

  249. 

  250. .views-attachment .options-set label {

  251.   font-weight: normal;

  252. }

  253. 

  254. /* Styling for the form that allows views filters to be rearranged. */

  255. 

  256. .group-populated {

  257.   display: none;

  258. }

  259. 

  260. td.group-title {

  261.   font-weight: bold;

  262. }

  263. 

  264. .views-ui-dialog td.group-title {

  265.   height: 1px;

  266.   margin: 0;

  267.   padding: 0;

  268. }

  269. 

  270. .views-ui-dialog td.group-title span {

  271.   display: block;

  272.   overflow: hidden;

  273.   height: 1px;

  274. }

  275. 

  276. .group-message .form-submit,

  277. .views-remove-group-link,

  278. .views-add-group {

  279.   float: right; /* LTR */

  280.   clear: both;

  281. }

  282. 

  283. [dir="rtl"] .group-message .form-submit,

  284. [dir="rtl"] .views-remove-group-link,

  285. [dir="rtl"] .views-add-group {

  286.   float: left;

  287. }

  288. 

  289. .views-operator-label {

  290.   position: absolute;

  291.   z-index: 1;

  292.   bottom: -0.8125rem;

  293.   padding: 0.5px 0.375rem;

  294.   text-transform: uppercase;

  295.   border: 1px solid #d3d4d9;

  296.   background: #fff;

  297.   font-weight: bold;

  298.   font-style: italic;

  299. }

  300. 

  301. .grouped-description,

  302. .exposed-description {

  303.   float: left; /* LTR */

  304.   padding-top: 0.1875rem;

  305.   padding-right: 0.625rem; /* LTR */

  306. }

  307. 

  308. [dir="rtl"] .grouped-description,

  309. [dir="rtl"] .exposed-description {

  310.   float: right;

  311.   padding-right: 0;

  312.   padding-left: 0.625rem;

  313. }

  314. 

  315. .views-displays {

  316.   padding-bottom: 2.25rem;

  317.   border-top: 1px solid rgba(212, 212, 218, 0.8);

  318.   border-right: 1px solid rgba(212, 212, 218, 0.8);

  319.   border-left: 1px solid rgba(212, 212, 218, 0.8);

  320. }

  321. 

  322. .views-display-top {

  323.   position: relative;

  324.   display: flex;

  325.   flex-wrap: wrap;

  326.   justify-content: space-between;

  327.   padding: 0.75rem 0.75rem 0.4375rem;

  328.   border-bottom: 1px solid rgba(212, 212, 218, 0.8);

  329.   background-color: #f3f4f9;

  330. }

  331. 

  332. .form-edit .form-actions {

  333.   margin-top: 0;

  334.   padding: 0.75rem 1rem;

  335.   border-right: 1px solid rgba(212, 212, 218, 0.8);

  336.   border-bottom: 1px solid rgba(212, 212, 218, 0.8);

  337.   border-left: 1px solid rgba(212, 212, 218, 0.8);

  338.   background-color: #f3f4f9;

  339. }

  340. 

  341. .edit-display-settings {

  342.   margin: 1.5rem 1.5rem 0 1.5rem;

  343. }

  344. 

  345. .edit-display-settings-top.views-ui-display-tab-bucket.views-ui-display-tab-bucket {

  346.   position: relative;

  347.   display: flex;

  348.   flex-wrap: wrap;

  349.   justify-content: space-between;

  350.   margin: 0 0 1.5rem;

  351.   padding: 0;

  352.   border-bottom: none;

  353.   line-height: 1.25rem;

  354. }

  355. 

  356. .edit-display-settings-top.views-ui-display-tab-bucket .views-display-setting {

  357.   padding: 0.125rem 0 0;

  358. }

  359. 

  360. .views-display-column {

  361.   border: 1px solid rgba(212, 212, 218, 0.8);

  362.   border-radius: 2px;

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

  364. }

  365. 

  366. .views-display-column + .views-display-column {

  367.   margin-top: 0;

  368. }

  369. 

  370. .view-preview-form .form-item--view-args,

  371. .view-preview-form .form-actions {

  372.   margin-top: 0.3125rem;

  373. }

  374. 

  375. .view-preview-form .arguments-preview {

  376.   font-size: 1em;

  377. }

  378. 

  379. .view-preview-form .form-item--view-args {

  380.   margin-top: 1rem;

  381. }

  382. 

  383. .view-preview-form .arguments-preview,

  384. .view-preview-form .form-item--view-args {

  385.   margin-right: 1rem;

  386.   margin-left: 1rem;

  387. }

  388. 

  389. .preview-submit-wrapper {

  390.   display: inline-block;

  391. }

  392. 

  393. .form-item--live-preview,

  394. .view-preview-form .form-actions {

  395.   vertical-align: top;

  396. }

  397. 

  398. @media screen and (min-width: 45em) { /* 720px */

  399.   .view-preview-form .form-type-textfield .description {

  400.     white-space: nowrap;

  401.   }

  402. }

  403. 

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

  405. 

  406. .views-ui-display-tab-bucket.views-ui-display-tab-bucket {

  407.   position: relative;

  408.   margin: 0 0 0.5rem;

  409.   padding-top: 0.5rem;

  410.   padding-bottom: 0.5rem;

  411.   border-bottom: 1px solid rgba(212, 212, 218, 0.8);

  412.   line-height: 1.25rem;

  413. }

  414. 

  415. .views-ui-display-tab-bucket:last-of-type {

  416.   margin-bottom: 0;

  417.   border-bottom: none;

  418. }

  419. 

  420. .views-ui-display-tab-bucket + .views-ui-display-tab-bucket {

  421.   border-top: medium none;

  422. }

  423. 

  424. .views-ui-display-tab-bucket__header {

  425.   display: inline-flex;

  426.   justify-content: space-between;

  427.   box-sizing: border-box;

  428.   width: 100%;

  429.   padding: 0.75rem 1rem calc(0.75rem + 2px);

  430. }

  431. 

  432. .views-ui-display-tab-bucket__title {

  433.   margin: 0;

  434.   font-size: 1rem;

  435. }

  436. 

  437. .views-ui-display-tab-bucket.access {

  438.   padding-top: 0;

  439. }

  440. 

  441. .views-ui-display-tab-bucket.page-settings {

  442.   border-bottom: medium none;

  443. }

  444. 

  445. /** Applies an overridden(italics) font style to overridden buckets.

  446.  * The better way to implement this would be to add the overridden class

  447.  * to the bucket header when the bucket is overridden and style it as a

  448.  * generic icon classed element. For the moment, we'll style the bucket

  449.  * header specifically with the overridden font style.

  450.  */

  451. 

  452. .views-ui-display-tab-setting.overridden,

  453. .views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {

  454.   font-style: italic;

  455. }

  456. 

  457. /* This is each row within one of the "boxes." */

  458. 

  459. .views-ui-display-tab-bucket .views-display-setting {

  460.   display: flex;

  461.   flex-wrap: wrap;

  462.   padding: 0.5rem 1rem;

  463.   color: #666;

  464.   font-size: 0.889rem;

  465. }

  466. 

  467. .views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {

  468.   background-color: transparent;

  469. }

  470. 

  471. .views-ui-display-tab-bucket .views-group-text {

  472.   margin-top: 0.375rem;

  473.   margin-bottom: 0.375rem;

  474. }

  475. 

  476. .views-ui-display-tab-bucket__actions {

  477.   margin-left: 0.5rem; /* LTR */

  478. }

  479. 

  480. [dir="rtl"] .views-ui-display-tab-bucket__actions {

  481.   margin-right: 0.5rem;

  482.   margin-left: 0;

  483. }

  484. 

  485. .views-display-setting .label {

  486.   margin-right: 0.5rem; /* LTR */

  487.   white-space: nowrap;

  488. }

  489. 

  490. [dir="rtl"] .views-display-setting .label {

  491.   margin-right: 0;

  492.   margin-left: 0.5rem;

  493. }

  494. 

  495. .label--separator.label--separator {

  496.   margin-right: 0.5rem;

  497.   margin-left: 0.5rem;

  498. }

  499. 

  500. .views-edit-view {

  501.   margin-bottom: 0.9375rem;

  502. }

  503. 

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

  505. 

  506. .views-filterable-options .form-type-checkbox {

  507.   padding: 0.3125rem 0.5rem;

  508.   border-top: none;

  509. }

  510. 

  511. .filterable-option .form-item {

  512.   margin-top: 0;

  513.   margin-bottom: 0;

  514. }

  515. 

  516. .views-filterable-options .form-type-checkbox .description {

  517.   margin-top: 0;

  518.   margin-bottom: 0;

  519. }

  520. 

  521. .views-filterable-options-controls .form-item {

  522.   width: 30%;

  523.   margin: 0 0 0 2%; /* LTR */

  524. }

  525. 

  526. [dir="rtl"] .views-filterable-options-controls .form-item {

  527.   margin: 0 2% 0 0;

  528. }

  529. 

  530. .views-filterable-options-controls input,

  531. .views-filterable-options-controls select {

  532.   width: 100%;

  533. }

  534. 

  535. .views-ui-dialog.views-ui-dialog > .ui-dialog-content {

  536.   padding: 0;

  537. }

  538. 

  539. .views-ui-dialog .views-filterable-options {

  540.   margin-bottom: 0.625rem;

  541. }

  542. 

  543. [id^="views-ui-add-handler-form"] .scroll {

  544.   padding-top: 0;

  545.   padding-bottom: 0;

  546. }

  547. 

  548. .views-ui-dialog .views-add-form-selected {

  549.   padding: 0 1rem;

  550. }

  551. 

  552. .views-ui-dialog .views-add-form-selected > div {

  553.   display: block;

  554.   margin: 0;

  555.   padding: 0.3rem 0.8rem;

  556.   border: 1px solid #dedfe4;

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

  558.   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  559. }

  560. 

  561. .views-ui-dialog .form-item-selected {

  562.   margin: 0;

  563.   padding: 0.375rem 1rem;

  564. }

  565. 

  566. .views-ui-dialog .views-add-form-selected .views-selected-options {

  567.   display: inline;

  568. }

  569. 

  570. .views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {

  571.   border: none;

  572. }

  573. 

  574. .views-ui-dialog .views-offset-top:not(:empty) {

  575.   position: relative;

  576.   padding: 0.75rem 1rem 0.5rem;

  577.   background-color: #f3f4f9;

  578. }

  579. 

  580. .views-ui-dialog .views-offset-top:not(:empty):after {

  581.   position: absolute;

  582.   bottom: 0;

  583.   left: 0;

  584.   width: 100%;

  585.   height: 0.1875rem;

  586.   content: "";

  587.   background: linear-gradient(to bottom, rgba(80, 81, 86, 0.11) 0%, rgba(18, 19, 20, 0.02) 49%, rgba(18, 19, 20, 0) 100%);

  588. }

  589. 

  590. .views-ui-dialog .views-offset-top > * {

  591.   margin: 0;

  592. }

  593. 

  594. .views-ui-dialog .views-offset-top .form-item {

  595.   max-width: 40%;

  596.   margin: 0 0.75rem 0.75rem 0;

  597. }

  598. 

  599. .views-ui-dialog .tabledrag-toggle-weight-wrapper {

  600.   margin: 0 0 1rem 0;

  601. }

  602. 

  603. .views-ui-dialog details .item-list {

  604.   padding-left: 2em; /* LTR */

  605. }

  606. 

  607. [dir="rtl"] .views-ui-dialog details .item-list {

  608.   padding-right: 2em;

  609.   padding-left: 0;

  610. }

  611. 

  612. .views-display-columns .details-wrapper {

  613.   margin: 0;

  614. }

  615. 

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

  617.   border-collapse: collapse;

  618. }

  619. 

  620. .views-ui-rearrange-filter-form tr td[rowspan] {

  621.   border: 1px solid #d3d4d9;

  622. }

  623. 

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

  625.   border-right: 1px solid #cdcdcd; /* LTR */

  626. }

  627. 

  628. [dir="rtl"] .views-ui-rearrange-filter-form tr[id^="views-row"] {

  629.   border-right: 0;

  630.   border-left: 1px solid #cdcdcd;

  631. }

  632. 

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

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

  635. }

  636. 

  637. .views-ui-rearrange-filter-form .group-empty {

  638.   border-bottom: 1px solid #cdcdcd;

  639. }

  640. 

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

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

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

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

  645.   margin-top: 0.375rem;

  646.   margin-bottom: 0.375rem;

  647.   margin-left: 1.125rem; /* LTR */

  648. }

  649. 

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

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

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

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

  654.   margin-right: 1.125rem;

  655.   margin-left: 0;

  656. }

  657. 

  658. .views-preview-wrapper {

  659.   border: 1px solid #ccc;

  660. }

  661. 

  662. .view-preview-form {

  663.   position: relative;

  664. }

  665. 

  666. .view-preview-form__title {

  667.   margin-top: 0;

  668.   padding: 0.5rem 0.75rem;

  669.   border-bottom: 1px solid #ccc;

  670.   background-color: #f3f4f9;

  671. }

  672. 

  673. .view-preview-form .form-item--live-preview {

  674.   position: absolute;

  675.   top: 0.6875rem;

  676.   right: 0.75rem;

  677.   margin-top: 2px;

  678.   margin-left: 2px; /* LTR */

  679. }

  680. 

  681. [dir="rtl"] .view-preview-form .form-item--live-preview {

  682.   right: auto;

  683.   left: 0.75rem;

  684.   margin-right: 2px;

  685.   margin-left: 0;

  686. }

  687. 

  688. .views-live-preview {

  689.   padding: 1rem;

  690. }

  691. 

  692. .views-live-preview .views-query-info {

  693.   overflow: auto;

  694. }

  695. 

  696. .views-live-preview .section-title {

  697.   display: inline-block;

  698.   margin-top: 0;

  699.   margin-bottom: 0;

  700.   color: #55565b;

  701.   font-size: 0.8125rem;

  702.   font-weight: normal;

  703.   line-height: 1.6154;

  704. }

  705. 

  706. .views-live-preview .view > * {

  707.   margin-top: 1rem;

  708. }

  709. 

  710. .views-live-preview .preview-section {

  711.   margin: 0 -0.3125rem;

  712.   padding: 0.1875rem 0.3125rem;

  713.   border: 1px dashed #dedede;

  714. }

  715. 

  716. .views-live-preview li.views-row + li.views-row {

  717.   margin-top: 1.125rem;

  718. }

  719. 

  720. /* The div.views-row is intentional and excludes li.views-row, for example */

  721. 

  722. .views-live-preview div.views-row + div.views-row {

  723.   margin-top: 2.25rem;

  724. }

  725. 

  726. .views-query-info table {

  727.   margin: 0.625rem 0;

  728.   border-spacing: 0;

  729.   border-collapse: separate;

  730.   border-color: #fff;

  731. }

  732. 

  733. .views-query-info table tr {

  734.   background-color: #f3f4f9;

  735. }

  736. 

  737. .views-query-info table th,

  738. .views-query-info table td {

  739.   padding: 0.5rem 1.5rem;

  740.   font-size: 0.889rem;

  741. }

  742. 

  743. .messages {

  744.   margin-bottom: 1.125rem;

  745.   line-height: 1.4555;

  746. }

  747. 

  748. .js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {

  749.   position: absolute;

  750.   z-index: 2;

  751.   top: -1px;

  752.   right: -0.3125rem; /* LTR */

  753. }

  754. 

  755. [dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {

  756.   right: auto;

  757.   left: -0.3125rem;

  758. }

  759. 

  760. /**

  761.  * Position dropbuttons with flexbox instead after the dropbuttons have been

  762.  * converted to splitbuttons.

  763.  *

  764.  * @see https://www.drupal.org/project/drupal/issues/3134107

  765.  * @see https://www.drupal.org/project/drupal/issues/1899236

  766.  */

  767. 

  768. .edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {

  769.   top: 0.8125rem;

  770.   right: 0.75rem; /* LTR */

  771. }

  772. 

  773. [dir="rtl"] .edit-display-settings-top.views-ui-display-tab-bucket .dropbutton-wrapper {

  774.   right: auto;

  775.   left: 0.75rem;

  776. }

  777. 

  778. .views-list-section {

  779.   margin-bottom: 2em;

  780. }

  781. 

  782. .form-textarea-wrapper,

  783. .form-item-options-content {

  784.   width: 100%;

  785. }

  786. 

  787. .views-messages .messages-list,

  788. .views-messages .messages-list__item {

  789.   margin-top: 0;

  790.   margin-bottom: 0;

  791. }

  792. 

  793. /**

  794.  * Styles on devices with touchevents.

  795.  */

  796. 

  797. html:not(.no-touchevents) .views-ui-display-tab-bucket__header--actions {

  798.   padding: 1.5rem 0.5rem;

  799. }

  800. 

  801. html:not(.no-touchevents) .edit-display-settings-top.views-ui-display-tab-bucket {

  802.   padding: 1rem 0.5rem;

  803. }

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