src/assets/scss/variable.scss

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   4  Licensed under the Apache License, Version 2.0 (the 'License');
   5  you may not use this file except in compliance with the License.
   6  You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10  Unless required by applicable law or agreed to in writing, software
  11  distributed under the License is distributed on an "AS IS" BASIS,
  12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  See the License for the specific language governing permissions and
  14  limitations under the License.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17  */
  18 // Custom Variables
  19 $themecolor: #2962ff;
  20 $theme-light: #fff;
  21
  22 /*Topbar Colors*/
  23
  24 $topbar: $theme-light;
  25 $topbar-height: 64px;
  26 $topbar-navlink-padding: 0px 15px;
  27 $topbar-navlink-font-size: 0.875rem;
  28 $topbar-navlink-height: 64px;
  29 $topbar-navbrand-padding: 0 10px 0 10px;
  30 /*Sidebar Colors*/
  31
  32 $sidebar: $theme-light;
  33 $sidebar-text: #fff;
  34 $sidebar-icons: #fff;
  35 $sidebar-width-full: 100px;
  36 $sidebar-width-mini: 65px;
  37 /*Boxed layout width*/
  38
  39 $boxed-width: 1200px;
  40 /*Shadow*/
  41
  42 $shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
  43 /*transitions*/
  44
  45 $transitions: 0.2s ease-in;
  46 /*Dark transparent bg*/
  47
  48 $transparent-dark-bg: rgba(0, 0, 0, 0.05);
  49 $lft: left;
  50 $rgt: right;
  51 $card-alt: #e4e9ef;
  52 %square {
  53   border-radius: 0px;
  54 }
  55
  56 %rotate45 {
  57   transform: rotate(45deg);
  58   -ms-transform: rotate(45deg);
  59   -webkit-transform: rotate(45deg);
  60   -o-transform: rotate(45deg);
  61   -moz-transform: rotate(45deg);
  62 }
  63
  64 /*******************************/
  65
  66 // Bootstrap overrides
  67 /*******************************/
  68
  69 /**
  70  * Table Of Content
  71  *
  72  *  1. Color system
  73  *  2. Options
  74  *  3. Body
  75  *  4. Typography
  76  *  5. Breadcrumbs
  77  *  6. Cards
  78  *  7. Dropdowns
  79  *  8. Buttons
  80  *  9. Typography
  81  *  10. Progress bars
  82  *  11. Tables
  83  *  12. Forms
  84  *  14. Component
  85  */
  86
  87 //
  88 // Color system
  89 //
  90 $primary: #054c8c;
  91 $secondary: #065fac;
  92 $theme-bg-color: #eef5f9;
  93 $breadcrumb-after-color: #002a6a;
  94
  95 $white: #fff !default;
  96 $gray-100: #f6fafe !default;
  97 $gray-200: #e9ecef !default;
  98 $gray-300: #dee2e6 !default;
  99 $gray-400: #ced4da !default;
 100 $gray-500: #afb5c1 !default;
 101 $gray-600: #6c757d !default;
 102 $gray-700: #4f5467 !default;
 103 $gray-800: #343a40 !default;
 104 $gray-900: #212529 !default;
 105 $gray-80: #cccccc !default;
 106 $gray-97: #f7f7f7 !default;
 107 $medium-pink: #fb6ca4 !default;
 108 $black-coral: #5a5c69 !default;
 109 $cerise-pink: #e4397c !default;
 110 $pure-red: #ff0000 !default;
 111 $denim: #1467b3 !default;
 112 $black: #000 !default;
 113 $blue: #137eff !default;
 114 $dark-gray: #aaaaaa;
 115 $indigo: #6610f2 !default;
 116 $purple: #8b5edd !default;
 117 $pink: #e83e8c !default;
 118 $red: #dd4b39 !default;
 119 $orange: #fb8c00 !default;
 120 $yellow: #f39c12 !default;
 121 $green: #00a65a !default;
 122 $teal: #20c997 !default;
 123 $cyan: #4fc3f7 !default;
 124 $grayish-red: #c1bfbf !default;
 125 $white-smoke: #f1f1f1 !default;
 126 $text-muted: $gray-500 !default;
 127 $colors: (
 128   blue: $blue,
 129   indigo: $indigo,
 130   purple: $purple,
 131   pink: $pink,
 132   red: $red,
 133   orange: $orange,
 134   yellow: $yellow,
 135   green: $green,
 136   teal: $teal,
 137   cyan: $cyan,
 138   white: $white,
 139   gray: $gray-600,
 140   gray-dark: $gray-800
 141 );
 142 $primary: $blue !default;
 143 $secondary: $gray-400 !default;
 144 $success: $green !default;
 145 $info: $blue !default;
 146 $warning: $yellow !default;
 147 $danger: $red !default;
 148 $light: $gray-100 !default;
 149 $dark: $gray-800 !default;
 150 $cyan: $cyan !default;
 151 $orange: $orange !default;
 152 $theme-colors: () !default;
 153 $theme-colors: map-merge(
 154   (
 155     "primary": $primary,
 156     "secondary": $secondary,
 157     "success": $success,
 158     "info": $info,
 159     "warning": $warning,
 160     "danger": $danger,
 161     "light": $light,
 162     "dark": $dark,
 163     "cyan": $cyan,
 164     "orange": $orange,
 165     "purple": $purple
 166   ),
 167   $theme-colors
 168 );
 169 $modalheader-gray: #f8f9fa;
 170 //
 171 // Quickly modify global styling by enabling or disabling optional features.
 172 $enable-caret: true !default;
 173 $enable-rounded: true !default;
 174 $enable-shadows: false !default;
 175 $enable-gradients: false !default;
 176 $enable-transitions: true !default;
 177 $enable-hover-media-query: false !default;
 178 $enable-grid-classes: true !default;
 179 $enable-print-styles: true !default;
 180 // Body
 181 //
 182 // Settings for the  element.
 183 $main-body-bg: #fff !default;
 184 $body-bg: #f2f4f5;
 185 $body-color: #6a7a8c !default;
 186 $grid-gutter-width: 20px !default;
 187 // Typography
 188 //
 189 // Font, line-height, and color for body text, headings, and more.
 190 $font-size-base: 0.875rem;
 191 $font-family-open-sans: "Open Sans";
 192 $font-weight-light: 300 !default;
 193 $font-weight-normal: 400 !default;
 194 $font-weight-medium: 500 !default;
 195 $font-weight-bold: 700 !default;
 196 $h1-font-size: 36px !default;
 197 $h2-font-size: 30px !default;
 198 $h3-font-size: 24px !default;
 199 $h4-font-size: 18px !default;
 200 $h5-font-size: 16px !default;
 201 $h6-font-size: 14px !default;
 202 $headings-margin-bottom: (1rem / 2) !default;
 203 $headings-font-weight: 400 !default;
 204 $headings-color: inherit !default;
 205 // Breadcrumbs
 206 $breadcrumb-bg: $body-bg;
 207 $breadcrumb-margin-bottom: 1.5rem;
 208 // Cards
 209 $card-border-width: 0px !default;
 210 $card-border-color: transparent !default;
 211 $card-border-radius: 0px !default;
 212 // Dropdowns
 213 $dropdown-item-padding-x: 1rem !default;
 214 $dropdown-item-padding-y: 0.65rem !default;
 215 $dropdown-border-color: $gray-200;
 216 $dropdown-divider-bg: $gray-100;
 217 // Buttons
 218 $btn-secondary-border: $gray-300;
 219 // Progress bars
 220 $progress-bg: $gray-100;
 221 // Tables
 222 $table-bg-accent: $gray-100;
 223 $table-bg-hover: $gray-100;
 224 $table-hover-bg: $gray-100 !default;
 225 $table-cell-padding: 1rem !default;
 226 $table-bg-level: -10 !default;
 227 $table-bg-level2: 1 !default;
 228 $table-bg-level3: -5 !default;
 229 // Components
 230 $component-active-color: $white !default;
 231 $component-active-bg: $themecolor !default;
 232 $badge-pill-padding-x: 0.2em !default;
 233 $badge-pill-padding-y: 1em !default;
 234 // Forms
 235 $input-group-addon-bg: $gray-100;
 236 $input-border-color: $gray-200;
 237 $input-group-addon-border-color: $gray-200;
 238 $input-btn-focus-color: rgba(0, 0, 0, 0.25) !default;
 239 $input-focus-border-color: rgba(0, 0, 0, 0.25) !default;
 240 $custom-control-indicator-active-bg: rgba(0, 0, 0, 35%) !default;
 241 $input-btn-focus-box-shadow: transparent !default;
 242 $custom-select-focus-box-shadow: transparent !default;
 243 $custom-select-border-width: 1px !default;
 244 //
 245 // Define common padding and border radius sizes and more.
 246 $border-width: 1px !default;
 247 $border-color: rgba(0, 0, 0, 0.1) !default;
 248 $border-radius: 2px !default;
 249 $border-radius-lg: 2px !default;
 250 $border-radius-sm: 1px !default;
 251 // Progress bars
 252 $progress-height: 5px !default;
 253 //Tabs
 254 $nav-tabs-link-active-bg: $white !default;
 255 // Grid breakpoints
 256 //
 257 // Define the minimum dimensions at which your layout will change,
 258 // adapting to different screen sizes, for use in media queries.
 259 $grid-breakpoints: (
 260   xs: 0,
 261   sm: 576px,
 262   md: 768px,
 263   lg: 992px,
 264   xl: 1600px
 265 ) !default;