@ozdao/prometheus-framework 0.1.99 → 0.2.0

package/src/modules/wallet/components/pages/Wallet.vue

@@ -1,20 +1,20 @@
 <template>
   <section class="pd-big">
-    <h1 class="mn-small">
+    <h1 class="mn-b-small">
       Your Wallet
     </h1>
 
-    <p class="mn-semi p-big">
+    <p class="mn-b-semi p-big">
       Earn Weeder Token Crypto with buying our weed, use it as money when buying our products or withdraw and trade
     </p>
 
-    <div class="mn-semi flex-nowrap flex gap-thin">
+    <div class="mn-b-semi flex-nowrap flex gap-thin">
       <div 
         v-if="!account"
         class="w-100 pd-medium radius-medium t-center bg-grey"
       >
-        <h3 class="mn-small">Make first order and start earning Weeder Token </h3>
-        <!-- <p class="w-max-25r p-big t-transp mn-small">You can also connect a wallet in advance, to which you can withdraw your earned OZET</p> -->
+        <h3 class="mn-b-small">Make first order and start earning Weeder Token </h3>
+        <!-- <p class="w-max-25r p-big t-transp mn-b-small">You can also connect a wallet in advance, to which you can withdraw your earned OZET</p> -->
         <button class="mn-l-auto mn-r-auto bg-main button">Explore marketplace</button>
       </div>
 
@@ -22,9 +22,9 @@
         v-if="account"
         class="w-100 pd-medium radius-medium bg-grey"
       >
-        <p class="h4 mn-thin">You own: </p>
-        <h3 class="mn-small">0.14% of Weeder</h3>
-        <!-- <p class="p-big mn-small">0.0032 WDT</p> -->
+        <p class="h4 mn-b-thin">You own: </p>
+        <h3 class="mn-b-small">0.14% of Weeder</h3>
+        <!-- <p class="p-big mn-b-small">0.0032 WDT</p> -->
         <button class="w-100 bg-main button">Get More</button>
       </div>
 
@@ -32,20 +32,20 @@
         v-if="account"
         class="w-100 pd-medium radius-medium bg-grey"
       >
-         <p class="h4 mn-thin">You earn: </p>
-        <h3 class="mn-small">245.43 WDT</h3>
-        <!-- <p class="p-big mn-small">0.0032 WDT</p> -->
+         <p class="h4 mn-b-thin">You earn: </p>
+        <h3 class="mn-b-small">245.43 WDT</h3>
+        <!-- <p class="p-big mn-b-small">0.0032 WDT</p> -->
         <button class="w-100 bg-main button">Get More</button>
       </div>
 
       <div class="w-50 bg-black radius-semi pd-medium t-white">
-        <p class="h4 mn-thin">Your Metamask</p>
+        <p class="h4 mn-b-thin">Your Metamask</p>
         
-        <div v-if="account" class="mn-small pd-small br-solid br-1px br-white-transp-10 radius-small">
+        <div v-if="account" class="mn-b-small pd-small br-solid br-1px br-white-transp-10 radius-small">
           {{account}}
         </div>
 
-        <p v-if="!account"  class="p-medium t-transp mn-small">Connect Metamask to withdrawal your earnings.</p>
+        <p v-if="!account"  class="p-medium t-transp mn-b-small">Connect Metamask to withdrawal your earnings.</p>
 
         <button 
           v-if="!account" 
@@ -68,7 +68,7 @@
 
 
     <h3
-      class="mn-small"
+      class="mn-b-small"
     >
       Incomes
     </h3>
@@ -98,8 +98,8 @@
           target: 'ef34dsdase4389snjnu (_id)'
         }]"
       >
-        <h3 class="mn-small">+ {{income.balance}} WDT</h3>
-        <p class="p-small mn-small">For {{income.reason}} {{income.target}}</p>
+        <h3 class="mn-b-small">+ {{income.balance}} WDT</h3>
+        <p class="p-small mn-b-small">For {{income.reason}} {{income.target}}</p>
       </div>
     </section>
 

package/src/styles/base/all.scss

@@ -1,5 +1,6 @@
 @import './backgrounds';
 @import './borders';
+@import './border-radius';
 @import './cursors';
 @import './hovers';
 @import './positions';
@@ -7,6 +8,34 @@
 @import './shadows';
 @import './transitions';
 
