views-ui.css

Same filename in this branch
  1. main core/themes/claro/css/components/views-ui.css
  2. main core/themes/admin/css/components/views-ui.css
Same filename and directory in other branches
  1. 10 core/themes/claro/css/components/views-ui.css
  2. 11.x core/themes/claro/css/components/views-ui.css
  3. 9 core/themes/seven/css/components/views-ui.css
  4. 9 core/themes/claro/css/components/views-ui.css
  5. 8.9.x core/themes/seven/css/components/views-ui.css
  6. 8.9.x core/themes/claro/css/components/views-ui.css
  7. 11.x core/themes/admin/css/components/views-ui.css
  8. 11.x core/themes/default_admin/css/components/views-ui.css

Views UI styling.

File

View on git.drupalcode.org

core/themes/default_admin/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.  * @file

  10.  * Views UI styling.

  11.  */

  12. 

  13. /* @group Views admin */

  14. 

  15. .views-admin {

  16.   a:hover {

  17.     -webkit-text-decoration: none;

  18.     text-decoration: none;

  19.   }

  20. 

  21.   a.button {

  22.     margin-block: 0;

  23.     margin-inline-end: 0;

  24.   }

  25. 

  26.   /* Links and lists */

  27.   .links {

  28.     margin: 0;

  29.     list-style: none outside none;

  30. 

  31.     li {

  32.       padding-inline-end: 0;

  33.     }

  34.   }

  35. 

  36.   .button .links li {

  37.     padding-inline-end: 0.75rem;

  38.   }

  39. 

  40.   .item-list ul {

  41.     margin: 0;

  42.     padding: 0;

  43.   }

  44. 

  45.   /* Icons */

  46.   .icon {

  47.     width: 1rem;

  48.     height: 1rem;

  49.   }

  50. 

  51.   .icon,

  52.   .icon-text {

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

  54.     background-repeat: no-repeat;

  55.     background-attachment: scroll;

  56.     background-position: top left;

  57. 

  58.     &:dir(rtl) {

  59.       background-position: top right;

  60.     }

  61.   }

  62. 

  63.   a.icon {

  64.     border: 1px solid #ddd;

  65.     border-radius: 0.25rem;

  66.     background:

  67.       linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,

  68.       repeat-y;

  69.     box-shadow: 0 0 0 rgb(0, 0, 0, 0.3333) inset;

  70. 

  71.     &:hover {

  72.       border-color: #d0d0d0;

  73.       box-shadow: 0 0 1px rgb(0, 0, 0, 0.3333) inset;

  74.     }

  75. 

  76.     &:active {

  77.       border-color: #c0c0c0;

  78.     }

  79.   }

  80. 

  81.   span.icon {

  82.     position: relative;

  83.     float: inline-start;

  84.   }

  85. 

  86.   .icon.compact {

  87.     display: block;

  88.     overflow: hidden;

  89.     text-indent: -624.9375rem;

  90.     direction: ltr;

  91.   }

  92. 

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

  94.   .icon-text {

  95.     padding-inline-start: 1.1875rem;

  96.   }

  97. 

  98.   .icon.linked {

  99.     background-position: center -153px;

  100.   }

  101. 

  102.   .icon.unlinked {

  103.     background-position: center -195px;

  104.   }

  105. 

  106.   .icon.delete {

  107.     background-position: center -52px;

  108.   }

  109. 

  110.   a.icon.delete {

  111.     background-position:

  112.       center -52px,

  113.       top left;

  114. 

  115.     &:dir(rtl) {

  116.       background-position:

  117.         center -52px,

  118.         top right;

  119.     }

  120.   }

  121. 

  122.   .icon.rearrange {

  123.     background-position: center -111px;

  124.   }

  125. 

  126.   a.icon.rearrange {

  127.     background-position:

  128.       center -111px,

  129.       top left;

  130. 

  131.     &:dir(rtl) {

  132.       background-position:

  133.         center -111px,

  134.         top right;

  135.     }

  136.   }

  137. 

  138.   .icon.add {

  139.     background: none;

  140. 

  141.     &::before {

  142.       content: "+";

  143.       font-size: var(--admin-font-size-m);

  144.       line-height: 0.1;

  145.     }

  146.   }

  147. 

  148.   /* Details */

  149.   details details {

  150.     margin-bottom: 0;

  151.   }

  152. 

  153.   details.box-padding {

  154.     border: none;

  155.   }

  156. 

  157.   /* Form items */

  158.   .form-item {

  159.     margin-top: 0.5625rem;

  160.     padding-top: 0;

  161.     padding-bottom: 0;

  162.   }

  163. 

  164.   .container-inline .form-item {

  165.     margin-block: var(--admin-space-density-s);

  166.   }

  167. 

  168.   .form-type-checkbox {

  169.     margin-top: 0.375rem;

  170.   }

  171. 

  172.   .form-checkbox,

  173.   .form-radio {

  174.     vertical-align: baseline;

  175.   }

  176. 

  177.   /* Hide 'remove' checkboxes. */

  178.   .views-remove-checkbox {

  179.     display: none;

  180.   }

  181. 

  182.   .form-textarea-wrapper,

  183.   .form-item-options-content {

  184.     width: 100%;

  185.   }

  186. 

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

  188.   .form-type-checkbox + .form-wrapper {

  189.     margin-inline-start: 1rem;

  190.   }

  191. 

  192.   /* Sizes the labels of checkboxes and radio buttons to the height of the text. */

  193.   .form-type-checkbox label,

  194.   .form-type-radio label {

  195.     line-height: 2;

  196.   }

  197. 

  198.   .unit-title {

  199.     margin-top: 1.125rem;

  200.     margin-bottom: 0;

  201.     font-size: 0.9375rem;

  202.     line-height: 1.6154;

  203.   }

  204. 

  205.   /* View list */

  206.   .view-changed {

  207.     margin-bottom: 1.3125rem;

  208.   }

  209. 

  210.   /* Display edit form actions */

  211.   .form-edit {

  212.     .form-actions,

  213.     .field-actions {

  214.       margin-top: 0;

  215.       padding: var(--admin-space-s) var(--admin-space-m);

  216.       border-right: 1px solid var(--admin-color-border);

  217.       border-bottom: 1px solid var(--admin-color-border);

  218.       border-left: 1px solid var(--admin-color-border);

  219.       background-color: var(--admin-color-bg-surface-nested);

  220.     }

  221.   }

  222. 

  223.   .label--separator.label--separator {

  224.     margin-inline: var(--admin-space-xs);

  225.   }

  226. 

  227.   /* Filter rearrange grouping */

  228.   .group-populated {

  229.     display: none;

  230.   }

  231. 

  232.   td.group-title {

  233.     font-weight: bold;

  234.   }

  235. 

  236.   .group-message .form-submit,

  237.   .views-remove-group-link,

  238.   .views-add-group {

  239.     float: inline-end;

  240.     clear: both;

  241.   }

  242. 

  243.   .views-operator-label {

  244.     position: absolute;

  245.     z-index: 1;

  246.     bottom: -0.8125rem;

  247.     padding: 0.5px 0.375rem;

  248.     text-transform: uppercase;

  249.     border: 1px solid var(--admin-color-border);

  250.     background: #fff;

  251.     font-weight: bold;

  252.     font-style: italic;

  253.   }

  254. 

  255.   .grouped-description,

  256.   .exposed-description {

  257.     float: inline-start;

  258.     padding-block-start: 0.1875rem;

  259.     padding-inline-end: 0.625rem;

  260.   }

  261. 

  262.   /* Live preview */

  263.   .preview-submit-wrapper {

  264.     display: inline-block;

  265.   }

  266. 

  267.   .form-item--live-preview {

  268.     vertical-align: top;

  269.   }

  270. 

  271.   /* Messages */

  272.   .messages {

  273.     margin-bottom: 1.125rem;

  274.     line-height: 1.4555;

  275.   }

  276. 

  277.   /* Dropbuttons (with JS enabled) */

  278.   .js & .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {

  279.     position: absolute;

  280.     z-index: 2;

  281.     top: -1px;

  282.     inset-inline-end: -0.3125rem;

  283.   }

  284. 

  285.   pre {

  286.     margin-block: 0;

  287.     white-space: pre-wrap;

  288.   }

  289. }

  290. 

  291. /* @end */

  292. 

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

  294.   margin-block: 0.375rem;

  295. }

  296. 

  297. /* @end */

  298. 

  299. /* @group View list */

  300. 

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

  302.   margin: 0.25em 0;

  303.   font-weight: bold;

  304. }

  305. 

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

  307.   margin-inline: 0;

  308.   padding-inline: 0;

  309.   list-style: none;

  310. }

  311. 

  312. .views-list-section {

  313.   margin-bottom: 2em;

  314. }

  315. 

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

  317. 

  318. .views-ui-name {

  319.   width: 20%;

  320. }

  321. 

  322. .views-ui-description {

  323.   width: 30%;

  324. }

  325. 

  326. .views-ui-machine-name {

  327.   width: 15%;

  328. }

  329. 

  330. .views-ui-displays {

  331.   width: 25%;

  332. }

  333. 

  334. .views-ui-operations {

  335.   width: 10%;

  336. }

  337. 

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

  339.   margin-top: 0;

  340. }

  341. 

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

  343.   font-weight: bold;

  344. }

  345. 

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

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

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

  349.   font-weight: bold;

  350. }

  351. 

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

  353. 

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

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

  356.   display: block;

  357. }

  358. 

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

  360.   font-weight: normal;

  361. }

  362. 

  363. /* @end */

  364. 

  365. /* @group Views display layout */

  366. 

  367. .views-displays {

  368.   padding-bottom: 2.25rem;

  369.   border: 1px solid var(--admin-color-border);

  370.   border-radius: var(--admin-radius-l);

  371. }

  372. 

  373. .views-display-top {

  374.   position: relative;

  375.   display: flex;

  376.   flex-wrap: wrap;

  377.   justify-content: space-between;

  378.   padding-block: var(--admin-space-m) var(--admin-space-xs);

  379.   padding-inline: var(--admin-space-s);

  380.   border: 0 none;

  381.   border-radius: var(--admin-radius-l);

  382.   background-color: var(--admin-color-bg-header);

  383. 

  384.   .dropbutton-wrapper {

  385.     inset-block-start: 1.25rem;

  386.     inset-inline-end: var(--admin-space-l);

  387.   }

  388. }

  389. 

  390. .edit-display-settings {

  391.   margin: var(--admin-space-l) var(--admin-space-l) 0 var(--admin-space-l);

  392. }

  393. 

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

  395.   position: relative;

  396.   display: flex;

  397.   flex-wrap: wrap;

  398.   justify-content: space-between;

  399.   margin: 0 0 var(--admin-space-l);

  400.   padding: 0;

  401.   border-bottom: none;

  402.   line-height: 1.25rem;

  403. 

  404.   .views-display-setting {

  405.     padding: 0.125rem 0 0;

  406.   }

  407. }

  408. 

  409. .views-display-column {

  410.   box-sizing: border-box;

  411.   border: 1px solid var(--admin-color-border);

  412.   border-radius: var(--admin-radius-2xs);

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

  414. 

  415.   & + 
  416. }

  417. 

  418. .views-display-deleted {

  419.   & > details > summary,

  420.   & .details-wrapper > .views-ui-display-tab-bucket > *,

  421.   & .views-display-columns {

  422.     opacity: 0.25;

  423.   }

  424. }

  425. 

  426. .views-display-disabled {

  427.   & > details > summary,

  428.   & .details-wrapper > .views-ui-display-tab-bucket > *,

  429.   & .views-display-columns {

  430.     opacity: 0.5;

  431.   }

  432. }

  433. 

  434. .views-display-tab .details-wrapper > .views-ui-display-tab-bucket .actions {

  435.   opacity: 1;

  436. }

  437. 

  438. .views-edit-view {

  439.   margin-bottom: 0.9375rem;

  440. 

  441.   .unit-title {

  442.     margin-block-start: 0;

  443.     margin-block-end: var(--admin-space-m);

  444.     /* Duplicated from h1/h2/h3 styles in _body.scss (was @extend h2). */

  445.     letter-spacing: -0.025em;

  446.     font-size: var(--admin-font-size-h2);

  447.     font-weight: var(--admin-font-weight-normal);

  448.   }

  449. 

  450.   &.disabled {

  451.     .views-displays {

  452.       background-color: transparent;

  453.     }

  454. 

  455.     .views-display-column {

  456.       opacity: 0.75;

  457.       background: transparent;

  458.     }

  459.   }

  460. }

  461. 

  462. /* @end */

  463. 

  464. /* @group Attachment buckets */

  465. 

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

  467.   position: relative;

  468.   margin: 0;

  469.   padding-block: 0 var(--admin-space-xs);

  470.   border-bottom: 1px solid var(--admin-color-border);

  471.   line-height: 1.25rem;

  472. 

  473.   &:last-of-type {

  474.     margin-bottom: 0;

  475.     border-bottom: none;

  476.   }

  477. 

  478.   & + 
  479. 

  480.   &.access {

  481.     padding-top: 0;

  482.   }

  483. 

  484.   &.page-settings {

  485.     border-bottom: medium none;

  486.   }

  487. 

  488.   .links {

  489.     padding: 2px 0.375rem 0.25rem;

  490. 

  491.     li + li {

  492.       margin-inline-start: 0.1875rem;

  493.     }

  494.   }

  495. 

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

  497.     margin: 0;

  498.     padding: var(--admin-space-m);

  499.     text-transform: none;

  500.     color: var(--admin-color-text-loud);

  501.     font-size: var(--admin-font-size-xl);

  502.     font-weight: var(--admin-font-weight-semibold);

  503.   }

  504. 

  505.   .views-display-setting {

  506.     display: flex;

  507.     flex-wrap: wrap;

  508.     padding: var(--admin-space-xs) var(--admin-space-m);

  509.     color: var(--admin-color-text);

  510.     font-size: var(--admin-font-size-s);

  511.   }

  512. 

  513.   .views-group-text {

  514.     margin-block: 0.375rem;

  515.   }

  516. 

  517.   .dropbutton-wrapper {

  518.     inset-block-start: 0.875rem;

  519.     inset-inline-end: var(--admin-space-m);

  520.   }

  521. }

  522. 

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

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

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

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

  527.  * header specifically with the overridden font style.

  528.  */

  529. 

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

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

  532.   font-style: italic;

  533. }

  534. 

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

  536.   background-color: transparent;

  537. }

  538. 

  539. .views-display-setting .label {

  540.   margin-inline-end: var(--admin-space-xs);

  541.   white-space: nowrap;

  542. }

  543. 

  544. /**

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

  546.  * converted to splitbuttons.

  547.  *

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

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

  550.  */

  551. 

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

  553.   top: 0.8125rem;

  554.   inset-inline-end: var(--admin-space-s);

  555. }

  556. 

  557. /* Styles on devices with touchevents. */

  558. 

  559. html:not(.no-touchevents) {

  560.   .views-ui-display-tab-bucket__header--actions {

  561.     padding: var(--admin-space-l) var(--admin-space-xs);

  562.   }

  563. 

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

  565.     padding: var(--admin-space-m) var(--admin-space-xs);

  566.   }

  567. }

  568. 

  569. /* @end */

  570. 

  571. /* @group Filter rearrange grouping */

  572. 

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

  574.   height: 1px;

  575.   margin: 0;

  576.   padding: 0;

  577. 

  578.   span {

  579.     display: block;

  580.     overflow: hidden;

  581.     height: 1px;

  582.   }

  583. }

  584. 

  585. /* @end */

  586. 

  587. /* @group Filter form */

  588. 

  589. .views-ui-rearrange-filter-form {

  590.   table {

  591.     border-collapse: collapse;

  592.   }

  593. 

  594.   :is(th, td) {

  595.     vertical-align: top;

  596.   }

  597. 

  598.   tr {

  599.     border-bottom: 0;

  600. 

  601.     &:first-of-type {

  602.       border-top: 0.0625rem solid var(--admin-color-border);

  603.     }

  604. 

  605.     &:not(.draggable):hover {

  606.       background: inherit;

  607.     }

  608. 

  609.     &[id^="views-row"] {

  610.       border-inline-end: 1px solid #cdcdcd;

  611.     }

  612. 

  613.     td:last-child {

  614.       border-inline-end: medium none;

  615.     }

  616. 

  617.     &.drag td {

  618.       background-color: #fe7 !important;

  619.     }

  620. 

  621.     &.drag-previous td {

  622.       background-color: #ffb !important;

  623.     }

  624.   }

  625. 

  626.   td {

  627.     & > .form-item {

  628.       display: revert;

  629.     }

  630. 

  631.     &[rowspan] {

  632.       border: 1px solid var(--admin-color-border);

  633.     }

  634.   }

  635. 

  636.   [id^="views-row"] {

  637.     border: medium none;

  638.   }

  639. 

  640.   .draggable td {

  641.     vertical-align: middle;

  642.     border-bottom: 0.0625rem solid var(--admin-color-border);

  643.   }

  644. 

  645.   .group-empty {

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

  647.   }

  648. 

  649.   .filter-group-operator-row {

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

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

  652.   }

  653. 

  654.   .action-links {

  655.     float: inline-start;

  656.     margin: 0 0 1em;

  657.     padding: 0;

  658.   }

  659. 

  660.   .tabledrag-cell {

  661.     position: relative;

  662.   }

  663. }

  664. 

  665. /* @end */

  666. 

  667. /* @group Live preview */

  668. 

  669. .view-preview-form {

  670.   position: relative;

  671. 

  672.   .form-item--view-args,

  673.   .form-actions,

  674.   .field-actions {

  675.     margin-top: 0.3125rem;

  676.   }

  677. 

  678.   .form-actions,

  679.   .field-actions {

  680.     vertical-align: top;

  681.   }

  682. 

  683.   .form-actions {

  684.     align-items: flex-end;

  685.   }

  686. 

  687.   .views-bulk-actions__item {

  688.     margin-block-start: 0;

  689.   }

  690. 

  691.   .arguments-preview {

  692.     margin-inline-start: 0;

  693.     font-size: 1em;

  694.   }

  695. 

  696.   .form-item--view-args {

  697.     margin-top: var(--admin-space-m);

  698.   }

  699. 

  700.   .arguments-preview,

  701.   .form-item--view-args {

  702.     margin-inline: var(--admin-space-m);

  703.   }

  704. 

  705.   .form-item--live-preview {

  706.     position: static !important;

  707.     top: 0.6875rem;

  708.     inset-inline-end: var(--admin-space-s);

  709.     margin-block-start: var(--admin-space-l);

  710.     margin-inline-start: 2px;

  711.   }

  712. 

  713.   .preview-section {

  714.     padding: var(--admin-space-m);

  715.     border: 1px dashed var(--admin-color-border);

  716.   }

  717. 

  718.   .view-filters .preview-section {

  719.     display: flex;

  720.     flex-wrap: wrap;

  721.   }

  722. 

  723.   @media screen and (min-width: 45em) {

  724.     /* 720px */

  725.     .form-type-textfield .description {

  726.       white-space: nowrap;

  727.     }

  728.   }

  729. }

  730. 

  731. .views-preview-wrapper {

  732.   border: 1px solid #ccc;

  733. }

  734. 

  735. .view-preview-form__title {

  736.   margin-top: 0;

  737.   padding: 0;

  738.   border-block-end: 0 none;

  739.   background-color: transparent;

  740. }

  741. 

  742. .views-live-preview {

  743.   padding: 0;

  744. 

  745.   .views-query-info {

  746.     overflow: auto;

  747.   }

  748. 

  749.   .section-title {

  750.     display: inline-block;

  751.     margin-block: 0;

  752.     color: var(--admin-color-text);

  753.     font-size: 0.8125rem;

  754.     font-weight: normal;

  755.     line-height: 1.6154;

  756.   }

  757. 

  758.   .view > * {

  759.     margin-top: var(--admin-space-m);

  760.   }

  761. 

  762.   .preview-section {

  763.     margin: 0 -0.3125rem;

  764.     padding: 0.1875rem 0.3125rem;

  765.     border: 1px dashed #dedede;

  766.   }

  767. 

  768.   li.views-row + li.views-row {

  769.     margin-top: 1.125rem;

  770.   }

  771. 

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

  773.   div.views-row + div.views-row {

  774.     margin-top: 2.25rem;

  775.   }

  776. 

  777.   .gin-layer-wrapper {

  778.     border-color: var(--admin-color-border);

  779.   }

  780. }

  781. 

  782. .views-query-info {

  783.   pre {

  784.     margin-top: 0;

  785.     margin-bottom: 0;

  786.   }

  787. 

  788.   table {

  789.     margin: 0.625rem 0;

  790.     border-spacing: 1px;

  791.     border-collapse: separate;

  792.     /* Fills the 1px cell spacing as a subtle grid; was white (harsh in dark mode). */

  793.     border-color: var(--admin-color-bg-surface);

  794.     border-radius: 0.4375rem;

  795. 

  796.     tr {

  797.       background-color: var(--admin-color-bg-surface-nested);

  798. 

  799.       td {

  800.         color: var(--admin-color-text);

  801. 

  802.         &:last-child {

  803.           border: 0;

  804.         }

  805.       }

  806.     }

  807. 

  808.     th,

  809.     td {

  810.       padding: var(--admin-space-xs) var(--admin-space-l);

  811.       font-size: var(--admin-font-size-s);

  812.     }

  813.   }

  814. }

  815. 

  816. /* @end */

  817. 

  818. /* @group Modal dialog box */

  819. 

  820. .views-filterable-options {

  821.   .form-type-checkbox {

  822.     padding: 0.3125rem 0.5rem;

  823.     border-top: none;

  824. 

  825.     .description {

  826.       margin-top: 0;

  827.       margin-bottom: 0;

  828.     }

  829.   }

  830. }

  831. 

  832. .filterable-option .form-item {

  833.   margin-top: 0;

  834.   margin-bottom: 0;

  835. }

  836. 

  837. .views-filterable-options-controls {

  838.   .form-item {

  839.     width: 30%;

  840.     margin: 0;

  841.     margin-inline-start: 2%;

  842.   }

  843. 

  844.   input,

  845.   select {

  846.     width: 100%;

  847.   }

  848. }

  849. 

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

  851.   padding: 0;

  852. }

  853. 

  854. .views-ui-dialog {

  855.   /* Form layout */

  856.   .form--flex {

  857.     display: flex;

  858.     overflow: hidden;

  859.     flex-wrap: wrap;

  860.   }

  861. 

  862.   .form--inline {

  863.     padding-block-start: 0;

  864.   }

  865. 

  866.   /* Form items */

  867.   .form-item {

  868.     margin-block: var(--admin-space-m);

  869.   }

  870. 

  871.   .form-item-selected {

  872.     margin: 0;

  873.     padding: 0.375rem 1rem;

  874.   }

  875. 

  876.   .form-item:first-of-type.description {

  877.     margin: 0 0 var(--admin-space-l) 0;

  878.     padding-bottom: var(--admin-space-s);

  879.     border-bottom: 0.0625rem solid var(--admin-color-border);

  880.     font-weight: bold;

  881.   }

  882. 

  883.   .form-item--fields-area-text-custom-removed {

  884.     display: inline-block;

  885.     margin-inline-end: var(--admin-space-2xs);

  886.   }

  887. 

  888.   /* Form fields */

  889.   .form-element {

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

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

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

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

  894.   }

  895. 

  896.   .form-element--type-select {

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

  898.     background-position-y: 56%;

  899.   }

  900. 

  901.   textarea {

  902.     width: 100%;

  903.   }

  904. 

  905.   /* Extra specificity to override dialog CSS. */

  906.   .form-item__description[class] {

  907.     max-width: none;

  908.   }

  909. 

  910.   td .form-element {

  911.     width: auto;

  912.   }

  913. 

  914.   /* Booleans */

  915.   .form-type--boolean {

  916.     margin-inline: 0;

  917. 

  918.     .form-boolean {

  919.       top: 0;

  920.       float: none;

  921.       margin: 0;

  922.       margin-inline-end: 0.25rem;

  923.       transform: none;

  924.     }

  925.   }

  926. 

  927.   .form-boolean-group .form-type--boolean {

  928.     margin-top: 0.4em;

  929.     margin-bottom: 0.4em;

  930.   }

  931. 

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

  933.   .draggable .form-type--checkbox {

  934.     display: inline-block;

  935.     margin: 0 0.25rem;

  936.   }

  937. 

  938.   /* Buttons */

  939.   input.form-submit,

  940.   a.button {

  941.     margin-block: 0;

  942.     margin-inline-end: 0;

  943.   }

  944. 

  945.   /* Add form selection list */

  946.   .views-add-form-selected {

  947.     padding: 0 1rem;

  948. 

  949.     > div {

  950.       display: block;

  951.       margin: 0;

  952.       padding: 0.3rem 0.8rem;

  953.       border: 1px solid #dedfe4;

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

  955.       box-shadow: 0 4px 20px rgb(0, 0, 0, 0.1);

  956.     }

  957. 

  958.     .views-selected-options {

  959.       display: inline;

  960.     }

  961.   }

  962. 

  963.   /* Top offset banner */

  964.   .views-offset-top:not(:empty) {

  965.     position: relative;

  966.     padding: var(--admin-space-s) var(--admin-space-m) var(--admin-space-xs);

  967.     background-color: var(--admin-color-bg-surface-nested);

  968. 

  969.     &::after {

  970.       position: absolute;

  971.       bottom: 0;

  972.       left: 0;

  973.       width: 100%;

  974.       height: 0.1875rem;

  975.       content: "";

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

  977.     }

  978.   }

  979. 

  980.   .views-offset-top {

  981.     > * {

  982.       margin: 0;

  983.     }

  984. 

  985.     .form-item {

  986.       max-width: 40%;

  987.       margin: 0 var(--admin-space-s) var(--admin-space-s) 0;

  988.     }

  989.   }

  990. 

  991.   /* Misc */

  992.   .tabledrag-toggle-weight-wrapper {

  993.     margin: 0 0 var(--admin-space-m) 0;

  994.   }

  995. 

  996.   details .item-list {

  997.     padding-inline-start: 2em;

  998.   }

  999. 

  1000.   .views-override:not(:empty) {

  1001.     border-block-end: 0 none;

  1002.     background-color: var(--admin-color-bg);

  1003.   }

  1004. 

  1005.   .views-filterable-options {

  1006.     margin-bottom: 0.625rem;

  1007.   }

  1008. 

  1009.   .scroll {

  1010.     overflow: auto;

  1011.     padding: 1em;

  1012.   }

  1013. 

  1014.   /* Don't let the messages overwhelm the modal */

  1015.   .views-messages {

  1016.     overflow: auto;

  1017.     max-height: 12.5rem;

  1018.   }

  1019. }

  1020. 

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

  1022.   padding-block: 0;

  1023. }

  1024. 

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

  1026.   border: none;

  1027. }

  1028. 

  1029. /* @end */

  1030. 

  1031. /* @group Messages */

  1032. 

  1033. .views-messages .messages-list,

  1034. .views-messages .messages-list__item {

  1035.   margin-block: 0;

  1036. }

  1037. 

  1038. /* @end */

  1039. 

  1040. /* @group Forms */

  1041. 

  1042. /**

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

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

  1045.  *

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

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

  1048.  *   markup.

  1049.  */

  1050. 

  1051. details.fieldset-no-legend {

  1052.   padding-top: 0;

  1053. }

  1054. 

  1055. /* @group Dependent options */

  1056. 

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

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

  1059.  */

  1060. 

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

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

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

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

  1065.   margin-block: 0.375rem;

  1066.   margin-inline-start: 1.5em;

  1067. }

  1068. 

  1069. .views-admin-dependent {

  1070.   .form-item .form-item,

  1071.   .form-type-checkboxes,

  1072.   .form-type-radios {

  1073.     margin-block: 0.375rem;

  1074.   }

  1075. 

  1076.   .form-type-radio,

  1077.   .form-radios .form-item {

  1078.     margin-block: 2px;

  1079.   }

  1080. }

  1081. 

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

  1083.   margin: 0 var(--admin-space-xs);

  1084. }

  1085. 

  1086. /* @group Attachment details */

  1087. 

  1088. #edit-display-settings-title {

  1089.   color: var(--admin-color-primary);

  1090. }

  1091. 

  1092. #edit-displays {

  1093.   .views-display-top {

  1094.     border-end-start-radius: 0;

  1095.     border-end-end-radius: 0;

  1096.   }

  1097. }

  1098. 

  1099. .edit-display-settings {

  1100.   margin: 0;

  1101.   padding: var(--admin-space-l);

  1102. }

  1103. 

  1104. /* @group Attachment details tabs

  1105.  *

  1106.  * The tabs that switch between sections

  1107.  *

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

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

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

  1111.  */

  1112. 

  1113. .views-tabs {

  1114.   display: flex;

  1115.   overflow: visible;

  1116.   flex-wrap: wrap;

  1117.   margin: 0;

  1118.   margin-inline-end: var(--admin-space-l);

  1119.   padding: 0;

  1120.   list-style: none;

  1121.   text-align: end;

  1122.   border-bottom: 0 none;

  1123. 

  1124.   .views-display-deleted-link {

  1125.     -webkit-text-decoration: line-through;

  1126.     text-decoration: line-through;

  1127.   }

  1128. 

  1129.   li.add ul.action-list li {

  1130.     margin: 0;

  1131.   }

  1132. 

  1133.   li {

  1134.     margin-block: 0 0.3125rem;

  1135.     margin-inline: 0.375rem 0.3125rem;

  1136. 

  1137.     &,

  1138.     &.is-active {

  1139.       width: auto;

  1140.       padding: 0;

  1141.       border: 0;

  1142.       background: transparent;

  1143.     }

  1144. 

  1145.     &:hover {

  1146.       padding-inline-start: 0;

  1147.       border: 0;

  1148.     }

  1149. 

  1150.     & + li {

  1151.       border-top: 0;

  1152.     }

  1153.   }

  1154. 

  1155.   a {

  1156.     display: inline-block;

  1157.     padding: var(--admin-space-xs) var(--admin-space-m);

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

  1159.     border-radius: 0.4375rem;

  1160.     font-size: small;

  1161.     line-height: 1.3333;

  1162. 

  1163.     &.views-display-disabled-link {

  1164.       padding-inline-start: var(--admin-space-l);

  1165. 

  1166.       &::before {

  1167.         display: inline-block;

  1168.         width: var(--admin-space-l);

  1169.         height: var(--admin-space-s);

  1170.         margin-inline-start: calc(var(--admin-space-m) * -1);

  1171.         content: "";

  1172.         background-color: currentColor;

  1173.         mask-image: var(--admin-icon-hide);

  1174.         mask-repeat: no-repeat;

  1175.         mask-position: center left;

  1176.         mask-size: contain;

  1177. 

  1178.         &:dir(rtl) {

  1179.           mask-position: center right;

  1180.         }

  1181.       }

  1182.     }

  1183.   }

  1184. 

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

  1186.   li.is-active a.is-active.error,

  1187.   .error {

  1188.     padding: 0.5rem;

  1189.     border: 2px solid #ed541d;

  1190.   }

  1191. 

  1192.   a:focus {

  1193.     outline: none;

  1194.   }

  1195. 

  1196.   li a {

  1197.     padding: var(--admin-space-xs) var(--admin-space-m);

  1198.     color: var(--admin-color-primary);

  1199.     border: 2px solid var(--admin-color-primary);

  1200.     border-radius: var(--admin-radius-xs);

  1201.     background: transparent;

  1202.     font-size: var(--admin-font-size-xs);

  1203.     font-weight: var(--admin-font-weight-heavy);

  1204. 

  1205.     .icon.add {

  1206.       display: block;

  1207.     }

  1208.   }

  1209. 

  1210.   li a:hover,

  1211.   li.is-active a,

  1212.   li.is-active a.is-active {

  1213.     color: var(--admin-color-bg);

  1214.     border-color: transparent;

  1215.     background: var(--admin-color-primary);

  1216.   }

  1217. 

  1218.   .add {

  1219.     position: relative;

  1220. 

  1221.     a {

  1222.       padding: var(--admin-space-xs) var(--admin-space-m);

  1223.       color: var(--admin-color-primary);

  1224.       border: 2px solid var(--admin-color-primary);

  1225.       border-radius: var(--admin-radius-xs);

  1226.       background: transparent;

  1227.       font-size: var(--admin-font-size-xs);

  1228.       font-weight: var(--admin-font-weight-heavy);

  1229. 

  1230.       &:hover,

  1231.       &:focus {

  1232.         color: var(--admin-color-bg);

  1233.         border-color: transparent;

  1234.         background: var(--admin-color-primary);

  1235.       }

  1236. 

  1237.       &:focus {

  1238.         outline: none;

  1239.         box-shadow:

  1240.           0 0 0 1px var(--admin-color-focus-border),

  1241.           0 0 0 4px var(--admin-color-focus);

  1242.       }

  1243.     }

  1244. 

  1245.     &.open a {

  1246.       color: var(--admin-color-primary);

  1247.       background: var(--admin-color-bg-surface-nested);

  1248. 

  1249.       &:hover,

  1250.       &:focus,

  1251.       &:active {

  1252.         color: var(--admin-color-primary);

  1253.       }

  1254.     }

  1255. 

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

  1257.     .icon.add {

  1258.       display: none;

  1259.     }

  1260.   }

  1261. 

  1262.   .action-list {

  1263.     position: absolute;

  1264.     z-index: 50;

  1265.     margin: 0;

  1266.     background: var(--admin-color-bg-raised);

  1267.     box-shadow: 0 1px 2px var(--admin-color-shadow-button);

  1268.     inset-block-start: 2.25rem;

  1269.     inset-inline-start: -2px;

  1270. 

  1271.     li {

  1272.       /* @todo are these styles */

  1273.       display: block;

  1274.       border: none;

  1275.       background-color: transparent;

  1276. 

  1277.       input.button {

  1278.         width: 100%;

  1279.         text-align: start;

  1280.         border: none !important;

  1281.         box-shadow: none;

  1282.         line-height: 1.2;

  1283.       }

  1284. 

  1285.       &:hover,

  1286.       &:focus,

  1287.       &:active {

  1288.         &,

  1289.         input.button {

  1290.           color: var(--admin-color-text-on-primary);

  1291.           background: var(--admin-color-primary);

  1292.         }

  1293.       }

  1294.     }

  1295. 

  1296.     li:first-child {

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

  1298.       border-radius: 0 var(--admin-radius-2xs) 0 0; /* LTR */

  1299. 

  1300.       &:dir(rtl) {

  1301.         border-radius: 0 0 0 var(--admin-radius-2xs);

  1302.       }

  1303.     }

  1304.   }

  1305. }

  1306. 

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

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

  1309.   padding-bottom: 0.4rem;

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

  1311.   border-bottom-right-radius: var(--admin-radius-l);

  1312.   border-bottom-left-radius: var(--admin-radius-l);

  1313. }

  1314. 

  1315. .views-tabs__action-list-button {

  1316.   width: 100%;

  1317.   margin: 0;

  1318.   padding: var(--admin-space-s) var(--admin-space-l);

  1319.   text-align: left;

  1320.   border: medium none;

  1321.   border-radius: 0;

  1322.   background: none repeat scroll 0 0 transparent;

  1323.   font-weight: normal;

  1324. 

  1325.   &.button:hover,

  1326.   &.button:focus {

  1327.     /* Fixed white: text on the blue (--admin-color-link) button fill — readable

  1328.        in both modes, so not a mode-aware surface token. */

  1329.     color: var(--admin-color-white);

  1330.     background-color: var(--admin-color-link);

  1331.   }

  1332. 

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

  1334.   &:not(:focus) {

  1335.     box-shadow: none;

  1336.   }

  1337. 

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

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

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

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

  1342.   @media (scripting: enabled) {

  1343.     &:not(.views-tabs--secondary *) {

  1344.       animation-name: appear;

  1345.       animation-duration: 0.1s;

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

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

  1348.       aggregate CSS with slow 3G. */

  1349.       animation-delay: 5s;

  1350.       animation-iteration-count: 1;

  1351.       animation-fill-mode: backwards;

  1352.     }

  1353.   }

  1354. }

  1355. 

  1356. @keyframes appear {

  1357.   from {

  1358.     display: none;

  1359.   }

  1360. 

  1361.   to {

  1362.     display: unset;

  1363.   }

  1364. }

  1365. 

  1366. /* #3186729: Drupal 9.1 fix */

  1367. 

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

  1369.   display: inline-flex;

  1370.   justify-content: space-between;

  1371.   box-sizing: border-box;

  1372.   width: 100%;

  1373.   padding-block: var(--admin-space-m) var(--admin-space-xs);

  1374.   padding-inline: 0;

  1375. 

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

  1377.     padding: 0 var(--admin-space-m);

  1378.   }

  1379. 

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

  1381.     margin-inline-start: var(--admin-space-xs);

  1382.     margin-inline-end: var(--admin-space-m);

  1383.   }

  1384. }

  1385. 

  1386. .views-ui-display-tab-actions {

  1387.   .views-ui-display-tab-setting {

  1388.     padding: var(--admin-space-m);

  1389.   }

  1390. }

  1391. 

  1392. /* @group Add view */

  1393. 

  1394. .form-item-page-create,

  1395. .form-item-block-create {

  1396.   margin-top: 0.8125rem;

  1397. }

  1398. 

  1399. /* @group Modal dialog box

  1400.  *

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

  1402.  */

  1403. 

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

  1405.   padding-top: 0.25rem;

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

  1407.   padding-bottom: 0.25rem;

  1408.   padding-inline-start: 0.25rem;

  1409. }

  1410. 

  1411. /* @group Grouping styles

  1412.  *

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

  1414.  * filters.

  1415.  */

  1416. 

  1417. .views-config-group-region {

  1418.   display: table;

  1419.   margin: var(--admin-space-l) 0;

  1420.   border: 0.0625rem solid var(--admin-color-border);

  1421.   border-collapse: collapse;

  1422. 

  1423.   .views-group-box {

  1424.     position: relative;

  1425.     display: table-cell;

  1426.     padding: var(--admin-space-l);

  1427.     border: 0.0625rem solid var(--admin-color-border);

  1428.   }

  1429. 

  1430.   .views-group-box--operator {

  1431.     padding-inline-end: var(--admin-space-2xl);

  1432.     border-inline-end-width: 0;

  1433.   }

  1434. 

  1435.   .views-group-box--value {

  1436.     padding: 0;

  1437.     border-inline-start-width: 0;

  1438. 

  1439.     > .form-item {

  1440.       margin-inline: var(--admin-space-2xl) var(--admin-space-l);

  1441. 

  1442.       &::before {

  1443.         position: absolute;

  1444.         top: 0;

  1445.         left: 0;

  1446.         width: 0.0625rem;

  1447.         height: 100%;

  1448.         content: "";

  1449.         border-inline-start: 0.0625rem solid var(--admin-color-border);

  1450.       }

  1451. 

  1452.       &::after {

  1453.         position: absolute;

  1454.         z-index: 1;

  1455.         top: 3.8rem;

  1456.         inset-inline-start: calc(var(--admin-space-m) * -1);

  1457.         padding-block: 0 0.3rem;

  1458.         padding-inline: 0.4rem 0.3rem;

  1459.         content: ">";

  1460.         color: var(--admin-color-text-soft);

  1461.         border: 0.0625rem solid var(--admin-color-border);

  1462.         background: #fff;

  1463.         font-size: var(--admin-font-size-h1);

  1464.         font-weight: bold;

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

  1466.       }

  1467.     }

  1468.   }

  1469. }

  1470. 

  1471. .views-display-column,

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

  1473.   margin-block-end: var(--admin-space-m);

  1474.   border-color: var(--admin-color-border);

  1475.   border-radius: var(--admin-radius-m);

  1476.   box-shadow: none;

  1477. }

  1478. 

  1479. a.views-field-excluded {

  1480.   color: var(--admin-color-text-disabled);

  1481. }

  1482. 

  1483. .views-filterable-options {

  1484.   border-block-start: none;

  1485. }

  1486. 

  1487. .view-block-content .views-table {

  1488.   margin-block-start: 0;

  1489. }

  1490. 

  1491. .views-display-columns {

  1492.   display: grid;

  1493.   gap: var(--admin-space-xl);

  1494. 

  1495.   .details-wrapper {

  1496.     margin: 0;

  1497.   }

  1498. 

  1499.   @media screen and (min-width: 60rem) {

  1500.     display: grid;

  1501.     grid-template-columns: 1fr 1fr 1fr;

  1502.   }

  1503. }

  1504. 

  1505. /* @todo. This was in Gin's Views file. Might could move it. */

  1506. 

  1507. .system-modules,

  1508. .locale-translation-status-form {

  1509.   tr.even,

  1510.   tr.odd {

  1511.     border-block-start: 1px solid var(--admin-color-border);

  1512.     border-block-end: none;

  1513.     background: none;

  1514.   }

  1515. }

  1516. 

  1517. .system-modules td {

  1518.   height: auto;

  1519.   padding: var(--admin-space-m);

  1520. 

  1521.   details summary {

  1522.     background-color: transparent;

  1523.   }

  1524. }

  1525. 

  1526. .machine-name-label {

  1527.   color: var(--admin-color-text);

  1528. }

  1529. 

  1530. .machine-name-value {

  1531.   color: var(--admin-color-text-loud);

  1532. }

  1533. 

  1534. .view-header {

  1535.   margin-block-end: var(--admin-space-l);

  1536. }

  1537. 

  1538. .form-item--options-value-all {

  1539.   display: none;

  1540. }

  1541. 

  1542. .js-only {

  1543.   display: none;

  1544. }

  1545. 

  1546. html.js {

  1547.   .js-only {

  1548.     display: inherit;

  1549.   }

  1550. 

  1551.   span.js-only {

  1552.     display: inline;

  1553.   }

  1554. }

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