blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 23:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(code-tabs): add dividers for inactive tabs and improve active tab styling

Browse Source
This commit is contained in:
Cell
2026-04-23 11:38:32 +08:00
parent f9c7e1d991
commit 5fe681ccc5
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/pages/single/_code.scss
+20 -1
View File
@@ -627,8 +627,27 @@ pre {
color: fi-var(global-font-secondary-color);
white-space: nowrap;
user-select: none;
position: relative;
@include border-radius;
&:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 36%;
background-color: fi-var(global-border-color-weight);
}
// hide dividers on both sides of the active tab
&.active::after,
&:has(+ .tab-item.active)::after {
// display: none;
background-color: fi-var(global-border-color);
}
@include media('xs') {
padding-inline: 0.6rem;
}
@@ -648,7 +667,7 @@ pre {
translate: 2px 2px;
width: calc(anchor-size(width) - 0.25rem);
height: calc(anchor-size(height) - 0.25rem);
box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fi-var(global-font-secondary-color) 30%, transparent);
box-shadow: inset 0 0 1rem 0.25rem light-dark(#fff, fi-rgba(fi-var(global-font-secondary-color), 0.4));
pointer-events: none;
transition: 0.3s ease-in-out;
@include border-radius;