@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;
- }
-}