mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-09 00:00:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

#755 refactored alerts against bs4

Browse Source
This commit is contained in:
Kevin Ross 2015-12-03 10:21:30 -06:00
parent 29fefa5669
commit 5ec4486845
4 changed files with 53 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/assets/scss/docs.scss
View File

@ -23,20 +23,36 @@
// Happy Bootstrapping!
// Load Bootstrap variables and mixins
@import "../../../scss/includes/variables";
@import "../../../scss/includes/mixins";
//@import "../../../scss/includes/variables";
//@import "../../../scss/includes/mixins";
@import "../../../scss/includes/colors";
//http://www.materialpalette.com/indigo/light-blue
$brand-primary: $indigo-500; // #3F51B5
/* Palette generated by Material Palette - materialpalette.com/indigo/light-blue */
//$primary-color-dark: #303F9F $indigo-700
//$primary-color: #3F51B5 $indigo-500
//$primary-color-light: #C5CAE9 $indigo-100
//$primary-color-text: #FFFFFF
//$accent-color: #03A9F4 $light-blue-500
//$primary-text-color: #212121 $grey-900
//$secondary-text-color: #727272
//$divider-color: #B6B6B6
// Local docs variables
$bd-purple: #563d7c;
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
$bd-purple-light: #cdbfe3;
$bd-graphite: #2a2730;
$bd-purple: $brand-primary; // #563d7c;
$bd-purple-bright: $light-blue-500; //lighten(saturate($bd-purple, 5%), 15%);
$bd-purple-light: $indigo-100; // #C5CAE9; #cdbfe3;
$bd-graphite: $indigo-700; // #303F9F; //#2a2730;
$bd-graphite-light: lighten($bd-graphite, 40%);
$bd-yellow: #ffe484;
$bd-danger: #d9534f;
$bd-warning: #f0ad4e;
$bd-info: #5bc0de;
@import "../../../scss/includes/bootstrap-material-design";
// Load docs components
@import "booticon";
@import "nav";

13
scss/includes/_alerts.scss
View File

@ -1,17 +1,4 @@
.alert {
border: 0;
border-radius: 0;
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
@include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
&-info, &-danger, &-warning, &-success {
color: $mdb-text-color-light;
}
&-default {
a, .alert-link {
color: $mdb-text-color-primary;
}
}
}

35
scss/includes/_variables.scss
View File

@ -2,14 +2,13 @@
// 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-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
$mdb-text-color-light: hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default;
$mdb-text-color-primary: hsla(0, 0%, 0%, 0.87) !default; // black 0.87 //unquote("rgba(#{$rgb-black}, 0.87)") !default;
$icon-color: rgba(0, 0, 0, 0.5) !default;
//---
// Customized BS variables
$enable-flex: true;
// Bootstrap brand color customization
$brand-primary: $teal !default;
@ -26,12 +25,34 @@ $font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$headings-font-weight: 300 !default;
$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
$enable-flex: true;
@import "../../bower_components/bootstrap/scss/variables";
@import "../../bower_components/bootstrap/scss/mixins";
//@import "../../bower_components/bootstrap/scss/variables";
//@import "../../bower_components/bootstrap/scss/mixins";
// Bootstrap Material Design variables start with mdb-
$mdb-brand-inverse: $indigo !default;

70
scss/includes/mixins/_variations.scss
View File

@ -23,56 +23,6 @@
}
}
//@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);
@ -113,23 +63,6 @@
}
}
// 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);
@ -177,7 +110,6 @@
);
// bootstrap styles
&#{$selector-suffix},
&#{$component}-default#{$selector-suffix} {
$args-extra: map-merge($args, (
@ -189,7 +121,7 @@
&#{$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)
variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary, $mdb-text-color-light)
));
@include call-variations-content-mixin($args-inverse);
}