49 lines
1.1 KiB
Sass
49 lines
1.1 KiB
Sass
// framework/_tabs.sass
|
|
|
|
@use '../abstracts' as *
|
|
@use 'sass:color' // For color.adjust()—non-deprecated color tweaks
|
|
|
|
// Simplified tab styling: Square borders, no rounds
|
|
.tab-container
|
|
margin: space('lg') auto
|
|
background: $bg-dark
|
|
|
|
.tab-nav
|
|
display: flex
|
|
background-color: $bg-darker
|
|
border-bottom: 1px solid $border-light
|
|
|
|
.tab-button
|
|
padding: space('sm') space('md')
|
|
background: $bg-darker
|
|
border: 1px solid $border-light
|
|
border-bottom: none
|
|
cursor: pointer
|
|
font-size: 14px
|
|
min-width: 120px // Makes them more square/equal
|
|
text-align: center
|
|
color: $text-light
|
|
font-family: $mono-font // From vars
|
|
|
|
&:hover
|
|
background-color: color.adjust($bg-darker, $lightness: 5%) // Modern, non-deprecated lighten equivalent
|
|
|
|
+ .tab-button
|
|
border-left: none // Shared borders
|
|
|
|
&.active
|
|
background-color: $bg-dark
|
|
border-bottom: 2px solid $accent-light
|
|
color: $accent-light
|
|
font-weight: bold
|
|
|
|
.tab-content
|
|
display: none
|
|
padding: space('lg')
|
|
background-color: $bg-dark
|
|
color: $text-light
|
|
border: none
|
|
|
|
&.active
|
|
display: block
|