custom-variables.scss

/*
 * Responsive vertical tabs for Bootstrap 5
 *
 * Copyright (c) 2020-2021 Tromgy (tromgy@yahoo.com)
 *
 * Custom variable definitions. You can change these variables
 * to suit your needs without messing with the main stylesheet.
 *
 * This software is supplied under the terms of the MIT License, a
 * copy of which should be located in the distribution where this
 * file was obtained (LICENSE.txt). A copy of the license may also be
 * found online at https://opensource.org/licenses/MIT.
 *
 */

// When the view is narrower than this tabs turn into an accordion,
// otherwise horizontal tabs are used up until $vertical-tabs-min width
$horizontal-tabs-min: 428px; // iPhone 13 Pro Max (as a proxy for "largest smartphone")

// When the view is wider than this, vertical tabs are used
$vertical-tabs-min: 767px; // Need it to be just 1px less than 768px Bootstrap column breakpoint

// Set this depending on the longest expected caption text of the tabs
// If the text is still longer than that, it will be truncated with ellipsis
// NOTE: there are practical limits on this value, the "good" values
// seem to be somewhere beetween 4 and 12rem;
$fixed-tab-size: 8rem;

// These only apply to regular (not sideways) vertical tabs
// In all other cases the text is center-aligned
$left-tabs-text-align: left;
$right-tabs-text-align: right;