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