Files
FixIt/assets/css/_partials/_single/_related.scss
T
Cell 56836eb077 feat: add tabs and tab shortcodes support (#634)
* feat: add tabs and tab shortcodes support

Powered by https://github.com/github/tab-container-element

* fix: adjust tab-container styles for improved layout and responsiveness

- [x] Underline Style (Default)
- [x] Pill Style
- [x] Card Style
- [x] Segment Style

* test: add tabs comprehensive test cases

* style: code optimization

* fix: add tabs support in home scope

* docs: add `<tab-container>` element reference to README files

* feat: enhance tab-container with loading mixin and simplify code

* refactor: update variable references to use root prefix in styles

* docs: add tabs shortcode support to README files

* fix: ensure shortcode is enclosed within a tabs block

* feat: add responsive design for tab-container on smaller screens

* test: remove unnecessary placement attribute for segment tabs

* refactor: remove unused vertical attribute from tabs shortcode

* fix: set default tab type to 'underline' for consistency

* refactor: update tab-button and tab-panel selectors for improved specificity
2025-09-11 22:59:33 +08:00

74 lines
1.4 KiB
SCSS

// Related Content List (aside)
.related-details {
&:not(:first-of-type)::before {
content: '';
display: block;
border: 0;
padding-top: 1px;
background: var(#{$rootPrefix}divider-edge-weak);
margin-block: 1rem 0.5rem;
}
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
.related-summary {
display: flex;
align-items: baseline;
gap: 0.25em;
padding: 0.2em 0.5em;
> i.fa-layer-group {
flex-shrink: 0;
}
.related-title {
font-weight: bold;
font-size: $related-title-font-size;
}
.related-count {
flex-shrink: 0;
color: var(#{$rootPrefix}secondary);
}
.details-icon {
flex-shrink: 0;
}
@include user-select(none);
}
.related-content {
font-size: $related-list-font-size;
.related-list {
margin: 0;
padding-inline: 1.6em 0.8em;
padding-block: 0.4em;
text-indent: -0.8em;
list-style: none;
overflow-y: scroll;
max-height: 60vh;
@include scrollbar-width(none, 0);
.related-item > a::before,
.related-item > span::before {
content: '|';
font-weight: 600;
margin-right: 0.5em;
position: relative;
bottom: 2px;
color: $single-link-color;
[data-theme='dark'] & {
color: $single-link-color-dark;
}
}
}
}
}