Projet

Général

Profil

0001-theme-add-cinor-2021.patch

Thomas Jund, 22 juin 2021 12:03

Télécharger (9,64 ko)

Voir les différences:

Subject: [PATCH] theme: add cinor-2021

 static/cinor-2021/_custom.scss                | 281 ++++++++++++++++++
 static/cinor-2021/_vars.scss                  |  79 +++++
 static/cinor-2021/config.json                 |  16 +
 static/cinor-2021/style.scss                  |   7 +
 .../combo/page_template_homepage.html         |   9 +
 .../combo/wcs/tracking_code_input.html        |   5 +
 6 files changed, 397 insertions(+)
 create mode 100644 static/cinor-2021/_custom.scss
 create mode 100644 static/cinor-2021/_vars.scss
 create mode 100644 static/cinor-2021/config.json
 create mode 100644 static/cinor-2021/style.scss
 create mode 100644 templates/variants/cinor-2021/combo/page_template_homepage.html
 create mode 100644 templates/variants/cinor-2021/combo/wcs/tracking_code_input.html
static/cinor-2021/_custom.scss
1
.rounded-cell {
2
	border-radius: 2rem;
3
	overflow: hidden;
4
	padding: 1rem;
5
}
6

  
7
.green-rounded-cell {
8
	@extend .rounded-cell;
9
	background-color: $green-blue;
10
	color: white;
11

  
12
	input {
13
		background-color: white;
14
		color: $green-blue-dark;
15
	}
16
	button {
17
		@extend %cancel-button;
18
	}
19
	a {
20
		color: inherit;
21
	}
22
}
23

  
24
.script-title {
25
	font-size: 3em;
26
	text-align: center;
27
	font-family: $ff-script;
28
	text-transform: none;
29
	line-height: 1;
30
	color: inherit;
31
	small {
32
		display: block;
33
		font-weight: 400;
34
		font-family: $ff-ss-serif;
35
		font-size: .45em;
36
	}
37
}
38

  
39
%button {
40
	font-weight: 600;
41
	text-transform: uppercase;
42
	font-size: $fz-small;
43
}
44

  
45
%cancel-button {
46
	&, &:hover {
47
		color: $primary-color;
48
		background-color: white;
49
		border: 1px solid;
50
	}
51
	&:hover {
52
		color: $button-hover-background;
53
	}
54
}
55

  
56
// Header
57
.site-header {
58
	border-top: $topLinks_height solid $primary-color;
59
	#top {
60
		display: flex;
61
		align-items: center;
62
		@media ($min-desktop-viewport) {
63
			justify-content: center;
64
		}
65
	}
66
	#logo.has-logo {
67
		margin-top: -1rem;
68
		margin-bottom: 1rem;
69
		font-size: 1.5em;
70
		@media ($min-desktop-viewport) {
71
			// margin-top: 1.5rem;
72
			margin-bottom: 1.5rem;
73
		}
74
		a {
75
			padding-top: 1rem;
76
			color: $font-color;
77
			padding-top: 90px;
78
			text-indent: 0 !important;
79
			background-size: auto 80px !important;
80
			background-position: top left !important;
81
			font-family: $ff-script;
82
			text-align: left;
83

  
84
			@media ($min-desktop-viewport) {
85
				display: flex;
86
				align-items: flex-end;
87
				padding-left: 250px;
88
				height: 100px;
89
				background-size: 200px auto !important;
90

  
91
			}
92
		}
93
	}
94
}
95

  
96
// User-info
97
#toplinks {
98
	// Reset user links
99
	border: none;
100
	box-shadow: none;
101
	border-radius: 0;
102
	background-color: transparent;
103
	color: white;
104
	// position
105
	top: auto;
106
	bottom: 100%;
107
	height: $topLinks_height;
108
	padding: 0;
109
	line-height: $topLinks_height;
110

  
111
	a {
112
		color: inherit;
113
		font-size: $fz-small;
114
		text-transform: uppercase;
115
	}
