Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

simplified psuedo element styling on sidebar toggle to use svg

pull/4/head
Scott Anderson 2019-01-11 12:29:59 -07:00
parent 306db565b3
commit 0cdb12ebaf
1 changed files with 21 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/styles/layouts/_layout-sidebar-toggle.scss
View File

@ -1,4 +1,5 @@
$corner-radius: 8px;
$corner-radius: 10px;
$vertical-offset: -14px;
.sidebar-toggle {
position: absolute;
@ -6,7 +7,6 @@ $corner-radius: 8px;
height: 35px;
top: 3.25rem;
z-index: 100;
border-radius: $border-radius 0 0 $border-radius;
&:hover {
cursor: pointer;
&:before, &:after { cursor: default; }
@ -14,34 +14,23 @@ $corner-radius: 8px;
}
&:before, &:after {
content: "";
display: block;
position: absolute;
width: $corner-radius;
height: $corner-radius;
}
&:before { top: ($corner-radius * -1); }
&:after { bottom: ($corner-radius * -1); }
&:before {
top: $vertical-offset;
}
&:after {
bottom: $vertical-offset;
transform: rotateX(180deg);
}
& > a {
font-family: "icomoon";
color: rgba($article-text, .5);
text-decoration: none;
&:before, &:after {
content: "";
display: block;
position: absolute;
width: ($corner-radius * 2);
height: ($corner-radius * 2);
border-radius: 50%;
z-index: 1;
}
&:before { top: ($corner-radius * -2); }
&:after { bottom: ($corner-radius * -2); }
&:hover {
&:before, &:after { cursor: default; }
}
}
}
@ -52,16 +41,18 @@ $corner-radius: 8px;
width: 35px;
left: 0;
background-color: $body-bg;
border-radius: 0 $border-radius $border-radius 0;
&:before, &:after {
background: $body-bg;
content: url('data:image/svg+xml;charset=UTF-8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" xml:space="preserve">
<path fill="'+$body-bg+'" d="M0,10h10V0C10,5.52,5.52,10,0,10z"/>
</svg>');
left: 0;
}
&:before { transform: rotateY(180deg); }
&:after { transform: rotate(180deg); }
& > a {
font-size: 1.25rem;
&:before, &:after {
left: 0;
background: $article-bg;
}
}
}
@ -70,16 +61,16 @@ $corner-radius: 8px;
width: 30px;
right: 0;
background-color: $article-bg;
border-radius: $border-radius 0 0 $border-radius;
&:before, &:after {
background: $article-bg;
content: url('data:image/svg+xml;charset=UTF-8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" xml:space="preserve">
<path fill="'+$article-bg+'" d="M0,10h10V0C10,5.52,5.52,10,0,10z"/>
</svg>');
right: 0;
}
& > a {
font-size: 1.5rem;
&:before, &:after {
right: 0;
background: $body-bg;
}
}
}