mj-css-framework 1.2.1 → 1.2.2

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 +16 -16
  2. package/package.json +1 -1
  3. package/styles.min.css +1 -1
  4. package/styles.scss +50 -2
package/README.md CHANGED
@@ -37,23 +37,23 @@ 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`, `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
- | 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`, `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
- | 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`, `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 |
40
+ | Gaps | `g-0`, `g-2`, `g-4`, `g-6`, `g-8`, `g-10`, `g-12`, `g-16`, `g-20`, `g-24`, `g-28` | 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`, `g-r-28` | 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`, `g-c-28` | 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`, `m-28` | Directional and logical margins |
44
+ | Margin top | `mt-a`, `mt-0`, `mt-4`, `mt-8`, `mt-12`, `mt-16`, `mt-20`, `mt-24`, `mt-28` | Controls the top margin |
45
+ | Margin bottom | `mb-a`, `mb-0`, `mb-4`, `mb-8`, `mb-12`, `mb-16`, `mb-20`, `mb-24`, `mb-28` | 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`, `m-block-28` | 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`, `m-inline-28` | 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`, `p-28` | Directional and logical padding |
49
+ | Padding top | `pt-a`, `pt-0`, `pt-4`, `pt-8`, `pt-12`, `pt-16`, `pt-20`, `pt-24`, `pt-28` | Controls the top padding |
50
+ | Padding bottom | `pb-a`, `pb-0`, `pb-4`, `pb-8`, `pb-12`, `pb-16`, `pb-20`, `pb-24`, `pb-28` | 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`, `p-block-28` | 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`, `p-inline-28` | 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-36`, `w-48`, `w-64` | Width utilities |
56
- | Height | `h-a`, `h-full`, `h-100`, `h-100dvh`, `h-95dvh`, `h-90dvh`, `h-16`, `h-20`, `h-24`, `h-32`, `h-36`, `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-28`, `w-32`, `w-36`, `w-48`, `w-64` | Width utilities |
56
+ | Height | `h-a`, `h-full`, `h-100`, `h-100dvh`, `h-95dvh`, `h-90dvh`, `h-16`, `h-20`, `h-24`, `h-28`, `h-32`, `h-36`, `h-48`, `h-64` | Height utilities |
57
57
  | Position | `pos-r`, `pos-a`, `pos-f`, `pos-s` | Positioning values |
58
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
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 |
@@ -66,7 +66,7 @@ Every utility is scoped to an element carrying the `mj` class, so `df` is used a
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 |
68
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 |
69
+ | Font size | `fs-10`, `fs-12`, `fs-14`, `fs-16`, `fs-18`, `fs-20`, `fs-24`, `fs-28`, `fs-32`, `fs-48` | Rem-based font-size presets |
70
70
  | Font weight | `fw-1`, `fw-2`, `fw-3`, `fw-4`, `fw-5`, `fw-6`, `fw-7`, `fw-8`, `fw-9` | Numeric font-weight presets |
71
71
  | Line height | `lh-1` | Line-height presets |
72
72
  | Background | `back-t`, `b-transparent`, `back-w`, `b-white`, `back-b`, `b-black` | Transparent, white, and black backgrounds |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mj-css-framework",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
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-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-100dvh{height:100dvh}.mj.h-95dvh{height:95dvh}.mj.h-90dvh{height:90dvh}.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.ii-s-a{inset-inline-start:auto}.mj.ii-s-0{inset-inline-start:0}.mj.ii-s-2{inset-inline-start:2px}.mj.ii-s-4{inset-inline-start:4px}.mj.ii-s-6{inset-inline-start:6px}.mj.ii-s-8{inset-inline-start:8px}.mj.ii-s-12{inset-inline-start:12px}.mj.ii-s-16{inset-inline-start:16px}.mj.ii-s-20{inset-inline-start:20px}.mj.ii-s-24{inset-inline-start:24px}.mj.ii-e-a{inset-inline-end:auto}.mj.ii-e-0{inset-inline-end:0}.mj.ii-e-2{inset-inline-end:2px}.mj.ii-e-4{inset-inline-end:4px}.mj.ii-e-6{inset-inline-end:6px}.mj.ii-e-8{inset-inline-end:8px}.mj.ii-e-12{inset-inline-end:12px}.mj.ii-e-16{inset-inline-end:16px}.mj.ii-e-20{inset-inline-end:20px}.mj.ii-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.inset-a{inset:auto}.mj.inset-0{inset:0}.mj.inset-2{inset:2px}.mj.inset-4{inset:4px}.mj.inset-6{inset:6px}.mj.inset-8{inset:8px}.mj.inset-10{inset:10px}.mj.inset-12{inset:12px}.mj.inset-14{inset:14px}.mj.inset-16{inset:16px}.mj.inset-18{inset:18px}.mj.inset-20{inset:20px}.mj.inset-22{inset:22px}.mj.inset-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-1{font-weight:100}.mj.fw-2{font-weight:200}.mj.fw-3{font-weight:300}.mj.fw-4,.mj.fw-n,.mj.fw-normal{font-weight:400}.mj.fw-5{font-weight:500}.mj.fw-6{font-weight:600}.mj.fw-7,.mj.fw-b,.mj.fw-bold{font-weight:700}.mj.fw-8{font-weight:800}.mj.fw-9{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.ta-s{text-align:start}.mj.ta-c{text-align:center}.mj.ta-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-28{gap:28px}.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-r-28{row-gap:28px}.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.g-c-28{column-gap:28px}.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.m-28{margin:28px}.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.mt-28{margin-top:28px}.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.mb-28{margin-bottom:28px}.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-block-28{margin-block:28px}.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.m-inline-28{margin-inline:28px}.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-28{padding:28px}.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.pt-28{padding-top:28px}.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.pb-28{padding-bottom:28px}.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-block-28{padding-block:28px}.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.p-inline-28{padding-inline:28px}.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-28{border-radius:28px}.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-28{width:28px}.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-100dvh{height:100dvh}.mj.h-95dvh{height:95dvh}.mj.h-90dvh{height:90dvh}.mj.h-16{height:16px}.mj.h-20{height:20px}.mj.h-24{height:24px}.mj.h-28{height:28px}.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.ii-s-a{inset-inline-start:auto}.mj.ii-s-0{inset-inline-start:0}.mj.ii-s-2{inset-inline-start:2px}.mj.ii-s-4{inset-inline-start:4px}.mj.ii-s-6{inset-inline-start:6px}.mj.ii-s-8{inset-inline-start:8px}.mj.ii-s-12{inset-inline-start:12px}.mj.ii-s-16{inset-inline-start:16px}.mj.ii-s-20{inset-inline-start:20px}.mj.ii-s-24{inset-inline-start:24px}.mj.ii-e-a{inset-inline-end:auto}.mj.ii-e-0{inset-inline-end:0}.mj.ii-e-2{inset-inline-end:2px}.mj.ii-e-4{inset-inline-end:4px}.mj.ii-e-6{inset-inline-end:6px}.mj.ii-e-8{inset-inline-end:8px}.mj.ii-e-12{inset-inline-end:12px}.mj.ii-e-16{inset-inline-end:16px}.mj.ii-e-20{inset-inline-end:20px}.mj.ii-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.inset-a{inset:auto}.mj.inset-0{inset:0}.mj.inset-2{inset:2px}.mj.inset-4{inset:4px}.mj.inset-6{inset:6px}.mj.inset-8{inset:8px}.mj.inset-10{inset:10px}.mj.inset-12{inset:12px}.mj.inset-14{inset:14px}.mj.inset-16{inset:16px}.mj.inset-18{inset:18px}.mj.inset-20{inset:20px}.mj.inset-22{inset:22px}.mj.inset-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-28{font-size:1.75rem}.mj.fs-32{font-size:2rem}.mj.fs-48{font-size:3rem}.mj.fw-1{font-weight:100}.mj.fw-2{font-weight:200}.mj.fw-3{font-weight:300}.mj.fw-4,.mj.fw-n,.mj.fw-normal{font-weight:400}.mj.fw-5{font-weight:500}.mj.fw-6{font-weight:600}.mj.fw-7,.mj.fw-b,.mj.fw-bold{font-weight:700}.mj.fw-8{font-weight:800}.mj.fw-9{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.ta-s{text-align:start}.mj.ta-c{text-align:center}.mj.ta-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
@@ -96,6 +96,9 @@ $transparent: #{"#0000"};
96
96
  &.g-24 {
97
97
  gap: 24px;
98
98
  }
99
+ &.g-28 {
100
+ gap: 28px;
101
+ }
99
102
  &.g-r-0 {
100
103
  row-gap: 0;
101
104
  }
@@ -126,6 +129,9 @@ $transparent: #{"#0000"};
126
129
  &.g-r-24 {
127
130
  row-gap: 24px;
128
131
  }
132
+ &.g-r-28 {
133
+ row-gap: 28px;
134
+ }
129
135
  &.g-c-0 {
130
136
  column-gap: 0;
131
137
  }
@@ -156,6 +162,9 @@ $transparent: #{"#0000"};
156
162
  &.g-c-24 {
157
163
  column-gap: 24px;
158
164
  }
165
+ &.g-c-28 {
166
+ column-gap: 28px;
167
+ }
159
168
 
160
169
  // Margins
161
170
  &.m-a {
@@ -191,6 +200,9 @@ $transparent: #{"#0000"};
191
200
  &.m-24 {
192
201
  margin: 24px;
193
202
  }
203
+ &.m-28 {
204
+ margin: 28px;
205
+ }
194
206
  &.mt-a {
195
207
  margin-top: auto;
196
208
  }
@@ -215,6 +227,9 @@ $transparent: #{"#0000"};
215
227
  &.mt-24 {
216
228
  margin-top: 24px;
217
229
  }
230
+ &.mt-28 {
231
+ margin-top: 28px;
232
+ }
218
233
  &.mb-a {
219
234
  margin-bottom: auto;
220
235
  }
@@ -239,6 +254,9 @@ $transparent: #{"#0000"};
239
254
  &.mb-24 {
240
255
  margin-bottom: 24px;
241
256
  }
257
+ &.mb-28 {
258
+ margin-bottom: 28px;
259
+ }
242
260
  &.m-block-a {
243
261
  margin-block: auto;
244
262
  }
@@ -263,6 +281,9 @@ $transparent: #{"#0000"};
263
281
  &.m-block-24 {
264
282
  margin-block: 24px;
265
283
  }
284
+ &.m-block-28 {
285
+ margin-block: 28px;
286
+ }
266
287
  &.m-inline-a {
267
288
  margin-inline: auto;
268
289
  }
@@ -287,6 +308,9 @@ $transparent: #{"#0000"};
287
308
  &.m-inline-24 {
288
309
  margin-inline: 24px;
289
310
  }
311
+ &.m-inline-28 {
312
+ margin-inline: 28px;
313
+ }
290
314
 
291
315
  // Paddings
292
316
  &.p-0 {
@@ -319,8 +343,8 @@ $transparent: #{"#0000"};
319
343
  &.p-24 {
320
344
  padding: 24px;
321
345
  }
322
- &.p-24 {
323
- padding: 24px;
346
+ &.p-28 {
347
+ padding: 28px;
324
348
  }
325
349
  &.pt-a {
326
350
  padding-top: auto;
@@ -346,6 +370,9 @@ $transparent: #{"#0000"};
346
370
  &.pt-24 {
347
371
  padding-top: 24px;
348
372
  }
373
+ &.pt-28 {
374
+ padding-top: 28px;
375
+ }
349
376
  &.pb-a {
350
377
  padding-bottom: auto;
351
378
  }
@@ -370,6 +397,9 @@ $transparent: #{"#0000"};
370
397
  &.pb-24 {
371
398
  padding-bottom: 24px;
372
399
  }
400
+ &.pb-28 {
401
+ padding-bottom: 28px;
402
+ }
373
403
  &.p-block-a {
374
404
  padding-block: auto;
375
405
  }
@@ -394,6 +424,9 @@ $transparent: #{"#0000"};
394
424
  &.p-block-24 {
395
425
  padding-block: 24px;
396
426
  }
427
+ &.p-block-28 {
428
+ padding-block: 28px;
429
+ }
397
430
  &.p-inline-a {
398
431
  padding-inline: auto;
399
432
  }
@@ -418,6 +451,9 @@ $transparent: #{"#0000"};
418
451
  &.p-inline-24 {
419
452
  padding-inline: 24px;
420
453
  }
454
+ &.p-inline-28 {
455
+ padding-inline: 28px;
456
+ }
421
457
 
422
458
  // Border radius
423
459
  &.br-2 {
@@ -441,6 +477,9 @@ $transparent: #{"#0000"};
441
477
  &.br-24 {
442
478
  border-radius: 24px;
443
479
  }
480
+ &.br-28 {
481
+ border-radius: 28px;
482
+ }
444
483
  &.br-32 {
445
484
  border-radius: 32px;
446
485
  }
@@ -487,6 +526,9 @@ $transparent: #{"#0000"};
487
526
  &.w-24 {
488
527
  width: 24px;
489
528
  }
529
+ &.w-28 {
530
+ width: 28px;
531
+ }
490
532
  &.w-32 {
491
533
  width: 32px;
492
534
  }
@@ -525,6 +567,9 @@ $transparent: #{"#0000"};
525
567
  &.h-24 {
526
568
  height: 24px;
527
569
  }
570
+ &.h-28 {
571
+ height: 28px;
572
+ }
528
573
  &.h-32 {
529
574
  height: 32px;
530
575
  }
@@ -834,6 +879,9 @@ $transparent: #{"#0000"};
834
879
  &.fs-24 {
835
880
  font-size: 1.5rem;
836
881
  }
882
+ &.fs-28 {
883
+ font-size: 1.75rem;
884
+ }
837
885
  &.fs-32 {
838
886
  font-size: 2rem;
839
887
  }