Sidebar active state - need to detect active better

This commit is contained in:
James Barnsley
2017-06-20 08:29:56 +12:00
parent 9dfb4df341
commit da19251e5a
7 changed files with 51 additions and 39 deletions

View File

@ -65,11 +65,6 @@ main {
@include responsive( $bp_medium ){
section.grid-wrapper,
section.text-wrapper {
padding: 20px;
}
section.list-wrapper {
padding: 10px 0;
}

View File

@ -45,6 +45,7 @@ input[type="button"],
input[type="submit"] {
@include animate();
@include feature_font();
@include gradient_overlay();
display: inline-block;
padding: 9px 30px 7px;
margin: 0 20px 10px 0;
@ -57,23 +58,6 @@ input[type="submit"] {
position: relative;
border: 0 !important;
&:before {
@include animate();
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 9;
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
}
&:hover{
cursor: pointer;
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);

View File

@ -113,11 +113,6 @@ $bp_shallow: 650px;
animation-iteration-count: 1;
}
@mixin blur( $size: 10px ) {
-webkit-filter: blur( $size );
filter: blur( $size );
}
@keyframes slideloader {
0% { left: 0%; right: 100%; }
50% { left: 0%; right: 0%; }
@ -179,8 +174,39 @@ $bp_shallow: 650px;
}
}
@mixin blur( $size: 10px ) {
-webkit-filter: blur( $size );
filter: blur( $size );
}
@mixin feature_font(){
font-family: "Overpass";
letter-spacing: -0.04em;
font-weight: 600;
}
@mixin invert(){
-webkit-filter: invert(1);
filter: invert(1);
}
@mixin gradient_overlay(){
position: relative;
&:before {
@include animate();
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 9;
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
}
}