mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
d5643d53b3
Main navigation React component GitOrigin-RevId: c99a4b4a2f6fd02618689f829681118b2b64aa8d
230 lines
6.8 KiB
SCSS
230 lines
6.8 KiB
SCSS
// Overrides for Bootstrap 5's default Sass variables
|
|
|
|
$prefix: bs-;
|
|
|
|
// Options
|
|
// Quickly modify global styling by enabling or disabling optional features.
|
|
|
|
$enable-validation-icons: false;
|
|
|
|
// Fonts
|
|
$font-family-sans-serif: 'Noto Sans', sans-serif;
|
|
$font-family-serif: 'Merriweather', serif;
|
|
$font-family-monospace: 'DM Mono', monospace;
|
|
$font-size-base: 1rem;
|
|
$font-size-sm: var(--font-size-02);
|
|
$line-height-base: 1.5;
|
|
|
|
// Components
|
|
// Define common padding and border radius sizes and more.
|
|
|
|
$focus-ring-width: 2px;
|
|
$focus-ring-opacity: 1;
|
|
$focus-ring-color: $blue-30;
|
|
$focus-ring-blur: 0;
|
|
|
|
// Buttons
|
|
$btn-font-family: $font-family-sans-serif;
|
|
$btn-font-weight: 600;
|
|
$btn-padding-x: $spacing-06;
|
|
$btn-padding-y: $spacing-02;
|
|
$btn-border-radius: $border-radius-full;
|
|
$btn-border-radius-lg: $border-radius-full;
|
|
$btn-border-radius-sm: $border-radius-full;
|
|
$btn-white-space: nowrap;
|
|
|
|
// Tables
|
|
$table-cell-padding-y: $spacing-04;
|
|
$table-cell-padding-x: $spacing-04;
|
|
$table-cell-padding-y-sm: $spacing-02;
|
|
$table-cell-padding-x-sm: $spacing-02;
|
|
$table-color: var(--content-secondary);
|
|
$table-bg: var(--bg-light-primary);
|
|
$table-th-font-weight: 600;
|
|
$table-striped-color: $table-color;
|
|
$table-striped-bg: var(--bg-light-secondary);
|
|
$table-active-color: $table-color;
|
|
$table-active-bg: $bg-accent-03;
|
|
$table-hover-color: $table-color;
|
|
$table-hover-bg: var(--bg-light-secondary);
|
|
$table-border-color: $border-divider;
|
|
$table-striped-order: even;
|
|
$table-caption-color: var(--content-secondary);
|
|
|
|
// Forms
|
|
|
|
// form-text-variables
|
|
$form-text-margin-top: $spacing-04;
|
|
$form-text-font-size: var(--font-size-02);
|
|
$form-text-color: var(--content-secondary);
|
|
|
|
// form-label-variables
|
|
$form-label-margin-bottom: $spacing-02;
|
|
$form-label-font-size: var(--font-size-02);
|
|
$form-label-font-weight: 600;
|
|
$form-label-color: var(--content-secondary);
|
|
|
|
// form-input-variables
|
|
$input-padding-y: $spacing-03;
|
|
$input-padding-x: $spacing-04;
|
|
$input-font-size: var(--font-size-03);
|
|
$input-line-height: 1.5; // equivalent of var(--line-height-03) - BS expects a unitless value for further calculations
|
|
|
|
$input-padding-y-sm: $spacing-01;
|
|
$input-padding-x-sm: $spacing-03;
|
|
$input-font-size-sm: var(--font-size-02);
|
|
$input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects a unitless value for further calculations
|
|
|
|
$input-padding-y-lg: $spacing-05;
|
|
$input-padding-x-lg: $spacing-05;
|
|
$input-font-size-lg: var(--font-size-03);
|
|
$input-bg: $bg-light-primary;
|
|
$input-disabled-color: var(--content-disabled);
|
|
$input-disabled-bg: $bg-light-disabled;
|
|
$input-disabled-border-color: var(--border-disabled);
|
|
$input-color: $content-primary;
|
|
$input-border-color: $neutral-60;
|
|
$input-border-width: var(--bs-border-width);
|
|
$input-border-radius: $border-radius-base;
|
|
$input-border-radius-sm: $border-radius-base;
|
|
$input-border-radius-lg: $border-radius-base;
|
|
$input-focus-border-color: var(--border-active);
|
|
$input-placeholder-color: var(--content-placeholder);
|
|
$input-plaintext-color: $content-primary;
|
|
$input-height-border: calc(
|
|
#{$input-border-width} * 2
|
|
); // stylelint-disable-line function-disallowed-list
|
|
|
|
$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 * 1em,
|
|
add($input-padding-y-lg * 2, $input-height-border, false)
|
|
);
|
|
|
|
// form-check-variables
|
|
$form-check-label-color: var(--content-primary);
|
|
$form-check-input-border: var(--bs-border-width) solid var(--border-primary);
|
|
$form-check-input-border-radius: $border-radius-base;
|
|
$form-check-input-focus-border: var(--border-primary);
|
|
$form-check-input-disabled-opacity: 1;
|
|
|
|
// Form validation
|
|
|
|
// form-feedback-variables
|
|
$form-feedback-invalid-color: $bg-danger-01;
|
|
$form-feedback-icon-invalid: null;
|
|
$form-feedback-margin-top: 0; // Our feedback component wraps Form.Text, which takes care of top margin
|
|
|
|
// form-validation-colors
|
|
$form-invalid-color: $form-feedback-invalid-color;
|
|
$form-invalid-border-color: $bg-danger-01;
|
|
|
|
// form-validation-states
|
|
$form-validation-states: (
|
|
'invalid': (
|
|
'color': $bg-danger-01,
|
|
'icon': $form-feedback-icon-invalid,
|
|
'tooltip-color': #fff,
|
|
'tooltip-bg-color': var(--bs-danger),
|
|
'focus-box-shadow': 0 0 $focus-ring-blur $focus-ring-width
|
|
rgba($red-30, $focus-ring-opacity),
|
|
'border-color': var(--#{$prefix}form-invalid-border-color),
|
|
),
|
|
);
|
|
|
|
// Close buttons
|
|
$btn-close-color: $content-primary;
|
|
$btn-close-opacity: 1;
|
|
$btn-close-width: 10px;
|
|
|
|
// Colors
|
|
$primary: $bg-accent-01;
|
|
$secondary: $bg-light-primary;
|
|
$success: $bg-accent-01;
|
|
$info: $bg-info-01;
|
|
$warning: $bg-warning-01;
|
|
$danger: $bg-danger-01;
|
|
$light: $bg-light-tertiary;
|
|
$dark: $neutral-90;
|
|
|
|
// Body colors
|
|
$body-color: $content-primary;
|
|
$body-bg: $bg-light-primary;
|
|
$body-secondary-color: $content-secondary;
|
|
$body-secondary-bg: $bg-light-secondary;
|
|
$body-tertiary-color: $content-disabled;
|
|
$body-tertiary-bg: $bg-light-tertiary;
|
|
|
|
// Badges
|
|
$badge-font-size: var(--font-size-01);
|
|
$badge-font-weight: var(--bs-body-font-weight);
|
|
$badge-padding-y: $spacing-01;
|
|
$badge-padding-x: $spacing-02;
|
|
$badge-border-radius: $border-radius-base;
|
|
|
|
// Tooltips
|
|
$tooltip-max-width: 320px;
|
|
$tooltip-border-radius: $border-radius-base;
|
|
$tooltip-padding-y: $spacing-04;
|
|
$tooltip-padding-x: $spacing-06;
|
|
|
|
// Links. Ideally we'd point these to CSS variables but Bootstrap performs
|
|
// calculations on link color during compilation.
|
|
$link-color: $link-ui;
|
|
$link-hover-color: $link-ui-hover;
|
|
$link-hover-decoration: none;
|
|
|
|
// Headings
|
|
$headings-font-family: $font-family-sans-serif;
|
|
$headings-margin-bottom: $spacing-05;
|
|
|
|
// Horizontal rules
|
|
$hr-margin-y: $spacing-08;
|
|
$hr-border-color: $border-divider;
|
|
|
|
// Modals
|
|
$modal-backdrop-bg: $bg-dark-primary;
|
|
$modal-backdrop-opacity: 0.72;
|
|
$modal-content-color: $content-secondary;
|
|
$modal-content-border-color: $border-divider;
|
|
$modal-header-padding: $spacing-05 $spacing-06;
|
|
$modal-header-padding-x: $spacing-08;
|
|
$modal-header-padding-y: $spacing-08;
|
|
|
|
// Nav toggler
|
|
$navbar-toggler-font-size: 30px;
|
|
$navbar-toggler-padding-x: var(--spacing-05);
|
|
$navbar-toggler-padding-y: var(--spacing-02);
|
|
$navbar-toggler-border-radius: var(--border-radius-base);
|
|
|
|
// Nav links
|
|
$navbar-nav-link-padding-x: var(--navbar-btn-padding-h);
|
|
|
|
// Spacing scale used by Bootstrap utilities
|
|
$spacer: $spacing-06;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacing-02,
|
|
2: $spacing-04,
|
|
3: $spacing-06,
|
|
4: $spacing-08,
|
|
5: $spacing-11,
|
|
);
|
|
|
|
// Dropdowns
|
|
$dropdown-link-disabled-color: var(--content-disabled);
|
|
$dropdown-spacer: var(--spacing-01);
|
|
$dropdown-border-width: 0;
|
|
$dropdown-border-radius: var(--border-radius-base);
|
|
$dropdown-padding-x: var(--spacing-02);
|
|
$dropdown-padding-y: var(--spacing-02);
|
|
$dropdown-item-padding-x: var(--spacing-04);
|
|
$dropdown-item-padding-y: var(--spacing-05);
|
|
$dropdown-header-color: var(--content-secondary);
|