Projet

Général

Profil

0001-antibes-create-theme-68154.patch

Corentin Séchet, 22 août 2022 15:57

Télécharger (7,19 ko)

Voir les différences:

Subject: [PATCH] antibes: create theme (#68154)

 static/antibes/_custom.scss | 227 ++++++++++++++++++++++++++++++++++++
 static/antibes/_vars.scss   |  78 +++++++++++++
 static/antibes/config.json  |  15 +++
 static/antibes/style.scss   |   6 +
 4 files changed, 326 insertions(+)
 create mode 100644 static/antibes/_custom.scss
 create mode 100644 static/antibes/_vars.scss
 create mode 100644 static/antibes/config.json
 create mode 100644 static/antibes/style.scss
static/antibes/_custom.scss
1
// Typo
2
h1:not(#logo) {
3
	border: none;
4
	color: $title-color;
5
	font-size: $fz-1;
6
	padding-bottom: 0.5rem;
7
	position: relative;
8
	text-transform: uppercase;
9
	&::before {
10
		content: "";
11
		border-bottom: 3px solid $blue-xlight;
12
		bottom: 0;
13
		position: absolute;
14
		width: 4rem;
15
	}
16
}
17

  
18
div#top {
19
	display: flex;
20
	justify-content: center;
21
	padding-top: 50px;
22
}
23

  
24
div#header {
25
	max-width: none;
26
}
27

  
28
#logo.has-logo {
29
	a::before {
30
		margin-right: 0;
31
		@media($max-mobile-viewport) {
32
			max-width: 208px;
33
			max-height: 40px;
34
		}
35
	}
36
}
37

  
38
#toplinks {
39
	top: 20px;
40
	right: 4rem;
41
	a {
42
		color: $blue-dark;
43
	}
44
}
45

  
46
div.gru-nav {
47
	> ul > li a {
48
		font-weight: normal;
49
		text-transform: uppercase;
50
	}
51
	@media ($min-desktop-viewport) {
52
		display: flex;
53
		justify-content: center;
54
		> ul > li a {
55
			font-weight: normal;
56
			text-transform: uppercase;
57
			font-size: $fz-small;
58
		}
59
	}
60
	@media($max-mobile-viewport) {
61
		.gru-nav-button + ul {
62
			border: none;
63
		}
64

  
65
		> ul > li > a {
66
			&::before {
67
				content: '\f061';
68
				font-family: FontAwesome;
69
				color: $blue-light;
70
				font-size: $fz-xsmall;
71
				margin-right: 0.5rem;
72
			}
73
		}
74
	}
75
}
76

  
77
//
78
// FOOTER
79
//
80
#footer {
81
	.menucell li a {
82
		text-transform: uppercase;
83
		&:hover {
84
			color: $yellow;
85
		}
86
	}
87

  
88
	div.link-cell div.links-list ul > li {
89
		border: 1px solid white;
90
	}
91

  
92
	div.links-list ul > li {
93
		> a {
94
			color: white;
95
			&:hover {
96
				background: white;
97
				color: $blue-dark;
98
			}
99
		}
100
	}
101
}
102

  
103
div.cell.foldable > div > h2:first-child{
104
	padding-left: 3rem;
105
	&:hover {
106
		border-color: $blue-dark;
107
	}
108
	&::after {
109
		color: $blue-xlight;
110
		left: 0;
111
		padding-left:1rem;
112
	}
113
}
114

  
115
%cell-links-list {
116
	& > li > a {
117
		display: flex;
118
		flex-wrap: nowrap;
119
		align-items: center;
120
		&::before {
121
			content: "\f105";
122
			font-family: FontAwesome;
123
			color: $blue-xlight;
124
			margin: 0 0.5rem 0 0.2rem;
125
			font-weight: 700;
126
			font-size: $fz-2;
127
		}
128
	}
129
}
130

  
131
div.links-list ul .add-more-items--button,
132
div.link-cell div.links-list ul > li > a,
133
#footer .menucell li a {
134
	&::before {
135
		content: none;
136
	}
