Also, couldn't we benefit some some better HTML and CSS... With ShadowDOM it's deeply nested and hard to target the selectors... Definitely think less is more and overrides are painful as is...
Something as simple as:
Code: Select all
<tabs role="tablist" multiselectable="false">
<tab role="tabpanel">
<tab-label role="tab" aria-controls="1" aria-selected="true" for="1" tabindex="0">Longishly long long long header name Longishly long long long header name Longishly long long long header name Longishly long long long header name</tab-label>
<tab-content aria-labelledby="1" aria-hidden="false" aria-expanded="true">
<p>Next level etsy polaroid, coloring book jianbing glossier affogato skateboard. Squid meditation shoreditch, ugh gentrify neutra occupy coloring book blog single-origin coffee blue bottle la croix selvage cronut. Celiac flannel vexillologist photo
booth, cornhole sustainable mixtape ugh cred pickled before they sold out fashion axe hot chicken meditation. Organic lumbersexual farm-to-table pour-over fam fixie, hot chicken wayfarers forage marfa vexillologist. Venmo blue bottle everyday
carry fap, cray godard jean shorts unicorn disrupt humblebrag deep v echo park sartorial street art. Hashtag wolf woke farm-to-table activated charcoal neutra. Succulents marfa fam affogato hammock pinterest, tacos tilde readymade fingerstache
YOLO.</p>
</tab-content>
<!-- /end tab1 -->
</tab>
<tab role="tabpanel">
<tab-label role="tab" aria-controls="2" aria-selected="false" for="2" tabindex="-1">Tab 2</tab-label>
<tab-content aria-labelledby="2" aria-hidden="true">
<p>Gentrify activated charcoal cronut, gluten-free trust fund freegan pabst literally organic. Mustache artisan fixie seitan migas mixtape, pop-up raw denim tofu tousled crucifix vegan listicle thundercats. Tumeric affogato gluten-free gochujang.
Wayfarers banh mi occupy, chia hexagon banjo schlitz. Intelligentsia hammock austin, viral craft beer kickstarter dreamcatcher flannel lo-fi ramps humblebrag pork belly cardigan. Leggings master cleanse vape, hell of squid PBR&B godard biodiesel
distillery portland ethical farm-to-table echo park. Before they sold out gentrify iceland, tumblr selfies hell of vegan 3 wolf moon literally crucifix taxidermy.</p>
</tab-content>
<!-- /end tab2 -->
</tab>
<tab role="tabpanel">
<tab-label role="tab" aria-controls="3" aria-selected="false" for="3" tabindex="-1">Tab 3</tab-label>
<tab-content aria-labelledby="3" aria-hidden="true">
<p>Succulents iPhone XOXO selfies kogi, meh poke af lo-fi jean shorts aesthetic authentic. Echo park farm-to-table man bun truffaut DIY art party live-edge. Fanny pack celiac tilde vexillologist letterpress pickled. Prism readymade fashion axe asymmetrical
XOXO glossier. Thundercats flannel williamsburg tofu quinoa butcher. Kickstarter selfies polaroid, subway tile dreamcatcher prism flexitarian single-origin coffee migas vaporware coloring book venmo slow-carb franzen. Synth bespoke authentic,
knausgaard kogi listicle chicharrones sriracha hot chicken.</p>
</tab-content>
<!-- /end tab3 -->
</tab>
<tab role="tabpanel">
<tab-label role="tab" aria-controls="4" aria-selected="false" for="4" tabindex="-1">Tab 4</tab-label>
<tab-content aria-labelledby="4" aria-hidden="true">
<p>Literally waistcoat mumblecore, authentic fanny pack forage microdosing lumbersexual thundercats vegan cardigan vexillologist. Knausgaard cronut stumptown flexitarian wolf mlkshk. Food truck 90's poutine banh mi normcore. Pug 90's ramps thundercats
man braid pork belly. Fingerstache you probably haven't heard of them vegan, authentic intelligentsia pour-over hell of flannel meh craft beer franzen. Stumptown bushwick bespoke photo booth shoreditch before they sold out, narwhal edison bulb
iPhone post-ironic next level. Shoreditch meh master cleanse tousled pok pok, cardigan before they sold out normcore coloring book.</p>
</tab-content>
<!-- /end tab2 -->
</tab>
</tabs>
Code: Select all
/** SCSS with crazy mixins and placeholders
*/
tabs {
@include line;
display: block;
list-style: none;
margin-bottom: 40px;
width: 100%;
}
tab {
position: relative;
width: 100%;
@include tablet {
@include unit(false);
}
@include mobile {
@include unit(false);
}
}
tab-label {
@include ellipsis;
@include unit;
background-color: #e0e0e0;
border-left: 1px solid $line;
border-right: 1px solid $line;
border-top: 1px solid $line;
color: #2a2a2a;
cursor: pointer;
display: block;
font-size: 16px;
line-height: 50px;
margin-right: 2px;
min-width: 90px;
max-width: 20%;
overflow: hidden;
padding: 10px 20px;
text-align: center;
text-decoration: none;
width: auto;
@include tablet {
background-color: $white;
border: 0;
border-bottom: 1px solid $line;
min-width: 100%;
text-align: left;
&:hover {
background-color: #e0e0e0;
}
}
@include mobile {
background-color: $white;
border: 0;
border-bottom: 1px solid $line;
min-width: 100%;
text-align: left;
&:hover {
background-color: #e0e0e0;
}
}
&:hover {
background-color: #000;
color: #fff;
}
}
tab-content {
@inclinde line;
background-color: $white;
border: 1px solid $line;
color: #484848;
display: none;
font-family: 'Roboto', sans-serif;
letter-spacing: .25px;
line-height: 28px;
padding: 35px 25px;
@include tablet {
border: 0;
border-bottom: 1px solid $line;
}
@include mobile {
border: 0;
border-bottom: 1px solid $line;
}
}
tab-label.active {
background-color: $white;
border-bottom: 0;
border-top: 1px solid $magenta;
color: #333;
position: relative;
z-index: 2;
top: 0px;
@include tablet {
border-left: 2px solid $magenta;
border-top: 0;
}
@include mobile {
border-left: 2px solid $magenta;
border-top: 0;
}
}
tab-label.active + tab-content {
@include box-shadow;
display: block;
position: absolute;
top: 70px;
width: calc(100vw - 80px);
@include tablet {
border-left: 2px solid $magenta;
border-top: 0;
position: static;
}
@include mobile {
border-left: 2px solid $magenta;
border-top: 0;
position: static;
}
@include ie {
width: calc(100vw - 97px);
}
}