0001-new-theme-calvados-intranet-cd14-41570.patch
static/calvados-intranet-cd14/_custom.scss | ||
---|---|---|
1 |
@mixin fixed-header { |
|
2 |
transition: all ease 0.2s; |
|
3 |
margin-top: $toplinks-height; |
|
4 |
@media ($min-desktop-viewport) { |
|
5 |
position: fixed; |
|
6 |
top: 0; |
|
7 |
right: 0; |
|
8 |
left: 0; |
|
9 | ||
10 |
body.scrolled & { |
|
11 |
transform: translateY(-#{$toplinks-height}); |
|
12 |
} |
|
13 |
} |
|
14 |
} |
|
15 | ||
16 | ||
17 |
@mixin fixed-header-height { |
|
18 |
@media ($min-desktop-viewport) { |
|
19 |
display: flex; |
|
20 |
height: $header-desktop-height; |
|
21 |
body.scrolled & { |
|
22 |
height: $header-desktop-fixed-height; |
|
23 |
} |
|
24 |
} |
|
25 |
} |
|
26 | ||
27 |
@mixin h1 { |
|
28 |
font-size: $fz-h1; |
|
29 |
font-weight: bold; |
|
30 |
color: $font-color; |
|
31 |
font-family: $ff-serif; |
|
32 |
line-height: 1.1; |
|
33 | ||
34 |
} |
|
35 |
@mixin h2 { |
|
36 |
font-size: $fz-h2; |
|
37 |
font-weight: bold; |
|
38 |
color: $primary-color; |
|
39 |
font-family: $ff-serif; |
|
40 |
} |
|
41 |
@mixin h3 { |
|
42 |
font-size: $fz-h3; |
|
43 |
font-weight: bold; |
|
44 |
color: $blue-dark; |
|
45 |
font-family: $ff-serif; |
|
46 |
} |
|
47 |
@mixin h4 { |
|
48 |
font-size: $fz-h4; |
|
49 |
font-weight: bold; |
|
50 |
} |
|
51 | ||
52 |
%cancel-button { |
|
53 |
@extend %button; |
|
54 |
background-color: white; |
|
55 |
color: $primary-color; |
|
56 |
border-color: currentColor; |
|
57 | ||
58 |
&:hover { |
|
59 |
background-color: white; |
|
60 |
color: $blue-dark; |
|
61 |
} |
|
62 |
} |
|
63 | ||
64 |
html { |
|
65 |
@media (max-width: $very-small-limit) { |
|
66 |
font-size: $fz-mobile; |
|
67 |
} |
|
68 |
} |
|
69 | ||
70 |
a { |
|
71 |
&:hover, &:focus { |
|
72 |
text-decoration: underline; |
|
73 |
} |
|
74 |
} |
|
75 | ||
76 |
a#publik-portal-agent { |
|
77 |
right: auto; |
|
78 |
left: 5px; |
|
79 |
} |
|
80 | ||
81 |
#toplinks { |
|
82 |
height: $toplinks-height; |
|
83 |
top: -($toplinks-height); |
|
84 |
left: 0; |
|
85 |
max-width: none; |
|
86 |
width: 100vw; |
|
87 | ||
88 |
box-shadow: none; |
|
89 |
border-radius: 0; |
|
90 |
line-height: $toplinks-height / 1.5; |
|
91 |
font-size: 14px; |
|
92 |
text-align: right; |
|
93 |
border: 0; |
|
94 |
background: #eae9e2; |
|
95 |
text-transform: uppercase; |
|
96 |
a { |
|
97 |
color: #555; |
|
98 |
&:hover { |
|
99 |
color: black; |
|
100 |
} |
|
101 |
} |
|
102 |
} |
|
103 | ||
104 |
.site-header { |
|
105 | ||
106 |
#header { |
|
107 |
background-color: $grayish-yellow; |
|
108 |
max-width: none; |
|
109 | ||
110 |
@include fixed-header; |
|
111 |
@include fixed-header-height; |
|
112 | ||
113 |
@media ($min-desktop-viewport) { |
|
114 |
z-index: 20; |
|
115 |
background-color: transparent; |
|
116 |
right: auto; |
|
117 |
width: auto; |
|
118 |
align-items: center; |
|
119 |
} |
|
120 | ||
121 |
h1 { |
|
122 |
@media ($max-mobile-viewport) { |
|
123 |
padding-top: 0.5rem; |
|
124 |
padding-bottom: 0.5rem; |
|
125 |
} |
|
126 | ||
127 |
a { |
|
128 |
background: url(img/Connect_intranet-logo.png) bottom left no-repeat; |
|
129 |
background-size: auto 100%; |
|
130 |
width: 220px; |
|
131 |
height: 50px; |
|
132 |
display: block; |
|
133 |
text-indent: -10000px; |
|
134 |
@media ($max-mobile-viewport) { |
|
135 |
padding-left: 0; |
|
136 |
} |
|
137 |
} |
|
138 |
} |
|
139 |
} |
|
140 |
} |
|
141 | ||
142 |
.gru-nav-wrapper { |
|
143 |
@media ($max-mobile-viewport) { |
|
144 |
margin-top: -($nav-menu-side); |
|
145 |
} |
|
146 |
} |
|
147 | ||
148 |
div#nav { |
|
149 |
font-size: 16px; |
|
150 |
max-width: none; |
|
151 |
text-transform: uppercase; |
|
152 | ||
153 |
@include fixed-header; |
|
154 | ||
155 |
@media ($min-desktop-viewport) { |
|
156 |
z-index: 10; |
|
157 |
padding-right: 1rem; |
|
158 |
border-bottom: 1px solid #aaa; |
|
159 |
} |
|
160 | ||
161 |
@media ($max-mobile-viewport) { |
|
162 |
margin-top: 0; |
|
163 |
} |
|
164 | ||
165 | ||
166 |
& > ul { |
|
167 |
margin-top: 0; |
|
168 |
margin-bottom: 0; |
|
169 | ||
170 |
@include fixed-header-height; |
|
171 | ||
172 |
@media ($min-desktop-viewport) { |
|
173 |
justify-content: flex-end; |
|
174 | ||
175 |
> li { |
|
176 |
display: flex; |
|
177 | ||
178 |
> a { |
|
179 |
display: flex; |
|
180 |
align-items: center; |
|
181 |
padding: 1em; |
|
182 |
} |
|
183 |
} |
|
184 |
} |
|
185 | ||
186 |
li > a { |
|
187 |
font-weight: normal; |
|
188 |
} |
|
189 |
// Sub nav |
|
190 |
ul { |
|
191 |
@media ($min-desktop-viewport) { |
|
192 |
top: 100%; |
|
193 |
} |
|
194 |
} |
|
195 | ||
196 |
} |
|
197 |
} |
|
198 | ||
199 |
// Picture |
|
200 |
body.has-picture nav::after { |
|
201 |
top: 0; |
|
202 |
} |
|
203 |
@media ($min-desktop-viewport) { |
|
204 |
body.has-picture nav::after { |
|
205 |
transition: top ease 0.2s; |
|
206 |
top: calc(#{$toplinks-height} + #{$header-desktop-height}); |
|
207 |
} |
|
208 |
body.has-picture.scrolled nav::after { |
|
209 |
top: $header-desktop-fixed-height; |
|
210 |
} |
|
211 |
} |
|
212 | ||
213 | ||
214 |
div#main-content-wrapper { |
|
215 |
z-index: 0; |
|
216 |
line-height: 1.5; |
|
217 |
padding-top: 2rem; |
|
218 | ||
219 |
@media ($min-desktop-viewport) { |
|
220 |
padding-top: calc(#{$toplinks-height} + #{$header-desktop-height} + 2rem); |
|
221 |
} |
|
222 |
} |
|
223 | ||
224 |
// cells |
|
225 | ||
226 |
.text-cell { |
|
227 |
h1 { @include h1; } |
|
228 |
h2 { @include h2; } |
|
229 |
h3 { @include h3; } |
|
230 |
h4 { @include h4; } |
|
231 |
} |
|
232 | ||
233 |
div#tracking-code h3 { |
|
234 |
border-bottom: none; |
|
235 |
padding-left: 0.5rem; |
|
236 |
} |
|
237 | ||
238 |
div#rub_service { |
|
239 |
> h2 { |
|
240 |
text-align: left; |
|
241 |
padding-left: 0.5rem; |
|
242 |
border-bottom: none; |
|
243 |
@include h1; |
|
244 |
} |
|
245 |
h3 { @include h2; } |
|
246 |
h4 { @include h3; } |
|
247 |
} |
|
248 | ||
249 |
body.has-picture { |
|
250 |
div#main-content-wrapper { |
|
251 |
padding-top: 0; |
|
252 |
#columns { |
|
253 |
> div:first-child { |
|
254 |
padding-top: 2rem; |
|
255 |
} |
|
256 |
> div#rub_service, |
|
257 |
> div#gauche { |
|
258 |
padding-top: 0rem; |
|
259 |
background: white; |
|
260 |
} |
|
261 |
} |
|
262 |
} |
|
263 |
} |
|
264 | ||
265 |
div.widget div.title { |
|
266 |
margin-bottom: 2px; |
|
267 |
} |
|
268 | ||
269 |
span.helptext, div.hint { |
|
270 |
font-size: $fz-small; |
|
271 |
color: $gray; |
|
272 |
} |
|
273 | ||
274 |
#footer { |
|
275 |
font-size: 14px; |
|
276 |
.menu-cell { |
|
277 |
li a { |
|
278 |
color: $footer-color; |
|
279 |
text-transform: uppercase; |
|
280 |
font-weight: 600; |
|
281 | ||
282 |
&:hover, &:focus { |
|
283 |
color: $blue-dark; |
|
284 |
} |
|
285 |
} |
|
286 |
} |
|
287 |
} |
static/calvados-intranet-cd14/_vars.scss | ||
---|---|---|
1 |
// custom vars |
|
2 |
// Colors |
|
3 |
$rose: #e40d7e; |
|
4 |
$blue-dark: #003d7e; |
|
5 |
$blue: #2ba3d7; |
|
6 |
$grayish-yellow: #f4f2e6; |
|
7 |
$gray-dark: #333; |
|
8 |
$gray: #737373; |
|
9 |
// typo |
|
10 |
$fz-desktop: 125%; // 20px |
|
11 |
$fz-mobile: 100%; // 16px |
|
12 |
$fz-h1: 2.2em; |
|
13 |
$fz-h2: 1.25em; |
|
14 |
$fz-h3: 1.1em; |
|
15 |
$fz-h4: 1em; |
|
16 |
$fz-small: 0.8em; |
|
17 |
$ff-ss-serif: Raleway, sans-serif; |
|
18 |
$ff-serif: "Roboto Slab", serif; |
|
19 |
// Layout |
|
20 |
$toplinks-height: 40px; |
|
21 |
$header-desktop-height: 6rem; |
|
22 |
$header-desktop-fixed-height: 4rem; |
|
23 | ||
24 | ||
25 |
// Core vars |
|
26 |
$width: 1140px; |
|
27 |
$mobile-limit: 1024px !default; |
|
28 |
$very-small-limit: 560px; |
|
29 |
$font-family: $ff-ss-serif; |
|
30 |
$primary-color: $rose; |
|
31 |
$font-color: black; |
|
32 |
$font-size: $fz-desktop; |
|
33 |
$border-radius: 0px; |
|
34 | ||
35 |
$link-color: $blue-dark; |
|
36 | ||
37 |
$nav-background: $grayish-yellow; |
|
38 |
$nav-active-color: $primary-color; |
|
39 |
$nav-item-selected-mode: bottom-border; |
|
40 |
$nav-submenu-color: $font-color; |
|
41 |
$nav-after-image-height: 300px; |
|
42 |
$nav-item-selected-border: 4px solid $primary-color; |
|
43 | ||
44 |
$button-background: $primary-color; |
|
45 |
$cell-border: none; |
|
46 | ||
47 |
$title-font-size: $fz-h2; |
|
48 |
$title-color: $gray-dark; |
|
49 |
$title-weight: bold; |
|
50 |
$title-border-bottom: 2px solid $primary-color; |
|
51 |
$title-border-radius: 0; |
|
52 | ||
53 |
$button-hover-background: $blue-dark; |
|
54 |
$widget-focus-border: 1px solid $blue-dark; |
|
55 | ||
56 |
$wcs-step-current-color: $gray-dark; |
|
57 | ||
58 |
$notification-style: border-icon; |
|
59 | ||
60 |
$footer-background: white; |
|
61 |
$footer-color: $gray; |
static/calvados-intranet-cd14/config.json | ||
---|---|---|
1 |
{ |
|
2 |
"label": "Calvados (CD14) Intranet", |
|
3 |
"redmine_url": "https://dev.entrouvert.org/projects/calvados-portail-agents", |
|
4 |
"variables": { |
|
5 |
"theme_color": "#e40d7e", |
|
6 |
"email_header_img": "img/Connect_intranet-logo.png" |
|
7 |
} |
|
8 |
} |
static/calvados-intranet-cd14/style.scss | ||
---|---|---|
1 |
@charset "UTF-8"; |
|
2 |
@import '../includes/font-roboto-slab'; |
|
3 |
@import '../includes/font-raleway'; |
|
4 | ||
5 |
@import 'vars'; |
|
6 |
@import '../includes/publik'; |
|
7 |
@import 'custom'; |
|
0 |
- |