techtrick-svgmaps-2.css

/******** SVG MAPS *************/

/******************** Custom Style *************************/

/* Path stroke : lines between whapes */
#style1 {
    stroke: white;
    stroke-width: 2px;
}


/************ Conteneur France ***************/
.svgmap-france {
    width: 500px;
    margin: auto;
    position: relative;
    background-color: white;
}
/* France Métropole */
.svgmap-francemetro {
    padding: 0;
}


/********** DROM ************/
/* Position en colonne left */
.svgmap-drom-left ~ .svgmap-francemetro {
    padding-left: 17%;
}
.svgmap-drom.svgmap-drom-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 1%;
    top: 2%;
    width: 12.1%;
}
/* Position en colonne right */
.svgmap-drom.svgmap-drom-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 1%;
    top: 3%;
    width: 11%;
}
/* Position en ligne bottom */
.svgmap-drom-bottom ~ .svgmap-francemetro {
    padding-bottom: 16%;
}
.svgmap-drom.svgmap-drom-bottom {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 1%;
    width: 90%;
    height: 17%;
}
.svgmap-drom.svgmap-drom-bottom > * {
    margin: 2%;
}

/****** Ile de France ZOOM ********/
/* Position Top Left */
.svgmap-idf-top-left ~ .svgmap-francemetro {
    padding-top: 7%;
    padding-left: 7%;
}
.svgmap-idf.svgmap-idf-top-left {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 20%;
}
/* Position Top Right */
.svgmap-idf.svgmap-idf-top-right {
    position: absolute;
    right: 10%;
    top: 3%;
    width: 20%;
}
.svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-top: 8%;
}


/* DROM Right + IDF Top Right */
.svgmap-drom-right ~ .svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-right: 3%;
}
.svgmap-drom-right ~ .svgmap-idf-top-right {
    right: 16%;
}

/* DROM Right + IDF Top Left */
.svgmap-drom-right ~ .svgmap-idf.svgmap-idf-top-left {
    left: 3%;
}

/* DROM Left + IDF Top Right */
.svgmap-drom-left ~ .svgmap-idf-top-right {
    right: 1%;
}

/* DROM Left + IDF Top Left */
.svgmap-drom-left ~ .svgmap-francemetro ~ .svgmap-idf.svgmap-idf-top-left {
    padding-top: 11%;
    padding-left: 20%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left ~ .svgmap-francemetro{
    padding-left: 22%;
    padding-top: 5%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left {
    left: 17%;
    width: 17%;
}


/* Some CSS override to manage picto sizes */
.ods-svginliner__svg-container {
    height: 100%;
}
.odswidget.odswidget-picto {
    height: 100%;
}

/* None styles */
.svgmap-idf-none, .svgmap-drom-none {
    display: none;
}