Warning, /iDDS/monitor/data/scss/variable.scss is written in an unsupported language. File is not indexed.
0001 // ======================================================
0002 // Custom layout variables
0003 // ======================================================
0004
0005 @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
0006
0007 // ======================================================
0008 // Theme Global setting colors
0009 // ======================================================
0010
0011 $themecolor: #2cabe3;
0012 $themecolor-dark: #028ee1;
0013 $themecolor-alt: #26c6da;
0014 $theme-light: #fff;
0015 $theme-dark: #212529;
0016
0017 $skin1: #2cabe3;
0018 $skin2: #707cd2;
0019 $skin3: #ff7676;
0020 $skin4: #a0aec4;
0021 $skin5: #2f323e;
0022 $skin6: #fff;
0023
0024 // ======================================================
0025 // Topbar settings
0026 // ======================================================
0027
0028 $topbar: $theme-light;
0029 $topbar-height: 60px;
0030 $topbar-navlink-padding: 0px 14px;
0031 $topbar-navlink-font-size: 14px;
0032 $topbar-navlink-height: 60px;
0033 $topbar-navbrand-padding: 0 10px 0 10px;
0034 $topbar-shadow: 1px 0px 7px rgba(0, 0, 0, 0.05);
0035 %topbar-shadow {
0036 box-shadow: $topbar-shadow;
0037 -webkit-box-shadow: $topbar-shadow;
0038 -o-box-shadow: $topbar-shadow;
0039 -moz-box-shadow: $topbar-shadow;
0040 }
0041 $topbar-mailbox-width: 300px;
0042 $topbar-mailbox-height: 317px;
0043 $topbar-droptitle-bg: url(../../assets/images/background/img5.png) no-repeat;
0044
0045
0046 // ======================================================
0047 // Sidebar settings
0048 // ======================================================
0049
0050 $left-part-width: 240px;
0051 $sidebar: $theme-light;
0052 $sidebar-alt: #e8eff0;
0053 $sidebar-text: #fff;
0054 $sidebar-icons: #fff;
0055 $sidebar-text-dark: #54667a;
0056 $sidebar-icons-dark: #54667a;
0057 $sidebar-width-full: 240px;
0058 $sidebar-width-iconbar: 180px;
0059 $sidebar-width-mini: 65px;
0060
0061 // ======================================================
0062 // boxed layout setting
0063 // ======================================================
0064
0065 $boxed-width: 1200px;
0066
0067 // ======================================================
0068 // Extra style setting
0069 // ======================================================
0070
0071 /*Shadow*/
0072
0073 $shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
0074
0075 /* transitions */
0076 $transitions: 0.2s ease-in;
0077
0078 /* Dark transparent bg */
0079 $transparent-dark-bg: rgba(0, 0, 0, 0.03);
0080 $lft: left;
0081 $rgt: right;
0082 $card-alt: #e4e9ef;
0083
0084 // ======================================================
0085 // Mixin setting
0086 // ======================================================
0087
0088 %square {
0089 border-radius: 0px;
0090 }
0091 %rotate45 {
0092 transform: rotate(45deg);
0093 -ms-transform: rotate(45deg);
0094 -webkit-transform: rotate(45deg);
0095 -o-transform: rotate(45deg);
0096 -moz-transform: rotate(45deg);
0097 }
0098
0099 // ======================================================
0100 // Bootstrap override colors
0101 // ======================================================
0102
0103 $white: #fff !default;
0104 $gray-100: #f7fafc !default;
0105 $gray-200: #e9ecef !default;
0106 $gray-300: #e4e7ea !default;
0107 $gray-400: #ced4da !default;
0108 $gray-500: #adb5bd !default;
0109 $gray-600: #8898aa !default;
0110 $gray-700: #525f7f !default;
0111 $gray-800: #313131 !default;
0112 $gray-900: #3e5569 !default;
0113 $black: #000 !default;
0114 $cyan: #4fc3f7 !default;
0115 $info: #2cabe3 !default;
0116 $red: #f33155 !default;
0117 $green: #7ace4c !default;
0118 $theme-colors: () !default;
0119 $theme-colors: map-merge(
0120 (
0121 'primary': #707cd2,
0122 'secondary': $gray-600,
0123 'success': $green,
0124 'info': $info,
0125 'warning': #ffc36d,
0126 'danger': $red,
0127 'light': $gray-100,
0128 'dark': $gray-800,
0129 'cyan': #4fc3f7,
0130 'orange': #ffc36d,
0131 'purple': #707cd2,
0132 'inverse': #4c5667
0133 ),
0134 $theme-colors
0135 );
0136
0137 $brand-colors: () !default;
0138 $brand-colors: map-merge(
0139 (
0140 'facebook': #3b5999,
0141 'twitter': #1da1f2,
0142 'googleplus': #dd4b39,
0143 'instagram': #e4405f,
0144 'pinterest': #bd081c,
0145 'youtube': #cd201f,
0146 'linkedin': #007bb6,
0147 'slack': #3aaf85,
0148 'dribbble': #ea4c89,
0149 'github': #222222
0150 ),
0151 $brand-colors
0152 );
0153
0154 // ======================================================
0155 // Enable optional
0156 // ======================================================
0157 $enable-rounded: true !default;
0158 $enable-shadows: true !default;
0159 $enable-gradients: false !default;
0160
0161 // ======================================================
0162 // Body
0163 // ======================================================
0164 $main-body-bg: #fff !default;
0165 $body-bg: #edf1f5;
0166 $body-color: #313131 !default;
0167
0168 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
0169 $box-shadow: 0 0.5rem 1rem rgba($black, 0.08) !default;
0170 $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
0171
0172
0173 $link-hover-decoration: none !default;
0174
0175 // ======================================================
0176 // Typography
0177 // ======================================================
0178 $font-size-base: 0.875rem !default;
0179 $font-family-sans-serif: "Nunito Sans",sans-serif !default;
0180 $font-weight-light: 300 !default;
0181 $font-weight-normal: 400 !default;
0182 $font-weight-medium: 500 !default;
0183 $font-weight-bold: 700 !default;
0184 $font-weight-base: $font-weight-normal !default;
0185
0186 $display5-size: 3rem !default;
0187 $display6-size: 2.5rem !default;
0188 $display7-size: 2rem !default;
0189 $display5-weight: 300 !default;
0190 $display6-weight: 300 !default;
0191 $display7-weight: 300 !default;
0192
0193 // heading fonts setting
0194 $h1-font-size: 36px !default;
0195 $h2-font-size: 30px !default;
0196 $h3-font-size: 24px !default;
0197 $h4-font-size: 18px !default;
0198 $h5-font-size: 16px !default;
0199 $h6-font-size: 14px !default;
0200 $headings-margin-bottom: (1rem / 2) !default;
0201 $headings-font-weight: 400 !default;
0202 $headings-color: inherit !default;
0203
0204 // Font size
0205 $font-sizes: (
0206 1: 10px,
0207 2: 12px,
0208 3: 14px,
0209 4: 16px,
0210 5: 18px,
0211 6: 20px,
0212 7: 24px,
0213 );
0214
0215 // --------------------------------------------------------------------- //
0216 // Bootstrap Component override setting
0217 // --------------------------------------------------------------------- //
0218
0219 // Breadcrumbs
0220 $breadcrumb-bg: $body-bg;
0221 $breadcrumb-margin-bottom: 1.5rem;
0222
0223 // Cards
0224 $card-border-width: 0px !default;
0225 $card-border-color: transparent !default;
0226 $card-border-radius: 0px !default;
0227 $card-bottom-margin: 30px !default;
0228 $card-spacer-x: 1.57rem !default;
0229 %card-shadow {
0230 box-shadow: $shadow;
0231 -webkit-box-shadow: $shadow;
0232 -moz-box-shadow: $shadow;
0233 -o-box-shadow: $shadow;
0234 }
0235 // Dropdowns
0236 $dropdown-item-padding-x: 1rem !default;
0237 $dropdown-item-padding-y: 0.65rem !default;
0238 $dropdown-border-color: $gray-200;
0239 $dropdown-divider-bg: $gray-100;
0240 $dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0241 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
0242 // Buttons
0243 $btn-secondary-border: $gray-300;
0244 $btn-hover-box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1),
0245 0 3px 6px rgba(0, 0, 0, 0.08);
0246 $btn-focus-box-shadow: $btn-hover-box-shadow !default;
0247 $btn-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
0248
0249 $table-cell-padding: 0.9375rem 0.4rem !default;
0250
0251 $component-active-color: $white !default;
0252 $component-active-bg: $themecolor !default;
0253
0254 // Badges
0255
0256 $badge-font-size: 73% !default;
0257 $badge-font-weight: $font-weight-light !default;
0258 $badge-padding-y: 0.35em !default;
0259 $badge-padding-x: 0.7em !default;
0260 $badge-pill-padding-x: 0.7em !default;
0261 $badge-pill-padding-y: 1em !default;
0262 // Forms
0263 $input-group-addon-bg: $gray-100;
0264 $input-border-color: $gray-200;
0265 $input-group-addon-border-color: $gray-200;
0266 $input-btn-focus-color: rgba(0, 0, 0, 0.25) !default;
0267 $input-focus-border-color: rgba(0, 0, 0, 0.25) !default;
0268 $input-btn-focus-box-shadow: none !default;
0269
0270 $input-alternative-box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15),
0271 0 1px 0 rgba(0, 0, 0, 0.02);
0272 $input-focus-alternative-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
0273 0 1px 3px rgba(0, 0, 0, 0.08);
0274
0275 $input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default;
0276 $input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default;
0277
0278 $custom-control-indicator-active-bg: rgba(0, 0, 0, 35%) !default;
0279 $custom-select-indicator: url(../../assets/images/custom-select.png) !default;
0280
0281 $input-btn-focus-box-shadow: transparent !default;
0282 $custom-select-focus-box-shadow: transparent !default;
0283 $custom-select-indicator: str-replace(
0284 url('../../assets/images/custom-select.png'),
0285 '%23'
0286 ) !default;
0287 $custom-control-indicator-box-shadow: none !default;
0288 $custom-select-box-shadow: none !default;
0289 $custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default;
0290 $custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default;
0291 $custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default;
0292
0293 // Define common padding and border radius sizes and more.
0294 $border-width: 1px !default;
0295 $border-color: rgba(120,130,140,.13) !default;
0296 $border-radius: 2px !default;
0297 $border-radius-lg: 4px !default;
0298 $border-radius-sm: 1px !default;
0299
0300 // Progress bars
0301 $progress-height: 4px !default;
0302 $progress-bg: rgba(120, 130, 140, 0.13);
0303 $progress-border-radius: 0px !default;
0304
0305 // Tabs
0306 $nav-tabs-link-active-bg: $white !default;
0307
0308 // Grid breakpoints
0309 $grid-breakpoints: (
0310 xs: 0,
0311 sm: 576px,
0312 md: 768px,
0313 lg: 992px,
0314 xl: 1200px,
0315 xlg: 1600px
0316 ) !default;
0317
0318 // Navbar
0319 $navbar-dark-color: rgba($white, 0.9) !default;
0320 $navbar-light-color: rgba($black, .6) !default;
0321 $navbar-dark-hover-color: rgba($white, 1) !default;
0322
0323 // Modal
0324 $modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
0325 $modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.2) !default;
0326
0327 // Tabs
0328 $nav-tabs-border-color: $gray-300 !default;
0329 $nav-tabs-border-width: $border-width !default;
0330 $nav-tabs-border-radius: $border-radius !default;
0331 $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
0332 $nav-tabs-link-active-color: $gray-700 !default;
0333 $nav-tabs-link-active-bg: $body-bg !default;
0334 $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
0335
0336
