I was looking for Tabs v2 navigation position on left. I found this answer, but I cannot find this section anywhere:
Please help
I was looking for Tabs v2 navigation position on left. I found this answer, but I cannot find this section anywhere:
Please help
Hi @kroolik123,
The Design Cloud is currently available on Pro, not yet for X theme. And that one is just contributed by users
But you can do the same CSS to Tab element’s CSS
/*
// Adjust Breakpoint to Suit
// -------------------------
*/
@media (min-width: 1000px) {
/*
// Layout Styles
// -------------
// Do not change these styles unless you
// know what you are doing.
//
// 01. Change `row` to `row-reverse` if
// you wish to flip the layout. Your
// theming styles below will need
// be updated as well.
// 02. Ensures that the tablist will
// be the width of the longest tab.
// 03. Keeps tabs from scrolling when
// in this layout configuration.
// 04. Ensures that the panels container
// fills all available space.
// 05. Allows panels to stretch vertically
// if the height of all tabs combined
// is taller than the current panel.
*/
$el {
display: flex;
flex-flow: row nowrap; /* 01 */
align-items: stretch;
}
$el .x-tabs-list {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
flex: 0 0 auto; /* 02 */
overflow: visible; /* 03 */
}
$el .x-tabs-panels {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
flex: 1 1 0%; /* 04 */
height: auto !important; /* 05 */
}
/*
// Theming Styles
// --------------
// All changes made here are based on
// the original styles used. You will
// need to update these depending on
// how you style your "Tabs" Element.
*/
$el .x-tabs-list {
margin: 0 -1px 0 0;
}
$el .x-tabs-list button {
padding-left: 0;
border-width: 0 1px 0 0;
text-align: right;
}
$el .x-tabs-list button:hover,
$el .x-tabs-list button[class*="active"] {
border-color: #000000;
}
}
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.