drewcassidy/drewcassidy.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animate the flags

Browse Source
This commit is contained in:
Andrew Cassidy 2017-11-24 22:16:50 -08:00 committed by Andrew Cassidy
parent 132bbc3124
commit 5950458faa
1 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
_sass/_sidebar.scss
View File

@ -1,7 +1,7 @@
@import 'colors';
@import 'fonts'; @import 'fonts';
$flag-shadow: rgba(black, 0.2); $flag-shadow: rgba(black, 0.2);
$animate-time: 0.03s;
ul#sidebar { ul#sidebar {
flex-shrink: 0; flex-shrink: 0;
@ -46,15 +46,23 @@ ul#sidebar {
mask-image: url('../svg/fold.svg'); mask-image: url('../svg/fold.svg');
} }
.flagButton { .flagButton {
display: block; display: block;
float: left; float: left;
left: 0;
height: 50px; height: 50px;
width: 160px; width: 160px;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
transition: {
duration: $animate-time;
property: width, border-radius;
timing-function: ease-out;
}
.flagText { .flagText {
font: { font: {
family: $sidebar-font; family: $sidebar-font;
@ -86,38 +94,30 @@ ul#sidebar {
width: 160px; width: 160px;
background-color: $flag-shadow; background-color: $flag-shadow;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
}
}
.flag:hover { transition: {
duration: $animate-time;
.flagButton { property: width, border-radius;
width: 170px; timing-function: ease-out;
border-radius: 0; }
}
.flagButton::after{
width: 170px;
border-radius: 0;
} }
.flagPoint{ .flagPoint{
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
left: 160px;
border-top: 25px solid transparent; border-top: 25px solid transparent;
border-bottom: 25px solid transparent; border-bottom: 25px solid transparent;
border-left-width: 20px; border-left-width: 0px;
border-left-style: solid; border-left-style: solid;
background-color: transparent; background-color: transparent;
// display: block;
// position: absolute; transition: {
// left:170px; duration: $animate-time;
// width: 20px; property: left, border-left-width;
// height: 50px; timing-function: ease-out;
// -webkit-mask-image: url('../svg/flag.svg'); }
// mask-image: url('../svg/flag.svg');
// //@include prefix(filter, $flag-shadow, o ms moz webkit);
} }
.flagPoint.blue { .flagPoint.blue {
@ -142,13 +142,39 @@ ul#sidebar {
height: 0; height: 0;
border-top: 25px solid transparent; border-top: 25px solid transparent;
border-bottom: 25px solid transparent; border-bottom: 25px solid transparent;
border-left: 20px solid $flag-shadow; border-left: 0px solid $flag-shadow;
z-index: -1; z-index: -1;
content: " "; content: " ";
left: -20 + 3px; left: -20 + 3px;
top: -25 + 4px; top: -25 + 4px;
} transition: {
duration: $animate-time;
property: border-left-width;
timing-function: ease-out;
}
}
}
.flag:hover {
.flagButton {
width: 170px;
border-radius: 0;
}
.flagButton::after{
width: 170px;
border-radius: 0;
}
.flagPoint {
left: 170px;
border-left-width: 20px;
}
.flagPoint::after{
border-left-width: 20px;
}
} }