N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Use CSS3 transform instead of change in width for masthead menu underline effect

Browse source
This commit is contained in:
Michael Rose 2016-05-31 12:31:39 -04:00
parent 213e2fe3f3
commit 68b02cd8d8
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/_scss/_navigation.scss
View file

@ -227,17 +227,17 @@
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0;
bottom: 0; bottom: 0;
height: 4px; height: 4px;
background: mix(#fff, $primary-color, 50%); background: mix(#fff, $primary-color, 50%);
width: 0; width: 100%;
transition: $global-transition; transition: $global-transition;
transform: scaleX(0); // hide
} }
&:hover { &:hover:before {
&:before { transform: scaleX(1); // reveal
width: 100%;
}
} }
} }
} }

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long