armentieres: fix respect guide de style & ajustements (#70745) #65
|
|
@ -0,0 +1,23 @@
|
|||
.block-password {
|
||||
input {
|
||||
height: 45px;
|
||||
border:none;
|
||||
box-shadow: none;
|
||||
background: $gray-xlight;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $gray-dark;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
height: 45px;
|
||||
background: white;
|
||||
border: solid 1px $gray-dark;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,571 @@
|
|||
// Combo page header
|
||||
.arm-page-header {
|
||||
background: url('/assets/page-header:background');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
|
||||
&--default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--content {
|
||||
.cell {
|
||||
padding: 0 5rem 2rem 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Carrousel
|
||||
.carrousel {
|
||||
&.cell {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 0.5rem 4rem !important;
|
||||
}
|
||||
|
||||
&-nav label {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&-item-title {
|
||||
line-height: 1 !important;
|
||||
font-size: $fz-1;
|
||||
}
|
||||
|
||||
&-item-description {
|
||||
max-width: 100% !important; // too complex selector in core
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sidebar
|
||||
div#sidebar {
|
||||
div.cell h2:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $red;
|
||||
font-size: $fz-3;
|
||||
&::after {
|
||||
content: '';
|
||||
background: $gray-light;
|
||||
flex-grow: 1;
|
||||
height: 1px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Cells
|
||||
%title {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.gru-content div.cell {
|
||||
h2:first-child:not(:only-child) {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.foldable > div > h2:first-child {
|
||||
height: 70px;
|
||||
margin: 0;
|
||||
padding-left: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: $yellow;
|
||||
border: $yellow solid $gray;
|
||||
color: black;
|
||||
text-transform: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $widget-focus-box-shadow;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 30px;
|
||||
@media($max-mobile-viewport) {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.folded > div > h2:first-child {
|
||||
border: 1px solid $gray-light;
|
||||
background: transparent;
|
||||
|
||||
&::after {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-asset-picture {
|
||||
position: relative;
|
||||
|
||||
> div > h2:first-child {
|
||||
padding-left: 100px;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
picture img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 30px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
left: 20px;
|
||||
height: 30px;
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Link lists
|
||||
%cell-links-list {
|
||||
> li > a {
|
||||
padding: 0.8rem 1rem;
|
||||
color: $gray-dark;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin link-list-item-icon($icon) {
|
||||
a {
|
||||
padding-right: 2rem;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(50% - 16px / 2);
|
||||
right: 25px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
background: center / contain no-repeat url(#{$icon});
|
||||
|
||||
content: '';
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.links-list > ul > li.external-link {
|
||||
@include link-list-item-icon('/assets/external-link:icon')
|
||||
}
|
||||
|
||||
div#rub_service div.category,
|
||||
div#services,
|
||||
div#account-management,
|
||||
#columns div.cell:not(.pk-button,.pk-big-button),
|
||||
#columns div.menucell,
|
||||
div.wcsformcell,
|
||||
div.wcsformsofcategorycell,
|
||||
div.wcscurrentdraftscell,
|
||||
div.wcscurrentformscell {
|
||||
.links-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> ul {
|
||||
flex-basis: 764px;
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
> li {
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border: 1px solid $gray-light;
|
||||
border-radius: $border-radius;
|
||||
height: 50px;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
a {
|
||||
flex-grow: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $widget-focus-box-shadow;
|
||||
}
|
||||
|
||||
&.required-authentication {
|
||||
@include link-list-item-icon('/assets/authentication-required:icon')
|
||||
}
|
||||
|
||||
.description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.folded .links-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Search cell
|
||||
.gru-content div.searchcell {
|
||||
|
aberriot marked this conversation as resolved
Outdated
|
||||
.combo-search {
|
||||
&--hint {
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&--button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
input[type="search"] {
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
margin-right: 0;
|
||||
background: $gray-xlight;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
left: 0.5rem;
|
||||
z-index: 1;
|
||||
|
||||
background: transparent;
|
||||
font-family: FontAwesome;
|
||||
font-size: 1.2rem;
|
||||
color: $gray;
|
||||
content: "\f002";
|
||||
}
|
||||
}
|
||||
|
||||
.links-list ul li {
|
||||
border-bottom: 1px solid $gray;
|
||||
}
|
||||
}
|
||||
|
||||
// Tracking code input cell
|
||||
.gru-content div.tracking-code-input-cell {
|
||||
background: right / cover url('/assets/tracking-code-input:background');
|
||||
div.wcs-tracking-code-input {
|
||||
padding: 1rem;
|
||||
|
||||
h2:first-child {
|
||||
color: black;
|
||||
background: transparent;
|
||||
font-size: $fz-4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 0;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 4rem;
|
||||
margin: 0;
|
||||
flex-grow: 99999;
|
||||
|
||||
border: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
width: 11rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %black-button;
|
||||
|
||||
min-width: 10rem;
|
||||
flex-grow: 1;
|
||||
margin-right: 0;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
height: 35px !important;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&, &:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom elements
|
||||
.arm-red {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
@mixin custom-background-cell($background, $button-color) {
|
||||
border: 1px solid transparent;
|
||||
background: right / cover no-repeat url($background);
|
||||
.pk-button, .pk-big-button {
|
||||
@extend %black-button;
|
||||
&, &:hover {
|
||||
color: $button-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content .cell {
|
||||
&.arm-report {
|
||||
@include custom-background-cell('/assets/report:background', $secondary-color);
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
&.arm-suggest {
|
||||
@include custom-background-cell('/assets/suggest:background', $primary-color)
|
||||
}
|
||||
|
||||
&.arm-register {
|
||||
@include custom-background-cell('/assets/register:background', $primary-color)
|
||||
}
|
||||
}
|
||||
|
||||
.arm-report {
|
||||
> div, &--content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&--content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-auto-columns: auto;
|
||||
justify-items: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--picture {
|
||||
grid-area: 1 / 1 / 3 / 2;
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
&--hint {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
margin: 0 0 0 1rem !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--button {
|
||||
@extend %inverted-button;
|
||||
|
||||
margin: 0.5rem 0;
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
height: 35px !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
@media ($max-mobile-viewport) {
|
||||
grid-area: 2 / 1 / 3 / 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arm-suggest {
|
||||
&--content {
|
||||
height: 80px;
|
||||
padding: 0.5rem 0 0.5rem 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-auto-rows: auto;
|
||||
align-items: center;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
justify-items: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
margin: 0 !important;
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
grid-area: 1 / 1 / 3 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
&--text {
|
||||
margin: 0 !important;
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--button {
|
||||
@extend %black-button;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
|
||||
grid-area: 1 / 2 / 3 / 3;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: end !important;
|
||||
|
||||
grid-area: 1 / 1 / 3 / 3;
|
||||
|
||||
background: transparent !important;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-left: 1rem;
|
||||
font-family: FontAwesome;
|
||||
font-size: $fz-small;
|
||||
color: white;
|
||||
content: "\f054";
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
font-size: $fz-3;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content .arm-register {
|
||||
margin-top: 1rem !important;
|
||||
|
||||
&--content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--buttons {
|
||||
display: flex;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.pk-button {
|
||||
height: 45px !important;
|
||||
padding: 10px 1rem !important;
|
||||
background: white !important;
|
||||
color: $gray-dark !important;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "\f054";
|
||||
font-family: FontAwesome;
|
||||
font-size: $fz-small;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin arm-link-icon($name) {
|
||||
& > li.arm-icon-#{$name} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: center / cover no-repeat url(img/icon-#{$name}.png);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%cell-links-list {
|
||||
@include arm-link-icon('user');
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
// Typos
|
||||
* {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $fz-1;
|
||||
font-family: 'Archivo Black', 'Rubik', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $fz-2;
|
||||
font-family: 'Viga', 'Rubik', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $fz-3;
|
||||
font-family: 'Viga', 'Rubik', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $fz-4;
|
||||
font-family: 'Viga', 'Rubik', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// Layout
|
||||
div#main-content-wrapper {
|
||||
max-width: none;
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
margin-top: calc(#{$header-height} + 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.central-content {
|
||||
max-width: $width;
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
.gru-content {
|
||||
padding: 3rem 0.5rem 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Notices
|
||||
.errornotice, .warningnotice, .successnotice, .infonotice {
|
||||
border-radius: $border-radius;
|
||||
padding: 25px 60px;
|
||||
color: $gray-dark;
|
||||
|
||||
a {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 15px;
|
||||
left: 20px;
|
||||
right: auto;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.errornotice, .warningnotice {
|
||||
&::before {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.infonotice::before {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.successnotice::before {
|
||||
color: $green-dark;
|
||||
}
|
||||
|
|
@ -1,673 +0,0 @@
|
|||
//
|
||||
// Typo
|
||||
//
|
||||
h1 {
|
||||
font-size: $fz-1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $fz-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $fz-3;
|
||||
}
|
||||
|
||||
//
|
||||
// Header
|
||||
//
|
||||
div#top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
#logo{
|
||||
@media($max-mobile-viewport) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav.site-nav {
|
||||
flex-grow: 1;
|
||||
@media($max-mobile-viewport) {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-nav > ul {
|
||||
margin: 0;
|
||||
@media($max-mobile-viewport) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
li a {
|
||||
font-weight: normal;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
div#header {
|
||||
max-width: calc(#{$width} + 100px);
|
||||
}
|
||||
|
||||
div#toplinks {
|
||||
position: static;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-right: 2rem;
|
||||
@media($max-mobile-viewport) {
|
||||
flex-grow: 1;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.logged-in, .login {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
span {
|
||||
display: flex;
|
||||
a:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 0 .3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-family: FontAwesome;
|
||||
content: '';
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: url('/assets/profile:icon');
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arm-page-header {
|
||||
background: url('/assets/page-header:background');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
|
||||
h1 {
|
||||
font-size: 48em / $base-font;
|
||||
}
|
||||
|
||||
&--default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--content {
|
||||
max-width: $width;
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
.cell {
|
||||
padding: 3rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Content
|
||||
//
|
||||
div#main-content-wrapper {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.central-content {
|
||||
max-width: $width;
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
.gru-content {
|
||||
padding: 3rem 0.5rem 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div#sidebar {
|
||||
div.cell h2:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::after {
|
||||
content: '';
|
||||
background: $gray-light;
|
||||
flex-grow: 1;
|
||||
height: 1px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.errornotice, .warningnotice, .successnotice, .infonotice {
|
||||
border-radius: $border-radius;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
padding-right: 2rem;
|
||||
|
||||
a {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: calc(50% - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.errornotice, .warningnotice {
|
||||
&::before {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.infonotice::before {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.successnotice::before {
|
||||
color: $green-dark;
|
||||
}
|
||||
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
#footer-wrapper {
|
||||
padding: 3rem 1.5rem 0;
|
||||
#footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-top {
|
||||
position: absolute;
|
||||
top: -4.5rem;
|
||||
right: 0rem;
|
||||
background: $primary-color;
|
||||
border-radius: $border-radius;
|
||||
padding: 0.5rem;
|
||||
|
||||
&--link {
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--link-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arm-footer-bottom {
|
||||
padding: 1rem;
|
||||
background: $gray;
|
||||
color: white;
|
||||
.menu-cell {
|
||||
text-align: center;
|
||||
li {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
a {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.5rem 2rem;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Cells
|
||||
//
|
||||
%title {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
%cell-links-list {
|
||||
> li > a {
|
||||
padding-left: 0;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service div.category,
|
||||
div#services,
|
||||
div#account-management,
|
||||
#columns div.cell:not(.pk-button,.pk-big-button) div.links-list,
|
||||
#columns div.menucell,
|
||||
div.wcsformcell,
|
||||
div.wcsformsofcategorycell,
|
||||
div.wcscurrentdraftscell,
|
||||
div.wcscurrentformscell {
|
||||
.links-list > ul > li {
|
||||
margin: 0.5rem;
|
||||
border: 1px solid $gray-light;
|
||||
border-radius: $border-radius;
|
||||
padding: 0rem 0.8rem;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $widget-focus-box-shadow;
|
||||
}
|
||||
|
||||
&.required-authentication, &.external-link {
|
||||
a{
|
||||
padding-right: 2rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
position: absolute;
|
||||
right: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.required-authentication a::after {
|
||||
background: center / contain no-repeat url('/assets/authentication-required:icon');
|
||||
}
|
||||
|
||||
&.external-link a::after {
|
||||
background: center / contain no-repeat url('/assets/external-link:icon');
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content div.cell {
|
||||
h2:first-child:not(:only-child) {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.foldable > div > h2:first-child {
|
||||
background: $yellow;
|
||||
border: $yellow solid $gray;
|
||||
color: black;
|
||||
display: flex;
|
||||
font-size: $fz-3;
|
||||
align-items: center;
|
||||
height: 4rem;
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
text-transform: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $widget-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.folded > div > h2:first-child {
|
||||
border: 1px solid $gray;
|
||||
background: transparent;
|
||||
|
||||
&::after {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-asset-picture {
|
||||
position: relative;
|
||||
|
||||
> div > h2:first-child {
|
||||
padding-left: 6rem;
|
||||
}
|
||||
|
||||
picture {
|
||||
height: 3rem;
|
||||
left: 1.5rem;
|
||||
position: absolute;
|
||||
top: 0rem;
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content div.searchcell form {
|
||||
padding: 0;
|
||||
input[type="search"] {
|
||||
background: $gray-xlight;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background: $gray-xlight;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.combo-search--button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content div.tracking-code-input-cell {
|
||||
background: right / cover url('/assets/tracking-code-input:background');
|
||||
div.wcs-tracking-code-input {
|
||||
padding: 1rem;
|
||||
div {
|
||||
padding: 0;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
input {
|
||||
flex-grow: 99999;
|
||||
width: 11rem;
|
||||
}
|
||||
button {
|
||||
flex-grow: 1;
|
||||
@extend %black-button;
|
||||
margin-right: 0;
|
||||
min-width: 10rem;
|
||||
|
||||
&, &:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2:first-child {
|
||||
color: black;
|
||||
background: transparent;
|
||||
font-size: $fz-3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/// WCS
|
||||
.arm-form-header {
|
||||
background: $gray-xlight;
|
||||
|
||||
&--content {
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 0 2.5rem 0;
|
||||
}
|
||||
|
||||
&--title {
|
||||
margin: 0;
|
||||
font-weight: 900;
|
||||
max-width: 35rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 48em / $base-font;
|
||||
}
|
||||
|
||||
&--description {
|
||||
@media($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
&--content {
|
||||
padding: 1rem 0 1rem 0;
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: $fz-1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#tracking-code {
|
||||
padding: 1rem;
|
||||
background: right / cover url('/assets/tracking-code:background');
|
||||
border-radius: $border-radius;
|
||||
.tracking-code-part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h3 {
|
||||
background: transparent;
|
||||
color: black;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
a {
|
||||
text-align:center;
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: $border-radius;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
form[action="removedraft"] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.form-discard-draft {
|
||||
@extend %black-button;
|
||||
margin-right: 0;
|
||||
&, &:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
box-shadow: none;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
%black-button {
|
||||
@extend %button;
|
||||
background: black;
|
||||
&:hover {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
%gray-button {
|
||||
background: $gray-xlight;
|
||||
color: black;
|
||||
&:hover {
|
||||
background: $gray-xlight;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-step {
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
&.current {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&--marker-nb {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
&.step-before::after {
|
||||
content: '\f00c';
|
||||
font-family: FontAwesome;
|
||||
margin: 0rem 1rem;
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&--label .required {
|
||||
margin: 0;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio], input[type=checkbox] {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[readonly], select[readonly], textarea[readonly] {
|
||||
border-radius: $widget-border-radius;
|
||||
background: transparent;
|
||||
border: $widget-border;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin form-button-left($symbol) {
|
||||
&::before {
|
||||
content: $symbol;
|
||||
font-family: FontAwesome;
|
||||
font-size: 0.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin form-button-right($symbol) {
|
||||
&::after {
|
||||
content: $symbol;
|
||||
font-family: FontAwesome;
|
||||
font-size: 0.7rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
&--body .buttons.submit {
|
||||
.form-next{
|
||||
@include form-button-right('\f054');
|
||||
}
|
||||
|
||||
.form-previous {
|
||||
@include form-button-left('\f053');
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
@include form-button-left('\f00c');
|
||||
}
|
||||
|
||||
.form-discard, .cancel {
|
||||
@include form-button-left('\f00d');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.form-validation div.page {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.back-home-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
a {
|
||||
@extend %button;
|
||||
&::after {
|
||||
content: '\f0e2';
|
||||
font-family: FontAwesome;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Custom classes
|
||||
///
|
||||
.arm-salmon {
|
||||
color: $salmon;
|
||||
}
|
||||
|
||||
@mixin custom-background-cell($background, $button-color) {
|
||||
border: 1px solid transparent;
|
||||
background: right / cover no-repeat url($background);
|
||||
.pk-button, .pk-big-button {
|
||||
@extend %black-button;
|
||||
&, &:hover {
|
||||
color: $button-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content .cell {
|
||||
&.arm-report {
|
||||
@include custom-background-cell('/assets/report:background', $secondary-color);
|
||||
font-size: 120%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
&.arm-suggest {
|
||||
@include custom-background-cell('/assets/suggest:background', $primary-color)
|
||||
}
|
||||
|
||||
&.arm-register {
|
||||
@include custom-background-cell('/assets/register:background', $primary-color)
|
||||
}
|
||||
}
|
||||
|
||||
@mixin arm-link-icon($name) {
|
||||
& > li.arm-icon-#{$name} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: center / cover no-repeat url(img/icon-#{$name}.png);
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%cell-links-list {
|
||||
@include arm-link-icon('user');
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
#footer-wrapper {
|
||||
padding: 3rem 1.5rem;
|
||||
#footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-top {
|
||||
|
aberriot marked this conversation as resolved
Outdated
aberriot
commented
Ce bouton fonctionne très bien sur mobile, mais je le trouve pénible sur desktop, il se positionne par dessus le contenu chez moi, ce qui est pénible sachant qu'il y a de la place à droite. Dans certains cas, ça masque du contenu ou de sliens utiles (genre la croix pour enlever un fichier d'un formulaire) Ce bouton fonctionne très bien sur mobile, mais je le trouve pénible sur desktop, il se positionne par dessus le contenu chez moi, ce qui est pénible sachant qu'il y a de la place à droite. Dans certains cas, ça masque du contenu ou de sliens utiles (genre la croix pour enlever un fichier d'un formulaire)
csechet
commented
Le client a demandé ça, je propose de les laisser constater que c'est pas pratique ou de proposer autre chose :) Le client a demandé ça, je propose de les laisser constater que c'est pas pratique ou de proposer autre chose :)
aberriot
commented
Ça me va ! Ça me va !
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
|
||||
&--link {
|
||||
border-radius: 13px;
|
||||
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background: $primary-color;
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--link-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arm-footer-bottom {
|
||||
|
||||
background: $gray;
|
||||
color: white;
|
||||
|
||||
|
||||
.link-list-cell {
|
||||
ul {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
height: 155px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
li {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
a {
|
||||
padding: 0.5rem 2rem;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: $fz-small;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom classes
|
||||
.arm-footer-logos {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
div#top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 15px;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
div#header {
|
||||
padding: 0;
|
||||
max-width: calc(#{$width} + 100px);
|
||||
}
|
||||
|
||||
#logo{
|
||||
&.has-logo {
|
||||
flex-basis: #{extract-width($header-logo-size)};
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
|
||||
a::before {
|
||||
background-position: left;
|
||||
margin-top: 15px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav.site-nav {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
div.gru-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.gru-nav-button {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
left: auto;
|
||||
|
||||
&.toggled .icon-bar {
|
||||
background: $nav-button-color;
|
||||
}
|
||||
|
||||
& + ul {
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: static;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
&--link {
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-weight: normal;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
height: $header-height;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--label {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
&--link {
|
||||
padding: 20px 25px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
// Header always visible on scroll
|
||||
div#top {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
height: $header-height;
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
nav.site-nav {
|
||||
position: absolute;
|
||||
top: $header-height;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.gru-nav {
|
||||
height: 0;
|
||||
|
||||
&.toggled {
|
||||
height: calc(100vh - #{$header-height});
|
||||
}
|
||||
|
||||
// right-to-left slide menu
|
||||
> .gru-nav-button + ul {
|
||||
top: $header-height;
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
|
||||
.menu, .submenu {
|
||||
&--item {
|
||||
padding: 0;
|
||||
border-top: 1px solid $gray;
|
||||
|
||||
&, &:hover, &:focus-within, &.selected {
|
||||
> a {
|
||||
border-bottom: none;
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: $font-size;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 3.5rem;
|
||||
|
||||
content: '\f054';
|
||||
font-family: FontAwesome;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
&--link {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#toplinks {
|
||||
|
aberriot marked this conversation as resolved
Outdated
aberriot
commented
Sur mobile, ça manque de padding en dessous des infos du compte, je dirai : Sur mobile, ça manque de padding en dessous des infos du compte, je dirai :
csechet
commented
Fixé Fixé
|
||||
position: static;
|
||||
max-width: 100%;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logged-in, .login {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * {
|
||||
margin: 0 .3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-link, .account-link {
|
||||
&::before {
|
||||
font-family: FontAwesome;
|
||||
content: '';
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: center / contain no-repeat url('/assets/profile:icon');
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,75 +1,94 @@
|
|||
$gray-xlight: #f2f2f2;
|
||||
$gray-light: #cccccc;
|
||||
$gray: #919191;
|
||||
$gray-dark: #333333;
|
||||
$salmon: #ec8771;
|
||||
$yellow: #ecbe54;
|
||||
$yellow-light: #fdf4da;
|
||||
$red: #e95f5c;
|
||||
$red-light: #fae1db;
|
||||
$gray-light: #b3b3b3;
|
||||
$gray-xlight: #e6e6e6;
|
||||
$gray: #919191;
|
||||
$green-dark: #557c40;
|
||||
$green: #9ecf87;
|
||||
$green-light: #e6efdf;
|
||||
$green: #9ecf87;
|
||||
$red-light: #fae1db;
|
||||
$red: #eb8772;
|
||||
$yellow-light: #fdf4da;
|
||||
$yellow: #ebbe55;
|
||||
|
||||
$primary-color: $salmon;
|
||||
$primary-color: $red;
|
||||
$secondary-color: $yellow;
|
||||
|
||||
|
||||
/// Typo
|
||||
$font-family: Lato, sans-serif;
|
||||
$font-family: Rubik, sans-serif;
|
||||
$link-color: $primary-color;
|
||||
$link-decoration: none;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
$base-font: 16;
|
||||
$fz-1: 30em / $base-font;
|
||||
$fz-2: 20em / $base-font;
|
||||
$fz-3: 18em / $base-font;
|
||||
$fz-4: 14em / $base-font;
|
||||
$fz-1: 1rem * 60 / 16;
|
||||
$fz-2: 1rem * 37 / 16;
|
||||
$fz-3: 1rem * 26 / 16;
|
||||
$fz-4: 1rem * 22 / 16;
|
||||
$fz-small: 14em / $base-font;
|
||||
$fz-xsmall: 11em / $base-font;
|
||||
|
||||
$font-size: 100% / ( 15 / $base-font );
|
||||
$font-size: 1rem;
|
||||
|
||||
// General
|
||||
$width: 1280px;
|
||||
$mobile-limit: 800px;
|
||||
$border-radius: 5px;
|
||||
$notification_error_color: $red-light;
|
||||
$notification_warning_color: #e5e5e5;
|
||||
$notification_success_color: $green-light;
|
||||
$notification_info_color: $yellow-light;
|
||||
$notification-icon-size: 2rem;
|
||||
$sidebar-columns-gutter: 50px;
|
||||
$back-top-display: block;
|
||||
$back-top-icon-character: "\f062";
|
||||
$back-top-layout-position: fixed (bottom: 300px);
|
||||
|
||||
$transition: 0.2s;
|
||||
|
||||
// Header
|
||||
$header-logo-size: 250px 60px;
|
||||
$header-logo-size: 187px 47px;
|
||||
$header-height: 100px;
|
||||
$toplinks-style: none;
|
||||
$sidebar-width: 26%;
|
||||
$nav-after-image: false;
|
||||
|
||||
$nav-color: $gray;
|
||||
$nav-submenu-color: $gray;
|
||||
$nav-item-hover-background: transparent;
|
||||
$nav-item-selected-mode: bottom-border;
|
||||
$nav-item-selected-border: $primary-color 3px solid;
|
||||
$nav-item-hover-border: $primary-color 3px solid;
|
||||
$nav-button-background: transparent;
|
||||
$nav-button-color: $primary-color;
|
||||
$nav-border-color: transparent;
|
||||
$nav-mobile-menu-item-hover-color: black;
|
||||
$nav-button-bar-height: 3px;
|
||||
$nav-button-background: transparent;
|
||||
$nav-button-bar-height: 4px;
|
||||
$nav-button-color: $primary-color;
|
||||
$nav-color: $gray;
|
||||
$nav-item-hover-background: transparent;
|
||||
$nav-item-hover-border: $primary-color 4px solid;
|
||||
$nav-item-hover-color: #333333;
|
||||
$nav-item-selected-border: $primary-color 4px solid;
|
||||
$nav-item-selected-color: #333333;
|
||||
$nav-item-selected-mode: bottom-border;
|
||||
$nav-mobile-bottom-bar-item-hover-color: black;
|
||||
$nav-mobile-bottom-bar-item-selected-background: $primary-color;
|
||||
$nav-mobile-bottom-bar-item-selected-color: black;
|
||||
$nav-mobile-menu-background: white;
|
||||
$nav-mobile-menu-item-color: $gray;
|
||||
$nav-mobile-menu-item-hover-color: $gray-dark;
|
||||
$nav-submenu-color: $gray;
|
||||
$responsive-menu: left-to-right;
|
||||
|
||||
// Title
|
||||
$title-padding: 0;
|
||||
$title-color: $primary-color;
|
||||
$title-font-size: $fz-2;
|
||||
$title-color: black;
|
||||
$title-font-size: $fz-4;
|
||||
$title-font-family: 'Viga', sans-serif;
|
||||
$title-transform: uppercase;
|
||||
$title-weight: 700;
|
||||
$title-background: transparent;
|
||||
|
||||
// Carrousel
|
||||
$carrousel-height: 290px;
|
||||
$carrousel-item-mask-color: transparent;
|
||||
$carrousel-text-position: middle middle;
|
||||
$carrousel-navigation-color: $red;
|
||||
$carrousel-navigation-bullet-size: 10px;
|
||||
$carrousel-arrows: none;
|
||||
|
||||
// Cells
|
||||
$cell-border: none;
|
||||
$cell-entry-color: black;
|
||||
|
|
@ -80,6 +99,7 @@ $cell-entry-border: none;
|
|||
|
||||
$widget-focus-outline: none;
|
||||
$widget-focus-box-shadow: 0 0 5px 2px $gray-light;
|
||||
$widget-padding: 0.45rem 1rem;
|
||||
|
||||
// Footer
|
||||
$footer-background: $gray-dark;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,247 @@
|
|||
// WCS page header
|
||||
.arm-form-header {
|
||||
background: $gray-xlight;
|
||||
|
||||
&--content {
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 0 2.5rem 0;
|
||||
}
|
||||
|
||||
&--title {
|
||||
margin: 0;
|
||||
max-width: 35rem;
|
||||
text-transform: uppercase;
|
||||
font-size: $fz-1;
|
||||
}
|
||||
|
||||
&--description {
|
||||
@media($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
&--content {
|
||||
padding: 1rem 0 1rem 0;
|
||||
}
|
||||
|
||||
&--title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tracking code
|
||||
div#tracking-code {
|
||||
padding: 1rem;
|
||||
|
aberriot marked this conversation as resolved
Outdated
aberriot
commented
J'ai l'impression qu'il y a un souci de padding ici, chez moi le padding latéral et vértical ne sont pas identiques : J'ai l'impression qu'il y a un souci de padding ici, chez moi le padding latéral et vértical ne sont pas identiques :
csechet
commented
C'est peut-etre une vieille version de la page que tu as importé : il faut utiliser la disposition "Une colonne" et non "Manuel" pour le slot (en cliquant sur "Options" en haut à droite du slot contenu dans le back office de Combo), pour que les cellules soient alignées. C'est peut-etre une vieille version de la page que tu as importé : il faut utiliser la disposition "Une colonne" et non "Manuel" pour le slot (en cliquant sur "Options" en haut à droite du slot contenu dans le back office de Combo), pour que les cellules soient alignées.
aberriot
commented
En disposition une colonne, j'ai ça : Le souci de padding me semble oujours être là (c'est plus vide sur les côtés du widget de suivi) En disposition une colonne, j'ai ça :
Le souci de padding me semble oujours être là (c'est plus vide sur les côtés du widget de suivi)
csechet
commented
J'ai mis le meme padding pour les deux cellules. Elles sont prévues pour s'afficher cote à cote ratio 1/2 1/2. J'ai mis le meme padding pour les deux cellules. Elles sont prévues pour s'afficher cote à cote ratio 1/2 1/2.
|
||||
background: right / cover url('/assets/tracking-code:background');
|
||||
border-radius: $border-radius;
|
||||
.tracking-code-part {
|
||||
|
aberriot marked this conversation as resolved
Outdated
aberriot
commented
Toujours dans cette cellule, sur mobile à certaines résolutions, les bouton et l'input n'ont pas la même hauteur : (aussi l'impression qu'il y a une marge ou un padding superflu dans le bouton signaler) Toujours dans cette cellule, sur mobile à certaines résolutions, les bouton et l'input n'ont pas la même hauteur :
(aussi l'impression qu'il y a une marge ou un padding superflu dans le bouton signaler)
csechet
commented
Sur mobile, j'ai fait en sorte que le bouton soit systématiquement en dessous du champ, comme demandé sur la maquette. Sur mobile, j'ai fait en sorte que le bouton soit systématiquement en dessous du champ, comme demandé sur la maquette.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h3 {
|
||||
background: transparent;
|
||||
color: black;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
a {
|
||||
text-align:center;
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: $border-radius;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
form[action="removedraft"] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.form-discard-draft {
|
||||
@extend %black-button;
|
||||
margin-right: 0;
|
||||
&, &:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Widgets
|
||||
%button {
|
||||
box-shadow: none;
|
||||
height: 45px;
|
||||
|
aberriot marked this conversation as resolved
Outdated
aberriot
commented
Les boutons m'ont l'air de manquer un petit de padding en haut et en bas par rapport à leur style guide Style guide : Les boutons m'ont l'air de manquer un petit de padding en haut et en bas par rapport à leur style guide
Style guide :
csechet
commented
Je vais regarder, c'est peut etre un souci de taille de police, les boutons doivent faire 35px de haut (de mémoire). Je vais regarder, c'est peut etre un souci de taille de police, les boutons doivent faire 35px de haut (de mémoire).
csechet
commented
J'ai passé la taille des boutons à 45px de haut. Je pense que c'est ce qui est fait sur le guide de style, sauf sur la cellule code de suivi et "signaler", où c'est une hauteur de 35px qui est voulue par le client (parce que pourquoi pas). J'ai passé la taille des boutons à 45px de haut. Je pense que c'est ce qui est fait sur le guide de style, sauf sur la cellule code de suivi et "signaler", où c'est une hauteur de 35px qui est voulue par le client (parce que pourquoi pas).
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
%black-button {
|
||||
@extend %button;
|
||||
background: black;
|
||||
color: white;
|
||||
&:hover {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
%gray-button {
|
||||
background: $gray-xlight;
|
||||
color: black;
|
||||
&:hover {
|
||||
background: $gray-xlight;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&--label .required {
|
||||
margin: 0;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
input, input[type="search"], textarea, select {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
input[type=radio], input[type=checkbox] {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[readonly], select[readonly], textarea[readonly] {
|
||||
border-radius: $widget-border-radius;
|
||||
background: transparent;
|
||||
border: $widget-border;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin form-button-left($symbol) {
|
||||
&::before {
|
||||
content: $symbol;
|
||||
font-family: FontAwesome;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin form-button-right($symbol) {
|
||||
&::after {
|
||||
content: $symbol;
|
||||
font-family: FontAwesome;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
&--body .buttons.submit {
|
||||
@media($max-mobile-viewport) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
||||
button { width: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
.form-next{
|
||||
@include form-button-right('\f054');
|
||||
}
|
||||
|
||||
.form-previous {
|
||||
@include form-button-left('\f053');
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
@include form-button-left('\f00c');
|
||||
}
|
||||
|
||||
.form-discard, .cancel {
|
||||
@include form-button-left('\f00d');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-home-button {
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
|
||||
a {
|
||||
@extend %button;
|
||||
|
||||
width: 100%;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
&::after {
|
||||
content: '\f0e2';
|
||||
font-family: FontAwesome;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Steps
|
||||
.wcs-step {
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
&.current {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&--marker-nb {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
&.step-before::after {
|
||||
content: '\f00c';
|
||||
font-family: FontAwesome;
|
||||
margin: 0rem 1rem;
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.form-validation, div#summary{
|
||||
div.page {
|
||||
border-radius: $border-radius;
|
||||
background: $gray-xlight;
|
||||
padding: 1rem 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
div#summary {
|
||||
&::after {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
display: inline-block;
|
||||
background: $gray-dark;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.timetable-widget {
|
||||
.head {
|
||||
font-size: $fz-small;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,14 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import '../includes/fonts/archivo-black';
|
||||
@import '../includes/fonts/rubik';
|
||||
@import '../includes/fonts/viga';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
@import 'authentic';
|
||||
@import 'combo';
|
||||
@import 'common';
|
||||
@import 'footer';
|
||||
@import 'header';
|
||||
@import 'wcs';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
{% block content-pre %}
|
||||
<header class="arm-page-header">
|
||||
<div class="arm-page-header--content">{% placeholder "page-header" name="En-tête de la page"%}</div>
|
||||
<div class="arm-page-header--content">{% placeholder "page-header" name="En-tête de la page" acquired=True optional=True %}</div>
|
||||
</header>
|
||||
{%skeleton_extra_placeholder after-header %}
|
||||
{% end_skeleton_extra_placeholder %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{% extends "combo/search-cell.html" %}
|
||||
|
||||
{% block search-form-pre %}
|
||||
<div class="combo-search--hint">
|
||||
Lorem ipsum dolor sit amet. Cum labore minima ad earum ducimus et ipsum sapiente et rerum vero est sequi similique. Hic quis sint ut nostrum dignissimos est exercitationem voluptate eum accusantium nemo non esse animi quo assumenda voluptatem aut nostrum quos.
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{% extends "combo/wcs/tracking_code_input.html" %}
|
||||
|
||||
{% block title %}
|
||||
<h2>Votre code de suivi :</h2>
|
||||
{% endblock %}
|
||||
|
||||
{% block intro-text %}
|
||||
<p>
|
||||
Un code de suivi est associé à chaque demande afin de faciliter vos
|
||||
échanges avec les services de la Mairie. Pour retrouver votre demande via le code de suivi, indiquez-le
|
||||
ci-dessous :
|
||||
</p>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
On a un fond blanc pour le champ de recherche en barre latérale, alors qu'il est grisé dans le style guide :
Fixé, j'ai aussi retiré la box-shadow, aligné correctement l'icone et retiré la bordure.