mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-30 05:24:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

first sass compilation with v4

Browse Source
This commit is contained in:
Kevin Ross 2015-11-30 11:15:59 -06:00
parent fe4eb43524
commit 861c5b2b9e
19 changed files with 366 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css.map
View File

File diff suppressed because one or more lines are too long

4
docs/assets/scss/docs.scss
View File

@ -23,8 +23,8 @@
// Happy Bootstrapping! // Happy Bootstrapping!
// Load Bootstrap variables and mixins // Load Bootstrap variables and mixins
@import "../../../scss/variables"; @import "../../../scss/includes/variables";
@import "../../../scss/mixins"; @import "../../../scss/includes/mixins";
// Local docs variables // Local docs variables
$bd-purple: #563d7c; $bd-purple: #563d7c;

8
grunt/bs-sass-compile/libsass.js
View File

@ -7,7 +7,7 @@ module.exports = function configureLibsass(grunt) {
options: { options: {
includePaths: ['scss'], includePaths: ['scss'],
precision: 6, precision: 6,
sourceComments: false, sourceComments: true,
sourceMap: true, sourceMap: true,
outputStyle: 'expanded' outputStyle: 'expanded'
}, },
@ -18,9 +18,9 @@ module.exports = function configureLibsass(grunt) {
}, },
extras: { extras: {
files: { files: {
'dist/css/<%= pkg.name %>-flex.css': 'scss/<%= pkg.name %>-flex.scss', //'dist/css/<%= pkg.name %>-flex.css': 'scss/<%= pkg.name %>.scss',
'dist/css/<%= pkg.name %>-grid.css': 'scss/<%= pkg.name %>-grid.scss', //'dist/css/<%= pkg.name %>-grid.css': 'scss/<%= pkg.name %>-grid.scss',
'dist/css/<%= pkg.name %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss' //'dist/css/<%= pkg.name %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss'
} }
}, },
docs: { docs: {

6
grunt/bs-sass-compile/sass.js
View File

@ -21,9 +21,9 @@ module.exports = function configureRubySass(grunt) {
extras: { extras: {
options: options, options: options,
files: { files: {
'dist/css/<%= pkg.name %>-flex.css': 'scss/<%= pkg.name %>-flex.scss', //'dist/css/<%= pkg.name %>-flex.css': 'scss/<%= pkg.name %>-flex.scss',
'dist/css/<%= pkg.name %>-grid.css': 'scss/<%= pkg.name %>-grid.scss', //'dist/css/<%= pkg.name %>-grid.css': 'scss/<%= pkg.name %>-grid.scss',
'dist/css/<%= pkg.name %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss' //'dist/css/<%= pkg.name %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss'
} }
}, },
docs: { docs: {

29
scss/_bootstrap-material-design.scss
View File

@ -1,29 +0,0 @@
@import 'includes/colors';
@import 'includes/variables';
// FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350
@import 'includes/bootstrap';
@import 'includes/mixins';
@import 'includes/shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import 'includes/scaffolding'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
@import 'includes/welljumbo';
@import 'includes/buttons';
@import 'includes/checkboxes';
@import 'includes/togglebutton';
@import 'includes/radios';
@import 'includes/inputs';
@import 'includes/form';
@import 'includes/lists';
@import 'includes/navbar';
@import 'includes/alerts';
@import 'includes/progress';
@import 'includes/typography';
@import 'includes/tabs';
@import 'includes/popups';
@import 'includes/cards';
@import 'includes/dialogs';
@import 'includes/panels';
@import 'includes/dividers';
@import 'includes/themes';
@import 'includes/plugins';

3
scss/bootstrap-material-design.scss vendored Normal file
View File

@ -0,0 +1,3 @@
// IMPORTANT: For use of source and variable overrides, import the following file directly, *NOT* this one.
// This file primarily exists to create the static css distribution.
@import "includes/bootstrap-material-design";

30
scss/includes/_bootstrap-material-design.scss Normal file
View File

@ -0,0 +1,30 @@
// This is the main scss file, provided as an underscored file so that variable contexts remain in-tact when importing from the source.
@import 'colors';
@import 'variables';
// FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350
@import 'bootstrap';
@import 'mixins';
@import 'mixins/shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import 'scaffolding'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
@import 'welljumbo';
@import 'buttons';
@import 'checkboxes';
@import 'togglebutton';
@import 'radios';
@import 'inputs';
@import 'form';
@import 'lists';
@import 'navbar';
@import 'alerts';
@import 'progress';
@import 'typography';
@import 'tabs';
@import 'popups';
@import 'cards';
@import 'dialogs';
@import 'panels';
@import 'dividers';
@import 'themes';
@import 'plugins';

15
scss/includes/_dropdown.scss Normal file
View File

@ -0,0 +1,15 @@
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background-color: transparent;
color: $brand-primary;
}
}
}

17
scss/includes/_inputs.scss
View File

@ -97,7 +97,8 @@
// FIXME: need to avoid top margin http://v4-alpha.getbootstrap.com/content/reboot/#approach // FIXME: need to avoid top margin http://v4-alpha.getbootstrap.com/content/reboot/#approach
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
margin: ($label-top-margin + $static-font-size) 0 0 0; //margin: ($label-top-margin + $static-font-size) 0 0 0;
padding-top: ($label-top-margin + $static-font-size);
// larger labels as placeholders // larger labels as placeholders
&.label-floating, &.label-floating,
@ -265,16 +266,16 @@
} }
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) // default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
@include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base); @include form-group-size-variant(null, $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base);
// default floating size/location with a form-group (need margin etc from a default form-group) // default floating size/location with a form-group (need margin etc from a default form-group)
@include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base); @include form-group-size-variant(unquote(".form-group"), $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base);
// sm floating size/location // sm floating size/location
@include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small); @include form-group-size-variant(unquote(".form-group.form-group-sm"), $font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm);
// lg floating size/location // lg floating size/location
@include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large); @include form-group-size-variant(unquote(".form-group.form-group-lg"), $font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg);
select.form-control { select.form-control {
@ -308,7 +309,7 @@ select.form-control {
// input group/addon related styles // input group/addon related styles
// default margin - no form-group required // default margin - no form-group required
@include input-group-button-variation($mdb-input-padding-base-vertical); @include input-group-button-variation($mdb-input-padding-y-base);
.form-group { .form-group {
//.form-control { //.form-control {
@ -317,12 +318,12 @@ select.form-control {
// sm margin // sm margin
&.form-group-sm { &.form-group-sm {
@include input-group-button-variation($mdb-input-padding-small-vertical); @include input-group-button-variation($mdb-input-padding-y-sm);
} }
// lg margin // lg margin
&.form-group-lg { &.form-group-lg {
@include input-group-button-variation($mdb-input-padding-large-vertical); @include input-group-button-variation($mdb-input-padding-y-lg);
} }
} }

246
scss/includes/_mixins.scss
View File

@ -1,242 +1,4 @@
// This file is NOT automatically converted and must be manually merged @import "mixins/utilities";
@import "mixins-utilities"; @import "mixins/shadows";
@import "mixins/variations";
// Placeholder text @import "mixins/inputs";
@mixin material-placeholder() {
&::-moz-placeholder {@content; } // Firefox
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
&::-webkit-input-placeholder {@content; } // Safari and Chrome
}
// variations(unquote(""), background-color, #FFF);
@mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1);
}
@mixin variations-content($args) {
//@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, variation-color)}; }";
//@debug "#{inspect($args)}";
//@error "break here";
#{map-get($args, material-param-1)}: map-get($args, variation-color);
}
@mixin background-variations($component, $selector-suffix, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "background-variations-content", null);
}
@mixin background-variations-content($args) {
background-color: map-get($args, variation-color);
@if (map-get($args, variation-color) == $mdb-btn-background-color) {
color: $mdb-text-color-primary;
} @else {
color: map-get($args, variation-color-text);
}
}
//@mixin text-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($component, $selector-suffix, $color-default, "text-variations-content", null);
//}
//
//@mixin text-variations-content($args) {
// color: map-get($args, variation-color);
//}
//
//@mixin button-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
// @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", $mdb-param-1);
//}
//
//@mixin button-variations-content($args) {
// //@debug "#{inspect($args)}";
// $variation-color: map-get($args, variation-color);
// $mdb-param-1: map-get($args, material-param-1);
// background-color: contrast-color($variation-color,
// darken($variation-color, $mdb-param-1),
// lighten($variation-color, $mdb-param-1));
//}
//
//@mixin bg-color-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
// @include generic-variations($component, $selector-suffix, $color-default, "bg-color-variations-content", $mdb-param-1);
//}
//
//@mixin bg-color-variations-content($args) {
// background-color: rgba(map-get($args, variation-color), map-get($args, material-param-1));
//}
//
//// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
//@mixin bg-box-shadow-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($component, $selector-suffix, $color-default, "bg-box-shadow-variations-content", null);
//}
//
//@mixin bg-box-shadow-variations-content($args){
// $variation-color: map-get($args, variation-color);
// box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($variation-color, (10/100));
//}
//
//// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
//@mixin bg-img-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($component, $selector-suffix, $color-default, "bg-img-variations-content", null);
//}
//
//@mixin bg-img-variations-content($args){
// $variation-color: map-get($args, variation-color);
// //@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, variation-color-name)} #{map-get($args, variation-color)}"; //#{inspect($args)}";
// background-image: linear-gradient($variation-color, $variation-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
//}
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin navbar-variations($component, $selector-suffix, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
}
@mixin navbar-variations-content($args){
$variation-color: map-get($args, variation-color);
$variation-color-text: map-get($args, variation-color-text);
background-color: $variation-color;
color: $variation-color-text;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control,
.navbar-form input.form-control {
@include material-placeholder {
color: $variation-color-text;
}
}
.dropdown-menu {
border-radius: $border-radius-base;
li > a {
font-size: $mdb-dropdown-font-size;
padding: 13px 16px;
&:hover,
&:focus {
color: $variation-color;
background-color: $grey-200;
}
}
.active > a {
&:hover,
&:focus {
color: $variation-color-text;
}
background-color: $variation-color;
color: $variation-color-text;
}
}
}
// alert-variations("", $brand-primary)
@mixin alert-variations($component, $selector-suffix, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "alert-variations-content", null);
}
@mixin alert-variations-content($args){
$variation-color: map-get($args, variation-color);
$variation-color-text: map-get($args, variation-color-text);
background-color: $variation-color;
color: $variation-color-text;
a, .alert-link {
color: $variation-color-text;
}
}
// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
@mixin call-variations-content-mixin($args) {
$mixin-name: map-get($args, mixin-name);
@if $mixin-name == variations-content {
@include variations-content($args);
} @else if $mixin-name == background-variations-content {
@include background-variations-content($args);
} @else if $mixin-name == text-variations-content {
@include text-variations-content($args);
} @else if $mixin-name == button-variations-content {
@include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@include bg-box-shadow-variations-content($args);
} @else if $mixin-name == bg-img-variations-content {
@include bg-img-variations-content($args);
} @else if $mixin-name == navbar-variations-content {
@include navbar-variations-content($args);
}@else if $mixin-name == alert-variations-content {
@include alert-variations-content($args);
} @else {
@error "Unknown mixin: #{$mixin-name}"
}
}
//
// To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it.
//
// $variation-color-name ---> "red", "green", "indigo" ...
// $variation-color-full-name ---> "red", "green-50", "indigo-400" ...
// $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) {
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: (
//extra: $selector-suffix,
//default: $color-default,
mixin-name: $mixin-name,
material-param-1: $mdb-param-1
);
// bootstrap styles
&#{$selector-suffix},
&#{$component}-default#{$selector-suffix} {
$args-extra: map-merge($args, (
variation-color: $color-default,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-extra);
}
&#{$component}-inverse#{$selector-suffix} {
$args-inverse: map-merge($args, (
variation-color: $mdb-brand-inverse,
variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary-hex, $mdb-text-color-light-hex)
));
@include call-variations-content-mixin($args-inverse);
}
&#{$component}-primary#{$selector-suffix} {
$args-primary: map-merge($args, (
variation-color: $brand-primary,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-primary);
}
&#{$component}-success#{$selector-suffix} {
$args-success: map-merge($args, (
variation-color: $brand-success,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-success);
}
&#{$component}-info#{$selector-suffix} {
$args-info: map-merge($args, (
variation-color: $brand-info,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-info);
}
&#{$component}-warning#{$selector-suffix} {
$args-warning: map-merge($args, (
variation-color: $brand-warning,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-warning);
}
&#{$component}-danger#{$selector-suffix} {
$args-danger: map-merge($args, (
variation-color: $brand-danger,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-danger);
}
}

