@govtechsg/sgds-web-component 3.22.0 → 3.23.0-rc.0
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/components/Footer/index.umd.min.js +1 -1
- package/components/Footer/index.umd.min.js.map +1 -1
- package/components/Sidenav/index.umd.min.js +5 -4
- package/components/Sidenav/index.umd.min.js.map +1 -1
- package/components/Sidenav/sgds-sidenav-item.d.ts +4 -0
- package/components/Sidenav/sgds-sidenav-item.js +5 -0
- package/components/Sidenav/sgds-sidenav-item.js.map +1 -1
- package/components/Subnav/index.umd.min.js +1 -1
- package/components/Subnav/index.umd.min.js.map +1 -1
- package/components/index.umd.min.js +3 -2
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +2 -2
- package/css/grid.css +30 -4
- package/css/grid.js +1 -1
- package/custom-elements.json +998 -981
- package/index.umd.min.js +3 -2
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Sidenav/sgds-sidenav-item.cjs.js +5 -0
- package/react/components/Sidenav/sgds-sidenav-item.cjs.js.map +1 -1
- package/react/components/Sidenav/sgds-sidenav-item.js +5 -0
- package/react/components/Sidenav/sgds-sidenav-item.js.map +1 -1
- package/react/css/grid.cjs.js +1 -1
- package/react/css/grid.js +1 -1
- package/react/index.cjs.js +10 -10
- package/react/index.d.ts +2 -2
- package/react/index.js +2 -2
- package/themes/root.css +2 -0
- package/types/react.d.ts +165 -46
package/css/fouc.css
CHANGED
|
@@ -2,11 +2,11 @@ sgds-accordion-item:not(:defined),
|
|
|
2
2
|
sgds-accordion:not(:defined),
|
|
3
3
|
sgds-alert-link:not(:defined),
|
|
4
4
|
sgds-alert:not(:defined),
|
|
5
|
+
sgds-button:not(:defined),
|
|
6
|
+
sgds-badge:not(:defined),
|
|
5
7
|
sgds-card:not(:defined),
|
|
6
8
|
sgds-breadcrumb-item:not(:defined),
|
|
7
9
|
sgds-breadcrumb:not(:defined),
|
|
8
|
-
sgds-button:not(:defined),
|
|
9
|
-
sgds-badge:not(:defined),
|
|
10
10
|
sgds-checkbox-group:not(:defined),
|
|
11
11
|
sgds-checkbox:not(:defined),
|
|
12
12
|
sgds-close-button:not(:defined),
|
package/css/grid.css
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
.sgds-container-sidebar {
|
|
85
|
-
max-width:
|
|
85
|
+
max-width: calc(100% - 96px); /* outer margin of 48px on each side */
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.sgds-container {
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
max-width: var(--sgds-dimension-1168);
|
|
120
120
|
}
|
|
121
121
|
.sgds-container-sidebar {
|
|
122
|
-
max-width:
|
|
122
|
+
max-width: calc(100% - 96px); /* outer margin of 48px on each side */
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.sgds-col-xl-1 { grid-column: span 1; }
|
|
@@ -147,8 +147,8 @@
|
|
|
147
147
|
.sgds-container {
|
|
148
148
|
max-width: var(--sgds-dimension-1312);
|
|
149
149
|
}
|
|
150
|
-
|
|
151
|
-
max-width:
|
|
150
|
+
.sgds-container-sidebar {
|
|
151
|
+
max-width: calc(100% - 96px); /* outer margin of 48px on each side */
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
.sgds-col-2-xl-1 { grid-column: span 1; }
|
|
@@ -171,3 +171,29 @@
|
|
|
171
171
|
.sgds-col-xl-none { display: revert; }
|
|
172
172
|
.sgds-col-2-xl-none { display: none; }
|
|
173
173
|
}
|
|
174
|
+
|
|
175
|
+
@media (min-width: 1600px) { /* sgds-breakpoint-sbar-3-xl */
|
|
176
|
+
.sgds-container-sidebar {
|
|
177
|
+
max-width: min(var(--sgds-dimension-1600), calc(100% - 96px)); /* 1600px cap or 48px outer margins, whichever is smaller */
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.sgds-col-3-xl-1 { grid-column: span 1; }
|
|
181
|
+
.sgds-col-3-xl-2 { grid-column: span 2; }
|
|
182
|
+
.sgds-col-3-xl-3 { grid-column: span 3; }
|
|
183
|
+
.sgds-col-3-xl-4 { grid-column: span 4; }
|
|
184
|
+
.sgds-col-3-xl-5 { grid-column: span 5; }
|
|
185
|
+
.sgds-col-3-xl-6 { grid-column: span 6; }
|
|
186
|
+
.sgds-col-3-xl-7 { grid-column: span 7; }
|
|
187
|
+
.sgds-col-3-xl-8 { grid-column: span 8; }
|
|
188
|
+
.sgds-col-3-xl-9 { grid-column: span 9; }
|
|
189
|
+
.sgds-col-3-xl-10 { grid-column: span 10; }
|
|
190
|
+
.sgds-col-3-xl-11 { grid-column: span 11; }
|
|
191
|
+
.sgds-col-3-xl-12 { grid-column: span 12; }
|
|
192
|
+
.sgds-col-3-xl-center-2 { grid-column: 6 / span 2; }
|
|
193
|
+
.sgds-col-3-xl-center-4 { grid-column: 5 / span 4; }
|
|
194
|
+
.sgds-col-3-xl-center-6 { grid-column: 4 / span 6; }
|
|
195
|
+
.sgds-col-3-xl-center-8 { grid-column: 3 / span 8; }
|
|
196
|
+
.sgds-col-3-xl-center-10 { grid-column: 2 / span 10; }
|
|
197
|
+
.sgds-col-2-xl-none { display: revert; }
|
|
198
|
+
.sgds-col-3-xl-none { display: none; }
|
|
199
|
+
}
|
package/css/grid.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:
|
|
3
|
+
var css_248z = css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1600px){.sgds-container-sidebar{max-width:min(var(--sgds-dimension-1600),calc(100% - 96px))}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=grid.js.map
|