mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
71 lines
1.7 KiB
SCSS
71 lines
1.7 KiB
SCSS
@use '../lib/colors';
|
|
@use '../lib/layout';
|
|
@use '../lib/typography';
|
|
|
|
// This is an HTML/CSS-only tabs component. It expects the following markup:
|
|
//
|
|
// <div class="tabs-widget">
|
|
// <div id="second" class="tab">Other, totally novel content.</div>
|
|
// <a href="#second" rel="tab">Second</a>
|
|
// <div id="first" class="tab">Some content, including a heading.</div>
|
|
// <a href="#first" rel="tab">First</a>
|
|
// </div>
|
|
//
|
|
// The key thing here is that the container is a flexbox with that flows in
|
|
// reverse row direction. That means that the first element in the container
|
|
// <div> will be shown last, which means we can use the ~ and + selectors to
|
|
// target all and the immediately following tabs and / or their corresponding
|
|
// links.
|
|
// The last tab in the DOM (which is shown first because of the reversed
|
|
// flexbox) is shown by default, while the other ones are hidden. If one of the
|
|
// tabs is targeted by the URL's hash, it is shown instead and the default tab
|
|
// is hidden.
|
|
.tabs-widget {
|
|
@extend %content;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
> a {
|
|
display: block;
|
|
margin: 0 layout.$normal-gap;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
> .tab {
|
|
flex: 100% 1;
|
|
order: 9999;
|
|
display: none;
|
|
background: colors.$gray-50;
|
|
|
|
&:last-of-type,
|
|
&:target {
|
|
display: block;
|
|
|
|
+ a {
|
|
font-weight: typography.$emphasized-weight;
|
|
color: colors.$blue-800;
|
|
}
|
|
}
|
|
|
|
&:target {
|
|
~ .tab {
|
|
display: none;
|
|
|
|
+ a {
|
|
font-weight: inherit;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: layout.$breakpoint) {
|
|
> .tab {
|
|
padding: layout.$large-gap;
|
|
@include colors.card-shadow;
|
|
}
|
|
}
|
|
}
|