ceph/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss

   1 // Color system
   2
   3 $white: #fff !default;
   4 $gray-100: #f8f9fa !default;
   5 $gray-200: #e9ecef !default;
   6 $gray-300: #dee2e6 !default;
   7 $gray-400: #ced4da !default;
   8 $gray-500: #adb5bd !default;
   9 $gray-600: #6c757d !default;
  10 $gray-700: #495057 !default;
  11 $gray-800: #343a40 !default;
  12 $gray-900: #212529 !default;
  13 $black: #000 !default;
  14
  15 $blue: #007bff !default;
  16 $indigo: #6610f2 !default;
  17 $purple: #6f42c1 !default;
  18 $pink: #a94442 !default;
  19 $red: #ef5c55 !default;
  20 $orange: #fd7e14 !default;
  21 $yellow: #ffc200 !default;
  22 $green: #0b0 !default;
  23 $teal: #20c997 !default;
  24 $cyan: #17a2b8 !default;
  25 $barley-white: #fcecba !default;
  26
  27 $primary: #2b99a8 !default;
  28 $secondary: #374249 !default;
  29 $success: $green !default;
  30 $info: $primary !default;
  31 $warning: $yellow !default;
  32 $danger: $red !default;
  33 $light: $gray-100 !default;
  34 $dark: #777 !default;
  35
  36 // Extra theme colors.
  37 $accent: $red !default;
  38 $warning-dark: $orange !default;
  39
  40 $fg-color-over-dark-bg: $white !default;
  41 $fg-hover-color-over-dark-bg: $gray-500 !default;
  42
  43 $theme-colors: (
  44   'accent': $accent,
  45   'warning-dark': $warning-dark
  46 ) !default;
  47
  48 // Body
  49 $body-color-bright: $light !default;
  50 $body-bg: $white !default;
  51 $body-color: $gray-900 !default;
  52 $body-bg-alt: $gray-200 !default;
  53
  54 // Health colors.
  55 $health-color-error: #f00 !default;
  56 $health-color-healthy: $green !default;
  57 $health-color-warning: #ffa500 !default;
  58
  59 // Chart colors.
  60 $chart-color-red: #c9190b !default;
  61 $chart-color-blue: #06c !default;
  62 $chart-color-orange: #ef9234 !default;
  63 $chart-color-yellow: #f6d173 !default;
  64 $chart-color-green: #7cc674 !default;
  65 $chart-color-gray: #ededed !default;
  66 $chart-color-cyan: #73c5c5 !default;
  67 $chart-color-purple: #3c3d99 !default;
  68 $chart-color-center-text: #151515 !default;
  69 $chart-color-center-text-description: #72767b !default;
  70 $chart-color-tooltip-background: $black !default;
  71
  72 // Typography
  73
  74 $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
  75   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
  76
  77 // Card
  78
  79 $card-cap-bg: $gray-100 !default;
  80
  81 // Grid
  82
  83 $grid-gutter-width: 30px !default;
  84
  85 // Table
  86
  87 $datatable-divider-color: rgba($black, 0.09) !default;
  88
  89 // Navs
  90
  91 $nav-tabs-margin-bottom: 1rem !default;
  92
  93 // Tooltips
  94
  95 $tooltip-color: $white !default;
  96 $tooltip-bg: $body-color !default;
  97
  98 // Misc
  99
 100 $screen-sm-min: 576px !default;
 101 $screen-md-min: 768px !default;
 102 $screen-lg-min: 992px !default;
 103 $screen-xl-min: 1200px !default;
 104
 105 $screen-xs-max: calc(#{$screen-sm-min} - 1px) !default;
 106 $screen-sm-max: calc(#{$screen-md-min} - 1px) !default;
 107 $screen-md-max: calc(#{$screen-lg-min} - 1px) !default;
 108 $screen-lg-max: calc(#{$screen-xl-min} - 1px) !default;
 109
 110 $navbar-height: 43px !default;
 111 $top-notification-height: 37.6px !default;