hexo-theme-ayer/source/css/_partial/share.styl
2020-02-07 12:42:33 +08:00

160 lines
2.4 KiB
Stylus

.share-wrap {
min-height: 20px;
display: none;
position: relative;
z-index: 1;
right: 0;
bottom: 0;
width: 250px;
background-color #f5f5f5;
border-radius: 2px;
.arrow {
position: absolute;
z-index: -1;
top: -3px;
right:20px;
display: block;
width 10px;
height 10px;
transform: rotate(45deg);
background-color #f5f5f5;
}
}
.share-btn {
float: right;
position: relative;
}
.share-outer {
display: flex;
justify-content: flex-end;
border: none;
text-shadow: none;
text-decoration: none;
width auto;
color: main-color;
height: 28px;
line-height: 26px;
i{
font-size: 18px;
margin-right 5px;
}
&:hover {
transform: none;
cursor: pointer;
}
}
.share-icons {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
a {
border-radius: 50%;
display: inline-block;
vertical-align: middle;
zoom: 1;
margin: 3px;
transition: 0.3s;
text-align: center;
color: main-color;
width: 28px;
height: 28px;
line-height: 26px;
font-size: 13px;
i {
font-size: 24px
}
&.weibo {
color weibo-color
}
&.weixin {
color wechat-color
}
&.qq {
color qq-color
}
&.douban {
color douban-color
}
&.twitter {
color twitter-color
}
&.facebook {
color facebook-color
}
&.google {
color google-color
}
&:active {
color: ocean;
}
&:hover {
transform: scale(1.2);
}
}
}
.wx-share-modal {
position: fixed;
top: 24%;
left: 50%;
z-index: 9999;
padding: 20px;
text-align: center;
color: #727272;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
opacity: 0;
transform: translate(-50%, -200%);
p {
margin-bottom: 10px;
}
&.ready {
visibility: 0;
display: block;
transform: translate(-50%, -100%);
transition: .3s;
}
&.in {
display: block;
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
.modal-close {
position: absolute;
right: 15px;
top: 15px;
color: rgba(0, 0, 0, .2);
font-size: 16px;
line-height: 20px;
i{
font-size: 24px;
}
&:hover,
&:active {
color: rgba(0, 0, 0, .4);
}
}
}
#share-mask{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color rgba(0,0,0,.6);
z-index: 999;
display: none;
}