amis/scss/components/_remark.scss
2020-12-24 22:16:59 +08:00

56 lines
1.2 KiB
SCSS

.#{$ns}Remark {
display: inline-block;
vertical-align: middle;
margin-left: var(--Remark-marginLeft);
> span {
color: var(--Remark-iconColor);
font-size: var(--fontSizeSm);
}
cursor: pointer;
text-align: center;
&-icon {
color: var(--Remark-iconColor);
font-size: var(--Remark-icon-fontSize);
background: var(--Remark-bg);
border: var(--Remark-borderWidth) solid var(--Remark-borderColor);
width: var(--Remark-width);
height: var(--Remark-width);
line-height: 1;
display: inline-flex;
vertical-align: baseline;
align-self: center;
align-items: center;
justify-content: center;
font-size: var(--fontSizeSm);
user-select: none;
> svg {
width: 100%;
height: 100%;
display: block;
}
}
> span + .#{$ns}Remark-icon {
margin-left: var(--gap-xs);
}
&:hover > &-icon {
color: var(--Remark-onHover-iconColor);
background: var(--Remark-onHover-bg);
border-color: var(--Remark-onHover-borderColor);
}
> svg {
width: calc(var(--Remark-width) - #{px2rem(2px)});
height: calc(var(--Remark-width) - #{px2rem(2px)});
color: var(--Remark-iconColor);
}
&:hover > svg {
color: var(--Remark-onHover-iconColor);
}
}