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 $paleblue: #c8e1f9 !default;
 128 $text-muted: $gray-500 !default;
 129 $colors: (
 130   "blue": $blue,
 131   "indigo": $indigo,
 132   "purple": $purple,
 133   "pink": $pink,
 134   "red": $red,
 135   "orange": $orange,
 136   "yellow": $yellow,
 137   "green": $green,
 138   "teal": $teal,
 139   "cyan": $cyan,
 140   "white": $white,
 141   "gray": $gray-600,
 142   "gray-dark": $gray-800
 143 );
 144 $primary: $blue !default;
 145 $secondary: $gray-400 !default;
 146 $success: $green !default;
 147 $info: $blue !default;
 148 $warning: $yellow !default;
 149 $danger: $red !default;
 150 $light: $gray-100 !default;
 151 $dark: $gray-800 !default;
 152 $cyan: $cyan !default;
 153 $orange: $orange !default;
 154 $theme-colors: () !default;
 155 $theme-colors: map-merge(
 156   (
 157     "primary": $primary,
 158     "secondary": $secondary,
 159     "success": $success,
 160     "info": $info,
 161     "warning": $warning,
 162     "danger": $danger,
 163     "light": $light,
 164     "dark": $dark,
 165     "cyan": $cyan,
 166     "orange": $orange,
 167     "purple": $purple
 168   ),
 169   $theme-colors
 170 );
 171 $modalheader-gray: #f8f9fa;
 172 //
 173 // Quickly modify global styling by enabling or disabling optional features.
 174 $enable-caret: true !default;
 175 $enable-rounded: true !default;
 176 $enable-shadows: false !default;
 177 $enable-gradients: false !default;
 178 $enable-transitions: true !default;
 179 $enable-hover-media-query: false !default;
 180 $enable-grid-classes: true !default;
 181 $enable-print-styles: true !default;
 182 // Body
 183 //
 184 // Settings for the  element.
 185 $main-body-bg: #fff !default;
 186 $body-bg: #f2f4f5;
 187 $body-color: #6a7a8c !default;
 188 $grid-gutter-width: 20px !default;
 189 // Typography
 190 //
 191 // Font, line-height, and color for body text, headings, and more.
 192 $font-size-base: 0.875rem;
 193 $font-family-open-sans: "Open Sans";
 194 $font-weight-light: 300 !default;
 195 $font-weight-normal: 400 !default;
 196 $font-weight-medium: 500 !default;
 197 $font-weight-bold: 700 !default;
 198 $h1-font-size: 36px !default;
 199 $h2-font-size: 30px !default;
 200 $h3-font-size: 24px !default;
 201 $h4-font-size: 18px !default;
 202 $h5-font-size: 16px !default;
 203 $h6-font-size: 14px !default;
 204 $headings-margin-bottom: math.div(1rem, 2) !default;
 205 $headings-font-weight: 400 !default;
 206 $headings-color: inherit !default;
 207 // Breadcrumbs
 208 $breadcrumb-bg: $body-bg;
 209 $breadcrumb-margin-bottom: 1.5rem;
 210 // Cards
 211 $card-border-width: 0px !default;
 212 $card-border-color: transparent !default;
 213 $card-border-radius: 0px !default;
 214 // Dropdowns
 215 $dropdown-item-padding-x: 1rem !default;
 216 $dropdown-item-padding-y: 0.65rem !default;
 217 $dropdown-border-color: $gray-200;
 218 $dropdown-divider-bg: $gray-100;
 219 // Buttons
 220 $btn-secondary-border: $gray-300;
 221 // Progress bars
 222 $progress-bg: $gray-100;
 223 // Tables
 224 $table-bg-accent: $gray-100;
 225 $table-bg-hover: $gray-100;
 226 $table-hover-bg: $gray-100 !default;
 227 $table-cell-padding: 1rem !default;
 228 $table-bg-level: -10 !default;
 229 $table-bg-level2: 1 !default;
 230 $table-bg-level3: -5 !default;
 231 // Components
 232 $component-active-color: $white !default;
 233 $component-active-bg: $themecolor !default;
 234 $badge-pill-padding-x: 0.2em !default;
 235 $badge-pill-padding-y: 1em !default;
 236 // Forms
 237 $input-group-addon-bg: $gray-100;
 238 $input-border-color: $gray-200;
 239 $input-group-addon-border-color: $gray-200;
 240 $input-btn-focus-color: rgba(0, 0, 0, 0.25) !default;
 241 $input-focus-border-color: rgba(0, 0, 0, 0.25) !default;
 242 $custom-control-indicator-active-bg: rgba(0, 0, 0, 35%) !default;
 243 $input-btn-focus-box-shadow: transparent !default;
 244 $custom-select-focus-box-shadow: transparent !default;
 245 $custom-select-border-width: 1px !default;
 246 //
 247 // Define common padding and border radius sizes and more.
 248 $border-width: 1px !default;
 249 $border-color: rgba(0, 0, 0, 0.1) !default;
 250 $border-radius: 2px !default;
 251 $border-radius-lg: 2px !default;
 252 $border-radius-sm: 1px !default;
 253 // Progress bars
 254 $progress-height: 5px !default;
 255 //Tabs
 256 $nav-tabs-link-active-bg: $white !default;
 257 // Grid breakpoints
 258 //
 259 // Define the minimum dimensions at which your layout will change,
 260 // adapting to different screen sizes, for use in media queries.
 261 $grid-breakpoints: (
 262   xs: 0,
 263   sm: 576px,
 264   md: 768px,
 265   lg: 992px,
 266   xl: 1600px
 267 ) !default;