dropbutton.css

Dropbutton styles.

1. Transparent border is needed for high contrast mode. The border-width has to be set with !important to render borders with the defined width in high contrast mode Firefox.

File

View on git.drupalcode.org

core/themes/claro/css/components/dropbutton.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.  * Dropbutton styles.

  11.  *

  12.  * 1. Transparent border is needed for high contrast mode. The border-width has

  13.  *    to be set with !important to render borders with the defined width in high

  14.  *    contrast mode Firefox.

  15.  */

  16. 

  17. :root {

  18.   /**

  19.   * Dropbutton

  20.   */

  21.   --dropbutton-spacing-size: var(--space-m);

  22.   --dropbutton-font-size: var(--font-size-base);

  23.   --dropbutton-line-height: var(--space-m);

  24.   --dropbutton-toggle-size: 3rem;

  25.   --dropbutton-border-size: 1px;

  26.   --dropbutton-toggle-size-spacing: var(--dropbutton-border-size);

  27.   --dropbutton-border-radius-size: 2px;

  28.   --dropbutton-item-max-width: 12.5rem;

  29.   /* Variant variables: small. */

  30.   --dropbutton-small-spacing-size: 0.625rem;

  31.   --dropbutton-small-font-size: var(--font-size-xs);

  32.   --dropbutton-small-line-height: 0.75rem;

  33.   --dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));

  34.   /* Variant variables: extra small. */

  35.   --dropbutton-extrasmall-spacing-size: 0.375rem;

  36.   --dropbutton-extrasmall-font-size: var(--font-size-xs);

  37.   --dropbutton-extrasmall-line-height: 0.75rem;

  38.   --dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));

  39. }

  40. 

  41. .dropbutton-wrapper {

  42.   display: inline-flex;

  43.   border-radius: var(--button-border-radius-size);

  44.   box-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);

  45. }

  46. 

  47. .form-actions .dropbutton-wrapper,

  48. .field-actions .dropbutton-wrapper {

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

  50.   margin-inline: 0 var(--space-m);

  51. }

  52. 

  53. .dropbutton-widget {

  54.   position: relative;

  55.   flex: 1 1 auto;

  56.   .js .dropbutton-wrapper.open 
  57. }

  58. 

  59. /**

  60.  * Dropbutton list.

  61.  */

  62. 

  63. .dropbutton {

  64.   display: block;

  65.   overflow: visible;

  66.   min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */

  67.   height: var(--dropbutton-toggle-size);

  68.   margin: 0;

  69.   list-style: none;

  70. }

  71. 

  72. .dropbutton-widget {

  73.   border-radius: var(--button-border-radius-size);

  74.   background-color: var(--button-bg-color);

  75. }

  76. 

  77. /* Variants. */

  78. 

  79. .dropbutton--small {

  80.   height: var(--dropbutton-small-toggle-size);

  81. }

  82. 

  83. .dropbutton--extrasmall {

  84.   height: var(--dropbutton-extrasmall-toggle-size);

  85. }

  86. 

  87. /**

  88.  * First dropbutton list item.

  89.  */

  90. 

  91. .dropbutton--multiple .dropbutton__item:first-of-type {

  92.   margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

  93.   white-space: nowrap;

  94.   [dir="rtl"] 
  95. }

  96. 

  97. /* First dropbutton list item variants */

  98. 

  99. .no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  100.   margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

  101.   white-space: nowrap;

  102.   [dir="rtl"] 
  103. }

  104. 

  105. .no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

  106.   margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

  107.   white-space: nowrap;

  108.   [dir="rtl"] 
  109. }

  110. 

  111. /**

  112.  * Dropbutton toggler.

  113.  */

  114. 

  115. .dropbutton__toggle {

  116.   position: absolute;

  117.   z-index: 3;

  118.   top: 0;

  119.   right: 0; /* LTR */

  120.   bottom: 0;

  121.   width: var(--dropbutton-toggle-size);

  122.   height: var(--dropbutton-toggle-size);

  123.   border: var(--dropbutton-border-size) solid transparent !important; /* 1 */

  124.   border-inline-start: var(--dropbutton-border-size) solid white !important;

  125.   border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */

  126.   background: var(--button-bg-color);

  127.   font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */

  128.   appearance: none;

  129.   [dir="rtl"] 
  130.   &::before {

  131.     position: absolute;

  132.     top: 50%;

  133.     right: 50%;

  134.     width: 0.875rem;

  135.     height: 0.5625rem;

  136.     content: "";

  137.     transform: translate(50%, -50%) rotate(0);

  138.     background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat center;

  139.     background-size: contain;

  140.   }

  141. 

  142.   /* Toggler states. */

  143.   &:hover {

  144.     color: var(--button-fg-color);

  145.     background-color: var(--button--hover-bg-color);

  146.     box-shadow: 0 2px 4px rgb(0, 0, 0, 0.25);

  147.   }

  148.   &:focus {

  149.     z-index: 2;

  150.   }

  151.   &:active {

  152.     color: var(--button-fg-color);

  153.     background-color: var(--button--active-bg-color);

  154.   }

  155. }

  156. 

  157. .dropbutton-wrapper.open .dropbutton__toggle::before {

  158.   transform: translate(50%, -50%) rotate(180deg);

  159.   [dir="rtl"] 
  160. }

  161. 

  162. /* Toggler variants */

  163. 

  164. .no-touchevents .dropbutton--small .dropbutton__toggle {

  165.   width: var(--dropbutton-small-toggle-size);

  166.   height: var(--dropbutton-small-toggle-size);

  167. }

  168. 

  169. .no-touchevents .dropbutton--extrasmall .dropbutton__toggle {

  170.   width: var(--dropbutton-extrasmall-toggle-size);

  171.   height: var(--dropbutton-extrasmall-toggle-size);

  172. }

  173. 

  174. .no-touchevents .dropbutton--small .dropbutton__toggle::before,

  175. .no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {

  176.   width: 0.75rem; /* 12px */

  177. }

  178. 

  179. /* High contrast. */

  180. 

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

  182.   /* Default. */

  183.   .dropbutton__toggle::before {

  184.     width: 0.5625rem;

  185.     height: 0.5625rem;

  186.     margin-top: calc(0.5625rem / (2 * -1.41429));

  187.     transform: translate(50%, -50%) rotate(135deg); /* LTR */

  188.     border-width: 0.125rem 0.125rem 0 0;

  189.     border-style: solid;

  190.     background: none;

  191.     .dropbutton-wrapper.open 
  192.     [dir="rtl"] .dropbutton-wrapper.open 
  193.   }

  194. 

  195.   /* Variants */

  196. 

  197.   .no-touchevents .dropbutton--small .dropbutton__toggle::before,

  198.   .no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {

  199.     width: 0.4375rem;

  200.     height: 0.4375rem;

  201.     margin-top: calc(0.4375rem / (2 * -1.41429));

  202.   }

  203. 

  204.   .dropbutton-wrapper.open .dropbutton__toggle::before {

  205.     margin-top: calc(0.4375rem / (2 * 1.41429));

  206.   }

  207. }

  208. 

  209. /**

  210.  * Item in the first dropbutton list item (that looks like a button).

  211.  *

  212.  * Duplicates base button styles.

  213.  */

  214. 

  215. .dropbutton__item:first-of-type {

  216.   & > * {

  217.     display: inline-block;

  218.     margin: 0;

  219.     padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));

  220.     cursor: pointer;

  221.     text-align: center;

  222.     -webkit-text-decoration: none;

  223.     text-decoration: none;

  224.     color: var(--button-fg-color);

  225.     border: var(--dropbutton-border-size) solid transparent !important; /* 1 */

  226.     border-radius: var(--button-border-radius-size);

  227.     background-color: var(--button-bg-color);

  228.     font-size: var(--dropbutton-font-size);

  229.     font-weight: 700;

  230.     line-height: var(--dropbutton-line-height);

  231.     appearance: none;

  232.     -webkit-font-smoothing: antialiased;

  233.   }

  234. 

  235.   .dropbutton--multiple & > * {

  236.     padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));

  237.   }

  238. 

  239.   /* Variants */

  240.   .no-touchevents .dropbutton--small & > * {

  241.     padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));

  242.     font-size: var(--dropbutton-small-font-size);

  243.     line-height: var(--dropbutton-small-line-height);

  244.   }

  245. 

  246.   .no-touchevents .dropbutton--extrasmall & > * {

  247.     padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));

  248.     padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));

  249.     font-size: var(--dropbutton-extrasmall-font-size);

  250.     line-height: var(--dropbutton-extrasmall-line-height);

  251.   }

  252. 

  253.   & > *:hover,

  254.   & > .button:hover {

  255.     -webkit-text-decoration: none;

  256.     text-decoration: none;

  257.     color: var(--button-fg-color);

  258.     background-color: var(--button--hover-bg-color);

  259.     box-shadow: 0 2px 4px rgb(0, 0, 0, 0.25);

  260.   }

  261. 

  262.   & > *:focus:hover,

  263.   & > .button:focus:hover {

  264.     box-shadow:

  265.       0 0 0 2px var(--color-white),

  266.       0 0 0 5px var(--color-focus);

  267.   }

  268. 

  269.   & > *:focus {

  270.     -webkit-text-decoration: none;

  271.     text-decoration: none;

  272.   }

  273. 

  274.   & > *:active {

  275.     color: var(--button-fg-color);

  276.     background-color: var(--button--active-bg-color);

  277.   }

  278. 

  279.   .dropbutton--multiple & > * {

  280.     position: relative;

  281.     z-index: 3;

  282.   }

  283. 

  284.   .dropbutton--multiple & > *:focus {

  285.     z-index: 2;

  286.   }

  287. 

  288.   .dropbutton--multiple & > * {

  289.     border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */

  290.   }

  291.   [dir="rtl"] .dropbutton--multiple & > * {

  292.     border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;

  293.   }

  294. }

  295. 

  296. .dropbutton > .dropbutton__item > a,

  297. .dropbutton > .dropbutton__item > .button {

  298.   display: block;

  299.   box-sizing: border-box;

  300.   width: 100%;

  301.   margin: 0;

  302.   text-align: left; /* LTR */

  303. }

  304. 

  305. [dir="rtl"] .dropbutton > .dropbutton__item > a,

  306. [dir="rtl"] .dropbutton > .dropbutton__item > .button {

  307.   text-align: right;

  308. }

  309. 

  310. .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {

  311.   visibility: hidden;

  312.   /**

  313.   * By setting a height of 1px, the dropbutton items are hidden

  314.   * from view while still occupying minimal space, ensuring the layout remains intact.

  315.   */

  316.   height: 1px;

  317. }

  318. 

  319. /**

  320.  * Non-first dropbutton list elements.

  321.  */

  322. 

  323. .dropbutton__item:first-of-type ~ .dropbutton__item {

  324.   border: var(--dropbutton-border-size) solid var(--color-gray-200);

  325.   border-bottom: 0;

  326.   box-shadow: 0 2px 10px rgb(0, 0, 0, 0.15);

  327.   & ~ .dropbutton__item {

  328.     border-top: 0;

  329.   }

  330. }

  331. 

  332. .dropbutton__item ~ .dropbutton__item:last-child {

  333.   border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);

  334.   border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);

  335. }

  336. 

  337. /**

  338.  * Dropbutton items of non-first dropbutton list elements.

  339.  */

  340. 

  341. .dropbutton__item:first-of-type ~ .dropbutton__item {

  342.   max-width: var(--dropbutton-item-max-width);

  343. }

  344. 

  345. .dropbutton__item:first-of-type ~ .dropbutton__item > a,

  346. .dropbutton__item:first-of-type ~ .dropbutton__item > .button {

  347.   position: relative;

  348.   padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));

  349.   white-space: normal;

  350.   -webkit-text-decoration: none;

  351.   text-decoration: none;

  352.   color: var(--color-gray-800);

  353.   border: var(--dropbutton-border-size) solid transparent !important; /* 1 */

  354.   border-radius: var(--dropbutton-border-radius-size);

  355.   background: var(--color-white);

  356.   box-shadow: none;

  357.   font-size: var(--dropbutton-font-size);

  358.   font-weight: normal;

  359.   line-height: var(--dropbutton-line-height);

  360.   -webkit-font-smoothing: antialiased;

  361. }

  362. 

  363. .dropbutton__item:first-of-type ~ .dropbutton__item > a:not(:focus),

  364. .dropbutton__item:first-of-type ~ .dropbutton__item > .button:not(:focus) {

  365.   z-index: 1;

  366. }

  367. 

  368. /* Variants. */

  369. 

  370. .no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,

  371. .no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {

  372.   padding-top: var(--dropbutton-small-spacing-size);

  373.   padding-bottom: var(--dropbutton-small-spacing-size);

  374.   font-size: var(--dropbutton-small-font-size);

  375.   line-height: var(--dropbutton-small-line-height);

  376. }

  377. 

  378. .no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,

  379. .no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {

  380.   padding-top: var(--dropbutton-extrasmall-spacing-size);

  381.   padding-bottom: var(--dropbutton-extrasmall-spacing-size);

  382.   font-size: var(--dropbutton-extrasmall-font-size);

  383.   line-height: var(--dropbutton-extrasmall-line-height);

  384. }

  385. 

  386. /* States. */

  387. 

  388. .dropbutton__item {

  389.   & > *:focus {

  390.     position: relative;

  391.     z-index: 3;

  392.   }

  393. 

  394.   &:first-of-type ~ & > *:hover {

  395.     color: var(--color-text);

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

  397.   }

  398. 

  399.   & > .button:not(:focus) {

  400.     box-shadow: none;

  401.   }

  402. 

  403.   &:first-of-type ~ & > *:focus {

  404.     border-color: var(--color-focus) !important; /* 1 */

  405.     box-shadow:

  406.       inset 0 0 0 1px var(--color-focus),

  407.       0 0 0 1px var(--color-focus);

  408.   }

  409. }

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