weseek__growi/packages/app/src/styles/bootstrap/_variables.scss

@use '../variables';

//
// Variables
// --------------------------------------------------

//== Colors
//
$primary: variables.$growi-blue !default;
$secondary: #6c757d !default;
$info: #009fbb !default;
$success: #00bb83 !default;
$warning: #ffa32b !default;
$danger: #ff0a54 !default;
$light: #e4e7ea !default;
$dark: #343a40 !default;
$gray-50: lighten($light, 7%) !default;
$gray-100: lighten($light, 4%) !default;
$gray-200: $light !default;
$gray-300: darken($light, 5%) !default;
$gray-400: darken($light, 20%) !default;
$gray-500: darken($light, 30%) !default;
$gray-550: lighten($dark, 15%) !default;
$gray-600: lighten($dark, 10%) !default;
$gray-700: lighten($dark, 5%) !default;
$gray-800: $dark !default;
$gray-900: darken($dark, 5%) !default;
$grays: (
  '50': $gray-50,
) !default;
$red: #ff0a54 !default;

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-shadows: true;

// Links
//
// Style anchor elements.

$link-hover-decoration: none !default;

// 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,
  xxl: 1480px,
);

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
);

//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
$font-family-serif: Georgia, 'Times New Roman', Times, serif;
$font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
$font-family-base: $font-family-sans-serif;

$font-size-base: 0.875rem;  // 16px -> 14px
$line-height-base: 1.42857;

$blockquote-small-color: $gray-500;

//== Components
//
$border-radius: 4px;
$border-radius-sm: 0;
$border-radius-lg: 8px;

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-link-disabled-color: $gray-500;
$btn-focus-box-shadow: none;
$btn-active-box-shadow: none;

//== Forms
//
$input-border-color: $gray-300;
$input-placeholder-color: $gray-500;

$custom-control-indicator-border-color: $gray-400;
$custom-control-label-disabled-color: $gray-500;
$custom-select-disabled-color: $gray-500;
$custom-range-thumb-disabled-bg: $gray-400;

//== Navs
$nav-link-padding-y: 0.75rem;
$nav-link-padding-x: 1rem;
$nav-link-disabled-color: $gray-500;

//== Navbar
$navbar-padding-y: 0;
$navbar-brand-padding-y: 0;
$navbar-nav-link-padding-x: 1rem;

//== Dropdowns
$dropdown-border-radius: $border-radius-lg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-header-color: $gray-500;
$dropdown-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);

//== Popovers
$popover-border-radius: $border-radius;
$popover-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);

//== Pagination
$pagination-disabled-color: $gray-500;

//== Cards
$card-spacer-y: 7px;
$card-spacer-x: 15px;

//== Toasts
$toast-header-color: $gray-500;

//== Modals
$modal-content-border-width: 0;
$modal-content-border-radius: $border-radius-lg;
$modal-header-padding-y: 0.75rem;
$modal-header-padding-x: 1rem;

//== Alerts
$alert-bg-level: -2;
$alert-border-level: 0;
$alert-color-level: -10;

//== Progress bar
$progress-height: 4px;
$progress-bg: $gray-100;
$progress-box-shadow: none;

//== List group
$list-group-disabled-color: $gray-500;

//==  Figures
$figure-caption-color: $gray-500;

//==  Breadcrumbs
$breadcrumb-divider-color: $gray-500;
$breadcrumb-active-color: $gray-500;

//== Code
$pre-color: dummyinvalildcolor; // disable pre color specification with invalid value

//== Custom Checkbox
$custom-checkbox-indicator-border-radius: 0px;
$custom-control-indicator-focus-box-shadow: none;
$custom-control-indicator-size: 1.2rem;