caret fixes

This commit is contained in:
Matthias Kretschmann 2018-04-10 14:38:27 +02:00
parent 87eafe8ed9
commit ac6a4a18cb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 19 additions and 26 deletions

View File

@ -1,14 +1,3 @@
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="42.3px" height="22.2px" viewBox="0 0 42.3 22.2" style="enable-background:new 0 0 42.3 22.2;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<polyline class="st0" points="41.3,1 21.2,21.2 1,1 "/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="14" viewBox="0 0 25 14">
<polyline fill="none" stroke="#fff" stroke-width="2" points="22.606 0 11.331 11.331 0 0" transform="translate(1 .971)"/>
</svg>

Before

Width:  |  Height:  |  Size: 600 B

After

Width:  |  Height:  |  Size: 214 B

View File

@ -16,11 +16,10 @@
&:after {
content: '';
display: inline-block;
height: 0;
width: 0;
border: .3rem solid transparent;
border-top-color: inherit;
margin-bottom: -.2rem;
width: 14px;
height: 10px;
background: url('../img/icon-caret.svg') no-repeat center center;
background-size: contain;
transition: .15s ease-out;
}
@ -28,7 +27,6 @@
.dropdown--hover:hover & {
&:after {
transform: rotate(180deg);
margin-bottom: .2rem;
}
}
}

View File

@ -91,8 +91,7 @@ $menu-height-md: 90px;
}
.page-front .menu--main,
.hero__community,
.hero__more {
.hero__community {
@include transition;
opacity: 0;
transition-delay: .8s;
@ -229,18 +228,20 @@ $menu-height-md: 90px;
.hero__more {
position: relative;
z-index: 2;
color: rgba(#fff, .6);
color: #fff;
opacity: .6;
align-self: flex-end;
margin-left: auto;
margin-right: auto;
margin-bottom: $spacer;
width: 100%;
display: none;
@media ($screen-md) {
display: block;
display: inline-block;
}
&:hover,
&:focus { color: #fff; }
&:focus { opacity: 1; }
// the caret
.icon {

View File

@ -34,3 +34,8 @@
fill: none;
stroke: $text-color;
}
.icon--caret {
stroke-width: 2px;
stroke: currentColor;
}

View File

@ -43,6 +43,6 @@
</div>
</aside>
<a class="hero__more btn btn-link btn-sm" href="#features" data-scroll>Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
<a class="hero__more btn btn-link btn-sm" href="#features" data-scroll>Learn More <svg class="icon icon--caret"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
</header>