// == Schemes $primary-scheme: 'teal' !default; $text-scheme: 'grey' !default; // == Colors $primary-color-dark: color($primary-scheme, 'darken-2') !default; $primary-color: color($primary-scheme, 'base') !default; $primary-color-light: color($primary-scheme, 'lighten-1') !default; $primary-color-text: color('shades', 'white') !default; $accent-color: color($primary-scheme, 'accent-4') !default; $primary-text-color: color($text-scheme, 'lighten-2') !default; $heading-text-color: color($text-scheme, 'lighten-3') !default; $secondary-text-color: color($text-scheme, 'lighten-1') !default; $divider-color: color($text-scheme, 'darken-2') !default; $disabled-color: color($text-scheme, 'darken-1') !default; $disabled-color-text: color($text-scheme, 'darken-2') !default; $passive-tab-notifier: color($primary-scheme, 'lighten-2') !default; // == Helper Colors $box-shadow-color: color('grey', 'darken-2') !default; // == Preset eForm Layout Colors $preset-bg: #3a434a !default; $preset-button-container: color($text-scheme, 'darken-2') !default; $preset-button-container-color: $secondary-text-color !default; $preset-button-container-button-hover: color($text-scheme, 'darken-3') !default; // == Validation Colors $success-color: color('green', 'darken-2') !default; $error-color: color('red', 'darken-2') !default; // == Materialize eForm Textinput & Textarea Components $input-height: 3em !default; $input-border-color: color($text-scheme, 'darken-1') !default; $input-border: 1px solid $input-border-color !default; $input-background: transparent !default; $input-error-color: $error-color !default; $input-success-color: $success-color !default; $input-focus-color: $primary-color !default; $input-font-size: 1em !default; $input-margin: 0 !default; $input-padding: 0 !default; $input-transition: all 0.3s !default; $label-font-size: 0.8em !default; $input-disabled-color: $disabled-color-text !default; $input-disabled-solid-color: $disabled-color !default; $input-disabled-border: 1px solid $input-disabled-color !default; $input-invalid-border: 1px solid $input-error-color !default; $placeholder-text-color: lighten($input-border-color, 20%) !default; // == Radio Buttons $radio-fill-color: $primary-color !default; $radio-empty-color: color($text-scheme, 'darken-1') !default; $radio-border: 2px solid $radio-fill-color !default; $radio-icon-color: $primary-color-text !default; // == Checkbox Buttons $checkbox-bg-color: $preset-bg !default; // == Switches $switch-bg-color: $primary-color !default; $switch-checked-lever-bg: $primary-color-light !default; $switch-unchecked-bg: color($text-scheme, 'darken-2') !default; $switch-unchecked-lever-bg: color($text-scheme, 'darken-1') !default; $switch-radius: 15px !default; // == Sliders $slider-bg-color: color($text-scheme, 'darken-1') !default; $slider-lever-bg: $primary-color !default; $slider-lever-active-bg: $primary-color-dark !default; // == Select2 $select2-highlight: $primary-color !default; $select2-highlight-color: color('shades', 'white') !default; $select2-highlight-selected: color($text-scheme, 'darken-2') !default; // == Sortable $sortable-icon-color: color($text-scheme, 'darken-1') !default; $sortable-border-color: color($text-scheme, 'darken-2') !default; $sortable-bg-color: $preset-bg !default; // == Table $table-border-color: $divider-color !default; $table-striped-color: lighten(color($text-scheme, 'darken-4'), 2%) !default; // == Keyboard $keyboard-bg: color($text-scheme, 'darken-2') !default; $keyboard-color: $secondary-text-color !default; $keyboard-num-border-color: color($text-scheme, 'darken-1') !default; $keyboard-num-border: 1px solid $keyboard-num-border-color !default; $keyboard-action-bg: color($text-scheme, 'darken-2') !default; $keyboard-hover-bg: $primary-color-light !default; $keyboard-active-bg: $primary-color !default; $keyboard-hover-text: $primary-color-text !default; // User Portal $up-button-container: color($text-scheme, 'darken-2') !default; $up-button-container-color: $secondary-text-color !default; // == Container $styled-container-bg: color($text-scheme, 'darken-2') !default; // == Spinner $spinner-default-color: $primary-color-light !default; // == Estimator $estimator-slider-bg: color($primary-scheme, 'lighten-1') !default; $estimator-slider-slide: color($primary-scheme, 'base') !default; // == Selectors $selector: ipt-uif-custom-material-d-default !default; $select2-theme: eform-material !default; $img-path: '../../../images/' !default; // == Typography // Fonts $font-family-base: 'Roboto', 'Noto Sans', 'Arial', sans-serif !default; $systemSerif: 'Apple Garamond', 'Baskerville', 'Times New Roman', 'Droid Serif', 'Times', 'Source Serif Pro', serif; $systemMonospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace; $font-size-base: 14px !default; $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-h5: $font-size-base !default; $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px //** Unit-less `line-height` for use in components like buttons. $line-height-base: 1.428571429 !default; // 20/14 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. $line-height-computed: floor( ($font-size-base * $line-height-base) ) !default; // ~20px $body-font-family: $font-family-base !default; $body-font-weight: 400 !default; $strong-font-weight: 700 !default; //** By default, this inherits from the ``. $headings-font-family: $font-family-base !default; $headings-font-weight: 400 !default; $headings-line-height: 1.1 !default; $headings-color: inherit !default; //== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone //** Deprecated `$screen-xs` as of v3.0.1 $screen-xs: 480px !default; //** Deprecated `$screen-xs-min` as of v3.2.0 $screen-xs-min: $screen-xs !default; //** Deprecated `$screen-phone` as of v3.0.1 $screen-phone: $screen-xs-min !default; // Small screen / tablet //** Deprecated `$screen-sm` as of v3.0.1 $screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; //** Deprecated `$screen-tablet` as of v3.0.1 $screen-tablet: $screen-sm-min !default; // Medium screen / desktop //** Deprecated `$screen-md` as of v3.0.1 $screen-md: 992px !default; $screen-md-min: $screen-md !default; //** Deprecated `$screen-desktop` as of v3.0.1 $screen-desktop: $screen-md-min !default; // Large screen / wide desktop //** Deprecated `$screen-lg` as of v3.0.1 $screen-lg: 1200px !default; $screen-lg-min: $screen-lg !default; //** Deprecated `$screen-lg-desktop` as of v3.0.1 $screen-lg-desktop: $screen-lg-min !default; // So media queries don't overlap when required, provide a maximum $screen-xs-max: ($screen-sm-min - 1) !default; $screen-sm-max: ($screen-md-min - 1) !default; $screen-md-max: ($screen-lg-min - 1) !default; //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. $grid-columns: 12 !default; //** Padding between columns. Gets divided in half for the left and right. $grid-gutter-width: 15px !default; $element-top-margin: $grid-gutter-width/3 !default; $element-bottom-margin: ($grid-gutter-width * 2)/3 !default; // 11. Global // ========================================================================== // Media Query Ranges $small-screen-up: 601px !default; $medium-screen-up: 993px !default; $large-screen-up: 1201px !default; $small-screen: 600px !default; $medium-screen: 992px !default; $large-screen: 1200px !default; $medium-and-up: 'only screen and (min-width : #{$small-screen-up})' !default; $large-and-up: 'only screen and (min-width : #{$medium-screen-up})' !default; $small-and-down: 'only screen and (max-width : #{$small-screen})' !default; $medium-and-down: 'only screen and (max-width : #{$medium-screen})' !default; $medium-only: 'only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})' !default; // ========================================================================== // Some Helper Functions // ========================================================================== /// Replace `$search` with `$replace` in `$string` /// @author Hugo Giraudel /// @param {String} $string - Initial string /// @param {String} $search - Substring to replace /// @param {String} $replace ('') - New value /// @return {String} - Updated string @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace( str-slice($string, $index + str-length($search)), $search, $replace ); } @return $string; }