git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/data/_variables.scss

   1 // VARIABLES\r
   2 \r
   3 /*** Colors ***/\r
   4 $primary-color: color("mdb-color", "lighten-2") !default;\r
   5 $primary-color-light: lighten($primary-color, 15%) !default;\r
   6 $primary-color-dark: darken($primary-color, 15%) !default;\r
   7 \r
   8 $secondary-color: color("teal", "lighten-1") !default;\r
   9 $success-color: color("green", "base") !default;\r
  10 \r
  11 $link-color: color("light-blue", "darken-1") !default;\r
  12 \r
  13 /*** Fonts ***/\r
  14 $roboto-font-path: "../font/roboto/" !default;\r
  15 \r
  16 /*** Typography ***/\r
  17 $off-black: rgba(0, 0, 0, 0.87) !default;\r
  18 \r
  19 /*** Cards ***/\r
  20 $card-padding: 20px !default;\r
  21 $card-bg-color: #fff !default;\r
  22 $card-link-color: color("orange", "accent-2") !default;\r
  23 $card-link-color-light: lighten($card-link-color, 20%) !default;\r
  24 \r
  25 /*** Global ***/\r
  26 // Media Query Ranges\r
  27 $small-screen-up: 601px !default;\r
  28 $medium-screen-up: 993px !default;\r
  29 $large-screen-up: 1201px !default;\r
  30 $small-screen: 600px !default;\r
  31 $medium-screen: 992px !default;\r
  32 $large-screen: 1200px !default;\r
  33 $sidenav-breakpoint: 1440px !default;\r
  34 \r
  35 $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;\r
  36 $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;\r
  37 $small-and-down: "only screen and (max-width : #{$small-screen})" !default;\r
  38 $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;\r
  39 $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;\r
  40 $hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;\r
  41 \r
  42 // Text fluid\r
  43 $range : $large-screen - $small-screen !default;\r
  44 $intervals: 20 !default;\r
  45 $interval-size: $range / $intervals !default; \r
  46 \r
  47 /*** Forms ***/\r
  48 // Text Inputs + Textarea\r
  49 $input-border-color: color("grey", "darken-4") !default;\r
  50 $input-bg-color: #fff !default;\r
  51 $input-error-color: $error-color !default;\r
  52 $input-success-color: $success-color !default;\r
  53 $input-focus-color: $primary-color !default;\r
  54 $label-font-size: .8rem !default;\r
  55 $input-disabled-color: rgba(0,0,0, .46) !default;\r
  56 $input-disabled-solid-color: #BDBDBD !default;\r
  57 \r
  58 // Radio Buttons\r
  59 $radio-fill-color: $primary-color !default;\r
  60 $radio-empty-color: #5a5a5a !default; \r
  61 \r
  62 // Switches\r
  63 $switch-bg-color: $secondary-color !default;\r
  64 $switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;\r
  65 $switch-unchecked-bg: #F1F1F1 !default;\r
  66 $switch-unchecked-lever-bg: #818181 !default;\r
  67 \r
  68 /*** Buttons ***/\r
  69 $button-bg-color-disabled: #DFDFDF !default;\r
  70 $button-color: $secondary-color !default;\r
  71 $button-color-disabled: #9F9F9F !default;\r
  72 $button-color-flat: #343434 !default;\r
  73 $button-color-raised: #fff !default;\r
  74 $button-floating-size: 37px !default;\r
  75 $button-height: 36px !default;\r
  76 $button-font-size-shared: 1.3rem !default;\r
  77 $button-large-icon-font-size: 1.6rem !default; \r
  78 $button-line-height: 36px !default;\r
  79 \r
  80 // Grid Variables\r
  81 $num-cols: 12 !default;\r
  82 $gutter-width: 1.5rem !default;\r
  83 $element-top-margin: $gutter-width/3 !default;\r
  84 $element-bottom-margin: ($gutter-width*2)/3 !default;\r
  85 \r
  86 /*** Dropdown ***/\r
  87 $dropdown-bg-color: #fff !default;\r
  88 $dropdown-hover-bg-color: #eee !default;\r
  89 $dropdown-color: $primary-color !default;\r
  90 $dropdown-item-height: 50px !default;\r
  91 \r
  92 /*** Tabs ***/\r
  93 $tabs-underline-color: $primary-color-light !default;\r
  94 $tabs-text-color: $primary-color !default;\r
  95 $tabs-bg-color: #fff !default;\r
  96 \r
  97 // Date Picker\r
  98 $datepicker-weekday-bg: darken($primary-color, 7%) !default;\r
  99 $datepicker-date-bg: $primary-color !default;\r
 100 $datepicker-year: rgba(255, 255, 255, .4) !default;\r
 101 $datepicker-focus: rgba(0,0,0, .05) !default;\r
 102 $datepicker-selected: $primary-color !default;\r
 103 $datepicker-selected-outfocus: desaturate(lighten($primary-color, 35%), 15%) !default;