mj-css-framework 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/.vscode/settings.json +9 -0
  2. package/LICENSE +21 -0
  3. package/README.md +70 -0
  4. package/package.json +20 -0
  5. package/styles.min.css +1 -0
  6. package/styles.scss +783 -0
package/.vscode/settings.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "liveSassCompile.settings.formats": [
3
+ {
4
+ "format": "compressed",
5
+ "extensionName": ".min.css",
6
+ "generateMap": false
7
+ }
8
+ ]
9
+ }
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 MohammadJafar Khajeh
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,70 @@
1
+ # MJ CSS Framework
2
+
3
+ A lightweight, Sass-powered CSS utility library. Utilities are composed with the `mj` namespace, making it possible to describe common layout, spacing, sizing, positioning, and visual properties directly in an element's class list.
4
+
5
+ ## Files
6
+
7
+ - `styles.scss` — readable Sass source and the place to add or change utilities.
8
+ - `styles.min.css` — compressed CSS build for use in a browser.
9
+
10
+ ## Usage
11
+
12
+ Include the compiled stylesheet in your page:
13
+
14
+ ```html
15
+ <link rel="stylesheet" href="styles.min.css">
16
+ ```
17
+
18
+ Apply utilities by combining the `mj` namespace with one or more utility names:
19
+
20
+ ```html
21
+ <section class="mj df ai-c jc-sb g-16 pinline-20 pblock-12">
22
+ <h1 class="mj mblock-0">Dashboard</h1>
23
+ <button class="mj br-8 pinline-12 pblock-8">Open</button>
24
+ </section>
25
+ ```
26
+
27
+ Most utilities are scoped to an element carrying `mj`. For example, `mj df` sets `display: flex`, while `mj g-16` sets `gap: 16px`. The `screen-reader-text` helper targets a descendant of an `mj` element.
28
+
29
+ ## Utility groups
30
+
31
+ | Group | Examples | Purpose |
32
+ | --- | --- | --- |
33
+ | Display | `df`, `dg`, `dn` | Flex, grid, and hidden display modes |
34
+ | Alignment | `ai-c`, `jc-c`, `jc-sb` | Flex and grid alignment |
35
+ | Centering | `center` | Sets `place-items: center` |
36
+ | Grid | `g-t-c-1` … `g-t-c-4` | One-to-four equal grid columns |
37
+ | Gaps | `g-0` … `g-20`, `g-r-*`, `g-c-*` | Gap, row-gap, and column-gap |
38
+ | Margins | `mt-*`, `mb-*`, `m-block-*`, `m-inline-*` | Directional and logical margins |
39
+ | Padding | `pt-*`, `pb-*`, `p-block-*`, `p-inline-*` | Directional and logical padding |
40
+ | Border radius | `br-2` … `br-32`, `br-pill`, `br-circle` | Rounded corners and shapes |
41
+ | Colors | `color-white`, `color-black`, `color-h-white`, `color-h-black` | Text colors and hover colors |
42
+ | Size | `w-*`, `h-*` | Width and height utilities |
43
+ | Position | `pos-*`, `t-*`, `b-*`, `s-*`, `e-*`, `ii-*`, `ib-*`, `i-*` | Positioning and inset values |
44
+ | Z-index | `z-a`, `z-0` … `z-3`, `z--1` … `z--3` | Stacking order utilities |
45
+ | Opacity | `o-0`, `o-10`, `o-50`, `o-100` | Opacity presets |
46
+ | Transitions | `tr-all` | A short all-property transition |
47
+ | Borders | `border-t`, `border-h-t` | Transparent borders and hover borders |
48
+ | Font sizes | `fs-10` … `fs-48` | Rem-based font-size presets |
49
+ | Font weights | `fw-100` … `fw-900` | Numeric font-weight presets |
50
+ | Line height | `lh-1` | Line-height presets |
51
+ | Backgrounds | `back-t`, `back-w`, `back-b` | Transparent, white, and black backgrounds |
52
+ | Overflow | `over-a`, `over-h` | Auto and hidden overflow behavior |
53
+ | Text alignment | `texta-s`, `texta-c`, `texta-e` | Start, center, and end text alignment |
54
+ | Line clamps | `line-clamp`, `line-clamp-1` … `line-clamp-3` | Multi-line truncation helpers |
55
+ | White space | `white-space-nowrap` | Prevents text wrapping |
56
+ | Box shadow | `bs-n` | Removes the box shadow |
57
+ | Aspect ratio | `ar-1` | Sets a square aspect ratio |
58
+ | Box sizing | `bsize-bb` | Uses `border-box` sizing |
59
+ | Interaction | `p-event-n`, `disabled` | Disables pointer and touch interaction |
60
+ | Accessibility | `screen-reader-text` | Visually hides content while keeping it available to screen readers |
61
+
62
+ Most numeric utilities use the value in the class name as pixels. For example, `mj mt-16` produces `margin-top: 16px`, and `mj w-48` produces `width: 48px`. Logical properties such as `mblock-*` and `pinline-*` help the same markup work across writing directions.
63
+
64
+ ## Browser support
65
+
66
+ The stylesheet uses modern CSS features including logical properties, dynamic viewport units, and `inset`. Choose a browser support target appropriate for your application if you extend or transpile the source.
67
+
68
+ ## License
69
+
70
+ This project is licensed under the MIT License. See the LICENSE file or [MIT License](https://opensource.org/licenses/MIT) for details.
package/package.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "name": "mj-css-framework",
3
+ "version": "1.0.0",
4
+ "description": "A lightweight, Sass-powered CSS utility library. Utilities are composed with the `mj` namespace, making it possible to describe common layout, spacing, sizing, positioning, and visual properties directly in an element's class list.",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/mjkhajeh/mj-css-framework.git"
8
+ },
9
+ "keywords": [
10
+ "css",
11
+ "framework",
12
+ "css framework"
13
+ ],
14
+ "author": "mj.khajeh",
15
+ "license": "MIT",
16
+ "bugs": {
17
+ "url": "https://github.com/mjkhajeh/mj-css-framework/issues"
18
+ },
19
+ "homepage": "https://github.com/mjkhajeh/mj-css-framework#readme"
20
+ }
package/styles.min.css ADDED
@@ -0,0 +1 @@
1
+ .mj.df{display:flex}.mj.dn{display:none}.mj.dg{display:grid}.mj.ai-c{align-items:center}.mj.jc-c{justify-content:center}.mj.jc-sb{justify-content:space-between}.mj.center{place-items:center}.mj.g-t-c-1{grid-template-columns:1fr}.mj.g-t-c-2{grid-template-columns:1fr 1fr}.mj.g-t-c-3{grid-template-columns:1fr 1fr 1fr}.mj.g-t-c-4{grid-template-columns:repeat(4, 1fr)}.mj.g-0{gap:0}.mj.g-2{gap:2px}.mj.g-4{gap:4px}.mj.g-6{gap:6px}.mj.g-8{gap:8px}.mj.g-10{gap:10px}.mj.g-12{gap:12px}.mj.g-16{gap:16px}.mj.g-20{gap:20px}.mj.g-r-0{row-gap:0}.mj.g-r-2{row-gap:2px}.mj.g-r-4{row-gap:4px}.mj.g-r-6{row-gap:6px}.mj.g-r-8{row-gap:8px}.mj.g-r-10{row-gap:10px}.mj.g-r-12{row-gap:12px}.mj.g-r-16{row-gap:16px}.mj.g-r-20{row-gap:20px}.mj.g-c-0{column-gap:0}.mj.g-c-2{column-gap:2px}.mj.g-c-4{column-gap:4px}.mj.g-c-6{column-gap:6px}.mj.g-c-8{column-gap:8px}.mj.g-c-10{column-gap:10px}.mj.g-c-12{column-gap:12px}.mj.g-c-16{column-gap:16px}.mj.g-c-20{column-gap:20px}.mj.mt-a{margin-top:auto}.mj.mt-0{margin-top:0}.mj.mt-4{margin-top:4px}.mj.mt-8{margin-top:8px}.mj.mt-12{margin-top:12px}.mj.mt-16{margin-top:16px}.mj.mt-20{margin-top:20px}.mj.mb-a{margin-bottom:auto}.mj.mb-0{margin-bottom:0}.mj.mb-4{margin-bottom:4px}.mj.mb-8{margin-bottom:8px}.mj.mb-12{margin-bottom:12px}.mj.mb-16{margin-bottom:16px}.mj.mb-20{margin-bottom:20px}.mj.m-block-a{margin-block:auto}.mj.m-block-0{margin-block:0}.mj.m-block-4{margin-block:4px}.mj.m-block-8{margin-block:8px}.mj.m-block-12{margin-block:12px}.mj.m-block-16{margin-block:16px}.mj.m-block-20{margin-block:20px}.mj.m-inline-a{margin-inline:auto}.mj.m-inline-0{margin-inline:0}.mj.m-inline-4{margin-inline:4px}.mj.m-inline-8{margin-inline:8px}.mj.m-inline-12{margin-inline:12px}.mj.m-inline-16{margin-inline:16px}.mj.m-inline-20{margin-inline:20px}.mj.pt-a{padding-top:auto}.mj.pt-0{padding-top:0}.mj.pt-4{padding-top:4px}.mj.pt-8{padding-top:8px}.mj.pt-12{padding-top:12px}.mj.pt-16{padding-top:16px}.mj.pt-20{padding-top:20px}.mj.pb-a{padding-bottom:auto}.mj.pb-0{padding-bottom:0}.mj.pb-4{padding-bottom:4px}.mj.pb-8{padding-bottom:8px}.mj.pb-12{padding-bottom:12px}.mj.pb-16{padding-bottom:16px}.mj.pb-20{padding-bottom:20px}.mj.p-block-a{padding-block:auto}.mj.p-block-0{padding-block:0}.mj.p-block-4{padding-block:4px}.mj.p-block-8{padding-block:8px}.mj.p-block-12{padding-block:12px}.mj.p-block-16{padding-block:16px}.mj.p-block-20{padding-block:20px}.mj.p-inline-a{padding-inline:auto}.mj.p-inline-0{padding-inline:0}.mj.p-inline-4{padding-inline:4px}.mj.p-inline-8{padding-inline:8px}.mj.p-inline-12{padding-inline:12px}.mj.p-inline-16{padding-inline:16px}.mj.p-inline-20{padding-inline:20px}.mj.br-2{border-radius:2px}.mj.br-4{border-radius:4px}.mj.br-8{border-radius:8px}.mj.br-12{border-radius:12px}.mj.br-16{border-radius:16px}.mj.br-20{border-radius:20px}.mj.br-24{border-radius:24px}.mj.br-32{border-radius:32px}.mj.br-pill{border-radius:960px}.mj.br-circle{border-radius:50%}.mj.color-fff,.mj.color-white,.mj.color-h-white:hover{color:#fff}.mj.color-000,.mj.color-black,.mj.color-h-black:hover{color:#000}.mj.w-a{width:auto}.mj.w-fit{width:fit-content}.mj.w-full,.mj.w-100{width:100%}.mj.w-100dvw{width:100dvw}.mj.w-95dvw{width:95dvw}.mj.w-90dvw{width:90dvw}.mj.w-16{width:16px}.mj.w-20{width:20px}.mj.w-24{width:24px}.mj.w-32{width:32px}.mj.w-48{width:48px}.mj.w-64{width:64px}.mj.h-a{height:auto}.mj.h-full,.mj.h-100{height:100%}.mj.h-100dvw{height:100dvw}.mj.h-95dvw{height:95dvw}.mj.h-90dvw{height:90dvw}.mj.h-16{height:16px}.mj.h-20{height:20px}.mj.h-24{height:24px}.mj.h-32{height:32px}.mj.h-48{height:48px}.mj.h-64{height:64px}.mj.pos-r{position:relative}.mj.pos-a{position:absolute}.mj.pos-f{position:fixed}.mj.pos-s{position:sticky}.mj.t-a{top:auto}.mj.t-0{top:0}.mj.t-2{top:2px}.mj.t-4{top:4px}.mj.t-6{top:6px}.mj.t-8{top:8px}.mj.t-12{top:12px}.mj.t-16{top:16px}.mj.t-20{top:20px}.mj.b-a{bottom:auto}.mj.b-0{bottom:0}.mj.b-2{bottom:2px}.mj.b-4{bottom:4px}.mj.b-6{bottom:6px}.mj.b-8{bottom:8px}.mj.b-12{bottom:12px}.mj.b-16{bottom:16px}.mj.b-20{bottom:20px}.mj.s-a{inset-inline-start:auto}.mj.s-0{inset-inline-start:0}.mj.s-2{inset-inline-start:2px}.mj.s-4{inset-inline-start:4px}.mj.s-6{inset-inline-start:6px}.mj.s-8{inset-inline-start:8px}.mj.s-12{inset-inline-start:12px}.mj.s-16{inset-inline-start:16px}.mj.s-20{inset-inline-start:20px}.mj.e-a{inset-inline-end:auto}.mj.e-0{inset-inline-end:0}.mj.e-2{inset-inline-end:2px}.mj.e-4{inset-inline-end:4px}.mj.e-6{inset-inline-end:6px}.mj.e-8{inset-inline-end:8px}.mj.e-12{inset-inline-end:12px}.mj.e-16{inset-inline-end:16px}.mj.e-20{inset-inline-end:20px}.mj.ii-a{inset-inline:auto}.mj.ii-0{inset-inline:0}.mj.ii-2{inset-inline:2px}.mj.ii-4{inset-inline:4px}.mj.ii-6{inset-inline:6px}.mj.ii-8{inset-inline:8px}.mj.ii-12{inset-inline:12px}.mj.ii-16{inset-inline:16px}.mj.ii-20{inset-inline:20px}.mj.ib-a{inset-block:auto}.mj.ib-0{inset-block:0}.mj.i-a{inset:auto}.mj.i-0{inset:0}.mj.i-2{inset:2px}.mj.i-4{inset:4px}.mj.z-a{z-index:auto}.mj.z-0{z-index:0}.mj.z-1{z-index:1}.mj.z-2{z-index:2}.mj.z-3{z-index:3}.mj.z--1{z-index:-1}.mj.z--2{z-index:-2}.mj.z--3{z-index:-3}.mj.o-0{opacity:0}.mj.o-10{opacity:.1}.mj.o-50{opacity:.5}.mj.o-1,.mj.o-100{opacity:1}.mj.tr-all{transition:all .2s ease-in-out}.mj.border-t,.mj.border-transparent,.mj.border-h-t:hover,.mj.border-h-transparent:hover{border-color:#0000}.mj.fs-10{font-size:.625rem}.mj.fs-12{font-size:.75rem}.mj.fs-14{font-size:.875rem}.mj.fs-16{font-size:1rem}.mj.fs-18{font-size:1.125rem}.mj.fs-20{font-size:1.25rem}.mj.fs-24{font-size:1.5rem}.mj.fs-32{font-size:2rem}.mj.fs-48{font-size:3rem}.mj.fw-100{font-weight:100}.mj.fw-200{font-weight:200}.mj.fw-300{font-weight:300}.mj.fw-400{font-weight:400}.mj.fw-500{font-weight:500}.mj.fw-600{font-weight:600}.mj.fw-700{font-weight:700}.mj.fw-800{font-weight:800}.mj.fw-900{font-weight:900}.mj.lh-1{line-height:1}.mj.back-t,.mj.b-transparent{background:#0000}.mj.back-w,.mj.b-white{background:#fff}.mj.back-b,.mj.b-black{background:#000}.mj.over-a{overflow:auto}.mj.over-h{overflow:hidden}.mj.texta-s{text-align:start}.mj.texta-c{text-align:center}.mj.texta-e{text-align:end}.mj.line-clamp:not(:has(a)),.mj.line-clamp a{overflow:hidden !important;display:-webkit-box !important;-webkit-box-orient:vertical}.mj.line-clamp-1:not(:has(a)),.mj.line-clamp-1 a{-webkit-line-clamp:1}.mj.line-clamp-2:not(:has(a)),.mj.line-clamp-2 a{-webkit-line-clamp:2}.mj.line-clamp-3:not(:has(a)),.mj.line-clamp-3 a{-webkit-line-clamp:3}.mj.white-space-nowrap{white-space:nowrap}.mj.bs-n{box-shadow:none}.mj.ar-1{aspect-ratio:1}.mj.bsize-bb{box-sizing:border-box}.mj.p-event-n{pointer-events:none;touch-action:none}.mj.disabled{opacity:.5;touch-action:none;pointer-events:none}.mj .screen-reader-text{clip:rect(1px, 1px, 1px, 1px) !important;word-wrap:normal !important;border:0 !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;overflow-wrap:normal !important;padding:0 !important;position:absolute !important;width:1px !important}
package/styles.scss ADDED
@@ -0,0 +1,783 @@
1
+ $transparent: #{"#0000"};
2
+ .mj {
3
+ // Displays
4
+ &.df {
5
+ display: flex;
6
+ }
7
+ &.dn {
8
+ display: none;
9
+ }
10
+ &.dg {
11
+ display: grid;
12
+ }
13
+
14
+ // Flex and grid things
15
+ &.ai-c {
16
+ align-items: center;
17
+ }
18
+ &.jc-c {
19
+ justify-content: center;
20
+ }
21
+ &.jc-sb {
22
+ justify-content: space-between;
23
+ }
24
+ &.center {
25
+ place-items: center;
26
+ }
27
+
28
+ // Grid columns
29
+ &.g-t-c-1 {
30
+ grid-template-columns: 1fr;
31
+ }
32
+ &.g-t-c-2 {
33
+ grid-template-columns: 1fr 1fr;
34
+ }
35
+ &.g-t-c-3 {
36
+ grid-template-columns: 1fr 1fr 1fr;
37
+ }
38
+ &.g-t-c-4 {
39
+ grid-template-columns: repeat(4,1fr);
40
+ }
41
+
42
+ // Gaps
43
+ &.g-0 {
44
+ gap: 0;
45
+ }
46
+ &.g-2 {
47
+ gap: 2px;
48
+ }
49
+ &.g-4 {
50
+ gap: 4px;
51
+ }
52
+ &.g-6 {
53
+ gap: 6px;
54
+ }
55
+ &.g-8 {
56
+ gap: 8px;
57
+ }
58
+ &.g-10 {
59
+ gap: 10px;
60
+ }
61
+ &.g-12 {
62
+ gap: 12px;
63
+ }
64
+ &.g-16 {
65
+ gap: 16px;
66
+ }
67
+ &.g-20 {
68
+ gap: 20px;
69
+ }
70
+ &.g-r-0 {
71
+ row-gap: 0;
72
+ }
73
+ &.g-r-2 {
74
+ row-gap: 2px;
75
+ }
76
+ &.g-r-4 {
77
+ row-gap: 4px;
78
+ }
79
+ &.g-r-6 {
80
+ row-gap: 6px;
81
+ }
82
+ &.g-r-8 {
83
+ row-gap: 8px;
84
+ }
85
+ &.g-r-10 {
86
+ row-gap: 10px;
87
+ }
88
+ &.g-r-12 {
89
+ row-gap: 12px;
90
+ }
91
+ &.g-r-16 {
92
+ row-gap: 16px;
93
+ }
94
+ &.g-r-20 {
95
+ row-gap: 20px;
96
+ }
97
+ &.g-c-0 {
98
+ column-gap: 0;
99
+ }
100
+ &.g-c-2 {
101
+ column-gap: 2px;
102
+ }
103
+ &.g-c-4 {
104
+ column-gap: 4px;
105
+ }
106
+ &.g-c-6 {
107
+ column-gap: 6px;
108
+ }
109
+ &.g-c-8 {
110
+ column-gap: 8px;
111
+ }
112
+ &.g-c-10 {
113
+ column-gap: 10px;
114
+ }
115
+ &.g-c-12 {
116
+ column-gap: 12px;
117
+ }
118
+ &.g-c-16 {
119
+ column-gap: 16px;
120
+ }
121
+ &.g-c-20 {
122
+ column-gap: 20px;
123
+ }
124
+
125
+ // Margins
126
+ &.mt-a {
127
+ margin-top: auto;
128
+ }
129
+ &.mt-0 {
130
+ margin-top: 0;
131
+ }
132
+ &.mt-4 {
133
+ margin-top: 4px;
134
+ }
135
+ &.mt-8 {
136
+ margin-top: 8px;
137
+ }
138
+ &.mt-12 {
139
+ margin-top: 12px;
140
+ }
141
+ &.mt-16 {
142
+ margin-top: 16px;
143
+ }
144
+ &.mt-20 {
145
+ margin-top: 20px;
146
+ }
147
+ &.mb-a {
148
+ margin-bottom: auto;
149
+ }
150
+ &.mb-0 {
151
+ margin-bottom: 0;
152
+ }
153
+ &.mb-4 {
154
+ margin-bottom: 4px;
155
+ }
156
+ &.mb-8 {
157
+ margin-bottom: 8px;
158
+ }
159
+ &.mb-12 {
160
+ margin-bottom: 12px;
161
+ }
162
+ &.mb-16 {
163
+ margin-bottom: 16px;
164
+ }
165
+ &.mb-20 {
166
+ margin-bottom: 20px;
167
+ }
168
+ &.m-block-a {
169
+ margin-block: auto;
170
+ }
171
+ &.m-block-0 {
172
+ margin-block: 0;
173
+ }
174
+ &.m-block-4 {
175
+ margin-block: 4px;
176
+ }
177
+ &.m-block-8 {
178
+ margin-block: 8px;
179
+ }
180
+ &.m-block-12 {
181
+ margin-block: 12px;
182
+ }
183
+ &.m-block-16 {
184
+ margin-block: 16px;
185
+ }
186
+ &.m-block-20 {
187
+ margin-block: 20px;
188
+ }
189
+ &.m-inline-a {
190
+ margin-inline: auto;
191
+ }
192
+ &.m-inline-0 {
193
+ margin-inline: 0;
194
+ }
195
+ &.m-inline-4 {
196
+ margin-inline: 4px;
197
+ }
198
+ &.m-inline-8 {
199
+ margin-inline: 8px;
200
+ }
201
+ &.m-inline-12 {
202
+ margin-inline: 12px;
203
+ }
204
+ &.m-inline-16 {
205
+ margin-inline: 16px;
206
+ }
207
+ &.m-inline-20 {
208
+ margin-inline: 20px;
209
+ }
210
+
211
+ // Paddings
212
+ &.pt-a {
213
+ padding-top: auto;
214
+ }
215
+ &.pt-0 {
216
+ padding-top: 0;
217
+ }
218
+ &.pt-4 {
219
+ padding-top: 4px;
220
+ }
221
+ &.pt-8 {
222
+ padding-top: 8px;
223
+ }
224
+ &.pt-12 {
225
+ padding-top: 12px;
226
+ }
227
+ &.pt-16 {
228
+ padding-top: 16px;
229
+ }
230
+ &.pt-20 {
231
+ padding-top: 20px;
232
+ }
233
+ &.pb-a {
234
+ padding-bottom: auto;
235
+ }
236
+ &.pb-0 {
237
+ padding-bottom: 0;
238
+ }
239
+ &.pb-4 {
240
+ padding-bottom: 4px;
241
+ }
242
+ &.pb-8 {
243
+ padding-bottom: 8px;
244
+ }
245
+ &.pb-12 {
246
+ padding-bottom: 12px;
247
+ }
248
+ &.pb-16 {
249
+ padding-bottom: 16px;
250
+ }
251
+ &.pb-20 {
252
+ padding-bottom: 20px;
253
+ }
254
+ &.p-block-a {
255
+ padding-block: auto;
256
+ }
257
+ &.p-block-0 {
258
+ padding-block: 0;
259
+ }
260
+ &.p-block-4 {
261
+ padding-block: 4px;
262
+ }
263
+ &.p-block-8 {
264
+ padding-block: 8px;
265
+ }
266
+ &.p-block-12 {
267
+ padding-block: 12px;
268
+ }
269
+ &.p-block-16 {
270
+ padding-block: 16px;
271
+ }
272
+ &.p-block-20 {
273
+ padding-block: 20px;
274
+ }
275
+ &.p-inline-a {
276
+ padding-inline: auto;
277
+ }
278
+ &.p-inline-0 {
279
+ padding-inline: 0;
280
+ }
281
+ &.p-inline-4 {
282
+ padding-inline: 4px;
283
+ }
284
+ &.p-inline-8 {
285
+ padding-inline: 8px;
286
+ }
287
+ &.p-inline-12 {
288
+ padding-inline: 12px;
289
+ }
290
+ &.p-inline-16 {
291
+ padding-inline: 16px;
292
+ }
293
+ &.p-inline-20 {
294
+ padding-inline: 20px;
295
+ }
296
+
297
+ // Border radius
298
+ &.br-2 {
299
+ border-radius: 2px;
300
+ }
301
+ &.br-4 {
302
+ border-radius: 4px;
303
+ }
304
+ &.br-8 {
305
+ border-radius: 8px;
306
+ }
307
+ &.br-12 {
308
+ border-radius: 12px;
309
+ }
310
+ &.br-16 {
311
+ border-radius: 16px;
312
+ }
313
+ &.br-20 {
314
+ border-radius: 20px;
315
+ }
316
+ &.br-24 {
317
+ border-radius: 24px;
318
+ }
319
+ &.br-32 {
320
+ border-radius: 32px;
321
+ }
322
+ &.br-pill {
323
+ border-radius: 960px;
324
+ }
325
+ &.br-circle {
326
+ border-radius: 50%;
327
+ }
328
+
329
+ // Colors
330
+ &.color-fff,&.color-white,&.color-h-white:hover {
331
+ color: #fff;
332
+ }
333
+ &.color-000,&.color-black,&.color-h-black:hover {
334
+ color: #000;
335
+ }
336
+
337
+ // Widths
338
+ &.w-a {
339
+ width: auto;
340
+ }
341
+ &.w-fit {
342
+ width: fit-content;
343
+ }
344
+ &.w-full,&.w-100 {
345
+ width: 100%;
346
+ }
347
+ &.w-100dvw {
348
+ width: 100dvw;
349
+ }
350
+ &.w-95dvw {
351
+ width: 95dvw;
352
+ }
353
+ &.w-90dvw {
354
+ width: 90dvw;
355
+ }
356
+ &.w-16 {
357
+ width: 16px;
358
+ }
359
+ &.w-20 {
360
+ width: 20px;
361
+ }
362
+ &.w-24 {
363
+ width: 24px;
364
+ }
365
+ &.w-32 {
366
+ width: 32px;
367
+ }
368
+ &.w-48 {
369
+ width: 48px;
370
+ }
371
+ &.w-64 {
372
+ width: 64px;
373
+ }
374
+
375
+ // Heights
376
+ &.h-a {
377
+ height: auto;
378
+ }
379
+ &.h-full,&.h-100 {
380
+ height: 100%;
381
+ }
382
+ &.h-100dvw {
383
+ height: 100dvw;
384
+ }
385
+ &.h-95dvw {
386
+ height: 95dvw;
387
+ }
388
+ &.h-90dvw {
389
+ height: 90dvw;
390
+ }
391
+ &.h-16 {
392
+ height: 16px;
393
+ }
394
+ &.h-20 {
395
+ height: 20px;
396
+ }
397
+ &.h-24 {
398
+ height: 24px;
399
+ }
400
+ &.h-32 {
401
+ height: 32px;
402
+ }
403
+ &.h-48 {
404
+ height: 48px;
405
+ }
406
+ &.h-64 {
407
+ height: 64px;
408
+ }
409
+
410
+ // Positions
411
+ &.pos-r {
412
+ position: relative;
413
+ }
414
+ &.pos-a {
415
+ position: absolute;
416
+ }
417
+ &.pos-f {
418
+ position: fixed;
419
+ }
420
+ &.pos-s {
421
+ position: sticky;
422
+ }
423
+
424
+ // Top positions
425
+ &.t-a {
426
+ top: auto;
427
+ }
428
+ &.t-0 {
429
+ top: 0;
430
+ }
431
+ &.t-2 {
432
+ top: 2px;
433
+ }
434
+ &.t-4 {
435
+ top: 4px;
436
+ }
437
+ &.t-6 {
438
+ top: 6px;
439
+ }
440
+ &.t-8 {
441
+ top: 8px;
442
+ }
443
+ &.t-12 {
444
+ top: 12px;
445
+ }
446
+ &.t-16 {
447
+ top: 16px;
448
+ }
449
+ &.t-20 {
450
+ top: 20px;
451
+ }
452
+
453
+ // Bottom positions
454
+ &.b-a {
455
+ bottom: auto;
456
+ }
457
+ &.b-0 {
458
+ bottom: 0;
459
+ }
460
+ &.b-2 {
461
+ bottom: 2px;
462
+ }
463
+ &.b-4 {
464
+ bottom: 4px;
465
+ }
466
+ &.b-6 {
467
+ bottom: 6px;
468
+ }
469
+ &.b-8 {
470
+ bottom: 8px;
471
+ }
472
+ &.b-12 {
473
+ bottom: 12px;
474
+ }
475
+ &.b-16 {
476
+ bottom: 16px;
477
+ }
478
+ &.b-20 {
479
+ bottom: 20px;
480
+ }
481
+
482
+ // Start inline insets
483
+ &.s-a {
484
+ inset-inline-start: auto;
485
+ }
486
+ &.s-0 {
487
+ inset-inline-start: 0;
488
+ }
489
+ &.s-2 {
490
+ inset-inline-start: 2px;
491
+ }
492
+ &.s-4 {
493
+ inset-inline-start: 4px;
494
+ }
495
+ &.s-6 {
496
+ inset-inline-start: 6px;
497
+ }
498
+ &.s-8 {
499
+ inset-inline-start: 8px;
500
+ }
501
+ &.s-12 {
502
+ inset-inline-start: 12px;
503
+ }
504
+ &.s-16 {
505
+ inset-inline-start: 16px;
506
+ }
507
+ &.s-20 {
508
+ inset-inline-start: 20px;
509
+ }
510
+ &.e-a {
511
+ inset-inline-end: auto;
512
+ }
513
+
514
+ // End inline insets
515
+ &.e-0 {
516
+ inset-inline-end: 0;
517
+ }
518
+ &.e-2 {
519
+ inset-inline-end: 2px;
520
+ }
521
+ &.e-4 {
522
+ inset-inline-end: 4px;
523
+ }
524
+ &.e-6 {
525
+ inset-inline-end: 6px;
526
+ }
527
+ &.e-8 {
528
+ inset-inline-end: 8px;
529
+ }
530
+ &.e-12 {
531
+ inset-inline-end: 12px;
532
+ }
533
+ &.e-16 {
534
+ inset-inline-end: 16px;
535
+ }
536
+ &.e-20 {
537
+ inset-inline-end: 20px;
538
+ }
539
+
540
+ // Inline insets
541
+ &.ii-a {
542
+ inset-inline: auto;
543
+ }
544
+ &.ii-0 {
545
+ inset-inline: 0;
546
+ }
547
+ &.ii-2 {
548
+ inset-inline: 2px;
549
+ }
550
+ &.ii-4 {
551
+ inset-inline: 4px;
552
+ }
553
+ &.ii-6 {
554
+ inset-inline: 6px;
555
+ }
556
+ &.ii-8 {
557
+ inset-inline: 8px;
558
+ }
559
+ &.ii-12 {
560
+ inset-inline: 12px;
561
+ }
562
+ &.ii-16 {
563
+ inset-inline: 16px;
564
+ }
565
+ &.ii-20 {
566
+ inset-inline: 20px;
567
+ }
568
+ &.ib-a {
569
+ inset-block: auto;
570
+ }
571
+ &.ib-0 {
572
+ inset-block: 0;
573
+ }
574
+
575
+ // Insets
576
+ &.i-a {
577
+ inset: auto;
578
+ }
579
+ &.i-0 {
580
+ inset: 0;
581
+ }
582
+ &.i-2 {
583
+ inset: 2px;
584
+ }
585
+ &.i-4 {
586
+ inset: 4px;
587
+ }
588
+
589
+ // Z-indexes
590
+ &.z-a {
591
+ z-index: auto;
592
+ }
593
+ &.z-0 {
594
+ z-index: 0;
595
+ }
596
+ &.z-1 {
597
+ z-index: 1;
598
+ }
599
+ &.z-2 {
600
+ z-index: 2;
601
+ }
602
+ &.z-3 {
603
+ z-index: 3;
604
+ }
605
+ &.z--1 {
606
+ z-index: -1;
607
+ }
608
+ &.z--2 {
609
+ z-index: -2;
610
+ }
611
+ &.z--3 {
612
+ z-index: -3;
613
+ }
614
+
615
+ // Opacity
616
+ &.o-0 {
617
+ opacity: 0;
618
+ }
619
+ &.o-10 {
620
+ opacity: .1;
621
+ }
622
+ &.o-50 {
623
+ opacity: .5;
624
+ }
625
+ &.o-1,&.o-100 {
626
+ opacity: 1;
627
+ }
628
+
629
+ // Transitions
630
+ &.tr-all {
631
+ transition: all .2s ease-in-out;
632
+ }
633
+
634
+ // Borders
635
+ &.border-t,&.border-transparent,&.border-h-t:hover,&.border-h-transparent:hover {
636
+ border-color: $transparent;
637
+ }
638
+
639
+ // Font sizes
640
+ &.fs-10 {
641
+ font-size: .625rem;
642
+ }
643
+ &.fs-12 {
644
+ font-size: .75rem;
645
+ }
646
+ &.fs-14 {
647
+ font-size: .875rem;
648
+ }
649
+ &.fs-16 {
650
+ font-size: 1rem;
651
+ }
652
+ &.fs-18 {
653
+ font-size: 1.125rem;
654
+ }
655
+ &.fs-20 {
656
+ font-size: 1.25rem;
657
+ }
658
+ &.fs-24 {
659
+ font-size: 1.5rem;
660
+ }
661
+ &.fs-32 {
662
+ font-size: 2rem;
663
+ }
664
+ &.fs-48 {
665
+ font-size: 3rem;
666
+ }
667
+
668
+ // Font weight
669
+ &.fw-100 {
670
+ font-weight: 100;
671
+ }
672
+ &.fw-200 {
673
+ font-weight: 200;
674
+ }
675
+ &.fw-300 {
676
+ font-weight: 300;
677
+ }
678
+ &.fw-400 {
679
+ font-weight: 400;
680
+ }
681
+ &.fw-500 {
682
+ font-weight: 500;
683
+ }
684
+ &.fw-600 {
685
+ font-weight: 600;
686
+ }
687
+ &.fw-700 {
688
+ font-weight: 700;
689
+ }
690
+ &.fw-800 {
691
+ font-weight: 800;
692
+ }
693
+ &.fw-900 {
694
+ font-weight: 900;
695
+ }
696
+
697
+ // Line height
698
+ &.lh-1 {
699
+ line-height: 1;
700
+ }
701
+
702
+ // Backgrounds
703
+ &.back-t,&.b-transparent {
704
+ background: $transparent;
705
+ }
706
+ &.back-w,&.b-white {
707
+ background: #fff;
708
+ }
709
+ &.back-b,&.b-black {
710
+ background: #000;
711
+ }
712
+
713
+ // Overflows
714
+ &.over-a {
715
+ overflow: auto;
716
+ }
717
+ &.over-h {
718
+ overflow: hidden;
719
+ }
720
+
721
+ // Text aligns
722
+ &.texta-s {
723
+ text-align: start;
724
+ }
725
+ &.texta-c {
726
+ text-align: center;
727
+ }
728
+ &.texta-e {
729
+ text-align: end;
730
+ }
731
+
732
+ // Line clamps
733
+ &.line-clamp:not(:has(a)), &.line-clamp a {
734
+ overflow: hidden!important;
735
+ display: -webkit-box!important;
736
+ -webkit-box-orient: vertical;
737
+ }
738
+ &.line-clamp-1:not(:has(a)), &.line-clamp-1 a {
739
+ -webkit-line-clamp: 1;
740
+ }
741
+ &.line-clamp-2:not(:has(a)), &.line-clamp-2 a {
742
+ -webkit-line-clamp: 2;
743
+ }
744
+ &.line-clamp-3:not(:has(a)), &.line-clamp-3 a {
745
+ -webkit-line-clamp: 3;
746
+ }
747
+
748
+ // Other
749
+ &.white-space-nowrap {
750
+ white-space: nowrap;
751
+ }
752
+ &.bs-n {
753
+ box-shadow: none;
754
+ }
755
+ &.ar-1 {
756
+ aspect-ratio: 1;
757
+ }
758
+ &.bsize-bb {
759
+ box-sizing: border-box;
760
+ }
761
+ &.p-event-n {
762
+ pointer-events: none;
763
+ touch-action: none;
764
+ }
765
+ &.disabled {
766
+ opacity: .5;
767
+ touch-action: none;
768
+ pointer-events: none;
769
+ }
770
+ .screen-reader-text {
771
+ clip: rect(1px, 1px, 1px, 1px)!important;
772
+ word-wrap: normal!important;
773
+ border: 0!important;
774
+ clip-path: inset(50%)!important;
775
+ height: 1px!important;
776
+ margin: -1px!important;
777
+ overflow: hidden!important;
778
+ overflow-wrap: normal!important;
779
+ padding: 0!important;
780
+ position: absolute!important;
781
+ width: 1px!important;
782
+ }
783
+ }