mj-css-framework 1.1.4 → 1.2.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 +5 -5
  2. package/package.json +1 -1
  3. package/styles.min.css +1 -1
  4. package/styles.scss +45 -45
package/README.md CHANGED
@@ -53,15 +53,15 @@ Every utility is scoped to an element carrying the `mj` class, so `df` is used a
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
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 |
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 |
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 |
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 |
60
+ | Inline-start | `ii-s-a`, `ii-s-0`, `ii-s-2`, `ii-s-4`, `ii-s-6`, `ii-s-8`, `ii-s-12`, `ii-s-16`, `ii-s-20`, `ii-s-24` | Inline start position values |
61
+ | Inline-end | `ii-e-a`, `ii-e-0`, `ii-e-2`, `ii-e-4`, `ii-e-6`, `ii-e-8`, `ii-e-12`, `ii-e-16`, `ii-e-20`, `ii-e-24` | Inline end position values |
62
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`, `i-6`, `i-8`, `i-10`, `i-12`, `i-14`, `i-16`, `i-18`, `i-20`, `i-24` | Inset position values |
64
+ | Inset | `inset-a`, `inset-0`, `inset-2`, `inset-4`, `inset-6`, `inset-8`, `inset-10`, `inset-12`, `inset-14`, `inset-16`, `inset-18`, `inset-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 |
@@ -71,7 +71,7 @@ Every utility is scoped to an element carrying the `mj` class, so `df` is used a
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 |
73
73
  | Overflow | `over-a`, `over-h` | Auto and hidden overflow behavior |
74
- | Text alignment | `texta-s`, `texta-c`, `texta-e` | Start, center, and end text alignment |
74
+ | Text alignment | `ta-s`, `ta-c`, `ta-e` | Start, center, and end text alignment |
75
75
  | Line clamp | `line-clamp`, `line-clamp-1`, `line-clamp-2`, `line-clamp-3` | Multi-line truncation helpers |
76
76
  | White space | `white-space-nowrap` | Prevents text wrapping |
77
77
  | Box shadow | `bs-n` | Removes the box shadow |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mj-css-framework",
3
- "version": "1.1.4",
3
+ "version": "1.2.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",
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-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-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.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-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}
package/styles.scss CHANGED
@@ -507,14 +507,14 @@ $transparent: #{"#0000"};
507
507
  &.h-full,&.h-100 {
508
508
  height: 100%;
509
509
  }
