Mixins for Angular App

_mixins.scss

@mixin display-flex($direction, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  flex-wrap: $wrap;
}

@mixin flex-resizable($basis: auto, $grow: 1, $shrink: 1) {
  flex-basis: $basis;
  flex-grow: $grow;
  flex-shrink: $shrink;
}

@mixin flex-fixed($basis: auto) {
  flex-basis: $basis;
  flex-grow: 0;
  flex-shrink: 1; // TODO perhaps it is 0 (Zero)
}

@mixin on-host($direction, $wrap: nowrap) {
  :host {
    @include flex-resizable();
    @include display-flex($direction, $wrap);
    overflow: auto;

    @content;
  }
}

@mixin nowrapWithEllipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin nowrap() {
  white-space: nowrap;
}

@mixin disableOutline() {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

@mixin device-large() {
  @media (min-width: 768px) and (orientation: portrait), (min-width: 786px) and (orientation: landscape) {
    @content;
  }
}

@mixin small-view() {
  @media (max-height: 512px) and (orientation: landscape) {
    @content;
  }
}

@mixin landscape-view() {
  @media (orientation: landscape) {
    @content;
  }
}

@mixin abs-height($height) {
  height: $height;
  min-height: $height;
  max-height: $height;
}

@mixin abs-width($width) {
  width: $width;
  min-width: $width;
  max-width: $width;
}