hugo-theme-zzo/assets/sass/components/_taxo.scss

141 lines
2.8 KiB
SCSS

.taxo {
margin: 2.5rem 0;
z-index: z('taxo');
&-root {
position: -webkit-sticky;
position: sticky;
top: $grid_navbar_height;
@include themify($themes) {
background-color: themed('body-background-color');
}
}
&__title {
font-weight: 700;
font-family: $title-font;
@include themify($themes) {
color: themed('taxo-title-color');
&:hover {
color: themed('link-hover');
}
}
}
&__link {
text-decoration: none !important;
&[data-dir="ltr"] {
.taxo__text {
border-top-left-radius: 0.175rem;
border-bottom-left-radius: 0.175rem;
}
.taxo__num {
padding: 0.125rem 0.25rem;
border-top-right-radius: 0.175rem;
border-bottom-right-radius: 0.175rem;
}
}
&[data-dir="rtl"] {
.taxo__text {
border-top-right-radius: 0.175rem;
border-bottom-right-radius: 0.175rem;
}
.taxo__num {
padding: 0.125rem 0.25rem;
border-top-left-radius: 0.175rem;
border-bottom-left-radius: 0.175rem;
}
}
}
&__text {
@include on-event {
text-decoration: underline !important;
}
@include themify($themes) {
color: inherit;
}
}
&__num {
@include themify($themes) {
color: themed('taxo-num-color');
background-color: themed('taxo-num-background-color');
}
}
.title {
display: block;
margin: 0rem;
margin-right: 0.5rem;
margin-bottom: 0.25rem;
}
.tag {
margin: 0;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
font-size: 0.8rem;
display: inline-block;
@include themify($themes) {
color: themed('taxo-title-color');
}
}
.is-tags {
border-radius: 0.175rem;
@include themify($themes) {
color: themed('taxo-tags-color');
background-color: themed('taxo-tags-background-color');
}
&[data-dir="ltr"] {
padding: 0.125rem 0 0.125rem 0.25rem;
}
&[data-dir="rtl"] {
padding: 0.125rem 0.25rem 0.125rem 0;
}
}
.is-categories {
border-radius: 0.175rem;
@include themify($themes) {
color: themed('taxo-categories-color');
background-color: themed('taxo-categories-background-color');
}
&[data-dir="ltr"] {
padding: 0.125rem 0 0.125rem 0.25rem;
}
&[data-dir="rtl"] {
padding: 0.125rem 0.25rem 0.125rem 0;
}
}
.is-series {
border-radius: 0.175rem;
@include themify($themes) {
color: themed('taxo-series-color');
background-color: themed('taxo-series-background-color');
}
&[data-dir="ltr"] {
padding: 0.125rem 0 0.125rem 0.25rem;
}
&[data-dir="rtl"] {
padding: 0.125rem 0.25rem 0.125rem 0;
}
}
}