1232 lines
23 KiB
SCSS
1232 lines
23 KiB
SCSS
$categories: administration, dechets, eau_potable, eaux_usees, economie, logement, rh, solidarite, urbanisme, voirie, autres-questions, deplacements, environnement, participation, proxi-communes;
|
|
|
|
@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;
|
|
box-sizing: border-box;
|
|
@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%);
|
|
@include vendor-prefix(transition-duration, 0.3s);
|
|
@include vendor-prefix(transition-property, transform);
|
|
@include vendor-prefix(transition-timing-function, 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;
|
|
}
|
|
|
|
%item-with-icon {
|
|
padding: 10px 5px 10px 55px;
|
|
background-repeat: no-repeat;
|
|
background-size: auto 27px;
|
|
background-position: 10px center;
|
|
}
|
|
|
|
/* restore site's search form styles */
|
|
form#champRecherche input {
|
|
background-color: #ffffff;
|
|
padding: 0;
|
|
transition: none;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.green-button, .lightblue-button {
|
|
padding: 10px 25px;
|
|
color: #000000;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
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;
|
|
}
|
|
@include vendor-prefix(flex-direction, column);
|
|
div.bandeau {
|
|
background-repeat: no-repeat;
|
|
padding-top: 80px;
|
|
min-height: 400px;
|
|
h2 {
|
|
font-size: 250%;
|
|
font-weight: normal;
|
|
}
|
|
@media screen and (max-width: $mobile-limit) {
|
|
padding-top: 10px;
|
|
height: 270px;
|
|
h2 {
|
|
font-size: 180%;
|
|
}
|
|
}
|
|
}
|
|
div.bandeau div {
|
|
background: #fff;
|
|
width: 75%;
|
|
margin: 0 auto;
|
|
padding: 1ex 1em;
|
|
h2::before {
|
|
display: none;
|
|
}
|
|
}
|
|
div.content-wrapper div.columns {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
@include vendor-prefix(flex-direction, column);
|
|
}
|
|
div.right {
|
|
width: 30%;
|
|
}
|
|
div.left {
|
|
width: 65%;
|
|
div.categories {
|
|
column-count: 2;
|
|
-moz-column-count: 2;
|
|
-webkit-column-count: 2;
|
|
column-gap: 1.35em;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
column-count: 1;
|
|
-moz-column-count: 1;
|
|
-webkit-column-count: 1;
|
|
}
|
|
}
|
|
}
|
|
div.right, div.left {
|
|
@media screen and (max-width: $mobile-limit) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
div.wcsformsofcategorycell {
|
|
page-break-inside: avoid;
|
|
-webkit-column-break-inside: avoid;
|
|
break-inside: avoid;
|
|
break-inside: avoid-column;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin: 0 0 1.5ex 0;
|
|
@each $category in $categories {
|
|
&.#{$category} {
|
|
&.foldable {
|
|
> div h2:first-child {
|
|
padding-left: 3rem;
|
|
@include hover-animation($primary-color, "img/#{$category}.png", "img/#{$category}-hover.png", $primary-color);
|
|
&::before {
|
|
@include vendor-prefix(transform, scaleX(1));
|
|
}
|
|
}
|
|
&.folded {
|
|
> div h2:first-child {
|
|
@include hover-animation($primary-color, "img/#{$category}.png", "img/#{$category}-hover.png", #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-width: $mobile-limit) {
|
|
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 {
|
|
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-width: $mobile-limit) {
|
|
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: -30px;
|
|
background-size: contain;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.textcell.info {
|
|
padding: 1em 1em 0 1em;
|
|
border: 4px solid $primary-color;
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
width: 50px;
|
|
height: 50px;
|
|
background-image: url("img/info.png");
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
top: -30px;
|
|
background-size: contain;
|
|
position: absolute;
|
|
}
|
|
}
|
|
div.cell + div.textcell.info {
|
|
margin-top: 3em;
|
|
}
|
|
}
|
|
|
|
div.user-menu {
|
|
width: 30%;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
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: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
border-radius: 100%;
|
|
&::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 {
|
|
column-count: 2;
|
|
-moz-column-count: 2;
|
|
-webkit-column-count: 2;
|
|
column-gap: 1.35em;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
column-count: 1;
|
|
-moz-column-count: 1;
|
|
-webkit-column-count: 1;
|
|
}
|
|
}
|
|
div.notification {
|
|
background-color: #f1f1f1;
|
|
margin: 0 0 2ex 0;
|
|
padding: 0;
|
|
page-break-inside: avoid;
|
|
-webkit-column-break-inside: avoid;
|
|
break-inside: avoid;
|
|
break-inside: avoid-column;
|
|
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 {
|
|
padding: 10px 10px 5px 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-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;
|
|
border: 2px solid #000;
|
|
margin: 0.5ex 0;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
a {
|
|
padding: 0.75ex 2ex 0.75ex 2ex;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
div#nav {
|
|
width: 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: #ffffff;
|
|
@include vendor-prefix('transition', 'width 0.3s ease');
|
|
> ul {
|
|
background: $primary-color;
|
|
display: none;
|
|
> li {
|
|
display: block;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.open {
|
|
width: 50%;
|
|
> ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
a#publik-mobile-menu {
|
|
@media screen and (max-width: $mobile-limit) {
|
|
background-color: $primary-color;
|
|
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 {
|
|
padding: 0.75ex 2ex 0.75ex 2ex;
|
|
text-decoration: none;
|
|
background: $primary-color;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
div.linkcell.lien-accueil {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
div {
|
|
width: auto;
|
|
}
|
|
li {
|
|
width: auto;
|
|
}
|
|
a {
|
|
background: $primary-color;
|
|
border: 2px solid #000000;
|
|
text-decoration: none;
|
|
display: block;
|
|
padding: 0.5em 10px 0.5em 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 {
|
|
margin: 0;
|
|
box-shadow: 0px 0px 5px #888888;
|
|
min-width: 250px;
|
|
> div {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
@include vendor-prefix(justify-content, space-between);
|
|
}
|
|
div.user-profile {
|
|
font-weight: bold;
|
|
font-size: 125%;
|
|
padding: 45px 0px 45px 150px;
|
|
background-image: url('img/user-avatar.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: 125px auto;
|
|
content: '';
|
|
display: inline-block;
|
|
left: 10px;
|
|
}
|
|
div.user-profile {
|
|
margin: 10px;
|
|
}
|
|
div.user-infos {
|
|
@include vendor-prefix(flex-grow, 2);
|
|
}
|
|
a.user-dashboard-item {
|
|
background: $primary-color;
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
text-decoration: none;
|
|
padding: 10px 30px 10px 55px;
|
|
position: relative;
|
|
margin: 0 15px 0 20px;
|
|
display: inline-block;
|
|
div.dashboard-item-label, div.dashboard-item-value {
|
|
text-align: center;
|
|
}
|
|
@media screen and (max-width: $mobile-limit) {
|
|
padding: 30px 10px 10px 10px;
|
|
}
|
|
@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-width: $mobile-limit) {
|
|
left: calc(50% - 23px);
|
|
top: -23px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.user-dashboard {
|
|
margin: 2ex 1ex 0 1ex;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
margin: 3ex 1ex 0 1ex;
|
|
}
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
@include vendor-prefix(justify-content, center);
|
|
@include vendor-prefix(flex-wrap, wrap);
|
|
}
|
|
}
|
|
|
|
div#tracking-code {
|
|
background: #000000;
|
|
padding: 1ex;
|
|
margin-bottom: 3em;
|
|
color: $primary-color;
|
|
font-family: 'Josefin Sans', sans-serif;
|
|
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: 1ex 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#rub_service {
|
|
h2 {
|
|
text-transform: uppercase;
|
|
&::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;
|
|
div.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;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
}
|
|
}
|
|
div.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;
|
|
}
|
|
|
|
.CheckboxWidget,
|
|
.CheckboxesWidget,
|
|
.RadiobuttonsWidget {
|
|
label {
|
|
margin: 3px auto;
|
|
display: inline-block;
|
|
}
|
|
input {
|
|
+ span {
|
|
&::before {
|
|
background: #FFFFFF;
|
|
height: 0.86rem;
|
|
width: 0.86rem;
|
|
top: 0.1rem;
|
|
}
|
|
&::after {
|
|
height: calc(0.86rem - 2px);
|
|
width: calc(0.86rem - 2px);
|
|
top: calc(0.1rem + 2px);
|
|
}
|
|
}
|
|
&:checked + span::after {
|
|
background: #e0e0e0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.RadiobuttonsWidget {
|
|
input + span {
|
|
&::before {
|
|
border-radius: 7px;
|
|
}
|
|
&::after {
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar div.user-menu div.cell {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.gru-content div.cell {
|
|
h2:first-child {
|
|
@media screen and (max-width: $mobile-limit) {
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
&.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-width: $mobile-limit) {
|
|
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: 85%;
|
|
padding: 2ex 1em;
|
|
color: #b0b0b0;
|
|
span.label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
div.form-status {
|
|
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: 10px;
|
|
a {
|
|
@extend %gam-cell-button;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.wcscurrentdraftscell ul li div.form-name {
|
|
background-color: $secondary-color;
|
|
}
|
|
&.wcscurrentformscell {
|
|
h2:first-child {
|
|
background-color: $ternary-color;
|
|
}
|
|
&.demandes-terminees {
|
|
h2:first-child, ul li div.form-name {
|
|
background-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;
|
|
}
|
|
div.cancel-button button {
|
|
background-color: #676767;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
/* wcs progress bar styles */
|
|
|
|
div#steps.steps-1 { display: none; }
|
|
|
|
|
|
div#steps ol {
|
|
/* make it possible to grow over its parent size, this makes sure the
|
|
* step number bubble have enough width even with long page names */
|
|
min-width: 23em;
|
|
position: relative;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
min-width: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
speak: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 40px;
|
|
bottom: 0;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: $primary-color;
|
|
z-index: -2;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
display: none;
|
|
}
|
|
}
|
|
li {
|
|
margin: 25px 0;
|
|
border: 0;
|
|
padding: 1ex 1ex 1ex 0;
|
|
span.marker {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
color: #93989d;
|
|
border-radius: 50%;
|
|
width: 80px;
|
|
height: 80px;
|
|
text-align: center;
|
|
position: relative;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
background: #f1f1f1;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
width: 45px;
|
|
height: 45px;
|
|
padding: 0;
|
|
&::after {
|
|
content: ' ';
|
|
height: 1px;
|
|
width: 15px;
|
|
top: 50%;
|
|
padding: 0;
|
|
left: -16px;
|
|
position: absolute;
|
|
background-color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
&.first {
|
|
@media screen and (max-width: $mobile-limit) {
|
|
span.marker::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.current {
|
|
span.marker {
|
|
background: $primary-color;
|
|
color: #000000;
|
|
border-radius: 50%;
|
|
}
|
|
.label {
|
|
color: #000000;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
padding-left: 0;
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
top: 85px;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
.step-after {
|
|
.marker {
|
|
background: #EBECED;
|
|
}
|
|
}
|
|
.marker::after {
|
|
content: "";
|
|
width: 90px;
|
|
height: 90px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -5px;
|
|
left: -5px;
|
|
z-index: -1;
|
|
}
|
|
.label {
|
|
color: #000000;
|
|
padding-left: 10px;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.comment-field.infobulle {
|
|
border: 2px solid $primary-color;
|
|
margin: 2ex auto 5ex 2em;
|
|
padding: 1ex 1em 1ex 3em;
|
|
position: relative;
|
|
&::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);
|
|
}
|
|
@media screen and (max-width: $mobile-limit) {
|
|
padding: 3ex 1em 1ex 1em;
|
|
margin: 2ex auto;
|
|
&::before {
|
|
left: 1em;
|
|
top: -25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.back-home-button {
|
|
display: none;
|
|
}
|
|
|
|
/* profile styles */
|
|
|
|
.gru-content {
|
|
div.a2-block, div#a2-profile, div#login-page, div#account-management-fc {
|
|
h2 {
|
|
text-transform: uppercase;
|
|
}
|
|
button {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#login-page {
|
|
a {
|
|
color: #f95731;
|
|
}
|
|
form {
|
|
input[type="text"], input[type="password"] {
|
|
width: 100%;
|
|
padding: 1ex;
|
|
}
|
|
button.cancel-button {
|
|
background: $gam-button-background-color;
|
|
}
|
|
div.buttons {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
@include vendor-prefix(flex-direction, row-reverse);
|
|
@include vendor-prefix(justify-content, space-between);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#account-management {
|
|
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: 1rem 0;
|
|
span.label {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
@include vendor-prefix(column-count, 2);
|
|
@media screen and (max-width: $mobile-limit) {
|
|
@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%;
|
|
}
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|
|
}
|