Produits Entr'ouvert » Intégrations graphiques Publik

%title {

	@extend %title;

	text-align: center;

}

%big-title {

	@extend %title;

	background-color: transparent;

	color: $font-color;

	padding: 0;

	font-size: 2em;

	text-align: left;

}

%title-secondary {

	@extend %title;

	display: flex;

	background-color: transparent;

	color: $font-color;

	text-align: left;

	border-bottom: 4px solid $orange;

	padding: 0;

	margin-bottom: 1rem;

	&::after {

		content: "";

		display: block;

		height: 4px;

		background-color: #2d2d2d;

		flex-grow: 1;

		align-self: flex-end;

		position: relative;

		top: 4px;

	}

}

%title-secondary-white {

	@extend %title-secondary;

	color: white;

	border-color: $primary-color;

	&::after {

		background-color: $font-color;

	}

}

%cancel-button {

	@extend %cancel-button;

	border: 1px solid currentColor;

	color: $primary-color;

	background-color: hsla(0, 0%, 100%, 0.6);

	&:hover {

		color: $dark-desaturated-blue;

		background-color: white;

	}

}

// typo

a:hover {

	color: black;

	background-color: $sldv-links-background-color;

}

#main-content {

	background-color: $sldv-main-color;

	@media (min-width: $mobile-limit + 1) {

		padding: 20px;

	}

}

// Page shadow

#page {

	position: relative;

	z-index: 1;

	&::after {

		content: "";

		display: block;

		height: 100vh;

		width: $width;

		max-width: 100%;

		position: fixed;

		box-shadow: 0 0 10px #7777774d;

		z-index: -1;

		@media (min-width: $width + 1) {

			left: calc( 50% - #{$width / 2});

		}

	}

}

div#header {

	font-family: $title-font-family;

	background-image: url(img/bg-header.jpg);

	background-position: center center;

	background-size: cover;

	padding: 0.7em;

	// keep free for top-links

	padding-top: 2rem;

	#logo {

		width: 420px;

		max-width: 100%;

		a {

			display: block;

			font-weight: 400;

			color: #222;

			font-size: 0.8em;

			text-align: right;

			padding: .3em;

			padding-top: 20%;

			// logo on top, white block on bottom

			background-image: url(img/logo-sldv420x80.png), linear-gradient(to top, hsla(0,100%,100%,.6) 80%, transparent);

			background-position: top center, center bottom;

			background-repeat: no-repeat;

			background-size: 100%, 100% 1.5em

		}

	}

}

div.gru-nav {

	font-family: $title-font-family;

	font-weight: 300;

	@media (max-width: $mobile-limit) {

		&-wrapper {

			margin-top: -50px;

		}

	}

	ul {

		margin: 0;

		li a {

			font-weight: normal;

			text-transform: uppercase;

		}

	}

}

body.has-picture nav::after {

	position: static;

	width: $width;

	max-width: 100%;

	margin: auto;

	background-clip: content-box;

	border: 0.7em solid $sldv-main-color;

	@media (min-width: $mobile-limit + 1 ) {

		border-width: 20px;

	}

}

// pwa nav

.pwa-navigation {

	box-shadow: 0 0 10px $primary-color;

	font-family: $title-font-family;

	text-transform: uppercase;

	div > ul li a {

		background-color: $primary-color;

		background-clip: padding-box;

		border: 1px solid transparent;

		border-width: 0 1px;

		span {

			font-size: 12px;

		}

	}

}

// Cells in sidebar

#sidebar, #gauche, .authentic-page .gru-content {

	// Cells titles

	div#tracking-code h3,

	div.links-list h2,

	div.textcell h2:first-child,

	div.cell h2:first-child,

	div.block h2,

	div.a2-block h2 {

		@extend %title-secondary;

	}

	// Cells background {

	div.cell,

	div.block,

	.a2-block {

		background-color: transparent;

		border: none;

		margin-bottom: 1.5rem;

		margin-top: 1.5rem;

		h2:first-child ~ *:not(link) {

			background-color: $cell-background;

			border: $cell-border;

			border-radius: $cell-border-radius;

			margin: 0;

			padding: .7rem;

			display: block;

			& + * {

				border-top: 0;

				margin-top: -1px;

			}

		}

	}

}

