@ons/design-system 72.10.3 → 72.10.4
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/card/_card.scss +1 -0
- package/components/card/example-card-set-with-headline-figures.njk +4 -4
- package/components/chart/_macro.njk +34 -34
- package/components/chart/_macro.spec.js +0 -49
- package/components/chart/chart.js +18 -8
- package/components/chart/columnrange-chart.js +3 -0
- package/components/chart/common-chart-options.js +1 -13
- package/components/chart/example-bar-with-confidence-levels.njk +0 -5
- package/components/chart/example-column-with-confidence-levels.njk +1 -4
- package/components/chart/example-scatter-chart.njk +4 -8
- package/components/chart/specific-chart-options.js +32 -9
- package/components/description-list/_description-list.scss +7 -6
- package/components/description-list/_macro.njk +1 -1
- package/components/details-panel/_details-panel.scss +40 -20
- package/components/details-panel/_macro.njk +18 -12
- package/components/details-panel/example-details-panel.njk +1 -0
- package/components/featured-article/_macro.njk +76 -0
- package/components/featured-article/example-featured-article-with-chart.njk +223 -0
- package/components/featured-article/example-featured-article-with-image.njk +24 -0
- package/components/featured-article/featured-article.scss +33 -0
- package/components/featured-article/macro.spec.js +173 -0
- package/components/header/_header.scss +34 -1
- package/components/header/_macro.njk +140 -132
- package/components/hero/_hero.scss +5 -0
- package/components/hero/_macro.njk +8 -4
- package/components/hero/example-hero-grey.njk +2 -17
- package/css/main.css +1 -1
- package/css/print.css +1 -1
- package/js/details.js +39 -0
- package/js/main.js +1 -0
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/main.scss +1 -0
- package/scss/print.scss +6 -1
- package/scss/utilities/_grid.scss +46 -0
package/scss/main.scss
CHANGED
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
@import '../components/document-list/document-list';
|
|
23
23
|
@import '../components/download-resources/download-resources';
|
|
24
24
|
@import '../components/external-link/external-link';
|
|
25
|
+
@import '../components/featured-article/featured-article';
|
|
25
26
|
@import '../components/feedback/feedback';
|
|
26
27
|
@import '../components/field/field-group';
|
|
27
28
|
@import '../components/field/field';
|
package/scss/print.scss
CHANGED
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
.ons-cookies-banner,
|
|
6
6
|
.ons-language-links,
|
|
7
7
|
.ons-breadcrumbs,
|
|
8
|
-
.ons-u-ph
|
|
8
|
+
.ons-u-ph,
|
|
9
|
+
.ons-details-panel__banner-detail {
|
|
9
10
|
display: none !important;
|
|
10
11
|
}
|
|
11
12
|
|
|
@@ -91,3 +92,7 @@ p {
|
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
}
|
|
95
|
+
|
|
96
|
+
details::details-content {
|
|
97
|
+
display: contents;
|
|
98
|
+
}
|
|
@@ -107,6 +107,32 @@
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
+
&-flex-gap {
|
|
111
|
+
display: flex;
|
|
112
|
+
margin-left: 0;
|
|
113
|
+
flex-flow: column nowrap;
|
|
114
|
+
|
|
115
|
+
@include mq('m') {
|
|
116
|
+
flex-direction: row;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&--xl {
|
|
120
|
+
column-gap: 2rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&--l {
|
|
124
|
+
column-gap: 1.5rem;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&--m {
|
|
128
|
+
column-gap: 1.25rem;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&--s {
|
|
132
|
+
column-gap: 1rem;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
110
136
|
&__col {
|
|
111
137
|
background-clip: content-box;
|
|
112
138
|
box-sizing: border-box;
|
|
@@ -122,6 +148,20 @@
|
|
|
122
148
|
float: left;
|
|
123
149
|
}
|
|
124
150
|
|
|
151
|
+
.ons-grid-flex-gap & {
|
|
152
|
+
padding-left: 0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&--sticky\@m {
|
|
156
|
+
/* if parent element is set to flex, override the default align-self property
|
|
157
|
+
from stretch to flex-start so that it stays sticky on scroll after medium breakpoint -
|
|
158
|
+
this is set for the table of contents component specifically */
|
|
159
|
+
.ons-grid-flex &,
|
|
160
|
+
.ons-grid-flex-gap & {
|
|
161
|
+
align-self: flex-start;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
125
165
|
&--loose {
|
|
126
166
|
padding-left: $grid-gutters * 2;
|
|
127
167
|
}
|
|
@@ -141,6 +181,11 @@
|
|
|
141
181
|
|
|
142
182
|
.ons-grid-flex & {
|
|
143
183
|
width: auto;
|
|
184
|
+
|
|
185
|
+
// keep header menu columns 100% width
|
|
186
|
+
&.ons-header-nav-menu__col {
|
|
187
|
+
width: 100%;
|
|
188
|
+
}
|
|
144
189
|
}
|
|
145
190
|
}
|
|
146
191
|
}
|
|
@@ -155,6 +200,7 @@
|
|
|
155
200
|
|
|
156
201
|
@include bp-suffix(ons-grid--bordered, false) {
|
|
157
202
|
margin-left: 0;
|
|
203
|
+
|
|
158
204
|
.ons-grid__col {
|
|
159
205
|
border-bottom: 1px solid var(--ons-color-borders);
|
|
160
206
|
border-top: 1px solid var(--ons-color-borders);
|