510
- &.h-100dvw {
511
- height: 100dvw;
510
+ &.h-100dvh {
511
+ height: 100dvh;
512
512
  }
513
- &.h-95dvw {
514
- height: 95dvw;
513
+ &.h-95dvh {
514
+ height: 95dvh;
515
515
  }
516
- &.h-90dvw {
517
- height: 90dvw;
516
+ &.h-90dvh {
517
+ height: 90dvh;
518
518
  }
519
519
  &.h-16 {
520
520
  height: 16px;
@@ -617,66 +617,66 @@ $transparent: #{"#0000"};
617
617
  }
618
618
 
619
619
  // Start inline insets
620
- &.s-a {
620
+ &.ii-s-a {
621
621
  inset-inline-start: auto;
622
622
  }
623
- &.s-0 {
623
+ &.ii-s-0 {
624
624
  inset-inline-start: 0;
625
625
  }
626
- &.s-2 {
626
+ &.ii-s-2 {
627
627
  inset-inline-start: 2px;
628
628
  }
629
- &.s-4 {
629
+ &.ii-s-4 {
630
630
  inset-inline-start: 4px;
631
631
  }
632
- &.s-6 {
632
+ &.ii-s-6 {
633
633
  inset-inline-start: 6px;
634
634
  }
635
- &.s-8 {
635
+ &.ii-s-8 {
636
636
  inset-inline-start: 8px;
637
637
  }
638
- &.s-12 {
638
+ &.ii-s-12 {
639
639
  inset-inline-start: 12px;
640
640
  }
641
- &.s-16 {
641
+ &.ii-s-16 {
642
642
  inset-inline-start: 16px;
643
643
  }
644
- &.s-20 {
644
+ &.ii-s-20 {
645
645
  inset-inline-start: 20px;
646
646
  }
647
- &.s-24 {
647
+ &.ii-s-24 {
648
648
  inset-inline-start: 24px;
649
649
  }
650
- &.e-a {
651
- inset-inline-end: auto;
652
- }
653
650
 
654
651
  // End inline insets
655
- &.e-0 {
652
+ &.ii-e-a {
653
+ inset-inline-end: auto;
654
+ }
655
+ &.ii-e-0 {
656
656
  inset-inline-end: 0;
657
657
  }
658
- &.e-2 {
658
+ &.ii-e-2 {
659
659
  inset-inline-end: 2px;
660
660
  }
661
- &.e-4 {
661
+ &.ii-e-4 {
662
662
  inset-inline-end: 4px;
663
663
  }
664
- &.e-6 {
664
+ &.ii-e-6 {
665
665
  inset-inline-end: 6px;
666
666
  }
667
- &.e-8 {
667
+ &.ii-e-8 {
668
668
  inset-inline-end: 8px;
669
669
  }
670
- &.e-12 {
670
+ &.ii-e-12 {
671
671
  inset-inline-end: 12px;
672
672
  }
673
- &.e-16 {
673
+ &.ii-e-16 {
674
674
  inset-inline-end: 16px;
675
675
  }
676
- &.e-20 {
676
+ &.ii-e-20 {
677
677
  inset-inline-end: 20px;
678
678
  }
679
- &.e-24 {
679
+ &.ii-e-24 {
680
680
  inset-inline-end: 24px;
681
681
  }
682
682
 
@@ -719,46 +719,46 @@ $transparent: #{"#0000"};
719
719
  }
720
720
 
721
721
  // Insets
722
- &.i-a {
722
+ &.inset-a {
723
723
  inset: auto;
724
724
  }
725
- &.i-0 {
725
+ &.inset-0 {
726
726
  inset: 0;
727
727
  }
728
- &.i-2 {
728
+ &.inset-2 {
729
729
  inset: 2px;
730
730
  }
731
- &.i-4 {
731
+ &.inset-4 {
732
732
  inset: 4px;
733
733
  }
734
- &.i-6 {
734
+ &.inset-6 {
735
735
  inset: 6px;
736
736
  }
737
- &.i-8 {
737
+ &.inset-8 {
738
738
  inset: 8px;
739
739
  }
740
- &.i-10 {
740
+ &.inset-10 {
741
741
  inset: 10px;
742
742
  }
743
- &.i-12 {
743
+ &.inset-12 {
744
744
  inset: 12px;
745
745
  }
746
- &.i-14 {
746
+ &.inset-14 {
747
747
  inset: 14px;
748
748
  }
749
- &.i-16 {
749
+ &.inset-16 {
750
750
  inset: 16px;
751
751
  }
752
- &.i-18 {
752
+ &.inset-18 {
753
753
  inset: 18px;
754
754
  }
755
- &.i-20 {
755
+ &.inset-20 {
756
756
  inset: 20px;
757
757
  }
758
- &.i-22 {
758
+ &.inset-22 {
759
759
  inset: 22px;
760
760
  }
761
- &.i-24 {
761
+ &.inset-24 {
762
762
  inset: 24px;
763
763
  }
764
764
 
@@ -895,13 +895,13 @@ $transparent: #{"#0000"};
895
895
  }
896
896
 
897
897
  // Text aligns
898
- &.texta-s {
898
+ &.ta-s {
899
899
  text-align: start;
900
900
  }
901
- &.texta-c {
901
+ &.ta-c {
902
902
  text-align: center;
903
903
  }
904
- &.texta-e {
904
+ &.ta-e {
905
905
  text-align: end;
906
906
  }
907
907