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