juxscript 1.1.212 → 1.1.213
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.
- package/lib/styles/shadcn.css +133 -0
- package/package.json +1 -1
package/lib/styles/shadcn.css
CHANGED
|
@@ -701,4 +701,137 @@ code {
|
|
|
701
701
|
display: inline-flex;
|
|
702
702
|
align-items: center;
|
|
703
703
|
flex-shrink: 0;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
/* ══════════════════════════════════════════════════════════════════
|
|
707
|
+
JUX STACKS - Layout System
|
|
708
|
+
Uses foundation tokens for spacing, auto-adapts to themes
|
|
709
|
+
══════════════════════════════════════════════════════════════════ */
|
|
710
|
+
|
|
711
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
712
|
+
* BASE STACK STYLES
|
|
713
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
714
|
+
|
|
715
|
+
.jux-vstack,
|
|
716
|
+
.jux-hstack,
|
|
717
|
+
.jux-zstack {
|
|
718
|
+
display: flex;
|
|
719
|
+
|
|
720
|
+
/* ✅ Use CSS variables from foundation/theme */
|
|
721
|
+
gap: var(--jux-gap, 1rem);
|
|
722
|
+
padding: var(--jux-pad, 0);
|
|
723
|
+
|
|
724
|
+
/* Default alignment */
|
|
725
|
+
align-items: var(--jux-align, flex-start);
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
729
|
+
* VERTICAL STACK (Column)
|
|
730
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
731
|
+
|
|
732
|
+
.jux-vstack {
|
|
733
|
+
flex-direction: column;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
737
|
+
* HORIZONTAL STACK (Row)
|
|
738
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
739
|
+
|
|
740
|
+
.jux-hstack {
|
|
741
|
+
flex-direction: row;
|
|
742
|
+
flex-wrap: wrap; /* Allow wrapping on mobile */
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
746
|
+
* Z-STACK (Layered)
|
|
747
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
748
|
+
|
|
749
|
+
.jux-zstack {
|
|
750
|
+
position: relative;
|
|
751
|
+
flex-direction: column;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
.jux-zstack > * {
|
|
755
|
+
position: absolute;
|
|
756
|
+
top: 0;
|
|
757
|
+
left: 0;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
761
|
+
* ALIGNMENT UTILITIES (Via CSS Variables)
|
|
762
|
+
* Applied via .align-* descriptor classes
|
|
763
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
764
|
+
|
|
765
|
+
.align-start { --jux-align: flex-start; }
|
|
766
|
+
.align-center { --jux-align: center; }
|
|
767
|
+
.align-end { --jux-align: flex-end; }
|
|
768
|
+
.align-stretch { --jux-align: stretch; }
|
|
769
|
+
.align-baseline { --jux-align: baseline; }
|
|
770
|
+
|
|
771
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
772
|
+
* JUSTIFY CONTENT (For HStack distribution)
|
|
773
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
774
|
+
|
|
775
|
+
.justify-start { justify-content: flex-start; }
|
|
776
|
+
.justify-center { justify-content: center; }
|
|
777
|
+
.justify-end { justify-content: flex-end; }
|
|
778
|
+
.justify-between { justify-content: space-between; }
|
|
779
|
+
.justify-around { justify-content: space-around; }
|
|
780
|
+
.justify-evenly { justify-content: space-evenly; }
|
|
781
|
+
|
|
782
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
783
|
+
* RESPONSIVE BEHAVIOR
|
|
784
|
+
* HStack becomes VStack on mobile for better UX
|
|
785
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
786
|
+
|
|
787
|
+
@media (max-width: 768px) {
|
|
788
|
+
.jux-hstack {
|
|
789
|
+
flex-direction: column;
|
|
790
|
+
/* Gap remains consistent via CSS variables */
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
/* Optional: Force HStack to stay horizontal on mobile */
|
|
794
|
+
.jux-hstack.stay-horizontal {
|
|
795
|
+
flex-direction: row;
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
800
|
+
* FULL WIDTH/HEIGHT UTILITIES
|
|
801
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
802
|
+
|
|
803
|
+
.full-width {
|
|
804
|
+
width: 100%;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.full-height {
|
|
808
|
+
height: 100%;
|
|
809
|
+
min-height: 100vh;
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
813
|
+
* CENTERED CONTENT (Common Layout Pattern)
|
|
814
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
815
|
+
|
|
816
|
+
.center-content {
|
|
817
|
+
justify-content: center;
|
|
818
|
+
align-items: center;
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
/* ═════════════════════════════════════════════════════════════════
|
|
822
|
+
* SCROLL BEHAVIOR
|
|
823
|
+
* ═════════════════════════════════════════════════════════════════ */
|
|
824
|
+
|
|
825
|
+
.scroll-x {
|
|
826
|
+
overflow-x: auto;
|
|
827
|
+
overflow-y: hidden;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
.scroll-y {
|
|
831
|
+
overflow-y: auto;
|
|
832
|
+
overflow-x: hidden;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
.scroll-both {
|
|
836
|
+
overflow: auto;
|
|
704
837
|
}
|