| 17 |
17 |
|
| 18 |
18 |
// general layout
|
| 19 |
19 |
|
| 20 |
|
div#gauche, div#rub_service {
|
|
20 |
.form-content--sidebox, .form-content--body {
|
| 21 |
21 |
margin-top: 15px;
|
| 22 |
22 |
}
|
| 23 |
23 |
|
| 24 |
|
div#rub_service {
|
|
24 |
.form-content--body {
|
| 25 |
25 |
background: $body-background;
|
| 26 |
26 |
}
|
| 27 |
27 |
|
| 28 |
28 |
@if ($form-sidebar-position == top) {
|
| 29 |
|
div#gauche {
|
|
29 |
.form-content--sidebox {
|
| 30 |
30 |
text-align: center;
|
| 31 |
31 |
div#tracking-code {
|
| 32 |
32 |
display: inline-block;
|
| ... | ... | |
| 37 |
37 |
}
|
| 38 |
38 |
}
|
| 39 |
39 |
} @else {
|
| 40 |
|
div#gauche {
|
|
40 |
.form-content--sidebox {
|
| 41 |
41 |
clear: both;
|
| 42 |
42 |
width: $form-sidebar-width;
|
| 43 |
43 |
@if ($form-sidebar-position == left) {
|
| ... | ... | |
| 47 |
47 |
}
|
| 48 |
48 |
}
|
| 49 |
49 |
|
| 50 |
|
div#gauche + div#rub_service {
|
|
50 |
.form-content--sidebox + .form-content--body {
|
| 51 |
51 |
width: calc(100% - #{$form-sidebar-width} - #{$form-sidebar-gutter});
|
| 52 |
52 |
clear: none;
|
| 53 |
53 |
@if ($form-sidebar-position == left) {
|
| ... | ... | |
| 85 |
85 |
|
| 86 |
86 |
.form-content--title,
|
| 87 |
87 |
div#tracking-code h3,
|
| 88 |
|
div#rub_service h2 {
|
|
88 |
.form-content--body h2 {
|
| 89 |
89 |
@extend %title;
|
| 90 |
90 |
}
|
| 91 |
91 |
|
| 92 |
|
div.gru-content div#rub_service h3,
|
| 93 |
|
div#rub_service h3 {
|
|
92 |
div.gru-content .form-content--body h3,
|
|
93 |
.form-content--body h3 {
|
| 94 |
94 |
border: none;
|
| 95 |
95 |
text-align: left;
|
| 96 |
96 |
border-bottom: 2px solid $title-background;
|
| 97 |
97 |
}
|
| 98 |
98 |
|
| 99 |
|
div#rub_service div.dataview,
|
| 100 |
|
div#rub_service dl#evolutions,
|
| 101 |
|
div#rub_service .drafts-recall,
|
| 102 |
|
div#rub_service form {
|
|
99 |
.form-content--body div.dataview,
|
|
100 |
.form-content--body dl#evolutions,
|
|
101 |
.form-content--body .drafts-recall,
|
|
102 |
.form-content--body form {
|
| 103 |
103 |
padding: 0.5rem;
|
| 104 |
104 |
}
|
| 105 |
105 |
|
| 106 |
|
div#rub_service div.dataview div.title h3 {
|
|
106 |
.form-content--body div.dataview div.title h3 {
|
| 107 |
107 |
font-size: 115%;
|
| 108 |
108 |
border: 0;
|
| 109 |
109 |
}
|
| 110 |
110 |
|
| 111 |
|
div#rub_service div.dataview div.subtitle h4 {
|
|
111 |
.form-content--body div.dataview div.subtitle h4 {
|
| 112 |
112 |
font-size: 110%;
|
| 113 |
113 |
}
|
| 114 |
114 |
|
| 115 |
|
div#rub_service div.dataview div.field.status {
|
|
115 |
.form-content--body div.dataview div.field.status {
|
| 116 |
116 |
clear: both;
|
| 117 |
117 |
}
|
| 118 |
118 |
|
| ... | ... | |
| 142 |
142 |
|
| 143 |
143 |
@media screen and ($max-mobile-viewport) {
|
| 144 |
144 |
// move #gauche on top and tracking code after steps
|
| 145 |
|
div#gauche {
|
|
145 |
.form-content--sidebox {
|
| 146 |
146 |
float: none;
|
| 147 |
147 |
width: 100%;
|
| 148 |
148 |
}
|
| ... | ... | |
| 160 |
160 |
}
|
| 161 |
161 |
|
| 162 |
162 |
@media screen and ($max-mobile-viewport) {
|
| 163 |
|
div#gauche + div#rub_service,
|
| 164 |
|
div#rub_service {
|
|
163 |
.form-content--sidebox + .form-content--body,
|
|
164 |
.form-content--body {
|
| 165 |
165 |
width: 100%;
|
| 166 |
166 |
margin: 0;
|
| 167 |
167 |
float: none;
|
| 168 |
168 |
}
|
| 169 |
|
div#gauche {
|
|
169 |
.form-content--sidebox {
|
| 170 |
170 |
text-align: left;
|
| 171 |
171 |
div#tracking-code a {
|
| 172 |
172 |
padding-left: 0.3em;
|
| ... | ... | |
| 399 |
399 |
font-size: 140%;
|
| 400 |
400 |
}
|
| 401 |
401 |
|
| 402 |
|
div#rub_service div.form-validation div.page div h3 {
|
|
402 |
.form-content--body div.form-validation div.page div h3 {
|
| 403 |
403 |
border-bottom-width: 1px;
|
| 404 |
404 |
}
|
| 405 |
405 |
|
| ... | ... | |
| 795 |
795 |
}
|
| 796 |
796 |
}
|
| 797 |
797 |
|
| 798 |
|
@if ($form-titlebar-mode == form) {
|
| 799 |
|
@media screen and ($min-desktop-viewport) {
|
| 800 |
|
.form-content--with-sidebox .form-content--titlebar {
|
| 801 |
|
margin-left: calc(#{$form-sidebar-width} + #{$form-sidebar-gutter});
|
|
798 |
@if ($form-titlebar-mode == form and $form-sidebar-position != top) {
|
|
799 |
@supports (display: grid) {
|
|
800 |
@media ($min-desktop-viewport) {
|
|
801 |
.form-content--with-sidebox {
|
|
802 |
display: grid;
|
|
803 |
column-gap: $form-sidebar-gutter;
|
|
804 |
grid-template-columns: $form-sidebar-width 1fr $form-sidebar-width;
|
|
805 |
grid-template-rows: auto;
|
|
806 |
grid-template-areas:
|
|
807 |
"sidebox title title"
|
|
808 |
"sidebox form form";
|
|
809 |
@if ($form-sidebar-position == right) {
|
|
810 |
grid-template-areas:
|
|
811 |
"title title sidebox"
|
|
812 |
"form form sidebox";
|
|
813 |
}
|
|
814 |
.form-content--titlebar {
|
|
815 |
grid-area: title;
|
|
816 |
width: auto;
|
|
817 |
margin-top: 15px;
|
|
818 |
}
|
|
819 |
.form-content--sidebox {
|
|
820 |
grid-area: sidebox;
|
|
821 |
width: auto;
|
|
822 |
}
|
|
823 |
.form-content--body {
|
|
824 |
grid-area: form;
|
|
825 |
width: auto;
|
|
826 |
margin-top: 0;
|
|
827 |
}
|
| 802 |
828 |
}
|
| 803 |
829 |
}
|
|
830 |
}
|
| 804 |
831 |
}
|
|
832 |
|
| 805 |
|
-
|