tours-metropole: initial theme (#29950)

static/tours-metropole/_custom.scss

@@ -0,0 +1,212 @@
+@font-face {
+	font-family: 'Ionicons';
+	src: url('assets/fonts/ionicons.eot');
+	src: url('assets/fonts/ionicons.eot') format('embedded-opentype'),
+		 url('assets/fonts/ionicons.woff2') format('woff2'),
+		 url('assets/fonts/ionicons.ttf') format('truetype'),
+		 url('assets/fonts/ionicons.svg') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+div#header-wrapper {
+	border-top: 25px solid #ffffff;
+	background: url('img/back-header.png');
+}
+
+div#header {
+	h1#logo {
+		a {
+			background: url('img/logo.png') no-repeat;
+			background-size: 180px 75px;
+			display: block;
+			height: 93px;
+			text-indent: -9999px;
+			margin: 15px 0;
+			@media screen and (max-width: $mobile-limit) {
+				background-size: contain;
+			}
+		}
+	}
+	#toplinks {
+		top: -45px;
+		border: 0;
+		box-shadow: 0 0 0;
+		a {
+			font-size: 75%;
+		}
+	}
+}
+
+div#nav-wrapper {
+	@media screen and (min-width: $mobile-limit) {
+		margin-top: -30px;
+	}
+}
+
+div#nav {
+	margin-bottom: 3ex;
+	font-family: 'Roboto', sans-serif;
+}
+
+div.gru-nav {
+	@media screen and (min-width: $mobile-limit) {
+		@include vendor-prefix(transform, skewY(-1deg));
+	}
+	padding: 5px 0;
+	@media screen and (max-width: $mobile-limit) {
+		padding: 0;
+	}
+	> ul {
+		@media screen and (min-width: $mobile-limit) {
+			@include vendor-prefix(transform, skewY(1deg));
+		}
+		> li a {
+			font-weight: normal;
+		}
+	}
+	li.selected > a {
+		color: #000000;
+		text-decoration: underline;
+		&:hover {
+			color: #ffffff;
+		}
+	}
+}
+
+div#footer-wrapper {
+	border-top: 0.5rem solid $primary-color;
+	h2 {
+		color: #222222;
+	}
+	ul {
+		margin: 0;
+		padding: 0;
+	}
+	li {
+		list-style-type: none;
+		a {
+			padding: .33em;
+			font-size: 90%;
+			&::before {
+				content: '\f284'; /* arrow-dropright */
+				font-family: "Ionicons";
+				display: inline-block;
+				color: #878787;
+				margin-right: .67em;
+			}
+		}
+	}
+}
+
+.gru-content {
+	div.cell.wcsformsofcategorycell {
+		> div {
+			position: relative;
+		}
+		&.foldable {
+			border: 0;
+			picture {
+				display: block;
+				img {
+					padding: 0;
+				};
+			}
+			&.folded {
+				> div > * {
+					display: block;
+				}
+				picture img {
+					border-bottom: 3px solid $primary-color;
+				}
+				ul {
+					display: none;
+				}
+				h2:first-child {
+					&::after {
+						content: '\f110'; /* arrow-dropdown */
+					}
+					&:hover::after {
+						content: '\f10f'; /* arrow-dropdown-circle */
+					}
+				}
+			}
+		}
+		h2:first-child {
+			position: absolute;
+			font-size: 1.25em;
+			font-weight: normal;
+			border: 0;
+			padding: 0.5rem 2rem 0.5rem 1rem;
+			line-height: 1;
+			background: rgba(0,0,0,0.75);
+			color: #ffffff;
+			width: 100%;
+			margin: auto 1px;
+			&::after {
+				content: '\f116'; /* arrow-dropup */
+				font-family: Ionicons;
+				color: $primary-color;
+				width: 1em;
+				height: 1em;
+				position: absolute;
+				right: 10px;
+			}
+			&:hover {
+				background: rgba(0,0,0,0.85);
+				&::after {
+					content: '\f115'; /* arrow-dropup-circle */
+				}
+			}
+			& + div {
+				padding: 0;
+			}
+		}
+		ul {
+			border: 1px solid $cell-entry-border-color;
+			border-bottom: 3px solid $primary-color;
+			top: -5px;
+			a {
+				font-size: 90%;
+				padding: .5rem 1.5rem .5rem 1rem;
+				position: relative;
+				align-items: center;
+				&::after {
+					content: '\f287'; /* arrow-round-forward */
+					font-family: Ionicons;
+					color: #158424;
+					position: absolute;
+					right: 10px;
+				}
+			}
+			li {
+				&:last-child {
+					a {
+						border-bottom: 0;
+					}
+				}
+				&.more-items a::after {
+					display: none;
+				}
+			}
+		}
+	}
+}
+
+span.required {
+	color: #ff0000;
+}
+
+form > div.buttons {
+	button {
+		background: #222222;
+		color: #ffffff;
+	}
+	div.submit-button {
+		float: right;
+		button {
+			background: $primary-color;
+			color: #000000;
+		}
+	}
+}

