7 * Reset styling for all elements.
9 .js .dropbutton .dropbutton-action > input,
10 .js .dropbutton .dropbutton-action > a,
11 .js .dropbutton .dropbutton-action > button {
13 text-decoration: none;
18 -webkit-font-smoothing: antialiased;
19 text-align: left; /* LTR */
21 [dir="rtl"].js .dropbutton .dropbutton-action > input,
22 [dir="rtl"].js .dropbutton .dropbutton-action > a,
23 [dir="rtl"].js .dropbutton .dropbutton-action > button {
25 margin-left: 0; /* This is required to win over specificity of [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * */
27 .js .dropbutton-action.last {
28 border-radius: 0 0 0 1em; /* LTR */
30 [dir="rtl"] .js .dropbutton-action.last {
31 border-radius: 0 0 1em 0;
35 * Overwrite Sevens button styling.
37 .js .dropbutton-widget .button {
38 background: transparent;
43 .js .dropbutton-multiple .dropbutton {
44 border-right: 0; /* LTR */
46 [dir="rtl"].js .dropbutton-multiple .dropbutton {
51 * Show dropbutton elements as buttons when javascript is disabled
56 list-style-type: none;
65 .js .dropbutton li + li {
69 @media screen and (min-width: 37.5625em) { /* 601px */
71 display: inline-block;
77 .js .dropbutton li + li {
83 * Copied styling for .button.
85 .js .dropbutton-multiple .dropbutton-widget {
86 border: 1px solid #a6a6a6;
88 background-color: #f2f1eb;
89 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
90 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
91 text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
93 .dropbutton-multiple.open .dropbutton-widget {
96 .js .dropbutton-widget .dropbutton-action a,
97 .js .dropbutton-widget .dropbutton-action input,
98 .js .dropbutton-widget .dropbutton-action button {
99 border-radius: 20em 0 0 20em; /* LTR */
104 [dir="rtl"].js .dropbutton-widget .dropbutton-action a,
105 [dir="rtl"].js .dropbutton-widget .dropbutton-action input,
106 [dir="rtl"].js .dropbutton-widget .dropbutton-action button {
107 border-radius: 0 20em 20em 0;
109 .js .dropbutton-widget .dropbutton-action a:focus,
110 .js .dropbutton-widget .dropbutton-action input:focus,
111 .js .dropbutton-widget .dropbutton-action button:focus {
112 text-decoration: underline;
114 .js .dropbutton-multiple.open .dropbutton-action a,
115 .js .dropbutton-multiple.open .dropbutton-action .button {
118 .js .dropbutton-multiple.open .dropbutton-action:first-child a,
119 .js .dropbutton-multiple.open .dropbutton-action:first-child .button {
120 border-radius: 0.9em 0 0 0; /* LTR */
122 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a,
123 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button {
124 border-radius: 0 0.9em 0 0;
126 .js .dropbutton-multiple.open .dropbutton-action:last-child a,
127 .js .dropbutton-multiple.open .dropbutton-action:last-child .button {
128 border-radius: 0 0 0 0.9em; /* LTR */
130 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a,
131 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button {
132 border-radius: 0 0 0.9em 0;
134 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,
135 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,
136 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:hover,
137 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:focus,
138 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:focus,
139 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:focus {
140 background-color: #f9f8f6;
141 background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
142 background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
144 box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
147 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:active,
148 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:active,
149 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:active {
150 text-decoration: none;
151 background-color: #dfdfd9;
152 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
153 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
154 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
156 .dropbutton .secondary-action {
157 border-top: 1px solid #bfbfba;
161 * Rare instances when a dropbutton is actually just a button.
162 * Copied from Seven's buttons.css.
164 .dropbutton-single .dropbutton-widget {
167 display: inline-block;
169 .dropbutton-single .dropbutton-action a {
171 border: 1px solid #a6a6a6;
172 border-radius: 20em!important;
173 background-color: #f2f1eb;
174 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
175 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
177 text-decoration: none;
178 text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
180 -webkit-transition: all 0.1s;
181 transition: all 0.1s;
182 -webkit-font-smoothing: antialiased;
183 width: auto!important;
185 .dropbutton-single .dropbutton-action a:hover,
186 .dropbutton-single .dropbutton-action a:focus {
187 background-color: #f9f8f6;
188 background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
189 background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
191 text-decoration: none;
194 .dropbutton-single .dropbutton-action a:hover,
195 .dropbutton-single .dropbutton-action a:focus {
196 box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
198 .dropbutton-single .dropbutton-action a:active {
199 background-color: #dfdfd9;
200 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
201 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
202 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
203 -webkit-transition: none;
208 * The dropdown trigger.
210 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
211 border-left: 1px solid #a6a6a6; /* LTR */
214 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
215 border-right: 1px solid #a6a6a6;
218 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
219 border-radius: 0 20em 20em 0; /* LTR */
221 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
222 border-radius: 20em 0 0 20em;
224 .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
225 border-radius: 0 1em 1em 0; /* LTR */
227 [dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
228 border-radius: 1em 0 0 1em;
230 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
231 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
232 background-color: #f9f8f6;
233 background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
234 background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
236 text-decoration: none;
237 box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
240 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
241 background-color: #dfdfd9;
242 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
243 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
244 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
247 border-top-color: #333;
248 right: 35%; /* LTR */
251 [dir="rtl"] .dropbutton-arrow {
255 .dropbutton-multiple.open .dropbutton-arrow {
256 border-bottom: 0.3333em solid #333;
257 border-top-color: transparent;
262 * Form edit action theming.
263 * Copied styling from .button--primary.
265 .js .form-actions .dropbutton .dropbutton-action > * {
268 text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
270 .js .form-actions .dropbutton-widget {
271 border-color: #1e5c90;
272 background-color: #0071b8;
273 background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
274 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
275 text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
278 .form-actions .dropbutton-multiple.open .dropbutton-widget {
279 background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
280 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
282 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,
283 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {
284 background-color: #2369a6;
285 background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
286 background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
287 box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
290 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {
291 background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
292 background-image: linear-gradient(to bottom, #08639b, #0071b8);
293 border-color: #144b78;
294 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
296 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,
297 .form-actions .dropbutton .secondary-action {
298 border-color: #1e5c90;
300 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
301 background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
302 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
304 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
305 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
306 background-color: #2369a6;
307 background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
308 background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
310 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
311 background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
312 background-image: linear-gradient(to bottom, #08639b, #0071b8);
313 border-color: #144b78;
314 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
316 .form-actions .dropbutton-arrow {
317 border-top-color: #fff;
319 .form-actions .dropbutton-multiple.open .dropbutton-arrow {
320 border-bottom: 0.3333em solid white;