-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtabs.min.css
1 lines (1 loc) · 1.96 KB
/
tabs.min.css
1
.tabs-tabset{--cols:1;--button-rounding:10px;--tab-color:#343434;--tab-selected:#565656}.tabs-tabs{display:grid;grid-template-columns:repeat(var(--cols),1fr);border-bottom:1px solid #fff}.tabs-tabs button{border-top-left-radius:var(--button-rounding);border-top-right-radius:var(--button-rounding);background:var(--tab-color);border:none;margin:0 5px}.tabs-tabs button.selected{background:var(--tab-selected)}.tabs-contents{padding:1em}.tabs-content.hidden{display:none}.tabs-tabset.wrapped .tabs-tabs{display:flex;flex-direction:row;flex-wrap:wrap}.tabs-tabset.wrapped .tabs-tabs button{transition-duration:0s}.tabs-tabset.wrapped .tabs-tabs button.selected{order:calc(var(--cols) + 1);width:100%;margin-top:-5px}.tabs-tabset.stacked .tabs-tabs{display:grid;grid-template-columns:1fr;border-bottom:1px solid #fff}.tabs-tabset.stacked .tabs-tabs button{border-bottom:1px solid #fff;border-radius:0}.tabs-tabset.stacked .tabs-tabs button:first-child{border-top-left-radius:var(--button-rounding);border-top-right-radius:var(--button-rounding)}.tabs-tabset.stacked .tabs-tabs button:last-child{border-bottom:none}.tabs-tabset.left{display:grid;grid-template-columns:2.5em 1fr;grid-template-areas:"tabs content"}.tabs-tabset.right{display:grid;grid-template-columns:1fr 2.5em;grid-template-areas:"content tabs"}.tabs-tabset.left .tabs-tabs,.tabs-tabset.right .tabs-tabs{border-bottom:none;grid-area:tabs;grid-template-columns:1fr}.tabs-tabset.left .tabs-tabs button span,.tabs-tabset.right .tabs-tabs button span{writing-mode:vertical-rl;text-orientation:upright}.tabs-tabset.left .tabs-tabs{border-right:1px solid #fff}.tabs-tabset.right .tabs-tabs{border-left:1px solid #fff}.tabs-tabset.left .tabs-tabs button{border-radius:initial;border-top-left-radius:var(--button-rounding);border-bottom-left-radius:var(--button-rounding);margin:5px 0}.tabs-tabset.right .tabs-tabs button{border-radius:initial;border-top-right-radius:var(--button-rounding);border-bottom-right-radius:var(--button-rounding);margin:5px 0}