2019-04-30 11:11:25 +08:00
|
|
|
.#{$ns}Remark {
|
2019-12-06 09:58:08 +08:00
|
|
|
display: inline-block;
|
|
|
|
margin-left: $Remark-marginLeft;
|
2020-07-13 18:14:13 +08:00
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
cursor: pointer;
|
|
|
|
text-align: center;
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-12-06 09:58:08 +08:00
|
|
|
&-icon {
|
2020-07-13 18:14:13 +08:00
|
|
|
color: $Remark-iconColor;
|
2019-12-06 09:58:08 +08:00
|
|
|
font-size: $Remark-icon-fontSize;
|
2020-07-13 18:14:13 +08:00
|
|
|
background-color: $Remark-bg;
|
|
|
|
border: $Remark-borderWidth solid $Remark-borderColor;
|
|
|
|
width: $Remark-width;
|
|
|
|
height: $Remark-width;
|
|
|
|
line-height: 1;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: $fontSizeBase;
|
2019-12-06 09:58:08 +08:00
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2020-07-13 18:14:13 +08:00
|
|
|
&:hover > &-icon {
|
2019-12-06 09:58:08 +08:00
|
|
|
color: $Remark-onHover-iconColor;
|
|
|
|
background-color: $Remark-onHover-bg;
|
|
|
|
border-color: $Remark-onHover-borderColor;
|
|
|
|
}
|
2020-07-28 16:14:08 +08:00
|
|
|
|
|
|
|
> svg {
|
|
|
|
width: ($Remark-width - px2rem(2px));
|
|
|
|
height: ($Remark-width - px2rem(2px));
|
|
|
|
color: $Remark-iconColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover > svg {
|
|
|
|
color: $Remark-onHover-iconColor;
|
|
|
|
}
|
2019-05-15 16:10:20 +08:00
|
|
|
}
|