colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
103 lines (87 loc) • 2.68 kB
text/stylus
// Tab Panel
//
// Basic HTML structure with tab and panels
//
// Can use `.color-…` helpers on list
//
// Default open tab should be set by `data-open="true"` attribute.
//
// Markup: tabpanel.twig
//
// Styleguide: Components.TabPanel
// Fake tab Panel
//
// Same UI but it’s real navigation, with anchors and not javascript driven panels.
//
// Current Link should be set by `aria-current="page"` attribute.
//
// Markup: tabpanel-fake.twig
//
// Styleguide: Components.TabPanel.Fake
// Tab Panel with block of cards
//
// Markup: tabpanel-with-block-list.twig
//
// Styleguide: Components.TabPanel.WithBlocksOfCards
.tabpanel
display flex
flex-direction column
&-list
display flex
margin 0
padding 0
list-style none
.no-js &[role='tablist']
display none
&-tab
padding .5em
display flex
flex 1
position relative
text-align center
justify-content center
align-items center
cursor pointer
text-transform inherit // `text-transform: none;` set on button by normalize
font-size 1em
line-height 1.5em
background var(--color-fade)
color var(--color-base)
border 1px solid var(--color-borders)
border-right-color transparent
font-family $fontstack-secondary
&:last-child
border-right-color var(--color-borders)
.tabpanel[data-loading] &[data-open]
&[aria-selected=true]
&[aria-current='page']
color currentColor
background-color var(--color-bg-primary)
border-color transparent
font-weight 700
&:before
content ''
position absolute
top -1px
bottom -1px
left -1px
pointer-events none
background currentColor
width 3px
&[aria-disabled=true]
cursor not-allowed
pointer-events none
background var(--color-borders)
color s('hsla(var(--color-base-h), var(--color-base-s), var(--color-base-l), .5)')
&-body
flex-grow 1
.tabpanel[data-loading] &:not([data-open])
&[aria-hidden=true]
display none
&.box
border-width 0
> .tabpanel-list
:first-child
border-radius $radius 0 0 0
:last-child
border-radius 0 $radius 0 0