effet header

This commit is contained in:
2021-03-31 22:16:20 +02:00
parent 35d3203647
commit c82e8fa645
3 changed files with 45 additions and 33 deletions
@@ -156,23 +156,6 @@ b, strong, label, th {
display: inline-block; display: inline-block;
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
-webkit-backface-visibility: hidden; } -webkit-backface-visibility: hidden; }
#header #navbar ul.navigation li a:before, #header #navbar ul.navigation li a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
#header #navbar ul.navigation li a:hover:before { #header #navbar ul.navigation li a:hover:before {
visibility: visible; visibility: visible;
-webkit-transform: scaleX(0.75); -webkit-transform: scaleX(0.75);
@@ -825,6 +808,15 @@ ul.pagination {
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
-webkit-backface-visibility: hidden; } -webkit-backface-visibility: hidden; }
#header #navbar ul.navigation li:after {
display: inline;
content: "|";
padding: 0 .1em;
vertical-align: top; }
#header #navbar ul.navigation li a:hover {
font-weight: 900; }
#header.scrolled #navbar ul.navigation li a { #header.scrolled #navbar ul.navigation li a {
color: black !important; color: black !important;
font-size: 0.95rem; font-size: 0.95rem;
@@ -835,7 +827,7 @@ ul.pagination {
flex-direction: row; } flex-direction: row; }
#logo img { #logo img {
padding: 1rem; } padding: 0.5rem; }
.callout { .callout {
padding-top: 0.5rem; } padding-top: 0.5rem; }
@@ -26,10 +26,23 @@
display: inline-block; display: inline-block;
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
// float: left;
} }
#header #navbar ul.navigation li:after {
display: inline;
content: "|";
padding: 0 .1em;
vertical-align: top;
}
#header #navbar ul.navigation li a:hover {
font-weight: 900;
}
#header.scrolled #navbar ul.navigation li a { #header.scrolled #navbar ul.navigation li a {
color: black !important; color: black !important;
font-size: 0.95rem; font-size: 0.95rem;
@@ -45,7 +58,7 @@
} }
#logo img { #logo img {
padding: 1rem; padding: 0.5rem;
} }
@@ -113,6 +113,7 @@ $dropdown-color: #f6f6f6;
z-index: 1000; z-index: 1000;
position: relative; position: relative;
padding-bottom: 1px; padding-bottom: 1px;
} }
ul { ul {
@@ -143,19 +144,19 @@ $dropdown-color: #f6f6f6;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
&:before, &:after { // &:before, &:after {
content: ""; // content: "";
position: absolute; // position: absolute;
width: 100%; // width: 100%;
height: 1px; // height: 1px;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
background-color: $core-accent; // background-color: $core-accent;
visibility: hidden; // visibility: hidden;
@include transform(scaleX(0)); // @include transform(scaleX(0));
@include transition(all 0.2s ease); // @include transition(all 0.2s ease);
//
} // }
&:hover:before { &:hover:before {
visibility: visible; visibility: visible;
@@ -174,6 +175,7 @@ $dropdown-color: #f6f6f6;
top: 0; top: 0;
visibility: visible; visibility: visible;
@include transform(scaleX(0.75)); @include transform(scaleX(0.75));
} }
} }
@@ -198,6 +200,9 @@ $dropdown-color: #f6f6f6;
&.active > a { &.active > a {
background-color: darken($dropdown-color, 4%); background-color: darken($dropdown-color, 4%);
color: $core-accent; color: $core-accent;
} }
&:hover > a { &:hover > a {
@@ -224,6 +229,7 @@ $dropdown-color: #f6f6f6;
/* Active on Hover */ /* Active on Hover */
&:hover > ul { &:hover > ul {
display: block; display: block;
} }
} }
@@ -293,6 +299,7 @@ $dropdown-color: #f6f6f6;
} }
a:before, a:after { a:before, a:after {
background-color: rgba($header-text,0.7) !important; background-color: rgba($header-text,0.7) !important;
} }
} }