116

  
117
	// user icon
118
	&::before {
119
		content: "\f2c0";
120
		font-family: fontawesome;
121
		margin-right: .33em;
122
	}
123
}
124

  
125
// Main nav
126
div.gru-nav > ul {
127
	font-size: $fz-small;
128
	margin: 0;
129

  
130
	@media (min-width: $nav-mobile-limit + 1) {
131
		text-align: center;
132
	}
133

  
134
	li {
135
		a {
136
			text-transform: uppercase;
137
			font-weight: 600;
138
		}
139
	}
140
}
141
// Desktop Subnav
142
body {
143
	border-left: none;
144
}
145
div.gru-nav > ul ul {
146
	@media (min-width: $nav-mobile-limit + 1) {
147
		li:hover a {
148
			color: $green-yellow;
149
		}
150
	}
151
}
152

  
153
// Mobile nav
154
@media (max-width: $nav-mobile-limit) {
155
	div.gru-nav .gru-nav-button {
156
		top: 0;
157
		left: 0;
158
	}
159
}
160

  
161
// Page picture
162
body.has-picture .site-nav::after {
163
	position: static;
164
}
165

  
166

  
167
// main
168
main {
169
	border-top: 1px solid $green-blue;
170
	padding-top: 1rem;
171
}
172

  
173

  
174
// Cells
175

  
176
// sidebar cells
177
#sidebar {
178
	.cell {
179
		@extend .green-rounded-cell;
180
	}
181
	.tracking-code-input-cell {
182
		h2:first-child {
183
			@extend .script-title;
184

  
185
			& + div {
186
				padding: 0;
187
			}
188
		}
189
	}
190
}
191

  
192
// Picture position
193
.gru-content div.link-list-cell.has-asset-picture,
194
.gru-content div.wcsformsofcategorycell.has-asset-picture {
195
	> div {
196
		display: flex;
197
		flex-wrap: wrap;
198
		align-items: baseline;
199

  
200
		> * {
201
			flex: 0 0 100%;
202
		}
203

  
204
		> h2:first-child {
205
			flex: 1 0 50%;
206
		}
207

  
208
		> picture {
209
			display: block;
210
			order: -1;
211
			flex: 0 0 $title-font-size;
212
			align-self: center;
213
			margin-left: 1rem;
214

  
215
			img {
216
				padding: 0;
217
			}
218
		}
219
	}
220
}
221

  
222
// text Cell
223
div.text-cell {
224
	padding: 1px 1rem;
225
	h3, h4, h5, p, table {
226
		margin: 1rem 0;
227
	}
228
}
229

  
230
// WCS
231
.gru-content div#tracking-code {
232
	@extend .cell;
233
	@extend .green-rounded-cell;
234
	text-align: center;
235
	margin-right: 0;
236
	margin-left: 0;
237
	padding: 1rem;
238

  
239
	h3 {
240
		@extend .script-title;
241
		font-size: 2em;
242
	}
243
	button {
244
		margin-right: 0;
245
	}
246
}
247
// Title
248
div#rub_service h2 {
249
	font-size: 2.5em;
250
	padding-left: 0;
251

  
252
	@media (max-width: $very-small-limit) {
253
		font-size: 1.5em;
254
	}
255
}
256
// wcs buttons
257
div#rub_service .buttons {
258
	.submit-button button::after {
259
		content: ">";
260
		content: ">" / "";
261
		margin-left: .66em;
262
	}
263
	.previous-button button::before {
264
		content: "<";
265
		content: "<" / "";
266
		margin-right: .66em;
267
	}
268
}
269

  
270

  
271
// Authentic
272
#registration-blocks > .a2-block,
273
#login-page > .block {
274
	background: transparent;
275
}
276

  
277
// Footer
278
#footer a {
279
	color: white;
