1344 lines
23 KiB
SCSS
1344 lines
23 KiB
SCSS
$notification-producer-circle-radius: 35px;
|
||
$place-title-height: 152px;
|
||
$mobile-place-title-height: 100px;
|
||
|
||
body.page-connect {
|
||
@media screen and (min-width: $width) {
|
||
div#columns div#carrousel {
|
||
margin-left: calc(10px - (100vw - #{$width}) / 2);
|
||
margin-right: calc(10px - (100vw - #{$width}) / 2);
|
||
}
|
||
}
|
||
@media screen and (min-width: 1800px) {
|
||
div#columns div#carrousel {
|
||
margin-left: -300px;
|
||
margin-right: -300px;
|
||
}
|
||
}
|
||
div.carrousel-item-content {
|
||
font-family: Oswald;
|
||
a {
|
||
color: white;
|
||
text-decoration: underline;
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
a.pk-button {
|
||
color: $red;
|
||
&:hover {
|
||
color: white;
|
||
}
|
||
&.black {
|
||
border-color: black;
|
||
background: black;
|
||
color: white;
|
||
&:hover {
|
||
background: $red;
|
||
}
|
||
}
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
div#content {
|
||
div#toodego-pourquoi {
|
||
text-align: center;
|
||
h3 {
|
||
font-size: 2rem;
|
||
font-family: Oswald;
|
||
text-transform: uppercase;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
font-size: 1.8rem;
|
||
}
|
||
}
|
||
p {
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
}
|
||
margin: 30px 100px;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
margin: 30px 0;
|
||
}
|
||
}
|
||
div.grid-1-3 {
|
||
text-transform: none;
|
||
overflow: hidden;
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
div {
|
||
padding: 0 2rem;
|
||
}
|
||
h4 {
|
||
font-family: Oswald;
|
||
font-size: 1.2rem;
|
||
font-weight: 500;
|
||
line-height: 120%;
|
||
text-transform: uppercase;
|
||
}
|
||
border: 1px solid #cccccc;
|
||
height: 400px;
|
||
line-height: 140%;
|
||
background: white;
|
||
@media screen and (max-width: $very-small-limit) {
|
||
position: absolute;
|
||
background: transparent;
|
||
border: none;
|
||
height: auto;
|
||
& > div {
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
&.newline {
|
||
position: relative;
|
||
}
|
||
&.active > div {
|
||
opacity: 1;
|
||
}
|
||
&.newline,
|
||
&.end-of-line {
|
||
&::before {
|
||
color: $red;
|
||
z-index: 1000;
|
||
font-size: 1.25rem;
|
||
font-family: FontAwesome;
|
||
content: "\f053"; // chevron-left;
|
||
position: absolute;
|
||
left: -10px;
|
||
top: calc(200px - 1.5rem);
|
||
width: 3rem;
|
||
height: 3rem;
|
||
line-height: 3rem;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
&.end-of-line {
|
||
&::before {
|
||
left: auto;
|
||
content: "\f054"; // chevron-right;
|
||
right: -10px;
|
||
}
|
||
}
|
||
& > div {
|
||
background: white;
|
||
border: 1px solid #cccccc;
|
||
height: 400px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#page.place {
|
||
div.tile.is-place {
|
||
position: relative;
|
||
}
|
||
#content {
|
||
display: block; // cancel display: flex;
|
||
box-shadow: 0 0 5px #888;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
margin: 1rem;
|
||
&.gru-content div.cell {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
}
|
||
#columns > div:first-child {
|
||
overflow: hidden;
|
||
}
|
||
div.tile.is-place > .tile-head h2 {
|
||
height: $place-title-height;
|
||
font-size: 120%;
|
||
font-weight: bold;
|
||
padding-top: 50px;
|
||
line-height: 2rem;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
height: $mobile-place-title-height;
|
||
padding-top: 1.5rem;
|
||
}
|
||
a {
|
||
color: white;
|
||
text-shadow: 0 0 2px black;
|
||
}
|
||
}
|
||
.place-data {
|
||
display: inline-block;
|
||
margin-left: 10%;
|
||
width: 40%;
|
||
float: left;
|
||
padding-right: 5%;
|
||
margin-top: 2rem;
|
||
margin-bottom: 2rem;
|
||
> div {
|
||
margin-bottom: 2rem;
|
||
}
|
||
}
|
||
.place-info {
|
||
float: right;
|
||
padding: 0 1rem;
|
||
display: inline-block;
|
||
width: 40%;
|
||
margin-top: 2rem;
|
||
margin-right: 10%;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.place-info a.share-email {
|
||
display: inline-block;
|
||
float: right;
|
||
background: url(img/share-email.png) top left no-repeat;
|
||
background-size: auto 100%;
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.place-data, .place-info {
|
||
@media screen and (max-width: $desktop-limit) {
|
||
margin: 0;
|
||
padding: 0.5rem 1rem;
|
||
clear: both;
|
||
width: 100%;
|
||
float: none;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
span.producer {
|
||
display: none;
|
||
}
|
||
|
||
div.tile-picture {
|
||
height: $place-title-height;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
height: $mobile-place-title-height;
|
||
}
|
||
width: 100%;
|
||
background: $title-background;
|
||
background-position: center;
|
||
background-size: cover;
|
||
position: absolute;
|
||
}
|
||
h2:first-child {
|
||
background: transparent;
|
||
}
|
||
|
||
div.adresse,
|
||
div.phone,
|
||
div.horaires {
|
||
padding-left: 40px;
|
||
}
|
||
|
||
div.adresse {
|
||
background: url(img/adresse.png) top left no-repeat;
|
||
}
|
||
|
||
div.phone {
|
||
background: url(img/contact.png) top left no-repeat;
|
||
}
|
||
|
||
div.horaires {
|
||
background: url(img/horaires.png) top left no-repeat;
|
||
h3 {
|
||
display: inline-block;
|
||
width: 7rem;
|
||
}
|
||
div.badge {
|
||
display: inline-block;
|
||
text-transform: uppercase;
|
||
}
|
||
tr th {
|
||
width: 7rem;
|
||
}
|
||
}
|
||
a.action-call,
|
||
a.action-goto {
|
||
display: inline-block;
|
||
margin-left: 0;
|
||
margin-top: 0.5rem;
|
||
background: none;
|
||
@extend %button;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 120%;
|
||
font-weight: 500;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
text-transform: uppercase;
|
||
color: #949599;
|
||
}
|
||
|
||
div.cell.map {
|
||
clear: both;
|
||
margin: 2rem 0 0 0;
|
||
border: 0;
|
||
height: 350px;
|
||
}
|
||
|
||
div.combo-cell-map.leaflet-container {
|
||
height: 350px !important;
|
||
}
|
||
}
|
||
|
||
#page.search-page {
|
||
div#main-content-wrapper {
|
||
max-width: $width + 150px;
|
||
}
|
||
@media screen and (max-width: $desktop-limit) {
|
||
#content {
|
||
margin-top: 0;
|
||
}
|
||
div#columns {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: $mobile-navigation-height;
|
||
}
|
||
div#recherche {
|
||
margin: 0;
|
||
}
|
||
div#mapsearch {
|
||
position: absolute;
|
||
top: 20px;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
}
|
||
footer {
|
||
display: none;
|
||
}
|
||
}
|
||
div.combo-cell-map.leaflet-container {
|
||
min-height: 500px;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
// will be recomputed from javascript as blink/webkit
|
||
// may include the location bar into the 100vh.
|
||
height: calc(100vh - 60px - #{$mobile-navigation-height});
|
||
min-height: auto;
|
||
}
|
||
}
|
||
.gru-content #sidebar {
|
||
flex: 0 0 $sidebar-width + 170px;
|
||
max-width: $sidebar-width + 170px;
|
||
margin-top: calc(0.4em + 60px);
|
||
overflow: auto;
|
||
height: 60vh;
|
||
min-height: 500px;
|
||
margin-right: 20px;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
overflow: hidden;
|
||
overflow-y: hidden;
|
||
padding-top: 0;
|
||
position: fixed;
|
||
height: 0;
|
||
min-height: 0px;
|
||
transition: min-height linear 0.3s;
|
||
bottom: $mobile-navigation-height;
|
||
opacity: 1;
|
||
z-index: 10000;
|
||
}
|
||
div.cell {
|
||
margin-right: 0;
|
||
position: relative;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
margin-right: 0.5rem;
|
||
}
|
||
}
|
||
@media screen and (min-width: $desktop-limit) {
|
||
div.cell.selected::before {
|
||
position: absolute;
|
||
content: "";
|
||
width: 5px;
|
||
height: 100%;
|
||
background: $red;
|
||
display: block;
|
||
z-index: 1;
|
||
}
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
div#mapsearch {
|
||
@media screen and (max-width: $desktop-limit) {
|
||
position: absolute;
|
||
z-index: 10000;
|
||
}
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
padding-top: 0px;
|
||
position: relative;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
padding: 0 20px;
|
||
width: 100%;
|
||
}
|
||
form {
|
||
width: 100%;
|
||
display: flex;
|
||
input {
|
||
flex: 1;
|
||
border-right: 0;
|
||
padding: 9px 1ex 11px 1ex;
|
||
margin: 0;
|
||
}
|
||
button.search-button {
|
||
margin-right: 0;
|
||
border-width: 1px 1px 1px 0;
|
||
background: $red url(img/loupe-white.png) center center no-repeat;
|
||
box-shadow: none;
|
||
text-indent: -10000px;
|
||
overflow: hidden;
|
||
width: 40px;
|
||
}
|
||
button.filter-button {
|
||
margin-left: 10px;
|
||
margin-right: 0;
|
||
&.on {
|
||
background: $red;
|
||
color: white;
|
||
}
|
||
text-transform: none;
|
||
z-index: 50000;
|
||
position: absolute;
|
||
top: 80px;
|
||
right: 20px;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
top: 50px;
|
||
right: 20px;
|
||
}
|
||
border: none;
|
||
color: black;
|
||
&:hover {
|
||
background: white;
|
||
}
|
||
&:focus, &:active {
|
||
outline: none;
|
||
}
|
||
&.on {
|
||
outline: none;
|
||
border: none;
|
||
background: white;
|
||
color: black;
|
||
&::after {
|
||
content: " ×";
|
||
color: $red;
|
||
font-size: 200%;
|
||
position: absolute;
|
||
top: 0;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
top: 2px;
|
||
}
|
||
right: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
div.suggestions {
|
||
padding: 1rem 0 0.5rem 3px;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
padding-top: 0.5rem;
|
||
}
|
||
a,
|
||
span {
|
||
display: inline-block;
|
||
background: black;
|
||
white-space: pre;
|
||
cursor: pointer;
|
||
color: white;
|
||
border-radius: 5px;
|
||
padding: 2px 5px;
|
||
margin-bottom: 0.5ex;
|
||
font-size: 80%;
|
||
}
|
||
}
|
||
}
|
||
#filtres-carte,
|
||
#filtres-autour-de-moi {
|
||
display: none;
|
||
padding: 1em;
|
||
h4 {
|
||
font-family: Oswald;
|
||
text-transform: uppercase;
|
||
}
|
||
ul, li {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
li {
|
||
display: inline-block;
|
||
margin-right: 0.5em;
|
||
line-height: 200%;
|
||
}
|
||
li a {
|
||
background: black;
|
||
padding: 3px 7px;
|
||
color: white;
|
||
border-radius: 20px;
|
||
&.on {
|
||
background: $red;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.combo-cell-map #filtres-carte,
|
||
.combo-cell-map #filtres-autour-de-moi {
|
||
z-index: 800; // less than search input
|
||
background: white;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 19px;
|
||
right: 19px;
|
||
bottom: 10px;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
top: 78px;
|
||
}
|
||
}
|
||
}
|
||
|
||
body.focus-in #page.search-page {
|
||
@media screen and (max-width: $desktop-limit) {
|
||
div#columns {
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-404 {
|
||
#main-content-wrapper {
|
||
background: transparent url(img/404-top.png) 100% 0% no-repeat;
|
||
}
|
||
#main-content {
|
||
background: transparent url(img/404-bottom.png) 80% 100% no-repeat;
|
||
}
|
||
#content {
|
||
.cell {
|
||
border: 0;
|
||
background: transparent;
|
||
}
|
||
h1 {
|
||
font-size: 7.5rem;
|
||
color: $red;
|
||
margin: 0;
|
||
}
|
||
h2 {
|
||
text-align: left;
|
||
}
|
||
p, ul, li {
|
||
margin: 1rem 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
li {
|
||
margin: 0.5rem 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section-mon-compte,
|
||
.page-notifications,
|
||
.page-signaler,
|
||
.section-bienvenue,
|
||
.section-services,
|
||
.section-documents,
|
||
.page-m-y-rendre {
|
||
div.intro-text {
|
||
background: $red;
|
||
color: white;
|
||
text-align: center;
|
||
border: none;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
margin-top: -2rem;
|
||
}
|
||
h1 {
|
||
font-family: Oswald;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
padding: 3rem 0;
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-signaler {
|
||
div#columns {
|
||
background: white;
|
||
box-shadow: 0 0 5px #888;
|
||
div.cell.tile {
|
||
margin: 1rem 1rem;
|
||
width: calc(50% - 9rem);
|
||
&:hover {
|
||
background: $red;
|
||
h2 {
|
||
color: white;
|
||
}
|
||
}
|
||
&:nth-child(2n) {
|
||
margin-left: 8rem;
|
||
}
|
||
&:nth-child(2n+1) {
|
||
margin-right: 8rem;
|
||
}
|
||
.tile {
|
||
justify-content: space-around;
|
||
}
|
||
.tile-actions {
|
||
display: none;
|
||
}
|
||
.tile-title h2 {
|
||
}
|
||
.tile-title h3 {
|
||
display: none;
|
||
}
|
||
@media screen and (max-width: $desktop-limit) {
|
||
&:nth-child(n) {
|
||
margin: 0.5rem;
|
||
width: calc(100% - 1rem);
|
||
}
|
||
.tile-title h2 {
|
||
padding-top: 2rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-notifications {
|
||
#content .notificationscell {
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
.notification-none {
|
||
display: block;
|
||
padding: 3rem;
|
||
text-align: center;
|
||
background: $cell-background;
|
||
border: $cell-border;
|
||
}
|
||
div.notification {
|
||
position: relative;
|
||
background: $cell-background;
|
||
border: $cell-border;
|
||
margin: 1rem 0;
|
||
padding: 0 1rem;
|
||
padding-left: $notification-producer-circle-radius * 4;
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
h3 {
|
||
font-family: Oswald;
|
||
text-transform: uppercase;
|
||
}
|
||
&.new {
|
||
box-shadow: inset 5px 0 0 $red;
|
||
a {
|
||
color: $red;
|
||
}
|
||
}
|
||
&.acked {
|
||
opacity: 0.6;
|
||
a {
|
||
color: inherit;
|
||
}
|
||
}
|
||
.datetime {
|
||
text-align: right;
|
||
}
|
||
.producer {
|
||
display: block;
|
||
text-indent: -10000px;
|
||
border: 1px solid #c3c3c3;
|
||
background: white center center no-repeat;
|
||
position: absolute;
|
||
background-size: $notification-producer-circle-radius * 2;
|
||
width: $notification-producer-circle-radius * 2;
|
||
height: $notification-producer-circle-radius * 2;
|
||
border-radius: $notification-producer-circle-radius;
|
||
top: calc(50% - #{$notification-producer-circle-radius});
|
||
left: $notification-producer-circle-radius;
|
||
}
|
||
.delete {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
padding: 0.5rem 1rem;
|
||
}
|
||
&.hidden + .notification-more {
|
||
display: block;
|
||
}
|
||
}
|
||
div.notification-buttons {
|
||
& > div {
|
||
display: none;
|
||
float: left;
|
||
margin-right: 1rem;
|
||
}
|
||
@media screen and (max-width: $desktop-limit) {
|
||
text-align: center;
|
||
& > div {
|
||
float: none;
|
||
margin-right: auto;
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.section-mon-compte {
|
||
div#intro-text {
|
||
h1 {
|
||
display: inline-block;
|
||
background: url(img/avatar-big-white.png) center right no-repeat;
|
||
padding-right: 3rem;
|
||
}
|
||
}
|
||
h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 0.8rem;
|
||
text-transform: uppercase;
|
||
font-family: Oswald;
|
||
&.dim {
|
||
color: #888;
|
||
}
|
||
span.refresh {
|
||
color: $red;
|
||
font-weight: 300;
|
||
text-transform: none;
|
||
animation-name: pulse_opacity_animation;
|
||
animation-iteration-count: infinite;
|
||
animation-duration: 2000ms;
|
||
}
|
||
}
|
||
div.cut-profile div.profile-data {
|
||
padding: 1rem;
|
||
ul, li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
li:last-child {
|
||
border: none;
|
||
}
|
||
li > span {
|
||
display: block;
|
||
line-height: 35px;
|
||
padding-left: 40px;
|
||
background: center left no-repeat;
|
||
&.name {
|
||
background-image: url(img/avatar-cercle.png);
|
||
}
|
||
&.home {
|
||
background-image: url(img/adresse.png);
|
||
}
|
||
&.email {
|
||
background-image: url(img/email.png);
|
||
}
|
||
&.birthdate {
|
||
background-image: url(img/birthdate.png);
|
||
}
|
||
&.professional-phone,
|
||
&.private-phone {
|
||
background-image: url(img/contact.png);
|
||
}
|
||
&.professional-mobile,
|
||
&.private-mobile {
|
||
background-image: url(img/mobile.png);
|
||
}
|
||
&.private-phone,
|
||
&.professional-phone,
|
||
&.professional-mobile {
|
||
&::before {
|
||
content: "(pro) ";
|
||
font-family: Oswald;
|
||
color: $red;
|
||
}
|
||
}
|
||
}
|
||
span.birthday {
|
||
padding-left: 1ex;
|
||
}
|
||
li a.pk-button {
|
||
margin-top: 1rem;
|
||
}
|
||
}
|
||
.favorite-places {
|
||
.icon-delete {
|
||
&::after {
|
||
content: "×";
|
||
}
|
||
}
|
||
.icon-checkmark {
|
||
&::after {
|
||
content: "✓";
|
||
}
|
||
}
|
||
padding: 1em;
|
||
ul, li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
position: relative;
|
||
}
|
||
li > span {
|
||
display: inline-block;
|
||
line-height: 35px;
|
||
padding-left: 40px;
|
||
background: url(img/goto.png) center left no-repeat;
|
||
cursor: pointer;
|
||
}
|
||
li > a {
|
||
margin-top: 0.5rem;
|
||
}
|
||
li .delete-place button {
|
||
color: $red;
|
||
background: white;
|
||
box-shadow: none;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
li .edit-place {
|
||
display: none;
|
||
div.buttons {
|
||
display: block;
|
||
text-align: right;
|
||
button {
|
||
background: $red;
|
||
margin-top: 0.5rem;
|
||
margin-right: 1rem;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pn-abonnements--content {
|
||
padding: 1rem;
|
||
ul, li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.value {
|
||
margin-bottom: 1em;
|
||
}
|
||
.pn-thematiques li {
|
||
margin-left: 0.5em;
|
||
}
|
||
.pn-thematiques li.intertitle {
|
||
margin-left: 0;
|
||
strong {
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
li:last-child {
|
||
border: none;
|
||
}
|
||
|
||
}
|
||
div.new-place, div.edit-place {
|
||
div.grid-3-4.ville {
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
div.new-place {
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
transition: all 0.3s ease;
|
||
&.shown {
|
||
max-height: 350px;
|
||
}
|
||
}
|
||
.gru-content div.cell.logout-link {
|
||
font-family: Oswald;
|
||
text-transform: uppercase;
|
||
padding: 0;
|
||
box-shadow: none;
|
||
background: white;
|
||
color: #dc1822;
|
||
border: 1px solid #dc1822;
|
||
transition: all ease 0.2s;
|
||
a {
|
||
display: block;
|
||
text-align: center;
|
||
border: none;
|
||
&::before {
|
||
font-family: FontAwesome;
|
||
content: "\f011"; // power-off
|
||
padding-right: 1ex;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
@media screen and (max-width: $desktop-limit) {
|
||
.gru-content #sidebar {
|
||
order: 1; // after main content
|
||
}
|
||
}
|
||
}
|
||
|
||
.section-bienvenue,
|
||
.section-mon-compte {
|
||
div.new-place {
|
||
form {
|
||
padding: 10px 10px 10px 20px;
|
||
label {
|
||
color: #666;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: block;
|
||
}
|
||
> div {
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-index,
|
||
.page-services,
|
||
.page-tableau-de-bord {
|
||
div#add-section,
|
||
div#signaler {
|
||
text-transform: uppercase;
|
||
font-family: Oswald, sans-serif;
|
||
a {
|
||
box-sizing: content-box;
|
||
text-align: center;
|
||
display: block;
|
||
background: white;
|
||
height: 19px;
|
||
&:hover {
|
||
background-color: $red;
|
||
}
|
||
@media screen and (max-width: $desktop-limit) {
|
||
padding: 1rem 4rem;
|
||
}
|
||
}
|
||
}
|
||
div#signaler {
|
||
a {
|
||
background: white url(img/porte-voix.png) 5px 50% no-repeat;
|
||
background-size: 45px;
|
||
&:hover {
|
||
background-image: url(img/porte-voix-hover.png);
|
||
}
|
||
}
|
||
}
|
||
div#cell-filter {
|
||
border: none;
|
||
form {
|
||
width: 100%;
|
||
display: flex;
|
||
input {
|
||
flex: 1;
|
||
margin: 0;
|
||
padding: 1rem;
|
||
height: 19px;
|
||
border-right: 0;
|
||
box-sizing: content-box;
|
||
}
|
||
button,
|
||
button:hover {
|
||
margin: 0;
|
||
color: transparent;
|
||
background: $red url(img/loupe-white.png) center center no-repeat;
|
||
}
|
||
}
|
||
}
|
||
div.filter-empty p {
|
||
padding: 0rem 1rem;
|
||
}
|
||
@media screen and (max-width: $desktop-limit) {
|
||
.gru-content #sidebar {
|
||
order: 1; // after main content
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-formdata-status {
|
||
#columns {
|
||
display: flex;
|
||
.buttons {
|
||
display: block;
|
||
}
|
||
@media screen and (max-width: $desktop-limit) {
|
||
flex-direction: column;
|
||
}
|
||
#form-status-sidebar {
|
||
flex: 0 0 $sidebar-width;
|
||
@media screen and (min-width: $desktop-limit) {
|
||
max-width: $sidebar-width;
|
||
overflow: hidden;
|
||
}
|
||
.cell {
|
||
margin-left: 1rem;
|
||
margin-right: 0;
|
||
box-shadow: 0 0 3px #888;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
margin: 1rem 0;
|
||
}
|
||
}
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
#receipt-intro {
|
||
margin-top: 0;
|
||
margin-right: 0;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
margin-right: 1rem;
|
||
}
|
||
|
||
div[class*=grid-] {
|
||
width: 100%;
|
||
padding-right: 0;
|
||
float: none;
|
||
}
|
||
div.field {
|
||
margin: 0.25rem 0 0.5rem 0;
|
||
.label {
|
||
color: #888;
|
||
font-size: 90%;
|
||
margin: 0;
|
||
}
|
||
}
|
||
div.page {
|
||
clear: both;
|
||
}
|
||
div.page h3 {
|
||
margin: 1rem 0 0.5rem 0;
|
||
font-family: Oswald;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
ul#evolutions li {
|
||
&::after {
|
||
content: none; // no horizontal line from timeline to status
|
||
}
|
||
span.item {
|
||
line-height: 28px;
|
||
width: 24px;
|
||
height: 24px;
|
||
left: 18px;
|
||
border: 2px solid $red;
|
||
top: 28px;
|
||
box-shadow: 0 0 0px 10px white;
|
||
background: $red !important;
|
||
&::before {
|
||
content: none; // no icon in bullets
|
||
}
|
||
}
|
||
&.msg-first span.item {
|
||
background: white !important;
|
||
}
|
||
}
|
||
form#wf-actions {
|
||
textarea {
|
||
width: 100%;
|
||
height: 8rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// dashboard
|
||
#ajouter-service,
|
||
#connectez-vous {
|
||
border: 1px dashed #888;
|
||
text-align: center;
|
||
background: white url(img/avatar-plus.png) 50% 10px no-repeat;
|
||
padding-top: 50px;
|
||
&:hover {
|
||
border: 1px solid $red;
|
||
cursor: pointer;
|
||
}
|
||
h3 {
|
||
padding-top: 1rem;
|
||
font-family: Oswald;
|
||
text-transform: uppercase;
|
||
color: $red;
|
||
}
|
||
p {
|
||
margin: 1rem auto;
|
||
max-width: 26rem;
|
||
}
|
||
}
|
||
|
||
#ajouter-service {
|
||
background-image: url(img/coeur-plus.png);
|
||
}
|
||
|
||
#page.goto-page {
|
||
#content {
|
||
display: block; // cancel display: flex;
|
||
box-shadow: 0 0 5px #888;
|
||
border: 1px solid #ccc;
|
||
background: white;
|
||
}
|
||
|
||
#goto-way {
|
||
background: url(img/ic_my_rendre.png) top center no-repeat;
|
||
height: 120px;
|
||
}
|
||
#goto-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.geolocating {
|
||
padding: 1rem 0 2rem 0;
|
||
button {
|
||
margin-right: 0;
|
||
}
|
||
.failed {
|
||
border: 2px solid $red;
|
||
padding: 1rem;
|
||
}
|
||
}
|
||
|
||
#goto-destination {
|
||
text-align: center;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
> div > h2,
|
||
> div > h3 {
|
||
color: $font-color;
|
||
font-size: 110%;
|
||
margin-top: 30px;
|
||
padding-top: 30px;
|
||
background: url(img/surtitle.png) top center no-repeat;
|
||
text-transform: uppercase;
|
||
font-family: Oswald;
|
||
font-weight: bold;
|
||
}
|
||
div.cell {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
.tile-actions {
|
||
visibility: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
div.cell.goto {
|
||
display: inline-block;
|
||
width: 380px;
|
||
background: #efefef;
|
||
border: none;
|
||
border-left: 6px solid #00969c;
|
||
padding: 0;
|
||
&:nth-child(2n) {
|
||
float: left;
|
||
}
|
||
&:nth-child(2n+1) {
|
||
float: right;
|
||
}
|
||
div.mode {
|
||
display: none;
|
||
}
|
||
div.goto-onlymoov {
|
||
padding: 2rem 1rem 2rem 80px;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
padding-left: 70px;
|
||
}
|
||
&.BIKE {
|
||
background: url(img/onlymoov-bike.png) 1ex center no-repeat;
|
||
}
|
||
&.PT {
|
||
background: url(img/onlymoov-pt.png) 1ex center no-repeat;
|
||
}
|
||
&.CAR {
|
||
background: url(img/onlymoov-car.png) 1ex center no-repeat;
|
||
}
|
||
&.WALK {
|
||
background: url(img/onlymoov-walk.png) 1ex center no-repeat;
|
||
}
|
||
div.duration {
|
||
display: inline-block;
|
||
&.loading-duration {
|
||
animation-name: pulse_opacity_animation;
|
||
animation-iteration-count: infinite;
|
||
animation-duration: 2000ms;
|
||
}
|
||
}
|
||
a {
|
||
display: inline-block;
|
||
position: relative;
|
||
top: -0.5ex;
|
||
font-family: Oswald;
|
||
text-transform: uppercase;
|
||
background: black;
|
||
color: white;
|
||
float: right;
|
||
padding: 0.5rem 0.5rem 0.2rem 0.5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
div.textcell {
|
||
border: none;
|
||
}
|
||
|
||
@media screen and (max-width: $desktop-limit) {
|
||
#backlink, .backlink {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section-bienvenue #welcome {
|
||
div.new-place {
|
||
padding: 3rem 6rem;
|
||
@media screen and (max-width: $desktop-limit) {
|
||
padding: 1rem 0;
|
||
}
|
||
}
|
||
& + div.linkcell {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
// decheteries
|
||
|
||
ul.allowed-waste {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
li {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0.4ex 0;
|
||
break-inside: avoid;
|
||
page-break-inside: avoid;
|
||
}
|
||
column-count: 2;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
table.allowed-vehicles {
|
||
width: 100%;
|
||
td {
|
||
padding-top: 0.6ex;
|
||
}
|
||
}
|
||
|
||
// login page
|
||
#content div#login-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
div.block-oidc,
|
||
div.block-password {
|
||
width: 100%;
|
||
margin-bottom: 1rem;
|
||
}
|
||
div.block-password {
|
||
order: 2;
|
||
h2 {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
span {
|
||
display: inline-block;
|
||
padding: 1rem 1rem 0.7rem 0rem;
|
||
}
|
||
a {
|
||
background: white;
|
||
color: $red;
|
||
display: inline-block;
|
||
padding: 1rem 1rem 0.7rem 1rem;
|
||
text-decoration: underline;
|
||
&:hover {
|
||
background: $red;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.methods2 { // both password and oidc enabled
|
||
div.block-password.for-unknown,
|
||
div.block-password.for-frontoffice {
|
||
display: none;
|
||
}
|
||
div.block-oidc.for-backoffice {
|
||
display: none;
|
||
}
|
||
div.block-oidc.for-unknown {
|
||
#redirect {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// tutorial video
|
||
#video {
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: calc(100% - 1rem);
|
||
height: 0;
|
||
padding-bottom: 56.25%; // keep aspect ratio
|
||
p {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
iframe {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
// RSJ
|
||
.rsj-fiche {
|
||
table, p {
|
||
text-align: center;
|
||
width: 100%;
|
||
max-width: 60em;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
table tr:first-child h3 {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
.rsj-a-traiter {
|
||
table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.gru-content div.cell.pn-home {
|
||
display: none;
|
||
h2 {
|
||
background: transparent;
|
||
color: black;
|
||
}
|
||
div {
|
||
text-align: center;
|
||
p {
|
||
margin: 1em 1em;
|
||
text-align: left;
|
||
}
|
||
a {
|
||
margin-bottom: 1em;
|
||
}
|
||
}
|
||
}
|
||
|
||
#sidebar div.cell.pn-home {
|
||
p {
|
||
display: none;
|
||
}
|
||
h2 {
|
||
background: transparent url(img/magic.png) left 50% bottom 10px no-repeat;
|
||
padding-bottom: 50px;
|
||
}
|
||
}
|