Skip to content

Commit e797d4c

Browse files
UnderlineWordsUnderlineWords
committed
updated helpers
1 parent c0f58dc commit e797d4c

9 files changed

Lines changed: 208 additions & 133 deletions

File tree

‎src/Utilities/_config/_specs.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
/////////////////////////////////////////////////////////
44
$specs: (
55
"spaces" : (0,5,10,15,20,30,40,50,75,100,125,150,175,200), // padding and margin (px)
6-
"font-weight" : (100,200,300,400,500,600,700,800,900),
6+
"font-weight" : (100,200,300,400,500,600,700,800,900,normal,bold,bolder,lighter),
77
"borders" : (0,1,2,3,4,5), // border width (px)
88
"border-radius" : (2,4,8,10,12,14,16,500), // (px)
99
"orders" : (1,2,3,4,5),

‎src/Utilities/_config/flex.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
///
2+
/// Flex
3+
///
4+
/// The flex property sets the flexible length on flexible items.
5+
/// The flex property is a shorthand property for flex-grow, flex-grow
6+
/// and flex-basis.
7+
///
8+
$flex-helpers: (
9+
// class name, value
10+
("flex-1", 1 1 0%),
11+
("flex-auto", 1 1 auto),
12+
("flex-initial", 0 1 auto),
13+
("flex-none", none)
14+
);

‎src/Utilities/_config/float.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
///
2+
/// Float
3+
///
4+
/// The float property specifies whether an element should
5+
/// float to the left, right, or not at all.
6+
///
7+
$float-helpers: (
8+
// class name, value
9+
("float-right", right),
10+
("float-left", left),
11+
("float-none", none)
12+
);

‎src/Utilities/_config/height.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
///
2+
/// Height
3+
///
4+
/// The height property sets the height of an element.
5+
///
6+
$height-helpers: (
7+
// class name, value
8+
("height-min-content", min-content),
9+
("height-max-content", max-content),
10+
("height-fit-content", fit-content),
11+
("height-25", 25%),
12+
("height-50", 50%),
13+
("height-75", 75%),
14+
("height-100", 100%),
15+
("tiny-height", 1rem), // 16px
16+
("mini-height", 2rem), // 32px
17+
("small-height", 4rem), // 64px
18+
("large-height", 8rem), // 128px
19+
("huge-height", 12rem), // 190px
20+
("giant-height", 24rem) // 384px
21+
);

‎src/Utilities/_config/text-decoration.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
///
2+
/// Text Decoration
3+
///
4+
/// The text-decoration property specifies the decoration added to text.
5+
///
6+
$text-decorations: (
7+
// class name, value
8+
("underline", underline),
9+
("overline", overline),
10+
("line-through", line-through)
11+
);

‎src/Utilities/_config/width.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
///
2+
/// Width
3+
///
4+
/// The width property sets the width of an element.
5+
///
6+
$width-helpers: (
7+
// class name, value
8+
("width-min-content", min-content),
9+
("width-max-content", max-content),
10+
("width-fit-content", fit-content),
11+
("width-25", 25%),
12+
("width-50", 50%),
13+
("width-75", 75%),
14+
("width-100", 100%),
15+
("tiny-width", 1rem), // 16px
16+
("mini-width", 2rem), // 32px
17+
("small-width", 4rem), // 64px
18+
("large-width", 8rem), // 128px
19+
("huge-width", 12rem), // 192px
20+
("giant-width", 24rem) // 384px
21+
);

‎src/Utilities/helpers.scss‎

Lines changed: 92 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -7,146 +7,134 @@
77
///
88
///
99
@if options('helpers', 'enable') {
10-
///
11-
/// Padding & Margin Helpers
12-
///
13-
@include setHelperListWithRange($margin-helpers, specs('spaces'), "px", "!important");
14-
@include setHelperListWithRange($margin-helpers, auto, null, "!important"); // margin auto
15-
@include setHelperListWithRange($padding-helpers, specs('spaces'), "px", "!important");
16-
@include setHelperListWithRange($padding-helpers, auto, null, "!important"); // padding auto
10+
/// Align Items
11+
@include setHelperList($align-items, "align-items", "!important");
1712

18-
///
19-
/// Font Weights
20-
///
21-
@include setHelperListWithRange($font-weights, specs('font-weight'), null, "!important");
13+
/// Align Self
14+
@include setHelperList($align-self, "align-self", "!important");
2215

23-
///
24-
/// Font Sizes
25-
///
26-
@include setHelperList($font-sizes, "font-size", "!important");
16+
/// Align Content
17+
@include setHelperList($align-content, "align-content", "!important");
2718

28-
///
29-
/// Text Colors
30-
///
31-
@include setHelperList($text-colors, "color", "!important");
32-
@include setColorScale($text-colors, "color");
19+
/// Backdrop Filters
20+
@include setFilters($backdrop-blur-ranges, $backdrop-blur, "backdrop-filter"); // only blur
21+
@include setFilters($backdrop-filter-ranges, $backdrop-filters, "backdrop-filter");
3322

34-
///
3523
/// Background Colors
36-
///
3724
@include setHelperList($bg-colors, "background-color", "!important");
3825
@include setColorScale($bg-colors);
3926

40-
///
41-
/// Cursors
42-
///
27+
/// Border
28+
@include setHelperListWithRange($borders, specs('borders'), "px", "!important");
29+
30+
/// Border Styles
31+
@include setHelperListWithRange($border-radius, specs('border-radius'), "px", "!important");
32+
33+
/// Border Radius
34+
@include setHelperList($border-styles, "border-style", "!important");
35+
36+
/// Cursor
4337
@include setHelperList($cursors, "cursor", "!important");
4438

45-
///
46-
/// Display Properties
47-
///
39+
/// Display Filters
40+
@include setHelperList($display-filters);
41+
42+
/// Display
4843
@include setHelperList($display-properties, "display", "!important");
4944

50-
///
51-
/// Alignment
52-
///
53-
@include setHelperList($align-items, "align-items", "!important");
54-
@include setHelperList($align-self, "align-self", "!important");
55-
@include setHelperList($align-content, "align-content", "!important");
56-
@include setHelperList($justify-self, "justify-self", "!important");
57-
@include setHelperList($justify-content, "justify-content", "!important");
58-
@include setHelperList($justify-items, "justify-items", "!important");
59-
@include setHelperList($place-content, "place-content", "!important");
60-
@include setHelperList($place-items, "place-items", "!important");
61-
@include setHelperList($place-self, "place-self", "!important");
62-
@include setHelperList($flex-wrap, "flex-wrap", "!important");
45+
/// Flex
46+
@include setHelperList($flex-helpers, "flex", "!important");
47+
48+
/// Flex Direction
49+
@include setHelperList($flex-directions, "flex-direction", "!important");
50+
51+
/// Flex Grow
6352
@include setHelperList($flex-grow, "flex-grow", "!important");
53+
54+
/// Flex Shrink
6455
@include setHelperList($flex-shrink, "flex-shrink", "!important");
6556

66-
///
67-
/// Filters
68-
///
69-
@include setHelperList($display-filters);
57+
/// Flex Wrap
58+
@include setHelperList($flex-wrap, "flex-wrap", "!important");
7059

71-
///
72-
/// Text Transform Properties
73-
///
74-
@include setHelperList($text-transforms, "text-transform", "!important");
60+
/// Float
61+
@include setHelperList($float-helpers, "float", "!important");
7562

76-
///
77-
/// Overflow Properties
78-
///
79-
@include setHelperList($overflow-properties);
63+
/// Font Size
64+
@include setHelperList($font-sizes, "font-size", "!important");
8065

81-
///
82-
/// Position Properties
83-
///
84-
@include setHelperList($position-properties, "position", "!important");
66+
/// Font Weight
67+
@include setHelperListWithRange($font-weights, specs('font-weight'), null, "!important");
8568

86-
///
87-
/// Stack Order
88-
///
89-
@include setHelperListWithRange($z-indexes, specs('z-index'), null, "!important");
69+
/// Height
70+
@include setHelperList($height-helpers, "height", "!important");
9071

91-
///
92-
/// Direction of the flexible items
93-
///
94-
@include setHelperList($flex-directions, "flex-direction", "!important");
72+
/// Inset
73+
@include setNestedHelperList($insets);
9574

96-
///
97-
/// User Select Properties
98-
///
99-
@include setHelperList($user-selects, "user-select", "!important");
75+
/// Justify Content
76+
@include setHelperList($justify-content, "justify-content", "!important");
10077

101-
///
102-
/// Insets
103-
///
104-
@include setNestedHelperList($insets);
78+
/// Justify Items
79+
@include setHelperList($justify-items, "justify-items", "!important");
10580

106-
///
107-
/// Line Height Properties
108-
///
109-
@include setHelperListWithRange($line-heights, specs('line-height'), null, "!important");
81+
/// Justify Self
82+
@include setHelperList($justify-self, "justify-self", "!important");
11083

111-
///
112-
/// Borders
113-
///
114-
@include setHelperListWithRange($borders, specs('borders'), "px", "!important");
84+
/// Line Height
85+
@include setHelperListWithRange($line-heights, specs('line-height'), null, "!important");
11586

116-
///
117-
/// Border Styles
118-
///
119-
@include setHelperList($border-styles, "border-style", "!important");
87+
/// Margin
88+
@include setHelperListWithRange($margin-helpers, specs('spaces'), "px", "!important");
89+
@include setHelperListWithRange($margin-helpers, auto, null, "!important"); // margin auto
12090

121-
///
122-
/// Border Radius
123-
///
124-
@include setHelperListWithRange($border-radius, specs('border-radius'), "px", "!important");
91+
/// Object-Fit
92+
@include setHelperList($object-fit, "object-fit", "!important");
12593

126-
///
12794
/// Order
128-
///
12995
@include setHelperListWithRange($orders, specs('orders'), null, "!important");
13096

97+
/// Overflow
13198
///
132-
/// Object-Fit
133-
///
134-
@include setHelperList($object-fit, "object-fit", "!important");
99+
@include setHelperList($overflow-properties);
100+
101+
/// Padding
102+
@include setHelperListWithRange($padding-helpers, specs('spaces'), "px", "!important");
103+
@include setHelperListWithRange($padding-helpers, auto, null, "!important"); // padding auto
104+
105+
/// Place Content
106+
@include setHelperList($place-content, "place-content", "!important");
107+
108+
/// Place Items
109+
@include setHelperList($place-items, "place-items", "!important");
110+
111+
/// Place Self
112+
@include setHelperList($place-self, "place-self", "!important");
113+
114+
/// Position
115+
@include setHelperList($position-properties, "position", "!important");
135116

136-
///
137117
/// Resize
138-
///
139118
@include setHelperList($resizes, "resize", "!important");
140119

141-
///
142-
/// Backdrop Filters (only blur)
143-
///
144-
@include setFilters($backdrop-blur-ranges, $backdrop-blur, "backdrop-filter");
120+
/// Text Colors
121+
@include setHelperList($text-colors, "color", "!important");
122+
@include setColorScale($text-colors, "color"); // color scale
145123

146-
///
147-
/// All Backdrop Filters
148-
///
149-
@include setFilters($backdrop-filter-ranges, $backdrop-filters, "backdrop-filter");
124+
/// Text Decoration
125+
@include setHelperList($text-decorations, "text-decoration", "!important");
126+
127+
/// Text Transform
128+
@include setHelperList($text-transforms, "text-transform", "!important");
129+
130+
/// User Select
131+
@include setHelperList($user-selects, "user-select", "!important");
132+
133+
/// Width
134+
@include setHelperList($width-helpers, "width", "!important");
135+
136+
/// Z-Index
137+
@include setHelperListWithRange($z-indexes, specs('z-index'), null, "!important");
150138

151139
///
152140
/// Others

‎src/Utilities/mixins.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,9 @@
159159
.vw-100 {
160160
width: 100vw;
161161
}
162+
.ungap {
163+
gap: 0;
164+
}
162165
.fade {opacity: 0;}
163166
.hide {display: none !important;}
164167
/* seperator for flex */

0 commit comments

Comments
 (0)