Utils for bootstrap

bs-utils.scss

@mixin when-xs {
  @media all and (max-width: 575px) {
    @content
  }
}

@mixin when-sm {
  @media all and (min-width: 576px) and (max-width: 767px) {
    @content
  }
}

@mixin when-md {
  @media all and (min-width: 768px) and (max-width: 991px) {
    @content
  }
}

@mixin when-lg {
  @media all and (min-width: 992px) and (max-width: 1199px) {
    @content
  }
}

@mixin when-xl {
  @media all and (min-width: 1200px) {
    @content
  }
}

@mixin min-xs {
  @media all and (min-width: 0) {
    @content
  }
}

@mixin min-sm {
  @media all and (min-width: 576px) {
    @content
  }
}

@mixin min-md {
  @media all and (min-width: 768px) {
    @content
  }
}

@mixin min-lg {
  @media all and (min-width: 992px) {
    @content
  }
}

@mixin max-xs {
  @media all and (max-width: 575px) {
    @content
  }
}

@mixin max-sm {
  @media all and (max-width: 767px) {
    @content
  }
}

@mixin max-md {
  @media all and (max-width: 991px) {
    @content
  }
}

@mixin max-lg {
  @media all and (max-width: 1199px) {
    @content
  }
}

@include when-xs {
  .xs-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .xs-pl-0 {
    padding-left: 0;
  }

  .xs-pr-0 {
    padding-right: 0;
  }
}

@include when-sm {
  .sm-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .sm-pl-0 {
    padding-left: 0;
  }

  .sm-pr-0 {
    padding-right: 0;
  }
}

@include when-md {
  .md-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .md-pl-0 {
    padding-left: 0;
  }

  .md-pr-0 {
    padding-right: 0;
  }
}

@include when-lg {
  .lg-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .lg-pl-0 {
    padding-left: 0;
  }

  .lg-pr-0 {
    padding-right: 0;
  }
}

@include when-xl {
  .xl-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .xl-pl-0 {
    padding-left: 0;
  }

  .xl-pr-0 {
    padding-right: 0;
  }
}

@include min-xs {
  .min-xs-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .min-xs-pl-0 {
    padding-left: 0;
  }

  .min-xs-pr-0 {
    padding-right: 0;
  }
}

@include min-sm {
  .min-sm-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .min-sm-pl-0 {
    padding-left: 0;
  }

  .min-sm-pr-0 {
    padding-right: 0;
  }
}

@include min-md {
  .min-md-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .min-md-pl-0 {
    padding-left: 0;
  }

  .min-md-pr-0 {
    padding-right: 0;
  }
}

.center-xy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

// Terkadang text berwarna agak kabur.
// Ini dikarenakan style dari text selalu di set oleh bootstrap `@mixin text-emphasis-variant`.
// Dan entah kenapa ini bisa terjadi.
// Kita mengetahui ini setelah inspect element dari Chrome dev tools.
// Ini biasanya terjadi pada modal.
// Dan untuk mengatasinya kita harus set class.
.text-default {
  color: rgba(0, 0, 0, .5);
}