react-responsive-tools 2.1.2 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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/scripts/generateSCSS.mjs

@@ -11,19 +11,35 @@ const __dirname = path.dirname(__filename);
 // Функция генерации SCSS содержимого для горизонтальных брейкпоинтов
 const generateHorizontalSCSS = (breakpoints) => {
   const beforeMixins = Object.keys(breakpoints).map(bp => `
-// ${bp} - ${breakpoints[bp]}
-@mixin for-${bp}(){
-  @include mob-first(${bp}){
+/**
+ * Mixin for applying styles for screens greater than or equal to ${breakpoints[bp]}px.
+ * Usage:
+ * 
+ * @include for-${bp} {
+ *    // your styles here
+ * }
+ */
+@mixin for-${bp}() {
+  @include mob-first(${bp}) {
     @content;
   }
 }`).join('\n');
+
   const afterMixins = Object.keys(breakpoints).map(bp => `
-// ${bp} - ${breakpoints[bp]}
-@mixin before-${bp}(){
-  @include desk-first(${bp}){
+/**
+ * Mixin for applying styles for screens less than ${breakpoints[bp]}px.
+ * Usage:
+ * 
+ * @include before-${bp} {
+ *    // your styles here
+ * }
+ */
+@mixin before-${bp}() {
+  @include desk-first(${bp}) {
     @content;
   }
 }`).join('\n');
+
   return `
 @import "horizontal";
 
@@ -36,19 +52,35 @@ ${afterMixins}
 // Функция генерации SCSS содержимого для вертикальных брейкпоинтов
 const generateVerticalSCSS = (breakpoints) => {
   const beforeMixins = Object.keys(breakpoints).map(bp => `
-// ${bp} - ${breakpoints[bp]}
-@mixin v-for-${bp}(){
-  @include v-mob-first(${bp}){
+/**
+ * Mixin for applying styles for screens with height greater than or equal to ${breakpoints[bp]}px.
+ * Usage:
+ * 
+ * @include v-for-${bp} {
+ *    // your styles here
+ * }
+ */
+@mixin v-for-${bp}() {
+  @include v-mob-first(${bp}) {
     @content;
   }
 }`).join('\n');
+
   const afterMixins = Object.keys(breakpoints).map(bp => `
-// ${bp} - ${breakpoints[bp]}
-@mixin v-before-${bp}(){
-  @include v-desk-first(${bp}){
+/**
+ * Mixin for applying styles for screens with height less than ${breakpoints[bp]}px.
+ * Usage:
+ * 
+ * @include v-before-${bp} {
+ *    // your styles here
+ * }
+ */
+@mixin v-before-${bp}() {
+  @include v-desk-first(${bp}) {
     @content;
   }
 }`).join('\n');
+
   return `
 @import "vertical";
 

package/src/scss/_horizontal-breakpoints.scss

@@ -1,104 +1,284 @@
 
 @import "horizontal";
 
-@mixin for-xs(){
-  @include mob-first(xs){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 320pxpx.
+ * Usage:
+ * 
+ * @include for-xs {
+ *    // your styles here
+ * }
+ */
+@mixin for-xs() {
+  @include mob-first(xs) {
     @content;
   }
 }
-@mixin for-sm(){
-  @include mob-first(sm){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 576pxpx.
+ * Usage:
+ * 
+ * @include for-sm {
+ *    // your styles here
+ * }
+ */
+@mixin for-sm() {
+  @include mob-first(sm) {
     @content;
   }
 }
-@mixin for-md(){
-  @include mob-first(md){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 768pxpx.
+ * Usage:
+ * 
+ * @include for-md {
+ *    // your styles here
+ * }
+ */
+@mixin for-md() {
+  @include mob-first(md) {
     @content;
   }
 }
-@mixin for-lg(){
-  @include mob-first(lg){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 992pxpx.
+ * Usage:
+ * 
+ * @include for-lg {
+ *    // your styles here
+ * }
+ */
+@mixin for-lg() {
+  @include mob-first(lg) {
     @content;
   }
 }
-@mixin for-lt(){
-  @include mob-first(lt){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 1024pxpx.
+ * Usage:
+ * 
+ * @include for-lt {
+ *    // your styles here
+ * }
+ */
+@mixin for-lt() {
+  @include mob-first(lt) {
     @content;
   }
 }
-@mixin for-ltm(){
-  @include mob-first(ltm){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 1200pxpx.
+ * Usage:
+ * 
+ * @include for-ltm {
+ *    // your styles here
+ * }
+ */
+@mixin for-ltm() {
+  @include mob-first(ltm) {
     @content;
   }
 }
-@mixin for-ltl(){
-  @include mob-first(ltl){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 1440pxpx.
+ * Usage:
+ * 
+ * @include for-ltl {
+ *    // your styles here
+ * }
+ */
+@mixin for-ltl() {
+  @include mob-first(ltl) {
     @content;
   }
 }
-@mixin for-xl(){
-  @include mob-first(xl){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 1920pxpx.
+ * Usage:
+ * 
+ * @include for-xl {
+ *    // your styles here
+ * }
+ */
+@mixin for-xl() {
+  @include mob-first(xl) {
     @content;
   }
 }
-@mixin for-xxl(){
-  @include mob-first(xxl){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 2560pxpx.
+ * Usage:
+ * 
+ * @include for-xxl {
+ *    // your styles here
+ * }
+ */
+@mixin for-xxl() {
+  @include mob-first(xxl) {
     @content;
   }
 }
-@mixin for-qxl(){
-  @include mob-first(qxl){
+
+/**
+ * Mixin for applying styles for screens greater than or equal to 3840pxpx.
+ * Usage:
+ * 
+ * @include for-qxl {
+ *    // your styles here
+ * }
+ */
+@mixin for-qxl() {
+  @include mob-first(qxl) {
     @content;
   }
 }
 
-@mixin before-xs(){
-  @include desk-first(xs){
+
+/**
+ * Mixin for applying styles for screens less than 320pxpx.
+ * Usage:
+ * 
+ * @include before-xs {
+ *    // your styles here
+ * }
+ */
+@mixin before-xs() {
+  @include desk-first(xs) {
     @content;
   }
 }
-@mixin before-sm(){
-  @include desk-first(sm){
+
+/**
+ * Mixin for applying styles for screens less than 576pxpx.
+ * Usage:
+ * 
+ * @include before-sm {
+ *    // your styles here
+ * }
+ */
+@mixin before-sm() {
+  @include desk-first(sm) {
     @content;
   }
 }
-@mixin before-md(){
-  @include desk-first(md){
+
+/**
+ * Mixin for applying styles for screens less than 768pxpx.
+ * Usage:
+ * 
+ * @include before-md {
+ *    // your styles here
+ * }
+ */
+@mixin before-md() {
+  @include desk-first(md) {
     @content;
   }
 }
-@mixin before-lg(){
-  @include desk-first(lg){
+
+/**
+ * Mixin for applying styles for screens less than 992pxpx.
+ * Usage:
+ * 
+ * @include before-lg {
+ *    // your styles here
+ * }
+ */
+@mixin before-lg() {
+  @include desk-first(lg) {
     @content;
   }
 }
-@mixin before-lt(){
-  @include desk-first(lt){
+
+/**
+ * Mixin for applying styles for screens less than 1024pxpx.
+ * Usage:
+ * 
+ * @include before-lt {
+ *    // your styles here
+ * }
+ */
+@mixin before-lt() {
+  @include desk-first(lt) {
     @content;
   }
 }
-@mixin before-ltm(){
-  @include desk-first(ltm){
+
+/**
+ * Mixin for applying styles for screens less than 1200pxpx.
+ * Usage:
+ * 
+ * @include before-ltm {
+ *    // your styles here
+ * }
+ */
+@mixin before-ltm() {
+  @include desk-first(ltm) {
     @content;
   }
 }
-@mixin before-ltl(){
-  @include desk-first(ltl){
+
+/**
+ * Mixin for applying styles for screens less than 1440pxpx.
+ * Usage:
+ * 
+ * @include before-ltl {
+ *    // your styles here
+ * }
+ */
+@mixin before-ltl() {
+  @include desk-first(ltl) {
     @content;
   }
 }
-@mixin before-xl(){
-  @include desk-first(xl){
+
+/**
+ * Mixin for applying styles for screens less than 1920pxpx.
+ * Usage:
+ * 
+ * @include before-xl {
+ *    // your styles here
+ * }
+ */
+@mixin before-xl() {
+  @include desk-first(xl) {
     @content;
   }
 }
-@mixin before-xxl(){
-  @include desk-first(xxl){
+
+/**
+ * Mixin for applying styles for screens less than 2560pxpx.
+ * Usage:
+ * 
+ * @include before-xxl {
+ *    // your styles here
+ * }
+ */
+@mixin before-xxl() {
+  @include desk-first(xxl) {
     @content;
   }
 }
-@mixin before-qxl(){
-  @include desk-first(qxl){
+
+/**
+ * Mixin for applying styles for screens less than 3840pxpx.
+ * Usage:
+ * 
+ * @include before-qxl {
+ *    // your styles here
+ * }
+ */
+@mixin before-qxl() {
+  @include desk-first(qxl) {
     @content;
   }
 }

package/src/scss/_vertical-breakpoints.scss

@@ -1,64 +1,172 @@
 
 @import "vertical";
 
-@mixin v-for-xs(){
-  @include v-mob-first(xs){
+
+/**
+ * Mixin for applying styles for screens with height greater than or equal to 600pxpx.
+ * Usage:
+ * 
+ * @include v-for-xs {
+ *    // your styles here
+ * }
+ */
+@mixin v-for-xs() {
+  @include v-mob-first(xs) {
     @content;
   }
 }
-@mixin v-for-sm(){
-  @include v-mob-first(sm){
+
+/**
+ * Mixin for applying styles for screens with height greater than or equal to 800pxpx.
+ * Usage:
+ * 
+ * @include v-for-sm {
+ *    // your styles here
+ * }
+ */
+@mixin v-for-sm() {
+  @include v-mob-first(sm) {
     @content;
   }
 }
-@mixin v-for-md(){
-  @include v-mob-first(md){
+
+/**
+ * Mixin for applying styles for screens with height greater than or equal to 1000pxpx.
+ * Usage:
+ * 
+ * @include v-for-md {
+ *    // your styles here
+ * }
+ */
+@mixin v-for-md() {
+  @include v-mob-first(md) {
     @content;
   }
 }
-@mixin v-for-lg(){
-  @include v-mob-first(lg){
+
+/**
+ * Mixin for applying styles for screens with height greater than or equal to 1200pxpx.
+ * Usage:
+ * 
+ * @include v-for-lg {
+ *    // your styles here
+ * }
+ */
+@mixin v-for-lg() {
+  @include v-mob-first(lg) {
     @content;
   }
 }
-@mixin v-for-xl(){
-  @include v-mob-first(xl){
+
+/**
+ * Mixin for applying styles for screens with height greater than or equal to 1600pxpx.
+ * Usage:
+ * 
+ * @include v-for-xl {
+ *    // your styles here
+ * }
+ */
+@mixin v-for-xl() {
+  @include v-mob-first(xl) {
     @content;
   }
 }
-@mixin v-for-xxl(){
-  @include v-mob-first(xxl){
+
+/**
+ * Mixin for applying styles for screens with height greater than or equal to 1601pxpx.
+ * Usage:
+ * 
+ * @include v-for-xxl {
+ *    // your styles here
+ * }
+ */
+@mixin v-for-xxl() {
+  @include v-mob-first(xxl) {
     @content;
   }
 }
 
-@mixin v-before-xs(){
-  @include v-desk-first(xs){
+
+/**
+ * Mixin for applying styles for screens with height less than 600pxpx.
+ * Usage:
+ * 
+ * @include v-before-xs {
+ *    // your styles here
+ * }
+ */
+@mixin v-before-xs() {
+  @include v-desk-first(xs) {
     @content;
   }
 }
-@mixin v-before-sm(){
-  @include v-desk-first(sm){
+
+/**
+ * Mixin for applying styles for screens with height less than 800pxpx.
+ * Usage:
+ * 
+ * @include v-before-sm {
+ *    // your styles here
+ * }
+ */
+@mixin v-before-sm() {
+  @include v-desk-first(sm) {
     @content;
   }
 }
-@mixin v-before-md(){
-  @include v-desk-first(md){
+
+/**
+ * Mixin for applying styles for screens with height less than 1000pxpx.
+ * Usage:
+ * 
+ * @include v-before-md {
+ *    // your styles here
+ * }
+ */
+@mixin v-before-md() {
+  @include v-desk-first(md) {
     @content;
   }
 }
-@mixin v-before-lg(){
-  @include v-desk-first(lg){
+
+/**
+ * Mixin for applying styles for screens with height less than 1200pxpx.
+ * Usage:
+ * 
+ * @include v-before-lg {
+ *    // your styles here
+ * }
+ */
+@mixin v-before-lg() {
+  @include v-desk-first(lg) {
     @content;
   }
 }
-@mixin v-before-xl(){
-  @include v-desk-first(xl){
+
+/**
+ * Mixin for applying styles for screens with height less than 1600pxpx.
+ * Usage:
+ * 
+ * @include v-before-xl {
+ *    // your styles here
+ * }
+ */
+@mixin v-before-xl() {
+  @include v-desk-first(xl) {
     @content;
   }
 }
-@mixin v-before-xxl(){
-  @include v-desk-first(xxl){
+
+/**
+ * Mixin for applying styles for screens with height less than 1601pxpx.
+ * Usage:
+ * 
+ * @include v-before-xxl {
+ *    // your styles here
+ * }
+ */
+@mixin v-before-xxl() {
+  @include v-desk-first(xxl) {
     @content;
   }
 }