CARGA
CARGA
This commit is contained in:
130
staticfiles/assets/scss/material-dashboard/mixins/_alert.scss
Normal file
130
staticfiles/assets/scss/material-dashboard/mixins/_alert.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
// alert-variations("", $brand-primary)
|
||||
@mixin alert-variations($component, $selector-suffix, $brand-default) {
|
||||
@include generic-variations($component, $selector-suffix, $brand-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: lighten($variation-color,3%);
|
||||
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: $white-color,
|
||||
variation-color-text: $gray
|
||||
));
|
||||
@include call-variations-content-mixin($args-extra);
|
||||
}
|
||||
&#{$component}-inverse#{$selector-suffix} {
|
||||
$args-inverse: map-merge($args, (
|
||||
variation-color: #212121,
|
||||
variation-color-text: #fff
|
||||
));
|
||||
@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);
|
||||
}
|
||||
|
||||
&#{$component}-rose#{$selector-suffix} {
|
||||
$args-rose: map-merge($args, (
|
||||
variation-color: $brand-rose,
|
||||
variation-color-text: $mdb-text-color-light
|
||||
));
|
||||
@include call-variations-content-mixin($args-rose);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin alert-icon-color($color) {
|
||||
i{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
// Animations (from mdl http://www.getmdl.io/)
|
||||
|
||||
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $bmd-animation-curve-fast-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $bmd-animation-curve-linear-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $bmd-animation-curve-fast-out-linear-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-default($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $bmd-animation-curve-default;
|
||||
}
|
||||
|
||||
@mixin rotate-180() {
|
||||
-webkit-transform: rotate( 180deg );
|
||||
-moz-transform: rotate( 180deg );
|
||||
-o-transform: rotate( 180deg );
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate( 180deg );
|
||||
}
|
||||
|
||||
@mixin transform-scale($value){
|
||||
-webkit-transform: scale($value);
|
||||
-moz-transform: scale($value);
|
||||
-o-transform: scale($value);
|
||||
-ms-transform: scale($value);
|
||||
transform: scale($value);
|
||||
}
|
||||
|
||||
@mixin rotateY-180() {
|
||||
-webkit-transform: rotateY( 180deg );
|
||||
-moz-transform: rotateY( 180deg );
|
||||
-o-transform: rotateY( 180deg );
|
||||
-ms-transform: rotateY(180deg);
|
||||
transform: rotateY( 180deg );
|
||||
}
|
||||
|
||||
@mixin transitions($time, $type){
|
||||
-webkit-transition: all $time $type;
|
||||
-moz-transition: all $time $type;
|
||||
-o-transition: all $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin transitions-property($property, $time, $type){
|
||||
-webkit-transition: $property $time $type;
|
||||
-moz-transition: $property $time $type;
|
||||
-o-transition: $property $time $type;
|
||||
-ms-transition: $property $time $type;
|
||||
transition: $property $time $type;
|
||||
}
|
||||
|
||||
@mixin transform-translate-x($value){
|
||||
-webkit-transform: translate3d($value, 0, 0);
|
||||
-moz-transform: translate3d($value, 0, 0);
|
||||
-o-transform: translate3d($value, 0, 0);
|
||||
-ms-transform: translate3d($value, 0, 0);
|
||||
transform: translate3d($value, 0, 0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value){
|
||||
-webkit-transform: translate3d(0,$value, 0);
|
||||
-moz-transform: translate3d(0, $value, 0);
|
||||
-o-transform: translate3d(0, $value, 0);
|
||||
-ms-transform: translate3d(0, $value, 0);
|
||||
transform: translate3d(0, $value, 0);
|
||||
}
|
||||
|
||||
@mixin perspective($value){
|
||||
-webkit-perspective: $value;
|
||||
-moz-perspective: $value;
|
||||
-o-perspective: $value;
|
||||
-ms-perspective: $value;
|
||||
perspective: $value;
|
||||
}
|
||||
|
||||
@mixin transform-style($type){
|
||||
-webkit-transform-style: $type;
|
||||
-moz-transform-style: $type;
|
||||
-o-transform-style: $type;
|
||||
-ms-transform-style: $type;
|
||||
transform-style: $type;
|
||||
}
|
||||
|
||||
@mixin backface-visibility($type){
|
||||
-webkit-backface-visibility: $type;
|
||||
-moz-backface-visibility: $type;
|
||||
-o-backface-visibility: $type;
|
||||
-ms-backface-visibility: $type;
|
||||
backface-visibility: $type;
|
||||
}
|
||||
|
||||
@mixin transform-translate-y-dropdown($value){
|
||||
-webkit-transform: translate3d(0, $value, 0) !important;
|
||||
-moz-transform: translate3d(0, $value, 0) !important;
|
||||
-o-transform: translate3d(0, $value, 0) !important;
|
||||
-ms-transform: translate3d(0, $value, 0) !important;
|
||||
transform: translate3d(0, $value, 0) !important;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// case where behavior is responsive, or with a marker class
|
||||
@mixin media-breakpoint-down-or($breakpoint, $name) {
|
||||
#{unquote($name)} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// case where behavior is responsive, or with a marker class
|
||||
@mixin media-breakpoint-up-or($breakpoint, $name) {
|
||||
#{unquote($name)} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Name of the previous breakpoint, or null
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// xs
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// xs
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
||||
// xs
|
||||
@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n > 1, nth($breakpoint-names, $n - 1), null);
|
||||
}
|
||||
355
staticfiles/assets/scss/material-dashboard/mixins/_buttons.scss
Normal file
355
staticfiles/assets/scss/material-dashboard/mixins/_buttons.scss
Normal file
@@ -0,0 +1,355 @@
|
||||
// from bs mixins/buttons button-variant
|
||||
@mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
@include hover {
|
||||
color: $color;
|
||||
background-color: $focus-background;
|
||||
border-color: $focus-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover{
|
||||
color: $color;
|
||||
background-color: $focus-background;
|
||||
border-color: $focus-border;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: $focus-background;
|
||||
border-color: $focus-border;
|
||||
@include shadow-2dp-color($background);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
}
|
||||
|
||||
// when it is an icon, kill the active bg on open dropdown, but stabilize on hover
|
||||
.open > &.dropdown-toggle.bmd-btn-icon {
|
||||
color: inherit;
|
||||
background-color: $background;
|
||||
|
||||
// leave hover on with the lighter focus color
|
||||
&:hover {
|
||||
background-color: $focus-background;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
@include hover {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-flat-button-variant(
|
||||
$color,
|
||||
$border: $bmd-btn-border,
|
||||
$focus-border: $bmd-btn-focus-bg,
|
||||
$active-border: $bmd-btn-active-bg
|
||||
) {
|
||||
$background: $bmd-btn-bg;
|
||||
$focus-background: $bmd-btn-focus-bg;
|
||||
$active-background: $bmd-btn-active-bg;
|
||||
|
||||
@include bmd-button-variant($color,
|
||||
$background,
|
||||
$focus-background,
|
||||
$active-background,
|
||||
$border,
|
||||
$focus-border,
|
||||
$active-border);
|
||||
|
||||
// inverse color scheme
|
||||
.bg-inverse & {
|
||||
$focus-background: $bmd-inverse-btn-focus-bg;
|
||||
$focus-border: $bmd-inverse-btn-focus-bg;
|
||||
|
||||
$active-background: $bmd-inverse-btn-active-bg;
|
||||
$active-border: $bmd-inverse-btn-active-bg;
|
||||
|
||||
@include bmd-button-variant($color,
|
||||
$background,
|
||||
$focus-background,
|
||||
$active-background,
|
||||
$border,
|
||||
$focus-border,
|
||||
$active-border);
|
||||
}
|
||||
|
||||
// reverse the above for links
|
||||
&.btn-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-flat-button-color() {
|
||||
@include bmd-flat-button-variant($bmd-btn-color);
|
||||
|
||||
// flat bg with text color variations
|
||||
&.btn-primary {
|
||||
@include bmd-flat-button-variant($btn-primary-bg);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include bmd-flat-button-variant($btn-secondary-color);
|
||||
}
|
||||
&.btn-info {
|
||||
@include bmd-flat-button-variant($btn-info-bg);
|
||||
}
|
||||
&.btn-success {
|
||||
@include bmd-flat-button-variant($btn-success-bg);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include bmd-flat-button-variant($btn-warning-bg);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include bmd-flat-button-variant($btn-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-outline-button-color() {
|
||||
&.btn-outline,
|
||||
&.btn-outline-primary,
|
||||
&.btn-outline-secondary,
|
||||
&.btn-outline-info,
|
||||
&.btn-outline-success,
|
||||
&.btn-outline-warning,
|
||||
&.btn-outline-danger {
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
// flat bg with text and border color variations
|
||||
&.btn-outline {
|
||||
@include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color);
|
||||
}
|
||||
&.btn-outline-primary {
|
||||
@include bmd-flat-button-variant($btn-primary-bg, $btn-primary-bg, $btn-primary-bg, $btn-primary-bg);
|
||||
}
|
||||
&.btn-outline-secondary {
|
||||
@include bmd-flat-button-variant($btn-secondary-color, $btn-secondary-color, $btn-secondary-color, $btn-secondary-color);
|
||||
}
|
||||
&.btn-outline-info {
|
||||
@include bmd-flat-button-variant($btn-info-bg, $btn-info-bg, $btn-info-bg, $btn-info-bg);
|
||||
}
|
||||
&.btn-outline-success {
|
||||
@include bmd-flat-button-variant($btn-success-bg, $btn-success-bg, $btn-success-bg, $btn-success-bg);
|
||||
}
|
||||
&.btn-outline-warning {
|
||||
@include bmd-flat-button-variant($btn-warning-bg, $btn-warning-bg, $btn-warning-bg, $btn-warning-bg);
|
||||
}
|
||||
&.btn-outline-danger {
|
||||
@include bmd-flat-button-variant($btn-danger-bg, $btn-danger-bg, $btn-danger-bg, $btn-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-raised-button-variant($color, $background, $border) {
|
||||
// FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
|
||||
$focus-background: contrast-color(
|
||||
$background,
|
||||
darken($background, 3%),
|
||||
lighten($background, 3%)
|
||||
);
|
||||
//$focus-background: darken($background, 10%); // default bootstrap
|
||||
$focus-border: darken($border, 12%);
|
||||
|
||||
$active-background: $focus-background;
|
||||
//$active-background: darken($background, 17%);
|
||||
$active-border: darken($border, 25%);
|
||||
|
||||
@include bmd-button-variant($color,
|
||||
$background,
|
||||
$focus-background,
|
||||
$active-background,
|
||||
$border,
|
||||
$focus-border,
|
||||
$active-border);
|
||||
|
||||
@include shadow-2dp-color($background);
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover{
|
||||
// remove this line if you want black shadows
|
||||
@include button-shadow-color($background);
|
||||
}
|
||||
|
||||
&.btn-link{
|
||||
background-color: transparent;
|
||||
color: $background;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
background-color: transparent;
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin bmd-raised-button-color() {
|
||||
&.btn-primary {
|
||||
@include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
|
||||
}
|
||||
&.btn-info {
|
||||
@include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
|
||||
}
|
||||
&.btn-success {
|
||||
@include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
|
||||
}
|
||||
&.btn-rose {
|
||||
@include bmd-raised-button-variant($btn-rose-color, $btn-rose-bg, $btn-rose-border-color);
|
||||
}
|
||||
&,
|
||||
&.btn-default{
|
||||
@include bmd-raised-button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-social-buttons(){
|
||||
&.btn-facebook {
|
||||
@include bmd-raised-button-variant($white, $social-facebook, $social-facebook);
|
||||
}
|
||||
&.btn-twitter {
|
||||
@include bmd-raised-button-variant($white, $social-twitter, $social-twitter);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin undo-bs-tab-focus() {
|
||||
// clear out the tab-focus() from BS
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus,
|
||||
&.focus {
|
||||
//@include tab-focus();
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$opacity-gray-3: rgba(222,222,222, .3) !default;
|
||||
$opacity-gray-5: rgba(222,222,222, .5) !default;
|
||||
$opacity-gray-8: rgba(222,222,222, .8) !default;
|
||||
|
||||
|
||||
$opacity-5: rgba(255,255,255, .5) !default;
|
||||
$opacity-8: rgba(255,255,255, .8) !default;
|
||||
|
||||
$datepicker-color-days: rgba(255,255,255, .8) !default;
|
||||
$datepicker-color-old-new-days: rgba(255,255,255, .4) !default;
|
||||
|
||||
|
||||
$opacity-1: rgba(255,255,255, .1) !default;
|
||||
$opacity-2: rgba(255,255,255, .2) !default;
|
||||
|
||||
@mixin shadow-big-dash(){
|
||||
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3),
|
||||
0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-big-navbar(){
|
||||
box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3),
|
||||
0 3px 20px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-big-color($color){
|
||||
// new box shadow optimized for Tablets and Phones
|
||||
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
|
||||
0 7px 10px -5px rgba($color, 0.4)
|
||||
}
|
||||
|
||||
@mixin shadow-alert-color($color){
|
||||
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
|
||||
0 7px 10px -5px rgba($color, 0.4)
|
||||
}
|
||||
|
||||
@mixin btn-styles($btn-color) {
|
||||
|
||||
// remove this line if you want black shadows
|
||||
@include shadow-2dp-color($btn-color);
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover,
|
||||
.open > &.dropdown-toggle,
|
||||
.open > &.dropdown-toggle:focus,
|
||||
.open > &.dropdown-toggle:hover {
|
||||
background-color: $btn-color;
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover{
|
||||
// remove this line if you want black shadows
|
||||
@include button-shadow-color($btn-color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-simple{
|
||||
background-color: transparent;
|
||||
color: $btn-color;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
background-color: transparent;
|
||||
color: $btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
// Scales for responsive SVG containers
|
||||
$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
|
||||
$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
|
||||
|
||||
$ct-class-chart: ct-chart !default;
|
||||
$ct-class-chart-line: ct-chart-line !default;
|
||||
$ct-class-chart-bar: ct-chart-bar !default;
|
||||
$ct-class-horizontal-bars: ct-horizontal-bars !default;
|
||||
$ct-class-chart-pie: ct-chart-pie !default;
|
||||
$ct-class-chart-donut: ct-chart-donut !default;
|
||||
$ct-class-label: ct-label !default;
|
||||
$ct-class-series: ct-series !default;
|
||||
$ct-class-line: ct-line !default;
|
||||
$ct-class-point: ct-point !default;
|
||||
$ct-class-area: ct-area !default;
|
||||
$ct-class-bar: ct-bar !default;
|
||||
$ct-class-slice-pie: ct-slice-pie !default;
|
||||
$ct-class-slice-donut: ct-slice-donut !default;
|
||||
$ct-class-grid: ct-grid !default;
|
||||
$ct-class-slice-donut-solid: ct-slice-donut-solid !default;
|
||||
$ct-class-grid-background: ct-grid-background !default;
|
||||
$ct-class-vertical: ct-vertical !default;
|
||||
$ct-class-horizontal: ct-horizontal !default;
|
||||
$ct-class-start: ct-start !default;
|
||||
$ct-class-end: ct-end !default;
|
||||
|
||||
// Class names to be used when generating CSS
|
||||
|
||||
|
||||
|
||||
// Container ratio
|
||||
$ct-container-ratio: (1/1.618) !default;
|
||||
|
||||
// Text styles for labels
|
||||
$ct-text-color: rgba(0, 0, 0, 0.4) !default;
|
||||
$ct-text-size: 1.3rem !default;
|
||||
$ct-text-align: flex-start !default;
|
||||
$ct-text-justify: flex-start !default;
|
||||
$ct-text-line-height: 1;
|
||||
|
||||
// Grid styles
|
||||
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
|
||||
$ct-grid-dasharray: 2px !default;
|
||||
$ct-grid-width: 1px !default;
|
||||
$ct-grid-background-fill: none !default;
|
||||
|
||||
// Line chart properties
|
||||
$ct-line-width: 4px !default;
|
||||
$ct-line-dasharray: false !default;
|
||||
$ct-point-size: 10px !default;
|
||||
|
||||
// Line chart point, can be either round or square
|
||||
$ct-point-shape: round !default;
|
||||
// Area fill transparency between 0 and 1
|
||||
$ct-area-opacity: 0.1 !default;
|
||||
|
||||
// Bar chart bar width
|
||||
$ct-bar-width: 10px !default;
|
||||
|
||||
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
|
||||
$ct-donut-width: 60px !default;
|
||||
|
||||
// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
|
||||
// should set this property to false
|
||||
$ct-include-classes: true !default;
|
||||
|
||||
// If this is set to true the CSS will contain colored series. You can extend or change the color with the
|
||||
// properties below
|
||||
$ct-include-colored-series: $ct-include-classes !default;
|
||||
|
||||
// If set to true this will include all responsive container variations using the scales defined at the top of the script
|
||||
$ct-include-alternative-responsive-containers: $ct-include-classes !default;
|
||||
|
||||
// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
|
||||
$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
|
||||
$ct-series-colors: (
|
||||
$brand-info,
|
||||
$brand-danger,
|
||||
$brand-warning,
|
||||
$brand-primary,
|
||||
$brand-success,
|
||||
$font-background-light-grey,
|
||||
$gray-color,
|
||||
$social-google,
|
||||
$social-tumblr,
|
||||
$social-youtube,
|
||||
$social-twitter,
|
||||
$social-pinterest,
|
||||
$social-behance,
|
||||
#6188e2,
|
||||
#a748ca
|
||||
) !default;
|
||||
@@ -0,0 +1,138 @@
|
||||
@mixin shadow-big(){
|
||||
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 4),
|
||||
0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-big-image(){
|
||||
// new box shadow optimized for Tables and Phones
|
||||
box-shadow: 0 5px 15px -8px rgba(0, 0, 0, $bmd-shadow-ambient-opacity * 2),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-big-navbar(){
|
||||
box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3),
|
||||
0 3px 20px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
// @mixin shadow-big-color($color){
|
||||
// // new box shadow optimized for Tables and Phones
|
||||
// box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2),
|
||||
// 0 13px 24px -11px rgba($color, 0.60);
|
||||
// }
|
||||
|
||||
@mixin shadow-small-color($color){
|
||||
// new box shadow optimized for Tablets and Phones
|
||||
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
|
||||
0 7px 10px -5px rgba($color, 0.4)
|
||||
}
|
||||
|
||||
@mixin shadow-navbar-color($color){
|
||||
// new box shadow optimized for Tablets and Phones
|
||||
|
||||
@if($color == $white-color) {
|
||||
box-shadow: 0 4px 18px 0px rgba(0, 0, 0, .12),
|
||||
0 7px 10px -5px rgba(0,0,0, 0.15);
|
||||
}@else{
|
||||
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
|
||||
0 7px 12px -5px rgba($color, 0.46);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shadow-2dp(){
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
|
||||
0 3px 1px -2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 1px 5px 0 rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-4dp(){
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
|
||||
0 1px 10px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 2px 4px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-6dp(){
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
|
||||
0 1px 18px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 3px 5px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-8dp(){
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 5px 5px -3px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
|
||||
@mixin shadow-16dp(){
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
|
||||
0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp-color($color){
|
||||
box-shadow: 0 2px 2px 0 rgba($color, $bmd-shadow-penumbra-opacity),
|
||||
0 3px 1px -2px rgba($color, $bmd-shadow-umbra-opacity),
|
||||
0 1px 5px 0 rgba($color, $bmd-shadow-ambient-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-4dp-color($color){
|
||||
box-shadow: 0 4px 5px 0 rgba($color, $bmd-shadow-penumbra-opacity),
|
||||
0 1px 10px 0 rgba($color, $bmd-shadow-ambient-opacity),
|
||||
0 2px 4px -1px rgba($color, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-8dp-color($color){
|
||||
box-shadow: 0 8px 10px 1px rgba($color, $bmd-shadow-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 5px 5px -3px rgba($color, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp-color($color){
|
||||
box-shadow: 0 16px 24px 2px rgba($color, $bmd-shadow-penumbra-opacity),
|
||||
0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin button-shadow-color($color){
|
||||
box-shadow: 0 14px 26px -12px rgba($color, $bmd-shadow-penumbra-opacity * 3),
|
||||
0 4px 23px 0px rgba(0,0,0, $bmd-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-z-1(){
|
||||
box-shadow:
|
||||
0 1px 6px 0 rgba(0, 0, 0, 0.12),
|
||||
0 1px 6px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@mixin shadow-z-1-hover(){
|
||||
box-shadow:
|
||||
0 5px 11px 0 rgba(0, 0, 0, 0.18),
|
||||
0 4px 15px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@mixin shadow-z-2(){
|
||||
box-shadow:
|
||||
0 8px 17px 0 rgba(0, 0, 0, 0.2),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-3(){
|
||||
box-shadow:
|
||||
0 12px 15px 0 rgba(0, 0, 0, 0.24),
|
||||
0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-4(){
|
||||
box-shadow:
|
||||
0 16px 28px 0 rgba(0, 0, 0, 0.22),
|
||||
0 25px 55px 0 rgba(0, 0, 0, 0.21);
|
||||
}
|
||||
|
||||
@mixin shadow-z-5(){
|
||||
box-shadow:
|
||||
0 27px 24px 0 rgba(0, 0, 0, 0.2),
|
||||
0 40px 77px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
253
staticfiles/assets/scss/material-dashboard/mixins/_drawer.scss
Normal file
253
staticfiles/assets/scss/material-dashboard/mixins/_drawer.scss
Normal file
@@ -0,0 +1,253 @@
|
||||
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
|
||||
|
||||
@mixin bmd-drawer-x-out($size) {
|
||||
@each $side, $abbrev in (left: l, right: r) {
|
||||
.bmd-drawer-f-#{$abbrev} {
|
||||
> .bmd-layout-drawer {
|
||||
// position
|
||||
top: 0;
|
||||
#{$side}: 0;
|
||||
|
||||
width: $size;
|
||||
height: 100%;
|
||||
|
||||
@if $side == left {
|
||||
transform: translateX(
|
||||
-$size - 10px
|
||||
); // initial position of drawer (closed), way off screen
|
||||
} @else {
|
||||
transform: translateX(
|
||||
$size + 10px
|
||||
); // initial position of drawer (closed), way off screen
|
||||
}
|
||||
}
|
||||
|
||||
> .bmd-layout-header,
|
||||
> .bmd-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-drawer-y-out($size) {
|
||||
@each $side, $abbrev in (top: t, bottom: b) {
|
||||
.bmd-drawer-f-#{$abbrev} {
|
||||
> .bmd-layout-drawer {
|
||||
// position
|
||||
#{$side}: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: $size;
|
||||
|
||||
@if $side == top {
|
||||
transform: translateY(
|
||||
-$size - 10px
|
||||
); // initial position of drawer (closed), way off screen
|
||||
} @else {
|
||||
transform: translateY(
|
||||
$size + 10px
|
||||
); // initial position of drawer (closed), way off screen
|
||||
}
|
||||
}
|
||||
|
||||
> .bmd-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: "&-#{$breakpoint}#{$suffix}";
|
||||
@if $breakpoint == xs {
|
||||
$name: "&";
|
||||
}
|
||||
@return $name;
|
||||
}
|
||||
|
||||
@mixin bmd-drawer-x-in($size) {
|
||||
@each $side, $abbrev in (left: l, right: r) {
|
||||
.bmd-drawer-f-#{$abbrev} {
|
||||
// Push - drawer will push the header and content (default behavior)
|
||||
> .bmd-layout-header {
|
||||
width: calc(100% - #{$size});
|
||||
margin-#{$side}: $size;
|
||||
}
|
||||
|
||||
> .bmd-layout-drawer {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
> .bmd-layout-content {
|
||||
margin-#{$side}: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-drawer-y-in($size) {
|
||||
@each $side, $abbrev in (top: t, bottom: b) {
|
||||
.bmd-drawer-f-#{$abbrev} {
|
||||
// 1. Push - drawer will push the header or content
|
||||
> .bmd-layout-header {
|
||||
@if $side == top {
|
||||
// only add margin-top on a header when the drawer is at the top
|
||||
margin-#{$side}: $size;
|
||||
}
|
||||
}
|
||||
|
||||
> .bmd-layout-drawer {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
> .bmd-layout-content {
|
||||
@if $side == bottom {
|
||||
// only add margin-bottom on content when the drawer is at the bottom
|
||||
margin-#{$side}: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// breakpoint based open to a particular size
|
||||
@mixin bmd-drawer-x-in-up($size, $breakpoint) {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: bmd-drawer-breakpoint-name($breakpoint, "-up");
|
||||
|
||||
.bmd-drawer-in {
|
||||
#{unquote($name)} {
|
||||
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
|
||||
|
||||
@if $breakpoint == xs {
|
||||
// bmd-drawer-in marker class (non-responsive)
|
||||
@include bmd-drawer-x-in($size);
|
||||
} @else {
|
||||
// responsive class
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
// bmd-drawer-f-(left and right) styles
|
||||
@include bmd-drawer-x-in($size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// breakpoint based open to a particular size
|
||||
@mixin bmd-drawer-y-in-up($size, $breakpoint) {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: bmd-drawer-breakpoint-name($breakpoint, "-up");
|
||||
|
||||
.bmd-drawer-in {
|
||||
#{unquote($name)} {
|
||||
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
|
||||
|
||||
@if $breakpoint == xs {
|
||||
// bmd-drawer-in marker class (non-responsive)
|
||||
@include bmd-drawer-y-in($size);
|
||||
} @else {
|
||||
// responsive class
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
// bmd-drawer-f-(left and right) styles
|
||||
@include bmd-drawer-y-in($size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-drawer-x-overlay() {
|
||||
@include bmd-layout-backdrop-in();
|
||||
|
||||
@each $side, $abbrev in (left: l, right: r) {
|
||||
.bmd-drawer-f-#{$abbrev} {
|
||||
> .bmd-layout-header,
|
||||
> .bmd-layout-content {
|
||||
width: 100%;
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-drawer-y-overlay() {
|
||||
@include bmd-layout-backdrop-in();
|
||||
|
||||
@each $side, $abbrev in (top: t, bottom: b) {
|
||||
.bmd-drawer-f-#{$abbrev} {
|
||||
> .bmd-layout-header {
|
||||
@if $side == top {
|
||||
// only add margin-top on a header when the drawer is at the top
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .bmd-layout-content {
|
||||
@if $side == bottom {
|
||||
// only add margin-bottom on content when the drawer is at the bottom
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay - left/right responsive overlay classes and marker class
|
||||
@mixin bmd-drawer-x-overlay-down($breakpoint) {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: bmd-drawer-breakpoint-name($breakpoint, "-down");
|
||||
|
||||
.bmd-drawer-overlay {
|
||||
#{unquote($name)} {
|
||||
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
|
||||
|
||||
// x - left/right
|
||||
|
||||
@if $breakpoint == xs {
|
||||
// overlay marker class (non-responsive)
|
||||
|
||||
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
|
||||
// responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
|
||||
&.bmd-drawer-overlay {
|
||||
@include bmd-drawer-x-overlay();
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
// overlay responsive class
|
||||
@include bmd-drawer-x-overlay();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay - top/bottom responsive overlay classes and marker class
|
||||
@mixin bmd-drawer-y-overlay-down($breakpoint) {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: bmd-drawer-breakpoint-name($breakpoint, "-down");
|
||||
|
||||
.bmd-drawer-overlay {
|
||||
#{unquote($name)} {
|
||||
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
|
||||
//// y - top/bottom
|
||||
|
||||
@if $breakpoint == xs {
|
||||
// overlay marker class (non-responsive)
|
||||
|
||||
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
|
||||
// responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
|
||||
&.bmd-drawer-overlay {
|
||||
@include bmd-drawer-y-overlay();
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
// overlay responsive class
|
||||
@include bmd-drawer-y-overlay();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
394
staticfiles/assets/scss/material-dashboard/mixins/_forms.scss
Normal file
394
staticfiles/assets/scss/material-dashboard/mixins/_forms.scss
Normal file
@@ -0,0 +1,394 @@
|
||||
@mixin bmd-disabled() {
|
||||
fieldset[disabled][disabled] &,
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
@mixin material-placeholder() {
|
||||
&::-moz-placeholder {@content; } // Firefox
|
||||
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
||||
}
|
||||
|
||||
@mixin bmd-selection-color() {
|
||||
.radio label,
|
||||
.radio-inline,
|
||||
.checkbox label,
|
||||
.checkbox-inline,
|
||||
.switch label {
|
||||
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
||||
//color: $bmd-label-color;
|
||||
|
||||
&,
|
||||
.is-focused & {
|
||||
// form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
|
||||
color: $bmd-label-color;
|
||||
|
||||
// correct the above focus color for disabled items
|
||||
label:has(input[type=radio][disabled]),
|
||||
// css 4 which is unlikely to work for a while, but no other pure css way.
|
||||
label:has(input[type=checkbox][disabled]),
|
||||
// css 4
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $bmd-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style for disabled inputs OLD, use color approach with opacity built in, see radios
|
||||
//fieldset[disabled] &,
|
||||
//fieldset[disabled] & input[type=checkbox],
|
||||
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
|
||||
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
|
||||
//input[type=checkbox][disabled] + .bmd-radio-outer-circle {
|
||||
// opacity: 0.5;
|
||||
//}
|
||||
}
|
||||
|
||||
@mixin bmd-radio-color($color) {
|
||||
&::after {
|
||||
border-color: $color;
|
||||
}
|
||||
&::before {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin bmd-form-color($label-color, $label-color-focus, $border-color, $line-color) {
|
||||
[class^='bmd-label'],
|
||||
[class*=' bmd-label'] {
|
||||
color: $label-color;
|
||||
}
|
||||
|
||||
// override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
|
||||
.form-control {
|
||||
// underline animation color on focus
|
||||
$underline-background-image: linear-gradient(
|
||||
to top,
|
||||
$label-color-focus 2px,
|
||||
fade-out($label-color-focus, 1) 2px
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
$line-color 1px,
|
||||
fade-out($line-color, 1) 1px
|
||||
);
|
||||
$underline-background-image-invalid: linear-gradient(
|
||||
to top,
|
||||
$bmd-invalid-underline 2px,
|
||||
fade-out($bmd-invalid-underline, 1) 2px
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
$line-color 1px,
|
||||
fade-out($line-color, 1) 1px
|
||||
);
|
||||
$underline-background-image-readonly: linear-gradient(
|
||||
to top,
|
||||
$bmd-readonly-underline 1px,
|
||||
fade-out($bmd-readonly-underline, 1) 1px
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
$line-color 1px,
|
||||
fade-out($line-color, 1) 1px
|
||||
);
|
||||
$underline-background-image-disabled: linear-gradient(
|
||||
to right,
|
||||
$line-color 0%,
|
||||
$line-color 30%,
|
||||
transparent 30%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
// bg image is always there, we just need to reveal it
|
||||
&,
|
||||
.is-focused & {
|
||||
background-image: $underline-background-image;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
background-image: $underline-background-image-invalid;
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
background-image: $underline-background-image-readonly;
|
||||
}
|
||||
|
||||
@include bmd-disabled() {
|
||||
background-image: $underline-background-image-disabled;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 3px 1px;
|
||||
}
|
||||
|
||||
// allow underline focus image and validation images to coexist
|
||||
&.form-control-success {
|
||||
&,
|
||||
.is-focused & {
|
||||
background-image: $underline-background-image, $form-icon-success;
|
||||
}
|
||||
}
|
||||
&.form-control-warning {
|
||||
&,
|
||||
.is-focused & {
|
||||
background-image: $underline-background-image, $form-icon-warning;
|
||||
}
|
||||
}
|
||||
&.form-control-danger {
|
||||
&,
|
||||
.is-focused & {
|
||||
background-image: $underline-background-image, $form-icon-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// may or may not be a form-group or bmd-form-group
|
||||
.is-focused {
|
||||
// on focus set borders and labels to the validation color
|
||||
|
||||
// Use the BS provided mixin for the bulk of the color
|
||||
@include form-validation-state("valid", $label-color);
|
||||
|
||||
[class^='bmd-label'],
|
||||
[class*=' bmd-label'] {
|
||||
color: $label-color-focus;
|
||||
}
|
||||
|
||||
.bmd-label-placeholder {
|
||||
color: $label-color; // keep the placeholder color
|
||||
}
|
||||
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
// Set validation states also for addons
|
||||
//.input-group-addon {
|
||||
// border-color: $border-color;
|
||||
//}
|
||||
|
||||
.bmd-help {
|
||||
color: $bmd-label-color-inner-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// must be broken out for reuse - webkit selector breaks firefox
|
||||
@mixin bmd-label-static($label-top, $static-font-size) {
|
||||
top: $label-top;
|
||||
left: 0;
|
||||
// must repeat because the previous (more generic) selectors
|
||||
font-size: $static-font-size;
|
||||
}
|
||||
|
||||
@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
|
||||
$variant-input-height: (
|
||||
($font-size * $variant-line-height) + ($variant-padding-y * 2)
|
||||
);
|
||||
// $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
|
||||
$floating-font-size: 0.6875rem;
|
||||
$static-font-size: 0.875rem;
|
||||
$help-font-size: ($bmd-help-size-ratio * $font-size);
|
||||
|
||||
$label-static-top: $label-top-margin;
|
||||
$label-placeholder-top: $label-top-margin + $static-font-size +
|
||||
$variant-padding-y;
|
||||
|
||||
//@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
|
||||
|
||||
//Label height: 72dp
|
||||
//Padding above label text: 16dp
|
||||
//Padding between label and input text: 8dp
|
||||
//Padding below input text (including divider): 16dp
|
||||
//Padding below text divider: 8dp
|
||||
|
||||
// @if $form-group-context {
|
||||
// // Create a space at the top of the bmd-form-group for the label.
|
||||
// // The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding).
|
||||
// padding-top: ($label-top-margin + $static-font-size);
|
||||
// // note: bottom-margin of this is determined by $spacer. @see _spacer.scss
|
||||
// //margin-bottom: (1.5 * $help-font-size);
|
||||
// }
|
||||
|
||||
// TODO: remove this when known stable. https://github.com/FezVrasta/bootstrap-material-design/issues/849
|
||||
//@else {
|
||||
//
|
||||
// // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that
|
||||
// // any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups
|
||||
// .radio,
|
||||
// label.radio-inline,
|
||||
// .checkbox,
|
||||
// label.checkbox-inline,
|
||||
// .switch {
|
||||
// padding-top: $spacer-y;
|
||||
// }
|
||||
//}
|
||||
|
||||
// Set all line-heights preferably to 1 so that we can space out everything manually without additional added space
|
||||
// from the default line-height of 1.5
|
||||
.form-control,
|
||||
label,
|
||||
input::placeholder {
|
||||
line-height: $variant-line-height + 0.1;
|
||||
}
|
||||
|
||||
label{
|
||||
color: $mdb-input-placeholder-color;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
label.radio-inline,
|
||||
.checkbox label,
|
||||
label.checkbox-inline,
|
||||
.switch label {
|
||||
line-height: $line-height-base; // keep the same line height for radios and checkboxes
|
||||
}
|
||||
|
||||
// Note: this may be inside or outside a form-group, may be .bmd-form-group.bmd-form-group-sm or .bmd-form-group.bmd-form-group-lg
|
||||
// input::placeholder {
|
||||
// font-size: $font-size;
|
||||
// }
|
||||
|
||||
// generic labels used anywhere in the form
|
||||
.checkbox label,
|
||||
.radio label,
|
||||
label {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// floating/placeholder default (no focus)
|
||||
.bmd-label-floating,
|
||||
.bmd-label-placeholder {
|
||||
//@debug "top: #{$label-as-placeholder-top}";
|
||||
top: $label-placeholder-top - 1.7; // place the floating label to look like a placeholder with input padding
|
||||
}
|
||||
|
||||
// floating focused/filled will look like static
|
||||
.is-focused,
|
||||
.is-filled {
|
||||
.bmd-label-floating {
|
||||
@include bmd-label-static($label-static-top - 2, $floating-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
// static
|
||||
.bmd-label-static {
|
||||
@include bmd-label-static($label-static-top - 0.65, $static-font-size);
|
||||
}
|
||||
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
|
||||
//input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary
|
||||
// @include bmd-label-static($label-top, $static-font-size, $static-line-height);
|
||||
//}
|
||||
|
||||
.bmd-help {
|
||||
margin-top: 0; // allow the input margin to set-off the top of the help-block
|
||||
font-size: $help-font-size;
|
||||
}
|
||||
|
||||
// validation icon placement
|
||||
.form-control {
|
||||
&.form-control-success,
|
||||
&.form-control-warning,
|
||||
&.form-control-danger {
|
||||
$icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5);
|
||||
background-size: $bmd-form-control-bg-size, $icon-bg-size;
|
||||
|
||||
&,
|
||||
&:focus,
|
||||
.bmd-form-group.is-focused & {
|
||||
padding-right: ($input-padding-x * 3);
|
||||
background-repeat: $bmd-form-control-bg-repeat-y, no-repeat;
|
||||
background-position: $bmd-form-control-bg-position,
|
||||
center right ($variant-input-height * .25);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
.bmd-form-group.is-focused & {
|
||||
background-size: $bmd-form-control-bg-size-active, $icon-bg-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-label-color-toggle-focus(){
|
||||
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
||||
.form-group.is-focused & {
|
||||
color: $mdb-label-color;
|
||||
|
||||
// on focus just darken the specific labels, do not turn them to the brand-primary
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $mdb-label-color-toggle-focus;
|
||||
}
|
||||
|
||||
// correct the above focus color for disabled items
|
||||
fieldset[disabled] & {
|
||||
color: $mdb-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation($value){
|
||||
-webkit-animation: $value;
|
||||
-moz-animation: $value;
|
||||
-o-animation: $value;
|
||||
-ms-animation: $value;
|
||||
animation: $value;
|
||||
}
|
||||
|
||||
@mixin transform-scale3d($value){
|
||||
-webkit-transform: scale3d($value);
|
||||
-moz-transform: scale3d($value);
|
||||
-o-transform: scale3d($value);
|
||||
-ms-transform: scale3d($value);
|
||||
transform: scale3d($value);
|
||||
}
|
||||
|
||||
@mixin create-colored-tags(){
|
||||
&.tag-primary{
|
||||
@include tag-color($brand-primary);
|
||||
}
|
||||
&.tag-info {
|
||||
@include tag-color($brand-info);
|
||||
}
|
||||
&.tag-success{
|
||||
@include tag-color($brand-success);
|
||||
}
|
||||
&.tag-warning{
|
||||
@include tag-color($brand-warning);
|
||||
}
|
||||
&.tag-danger{
|
||||
@include tag-color($brand-danger);
|
||||
}
|
||||
&.tag-rose{
|
||||
@include tag-color($brand-rose);
|
||||
}
|
||||
}
|
||||
@mixin tag-color ($color){
|
||||
.tag{
|
||||
background-color: $color;
|
||||
color: $white-color;
|
||||
.tagsinput-remove-link{
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
.tagsinput-add{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@mixin bmd-hover-focus-active {
|
||||
// add the .active to the whole mix of hover-focus-active
|
||||
&.active {
|
||||
@content;
|
||||
}
|
||||
@include hover-focus-active() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value){
|
||||
-webkit-transform: translate3d(0,$value, 0);
|
||||
-moz-transform: translate3d(0, $value, 0);
|
||||
-o-transform: translate3d(0, $value, 0);
|
||||
-ms-transform: translate3d(0, $value, 0);
|
||||
transform: translate3d(0, $value, 0);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode
|
||||
@mixin bmd-layout-backdrop-in() {
|
||||
> .bmd-layout-backdrop {
|
||||
.in {
|
||||
visibility: visible;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@supports (pointer-events: auto) {
|
||||
&.in {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@mixin navbar-colors($color, $link-color) {
|
||||
color: $link-color;
|
||||
background-color: $color !important;
|
||||
@include shadow-navbar-color($color);
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus{
|
||||
@include shadow-small-color($color);
|
||||
background-color: $color;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
.navbar-toggler{
|
||||
.navbar-toggler-icon{
|
||||
background-color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
61
staticfiles/assets/scss/material-dashboard/mixins/_navs.scss
Normal file
61
staticfiles/assets/scss/material-dashboard/mixins/_navs.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
@mixin bmd-tabs-color($color, $active-color, $active-border, $disabled-link-color, $disabled-link-hover-color) {
|
||||
.nav-link {
|
||||
color: $color;
|
||||
|
||||
&.active {
|
||||
color: $active-color;
|
||||
border-color: $active-border;
|
||||
@include hover-focus {
|
||||
border-color: $active-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state lightens text and removes hover/tab effects
|
||||
&.disabled {
|
||||
color: $disabled-link-color;
|
||||
|
||||
@include plain-hover-focus {
|
||||
color: $disabled-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin set-wizard-color($color) {
|
||||
|
||||
.moving-tab{
|
||||
background-color: $color;
|
||||
@include shadow-big-color($color);
|
||||
}
|
||||
|
||||
.picture{
|
||||
&:hover{
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.choice{
|
||||
&:hover,
|
||||
&.active{
|
||||
.icon{
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material{
|
||||
.check{
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.radio input[type=radio]:checked ~ .check {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
.radio input[type=radio]:checked ~ .circle {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@mixin sidebar-background-color($background-color, $font-color){
|
||||
.nav{
|
||||
.nav-item{
|
||||
.nav-link{
|
||||
color: $font-color;
|
||||
}
|
||||
i{
|
||||
color: rgba($font-color, .8);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover{
|
||||
[data-toggle="collapse"]{
|
||||
color: $font-color;
|
||||
i{
|
||||
color: rgba($font-color, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user{
|
||||
a{
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
.simple-text{
|
||||
color: $font-color;
|
||||
}
|
||||
.sidebar-background:after{
|
||||
background: $background-color;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-active-color($font-color){
|
||||
.nav{
|
||||
.nav-item{
|
||||
&.active > a:not([data-toggle="collapse"]){
|
||||
color: $font-color;
|
||||
opacity: 1;
|
||||
@include shadow-big-color($font-color);
|
||||
|
||||
i{
|
||||
color: rgba($font-color, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin set-background-color-button($color){
|
||||
|
||||
li.active > a{
|
||||
background-color: $color;
|
||||
@include shadow-big-color($color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// Opacity
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: #{alpha(opacity=$opacity-ie)};
|
||||
}
|
||||
|
||||
@mixin black-filter($opacity){
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: rgba(17,17,17,$opacity);
|
||||
display: block;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
}
|
||||
15
staticfiles/assets/scss/material-dashboard/mixins/_type.scss
Normal file
15
staticfiles/assets/scss/material-dashboard/mixins/_type.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@mixin headings() {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 14sp font
|
||||
%std-font {
|
||||
font-size: .875rem;
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
@function calc-top($line-height-base, $font-size, $component-height) {
|
||||
@return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height
|
||||
}
|
||||
|
||||
// Emulate the less #contrast function
|
||||
// TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of fullpalette)
|
||||
// contrast-color and brightness borrowed from compass
|
||||
// Copyright (c) 2009-2014 Christopher M. Eppstein
|
||||
// Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown
|
||||
@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
|
||||
@if $threshold {
|
||||
// Deprecated in Compass 0.13
|
||||
@warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
|
||||
}
|
||||
|
||||
@if $color == null {
|
||||
@return null;
|
||||
} @else {
|
||||
$color-brightness: brightness($color);
|
||||
$dark-text-brightness: brightness($dark);
|
||||
$light-text-brightness: brightness($light);
|
||||
@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
|
||||
}
|
||||
}
|
||||
|
||||
@function brightness($color) {
|
||||
@if type-of($color) == color {
|
||||
@return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
|
||||
} @else {
|
||||
@return unquote("brightness(#{$color})");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin linear-gradient($color1, $color2){
|
||||
background: $color1; /* For browsers that do not support gradients */
|
||||
background: -webkit-linear-gradient(60deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
|
||||
background: -o-linear-gradient(60deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
|
||||
background: -moz-linear-gradient(60deg, $color1, $color2); /* For Firefox 3.6 to 15 */
|
||||
background: linear-gradient(60deg, $color1 , $color2); /* Standard syntax */
|
||||
}
|
||||
|
||||
@mixin radial-gradient($extern-color, $center-color){
|
||||
background: $extern-color;
|
||||
background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
|
||||
background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
|
||||
background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
|
||||
background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
|
||||
background-size: 550% 450%;
|
||||
}
|
||||
@mixin badges-color($color){
|
||||
.tag{
|
||||
background-color: $color;
|
||||
color: $white-color;
|
||||
|
||||
.tagsinput-remove-link{
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
// .tagsinput-add{
|
||||
// color: $color;
|
||||
// }
|
||||
}
|
||||
@mixin create-colored-badges(){
|
||||
|
||||
&.primary-badge{
|
||||
@include badges-color($brand-primary);
|
||||
}
|
||||
&.info-badge {
|
||||
@include badges-color($brand-info);
|
||||
}
|
||||
&.success-badge{
|
||||
@include badges-color($brand-success);
|
||||
}
|
||||
&.warning-badge{
|
||||
@include badges-color($brand-warning);
|
||||
}
|
||||
&.danger-badge{
|
||||
@include badges-color($brand-danger);
|
||||
}
|
||||
&.rose-badge{
|
||||
@include badges-color($brand-rose);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin badge-color() {
|
||||
&.badge-primary{
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
&.badge-info {
|
||||
background-color: $brand-info;
|
||||
}
|
||||
&.badge-success{
|
||||
background-color: $brand-success;
|
||||
}
|
||||
&.badge-warning{
|
||||
background-color: $brand-warning;
|
||||
}
|
||||
&.badge-danger{
|
||||
background-color: $brand-danger;
|
||||
}
|
||||
&.badge-rose{
|
||||
background-color: $brand-rose;
|
||||
}
|
||||
&.badge-default{
|
||||
background-color: $gray-light;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$opacity-gray-3: rgba(222,222,222, .3) !default;
|
||||
$opacity-gray-5: rgba(222,222,222, .5) !default;
|
||||
$opacity-gray-8: rgba(222,222,222, .8) !default;
|
||||
|
||||
$opacity-5: rgba(255,255,255, .5) !default;
|
||||
$opacity-8: rgba(255,255,255, .8) !default;
|
||||
|
||||
$opacity-1: rgba(255,255,255, .1) !default;
|
||||
$opacity-2: rgba(255,255,255, .2) !default;
|
||||
|
||||
//== Components
|
||||
//
|
||||
|
||||
$topbar-x: topbar-x !default;
|
||||
$topbar-back: topbar-back !default;
|
||||
$bottombar-x: bottombar-x !default;
|
||||
$bottombar-back: bottombar-back !default;
|
||||
|
||||
// Sidebar variables
|
||||
$sidebar-width: calc(100% - 260px) !default;
|
||||
$sidebar-mini-width: calc(100% - 80px) !default;
|
||||
@@ -0,0 +1,201 @@
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select; // IE10+
|
||||
user-select: $select;
|
||||
}
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
|
||||
@mixin transition-all($time, $type){
|
||||
-webkit-transition: all $time $type;
|
||||
-moz-transition: all $time $type;
|
||||
-o-transition: all $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin transform-scale($value){
|
||||
-webkit-transform: scale($value);
|
||||
-moz-transform: scale($value);
|
||||
-o-transform: scale($value);
|
||||
-ms-transform: scale($value);
|
||||
transform: scale($value);
|
||||
}
|
||||
|
||||
@mixin transform-translate-x($value){
|
||||
-webkit-transform: translate3d($value, 0, 0);
|
||||
-moz-transform: translate3d($value, 0, 0);
|
||||
-o-transform: translate3d($value, 0, 0);
|
||||
-ms-transform: translate3d($value, 0, 0);
|
||||
transform: translate3d($value, 0, 0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value){
|
||||
-webkit-transform: translate3d(0,$value,0);
|
||||
-moz-transform: translate3d(0,$value,0);
|
||||
-o-transform: translate3d(0,$value,0);
|
||||
-ms-transform: translate3d(0,$value,0);
|
||||
transform: translate3d(0,$value,0);
|
||||
}
|
||||
|
||||
@mixin transform-origin($coordinates){
|
||||
-webkit-transform-origin: $coordinates;
|
||||
-moz-transform-origin: $coordinates;
|
||||
-o-transform-origin: $coordinates;
|
||||
-ms-transform-origin: $coordinates;
|
||||
transform-origin: $coordinates;
|
||||
}
|
||||
|
||||
@mixin radial-gradient($extern-color, $center-color){
|
||||
background: $extern-color;
|
||||
background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
|
||||
background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
|
||||
background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
|
||||
background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
|
||||
background-size: 550% 450%;
|
||||
}
|
||||
|
||||
@mixin vertical-align {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin rotate-180(){
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@mixin bar-animation($type){
|
||||
-webkit-animation: $type 500ms linear 0s;
|
||||
-moz-animation: $type 500ms linear 0s;
|
||||
animation: $type 500ms 0s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@mixin topbar-x-rotation(){
|
||||
@keyframes topbar-x {
|
||||
0% {top: 0px; transform: rotate(0deg); }
|
||||
45% {top: 6px; transform: rotate(145deg); }
|
||||
75% {transform: rotate(130deg); }
|
||||
100% {transform: rotate(135deg); }
|
||||
}
|
||||
@-webkit-keyframes topbar-x {
|
||||
0% {top: 0px; -webkit-transform: rotate(0deg); }
|
||||
45% {top: 6px; -webkit-transform: rotate(145deg); }
|
||||
75% {-webkit-transform: rotate(130deg); }
|
||||
100% { -webkit-transform: rotate(135deg); }
|
||||
}
|
||||
@-moz-keyframes topbar-x {
|
||||
0% {top: 0px; -moz-transform: rotate(0deg); }
|
||||
45% {top: 6px; -moz-transform: rotate(145deg); }
|
||||
75% {-moz-transform: rotate(130deg); }
|
||||
100% { -moz-transform: rotate(135deg); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin topbar-back-rotation(){
|
||||
@keyframes topbar-back {
|
||||
0% { top: 6px; transform: rotate(135deg); }
|
||||
45% { transform: rotate(-10deg); }
|
||||
75% { transform: rotate(5deg); }
|
||||
100% { top: 0px; transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes topbar-back {
|
||||
0% { top: 6px; -webkit-transform: rotate(135deg); }
|
||||
45% { -webkit-transform: rotate(-10deg); }
|
||||
75% { -webkit-transform: rotate(5deg); }
|
||||
100% { top: 0px; -webkit-transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-moz-keyframes topbar-back {
|
||||
0% { top: 6px; -moz-transform: rotate(135deg); }
|
||||
45% { -moz-transform: rotate(-10deg); }
|
||||
75% { -moz-transform: rotate(5deg); }
|
||||
100% { top: 0px; -moz-transform: rotate(0); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-x-rotation(){
|
||||
@keyframes bottombar-x {
|
||||
0% {bottom: 0px; transform: rotate(0deg);}
|
||||
45% {bottom: 6px; transform: rotate(-145deg);}
|
||||
75% {transform: rotate(-130deg);}
|
||||
100% {transform: rotate(-135deg);}
|
||||
}
|
||||
@-webkit-keyframes bottombar-x {
|
||||
0% {bottom: 0px; -webkit-transform: rotate(0deg);}
|
||||
45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
|
||||
75% {-webkit-transform: rotate(-130deg);}
|
||||
100% {-webkit-transform: rotate(-135deg);}
|
||||
}
|
||||
@-moz-keyframes bottombar-x {
|
||||
0% {bottom: 0px; -moz-transform: rotate(0deg);}
|
||||
45% {bottom: 6px; -moz-transform: rotate(-145deg);}
|
||||
75% {-moz-transform: rotate(-130deg);}
|
||||
100% {-moz-transform: rotate(-135deg);}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-back-rotation{
|
||||
@keyframes bottombar-back {
|
||||
0% { bottom: 6px;transform: rotate(-135deg);}
|
||||
45% { transform: rotate(10deg);}
|
||||
75% { transform: rotate(-5deg);}
|
||||
100% { bottom: 0px;transform: rotate(0);}
|
||||
}
|
||||
@-webkit-keyframes bottombar-back {
|
||||
0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
|
||||
45% {-webkit-transform: rotate(10deg);}
|
||||
75% {-webkit-transform: rotate(-5deg);}
|
||||
100% {bottom: 0px;-webkit-transform: rotate(0);}
|
||||
}
|
||||
@-moz-keyframes bottombar-back {
|
||||
0% {bottom: 6px;-moz-transform: rotate(-135deg);}
|
||||
45% {-moz-transform: rotate(10deg);}
|
||||
75% {-moz-transform: rotate(-5deg);}
|
||||
100% {bottom: 0px;-moz-transform: rotate(0);}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin timeline-badge-color($color) {
|
||||
background-color: $color;
|
||||
@include shadow-big-color($color);
|
||||
}
|
||||
|
||||
|
||||
@mixin lock-page-input-color($color) {
|
||||
&.lock-page{
|
||||
.form-group{
|
||||
.form-control{
|
||||
background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user