improved footer elements display
This commit is contained in:
@@ -63,7 +63,7 @@ canvas#edlp-map{
|
||||
padding: 0;
|
||||
a{
|
||||
position: absolute;
|
||||
// display:inline-block;
|
||||
bottom: 0;
|
||||
transform-origin: left bottom;
|
||||
transform: rotateZ(-45deg);
|
||||
color: #000;
|
||||
@@ -107,10 +107,12 @@ footer{
|
||||
|
||||
.block-language{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
ul{
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
margin:0;
|
||||
padding:0 0 0 0.5em;
|
||||
padding:0;
|
||||
transform-origin: left bottom;
|
||||
transform: rotateZ(-45deg);
|
||||
white-space: nowrap;
|
||||
@@ -144,16 +146,16 @@ footer{
|
||||
pointer-events: none;
|
||||
span.oblique-wrapper{
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
width:1.5em;
|
||||
a{
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.term-link{
|
||||
// outline: 1px solid blue;
|
||||
pointer-events: all;
|
||||
// bottom: 0;
|
||||
background-color: #fff;
|
||||
padding-right: 0.4em;
|
||||
&:before{
|
||||
content: "";
|
||||
display:inline-block;
|
||||
@@ -162,28 +164,6 @@ footer{
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
&[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{
|
||||
@@ -194,31 +174,119 @@ footer{
|
||||
opacity: 0;
|
||||
transition: all 300ms ease-in-out;
|
||||
transition-property: width,opacity;
|
||||
span.oblique-wrapper:first-of-type{
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
span.oblique-wrapper a{
|
||||
text-transform: none;
|
||||
pointer-events: auto;
|
||||
&:before{
|
||||
content: "";
|
||||
display:inline-block;
|
||||
$sq:5px;
|
||||
width: $sq; height:$sq;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
.term-description{
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
margin-left: 1.5em;
|
||||
text-align: left;
|
||||
width:250px;
|
||||
word-wrap:break-word;
|
||||
// word-break:break-all;
|
||||
hyphens: auto;
|
||||
white-space: normal;
|
||||
background-color: $transparent-bg;
|
||||
padding:0.5em;
|
||||
padding-bottom:0;
|
||||
p{
|
||||
font-size: 0.65em;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[tid='134']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-134;background-color: $e-col-134;}}
|
||||
&[tid='121']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-121;background-color: $e-col-121;}}
|
||||
&[tid='125']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-125;background-color: $e-col-125;}}
|
||||
&[tid='119']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-119;background-color: $e-col-119;}}
|
||||
&[tid='132']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-132;background-color: $e-col-132;}}
|
||||
&[tid='122']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-122;background-color: $e-col-122;}}
|
||||
&[tid='129']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-129;background-color: $e-col-129;}}
|
||||
&[tid='120']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-120;background-color: $e-col-120;}}
|
||||
&[tid='130']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-130;background-color: $e-col-130;}}
|
||||
&[tid='118']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-118;background-color: $e-col-118;}}
|
||||
&[tid='127']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-127;background-color: $e-col-127;}}
|
||||
&[tid='133']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-133;background-color: $e-col-133;}}
|
||||
&[tid='128']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-128;background-color: $e-col-128;}}
|
||||
&[tid='124']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-124;background-color: $e-col-124;}}
|
||||
&[tid='116']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-116;background-color: $e-col-116;}}
|
||||
&[tid='117']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-117;background-color: $e-col-117;}}
|
||||
&[tid='131']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-131;background-color: $e-col-131;}}
|
||||
&[tid='126']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-126;background-color: $e-col-126;}}
|
||||
&[tid='123']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e-col-123;background-color: $e-col-123;}}
|
||||
|
||||
// &.highlighted{
|
||||
// a.term_link{
|
||||
// color: red;
|
||||
// }
|
||||
// }
|
||||
.entree-content span.oblique-wrapper a:not(:hover):before{background-color: #fff!important;}
|
||||
|
||||
&:not(.opened){
|
||||
a.term-link:not(:hover):not(.highlighted):before{
|
||||
background-color: #fff!important;
|
||||
}
|
||||
}
|
||||
&.opened{
|
||||
// outline: 1px solid purple;
|
||||
a.term-link:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px; right:0;
|
||||
bottom: -3px;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
.entree-content{
|
||||
width:350px;
|
||||
opacity: 1;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:focus, a:active { outline: none; }
|
||||
a:focus{ -moz-outline-style: none; }
|
||||
|
||||
Reference in New Issue
Block a user