gatsby-theme-carbon 2.1.3 → 2.1.6
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 +2 -2
- package/src/components/ArticleCard/ArticleCard.js +8 -5
- package/src/components/ArticleCard/article-card.scss +12 -5
- package/src/components/Code/Code.module.scss +1 -1
- package/src/components/FeatureCard/feature-card.scss +0 -4
- package/src/components/FourOhFour/FourOhFour.module.scss +5 -5
- package/src/components/Header/Header.module.scss +25 -22
- package/src/components/Homepage/Banner.js +1 -0
- package/src/components/Homepage/Callout.module.scss +1 -1
- package/src/components/Homepage/homepage.scss +3 -4
- package/src/components/MediumPosts/MediumPosts.module.scss +3 -20
- package/src/components/Switcher/Switcher.js +2 -2
- package/src/styles/internal/_page.scss +3 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gatsby-theme-carbon",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.6",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"author": "vpicone <vp@vincepic.one> (@vpicone)",
|
|
6
6
|
"repository": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"lodash.startcase": "^4.4.0",
|
|
60
60
|
"lodash.throttle": "^4.1.1",
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
|
-
"node-sass": "
|
|
62
|
+
"node-sass": "^6.0.1",
|
|
63
63
|
"prism-react-renderer": "^1.2.1",
|
|
64
64
|
"prop-types": "^15.7.2",
|
|
65
65
|
"react-helmet": "^6.0.0-beta",
|
|
@@ -45,9 +45,10 @@ export default class ArticleCard extends React.Component {
|
|
|
45
45
|
[`${prefix}--aspect-ratio--2x1`]
|
|
46
46
|
);
|
|
47
47
|
|
|
48
|
-
const
|
|
48
|
+
const cardContentClassNames = cx(
|
|
49
49
|
[`${prefix}--tile`],
|
|
50
|
-
[`${prefix}--tile--clickable`]
|
|
50
|
+
[`${prefix}--tile--clickable`],
|
|
51
|
+
[`${prefix}--article-card_content`]
|
|
51
52
|
);
|
|
52
53
|
|
|
53
54
|
const cardContent = (
|
|
@@ -101,16 +102,18 @@ export default class ArticleCard extends React.Component {
|
|
|
101
102
|
|
|
102
103
|
let cardContainer;
|
|
103
104
|
if (disabled === true) {
|
|
104
|
-
cardContainer =
|
|
105
|
+
cardContainer = (
|
|
106
|
+
<div className={cardContentClassNames}>{cardContent}</div>
|
|
107
|
+
);
|
|
105
108
|
} else if (isLink === true) {
|
|
106
109
|
cardContainer = (
|
|
107
|
-
<Link to={href} className={
|
|
110
|
+
<Link to={href} className={cardContentClassNames} {...rest}>
|
|
108
111
|
{cardContent}
|
|
109
112
|
</Link>
|
|
110
113
|
);
|
|
111
114
|
} else {
|
|
112
115
|
cardContainer = (
|
|
113
|
-
<a href={href} className={
|
|
116
|
+
<a href={href} className={cardContentClassNames} {...rest}>
|
|
114
117
|
{cardContent}
|
|
115
118
|
</a>
|
|
116
119
|
);
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.#{$prefix}--article-card:hover .#{$prefix}--
|
|
13
|
+
.#{$prefix}--article-card:hover .#{$prefix}--article-card__tile {
|
|
14
14
|
background: $hover-ui;
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -43,6 +43,13 @@
|
|
|
43
43
|
@include carbon--type-style('caption-01');
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
// At the moment, we force 16:9 for medium posts, this
|
|
47
|
+
// is how we would force 16:9 for all article cards
|
|
48
|
+
//
|
|
49
|
+
// .#{$prefix}--article-card__img {
|
|
50
|
+
// aspect-ratio: 16 / 9;
|
|
51
|
+
// }
|
|
52
|
+
|
|
46
53
|
.#{$prefix}--article-card__img .gatsby-resp-image-wrapper {
|
|
47
54
|
margin-bottom: 0;
|
|
48
55
|
}
|
|
@@ -60,11 +67,11 @@
|
|
|
60
67
|
}
|
|
61
68
|
|
|
62
69
|
// Dark
|
|
63
|
-
.#{$prefix}--article-card--dark .#{$prefix}--
|
|
70
|
+
.#{$prefix}--article-card--dark .#{$prefix}--article-card__tile {
|
|
64
71
|
background: $carbon--gray-90; //$ui-background for gray 90 theme
|
|
65
72
|
}
|
|
66
73
|
|
|
67
|
-
.#{$prefix}--article-card--dark:hover .#{$prefix}--
|
|
74
|
+
.#{$prefix}--article-card--dark:hover .#{$prefix}--article-card__tile {
|
|
68
75
|
background: $carbon--gray-80; //$hover-ui for gray 90 theme
|
|
69
76
|
}
|
|
70
77
|
|
|
@@ -86,7 +93,7 @@
|
|
|
86
93
|
cursor: not-allowed;
|
|
87
94
|
}
|
|
88
95
|
|
|
89
|
-
.#{$prefix}--article-card--disabled .#{$prefix}--
|
|
96
|
+
.#{$prefix}--article-card--disabled .#{$prefix}--article-card__tile:hover {
|
|
90
97
|
background: $ui-01;
|
|
91
98
|
cursor: not-allowed;
|
|
92
99
|
}
|
|
@@ -105,7 +112,7 @@
|
|
|
105
112
|
|
|
106
113
|
// Disabled dark
|
|
107
114
|
.#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
|
|
108
|
-
.#{$prefix}--
|
|
115
|
+
.#{$prefix}--article-card__tile:hover {
|
|
109
116
|
background: $carbon--gray-90; //$ui-background for gray 90 theme
|
|
110
117
|
}
|
|
111
118
|
|
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
animation: gradient 2s ease infinite;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
:global(.container--dark) .link {
|
|
20
|
+
color: $carbon--gray-10;
|
|
21
|
+
}
|
|
22
|
+
|
|
19
23
|
.list .link {
|
|
20
24
|
@include carbon--type-style('body-short-02');
|
|
21
25
|
margin-bottom: $spacing-03;
|
|
@@ -43,10 +47,6 @@
|
|
|
43
47
|
}
|
|
44
48
|
}
|
|
45
49
|
|
|
46
|
-
:global(.container--dark) .link {
|
|
47
|
-
color: $carbon--gray-10;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
50
|
.paragraph {
|
|
51
51
|
@include carbon--type-style('body-long-01');
|
|
52
52
|
font-size: 1.25rem;
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
@include carbon--breakpoint('max') {
|
|
78
|
-
padding-left:
|
|
78
|
+
padding-left: 424px;
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -138,12 +138,33 @@ header.header {
|
|
|
138
138
|
transition: background-color $duration--fast-02 $carbon--standard-easing;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
+
.header .header-button.switcher-button {
|
|
142
|
+
background-color: $carbon--gray-100;
|
|
143
|
+
border: none;
|
|
144
|
+
border-color: transparent;
|
|
145
|
+
border-bottom: 1px solid $carbon--gray-80;
|
|
146
|
+
&:hover {
|
|
147
|
+
background-color: $carbon--gray-80;
|
|
148
|
+
}
|
|
149
|
+
&:active {
|
|
150
|
+
background-color: #3d3d3d;
|
|
151
|
+
border-left: 1px solid $ui-05;
|
|
152
|
+
border-right: 1px solid $ui-05;
|
|
153
|
+
}
|
|
154
|
+
&:focus {
|
|
155
|
+
outline: 2px solid $carbon--white-0;
|
|
156
|
+
outline-offset: -2px;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
141
160
|
// Switcher button, extra specificity to override Carbon tooltip button styles
|
|
142
161
|
// Hex values used pending shell theming
|
|
143
162
|
.header :global(.bx--tooltip__trigger).header-button.switcher-button {
|
|
144
163
|
&:focus {
|
|
145
164
|
box-shadow: none;
|
|
146
|
-
border
|
|
165
|
+
border: none;
|
|
166
|
+
outline: 2px solid $carbon--white-0;
|
|
167
|
+
outline-offset: -2px;
|
|
147
168
|
}
|
|
148
169
|
}
|
|
149
170
|
|
|
@@ -151,29 +172,11 @@ header.header {
|
|
|
151
172
|
color: $carbon--white-0;
|
|
152
173
|
}
|
|
153
174
|
|
|
154
|
-
.header .header-button.switcher-button {
|
|
155
|
-
&:hover {
|
|
156
|
-
background-color: $carbon--gray-80;
|
|
157
|
-
}
|
|
158
|
-
&:focus,
|
|
159
|
-
&:focus:active {
|
|
160
|
-
outline: 2px solid $carbon--white-0;
|
|
161
|
-
outline-offset: -2px;
|
|
162
|
-
}
|
|
163
|
-
&:active {
|
|
164
|
-
background-color: #3d3d3d;
|
|
165
|
-
border-left: 2px solid $ui-05;
|
|
166
|
-
border-right: 2px solid $ui-05;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
175
|
.header-button.switcher-button.switcher-button--open {
|
|
171
|
-
border:
|
|
172
|
-
border-left:
|
|
173
|
-
border-bottom:
|
|
174
|
-
background-color: $carbon--gray-100;
|
|
176
|
+
border: 1px solid transparent;
|
|
177
|
+
border-left: 1px solid $carbon--gray-80;
|
|
178
|
+
border-bottom: 1px solid transparent;
|
|
175
179
|
&:active {
|
|
176
|
-
border-left: 2px solid $carbon--white-0;
|
|
177
180
|
box-shadow: none;
|
|
178
181
|
border-color: $carbon--white-0;
|
|
179
182
|
}
|
|
@@ -72,13 +72,12 @@
|
|
|
72
72
|
margin: 0;
|
|
73
73
|
|
|
74
74
|
@include carbon--breakpoint('lg') {
|
|
75
|
-
padding-left: calc(
|
|
76
|
-
25% + 2rem
|
|
77
|
-
); //2rem to account for 2rem left padding default on grid
|
|
75
|
+
padding-left: calc(25% + 1.5rem);
|
|
78
76
|
}
|
|
79
77
|
|
|
80
78
|
@include carbon--breakpoint('max') {
|
|
81
|
-
padding-left:
|
|
79
|
+
padding-left: 424px;
|
|
80
|
+
padding-right: 0;
|
|
82
81
|
}
|
|
83
82
|
}
|
|
84
83
|
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
// Fixes the gutter of the article cards on the homepage
|
|
2
2
|
.card-container {
|
|
3
|
-
padding-right:
|
|
4
|
-
padding-left:
|
|
5
|
-
@include carbon--breakpoint('md') {
|
|
6
|
-
padding-right: 1rem;
|
|
7
|
-
padding-left: 1rem;
|
|
8
|
-
}
|
|
3
|
+
padding-right: 1rem;
|
|
4
|
+
padding-left: 1rem;
|
|
9
5
|
}
|
|
10
6
|
|
|
11
7
|
// Fixs the breaking type
|
|
@@ -40,18 +36,5 @@
|
|
|
40
36
|
|
|
41
37
|
.image {
|
|
42
38
|
object-fit: cover;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
@include carbon--breakpoint('sm') {
|
|
46
|
-
height: 315px;
|
|
47
|
-
}
|
|
48
|
-
@include carbon--breakpoint('md') {
|
|
49
|
-
height: 290px;
|
|
50
|
-
}
|
|
51
|
-
@include carbon--breakpoint('lg') {
|
|
52
|
-
height: 165px;
|
|
53
|
-
}
|
|
54
|
-
@include carbon--breakpoint('xlg') {
|
|
55
|
-
height: 215px;
|
|
56
|
-
}
|
|
39
|
+
aspect-ratio: 16 / 9;
|
|
57
40
|
}
|
|
@@ -123,8 +123,8 @@ const DefaultChildren = () => (
|
|
|
123
123
|
</SwitcherLink>
|
|
124
124
|
<SwitcherLink
|
|
125
125
|
isInternal
|
|
126
|
-
href="https://w3.ibm.com/design/
|
|
127
|
-
IBM
|
|
126
|
+
href="https://w3.ibm.com/design/experience-standards/">
|
|
127
|
+
IBM Experience Standards
|
|
128
128
|
</SwitcherLink>
|
|
129
129
|
<SwitcherDivider>Community</SwitcherDivider>
|
|
130
130
|
<SwitcherLink href="https://w3.ibm.com/design/" isInternal>
|
|
@@ -19,8 +19,9 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
@include carbon--breakpoint('max') {
|
|
22
|
-
|
|
23
|
-
padding-
|
|
22
|
+
max-width: rem(1544px);
|
|
23
|
+
padding-left: 424px;
|
|
24
|
+
padding-right: 0;
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
27
|
|
|
@@ -28,11 +29,6 @@
|
|
|
28
29
|
padding: 0;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
// Grids on the homepage should be full width
|
|
32
|
-
.container:not(.container--homepage) .#{$prefix}--grid {
|
|
33
|
-
max-width: rem(1584px);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
32
|
//---------------------------------------
|
|
37
33
|
// Header styles
|
|
38
34
|
//---------------------------------------
|