86 lines
2.1 KiB
SCSS
86 lines
2.1 KiB
SCSS
$corner-radius: 10px;
|
|
$vertical-offset: -14px;
|
|
|
|
.sidebar-toggle {
|
|
position: absolute;
|
|
display: block;
|
|
height: 35px;
|
|
top: 3.25rem;
|
|
z-index: 100;
|
|
&:hover {
|
|
cursor: pointer;
|
|
&:before, &:after { cursor: default; }
|
|
a { color: rgba($article-text, 1); }
|
|
}
|
|
|
|
&:before, &:after {
|
|
display: block;
|
|
position: absolute;
|
|
width: $corner-radius;
|
|
height: $corner-radius;
|
|
}
|
|
&:before {
|
|
top: $vertical-offset;
|
|
}
|
|
&:after {
|
|
bottom: $vertical-offset;
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
& > a {
|
|
font-family: "icomoon";
|
|
color: rgba($article-text, .5);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
.content-wrapper .sidebar-toggle {
|
|
display: none;
|
|
padding: .3rem .3rem .3rem .4rem;
|
|
width: 35px;
|
|
left: 0;
|
|
background-color: $body-bg;
|
|
border-radius: 0 $radius $radius 0;
|
|
&:before, &:after {
|
|
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='"+rgba($body-bg, .9999)+"' 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;
|
|
}
|
|
}
|
|
|
|
.sidebar .sidebar-toggle {
|
|
padding: .2rem;
|
|
width: 30px;
|
|
right: 0;
|
|
background-color: $article-bg;
|
|
border-radius: $radius 0 0 $radius;
|
|
&:before, &:after {
|
|
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='"+rgba($article-bg, .9999)+"' d='M0,10h10V0C10,5.52,5.52,10,0,10z'/>
|
|
</svg>");
|
|
right: 0;
|
|
}
|
|
& > a {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(medium) {
|
|
.sidebar-toggle{
|
|
display: none;
|
|
}
|
|
}
|