static/tours-metropole/_vars.scss

@@ -0,0 +1,26 @@
+$primary-color: #08fe00;
+$width: 1170px;
+
+$font-color: black;
+$font-family: 'Roboto', sans-serif;
+$font-size: 16px;
+
+$title-background: $primary-color;
+
+$nav-background: $primary-color;
+$nav-color: #000000;
+$nav-item-hover-color: #ffffff;
+$nav-item-hover-background: #000000;
+$nav-submenu-color: #000000;
+$nav-active-color: $primary-color;
+
+$cell-background: transparent;
+
+$link-color: #222222;
+
+$widget-unique-checkbox-position: left;
+
+$button-color: #222222;
+$button-background: $primary-color;
+
+$footer-background: transparent;

static/tours-metropole/config.json

@@ -0,0 +1,6 @@
+{
+  "label": "Tours Métropole",
+  "variables": {
+    "theme_color": "#08fe00"
+  }
+}

static/tours-metropole/style.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import '../includes/font-roboto';
+@import 'custom';

templates/variants/tours-metropole/combo/wcs/forms_of_category.html

@@ -0,0 +1,44 @@
+{% load assets i18n %}
+{% block cell-content %}
+{% block cell-header %}
+<h2>{{ title }}</h2>
+{% if description %}
+<div class="intro">
+{{ description|safe }}
+</div>
+{% endif %}
+{% endblock %}
+<div class="wcs-forms-of-category-{{slug}}">
+{% get_asset "wcs:category:picture:"|add:cell.category_reference as asset %}
+{% if asset %}
+  <picture>
+  <img src="{% asset_url asset size="660x360" crop="center" %}" alt="">
+  </picture>
+{% endif %}
+<ul>
+{% for form in forms %}
+<li class="{% if form.authentication_required %}required-authentication{% endif %}
+           {% for context in form.required_authentication_contexts %}required-{{context}}-authentication {% endfor %}
+           {% for keyword in form.keywords %}keyword-{{keyword|slugify}}{% endfor %}
+           {% if form.redirection %}is-redirection{% endif %}"
+  ><a href="{{ form.url }}tryauth">{{ form.title }}</a>
+  {% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
+  </li>
+{% endfor %}
+
+{% if more_forms %}
+<li class="more-items"><a>+</a></li>
+{% for form in more_forms %}
+<li style="display: none" class="additional-form {% if form.authentication_required %}required-authentication{% endif %}
+           {% for context in form.required_authentication_contexts %}required-{{context}}-authentication {% endfor %}
+           {% for keyword in form.keywords %}keyword-{{keyword|slugify}}{% endfor %}
+           {% if form.redirection %}is-redirection{% endif %}"
+  ><a href="{{ form.url }}tryauth">{{ form.title }}</a>
+  {% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
+  </li>
+{% endfor %}
+{% endif %}
+
+</ul>
+</div>
+{% endblock %}