@ozdao/prometheus-framework 0.2.108 → 0.2.110

package/src/styles/config.scss

@@ -32,34 +32,58 @@
     }
 }
 
-
-@mixin generate-utility-classes($class-name, $css-property, $modifiers, $values) {
+@mixin generate-utility-classes($class-name, $css-property, $modifiers, $values, $breakpoints: null) {
+  // Генерация базовых классов без модификаторов и медиа-запросов
   @each $value-key, $value in $values {
-    // Генерация классов без модификаторов
     .#{$class-name}-#{$value-key} {
       #{$css-property}: $value;
     }
-    // Генерация отрицательных классов без модификаторов
     .#{$class-name}-#{$value-key}-negative {
-		  #{$css-property}: -$value;
-		}
-
-    // Генерация классов с модификаторами
+      #{$css-property}: -$value;
+    }
+    
     @if $modifiers {
       @each $modifier, $css-modifier in $modifiers {
         .#{$class-name}-#{$modifier}-#{$value-key} {
           #{$css-property}-#{$css-modifier}: $value;
         }
-        // Генерация отрицательных классов с модификаторами
         .#{$class-name}-#{$modifier}-#{$value-key}-negative {
           #{$css-property}-#{$css-modifier}: calc(#{$value} * -1);
         }
       }
     }
   }
+
+  // Генерация классов с медиа-запросами
+  @if $breakpoints {
+    @each $breakpoint-key, $breakpoint-query in $breakpoints {
+      @media #{$breakpoint-query} {
+        @each $value-key, $value in $values {
+          .#{$breakpoint-key}\:#{$class-name}-#{$value-key} {
+            #{$css-property}: $value;
+          }
+          .#{$breakpoint-key}\:#{$class-name}-#{$value-key}-negative {
+            #{$css-property}: calc(#{$value} * -1);
+          }
+
+          @if $modifiers {
+            @each $modifier, $css-modifier in $modifiers {
+              .#{$breakpoint-key}\:#{$class-name}-#{$modifier}-#{$value-key} {
+                #{$css-property}-#{$css-modifier}: $value;
+              }
+              .#{$breakpoint-key}\:#{$class-name}-#{$modifier}-#{$value-key}-negative {
+                #{$css-property}-#{$css-modifier}: calc(#{$value} * -1);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 
+
 :root {
 	// THEME
 	color-scheme: light dark;
@@ -202,6 +226,13 @@ $percent: (
   '0': 0%,
 );
 
+$breakpoints: (
+  'mobile': "(max-width: 640px)",
+  'tablet': "(min-width: 641px) and (max-width: 1024px)",
+  'desktop': "(min-width: 1025px) and (max-width: 1440px)",
+  'widescreen': "(min-width: 1441px)"
+);
+
 $base: (
   'auto': auto,
   'zero': 0,
@@ -213,29 +244,29 @@ $combined: map-merge($combined, $variables);
 $combined: map-merge($combined, $base);
 
 body {
-	@include generate-utility-classes('pd',	'padding', 		$modifiers, $combined);
-	@include generate-utility-classes('mn', 'margin', 		$modifiers, $combined);
+	@include generate-utility-classes('pd',	'padding', $modifiers, $combined, $breakpoints);
+	@include generate-utility-classes('mn', 'margin', $modifiers, $combined, $breakpoints);
 
-	@include generate-utility-classes('w', 	'width', 			null, $combined);
-	@include generate-utility-classes('h', 	'height', 		null, $combined);
+	@include generate-utility-classes('w', 'width', null, $combined, $breakpoints);
+	@include generate-utility-classes('h', 'height', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('pos-t', 'top', 		null, $combined);
-	@include generate-utility-classes('pos-r', 'right', 	null, $combined);
-	@include generate-utility-classes('pos-b', 'bottom',	null, $combined);
-	@include generate-utility-classes('pos-l', 'left', 		null, $combined);
+	@include generate-utility-classes('pos-t', 'top', null, $combined, $breakpoints);
+	@include generate-utility-classes('pos-r', 'right', null, $combined, $breakpoints);
+	@include generate-utility-classes('pos-b', 'bottom', null, $combined, $breakpoints);
+	@include generate-utility-classes('pos-l', 'left', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('h-max', 'max-height',	null, $combined);
-	@include generate-utility-classes('h-min', 'min-height',	null, $combined);
+	@include generate-utility-classes('h-max', 'max-height', null, $combined, $breakpoints);
+	@include generate-utility-classes('h-min', 'min-height', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('w-max', 'max-width',	null, $combined);
-	@include generate-utility-classes('w-min', 'min-width',	null, $combined);
+	@include generate-utility-classes('w-max', 'max-width',	null, $combined, $breakpoints);
+	@include generate-utility-classes('w-min', 'min-width',	null, $combined, $breakpoints);
 
-	@include generate-utility-classes('radius', 'border-radius',	null, $combined);
+	@include generate-utility-classes('radius', 'border-radius', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('radius-tl', 'border-top-left-radius',	null, $combined);
-	@include generate-utility-classes('radius-br', 'border-bottom-right-radius',	null, $combined);
-	@include generate-utility-classes('radius-tr', 'border-top-right-radius',	null, $combined);
-	@include generate-utility-classes('radius-bl', 'border-bottom-left-radius',	null, $combined);
+	@include generate-utility-classes('radius-tl', 'border-top-left-radius', null, $combined, $breakpoints);
+	@include generate-utility-classes('radius-tr', 'border-top-right-radius', null, $combined, $breakpoints);
+	@include generate-utility-classes('radius-br', 'border-bottom-right-radius', null, $combined, $breakpoints);
+	@include generate-utility-classes('radius-bl', 'border-bottom-left-radius', null, $combined, $breakpoints);
 	
 	@include generate-bg-classes('bg-main', 	'main');
 	@include generate-bg-classes('bg-second',	'second');

package/src/styles/responsive.scss

@@ -1,15 +1,21 @@
 $super-ultra-tiny-flip-phone-max:   240px;
+
 $flip-phone-max:                    320px;
 $phone-portrait-max:                321px;
 $phone-landscape-max:               640px;
+
 $tablet-portrait-min:               641px;
 $tablet-portrait-max:               768px;
+
 $tablet-landscape-min:              769px;
 $tablet-landscape-max:              1024px;
+
 $desktop-min:                       1025px;
 $desktop-max:                       1440px;
+
 $xl-desktop-min:                    1441px;
 $xl-desktop-max:                    1920px;
+
 $xxl-desktop-min:                   1921px;
 
 @media screen and (min-width:  $xxl-desktop-min) {