1339 lines
22 KiB
SCSS
1339 lines
22 KiB
SCSS
@import '../includes/font-roboto';
|
|
@import 'data_uris';
|
|
@import 'tiles';
|
|
|
|
$signalements: ambroisie arbre collecte eau eclairage neige nuisibles objets-perdus signalisation tags;
|
|
|
|
body {
|
|
background: $lightgray no-repeat;
|
|
background-size: auto 100px;
|
|
background-position: 97% 3%;
|
|
}
|
|
|
|
.mobile-only { display: block; }
|
|
.desktop-only { display: none; }
|
|
|
|
#toplinks {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar {
|
|
display: none;
|
|
}
|
|
|
|
div#page div#main-content-wrapper {
|
|
max-width: $absolutely-max-width;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
div#top-bar {
|
|
height: 60px;
|
|
background: $blue;
|
|
margin: 0 -1ex;
|
|
color: white;
|
|
#close {
|
|
color: white;
|
|
position: absolute;
|
|
right: 10px;
|
|
font-size: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
|
|
span.icon-bell::after {
|
|
font-family: FontAwesome;
|
|
content: "\f0f3";
|
|
}
|
|
|
|
span.icon-user::after {
|
|
font-family: FontAwesome;
|
|
content: "\f007";
|
|
}
|
|
|
|
nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 65px;
|
|
border-top: 1px solid #EAE2E1;
|
|
background: $red;
|
|
z-index: 900;
|
|
width: 100%;
|
|
}
|
|
|
|
div#main-content-wrapper,
|
|
div#nav-wrapper {
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.iconbar div#main-content-wrapper {
|
|
padding: 0px 0px 0px 0px;
|
|
position: absolute;
|
|
overflow-y: scroll;
|
|
height: calc(100vh - 65px);
|
|
}
|
|
|
|
@media screen and (max-width: $desktop-limit) {
|
|
.iconbar.not-on-mobile div#main-content-wrapper {
|
|
position: static;
|
|
height: auto;
|
|
z-index: 1020;
|
|
margin-top: -15px;
|
|
background: #F2F0F0;
|
|
border-radius: 20px 20px 0 0;
|
|
}
|
|
div#rub_service {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
#banner,
|
|
#searchbox {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
#banner {
|
|
display: none;
|
|
}
|
|
|
|
.iconbar div#searchbox + div#main-content-wrapper {
|
|
top: 150px;
|
|
height: calc(100vh - 215px);
|
|
}
|
|
|
|
div#nav {
|
|
margin: 0;
|
|
h1 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
div#nav > ul {
|
|
margin: 0;
|
|
display: block;
|
|
& > li {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 25%;
|
|
& > a {
|
|
color: white;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 38px 5px 2px 5px;
|
|
white-space: nowrap;
|
|
line-height: 1.5em;
|
|
background: $red center 10px no-repeat;
|
|
border-bottom: 5px solid $red;
|
|
@include vendor-prefix('transition', 'all 0.3s ease');
|
|
&:hover {
|
|
border-bottom: 5px solid white;
|
|
}
|
|
}
|
|
&.selected > a {
|
|
background-color: #AF0000;
|
|
border-bottom: 5px solid #AF0000;
|
|
color: white;
|
|
&:hover {
|
|
border-bottom: 5px solid white;
|
|
}
|
|
}
|
|
& > a::before {
|
|
content: "";
|
|
height: 24px;
|
|
width: 24px;
|
|
background: transparent center center no-repeat;
|
|
position: absolute;
|
|
top: 11px;
|
|
left: calc(50% - 12px);
|
|
}
|
|
&.menu-index > a::before,
|
|
&.menu-mon-espace > a::before {
|
|
background-image: url($data_uri_xGNM__BottomBarHome);
|
|
}
|
|
&.menu-services > a::before {
|
|
background-image: url($data_uri_xGNM__BottomBarSearch);
|
|
}
|
|
&.menu-notifications:hover > a::before {
|
|
animation-name: move_bell_animation;
|
|
animation-duration: 1000ms;
|
|
animation-iteration-count: 2;
|
|
animation-timing-function: linear;
|
|
}
|
|
&.menu-notifications > a::before {
|
|
background-image: url($data_uri_xGNM__BottomBarNotifications);
|
|
}
|
|
&.menu-mon-compte > a::before {
|
|
background-image: url($data_uri_xGNM__BottomBarUser);
|
|
}
|
|
}
|
|
}
|
|
|
|
#content #welcome-user {
|
|
padding: 10px 20px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#content div.cell {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
#content div.cell div.velov {
|
|
background-image: url($data_uri_velov);
|
|
|
|
.available-bikes {
|
|
background: #444444;
|
|
color: white;
|
|
&::before {
|
|
font-weight: normal;
|
|
font-family: FontAwesome;
|
|
content: "\f206";
|
|
padding-right: 1ex;
|
|
}
|
|
}
|
|
.available-bike-stands {
|
|
background: #EEEDED;
|
|
color: #444444;
|
|
}
|
|
}
|
|
|
|
#content div.cell div.tcl {
|
|
background-image: url($data_uri_tcl);
|
|
}
|
|
|
|
#content div.cell div.onlymoov {
|
|
background-image: url($data_uri_onlymoov);
|
|
}
|
|
|
|
#content div.cell div.grandlyon {
|
|
background-image: url($data_uri_grandlyon);
|
|
}
|
|
|
|
#content div.cell div.lyon {
|
|
background-image: url($data_uri_lyon);
|
|
}
|
|
|
|
#content div.cell div.atmo {
|
|
background-image: url($data_uri_atmo);
|
|
}
|
|
|
|
#content div.cell div.signaler {
|
|
background-image: url($data_uri_signaler);
|
|
}
|
|
|
|
.section-connect {
|
|
nav,
|
|
#top {
|
|
display: none;
|
|
}
|
|
#main-content {
|
|
height: 90%;
|
|
}
|
|
#content #columns {
|
|
position: absolute;
|
|
bottom: 1ex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#content #columns > div.cell {
|
|
flex: 0 1 auto;
|
|
margin: 10px 40px;
|
|
h1 {
|
|
font-weight: normal;
|
|
margin-bottom: 1ex;
|
|
}
|
|
h1, p {
|
|
margin-left: 0;
|
|
}
|
|
p {
|
|
color: #888;
|
|
}
|
|
strong {
|
|
color: #333;
|
|
}
|
|
a {
|
|
border-radius: 40px;
|
|
color: black;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 1em 0;
|
|
font-weight: bold;
|
|
}
|
|
a.login {
|
|
background: $red;
|
|
color: white;
|
|
}
|
|
a.register {
|
|
background: #D9D9D9;
|
|
}
|
|
&.connect-buttons p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
#top {
|
|
a.back {
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
padding: 5px;
|
|
height: 25px;
|
|
}
|
|
h1 {
|
|
padding: 0px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.section-bienvenue {
|
|
background-image: url(img/GNM__BackgroundPictos.svg);
|
|
background-position: 0 0;
|
|
background-size: 100% auto;
|
|
|
|
#top h1 {
|
|
display: none;
|
|
}
|
|
#content #columns {
|
|
padding: 40px 20px 50px 20px;
|
|
div.textcell {
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
|
|
#content #columns > div.cell.page-buttons {
|
|
& > div {
|
|
box-sizing: border-box;
|
|
width: 95%;
|
|
}
|
|
text-align: right;
|
|
a {
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
color: white;
|
|
background: $red;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
&:hover {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-signaler {
|
|
#content {
|
|
display: block;
|
|
}
|
|
#content > .cell.wcsformcell {
|
|
margin: 0 1% 1em 1%;
|
|
width: 48%;
|
|
float: left;
|
|
text-align: center;
|
|
a {
|
|
color: $blue;
|
|
border-radius: 10px;
|
|
background: white;
|
|
font-weight: bold;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
padding-top: 60px;
|
|
height: 100px;
|
|
position: relative;
|
|
&:hover {
|
|
background: $blue;
|
|
color: white;
|
|
}
|
|
@include vendor-prefix('transition', 'all 0.15s linear');
|
|
}
|
|
@each $signalement in $signalements {
|
|
&.icon-#{$signalement} a {
|
|
background: white url(img/signalement/#{$signalement}-2A2E49.png) no-repeat 50% 20px;
|
|
}
|
|
&.icon-#{$signalement} a:hover {
|
|
background: $blue url(img/signalement/#{$signalement}-FFFFFF.png) no-repeat 50% 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div.cell.page-intro {
|
|
margin-top: 10px;
|
|
> div {
|
|
margin: 0px 20px;
|
|
padding: 0;
|
|
}
|
|
h2 {
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
padding: 0 10px;
|
|
&.textcell p {
|
|
margin: 1ex 0;
|
|
}
|
|
}
|
|
|
|
#content #columns > div.cell.menucell {
|
|
background: white;
|
|
border-radius: 5px;
|
|
margin: 10px;
|
|
ul > li {
|
|
a {
|
|
padding: 2ex 3ex;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #F2F2F2;
|
|
position: relative;
|
|
&::after {
|
|
content: "\2192"; /* -> */
|
|
color: #DEDADA;
|
|
position: absolute;
|
|
right: 15px;
|
|
}
|
|
}
|
|
&:last-child > a {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-index {
|
|
#content div.cell div.empty-dashboard,
|
|
#content div.cell.connectez-vous {
|
|
background: transparent url(img/empty-dashboard.png) top center no-repeat;
|
|
padding-top: 180px;
|
|
text-align: center;
|
|
h1 {
|
|
font-size: 120%;
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
a {
|
|
background: #D9D9D9;
|
|
border-radius: 40px;
|
|
color: black;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 1em 0;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
z-index: 1000;
|
|
}
|
|
.page- #top {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
div#gauche {
|
|
display: none;
|
|
+ div#rub_service {
|
|
margin-top: 0;
|
|
width: 100%;
|
|
float: none;
|
|
form {
|
|
margin-top: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
div.submit-button {
|
|
float: right;
|
|
}
|
|
div.cancel-button {
|
|
display: none;
|
|
}
|
|
div.buttons button {
|
|
background: transparent;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: black;
|
|
box-shadow: none;
|
|
}
|
|
div.buttons .submit-button button {
|
|
background: $blue;
|
|
color: white;
|
|
border-radius: 5px;
|
|
}
|
|
div.page {
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#rub_service {
|
|
margin-top: 0;
|
|
width: 100%;
|
|
float: none;
|
|
> h2:first-child {
|
|
text-align: left;
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #E0DDDD;
|
|
}
|
|
|
|
div#receipt-intro {
|
|
margin: 1em;
|
|
background: white;
|
|
padding: 1ex 1em;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
div#evolution-log > h2 {
|
|
padding-left: 2ex;
|
|
padding-top: 2ex;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-size: 150%;
|
|
}
|
|
|
|
div#evolution-log > ul#evolutions {
|
|
margin: 1em;
|
|
background: white;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
ul#evolutions div.evolution-metadata {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
div#summary {
|
|
display: none;
|
|
}
|
|
|
|
ul#evolutions li::after {
|
|
content: none;
|
|
}
|
|
ul#evolutions li span.item {
|
|
background: $blue !important;
|
|
color: white !important;
|
|
border: none;
|
|
line-height: 40px;
|
|
top: 10px;
|
|
}
|
|
#evolutions::after {
|
|
height: calc(100% - 40px - 30px);
|
|
}
|
|
|
|
form#wf-actions {
|
|
margin: 1em;
|
|
background: white;
|
|
padding: 1ex 1em;
|
|
border-radius: 5px;
|
|
div.buttons {
|
|
text-align: right;
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div.back-home-button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
div.MapWidget {
|
|
position: relative;
|
|
span.geoloc-error {
|
|
float: none;
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 100;
|
|
color: black;
|
|
padding: 1ex 2ex;
|
|
background: rgba(255, 0, 0, 0.7);
|
|
}
|
|
}
|
|
|
|
div.template-photo {
|
|
div.hint {
|
|
display: none;
|
|
}
|
|
& > div.content {
|
|
border: 1px dashed #333;
|
|
height: 100px;
|
|
position: relative;
|
|
text-align: center;
|
|
div.FileWidget.widget {
|
|
margin-bottom: 0;
|
|
}
|
|
div.upload-hint {
|
|
margin-bottom: 2ex;
|
|
}
|
|
input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.001;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
div.fileprogress {
|
|
position: absolute;
|
|
border: none;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
div.fileinfo {
|
|
line-height: 100px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
img {
|
|
max-width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
div.error {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
&.has-file > div.content {
|
|
background: white;
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
&.has-no-file > div.content {
|
|
&::after {
|
|
content: "\f030";
|
|
font-family: FontAwesome;
|
|
font-size: 40px;
|
|
line-height: 100px;
|
|
color: $blue;
|
|
}
|
|
}
|
|
&.widget-readonly.has-no-file > div.content {
|
|
&::after {
|
|
color: $darkgray;
|
|
}
|
|
}
|
|
|
|
div.fileinfo a.remove {
|
|
display: inline-block;
|
|
width: 1ex;
|
|
}
|
|
|
|
div.file-upload-widget {
|
|
&.has-file {
|
|
input[type=file], .use-file-from-fargo, .upload-hint {
|
|
display: none;
|
|
}
|
|
}
|
|
&.has-no-file {
|
|
.fileinfo {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
a#publik-portal-agent {
|
|
display: none;
|
|
}
|
|
|
|
/* notifications */
|
|
div#nav span.badge {
|
|
background: lighten($red, 20%);
|
|
padding: 5px;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
top: 14px;
|
|
left: calc(50% + 5px);
|
|
}
|
|
|
|
div#nav span.badge::before,
|
|
div#nav span.badge::after {
|
|
content: none;
|
|
}
|
|
|
|
#content div.cell.notificationscell {
|
|
h2 {
|
|
margin: 0 20px;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
width: auto;
|
|
}
|
|
|
|
h2 + div {
|
|
padding: 0;
|
|
}
|
|
|
|
div.notification {
|
|
margin: 10px;
|
|
background: white;
|
|
border-radius: 5px;
|
|
padding: 5px 10px 1px 10px;
|
|
h3 {
|
|
margin-top: 3px;
|
|
}
|
|
p.datetime {
|
|
margin: 0;
|
|
font-size: 80%;
|
|
color: $darkgray;
|
|
}
|
|
@include vendor-prefix('transition', 'opacity 0.3s ease');
|
|
&.acked {
|
|
opacity: 0.5;
|
|
}
|
|
&.new {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div.cell.wcscurrentformscell div.current-forms {
|
|
h2 {
|
|
border: none;
|
|
width: auto;
|
|
}
|
|
> div.tile {
|
|
padding-left: 60px;
|
|
padding-bottom: 1ex;
|
|
margin-bottom: 1ex;
|
|
div.badge span {
|
|
background: #0071BC;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div.cell.dashboardcell {
|
|
border-radius: 5px;
|
|
background: $darkgray;
|
|
div.cell {
|
|
padding: 0px;
|
|
margin: 0;
|
|
margin-bottom: 1ex;
|
|
}
|
|
}
|
|
|
|
div.cell {
|
|
position: relative;
|
|
}
|
|
|
|
#content div.cell div.pollen {
|
|
background-image: url($data_uri_atmo);
|
|
div.tile-head div.badge {
|
|
span {
|
|
display: none;
|
|
font-weight: bold;
|
|
}
|
|
span.indice-0 { background: #5AB566; }
|
|
span.indice-1 { background: #A9D95F; }
|
|
span.indice-2 { background: #D5E65C; }
|
|
span.indice-3 { background: #E8D64D; }
|
|
span.indice-4 { background: #ED8D5D; }
|
|
span.indice-5 { background: #EF5B5B; }
|
|
span.indice-0.valeur-0 { display: inline-block; }
|
|
span.indice-1.valeur-1 { display: inline-block; }
|
|
span.indice-2.valeur-2 { display: inline-block; }
|
|
span.indice-3.valeur-3 { display: inline-block; }
|
|
span.indice-4.valeur-4 { display: inline-block; }
|
|
span.indice-5.valeur-5 { display: inline-block; }
|
|
}
|
|
}
|
|
|
|
#content div.cell div.airquality {
|
|
background-image: url($data_uri_atmo);
|
|
div.badge span {
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
span.airquality-1, span.airquality-2, span.airquality-3, span.airquality-4 { background: #54A725; }
|
|
span.airquality-5, span.airquality-6, span.airquality-7 { background: #F18500; }
|
|
span.airquality-8, span.airquality-9, span.airquality-10 { background: #E60002; }
|
|
div.tile-content p {
|
|
margin: 0;
|
|
}
|
|
&.expandable div.tile-content {
|
|
max-height: 50px;
|
|
}
|
|
}
|
|
|
|
#content div.cell div.badge.closed span {
|
|
color: white;
|
|
background: #AF0000;
|
|
}
|
|
|
|
#content div.cell div.badge.soon-to-be-closed span {
|
|
color: white;
|
|
background: #F15A24;
|
|
}
|
|
|
|
#content div.cell div.badge.open span {
|
|
color: white;
|
|
background: #88A80D;
|
|
}
|
|
|
|
#content div.cell div.tcl {
|
|
table.passings {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
span.line-number {
|
|
display: inline-block;
|
|
padding: 2px 5px;
|
|
}
|
|
td.passings {
|
|
text-align: right;
|
|
}
|
|
td.line-number { width: 2em; }
|
|
td.line-arrow { width: 1em; }
|
|
span.passings {
|
|
border-radius: 5px;
|
|
white-space: nowrap;
|
|
font-size: 80%;
|
|
span {
|
|
padding: 1.5ex 1ex;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
text-align: center;
|
|
background: #EEEDED;
|
|
}
|
|
span:first-child {
|
|
background: #444444;
|
|
color: white;
|
|
border-top-left-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
span:last-child {
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
#content div.cell div.aire-de-covoiturage,
|
|
#content div.cell div.bibliotheque,
|
|
#content div.cell div.taxi,
|
|
#content div.cell div.decheterie,
|
|
#content div.cell div.donnerie,
|
|
#content div.cell div.piscine,
|
|
#content div.cell div.silo-a-verre,
|
|
#content div.cell div.mairie,
|
|
#content div.cell div.producer-grandlyon,
|
|
#content div.cell div.mdr {
|
|
background-image: url($data_uri_grandlyon);
|
|
.phone {
|
|
margin: 2ex 0;
|
|
}
|
|
.phone span::before {
|
|
-font-family: FontAwesome;
|
|
-content: "\f095 "; /* phone */
|
|
}
|
|
.phone a {
|
|
text-transform: uppercase;
|
|
float: right;
|
|
}
|
|
div.schedule td { text-align: right; }
|
|
|
|
ul {
|
|
margin-left: 0;
|
|
padding-left: 1em;
|
|
li {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div.cell.map {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div#main-content br.clear {
|
|
display: none;
|
|
}
|
|
|
|
#content div.combo-cell-map {
|
|
height: calc(100vh - 65px);
|
|
}
|
|
|
|
#tile-popup {
|
|
margin: 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 3%;
|
|
z-index: 1000;
|
|
width: 90%;
|
|
}
|
|
|
|
div#nav > ul > li {
|
|
position: relative;
|
|
}
|
|
|
|
div#mapsearch {
|
|
z-index: 1000;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50px;
|
|
right: 10px;
|
|
input {
|
|
width: 100%;
|
|
padding: 1ex;
|
|
}
|
|
}
|
|
|
|
#content #columns > div.linkcell.back {
|
|
margin: 0 20px;
|
|
ul > li > a {
|
|
&::before {
|
|
content: "\2190\00a0";
|
|
}
|
|
background: transparent;
|
|
text-transform: uppercase;
|
|
}
|
|
& + div.page-intro {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
|
|
body.page-services {
|
|
background-image: url($data_uri_GNM__IllustrationSearch);
|
|
#content div.cell.page-intro h2 {
|
|
padding-right: 160px;
|
|
}
|
|
}
|
|
|
|
body.page-notifications {
|
|
background-image: url($data_uri_GNM__IllustrationTileNotification);
|
|
#content div.cell.notificationscell h2 {
|
|
padding-left: 10px;
|
|
padding-top: 10px;
|
|
padding-right: 160px;
|
|
}
|
|
}
|
|
|
|
body.page-mon-compte {
|
|
background-image: url($data_uri_GNM__IllustrationAccount);
|
|
#content div.cell.page-intro h2 {
|
|
padding-right: 135px;
|
|
}
|
|
}
|
|
|
|
body.page-mes-donnees {
|
|
background-image: url($data_uri_GNM__IllustrationData);
|
|
#content div.cell.page-intro h2 {
|
|
padding-right: 100px;
|
|
}
|
|
div.configjsoncell > div,
|
|
div.textcell > div {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
div#content div.profile-data,
|
|
div#content div.favorite-places {
|
|
margin-bottom: 1ex;
|
|
border-radius: 10px;
|
|
background: white;
|
|
h4, ul li {
|
|
font-size: 100%;
|
|
}
|
|
h4 {
|
|
padding: 10px;
|
|
margin: 0;
|
|
}
|
|
ul, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
li {
|
|
position: relative;
|
|
border-top: 1px solid $lightgray;
|
|
padding: 1ex;
|
|
> span, > a {
|
|
font-weight: bold;
|
|
}
|
|
> span::before, > a::before {
|
|
font-family: FontAwesome;
|
|
content: "\f041"; /* map-marker */
|
|
display: inline-block;
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
text-align: center;
|
|
margin-right: 1ex;
|
|
color: #444;
|
|
font-weight: normal;
|
|
}
|
|
> span.home::before {
|
|
content: "\f015"; /* home */
|
|
}
|
|
> span.birthdate::before {
|
|
content: "\f007"; /* profile */
|
|
}
|
|
> a.portfolio::before {
|
|
content: "\f0b1"; /* briefcase */
|
|
}
|
|
> span, > a {
|
|
padding: 10px;
|
|
display: block;
|
|
}
|
|
> a {
|
|
cursor: pointer;
|
|
}
|
|
form, form div {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 1ex;
|
|
right: 0;
|
|
button {
|
|
margin-right: 0;
|
|
background: transparent;
|
|
color: black;
|
|
box-shadow: none;
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.new-place {
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
@include vendor-prefix('transition', 'all 0.3s ease');
|
|
&.shown {
|
|
max-height: 200px;
|
|
}
|
|
form {
|
|
padding: 0 10px 10px 20px;
|
|
label {
|
|
color: #666;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
}
|
|
> div {
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
a.portfolio,
|
|
a.new-place {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
div#content #columns > div.linkcell.search-services,
|
|
div#content #columns > div.linkcell.signaler,
|
|
div#content #columns > div.wcsformcell.tile,
|
|
body.section-services div#content #columns > div.linkcell {
|
|
&.group-title {
|
|
h2::after {
|
|
content: none;
|
|
}
|
|
a {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
position: relative;
|
|
a.tile-link div.tile {
|
|
border-radius: 5px;
|
|
min-height: 50px;
|
|
border: 1px solid transparent;
|
|
}
|
|
a.tile-link:hover div.tile {
|
|
border: 1px solid white;
|
|
background-color: $cell-entry-hover-background;
|
|
}
|
|
a.tile-link::after {
|
|
content: "\2192"; /* -> */
|
|
color: #DEDADA;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&.wcsformcell,
|
|
&.tcl,
|
|
&.grandlyon,
|
|
&.lyon,
|
|
&.atmo,
|
|
&.onlymoov,
|
|
&.velov {
|
|
margin: 0 20px;
|
|
@media screen and (min-width: $desktop-limit) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.signaler div.tile-head {
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
div#content #columns > div.linkcell.search-services {
|
|
div.tile {
|
|
padding-left: 10px;
|
|
}
|
|
div.tile-head {
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
#content div.wcsformcell.tile,
|
|
#content div.linkcell {
|
|
@include vendor-prefix('transition', 'all 0.3s ease');
|
|
overflow: hidden;
|
|
max-height: 120px; /* required for section collapsing transition */
|
|
&.closed {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
padding-bottom: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse_animation {
|
|
0% { background: inherit; }
|
|
50% { background: white; }
|
|
100% { background: inherit; }
|
|
}
|
|
|
|
#nav .menu-index.pulse {
|
|
animation-name: pulse_animation;
|
|
animation-duration: 1500ms;
|
|
animation-iteration-count: 3;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
@keyframes move_bell_animation {
|
|
0% { transform: rotate(0deg); }
|
|
25% { transform: rotate(10deg); }
|
|
75% { transform: rotate(-10deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
div.cell.map {
|
|
font-size: 8px;
|
|
}
|
|
|
|
/* those symbols are wider, don't scale them back */
|
|
div.leaflet-marker-icon i.bicycle::before,
|
|
div.leaflet-marker-icon i.motorcycle::before {
|
|
transform: none;
|
|
}
|
|
|
|
body.section-m-y-rendre div.configjsoncell {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
z-index: 1000;
|
|
width: 26%;
|
|
left: 5%;
|
|
box-sizing: border-box;
|
|
&:nth-child(1) {
|
|
left: 37%;
|
|
}
|
|
&:nth-child(2) {
|
|
left: 69%;
|
|
}
|
|
div.goto-onlymoov {
|
|
background: white;
|
|
border-radius: 5px;
|
|
padding: 0.5ex 1ex;
|
|
&.CAR {
|
|
background: white url($data_uri_GNM__IconCar) 5px 5px no-repeat;
|
|
background-size: auto 30px;
|
|
}
|
|
&.BIKE {
|
|
background: white url($data_uri_GNM__IconBicycle) 5px 5px no-repeat;
|
|
background-size: auto 30px;
|
|
}
|
|
&.PT {
|
|
background: white url($data_uri_GNM__IconTram) 5px 5px no-repeat;
|
|
background-size: auto 30px;
|
|
}
|
|
}
|
|
div.duration {
|
|
font-weight: bold;
|
|
padding: 0.5ex 0 2ex 35px;
|
|
}
|
|
}
|
|
|
|
#similar-list > div {
|
|
position: relative;
|
|
min-height: 3em;
|
|
border: 2px solid #ccc;
|
|
border-radius: 1ex;
|
|
padding: 1ex;
|
|
padding-left: 3em;
|
|
margin-bottom: 1em;
|
|
.marker-counter {
|
|
background: $blue;
|
|
color: white;
|
|
display: inline-block;
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 100%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
line-height: 2em;
|
|
position: absolute;
|
|
left: 1ex;
|
|
}
|
|
.datetime,
|
|
.message {
|
|
display: block;
|
|
}
|
|
.datetime {
|
|
color: #666;
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
|
|
div.searchcell {
|
|
form {
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
input {
|
|
flex: 1 0 auto;
|
|
}
|
|
input, button {
|
|
margin: 0;
|
|
padding: 1ex;
|
|
height: 3.5em;
|
|
line-height: 2em;
|
|
background: white;
|
|
border: 0;
|
|
}
|
|
button.search-button {
|
|
margin-left: -1px;
|
|
background: $red;
|
|
color: white;
|
|
&::after {
|
|
font-family: FontAwesome;
|
|
content: "\f002"; /* search */
|
|
padding: 0 1em;
|
|
}
|
|
}
|
|
button.around-button {
|
|
margin-left: 1em;
|
|
background: $blue;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
padding-right: 1em;
|
|
padding-left: 1em;
|
|
span::before {
|
|
font-family: FontAwesome;
|
|
content: "\f041"; /* map-marker */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.alert {
|
|
display: none;
|
|
}
|
|
|
|
div#alert {
|
|
max-width: 80ex;
|
|
.tile-title {
|
|
padding-bottom: 1ex;
|
|
}
|
|
.tile-title h2 {
|
|
margin: 0;
|
|
}
|
|
.tile-title span.producer {
|
|
font-size: 12px;
|
|
color: #827979;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#content div.cell.selected {
|
|
box-shadow: inset 10px 0 0 #3C3D3F;
|
|
}
|
|
|
|
#content #sidebar div.cell.mairie-usager {
|
|
padding: 0;
|
|
a {
|
|
padding: 1ex 2ex;
|
|
display: block;
|
|
&.commune-villeurbanne {
|
|
background: #1A94AB;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
#similar div.qommon-map {
|
|
height: 60vh;
|
|
min-height: 280px;
|
|
}
|
|
|
|
#content div.cell.wcsformsofcategorycell {
|
|
background: white;
|
|
}
|
|
|
|
#content #sidebar div.cell.menucell {
|
|
padding: 0;
|
|
li a {
|
|
padding-left: 40px;
|
|
font-weight: bold;
|
|
&::before {
|
|
content: "\2192"; /* -> */
|
|
position: absolute;
|
|
left: 15px;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
li.selected a {
|
|
color: $red;
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
background: transparent;
|
|
li {
|
|
margin-bottom: 2px;
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
#searchbox + #main-content-wrapper #sidebar {
|
|
margin-left: 0;
|
|
.cell {
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
.gnm-villeurbanne div#top-bar,
|
|
.gnm-villeurbanne div#hero {
|
|
background: #1A94AB;
|
|
color: white;
|
|
}
|
|
|
|
@media screen and (max-width: $very-small-limit) {
|
|
body {
|
|
font-size: 12px;
|
|
}
|
|
div#nav {
|
|
font-size: 10px;
|
|
> ul > li > a {
|
|
padding-top: 41px;
|
|
padding-bottom: 4px;
|
|
}
|
|
}
|
|
}
|