Mercurial > libervia-templates

comparison sat_templates/templates/default/static/styles.css @ 166:178f55b825b7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
small refactoring/redesign, better BEM integration: - blog has been redesigned, and almost all blog CSS has been made generic and moved to main styles.css file. - better noscript handling, dynamic elements are created using "magic" classes (dom_update.js) - using better icons for older/newer messages - better state handling, classes now use "state_XXX" - more classes now use BEM convention - menu labels have been moved to a separate template (components/menu_labels.html), so it can be overriden easily by other sites - better styles.css organisation
author Goffi <goffi@goffi.org>
date Wed, 03 Oct 2018 21:00:24 +0200
parents e9f0a4215e46
children 6f05d4bdc58e
comparison
equal deleted inserted replaced
165:9e8d9d754337 166:178f55b825b7
1 /*************
2 * Constants *
3 *************/
4
1 :root { 5 :root {
6 --box-bg-color: #efefef;
7 --box--expand_limit: 20rem;
8 --box--expand_height-min: 9rem;
2 --select-bg-color: #ddd; 9 --select-bg-color: #ddd;
3 --size-medium: 3em; 10 --size-medium: 3rem;
4 } 11 --color-prim: #fafafa;
5 12 --color-prim--light: #ffffff;
13 --color-prim--dark: #c7c7c7;
14 --color-sec: #448aff;
15 --color-sec--light: #83b9ff;
16 --color-sec--dark: #005ecb;
17 }
18
19 /*****************
20 * Main Elements *
21 *****************/
6 22
7 html { 23 html {
8 font-family: "sat-base-font"; 24 font-family: "sat-base-font";
9 } 25 }
10 26
35 #body { 51 #body {
36 flex: 1; 52 flex: 1;
37 position: relative; 53 position: relative;
38 } 54 }
39 55
40 footer { 56 .page__footer {
41 text-align: center; 57 text-align: center;
42 font-size: 0.7em; 58 font-size: 0.7em;
43 font-weight: bold; 59 font-weight: bold;
44 } 60 padding-top: 1em;
45 .title { 61 }
46 font-weight: bold; 62
47 text-align: center; 63 .page__footer span {
48 } 64 background: white;
65 }
66
49 67
50 .post_confirm { 68 .post_confirm {
51 text-align: center; 69 text-align: center;
52 background-color: lightgreen; 70 background-color: lightgreen;
53 padding: 1em; 71 padding: 1em;
55 font-weight: bold; 73 font-weight: bold;
56 width: 60%; 74 width: 60%;
57 margin: 1.5em auto; 75 margin: 1.5em auto;
58 } 76 }
59 77
60 /*** Generic ***/ 78 /**********
61 79 * States *
62 .button { 80 **********/
63 padding: 0.5em 1em; 81
64 background: #333; 82 .state_init {
65 color: #ccc; 83 cursor: pointer;
84 }
85
86 .other_lang.state_init>* {
87 display: none;
88 }
89
90 .show_if_init {
91 display: none;
92 }
93
94 .state_init.show_if_init {
95 /* unset is not working well here (it uses "inline", not element default) */
96 display: block;
97 }
98
99 .show_if_parent_init {
100 display: none;
101 }
102
103 .state_init>.show_if_parent_init {
104 display: block;
105 }
106
107 .show_if_parent_clicked {
108 display: none;
109 }
110
111 .state_clicked>.show_if_parent_clicked {
112 /* cf. .show_if_init */
113 display: block;
114 }
115
116 .state_clicked>span.show_if_parent_clicked {
117 /* cf. .show_if_init */
118 display: inline;
119 }
120
121 .state_clicked>.show_if_parent_not_clicked {
122 display: none;
123 }
124
125 .show_if_grandparent_clicked {
126 display: none;
127 }
128
129 .state_clicked>*>.show_if_grandparent_clicked {
130 /* cf. .show_if_init */
131 display: block;
132 }
133
134 .state_clicked>*>.show_if_grandparent_not_clicked {
135 display: none;
136 }
137
138 /***********
139 * Generic *
140 ***********/
141
142 /** Buttons **/
143
144 .btn {
145 padding: 0.3em 0.5em;
146 background-color: #222;
147 color: white;
66 border: 1px solid #555; 148 border: 1px solid #555;
67 border-radius: 0.8em; 149 border-radius: 0.8em;
68 font-weight: bold; 150 font-weight: bold;
69 } 151 }
70 152
71 153
72 .button:hover { 154 .btn:hover {
73 background-color: #bc0000; 155 background-color: var(--color-sec);
74 } 156 }
157
158 .btn-fold {
159 border: none;
160 border-radius: 1em;
161 background-color: var(--color-prim--light);
162 color: #727272;
163 font-weight: bold;
164 font-variant: small-caps;
165 padding: 0;
166 cursor: pointer;
167 }
168
169 .btn-fold:hover {
170 font-weight: bold;
171 }
172
173 /** Labels **/
174
175 .labels {
176 text-align: right;
177 white-space: nowrap;
178 }
179
180 .labels a {
181 text-decoration: none;
182 color: inherit;
183 }
184
185 .labels span {
186 font-variant: small-caps;
187 font-size: 0.8rem;
188 background-color: #ddd;
189 border-radius: 0.4em;
190 padding: 0 0.5em;
191 transition: all 0.5s;
192 }
193
194 .labels a>span {
195 cursor: pointer;
196 }
197
198 .labels a>span:hover {
199 box-shadow: 0px 0px 6px 1px #000;
200 }
201
202 /** instructions **/
75 203
76 .instructions--head { 204 .instructions--head {
77 font-size: 1.5em; 205 font-size: 1.5em;
78 text-align: center; 206 text-align: center;
79 } 207 }
81 .instructions--alt { 209 .instructions--alt {
82 text-align: center; 210 text-align: center;
83 font-style: italic; 211 font-style: italic;
84 } 212 }
85 213
214 /** images **/
215
216 .img--center{
217 display: block;
218 margin: 0 auto;
219 max-width: 100%;
220 }
221
222 .img--small {
223 height: 100px;
224 }
225
226 /** other language **/
227
228 .other_lang.state_init>div.info>p {
229 margin: 0;
230 padding: 0.2em;
231 text-align: center;
232 font-style: italic;
233 }
234
235 /** misc **/
236
86 .items_vert--centered { 237 .items_vert--centered {
87 display: flex; 238 display: flex;
88 flex-direction: column; 239 flex-direction: column;
89 align-items: center; 240 align-items: center;
90 } 241 }
91 242
92 /*** boxes ***/ 243 .link--center {
244 display: block;
245 text-align: center;
246 }
247
248 /*********
249 * pages *
250 *********/
251
252 .page__title {
253 text-align: center;
254
255 }
256
257 /*********
258 * boxes *
259 *********/
93 260
94 .box { 261 .box {
95 background-color: #edf2ff; 262 background: var(--color-prim--light);
96 border-radius: 0; 263 position: relative;
97 border-color: silver; 264 border-top: solid 1px var(--color-prim-dark);
98 margin: 0 auto; 265 margin: 0 auto;
266 padding: 2rem;
267 max-width: 100em;
268 }
269
270 .box__content {
271 text-align: justify;
272 }
273
274 .box__content img {
275 max-width: 100%;
276 margin: 0;
277 }
278
279 .box__content video {
280 max-width: 100%;
281 height: auto;
282 }
283
284 .box__content--plaintext {
285 white-space: pre-wrap;
286 }
287
288
289 .box--large {
290 max-width: 80rem;
291 }
292
293 .box--plain {
294 background-color: var(--box-bg-color);
99 } 295 }
100 296
101 .box--medium { 297 .box--medium {
102 max-width: 50em; 298 max-width: 50rem;
103 } 299 }
104 300
105 .box--small { 301 .box--small {
106 max-width: 20em; 302 max-width: 20rem;
107 } 303 }
108 304
109 .box--hollow { 305 .box--hollow {
110 border-radius: 0; 306 border-radius: 0;
111 border-style: solid; 307 border-style: solid;
118 text-align: center; 314 text-align: center;
119 font-variant: small-caps; 315 font-variant: small-caps;
120 border: none; 316 border: none;
121 } 317 }
122 318
319 .box--comment {
320 max-width: 40rem;
321 background: var(--color-prim);
322 }
323
123 .box--center { 324 .box--center {
325 display: flex;
326 align-items: center;
327 justify-content: center;
328 }
329
330 .box--zero {
331 /* box with no padding or decoration, used when we want only the margin */
332 border: none;
333 padding: 0;
334 }
335
336 .box--expand {
337 /* a box which is folded when too big */
338 max-height: var(--box--expand_limit);
339 overflow: hidden;
340 transition: max-height 0.5s;
341 }
342
343 .box__expand_zone {
344 /* zone to click to expand/fold the box */
345 cursor: pointer;
346 position: absolute;
347 left: 0;
348 width: 100%;
349 transition: opacity 0.5s;
350 }
351
352 .box__expand_zone--top {
353 top: 0;
354 }
355
356 .box__expand_zone--bottom {
357 bottom: 0;
358 }
359
360 .box__expand_zone p {
361 background-color: white;
362 margin: 0;
363 text-align: center;
364 font-size: 0.8em;
365 font-variant: small-caps;
366 }
367
368 .state_clicked>.box__expand_zone {
369 opacity: 0;
370 }
371
372 .state_clicked>.box__expand_zone:hover {
373 opacity: 1;
374 }
375
376 .box__expand_zone--bottom::before {
377 /* we do a gradient to show that text can be expanded */
378 background-image: linear-gradient(to bottom,rgba(255,255,255,0),#ffffff);
379 display: block;
380 content: "";
381 width: 100%;
382 height: 4em;
383 border: none;
384 }
385
386 .state_clicked>.box__expand_zone--bottom::before {
387 display: none;
124 } 388 }
125 389
126 .box__tools { 390 .box__tools {
127 /* toolbar in a box */ 391 /* toolbar in a box */
128 margin: 0; 392 margin: 0;
138 402
139 .box__tools a:hover { 403 .box__tools a:hover {
140 background-color: var(--select-bg-color); 404 background-color: var(--select-bg-color);
141 } 405 }
142 406
143 407 .box__under {
144 /*** blocks ***/ 408 /* block under a box showing action buttons */
409 border: none;
410 padding-top: 0;
411 padding-bottom: 0;
412 text-align: right;
413 }
414
415 /********
416 * Blog *
417 ********/
418
419 .blog__title {
420 font-weight: bold;
421 text-align: center;
422 }
423
424 .blog__title a {
425 color: inherit;
426 text-decoration: inherit;
427 }
428
429 .blog__metadata {
430 text-align: right;
431 }
432
433 .blog__author {
434 font-weight: bold;
435 }
436
437 .blog__author a {
438 color: inherit;
439 text-decoration: inherit;
440 }
441
442 .blog__author::after {
443 content: ", ";
444 }
445
446 .blog__date {
447 }
448
449 .blog__date a {
450 color: inherit;
451 text-decoration: inherit;
452 }
453
454 /**********
455 * Panels *
456 **********/
457
458 .panel-drawer {
459 /* A panel which is hidden by default but can be
460 opened when it's clicked */
461 max-height: 0;
462 opacity: 0;
463 overflow: hidden;
464 transition: max-height 0.5s, opacity 0.5s;
465 }
466
467 .panel-drawer.state_clicked {
468 opacity: 1;
469 }
470
471 /**********
472 * blocks *
473 **********/
145 474
146 .block_separator { 475 .block_separator {
147 font-size: 1.4em; 476 font-size: 1.4em;
148 display: flex; 477 display: flex;
149 } 478 }
158 background: #ccc; 487 background: #ccc;
159 flex: 1; 488 flex: 1;
160 margin-top: 0.7em; 489 margin-top: 0.7em;
161 } 490 }
162 491
163 /*** lists ***/ 492 /*********
493 * lists *
494 *********/
164 495
165 .list { 496 .list {
166 list-style: none; 497 list-style: none;
167 display: flex; 498 display: flex;
168 flex-direction: column; 499 flex-direction: column;
171 .list__item>a { 502 .list__item>a {
172 text-decoration: none; 503 text-decoration: none;
173 color: inherit; 504 color: inherit;
174 } 505 }
175 506
176 /*** grids ***/ 507 /*********
508 * Grids *
509 *********/
177 510
178 .grid { 511 .grid {
179 display: flex; 512 display: flex;
180 flex-wrap: wrap; 513 flex-wrap: wrap;
181 } 514 }
205 538
206 .grid__item--selectable:hover { 539 .grid__item--selectable:hover {
207 background-color: var(--select-bg-color); 540 background-color: var(--select-bg-color);
208 } 541 }
209 542
210 /*** tables ***/ 543 /**********
544 * Tables *
545 **********/
211 546
212 .table--main { 547 .table--main {
213 margin: 1em auto; 548 margin: 1em auto;
214 border-collapse: collapse; 549 border-collapse: collapse;
215 text-align: center; 550 text-align: center;
216 } 551 }
217 552
218 .table--main th { 553 .table--main th {
219 font-variant: small-caps; 554 font-variant: small-caps;
232 567
233 .table__total_value { 568 .table__total_value {
234 font-weight: bold; 569 font-weight: bold;
235 } 570 }
236 571
237 /*** avatars ***/ 572 /***********
573 * Avatars *
574 ***********/
238 575
239 .avatar { 576 .avatar {
240 height: 2rem; 577 height: 2rem;
241 width: 2rem; 578 width: 2rem;
242 align-content: center; 579 align-content: center;
243 justify-content: center; 580 justify-content: center;
244 background: #ccc;
245 border-radius: 0.2rem; 581 border-radius: 0.2rem;
246 } 582 }
247 583
248 .avatar--generated{ 584 .avatar--generated{
249 display: inline-flex; 585 display: inline-flex;
250 flex-direction: column; 586 flex-direction: column;
251 } 587 }
252 588
253 .avatar--float-left { 589 .avatar--float-left {
254 float: left; 590 float: left;
255 margin-top: 0.3em;
256 margin-right: 0.5em;
257 } 591 }
258 592
259 .avatar__content { 593 .avatar__content {
260 594
261 } 595 }
269 .avatar--generated { 603 .avatar--generated {
270 text-align: center; 604 text-align: center;
271 background: #43d2f6; 605 background: #43d2f6;
272 } 606 }
273 607
274 /*** images ***/ 608 /*********
275 .img--small { 609 * icons *
276 height: 100px; 610 *********/
277 }
278
279
280 /*** icons ***/
281 611
282 .icon--medium { 612 .icon--medium {
283 height: var(--size-medium); 613 height: var(--size-medium);
284 display: block; 614 display: block;
285 margin: 0 auto; 615 margin: 0 auto;
286 } 616 }
287 617
288 .icon--small { 618 .icon--small {
289 height: 1em; 619 height: 1em;
620 vertical-align: middle;
290 } 621 }
291 622
292 .icon--soft { 623 .icon--soft {
293 fill: #777; 624 fill: #777;
294 } 625 }
295 626
296 .icon__name { 627 .icon__name {
297 628
298 } 629 }
299 630
300 /*** Messages ***/ 631 /************
632 * Messages *
633 ************/
301 634
302 .message--info { 635 .message--info {
303 max-width: 500px; 636 max-width: 500px;
304 margin: 0 auto; 637 margin: 0 auto;
305 padding: 1em; 638 padding: 1em;
316 margin: 0 auto; 649 margin: 0 auto;
317 padding: 1em; 650 padding: 1em;
318 text-align: center; 651 text-align: center;
319 } 652 }
320 653
321 /*** Menus ***/ 654 /*********
655 * Menus *
656 *********/
322 657
323 .menu ul { 658 .menu ul {
324 display: flex; 659 display: flex;
325 margin-top: 8px; 660 margin-top: 8px;
326 list-style: none; 661 list-style: none;
377 padding: 0.5em; 712 padding: 0.5em;
378 border-radius: 0.2em; 713 border-radius: 0.2em;
379 background: #eee; 714 background: #eee;
380 } 715 }
381 716
382 /*** containers ***/ 717 /**************
718 * containers *
719 **************/
383 720
384 /* tabs */ 721 /* tabs */
385 722
386 .tab_container { 723 .tab__container {
387 max-width: 1000px; 724 max-width: 1000px;
388 margin: 0 auto; 725 margin: 0 auto;
389 } 726 }
390 727
391 .tab_header { 728 .tab__header {
392 background-color: white; 729 background-color: white;
393 border-bottom: 1px solid lightgrey; 730 border-bottom: 1px solid lightgrey;
394 } 731 }
395 732
396 .tab_header ul { 733 .tab__header ul {
397 display: flex; 734 display: flex;
398 margin: 0; 735 margin: 0;
399 padding: 0; 736 padding: 0;
400 list-style: none; 737 list-style: none;
401 background-color: white; 738 background-color: white;
402 } 739 }
403 740
404 .tab_page { 741 .tab__page {
405 box-sizing: border-box; 742 box-sizing: border-box;
406 padding-top: 2em; 743 padding-top: 2em;
407 border: 1px solid lightgrey; 744 border: 1px solid lightgrey;
408 border-top: none; 745 border-top: none;
409 display: None; 746 display: None;
410 } 747 }
411 748
412 .tab_page.clicked { 749 .tab__page.state_clicked {
413 display: block; 750 display: block;
414 } 751 }
415 752
416 .tab_button { 753 .tab__btn {
417 display: inline; 754 display: inline;
418 color: grey; 755 color: grey;
419 background-color: white; 756 background-color: white;
420 border-top: 1px solid lightgrey; 757 border-top: 1px solid lightgrey;
421 border-left: 1px solid lightgrey; 758 border-left: 1px solid lightgrey;
424 cursor: pointer; 761 cursor: pointer;
425 /* we go down by 1px to remove bottom border from .tab_header */ 762 /* we go down by 1px to remove bottom border from .tab_header */
426 margin-bottom: -1px; 763 margin-bottom: -1px;
427 } 764 }
428 765
429 .tab_button.clicked { 766 .tab__btn.state_clicked {
430 /* background: lightgrey; */ 767 /* background: lightgrey; */
431 color: inherit; 768 color: inherit;
432 border-bottom: none; 769 border-bottom: none;
433 } 770 }
434 771
435 li.tab_button:last-child { 772 li.tab__btn:last-child {
436 border-right: 1px solid lightgrey; 773 border-right: 1px solid lightgrey;
437 } 774 }
438 775
439 .tab_button input { 776 .tab__btn input {
440 display: None; 777 display: None;
441 } 778 }
442 779
443 .tab_button label { 780 .tab__btn label {
444 margin: 1em; 781 margin: 1em;
445 } 782 }
446 783
447 .tab_button input:checked + label { 784 .tab__button input:checked + label {
448 font-weight: bold; 785 font-weight: bold;
449 } 786 }
450 787
451 /*** Forms ***/ 788 /*********
789 * Forms *
790 *********/
452 791
453 /* a form with only one field */ 792 /* a form with only one field */
454 793
455 .form--paper label { 794 .form--paper label {
456 font-variant: small-caps; 795 font-variant: small-caps;
547 .form__field--big>input,textarea { 886 .form__field--big>input,textarea {
548 box-sizing: border-box; 887 box-sizing: border-box;
549 width: 100%; 888 width: 100%;
550 } 889 }
551 890
552 /* Textboxes */ 891 /*************
892 * Textboxes *
893 *************/
553 894
554 .textbox { 895 .textbox {
555 margin-left: auto; 896 margin-left: auto;
556 margin-right: auto; 897 margin-right: auto;
557 } 898 }
570 911
571 .log_request { 912 .log_request {
572 text-align: center; 913 text-align: center;
573 } 914 }
574 915
575 /*** Navigation ***/ 916 /**************
576 917 * Navigation *
577 .prev_next_links ul { 918 **************/
919
920 .prev_next ul {
578 list-style: none; 921 list-style: none;
579 display: flex; 922 display: flex;
580 padding: 0 2em; 923 padding: 0;
581 margin: 0; 924 margin: 0;
582 } 925 }
583 926
584 .prev_next_links li { 927 .prev_next li {
585 flex: 1; 928 flex: 1;
586 } 929 }
587 930
588 .prev_next_links li.older_items { 931 .prev_next li.prev_next__older {
589 text-align: right; 932 text-align: right;
590 } 933 }
591 934
592 .prev_next_links img { 935
593 display: block; 936 .prev_next a {
594 }
595
596 .prev_next_links .older_items img {
597 display: block;
598 margin-left: auto;
599 margin-right: 0;
600 }
601
602 .prev_next_links a {
603 display: inline-block; 937 display: inline-block;
604 margin-top: 1em; 938 margin-top: 1em;
605 padding: 0.2em; 939 padding: 0.2em;
606 text-decoration: None; 940 text-decoration: None;
607 color: inherit; 941 color: inherit;
608 font-variant: small-caps; 942 font-variant: small-caps;
609 background: rgba(200,200,200,0.6); 943 background-color: var(--color-prim--light);
610 border-radius: 0.5em; 944 border-radius: 0.5em;
611 } 945 }
612 946
613 .prev_next_links a:hover { 947 .prev_next a:hover {
614 background-color: #ddd; 948 background-color: #ddd;
615 } 949 }
616 950
617 /*** XMLUI ***/ 951 /*********
952 * XMLUI *
953 *********/
618 954
619 .xmlui_cont_vertical>* { 955 .xmlui_cont_vertical>* {
620 display: block; 956 display: block;
621 box-sizing: border-box; 957 box-sizing: border-box;
622 } 958 }
628 } 964 }
629 965
630 label.xmlui_label { 966 label.xmlui_label {
631 font-weight: bold; 967 font-weight: bold;
632 } 968 }
969
970 ul.xmlui_list {
971 list-style: none;
972 display: flex;
973 flex-direction: column;
974 padding: 0;
975 }
976
977 .xmlui_list li {
978 display: inline-flex;
979 background: #eee;
980 padding: 0.5em;
981 margin: 0.5em 0;
982 border: 1px solid silver;
983 }
984
985 .xmlui_list li:hover {
986 background: yellow;
987 }
988
989 .xmlui_list a {
990 display: flex;
991 width: 100%;
992 text-decoration: none;
993 color: inherit;
994 }
995
996 .xmlui_list a:visited {
997 color: inherit;
998 }
999
1000 .xmlui_field__id {
1001 font-style: italic;
1002 padding-right: 1em;
1003 }
1004
1005 .xmlui_field__title {
1006 padding-right: 1em;
1007 }
1008
1009
633 1010
634 td a { 1011 td a {
635 /* we use <a> for non JS links in table 1012 /* we use <a> for non JS links in table
636 * so we don't want specific color/text-decoration by default 1013 * so we don't want specific color/text-decoration by default
637 */ 1014 */
638 color: inherit; 1015 color: inherit;
639 text-decoration: inherit; 1016 text-decoration: inherit;
640 } 1017 }
641 1018
642 1019
643 /*** Notifications ***/ 1020 /*****************
1021 * Notifications *
1022 *****************/
644 1023
645 .notification.retry { 1024 .notification.retry {
646 position: fixed; 1025 position: fixed;
647 top: 1rem; 1026 top: 1rem;
648 margin: auto; 1027 margin: auto;
662 text-decoration: underline; 1041 text-decoration: underline;
663 cursor: pointer; 1042 cursor: pointer;
664 } 1043 }
665 1044
666 @media (min-width: 800px) { 1045 @media (min-width: 800px) {
1046
1047 /*****************
1048 * Main Elements *
1049 *****************/
1050
667 html { 1051 html {
668 background-size: auto; 1052 background-size: auto;
669 } 1053 }
670 1054
671 body { 1055 body {
674 1058
675 #main_area { 1059 #main_area {
676 overflow: auto; 1060 overflow: auto;
677 } 1061 }
678 1062
679 /*** boxes ***/ 1063 /***********
1064 * Generic *
1065 ***********/
1066
1067 .btn-fold {
1068 padding: 0.3em;
1069 }
1070
1071 /** instructions **/
1072
1073 .instructions--alt {
1074 padding-top: 3rem;
1075 margin-bottom: 3rem;
1076 }
1077
1078
1079 /*********
1080 * boxes *
1081 *********/
680 1082
681 .box { 1083 .box {
682 border-radius: 1em; 1084 border-radius: 0.2em;
683 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); 1085 box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.2);
684 width: 94%;
685 margin: 1em auto; 1086 margin: 1em auto;
686 border: solid 1px; 1087 border: solid 1px;
687 border-color: #9ca0a8; 1088 border-color: #9ca0a8;
688 } 1089 }
689 1090
696 border-radius: 0.2em; 1097 border-radius: 0.2em;
697 border-width: 1px; 1098 border-width: 1px;
698 margin: 0.5em; 1099 margin: 0.5em;
699 } 1100 }
700 1101
701 /*** Forms ***/ 1102 .box--zero {
1103 box-shadow: none;
1104 border: none;
1105 background: none;
1106 }
1107
1108 .box__under {
1109 /* block under a box showing action buttons */
1110 box-shadow: none;
1111 border: none;
1112 background: none;
1113 text-align: right;
1114 }
1115
1116 /*********
1117 * Forms *
1118 *********/
702 1119
703 .form__panel--vertical { 1120 .form__panel--vertical {
704 display: flex; 1121 display: flex;
705 flex-direction: column; 1122 flex-direction: column;
706 padding: 2em; 1123 padding: 2em;
709 .form__field--big>input,textarea { 1126 .form__field--big>input,textarea {
710 box-sizing: border-box; 1127 box-sizing: border-box;
711 width: 95%; 1128 width: 95%;
712 } 1129 }
713 1130
714 .main_menu a {
715 display: block;
716 padding: 2em 0;
717 }
718
719 .main_menu ul {
720 flex-direction: column;
721 padding-left: 2em;
722 }
723
724 .prev_next_links ul {
725 padding: 0 6em;
726 }
727
728 .instructions--alt {
729 padding-top: 3rem;
730 }
731
732 /*** forms ***/
733
734 .form--single input:not([type="submit"]) { 1131 .form--single input:not([type="submit"]) {
735 margin: 0 1em; 1132 margin: 0 1em;
736 } 1133 }
737 1134
738 .form--single { 1135 .form--single {
742 } 1139 }
743 1140
744 .form--single .form_input { 1141 .form--single .form_input {
745 flex-direction: row; 1142 flex-direction: row;
746 } 1143 }
747 } 1144
1145 /*********
1146 * Menus *
1147 *********/
1148
1149 .main_menu a {
1150 display: block;
1151 padding: 1em 0;
1152 }
1153
1154 .main_menu ul {
1155 flex-direction: column;
1156 padding-left: 2em;
1157 }
1158 }