Mercurial > hg > isophonics-drupal-site

comparison core/themes/seven/css/components/dropbutton.component.css @ 0:4c8ae668cc8c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial import (non-working)
author Chris Cannam
date Wed, 29 Nov 2017 16:09:58 +0000
parents
children 1fec387a4317
comparison
equal deleted inserted replaced
-1:000000000000 0:4c8ae668cc8c
1 /**
2 * @file
3 * Styling dropbuttons.
4 */
5
6 /**
7 * Reset styling for all elements.
8 */
9 .js .dropbutton .dropbutton-action > input,
10 .js .dropbutton .dropbutton-action > a,
11 .js .dropbutton .dropbutton-action > button {
12 color: #333333;
13 text-decoration: none;
14 padding: 0;
15 margin: 0;
16 font-weight: 600;
17 line-height: normal;
18 -webkit-font-smoothing: antialiased;
19 text-align: left; /* LTR */
20 }
21 [dir="rtl"].js .dropbutton .dropbutton-action > input,
22 [dir="rtl"].js .dropbutton .dropbutton-action > a,
23 [dir="rtl"].js .dropbutton .dropbutton-action > button {
24 text-align: right;
25 margin-left: 0; /* This is required to win over specificity of [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * */
26 }
27 .js .dropbutton-action.last {
28 border-radius: 0 0 0 1em; /* LTR */
29 }
30 [dir="rtl"] .js .dropbutton-action.last {
31 border-radius: 0 0 1em 0;
32 }
33
34 /**
35 * Overwrite Sevens button styling.
36 */
37 .js .dropbutton-widget .button {
38 background: transparent;
39 border: 0;
40 border-radius: 0;
41 box-shadow: none;
42 }
43 .js .dropbutton-multiple .dropbutton {
44 border-right: 0; /* LTR */
45 }
46 [dir="rtl"].js .dropbutton-multiple .dropbutton {
47 border-left: 0;
48 }
49
50 /**
51 * Show dropbutton elements as buttons when javascript is disabled
52 */
53 .dropbutton {
54 margin: 0;
55 padding: 0;
56 list-style-type: none;
57 }
58 .dropbutton li + li {
59 margin-top: 10px;
60 }
61 .js .dropbutton li {
62 margin-bottom: 0;
63 margin-right: 0;
64 }
65 .js .dropbutton li + li {
66 margin-top: 0;
67 }
68
69 @media screen and (min-width: 37.5625em) { /* 601px */
70 .dropbutton li {
71 display: inline-block;
72 }
73 .dropbutton li + li {
74 margin-left: 1em;
75 margin-top: 0;
76 }
77 .js .dropbutton li + li {
78 margin-left: 0;
79 }
80 }
81
82 /**
83 * Copied styling for .button.
84 */
85 .js .dropbutton-multiple .dropbutton-widget {
86 border: 1px solid #a6a6a6;
87 border-radius: 20em;
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);
92 }
93 .dropbutton-multiple.open .dropbutton-widget {
94 border-radius: 1em;
95 }
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 */
100 padding: 4px 1.5em;
101 display: block;
102 width: 100%;
103 }
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;
108 }
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;
113 }
114 .js .dropbutton-multiple.open .dropbutton-action a,
115 .js .dropbutton-multiple.open .dropbutton-action .button {
116 border-radius: 0;
117 }
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 */
121 }
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;
125 }
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 */
129 }
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;
133 }
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);
143 color: #1a1a1a;
144 box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
145 z-index: 3;
146 }
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);
155 }
156 .dropbutton .secondary-action {
157 border-top: 1px solid #bfbfba;
158 }
159
160 /**
161 * Rare instances when a dropbutton is actually just a button.
162 * Copied from Seven's buttons.css.
163 */
164 .dropbutton-single .dropbutton-widget {
165 border: 0;
166 position: static;
167 display: inline-block;
168 }
169 .dropbutton-single .dropbutton-action a {
170 padding: 4px 1.5em;
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);
176 color: #333333;
177 text-decoration: none;
178 text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
179 font-weight: 600;
180 -webkit-transition: all 0.1s;
181 transition: all 0.1s;
182 -webkit-font-smoothing: antialiased;
183 width: auto !important;
184 }
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);
190 color: #1a1a1a;
191 text-decoration: none;
192 outline: none;
193 }
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);
197 }
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;
204 transition: none;
205 }
206 .dropbutton-single .dropbutton-action a.use-ajax {
207 float: left;
208 }
209
210 /**
211 * The dropdown trigger.
212 */
213 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
214 border-left: 1px solid #a6a6a6; /* LTR */
215 outline: none;
216 }
217 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
218 border-right: 1px solid #a6a6a6;
219 border-left: 0;
220 }
221 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
222 border-radius: 0 20em 20em 0; /* LTR */
223 }
224 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
225 border-radius: 20em 0 0 20em;
226 }
227 .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
228 border-radius: 0 1em 1em 0; /* LTR */
229 }
230 [dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
231 border-radius: 1em 0 0 1em;
232 }
233 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
234 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
235 background-color: #f9f8f6;
236 background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
237 background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
238 color: #1a1a1a;
239 text-decoration: none;
240 box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
241 z-index: 3;
242 }
243 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
244 background-color: #dfdfd9;
245 background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
246 background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
247 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
248 }
249 .dropbutton-arrow {
250 border-top-color: #333;
251 right: 35%; /* LTR */
252 top: 54%;
253 }
254 [dir="rtl"] .dropbutton-arrow {
255 left: 35%;
256 right: auto;
257 }
258 .dropbutton-multiple.open .dropbutton-arrow {
259 border-bottom: 0.3333em solid #333;
260 border-top-color: transparent;
261 top: 0.6667em;
262 }
263
264 /**
265 * Form edit action theming.
266 * Copied styling from .button--primary.
267 */
268 .js .form-actions .dropbutton .dropbutton-action > * {
269 color: #fff;
270 font-weight: 700;
271 text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
272 }
273 .js .form-actions .dropbutton-widget {
274 border-color: #1e5c90;
275 background-color: #0071b8;
276 background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
277 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
278 text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
279 position: relative;
280 }
281 .form-actions .dropbutton-multiple.open .dropbutton-widget {
282 background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
283 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
284 }
285 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,
286 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {
287 background-color: #2369a6;
288 background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
289 background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
290 box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
291 color: #fff;
292 }
293 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {
294 background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
295 background-image: linear-gradient(to bottom, #08639b, #0071b8);
296 border-color: #144b78;
297 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
298 }
299 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,
300 .form-actions .dropbutton .secondary-action {
301 border-color: #1e5c90;
302 }
303 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
304 background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
305 background-image: linear-gradient(to bottom, #007bc6, #0071b8);
306 }
307 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
308 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
309 background-color: #2369a6;
310 background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
311 background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
312 }
313 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
314 background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
315 background-image: linear-gradient(to bottom, #08639b, #0071b8);
316 border-color: #144b78;
317 box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
318 }
319 .form-actions .dropbutton-arrow {
320 border-top-color: #fff;
321 }
322 .form-actions .dropbutton-multiple.open .dropbutton-arrow {
323 border-bottom: 0.3333em solid white;
324 }