mj-css-framework 1.1.2 → 1.1.3

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 +19 -19
  2. package/package.json +1 -1
  3. package/styles.min.css +1 -1
  4. package/styles.scss +83 -2
package/README.md CHANGED
@@ -37,31 +37,31 @@ Every utility is scoped to an element carrying the `mj` class, so `df` is used a
37
37
  | Flex | `flex-w`, `flex-w-n`, `flex-dir-c`, `flex-dir-r`, `flex-a`, `flex-1` | Flex wrapping, direction, and sizing utilities |
38
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
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 |
40
+ | Gaps | `g-0`, `g-2`, `g-4`, `g-6`, `g-8`, `g-10`, `g-12`, `g-16`, `g-20`, `g-24` | 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`, `g-r-24` | 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`, `g-c-24` | Column spacing for flex and grid layouts |
43
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 |
44
+ | Margin top | `mt-a`, `mt-0`, `mt-4`, `mt-8`, `mt-12`, `mt-16`, `mt-20`, `mt-24` | Controls the top margin |
45
+ | Margin bottom | `mb-a`, `mb-0`, `mb-4`, `mb-8`, `mb-12`, `mb-16`, `mb-20`, `mb-24` | 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`, `m-block-24` | 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`, `m-inline-24` | Controls the inline-axis margins |
48
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 |
49
+ | Padding top | `pt-a`, `pt-0`, `pt-4`, `pt-8`, `pt-12`, `pt-16`, `pt-20`, `pt-24` | Controls the top padding |
50
+ | Padding bottom | `pb-a`, `pb-0`, `pb-4`, `pb-8`, `pb-12`, `pb-16`, `pb-20`, `pb-24` | 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`, `p-block-24` | 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`, `p-inline-24` | Controls the inline-axis padding |
53
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
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 |
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-36`, `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-36`, `h-48`, `h-64` | Height utilities |
57
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 |
58
+ | Top | `t-a`, `t-0`, `t-2`, `t-4`, `t-6`, `t-8`, `t-12`, `t-16`, `t-20`, `t-24` | Top position values |
59
+ | Bottom | `b-a`, `b-0`, `b-2`, `b-4`, `b-6`, `b-8`, `b-12`, `b-16`, `b-20`, `b-24` | Bottom position values |
60
+ | Inline-start | `s-a`, `s-0`, `s-2`, `s-4`, `s-6`, `s-8`, `s-12`, `s-16`, `s-20`, `s-24` | 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`, `e-24` | 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`, `ii-24` | Inset inline position values |
63
63
  | Block inset | `ib-a`, `ib-0` | Inset block position values |
64
- | Inset | `i-a`, `i-0`, `i-2`, `i-4` | Inset position values |
64
+ | Inset | `i-a`, `i-0`, `i-2`, `i-4`, `i-6`, `i-8`, `i-10`, `i-12`, `i-14`, `i-16`, `i-18`, `i-20`, `i-24` | Inset position values |
65
65
  | Z-index | `z-a`, `z-0`, `z-1`, `z-2`, `z-3`, `z--1`, `z--2`, `z--3` | Stacking order utilities |
66
66
  | Opacity | `o-0`, `o-10`, `o-50`, `o-1`, `o-100` | Opacity presets |
67
67
  | Transition | `tr-all` | A short all-property transition |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mj-css-framework",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
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",
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.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-36{width:36px}.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-36{height:36px}.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-24{gap:24px}.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-r-24{row-gap:24px}.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.g-c-24{column-gap:24px}.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.mt-24{margin-top:24px}.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.mb-24{margin-bottom:24px}.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-block-24{margin-block:24px}.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.m-inline-24{margin-inline:24px}.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.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.pt-24{padding-top:24px}.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.pb-24{padding-bottom:24px}.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-block-24{padding-block:24px}.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.p-inline-24{padding-inline:24px}.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-36{width:36px}.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-36{height:36px}.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.t-24{top:24px}.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.b-24{bottom:24px}.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.s-24{inset-inline-start:24px}.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.e-24{inset-inline-end:24px}.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.ii-24{inset-inline:24px}.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.i-6{inset:6px}.mj.i-8{inset:8px}.mj.i-10{inset:10px}.mj.i-12{inset:12px}.mj.i-14{inset:14px}.mj.i-16{inset:16px}.mj.i-18{inset:18px}.mj.i-20{inset:20px}.mj.i-22{inset:22px}.mj.i-24{inset:24px}.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,.mj.fw-n,.mj.fw-normal{font-weight:400}.mj.fw-500{font-weight:500}.mj.fw-600{font-weight:600}.mj.fw-700,.mj.fw-b,.mj.fw-bold{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
@@ -93,6 +93,9 @@ $transparent: #{"#0000"};
93
93
  &.g-20 {
94
94
  gap: 20px;
95
95
  }
96
+ &.g-24 {
97
+ gap: 24px;
98
+ }
96
99
  &.g-r-0 {
97
100
  row-gap: 0;
98
101
  }
@@ -120,6 +123,9 @@ $transparent: #{"#0000"};
120
123
  &.g-r-20 {
121
124
  row-gap: 20px;
122
125
  }
126
+ &.g-r-24 {
127
+ row-gap: 24px;
128
+ }
123
129
  &.g-c-0 {
124
130
  column-gap: 0;
125
131
  }
@@ -147,6 +153,9 @@ $transparent: #{"#0000"};
147
153
  &.g-c-20 {
148
154
  column-gap: 20px;
149
155
  }
156
+ &.g-c-24 {
157
+ column-gap: 24px;
158
+ }
150
159
 
151
160
  // Margins
152
161
  &.m-a {
@@ -203,6 +212,9 @@ $transparent: #{"#0000"};
203
212
  &.mt-20 {
204
213
  margin-top: 20px;
205
214
  }
215
+ &.mt-24 {
216
+ margin-top: 24px;
217
+ }
206
218
  &.mb-a {
207
219
  margin-bottom: auto;
208
220
  }
@@ -224,6 +236,9 @@ $transparent: #{"#0000"};
224
236
  &.mb-20 {
225
237
  margin-bottom: 20px;
226
238
  }
239
+ &.mb-24 {
240
+ margin-bottom: 24px;
241
+ }
227
242
  &.m-block-a {
228
243
  margin-block: auto;
229
244
  }
@@ -245,6 +260,9 @@ $transparent: #{"#0000"};
245
260
  &.m-block-20 {
246
261
  margin-block: 20px;
247
262
  }
263
+ &.m-block-24 {
264
+ margin-block: 24px;
265
+ }
248
266
  &.m-inline-a {
249
267
  margin-inline: auto;
250
268
  }
@@ -266,6 +284,9 @@ $transparent: #{"#0000"};
266
284
  &.m-inline-20 {
267
285
  margin-inline: 20px;
268
286
  }
287
+ &.m-inline-24 {
288
+ margin-inline: 24px;
289
+ }
269
290
 
270
291
  // Paddings
271
292
  &.p-0 {
@@ -298,6 +319,9 @@ $transparent: #{"#0000"};
298
319
  &.p-24 {
299
320
  padding: 24px;
300
321
  }
322
+ &.p-24 {
323
+ padding: 24px;
324
+ }
301
325
  &.pt-a {
302
326
  padding-top: auto;
303
327
  }
@@ -319,6 +343,9 @@ $transparent: #{"#0000"};
319
343
  &.pt-20 {
320
344
  padding-top: 20px;
321
345
  }
346
+ &.pt-24 {
347
+ padding-top: 24px;
348
+ }
322
349
  &.pb-a {
323
350
  padding-bottom: auto;
324
351
  }
@@ -340,6 +367,9 @@ $transparent: #{"#0000"};
340
367
  &.pb-20 {
341
368
  padding-bottom: 20px;
342
369
  }
370
+ &.pb-24 {
371
+ padding-bottom: 24px;
372
+ }
343
373
  &.p-block-a {
344
374
  padding-block: auto;
345
375
  }
@@ -361,6 +391,9 @@ $transparent: #{"#0000"};
361
391
  &.p-block-20 {
362
392
  padding-block: 20px;
363
393
  }
394
+ &.p-block-24 {
395
+ padding-block: 24px;
396
+ }
364
397
  &.p-inline-a {
365
398
  padding-inline: auto;
366
399
  }
@@ -382,6 +415,9 @@ $transparent: #{"#0000"};
382
415
  &.p-inline-20 {
383
416
  padding-inline: 20px;
384
417
  }
418
+ &.p-inline-24 {
419
+ padding-inline: 24px;
420
+ }
385
421
 
386
422
  // Border radius
387
423
  &.br-2 {
@@ -544,6 +580,9 @@ $transparent: #{"#0000"};
544
580
  &.t-20 {
545
581
  top: 20px;
546
582
  }
583
+ &.t-24 {
584
+ top: 24px;
585
+ }
547
586
 
548
587
  // Bottom positions
549
588
  &.b-a {
@@ -573,6 +612,9 @@ $transparent: #{"#0000"};
573
612
  &.b-20 {
574
613
  bottom: 20px;
575
614
  }
615
+ &.b-24 {
616
+ bottom: 24px;
617
+ }
576
618
 
577
619
  // Start inline insets
578
620
  &.s-a {
@@ -602,6 +644,9 @@ $transparent: #{"#0000"};
602
644
  &.s-20 {
603
645
  inset-inline-start: 20px;
604
646
  }
647
+ &.s-24 {
648
+ inset-inline-start: 24px;
649
+ }
605
650
  &.e-a {
606
651
  inset-inline-end: auto;
607
652
  }
@@ -631,6 +676,9 @@ $transparent: #{"#0000"};
631
676
  &.e-20 {
632
677
  inset-inline-end: 20px;
633
678
  }
679
+ &.e-24 {
680
+ inset-inline-end: 24px;
681
+ }
634
682
 
635
683
  // Inline insets
636
684
  &.ii-a {
@@ -660,6 +708,9 @@ $transparent: #{"#0000"};
660
708
  &.ii-20 {
661
709
  inset-inline: 20px;
662
710
  }
711
+ &.ii-24 {
712
+ inset-inline: 24px;
713
+ }
663
714
  &.ib-a {
664
715
  inset-block: auto;
665
716
  }
@@ -680,6 +731,36 @@ $transparent: #{"#0000"};
680
731
  &.i-4 {
681
732
  inset: 4px;
682
733
  }
734
+ &.i-6 {
735
+ inset: 6px;
736
+ }
737
+ &.i-8 {
738
+ inset: 8px;
739
+ }
740
+ &.i-10 {
741
+ inset: 10px;
742
+ }
743
+ &.i-12 {
744
+ inset: 12px;
745
+ }
746
+ &.i-14 {
747
+ inset: 14px;
748
+ }
749
+ &.i-16 {
750
+ inset: 16px;
751
+ }
752
+ &.i-18 {
753
+ inset: 18px;
754
+ }
755
+ &.i-20 {
756
+ inset: 20px;
757
+ }
758
+ &.i-22 {
759
+ inset: 22px;
760
+ }
761
+ &.i-24 {
762
+ inset: 24px;
763
+ }
683
764
 
684
765
  // Z-indexes
685
766
  &.z-a {
@@ -770,7 +851,7 @@ $transparent: #{"#0000"};
770
851
  &.fw-300 {
771
852
  font-weight: 300;
772
853
  }
773
- &.fw-400 {
854
+ &.fw-400,&.fw-n,&.fw-normal {
774
855
  font-weight: 400;
775
856
  }
776
857
  &.fw-500 {
@@ -779,7 +860,7 @@ $transparent: #{"#0000"};
779
860
  &.fw-600 {
780
861
  font-weight: 600;
781
862
  }
782
- &.fw-700 {
863
+ &.fw-700,&.fw-b,&.fw-bold {
783
864
  font-weight: 700;
784
865
  }
785
866
  &.fw-800 {