namaste/html/sass/mdb/free/data/_mixins.scss

/*********************
  Mixins
**********************/

@mixin hover {
  @if $enable-hover-media-query {
    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
    @media (hover: hover) {
      &:hover {
        @content
      }
    }
  }
  @else {
    &:hover {
      @content
    }
  }
}

@mixin hover-focus {
  @if $enable-hover-media-query {
    &:focus {
      @content
      }
    @include hover {
      @content
      }
  }
  @else {
    &:focus,
    &:hover {
      @content
    }
  }
}

@mixin plain-hover-focus {
  @if $enable-hover-media-query {
    &:focus {
      @content
    }
    @include hover {
      @content
    }
  }
  @else {
    &:focus,
    &:hover {
      @content
    }
  }
}

@mixin hover-focus-active {
  @if $enable-hover-media-query {
    &:focus,
    &:active {
      @content
    }
    @include hover {
      @content
    }
  }
  @else {
    &:focus,
    &:active,
    &:hover {
      @content
    }
  }
}

@mixin border-radius($args) {
  -webkit-border-radius: $args;
  -moz-border-radius: $args;
  -ms-border-radius: $args;
  -o-border-radius: $args;
  border-radius: $args;
}

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &:-moz-placeholder {
    @content
  }
  &::-moz-placeholder {
    @content
  }
  &::-ms-placeholder {
    @content
  }
  &::placeholder {
    @content
  }
}

// New mixins
@mixin make-button($name, $color) {
  .btn-#{$name} {
    @function set-notification-text-color($color) {
      @if (lightness($color) > 80) {
        @return $black; // Lighter backgorund, return dark color
      } @else {
        @return $white; // Darker background, return light color
      }
    }
    background-color: $color !important;
    color: set-notification-text-color($color) !important;
    &:hover {
      background-color: lighten($color, 5%);
    }
    &:focus,
    &.focus {
      @extend .z-depth-1-half;
    }
    &:focus,
    &:active,
    &.active {
      background-color: darken($color, 13%);
    }
    &.dropdown-toggle {
      background-color: $color!important;
      &:hover,
      &:focus {
        background-color: lighten($color, 5%) !important;
      }
    }
    &:not([disabled]):not(.disabled):active,
    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
      @extend .z-depth-1-half;
      background-color: darken($color, 13%) !important;
    }
    &:not([disabled]):not(.disabled):active:focus,
    &:not([disabled]):not(.disabled).active:focus,
    .show > &.dropdown-toggle:focus {
      @extend .z-depth-1-half;
    }
  }
}

@mixin make-outline-button($name, $color) {
  .btn-outline-#{$name} {
    border: 2px solid $color;
    color: $color !important;
    background-color: transparent;
    &:hover,
    &:focus,
    &:active,
    &:active:focus,
    &.active {
      background-color: transparent;
      color: $color;
      border-color: $color;
    }
    &:not([disabled]):not(.disabled):active,
    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
      @extend .z-depth-1-half;
      background-color: transparent !important;
      border-color: $color !important;
    }
    &:not([disabled]):not(.disabled):active:focus,
    &:not([disabled]):not(.disabled).active:focus,
    .show > &.dropdown-toggle:focus {
      @extend .z-depth-1-half;
    }
  }
}

@mixin make-gradient-button($name, $value) {
  .btn.#{$name}-gradient {
    background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important;
    transition:.5s ease;
    &:hover,
    &:focus,
    &:active,
    &:active:focus
    &.active {
      background: linear-gradient(40deg, lighten(map-get($value, start), 5%), lighten(map-get($value, end), 5%));
    }
  }
}

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
  @include border-radius($border-radius);
}


@mixin transition($transition...) {
  @if $enable-transitions {
    @if length($transition) == 0 {
      transition: $transition-base;
    } @else {
      transition: $transition;
    }
  }
}

@mixin transform($args) {
  -webkit-transform: $args;
  -moz-transform: $args;
  -ms-transform: $args;
  -o-transform: $args;
  transform: $args;
}

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// Flexbox
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}
@mixin align($align) {
  -webkit-flex-align: $align;
  -ms-flex-align: $align;
  -webkit-align-items: $align;
  align-items: $align;
}
@mixin justify-content($val) {
  -webkit-justify-content: $val;
  justify-content: $val;
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}