Projet

Général

Profil

0001-nimes-create-theme-67991.patch

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

Télécharger (7,31 ko)

Voir les différences:

Subject: [PATCH] nimes: create theme (#67991)

 static/nimes/_custom.scss                     | 193 ++++++++++++++++++
 static/nimes/_vars.scss                       |  86 ++++++++
 static/nimes/config.json                      |  14 ++
 static/nimes/style.scss                       |   5 +
 .../variants/nimes/combo/page_template.html   |   7 +
 5 files changed, 305 insertions(+)
 create mode 100644 static/nimes/_custom.scss
 create mode 100644 static/nimes/_vars.scss
 create mode 100644 static/nimes/config.json
 create mode 100644 static/nimes/style.scss
 create mode 100644 templates/variants/nimes/combo/page_template.html
static/nimes/_custom.scss
1
// Header
2
#toplinks a {
3
	@extend %button;
4
	border-color: white;
5
	padding: 0.2rem 0.5rem;
6
	margin-right: 0.5rem;
7
}
8

  
9
div#nav {
10
	margin-bottom: 10px;
11
	font-family: 'dosis_semibold', Arial, sans-serif;
12

  
13
	> ul {
14
		margin: 0;
15
		> li {
16
			a {
17
				font-weight: normal;
18
			}
19

  
20
			> a {
21
				padding: 1.2em 20px;
22
			}
23

  
24
			> ul {
25
				box-shadow: 0px 4px 12px 0px $gray-dark;
26
				border-radius: $nav-border-radius;
27

  
28
				> li {
29
					> a {
30
						display: flex;
31
						font-size: $fz-small;
32
						padding: 0.2em 20px;
33

  
34
						&:hover {
35
							font-weight: 700;
36
						}
37

  
38
						&::before {
39
							content: '>';
40
							font-size: $fz-xsmall;
41
							margin-right: 0.5rem;
42
						}
43
					}
44

  
45
					&:first-child > a {
46
						border-radius: $nav-border-radius $nav-border-radius 0 0;
47
					}
48
				}
49
			}
50
		}
51
	}
52
}
53

  
54
@media ($max-mobile-viewport) {
55
	#logo.has-logo {
56
		padding-left: 0;
57
		a {
58
			margin-top: 50px;
59
			margin-bottom: 20px;
60
			@media ($max-mobile-viewport) {
61
				&::before {
62
				}
63
			}
64
		}
65
	}
66

  
67
	div#nav {
68
		.gru-nav-button {
69
			top: -75px;
70
		}
71

  
72
		> ul > li > ul {
73
			box-shadow: none;
74
		}
75
	}
76
}
77

  
78
//
79
// CONTENT
80
//
81
.gru-content div#sidebar .cell {
82
	border: 1px solid $gray-xdark;
83
	h2:first-child {
84
		background: $gray-xdark;
85
		color: white;
86
	}
87
}
88

  
89
.gru-content .cell.foldable {
90
	border: 1px solid $red;
91

  
92
	h2:first-child {
93
		background: $red;
94
		color: white;
95
	}
96

  
97
	&.folded {
98
		border: 1px solid $gray-xdark;
99
		h2:first-child {
100
			background: $gray-xdark;
101
		}
102
	}
103
}
104

  
105
.gru-content #sidebar div.cell,
106
div#gauche
107
{
108
	background: $gray-xlight;
109
}
110

  
111
%button, %inverted-button {
112
	box-shadow: none;
113
	&:hover {
114
		box-shadow: none;
115
	}
116
}
117

  
118
%cancel-button {
119
	border: 1px solid $gray-dark;
120
	background: $gray-dark;
121
	color: white;
122
	&:hover {
123
		background: $white;
124
		color: $gray-dark;
125
	}
126
}
127

  
128
.form-content--title {
129
	font-size: $fz-1;
130
}
131

  
132
//
133
// FOOTER
134
//
135
div#footer {
136
	border-top: 1px solid #b2b2b2;
137
	div.links-list ul > li > a:hover {
138
		text-decoration: underline;
139
		background: transparent;
140
	}