// Don't overlaid link text & key icon

li.required-authentication a {

    padding-right: 1.7em !important

}

// Patch bg-color issue

div#rub_service,

ul#evolutions div.evolution-metadata,

ul#evolutions li div.msg {

	background: $sldv-main-color;

}

ul#evolutions li span.item {

	box-shadow: 0 0 0px 5px $sldv-main-color;

}

div#rub_service h2 {

	@extend %big-title;

}

div#tracking-code a {

	padding: 0 !important;

}

.wcs-steps {

	font-family: $title-font-family;

}

#footer-wrapper {

	background-color: transparent;

	padding: 0;

	margin: 0;

}

#footer {

	background-color: $footer-background;

	padding: 0.7em;

	// add simple clearfix

	overflow: hidden;

	@media (min-width: $mobile-limit + 1) {

		padding: 20px;

	}

}

// Cells in footer

#footer {

	a {

		color: #aaa;

		&:hover {

			color: white;

			background-color: black;

		}

	}

	// Cells titles

	div.links-list h2,

	div.textcell h2:first-child,

	div.cell h2:first-child {

		@extend %title-secondary-white;

	}

	// Footer Links-list

	div.links-list ul {

		& > li > a {

			border-bottom: 1px solid black;

			padding: .5em 0;

			transition: color 0.4s;

		}

	}

}

// Custom colors

$cyan: #00a3d3;

$light-grayish-cyan: #ecf0f1;

$dark-desaturated-blue: #34495e;

$orange: #f39c12;

$sldv-main-color: #ecf0f1;

$sldv-links-background-color: fade-out($orange, 0.8);

// Core vars

$primary-color: $cyan;

$secondary-color: $orange;

$body-background: #eee url(img/background.jpg);

$font-color: #333;

$font-family: Arial,Tahoma,Helvetica,FreeSans,sans-serif;

$link-color: $dark-desaturated-blue;

$width: 1200px;

$border-radius: 0;

$nav-background: $cyan;

$nav-color: white;

$nav-active-color: $dark-desaturated-blue;

$nav-button-background: $primary-color;

$nav-mobile-menu-background: $primary-color;

$nav-mobile-menu-item-color: white;

$nav-border-color: $primary-color;

$nav-mobile-bottom-bar-color: white;

$nav-mobile-bottom-bar-background: transparent;

$nav-mobile-bottom-bar-item-selected-background: $primary-color;

$title-font-family: Oswald,Tahoma,Helvetica,FreeSans,sans-serif;

$title-color: white;

$title-background: $dark-desaturated-blue;

$title-transform: uppercase;

$cell-border-radius: 3px;

$cell-image-padding: 0.7rem;

$cell-entry-hover-background: $sldv-links-background-color;

$wcs-steps-spacing: 0.5rem;

$wcs-step-current-color: $dark-desaturated-blue;

$wcs-step-current-border-bottom: 4px solid $secondary-color;

$widget-background: hsla(0, 0%, 100%, 0.6);

$widget-focus-background: white;

$widget-border: 1px solid #ccc;

$widget-focus-border: 1px solid $font-color;

$button-color: white;

$button-hover-background: $dark-desaturated-blue;

$button-focus-outline: 4px solid $secondary-color;

$footer-background: #222;

$footer-color: $light-grayish-cyan;

{

  "label": "Saint-Laurent-du-Var",

  "variables": {

    "pwa_display": "standalone",

    "theme_color": "#00a3d3"

  }

}

@charset "UTF-8";

@import '../includes/font-oswald.scss';

* {

	box-sizing: border-box;

	&::before, &::after {

		box-sizing: inherit;

	}

}

@import 'vars';

@import '../includes/publik';

@import 'custom';