// 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($extra, $mdb-param-1, $default) { @include generic-variations($extra, $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, material-color)}; }"; //@debug "#{inspect($args)}"; //@error "break here"; #{map-get($args, material-param-1)}: map-get($args, material-color); } @mixin background-variations($extra, $default) { @include generic-variations($extra, $default, "background-variations-content", null); } @mixin background-variations-content($args) { background-color: map-get($args, material-color); @if (map-get($args, material-color) == $btn-default) { color: $lightbg-text; } @else { color: map-get($args, material-text-color); } } @mixin text-variations($extra, $default) { @include generic-variations($extra, $default, "text-variations-content", null); } @mixin text-variations-content($args) { color: map-get($args, material-color); } @mixin button-variations($extra, $default, $mdb-param-1) { @include generic-variations($extra, $default, "button-variations-content", $mdb-param-1); } @mixin button-variations-content($args) { //@debug "#{inspect($args)}"; $mdb-color: map-get($args, material-color); $mdb-param-1: map-get($args, material-param-1); background-color: contrast-color($mdb-color, darken($mdb-color, $mdb-param-1), lighten($mdb-color, $mdb-param-1)); } @mixin bg-color-variations($extra, $default, $mdb-param-1) { @include generic-variations($extra, $default, "bg-color-variations-content", $mdb-param-1); } @mixin bg-color-variations-content($args) { background-color: rgba(map-get($args, material-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($extra, $default) { @include generic-variations($extra, $default, "bg-box-shadow-variations-content", null); } @mixin bg-box-shadow-variations-content($args){ $mdb-color: map-get($args, material-color); box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($mdb-color, (10/100)); } // bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary @mixin bg-img-variations($extra, $default) { @include generic-variations($extra, $default, "bg-img-variations-content", null); } @mixin bg-img-variations-content($args){ $mdb-color: map-get($args, material-color); //@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, material-color-name)} #{map-get($args, material-color)}"; //#{inspect($args)}"; background-image: linear-gradient($mdb-color, $mdb-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($extra, $default) { @include generic-variations($extra, $default, "navbar-variations-content", null); } @mixin navbar-variations-content($args){ $mdb-color: map-get($args, material-color); $mdb-text-color: map-get($args, material-text-color); background-color: $mdb-color; color: $mdb-text-color; // deeply defined to override welljumbo class without !impotant need .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder { color: $mdb-text-color; } .dropdown-menu { border-radius: $mdb-dropdown-radius; li > a { font-size: $mdb-dropdown-font-size; padding: 13px 16px; &:hover, &:focus { color: $mdb-color; background-color: $grey-200; } } .active > a { &:hover, &:focus { color: $mdb-text-color; } background-color: $mdb-color; color: $mdb-text-color; } } } // alert-variations("", $brand-primary) @mixin alert-variations($extra, $default) { @include generic-variations($extra, $default, "alert-variations-content", null); } @mixin alert-variations-content($args){ $mdb-color: map-get($args, material-color); $mdb-text-color: map-get($args, material-text-color); background-color: $mdb-color; color: $mdb-text-color; a, .alert-link { color: $mdb-text-color; } } // 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. // // $mdb-color-name ---> "red", "green", "indigo" ... // $mdb-color-full-name ---> "red", "green-50", "indigo-400" ... // $mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ... // $mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... // @mixin generic-variations($extra, $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: $extra, default: $default, mixin-name: $mixin-name, material-param-1: $mdb-param-1 ); // bootstrap styles &#{$extra}, &-default#{$extra} { $args-extra: map-merge($args, ( material-color-name: "default", material-color-full-name: "default", material-color: $default, material-text-color: $darkbg-text )); @include call-variations-content-mixin($args-extra); } &-black#{$extra} { $args-black: map-merge($args, ( material-color-name: "black", material-color-full-name: "black", material-color: $black, material-text-color: $darkbg-text )); @include call-variations-content-mixin($args-black); } &-white#{$extra} { $args-white: map-merge($args, ( material-color-name: "white", material-color-full-name: "white", material-color: $white, material-text-color: $lightbg-text )); @include call-variations-content-mixin($args-white); } &-inverse#{$extra} { $args-inverse: map-merge($args, ( material-color-name: "inverse", material-color-full-name: "inverse", material-color: $inverse, material-text-color: contrast-color($inverse, $lightbg-text, $darkbg-text) )); @include call-variations-content-mixin($args-inverse); } &-primary#{$extra} { $args-primary: map-merge($args, ( material-color-name: "primary", material-color-full-name: "primary", material-color: $brand-primary, material-text-color: $darkbg-text )); @include call-variations-content-mixin($args-primary); } &-success#{$extra} { $args-success: map-merge($args, ( material-color-name: "success", material-color-full-name: "success", material-color: $brand-success, material-text-color: $darkbg-text )); @include call-variations-content-mixin($args-success); } &-info#{$extra} { $args-info: map-merge($args, ( material-color-name: "info", material-color-full-name: "info", material-color: $brand-info, material-text-color: $darkbg-text )); @include call-variations-content-mixin($args-info); } &-warning#{$extra} { $args-warning: map-merge($args, ( material-color-name: "warning", material-color-full-name: "warning", material-color: $brand-warning, material-text-color: $darkbg-text )); @include call-variations-content-mixin($args-warning); } &-danger#{$extra} { $args-danger: map-merge($args, ( material-color-name: "danger", material-color-full-name: "danger", material-color: $brand-danger, material-text-color: $darkbg-text )); @include call-variations-content-mixin($args-danger); } @include generic-variations-colors($args) } @mixin generic-variations-color($args) { $mdb-color-name: map-get($args, material-color-name); $mdb-color-number: map-get($args, material-color-number); $mdb-color-full-name: "#{$mdb-color-name}#{$mdb-color-number}"; $mdb-color: map-get($args, material-color); // $mdb-color-full-name; $mdb-text-color: contrast-color($mdb-color, $lightbg-text, $darkbg-text); &-material-#{$mdb-color-name}#{unquote($mdb-color-number)}#{map-get($args, extra)} { $args-color: map-merge($args, ( material-color-full-name: $mdb-color-full-name, material-color: $mdb-color, material-text-color: $mdb-text-color, )); @include call-variations-content-mixin($args-color); } } $all-variations: unquote("-default, -primary, -info, -success, -warning, -danger");