refactored helpers

Author: UnderlineWords

src/Utilities/_config/_specs.scss

@@ -0,0 +1,12 @@
+/////////////////////////////////////////////////////////
+/// PUNICA CSS > UTILITIES : HELPERS > SPECS
+/////////////////////////////////////////////////////////
+$specs: (
+	"spaces"        : (0,5,10,15,20,30,40,50,75,100,125,150,175,200), // padding and margin
+	"font-weight"   : (100,200,300,400,500,600,700,800,900),
+	"borders"       : (0,1,2,3,4,5), // border width
+	"border-radius" : (2,4,8,10,12,14,16,500),
+	"orders"        : (1,2,3,4,5),
+	"line-height"   : (0,1,2,3,4,5),
+	"z-index"       : (-1,0,1,10,20,30,40,50,100,999,9999,99999)
+);

src/Utilities/_config/align-content.scss

@@ -0,0 +1,19 @@
+/// 
+/// Align Content
+///
+/// The align-content property specifies 
+/// how flex lines are distributed along the 
+/// cross axis in a flexbox container.
+///
+$align-content: (
+	// class name, value
+	("align-content-stretch", stretch),
+	("align-content-center", center),
+	("align-content-start", flex-start),
+	("align-content-end", flex-end),
+	("align-content-between", space-between),
+	("align-content-around", space-around),
+	("align-content-evenly", space-evenly),
+	("align-content-initial", initial),
+	("align-content-inherit", inherit)
+);

src/Utilities/_config/align-items.scss

@@ -0,0 +1,16 @@
+/// 
+/// Align Items
+///
+/// The align-items property specifies the default alignment
+/// for items inside a flexbox or grid container.
+///
+$align-items: (
+	// class name, value
+	("align-items-baseline", baseline),
+	("align-items-start", flex-start),
+	("align-items-end", flex-end),
+	("align-items-center", center),
+	("align-items-stretch", stretch),
+	("align-items-initial", initial),
+	("align-items-inherit", inherit)
+);

src/Utilities/_config/align-self.scss

@@ -0,0 +1,18 @@
+/// 
+/// Align Self
+///
+/// The align-self property specifies the alignment
+/// in the block direction for the selected item 
+/// inside a flexbox or grid container.
+///
+$align-self: (
+	// class name, value
+	("align-self-auto", auto),
+	("align-self-baseline", baseline),
+	("align-self-start", flex-start),
+	("align-self-end", flex-end),
+	("align-self-center", center),
+	("align-self-stretch", stretch),
+	("align-self-initial", initial),
+	("align-self-inherit", inherit)
+);

src/Utilities/_config/backdrop-filter.scss

@@ -0,0 +1,29 @@
+/// 
+/// Backdrop Filters
+/// The backdrop-filter property is used to apply 
+/// a graphical effect to the area behind an element.
+/// 
+$backdrop-blur-ranges: (
+	// (values, suffixes)
+	(4px,4)(7px,7)(10px,10)(12px,12)(16px,16)(20px,20)
+);
+$backdrop-blur: (
+	// class name (prefix), filter function
+	("backdrop-blur-", "blur"),
+);
+$backdrop-filter-ranges: (
+	// (values, suffixes)
+	(0,0)(.25,25)(.5,50)(.75,75)(1,100)(1.25,125)(1.5,150)(1.75,175)(2,200)
+);
+$backdrop-filters: (
+	// class name (prefix), filter function
+	("backdrop-brightness-", "brightness"),
+	("backdrop-contrast-", "contrast"),
+	//("backdrop-shadow-", "drop-shadow"),
+	("backdrop-grayscale-", "grayscale"),
+	//("backdrop-hue-", "hue-rotate"),
+	("backdrop-invert-", "invert"),
+	("backdrop-opacity-", "opacity"),
+	("backdrop-saturate-", "saturate"),
+	("backdrop-sepia-", "sepia"),
+);

src/Utilities/_config/bg-colors.scss

@@ -0,0 +1,16 @@
+/// 
+/// Bg Colors
+/// 
+$bg-colors: (
+	// class name, value
+	("bg-color", theme('color', 'background')),
+	("bg-grey", theme('color', 'grey')),
+	("bg-secondary", theme('color', 'secondary')),
+	("bg-white", white),
+	("bg-black", black),
+	("bg-dark", theme('color', 'dark')),
+	("bg-primary", theme('color', 'primary')),
+	("bg-success", theme('color', 'success')),
+	("bg-warning", theme('color', 'warning')),
+	("bg-error", theme('color', 'error'))
+);

src/Utilities/_config/border-radius.scss

@@ -0,0 +1,7 @@
+///
+/// Border Radius
+/// 
+$border-radius: (
+	// class name (prefix), property
+	"radius-": "border-radius"
+);

src/Utilities/_config/border-style.scss

@@ -0,0 +1,12 @@
+/// 
+/// Border Styles
+/// 
+$border-styles: (
+	// class name, value
+	("border-solid", solid),
+	("border-dashed", dashed),
+	("border-dotted", dotted),
+	("border-double", double),
+	("border-groove", groove),
+	("border-ridge", ridge)
+);

src/Utilities/_config/border.scss

@@ -0,0 +1,11 @@
+/// 
+/// Borders (width)
+/// 
+$borders:(
+	// class name (prefix), property
+	("border-", "border-width")
+	("border-top-", "border-top-width")
+	("border-right-", "border-right-width")
+	("border-bottom-", "border-bottom-width")
+	("border-left-", "border-left-width")
+);

src/Utilities/_config/cursors.scss

@@ -0,0 +1,15 @@
+/// 
+/// Cursors
+/// 
+$cursors: (
+	// class name, value
+	("cursor-alias", alias),
+	("cursor-default", default),
+	("cursor-grab", grab),
+	("cursor-help", help),
+	("cursor-move", move),
+	("cursor-pointer", pointer),
+	("cursor-wait", wait),
+	("cursor-zoom-in", zoom-in),
+	("cursor-zoom-out", zoom-out)
+);