views-ui.pcss.css

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

Views UI styling.

File

View on git.drupalcode.org

core/themes/default_admin/css/components/views-ui.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Views UI styling.

  4.  */

  5. 

  6. /* @group Views admin */

  7. 

  8. .views-admin {

  9.   a:hover {

  10.     text-decoration: none;

  11.   }

  12. 

  13.   a.button {

  14.     margin-block: 0;

  15.     margin-inline-end: 0;

  16.   }

  17. 

  18.   /* Links and lists */

  19.   .links {

  20.     margin: 0;

  21.     list-style: none outside none;

  22. 

  23.     li {

  24.       padding-inline-end: 0;

  25.     }

  26.   }

  27. 

  28.   .button .links li {

  29.     padding-inline-end: 12px;

  30.   }

  31. 

  32.   .item-list ul {

  33.     margin: 0;

  34.     padding: 0;

  35.   }

  36. 

  37.   /* Icons */

  38.   .icon {

  39.     width: 16px;

  40.     height: 16px;

  41.   }

  42. 

  43.   .icon,

  44.   .icon-text {

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

  46.     background-repeat: no-repeat;

  47.     background-attachment: scroll;

  48.     background-position: top left;

  49. 

  50.     &:dir(rtl) {

  51.       background-position: top right;

  52.     }

  53.   }

  54. 

  55.   a.icon {

  56.     border: 1px solid #ddd;

  57.     border-radius: 4px;

  58.     background:

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

  60.       repeat-y;

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

  62. 

  63.     &:hover {

  64.       border-color: #d0d0d0;

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

  66.     }

  67. 

  68.     &:active {

  69.       border-color: #c0c0c0;

  70.     }

  71.   }

  72. 

  73.   span.icon {

  74.     position: relative;

  75.     float: inline-start;

  76.   }

  77. 

  78.   .icon.compact {

  79.     display: block;

  80.     overflow: hidden;

  81.     text-indent: -9999px;

  82.     direction: ltr;

  83.   }

  84. 

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

  86.   .icon-text {

  87.     padding-inline-start: 19px;

  88.   }

  89. 

  90.   .icon.linked {

  91.     background-position: center -153px;

  92.   }

  93. 

  94.   .icon.unlinked {

  95.     background-position: center -195px;

  96.   }

  97. 

  98.   .icon.delete {

  99.     background-position: center -52px;

  100.   }

  101. 

  102.   a.icon.delete {

  103.     background-position:

  104.       center -52px,

  105.       top left;

  106. 

  107.     &:dir(rtl) {

  108.       background-position:

  109.         center -52px,

  110.         top right;

  111.     }

  112.   }

  113. 

  114.   .icon.rearrange {

  115.     background-position: center -111px;

  116.   }

  117. 

  118.   a.icon.rearrange {

  119.     background-position:

  120.       center -111px,

  121.       top left;

  122. 

  123.     &:dir(rtl) {

  124.       background-position:

  125.         center -111px,

  126.         top right;

  127.     }

  128.   }

  129. 

  130.   .icon.add {

  131.     background: none;

  132. 

  133.     &::before {

  134.       content: "+";

  135.       font-size: var(--gin-font-size);

  136.       line-height: 0.1;

  137.     }

  138.   }

  139. 

  140.   /* Details */

  141.   details details {

  142.     margin-bottom: 0;

  143.   }

  144. 

  145.   details.box-padding {

  146.     border: none;

  147.   }

  148. 

  149.   /* Form items */

  150.   .form-item {

  151.     margin-top: 9px;

  152.     padding-top: 0;

  153.     padding-bottom: 0;

  154.   }

  155. 

  156.   .container-inline .form-item {

  157.     margin-block: var(--gin-spacing-density-s);

  158.   }

  159. 

  160.   .form-type-checkbox {

  161.     margin-top: 6px;

  162.   }

  163. 

  164.   .form-checkbox,

  165.   .form-radio {

  166.     vertical-align: baseline;

  167.   }

  168. 

  169.   /* Hide 'remove' checkboxes. */

  170.   .views-remove-checkbox {

  171.     display: none;

  172.   }

  173. 

  174.   .form-textarea-wrapper,

  175.   .form-item-options-content {

  176.     width: 100%;

  177.   }

  178. 

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

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

  181.     margin-inline-start: 16px;

  182.   }

  183. 

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

  185.   .form-type-checkbox label,

  186.   .form-type-radio label {

  187.     line-height: 2;

  188.   }

  189. 

  190.   .unit-title {

  191.     margin-top: 18px;

  192.     margin-bottom: 0;

  193.     font-size: 15px;

  194.     line-height: 1.6154;

  195.   }

  196. 

  197.   /* View list */

  198.   .view-changed {

  199.     margin-bottom: 21px;

  200.   }

  201. 

  202.   /* Display edit form actions */

  203.   .form-edit {

  204.     .form-actions,

  205.     .field-actions {

  206.       margin-top: 0;

  207.       padding: var(--space-s) var(--space-m);

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

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

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

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

  212.     }

  213.   }

  214. 

  215.   .label--separator.label--separator {

  216.     margin-inline: var(--space-xs);

  217.   }

  218. 

  219.   /* Filter rearrange grouping */

  220.   .group-populated {

  221.     display: none;

  222.   }

  223. 

  224.   td.group-title {

  225.     font-weight: bold;

  226.   }

  227. 

  228.   .group-message .form-submit,

  229.   .views-remove-group-link,

  230.   .views-add-group {

  231.     float: inline-end;

  232.     clear: both;

  233.   }

  234. 

  235.   .views-operator-label {

  236.     position: absolute;

  237.     z-index: 1;

  238.     bottom: -13px;

  239.     padding: 0.5px 6px;

  240.     text-transform: uppercase;

  241.     border: 1px solid var(--color-gray-200);

  242.     background: #fff;

  243.     font-weight: bold;

  244.     font-style: italic;

  245.   }

  246. 

  247.   .grouped-description,

  248.   .exposed-description {

  249.     float: inline-start;

  250.     padding-block-start: 3px;

  251.     padding-inline-end: 10px;

  252.   }

  253. 

  254.   /* Live preview */

  255.   .preview-submit-wrapper {

  256.     display: inline-block;

  257.   }

  258. 

  259.   .form-item--live-preview {

  260.     vertical-align: top;

  261.   }

  262. 

  263.   /* Messages */

  264.   .messages {

  265.     margin-bottom: 18px;

  266.     line-height: 1.4555;

  267.   }

  268. 

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

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

  271.     position: absolute;

  272.     z-index: 2;

  273.     top: -1px;

  274.     inset-inline-end: -5px;

  275.   }

  276. 

  277.   pre {

  278.     margin-block: 0;

  279.     white-space: pre-wrap;

  280.   }

  281. }

  282. 

  283. /* @end */

  284. 

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

  286.   margin-block: 6px;

  287. }

  288. 

  289. /* @end */

  290. 

  291. /* @group View list */

  292. 

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

  294.   margin: 0.25em 0;

  295.   font-weight: bold;

  296. }

  297. 

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

  299.   margin-inline: 0;

  300.   padding-inline: 0;

  301.   list-style: none;

  302. }

  303. 

  304. .views-list-section {

  305.   margin-bottom: 2em;

  306. }

  307. 

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

  309. .views-ui-name {

  310.   width: 20%;

  311. }

  312. 

  313. .views-ui-description {

  314.   width: 30%;

  315. }

  316. 

  317. .views-ui-machine-name {

  318.   width: 15%;

  319. }

  320. 

  321. .views-ui-displays {

  322.   width: 25%;

  323. }

  324. 

  325. .views-ui-operations {

  326.   width: 10%;

  327. }

  328. 

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

  330.   margin-top: 0;

  331. }

  332. 

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

  334.   font-weight: bold;

  335. }

  336. 

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

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

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

  340.   font-weight: bold;

  341. }

  342. 

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

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

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

  346.   display: block;

  347. }

  348. 

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

  350.   font-weight: normal;

  351. }

  352. 

  353. /* @end */

  354. 

  355. /* @group Views display layout */

  356. 

  357. .views-displays {

  358.   padding-bottom: 36px;

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

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

  361. }

  362. 

  363. .views-display-top {

  364.   position: relative;

  365.   display: flex;

  366.   flex-wrap: wrap;

  367.   justify-content: space-between;

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

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

  370.   border: 0 none;

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

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

  373. 

  374.   .dropbutton-wrapper {

  375.     inset-block-start: 20px;

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

  377.   }

  378. }

  379. 

  380. .edit-display-settings {

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

  382. }

  383. 

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

  385.   position: relative;

  386.   display: flex;

  387.   flex-wrap: wrap;

  388.   justify-content: space-between;

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

  390.   padding: 0;

  391.   border-bottom: none;

  392.   line-height: 20px;

  393. 

  394.   .views-display-setting {

  395.     padding: 0.125rem 0 0;

  396.   }

  397. }

  398. 

  399. .views-display-column {

  400.   box-sizing: border-box;

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

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

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

  404. 

  405.   & + 
  406. }

  407. 

  408. .views-display-deleted {

  409.   & > details > summary,

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

  411.   & .views-display-columns {

  412.     opacity: 0.25;

  413.   }

  414. }

  415. 

  416. .views-display-disabled {

  417.   & > details > summary,

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

  419.   & .views-display-columns {

  420.     opacity: 0.5;

  421.   }

  422. }

  423. 

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

  425.   opacity: 1;

  426. }

  427. 

  428. .views-edit-view {

  429.   margin-bottom: 15px;

  430. 

  431.   .unit-title {

  432.     margin-block-start: 0;

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

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

  435.     letter-spacing: -0.025em;

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

  437.     font-weight: var(--gin-font-weight-normal);

  438.   }

  439. 

  440.   &.disabled {

  441.     .views-displays {

  442.       background-color: transparent;

  443.     }

  444. 

  445.     .views-display-column {

  446.       opacity: 0.75;

  447.       background: transparent;

  448.     }

  449.   }

  450. }

  451. 

  452. /* @end */

  453. 

  454. /* @group Attachment buckets */

  455. 

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

  457.   position: relative;

  458.   margin: 0;

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

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

  461.   line-height: 20px;

  462. 

  463.   &:last-of-type {

  464.     margin-bottom: 0;

  465.     border-bottom: none;

  466.   }

  467. 

  468.   & + 
  469. 

  470.   &.access {

  471.     padding-top: 0;

  472.   }

  473. 

  474.   &.page-settings {

  475.     border-bottom: medium none;

  476.   }

  477. 

  478.   .links {

  479.     padding: 2px 6px 4px;

  480. 

  481.     li + li {

  482.       margin-inline-start: 3px;

  483.     }

  484.   }

  485. 

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

  487.     margin: 0;

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

  489.     text-transform: none;

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

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

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

  493.   }

  494. 

  495.   .views-display-setting {

  496.     display: flex;

  497.     flex-wrap: wrap;

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

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

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

  501.   }

  502. 

  503.   .views-group-text {

  504.     margin-block: 6px;

  505.   }

  506. 

  507.   .dropbutton-wrapper {

  508.     inset-block-start: 14px;

  509.     inset-inline-end: var(--gin-spacing-m);

  510.   }

  511. }

  512. 

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

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

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

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

  517.  * header specifically with the overridden font style.

  518.  */

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

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

  521.   font-style: italic;

  522. }

  523. 

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

  525.   background-color: transparent;

  526. }

  527. 

  528. .views-display-setting .label {

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

  530.   white-space: nowrap;

  531. }

  532. 

  533. /**

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

  535.  * converted to splitbuttons.

  536.  *

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

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

  539.  */

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

  541.   top: 0.8125rem;

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

  543. }

  544. 

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

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

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

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

  549.   }

  550. 

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

  552.     padding: var(--space-m) var(--space-xs);

  553.   }

  554. }

  555. 

  556. /* @end */

  557. 

  558. /* @group Filter rearrange grouping */

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

  560.   height: 1px;

  561.   margin: 0;

  562.   padding: 0;

  563. 

  564.   span {

  565.     display: block;

  566.     overflow: hidden;

  567.     height: 1px;

  568.   }

  569. }

  570. 

  571. /* @end */

  572. 

  573. /* @group Filter form */

  574. 

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

  576.   table {

  577.     border-collapse: collapse;

  578.   }

  579. 

  580.   :is(th, td) {

  581.     vertical-align: top;

  582.   }

  583. 

  584.   tr {

  585.     border-bottom: 0;

  586. 

  587.     &:first-of-type {

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

  589.     }

  590. 

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

  592.       background: inherit;

  593.     }

  594. 

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

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

  597.     }

  598. 

  599.     td:last-child {

  600.       border-inline-end: medium none;

  601.     }

  602. 

  603.     &.drag td {

  604.       background-color: #fe7 !important;

  605.     }

  606. 

  607.     &.drag-previous td {

  608.       background-color: #ffb !important;

  609.     }

  610.   }

  611. 

  612.   td {

  613.     & > .form-item {

  614.       display: revert;

  615.     }

  616. 

  617.     &[rowspan] {

  618.       border: 1px solid var(--color-gray-200);

  619.     }

  620.   }

  621. 

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

  623.     border: medium none;

  624.   }

  625. 

  626.   .draggable td {

  627.     vertical-align: middle;

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

  629.   }

  630. 

  631.   .group-empty {

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

  633.   }

  634. 

  635.   .filter-group-operator-row {

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

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

  638.   }

  639. 

  640.   .action-links {

  641.     float: inline-start;

  642.     margin: 0 0 1em;

  643.     padding: 0;

  644.   }

  645. 

  646.   .tabledrag-cell {

  647.     position: relative;

  648.   }

  649. }

  650. 

  651. /* @end */

  652. 

  653. /* @group Live preview */

  654. 

  655. .view-preview-form {

  656.   position: relative;

  657. 

  658.   .form-item--view-args,

  659.   .form-actions,

  660.   .field-actions {

  661.     margin-top: 5px;

  662.   }

  663. 

  664.   .form-actions,

  665.   .field-actions {

  666.     vertical-align: top;

  667.   }

  668. 

  669.   .form-actions {

  670.     align-items: flex-end;

  671.   }

  672. 

  673.   .views-bulk-actions__item {

  674.     margin-block-start: 0;

  675.   }

  676. 

  677.   .arguments-preview {

  678.     margin-inline-start: 0;

  679.     font-size: 1em;

  680.   }

  681. 

  682.   .form-item--view-args {

  683.     margin-top: var(--space-m);

  684.   }

  685. 

  686.   .arguments-preview,

  687.   .form-item--view-args {

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

  689.   }

  690. 

  691.   .form-item--live-preview {

  692.     position: static !important;

  693.     top: 0.6875rem;

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

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

  696.     margin-inline-start: 2px;

  697.   }

  698. 

  699.   .preview-section {

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

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

  702.   }

  703. 

  704.   .view-filters .preview-section {

  705.     display: flex;

  706.     flex-wrap: wrap;

  707.   }

  708. 

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

  710.     /* 720px */

  711.     .form-type-textfield .description {

  712.       white-space: nowrap;

  713.     }

  714.   }

  715. }

  716. 

  717. .views-preview-wrapper {

  718.   border: 1px solid #ccc;

  719. }

  720. 

  721. .view-preview-form__title {

  722.   margin-top: 0;

  723.   padding: 0;

  724.   border-block-end: 0 none;

  725.   background-color: transparent;

  726. }

  727. 

  728. .views-live-preview {

  729.   padding: 0;

  730. 

  731.   .views-query-info {

  732.     overflow: auto;

  733.   }

  734. 

  735.   .section-title {

  736.     display: inline-block;

  737.     margin-block: 0;

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

  739.     font-size: 13px;

  740.     font-weight: normal;

  741.     line-height: 1.6154;

  742.   }

  743. 

  744.   .view > * {

  745.     margin-top: var(--space-m);

  746.   }

  747. 

  748.   .preview-section {

  749.     margin: 0 -5px;

  750.     padding: 3px 5px;

  751.     border: 1px dashed #dedede;

  752.   }

  753. 

  754.   li.views-row + li.views-row {

  755.     margin-top: 18px;

  756.   }

  757. 

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

  759.   div.views-row + div.views-row {

  760.     margin-top: 36px;

  761.   }

  762. 

  763.   .gin-layer-wrapper {

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

  765.   }

  766. }

  767. 

  768. .views-query-info {

  769.   pre {

  770.     margin-top: 0;

  771.     margin-bottom: 0;

  772.   }

  773. 

  774.   table {

  775.     margin: 10px 0;

  776.     border-spacing: 1px;

  777.     border-collapse: separate;

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

  779.     border-radius: 7px;

  780. 

  781.     tr {

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

  783. 

  784.       td {

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

  786. 

  787.         &:last-child {

  788.           border: 0;

  789.         }

  790.       }

  791.     }

  792. 

  793.     th,

  794.     td {

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

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

  797.     }

  798.   }

  799. }

  800. 

  801. /* @end */

  802. 

  803. /* @group Modal dialog box */

  804. 

  805. .views-filterable-options {

  806.   .form-type-checkbox {

  807.     padding: 5px 8px;

  808.     border-top: none;

  809. 

  810.     .description {

  811.       margin-top: 0;

  812.       margin-bottom: 0;

  813.     }

  814.   }

  815. }

  816. 

  817. .filterable-option .form-item {

  818.   margin-top: 0;

  819.   margin-bottom: 0;

  820. }

  821. 

  822. .views-filterable-options-controls {

  823.   .form-item {

  824.     width: 30%;

  825.     margin: 0;

  826.     margin-inline-start: 2%;

  827.   }

  828. 

  829.   input,

  830.   select {

  831.     width: 100%;

  832.   }

  833. }

  834. 

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

  836.   padding: 0;

  837. }

  838. 

  839. .views-ui-dialog {

  840.   /* Form layout */

  841.   .form--flex {

  842.     display: flex;

  843.     overflow: hidden;

  844.     flex-wrap: wrap;

  845.   }

  846. 

  847.   .form--inline {

  848.     padding-block-start: 0;

  849.   }

  850. 

  851.   /* Form items */

  852.   .form-item {

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

  854.   }

  855. 

  856.   .form-item-selected {

  857.     margin: 0;

  858.     padding: 6px 16px;

  859.   }

  860. 

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

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

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

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

  865.     font-weight: bold;

  866.   }

  867. 

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

  869.     display: inline-block;

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

  871.   }

  872. 

  873.   /* Form fields */

  874.   .form-element {

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

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

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

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

  879.   }

  880. 

  881.   .form-element--type-select {

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

  883.     background-position-y: 56%;

  884.   }

  885. 

  886.   textarea {

  887.     width: 100%;

  888.   }

  889. 

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

  891.   .form-item__description[class] {

  892.     max-width: none;

  893.   }

  894. 

  895.   td .form-element {

  896.     width: auto;

  897.   }

  898. 

  899.   /* Booleans */

  900.   .form-type--boolean {

  901.     margin-inline: 0;

  902. 

  903.     .form-boolean {

  904.       top: 0;

  905.       float: none;

  906.       margin: 0;

  907.       margin-inline-end: 0.25rem;

  908.       transform: none;

  909.     }

  910.   }

  911. 

  912.   .form-boolean-group .form-type--boolean {

  913.     margin-top: 0.4em;

  914.     margin-bottom: 0.4em;

  915.   }

  916. 

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

  918.   .draggable .form-type--checkbox {

  919.     display: inline-block;

  920.     margin: 0 0.25rem;

  921.   }

  922. 

  923.   /* Buttons */

  924.   input.form-submit,

  925.   a.button {

  926.     margin-block: 0;

  927.     margin-inline-end: 0;

  928.   }

  929. 

  930.   /* Add form selection list */

  931.   .views-add-form-selected {

  932.     padding: 0 1rem;

  933. 

  934.     > div {

  935.       display: block;

  936.       margin: 0;

  937.       padding: 0.3rem 0.8rem;

  938.       border: 1px solid #dedfe4;

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

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

  941.     }

  942. 

  943.     .views-selected-options {

  944.       display: inline;

  945.     }

  946.   }

  947. 

  948.   /* Top offset banner */

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

  950.     position: relative;

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

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

  953. 

  954.     &::after {

  955.       position: absolute;

  956.       bottom: 0;

  957.       left: 0;

  958.       width: 100%;

  959.       height: 3px;

  960.       content: "";

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

  962.     }

  963.   }

  964. 

  965.   .views-offset-top {

  966.     > * {

  967.       margin: 0;

  968.     }

  969. 

  970.     .form-item {

  971.       max-width: 40%;

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

  973.     }

  974.   }

  975. 

  976.   /* Misc */

  977.   .tabledrag-toggle-weight-wrapper {

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

  979.   }

  980. 

  981.   details .item-list {

  982.     padding-inline-start: 2em;

  983.   }

  984. 

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

  986.     border-block-end: 0 none;

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

  988.   }

  989. 

  990.   .views-filterable-options {

  991.     margin-bottom: 10px;

  992.   }

  993. 

  994.   .scroll {

  995.     overflow: auto;

  996.     padding: 1em;

  997.   }

  998. 

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

  1000.   .views-messages {

  1001.     overflow: auto;

  1002.     max-height: 200px;

  1003.   }

  1004. }

  1005. 

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

  1007.   padding-block: 0;

  1008. }

  1009. 

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

  1011.   border: none;

  1012. }

  1013. 

  1014. /* @end */

  1015. 

  1016. /* @group Messages */

  1017. 

  1018. .views-messages .messages-list,

  1019. .views-messages .messages-list__item {

  1020.   margin-block: 0;

  1021. }

  1022. 

  1023. /* @end */

  1024. 

  1025. /* @group Forms */

  1026. 

  1027. /**

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

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

  1030.  *

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

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

  1033.  *   markup.

  1034.  */

  1035. details.fieldset-no-legend {

  1036.   padding-top: 0;

  1037. }

  1038. 

  1039. /* @group Dependent options */

  1040. 

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

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

  1043.  */

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

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

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

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

  1048.   margin-block: 6px;

  1049.   margin-inline-start: 1.5em;

  1050. }

  1051. 

  1052. .views-admin-dependent {

  1053.   .form-item .form-item,

  1054.   .form-type-checkboxes,

  1055.   .form-type-radios {

  1056.     margin-block: 6px;

  1057.   }

  1058. 

  1059.   .form-type-radio,

  1060.   .form-radios .form-item {

  1061.     margin-block: 2px;

  1062.   }

  1063. }

  1064. 

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

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

  1067. }

  1068. 

  1069. /* @group Attachment details */

  1070. 

  1071. #edit-display-settings-title {

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

  1073. }

  1074. 

  1075. #edit-displays {

  1076.   .views-display-top {

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

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

  1079.   }

  1080. }

  1081. 

  1082. .edit-display-settings {

  1083.   margin: 0;

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

  1085. }

  1086. 

  1087. /* @group Attachment details tabs

  1088.  *

  1089.  * The tabs that switch between sections

  1090.  *

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

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

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

  1094.  */

  1095. 

  1096. .views-tabs {

  1097.   display: flex;

  1098.   overflow: visible;

  1099.   flex-wrap: wrap;

  1100.   margin: 0;

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

  1102.   padding: 0;

  1103.   list-style: none;

  1104.   text-align: end;

  1105.   border-bottom: 0 none;

  1106. 

  1107.   .views-display-deleted-link {

  1108.     text-decoration: line-through;

  1109.   }

  1110. 

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

  1112.     margin: 0;

  1113.   }

  1114. 

  1115.   li {

  1116.     margin-block: 0 5px;

  1117.     margin-inline: 6px 5px;

  1118. 

  1119.     &,

  1120.     &.is-active {

  1121.       width: auto;

  1122.       padding: 0;

  1123.       border: 0;

  1124.       background: transparent;

  1125.     }

  1126. 

  1127.     &:hover {

  1128.       padding-inline-start: 0;

  1129.       border: 0;

  1130.     }

  1131. 

  1132.     & + li {

  1133.       border-top: 0;

  1134.     }

  1135.   }

  1136. 

  1137.   a {

  1138.     display: inline-block;

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

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

  1141.     border-radius: 7px;

  1142.     font-size: small;

  1143.     line-height: 1.3333;

  1144. 

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

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

  1147. 

  1148.       &::before {

  1149.         display: inline-block;

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

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

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

  1153.         content: "";

  1154.         background-color: currentColor;

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

  1156.         mask-repeat: no-repeat;

  1157.         mask-position: center left;

  1158.         mask-size: contain;

  1159. 

  1160.         &:dir(rtl) {

  1161.           mask-position: center right;

  1162.         }

  1163.       }

  1164.     }

  1165.   }

  1166. 

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

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

  1169.   .error {

  1170.     padding: 8px;

  1171.     border: 2px solid #ed541d;

  1172.   }

  1173. 

  1174.   a:focus {

  1175.     outline: none;

  1176.   }

  1177. 

  1178.   li a {

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

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

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

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

  1183.     background: transparent;

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

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

  1186. 

  1187.     .icon.add {

  1188.       display: block;

  1189.     }

  1190.   }

  1191. 

  1192.   li a:hover,

  1193.   li.is-active a,

  1194.   li.is-active a.is-active {

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

  1196.     border-color: transparent;

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

  1198.   }

  1199. 

  1200.   .add {

  1201.     position: relative;

  1202. 

  1203.     a {

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

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

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

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

  1208.       background: transparent;

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

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

  1211. 

  1212.       &:hover,

  1213.       &:focus {

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

  1215.         border-color: transparent;

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

  1217.       }

  1218. 

  1219.       &:focus {

  1220.         outline: none;

  1221.         box-shadow:

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

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

  1224.       }

  1225.     }

  1226. 

  1227.     &.open a {

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

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

  1230. 

  1231.       &:hover,

  1232.       &:focus,

  1233.       &:active {

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

  1235.       }

  1236.     }

  1237. 

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

  1239.     .icon.add {

  1240.       display: none;

  1241.     }

  1242.   }

  1243. 

  1244.   .action-list {

  1245.     position: absolute;

  1246.     z-index: 50;

  1247.     margin: 0;

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

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

  1250.     inset-block-start: 36px;

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

  1252. 

  1253.     li {

  1254.       /* @todo are these styles */

  1255.       display: block;

  1256.       border: none;

  1257.       background-color: transparent;

  1258. 

  1259.       input.button {

  1260.         width: 100%;

  1261.         text-align: start;

  1262.         border: none !important;

  1263.         box-shadow: none;

  1264.         line-height: 1.2;

  1265.       }

  1266. 

  1267.       &:hover,

  1268.       &:focus,

  1269.       &:active {

  1270.         &,

  1271.         input.button {

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

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

  1274.         }

  1275.       }

  1276.     }

  1277. 

  1278.     li:first-child {

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

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

  1281. 

  1282.       &:dir(rtl) {

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

  1284.       }

  1285.     }

  1286.   }

  1287. }

  1288. 

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

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

  1291.   padding-bottom: 0.4rem;

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

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

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

  1295. }

  1296. 

  1297. .views-tabs__action-list-button {

  1298.   width: 100%;

  1299.   margin: 0;

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

  1301.   text-align: left;

  1302.   border: medium none;

  1303.   border-radius: 0;

  1304.   background: none repeat scroll 0 0 transparent;

  1305.   font-weight: normal;

  1306. 

  1307.   &.button:hover,

  1308.   &.button:focus {

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

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

  1311.   }

  1312. 

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

  1314.   &:not(:focus) {

  1315.     box-shadow: none;

  1316.   }

  1317. 

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

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

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

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

  1322.   @media (scripting: enabled) {

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

  1324.       animation-name: appear;

  1325.       animation-duration: 0.1s;

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

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

  1328.       aggregate CSS with slow 3G. */

  1329.       animation-delay: 5s;

  1330.       animation-iteration-count: 1;

  1331.       animation-fill-mode: backwards;

  1332.     }

  1333.   }

  1334. }

  1335. 

  1336. @keyframes appear {

  1337.   from {

  1338.     display: none;

  1339.   }

  1340. 

  1341.   to {

  1342.     display: unset;

  1343.   }

  1344. }

  1345. 

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

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

  1348.   display: inline-flex;

  1349.   justify-content: space-between;

  1350.   box-sizing: border-box;

  1351.   width: 100%;

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

  1353.   padding-inline: 0;

  1354. 

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

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

  1357.   }

  1358. 

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

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

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

  1362.   }

  1363. }

  1364. 

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

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

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

  1368.   }

  1369. }

  1370. 

  1371. /* @group Add view */

  1372. 

  1373. .form-item-page-create,

  1374. .form-item-block-create {

  1375.   margin-top: 13px;

  1376. }

  1377. 

  1378. /* @group Modal dialog box

  1379.  *

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

  1381.  */

  1382. 

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

  1384.   padding-top: 4px;

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

  1386.   padding-bottom: 4px;

  1387.   padding-inline-start: 4px;

  1388. }

  1389. 

  1390. /* @group Grouping styles

  1391.  *

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

  1393.  * filters.

  1394.  */

  1395. .views-config-group-region {

  1396.   display: table;

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

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

  1399.   border-collapse: collapse;

  1400. 

  1401.   .views-group-box {

  1402.     position: relative;

  1403.     display: table-cell;

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

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

  1406.   }

  1407. 

  1408.   .views-group-box--operator {

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

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

  1411.   }

  1412. 

  1413.   .views-group-box--value {

  1414.     padding: 0;

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

  1416. 

  1417.     > .form-item {

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

  1419. 

  1420.       &::before {

  1421.         position: absolute;

  1422.         top: 0;

  1423.         left: 0;

  1424.         width: 0.0625rem;

  1425.         height: 100%;

  1426.         content: "";

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

  1428.       }

  1429. 

  1430.       &::after {

  1431.         position: absolute;

  1432.         z-index: 1;

  1433.         top: 3.8rem;

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

  1435.         padding-block: 0 0.3rem;

  1436.         padding-inline: 0.4rem 0.3rem;

  1437.         content: ">";

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

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

  1440.         background: #fff;

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

  1442.         font-weight: bold;

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

  1444.       }

  1445.     }

  1446.   }

  1447. }

  1448. 

  1449. .views-display-column,

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

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

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

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

  1454.   box-shadow: none;

  1455. }

  1456. 

  1457. a.views-field-excluded {

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

  1459. }

  1460. 

  1461. .views-filterable-options {

  1462.   border-block-start: none;

  1463. }

  1464. 

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

  1466.   margin-block-start: 0;

  1467. }

  1468. 

  1469. .views-display-columns {

  1470.   display: grid;

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

  1472. 

  1473.   .details-wrapper {

  1474.     margin: 0;

  1475.   }

  1476. 

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

  1478.     display: grid;

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

  1480.   }

  1481. }

  1482. 

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

  1484. .system-modules,

  1485. .locale-translation-status-form {

  1486.   tr.even,

  1487.   tr.odd {

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

  1489.     border-block-end: none;

  1490.     background: none;

  1491.   }

  1492. }

  1493. 

  1494. .system-modules td {

  1495.   height: auto;

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

  1497. 

  1498.   details summary {

  1499.     background-color: transparent;

  1500.   }

  1501. }

  1502. 

  1503. .machine-name-label {

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

  1505. }

  1506. 

  1507. .machine-name-value {

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

  1509. }

  1510. 

  1511. .view-header {

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

  1513. }

  1514. 

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

  1516.   display: none;

  1517. }

  1518. 

  1519. .js-only {

  1520.   display: none;

  1521. }

  1522. 

  1523. html.js {

  1524.   .js-only {

  1525.     display: inherit;

  1526.   }

  1527. 

  1528.   span.js-only {

  1529.     display: inline;

  1530.   }

  1531. }

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