git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_mixins.scss

   1
   2
   3 // Placeholder text
   4 @mixin material-placeholder() {
   5   &::-moz-placeholder {@content; } // Firefox
   6   &:-ms-input-placeholder {@content; } // Internet Explorer 10+
   7   &::-webkit-input-placeholder  {@content; } // Safari and Chrome
   8 }
   9
  10
  11 // variations(unquote(""), background-color, #FFF);
  12 @mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) {
  13   @include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1);
  14 }
  15
  16 @mixin variations-content($args) {
  17   //@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, variation-color)}; }";
  18   //@debug "#{inspect($args)}";
  19   //@error "break here";
  20   #{map-get($args, material-param-1)}: map-get($args, variation-color);
  21 }
  22
  23 @mixin background-variations($component, $selector-suffix, $color-default) {
  24   @include generic-variations($component, $selector-suffix, $color-default, "background-variations-content", null);
  25 }
  26
  27 @mixin background-variations-content($args) {
  28   background-color: map-get($args, variation-color);
  29   @if (map-get($args, variation-color) == $mdb-btn-background-color) {
  30     color: $mdb-text-color-primary;
  31   } @else {
  32     color: map-get($args, variation-color-text);
  33   }
  34 }
  35
  36 //@mixin text-variations($component, $selector-suffix, $color-default) {
  37 //  @include generic-variations($component, $selector-suffix, $color-default, "text-variations-content", null);
  38 //}
  39 //
  40 //@mixin text-variations-content($args) {
  41 //  color: map-get($args, variation-color);
  42 //}
  43
  44 @mixin button-variations($component, $selector-suffix, $color-default) {
  45   @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", 4%);
  46 }
  47
  48 @mixin button-variations-content($args) {
  49   //@debug "#{inspect($args)}";
  50   $variation-color: map-get($args, variation-color);
  51   $mdb-param-1: map-get($args, material-param-1);
  52   background-color: contrast-color($variation-color,
  53           darken($variation-color, $mdb-param-1),
  54           lighten($variation-color, $mdb-param-1));
  55 }
  56
  57 // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
  58 @mixin navbar-variations($component, $selector-suffix, $color-default) {
  59   @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
  60 }
  61
  62 @mixin navbar-variations-content($args){
  63   $variation-color: map-get($args, variation-color);
  64   $variation-color-text: map-get($args, variation-color-text);
  65
  66   background-color: $variation-color;
  67   color: $variation-color-text;
  68   // deeply defined to override welljumbo class without !impotant need
  69   .navbar-form .form-group input.form-control,
  70   .navbar-form input.form-control {
  71     @include material-placeholder {
  72       color: $variation-color-text;
  73     }
  74   }
  75   .dropdown-menu {
  76     border-radius: $border-radius-base !important;
  77     li > a {
  78       &:hover,
  79       &:focus {
  80         color: $white-color;
  81         background-color: $variation-color;
  82       }
  83     }
  84
  85     .active > a {
  86       &:hover,
  87       &:focus {
  88         color: $variation-color-text;
  89       }
  90       background-color: $variation-color;
  91       color: $variation-color-text;
  92     }
  93   }
  94 }
  95
  96 // alert-variations("", $brand-primary)
  97 @mixin alert-variations($component, $selector-suffix, $color-default) {
  98   @include generic-variations($component, $selector-suffix, $color-default, "alert-variations-content", null);
  99 }
 100
 101 @mixin alert-variations-content($args){
 102   $variation-color: map-get($args, variation-color);
 103   $variation-color-text: map-get($args, variation-color-text);
 104
 105   background-color: lighten($variation-color,3%);
 106   color: $variation-color-text;
 107
 108   a, .alert-link {
 109     color: $variation-color-text;
 110   }
 111 }
 112
 113 // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
 114 @mixin call-variations-content-mixin($args) {
 115   $mixin-name: map-get($args, mixin-name);
 116   @if $mixin-name == variations-content {
 117     @include variations-content($args);
 118   } @else if $mixin-name == background-variations-content {
 119     @include background-variations-content($args);
 120   } @else if $mixin-name == text-variations-content {
 121     @include text-variations-content($args);
 122   } @else if $mixin-name == button-variations-content {
 123     @include button-variations-content($args);
 124   } @else if $mixin-name == bg-color-variations-content {
 125     @include bg-color-variations-content($args);
 126   } @else if $mixin-name == bg-box-shadow-variations-content {
 127     @include bg-box-shadow-variations-content($args);
 128   } @else if $mixin-name == bg-img-variations-content {
 129     @include bg-img-variations-content($args);
 130   } @else if $mixin-name == navbar-variations-content {
 131     @include navbar-variations-content($args);
 132   }@else if $mixin-name == alert-variations-content {
 133     @include alert-variations-content($args);
 134   } @else {
 135     @error "Unknown mixin: #{$mixin-name}"
 136   }
 137 }
 138
 139 //
 140 // To use this mixin you should pass a function as final parameter to define
 141 // the style. In that definition you can use the following variables to define it.
 142 //
 143 // $variation-color-name ---> "red", "green", "indigo" ...
 144 // $variation-color-full-name ---> "red", "green-50", "indigo-400" ...
 145 // $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ...
 146 // $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
 147 //
 148
 149 @mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) {
 150
 151   //setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
 152   $args: (
 153           //extra: $selector-suffix,
 154           //default: $color-default,
 155           mixin-name: $mixin-name,
 156           material-param-1: $mdb-param-1
 157   );
 158
 159   // bootstrap styles
 160   &#{$selector-suffix},
 161   &#{$component}-default#{$selector-suffix} {
 162
 163     $args-extra: map-merge($args, (
 164             variation-color: $color-default,
 165             variation-color-text: $mdb-text-color-light
 166     ));
 167     @include call-variations-content-mixin($args-extra);
 168   }
 169   &#{$component}-inverse#{$selector-suffix} {
 170     $args-inverse: map-merge($args, (
 171             variation-color: $mdb-brand-inverse,
 172             variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary-hex, $mdb-text-color-light-hex)
 173     ));
 174     @include call-variations-content-mixin($args-inverse);
 175   }
 176   &#{$component}-primary#{$selector-suffix} {
 177     $args-primary: map-merge($args, (
 178             variation-color: $brand-primary,
 179             variation-color-text: $mdb-text-color-light
 180     ));
 181     @include call-variations-content-mixin($args-primary);
 182   }
 183   &#{$component}-success#{$selector-suffix} {
 184     $args-success: map-merge($args, (
 185             variation-color: $brand-success,
 186             variation-color-text: $mdb-text-color-light
 187     ));
 188     @include call-variations-content-mixin($args-success);
 189   }
 190   &#{$component}-info#{$selector-suffix} {
 191     $args-info: map-merge($args, (
 192             variation-color: $brand-info,
 193             variation-color-text: $mdb-text-color-light
 194     ));
 195     @include call-variations-content-mixin($args-info);
 196   }
 197   &#{$component}-warning#{$selector-suffix} {
 198     $args-warning: map-merge($args, (
 199             variation-color: $brand-warning,
 200             variation-color-text: $mdb-text-color-light
 201     ));
 202     @include call-variations-content-mixin($args-warning);
 203   }
 204   &#{$component}-danger#{$selector-suffix} {
 205     $args-danger: map-merge($args, (
 206             variation-color: $brand-danger,
 207             variation-color-text: $mdb-text-color-light
 208     ));
 209     @include call-variations-content-mixin($args-danger);
 210   }
 211 }
 212
 213 @mixin transition($time, $type){
 214     -webkit-transition: all $time $type;
 215     -moz-transition: all $time $type;
 216     -o-transition: all $time $type;
 217     -ms-transition: all $time $type;
 218     transition: all $time $type;
 219 }
 220
 221 @mixin transform-scale($value){
 222      -webkit-transform: scale($value);
 223         -moz-transform: scale($value);
 224         -o-transform: scale($value);
 225         -ms-transform: scale($value);
 226         transform: scale($value);
 227 }
 228
 229 @mixin transform-scale3d($value){
 230      -webkit-transform: scale3d($value);
 231         -moz-transform: scale3d($value);
 232         -o-transform: scale3d($value);
 233         -ms-transform: scale3d($value);
 234         transform: scale3d($value);
 235 }
 236
 237 @mixin transform-translate-x($value){
 238      -webkit-transform:  translate3d($value, 0, 0);
 239         -moz-transform: translate3d($value, 0, 0);
 240         -o-transform: translate3d($value, 0, 0);
 241         -ms-transform: translate3d($value, 0, 0);
 242         transform: translate3d($value, 0, 0);
 243 }
 244
 245 @mixin transform-translate-y($value){
 246      -webkit-transform:  translate3d(0,$value, 0);
 247         -moz-transform: translate3d(0, $value, 0);
 248         -o-transform: translate3d(0, $value, 0);
 249         -ms-transform: translate3d(0, $value, 0);
 250         transform: translate3d(0, $value, 0);
 251 }
 252
 253 @mixin transform-origin($coordinates){
 254       -webkit-transform-origin: $coordinates;
 255         -moz-transform-origin: $coordinates;
 256         -o-transform-origin: $coordinates;
 257         -ms-transform-origin: $coordinates;
 258         transform-origin: $coordinates;
 259 }
 260
 261 @mixin animation($value){
 262       -webkit-animation: $value;
 263         -moz-animation: $value;
 264         -o-animation: $value;
 265         -ms-animation: $value;
 266         animation: $value;
 267 }
 268
 269 // Mixins for buttons
 270
 271 @mixin btn-styles($btn-color) {
 272
 273     // remove this line if you want black shadows
 274     @include shadow-2dp-color($btn-color);
 275
 276     &,
 277     &:hover,
 278     &:focus,
 279     &:active,
 280     &.active,
 281     &:active:focus,
 282     &:active:hover,
 283     &.active:focus,
 284     &.active:hover,
 285     .open > &.dropdown-toggle,
 286     .open > &.dropdown-toggle:focus,
 287     .open > &.dropdown-toggle:hover {
 288       background-color: $btn-color;
 289       color: $white-color;
 290     }
 291
 292     &:focus,
 293     &:active,
 294     &:hover{
 295       // remove this line if you want black shadows
 296       @include button-shadow-color($btn-color);
 297     }
 298
 299   &.disabled,
 300   &:disabled,
 301   &[disabled],
 302   fieldset[disabled] & {
 303     &,
 304     &:hover,
 305     &:focus,
 306     &.focus,
 307     &:active,
 308     &.active {
 309         box-shadow: none;
 310     }
 311   }
 312
 313   &.btn-simple{
 314       background-color: transparent;
 315       color: $btn-color;
 316       box-shadow: none;
 317
 318       &:hover,
 319       &:focus,
 320       &:active{
 321           background-color: transparent;
 322           color: $btn-color;
 323       }
 324   }
 325
 326 }