dialog.pcss.css

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

Dialog theme overrides for form elements, links, and controls.

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/theme/dialog.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Dialog theme overrides for form elements, links, and controls.

  4.  */

  5. 

  6. /* cspell:ignore tablesaw */

  7. 

  8. .ui-dialog {

  9.   a,

  10.   .link,

  11.   button.link,

  12.   .tabs__link.is-active,

  13.   [open] .gin-details__summary--accordion,

  14.   [open] .gin-details__summary--accordion-item,

  15.   [open] .gin-details__summary--vertical-tabs-item,

  16.   .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {

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

  18.     text-decoration-style: var(--gin-link-decoration-style);

  19. 

  20.     &:hover {

  21.       color: var(--gin-color-primary-hover);

  22.     }

  23. 

  24.     &:active {

  25.       color: var(--gin-color-primary-active);

  26.     }

  27.   }

  28. 

  29.   *|*:any-link:not(svg|a) {

  30.     text-decoration: underline;

  31.     text-decoration-style: var(--gin-link-decoration-style);

  32.   }

  33. 

  34.   .is-horizontal .tabs__link:hover,

  35.   .gin-details__summary:hover,

  36.   .action-link:hover {

  37.     color: var(--gin-color-primary-hover);

  38.   }

  39. 

  40.   .gin-details[open] > .gin-details__summary:focus {

  41.     color: var(--gin-color-primary-active);

  42.   }

  43. 

  44.   .form-boolean--type-checkbox:checked,

  45.   .form-boolean--type-radio:checked:not(:disabled),

  46.   .is-horizontal .tabs__link.is-active::before,

  47.   .tabs__tab.is-active::before,

  48.   [open] > .gin-details__summary--accordion:not(:focus, :active)::after,

  49.   [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after,

  50.   .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after,

  51.   .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after,

  52.   [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after,

  53.   .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after,

  54.   .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {

  55.     border-color: var(--gin-color-primary);

  56. 

  57.     &:hover {

  58.       border-color: var(--gin-color-primary-hover);

  59.     }

  60. 

  61.     &:active {

  62.       border-color: var(--gin-color-primary-active);

  63.     }

  64.   }

  65. 

  66.   .form-element {

  67.     box-sizing: border-box;

  68.     min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));

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

  70.     border: 1px solid var(--gin-border-color-form-element);

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

  72.     background-color: var(--gin-bg-input);

  73.     line-height: var(--input-line-height);

  74.     padding-block: calc(var(--input-padding-vertical) - 1px);

  75.     padding-inline: var(--input-padding-horizontal);

  76. 

  77.     &:hover {

  78.       border-color: var(--gin-color-text);

  79.       box-shadow: inset 0 0 0 1px var(--gin-color-text);

  80.     }

  81. 

  82.     &[disabled],

  83.     &[disabled]:hover {

  84.       cursor: not-allowed;

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

  86.       border-color: var(--gin-color-disabled-border);

  87.       background-color: var(--gin-color-disabled-bg) !important;

  88.       box-shadow: none;

  89.     }

  90. 

  91.     .gin--dark-mode 
  92. 

  93.     @media (prefers-reduced-motion: no-preference) {

  94.       transition: var(--gin-transition);

  95.     }

  96.   }

  97. 

  98.   .form-element--small,

  99.   .form-element--extrasmall {

  100.     border-radius: var(--gin-border-s);

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

  102.     line-height: 1.5;

  103.   }

  104. 

  105.   .form-textarea-wrapper {

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

  107. 

  108.     textarea {

  109.       max-width: 100%;

  110.     }

  111.   }

  112. 

  113.   .form-item--editor-format,

  114.   .form-element--editor-format {

  115.     width: auto;

  116. 

  117.     .form-item__label {

  118.       inset-block-start: 3px;

  119.       padding-block-end: 0;

  120.     }

  121.   }

  122. 

  123.   .password-field {

  124.     width: 100%;

  125.   }

  126. 

  127.   .password-confirm {

  128.     width: 100%;

  129.     max-width: var(--gin-max-line-length);

  130.   }

  131. 

  132.   .password-strength__title {

  133.     color: var(--gin-color-text-light);

  134.   }

  135. 

  136.   .password-strength__text {

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

  138.   }

  139. 

  140.   .password-suggestions {

  141.     color: var(--gin-color-text-light);

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

  143.     background-color: transparent;

  144.   }

  145. 

  146.   .form-element--type-select {

  147.     padding-inline-end: calc(var(--space-xs) + var(--space-xl) - 1px);

  148. 

  149.     .gin--dark-mode 
  150.   }

  151. 

  152.   .form-element--type-select--small {

  153.     min-height: 2.25rem;

  154.     background-position: 100% 52%;

  155.     font-size: var(--font-size-xs);

  156.     line-height: 1.4;

  157.     padding-block: 0.474rem;

  158. 

  159.     &:dir(rtl) {

  160.       background-position: 0% 52%;

  161.     }

  162.   }

  163. 

  164.   .form-boolean {

  165.     width: 21px;

  166.     height: 21px;

  167.     border-color: var(--gin-border-color-form-element);

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

  169.   }

  170. 

  171.   .form-boolean--type-checkbox {

  172.     .gin--dark-mode &:not(:checked) {

  173.       background: var(--gin-bg-input);

  174.     }

  175. 

  176.     &:checked {

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

  178. 

  179.       .gin--dark-mode &:not(:disabled) {

  180.         background-image: url("../../media/icons/form/checked.svg");

  181.       }

  182. 

  183.       &:hover {

  184.         background-color: var(--gin-color-primary-hover);

  185.       }

  186. 

  187.       &:active {

  188.         background-color: var(--gin-color-primary-active);

  189.       }

  190.     }

  191. 

  192.     &[disabled],

  193.     &[disabled]:hover {

  194.       cursor: not-allowed;

  195.       border-color: var(--gin-color-disabled-border);

  196.       background-color: var(--gin-color-disabled-bg);

  197.     }

  198. 

  199.     &[disabled]:checked,

  200.     &[disabled]:hover:checked {

  201.       border-color: var(--gin-color-disabled-border);

  202.       background-color: var(--gin-color-disabled-bg);

  203.       box-shadow: none;

  204.     }

  205.   }

  206. 

  207.   .gin--dark-mode & .form-boolean:hover,

  208.   .gin--dark-mode & .form-boolean:active {

  209.     border-color: var(--gin-color-text);

  210.     box-shadow: none;

  211.   }

  212. 

  213.   .form-boolean--type-radio {

  214.     &,

  215.     &:hover,

  216.     &:active,

  217.     &:focus,

  218.     &:hover:focus {

  219.       border-color: var(--gin-border-color-form-element);

  220.       border-radius: 50%;

  221.       background-color: var(--gin-bg-input);

  222.       background-image: none;

  223.     }

  224. 

  225.     &:hover {

  226.       box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);

  227.     }

  228. 

  229.     &:hover {

  230.       border-color: var(--gin-color-text);

  231.     }

  232. 

  233.     .gin--dark-mode &:hover {

  234.       border-color: var(--gin-color-text);

  235.     }

  236. 

  237.     &:active,

  238.     &:focus {

  239.       box-shadow:

  240.         inset 0 0 0 1px var(--gin-border-color-layer2),

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

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

  243.     }

  244. 

  245.     &:checked:not(:disabled) {

  246.       &,

  247.       &:hover {

  248.         background-color: var(--gin-bg-layer);

  249.         background-image: none;

  250.         box-shadow: inset 0 0 0 5px var(--gin-color-primary);

  251.       }

  252. 

  253.       &:active,

  254.       &:focus,

  255.       &:hover:focus {

  256.         border-color: var(--gin-color-focus-border);

  257.         box-shadow:

  258.           inset 0 0 0 5px var(--gin-color-primary),

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

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

  261.       }

  262.     }

  263. 

  264.     &:disabled,

  265.     &:disabled:hover {

  266.       cursor: not-allowed;

  267.       border-color: var(--gin-color-disabled-border);

  268.       background: var(--gin-color-disabled-bg);

  269.     }

  270. 

  271.     &:checked:disabled,

  272.     &:checked:disabled:hover {

  273.       background: var(--gin-color-disabled);

  274.       box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);

  275.     }

  276.   }

  277. }

  278. 

  279. /* Toggle checkbox — long selector kept at top level to limit nesting depth. */

  280. .ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox {

  281.   position: relative;

  282.   margin-inline-start: 0;

  283. 

  284.   input {

  285.     all: unset;

  286.     position: relative;

  287.     display: inline-block;

  288.     overflow: hidden;

  289.     box-sizing: border-box;

  290.     width: 2.5rem;

  291.     height: 1.5rem;

  292.     cursor: pointer;

  293.     vertical-align: top;

  294.     border: 3px solid transparent;

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

  296.     background-color: var(--gin-color-disabled);

  297.     appearance: none;

  298.     clip-path: circle(var(--space-l) at 50% 50%);

  299. 

  300.     .gin--dark-mode 
  301. 

  302.     &::before {

  303.       position: absolute;

  304.       width: 100%;

  305.       height: 100%;

  306.       content: "";

  307.       transform: translateX(-16px);

  308.       border-radius: 21px;

  309.       background-color: #fff;

  310. 

  311.       &:dir(rtl) {

  312.         transform: translateX(16px);

  313.       }

  314. 

  315.       .gin--dark-mode 
  316. 

  317.       @media (prefers-reduced-motion: no-preference) {

  318.         transition: transform 0.3s;

  319.       }

  320. 

  321.       @media (forced-colors: active) {

  322.         background-color: CanvasText;

  323.       }

  324.     }

  325. 

  326.     &:disabled {

  327.       cursor: not-allowed;

  328.     }

  329. 

  330.     &:hover {

  331.       opacity: 0.9;

  332.       box-shadow: 0 0 2px rgb(0, 0, 0, 0.2);

  333.     }

  334. 

  335.     &:active,

  336.     &:focus {

  337.       box-shadow:

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

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

  340.     }

  341. 

  342.     &:checked {

  343.       background-color: var(--gin-switch);

  344. 

  345.       .gin--dark-mode 
  346. 

  347.       &::before {

  348.         transform: translateX(16px);

  349.         background-color: #fff;

  350. 

  351.         &:dir(rtl) {

  352.           transform: translateX(-16px);

  353.         }

  354. 

  355.         .gin--dark-mode 
  356. 

  357.         .gin--high-contrast-mode 
  358. 

  359.         @media (forced-colors: active) {

  360.           padding-inline-start: var(--space-xs);

  361.           background-color: LinkText !important;

  362.         }

  363.       }

  364. 

  365.       @media (forced-colors: active) {

  366.         &::after {

  367.           mask-image: url("../../media/icons/form/checked.svg");

  368.           mask-position: 2px 2px;

  369.           transform: translateX(16px);

  370. 

  371.           &:dir(rtl) {

  372.             transform: translateX(-16px);

  373.           }

  374.         }

  375.       }

  376.     }

  377. 

  378.     &:disabled {

  379.       opacity: 0.75;

  380.       background-color: var(--gin-color-disabled);

  381.       box-shadow: none;

  382. 

  383.       &::before {

  384.         opacity: 0.6;

  385.         background-color: #fff;

  386.       }

  387.     }

  388. 

  389.     @media (forced-colors: active) {

  390.       border-width: 2px;

  391.     }

  392. 

  393.     @media (forced-colors: active) {

  394.       &::after {

  395.         position: absolute;

  396.         width: 100%;

  397.         height: 100%;

  398.         content: "";

  399.         transition: transform 0.3s;

  400.         transform: translateX(-16px);

  401.         background-color: Canvas;

  402.         mask-image: url("../../media/icons/form/toggle-unchecked.svg");

  403.         mask-size: 16px 16px;

  404.         mask-position: 17px 2px;

  405.         mask-repeat: no-repeat;

  406. 

  407.         &:dir(rtl) {

  408.           transform: translateX(16px);

  409.         }

  410.       }

  411.     }

  412.   }

  413. 

  414.   label {

  415.     position: relative;

  416.     z-index: 1;

  417.     padding-block-end: 0;

  418.     padding-inline-start: var(--space-xxs);

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

  420.   }

  421. }

  422. 

  423. .ui-dialog table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {

  424.   margin-inline-start: calc(var(--tabledrag-handle-icon-size, 1.0625rem) + var(--space-m));

  425. }

  426. 

  427. .ui-dialog {

  428.   .form-radios .form-type--boolean,

  429.   .form-checkboxes .form-type--boolean {

  430.     margin-block: var(--space-xs);

  431.   }

  432. 

  433.   .form-actions {

  434.     margin-block-end: 0;

  435.   }

  436. 

  437.   .form-edit .form-actions {

  438.     margin-block-end: 0;

  439.     padding: 0;

  440.     border: 0 none;

  441.     background-color: transparent;

  442.   }

  443. 

  444.   fieldset:not(.fieldgroup) {

  445.     padding-block-start: var(--space-xs);

  446.     color: var(--gin-color-text-light);

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

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

  449.     background: transparent;

  450.     box-shadow: none;

  451.     padding-inline: 0;

  452. 

  453.     > legend {

  454.       inset-block-start: 20px;

  455.     }

  456. 

  457.     > .fieldset-wrapper {

  458.       margin-block-start: 20px;

  459.     }

  460. 

  461.     &.error {

  462.       border: 2px solid var(--gin-color-danger);

  463.     }

  464.   }

  465. 

  466.   .fieldset__label,

  467.   .fieldset__label--group,

  468.   .form-item__label {

  469.     margin-block-start: 0;

  470.     margin-block-end: var(--space-xs);

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

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

  473.     font-weight: var(--font-weight-semibold);

  474.   }

  475. 

  476.   .form-item__label.has-error,

  477.   .form-item__error-message {

  478.     color: var(--gin-color-danger);

  479.   }

  480. 

  481.   .form-item__description,

  482.   .fieldset__description,

  483.   .filter-guidelines__item {

  484.     max-width: var(--gin-max-line-length);

  485.     color: var(--gin-color-text-light);

  486.   }

  487. 

  488.   .form-item__label.form-required::after,

  489.   .fieldset__label.form-required::after,

  490.   .form-required > .fieldset__label::after,

  491.   .horizontal-tab-button .form-required::after,

  492.   .vertical-tabs__menu-link .form-required::after {

  493.     content: "*";

  494.     vertical-align: text-top;

  495.     color: var(--gin-color-danger);

  496.     background: none;

  497.     line-height: 1;

  498.     margin-inline: 0.15em;

  499.   }

  500. 

  501.   .gin-details.error {

  502.     border: 2px solid var(--gin-color-danger);

  503.   }

  504. 

  505.   .gin-details__summary:not(.form-required) .required-mark {

  506.     display: none;

  507.   }

  508. 

  509.   .form-item__warning {

  510.     display: inline-block;

  511.     margin-block-start: var(--space-xs);

  512.   }

  513. 

  514.   html.js .form-autocomplete {

  515.     padding-inline-end: 36px;

  516.   }

  517. 

  518.   .entity-form-display-form > .form-actions {

  519.     margin-block: 0;

  520.   }

  521. 

  522.   .required-mark::after {

  523.     background: var(--gin-color-danger);

  524.     mask-image: url("../../media/icons/form/asterisk.svg");

  525.     mask-position: center center;

  526.     mask-size: 100% 100%;

  527.   }

  528. 

  529.   .form-wrapper .form-item__label,

  530.   .form-composite .form-item__label {

  531.     position: relative;

  532.   }

  533. 

  534.   .field--type-text-with-summary .form-item,

  535.   .field--widget-text-textarea .form-item {

  536.     margin-block-end: 0;

  537.   }

  538. 

  539.   .field--type-text-with-summary .filter-wrapper,

  540.   .field--widget-text-textarea .filter-wrapper {

  541.     border: 0 none;

  542.     padding-inline: 0;

  543.   }

  544. 

  545.   .gin-autocomplete {

  546.     width: calc(100% - var(--space-m));

  547. 

  548.     .form-autocomplete {

  549.       width: 100%;

  550.     }

  551.   }

  552. 

  553.   .no-touchevents .form-element--type-select.form-element--extrasmall {

  554.     min-height: 1.75rem;

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

  556.     line-height: 1.5;

  557.   }

  558. 

  559.   #block-gin-content > form > .form-item:first-of-type {

  560.     margin-block-start: 0;

  561.   }

  562. 

  563.   .image-style-new .form-item {

  564.     margin-inline-end: var(--space-xxs);

  565.   }

  566. 

  567.   tr .form-item {

  568.     margin-block: 0;

  569.   }

  570. 

  571.   .container-inline .form-item {

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

  573.   }

  574. 

  575.   .field-plugin-settings-edit-form {

  576.     margin-block-start: var(--space-s);

  577. 

  578.     .form-item {

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

  580.     }

  581. 

  582.     .form-boolean-group .form-item {

  583.       margin-block: var(--space-xs);

  584.     }

  585.   }

  586. 

  587.   .length-indicator {

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

  589.   }

  590. }

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