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

   1 /*The file suppose to contain all variables, mixins and extends*/
   2
   3 @import 'vendor.variables';
   4
   5 // Bootstrap defaults
   6
   7 $gray-900: #212529 !default;
   8
   9 $screen-sm-min: 576px !default;
  10 $screen-md-min: 768px !default;
  11 $screen-lg-min: 992px !default;
  12 $screen-xl-min: 1200px !default;
  13
  14 $screen-xs-max: calc(#{$screen-sm-min} - 1px);
  15 $screen-sm-max: calc(#{$screen-md-min} - 1px);
  16 $screen-md-max: calc(#{$screen-lg-min} - 1px);
  17 $screen-lg-max: calc(#{$screen-xl-min} - 1px);
  18
  19 $color-solid-red: #ff0000 !default;
  20 $color-pink: #a94442 !default;
  21 $color-light-red: #f2dede !default;
  22
  23 // $color-orange: #ff6600 !default;
  24
  25 $color-bright-yellow: #ffc200 !default;
  26 $color-light-yellow: #fff3cd !default;
  27
  28 $color-bright-green: #00bb00 !default;
  29 $color-green: #245e03 !default;
  30
  31 $color-blue: #288cea !default;
  32 $color-light-blue: #d1ecf1 !default;
  33 $color-sky-blue: #afd9ee !default;
  34
  35 $color-black: #000 !default;
  36 $color-transparent-black: rgba(0, 0, 0, 0.7) !default;
  37 $color-solid-gray: #555555 !default;
  38 $color-dark-gray: #474544 !default;
  39 // $color-gray: #505050 !default;
  40 $color-mild-gray: #777777 !default;
  41 $color-blue-gray: #90949c !default;
  42 $color-grad-gray: #ededed !default;
  43 $color-shadow-gray: rgba(3, 3, 3, 0.175) !default;
  44 $color-light-gray: #d1d1d1 !default;
  45 $color-soft-gray: #ddd !default;
  46 $color-white-gray: #eee !default;
  47 $color-shade-gray: #efefef !default;
  48 $color-light-shade-gray: #f3f3f3 !default;
  49 $color-whitesmoke-gray: #f5f5f5 !default;
  50 $color-solid-white: #ffffff !default;
  51 $color-transparent: rgba(0, 0, 0, 0.09) !default;
  52 $color-input-border: #ced4da;
  53 $color-input-border-hover: #adadad;
  54 $color-brand-teal: #2b99a8 !default;
  55 $color-brand-gray: #374249 !default;
  56 $color-mirage-gray: #333e46 !default;
  57
  58 $color-primary: $color-brand-teal !default;
  59 $color-secondary: $color-brand-gray !default;
  60 $color-accent: #ef5c55 !default;
  61
  62 $color-app-bg: $color-solid-white !default;
  63 // $color-bg-darken: $color-dark-gray !default;
  64 // $color-links: $color-primary !default;
  65 // $color-links-focus: $color-dark-gray !default;
  66 $color-breadcrumb: $color-dark-gray !default;
  67 // $color-button-text: $color-white-gray !default;
  68 $color-button: $color-primary !default;
  69 // $color-button-hover: darken($color-primary, 3) !default;
  70 // $color-button-border: darken($color-primary, 6) !default;
  71 $color-button-badge: $color-white-gray !default;
  72 $color-dropdown-menu: $color-dark-gray !default;
  73 $color-dropdown-active-text: $color-white-gray !default;
  74 $color-dropdown-active-bg: $color-primary !default;
  75 $color-progress-bar-info-bg: $color-primary !default;
  76 $color-progress-bar-freespace-bg: $color-light-gray !default;
  77 $color-progress-text: $color-black !default;
  78 $color-tags-border: $color-light-gray !default;
  79 $color-tags-box-shadow: $color-transparent !default;
  80 $color-error-btn-bg: $color-light-red !default;
  81 $color-error-btn-border: $color-pink !default;
  82 $color-noscript-text: $color-mild-gray !default;
  83 $color-required-text: $color-pink !default;
  84
  85 /*Login*/
  86 $color-login-row-text: $color-solid-white !default;
  87 $color-login-row-bg: $color-secondary !default;
  88 $color-password-toggle-text: $color-solid-white !default;
  89 $color-password-toggle-placeholder-text: $color-blue-gray !default;
  90 $color-password-toggle-bg: $color-mirage-gray !default;
  91 $color-password-toggle-focus: $color-primary !default;
  92 // $color-login-active-row-bg: $color-light-yellow !default;
  93 // $color-login-active-row-text: $color-black !default;
  94
  95 /*Landing Page*/
  96
  97 /*InfoGroup*/
  98 // $color-info-group-underline: $color-whitesmoke-gray !default;
  99
 100 /*InfoCard*/
 101 // $color-info-card-background: $color-whitesmoke-gray !default;
 102 $color-info-card-border: $color-soft-gray !default;
 103
 104 /*Navigation*/
 105 $color-navbar-bg: $color-secondary !default;
 106 $color-navbar-brand: $color-white-gray !default;
 107 $color-nav-top-bar: $color-primary !default;
 108 $color-nav-bottom-bar: $color-primary !default;
 109 $color-nav-toggle-bar: $color-white-gray !default;
 110 $color-nav-toggle-shadow: $color-solid-white !default;
 111 $color-nav-collapse-border: $color-white-gray !default;
 112 $color-nav-open-bg: $color-primary !default;
 113 $color-nav-links: $color-white-gray !default;
 114 $color-nav-links-hover: $color-primary !default;
 115 $color-nav-active-link-bg: $color-primary !default;
 116 $color-nav-border-top-collapse: $color-white-gray !default;
 117
 118 $navbar-height: 43px;
 119 $top-notification-height: 37.6px;
 120
 121 /*Helper*/
 122 $color-helper-bg: $color-primary !default;
 123
 124 /*Table*/
 125 $color-table-seperator-border: $color-transparent !default;
 126 $color-table-input-border: $color-transparent !default;
 127 $color-table-dropdown-bg: $color-whitesmoke-gray !default;
 128 $color-table-header-bg: $color-whitesmoke-gray !default;
 129 $color-table-header-border: $color-light-gray !default;
 130 $color-table-active-row: $color-sky-blue !default;
 131 $color-table-active-row-hover: $color-light-blue !default;
 132 // $color-table-progress-bar-bg: $color-sky-blue !default;
 133 $color-table-progress-bar-active: $color-primary !default;
 134 $color-table-gradient-1: $color-whitesmoke-gray !default;
 135 $color-table-gradient-2: $color-grad-gray !default;
 136 $color-table-sort: $color-primary !default;
 137 $color-table-empty-row: $color-light-yellow !default;
 138 $color-table-hover-row: $color-white-gray !default;
 139 $color-table-even-row-bg: $color-solid-white !default;
 140 $color-table-odd-row-bg: $color-whitesmoke-gray !default;
 141 $color-table-datatable-header: $color-whitesmoke-gray !default;
 142
 143 /*Chart tooltip*/
 144 $color-chart-tooltip-bg: $color-transparent-black !default;
 145 $color-chat-tooltip-text: $color-solid-white !default;
 146 $color-chart-tooltip-border: $color-black !default;
 147
 148 /*Popover*/
 149 $color-popover-seperator-text: $color-blue-gray !default;
 150 $color-popover-seperator-bg: $color-white-gray !default;
 151 $color-popover-message-text: $color-dark-gray !default;
 152 $color-popover-table-text: $color-dark-gray !default;
 153 $color-popover-date: $color-solid-gray !default;
 154
 155 /*RGW user form*/
 156 $color-rgw-icon: $color-blue-gray !default;
 157
 158 @mixin table-cell {
 159   padding: 5px;
 160   border: none;
 161   border-left: 1px solid $color-light-gray;
 162   border-bottom: 1px solid $color-light-gray;
 163 }
 164
 165 @mixin hf {
 166   border-bottom: 1px solid $color-light-gray;
 167   background-color: $color-whitesmoke-gray;
 168 }
 169
 170 @function strip-unit($value) {
 171   @return $value / ($value * 0 + 1);
 172 }
 173
 174 @mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {
 175   $u1: unit($min-vw);
 176   $u2: unit($max-vw);
 177   $u3: unit($min-font-size);
 178   $u4: unit($max-font-size);
 179
 180   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
 181     & {
 182       font-size: $min-font-size;
 183       @media screen and (min-width: $min-vw) {
 184         font-size: calc(
 185           #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
 186             ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
 187         );
 188       }
 189       @media screen and (min-width: $max-vw) {
 190         font-size: $max-font-size;
 191       }
 192     }
 193   }
 194 }