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(--gin-font-size);

  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(--gin-spacing-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(--space-s) var(--space-m);

  216.       border-right: 1px solid var(--color-gray-200-o-80);

  217.       border-bottom: 1px solid var(--color-gray-200-o-80);

  218.       border-left: 1px solid var(--color-gray-200-o-80);

  219.       background-color: var(--color-gray-050);

  220.     }

  221.   }

  222. 

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

  224.     margin-inline: var(--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(--color-gray-200);

  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(--gin-border-color);

  370.   border-radius: var(--gin-border-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(--gin-spacing-m) var(--gin-spacing-xs);

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

  380.   border: 0 none;

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

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

  383. 

  384.   .dropbutton-wrapper {

  385.     inset-block-start: 1.25rem;

  386.     inset-inline-end: var(--gin-spacing-l);

  387.   }

  388. }

  389. 

  390. .edit-display-settings {

  391.   margin: var(--space-l) var(--space-l) 0 var(--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(--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(--color-gray-200-o-80);

  412.   border-radius: var(--base-border-radius);

  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(--gin-spacing-m);

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

  445.     letter-spacing: -0.025em;

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

  447.     font-weight: var(--gin-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(--space-xs);

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

  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(--gin-spacing-m);

  499.     text-transform: none;

  500.     color: var(--gin-color-title);

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

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

  503.   }

  504. 

  505.   .views-display-setting {

  506.     display: flex;

  507.     flex-wrap: wrap;

  508.     padding: var(--gin-spacing-xs) var(--gin-spacing-m);

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

  510.     font-size: var(--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(--gin-spacing-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(--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(--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(--space-l) var(--space-xs);

  562.   }

  563. 

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

  565.     padding: var(--space-m) var(--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(--color-gray-200);

  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(--color-gray-200);

  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(--color-gray-200);

  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(--space-m);

  698.   }

  699. 

  700.   .arguments-preview,

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

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

  703.   }

  704. 

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

  706.     position: static !important;

  707.     top: 0.6875rem;

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

  709.     margin-block-start: var(--gin-spacing-l);

  710.     margin-inline-start: 2px;

  711.   }

  712. 

  713.   .preview-section {

  714.     padding: var(--gin-spacing-m);

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

  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(--gin-color-text);

  753.     font-size: 0.8125rem;

  754.     font-weight: normal;

  755.     line-height: 1.6154;

  756.   }

  757. 

  758.   .view > * {

  759.     margin-top: var(--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(--gin-border-color);

  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.     border-color: var(--color-bg);

  793.     border-radius: 0.4375rem;

  794. 

  795.     tr {

  796.       background-color: var(--gin-bg-layer2);

  797. 

  798.       td {

  799.         color: var(--gin-color-text);

  800. 

  801.         &:last-child {

  802.           border: 0;

  803.         }

  804.       }

  805.     }

  806. 

  807.     th,

  808.     td {

  809.       padding: var(--space-xs) var(--space-l);

  810.       font-size: var(--font-size-s);

  811.     }

  812.   }

  813. }

  814. 

  815. /* @end */

  816. 

  817. /* @group Modal dialog box */

  818. 

  819. .views-filterable-options {

  820.   .form-type-checkbox {

  821.     padding: 0.3125rem 0.5rem;

  822.     border-top: none;

  823. 

  824.     .description {

  825.       margin-top: 0;

  826.       margin-bottom: 0;

  827.     }

  828.   }

  829. }

  830. 

  831. .filterable-option .form-item {

  832.   margin-top: 0;

  833.   margin-bottom: 0;

  834. }

  835. 

  836. .views-filterable-options-controls {

  837.   .form-item {

  838.     width: 30%;

  839.     margin: 0;

  840.     margin-inline-start: 2%;

  841.   }

  842. 

  843.   input,

  844.   select {

  845.     width: 100%;

  846.   }

  847. }

  848. 

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

  850.   padding: 0;

  851. }

  852. 

  853. .views-ui-dialog {

  854.   /* Form layout */

  855.   .form--flex {

  856.     display: flex;

  857.     overflow: hidden;

  858.     flex-wrap: wrap;

  859.   }

  860. 

  861.   .form--inline {

  862.     padding-block-start: 0;

  863.   }

  864. 

  865.   /* Form items */

  866.   .form-item {

  867.     margin-block: var(--space-m);

  868.   }

  869. 

  870.   .form-item-selected {

  871.     margin: 0;

  872.     padding: 0.375rem 1rem;

  873.   }

  874. 

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

  876.     margin: 0 0 var(--space-l) 0;

  877.     padding-bottom: var(--space-s);

  878.     border-bottom: 0.0625rem solid var(--color-gray-200);

  879.     font-weight: bold;

  880.   }

  881. 

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

  883.     display: inline-block;

  884.     margin-inline-end: var(--gin-spacing-xxs);

  885.   }

  886. 

  887.   /* Form fields */

  888.   .form-element {

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

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

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

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

  893.   }

  894. 

  895.   .form-element--type-select {

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

  897.     background-position-y: 56%;

  898.   }

  899. 

  900.   textarea {

  901.     width: 100%;

  902.   }

  903. 

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

  905.   .form-item__description[class] {

  906.     max-width: none;

  907.   }

  908. 

  909.   td .form-element {

  910.     width: auto;

  911.   }

  912. 

  913.   /* Booleans */

  914.   .form-type--boolean {

  915.     margin-inline: 0;

  916. 

  917.     .form-boolean {

  918.       top: 0;

  919.       float: none;

  920.       margin: 0;

  921.       margin-inline-end: 0.25rem;

  922.       transform: none;

  923.     }

  924.   }

  925. 

  926.   .form-boolean-group .form-type--boolean {

  927.     margin-top: 0.4em;

  928.     margin-bottom: 0.4em;

  929.   }

  930. 

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

  932.   .draggable .form-type--checkbox {

  933.     display: inline-block;

  934.     margin: 0 0.25rem;

  935.   }

  936. 

  937.   /* Buttons */

  938.   input.form-submit,

  939.   a.button {

  940.     margin-block: 0;

  941.     margin-inline-end: 0;

  942.   }

  943. 

  944.   /* Add form selection list */

  945.   .views-add-form-selected {

  946.     padding: 0 1rem;

  947. 

  948.     > div {

  949.       display: block;

  950.       margin: 0;

  951.       padding: 0.3rem 0.8rem;

  952.       border: 1px solid #dedfe4;

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

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

  955.     }

  956. 

  957.     .views-selected-options {

  958.       display: inline;

  959.     }

  960.   }

  961. 

  962.   /* Top offset banner */

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

  964.     position: relative;

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

  966.     background-color: var(--color-gray-050);

  967. 

  968.     &::after {

  969.       position: absolute;

  970.       bottom: 0;

  971.       left: 0;

  972.       width: 100%;

  973.       height: 0.1875rem;

  974.       content: "";

  975.       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%);

  976.     }

  977.   }

  978. 

  979.   .views-offset-top {

  980.     > * {

  981.       margin: 0;

  982.     }

  983. 

  984.     .form-item {

  985.       max-width: 40%;

  986.       margin: 0 var(--space-s) var(--space-s) 0;

  987.     }

  988.   }

  989. 

  990.   /* Misc */

  991.   .tabledrag-toggle-weight-wrapper {

  992.     margin: 0 0 var(--space-m) 0;

  993.   }

  994. 

  995.   details .item-list {

  996.     padding-inline-start: 2em;

  997.   }

  998. 

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

  1000.     border-block-end: 0 none;

  1001.     background-color: var(--gin-bg-app);

  1002.   }

  1003. 

  1004.   .views-filterable-options {

  1005.     margin-bottom: 0.625rem;

  1006.   }

  1007. 

  1008.   .scroll {

  1009.     overflow: auto;

  1010.     padding: 1em;

  1011.   }

  1012. 

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

  1014.   .views-messages {

  1015.     overflow: auto;

  1016.     max-height: 12.5rem;

  1017.   }

  1018. }

  1019. 

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

  1021.   padding-block: 0;

  1022. }

  1023. 

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

  1025.   border: none;

  1026. }

  1027. 

  1028. /* @end */

  1029. 

  1030. /* @group Messages */

  1031. 

  1032. .views-messages .messages-list,

  1033. .views-messages .messages-list__item {

  1034.   margin-block: 0;

  1035. }

  1036. 

  1037. /* @end */

  1038. 

  1039. /* @group Forms */

  1040. 

  1041. /**

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

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

  1044.  *

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

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

  1047.  *   markup.

  1048.  */

  1049. 

  1050. details.fieldset-no-legend {

  1051.   padding-top: 0;

  1052. }

  1053. 

  1054. /* @group Dependent options */

  1055. 

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

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

  1058.  */

  1059. 

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

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

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

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

  1064.   margin-block: 0.375rem;

  1065.   margin-inline-start: 1.5em;

  1066. }

  1067. 

  1068. .views-admin-dependent {

  1069.   .form-item .form-item,

  1070.   .form-type-checkboxes,

  1071.   .form-type-radios {

  1072.     margin-block: 0.375rem;

  1073.   }

  1074. 

  1075.   .form-type-radio,

  1076.   .form-radios .form-item {

  1077.     margin-block: 2px;

  1078.   }

  1079. }

  1080. 

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

  1082.   margin: 0 var(--space-xs);

  1083. }

  1084. 

  1085. /* @group Attachment details */

  1086. 

  1087. #edit-display-settings-title {

  1088.   color: var(--color-blue-400);

  1089. }

  1090. 

  1091. #edit-displays {

  1092.   .views-display-top {

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

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

  1095.   }

  1096. }

  1097. 

  1098. .edit-display-settings {

  1099.   margin: 0;

  1100.   padding: var(--gin-spacing-l);

  1101. }

  1102. 

  1103. /* @group Attachment details tabs

  1104.  *

  1105.  * The tabs that switch between sections

  1106.  *

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

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

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

  1110.  */

  1111. 

  1112. .views-tabs {

  1113.   display: flex;

  1114.   overflow: visible;

  1115.   flex-wrap: wrap;

  1116.   margin: 0;

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

  1118.   padding: 0;

  1119.   list-style: none;

  1120.   text-align: end;

  1121.   border-bottom: 0 none;

  1122. 

  1123.   .views-display-deleted-link {

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

  1125.     text-decoration: line-through;

  1126.   }

  1127. 

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

  1129.     margin: 0;

  1130.   }

  1131. 

  1132.   li {

  1133.     margin-block: 0 0.3125rem;

  1134.     margin-inline: 0.375rem 0.3125rem;

  1135. 

  1136.     &,

  1137.     &.is-active {

  1138.       width: auto;

  1139.       padding: 0;

  1140.       border: 0;

  1141.       background: transparent;

  1142.     }

  1143. 

  1144.     &:hover {

  1145.       padding-inline-start: 0;

  1146.       border: 0;

  1147.     }

  1148. 

  1149.     & + li {

  1150.       border-top: 0;

  1151.     }

  1152.   }

  1153. 

  1154.   a {

  1155.     display: inline-block;

  1156.     padding: var(--gin-spacing-xs) var(--gin-spacing-m);

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

  1158.     border-radius: 0.4375rem;

  1159.     font-size: small;

  1160.     line-height: 1.3333;

  1161. 

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

  1163.       padding-inline-start: var(--gin-spacing-l);

  1164. 

  1165.       &::before {

  1166.         display: inline-block;

  1167.         width: var(--gin-spacing-l);

  1168.         height: var(--gin-spacing-s);

  1169.         margin-inline-start: calc(var(--gin-spacing-m) * -1);

  1170.         content: "";

  1171.         background-color: currentColor;

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

  1173.         mask-repeat: no-repeat;

  1174.         mask-position: center left;

  1175.         mask-size: contain;

  1176. 

  1177.         &:dir(rtl) {

  1178.           mask-position: center right;

  1179.         }

  1180.       }

  1181.     }

  1182.   }

  1183. 

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

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

  1186.   .error {

  1187.     padding: 0.5rem;

  1188.     border: 2px solid #ed541d;

  1189.   }

  1190. 

  1191.   a:focus {

  1192.     outline: none;

  1193.   }

  1194. 

  1195.   li a {

  1196.     padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  1197.     color: var(--gin-color-primary);

  1198.     border: 2px solid var(--gin-color-primary);

  1199.     border-radius: var(--gin-border-xs);

  1200.     background: transparent;

  1201.     font-size: var(--gin-font-size-xs);

  1202.     font-weight: var(--gin-font-weight-heavy);

  1203. 

  1204.     .icon.add {

  1205.       display: block;

  1206.     }

  1207.   }

  1208. 

  1209.   li a:hover,

  1210.   li.is-active a,

  1211.   li.is-active a.is-active {

  1212.     color: var(--gin-bg-app);

  1213.     border-color: transparent;

  1214.     background: var(--gin-color-primary);

  1215.   }

  1216. 

  1217.   .add {

  1218.     position: relative;

  1219. 

  1220.     a {

  1221.       padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  1222.       color: var(--gin-color-primary);

  1223.       border: 2px solid var(--gin-color-primary);

  1224.       border-radius: var(--gin-border-xs);

  1225.       background: transparent;

  1226.       font-size: var(--gin-font-size-xs);

  1227.       font-weight: var(--gin-font-weight-heavy);

  1228. 

  1229.       &:hover,

  1230.       &:focus {

  1231.         color: var(--gin-bg-app);

  1232.         border-color: transparent;

  1233.         background: var(--gin-color-primary);

  1234.       }

  1235. 

  1236.       &:focus {

  1237.         outline: none;

  1238.         box-shadow:

  1239.           0 0 0 1px var(--gin-color-focus-border),

  1240.           0 0 0 4px var(--gin-color-focus);

  1241.       }

  1242.     }

  1243. 

  1244.     &.open a {

  1245.       color: var(--gin-color-primary);

  1246.       background: var(--gin-bg-layer2);

  1247. 

  1248.       &:hover,

  1249.       &:focus,

  1250.       &:active {

  1251.         color: var(--gin-color-primary);

  1252.       }

  1253.     }

  1254. 

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

  1256.     .icon.add {

  1257.       display: none;

  1258.     }

  1259.   }

  1260. 

  1261.   .action-list {

  1262.     position: absolute;

  1263.     z-index: 50;

  1264.     margin: 0;

  1265.     background: var(--gin-bg-layer3);

  1266.     box-shadow: 0 1px 2px var(--gin-shadow-button);

  1267.     inset-block-start: 2.25rem;

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

  1269. 

  1270.     li {

  1271.       /* @todo are these styles */

  1272.       display: block;

  1273.       border: none;

  1274.       background-color: transparent;

  1275. 

  1276.       input.button {

  1277.         width: 100%;

  1278.         text-align: start;

  1279.         border: none !important;

  1280.         box-shadow: none;

  1281.         line-height: 1.2;

  1282.       }

  1283. 

  1284.       &:hover,

  1285.       &:focus,

  1286.       &:active {

  1287.         &,

  1288.         input.button {

  1289.           color: var(--gin-color-button-text);

  1290.           background: var(--gin-color-primary);

  1291.         }

  1292.       }

  1293.     }

  1294. 

  1295.     li:first-child {

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

  1297.       border-radius: 0 var(--base-border-radius) 0 0; /* LTR */

  1298. 

  1299.       &:dir(rtl) {

  1300.         border-radius: 0 0 0 var(--base-border-radius);

  1301.       }

  1302.     }

  1303.   }

  1304. }

  1305. 

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

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

  1308.   padding-bottom: 0.4rem;

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

  1310.   border-bottom-right-radius: var(--gin-border-l);

  1311.   border-bottom-left-radius: var(--gin-border-l);

  1312. }

  1313. 

  1314. .views-tabs__action-list-button {

  1315.   width: 100%;

  1316.   margin: 0;

  1317.   padding: var(--space-s) var(--space-l);

  1318.   text-align: left;

  1319.   border: medium none;

  1320.   border-radius: 0;

  1321.   background: none repeat scroll 0 0 transparent;

  1322.   font-weight: normal;

  1323. 

  1324.   &.button:hover,

  1325.   &.button:focus {

  1326.     color: var(--color-white);

  1327.     background-color: var(--color-absolutezero);

  1328.   }

  1329. 

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

  1331.   &:not(:focus) {

  1332.     box-shadow: none;

  1333.   }

  1334. 

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

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

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

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

  1339.   @media (scripting: enabled) {

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

  1341.       animation-name: appear;

  1342.       animation-duration: 0.1s;

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

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

  1345.       aggregate CSS with slow 3G. */

  1346.       animation-delay: 5s;

  1347.       animation-iteration-count: 1;

  1348.       animation-fill-mode: backwards;

  1349.     }

  1350.   }

  1351. }

  1352. 

  1353. @keyframes appear {

  1354.   from {

  1355.     display: none;

  1356.   }

  1357. 

  1358.   to {

  1359.     display: unset;

  1360.   }

  1361. }

  1362. 

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

  1364. 

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

  1366.   display: inline-flex;

  1367.   justify-content: space-between;

  1368.   box-sizing: border-box;

  1369.   width: 100%;

  1370.   padding-block: var(--gin-spacing-m) var(--gin-spacing-xs);

  1371.   padding-inline: 0;

  1372. 

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

  1374.     padding: 0 var(--gin-spacing-m);

  1375.   }

  1376. 

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

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

  1379.     margin-inline-end: var(--gin-spacing-m);

  1380.   }

  1381. }

  1382. 

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

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

  1385.     padding: var(--gin-spacing-m);

  1386.   }

  1387. }

  1388. 

  1389. /* @group Add view */

  1390. 

  1391. .form-item-page-create,

  1392. .form-item-block-create {

  1393.   margin-top: 0.8125rem;

  1394. }

  1395. 

  1396. /* @group Modal dialog box

  1397.  *

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

  1399.  */

  1400. 

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

  1402.   padding-top: 0.25rem;

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

  1404.   padding-bottom: 0.25rem;

  1405.   padding-inline-start: 0.25rem;

  1406. }

  1407. 

  1408. /* @group Grouping styles

  1409.  *

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

  1411.  * filters.

  1412.  */

  1413. 

  1414. .views-config-group-region {

  1415.   display: table;

  1416.   margin: var(--space-l) 0;

  1417.   border: 0.0625rem solid var(--color-gray-200);

  1418.   border-collapse: collapse;

  1419. 

  1420.   .views-group-box {

  1421.     position: relative;

  1422.     display: table-cell;

  1423.     padding: var(--space-l);

  1424.     border: 0.0625rem solid var(--color-gray-200);

  1425.   }

  1426. 

  1427.   .views-group-box--operator {

  1428.     padding-inline-end: var(--space-xxl);

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

  1430.   }

  1431. 

  1432.   .views-group-box--value {

  1433.     padding: 0;

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

  1435. 

  1436.     > .form-item {

  1437.       margin-inline: var(--space-xxl) var(--space-l);

  1438. 

  1439.       &::before {

  1440.         position: absolute;

  1441.         top: 0;

  1442.         left: 0;

  1443.         width: 0.0625rem;

  1444.         height: 100%;

  1445.         content: "";

  1446.         border-inline-start: 0.0625rem solid var(--color-gray-200);

  1447.       }

  1448. 

  1449.       &::after {

  1450.         position: absolute;

  1451.         z-index: 1;

  1452.         top: 3.8rem;

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

  1454.         padding-block: 0 0.3rem;

  1455.         padding-inline: 0.4rem 0.3rem;

  1456.         content: ">";

  1457.         color: var(--color-gray-600);

  1458.         border: 0.0625rem solid var(--color-gray-200);

  1459.         background: #fff;

  1460.         font-size: var(--font-size-h1);

  1461.         font-weight: bold;

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

  1463.       }

  1464.     }

  1465.   }

  1466. }

  1467. 

  1468. .views-display-column,

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

  1470.   margin-block-end: var(--gin-spacing-m);

  1471.   border-color: var(--gin-border-color);

  1472.   border-radius: var(--gin-border-m);

  1473.   box-shadow: none;

  1474. }

  1475. 

  1476. a.views-field-excluded {

  1477.   color: var(--gin-color-disabled);

  1478. }

  1479. 

  1480. .views-filterable-options {

  1481.   border-block-start: none;

  1482. }

  1483. 

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

  1485.   margin-block-start: 0;

  1486. }

  1487. 

  1488. .views-display-columns {

  1489.   display: grid;

  1490.   gap: var(--space-xl);

  1491. 

  1492.   .details-wrapper {

  1493.     margin: 0;

  1494.   }

  1495. 

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

  1497.     display: grid;

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

  1499.   }

  1500. }

  1501. 

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

  1503. 

  1504. .system-modules,

  1505. .locale-translation-status-form {

  1506.   tr.even,

  1507.   tr.odd {

  1508.     border-block-start: 1px solid var(--gin-border-color);

  1509.     border-block-end: none;

  1510.     background: none;

  1511.   }

  1512. }

  1513. 

  1514. .system-modules td {

  1515.   height: auto;

  1516.   padding: var(--gin-spacing-m);

  1517. 

  1518.   details summary {

  1519.     background-color: transparent;

  1520.   }

  1521. }

  1522. 

  1523. .machine-name-label {

  1524.   color: var(--gin-color-text);

  1525. }

  1526. 

  1527. .machine-name-value {

  1528.   color: var(--gin-color-title);

  1529. }

  1530. 

  1531. .view-header {

  1532.   margin-block-end: var(--gin-spacing-l);

  1533. }

  1534. 

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

  1536.   display: none;

  1537. }

  1538. 

  1539. .js-only {

  1540.   display: none;

  1541. }

  1542. 

  1543. html.js {

  1544.   .js-only {

  1545.     display: inherit;

  1546.   }

  1547. 

  1548.   span.js-only {

  1549.     display: inline;

  1550.   }

  1551. }

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