137
}
138

  
139
.gru-content .cell-items-pagination button {
140
	background: white;
141
	border: 1px solid $blue-dark;
142
	color: $blue-dark;
143
	padding: 0;
144
	width: 3rem;
145
	height: 3rem;
146
	border-radius: 100%;
147
	&[disabled] {
148
		color: $gray;
149
		border-color: $gray;
150
	}
151
	&:not([disabled]):hover {
152
		background: $blue-dark;
153
		color: white;
154
	}
155
}
156

  
157
.tracking-code-input-cell {
158
	input, button {
159
		width: 100%;
160
	}
161
}
162

  
163
//
164
// WCS
165
//
166
%button {
167
	text-transform: uppercase;
168
	padding: 1rem 2rem;
169
	box-shadow: none;
170
	&:hover {
171
		box-shadow: none;
172
	}
173
}
174

  
175
.form-content {
176
	&--title {
177
		border-bottom: none;
178
		font-size: $fz-big;
179
		text-align: center;
180
		&::before {
181
			display: none;
182
		}
183
	}
184
}
185

  
186
.field--label {
187
	color: $blue-dark;
188
	font-weight: bold;
189
}
190

  
191
%antibes-cancel-button {
192
	background: transparent;
193
	color: $gray;
194
	border: 1px solid $gray;
195
	&:hover {
196
		color: white;
197
		background: $blue-dark;
198
		border-color: $blue-dark;
199
	}
200
}
201

  
202
//
203
// FIXES
204
//
205

  
206
// Hard-coded color on links description
207
%cell-links-list {
208
	li div.description {
209
		color: $font-color;
210
	}
211
}
212

  
213
// h1 and h2 have no padding in text cells
214
div.text-cell {
215
	h1, h2 {
216
		margin: 0.7rem 1rem;
217
	}
218
	p, table, ul, ol {
219
		line-height: 1.7;
220
		font-weight: 300;
221
	}
222
}
223

  
224
// no padding in wcsformcell
225
div.wcs-form-cell {
226
	padding: 1rem;
227
}
static/antibes/_vars.scss
1
$blue-xxlight: #e5f5fa;
2
$blue-xlight: #00a1cf;
3
$blue-light: #1e90ff;
4
$blue: #122674;
5
$blue-dark: #081446;
6
$yellow: #ffeec2;
7
$gray-light: #efefef;
8
$gray: #494949;
9

  
10
$primary-color: $blue-xlight;
11
$secondary-color: $yellow;
12
$font-roboto: 'Roboto', sans-serif;
13

  
14
$base-font: 20;
15

  
16
$fz-big: 60em / $base-font;
17
$fz-1: 38em / $base-font;
18
$fz-2: 28em / $base-font;
19
$fz-3: 22em / $base-font;
20
$fz-4: 18em / $base-font;
21
$fz-small : 16em / $base-font;
22
$fz-xsmall: 14em / $base-font;
23

  
24
$font-family: $font-roboto;
25
$font-size: 100% / ( 16 / $base-font );
26
$link-color: $blue-light;
27
$link-decoration: none;
28
$link-hover-color: $blue-light;
29

  
30
$header-full-width-background: true;
31
$header-logo-size: 520px 100px;
32
$toplinks-style: none;
33

  
34
$nav-color: $blue;
35
$nav-menu-color: $blue;
36
$nav-active-color: $yellow;
37
$nav-border-color: transparent;
38
$nav-button-background: $blue-dark;
39
$nav-button-color: white;
40
$nav-mobile-menu-background: $blue-dark;
41
$nav-mobile-menu-item-color: white;
42
$nav-mobile-menu-item-hover-background: $blue-dark;
43
$nav-mobile-menu-item-hover-color: white;
44

  
45
$title-color: $blue;
46
$title-background: transparent;
47
$title-border-bottom: 3px solid $gray-light;
48
$title-weight: 700;
49
$title-font-size: $fz-2;
50
$title-padding: 0.5rem 0;
51

  
52
$cell-border: none;
53
$cell-background: transparent;
54
$cell-entry-color: $blue-dark;
55
$cell-entry-hover-background: $yellow;
56
$cell-entry-hover-color: $blue-dark;
57
$cell-entry-border: 2px solid $gray-light;
58

  
59
//WCS
60
$wcs-steps-background: $blue-xxlight;
61
$wcs-step-current-color: $blue-dark;
62
$wcs-step-color: $gray;
63

  
64
$widget-color: $blue-dark;
65
$widget-focus-color: $blue-dark;
66
$widget-border: 1px solid $blue-dark;
67
$widget-focus-outline: 1px solid $blue-xlight;
68
$widget-focus-box-shadow: 0 0 6px 0 $blue-light;
69

  
70
$button-background: $blue-dark;
71
$button-hover-background: $blue-xlight;
72
$cancel-button-style: "%antibes-cancel-button";
73

  
74
$carrousel-item-mask-color: transparent;
75

  
76
$footer-background: $blue-dark;
77
$footer-menucell-separator: 1px solid $blue-xlight;
78

  
static/antibes/config.json
1
{
2
  "label": "Antibes - Juan Les Pins",
3
  "variables": {
4
    "theme_color": "#00a1cf",
5
    "email_header_asset": "emails:logo"
6
  },
7
  "settings": {
8
    "combo": {
9
      "COMBO_ASSET_SLOTS.update": {
10
        "header:logo": { "label": "Têtière : logo" },
11
        "emails:logo": {"label": "Emails : logo"}
12
      }
13
    }
14
  }
15
}
static/antibes/style.scss
1
@charset "UTF-8";
2
@import '../includes/fonts/roboto';
3

  
4
@import 'vars';
5
@import '../includes/publik';
6
@import 'custom';
0
-