mj-css-framework 1.0.0 → 1.1.1

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 (4) hide show
  1. package/README.md +63 -26
  2. package/package.json +3 -3
  3. package/styles.min.css +1 -1
  4. package/styles.scss +90 -1
package/README.md CHANGED
@@ -18,40 +18,61 @@ Include the compiled stylesheet in your page:
18
18
  Apply utilities by combining the `mj` namespace with one or more utility names:
19
19
 
20
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>
21
+ <section class="mj df ai-c jc-sb g-16 p-inline-20 p-block-12">
22
+ <h1 class="mj m-block-0">Dashboard</h1>
23
+ <button class="mj br-8 p-inline-12 p-block-8">Open</button>
24
24
  </section>
25
25
  ```
26
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.
27
+ Most utilities are scoped to an element carrying `mj`. For example, `mj df` sets `display: flex`, while `mj g-16` sets `gap: 16px`.
28
28
 
29
- ## Utility groups
29
+ ## Utility reference
30
30
 
31
- | Group | Examples | Purpose |
31
+ Every utility is scoped to an element carrying the `mj` class, so `df` is used as `class="mj df"`.
32
+
33
+ | Group | Utilities | Purpose |
32
34
  | --- | --- | --- |
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 |
35
+ | Display | `df`, `dn`, `dg` | Flex, grid, and hidden display modes |
36
+ | Alignment | `ai-c`, `jc-c`, `jc-sb`, `center` | Flex and grid alignment |
37
+ | Flex | `flex-w`, `flex-w-n`, `flex-dir-c`, `flex-dir-r`, `flex-a`, `flex-1` | Flex wrapping, direction, and sizing utilities |
38
+ | Grid columns | `g-t-c-1`, `g-t-c-2`, `g-t-c-3`, `g-t-c-4` | One-to-four equal grid columns |
39
+ | Cells | `cell-1` | Places an item in the first grid row and column |
40
+ | Gaps | `g-0`, `g-2`, `g-4`, `g-6`, `g-8`, `g-10`, `g-12`, `g-16`, `g-20` | Gap, row-gap, and column-gap |
41
+ | Row gap | `g-r-0`, `g-r-2`, `g-r-4`, `g-r-6`, `g-r-8`, `g-r-10`, `g-r-12`, `g-r-16`, `g-r-20` | Row spacing for flex and grid layouts |
42
+ | Column gap | `g-c-0`, `g-c-2`, `g-c-4`, `g-c-6`, `g-c-8`, `g-c-10`, `g-c-12`, `g-c-16`, `g-c-20` | Column spacing for flex and grid layouts |
43
+ | Margin | `m-a`, `m-0`, `m-2`, `m-4`, `m-6`, `m-8`, `m-10`, `m-12`, `m-16`, `m-20`, `m-24` | Directional and logical margins |
44
+ | Margin top | `mt-a`, `mt-0`, `mt-4`, `mt-8`, `mt-12`, `mt-16`, `mt-20` | Controls the top margin |
45
+ | Margin bottom | `mb-a`, `mb-0`, `mb-4`, `mb-8`, `mb-12`, `mb-16`, `mb-20` | Controls the bottom margin |
46
+ | Margin block | `m-block-a`, `m-block-0`, `m-block-4`, `m-block-8`, `m-block-12`, `m-block-16`, `m-block-20` | Controls the block-axis margins |
47
+ | Margin inline | `m-inline-a`, `m-inline-0`, `m-inline-4`, `m-inline-8`, `m-inline-12`, `m-inline-16`, `m-inline-20` | Controls the inline-axis margins |
48
+ | Padding | `p-0`, `p-2`, `p-4`, `p-6`, `p-8`, `p-10`, `p-12`, `p-16`, `p-20`, `p-24` | Directional and logical padding |
49
+ | Padding top | `pt-a`, `pt-0`, `pt-4`, `pt-8`, `pt-12`, `pt-16`, `pt-20` | Controls the top padding |
50
+ | Padding bottom | `pb-a`, `pb-0`, `pb-4`, `pb-8`, `pb-12`, `pb-16`, `pb-20` | Controls the bottom padding |
51
+ | Padding block | `p-block-a`, `p-block-0`, `p-block-4`, `p-block-8`, `p-block-12`, `p-block-16`, `p-block-20` | Controls the block-axis padding |
52
+ | Padding inline | `p-inline-a`, `p-inline-0`, `p-inline-4`, `p-inline-8`, `p-inline-12`, `p-inline-16`, `p-inline-20` | Controls the inline-axis padding |
53
+ | Border radius | `br-2`, `br-4`, `br-8`, `br-12`, `br-16`, `br-20`, `br-24`, `br-32`, `br-pill`, `br-circle` | Rounded corners and shapes |
54
+ | Text color | `color-fff`, `color-white`, `color-h-white`, `color-000`, `color-black`, `color-h-black` | Text colors and hover colors |
55
+ | Width | `w-a`, `w-fit`, `w-full`, `w-100`, `w-100dvw`, `w-95dvw`, `w-90dvw`, `w-16`, `w-20`, `w-24`, `w-32`, `w-48`, `w-64` | Width utilities |
56
+ | Height | `h-a`, `h-full`, `h-100`, `h-100dvw`, `h-95dvw`, `h-90dvw`, `h-16`, `h-20`, `h-24`, `h-32`, `h-48`, `h-64` | Height utilities |
57
+ | Position | `pos-r`, `pos-a`, `pos-f`, `pos-s` | Positioning values |
58
+ | Top | `t-a`, `t-0`, `t-2`, `t-4`, `t-6`, `t-8`, `t-12`, `t-16`, `t-20` | Top position values |
59
+ | Bottom | `b-a`, `b-0`, `b-2`, `b-4`, `b-6`, `b-8`, `b-12`, `b-16`, `b-20` | Bottom position values |
60
+ | Inline-start | `s-a`, `s-0`, `s-2`, `s-4`, `s-6`, `s-8`, `s-12`, `s-16`, `s-20` | Inline start position values |
61
+ | Inline-end | `e-a`, `e-0`, `e-2`, `e-4`, `e-6`, `e-8`, `e-12`, `e-16`, `e-20` | Inline end position values |
62
+ | Inline inset | `ii-a`, `ii-0`, `ii-2`, `ii-4`, `ii-6`, `ii-8`, `ii-12`, `ii-16`, `ii-20` | Inset inline position values |
63
+ | Block inset | `ib-a`, `ib-0` | Inset block position values |
64
+ | Inset | `i-a`, `i-0`, `i-2`, `i-4` | Inset position values |
65
+ | Z-index | `z-a`, `z-0`, `z-1`, `z-2`, `z-3`, `z--1`, `z--2`, `z--3` | Stacking order utilities |
66
+ | Opacity | `o-0`, `o-10`, `o-50`, `o-1`, `o-100` | Opacity presets |
67
+ | Transition | `tr-all` | A short all-property transition |
68
+ | Border | `border-t`, `border-transparent`, `border-h-t`, `border-h-transparent` | Borders utilities |
69
+ | Font size | `fs-10`, `fs-12`, `fs-14`, `fs-16`, `fs-18`, `fs-20`, `fs-24`, `fs-32`, `fs-48` | Rem-based font-size presets |
70
+ | Font weight | `fw-100`, `fw-200`, `fw-300`, `fw-400`, `fw-500`, `fw-600`, `fw-700`, `fw-800`, `fw-900` | Numeric font-weight presets |
50
71
  | Line height | `lh-1` | Line-height presets |
51
- | Backgrounds | `back-t`, `back-w`, `back-b` | Transparent, white, and black backgrounds |
72
+ | Background | `back-t`, `b-transparent`, `back-w`, `b-white`, `back-b`, `b-black` | Transparent, white, and black backgrounds |
52
73
  | Overflow | `over-a`, `over-h` | Auto and hidden overflow behavior |
53
74
  | 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 |
75
+ | Line clamp | `line-clamp`, `line-clamp-1`, `line-clamp-2`, `line-clamp-3` | Multi-line truncation helpers |
55
76
  | White space | `white-space-nowrap` | Prevents text wrapping |
56
77
  | Box shadow | `bs-n` | Removes the box shadow |
57
78
  | Aspect ratio | `ar-1` | Sets a square aspect ratio |
@@ -59,7 +80,23 @@ Most utilities are scoped to an element carrying `mj`. For example, `mj df` sets
59
80
  | Interaction | `p-event-n`, `disabled` | Disables pointer and touch interaction |
60
81
  | Accessibility | `screen-reader-text` | Visually hides content while keeping it available to screen readers |
61
82
 
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.
83
+ ### Flex, cell, and hover utilities
84
+
85
+ | Utility | Description |
86
+ | --- | --- |
87
+ | `flex-w` | Sets `flex-wrap: wrap`, allowing flex items to move onto multiple lines. |
88
+ | `flex-w-n` | Sets `flex-wrap: nowrap`, keeping flex items on a single line. |
89
+ | `flex-dir-c` | Sets `flex-direction: column`. |
90
+ | `flex-dir-r` | Sets `flex-direction: row`. |
91
+ | `flex-a` | Sets `flex: auto`. |
92
+ | `flex-1` | Sets `flex: 1`, allowing an item to grow and share available space. |
93
+ | `cell-1` | Places a grid item in grid row 1 and grid column 1. |
94
+ | `color-h-white` | Applies white text color when the `mj` element is hovered. |
95
+ | `color-h-black` | Applies black text color when the `mj` element is hovered. |
96
+ | `border-h-t` | Applies a transparent border color when the `mj` element is hovered. |
97
+ | `border-h-transparent` | Applies a transparent border color when the `mj` element is hovered. |
98
+
99
+ Numeric utilities use the value in the class name as pixels unless otherwise noted. For example, `mj mt-16` produces `margin-top: 16px`, and `mj w-48` produces `width: 48px`. The `a` value means `auto`; it is primarily useful for margin and positioning utilities. Logical properties such as `m-block-*` and `p-inline-*` work across writing directions.
63
100
 
64
101
  ## Browser support
65
102
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mj-css-framework",
3
- "version": "1.0.0",
3
+ "version": "1.1.1",
4
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
5
  "repository": {
6
6
  "type": "git",
@@ -9,7 +9,7 @@
9
9
  "keywords": [
10
10
  "css",
11
11
  "framework",
12
- "css framework"
12
+ "css framework"
13
13
  ],
14
14
  "author": "mj.khajeh",
15
15
  "license": "MIT",
@@ -17,4 +17,4 @@
17
17
  "url": "https://github.com/mjkhajeh/mj-css-framework/issues"
18
18
  },
19
19
  "homepage": "https://github.com/mjkhajeh/mj-css-framework#readme"
20
- }
20
+ }
package/styles.min.css CHANGED
@@ -1 +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}
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.flex-w{flex-wrap:wrap}.mj.flex-w-n{flex-wrap:nowrap}.mj.flex-dir-c{flex-direction:column}.mj.flex-dir-r{flex-direction:row}.mj.flex-a{flex:auto}.mj.flex-1{flex:1}.mj.cell-1{grid-row:1;grid-column:1}.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.m-a{margin:auto}.mj.m-0{margin:0}.mj.m-2{margin:2px}.mj.m-4{margin:4px}.mj.m-6{margin:6px}.mj.m-8{margin:8px}.mj.m-10{margin:10px}.mj.m-12{margin:12px}.mj.m-16{margin:16px}.mj.m-20{margin:20px}.mj.m-24{margin:24px}.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.p-0{padding:0}.mj.p-2{padding:2px}.mj.p-4{padding:4px}.mj.p-6{padding:6px}.mj.p-8{padding:8px}.mj.p-10{padding:10px}.mj.p-12{padding:12px}.mj.p-16{padding:16px}.mj.p-20{padding:20px}.mj.p-24{padding:24px}.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 CHANGED
@@ -25,6 +25,32 @@ $transparent: #{"#0000"};
25
25
  place-items: center;
26
26
  }
27
27
 
28
+ // Flex
29
+ &.flex-w {
30
+ flex-wrap: wrap;
31
+ }
32
+ &.flex-w-n {
33
+ flex-wrap: nowrap;
34
+ }
35
+ &.flex-dir-c {
36
+ flex-direction: column;
37
+ }
38
+ &.flex-dir-r {
39
+ flex-direction: row;
40
+ }
41
+ &.flex-a {
42
+ flex: auto;
43
+ }
44
+ &.flex-1 {
45
+ flex: 1;
46
+ }
47
+
48
+ // Grid
49
+ &.cell-1 {
50
+ grid-row: 1;
51
+ grid-column: 1;
52
+ }
53
+
28
54
  // Grid columns
29
55
  &.g-t-c-1 {
30
56
  grid-template-columns: 1fr;
@@ -123,6 +149,39 @@ $transparent: #{"#0000"};
123
149
  }
124
150
 
125
151
  // Margins
152
+ &.m-a {
153
+ margin: auto;
154
+ }
155
+ &.m-0 {
156
+ margin: 0;
157
+ }
158
+ &.m-2 {
159
+ margin: 2px;
160
+ }
161
+ &.m-4 {
162
+ margin: 4px;
163
+ }
164
+ &.m-6 {
165
+ margin: 6px;
166
+ }
167
+ &.m-8 {
168
+ margin: 8px;
169
+ }
170
+ &.m-10 {
171
+ margin: 10px;
172
+ }
173
+ &.m-12 {
174
+ margin: 12px;
175
+ }
176
+ &.m-16 {
177
+ margin: 16px;
178
+ }
179
+ &.m-20 {
180
+ margin: 20px;
181
+ }
182
+ &.m-24 {
183
+ margin: 24px;
184
+ }
126
185
  &.mt-a {
127
186
  margin-top: auto;
128
187
  }
@@ -209,6 +268,36 @@ $transparent: #{"#0000"};
209
268
  }
210
269
 
211
270
  // Paddings
271
+ &.p-0 {
272
+ padding: 0;
273
+ }
274
+ &.p-2 {
275
+ padding: 2px;
276
+ }
277
+ &.p-4 {
278
+ padding: 4px;
279
+ }
280
+ &.p-6 {
281
+ padding: 6px;
282
+ }
283
+ &.p-8 {
284
+ padding: 8px;
285
+ }
286
+ &.p-10 {
287
+ padding: 10px;
288
+ }
289
+ &.p-12 {
290
+ padding: 12px;
291
+ }
292
+ &.p-16 {
293
+ padding: 16px;
294
+ }
295
+ &.p-20 {
296
+ padding: 20px;
297
+ }
298
+ &.p-24 {
299
+ padding: 24px;
300
+ }
212
301
  &.pt-a {
213
302
  padding-top: auto;
214
303
  }
@@ -767,7 +856,7 @@ $transparent: #{"#0000"};
767
856
  touch-action: none;
768
857
  pointer-events: none;
769
858
  }
770
- .screen-reader-text {
859
+ &.screen-reader-text {
771
860
  clip: rect(1px, 1px, 1px, 1px)!important;
772
861
  word-wrap: normal!important;
773
862
  border: 0!important;