diff --git a/scss/includes/_bootstrap-material-design.scss b/scss/includes/_bootstrap-material-design.scss index aba0e3d0..eacaf08e 100644 --- a/scss/includes/_bootstrap-material-design.scss +++ b/scss/includes/_bootstrap-material-design.scss @@ -16,7 +16,7 @@ @import 'navbar'; @import 'alerts'; @import 'progress'; -@import 'typography'; +@import 'type'; @import 'tabs'; @import 'popups'; @import 'cards'; diff --git a/scss/includes/_typography.scss b/scss/includes/_type.scss similarity index 100% rename from scss/includes/_typography.scss rename to scss/includes/_type.scss diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss index a5e36bbd..1e834699 100644 --- a/scss/includes/_variables.scss +++ b/scss/includes/_variables.scss @@ -5,52 +5,24 @@ $mdb-text-color-light: rgba(255, 255, 255, 0.84) !default; //hsla(0, 0%, 100%, 0 $mdb-text-color-primary: rgba(0, 0, 0, 0.87) !default; $icon-color: rgba(0, 0, 0, 0.5) !default; + +// redefine ? TODO: do we need this mdb variant? +$gray-dark: $mdb-text-color-primary; + //--- // Customized BS variables -//$enable-flex: true; - -// Bootstrap brand color customization -$brand-primary: $teal !default; -$brand-success: $green !default; -$brand-danger: $red !default; -$brand-warning: $deep-orange !default; -$brand-info: $light-blue !default; +$enable-flex: true; +@import 'variables/brand'; $border-radius-base: 2px !default; $border-radius-small: 1px !default; -// Typography -$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; -$headings-font-weight: 300 !default; +@import 'variables/type'; +@import 'variables/body'; +@import 'variables/buttons'; -$body-bg: #EEEEEE !default; - -// Form states and alerts -// -// Define colors for form feedback states and, by default, alerts. - -$state-success-text: $mdb-text-color-light !default; -$state-success-bg: $brand-success !default; -//$state-success-border: darken($state-success-bg, 5%) !default; - -$state-info-text: $mdb-text-color-light !default; -$state-info-bg: $brand-info !default; -//$state-info-border: darken($state-info-bg, 7%) !default; - -$state-warning-text: $mdb-text-color-light !default; -$state-warning-bg: $brand-warning !default; -//$state-warning-border: darken($state-warning-bg, 5%) !default; - -$state-danger-text: $mdb-text-color-light !default; -$state-danger-bg: $brand-danger !default; -//$state-danger-border: darken($state-danger-bg, 5%) !default; //--- - -// Import our customized bootstrap -//@import "../../bower_components/bootstrap/scss/variables"; -//@import "../../bower_components/bootstrap/scss/mixins"; - // Bootstrap Material Design variables start with mdb- $mdb-brand-inverse: $indigo !default; diff --git a/scss/includes/variables/_body.scss b/scss/includes/variables/_body.scss new file mode 100644 index 00000000..cf20febe --- /dev/null +++ b/scss/includes/variables/_body.scss @@ -0,0 +1,6 @@ +// Body +// +// Settings for the `` element. + +$body-bg: #EEEEEE !default; +//$body-color: $gray-dark !default; diff --git a/scss/includes/variables/_brand.scss b/scss/includes/variables/_brand.scss new file mode 100644 index 00000000..3ba4a5b6 --- /dev/null +++ b/scss/includes/variables/_brand.scss @@ -0,0 +1,6 @@ +// Bootstrap brand color customization +$brand-primary: $teal !default; +$brand-success: $green !default; +$brand-danger: $red !default; +$brand-warning: $deep-orange !default; +$brand-info: $light-blue !default; diff --git a/scss/includes/variables/_buttons.scss b/scss/includes/variables/_buttons.scss new file mode 100644 index 00000000..7840dd79 --- /dev/null +++ b/scss/includes/variables/_buttons.scss @@ -0,0 +1,45 @@ +// Buttons +// +// For each of Bootstrap's buttons, define text, background and border color. + +//$btn-padding-x: 1rem !default; +//$btn-padding-y: .375rem !default; +//$btn-font-weight: normal !default; +// +//$btn-primary-color: #fff !default; +//$btn-primary-bg: $brand-primary !default; +//$btn-primary-border: $btn-primary-bg !default; +// +//$btn-secondary-color: $gray-dark !default; +//$btn-secondary-bg: #fff !default; +//$btn-secondary-border: #ccc !default; +// +//$btn-info-color: #fff !default; +//$btn-info-bg: $brand-info !default; +//$btn-info-border: $btn-info-bg !default; +// +//$btn-success-color: #fff !default; +//$btn-success-bg: $brand-success !default; +//$btn-success-border: $btn-success-bg !default; +// +//$btn-warning-color: #fff !default; +//$btn-warning-bg: $brand-warning !default; +//$btn-warning-border: $btn-warning-bg !default; +// +//$btn-danger-color: #fff !default; +//$btn-danger-bg: $brand-danger !default; +//$btn-danger-border: $btn-danger-bg !default; +// +//$btn-link-disabled-color: $gray-light !default; +// +//$btn-padding-x-sm: .75rem !default; +//$btn-padding-y-sm: .25rem !default; +// +//$btn-padding-x-lg: 1.25rem !default; +//$btn-padding-y-lg: .75rem !default; +// +//// Allows for customizing button radius independently from global border radius +//$btn-border-radius: $border-radius !default; +//$btn-border-radius-lg: $border-radius-lg !default; +//$btn-border-radius-sm: $border-radius-sm !default; + diff --git a/scss/includes/variables/_state.scss b/scss/includes/variables/_state.scss new file mode 100644 index 00000000..b4a719de --- /dev/null +++ b/scss/includes/variables/_state.scss @@ -0,0 +1,15 @@ +// Form states and alerts +// +// Define colors for form feedback states and, by default, alerts. +$state-success-text: $mdb-text-color-light !default; +$state-success-bg: $brand-success !default; + +$state-info-text: $mdb-text-color-light !default; +$state-info-bg: $brand-info !default; + +$state-warning-text: $mdb-text-color-light !default; +$state-warning-bg: $brand-warning !default; + +$state-danger-text: $mdb-text-color-light !default; +$state-danger-bg: $brand-danger !default; + diff --git a/scss/includes/variables/_type.scss b/scss/includes/variables/_type.scss new file mode 100644 index 00000000..34db851d --- /dev/null +++ b/scss/includes/variables/_type.scss @@ -0,0 +1,3 @@ +// Typography +$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; +$headings-font-weight: 300 !default;