108 lines
1.4 KiB
SCSS
108 lines
1.4 KiB
SCSS
|
|
.sidebar {
|
|
background-color: $black;
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index: $zIndex--4;
|
|
}
|
|
|
|
.sidebar.g-sidebar {
|
|
width: 200px;
|
|
height: 165px;
|
|
top: -70px;
|
|
left: -85px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.sidebar.i-sidebar {
|
|
width: 70px;
|
|
height: 100%;
|
|
}
|
|
|
|
.f-logo {
|
|
border: none;
|
|
}
|
|
|
|
.sidebar.i-sidebar .f-logo {
|
|
position: relative;
|
|
top: 2em;
|
|
}
|
|
|
|
.sidebar.g-sidebar .f-logo {
|
|
position: absolute;
|
|
top: 90px;
|
|
left: 79px;
|
|
width: 95px;
|
|
height: 55px;
|
|
}
|
|
|
|
.f-logo svg {
|
|
width: 36px;
|
|
height: 36px;
|
|
fill: $golden;
|
|
margin-right: .3em;
|
|
}
|
|
|
|
.f-logo:hover svg {
|
|
fill: $white;
|
|
}
|
|
|
|
.share-wrapper {
|
|
cursor: pointer;
|
|
z-index: $zIndex--4;
|
|
}
|
|
|
|
.i-sidebar .share-wrapper {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.share__toggle {
|
|
color: $golden;
|
|
}
|
|
|
|
.icon-share {
|
|
margin: .2em 0 0 -.1em;
|
|
fill: $white;
|
|
width: 25px;
|
|
height: 25px;
|
|
&:hover {
|
|
fill: $golden;
|
|
}
|
|
}
|
|
|
|
.share:hover svg {
|
|
fill: $white;
|
|
}
|
|
|
|
.i-sidebar .share:hover svg {
|
|
fill: $golden;
|
|
}
|
|
|
|
@media screen and (max-width: $mq-small) {
|
|
.sidebar.g-sidebar {
|
|
width: 170px;
|
|
top: -80px;
|
|
left: -75px;
|
|
}
|
|
|
|
.sidebar.g-sidebar .f-logo {
|
|
top: 97px;
|
|
width: 70px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $mq-xsmall) {
|
|
.u-extra {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.share__toggle svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|