@codecademy/gamut-styles

17.14.017.14.1-alpha.0ee3d6.0
utils/mixins/_responsive.scss
utils/mixins/_responsive.scssDeleted
−85
Index: package/utils/mixins/_responsive.scss
===================================================================
--- package/utils/mixins/_responsive.scss
+++ package/utils/mixins/_responsive.scss
@@ -1,85 +0,0 @@
-// Try to use these simple mixins if possible for your responsive needs
-@use "../variables/grid" as *;
-
-// Example usage:
-//
-// .grid {
-//  display: flex;
-//  flex-direction: column;
-//  @include md-viewport {
-//    flex-direction: row;
-//  }
-// }
-
-@mixin sm-viewport {
-  @media only screen and (min-width: $grid-sm-min) {
-    @content;
-  }
-}
-
-@mixin md-viewport {
-  @media only screen and (min-width: $grid-md-min) {
-    @content;
-  }
-}
-
-@mixin lg-viewport {
-  @media only screen and (min-width: $grid-lg-min) {
-    @content;
-  }
-}
-
-@mixin xl-viewport {
-  @media only screen and (min-width: $grid-xl-min) {
-    @content;
-  }
-}
-
-// Media query abstractions if you need more complex responsive behavior
-// or custom breakpoints
-
-@mixin screen-size-lte($max) {
-  @media screen and (max-width: $max) {
-    @content;
-  }
-}
-
-@mixin screen-size-between($min, $max) {
-  @media screen and (min-width: $min) and (max-width: $max) {
-    @content;
-  }
-}
-
-@mixin screen-size-gte($min) {
-  @media screen and (min-width: $min) {
-    @content;
-  }
-}
-
-// Named view port mixin
-
-@mixin getViewport($viewport) {
-  @if $viewport == "xl" {
-    @include xl-viewport() {
-      @content;
-    }
-  }
-  @if $viewport == "lg" {
-    @include lg-viewport {
-      @content;
-    }
-  }
-  @if $viewport == "md" {
-    @include md-viewport {
-      @content;
-    }
-  }
-  @if $viewport == "sm" {
-    @include sm-viewport {
-      @content;
-    }
-  }
-  @if $viewport == "xs" {
-    @content;
-  }
-}