56 lines
1.0 KiB
SCSS
56 lines
1.0 KiB
SCSS
//----------------------------------*\
|
|
// TOGGLABLE TABS
|
|
//----------------------------------*/
|
|
.tablist {}
|
|
|
|
.tablist__item {
|
|
display:block;
|
|
float:left;
|
|
width:50%;
|
|
}
|
|
|
|
.tabpanel__tab {
|
|
border-style:solid;
|
|
border-width:0 0 1px;
|
|
display:block;
|
|
line-height:1;
|
|
margin:0 0 0 ($_space / 3);
|
|
padding:0 $_space .5em 0;
|
|
position:relative;
|
|
text-decoration:none;
|
|
|
|
@include large-xlarge-screen {
|
|
margin:0 0 0 $_space;
|
|
}
|
|
|
|
&[aria-expanded="true"] {
|
|
border-width:0 0 3px;
|
|
color:$_color_omega;
|
|
}
|
|
|
|
:first-child > & {margin:0;}
|
|
|
|
&:after {
|
|
bottom:em($_base_font_size);
|
|
content:attr(data-problems);
|
|
display:inline-block;
|
|
font-size:em(10, $_base_font_size);
|
|
position:absolute;
|
|
right:0;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
clear:both;
|
|
padding:$_space 0 $_space_narrow;
|
|
|
|
> .tab-pane {
|
|
display:none;
|
|
visibility:hidden;
|
|
}
|
|
|
|
> .active {
|
|
display:block;
|
|
visibility:visible;
|
|
}
|
|
} |