fediparty/themes/starter/source/assets/scss/modules/_sidebar.scss
2018-03-21 06:03:12 +03:00

109 lines
1.4 KiB
SCSS

.sidebar {
background-color: $black;
text-align: center;
position: relative;
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;
font-family: $font-secondary;
}
.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) {
.share-wrapper .u-extra {
margin-bottom: 0;
}
.share__toggle svg {
width: 20px;
height: 20px;
}
}