4 * Base styles for dropbuttons.
8 * When a dropbutton has only one option, it is simply a button.
11 .dropbutton-wrapper div {
12 box-sizing: border-box;
14 .js .dropbutton-wrapper,
15 .js .dropbutton-widget {
20 @media screen and (max-width: 600px) {
21 .js .dropbutton-wrapper {
27 @media screen and (min-width: 600px) {
28 .form-actions .dropbutton-wrapper {
29 float: left; /* LTR */
31 [dir="rtl"] .form-actions .dropbutton-wrapper {
35 .js .form-actions .dropbutton-widget {
38 .js td .dropbutton-widget {
41 .js td .dropbutton-wrapper {
44 .js td .dropbutton-multiple {
45 padding-right: 10em; /* LTR */
46 margin-right: 2em; /* LTR */
49 [dir="rtl"].js td .dropbutton-multiple {
55 .js td .dropbutton-multiple .dropbutton-action a,
56 .js td .dropbutton-multiple .dropbutton-action input,
57 .js td .dropbutton-multiple .dropbutton-action button {
61 /* UL styles are over-scoped in core, so this selector needs weight parity. */
62 .js .dropbutton-widget .dropbutton {
63 list-style-image: none;
64 list-style-type: none;
75 .js .dropbutton li:hover,
76 .js .dropbutton li:focus,
77 .js .dropbutton a:hover,
78 .js .dropbutton a:focus {
83 * The dropbutton styling.
85 * A dropbutton is a widget that displays a list of action links as a button
86 * with a primary action. Secondary actions are hidden behind a click on a
89 * The arrow is created using border on a zero-width, zero-height span.
90 * The arrow inherits the link color, but can be overridden with border colors.
92 .js .dropbutton-multiple .dropbutton-widget {
93 padding-right: 2em; /* LTR */
95 .js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
99 .dropbutton-multiple.open,
100 .dropbutton-multiple.open .dropbutton-widget {
103 .dropbutton-multiple.open {
106 .dropbutton-multiple .dropbutton .secondary-action {
109 .dropbutton-multiple.open .dropbutton .secondary-action {
122 [dir="rtl"] .dropbutton-toggle {
126 .dropbutton-toggle button {
136 .dropbutton-toggle button:hover,
137 .dropbutton-toggle button:focus {
141 border-bottom-color: transparent;
142 border-left-color: transparent;
143 border-right-color: transparent;
145 border-width: 0.3333em 0.3333em 0;
150 right: 40%; /* 0.6667em; */ /* LTR */
152 margin-top: -0.1666em;
156 [dir="rtl"] .dropbutton-arrow {
160 .dropbutton-multiple.open .dropbutton-arrow {
161 border-bottom: 0.3333em solid;
162 border-top-color: transparent;