bootstrap-less-port
Version:
A Less port of Bootstrap v4
1,118 lines (846 loc) • 42.9 kB
text/less
// Variables
//
// Variables should follow the `@component-state-property-size` formula for
// consistent naming. Ex: @nav-link-disabled-color and @modal-content-box-shadow-xs.
// Color system
@white: #fff;
@gray-100: #f8f9fa;
@gray-200: #e9ecef;
@gray-300: #dee2e6;
@gray-400: #ced4da;
@gray-500: #adb5bd;
@gray-600: #6c757d;
@gray-700: #495057;
@gray-800: #343a40;
@gray-900: #212529;
@black: #000;
@grays: {
100: @gray-100;
200: @gray-200;
300: @gray-300;
400: @gray-400;
500: @gray-500;
600: @gray-600;
700: @gray-700;
800: @gray-800;
900: @gray-900;
};
@blue: #007bff;
@indigo: #6610f2;
@purple: #6f42c1;
@pink: #e83e8c;
@red: #dc3545;
@orange: #fd7e14;
@yellow: #ffc107;
@green: #28a745;
@teal: #20c997;
@cyan: #17a2b8;
@colors: {
blue: @blue;
indigo: @indigo;
purple: @purple;
pink: @pink;
red: @red;
orange: @orange;
yellow: @yellow;
green: @green;
teal: @teal;
cyan: @cyan;
white: @white;
gray: @gray-600;
gray-dark: @gray-800;
};
@primary: @blue;
@secondary: @gray-600;
@success: @green;
@info: @cyan;
@warning: @yellow;
@danger: @red;
@light: @gray-100;
@dark: @gray-800;
@theme-colors: {
primary: @primary;
secondary: @secondary;
success: @success;
info: @info;
warning: @warning;
danger: @danger;
light: @light;
dark: @dark;
};
// Set a specific jump point for requesting color jumps
@theme-color-interval: 8%;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
@yiq-contrasted-threshold: 150;
// Customize the light and dark text colors for use in our YIQ color contrast function.
@yiq-text-dark: @gray-900;
@yiq-text-light: @white;
// Characters which are escaped by the escape-svg function
// LESS PORT: Because of the unconventional use of special characters here, the value of this
// variable is considered to be a whole string -- not a ruleset!
@escaped-characters: {
<: %3c;
>: %3e;
#: %23;
(: %28;
): %29;
};
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
// LESS PORT: Note that `false` has no actual meaning in Less, but in this case it has the desired
// effect (of disabling a feature) only because it’s not `true`, which is what Less cares about.
@enable-caret: true;
@enable-rounded: true;
@enable-shadows: false;
@enable-gradients: false;
@enable-transitions: true;
@enable-prefers-reduced-motion-media-query: true;
@enable-hover-media-query: false; // Deprecated, no longer affects any compiled CSS
@enable-grid-classes: true;
@enable-pointer-cursor-for-buttons: true;
@enable-print-styles: true;
@enable-responsive-font-sizes: false;
@enable-validation-icons: true;
@enable-deprecation-messages: true;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the @spacers map, should you need more variation.
@spacer: 1rem;
@spacers: {
0: 0;
1: (@spacer * 0.25);
2: (@spacer * 0.5);
3: @spacer;
4: (@spacer * 1.5);
5: (@spacer * 3);
};
// This variable affects the `.h-*` and `.w-*` classes.
@sizes: {
25: 25%;
50: 50%;
75: 75%;
100: 100%;
auto: auto;
};
// Body
//
// Settings for the `<body>` element.
@body-bg: @white;
@body-color: @gray-900;
// Links
//
// Style anchor elements.
@link-color: theme-color(primary);
@link-decoration: none;
@link-hover-color: darken(@link-color, 15%);
@link-hover-decoration: underline;
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
@emphasized-link-hover-darken-percentage: 15%;
// Paragraphs
//
// Style p element.
@paragraph-margin-bottom: 1rem;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
@grid-breakpoints: {
xs: 0;
sm: 576px;
md: 768px;
lg: 992px;
xl: 1200px;
};
//@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
//@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
@container-max-widths: {
sm: 540px;
md: 720px;
lg: 960px;
xl: 1140px;
};
//@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-row-columns: 6;
// Components
//
// Define common padding and border radius sizes and more.
@line-height-lg: 1.5;
@line-height-sm: 1.5;
@border-width: 1px;
@border-color: @gray-300;
@border-radius: 0.25rem;
@border-radius-lg: 0.3rem;
@border-radius-sm: 0.2rem;
@rounded-pill: 50rem;
@box-shadow-sm: 0 0.125rem 0.25rem fade(@black, 7.5%);
@box-shadow: 0 0.5rem 1rem fade(@black, 15%);
@box-shadow-lg: 0 1rem 3rem fade(@black, 17.5%);
@component-active-color: @white;
@component-active-bg: theme-color(primary);
@caret-width: 0.3em;
@caret-vertical-align: (@caret-width * 0.85);
@caret-spacing: (@caret-width * 0.85);
@transition-base: all 0.2s ease-in-out;
@transition-fade: opacity 0.15s linear;
@transition-collapse: height 0.35s ease;
// LESS PORT: No `join()` to extend the list here. The variable can just be overridden if different/
// additional values are desired.
@embed-responsive-aspect-ratios:
21 9,
16 9,
4 3,
1 1;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 1rem; // Assumes the browser default, typically `16px`
@font-size-lg: (@font-size-base * 1.25);
@font-size-sm: (@font-size-base * 0.875);
@font-weight-lighter: lighter;
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 700;
@font-weight-bolder: bolder;
@font-weight-base: @font-weight-normal;
@line-height-base: 1.5;
@h1-font-size: (@font-size-base * 2.5);
@h2-font-size: (@font-size-base * 2);
@h3-font-size: (@font-size-base * 1.75);
@h4-font-size: (@font-size-base * 1.5);
@h5-font-size: (@font-size-base * 1.25);
@h6-font-size: @font-size-base;
@headings-margin-bottom: (@spacer / 2);
@headings-font-family: ~""; // LESS PORT: Sass version uses `null`
@headings-font-weight: 500;
@headings-line-height: 1.2;
@headings-color: ~""; // LESS PORT: Sass version uses `null`
@display1-size: 6rem;
@display2-size: 5.5rem;
@display3-size: 4.5rem;
@display4-size: 3.5rem;
@display1-weight: 300;
@display2-weight: 300;
@display3-weight: 300;
@display4-weight: 300;
@display-line-height: @headings-line-height;
@lead-font-size: (@font-size-base * 1.25);
@lead-font-weight: 300;
@small-font-size: 80%;
@text-muted: @gray-600;
@blockquote-small-color: @gray-600;
@blockquote-small-font-size: @small-font-size;
@blockquote-font-size: (@font-size-base * 1.25);
@hr-border-color: fade(@black, 10%);
@hr-border-width: @border-width;
@mark-padding: 0.2em;
@dt-font-weight: @font-weight-bold;
@kbd-box-shadow: inset 0 -0.1rem 0 fade(@black, 25%);
@nested-kbd-font-weight: @font-weight-bold;
@list-inline-padding: 0.5rem;
@mark-bg: #fcf8e3;
@hr-margin-y: @spacer;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
@table-cell-padding: 0.75rem;
@table-cell-padding-sm: 0.3rem;
@table-color: @body-color;
@table-bg: ~""; // LESS PORT: Sass version uses `null`
@table-accent-bg: fade(@black, 5%);
@table-hover-color: @table-color;
@table-hover-bg: fade(@black, 7.5%);
@table-active-bg: @table-hover-bg;
@table-border-width: @border-width;
@table-border-color: @border-color;
@table-head-bg: @gray-200;
@table-head-color: @gray-700;
@table-dark-color: @white;
@table-dark-bg: @gray-800;
@table-dark-accent-bg: fade(@white, 5%);
@table-dark-hover-color: @table-dark-color;
@table-dark-hover-bg: fade(@white, 7.5%);
@table-dark-border-color: lighten(@table-dark-bg, 7.5%);
@table-striped-order: odd;
@table-caption-color: @text-muted;
@table-bg-level: -9;
@table-border-level: -6;
// Buttons + Forms
//
// Shared variables that are reassigned to `@input-` and `@btn-` specific variables.
@input-btn-padding-y: 0.375rem;
@input-btn-padding-x: 0.75rem;
@input-btn-font-family: ~""; // LESS PORT: Sass version uses `null`
@input-btn-font-size: @font-size-base;
@input-btn-line-height: @line-height-base;
@input-btn-focus-width: 0.2rem;
@input-btn-focus-color: fade(@component-active-bg, 25%);
@input-btn-focus-box-shadow: 0 0 0 @input-btn-focus-width @input-btn-focus-color;
@input-btn-padding-y-sm: 0.25rem;
@input-btn-padding-x-sm: 0.5rem;
@input-btn-font-size-sm: @font-size-sm;
@input-btn-line-height-sm: @line-height-sm;
@input-btn-padding-y-lg: 0.5rem;
@input-btn-padding-x-lg: 1rem;
@input-btn-font-size-lg: @font-size-lg;
@input-btn-line-height-lg: @line-height-lg;
@input-btn-border-width: @border-width;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
@btn-padding-y: @input-btn-padding-y;
@btn-padding-x: @input-btn-padding-x;
@btn-font-family: @input-btn-font-family;
@btn-font-size: @input-btn-font-size;
@btn-line-height: @input-btn-line-height;
@btn-white-space: ~""; // Set to `nowrap` to prevent text wrapping // LESS PORT: Sass version uses `null`
@btn-padding-y-sm: @input-btn-padding-y-sm;
@btn-padding-x-sm: @input-btn-padding-x-sm;
@btn-font-size-sm: @input-btn-font-size-sm;
@btn-line-height-sm: @input-btn-line-height-sm;
@btn-padding-y-lg: @input-btn-padding-y-lg;
@btn-padding-x-lg: @input-btn-padding-x-lg;
@btn-font-size-lg: @input-btn-font-size-lg;
@btn-line-height-lg: @input-btn-line-height-lg;
@btn-border-width: @input-btn-border-width;
@btn-font-weight: @font-weight-normal;
@btn-box-shadow: inset 0 1px 0 fade(@white, 15%), 0 1px 1px fade(@black, 7.5%);
@btn-focus-width: @input-btn-focus-width;
@btn-focus-box-shadow: @input-btn-focus-box-shadow;
@btn-disabled-opacity: 0.65;
@btn-active-box-shadow: inset 0 3px 5px fade(@black, 12.5%);
@btn-link-disabled-color: @gray-600;
@btn-block-spacing-y: 0.5rem;
// Allows for customizing button radius independently from global border radius
@btn-border-radius: @border-radius;
@btn-border-radius-lg: @border-radius-lg;
@btn-border-radius-sm: @border-radius-sm;
@btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
// Forms
@label-margin-bottom: 0.5rem;
@input-padding-y: @input-btn-padding-y;
@input-padding-x: @input-btn-padding-x;
@input-font-family: @input-btn-font-family;
@input-font-size: @input-btn-font-size;
@input-font-weight: @font-weight-base;
@input-line-height: @input-btn-line-height;
@input-padding-y-sm: @input-btn-padding-y-sm;
@input-padding-x-sm: @input-btn-padding-x-sm;
@input-font-size-sm: @input-btn-font-size-sm;
@input-line-height-sm: @input-btn-line-height-sm;
@input-padding-y-lg: @input-btn-padding-y-lg;
@input-padding-x-lg: @input-btn-padding-x-lg;
@input-font-size-lg: @input-btn-font-size-lg;
@input-line-height-lg: @input-btn-line-height-lg;
@input-bg: @white;
@input-disabled-bg: @gray-200;
@input-color: @gray-700;
@input-border-color: @gray-400;
@input-border-width: @input-btn-border-width;
@input-box-shadow: inset 0 1px 1px fade(@black, 7.5%);
@input-border-radius: @border-radius;
@input-border-radius-lg: @border-radius-lg;
@input-border-radius-sm: @border-radius-sm;
@input-focus-bg: @input-bg;
@input-focus-border-color: lighten(@component-active-bg, 25%);
@input-focus-color: @input-color;
@input-focus-width: @input-btn-focus-width;
@input-focus-box-shadow: @input-btn-focus-box-shadow;
@input-placeholder-color: @gray-600;
@input-plaintext-color: @body-color;
@input-height-border: (@input-border-width * 2);
@input-height-inner: add((@input-line-height * 1em), (@input-padding-y * 2));
@input-height-inner-half: add((@input-line-height * 0.5em), (@input-padding-y));
@input-height-inner-quarter: add((@input-line-height * 0.25em), (@input-padding-y / 2));
@input-height: add((@input-line-height * 1em), add((@input-padding-y * 2), @input-height-border, false));
@input-height-sm: add((@input-line-height-sm * 1em), add((@input-padding-y-sm * 2), @input-height-border, false));
@input-height-lg: add((@input-line-height-lg * 1em), add((@input-padding-y-lg * 2), @input-height-border, false));
@input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@form-text-margin-top: 0.25rem;
@form-check-input-gutter: 1.25rem;
@form-check-input-margin-y: 0.3rem;
@form-check-input-margin-x: 0.25rem;
@form-check-inline-margin-x: 0.75rem;
@form-check-inline-input-margin-x: 0.3125rem;
@form-grid-gutter-width: 10px;
@form-group-margin-bottom: 1rem;
@input-group-addon-color: @input-color;
@input-group-addon-bg: @gray-200;
@input-group-addon-border-color: @input-border-color;
@custom-forms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@custom-control-gutter: 0.5rem;
@custom-control-spacer-x: 1rem;
@custom-control-cursor: ~""; // LESS PORT: Sass version uses `null`
@custom-control-indicator-size: 1rem;
@custom-control-indicator-bg: @input-bg;
@custom-control-indicator-bg-size: 50% 50%;
@custom-control-indicator-box-shadow: @input-box-shadow;
@custom-control-indicator-border-color: @gray-500;
@custom-control-indicator-border-width: @input-border-width;
@custom-control-label-color: ~""; // LESS PORT: Sass version uses `null`
@custom-control-indicator-disabled-bg: @input-disabled-bg;
@custom-control-label-disabled-color: @gray-600;
@custom-control-indicator-checked-color: @component-active-color;
@custom-control-indicator-checked-bg: @component-active-bg;
@custom-control-indicator-checked-disabled-bg: fade(theme-color(primary), 50%);
@custom-control-indicator-checked-box-shadow: none;
@custom-control-indicator-checked-border-color: @custom-control-indicator-checked-bg;
@custom-control-indicator-focus-box-shadow: @input-focus-box-shadow;
@custom-control-indicator-focus-border-color: @input-focus-border-color;
@custom-control-indicator-active-color: @component-active-color;
@custom-control-indicator-active-bg: lighten(@component-active-bg, 35%);
@custom-control-indicator-active-box-shadow: none;
@custom-control-indicator-active-border-color: @custom-control-indicator-active-bg;
@custom-checkbox-indicator-border-radius: @border-radius;
@custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='@{custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
@custom-checkbox-indicator-indeterminate-bg: @component-active-bg;
@custom-checkbox-indicator-indeterminate-color: @custom-control-indicator-checked-color;
@custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='@{custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>");
@custom-checkbox-indicator-indeterminate-box-shadow: none;
@custom-checkbox-indicator-indeterminate-border-color: @custom-checkbox-indicator-indeterminate-bg;
@custom-radio-indicator-border-radius: 50%;
@custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='@{custom-control-indicator-checked-color}'/></svg>");
@custom-switch-width: (@custom-control-indicator-size * 1.75);
@custom-switch-indicator-border-radius: (@custom-control-indicator-size / 2);
@custom-switch-indicator-size: subtract(@custom-control-indicator-size, (@custom-control-indicator-border-width * 4));
@custom-select-padding-y: @input-padding-y;
@custom-select-padding-x: @input-padding-x;
@custom-select-font-family: @input-font-family;
@custom-select-font-size: @input-font-size;
@custom-select-height: @input-height;
@custom-select-indicator-padding: 1rem; // Extra padding to account for the presence of the background-image based indicator
@custom-select-font-weight: @input-font-weight;
@custom-select-line-height: @input-line-height;
@custom-select-color: @input-color;
@custom-select-disabled-color: @gray-600;
@custom-select-bg: @input-bg;
@custom-select-disabled-bg: @gray-200;
@custom-select-bg-size: 8px 10px; // In pixels because image dimensions
@custom-select-indicator-color: @gray-800;
@custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='@{custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
@custom-select-background: escape-svg(@custom-select-indicator) no-repeat right @custom-select-padding-x ~"center/@{custom-select-bg-size}"; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
@custom-select-feedback-icon-padding-right: add((1em * 0.75), ((2 * @custom-select-padding-y * 0.75) + @custom-select-padding-x + @custom-select-indicator-padding));
@custom-select-feedback-icon-position: center right (@custom-select-padding-x + @custom-select-indicator-padding);
@custom-select-feedback-icon-size: @input-height-inner-half @input-height-inner-half;
@custom-select-border-width: @input-border-width;
@custom-select-border-color: @input-border-color;
@custom-select-border-radius: @border-radius;
@custom-select-box-shadow: inset 0 1px 2px fade(@black, 7.5%);
@custom-select-focus-border-color: @input-focus-border-color;
@custom-select-focus-width: @input-focus-width;
@custom-select-focus-box-shadow: 0 0 0 @custom-select-focus-width @input-btn-focus-color;
@custom-select-padding-y-sm: @input-padding-y-sm;
@custom-select-padding-x-sm: @input-padding-x-sm;
@custom-select-font-size-sm: @input-font-size-sm;
@custom-select-height-sm: @input-height-sm;
@custom-select-padding-y-lg: @input-padding-y-lg;
@custom-select-padding-x-lg: @input-padding-x-lg;
@custom-select-font-size-lg: @input-font-size-lg;
@custom-select-height-lg: @input-height-lg;
@custom-range-track-width: 100%;
@custom-range-track-height: 0.5rem;
@custom-range-track-cursor: pointer;
@custom-range-track-bg: @gray-300;
@custom-range-track-border-radius: 1rem;
@custom-range-track-box-shadow: inset 0 0.25rem 0.25rem fade(@black, 10%);
@custom-range-thumb-width: 1rem;
@custom-range-thumb-height: @custom-range-thumb-width;
@custom-range-thumb-bg: @component-active-bg;
@custom-range-thumb-border: 0;
@custom-range-thumb-border-radius: 1rem;
@custom-range-thumb-box-shadow: 0 0.1rem 0.25rem fade(@black, 10%);
@custom-range-thumb-focus-box-shadow: 0 0 0 1px @body-bg, @input-focus-box-shadow;
@custom-range-thumb-focus-box-shadow-width: @input-focus-width; // For focus box shadow issue in IE/Edge
@custom-range-thumb-active-bg: lighten(@component-active-bg, 35%);
@custom-range-thumb-disabled-bg: @gray-500;
@custom-file-height: @input-height;
@custom-file-height-inner: @input-height-inner;
@custom-file-focus-border-color: @input-focus-border-color;
@custom-file-focus-box-shadow: @input-focus-box-shadow;
@custom-file-disabled-bg: @input-disabled-bg;
@custom-file-padding-y: @input-padding-y;
@custom-file-padding-x: @input-padding-x;
@custom-file-line-height: @input-line-height;
@custom-file-font-family: @input-font-family;
@custom-file-font-weight: @input-font-weight;
@custom-file-color: @input-color;
@custom-file-bg: @input-bg;
@custom-file-border-width: @input-border-width;
@custom-file-border-color: @input-border-color;
@custom-file-border-radius: @input-border-radius;
@custom-file-box-shadow: @input-box-shadow;
@custom-file-button-color: @custom-file-color;
@custom-file-button-bg: @input-group-addon-bg;
@custom-file-text: {
en: "Browse";
};
// Form validation
@form-feedback-margin-top: @form-text-margin-top;
@form-feedback-font-size: @small-font-size;
@form-feedback-valid-color: theme-color(success);
@form-feedback-invalid-color: theme-color(danger);
@form-feedback-icon-valid-color: @form-feedback-valid-color;
@form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='@{form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-0.4-1.04.46-1.4 1.1-0.8l1.1 1.4 3.4-3.8c.6-0.63 1.6-0.27 1.2.7l-4 4.6c-0.43.5-0.8.4-1.1.1z'/></svg>");
@form-feedback-icon-invalid-color: @form-feedback-invalid-color;
@form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='@{form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='0.6' fill='@{form-feedback-icon-invalid-color}' stroke='none'/></svg>");
// LESS PORT: No `map-merge()` to extend the ruleset here. The variable can just be overridden if
// different/additional values are desired.
@form-validation-states: {
@valid: {
color: @form-feedback-valid-color;
icon: @form-feedback-icon-valid;
};
@invalid: {
color: @form-feedback-invalid-color;
icon: @form-feedback-icon-invalid;
};
};
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
@zindex-dropdown: 1000;
@zindex-sticky: 1020;
@zindex-fixed: 1030;
@zindex-modal-backdrop: 1040;
@zindex-modal: 1050;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
// Navs
@nav-link-padding-y: 0.5rem;
@nav-link-padding-x: 1rem;
@nav-link-disabled-color: @gray-600;
@nav-tabs-border-color: @gray-300;
@nav-tabs-border-width: @border-width;
@nav-tabs-border-radius: @border-radius;
@nav-tabs-link-hover-border-color: @gray-200 @gray-200 @nav-tabs-border-color;
@nav-tabs-link-active-color: @gray-700;
@nav-tabs-link-active-bg: @body-bg;
@nav-tabs-link-active-border-color: @gray-300 @gray-300 @nav-tabs-link-active-bg;
@nav-pills-border-radius: @border-radius;
@nav-pills-link-active-color: @component-active-color;
@nav-pills-link-active-bg: @component-active-bg;
@nav-divider-color: @gray-200;
@nav-divider-margin-y: (@spacer / 2);
// Navbar
@navbar-padding-y: (@spacer / 2);
@navbar-padding-x: @spacer;
@navbar-nav-link-padding-x: 0.5rem;
@navbar-brand-font-size: @font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
@nav-link-height: (@font-size-base * @line-height-base + @nav-link-padding-y * 2);
@navbar-brand-height: (@navbar-brand-font-size * @line-height-base);
@navbar-brand-padding-y: ((@nav-link-height - @navbar-brand-height) / 2);
@navbar-toggler-padding-y: 0.25rem;
@navbar-toggler-padding-x: 0.75rem;
@navbar-toggler-font-size: @font-size-lg;
@navbar-toggler-border-radius: @btn-border-radius;
@navbar-dark-color: fade(@white, 50%);
@navbar-dark-hover-color: fade(@white, 75%);
@navbar-dark-active-color: @white;
@navbar-dark-disabled-color: fade(@white, 25%);
@navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='@{navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
@navbar-dark-toggler-border-color: fade(@white, 10%);
@navbar-light-color: fade(@black, 50%);
@navbar-light-hover-color: fade(@black, 70%);
@navbar-light-active-color: fade(@black, 90%);
@navbar-light-disabled-color: fade(@black, 30%);
@navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='@{navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
@navbar-light-toggler-border-color: fade(@black, 10%);
@navbar-light-brand-color: @navbar-light-active-color;
@navbar-light-brand-hover-color: @navbar-light-active-color;
@navbar-dark-brand-color: @navbar-dark-active-color;
@navbar-dark-brand-hover-color: @navbar-dark-active-color;
// Dropdowns
//
// Dropdown menu container and contents.
@dropdown-min-width: 10rem;
@dropdown-padding-y: 0.5rem;
@dropdown-spacer: 0.125rem;
@dropdown-font-size: @font-size-base;
@dropdown-color: @body-color;
@dropdown-bg: @white;
@dropdown-border-color: fade(@black, 15%);
@dropdown-border-radius: @border-radius;
@dropdown-border-width: @border-width;
@dropdown-inner-border-radius: subtract(@dropdown-border-radius, @dropdown-border-width);
@dropdown-divider-bg: @gray-200;
@dropdown-divider-margin-y: @nav-divider-margin-y;
@dropdown-box-shadow: 0 0.5rem 1rem fade(@black, 17.5%);
@dropdown-link-color: @gray-900;
@dropdown-link-hover-color: darken(@gray-900, 5%);
@dropdown-link-hover-bg: @gray-100;
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-600;
@dropdown-item-padding-y: 0.25rem;
@dropdown-item-padding-x: 1.5rem;
@dropdown-header-color: @gray-600;
@dropdown-header-padding: @dropdown-padding-y @dropdown-item-padding-x;
// Pagination
@pagination-padding-y: 0.5rem;
@pagination-padding-x: 0.75rem;
@pagination-padding-y-sm: 0.25rem;
@pagination-padding-x-sm: 0.5rem;
@pagination-padding-y-lg: 0.75rem;
@pagination-padding-x-lg: 1.5rem;
@pagination-line-height: 1.25;
@pagination-color: @link-color;
@pagination-bg: @white;
@pagination-border-width: @border-width;
@pagination-border-color: @gray-300;
@pagination-focus-box-shadow: @input-btn-focus-box-shadow;
@pagination-focus-outline: 0;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gray-200;
@pagination-hover-border-color: @gray-300;
@pagination-active-color: @component-active-color;
@pagination-active-bg: @component-active-bg;
@pagination-active-border-color: @pagination-active-bg;
@pagination-disabled-color: @gray-600;
@pagination-disabled-bg: @white;
@pagination-disabled-border-color: @gray-300;
// Jumbotron
@jumbotron-padding: 2rem;
@jumbotron-color: ~""; // LESS PORT: Sass version uses `null`
@jumbotron-bg: @gray-200;
// Cards
@card-spacer-y: 0.75rem;
@card-spacer-x: 1.25rem;
@card-border-width: @border-width;
@card-border-radius: @border-radius;
@card-border-color: fade(@black, 12.5%);
@card-inner-border-radius: subtract(@card-border-radius, @card-border-width);
@card-cap-bg: fade(@black, 3%);
@card-cap-color: ~""; // LESS PORT: Sass version uses `null`
@card-height: ~""; // LESS PORT: Sass version uses `null`
@card-color: ~""; // LESS PORT: Sass version uses `null`
@card-bg: @white;
@card-img-overlay-padding: 1.25rem;
@card-group-margin: (@grid-gutter-width / 2);
@card-deck-margin: @card-group-margin;
@card-columns-count: 3;
@card-columns-gap: 1.25rem;
@card-columns-margin: @card-spacer-y;
// Tooltips
@tooltip-font-size: @font-size-sm;
@tooltip-max-width: 200px;
@tooltip-color: @white;
@tooltip-bg: @black;
@tooltip-border-radius: @border-radius;
@tooltip-opacity: 0.9;
@tooltip-padding-y: 0.25rem;
@tooltip-padding-x: 0.5rem;
@tooltip-margin: 0;
@tooltip-arrow-width: 0.8rem;
@tooltip-arrow-height: 0.4rem;
@tooltip-arrow-color: @tooltip-bg;
// Form tooltips must come after regular tooltips
@form-feedback-tooltip-padding-y: @tooltip-padding-y;
@form-feedback-tooltip-padding-x: @tooltip-padding-x;
@form-feedback-tooltip-font-size: @tooltip-font-size;
@form-feedback-tooltip-line-height: @line-height-base;
@form-feedback-tooltip-opacity: @tooltip-opacity;
@form-feedback-tooltip-border-radius: @tooltip-border-radius;
// Popovers
@popover-font-size: @font-size-sm;
@popover-bg: @white;
@popover-max-width: 276px;
@popover-border-width: @border-width;
@popover-border-color: fade(@black, 20%);
@popover-border-radius: @border-radius-lg;
@popover-inner-border-radius: subtract(@popover-border-radius, @popover-border-width);
@popover-box-shadow: 0 0.25rem 0.5rem fade(@black, 20%);
@popover-header-bg: darken(@popover-bg, 3%);
@popover-header-color: @headings-color;
@popover-header-padding-y: 0.5rem;
@popover-header-padding-x: 0.75rem;
@popover-body-color: @body-color;
@popover-body-padding-y: @popover-header-padding-y;
@popover-body-padding-x: @popover-header-padding-x;
@popover-arrow-width: 1rem;
@popover-arrow-height: 0.5rem;
@popover-arrow-color: @popover-bg;
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
// Toasts
@toast-max-width: 350px;
@toast-padding-x: 0.75rem;
@toast-padding-y: 0.25rem;
@toast-font-size: 0.875rem;
@toast-color: ~""; // LESS PORT: Sass version uses `null`
@toast-background-color: fade(@white, 85%);
@toast-border-width: 1px;
@toast-border-color: rgba(0, 0, 0, 0.1);
@toast-border-radius: 0.25rem;
@toast-box-shadow: 0 0.25rem 0.75rem fade(@black, 10%);
@toast-header-color: @gray-600;
@toast-header-background-color: fade(@white, 85%);
@toast-header-border-color: rgba(0, 0, 0, 0.05);
// Badges
@badge-font-size: 75%;
@badge-font-weight: @font-weight-bold;
@badge-padding-y: 0.25em;
@badge-padding-x: 0.4em;
@badge-border-radius: @border-radius;
@badge-transition: @btn-transition;
@badge-focus-width: @input-btn-focus-width;
@badge-pill-padding-x: 0.6em;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
@badge-pill-border-radius: 10rem;
// Modals
// Padding applied to the modal body
@modal-inner-padding: 1rem;
// Margin between elements in footer, must be lower than or equal to 2 * @modal-inner-padding
@modal-footer-margin-between: 0.5rem;
@modal-dialog-margin: 0.5rem;
@modal-dialog-margin-y-sm-up: 1.75rem;
@modal-title-line-height: @line-height-base;
@modal-content-color: ~""; // LESS PORT: Sass version uses `null`
@modal-content-bg: @white;
@modal-content-border-color: fade(@black, 20%);
@modal-content-border-width: @border-width;
@modal-content-border-radius: @border-radius-lg;
@modal-content-inner-border-radius: subtract(@modal-content-border-radius, @modal-content-border-width);
@modal-content-box-shadow-xs: 0 0.25rem 0.5rem fade(@black, 50%);
@modal-content-box-shadow-sm-up: 0 0.5rem 1rem fade(@black, 50%);
@modal-backdrop-bg: @black;
@modal-backdrop-opacity: 0.5;
@modal-header-border-color: @border-color;
@modal-footer-border-color: @modal-header-border-color;
@modal-header-border-width: @modal-content-border-width;
@modal-footer-border-width: @modal-header-border-width;
@modal-header-padding-y: 1rem;
@modal-header-padding-x: 1rem;
@modal-header-padding: @modal-header-padding-y @modal-header-padding-x; // Keep this for backwards compatibility
@modal-xl: 1140px;
@modal-lg: 800px;
@modal-md: 500px;
@modal-sm: 300px;
@modal-fade-transform: translate(0, -50px);
@modal-show-transform: none;
@modal-transition: transform 0.3s ease-out;
@modal-scale-transform: scale(1.02);
// Alerts
//
// Define alert colors, border radius, and padding.
@alert-padding-y: 0.75rem;
@alert-padding-x: 1.25rem;
@alert-margin-bottom: 1rem;
@alert-border-radius: @border-radius;
@alert-link-font-weight: @font-weight-bold;
@alert-border-width: @border-width;
@alert-bg-level: -10;
@alert-border-level: -9;
@alert-color-level: 6;
// Progress bars
@progress-height: 1rem;
@progress-font-size: (@font-size-base * 0.75);
@progress-bg: @gray-200;
@progress-border-radius: @border-radius;
@progress-box-shadow: inset 0 0.1rem 0.1rem fade(@black, 10%);
@progress-bar-color: @white;
@progress-bar-bg: theme-color(primary);
@progress-bar-animation-timing: 1s linear infinite;
@progress-bar-transition: width 0.6s ease;
// List group
@list-group-color: ~""; // LESS PORT: Sass version uses `null`
@list-group-bg: @white;
@list-group-border-color: fade(@black, 12.5%);
@list-group-border-width: @border-width;
@list-group-border-radius: @border-radius;
@list-group-item-padding-y: 0.75rem;
@list-group-item-padding-x: 1.25rem;
@list-group-hover-bg: @gray-100;
@list-group-active-color: @component-active-color;
@list-group-active-bg: @component-active-bg;
@list-group-active-border-color: @list-group-active-bg;
@list-group-disabled-color: @gray-600;
@list-group-disabled-bg: @list-group-bg;
@list-group-action-color: @gray-700;
@list-group-action-hover-color: @list-group-action-color;
@list-group-action-active-color: @body-color;
@list-group-action-active-bg: @gray-200;
// Image thumbnails
@thumbnail-padding: 0.25rem;
@thumbnail-bg: @body-bg;
@thumbnail-border-width: @border-width;
@thumbnail-border-color: @gray-300;
@thumbnail-border-radius: @border-radius;
@thumbnail-box-shadow: 0 1px 2px fade(@black, 7.5%);
// Figures
@figure-caption-font-size: 90%;
@figure-caption-color: @gray-600;
// Breadcrumbs
@breadcrumb-font-size: ~""; // LESS PORT: Sass version uses `null`
@breadcrumb-padding-y: 0.75rem;
@breadcrumb-padding-x: 1rem;
@breadcrumb-item-padding: 0.5rem;
@breadcrumb-margin-bottom: 1rem;
@breadcrumb-bg: @gray-200;
@breadcrumb-divider-color: @gray-600;
@breadcrumb-active-color: @gray-600;
@breadcrumb-divider: "/";
@breadcrumb-border-radius: @border-radius;
// Carousel
@carousel-control-color: @white;
@carousel-control-width: 15%;
@carousel-control-opacity: 0.5;
@carousel-control-hover-opacity: 0.9;
@carousel-control-transition: opacity 0.15s ease;
@carousel-indicator-width: 30px;
@carousel-indicator-height: 3px;
@carousel-indicator-hit-area-height: 10px;
@carousel-indicator-spacer: 3px;
@carousel-indicator-active-bg: @white;
@carousel-indicator-transition: opacity 0.6s ease;
@carousel-caption-width: 70%;
@carousel-caption-color: @white;
@carousel-control-icon-width: 20px;
@carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='@{carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>");
@carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='@{carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>");
@carousel-transition-duration: 0.6s;
@carousel-transition: transform @carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity 0.5s ease-out`)
// Spinners
@spinner-width: 2rem;
@spinner-height: @spinner-width;
@spinner-border-width: 0.25em;
@spinner-width-sm: 1rem;
@spinner-height-sm: @spinner-width-sm;
@spinner-border-width-sm: 0.2em;
// Close
@close-font-size: (@font-size-base * 1.5);
@close-font-weight: @font-weight-bold;
@close-color: @black;
@close-text-shadow: 0 1px 0 @white;
// Code
@code-font-size: 87.5%;
@code-color: @pink;
@kbd-padding-y: 0.2rem;
@kbd-padding-x: 0.4rem;
@kbd-font-size: @code-font-size;
@kbd-color: @white;
@kbd-bg: @gray-900;
@pre-color: @gray-900;
@pre-scrollable-max-height: 340px;
// Utilities
@displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex;
@overflows: auto, hidden;
@positions: static, relative, absolute, fixed, sticky;
@user-selects: all, auto, none;
// Printing
@print-page-size: a3;
@print-body-min-width: @grid-breakpoints[lg];