@ozdao/martyrs 0.2.481 → 0.2.483

package/src/styles/base/all.scss

@@ -146,39 +146,9 @@ body {
 	// ////////////////////////////////////////
 	// Pointer Events
 	.no-events { pointer-events: none }
-	// Transition
 	// //////////////////////////////////////// 
 	// Layout
 	// //////////////////////////////////////// 
-	// Positions
-	.pos-relative { position: relative; }
-	.pos-absolute { position: absolute; }
-	.pos-fixed    { position: fixed; }
-	.pos-sticky   { position: sticky; }
-	.pos-static   { position: static; }
-	// Overflow
-	.o-hidden   {overflow: hidden; }
-	.o-scroll   {overflow: scroll; }
-	.o-y-scroll {overflow-y: scroll; }
-	.o-x-scroll {overflow-x: scroll; } /* This was incorrect in your code */
-	.o-x-hidden {overflow-x: hidden; touch-action: pan-y;}
-	.o-auto     {overflow: auto; }
-	.o-visible  {overflow: visible; }
-	.o-clip     {overflow: clip; } /* Modern alternative to hidden */
-	.o-y-auto   {overflow-y: auto; }
-	.o-x-auto   {overflow-x: auto; }
-	.o-y-hidden {overflow-y: hidden; }
-	.o-y-visible {overflow-y: visible; }
-	.o-x-visible {overflow-x: visible; }
-	.o-y-clip   {overflow-y: clip; }
-	.o-x-clip   {overflow-x: clip; }
-	.o-initial  {overflow: initial; }
-	.o-inherit  {overflow: inherit; }
-	.o-unset    {overflow: unset; }
-	.o-revert   {overflow: revert; }
-	.o-revert-layer {overflow: revert-layer; }
-	// Display
-
 	// Flex
 	.flex {
 		display: flex;
@@ -187,14 +157,6 @@ body {
 		&-center 					{ align-items: center; justify-content: center; }
 	}
 
-
-	.d-flex 				{display: flex; }
-	.d-block 				{display: block; }
-	.d-inline-block {display: inline-block; }
-	.d-inline-flex 	{display: inline-flex; }	
-	.d-grid 				{display: grid; }	
-	.d-none 				{display: none; }
-
 	.align-self-start {
 		align-self: start;
 	}

package/src/styles/base/shadow_transitions_hover_refactor.scss

@@ -40,6 +40,26 @@ body {
 	.hover-appeal-1 {&:hover {transform: translateY(-10px) scale(1.1) rotate(-5deg); } } 
 
 
+	.bs-thin{box-shadow:0 2px 4px rgba(var(--dark),0.05),0 4px 6px rgba(var(--dark),0.08),0 6px 8px rgba(var(--dark),0.10);}
+	.bs-thin-hover:hover{box-shadow:0 4px 8px rgba(var(--dark),0.10),0 8px 12px rgba(var(--dark),0.10),0 12px 16px rgba(var(--dark),0.10);}
+
+	.bs-small{box-shadow:0 5px 10px rgba(var(--dark),0.05),0 10px 15px rgba(var(--dark),0.10),0 15px 25px rgba(var(--dark),0.10),0 0 5px rgba(var(--white),0),0 -10px 20px rgba(var(--white),0.10),0 -20px 30px rgba(var(--white),0.10),0 -30px 50px rgba(var(--white),0.10);}
+	.bs-small-hover:hover{box-shadow:0 20px 40px rgba(var(--dark),0.10),0 40px 60px rgba(var(--dark),0.10),0 60px 80px rgba(var(--dark),0.10);}
+
+	.bs-regular{box-shadow:0 10px 20px rgba(var(--dark),0.10),0 20px 30px rgba(var(--dark),0.10),0 30px 50px rgba(var(--dark),0.10),0 0 5px rgba(var(--white),0),0 -10px 20px rgba(var(--white),0.10),0 -20px 30px rgba(var(--white),0.10),0 -30px 50px rgba(var(--white),0.10);}
+	.bs-regular-hover:hover{box-shadow:0 25px 50px rgba(var(--dark),0.10),0 50px 75px rgba(var(--dark),0.10),0 75px 100px rgba(var(--dark),0.10);}
+
+	.bs-medium{box-shadow:0 0 7px rgba(var(--dark),0.05),0 15px 25px rgba(var(--dark),0.10),0 25px 40px rgba(var(--dark),0.10),0 40px 70px rgba(var(--dark),0.10);}
+	.bs-medium-hover:hover{box-shadow:0 0 15px rgba(var(--dark),0.10),0 30px 60px rgba(var(--dark),0.10),0 60px 90px rgba(var(--dark),0.10),0 90px 120px rgba(var(--dark),0.10);}
+
+	.bs-semi{box-shadow:0 0 10px rgba(var(--dark),0.05),0 20px 35px rgba(var(--dark),0.10),0 35px 55px rgba(var(--dark),0.10),0 55px 95px rgba(var(--dark),0.10);}
+	.bs-semi-hover:hover{box-shadow:0 0 18px rgba(var(--dark),0.10),0 40px 80px rgba(var(--dark),0.10),0 80px 120px rgba(var(--dark),0.10),0 120px 200px rgba(var(--dark),0.10);}
+
+	.bs-big{box-shadow:0 0 15px rgba(var(--dark),0.05),0 30px 50px rgba(var(--dark),0.10),0 50px 80px rgba(var(--dark),0.10),0 80px 130px rgba(var(--dark),0.10);}
+	.bs-big-hover:hover{box-shadow:0 0 25px rgba(var(--dark),0.10),0 60px 100px rgba(var(--dark),0.10),0 100px 150px rgba(var(--dark),0.10),0 150px 250px rgba(var(--dark),0.10);}
+
+
+
 	// Shadows 
 	.bs-red { box-shadow: 0 0 5px red; }
 
@@ -75,57 +95,6 @@ body {
 	  box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.4), 0 20px 30px rgba(0,0,0,0.5);
 	}
 
-	/* тень с эффектом расплывания */
-	.bs-blur-light {
-		box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 10px 15px rgba(0,0,0,0.15), 0 15px 25px rgba(0,0,0,0.2),0 0 5px rgba(255,255,255,0.05), 0 -10px 20px rgba(255,255,255,0.2), 0 -20px 30px rgba(255,255,255,0.25), 0 -30px 50px rgba(255,255,255,0.3);
-	}
-
-	.bs-blur-light-hover {
-	  &:hover {
-	    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 40px 60px rgba(0,0,0,0.35), 0 60px 80px rgba(0,0,0,0.4);
-	  }
-	}
-
-	.bs-blur-regular {
-		box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 20px 30px rgba(0,0,0,0.25), 0 30px 50px rgba(0,0,0,0.3),0 0 5px rgba(255,255,255,0.05), 0 -10px 20px rgba(255,255,255,0.2), 0 -20px 30px rgba(255,255,255,0.25), 0 -30px 50px rgba(255,255,255,0.3);
-	}
-
-	.bs-blur-regular-hover {
-	  &:hover {
-	    box-shadow: 0 25px 50px rgba(0,0,0,0.5), 0 50px 75px rgba(0,0,0,0.7), 0 75px 100px rgba(0,0,0,0.8);
-	  }
-	}
-
-	.bs-blur-medium {
-		box-shadow: 0 0 7px rgba(0,0,0,0.1), 0 15px 25px rgba(0,0,0,0.4), 0 25px 40px rgba(0,0,0,0.5), 0 40px 70px rgba(0,0,0,0.6);
-	}
-
-	.bs-blur-medium-hover {
-	  &:hover {
-	    box-shadow: 0 0 15px rgba(0,0,0,0.2), 0 30px 60px rgba(0,0,0,0.5), 0 60px 90px rgba(0,0,0,0.7), 0 90px 120px rgba(0,0,0,0.8);
-	  }
-	}
-
-	.bs-blur-semi {
-		box-shadow: 0 0 10px rgba(0,0,0,0.1), 0 20px 35px rgba(0,0,0,0.4), 0 35px 55px rgba(0,0,0,0.5), 0 55px 95px rgba(0,0,0,0.6);
-	}
-
-	.bs-blur-semi-hover {
-	  &:hover {
-			box-shadow: 0 0 18px rgba(0,0,0,0.2), 0 40px 80px rgba(0,0,0,0.5), 0 80px 120px rgba(0,0,0,0.7), 0 120px 200px rgba(0,0,0,0.8);
-		}
-	}
-
-	.bs-blur-heavy {
-		box-shadow: 0 0 15px rgba(0,0,0,0.1), 0 30px 50px rgba(0,0,0,0.4), 0 50px 80px rgba(0,0,0,0.5), 0 80px 130px rgba(0,0,0,0.6);
-	}
-
-	.bs-blur-heavy-hover {
-		&:hover {
-		box-shadow: 0 0 25px rgba(0,0,0,0.2), 0 60px 100px rgba(0,0,0,0.5), 0 100px 150px rgba(0,0,0,0.7), 0 150px 250px rgba(0,0,0,0.8);
-		}
-	}
-
 
 
 	/* тень с эффектом перекрестия */

package/src/styles/config.scss

@@ -118,7 +118,7 @@
 	// Black and white colors
 	--black:  0,0,0;
 	@include 	generate-vars-color('black');
-	--dark:   36,36,36; 	
+	--dark:   70,80,70; 	
 	@include 	generate-vars-color('dark');
 	--grey:   180,180,180; 
 	@include 	generate-vars-color('grey');
@@ -293,6 +293,49 @@ $flex-direction: (
   'column': column
 );
 
+$position-values: (
+  'relative': relative,
+  'absolute': absolute,
+  'fixed': fixed,
+  'sticky': sticky,
+  'static': static
+);
+
+$overflow-values: (
+  'hidden': hidden,
+  'scroll': scroll,
+  'auto': auto,
+  'visible': visible,
+  'clip': clip,
+  'initial': initial,
+  'inherit': inherit,
+  'unset': unset,
+  'revert': revert,
+  'revert-layer': revert-layer
+);
+
+$overflow-xy-values: (
+  'hidden': hidden,
+  'scroll': scroll,
+  'auto': auto,
+  'visible': visible,
+  'clip': clip
+);
+
+$display-values: (
+  'block': block,
+  'inline': inline,
+  'inline-block': inline-block,
+  'flex': flex,
+  'inline-flex': inline-flex,
+  'grid': grid,
+  'inline-grid': inline-grid,
+  'none': none,
+  'table': table,
+  'table-row': table-row,
+  'table-cell': table-cell
+);
+
 $order: (
   '1': 1,
   '2': 2,
@@ -346,6 +389,13 @@ body {
 	@include generate-utility-classes('flex', 'flex-direction', null, $flex-direction, $breakpoints);
 	@include generate-utility-classes('order', 'order', null, $order, $breakpoints);
 
+	@include generate-utility-classes('pos', 'position', null, $position-values, $breakpoints);
+  @include generate-utility-classes('o', 'overflow', null, $overflow-values, $breakpoints);
+  @include generate-utility-classes('o-x', 'overflow-x', null, $overflow-xy-values, $breakpoints);
+  @include generate-utility-classes('o-y', 'overflow-y', null, $overflow-xy-values, $breakpoints);
+  @include generate-utility-classes('d', 'display', null, $display-values, $breakpoints);
+
+
 	@include generate-utility-classes('cols', 'grid-template-columns', null, $cols, $breakpoints);
 	
 	@include generate-bg-classes('bg-main', 	'main');