16
scss/includes/_navbar.scss
View File

@ -88,7 +88,8 @@
} }
} }
@media (max-width: $grid-float-breakpoint-max) { @include media-breakpoint-down(md) {
//@media (max-width: $grid-float-breakpoint-max) { //768px
.navbar-text { .navbar-text {
color: inherit; color: inherit;
margin-top: 15px; margin-top: 15px;
@ -177,11 +178,11 @@
// re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
//--- //---
//height: $mdb-input-height-base; //height: $mdb-input-height-base;
$bs-line-height-base: 1.428571429 !default; //$bs-line-height-base: 1.428571429 !default;
$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px //$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
height: ($bs-line-height-computed + 8px); //height: ($bs-line-height-computed + 8px);
font-size: $font-size-base; //font-size: $font-size-base;
line-height: $bs-line-height-base; //line-height: $bs-line-height-base;
//--- //---
} }
} }
@ -194,7 +195,8 @@
background-color: $indigo; background-color: $indigo;
} }
@media (max-width: $screen-md-max) { @include media-breakpoint-down(lg) {
//@media (max-width: $screen-md-max) { // 1200-1
.navbar-brand { .navbar-brand {
height: 50px; height: 50px;

79
scss/includes/_scaffolding.scss
View File

@ -1,41 +1,33 @@
body { body {
background-color: $body-bg; // Not sure we need this now that we are customizing bootstrap
&.inverse {
background: #333333;
&, .form-control {
color: $mdb-text-color-light;
}
.modal,
.panel-default,
.card {
&,
.form-control {
background-color: initial;
color: initial;
}
}
}
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { // background-color: $body-bg;
//font-family: $font-family-sans-serif; // &.inverse {
//font-weight: 300; // background: #333333;
} // &, .form-control {
// color: $mdb-text-color-light;
h5, h6{ // }
font-weight: 400; // .modal,
} // .panel-default,
// .card {
a, a:hover, a:focus { // &,
color: $brand-primary; // .form-control {
// background-color: initial;
& .material-icons { // color: initial;
vertical-align: middle; // }
} // }
//
// }
//}
//
//
//a, a:hover, a:focus {
// color: $brand-primary;
//
// & .material-icons {
// vertical-align: middle;
// }
} }
// Prevent highlight on mobile // Prevent highlight on mobile
@ -46,20 +38,3 @@ a, a:hover, a:focus {
outline: 0; outline: 0;
} }
} }
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background-color: transparent;
color: $brand-primary;
}
}
}

