breakouts 0.1.2 → 0.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.
- package/dist/breakouts.css +72 -9
- package/dist/breakouts.css.map +1 -1
- package/dist/breakouts.min.css +1 -1
- package/dist/breakouts.min.css.map +1 -1
- package/package.json +1 -1
- package/src/_index.scss +4 -0
- package/src/base/_colors.scss +51 -9
- package/src/base/_layout.scss +29 -0
- package/src/base/_reset.scss +3 -1
- package/src/base/_spacing.scss +2 -0
- package/src/base/_typography.scss +2 -1
- package/src/base/_variables.scss +2 -0
- package/src/breakouts.scss +3 -0
- package/src/theme/_chupa-pop.scss +5 -1
- package/src/theme/_medical.scss +5 -1
- package/src/theme/_tootsie-pop.scss +5 -1
package/dist/breakouts.css
CHANGED
|
@@ -50,10 +50,6 @@
|
|
|
50
50
|
--color-accent: #c60055;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
.background {
|
|
54
|
-
background-color: var(--color-background);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
53
|
.bg-surface {
|
|
58
54
|
background-color: var(--color-surface);
|
|
59
55
|
}
|
|
@@ -70,19 +66,62 @@
|
|
|
70
66
|
background-color: var(--color-accent);
|
|
71
67
|
}
|
|
72
68
|
|
|
73
|
-
.text-
|
|
74
|
-
color: var(--color-
|
|
69
|
+
.text-primary {
|
|
70
|
+
color: var(--color-primary);
|
|
75
71
|
}
|
|
76
72
|
|
|
77
|
-
.text-
|
|
78
|
-
color: var(--color-
|
|
73
|
+
.text-accent {
|
|
74
|
+
color: var(--color-accent);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.text-secondary {
|
|
78
|
+
color: var(--color-secondary);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.text-surface {
|
|
82
|
+
color: var(--color-surface);
|
|
79
83
|
}
|
|
80
84
|
|
|
81
85
|
.text-muted {
|
|
82
86
|
color: var(--color-muted);
|
|
83
87
|
}
|
|
84
88
|
|
|
85
|
-
|
|
89
|
+
.text-neutral-100 {
|
|
90
|
+
color: var(--color-neutral-100);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.text-neutral-200 {
|
|
94
|
+
color: var(--color-neutral-200);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.text-neutral-300 {
|
|
98
|
+
color: var(--color-neutral-300);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.text-neutral-400 {
|
|
102
|
+
color: var(--color-neutral-400);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.text-neutral-500 {
|
|
106
|
+
color: var(--color-neutral-500);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.text-neutral-600 {
|
|
110
|
+
color: var(--color-neutral-600);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.text-neutral-700 {
|
|
114
|
+
color: var(--color-neutral-700);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.text-neutral-800 {
|
|
118
|
+
color: var(--color-neutral-800);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.text-neutral-900 {
|
|
122
|
+
color: var(--color-neutral-900);
|
|
123
|
+
}
|
|
124
|
+
|
|
86
125
|
*,
|
|
87
126
|
*::before,
|
|
88
127
|
*::after {
|
|
@@ -670,11 +709,35 @@ a:hover {
|
|
|
670
709
|
transform: translateX(-50%);
|
|
671
710
|
}
|
|
672
711
|
|
|
712
|
+
.full-bleed--left {
|
|
713
|
+
width: 100vw;
|
|
714
|
+
margin-left: 0;
|
|
715
|
+
transform: translateX(0);
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.full-bleed--right {
|
|
719
|
+
width: 100vw;
|
|
720
|
+
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
721
|
+
transform: translateX(calc(100% - 100vw));
|
|
722
|
+
}
|
|
723
|
+
|
|
673
724
|
.breakout {
|
|
674
725
|
width: 100vw;
|
|
675
726
|
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
676
727
|
}
|
|
677
728
|
|
|
729
|
+
.breakout--left {
|
|
730
|
+
width: 100vw;
|
|
731
|
+
margin-left: 0;
|
|
732
|
+
transform: translateX(0);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.breakout--right {
|
|
736
|
+
width: 100vw;
|
|
737
|
+
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
738
|
+
transform: translateX(calc(100% - 100vw));
|
|
739
|
+
}
|
|
740
|
+
|
|
678
741
|
.breakouts-grid {
|
|
679
742
|
display: grid;
|
|
680
743
|
grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
|
package/dist/breakouts.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"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","file":"breakouts.css"}
|
package/dist/breakouts.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529}.dark,.dark :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}.light,.light :root{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}}.
|
|
1
|
+
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529}.dark,.dark :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}.light,.light :root{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.text-primary{color:var(--color-primary)}.text-accent{color:var(--color-accent)}.text-secondary{color:var(--color-secondary)}.text-surface{color:var(--color-surface)}.text-muted{color:var(--color-muted)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}body{padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.m-2{margin:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.m-3{margin:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.p-3{padding:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.p-4{padding:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.p-5{padding:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.p-6{padding:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-bold{font-weight:bold}.font-normal{font-weight:normal}.italic{font-style:italic}.not-italic{font-style:normal}.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-loose{line-height:2}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}.full-bleed--left{width:100vw;margin-left:0;transform:translateX(0)}.full-bleed--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/2)}.breakout--left{width:100vw;margin-left:0;transform:translateX(0)}.breakout--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];gap:var(--gap)}.content{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}/*# sourceMappingURL=breakouts.min.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"AAIA,MACI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,wBAEA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BAGJ,kBAEI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,wBAGJ,oBAEI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,wBAGJ,mCACI,6BACI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,yBAMR,YACI,sCAGJ,YACI,sCAGJ,cACI,wCAGJ,WACI,qCAGJ,cACI,2BAGJ,aACI,0BAGJ,gBACI,6BAGJ,cACI,2BAGJ,YACI,yBAGJ,kBACI,+BAGJ,kBACI,+BAGJ,kBACI,+BAGJ,kBACI,+BAGJ,kBACI,+BAGJ,kBACI,+BAGJ,kBACI,+BAGJ,kBACI,+BAGJ,kBACI,+BC9HJ,qBAGI,sBACA,SACA,UAGJ,UAEI,SACA,UACA,WACA,kBAGJ,KACI,aACA,iCACA,gBCSI,KAQQ,OArCF,EA6BN,MAQQ,WArCF,EA6BN,MAQQ,aArCF,EA6BN,MAQQ,cArCF,EA6BN,MAQQ,YArCF,EA6BN,MAGY,YAhCN,EAgCM,aAhCN,EA6BN,MAGY,WAhCN,EAgCM,cAhCN,EA6BN,KAQQ,QArCF,EA6BN,MAQQ,YArCF,EA6BN,MAQQ,cArCF,EA6BN,MAQQ,eArCF,EA6BN,MAQQ,aArCF,EA6BN,MAGY,aAhCN,EAgCM,cAhCN,EA6BN,MAGY,YAhCN,EAgCM,eAhCN,EA6BN,KAQQ,OArCF,OA6BN,MAQQ,WArCF,OA6BN,MAQQ,aArCF,OA6BN,MAQQ,cArCF,OA6BN,MAQQ,YArCF,OA6BN,MAGY,YAhCN,OAgCM,aAhCN,OA6BN,MAGY,WAhCN,OAgCM,cAhCN,OA6BN,KAQQ,QArCF,OA6BN,MAQQ,YArCF,OA6BN,MAQQ,cArCF,OA6BN,MAQQ,eArCF,OA6BN,MAQQ,aArCF,OA6BN,MAGY,aAhCN,OAgCM,cAhCN,OA6BN,MAGY,YAhCN,OAgCM,eAhCN,OA6BN,KAQQ,OArCF,MA6BN,MAQQ,WArCF,MA6BN,MAQQ,aArCF,MA6BN,MAQQ,cArCF,MA6BN,MAQQ,YArCF,MA6BN,MAGY,YAhCN,MAgCM,aAhCN,MA6BN,MAGY,WAhCN,MAgCM,cAhCN,MA6BN,KAQQ,QArCF,MA6BN,MAQQ,YArCF,MA6BN,MAQQ,cArCF,MA6BN,MAQQ,eArCF,MA6BN,MAQQ,aArCF,MA6BN,MAGY,aAhCN,MAgCM,cAhCN,MA6BN,MAGY,YAhCN,MAgCM,eAhCN,MA6BN,KAQQ,OArCF,OA6BN,MAQQ,WArCF,OA6BN,MAQQ,aArCF,OA6BN,MAQQ,cArCF,OA6BN,MAQQ,YArCF,OA6BN,MAGY,YAhCN,OAgCM,aAhCN,OA6BN,MAGY,WAhCN,OAgCM,cAhCN,OA6BN,KAQQ,QArCF,OA6BN,MAQQ,YArCF,OA6BN,MAQQ,cArCF,OA6BN,MAQQ,eArCF,OA6BN,MAQQ,aArCF,OA6BN,MAGY,aAhCN,OAgCM,cAhCN,OA6BN,MAGY,YAhCN,OAgCM,eAhCN,OA6BN,KAQQ,OArCF,KA6BN,MAQQ,WArCF,KA6BN,MAQQ,aArCF,KA6BN,MAQQ,cArCF,KA6BN,MAQQ,YArCF,KA6BN,MAGY,YAhCN,KAgCM,aAhCN,KA6BN,MAGY,WAhCN,KAgCM,cAhCN,KA6BN,KAQQ,QArCF,KA6BN,MAQQ,YArCF,KA6BN,MAQQ,cArCF,KA6BN,MAQQ,eArCF,KA6BN,MAQQ,aArCF,KA6BN,MAGY,aAhCN,KAgCM,cAhCN,KA6BN,MAGY,YAhCN,KAgCM,eAhCN,KA6BN,KAQQ,OArCF,QA6BN,MAQQ,WArCF,QA6BN,MAQQ,aArCF,QA6BN,MAQQ,cArCF,QA6BN,MAQQ,YArCF,QA6BN,MAGY,YAhCN,QAgCM,aAhCN,QA6BN,MAGY,WAhCN,QAgCM,cAhCN,QA6BN,KAQQ,QArCF,QA6BN,MAQQ,YArCF,QA6BN,MAQQ,cArCF,QA6BN,MAQQ,eArCF,QA6BN,MAQQ,aArCF,QA6BN,MAGY,aAhCN,QAgCM,cAhCN,QA6BN,MAGY,YAhCN,QAgCM,eAhCN,QA6BN,KAQQ,OArCF,OA6BN,MAQQ,WArCF,OA6BN,MAQQ,aArCF,OA6BN,MAQQ,cArCF,OA6BN,MAQQ,YArCF,OA6BN,MAGY,YAhCN,OAgCM,aAhCN,OA6BN,MAGY,WAhCN,OAgCM,cAhCN,OA6BN,KAQQ,QArCF,OA6BN,MAQQ,YArCF,OA6BN,MAQQ,cArCF,OA6BN,MAQQ,eArCF,OA6BN,MAQQ,aArCF,OA6BN,MAGY,aAhCN,OAgCM,cAhCN,OA6BN,MAGY,YAhCN,OAgCM,eAhCN,OCed,KACI,YAde,qBAef,UAba,KAcb,YAbe,IAcf,wBACA,yCACA,SAMA,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,OAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,SAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,KAqBH,gBACA,mBACA,gBACA,wBAIR,EACI,cAGJ,EACI,2BACA,0BAEA,QACI,6BAKR,WACI,gBAGJ,aACI,kBAGJ,YACI,iBAGJ,cACI,mBAIJ,gBACI,yBAGJ,gBACI,yBAGJ,iBACI,0BAIJ,WACI,iBAGJ,aACI,mBAGJ,QACI,kBAGJ,YACI,kBAIJ,eACI,iBAGJ,gBACI,gBAGJ,eACI,cCzGJ,MACI,8BACA,gCACA,2BACA,0BACA,4CAIJ,WACI,mBACA,gBACA,oBAIJ,YACI,YACA,gBACA,2BAGJ,kBACI,YACA,cACA,wBAGJ,mBACI,YACA,sCACA,yCAGJ,UACI,YACA,sCAGJ,gBACI,YACA,cACA,wBAGJ,iBACI,YACA,sCACA,yCAIJ,gBACI,aACA,sBACI,iNACJ,eAGJ,SACI,oBAGJ,QACI,mBAGJ,SACI,oBAGJ,MACI,iBAIJ,MACI,aACA,2EACA,eAEA,QACI,cAIR,cACI","file":"breakouts.min.css"}
|
package/package.json
CHANGED
package/src/_index.scss
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
// This file is the main entry point for the SCSS files.
|
|
2
|
+
// It imports all the necessary files and modules for the project.
|
|
3
|
+
// It is recommended to use @use instead of @import for better performance and maintainability.
|
|
4
|
+
|
|
1
5
|
// Theme and configurable variables
|
|
2
6
|
@forward 'base/variables';
|
|
3
7
|
@use 'base/variables' as *;
|
package/src/base/_colors.scss
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
// This file contains the color variables and utility classes for the project.
|
|
2
|
+
|
|
3
|
+
@use 'variables'as *;
|
|
2
4
|
|
|
3
5
|
:root {
|
|
4
6
|
--color-background: #{$color-background};
|
|
@@ -56,10 +58,6 @@
|
|
|
56
58
|
|
|
57
59
|
// Utility classes for background and text colors
|
|
58
60
|
|
|
59
|
-
.background {
|
|
60
|
-
background-color: var(--color-background);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
61
|
.bg-surface {
|
|
64
62
|
background-color: var(--color-surface);
|
|
65
63
|
}
|
|
@@ -76,14 +74,58 @@
|
|
|
76
74
|
background-color: var(--color-accent);
|
|
77
75
|
}
|
|
78
76
|
|
|
79
|
-
.text-
|
|
80
|
-
color: var(--color-
|
|
77
|
+
.text-primary {
|
|
78
|
+
color: var(--color-primary);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.text-accent {
|
|
82
|
+
color: var(--color-accent);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.text-secondary {
|
|
86
|
+
color: var(--color-secondary);
|
|
81
87
|
}
|
|
82
88
|
|
|
83
|
-
.text-
|
|
84
|
-
color: var(--color-
|
|
89
|
+
.text-surface {
|
|
90
|
+
color: var(--color-surface);
|
|
85
91
|
}
|
|
86
92
|
|
|
87
93
|
.text-muted {
|
|
88
94
|
color: var(--color-muted);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.text-neutral-100 {
|
|
98
|
+
color: var(--color-neutral-100);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.text-neutral-200 {
|
|
102
|
+
color: var(--color-neutral-200);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.text-neutral-300 {
|
|
106
|
+
color: var(--color-neutral-300);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.text-neutral-400 {
|
|
110
|
+
color: var(--color-neutral-400);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.text-neutral-500 {
|
|
114
|
+
color: var(--color-neutral-500);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.text-neutral-600 {
|
|
118
|
+
color: var(--color-neutral-600);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.text-neutral-700 {
|
|
122
|
+
color: var(--color-neutral-700);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.text-neutral-800 {
|
|
126
|
+
color: var(--color-neutral-800);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.text-neutral-900 {
|
|
130
|
+
color: var(--color-neutral-900);
|
|
89
131
|
}
|
package/src/base/_layout.scss
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
// This file contains the layout styles for the site, including grid and flexbox layouts.
|
|
2
|
+
// It uses CSS custom properties for responsive design and theming.
|
|
3
|
+
|
|
1
4
|
:root {
|
|
2
5
|
--gap: clamp(1rem, 6vw, 3rem);
|
|
3
6
|
--full: minmax(var(--gap), 1fr);
|
|
@@ -6,23 +9,49 @@
|
|
|
6
9
|
--content: min(50ch, 100% - var(--gap) * 2);
|
|
7
10
|
}
|
|
8
11
|
|
|
12
|
+
// Breakout containers
|
|
9
13
|
.container {
|
|
10
14
|
margin-inline: auto;
|
|
11
15
|
max-width: 72rem;
|
|
12
16
|
padding-inline: 1rem;
|
|
13
17
|
}
|
|
14
18
|
|
|
19
|
+
// Breakout classes
|
|
15
20
|
.full-bleed {
|
|
16
21
|
width: 100vw;
|
|
17
22
|
margin-left: 50%;
|
|
18
23
|
transform: translateX(-50%);
|
|
19
24
|
}
|
|
20
25
|
|
|
26
|
+
.full-bleed--left {
|
|
27
|
+
width: 100vw;
|
|
28
|
+
margin-left: 0;
|
|
29
|
+
transform: translateX(0);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.full-bleed--right {
|
|
33
|
+
width: 100vw;
|
|
34
|
+
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
35
|
+
transform: translateX(calc(100% - 100vw));
|
|
36
|
+
}
|
|
37
|
+
|
|
21
38
|
.breakout {
|
|
22
39
|
width: 100vw;
|
|
23
40
|
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
24
41
|
}
|
|
25
42
|
|
|
43
|
+
.breakout--left {
|
|
44
|
+
width: 100vw;
|
|
45
|
+
margin-left: 0;
|
|
46
|
+
transform: translateX(0);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.breakout--right {
|
|
50
|
+
width: 100vw;
|
|
51
|
+
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
52
|
+
transform: translateX(calc(100% - 100vw));
|
|
53
|
+
}
|
|
54
|
+
|
|
26
55
|
// Breakouts Grid (named lines)
|
|
27
56
|
.breakouts-grid {
|
|
28
57
|
display: grid;
|
package/src/base/_reset.scss
CHANGED
package/src/base/_spacing.scss
CHANGED
package/src/base/_variables.scss
CHANGED
package/src/breakouts.scss
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
//
|
|
1
|
+
// This file is used to define the theme variables for the Chupa Pop theme.
|
|
2
|
+
// It imports the base theme variables and overrides them with custom values.
|
|
3
|
+
// It also imports the base styles for reset, typography, and layout.
|
|
4
|
+
// The theme variables are used to customize the appearance of the Chupa Pop theme.
|
|
5
|
+
// The theme variables are defined using the SCSS @use and @forward directives.
|
|
2
6
|
|
|
3
7
|
$color-primary: #ecb838 !default;
|
|
4
8
|
$color-secondary: #ab4073 !default;
|
package/src/theme/_medical.scss
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
//
|
|
1
|
+
// This file is used to define the theme variables for the Medical theme.
|
|
2
|
+
// It imports the base theme variables and overrides them with custom values.
|
|
3
|
+
// It also imports the base styles for reset, typography, and layout.
|
|
4
|
+
// The theme variables are used to customize the appearance of the Medical theme.
|
|
5
|
+
// The theme variables are defined using the SCSS @use and @forward directives.
|
|
2
6
|
|
|
3
7
|
$primary: #4682B4 !default;
|
|
4
8
|
$secondary: #9DC183 !default;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
//
|
|
1
|
+
// This file is used to define the theme variables for the Tootsie Pop theme.
|
|
2
|
+
// It imports the base theme variables and overrides them with custom values.
|
|
3
|
+
// It also imports the base styles for reset, typography, and layout.
|
|
4
|
+
// The theme variables are used to customize the appearance of the Tootsie Pop theme.
|
|
5
|
+
// The theme variables are defined using the SCSS @use and @forward directives.
|
|
2
6
|
|
|
3
7
|
$primary: #93329E !default;
|
|
4
8
|
$secondary: #F2711C !default;
|