entrees block is displaying well and interact with map on mouse hover, map nodes are well drawn centered, map performance improvements, added domain contrib module and configured domain for mobile display
This commit is contained in:
Bachir Soussi Chiadmi
+154
-57
@@ -32,29 +32,22 @@ main[role="main"] {
|
||||
background-color: rgba(255, 255, 255, 0.9); }
|
||||
|
||||
footer[role="contentinfo"] {
|
||||
outline: 1px solid pink;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%; }
|
||||
|
||||
canvas#edlp-map {
|
||||
outline: 1px solid grey; }
|
||||
|
||||
footer {
|
||||
text-align: center; }
|
||||
display: table;
|
||||
padding: 0 0 0.5em 0; }
|
||||
footer > .region {
|
||||
outline: 1px dotted pink; }
|
||||
display: table-cell; }
|
||||
footer .region-footer-left {
|
||||
float: left;
|
||||
text-align: left; }
|
||||
footer .region-footer-center {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align: center; }
|
||||
footer .region-footer-right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-right: 5em; }
|
||||
min-width: 30px; }
|
||||
footer nav.block-menu {
|
||||
display: inline-block; }
|
||||
footer nav.block-menu ul {
|
||||
@@ -86,7 +79,8 @@ footer {
|
||||
-webkit-transform-origin: left bottom;
|
||||
transform-origin: left bottom;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg); }
|
||||
transform: rotateZ(-45deg);
|
||||
white-space: nowrap; }
|
||||
footer .block-language ul li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -106,7 +100,10 @@ footer {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0 1.5em 0 0;
|
||||
padding: 0; }
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
pointer-events: none; }
|
||||
footer .block-block-edlp-entrees ul li a {
|
||||
position: absolute;
|
||||
-webkit-transform-origin: left bottom;
|
||||
@@ -118,48 +115,148 @@ footer {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.756em;
|
||||
white-space: nowrap; }
|
||||
footer .block-block-edlp-entrees ul li a:before {
|
||||
content: "";
|
||||
footer .block-block-edlp-entrees ul li span.oblique-wrapper {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li a.term-134:before {
|
||||
border-color: #2b8f2f; }
|
||||
footer .block-block-edlp-entrees ul li a.term-121:before {
|
||||
border-color: #3a33b6; }
|
||||
footer .block-block-edlp-entrees ul li a.term-125:before {
|
||||
border-color: #2c9f57; }
|
||||
footer .block-block-edlp-entrees ul li a.term-119:before {
|
||||
border-color: #c48978; }
|
||||
footer .block-block-edlp-entrees ul li a.term-132:before {
|
||||
border-color: #5270bb; }
|
||||
footer .block-block-edlp-entrees ul li a.term-122:before {
|
||||
border-color: #fb54d3; }
|
||||
footer .block-block-edlp-entrees ul li a.term-129:before {
|
||||
border-color: #e07483; }
|
||||
footer .block-block-edlp-entrees ul li a.term-120:before {
|
||||
border-color: #655845; }
|
||||
footer .block-block-edlp-entrees ul li a.term-130:before {
|
||||
border-color: #7e0868; }
|
||||
footer .block-block-edlp-entrees ul li a.term-118:before {
|
||||
border-color: #0e7121; }
|
||||
footer .block-block-edlp-entrees ul li a.term-127:before {
|
||||
border-color: #dabd42; }
|
||||
footer .block-block-edlp-entrees ul li a.term-133:before {
|
||||
border-color: #0399bb; }
|
||||
footer .block-block-edlp-entrees ul li a.term-128:before {
|
||||
border-color: #399a1c; }
|
||||
footer .block-block-edlp-entrees ul li a.term-124:before {
|
||||
border-color: #708540; }
|
||||
footer .block-block-edlp-entrees ul li a.term-116:before {
|
||||
border-color: #191bff; }
|
||||
footer .block-block-edlp-entrees ul li a.term-117:before {
|
||||
border-color: #279d84; }
|
||||
footer .block-block-edlp-entrees ul li a.term-131:before {
|
||||
border-color: #5219ab; }
|
||||
footer .block-block-edlp-entrees ul li a.term-126:before {
|
||||
border-color: #d49cb6; }
|
||||
footer .block-block-edlp-entrees ul li a.term-123:before {
|
||||
border-color: #497715; }
|
||||
position: relative;
|
||||
width: 1.5em; }
|
||||
footer .block-block-edlp-entrees ul li span.oblique-wrapper a {
|
||||
text-transform: none; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link {
|
||||
pointer-events: all; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='134']:before {
|
||||
border-color: #2b8f2f;
|
||||
background-color: #2b8f2f; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='121']:before {
|
||||
border-color: #3a33b6;
|
||||
background-color: #3a33b6; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='125']:before {
|
||||
border-color: #2c9f57;
|
||||
background-color: #2c9f57; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='119']:before {
|
||||
border-color: #c48978;
|
||||
background-color: #c48978; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='132']:before {
|
||||
border-color: #5270bb;
|
||||
background-color: #5270bb; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='122']:before {
|
||||
border-color: #fb54d3;
|
||||
background-color: #fb54d3; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='129']:before {
|
||||
border-color: #e07483;
|
||||
background-color: #e07483; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='120']:before {
|
||||
border-color: #655845;
|
||||
background-color: #655845; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='130']:before {
|
||||
border-color: #7e0868;
|
||||
background-color: #7e0868; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='118']:before {
|
||||
border-color: #0e7121;
|
||||
background-color: #0e7121; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='127']:before {
|
||||
border-color: #dabd42;
|
||||
background-color: #dabd42; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='133']:before {
|
||||
border-color: #0399bb;
|
||||
background-color: #0399bb; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='128']:before {
|
||||
border-color: #399a1c;
|
||||
background-color: #399a1c; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='124']:before {
|
||||
border-color: #708540;
|
||||
background-color: #708540; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='116']:before {
|
||||
border-color: #191bff;
|
||||
background-color: #191bff; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='117']:before {
|
||||
border-color: #279d84;
|
||||
background-color: #279d84; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='131']:before {
|
||||
border-color: #5219ab;
|
||||
background-color: #5219ab; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='126']:before {
|
||||
border-color: #d49cb6;
|
||||
background-color: #d49cb6; }
|
||||
footer .block-block-edlp-entrees ul li a.term-link[tid='123']:before {
|
||||
border-color: #497715;
|
||||
background-color: #497715; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
-webkit-transition-property: width,opacity;
|
||||
transition-property: width,opacity; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content .term-description {
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
text-align: left;
|
||||
width: 250px;
|
||||
white-space: normal;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 0.5em; }
|
||||
footer .block-block-edlp-entrees ul li .entree-content .term-description p {
|
||||
font-size: 0.65em; }
|
||||
footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before {
|
||||
background-color: #fff !important; }
|
||||
footer .block-block-edlp-entrees ul li.opened .entree-content {
|
||||
width: 350px;
|
||||
opacity: 1; }
|
||||
footer #block-userlogin {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px; }
|
||||
footer #block-userlogin h2 {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../img/user.svg);
|
||||
background-size: contain;
|
||||
text-indent: 40px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
cursor: pointer; }
|
||||
footer #block-userlogin .block-content {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
padding: 0.5em;
|
||||
padding-bottom: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
overflow: hidden;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 0px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
-webkit-transition-property: height,opacity;
|
||||
transition-property: height,opacity; }
|
||||
footer #block-userlogin .block-content form {
|
||||
font-size: 0.75em; }
|
||||
footer #block-userlogin .block-content .item-list ul {
|
||||
margin: 0; }
|
||||
footer #block-userlogin .block-content .item-list li {
|
||||
margin: 0;
|
||||
list-style: none; }
|
||||
footer #block-userlogin .block-content .item-list li a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 0.75em;
|
||||
white-space: nowrap; }
|
||||
footer #block-userlogin:hover .block-content {
|
||||
height: 200px;
|
||||
opacity: 1;
|
||||
pointer-events: auto; }
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="svg5959"
|
||||
version="1.1"
|
||||
viewBox="0 0 5.2916665 5.2916668"
|
||||
height="20"
|
||||
width="20">
|
||||
<defs
|
||||
id="defs5953" />
|
||||
<metadata
|
||||
id="metadata5956">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(0,-291.70832)"
|
||||
id="layer1">
|
||||
<path
|
||||
id="path4494"
|
||||
style="fill:#000004;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35277775"
|
||||
d="m 2.5055931,294.43377 c -0.2106083,-0.21096 -0.3167945,-0.4646 -0.3167945,-0.76059 0,-0.29633 0.1061862,-0.54998 0.3167945,-0.75953 0.2109611,-0.21202 0.4631972,-0.31679 0.7595306,-0.31679 0.2963333,0 0.5496277,0.10477 0.762,0.31679 0.20955,0.20955 0.314325,0.4632 0.314325,0.75953 0,0.29599 -0.104775,0.54963 -0.314325,0.76059 -0.2123723,0.21096 -0.4656667,0.31539 -0.762,0.31539 -0.2963334,0 -0.5485695,-0.10443 -0.7595306,-0.31539 z m -2.04364158,1.64959 c -0.057856,0.0593 -0.089253,0.13088 -0.089253,0.21626 0,0.084 0.029986,0.15557 0.092075,0.21484 0.059267,0.0621 0.1308806,0.0924 0.2166056,0.0924 0.085372,0 0.1583972,-0.0303 0.2148416,-0.0924 L 2.3073318,295.0663 c 0.2864555,0.19827 0.6050139,0.29775 0.9577917,0.29775 0.2286,0 0.449086,-0.0441 0.658636,-0.13229 0.208139,-0.0896 0.3884084,-0.20955 0.5401027,-0.35984 0.1502833,-0.1531 0.271639,-0.33337 0.3612446,-0.54151 0.088194,-0.20955 0.1308804,-0.42863 0.1308804,-0.65723 0,-0.23036 -0.044097,-0.44802 -0.1308804,-0.65616 -0.089606,-0.21061 -0.2109613,-0.38982 -0.3612446,-0.54152 -0.1516943,-0.15169 -0.3319637,-0.27128 -0.5401027,-0.35948 -0.20955,-0.0896 -0.430036,-0.13511 -0.658636,-0.13511 -0.228953,0 -0.4480278,0.0455 -0.6561667,0.13511 -0.2091973,0.0882 -0.3898195,0.20779 -0.5401028,0.35948 -0.1527528,0.1517 -0.2726972,0.33091 -0.3608917,0.54152 -0.089605,0.20814 -0.1337027,0.4258 -0.1337027,0.65616 0,0.35137 0.099131,0.67099 0.2977444,0.95744 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="svg5959"
|
||||
version="1.1"
|
||||
viewBox="0 0 5.2916665 5.2916668"
|
||||
height="20"
|
||||
width="20">
|
||||
<defs
|
||||
id="defs5953" />
|
||||
<metadata
|
||||
id="metadata5956">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(0,-291.70832)"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g4490"
|
||||
transform="matrix(0.35277777,0,0,0.35277777,-340.14346,97.825134)">
|
||||
<path
|
||||
id="path4492"
|
||||
style="fill:none;stroke:#000007;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 976.852,561.051 c 0,0.582 -0.168,1.086 -0.508,1.5 -0.328,0.418 -0.731,0.629 -1.203,0.629 h -6.856 c -0.469,0 -0.875,-0.211 -1.211,-0.629 -0.332,-0.414 -0.496,-0.918 -0.496,-1.5 0,-0.453 0.02,-0.883 0.063,-1.285 0.05,-0.407 0.132,-0.813 0.257,-1.219 0.125,-0.41 0.278,-0.762 0.465,-1.051 0.196,-0.297 0.446,-0.535 0.754,-0.715 0.317,-0.187 0.68,-0.281 1.086,-0.281 0.699,0.684 1.539,1.027 2.512,1.027 0.973,0 1.812,-0.343 2.512,-1.027 0.406,0 0.765,0.094 1.074,0.281 0.316,0.18 0.57,0.418 0.758,0.715 0.191,0.289 0.347,0.641 0.472,1.051 0.121,0.406 0.207,0.812 0.25,1.219 0.047,0.402 0.071,0.832 0.071,1.285 z m -2.961,-9.293 c 0.605,0.597 0.906,1.324 0.906,2.172 0,0.851 -0.301,1.582 -0.906,2.183 -0.602,0.602 -1.325,0.903 -2.176,0.903 -0.852,0 -1.578,-0.301 -2.184,-0.903 -0.597,-0.601 -0.898,-1.332 -0.898,-2.183 0,-0.848 0.301,-1.575 0.898,-2.172 0.606,-0.606 1.332,-0.91 2.184,-0.91 0.851,0 1.574,0.304 2.176,0.91 z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -24,7 +24,6 @@ body, html{
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
div.layout-container{
|
||||
position: relative;
|
||||
width:100%; height:100%;
|
||||
@@ -40,18 +39,19 @@ header[role="banner"]{
|
||||
|
||||
main[role="main"]{
|
||||
outline:1px solid green;
|
||||
background-color: rgba(255,255,255, 0.9);
|
||||
background-color: $transparent-bg;
|
||||
// display: none;
|
||||
}
|
||||
|
||||
footer[role="contentinfo"]{
|
||||
outline: 1px solid pink;
|
||||
// outline: 1px solid pink;
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
canvas#edlp-map{
|
||||
outline: 1px solid grey;
|
||||
// outline: 1px solid grey;
|
||||
}
|
||||
|
||||
@mixin oblique-list {
|
||||
@@ -63,6 +63,7 @@ canvas#edlp-map{
|
||||
padding: 0;
|
||||
a{
|
||||
position: absolute;
|
||||
// display:inline-block;
|
||||
transform-origin: left bottom;
|
||||
transform: rotateZ(-45deg);
|
||||
color: #000;
|
||||
@@ -74,23 +75,23 @@ canvas#edlp-map{
|
||||
}
|
||||
|
||||
footer{
|
||||
text-align: center;
|
||||
// text-align: center;
|
||||
display: table;
|
||||
padding: 0 0 0.5em 0;
|
||||
>.region{
|
||||
outline: 1px dotted pink;
|
||||
display: table-cell;
|
||||
// outline: 1px dotted purple;
|
||||
// position: relative;
|
||||
}
|
||||
.region-footer-left{
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.region-footer-center{
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.region-footer-right{
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-right: 5em;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
nav.block-menu{
|
||||
@@ -112,6 +113,7 @@ footer{
|
||||
padding:0 0 0 0.5em;
|
||||
transform-origin: left bottom;
|
||||
transform: rotateZ(-45deg);
|
||||
white-space: nowrap;
|
||||
li{
|
||||
margin:0; padding:0;
|
||||
list-style: none;
|
||||
@@ -133,10 +135,25 @@ footer{
|
||||
|
||||
.block-block-edlp-entrees{
|
||||
display: inline-block;
|
||||
// vertical-align: top;
|
||||
ul{
|
||||
li{
|
||||
@include oblique-list;
|
||||
a{
|
||||
margin:0;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
span.oblique-wrapper{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width:1.5em;
|
||||
a{
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.term-link{
|
||||
pointer-events: all;
|
||||
// bottom: 0;
|
||||
&:before{
|
||||
content: "";
|
||||
display:inline-block;
|
||||
@@ -145,26 +162,132 @@ footer{
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
&.term-134:before{border-color: $entree-color-134;}
|
||||
&.term-121:before{border-color: $entree-color-121;}
|
||||
&.term-125:before{border-color: $entree-color-125;}
|
||||
&.term-119:before{border-color: $entree-color-119;}
|
||||
&.term-132:before{border-color: $entree-color-132;}
|
||||
&.term-122:before{border-color: $entree-color-122;}
|
||||
&.term-129:before{border-color: $entree-color-129;}
|
||||
&.term-120:before{border-color: $entree-color-120;}
|
||||
&.term-130:before{border-color: $entree-color-130;}
|
||||
&.term-118:before{border-color: $entree-color-118;}
|
||||
&.term-127:before{border-color: $entree-color-127;}
|
||||
&.term-133:before{border-color: $entree-color-133;}
|
||||
&.term-128:before{border-color: $entree-color-128;}
|
||||
&.term-124:before{border-color: $entree-color-124;}
|
||||
&.term-116:before{border-color: $entree-color-116;}
|
||||
&.term-117:before{border-color: $entree-color-117;}
|
||||
&.term-131:before{border-color: $entree-color-131;}
|
||||
&.term-126:before{border-color: $entree-color-126;}
|
||||
&.term-123:before{border-color: $entree-color-123;}
|
||||
&[tid='134']:before{border-color: $e-col-134;background-color: $e-col-134;}
|
||||
&[tid='121']:before{border-color: $e-col-121;background-color: $e-col-121;}
|
||||
&[tid='125']:before{border-color: $e-col-125;background-color: $e-col-125;}
|
||||
&[tid='119']:before{border-color: $e-col-119;background-color: $e-col-119;}
|
||||
&[tid='132']:before{border-color: $e-col-132;background-color: $e-col-132;}
|
||||
&[tid='122']:before{border-color: $e-col-122;background-color: $e-col-122;}
|
||||
&[tid='129']:before{border-color: $e-col-129;background-color: $e-col-129;}
|
||||
&[tid='120']:before{border-color: $e-col-120;background-color: $e-col-120;}
|
||||
&[tid='130']:before{border-color: $e-col-130;background-color: $e-col-130;}
|
||||
&[tid='118']:before{border-color: $e-col-118;background-color: $e-col-118;}
|
||||
&[tid='127']:before{border-color: $e-col-127;background-color: $e-col-127;}
|
||||
&[tid='133']:before{border-color: $e-col-133;background-color: $e-col-133;}
|
||||
&[tid='128']:before{border-color: $e-col-128;background-color: $e-col-128;}
|
||||
&[tid='124']:before{border-color: $e-col-124;background-color: $e-col-124;}
|
||||
&[tid='116']:before{border-color: $e-col-116;background-color: $e-col-116;}
|
||||
&[tid='117']:before{border-color: $e-col-117;background-color: $e-col-117;}
|
||||
&[tid='131']:before{border-color: $e-col-131;background-color: $e-col-131;}
|
||||
&[tid='126']:before{border-color: $e-col-126;background-color: $e-col-126;}
|
||||
&[tid='123']:before{border-color: $e-col-123;background-color: $e-col-123;}
|
||||
// &.highlighted{
|
||||
// color:red;
|
||||
// }
|
||||
}
|
||||
|
||||
.entree-content{
|
||||
display: inline-block;
|
||||
// outline: 1px solid green;
|
||||
width:0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: all 300ms ease-in-out;
|
||||
transition-property: width,opacity;
|
||||
.term-description{
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
text-align: left;
|
||||
width:250px;
|
||||
white-space: normal;
|
||||
background-color: $transparent-bg;
|
||||
padding:0.5em;
|
||||
p{
|
||||
font-size: 0.65em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// &.highlighted{
|
||||
// a.term_link{
|
||||
// color: red;
|
||||
// }
|
||||
// }
|
||||
&:not(.opened){
|
||||
a.term-link:not(:hover):not(.highlighted):before{
|
||||
background-color: #fff!important;
|
||||
}
|
||||
}
|
||||
&.opened{
|
||||
.entree-content{
|
||||
width:350px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// &:not(:first-of-type) .entree-content{display: none;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#block-userlogin{
|
||||
// outline: 1px solid blue;
|
||||
$wh:20px;
|
||||
position: relative;
|
||||
width:$wh; height: $wh;
|
||||
// background-color: blue;
|
||||
h2{
|
||||
position: relative;
|
||||
width:$wh; height:$wh;
|
||||
background-image: url(../../img/user.svg);
|
||||
// background-color: red;
|
||||
background-size: contain;
|
||||
text-indent: $wh*2;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.block-content{
|
||||
z-index: 0;
|
||||
position:absolute;
|
||||
right:0;bottom:$wh;
|
||||
padding:0.5em;
|
||||
padding-bottom: 20px;
|
||||
background-color: $transparent-bg;
|
||||
overflow: hidden;
|
||||
box-sizing:border-box;
|
||||
height: 0px;
|
||||
opacity:0;
|
||||
pointer-events:none;
|
||||
transition: all 0.5s ease-in-out;
|
||||
transition-property: height,opacity;
|
||||
// &:hover{
|
||||
// height:200px;
|
||||
// opacity:1;
|
||||
// pointer-events: auto;
|
||||
// }
|
||||
form{
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.item-list{
|
||||
ul{margin:0;}
|
||||
li{
|
||||
margin:0;
|
||||
list-style: none;
|
||||
a{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 0.75em;
|
||||
white-space:nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.block-content{
|
||||
height:200px;
|
||||
opacity: 1;
|
||||
pointer-events:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
$entree-color-130: rgb(75, 143, 126);
|
||||
$entree-color-121: rgb(134, 142, 36);
|
||||
$entree-color-134: rgb(43, 143, 47);
|
||||
$entree-color-121: rgb(58, 51, 182);
|
||||
$entree-color-125: rgb(44, 159, 87);
|
||||
$entree-color-119: rgb(196, 137, 120);
|
||||
$entree-color-132: rgb(82, 112, 187);
|
||||
$entree-color-122: rgb(251, 84, 211);
|
||||
$entree-color-129: rgb(224, 116, 131);
|
||||
$entree-color-120: rgb(101, 88, 69);
|
||||
$entree-color-130: rgb(126, 8, 104);
|
||||
$entree-color-118: rgb(14, 113, 33);
|
||||
$entree-color-127: rgb(218, 189, 66);
|
||||
$entree-color-133: rgb(3, 153, 187);
|
||||
$entree-color-128: rgb(57, 154, 28);
|
||||
$entree-color-124: rgb(112, 133, 64);
|
||||
$entree-color-116: rgb(25, 27, 255);
|
||||
$entree-color-117: rgb(39, 157, 132);
|
||||
$entree-color-131: rgb(82, 25, 171);
|
||||
$entree-color-126: rgb(212, 156, 182);
|
||||
$entree-color-123: rgb(73, 119, 21);
|
||||
$transparent-bg: rgba(255,255,255, 0.9);
|
||||
|
||||
$e-col-130: rgb(75, 143, 126);
|
||||
$e-col-121: rgb(134, 142, 36);
|
||||
$e-col-134: rgb(43, 143, 47);
|
||||
$e-col-121: rgb(58, 51, 182);
|
||||
$e-col-125: rgb(44, 159, 87);
|
||||
$e-col-119: rgb(196, 137, 120);
|
||||
$e-col-132: rgb(82, 112, 187);
|
||||
$e-col-122: rgb(251, 84, 211);
|
||||
$e-col-129: rgb(224, 116, 131);
|
||||
$e-col-120: rgb(101, 88, 69);
|
||||
$e-col-130: rgb(126, 8, 104);
|
||||
$e-col-118: rgb(14, 113, 33);
|
||||
$e-col-127: rgb(218, 189, 66);
|
||||
$e-col-133: rgb(3, 153, 187);
|
||||
$e-col-128: rgb(57, 154, 28);
|
||||
$e-col-124: rgb(112, 133, 64);
|
||||
$e-col-116: rgb(25, 27, 255);
|
||||
$e-col-117: rgb(39, 157, 132);
|
||||
$e-col-131: rgb(82, 25, 171);
|
||||
$e-col-126: rgb(212, 156, 182);
|
||||
$e-col-123: rgb(73, 119, 21);
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Functions to support theming in the edlp theme.
|
||||
*/
|
||||
|
||||
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
|
||||
// function edlptheme_preprocess_input(&$vars){
|
||||
// dsm($vars, 'vars');
|
||||
// $vars['attributes']['placeholder'] = "salut";
|
||||
// }
|
||||
|
||||
/**
|
||||
* Implements hook_form_alter
|
||||
*/
|
||||
function edlptheme_form_user_login_form_alter(&$form, FormStateInterface $form_state, $form_id) {
|
||||
// dpm($form_id, 'form_id');
|
||||
// dpm($form, 'form');
|
||||
$form['name']['#attributes']['placeholder'] = (string) $form['name']['#title'];
|
||||
unset($form['name']['#title']);
|
||||
$form['pass']['#attributes']['placeholder'] = (string) $form['pass']['#title'];
|
||||
unset($form['pass']['#title']);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a block.
|
||||
*
|
||||
* Available variables:
|
||||
* - plugin_id: The ID of the block implementation.
|
||||
* - label: The configured label of the block if visible.
|
||||
* - configuration: A list of the block's configuration values.
|
||||
* - label: The configured label for the block.
|
||||
* - label_display: The display settings for the label.
|
||||
* - provider: The module or other provider that provided this block plugin.
|
||||
* - Block plugin specific settings will also be stored here.
|
||||
* - content: The content of this block.
|
||||
* - attributes: array of HTML attributes populated by modules, intended to
|
||||
* be added to the main container tag of this template.
|
||||
* - id: A valid HTML ID and guaranteed unique.
|
||||
* - title_attributes: Same as attributes, except applied to the main title
|
||||
* tag that appears in the template.
|
||||
* - title_prefix: Additional output populated by modules, intended to be
|
||||
* displayed in front of the main title tag that appears in the template.
|
||||
* - title_suffix: Additional output populated by modules, intended to be
|
||||
* displayed after the main title tag that appears in the template.
|
||||
*
|
||||
* @see template_preprocess_block()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div{{ attributes }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
<div class="block-content">
|
||||
{% block content %}
|
||||
{{ content }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,96 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation for a form element.
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: HTML attributes for the containing element.
|
||||
* - errors: (optional) Any errors for this form element, may not be set.
|
||||
* - prefix: (optional) The form element prefix, may not be set.
|
||||
* - suffix: (optional) The form element suffix, may not be set.
|
||||
* - required: The required marker, or empty if the associated form element is
|
||||
* not required.
|
||||
* - type: The type of the element.
|
||||
* - name: The name of the element.
|
||||
* - label: A rendered label element.
|
||||
* - label_display: Label display setting. It can have these values:
|
||||
* - before: The label is output before the element. This is the default.
|
||||
* The label includes the #title and the required marker, if #required.
|
||||
* - after: The label is output after the element. For example, this is used
|
||||
* for radio and checkbox #type elements. If the #title is empty but the
|
||||
* field is #required, the label will contain only the required marker.
|
||||
* - invisible: Labels are critical for screen readers to enable them to
|
||||
* properly navigate through forms but can be visually distracting. This
|
||||
* property hides the label for everyone except screen readers.
|
||||
* - attribute: Set the title attribute on the element to create a tooltip but
|
||||
* output no label element. This is supported only for checkboxes and radios
|
||||
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
|
||||
* It is used where a visual label is not needed, such as a table of
|
||||
* checkboxes where the row and column provide the context. The tooltip will
|
||||
* include the title and required marker.
|
||||
* - description: (optional) A list of description properties containing:
|
||||
* - content: A description of the form element, may not be set.
|
||||
* - attributes: (optional) A list of HTML attributes to apply to the
|
||||
* description content wrapper. Will only be set when description is set.
|
||||
* - description_display: Description display setting. It can have these values:
|
||||
* - before: The description is output before the element.
|
||||
* - after: The description is output after the element. This is the default
|
||||
* value.
|
||||
* - invisible: The description is output after the element, hidden visually
|
||||
* but available to screen readers.
|
||||
* - disabled: True if the element is disabled.
|
||||
* - title_display: Title display setting.
|
||||
*
|
||||
* @see template_preprocess_form_element()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set classes = [
|
||||
'js-form-item',
|
||||
'form-item',
|
||||
'js-form-type-' ~ type|clean_class,
|
||||
'form-item-' ~ name|clean_class,
|
||||
'js-form-item-' ~ name|clean_class,
|
||||
title_display not in ['after', 'before'] ? 'form-no-label',
|
||||
disabled == 'disabled' ? 'form-disabled',
|
||||
errors ? 'form-item--error',
|
||||
]
|
||||
%}
|
||||
{%
|
||||
set description_classes = [
|
||||
'description',
|
||||
description_display == 'invisible' ? 'visually-hidden',
|
||||
]
|
||||
%}
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
{% if label_display in ['before', 'invisible'] %}
|
||||
{{ label }}
|
||||
{% endif %}
|
||||
{% if prefix is not empty %}
|
||||
<span class="field-prefix">{{ prefix }}</span>
|
||||
{% endif %}
|
||||
{% if description_display == 'before' and description.content %}
|
||||
<div{{ description.attributes }}>
|
||||
{{ description.content }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{{ children }}
|
||||
{% if suffix is not empty %}
|
||||
<span class="field-suffix">{{ suffix }}</span>
|
||||
{% endif %}
|
||||
{% if label_display == 'after' %}
|
||||
{{ label }}
|
||||
{% endif %}
|
||||
{% if errors %}
|
||||
<div class="form-item--error-message">
|
||||
{{ errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if description_display in ['after', 'invisible'] and description.content %}
|
||||
<div{{ description.attributes.addClass(description_classes) }}>
|
||||
{{ description.content }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation for an 'input' #type form element.
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: A list of HTML attributes for the input element.
|
||||
* - children: Optional additional rendered elements.
|
||||
*
|
||||
* @see template_preprocess_input()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<input{{ attributes }} />{{ children }}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Functions to support theming in the edlp theme.
|
||||
*/
|
||||
Reference in New Issue
Block a user