From 647e60586a2d98090ab0471d738ad78576943ed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <csechet@entrouvert.com>
Date: Tue, 16 Aug 2022 11:44:34 +0200
Subject: [PATCH] antibes: create theme (#68154)

---
 static/antibes/_custom.scss | 223 ++++++++++++++++++++++++++++++++++++
 static/antibes/_vars.scss   |  78 +++++++++++++
 static/antibes/config.json  |  15 +++
 static/antibes/style.scss   |   6 +
 4 files changed, 322 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

diff --git a/static/antibes/_custom.scss b/static/antibes/_custom.scss
new file mode 100644
index 00000000..8d9f1dd7
--- /dev/null
+++ b/static/antibes/_custom.scss
@@ -0,0 +1,223 @@
+// Typo
+h1:not(#logo) {
+	border: none;
+	color: $title-color;
+	font-size: $fz-1;
+	padding-bottom: 0.5rem;
+	position: relative;
+	text-transform: uppercase;
+	&::before {
+		content: "";
+		border-bottom: 3px solid $blue-xlight;
+		bottom: 0;
+		position: absolute;
+		width: 4rem;
+	}
+}
+
+div#top {
+	display: flex;
+	justify-content: center;
+	padding-top: 50px;
+}
+
+div#header {
+	max-width: none;
+}
+
+#logo.has-logo {
+	a::before {
+		margin-right: 0;
+		@media($max-mobile-viewport) {
+			max-width: 208px;
+			max-height: 40px;
+		}
+	}
+}
+
+#toplinks {
+	top: 20px;
+	right: 4rem;
+	a {
+		color: $blue-dark;
+	}
+}
+
+div.gru-nav {
+	> ul > li a {
+		font-weight: normal;
+		text-transform: uppercase;
+	}
+	@media ($min-desktop-viewport) {
+		display: flex;
+		justify-content: center;
+		> ul > li a {
+			font-weight: normal;
+			text-transform: uppercase;
+			font-size: $fz-small;
+		}
+	}
+	@media($max-mobile-viewport) {
+		.gru-nav-button + ul {
+			border: none;
+		}
+
+		> ul > li > a {
+			&::before {
+				content: '\f061';
+				font-family: FontAwesome;
+				color: $blue-light;
+				font-size: $fz-xsmall;
+				margin-right: 0.5rem;
+			}
+		}
+	}
+}
+
+//
+// FOOTER
+//
+#footer {
+	.menucell li a {
+		text-transform: uppercase;
+		&:hover {
+			color: $yellow;
+		}
+	}
+
+	div.link-cell div.links-list ul > li {
+		border: 1px solid white;
+	}
+
+	div.links-list ul > li {
+		> a {
+			color: white;
+			&:hover {
+				background: white;
+				color: $blue-dark;
+			}
+		}
+	}
+}
+
+div.cell.foldable > div > h2:first-child{
+	padding-left: 3rem;
+	&:hover {
+		border-color: $blue-dark;
+	}
+	&::after {
+		color: $blue-xlight;
+		left: 0;
+		padding-left:1rem;
+	}
+}
+
+%cell-links-list {
+	& > li > a {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		&::before {
+			content: "\f105";
+			font-family: FontAwesome;
+			color: $blue-xlight;
+			margin: 0 0.5rem 0 0.2rem;
+			font-weight: 700;
+			font-size: $fz-2;
+		}
+	}
+}
+
+div.links-list ul .add-more-items--button,
+div.link-cell div.links-list ul > li > a,
+#footer .menucell li a {
+	&::before {
+		content: none;
+	}
+}
+
+.gru-content .cell-items-pagination button {
+	background: white;
+	border: 1px solid $blue-dark;
+	color: $blue-dark;
+	padding: 0;
+	width: 3rem;
+	height: 3rem;
+	border-radius: 100%;
+	&[disabled] {
+		color: $gray;
+		border-color: $gray;
+	}
+	&:not([disabled]):hover {
+		background: $blue-dark;
+		color: white;
+	}
+}
+
+.tracking-code-input-cell {
+	input, button {
+		width: 100%;
+	}
+}
+
+//
+// WCS
+//
+%button {
+	text-transform: uppercase;
+	padding: 1rem 2rem;
+	box-shadow: none;
+	&:hover {
+		box-shadow: none;
+	}
+}
+
+.form-content {
+	&--title {
+		border-bottom: none;
+		font-size: $fz-big;
+		text-align: center;
+		&::before {
+			display: none;
+		}
+	}
+}
+
+.field--label {
+	color: $blue-dark;
+	font-weight: bold;
+}
+
+%antibes-cancel-button {
+	background: transparent;
+	color: $gray;
+	border: 1px solid $gray;
+	&:hover {
+		color: white;
+		background: $blue-dark;
+		border-color: $blue-dark;
+	}
+}
+
+//
+// FIXES
+//
+
+// Hard-coded color on links description
+%cell-links-list {
+	li div.description {
+		color: $font-color;
+	}
+}
+
+// h1 and h2 have no padding in text cells
+div.text-cell {
+	h1, h2 {
+		margin: 0.7rem 1rem;
+	}
+}
+
+// no padding in wcsformcell
+div.wcs-form-cell {
+	padding: 1rem;
+}
diff --git a/static/antibes/_vars.scss b/static/antibes/_vars.scss
new file mode 100644
index 00000000..9fa57375
--- /dev/null
+++ b/static/antibes/_vars.scss
@@ -0,0 +1,78 @@
+$blue-xxlight: #e5f5fa;
+$blue-xlight: #00a1cf;
+$blue-light: #1e90ff;
+$blue: #122674;
+$blue-dark: #081446;
+$yellow: #ffeec2;
+$gray-light: #efefef;
+$gray: #494949;
+
+$primary-color: $blue-xlight;
+$secondary-color: $yellow;
+$font-roboto: 'Roboto', sans-serif;
+
+$base-font: 16;
+
+$fz-big: 60em / $base-font;
+$fz-1: 38em / $base-font;
+$fz-2: 28em / $base-font;
+$fz-3: 22em / $base-font;
+$fz-4: 18em / $base-font;
+$fz-small : 16em / $base-font;
+$fz-xsmall: 14em / $base-font;
+
+$font-family: $font-roboto;
+$font-size: 100% / ( 16 / $base-font );
+$link-color: $blue-light;
+$link-decoration: none;
+$link-hover-color: $blue-light;
+
+$header-full-width-background: true;
+$header-logo-size: 520px 100px;
+$toplinks-style: none;
+
+$nav-color: $blue;
+$nav-menu-color: $blue;
+$nav-active-color: $yellow;
+$nav-border-color: transparent;
+$nav-button-background: $blue-dark;
+$nav-button-color: white;
+$nav-mobile-menu-background: $blue-dark;
+$nav-mobile-menu-item-color: white;
+$nav-mobile-menu-item-hover-background: $blue-dark;
+$nav-mobile-menu-item-hover-color: white;
+
+$title-color: $blue;
+$title-background: transparent;
+$title-border-bottom: 3px solid $gray-light;
+$title-weight: 700;
+$title-font-size: $fz-2;
+$title-padding: 0.5rem 0;
+
+$cell-border: none;
+$cell-background: transparent;
+$cell-entry-color: $blue-dark;
+$cell-entry-hover-background: $yellow;
+$cell-entry-hover-color: $blue-dark;
+$cell-entry-border: 2px solid $gray-light;
+
+//WCS
+$wcs-steps-background: $blue-xxlight;
+$wcs-step-current-color: $blue-dark;
+$wcs-step-color: $gray;
+
+$widget-color: $blue-dark;
+$widget-focus-color: $blue-dark;
+$widget-border: 1px solid $blue-dark;
+$widget-focus-outline: 1px solid $blue-xlight;
+$widget-focus-box-shadow: 0 0 6px 0 $blue-light;
+
+$button-background: $blue-dark;
+$button-hover-background: $blue-xlight;
+$cancel-button-style: "%antibes-cancel-button";
+
+$carrousel-item-mask-color: transparent;
+
+$footer-background: $blue-dark;
+$footer-menucell-separator: 1px solid $blue-xlight;
+
diff --git a/static/antibes/config.json b/static/antibes/config.json
new file mode 100644
index 00000000..482987d7
--- /dev/null
+++ b/static/antibes/config.json
@@ -0,0 +1,15 @@
+{
+  "label": "Antibes - Juan Les Pins",
+  "variables": {
+    "theme_color": "#00a1cf",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": {"label": "Emails : logo"}
+      }
+    }
+  }
+}
diff --git a/static/antibes/style.scss b/static/antibes/style.scss
new file mode 100644
index 00000000..d7337687
--- /dev/null
+++ b/static/antibes/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/roboto';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
-- 
2.35.1

