kspace-bludit-theme/scss/mixins/_responsive.scss

// MIXINS RESPONSIVES

// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}

// Extra large devices
@mixin xlbis {
   @media (min-width: #{$screen-xlbis-min}) {
      @content;
   }
}

// Extra large desktops
@mixin xxl {
   @media (min-width: #{$screen-xxl-min}) {
       @content;
   }
}

// Old desktop
@mixin old {
   @media (max-width: 1366px) and (max-height: 768px) {
      @content;
   }
}

// Custom devices
@mixin rwd($screen) {
   @media (min-width: $screen+'px' ) {
      @content;
   }
}

@mixin container($size, $padding) {
    padding-left: $padding;
    padding-right: $padding;
    max-width: $size;
    margin:auto;
}

@mixin responsive() {
   @content;
   
   &-sm {
      @include sm() {
         @content;
      }
   }

   &-md {
      @include md() {
         @content;
      }
   }

   &-lg {
      @include lg() {
         @content;
      }
   }

   &-xl {
      @include xl() {
         @content;
      }
   }

   &-xxl {
      @include xxl() {
         @content;
      }
   }
}