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: #dc3545 !default;
  20 $orange: #fd7e14 !default;
  21 $yellow: #d48200 !default;
  22 $green: #008a00 !default;
  23 $teal: #20c997 !default;
  24 $cyan: #17a2b8 !default;
  25 $barley-white: #fcecba !default;
  26
  27 $primary: #25828e !default;
  28 $primary-500: #2b99a8 !default;
  29 $secondary: #374249 !default;
  30 $success: $green !default;
  31 $info: $primary !default;
  32 $warning: $yellow !default;
  33 $danger: $red !default;
  34 $light: $gray-100 !default;
  35 $dark: $gray-800 !default;
  36
  37 //badges colors
  38 $green-300: #6ec664;
  39 $cyan-300: #009596;
  40 $purple-300: #a18fff;
  41 $light-blue-300: #35caed;
  42 $gold-300: #f4c145;
  43 $light-green-300: #ace12e;
  44
  45 // Extra theme colors.
  46 $accent: $primary !default;
  47 $warning-dark: $orange !default;
  48
  49 $fg-color-over-dark-bg: $white !default;
  50 $fg-hover-color-over-dark-bg: $gray-500 !default;
  51
  52 $theme-colors: (
  53   'accent': $accent,
  54   'warning-dark': $warning-dark,
  55   'primary': $accent,
  56   'secondary': $secondary,
  57   'success': $success,
  58   'info': $info,
  59   'warning': $warning,
  60   'danger': $danger,
  61   'light': $light,
  62   'dark': $dark
  63 ) !default;
  64
  65 // Body
  66 $body-color-bright: $light !default;
  67 $body-bg: $white !default;
  68 $body-color: $gray-900 !default;
  69 $body-bg-alt: $gray-200 !default;
  70 // Health colors.
  71 $health-color-error: $red !default;
  72 $health-color-healthy: $green !default;
  73 $health-color-warning: $yellow !default;
  74 $health-color-warning-800: #9d6d10 !default;
  75
  76 // Chart colors.
  77 $chart-color-red: $red !default;
  78 $chart-color-blue: #06c !default;
  79 $chart-color-orange: #ef9234 !default;
  80 $chart-color-yellow: #f6d173 !default;
  81 $chart-color-green: $green !default;
  82 $chart-color-gray: #ededed !default;
  83 $chart-color-cyan: $primary-500 !default;
  84 $chart-color-light-gray: #f0f0f0 !default;
  85 $chart-color-slight-dark-gray: #d7d7d7 !default;
  86 $chart-color-dark-gray: #afafaf !default;
  87 $chart-color-cyan: #73c5c5 !default;
  88 $chart-color-purple: #3c3d99 !default;
  89 $chart-color-white: #fff !default;
  90 $chart-color-center-text: #151515 !default;
  91 $chart-color-center-text-description: #72767b !default;
  92 $chart-color-tooltip-background: $black !default;
  93 $chart-danger: #c9190b !default;
  94 $chart-color-strong-blue: #0078c8 !default;
  95 $chart-color-translucent-blue: #0096dc80 !default;
  96
  97 // Typography
  98
  99 $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
 100   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 101
 102 // Card
 103
 104 $card-cap-bg: $gray-100 !default;
 105
 106 // Grid
 107
 108 $grid-gutter-width: 30px !default;
 109
 110 // Table
 111
 112 $datatable-divider-color: rgba($black, 0.09) !default;
 113
 114 // Navs
 115
 116 $nav-tabs-margin-bottom: 1rem !default;
 117
 118 // Tooltips
 119
 120 $tooltip-color: $white !default;
 121 $tooltip-bg: $body-color !default;
 122 $tooltip-opacity: 1 !default;
 123
 124 // Misc
 125
 126 $screen-sm-min: 576px !default;
 127 $screen-md-min: 768px !default;
 128 $screen-lg-min: 992px !default;
 129 $screen-xl-min: 1200px !default;
 130
 131 $screen-xs-max: calc(#{$screen-sm-min} - 1px) !default;
 132 $screen-sm-max: calc(#{$screen-md-min} - 1px) !default;
 133 $screen-md-max: calc(#{$screen-lg-min} - 1px) !default;
 134 $screen-lg-max: calc(#{$screen-xl-min} - 1px) !default;
 135
 136 $navbar-height: 43px !default;