mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
74f0483157
[web] Migrate the cookie banner to Bootstrap 5 GitOrigin-RevId: 79dd74e2cf09faab381f24101a3633b0377009a0
185 lines
5.1 KiB
SCSS
185 lines
5.1 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;
|
|
|
|
// 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-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
|
|
// Close button
|
|
$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;
|
|
|
|
// 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-content-color: $content-secondary;
|
|
$modal-content-border-color: $border-divider;
|
|
$modal-backdrop-bg: $bg-dark-primary;
|
|
$modal-backdrop-opacity: 0.72;
|
|
$box-shadow: shadow-lg();
|
|
$box-shadow-sm: shadow-lg();
|
|
$box-shadow-lg: shadow-lg();
|
|
$modal-header-padding: $spacing-05 $spacing-06;
|
|
$modal-header-padding-x: $spacing-08;
|
|
$modal-header-padding-y: $spacing-08;
|