180 lines
3.1 KiB
SCSS
180 lines
3.1 KiB
SCSS
// @import './node_modules/@mdi/font/scss/materialdesignicons.scss';
|
|
@import "./base.scss";
|
|
@import "./colors.scss";
|
|
@import "./common.scss";
|
|
@import "./layout.scss";
|
|
@import "./fonts/snap_it/snap_it.css";
|
|
@import "./fonts/avara/avara.css";
|
|
@import "./fonts/public-sans/public-sans.css";
|
|
|
|
body{
|
|
background-color: $back;
|
|
font-family: 'public_sans';
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
}
|
|
|
|
#app{
|
|
|
|
}
|
|
|
|
#app>header#header{
|
|
// background-color: $front;
|
|
pointer-events: none;
|
|
.row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
pointer-events: none;
|
|
>*{
|
|
margin-right: 1em;
|
|
pointer-events: all;
|
|
}
|
|
// &.top{
|
|
// }
|
|
}
|
|
h1.row{
|
|
font-family: "avara";
|
|
span.title{
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#main-content{
|
|
|
|
#map-backgrounds{
|
|
.map-bg-canvas{
|
|
mix-blend-mode: multiply;
|
|
// filter: contrast(170%);
|
|
&.gradient{
|
|
// filter: blur(10px);
|
|
}
|
|
&.trame{
|
|
// display:none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#map-concernements{
|
|
|
|
}
|
|
|
|
#map-nav{
|
|
pointer-events: none;
|
|
ul{
|
|
display: flex;
|
|
flex-flow: row;
|
|
gap: 1em;
|
|
pointer-events: none;
|
|
li{
|
|
list-style: none;
|
|
pointer-events: all;
|
|
a{
|
|
@include btn();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#content{
|
|
section.concernement{
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
box-sizing: border-box;
|
|
width:450px;
|
|
height: 100%;
|
|
padding: 5rem 1rem 1rem;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
header, section{
|
|
padding:0 0 2em 0;
|
|
}
|
|
label{
|
|
display: block;
|
|
font-weight: 100;
|
|
font-size: 0.882em;
|
|
padding: 0 0 1em 0;
|
|
}
|
|
header{
|
|
h2{
|
|
font-weight: 400;
|
|
font-size: 1.512em;
|
|
}
|
|
}
|
|
section>div{
|
|
font-size: 1em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
#map-popup{
|
|
position: absolute;
|
|
z-index: 10;
|
|
// outline: 1px solid red;
|
|
// top:0;
|
|
// left: 0;
|
|
|
|
.popup-content-wrapper{
|
|
background-color: white;
|
|
padding: 1em;
|
|
border-radius: 3px;
|
|
// min-width: 10em;
|
|
// max-width: 30em;
|
|
h1{
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
&:before{
|
|
content: "";
|
|
display: block;
|
|
height: 0;
|
|
width: 2.9em;
|
|
border-top: 1px solid #01ffe2;
|
|
position: absolute;
|
|
}
|
|
|
|
&[pos="top-right"]{
|
|
padding: 0 0 2em 2em;
|
|
&:before{
|
|
bottom: 0;
|
|
left: 0;
|
|
transform-origin: 0 0;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
&[pos="bottom-right"]{
|
|
padding: 2em 0 0 2em;
|
|
&:before{
|
|
top: 0;
|
|
left: 0;
|
|
transform-origin: 0 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
&[pos="top-left"]{
|
|
padding: 0 2em 2em 0;
|
|
&:before{
|
|
bottom: 0;
|
|
right: 0;
|
|
transform-origin: right bottom;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
&[pos="bottom-left"]{
|
|
padding: 2em 2em 0 0;
|
|
&:before{
|
|
top: 0;
|
|
right: 0;
|
|
transform-origin: right top;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|