280
}
281

  
static/cinor-2021/_vars.scss
1
// colors
2
$cyan: #46BABA;
3
$blue-xdark: #232059;
4
$green-blue: #3bb18f;
5
$green-blue-dark: #257C63;
6
$green-yellow: #d5e50d;
7
$green-yellow-light: #d1eaad;
8
$gray-light: #eee;
9

  
10
// Fonts-family
11
$ff-ss-serif: 'Source Sans Pro', sans-serif;
12
$ff-script: 'Dancing Script', 'Brush Script MT', cursive;
13

  
14
$topLinks_height: 2.5rem;
15

  
16
// font sizes
17
$fz-small: 0.875em;
18

  
19
// Core vars
20
$primary-color: $green-blue;
21
$link-color: $green-blue-dark;
22
$very-small-limit: 560px;
23
$width: 1180px;
24

  
25
$font-family: $ff-ss-serif;
26
$font-color: $blue-xdark;
27

  
28
$nav-color: $font-color;
29
$nav-background: transparent;
30
$nav-active-color: $green-blue-dark;
31
$nav-item-hover-background: $font-color;
32
$nav-item-hover-color: white;
33
$nav-item-selected-background: transparent;
34
$nav-item-selected-color: $nav-active-color;
35

  
36
$responsive-menu: left-to-right;
37
$nav-menu-side: $topLinks_height;
38
$nav-button-background: white;
39
$nav-button-color: $primary-color;
40
$nav-submenu-background: $font-color;
41
$nav-submenu-color: white;
42
$nav-mobile-menu-background: $font-color;
43
$nav-mobile-menu-item-color: white;
44
$nav-mobile-menu-item-hover-color: $green-yellow;
45

  
46
$title-background: transparent;
47
$title-weight: 600;
48
$title-transform: uppercase;
49
$title-font-size: 1.4em;
50
$title-color: $font-color;
51

  
52
// $cell-background: #eee;
53
$cell-border: none;
54
$cell-title-cover-border: false;
55

  
56
$cell-entry-border-color: $green-yellow;
57
$cell-entry-hover-background: $green-yellow-light;
58
$cell-entry-hover-color: black;
59
$cell-entry-hover-effect: bottom-to-top;
60

  
61
$button-background: $primary-color;
62
$button-hover-background: $green-blue-dark;
63
$button-hover-color: null;
64
$widget-unique-checkbox-position: left;
65

  
66
$wcs-step-color: $font-color;
67
$wcs-step-border-bottom: none;
68
$wcs-step-marker-background: $gray-light;
69
$wcs-step-current-marker-color: white;
70
$wcs-step-current-marker-background: $primary-color;
71
$wcs-steps-spacing: 0.7rem;
72
$wcs-step-marker-type: disc;
73

  
74
$buttons-order: previous, cancel, submit;
75

  
76
$footer-background: #0E2327;
77
$footer-color: white;
78
$footer-link-color: white;
79
$footer-menucell-separator: 1px solid $footer-color;
static/cinor-2021/config.json
1
{
2
  "label": "La Cinor 2021",
3
  "variables": {
4
    "theme_color": "#38a58f",
5
    "email_header_asset": "emails:logo",
6
    "pwa_display": "standalone"
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/cinor-2021/style.scss
1
@charset "UTF-8";
2
@import '../includes/fonts/source-sans-pro';
3
@import '../includes/fonts/dancing-script';
4

  
5
@import 'vars';
6
@import '../includes/publik';
7
@import 'custom';
templates/variants/cinor-2021/combo/page_template_homepage.html
1
{% extends "combo/page_template_2cols_sidebar.html" %}
2
{% load combo assets i18n %}
3

  
4
{% block before-main-content %}
5
  <div class="top-carrousel">
6
    {% placeholder "carrousel" name="Carrousel" %}
7
  </div>
8
  {{ block.super }}
9
{% endblock %}
templates/variants/cinor-2021/combo/wcs/tracking_code_input.html
1
{% extends "combo/wcs/tracking_code_input.html" %}
2

  
3
{% block title %}
4
<h2 class="script-title">Suivi<small>de votre demande</small></h2>
5
{% endblock %}
0
-