react-responsive-tools 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "",
   "main": "index.js",
   "module": "index.js",

package/src/breakpoints.config.mjs

@@ -1,5 +1,5 @@
 
-// breakpoints.config.js
+// breakpoints.config.mjs
 const HORIZONTAL_BREAKPOINTS = {
   "xs": "320px",
   "sm": "576px",

package/src/scss/_horizontal-breakpoints.scss

@@ -1,102 +1,142 @@
 
 @import "horizontal";
 
+
+// xs - 320px
 @mixin for-xs(){
   @include mob-first(xs){
     @content;
   }
 }
+
+// sm - 576px
 @mixin for-sm(){
   @include mob-first(sm){
     @content;
   }
 }
+
+// md - 768px
 @mixin for-md(){
   @include mob-first(md){
     @content;
   }
 }
+
+// lg - 992px
 @mixin for-lg(){
   @include mob-first(lg){
     @content;
   }
 }
+
+// lt - 1024px
 @mixin for-lt(){
   @include mob-first(lt){
     @content;
   }
 }
+
+// ltm - 1200px
 @mixin for-ltm(){
   @include mob-first(ltm){
     @content;
   }
 }
+
+// ltl - 1440px
 @mixin for-ltl(){
   @include mob-first(ltl){
     @content;
   }
 }
+
+// xl - 1920px
 @mixin for-xl(){
   @include mob-first(xl){
     @content;
   }
 }
+
+// xxl - 2560px
 @mixin for-xxl(){
   @include mob-first(xxl){
     @content;
   }
 }
+
+// qxl - 3840px
 @mixin for-qxl(){
   @include mob-first(qxl){
     @content;
   }
 }
 
+
+// xs - 320px
 @mixin before-xs(){
   @include desk-first(xs){
     @content;
   }
 }
+
+// sm - 576px
 @mixin before-sm(){
   @include desk-first(sm){
     @content;
   }
 }
+
+// md - 768px
 @mixin before-md(){
   @include desk-first(md){
     @content;
   }
 }
+
+// lg - 992px
 @mixin before-lg(){
   @include desk-first(lg){
     @content;
   }
 }
+
+// lt - 1024px
 @mixin before-lt(){
   @include desk-first(lt){
     @content;
   }
 }
+
+// ltm - 1200px
 @mixin before-ltm(){
   @include desk-first(ltm){
     @content;
   }
 }
+
+// ltl - 1440px
 @mixin before-ltl(){
   @include desk-first(ltl){
     @content;
   }
 }
+
+// xl - 1920px
 @mixin before-xl(){
   @include desk-first(xl){
     @content;
   }
 }
+
+// xxl - 2560px
 @mixin before-xxl(){
   @include desk-first(xxl){
     @content;
   }
 }
+
+// qxl - 3840px
 @mixin before-qxl(){
   @include desk-first(qxl){
     @content;

package/src/scss/_vertical-breakpoints.scss

@@ -1,62 +1,86 @@
 
 @import "vertical";
 
+
+// xs - 600px
 @mixin v-for-xs(){
   @include v-mob-first(xs){
     @content;
   }
 }
+
+// sm - 800px
 @mixin v-for-sm(){
   @include v-mob-first(sm){
     @content;
   }
 }
+
+// md - 1000px
 @mixin v-for-md(){
   @include v-mob-first(md){
     @content;
   }
 }
+
+// lg - 1200px
 @mixin v-for-lg(){
   @include v-mob-first(lg){
     @content;
   }
 }
+
+// xl - 1600px
 @mixin v-for-xl(){
   @include v-mob-first(xl){
     @content;
   }
 }
+
+// xxl - 1601px
 @mixin v-for-xxl(){
   @include v-mob-first(xxl){
     @content;
   }
 }
 
+
+// xs - 600px
 @mixin v-before-xs(){
   @include v-desk-first(xs){
     @content;
   }
 }
+
+// sm - 800px
 @mixin v-before-sm(){
   @include v-desk-first(sm){
     @content;
   }
 }
+
+// md - 1000px
 @mixin v-before-md(){
   @include v-desk-first(md){
     @content;
   }
 }
+
+// lg - 1200px
 @mixin v-before-lg(){
   @include v-desk-first(lg){
     @content;
   }
 }
+
+// xl - 1600px
 @mixin v-before-xl(){
   @include v-desk-first(xl){
     @content;
   }
 }
+
+// xxl - 1601px
 @mixin v-before-xxl(){
   @include v-desk-first(xxl){
     @content;