141
}
142

  
143

  
144
.nimes-footer-bottom {
145
	max-width: $width;
146
	margin: 0 auto;
147
	padding: 0.5rem;
148
	display: flex;
149
	justify-content: center;
150
	background: $gray-xdark;
151
	color: white;
152

  
153
	a {
154
		color: white;
155
		text-decoration: none;
156
	}
157
}
158

  
159
//
160
// FIXES
161
//
162

  
163
// Hard-coded color on links description
164
%cell-links-list {
165
	li div.description {
166
		color: $font-color;
167
	}
168
}
169

  
170
// h1 and h2 have no padding in text cells
171
div.text-cell {
172
	h1, h2 {
173
		margin: 0.7rem 1rem;
174
	}
175
}
176

  
177
// picture of foldable cell still visible when folded
178
div.cell.folded > div > picture {
179
	display: none;
180
}
181

  
182
// no padding in wcsformcell
183
div.wcs-form-cell {
184
	padding: 1rem;
185
}
186

  
187
// double border on pk-button cells
188
div.linkcell{
189
	&.pk-button,
190
	&.pk-big-button {
191
		border: none;
192
	}
193
}
static/nimes/_vars.scss
1
$red: #c51012;
2
$blue: #3584e4;
3
$red-dark: #890b0c;
4
$gray-xdark: #323232;
5
$gray-dark: #656565;
6
$gray: #dddddd;
7
$gray-light: #e7e7e7;
8
$gray-xlight: #eeeeee;
9

  
10
$primary-color: $red;
11
$box-shadow: 3px 3px 6px 0px $gray;
12

  
13
// typo
14
$base-font: 16;
15
$font-color: #333;
16

  
17
$fz-1: 30em / $base-font;
18
$fz-2: 24em / $base-font;
19
$fz-3: 21em / $base-font;
20
$fz-4: 18em / $base-font;
21
$fz-small: 14em / $base-font;
22
$fz-xsmall: 11em / $base-font;
23

  
24
$link-color: $primary-color;
25
$link-decoration: underline;
26
$font-family: Arial, Helvetica, sans-serif;
27

  
28
$header-background-color: $primary-color;
29
$header-logo-size: 260px 73px;
30
$toplinks-background: $primary-color;
31
$toplinks-box-shadow: none;
32
$toplinks-padding: 20px 0 0 0;
33
$toplinks-border: none;
34

  
35
$nav-active-background: $gray-light;
36
$nav-border-radius: 0;
37
$nav-color: $font-color;
38
$nav-item-hover-background: $gray-light;
39
$nav-item-hover-color: $font-color;
40
$nav-item-selected-background: $gray-light;
41
$nav-item-selected-color: $font-color;
42
$nav-submenu-background: $gray;
43
$nav-submenu-color: $font-color;
44
$nav-button-background: $red;
45
$nav-border-color: transparent;
46

  
47
$cell-entry-color: black;
48
$cell-border: none;
49
$cell-border-radius: 0;
50
$cell-entry-border: 1px solid $gray;
51
$cell-entry-hover-background: $gray;
52
$cell-entry-hover-color: black;
53
$cell-open-foldable-icon: "\f13A";
54
$cell-close-foldable-icon: "\f139";
55
$cell-image-padding: 0rem 0.1rem;
56

  
57
$title-background: transparent;
58
$title-color: black;
59
$title-transform: uppercase;
60
$title-font-size: $fz-4;
61
$title-weight: 600;
62
$title-padding: .7rem 0.5rem .7rem 0.5rem;
63

  
64
$button-color: white;
65
$button-background: $red;
66
$button-hover-background: white;
67
$button-hover-color: $red;
68
$button-border: 1px solid $red !default;
69
$buttons-order: previous, cancel (grow), submit;
70
$cancel-button-style: "%inverted-button";
71

  
72
$widget-background: white;
73
$widget-border: 1px solid $gray-dark;
74
$widget-focus-border: 1px solid $blue;
75
$widget-focus-outline: 1px solid $blue;
76
$widget-box-shadow: none;
77
$widget-focus-box-shadow: none;
78

  
79
$wcs-step-color: $font-color;
80

  
81
$carrousel-item-mask-color: transparent;
82

  
83
$footer-background: white;
84
$footer-color: black;
85
$footer-link-color: black;
86
$footer-full-width-background: false;
static/nimes/config.json
1
{
2
  "label": "Nîmes",
3
  "variables": {
4
    "theme_color": "#c51012"
5
  },
6
  "settings": {
7
    "combo": {
8
      "COMBO_ASSET_SLOTS.update": {
9
        "header:logo": { "label": "Têtière : logo" },
10
        "emails:logo": { "label": "Courriels : logo" }
11
      }
12
    }
13
  }
14
}
static/nimes/style.scss
1
@charset "UTF-8";
2

  
3
@import 'vars';
4
@import '../includes/publik';
5
@import 'custom';
templates/variants/nimes/combo/page_template.html
1
{% extends "combo/page_template.html" %}
2

  
3
{% block footer-post %}
4
  <div class="nimes-footer-bottom">
5
	  {% placeholder "footer-bottom" name="Bas du pied de page" acquired=True optional=True %}
6
  </div>
7
{% endblock %}
0
-