@carbon/ibmdotcom-styles 2.16.0-rc.2 → 2.16.0-rc.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.
Files changed (6) hide show
  1. package/dist/ibm-dotcom-styles.css +60 -46
  2. package/dist/ibm-dotcom-styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/card/_card.scss +10 -3
  5. package/scss/components/link-list/_link-list.scss +12 -23
  6. package/scss/components/video-player/_video-player.scss +2 -2
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.16.0-rc.2",
4
+ "version": "2.16.0-rc.3",
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.79.0",
49
49
  "sass-loader": "^13.0.0"
50
50
  },
51
- "gitHead": "5dc558ef59da8d102e6c4df024604832e9706a46"
51
+ "gitHead": "f35ac6b645aebca2cf92e2d39c91d4bf77cdf3af"
52
52
  }
package/scss/components/card/_card.scss CHANGED
@@ -117,6 +117,12 @@
117
117
  }
118
118
  }
119
119
 
120
+ .#{$prefix}--card {
121
+ display: flex;
122
+ flex-direction: column;
123
+ justify-content: space-between;
124
+ }
125
+
120
126
  .#{$prefix}--card__wrapper {
121
127
  display: flex;
122
128
  flex: 1;
@@ -555,14 +561,15 @@
555
561
  }
556
562
 
557
563
  :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
558
- :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
559
- .#{$prefix}--card {
564
+ :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not(
565
+ [disabled]
566
+ ) {
560
567
  .#{$prefix}--tile {
561
568
  border-color: $background-inverse;
562
569
  background-color: $background-inverse;
563
570
 
564
571
  &:hover {
565
- #{$c4d-prefix}-image,
572
+ .#{$c4d-prefix}-image,
566
573
  ::slotted(#{$c4d-prefix}-image),
567
574
  ::slotted(#{$c4d-prefix}-card-cta-image) {
568
575
  filter: brightness(108%);
package/scss/components/link-list/_link-list.scss CHANGED
@@ -27,7 +27,6 @@
27
27
  .#{$c4d-prefix}--link-list__list--vertical,
28
28
  .#{$c4d-prefix}-ce--link-list__list--end {
29
29
  display: grid;
30
- grid-auto-rows: 1fr;
31
30
 
32
31
  ::slotted(#{$c4d-prefix}-link-list-item),
33
32
  ::slotted(#{$c4d-prefix}-link-list-item-cta) {
@@ -36,7 +35,9 @@
36
35
  }
37
36
 
38
37
  .#{$c4d-prefix}--link-list__list--vertical
39
- ::slotted(#{$c4d-prefix}-link-list-item) {
38
+ ::slotted(#{$c4d-prefix}-link-list-item),
39
+ .#{$c4d-prefix}--link-list__list--vertical
40
+ ::slotted(#{$c4d-prefix}-link-list-item-cta) {
40
41
  display: flex;
41
42
  }
42
43
 
@@ -54,7 +55,8 @@
54
55
 
55
56
  .#{$c4d-prefix}-ce--link-list__list--split,
56
57
  .#{$c4d-prefix}-ce--link-list__list--three-columns {
57
- ::slotted(#{$c4d-prefix}-link-list-item) {
58
+ ::slotted(#{$c4d-prefix}-link-list-item),
59
+ ::slotted(#{$c4d-prefix}-link-list-item-cta) {
58
60
  display: grid;
59
61
  align-items: stretch;
60
62
  // margin-right: -$spacing-05;
@@ -63,10 +65,6 @@
63
65
  @include breakpoint(md) {
64
66
  display: grid;
65
67
  grid-column-gap: $spacing-07;
66
-
67
- ::slotted(#{$c4d-prefix}-link-list-item) {
68
- margin-inline: -$spacing-05 0;
69
- }
70
68
  }
71
69
  }
72
70
 
@@ -83,9 +81,14 @@
83
81
  }
84
82
  }
85
83
 
86
- :host(#{$c4d-prefix}-link-list-item) {
84
+ :host(#{$c4d-prefix}-link-list-item),
85
+ :host(#{$c4d-prefix}-link-list-item-cta) {
87
86
  .#{$prefix}--link {
87
+ display: flex;
88
88
  align-content: flex-start;
89
+ padding: $spacing-04 0;
90
+ gap: $spacing-03;
91
+ inline-size: 100%;
89
92
 
90
93
  span,
91
94
  ::slotted(svg[slot='icon']) {
@@ -106,16 +109,6 @@
106
109
  @include type-style('heading-02');
107
110
  }
108
111
 
109
- :host(#{$c4d-prefix}-link-list-item)[type='default'],
110
- :host(#{$c4d-prefix}-link-list-item-cta)[type='default'],
111
- :host(#{$c4d-prefix}-link-list-item)[type='end'] {
112
- .#{$prefix}--link {
113
- display: flex;
114
- padding: $spacing-05 0;
115
- inline-size: 100%;
116
- }
117
- }
118
-
119
112
  .#{$c4d-prefix}--link-list__list {
120
113
  ::slotted(#{$c4d-prefix}-link-list-item),
121
114
  ::slotted(#{$c4d-prefix}-link-list-item-cta) {
@@ -134,10 +127,6 @@
134
127
  border-block-end: 1px solid $border-subtle-01;
135
128
  border-block-start: 1px solid $border-subtle-01;
136
129
  margin-block-start: -1px;
137
-
138
- @include breakpoint(lg) {
139
- margin-inline: -$spacing-05;
140
- }
141
130
  }
142
131
  }
143
132
 
@@ -156,7 +145,7 @@
156
145
 
157
146
  .#{$c4d-prefix}--link-list__list--vertical {
158
147
  ::slotted(*) {
159
- margin-block-end: $spacing-05;
148
+ margin-block-end: 0;
160
149
  }
161
150
  }
162
151
 
package/scss/components/video-player/_video-player.scss CHANGED
@@ -43,8 +43,8 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
43
43
  }
44
44
  }
45
45
 
46
- :host(#{$c4d-prefix}-video-player[background-mode='true']),
47
- .#{$c4d-prefix}--video-player[background-mode='true'] {
46
+ :host(#{$c4d-prefix}-video-player[background-mode]),
47
+ .#{$c4d-prefix}--video-player[background-mode] {
48
48
  .#{$c4d-prefix}--video-player__video-container {
49
49
  padding: 0;
50
50
  block-size: 100%;