@carbon/ibmdotcom-styles 2.23.0 → 2.24.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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/ibmdotcom-styles",
|
|
3
3
|
"description": "Carbon for IBM.com Styles",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.24.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/ibm-dotcom-styles.min.css",
|
|
7
7
|
"module": "src/scss",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"sass": "~1.84.0",
|
|
49
49
|
"sass-loader": "^13.0.0"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "fa8caaccbd76c72beac47f83c0d6da573fdb413e"
|
|
52
52
|
}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
@use '@carbon/styles/scss/themes' as *;
|
|
15
15
|
@use '@carbon/styles/scss/type' as *;
|
|
16
16
|
@use '@carbon/styles/scss/utilities/convert' as *;
|
|
17
|
+
@use '@carbon/ibmdotcom-styles/scss/globals/scroll-snap' as *;
|
|
17
18
|
@use '../../globals/utils/flex-grid' as *;
|
|
18
19
|
@use '../../globals/vars' as *;
|
|
19
20
|
@use '../../globals/imports' as *;
|
|
@@ -243,6 +244,53 @@
|
|
|
243
244
|
}
|
|
244
245
|
}
|
|
245
246
|
|
|
247
|
+
// Mobile horizontal scroll snap behavior
|
|
248
|
+
:host(#{$c4d-prefix}-card-group).inside-block-cards:not(
|
|
249
|
+
.media-type-block-cards__logo
|
|
250
|
+
) {
|
|
251
|
+
$gutter: 1rem;
|
|
252
|
+
$gap: 1rem;
|
|
253
|
+
|
|
254
|
+
@include breakpoint-down('md') {
|
|
255
|
+
@include scroll-snap-container();
|
|
256
|
+
|
|
257
|
+
display: flex;
|
|
258
|
+
gap: $gap;
|
|
259
|
+
padding-inline: $gutter;
|
|
260
|
+
|
|
261
|
+
> ::slotted(a) {
|
|
262
|
+
/* stylelint-disable-next-line declaration-no-important */
|
|
263
|
+
display: grid !important;
|
|
264
|
+
box-sizing: border-box;
|
|
265
|
+
flex-basis: clamp(220px, 65vw, 400px);
|
|
266
|
+
flex-shrink: 0;
|
|
267
|
+
align-content: start;
|
|
268
|
+
block-size: auto;
|
|
269
|
+
|
|
270
|
+
// override web component internal padding and rely on gap instead
|
|
271
|
+
padding-inline: 0;
|
|
272
|
+
|
|
273
|
+
scroll-margin: $gutter;
|
|
274
|
+
scroll-snap-align: start;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
> ::slotted(#{$c4d-prefix}-card-group-item) {
|
|
278
|
+
display: grid;
|
|
279
|
+
box-sizing: border-box;
|
|
280
|
+
flex-basis: clamp(220px, 65vw, 400px);
|
|
281
|
+
flex-shrink: 0;
|
|
282
|
+
align-content: start;
|
|
283
|
+
block-size: auto;
|
|
284
|
+
|
|
285
|
+
// // override web component internal padding and rely on gap instead
|
|
286
|
+
padding-inline: 0;
|
|
287
|
+
|
|
288
|
+
scroll-margin: $gutter;
|
|
289
|
+
scroll-snap-align: start;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
|
|
246
294
|
// Print styles
|
|
247
295
|
@media print {
|
|
248
296
|
:host(#{$c4d-prefix}-card-group) {
|