8
scss/includes/_typography.scss
View File

@ -1,4 +1,12 @@
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
//font-family: $font-family-sans-serif;
//font-weight: 300;
}
h5, h6{
font-weight: 400;
}
.text-warning { .text-warning {
color: $brand-warning; color: $brand-warning;

37
scss/includes/_variables.scss
View File

@ -5,7 +5,7 @@ $mdb-text-color-light: unquote("rgba(#{$rgb-white}, 0.84)") !default;
$mdb-text-color-light-hex: $white !default; // for contrast function in inverse $mdb-text-color-light-hex: $white !default; // for contrast function in inverse
$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default; $mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse $mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
$icon-color: rgba(0,0,0,0.5) !default; $icon-color: rgba(0, 0, 0, 0.5) !default;
//--- //---
// Customized BS variables // Customized BS variables
@ -29,26 +29,24 @@ $body-bg: #EEEEEE !default;
// Import our customized bootstrap // Import our customized bootstrap
$enable-flex: true; $enable-flex: true;
@import "../bower_components/bootstrap/scss/variables"; @import "../../bower_components/bootstrap/scss/variables";
@import "../../bower_components/bootstrap/scss/mixins";
// Bootstrap Material Design variables start with mdb- // Bootstrap Material Design variables start with mdb-
$mdb-brand-inverse: $indigo !default; $mdb-brand-inverse: $indigo !default;
/* ANIMATION */ /* ANIMATION */
$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default; $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-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-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default; $mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
//--- //---
// FIXME: Similar but not quite the same as Bootstrap variables // 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 // FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables
$contrast-factor: 40% !default; $contrast-factor: 40% !default;
//--- //---
// -------------------- // --------------------
// inputs // inputs
$mdb-input-placeholder-color: #BDBDBD !default; $mdb-input-placeholder-color: #BDBDBD !default;
@ -56,31 +54,20 @@ $mdb-input-underline-color: #D2D2D2 !default;
$mdb-label-static-size-ratio: 75 / 100 !default; $mdb-label-static-size-ratio: 75 / 100 !default;
$mdb-help-block-size-ratio: 75 / 100 !default; $mdb-help-block-size-ratio: 75 / 100 !default;
$mdb-input-font-size-base: 16px !default;
$mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
$mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables // FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
//** Unit-less `line-height` for use in components like buttons.
$mdb-input-line-height-base: $line-height !default; //1.428571429 !default; // 20/14
$mdb-input-line-height-large: $line-height-lg !default; //1.3333333 !default; // extra decimals for Win 8.1 Chrome
$mdb-input-line-height-small: $line-height-sm !default; //1.5 !default;
// //
////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). ////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$mdb-input-padding-base-vertical: 8px - 1px !default; // was 6. $mdb-input-padding-y-base: .4375rem !default; // 7px
//$mdb-input-padding-base-horizontal: 0 !default; // was 12.
$mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder $mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder
$mdb-label-top-margin-base: 16px !default; $mdb-label-top-margin-base: 1rem !default;
// //
$mdb-input-padding-large-vertical: 10px - 1px !default; // 10 $mdb-input-padding-y-lg: .5625rem !default; // 9px
//$mdb-input-padding-large-horizontal: 0 !default; // 16 $mdb-label-as-placeholder-shim-lg: 0 !default; // -4px // manual adjustment of label top when positioned as placeholder
$mdb-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder $mdb-label-top-margin-lg: 1rem !default; // 16px
$mdb-label-top-margin-large: 16px !default;
// //
$mdb-input-padding-small-vertical: 4px - 1px !default; // 5 $mdb-input-padding-y-sm: .1875 !default; // 3px
//$mdb-input-padding-small-horizontal: 0 !default; // 10 $mdb-label-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder
$mdb-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder $mdb-label-top-margin-sm: .75rem !default; // 12px
$mdb-label-top-margin-small: 12px !default;
// Card // Card
$mdb-card-body-text: $mdb-text-color-primary !default; $mdb-card-body-text: $mdb-text-color-primary !default;
@ -119,11 +106,9 @@ $mdb-btn-font-size-lg: 16px !default;
$mdb-btn-font-size-sm: 12px !default; $mdb-btn-font-size-sm: 12px !default;
$mdb-btn-font-size-xs: 10px !default; $mdb-btn-font-size-xs: 10px !default;
$mdb-btn-background-color: transparent !default; $mdb-btn-background-color: transparent !default;
$mdb-btn-background-color-text: $mdb-text-color-primary !default; $mdb-btn-background-color-text: $mdb-text-color-primary !default;
$mdl-btn-border-radus: 2px !default; $mdl-btn-border-radus: 2px !default;
//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default; //$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;

6
scss/includes/mixins/_inputs.scss Normal file
View File

@ -0,0 +1,6 @@
// Placeholder text
@mixin material-placeholder() {
&::-moz-placeholder {@content; } // Firefox
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
&::-webkit-input-placeholder {@content; } // Safari and Chrome
}

2
scss/includes/_shadows.scss → scss/includes/mixins/_shadows.scss
View File

@ -1,5 +1,3 @@
@mixin shadow-z-1(){ @mixin shadow-z-1(){
box-shadow: box-shadow:
0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12),

0
scss/includes/_mixins-utilities.scss → scss/includes/mixins/_utilities.scss
View File

231
scss/includes/mixins/_variations.scss Normal file
View File

@ -0,0 +1,231 @@
// variations(unquote(""), background-color, #FFF);
@mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1);
}
@mixin variations-content($args) {
//@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, variation-color)}; }";
//@debug "#{inspect($args)}";
//@error "break here";
#{map-get($args, material-param-1)}: map-get($args, variation-color);
}
@mixin background-variations($component, $selector-suffix, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "background-variations-content", null);
}
@mixin background-variations-content($args) {
background-color: map-get($args, variation-color);
@if (map-get($args, variation-color) == $mdb-btn-background-color) {
color: $mdb-text-color-primary;
} @else {
color: map-get($args, variation-color-text);
}
}
//@mixin text-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($component, $selector-suffix, $color-default, "text-variations-content", null);
//}
//
//@mixin text-variations-content($args) {
// color: map-get($args, variation-color);
//}
//
//@mixin button-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
// @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", $mdb-param-1);
//}
//
//@mixin button-variations-content($args) {
// //@debug "#{inspect($args)}";
// $variation-color: map-get($args, variation-color);
// $mdb-param-1: map-get($args, material-param-1);
// background-color: contrast-color($variation-color,
// darken($variation-color, $mdb-param-1),
// lighten($variation-color, $mdb-param-1));
//}
//
//@mixin bg-color-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
// @include generic-variations($component, $selector-suffix, $color-default, "bg-color-variations-content", $mdb-param-1);
//}
//
//@mixin bg-color-variations-content($args) {
// background-color: rgba(map-get($args, variation-color), map-get($args, material-param-1));
//}
//
//// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
//@mixin bg-box-shadow-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($component, $selector-suffix, $color-default, "bg-box-shadow-variations-content", null);
//}
//
//@mixin bg-box-shadow-variations-content($args){
// $variation-color: map-get($args, variation-color);
// box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($variation-color, (10/100));
//}
//
//// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
//@mixin bg-img-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($component, $selector-suffix, $color-default, "bg-img-variations-content", null);
//}
//
//@mixin bg-img-variations-content($args){
// $variation-color: map-get($args, variation-color);
// //@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, variation-color-name)} #{map-get($args, variation-color)}"; //#{inspect($args)}";
// background-image: linear-gradient($variation-color, $variation-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
//}
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin navbar-variations($component, $selector-suffix, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
}
@mixin navbar-variations-content($args){
$variation-color: map-get($args, variation-color);
$variation-color-text: map-get($args, variation-color-text);
background-color: $variation-color;
color: $variation-color-text;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control,
.navbar-form input.form-control {
@include material-placeholder {
color: $variation-color-text;
}
}
.dropdown-menu {
border-radius: $border-radius-base;
li > a {
font-size: $mdb-dropdown-font-size;
padding: 13px 16px;
&:hover,
&:focus {
color: $variation-color;
background-color: $grey-200;
}
}
.active > a {
&:hover,
&:focus {
color: $variation-color-text;
}
background-color: $variation-color;
color: $variation-color-text;
}
}
}
// alert-variations("", $brand-primary)
@mixin alert-variations($component, $selector-suffix, $color-default) {
@include generic-variations($component, $selector-suffix, $color-default, "alert-variations-content", null);
}
@mixin alert-variations-content($args){
$variation-color: map-get($args, variation-color);
$variation-color-text: map-get($args, variation-color-text);
background-color: $variation-color;
color: $variation-color-text;
a, .alert-link {
color: $variation-color-text;
}
}
// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
@mixin call-variations-content-mixin($args) {
$mixin-name: map-get($args, mixin-name);
@if $mixin-name == variations-content {
@include variations-content($args);
} @else if $mixin-name == background-variations-content {
@include background-variations-content($args);
} @else if $mixin-name == text-variations-content {
@include text-variations-content($args);
} @else if $mixin-name == button-variations-content {
@include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@include bg-box-shadow-variations-content($args);
} @else if $mixin-name == bg-img-variations-content {
@include bg-img-variations-content($args);
} @else if $mixin-name == navbar-variations-content {
@include navbar-variations-content($args);
}@else if $mixin-name == alert-variations-content {
@include alert-variations-content($args);
} @else {
@error "Unknown mixin: #{$mixin-name}"
}
}
//
// To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it.
//
// $variation-color-name ---> "red", "green", "indigo" ...
// $variation-color-full-name ---> "red", "green-50", "indigo-400" ...
// $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) {
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: (
//extra: $selector-suffix,
//default: $color-default,
mixin-name: $mixin-name,
material-param-1: $mdb-param-1
);
// bootstrap styles
&#{$selector-suffix},
&#{$component}-default#{$selector-suffix} {
$args-extra: map-merge($args, (
variation-color: $color-default,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-extra);
}
&#{$component}-inverse#{$selector-suffix} {
$args-inverse: map-merge($args, (
variation-color: $mdb-brand-inverse,
variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary-hex, $mdb-text-color-light-hex)
));
@include call-variations-content-mixin($args-inverse);
}
&#{$component}-primary#{$selector-suffix} {
$args-primary: map-merge($args, (
variation-color: $brand-primary,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-primary);
}
&#{$component}-success#{$selector-suffix} {
$args-success: map-merge($args, (
variation-color: $brand-success,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-success);
}
&#{$component}-info#{$selector-suffix} {
$args-info: map-merge($args, (
variation-color: $brand-info,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-info);
}
&#{$component}-warning#{$selector-suffix} {
$args-warning: map-merge($args, (
variation-color: $brand-warning,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-warning);
}
&#{$component}-danger#{$selector-suffix} {
$args-danger: map-merge($args, (
variation-color: $brand-danger,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-danger);
}
}