mj-css-framework 1.1.1 → 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 +89 -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.1",
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-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-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 {
@@ -454,6 +490,9 @@ $transparent: #{"#0000"};
454
490
  &.w-32 {
455
491
  width: 32px;
456
492
  }
493
+ &.w-36 {
494
+ width: 36px;
495
+ }
457
496
  &.w-48 {
458
497
  width: 48px;
459
498
  }
@@ -489,6 +528,9 @@ $transparent: #{"#0000"};
489
528
  &.h-32 {
490
529
  height: 32px;
491
530
  }
531
+ &.h-36 {
532
+ height: 36px;
533
+ }
492
534
  &.h-48 {
493
535
  height: 48px;
494
536
  }
@@ -538,6 +580,9 @@ $transparent: #{"#0000"};
538
580
  &.t-20 {
539
581
  top: 20px;
540
582
  }
583
+ &.t-24 {
584
+ top: 24px;
585
+ }
541
586
 
542
587
  // Bottom positions
543
588
  &.b-a {
@@ -567,6 +612,9 @@ $transparent: #{"#0000"};
567
612
  &.b-20 {
568
613
  bottom: 20px;
569
614
  }
615
+ &.b-24 {
616
+ bottom: 24px;
617
+ }
570
618
 
571
619
  // Start inline insets
572
620
  &.s-a {
@@ -596,6 +644,9 @@ $transparent: #{"#0000"};
596
644
  &.s-20 {
597
645
  inset-inline-start: 20px;
598
646
  }
647
+ &.s-24 {
648
+ inset-inline-start: 24px;
649
+ }
599
650
  &.e-a {
600
651
  inset-inline-end: auto;
601
652
  }
@@ -625,6 +676,9 @@ $transparent: #{"#0000"};
625
676
  &.e-20 {
626
677
  inset-inline-end: 20px;
627
678
  }
679
+ &.e-24 {
680
+ inset-inline-end: 24px;
681
+ }
628
682
 
629
683
  // Inline insets
630
684
  &.ii-a {
@@ -654,6 +708,9 @@ $transparent: #{"#0000"};
654
708
  &.ii-20 {
655
709
  inset-inline: 20px;
656
710
  }
711
+ &.ii-24 {
712
+ inset-inline: 24px;
713
+ }
657
714
  &.ib-a {
658
715
  inset-block: auto;
659
716
  }
@@ -674,6 +731,36 @@ $transparent: #{"#0000"};
674
731
  &.i-4 {
675
732
  inset: 4px;
676
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
+ }
677
764
 
678
765
  // Z-indexes
679
766
  &.z-a {
@@ -764,7 +851,7 @@ $transparent: #{"#0000"};
764
851
  &.fw-300 {
765
852
  font-weight: 300;
766
853
  }
767
- &.fw-400 {
854
+ &.fw-400,&.fw-n,&.fw-normal {
768
855
  font-weight: 400;
769
856
  }
770
857
  &.fw-500 {
@@ -773,7 +860,7 @@ $transparent: #{"#0000"};
773
860
  &.fw-600 {
774
861
  font-weight: 600;
775
862
  }
776
- &.fw-700 {
863
+ &.fw-700,&.fw-b,&.fw-bold {
777
864
  font-weight: 700;
778
865
  }
779
866
  &.fw-800 {