1365 lines
25 KiB
SCSS
1365 lines
25 KiB
SCSS
@import '../includes/fonts/roboto';
|
|
@import '../includes/fonts/josefinsans';
|
|
|
|
$categories: administration, dechets, eau-potable, eaux-usees, economie, logement, rh, solidarite, urbanisme, voirie, autres-questions, deplacements, environnement, participation, proxi-communes, mobilites;
|
|
|
|
@mixin hover-animation($background-color: $primary-color, $background-image: none, $hover-background-image: none, $text-color: #000000, $hover-text-color: $primary-color) {
|
|
font-family: Roboto !important;
|
|
font-size: 1.1rem;
|
|
font-weight: normal;
|
|
background-color: $background-color;
|
|
color: $text-color;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
padding-right: 1rem;
|
|
@include vendor-prefix(transform, translateZ(0px));
|
|
@if $background-image != none {
|
|
background-image: url($background-image);
|
|
background-repeat: no-repeat;
|
|
background-position: 0.5rem center;
|
|
background-size: 1.8rem;
|
|
}
|
|
&::before {
|
|
height: auto;
|
|
width: auto;
|
|
background: #000000;
|
|
bottom: -1px;
|
|
content: " ";
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
@include vendor-prefix(transform, scaleX(0));
|
|
@include vendor-prefix(transform-origin, 0 50%);
|
|
transition: transform 0.3s ease-out;
|
|
@include vendor-prefix(backface-visibility, hidden);
|
|
z-index: -1;
|
|
@if $hover-background-image != none {
|
|
background-image: url($hover-background-image);
|
|
background-repeat: no-repeat;
|
|
background-position: 0.5rem center;
|
|
background-size: 1.8rem;
|
|
}
|
|
}
|
|
&:hover {
|
|
color: $hover-text-color;
|
|
&::before {
|
|
@include vendor-prefix(transform, scaleX(1));
|
|
}
|
|
}
|
|
}
|
|
|
|
%gam-cell-button {
|
|
font-weight: bold;
|
|
background-color: $gam-button-background-color;
|
|
color: #ffffff;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
%gam-link {
|
|
background: $primary-color;
|
|
padding: 0.5em 10px 0.5em 10px;
|
|
text-decoration: none;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
%item-with-icon {
|
|
padding: 10px 5px 10px 55px;
|
|
background-repeat: no-repeat;
|
|
background-size: auto 27px;
|
|
background-position: 10px center;
|
|
}
|
|
|
|
%custom-radio-checkbox-widget {
|
|
input + span {
|
|
&::before {
|
|
height: 0.86rem;
|
|
width: 0.86rem;
|
|
top: 0.1rem;
|
|
}
|
|
&::after {
|
|
height: calc(0.86rem - 4px);
|
|
width: calc(0.86rem - 4px);
|
|
top: calc(0.1rem + 2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#columns > div {
|
|
&.column {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
&.column:last-child {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
div#main-content-wrapper {
|
|
z-index: 1;
|
|
margin-bottom: 5ex;
|
|
div.textcell,
|
|
div.comment-field,
|
|
div.drafts-recall {
|
|
ol, ul {
|
|
list-style-type: initial;
|
|
margin: 1em auto;
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
div.cell {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
/* restore site's search form styles */
|
|
form#champRecherche input {
|
|
background-color: #ffffff;
|
|
padding: 0;
|
|
transition: none;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* hide site's "go to top" button */
|
|
|
|
img#hautDePage {
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#toplinks {
|
|
display: none;
|
|
z-index: 10;
|
|
border: 0;
|
|
padding-top: 0;
|
|
padding-left: 1em;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
}
|
|
a {
|
|
display: none;
|
|
&.logout {
|
|
display: block;
|
|
text-decoration: none;
|
|
&::after {
|
|
margin-left: 5px;
|
|
content: '\f08b'; /* fa-sign-out */
|
|
font-family: FontAwesome;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.green-button, .lightblue-button {
|
|
padding: 10px 25px;
|
|
color: #000000;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
}
|
|
&:hover {
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
|
|
.green-button {
|
|
background-color: $ternary-color;
|
|
&:hover {
|
|
color: $ternary-color;
|
|
}
|
|
}
|
|
|
|
.lightblue-button {
|
|
background-color: $secondary-color;
|
|
&:hover {
|
|
color: $secondary-color;
|
|
}
|
|
}
|
|
|
|
#content {
|
|
div.topbanner-wrapper, div.configjsoncell.user {
|
|
margin-bottom: 20px;
|
|
margin-right: 0;
|
|
}
|
|
flex-direction: column;
|
|
div.bandeau {
|
|
background-repeat: no-repeat;
|
|
padding: 80px 0;
|
|
h2 {
|
|
font-size: 250%;
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 10px 0;
|
|
h2 {
|
|
font-size: 180%;
|
|
}
|
|
}
|
|
}
|
|
div.bandeau div {
|
|
box-sizing: content-box;
|
|
background: #fff;
|
|
width: 75%;
|
|
margin: 0 auto;
|
|
padding: 1ex 1em;
|
|
h2::before {
|
|
display: none;
|
|
}
|
|
}
|
|
div.content-wrapper div.columns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
@media screen and ($max-mobile-viewport) {
|
|
flex-direction: column;
|
|
}
|
|
div.right {
|
|
width: 30%;
|
|
div.cell {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
div.left {
|
|
width: 65%;
|
|
div.categories {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
div.right, div.left {
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
div.left-header {
|
|
margin: 0 10px;
|
|
background: #f1f1f1;
|
|
> div {
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
div.wcsformsofcategorycell {
|
|
flex: 0 0 calc(50% - 0.5rem);
|
|
margin: 0.3ex 0 1.35ex 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
flex: 0 0 100%;
|
|
}
|
|
h2:first-child {
|
|
margin-bottom: 0;
|
|
}
|
|
@each $category in $categories {
|
|
&.#{$category} {
|
|
&.foldable {
|
|
> div h2:first-child {
|
|
padding-left: 3rem;
|
|
@include hover-animation($primary-color, "img/#{$category}.svg", "img/#{$category}-hover.svg", $primary-color);
|
|
&::before {
|
|
@include vendor-prefix(transform, scaleX(1));
|
|
}
|
|
}
|
|
&.folded {
|
|
> div h2:first-child {
|
|
@include hover-animation($primary-color, "img/#{$category}.svg", "img/#{$category}-hover.svg", #000000);
|
|
&::before {
|
|
@include vendor-prefix(transform, scaleX(0));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.foldable {
|
|
> div {
|
|
h2:first-child {
|
|
padding-left: 1rem;
|
|
@include hover-animation($primary-color, none, none, $primary-color);
|
|
&::before {
|
|
@include vendor-prefix(transform, scaleX(1));
|
|
}
|
|
}
|
|
> div {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
}
|
|
&.folded {
|
|
> div h2:first-child {
|
|
@include hover-animation($primary-color, none, none, #000000);
|
|
&::before {
|
|
@include vendor-prefix(transform, scaleX(0));
|
|
}
|
|
&::after {
|
|
content: '\f105'; /* chevron-right */
|
|
}
|
|
}
|
|
}
|
|
ul {
|
|
position: absolute;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: relative;
|
|
}
|
|
z-index: 10;
|
|
background: white;
|
|
width: 100%;
|
|
box-shadow: 0px 0px 5px #888888;
|
|
left: 0;
|
|
top: 0;
|
|
li a {
|
|
text-decoration: none;
|
|
border-color: #edece7;
|
|
padding-left: 1.5em;
|
|
&:hover {
|
|
background: #f2f2f0;
|
|
}
|
|
&::after {
|
|
content: '\f105'; /* fa-angle-right */
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
left: 0.7em;
|
|
top: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.wcsformcell.proxi {
|
|
@media screen and ($min-desktop-viewport) {
|
|
width: calc(50% - 1.35em);
|
|
float: left;
|
|
}
|
|
a {
|
|
padding-left: 1rem;
|
|
text-decoration: none;
|
|
display: block;
|
|
@include hover-animation($ternary-color, none, none, #000000, $ternary-color);
|
|
&::after {
|
|
content: '\f105'; /* fa-angle-right */
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
right: 0.7em;
|
|
top: 1rem;
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
}
|
|
div.trackingcodeinputcell {
|
|
box-shadow: 0px 0px 10px #888888;
|
|
padding: 0.5ex;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-color: #f5f5f5;
|
|
}
|
|
h2 {
|
|
margin-left: 0.5em;
|
|
padding-bottom: 0;
|
|
&::before {
|
|
content: '';
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: transparent;
|
|
background-image: url("img/suivi.png");
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
top: -40px;
|
|
background-size: contain;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.textcell.info {
|
|
padding: 1.5em 1em 10px 1em;
|
|
border: 4px solid $primary-color;
|
|
position: relative;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-top: 30px;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
width: 50px;
|
|
height: 50px;
|
|
background-image: url("img/info.svg");
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
top: -30px;
|
|
background-size: contain;
|
|
position: absolute;
|
|
}
|
|
}
|
|
div.cell + div.textcell.info {
|
|
margin-top: 3em;
|
|
}
|
|
div.cell p {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
div.user-menu {
|
|
width: 30%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
div.menucell {
|
|
margin: 0;
|
|
min-width: 300px;
|
|
a {
|
|
background: $primary-color;
|
|
border: 1px solid #ffffff;
|
|
text-decoration: none;
|
|
&::after {
|
|
content: '\f105'; /* fa-angle-right */
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
right: 0.7em;
|
|
top: 1rem;
|
|
font-size: 120%;
|
|
}
|
|
&:hover {
|
|
background: #000000;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
li.menu-logout {
|
|
a::after {
|
|
content: '\f08b'; /* fa-sign-out */
|
|
}
|
|
}
|
|
li.selected a {
|
|
background: #000000;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
span.badge {
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
background: $nav-mobile-bottom-bar-badge-background;
|
|
color: $nav-mobile-bottom-bar-badge-color;
|
|
width: 23px;
|
|
height: 23px;
|
|
line-height: 23px;
|
|
text-align: center;
|
|
border-radius: 100%;
|
|
font-size: 1em;
|
|
margin-left: 1em;
|
|
&::before, &::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
span {
|
|
font-weight: normal;
|
|
&.required {
|
|
color: #f00;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gru-content div.notificationscell {
|
|
h2:first-child {
|
|
text-transform: uppercase;
|
|
}
|
|
div.notifications {
|
|
padding: 0;
|
|
column-count: 2;
|
|
-moz-column-count: 2;
|
|
-webkit-column-count: 2;
|
|
column-gap: 1.35em;
|
|
@media screen and ($max-mobile-viewport) {
|
|
column-count: 1;
|
|
-moz-column-count: 1;
|
|
-webkit-column-count: 1;
|
|
}
|
|
}
|
|
div.notification {
|
|
background-color: #f1f1f1;
|
|
margin: 10px 0 2ex 0;
|
|
padding: 0;
|
|
page-break-inside: avoid;
|
|
-webkit-column-break-inside: avoid;
|
|
break-inside: avoid;
|
|
break-inside: avoid-column;
|
|
display: inline-block;
|
|
width: 100%;
|
|
div {
|
|
position: relative;
|
|
}
|
|
div.summary {
|
|
text-transform: uppercase;
|
|
background-color: #e4e4e4;
|
|
font-family: Roboto, sans-serif;
|
|
font-weight: bold;
|
|
@extend %item-with-icon;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
a.ack {
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -10px;
|
|
background-image: url('img/notification-ack.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
div.description, div.date {
|
|
padding: 10px 10px 5px 10px;
|
|
}
|
|
div.date {
|
|
padding-top: 0;
|
|
font-size: 1em;
|
|
color: #969696;
|
|
margin-bottom: 5px;
|
|
.label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pwa-navigation {
|
|
left: 0;
|
|
div > ul li a {
|
|
padding-top: 40px;
|
|
background-size: auto 30px;
|
|
span span.badge {
|
|
top: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.trackingcodeinputcell {
|
|
h2:first-child {
|
|
font-family: Roboto !important;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
div.wcs-tracking-code-input {
|
|
padding-top: 10px;
|
|
padding-bottom: 5px;
|
|
}
|
|
input {
|
|
background: #f1f1f1;
|
|
width: 10em;
|
|
}
|
|
button {
|
|
background: #2a2a2a;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
div.linkcell.gam-button {
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
background: $primary-color;
|
|
margin: 0.5ex 0;
|
|
position: relative;
|
|
display: inline-block;
|
|
a {
|
|
@extend %gam-link;
|
|
&:hover {
|
|
background: #000000;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#nav {
|
|
width: 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: #ffffff;
|
|
transition: width 0.3s ease;
|
|
> ul {
|
|
background: $primary-color;
|
|
display: none;
|
|
> li {
|
|
display: block;
|
|
line-height: 3em;
|
|
padding: 0 1em;
|
|
&::after {
|
|
content: '';
|
|
border-bottom: 1px solid #ffffff;
|
|
display: block;
|
|
}
|
|
&.selected {
|
|
background: #000000;
|
|
a {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
&.selected, &:last-child {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
a {
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
position: relateive;
|
|
&::after {
|
|
content: '\f054'; /* chevron-right */
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
right: 15px;
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.toggled {
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 50%;
|
|
> ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
a#publik-mobile-menu {
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-color: #2a2a2a;
|
|
background-image: url('img/mobile-menu.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 45px auto;
|
|
width: 50px;
|
|
height: 80px;
|
|
display: table-cell;
|
|
}
|
|
}
|
|
|
|
a.gam-button {
|
|
@extend %gam-link;
|
|
}
|
|
|
|
div.linkcell.lien-accueil {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
div {
|
|
width: auto;
|
|
}
|
|
li {
|
|
width: auto;
|
|
}
|
|
a {
|
|
@extend %gam-link;
|
|
padding-left: 2em;
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
content: '';
|
|
display: block;
|
|
margin: 0 10px;
|
|
height: 1em;
|
|
width: 2em;
|
|
background: url("img/accueil.svg") no-repeat;
|
|
background-position: center left;
|
|
}
|
|
&:hover {
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.configjsoncell.user {
|
|
box-shadow: 0px 0px 5px #888888;
|
|
min-width: 250px;
|
|
> div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
div.user-profile {
|
|
font-weight: bold;
|
|
font-size: 125%;
|
|
display: inline-block;
|
|
padding: 45px 0px 45px 150px;
|
|
position: relative;
|
|
&.no-avatar {
|
|
background-image: url('img/user-avatar.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: 125px auto;
|
|
}
|
|
img {
|
|
width: 130px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
div.user-profile {
|
|
margin: 10px;
|
|
}
|
|
div.user-infos {
|
|
flex-grow: 2;
|
|
}
|
|
a.user-dashboard-item {
|
|
background: $primary-color;
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
text-decoration: none;
|
|
padding: 10px 30px 10px 30px;
|
|
position: relative;
|
|
margin: 0 15px 0 20px;
|
|
display: inline-block;
|
|
min-width: 5em;
|
|
div.dashboard-item-label, div.dashboard-item-value {
|
|
text-align: center;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 30px 10px 10px 10px;
|
|
margin: 10px 0;
|
|
}
|
|
@each $item in (drafts, demands, payments) {
|
|
&.#{$item}::before {
|
|
content: '';
|
|
left: -23px;
|
|
width: 46px;
|
|
height: 46px;
|
|
position: absolute;
|
|
background-image: url('img/user-#{$item}.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
@media screen and ($max-mobile-viewport) {
|
|
left: calc(50% - 23px);
|
|
top: -23px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.user-dashboard {
|
|
margin: 2ex 1ex 0 150px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 3ex 1ex 0 1ex;
|
|
justify-content: center;
|
|
}
|
|
@media screen and (max-width: $very-small-screen) {
|
|
margin: 3ex 0 0 0;
|
|
}
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
div#tracking-code {
|
|
background: #000000;
|
|
padding: 1.5ex 1.75ex 1ex 1.75ex;
|
|
margin-bottom: 3em;
|
|
color: $primary-color;
|
|
font-family: 'Josefin Sans', sans-serif;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-bottom: 1em;
|
|
}
|
|
h3, a {
|
|
color: $primary-color;
|
|
font-size: 1.2em;
|
|
padding: 0;
|
|
}
|
|
h3 {
|
|
font-size: 1.2em;
|
|
text-transform: uppercase;
|
|
&::after {
|
|
content: ':';
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
div.text-tracking-code-short-text {
|
|
font-size: 0.75em;
|
|
padding: 0;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
form button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
div#rub_service {
|
|
h2 {
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 120%;
|
|
}
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
form {;
|
|
border: 1px solid #f1f1f1;
|
|
h3 {
|
|
text-transform: uppercase;
|
|
padding: 0.75rem 0.5rem 0.5rem 0.5rem;
|
|
background: $primary-color;
|
|
margin: -0.5rem -0.5rem 0.5rem -0.5rem;
|
|
border: 0;
|
|
clear: both;
|
|
}
|
|
div.page {
|
|
padding: 0;
|
|
}
|
|
button {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
div#evolution-log, div#summary {
|
|
h2 {
|
|
&::before {
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
div#evolution-log {
|
|
margin-top: 1em;
|
|
.evolution-metadata, div.msg {
|
|
background: #f1f1ef;
|
|
display: block;
|
|
}
|
|
div.msg {
|
|
margin-right: 0;
|
|
}
|
|
ul#evolutions {
|
|
span.item {
|
|
background: $ternary-color !important;
|
|
border: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
&::before {
|
|
content: '\f00c';
|
|
font-family: FontAwesome;
|
|
background: $ternary-color;
|
|
color: #ffffff;
|
|
top: 8px;
|
|
left: 8px;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
}
|
|
li::after {
|
|
background: #f1f1ef;
|
|
transform: rotate(45deg);
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 32px;
|
|
left: 55px;
|
|
}
|
|
&::after {
|
|
border: 1px dashed #bbb;
|
|
background: transparent;
|
|
}
|
|
}
|
|
.evolution-metadata {
|
|
padding-top: 20px;
|
|
padding-bottom: 1ex;
|
|
span.status::after {
|
|
content: "|";
|
|
padding: 0 0 0 0.5em;
|
|
}
|
|
span.time {
|
|
display: inline;
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
div#receipt-intro {
|
|
margin: 0;
|
|
p#tracking-code a {
|
|
display: block;
|
|
background: #f1f1ef;
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
padding: 1ex;
|
|
margin: 0;
|
|
}
|
|
}
|
|
div#summary {
|
|
div.page {
|
|
h3 {
|
|
display: none;
|
|
}
|
|
}
|
|
a#disclose-dataview {
|
|
background: #f1f1ef;
|
|
padding: 2ex;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
margin: 0;
|
|
&::after {
|
|
content: '\f107';
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
right: 4em;
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
div.dataview .value {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
background-color: #e4e4e4;
|
|
}
|
|
|
|
#sidebar div.user-menu div.cell {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.gru-content {
|
|
div.cell, div.block {
|
|
h2:first-child {
|
|
margin-bottom: 2ex;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gru-content div.cell {
|
|
&.wcscurrentdraftscell, &.wcscurrentformscell, &.lingobasketcell {
|
|
h2:first-child {
|
|
background-color: $secondary-color;
|
|
font-family: Roboto, sans-serif !important;
|
|
padding: 0.5ex 0.5ex 0.5ex 1ex;
|
|
font-size: 135%;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.lingobasketcell {
|
|
background-color: $gam-user-cell-background-color;
|
|
h2:first-child {
|
|
background-color: $notifications-background-color;
|
|
}
|
|
button {
|
|
@extend %gam-cell-button;
|
|
}
|
|
}
|
|
&.wcscurrentdraftscell, &.wcscurrentformscell {
|
|
ul {
|
|
column-count: 3;
|
|
-moz-column-count: 3;
|
|
-webkit-column-count: 3;
|
|
column-gap: 1.35em;
|
|
padding: 1ex 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
column-count: 1;
|
|
-moz-column-count: 1;
|
|
-webkit-column-count: 1;
|
|
}
|
|
li {
|
|
page-break-inside: avoid;
|
|
-webkit-column-break-inside: avoid;
|
|
break-inside: avoid;
|
|
break-inside: avoid-column;
|
|
display: inline-block;
|
|
width: 100%;
|
|
background-color: $gam-user-cell-background-color;
|
|
margin-bottom: 2ex;
|
|
div.form-name {
|
|
font-family: Roboto, sans-serif;
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
background-color: $ternary-color;
|
|
@extend %item-with-icon;
|
|
}
|
|
div.form-details {
|
|
font-size: 95%;
|
|
padding: 2ex 1em;
|
|
color: #b0b0b0;
|
|
span.label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
div.form-status {
|
|
box-sizing: content-box;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
padding-left: 25px;
|
|
position: relative;
|
|
margin-bottom: 2ex;
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
content: '';
|
|
background-image: url('img/arrow-right.svg?toto=test');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
border-radius: 100%;
|
|
width: 17px;
|
|
height: 17px;
|
|
padding-left: 7px;
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
div.form-url {
|
|
text-align: center;
|
|
margin: 15px 10px 10px 10px;
|
|
a {
|
|
@extend %gam-cell-button;
|
|
background-color: $ternary-color;
|
|
text-decoration: none;
|
|
color: #000000;
|
|
&:hover {
|
|
color: $ternary-color;
|
|
background: #000000;
|
|
transition: all ease 0.3s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.wcscurrentdraftscell ul li {
|
|
div.form-name, div.form-url a {
|
|
background-color: $secondary-color;
|
|
}
|
|
div.form-url a:hover {
|
|
color: $secondary-color;
|
|
}
|
|
}
|
|
&.wcscurrentformscell {
|
|
h2:first-child {
|
|
background-color: $ternary-color;
|
|
}
|
|
&.demandes-terminees {
|
|
h2:first-child, ul li div.form-name, div.form-url a {
|
|
background-color: #b0b0b0;
|
|
}
|
|
div.form-url a:hover {
|
|
color: #b0b0b0;
|
|
}
|
|
div.form-status::before {
|
|
content: '';
|
|
background-image: url('img/check.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.form-validation div.page {
|
|
background: #ffffff;
|
|
}
|
|
|
|
div.buttons {
|
|
button {
|
|
padding: 15px 25px;
|
|
}
|
|
div.submit-button {
|
|
float: right;
|
|
@media screen and (max-width: $very-small-screen) {
|
|
float: none;
|
|
}
|
|
button {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
div.cancel-button button {
|
|
background-color: #676767;
|
|
color: #ffffff;
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
/* wcs progress bar styles */
|
|
.wcs-steps.steps-1 { display: none; }
|
|
.wcs-steps--list {
|
|
@media ($max-mobile-viewport) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.wcs-step {
|
|
font-size: 1.2em;
|
|
&--label {
|
|
@include desktop-vertical-steps() {
|
|
font-size: 0.65em;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
padding-left: 0;
|
|
text-align: center;
|
|
top: calc(100% - #{$wcs-steps-spacing});
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.comment-field {
|
|
&.infobulle {
|
|
border: 2px solid $primary-color;
|
|
margin: 2ex auto 5ex 1.5em;
|
|
padding: 1ex 1em 1ex 3em;
|
|
position: relative;
|
|
font-size: 120%;
|
|
&::before {
|
|
content: '';
|
|
width: 50px;
|
|
height: 50px;
|
|
background-image: url('img/infobulle.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
left: -25px;
|
|
top: calc(50% - 25px);
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 3ex 1em 1ex 1em;
|
|
margin: 2ex auto;
|
|
&::before {
|
|
left: 1em;
|
|
top: -25px;
|
|
}
|
|
}
|
|
}
|
|
&.champs-requis {
|
|
color: #f00;
|
|
}
|
|
}
|
|
|
|
div.back-home-button {
|
|
display: none;
|
|
}
|
|
|
|
/* registration */
|
|
body.page-register {
|
|
div#sidebar {
|
|
margin: 4ex 0;
|
|
}
|
|
div#frontend-registration-email, div#frontend-registration-fc {
|
|
display: inline-block;
|
|
width: 48%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
#frontend-registration-email {
|
|
padding: 1ex 2ex 0 0;
|
|
text-transform: uppercase;
|
|
vertical-align: top;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 1ex 0;
|
|
}
|
|
p, form {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
button {
|
|
border: 2px solid #000000;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
&::after {
|
|
content: '\f061';
|
|
font-family: FontAwesome;
|
|
width: 2em;
|
|
font-size: 0.9em;
|
|
margin-left: 0.75em;
|
|
}
|
|
}
|
|
}
|
|
#frontend-registration-fc {
|
|
h2 {
|
|
display: none;
|
|
}
|
|
margin-left: 3em;
|
|
}
|
|
div#fc-button-wrapper {
|
|
padding: 8ex 0 20px 0px;
|
|
}
|
|
div#columns div.a2-block {
|
|
margin: 0 0 3em 0;
|
|
}
|
|
}
|
|
|
|
div#login-page {
|
|
div#fc-button-wrapper {
|
|
padding-top: 15ex;
|
|
}
|
|
&.methods2 > div.block-password > div {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
div#login-page, div.a2-block {
|
|
div#fc-button-wrapper {
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* profile styles */
|
|
|
|
.gru-content {
|
|
div.a2-block, div#a2-profile, div#login-page, div#account-management-fc {
|
|
margin: 0;
|
|
h2 {
|
|
text-transform: uppercase;
|
|
}
|
|
button {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
div#account-management-fc {
|
|
margin-top: 2ex;
|
|
}
|
|
}
|
|
|
|
div#login-page {
|
|
a {
|
|
color: #f95731;
|
|
}
|
|
form {
|
|
input[type="text"], input[type="password"] {
|
|
width: 100%;
|
|
padding: 1ex;
|
|
}
|
|
button{
|
|
margin-right: 0;
|
|
margin-bottom: 1ex;
|
|
&.cancel-button {
|
|
margin-right: 2ex;
|
|
background: $gam-button-background-color;
|
|
}
|
|
}
|
|
div.buttons {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#account-management {
|
|
margin: 0;
|
|
h2 {
|
|
display: none;
|
|
}
|
|
ul > li {
|
|
margin: 0.5ex 0;
|
|
&:nth-child(2n+1) {
|
|
background-color: $gam-user-cell-background-color;
|
|
}
|
|
> a {
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
padding-left: 2rem;
|
|
&::after {
|
|
content: '\f105';
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
left: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#profile {
|
|
padding: 0 0 1rem 0;
|
|
span.label {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
@include vendor-prefix(column-count, 2);
|
|
@media screen and ($max-mobile-viewport) {
|
|
@include vendor-prefix(column-count, 1);
|
|
}
|
|
div.field {
|
|
page-break-inside: avoid;
|
|
-webkit-column-break-inside: avoid;
|
|
break-inside: avoid;
|
|
break-inside: avoid-column;
|
|
}
|
|
dd {
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
|
|
div.column.profile, div.column.account-management {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
|
|
div.account-management div#fc-button {
|
|
display: block;
|
|
}
|
|
|
|
/* porte-doc styles */
|
|
|
|
div.fileinfo a.remove:before, div#user-files a.icon-remove::before {
|
|
color: #000;
|
|
}
|
|
|
|
body.page-porte-doc {
|
|
#content div.cell {
|
|
h2 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
div#user-files {
|
|
padding: 1rem 0;
|
|
th a, button, th {
|
|
text-transform: uppercase;
|
|
}
|
|
button {
|
|
border: 2px solid #000;
|
|
float: left;
|
|
}
|
|
tbody {
|
|
tr:nth-child(2n+1) {
|
|
background-color: #f1f1ef;
|
|
}
|
|
tr:nth-child(2n) {
|
|
background-color: #e5e5e5;
|
|
}
|
|
}
|
|
td {
|
|
padding: 0.5ex;
|
|
&.size {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|