0001-marseille-new-theme-54569.patch
static/marseille/_custom.scss | ||
---|---|---|
1 |
%button { |
|
2 |
font-weight: 500; |
|
3 |
} |
|
4 | ||
5 |
// |
|
6 |
// HEADER |
|
7 |
// |
|
8 | ||
9 |
$logo-height: 50px; |
|
10 |
$header-height: $logo-height + 20px; |
|
11 | ||
12 |
#header-wrapper { |
|
13 |
padding-top: 10px; |
|
14 |
padding-bottom: 10px; |
|
15 |
border-bottom: 1px solid #dfdfdf; |
|
16 |
} |
|
17 | ||
18 |
#top { |
|
19 |
display: flex; |
|
20 |
align-items: center; |
|
21 |
} |
|
22 |
h1#logo { |
|
23 |
flex-grow: 1; |
|
24 |
font-size: $fz-h4; |
|
25 |
@media (max-width: $very-small-limit) { |
|
26 |
font-size: 1rem; |
|
27 |
} |
|
28 |
@media ($min-desktop-viewport) { |
|
29 |
font-size: $fz-h2; |
|
30 |
} |
|
31 |
&.has-logo a { |
|
32 |
text-indent: 0; |
|
33 |
color: $primary-color; |
|
34 |
display: flex; |
|
35 |
align-items: center; |
|
36 |
padding-left: calc(75px + 1em); |
|
37 |
height: $logo-height; |
|
38 |
background-size: auto $logo-height; |
|
39 |
background-position: left center; |
|
40 |
} |
|
41 |
} |
|
42 | ||
43 |
// toplinks |
|
44 |
#toplinks { |
|
45 |
// reset |
|
46 |
border: none; |
|
47 |
padding: 0; |
|
48 |
border-radius: none; |
|
49 |
box-shadow: none; |
|
50 |
position: static; |
|
51 | ||
52 |
line-height: 1.7; |
|
53 |
@media ($max-mobile-viewport) { |
|
54 |
font-size: $fz-small; |
|
55 |
} |
|
56 |
} |
|
57 | ||
58 |
// nav |
|
59 |
body { |
|
60 |
border-left: 0 none; |
|
61 |
} |
|
62 |
div.gru-nav { |
|
63 |
font-size: $fz-small; |
|
64 | ||
65 |
.gru-nav-button { |
|
66 |
box-sizing: content-box; |
|
67 |
border: 10px solid $primary-color; |
|
68 |
border-width: #{($header-height - $nav-menu-side) / 2} 10px; |
|
69 |
top: 0; |
|
70 |
left: 0; |
|
71 | ||
72 |
&.toggled { |
|
73 |
border-color: transparent; |
|
74 | ||
75 |
+ ul { |
|
76 |
@media ($max-mobile-viewport) { |
|
77 |
padding-top: $header-height; |
|
78 |
border-right: 2px solid $primary-color; |
|
79 |
} |
|
80 |
} |
|
81 |
} |
|
82 |
} |
|
83 |
> ul { |
|
84 |
overflow: visible; |
|
85 |
li a { |
|
86 |
font-weight: 500; |
|
87 |
} |
|
88 | ||
89 |
@media ($min-desktop-viewport) { |
|
90 |
> li { |
|
91 |
position: relative; |
|
92 |
padding-left: 0.625em; |
|
93 |
padding-right: 0.625em; |
|
94 |
> a { |
|
95 |
padding: 0.33em 0.66em; |
|
96 |
border-radius: 3em; |
|
97 |
} |
|
98 |
ul { |
|
99 |
left: -1px; |
|
100 |
padding-top: 1em; |
|
101 |
} |
|
102 |
} |
|
103 |
} |
|
104 | ||
105 |
// sep line |
|
106 |
li { |
|
107 |
@media ($max-mobile-viewport) { |
|
108 |
border-top: 1px solid $sep-color; |
|
109 |
} |
|
110 |
@media ($min-desktop-viewport) { |
|
111 |
border-left: 1px solid $sep-color; |
|
112 |
} |
|
113 |
} |
|
114 | ||
115 | ||
116 |
} |
|
117 |
} |
|
118 | ||
119 |
// Page Image |
|
120 |
body.has-picture { |
|
121 |
.site-nav::after { |
|
122 |
top: 0; |
|
123 |
height: 0; |
|
124 |
padding-top: 20%; |
|
125 |
@media (max-width: $very-small-limit) { |
|
126 |
padding-top: 50%; |
|
127 |
} |
|
128 |
} |
|
129 |
@media ($min-desktop-viewport) { |
|
130 |
div#main-content-wrapper { |
|
131 |
margin-top: -1.875rem; |
|
132 |
} |
|
133 |
} |
|
134 |
} |
|
135 | ||
136 |
// |
|
137 |
// MAIN |
|
138 |
// |
|
139 | ||
140 |
div#main-content-wrapper { |
|
141 |
background-color: white; |
|
142 |
padding: $columns-gutter; |
|
143 |
@media (max-width: $very-small-limit) { |
|
144 |
padding-left: #{$columns-gutter / 2}; |
|
145 |
padding-left: 0; |
|
146 |
padding-right: #{$columns-gutter / 2}; |
|
147 |
padding-right: 0; |
|
148 |
} |
|
149 |
} |
|
150 | ||
151 |
// cells vertical gutters |
|
152 |
.column div.a2-block, |
|
153 |
.gru-content div.cell, |
|
154 |
.block { |
|
155 |
margin-bottom: $columns-gutter; |
|
156 |
} |
|
157 | ||
158 |
// Links-list |
|
159 |
div#rub_service div.category ul, |
|
160 |
div#services > ul > li > ul, |
|
161 |
div#account-management ul, |
|
162 |
div.links-list ul, |
|
163 |
div.menucell ul, |
|
164 |
div.wcsformcell, |
|
165 |
div.categoriescell ul, |
|
166 |
div.wcscurrentdraftscell ul, |
|
167 |
div.wcscurrentformscell ul { |
|
168 |
& > li { |
|
169 |
> a { |
|
170 |
padding-left: 2rem; |
|
171 |
&::before { |
|
172 |
content: "\f04b"; |
|
173 |
color: $link-color; |
|
174 |
font-family: fontawesome; |
|
175 |
font-size: 0.7em; |
|
176 |
position: absolute; |
|
177 |
left: 1rem; |
|
178 |
line-height: 1.7; |
|
179 |
} |
|
180 |
} |
|
181 |
} |
|
182 |
} |
|
183 | ||
184 |
.search-cell { |
|
185 |
@extend .pk-transparent; |
|
186 |
input[type=search] { |
|
187 |
background-color: white; |
|
188 |
border-color: $font-color; |
|
189 |
border-radius: 2em; |
|
190 |
} |
|
191 |
} |
|
192 | ||
193 | ||
194 |
// |
|
195 |
// WCS / FORMS |
|
196 |
// |
|
197 | ||
198 |
input[readonly], select[readonly], textarea[readonly] { |
|
199 |
background-color: transparent; |
|
200 |
} |
|
201 | ||
202 |
div#rub_service { |
|
203 |
background-color: white; |
|
204 | ||
205 |
& > h2 { |
|
206 |
font-size: $fz-h1; |
|
207 |
padding-left: 0.5rem; |
|
208 |
} |
|
209 |
} |
|
210 | ||
211 |
div.gru-content div#rub_service, |
|
212 |
div#rub_service { |
|
213 |
h3 { |
|
214 |
font-size: $fz-h2; |
|
215 |
color: $title-color; |
|
216 |
} |
|
217 |
h4 { |
|
218 |
color: $title-color; |
|
219 |
font-size: $fz-h3; |
|
220 |
} |
|
221 |
} |
|
222 | ||
223 |
div#summary h2, |
|
224 |
div#evolution-log h2 { |
|
225 |
border-bottom: 1px solid currentColor; |
|
226 |
} |
|
227 | ||
228 |
ul#evolutions div.evolution-metadata, |
|
229 |
ul#evolutions li div.msg { |
|
230 |
background-color: white; |
|
231 |
} |
|
232 | ||
233 | ||
234 |
// |
|
235 |
// FOOTER |
|
236 |
// |
|
237 | ||
238 |
#footer { |
|
239 |
font-size: $fz-small; |
|
240 |
padding-left: 0.7rem; |
|
241 |
padding-right: 0.7rem; |
|
242 | ||
243 |
// Blason |
|
244 |
position: relative; |
|
245 |
z-index: 0; |
|
246 |
&::before { |
|
247 |
content: ""; |
|
248 |
background: url(img/Armoiries_de_Marseille.png) no-repeat center $footer-background; |
|
249 |
background-size: contain; |
|
250 |
position: absolute; |
|
251 |
top: 0; |
|
252 |
bottom: 0; |
|
253 |
left: 0; |
|
254 |
right: 0; |
|
255 |
display: block; |
|
256 |
opacity: 0.2; |
|
257 |
z-index: -1; |
|
258 |
} |
|
259 | ||
260 |
h2, h3 { |
|
261 |
font-weight: 500; |
|
262 |
} |
|
263 | ||
264 |
.menucell { |
|
265 |
li a { |
|
266 |
&::before { |
|
267 |
content: none; |
|
268 |
} |
|
269 |
} |
|
270 |
} |
|
271 | ||
272 |
div.links-list ul { |
|
273 |
& > li { |
|
274 |
border: none; |
|
275 |
> a { |
|
276 |
padding: 0; |
|
277 |
margin-bottom: 1em; |
|
278 |
&::before { |
|
279 |
content: none; |
|
280 |
} |
|
281 |
&:hover { |
|
282 |
text-decoration: underline; |
|
283 |
} |
|
284 |
} |
|
285 |
} |
|
286 |
} |
|
287 |
} |
|
288 | ||
289 |
// |
|
290 |
// PWA nav |
|
291 |
// |
|
292 |
.pwa-navigation div > ul li a { |
|
293 |
background-size: auto 20px; |
|
294 |
} |
static/marseille/_vars.scss | ||
---|---|---|
1 |
// Custom vars |
|
2 | ||
3 |
$gray-dark: #464646; |
|
4 |
$blue: #2c62cb; |
|
5 |
$blue-dark: #1a489c; |
|
6 |
$blue-xdark: #002454; |
|
7 |
$flesh: #f7f4f1; |
|
8 |
$sep-color: hsla(0, 0%, 0%, 0.2); |
|
9 | ||
10 |
// fonts size |
|
11 |
$fz-h1: 3.125em; |
|
12 |
$fz-h2: 1.875em; |
|
13 |
$fz-h3: 1.375em; |
|
14 |
$fz-h4: 1.25rem; |
|
15 |
$fz-small: 0.875em; |
|
16 |
$fz-xsmall: 0.78em; |
|
17 | ||
18 |
// Core vars |
|
19 |
$primary-color: $blue-dark; |
|
20 |
$font-color: $gray-dark; |
|
21 |
$font-family: orkney, sans-serif; |
|
22 |
$link-color: $blue; |
|
23 |
$body-background: $flesh; |
|
24 | ||
25 |
$width: 1200px; |
|
26 |
$mobile-limit: 1024px; |
|
27 |
$very-small-limit: 560px; |
|
28 |
$columns-gutter: 30px; |
|
29 | ||
30 |
$header-background-color: white; |
|
31 | ||
32 |
$nav-menu-side: 20px; |
|
33 |
$nav-background: $flesh; |
|
34 |
$nav-full-width-background: true; |
|
35 |
$nav-color: $blue-xdark; |
|
36 |
$nav-button-background: $primary-color; |
|
37 |
$nav-submenu-color: $blue-xdark; |
|
38 |
$nav-item-selected-background: white; |
|
39 |
$nav-item-selected-color: $nav-color; |
|
40 |
$responsive-menu: left-to-right; |
|
41 |
$nav-mobile-menu-background: $flesh; |
|
42 |
$nav-mobile-menu-item-color: $nav-color; |
|
43 | ||
44 |
$nav-mobile-bottom-bar-background: $blue-xdark; |
|
45 |
$nav-mobile-bottom-bar-color: white; |
|
46 |
$nav-mobile-bottom-bar-item-hover-color: white; |
|
47 |
$nav-mobile-bottom-bar-item-hover-background: $link-color; |
|
48 |
$nav-mobile-bottom-bar-item-selected-background: $link-color; |
|
49 |
$nav-mobile-bottom-bar-item-selected-color: white; |
|
50 | ||
51 |
$cell-image-position: top; |
|
52 |
$cell-image-padding: 0; |
|
53 |
$cell-background: $flesh; |
|
54 |
$cell-border: 1px solid transparent; |
|
55 |
$cell-title-cover-border: false; |
|
56 |
$cell-entry-color: $font-color; |
|
57 |
$cell-entry-font-weight: 400; |
|
58 |
$cell-entry-hover-background: transparent; |
|
59 |
$cell-entry-hover-color: $link-color; |
|
60 |
$cell-entry-border-color: $sep-color; |
|
61 | ||
62 |
$title-background: transparent; |
|
63 |
$title-color: $blue-xdark; |
|
64 |
$title-font-size: $fz-h3; |
|
65 |
$title-weight: 700; |
|
66 | ||
67 |
$widget-background: $body-background; |
|
68 |
$widget-border: 1px solid $sep-color; |
|
69 |
$widget-focus-border: 1px solid $font-color; |
|
70 |
$widget-unique-checkbox-position: left; |
|
71 | ||
72 |
$wcs-step-border-bottom: none; |
|
73 |
$wcs-step-marker-type: disc; |
|
74 | ||
75 |
$button-background: $link-color; |
|
76 |
$button-hover-background: $primary-color; |
|
77 | ||
78 |
$wcs-steps-spacing: 0.7rem; |
|
79 |
$wcs-step-color: darken($flesh, 40%); |
|
80 |
$wcs-step-marker-background: darken($flesh, 15%); |
|
81 |
$wcs-step-marker-color: white; |
|
82 |
$wcs-step-current-marker-background: $primary-color; |
|
83 |
$wcs-step-current-marker-color: white; |
|
84 | ||
85 |
$footer-background: #0047a3; |
|
86 |
$footer-link-color: white; |
|
87 |
$footer-menucell-separator: 1px solid hsla(0, 0%, 100%, 0.3); |
static/marseille/config.json | ||
---|---|---|
1 |
{ |
|
2 |
"label": "Marseille", |
|
3 |
"variables": { |
|
4 |
"pwa_display": "standalone", |
|
5 |
"theme_color": "#1a489c", |
|
6 |
"email_header_asset": "emails:logo" |
|
7 |
}, |
|
8 |
"settings": { |
|
9 |
"combo": { |
|
10 |
"COMBO_ASSET_SLOTS.update": { |
|
11 |
"header:logo": { "label": "Têtière : logo" }, |
|
12 |
"emails:logo": {"label": "Emails : logo"} |
|
13 |
} |
|
14 |
} |
|
15 |
} |
|
16 |
} |
static/marseille/style.scss | ||
---|---|---|
1 |
@charset "UTF-8"; |
|
2 |
@import '../includes/fonts/orkney'; |
|
3 | ||
4 |
@import 'vars'; |
|
5 |
@import '../includes/publik'; |
|
6 |
@import 'custom'; |
|
0 |
- |