ionic-framework/src/themes/ionic.mixins.scss

// Appearance
// --------------------------------------------------

@mixin appearance($val) {
  -moz-appearance: $val;
  -ms-appearance: $val;
  -webkit-appearance: $val;
  appearance: $val;
}


// Input Placeholder
// --------------------------------------------------

@mixin placeholder($color: #999, $text-indent: 0) {
  &::-moz-placeholder { // Firefox 19+
    color: $color;
  }

  &:-ms-input-placeholder {
    color: $color;
  }

  &::-webkit-input-placeholder {
    // Safari placeholder margin issue
    text-indent: $text-indent;
    color: $color;
  }
}


// SVG Background Image Mixin
// --------------------------------------------------

@mixin svg-background-image($svg) {
  $url: url-encode($svg);
  background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
}

// Check that the given map values are in ascending order
// ---------------------------------------------------------------------------------

@mixin assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

// Check that the first value in the given map starts at 0
// ---------------------------------------------------------------------------------

@mixin assert-starts-at-zero($map, $map-name) {
  $values: map-values($map);
  $first-value: nth($values, 1);
  @if $first-value != 0 {
    @warn "First value in `#{$map-name}` must start at 0, but starts at #{$first-value}.";
  }
}


// Breakpoint Mixins
// ---------------------------------------------------------------------------------

// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

// ---------------------------------------------------------------------------------


// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    ""  (Returns a blank string)
//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}


// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}


// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}


// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
//
//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}


// Name of the next breakpoint, or null for the last breakpoint.
//
//    >> breakpoint-next(sm)
//    md
//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    md
//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
//    md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}


// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

$include-rtl: true !default;

@mixin rtl() {
  @if $include-rtl {
    $root: #{&};
    @at-root [dir="rtl"] {
      #{$root} {
        @content;
      }
    }
  }
}

// If deprecated variable exists, use it, otherwise, use alternative
// @param {string} $property - property to default
// @param {string} $variable - the deprecated variable
// ----------------------------------------------------------
@mixin deprecated-variable($property, $variable) {
  @if $variable == null {
    @content;
  } @else {
    // TODO find variable name
    @warn "you are using a deprecated variable";
    #{$property}: $variable;
  }
}

// Add padding horizontal
// @param {string} $start - amount to pad start
// @param {string} $end - amount to pad end
// ----------------------------------------------------------
@mixin padding-horizontal($start, $end: $start) {
  @if $start != null {
    padding-left: $start;
  }

  @if $end != null {
    padding-right: $end;
  }

  @if $start != $end {
    @include rtl() {
      @if $start != null {
        padding-right: $start;
      } @else if $end != null {
        padding-right: initial;
      }

      @if $end != null {
        padding-left: $end;
      } @else if $start != null {
        padding-left: initial;
      }
    }
  }
}

// Add padding for all sides
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
  @if ($top == $end and $top == $bottom and $top == $start) {
    padding: $top;
  } @else {
    @include padding-horizontal($start, $end);
    padding-top: $top;
    padding-bottom: $bottom;
  }
}

// Add margin horizontal
// @param {string} $start - amount to margin start
// @param {string} $end - amount to margin end
// ----------------------------------------------------------
@mixin margin-horizontal($start, $end: $start) {
  @if $start != null {
    margin-left: $start;
  }

  @if $end != null {
    margin-right: $end;
  }

  @if $start != $end {
    @include rtl() {
      @if $start != null {
        margin-right: $start;
      } @else if $end != null {
        margin-right: initial;
      }

      @if $end != null {
        margin-left: $end;
      } @else if $start != null {
        margin-left: initial;
      }
    }
  }
}

// Add margin for all sides
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
  @if ($top == $end and $top == $bottom and $top == $start) {
    margin: $top;
  } @else {
    @include margin-horizontal($start, $end);
    margin-top: $top;
    margin-bottom: $bottom;
  }
}

// Add position horizontal
// @param {string} $start - amount to position start
// @param {string} $end - amount to left: 0; end
// ----------------------------------------------------------
@mixin position-horizontal($start: null, $end: null) {
  @if $start != null {
    left: $start;
  }

  @if $end != null {
    right: $end;
  }

  @if $start != $end {
    @include rtl() {
      @if $start != null {
        right: $start;
      } @else if $end != null {
        right: auto;
      }

      @if $end != null {
        left: $end;
      } @else if $start != null {
        left: auto;
      }
    }
  }
}

// Add position for all sides
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
  @include position-horizontal($start, $end);
  @if $top != null {
    top: $top;
  }
  @if $bottom != null {
    bottom: $bottom;
  }
}

// Add correct border radius for ltr and rtl
// @param {string} $top-start
// @param {string} $top-end
// @param {string} $bottom-end
// @param {string} $bottom-start
// ----------------------------------------------------------
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
  @if ($top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start) {
    border-radius: $top-start;
  } @else {
    @if $top-start != null {
      border-top-left-radius: $top-start;
    }

    @if $top-end != null {
      border-top-right-radius: $top-end;
    }

    @if $bottom-end != null {
      border-bottom-right-radius: $bottom-end;
    }

    @if $bottom-start != null {
      border-bottom-left-radius: $bottom-start;
    }

    @include rtl() {
      @if $top-start != null {
        border-top-right-radius: $top-start;
      } @else if $top-end != null {
        border-top-right-radius: 0;
      }

      @if $top-end != null {
        border-top-left-radius: $top-end;
      } @else if $top-start != null {
        border-top-left-radius: 0;
      }

      @if $bottom-end != null {
        border-bottom-left-radius: $bottom-end;
      } @else if $bottom-start != null {
        border-bottom-left-radius: 0;
      }

      @if $bottom-start != null {
        border-bottom-right-radius: $bottom-start;
      } @else if $bottom-end != null {
        border-bottom-right-radius: 0;
      }
    }
  }
}


// Sets correct text align with support for old browsers
// @param {string} $direction - text direction
// @param {string} $decorator - !important
// ----------------------------------------------------------
@mixin text-align($direction, $decorator: null) {
  @if $direction == start {
    text-align: left;
    text-align: start $decorator;
  } @else if $direction == end {
    text-align: right;
    text-align: end $decorator;
  } @else {
    text-align: $direction $decorator;
  }
}