.sidebar {
margin-bottom: 10%;
}
.author__avatar {
display: table-cell; vertical-align: top; width: 36px; height: 36px;
}
.author__avatar img {
width: 100%; max-width: 110px; border-radius: 50%;
}
.author__content {
display: table-cell; vertical-align: top; padding-left: 15px; padding-right: 25px; line-height: 1;
}
.author__content p {
font-size: 0.70em; line-height: 1.5; margin-bottom: 0.5em;
}
.author__name {
font-size: 1em; margin: 0;
}
.author__bio {
margin: 0;
}
.author__urls-wrapper {
position: relative; display: table-cell; vertical-align: middle; z-index: 10; position: relative; cursor: pointer;
}
.author__urls {
display: none; background-color: #FFFFFF; position: absolute; right: 0; margin-top: 15px; padding: 10px; list-style-type: none; border: 1px solid #f2f3f3; border-radius: 4px; z-index: -1; box-shadow: 0 0 10px rgba(0,0,0,0.25); cursor: default; transition: display 0.5s ease;
}
.author__urls:before {
display: block; content: ""; position: absolute; top: -11px; left: calc(50% - 10px); width: 0; border-style: solid; border-width: 0 10px 10px; border-color: #f2f3f3 transparent; z-index: 0;
}
.author__urls:after {
display: block; content: ""; position: absolute; top: -10px; left: calc(50% - 10px); width: 0; border-style: solid; border-width: 0 10px 10px; border-color: #fff transparent; z-index: 1;
}
.author__urls li {
white-space: nowrap; font-size: 0.70em; line-height: 1.5; margin-bottom: 0.5em;
}
.author__urls a {
display: block; margin-bottom: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; color: inherit; font-size: 1em; text-decoration: none;
}
.author__urls-wrapper button {
color: #7a8288; font-size: 0.75em; background-color: #FFF; border-color: #bdc1c4; border-width: 1px; &.btn-active { border-color: $base-primary-color; color: $base-primary-color; } &:hover { background-color: #A5E3D7; color: #FFF; }
}
@media (min-width: 1024px) {
.sidebar { position: absolute; left: -210px; width: 135px; opacity: 0.8; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; p, li { font-size: 0.85em; } .author__avatar img { padding: 3px; border: 1px solid $base-primary-color; } .author__avatar { display: block; width: auto; height: auto; } .author__content { display: block; padding-left: 0; padding-right: 0; } .author__urls-wrapper button { display: none; } .author__name { font-size: 1.10em; margin-top: 10px; margin-bottom: 10px; } p.author__bio { margin-top: 10px; margin-bottom: 20px; } .author__urls-wrapper { display: block; } .author__urls { display: block !important; position: relative; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } &:hover { opacity: 1; } }
}