mdb-ui-kit/scss/_variables.scss

127 lines
4.6 KiB
SCSS
Raw Normal View History

@import "variables/colors";
// redefine ? TODO: do we need this mdb variant? This is used as $body-color
2015-12-16 02:52:47 +03:00
$gray-lighter: rgba($black, 0.12) !default;
$gray-light: rgba($black, 0.26) !default;
2015-12-14 23:19:17 +03:00
$gray: rgba($black, .54) !default; // spec color
$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter
2015-12-21 22:27:44 +03:00
$mdb-font-weight-base: 400;
// wondering if any of these could still be refactored out, but are definitely in use.
2015-12-21 22:27:44 +03:00
$mdb-text-color-inverse: rgba($white, 0.84) !default;
2015-12-22 00:13:19 +03:00
$mdb-text-color-inverse-light: rgba($white, 0.54) !default;
$mdb-label-color: $gray-light !default;
$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
//---
// Customized BS variables
2015-12-22 02:14:18 +03:00
@import "variables/bootstrap/components";
2015-12-14 20:55:59 +03:00
@import "variables/bootstrap/spacing";
2015-12-22 02:14:18 +03:00
@import "variables/bootstrap/body";
@import "variables/bootstrap/brand";
@import "variables/bootstrap/buttons";
2015-12-22 02:14:18 +03:00
@import "variables/bootstrap/card";
@import "variables/bootstrap/code";
@import "variables/bootstrap/forms";
@import "variables/bootstrap/list-group";
2015-12-21 22:27:44 +03:00
@import "variables/bootstrap/nav";
@import "variables/bootstrap/state";
@import "variables/bootstrap/type";
2015-12-22 01:06:40 +03:00
@import "variables/bootstrap/modals";
2015-12-03 19:21:30 +03:00
2015-12-14 23:19:17 +03:00
// import their vars after customization for use below
$enable-flex: true;
2015-12-14 23:19:17 +03:00
@import "../bower_components/bootstrap/scss/variables";
2015-12-24 01:45:54 +03:00
$mdb-label-color-focus: $brand-primary !default;
//---
// verified in use with refactoring to v4
//---
//-- unverified below here
$mdb-brand-inverse: $indigo !default;
// Typography elements FIXME: review to see if we actually need these
$icon-color: rgba($black, 0.5) !default;
// ANIMATION
$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
$mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
//---
// FIXME: Similar but not quite the same as Bootstrap variables
// FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables
2015-11-22 19:23:34 +03:00
$contrast-factor: 40% !default;
//---
// --------------------
// inputs
$mdb-mdb-label-static-size-ratio: 75 / 100 !default;
$mdb-help-size-ratio: 75 / 100 !default;
2015-12-21 22:27:44 +03:00
// sizing
$mdb-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
2015-11-30 20:15:59 +03:00
$mdb-label-top-margin-base: 1rem !default;
2015-12-21 22:27:44 +03:00
$mdb-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
2015-11-30 20:15:59 +03:00
$mdb-label-top-margin-lg: 1rem !default; // 16px
2015-12-21 22:27:44 +03:00
$mdb-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
2015-11-30 20:15:59 +03:00
$mdb-label-top-margin-sm: .75rem !default; // 12px
$text-disabled: #a8a8a8 !default;
$background-disabled: #eaeaea !default;
// Checkboxes
$mdb-checkbox-size: 1.25rem !default;
$mdb-checkbox-animation-ripple: 500ms !default;
$mdb-checkbox-animation-check: 0.3s !default;
$mdb-checkbox-checked-color: $brand-primary !default;
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
2015-12-16 03:07:09 +03:00
$mdb-checkbox-border-color-disabled: $gray-light !default; //#bdbdbd !default;
2015-12-15 02:39:37 +03:00
// Switches
2015-12-16 02:52:47 +03:00
$mdb-switch-label-padding: .3125rem !default; // 5px
$mdb-switch-width: 2.125rem !default; // 34px
$mdb-switch-height: .875rem !default; // 14px
$mdb-switch-handle-size: 1.25rem !default; // 20px (was 18px)
$mdb-switch-handle-checked-bg: $brand-primary !default;
$mdb-switch-handle-unchecked-bg: #f1f1f1 !default;
$mdb-switch-handle-disabled-bg: #bdbdbd !default;
$mdb-switch-unchecked-bg: $gray-light !default;
$mdb-switch-checked-bg: desaturate(lighten($mdb-switch-handle-checked-bg, 28%), 32%); // kind of magic recipe
$mdb-switch-disabled-bg: $gray-lighter !default;
2015-12-15 02:39:37 +03:00
// Popovers and Popups
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
$mdb-popover-color: #ececec !default;
// Dropdown Menu
2015-12-21 22:27:44 +03:00
//$mdb-dropdown-font-size: 1rem !default;
2015-11-18 23:53:05 +03:00
// Radio:
2015-12-14 23:19:17 +03:00
$mdb-radio-border: .125rem !default; // 2px
$mdb-radio-size: 1.25rem !default;
$mdb-radio-label-padding: .3125rem !default; // 5px
2015-12-14 23:19:17 +03:00
$mdb-radio-color-off: $mdb-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
2015-11-25 02:40:52 +03:00
$mdb-radio-color-on: $brand-primary !default;
2015-12-14 23:19:17 +03:00
$mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity 26%
2015-12-21 22:27:44 +03:00
$mdb-radio-color-disabled-inverse: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30%
2015-12-21 22:27:44 +03:00
// Shadows
$mdb-shadow-key-umbra-opacity: 0.2 !default;
$mdb-shadow-key-penumbra-opacity: 0.14 !default;
$mdb-shadow-ambient-shadow-opacity: 0.12 !default;
2015-12-21 22:27:44 +03:00