+// GENERIC NEED TO CREATE GENERATOR
+@import './height';
+
+body { 
+	.w-auto { width: auto  !important; }
+	.w-min 	{ width: min-content  !important; }
+	.w-fit 	{ width: fit-content  !important; }
+	.w-max 	{ width: max-content  !important; }
+	
+	.h-auto { height: auto  !important; }
+	.h-min 	{ height: min-content  !important; }
+	.h-fit 	{ height: fit-content  !important; }
+	.h-max 	{ height: max-content  !important; }
+
+	.w-m-66r { width: min(100%, 66rem); }
+	.w-m-60r { width: min(100%, 60rem); }
+	.w-m-50r { width: min(100%, 50rem); }
+	.w-m-40r { width: min(100%, 40rem); }
+	.w-m-33r { width: min(100%, 33rem); }
+	.w-m-25r { width: min(100%, 25rem); }
+	.w-m-20r { width: min(100%, 20rem); }
+	.w-m-15r { width: min(100%, 15rem); }
+	.w-m-10r { width: min(100%, 10rem); }
+	.w-m-5r  { width: min(100%, 5rem); 	}
+	.w-m-3r  { width: min(100%, 3rem); 	}
+	.w-m-2r  { width: min(100%, 2rem); 	}
+}
+
 body { 
 	// Text Brands
 	.t-youtube 		{ color: rgba(var(--youtube), 1); 	}
@@ -40,277 +69,6 @@ body {
 	.i-base  		{ width: 1rem;     				height: 1rem }
 	// Extra 
 	.i-circle   { padding: var(--small); border-radius: var(--extra); background: var(--light-main); overflow: visible; }
-	// Padding Clasess
-	.pd-extra   		{ padding: var(--extra);  		}
-	.pd-big   			{ padding: var(--big);  			}
-	.pd-semi  			{ padding: var(--semi);   		} 
-	.pd-medium  		{ padding: var(--medium); 		}
-	.pd-regular 		{ padding: var(--regular);		}
-	.pd-small 			{ padding: var(--small);  		} 
-	.pd-thin  			{ padding: var(--thin);   		} 
-	.pd-micro  			{ padding: var(--micro);   		} 
-	.pd-zero  			{ padding: 0;   				}
-	// Padding Clasess Top
-	.pd-t-extra   	{ padding-top: var(--extra);  }
-	.pd-t-big   		{ padding-top: var(--big);  	}
-	.pd-t-semi  		{ padding-top: var(--semi);   } 
-	.pd-t-medium  	{ padding-top: var(--medium); }
-	.pd-t-regular 	{ padding-top: var(--regular);}
-	.pd-t-small 		{ padding-top: var(--small);  } 
-	.pd-t-thin  		{ padding-top: var(--thin);   } 
-	.pd-t-zero  		{ padding-top: 0;   		}  
-	// Padding Clasess bottom
-	.pd-b-extra   	{ padding-bottom: var(--extra);  	}
-	.pd-b-big   		{ padding-bottom: var(--big);  		}
-	.pd-b-semi  		{ padding-bottom: var(--semi);   	} 
-	.pd-b-medium  	{ padding-bottom: var(--medium); 	}
-	.pd-b-regular 	{ padding-bottom: var(--regular);	}
-	.pd-b-small 		{ padding-bottom: var(--small);  	} 
-	.pd-b-thin  		{ padding-bottom: var(--thin);   	} 
-	.pd-b-zero  		{ padding-bottom: 0;   			}  
-	// Padding Clasess Right
-	.pd-r-extra   	{ padding-right: var(--extra);  }
-	.pd-r-big   		{ padding-right: var(--big);  	}
-	.pd-r-semi  		{ padding-right: var(--semi);   } 
-	.pd-r-medium  	{ padding-right: var(--medium); }
-	.pd-r-regular 	{ padding-right: var(--regular);}
-	.pd-r-small 		{ padding-right: var(--small);  } 
-	.pd-r-thin  		{ padding-right: var(--thin);   } 
-	.pd-r-zero  		{ padding-right: 0;   					}
-	// Padding Clasess Left
-	.pd-l-extra   	{ padding-left: var(--extra);  }
-	.pd-l-big   		{ padding-left: var(--big);  	}
-	.pd-l-semi  		{ padding-left: var(--semi);   } 
-	.pd-l-medium  	{ padding-left: var(--medium); }
-	.pd-l-regular 	{ padding-left: var(--regular);}
-	.pd-l-small 		{ padding-left: var(--small);  } 
-	.pd-l-thin  		{ padding-left: var(--thin);   } 
-	.pd-l-zero  		{ padding-left: 0;   		}    
-	// Extra padding: 
-	.pd-thin-big		{ padding: var(--thin) var(--big); 	}
-	.pd-small-big		{ padding: var(--small) var(--big); }
-	.pd-semi-big		{ padding: var(--semi) var(--big); 	}
-	// Margin Classes
-	.mn-extra   		{ margin-bottom: var(--extra);  		}
-	.mn-big   			{ margin-bottom: var(--big);    		}
-	.mn-semi  			{ margin-bottom: var(--semi);   		}
-	.mn-medium  		{ margin-bottom: var(--medium);   	}
-	.mn-regular 		{ margin-bottom: var(--regular);  	}
-	.mn-small   		{ margin-bottom: var(--small);  		}
-	.mn-thin  			{ margin-bottom: var(--thin);   		} 
-	.mn-micro  { margin-bottom: var(--micro); } 
-	.mn-center 			{ margin-left: auto; margin-right: auto; }
-	// Margin Top
-	.mn-t-auto  		{ margin-top: auto;   			}
-	.mn-t-extra   	{ margin-top: var(--extra);  			}
-	.mn-t-big   		{ margin-top: var(--big);    			}
-	.mn-t-semi  		{ margin-top: var(--semi);   			}
-	.mn-t-medium  	{ margin-top: var(--medium);   		}
-	.mn-t-regular 	{ margin-top: var(--regular);  		}
-	.mn-t-small   	{ margin-top: var(--small); 	 		}
-	.mn-t-thin  		{ margin-top: var(--thin);   			} 
-	.mn-t-micro { margin-top: var(--micro);  } 
-	// Margin Classes Left
-	.mn-l-extra   	{ margin-left: var(--extra);		}
-	.mn-l-big    		{ margin-left: var(--big);   	}
-	.mn-l-semi    	{ margin-left: var(--semi);  	}
-	.mn-l-medium  	{ margin-left: var(--medium);	}
-	.mn-l-regular 	{ margin-left: var(--regular); }
-	.mn-l-small   	{ margin-left: var(--small);   }
-	.mn-l-thin    	{ margin-left: var(--thin);  	}
-	// Margin Classes Right
-	.mn-r-extra   	{ margin-right: var(--extra);		}
-	.mn-r-big    		{ margin-right: var(--big);   	}
-	.mn-r-semi    	{ margin-right: var(--semi);  	}
-	.mn-r-medium  	{ margin-right: var(--medium);	}
-	.mn-r-regular 	{ margin-right: var(--regular); }
-	.mn-r-small   	{ margin-right: var(--small);   }
-	.mn-r-thin    	{ margin-right: var(--thin);  	}
-	.mn-r-micro    	{ margin-right: var(--micro);  	}
-	// Auto
-	.mn-auto    		{ margin: auto;  					}
-	.mn-t-auto    	{ margin-top: auto;  			}
-	.mn-b-auto    	{ margin-bottom: auto;  	}
-	.mn-l-auto    	{ margin-left: auto;  		}
-	.mn-r-auto    	{ margin-right: auto;  		}
-	// Border radius
-	.radius-100p 		{ 	border-radius: 100% 							}
-	.radius-extra 	{ 	border-radius: var(--extra) 			}
-	.radius-big 		{ 	border-radius: var(--big) 				}
-	.radius-semi 		{ 	border-radius: var(--semi) 				}	
-	.radius-medium 	{ 	border-radius: var(--medium) 			}
-	.radius-regular { 	border-radius: var(--regular) 		}
-	.radius-small 	{ 	border-radius: var(--small) 		 	}
-	.radius-thin 		{ 	border-radius: var(--thin) 		 		}
-	// Corner
-	/* Top-Left Radius */
-	.radius-tl-extra 		{ border-top-left-radius: var(--extra); }
-	.radius-tl-big 		{ border-top-left-radius: var(--big); }
-	.radius-tl-semi 		{ border-top-left-radius: var(--semi); }
-	.radius-tl-medium 	{ border-top-left-radius: var(--medium); }
-	.radius-tl-regular 	{ border-top-left-radius: var(--regular); }
-	.radius-tl-small 		{ border-top-left-radius: var(--small); }
-	.radius-tl-thin 		{ border-top-left-radius: var(--thin); }
-
-	/* Top-Right Radius */
-	.radius-tr-extra 		{ border-top-right-radius: var(--extra); }
-	.radius-tr-big 		{ border-top-right-radius: var(--big); }
-	.radius-tr-semi 		{ border-top-right-radius: var(--semi); }
-	.radius-tr-medium 	{ border-top-right-radius: var(--medium); }
-	.radius-tr-regular 	{ border-top-right-radius: var(--regular); }
-	.radius-tr-small 		{ border-top-right-radius: var(--small); }
-	.radius-tr-thin 		{ border-top-right-radius: var(--thin); }
-
-	/* Bottom-Right Radius */
-	.radius-br-extra 		{ border-bottom-right-radius: var(--extra); }
-	.radius-br-big 		{ border-bottom-right-radius: var(--big); }
-	.radius-br-semi 		{ border-bottom-right-radius: var(--semi); }
-	.radius-br-medium 	{ border-bottom-right-radius: var(--medium); }
-	.radius-br-regular 	{ border-bottom-right-radius: var(--regular); }
-	.radius-br-small 		{ border-bottom-right-radius: var(--small); }
-	.radius-br-thin 		{ border-bottom-right-radius: var(--thin); }
-
-	/* Bottom-Left Radius */
-	.radius-bl-extra 		{ border-bottom-left-radius: var(--extra); }
-	.radius-bl-big 		{ border-bottom-left-radius: var(--big); }
-	.radius-bl-semi 		{ border-bottom-left-radius: var(--semi); }
-	.radius-bl-medium 	{ border-bottom-left-radius: var(--medium); }
-	.radius-bl-regular 	{ border-bottom-left-radius: var(--regular); }
-	.radius-bl-small 		{ border-bottom-left-radius: var(--small); }
-	.radius-bl-thin 		{ border-bottom-left-radius: var(--thin); }
-
-
-
-	// height Clasess
-	.h-100 { height: 100% !important; }
-	.h-80  { height: 80%  !important; }
-	.h-75  { height: 75%  !important; }
-	.h-66  { height: 66%  !important; }
-	.h-50  { height: 50%  !important; }
-	.h-40  { height: 40%  !important; }
-	.h-33  { height: 33%  !important; }
-	.h-25  { height: 25%  !important; }
-	.h-20  { height: 20%  !important; }
-	.h-15  { height: 15%  !important; }
-	.h-10  { height: 10%  !important; }
-	// VH
-	.h-100vh { height: 100vh !important; }
-	.h-80vh { height: 80vh !important; }
-	.h-75vh { height: 75vh !important; }
-	.h-66vh { height: 66vh !important; }
-	.h-50vh { height: 50vh !important; }
-	.h-40vh { height: 40vh !important; }
-	.h-33vh { height: 33vh !important; }
-	.h-25vh { height: 25vh !important; }
-	.h-20vh { height: 20vh !important; }
-	.h-15vh { height: 15vh !important; }
-	.h-10vh { height: 10vh !important; }
-	// Rem
-	.h-50r 	{ height: 50rem; }
-	.h-30r { height: 30rem; }
-	.h-20r { height: 20rem; }
-	.h-10r { height: 10rem; }
-	.h-8r { height: 8rem; }
-	.h-5r { height: 5rem; }
-	.h-4r { height: 4rem; }
-	.h-3r { height: 3rem; }
-	.h-2r { height: 2rem; }
-	.h-1r { height: 1rem; }
-	.h-cols-2  { grid-row-start: 1; grid-row-end: 5; } 
-	// Props
-	.h-auto { height: auto  !important; }
-	.h-fit  { height: fit-content  !important; }
-	// Min height
-	.min-h-100p { min-height: min(100%, 100%) !important; }
-	.min-h-90p { min-height: min(100%, 90%) !important; }
-	.min-h-80p { min-height: min(100%, 80%) !important; }
-	.min-h-70p { min-height: min(100%, 70%) !important; }
-	.min-h-60p { min-height: min(100%, 60%) !important; }
-	.min-h-50p { min-height: min(100%, 50%) !important; }
-	.min-h-40p { min-height: min(100%, 40%) !important; }
-	.min-h-30p { min-height: min(100%, 30%) !important; }
-	.min-h-20p { min-height: min(100%, 20%) !important; }
-	.min-h-10p { min-height: min(100%, 10%) !important; }
-	// Min height in vh
-	.min-h-100vh{ min-height: min(100vh, 100%) !important; }
-	.min-h-90vh { min-height: min(100vh, 90%) !important; }
-	.min-h-80vh { min-height: min(100vh, 80%) !important; }
-	.min-h-70vh { min-height: min(100vh, 70%) !important; }
-	.min-h-60vh { min-height: min(100vh, 60%) !important; }
-	.min-h-50vh { min-height: min(100vh, 50%) !important; }
-	.min-h-40vh { min-height: min(100vh, 40%) !important; }
-	.min-h-30vh { min-height: min(100vh, 30%) !important; }
-	.min-h-20vh { min-height: min(100vh, 20%) !important; }
-	.min-h-10vh { min-height: min(100vh, 10%) !important; }
-	// Max height
-	// %
-	.h-m-100p{ height: min(100%, 100%) !important; }
-	.h-m-90p { height: min(100%, 90%) !important; }
-	.h-m-80p { height: min(100%, 80%) !important; }
-	.h-m-70p { height: min(100%, 70%) !important; }
-	.h-m-60p { height: min(100%, 60%) !important; }
-	.h-m-50p { height: min(100%, 50%) !important; }
-	.h-m-40p { height: min(100%, 40%) !important; }
-	.h-m-30p { height: min(100%, 30%) !important; }
-	.h-m-20p { height: min(100%, 20%) !important; }
-	.h-m-10p { height: min(100%, 10%) !important; }
-	// rem
-	.h-m-66r { height: min(100%, 66rem) !important; }
-	.h-m-60r { height: min(100%, 60rem) !important; }
-	.h-m-50r { height: min(100%, 50rem) !important; }
-	.h-m-40r { height: min(100%, 40rem)	!important; }
-	.h-m-33r { height: min(100%, 33rem)	!important; }
-	.h-m-25r { height: min(100%, 25rem)	!important; }
-	.h-m-20r { height: min(100%, 20rem)	!important; }
-	.h-m-15r { height: min(100%, 15rem)	!important; }
-	.h-m-10r { height: min(100%, 10rem)	!important; }
-	.h-m-5r  { height: min(100%, 5rem)	!important; }
-	.h-m-3r  { height: min(100%, 3rem)	!important; }
-	.h-m-2r  { height: min(100%, 2rem)	!important; }
-	// Width Clasess
-	.w-100{ width: 100% !important; }
-	.w-80 { width: 80%  !important; }
-	.w-75 { width: 75%  !important; }
-	.w-66 { width: 66%  !important; }
-	.w-50 { width: 50%  !important; }
-	.w-40 { width: 40%  !important; }
-	.w-33 { width: 33%  !important; }
-	.w-25 { width: 25%  !important; }
-	.w-20 { width: 20%  !important; }
-	.w-15 { width: 15%  !important; }
-	.w-10 { width: 10%  !important; }
-	.w-cols-2  {grid-column-start: 1; grid-column-end: 5; } 
-	// REM
-	.w-50r 	{ width: 50rem; }
-	.w-30r 	{ width: 30rem; }
-	.w-25r 	{ width: 25rem; }
-	.w-20r 	{ width: 20rem; }
-	.w-15r 	{ width: 15rem; }
-	.w-10r 	{ width: 10rem; }
-	.w-8r 	{ width: 8rem; }
-	.w-4r 	{ width: 5rem; }
-	.w-4r 	{ width: 4rem; }
-	.w-3r 	{ width: 3rem; }
-	.w-2r 	{ width: 2rem; }
-	.w-1r 	{ width: 1rem; }
-	// Props
-	.w-auto { width: auto  !important; }
-	.w-min 	{ width: min-content  !important; }
-	.w-fit 	{ width: fit-content  !important; }
-	.w-max 	{ width: max-content  !important; }
-	// Max width
-	.w-m-66r { width: min(100%, 66rem); }
-	.w-m-60r { width: min(100%, 60rem); }
-	.w-m-50r { width: min(100%, 50rem); }
-	.w-m-40r { width: min(100%, 40rem); }
-	.w-m-33r { width: min(100%, 33rem); }
-	.w-m-25r { width: min(100%, 25rem); }
-	.w-m-20r { width: min(100%, 20rem); }
-	.w-m-15r { width: min(100%, 15rem); }
-	.w-m-10r { width: min(100%, 10rem); }
-	.w-m-5r  { width: min(100%, 5rem); 	}
-	.w-m-3r  { width: min(100%, 3rem); 	}
-	.w-m-2r  { width: min(100%, 2rem); 	}
 	// Aspect ratio
 	.aspect-16x9 	{ aspect-ratio: 16 / 9; }
 	.aspect-4x3 	{ aspect-ratio: 4 / 3; 	}
@@ -328,65 +86,65 @@ body {
 	// //////////////////////////////////////// 
 	// Layout
 	// //////////////////////////////////////// 
-	.o-hidden {overflow: hidden; }
-	.o-scroll {overflow: scroll; }
-	.o-auto {overflow: auto; }
-	.o-visible {overflow: visible; } 
+	.o-hidden 	{overflow: hidden; }
+	.o-scroll 	{overflow: scroll; }
+	.o-auto 		{overflow: auto; }
+	.o-visible 	{overflow: visible; } 
 	// Display
-	.d-flex {display: flex; }
-  	.d-block {display: block; }
-  	.d-inline-block {display: inline-block; }
-  	.d-grid {display: grid; }
-  	// Flex
+	.d-flex 				{display: flex; }
+	.d-block 				{display: block; }
+	.d-inline-block {display: inline-block; }
+	.d-grid 				{display: grid; }
+	// Flex
 	.flex {
 		display: flex;
 		position: relative;
 		flex-wrap: wrap;
-		&-row 				{ flex-direction: row; }
-		&-column 			{ flex-direction: column; }
-		&-h-center 			{ justify-content: center; }
-		&-v-center 			{ align-items: center; }
-		&-center 			{ align-items: center; justify-content: center; }
-		&-stretch 			{ align-items: stretch }
-		&-nowrap 			{ flex-wrap: nowrap; } 
-		&-wrap 				{ flex-wrap: wrap; }
+		&-row 						{ flex-direction: row; }
+		&-column 					{ flex-direction: column; }
+		&-h-center 				{ justify-content: center; }
+		&-v-center 				{ align-items: center; }
+		&-center 					{ align-items: center; justify-content: center; }
+		&-stretch 				{ align-items: stretch }
+		&-nowrap 					{ flex-wrap: nowrap; } 
+		&-wrap 						{ flex-wrap: wrap; }
 		&-justify-start 	{ justify-content: flex-start; }
-	    &-justify-center	{ justify-content: center; }
-	    &-justify-end 		{ justify-content: flex-end; }
-	    &-justify-between 	{ justify-content: space-between; }
-	    &-justify-around 	{ justify-content: space-around; }
-	    &-items-start 		{ align-items: flex-start; }
-	    &-items-center 		{ align-items: center; }
-	    &-items-end 		{ align-items: flex-end; }
-	    &-items-stretch 	{ align-items: stretch; }
-	    &-items-baseline 	{ align-items: baseline; } 
+    &-justify-center	{ justify-content: center; }
+    &-justify-end 		{ justify-content: flex-end; }
+    &-justify-between { justify-content: space-between; }
+    &-justify-around 	{ justify-content: space-around; }
+    &-items-start 		{ align-items: flex-start; }
+    &-items-center 		{ align-items: center; }
+    &-items-end 			{ align-items: flex-end; }
+    &-items-stretch 	{ align-items: stretch; }
+    &-items-baseline 	{ align-items: baseline; } 
 	}
 
 	.flex-child {	
 		&-noresize 		{ flex: 0 } 
-		&-grow-0 		{ flex-grow: 0; }
-		&-grow-1 		{ flex-grow: 1; }
-		&-grow-2 		{ flex-grow: 2; }
-		&-grow-3 		{ flex-grow: 3; }
+		&-grow-0 			{ flex-grow: 0; }
+		&-grow-1 			{ flex-grow: 1; }
+		&-grow-2 			{ flex-grow: 2; }
+		&-grow-3 			{ flex-grow: 3; }
 		&-shrink-0 		{ flex-shrink: 0; }
 		&-shrink-1 		{ flex-shrink: 1; }
 		&-basis-auto	{ flex-basis: auto; }
 		&-basis-0 		{ flex-basis: 0; }
-		&-1 			{ flex: 1; }
-		&-auto 			{ flex: auto; }
+		&-1 					{ flex: 1; }
+		&-auto 				{ flex: auto; }
 		&-initial 		{ flex: initial; }
-		&-none 			{ flex: none; }
-		&-order-0       { order: 0; }
-		&-order-1       { order: 1; }
-		&-order-2       { order: 2; }
-		&-order-3       { order: 3; }
-		&-order-4       { order: 4; }
-		&-order-5       { order: 5; }
-		&-order-6       { order: 6; }
-		&-order-7       { order: 7; }
-		&-order-        { order: 8; }
-		&-order-9       { order: 9; }
-		&-order-last    { order: 9999; }
+		&-none 				{ flex: none; }
+		&-order-0     { order: 0; }
+		&-order-1     { order: 1; }
+		&-order-2     { order: 2; }
+		&-order-3     { order: 3; }
+		&-order-4     { order: 4; }
+		&-order-5     { order: 5; }
+		&-order-6     { order: 6; }
+		&-order-7     { order: 7; }
+		&-order-      { order: 8; }
+		&-order-9     { order: 9; }
+		&-order-last  { order: 9999; }
 	}
 
 	// COLUMNS AND ROWS
@@ -411,17 +169,17 @@ body {
 	.cols-2-4_1 {display: grid; grid-template-columns: 4fr 1fr;	}
 
 	// Gaps
-	.gap-extra 			{ gap: var(--extra); }
+	.gap-extra 		{ gap: var(--extra); }
 	.gap-big 			{ gap: var(--big); }
-	.gap-semi 			{ gap: var(--semi); }
-	.gap-medium 		{ gap: var(--medium); }
-	.gap-regular 		{ gap: var(--regular); }
-	.gap-small 			{ gap: var(--small); }
-	.gap-thin 			{ gap: var(--thin); }
-	.gap-micro 	{ gap: var(--micro); }
-	.gap-zero 			{ gap: 0; }
+	.gap-semi 		{ gap: var(--semi); }
+	.gap-medium 	{ gap: var(--medium); }
+	.gap-regular	{ gap: var(--regular); }
+	.gap-small 		{ gap: var(--small); }
+	.gap-thin 		{ gap: var(--thin); }
+	.gap-micro 		{ gap: var(--micro); }
+	.gap-zero 		{ gap: 0; }
 	// Z-INDEX
-	.z-index-0-negative { z-index: -10;  }
+
 	.z-index-0 	{z-index: 0;  }
 	.z-index-1 	{z-index: 10; }
 	.z-index-2 	{z-index: 20; }
@@ -433,4 +191,5 @@ body {
 	.z-index-8 	{z-index: 80; }
 	.z-index-9 	{z-index: 90; }
 	.z-index-10	{z-index: 100; }
+	.z-index-1-negative { z-index: -10;  }
 }

package/src/styles/base/border-radius.scss

@@ -0,0 +1,47 @@
+body { 
+	// Margin Classes
+	.radius-100p 		{ 	border-radius: 100% 							}
+	.radius-extra 	{ 	border-radius: var(--extra) 			}
+	.radius-big 		{ 	border-radius: var(--big) 				}
+	.radius-semi 		{ 	border-radius: var(--semi) 				}	
+	.radius-medium 	{ 	border-radius: var(--medium) 			}
+	.radius-regular { 	border-radius: var(--regular) 		}
+	.radius-small 	{ 	border-radius: var(--small) 		 	}
+	.radius-thin 		{ 	border-radius: var(--thin) 		 		}
+	// Corner
+	/* Top-Left Radius */
+	.radius-tl-extra 		{ border-top-left-radius: var(--extra); }
+	.radius-tl-big 			{ border-top-left-radius: var(--big); }
+	.radius-tl-semi 		{ border-top-left-radius: var(--semi); }
+	.radius-tl-medium 	{ border-top-left-radius: var(--medium); }
+	.radius-tl-regular 	{ border-top-left-radius: var(--regular); }
+	.radius-tl-small 		{ border-top-left-radius: var(--small); }
+	.radius-tl-thin 		{ border-top-left-radius: var(--thin); }
+
+	/* Top-Right Radius */
+	.radius-tr-extra 		{ border-top-right-radius: var(--extra); }
+	.radius-tr-big 			{ border-top-right-radius: var(--big); }
+	.radius-tr-semi 		{ border-top-right-radius: var(--semi); }
+	.radius-tr-medium 	{ border-top-right-radius: var(--medium); }
+	.radius-tr-regular 	{ border-top-right-radius: var(--regular); }
+	.radius-tr-small 		{ border-top-right-radius: var(--small); }
+	.radius-tr-thin 		{ border-top-right-radius: var(--thin); }
+
+	/* Bottom-Right Radius */
+	.radius-br-extra 		{ border-bottom-right-radius: var(--extra); }
+	.radius-br-big 			{ border-bottom-right-radius: var(--big); }
+	.radius-br-semi 		{ border-bottom-right-radius: var(--semi); }
+	.radius-br-medium 	{ border-bottom-right-radius: var(--medium); }
+	.radius-br-regular 	{ border-bottom-right-radius: var(--regular); }
+	.radius-br-small 		{ border-bottom-right-radius: var(--small); }
+	.radius-br-thin 		{ border-bottom-right-radius: var(--thin); }
+
+	/* Bottom-Left Radius */
+	.radius-bl-extra 		{ border-bottom-left-radius: var(--extra); }
+	.radius-bl-big 			{ border-bottom-left-radius: var(--big); }
+	.radius-bl-semi 		{ border-bottom-left-radius: var(--semi); }
+	.radius-bl-medium 	{ border-bottom-left-radius: var(--medium); }
+	.radius-bl-regular 	{ border-bottom-left-radius: var(--regular); }
+	.radius-bl-small 		{ border-bottom-left-radius: var(--small); }
+	.radius-bl-thin 		{ border-bottom-left-radius: var(--thin); }
+}

package/src/styles/base/height.scss

@@ -0,0 +1,60 @@
+body { 
+	// Min height
+	.min-h-100p { min-height: min(100%, 100%) !important; }
+	.min-h-90p 	{ min-height: min(100%, 90%) !important; }
+	.min-h-80p 	{ min-height: min(100%, 80%) !important; }
+	.min-h-70p 	{ min-height: min(100%, 70%) !important; }
+	.min-h-60p 	{ min-height: min(100%, 60%) !important; }
+	.min-h-50p 	{ min-height: min(100%, 50%) !important; }
+	.min-h-40p 	{ min-height: min(100%, 40%) !important; }
+	.min-h-30p 	{ min-height: min(100%, 30%) !important; }
+	.min-h-20p 	{ min-height: min(100%, 20%) !important; }
+	.min-h-10p 	{ min-height: min(100%, 10%) !important; }
+	// Min height in vh
+	.min-h-100vh{ min-height: min(100vh, 100%) !important; }
+	.min-h-90vh { min-height: min(100vh, 90%) !important; }
+	.min-h-80vh { min-height: min(100vh, 80%) !important; }
+	.min-h-70vh { min-height: min(100vh, 70%) !important; }
+	.min-h-60vh { min-height: min(100vh, 60%) !important; }
+	.min-h-50vh { min-height: min(100vh, 50%) !important; }
+	.min-h-40vh { min-height: min(100vh, 40%) !important; }
+	.min-h-30vh { min-height: min(100vh, 30%) !important; }
+	.min-h-20vh { min-height: min(100vh, 20%) !important; }
+	.min-h-10vh { min-height: min(100vh, 10%) !important; }
+	// Max height
+	// %
+	.h-m-100p{ height: min(100%, 100%) !important; }
+	.h-m-90p { height: min(100%, 90%) !important; }
+	.h-m-80p { height: min(100%, 80%) !important; }
+	.h-m-70p { height: min(100%, 70%) !important; }
+	.h-m-60p { height: min(100%, 60%) !important; }
+	.h-m-50p { height: min(100%, 50%) !important; }
+	.h-m-40p { height: min(100%, 40%) !important; }
+	.h-m-30p { height: min(100%, 30%) !important; }
+	.h-m-20p { height: min(100%, 20%) !important; }
+	.h-m-10p { height: min(100%, 10%) !important; }
+	// rem
+	.h-m-66r { height: min(100%, 66rem) !important; }
+	.h-m-60r { height: min(100%, 60rem) !important; }
+	.h-m-50r { height: min(100%, 50rem) !important; }
+	.h-m-40r { height: min(100%, 40rem)	!important; }
+	.h-m-33r { height: min(100%, 33rem)	!important; }
+	.h-m-25r { height: min(100%, 25rem)	!important; }
+	.h-m-20r { height: min(100%, 20rem)	!important; }
+	.h-m-15r { height: min(100%, 15rem)	!important; }
+	.h-m-10r { height: min(100%, 10rem)	!important; }
+	.h-m-5r  { height: min(100%, 5rem)	!important; }
+	.h-m-3r  { height: min(100%, 3rem)	!important; }
+	.h-m-2r  { height: min(100%, 2rem)	!important; }
+	// Max Height
+	.h-max-50r { max-height: 50rem; }
+	.h-max-30r { max-height: 30rem; }
+	.h-max-20r { max-height: 20rem; }
+	.h-max-10r { max-height: 10rem; }
+	.h-max-8r  { max-height: 8rem; }
+	.h-max-5r  { max-height: 5rem; }
+	.h-max-4r  { max-height: 4rem; }
+	.h-max-3r  { max-height: 3rem; }
+	.h-max-2r  { max-height: 2rem; }
+	.h-max-1r  { max-height: 1rem; }
+}

package/src/styles/base/scrolling.scss

@@ -38,14 +38,14 @@ body {
 	.scrollbar-width-auto 	{ scrollbar-width: auto; }
 	.scrollbar-width-thin 	{ scrollbar-width: thin; }
 	.scrollbar-width-none 	{ scrollbar-width: none; }
-	.scroll-mn-extra 		{ scroll-margin: var(--extra); }
-	.scroll-mn-big 			{ scroll-margin: var(--big); }
-	.scroll-mn-semi 		{ scroll-margin: var(--semi); }
-	.scroll-mn-medium 		{ scroll-margin: var(--medium); }
-	.scroll-mn-regular 		{ scroll-margin: var(--regular); }
-	.scroll-mn-small 		{ scroll-margin: var(--small); }
-	.scroll-mn-thin 		{ scroll-margin: var(--thin); }
-	.scroll-mn-micro 		{ scroll-margin: var(--micro); }
+	.scroll-mn-b-extra 		{ scroll-margin: var(--extra); }
+	.scroll-mn-b-big 			{ scroll-margin: var(--big); }
+	.scroll-mn-b-semi 		{ scroll-margin: var(--semi); }
+	.scroll-mn-b-medium 		{ scroll-margin: var(--medium); }
+	.scroll-mn-b-regular 		{ scroll-margin: var(--regular); }
+	.scroll-mn-b-small 		{ scroll-margin: var(--small); }
+	.scroll-mn-b-thin 		{ scroll-margin: var(--thin); }
+	.scroll-mn-b-micro 		{ scroll-margin: var(--micro); }
 	// Scroll pd with Variables
 	.scroll-pd-extra 		{ scroll-padding: var(--extra); }
 	.scroll-pd-big 			{ scroll-padding: var(--big); }