mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
first sass compilation with v4
This commit is contained in:
Kevin Ross
parent
fe4eb43524
commit
861c5b2b9e
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -23,8 +23,8 @@
|
|||
// Happy Bootstrapping!
|
||||
|
||||
// Load Bootstrap variables and mixins
|
||||
@import "../../../scss/variables";
|
||||
@import "../../../scss/mixins";
|
||||
@import "../../../scss/includes/variables";
|
||||
@import "../../../scss/includes/mixins";
|
||||
|
||||
// Local docs variables
|
||||
$bd-purple: #563d7c;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ module.exports = function configureLibsass(grunt) {
|
|||
options: {
|
||||
includePaths: ['scss'],
|
||||
precision: 6,
|
||||
sourceComments: false,
|
||||
sourceComments: true,
|
||||
sourceMap: true,
|
||||
outputStyle: 'expanded'
|
||||
},
|
||||
|
|
@ -18,9 +18,9 @@ module.exports = function configureLibsass(grunt) {
|
|||
},
|
||||
extras: {
|
||||
files: {
|
||||
'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 %>-reboot.css': 'scss/<%= pkg.name %>-reboot.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 %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss'
|
||||
}
|
||||
},
|
||||
docs: {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ module.exports = function configureRubySass(grunt) {
|
|||
extras: {
|
||||
options: options,
|
||||
files: {
|
||||
'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 %>-reboot.css': 'scss/<%= pkg.name %>-reboot.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 %>-reboot.css': 'scss/<%= pkg.name %>-reboot.scss'
|
||||
}
|
||||
},
|
||||
docs: {
|
||||
|
|
|
|||
|
|
@ -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
3
scss/bootstrap-material-design.scss
vendored
Normal 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
30
scss/includes/_bootstrap-material-design.scss
Normal 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
15
scss/includes/_dropdown.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -97,7 +97,8 @@
|
|||
|
||||
// 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
|
||||
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
|
||||
&.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)
|
||||
@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)
|
||||
@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
|
||||
@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
|
||||
@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 {
|
||||
|
|
@ -308,7 +309,7 @@ select.form-control {
|
|||
// input group/addon related styles
|
||||
|
||||
// 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-control {
|
||||
|
|
@ -317,12 +318,12 @@ select.form-control {
|
|||
|
||||
// sm margin
|
||||
&.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
|
||||
&.form-group-lg {
|
||||
@include input-group-button-variation($mdb-input-padding-large-vertical);
|
||||
@include input-group-button-variation($mdb-input-padding-y-lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,242 +1,4 @@
|
|||
// This file is NOT automatically converted and must be manually merged
|
||||
@import "mixins-utilities";
|
||||
|
||||
// Placeholder text
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@import "mixins/utilities";
|
||||
@import "mixins/shadows";
|
||||
@import "mixins/variations";
|
||||
@import "mixins/inputs";
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
color: inherit;
|
||||
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
|
||||
//---
|
||||
//height: $mdb-input-height-base;
|
||||
$bs-line-height-base: 1.428571429 !default;
|
||||
$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
|
||||
height: ($bs-line-height-computed + 8px);
|
||||
font-size: $font-size-base;
|
||||
line-height: $bs-line-height-base;
|
||||
//$bs-line-height-base: 1.428571429 !default;
|
||||
//$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
|
||||
//height: ($bs-line-height-computed + 8px);
|
||||
//font-size: $font-size-base;
|
||||
//line-height: $bs-line-height-base;
|
||||
//---
|
||||
}
|
||||
}
|
||||
|
|
@ -194,7 +195,8 @@
|
|||
background-color: $indigo;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-md-max) {
|
||||
@include media-breakpoint-down(lg) {
|
||||
//@media (max-width: $screen-md-max) { // 1200-1
|
||||
|
||||
.navbar-brand {
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,33 @@
|
|||
|
||||
|
||||
body {
|
||||
background-color: $body-bg;
|
||||
&.inverse {
|
||||
background: #333333;
|
||||
&, .form-control {
|
||||
color: $mdb-text-color-light;
|
||||
}
|
||||
.modal,
|
||||
.panel-default,
|
||||
.card {
|
||||
&,
|
||||
.form-control {
|
||||
background-color: initial;
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// Not sure we need this now that we are customizing bootstrap
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a, a:hover, a:focus {
|
||||
color: $brand-primary;
|
||||
|
||||
& .material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
// background-color: $body-bg;
|
||||
// &.inverse {
|
||||
// background: #333333;
|
||||
// &, .form-control {
|
||||
// color: $mdb-text-color-light;
|
||||
// }
|
||||
// .modal,
|
||||
// .panel-default,
|
||||
// .card {
|
||||
// &,
|
||||
// .form-control {
|
||||
// background-color: initial;
|
||||
// color: initial;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//
|
||||
//a, a:hover, a:focus {
|
||||
// color: $brand-primary;
|
||||
//
|
||||
// & .material-icons {
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
}
|
||||
|
||||
// Prevent highlight on mobile
|
||||
|
|
@ -46,20 +38,3 @@ a, a:hover, a:focus {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
color: $brand-warning;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import '_colors';
|
||||
|
||||
// Typography elements FIXME: review to see if we actually need these
|
||||
$mdb-text-color-light: unquote("rgba(#{$rgb-white}, 0.84)") !default;
|
||||
$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-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
|
||||
$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
|
||||
|
|
@ -29,26 +29,24 @@ $body-bg: #EEEEEE !default;
|
|||
|
||||
// Import our customized bootstrap
|
||||
$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-
|
||||
$mdb-brand-inverse: $indigo !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
|
||||
$contrast-factor: 40% !default;
|
||||
//---
|
||||
|
||||
|
||||
// --------------------
|
||||
// inputs
|
||||
$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-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
|
||||
//** 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).
|
||||
$mdb-input-padding-base-vertical: 8px - 1px !default; // was 6.
|
||||
//$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-top-margin-base: 16px !default;
|
||||
$mdb-input-padding-y-base: .4375rem !default; // 7px
|
||||
$mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-base: 1rem !default;
|
||||
//
|
||||
$mdb-input-padding-large-vertical: 10px - 1px !default; // 10
|
||||
//$mdb-input-padding-large-horizontal: 0 !default; // 16
|
||||
$mdb-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-large: 16px !default;
|
||||
$mdb-input-padding-y-lg: .5625rem !default; // 9px
|
||||
$mdb-label-as-placeholder-shim-lg: 0 !default; // -4px // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-lg: 1rem !default; // 16px
|
||||
//
|
||||
$mdb-input-padding-small-vertical: 4px - 1px !default; // 5
|
||||
//$mdb-input-padding-small-horizontal: 0 !default; // 10
|
||||
$mdb-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-small: 12px !default;
|
||||
$mdb-input-padding-y-sm: .1875 !default; // 3px
|
||||
$mdb-label-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-sm: .75rem !default; // 12px
|
||||
|
||||
// Card
|
||||
$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-xs: 10px !default;
|
||||
|
||||
|
||||
$mdb-btn-background-color: transparent !default;
|
||||
$mdb-btn-background-color-text: $mdb-text-color-primary !default;
|
||||
|
||||
|
||||
$mdl-btn-border-radus: 2px !default;
|
||||
//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;
|
||||
|
||||
|
|
|
|||
6
scss/includes/mixins/_inputs.scss
Normal file
6
scss/includes/mixins/_inputs.scss
Normal 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
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
@mixin shadow-z-1(){
|
||||
box-shadow:
|
||||
0 1px 6px 0 rgba(0, 0, 0, 0.12),
|
||||
231
scss/includes/mixins/_variations.scss
Normal file
231
scss/includes/mixins/_variations.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user