@ilo-org/styles 1.7.1 → 1.7.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.
- package/css/components/callout.css +1 -1
- package/css/components/card.css +1 -1
- package/css/components/cardgroup.css +1 -1
- package/css/components/detailcard.css +1 -1
- package/css/components/profile.css +1 -1
- package/css/components/promocard.css +1 -1
- package/css/components/scorecard.css +1 -1
- package/css/components/tag.css +1 -1
- package/css/global.css.map +1 -1
- package/css/index.css +2 -2
- package/css/index.css.map +1 -1
- package/css/monorepo.css +2 -2
- package/css/monorepo.css.map +1 -1
- package/package.json +1 -1
- package/scss/components/_callout.scss +60 -61
- package/scss/components/_card.scss +2 -2
- package/scss/components/_cardgroup.scss +1 -0
- package/scss/components/_detailcard.scss +17 -20
- package/scss/components/_profile.scss +1 -1
- package/scss/components/_promocard.scss +42 -64
- package/scss/components/_scorecard.scss +3 -6
- package/scss/components/_tag.scss +3 -7
package/package.json
CHANGED
|
@@ -8,13 +8,13 @@
|
|
|
8
8
|
transition: max-height 225ms ease-out;
|
|
9
9
|
$callout: &;
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
max-height: 64px;
|
|
11
|
+
&__collapse {
|
|
12
|
+
max-height: px-to-rem(64px);
|
|
13
13
|
overflow: hidden;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
max-height: 300px;
|
|
16
|
+
&__open {
|
|
17
|
+
max-height: px-to-rem(300px);
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
|
|
20
20
|
#{$callout}--toggle--icon {
|
|
@@ -22,7 +22,39 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
&
|
|
25
|
+
&__error {
|
|
26
|
+
background: var(--ilo-color-red-ramp);
|
|
27
|
+
|
|
28
|
+
#{$callout}--sidebar {
|
|
29
|
+
background: var(--ilo-color-red);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&__info {
|
|
34
|
+
background: var(--ilo-color-blue-light);
|
|
35
|
+
|
|
36
|
+
#{$callout}--sidebar {
|
|
37
|
+
background: var(--ilo-color-blue);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&__success {
|
|
42
|
+
background: var(--ilo-color-green-ramp);
|
|
43
|
+
|
|
44
|
+
#{$callout}--sidebar {
|
|
45
|
+
background: var(--ilo-color-green);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&__warning {
|
|
50
|
+
background: var(--ilo-color-yellow-ramp);
|
|
51
|
+
|
|
52
|
+
#{$callout}--sidebar {
|
|
53
|
+
background: var(--ilo-color-yellow);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&--sidebar {
|
|
26
58
|
display: flex;
|
|
27
59
|
flex-direction: column;
|
|
28
60
|
align-items: center;
|
|
@@ -34,43 +66,40 @@
|
|
|
34
66
|
}
|
|
35
67
|
}
|
|
36
68
|
|
|
37
|
-
|
|
69
|
+
&--content {
|
|
70
|
+
color: var(--ilo-color-gray-charcoal);
|
|
38
71
|
padding: spacing(6);
|
|
39
72
|
width: 100%;
|
|
40
73
|
font-size: px-to-rem(14px);
|
|
41
74
|
}
|
|
42
75
|
|
|
43
|
-
|
|
76
|
+
&--header {
|
|
44
77
|
display: flex;
|
|
45
78
|
justify-content: space-between;
|
|
46
79
|
padding-block-end: spacing(3);
|
|
47
80
|
}
|
|
48
81
|
|
|
49
|
-
|
|
50
|
-
@include
|
|
51
|
-
font-family: var(--ilo-fonts-display);
|
|
82
|
+
&--title {
|
|
83
|
+
@include typography("highlight-medium");
|
|
52
84
|
font-weight: 700;
|
|
53
85
|
}
|
|
54
86
|
|
|
55
|
-
|
|
87
|
+
&--description {
|
|
56
88
|
font-weight: 400;
|
|
57
89
|
}
|
|
58
90
|
|
|
59
91
|
&--toggle {
|
|
60
|
-
@include
|
|
61
|
-
|
|
92
|
+
@include typography("highlight-medium-bold");
|
|
62
93
|
background: none;
|
|
63
94
|
border: none;
|
|
64
95
|
color: var(--ilo-color-blue-dark);
|
|
65
96
|
cursor: pointer;
|
|
66
|
-
font-family: var(--ilo-fonts-display);
|
|
67
97
|
font-weight: 500;
|
|
68
98
|
padding-inline-end: spacing(8);
|
|
69
99
|
position: relative;
|
|
70
100
|
|
|
71
|
-
|
|
101
|
+
&--icon {
|
|
72
102
|
@include icon("chevron_down", var(--ilo-color-blue-dark));
|
|
73
|
-
|
|
74
103
|
background-position: right;
|
|
75
104
|
background-repeat: no-repeat;
|
|
76
105
|
display: inline-block;
|
|
@@ -84,63 +113,33 @@
|
|
|
84
113
|
}
|
|
85
114
|
}
|
|
86
115
|
|
|
87
|
-
|
|
116
|
+
&--footer {
|
|
88
117
|
padding-block-start: spacing(5);
|
|
89
118
|
}
|
|
90
119
|
|
|
91
|
-
|
|
120
|
+
&--icon {
|
|
92
121
|
background-repeat: no-repeat;
|
|
93
122
|
background-size: contain;
|
|
94
123
|
display: block;
|
|
95
124
|
height: px-to-rem(24px);
|
|
96
125
|
width: px-to-rem(24px);
|
|
97
126
|
|
|
98
|
-
&
|
|
99
|
-
|
|
100
|
-
|
|
127
|
+
&__alert {
|
|
128
|
+
&__error {
|
|
129
|
+
@include icon("notification_error", var(--ilo-color-white));
|
|
130
|
+
}
|
|
101
131
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
&__success {
|
|
107
|
-
@include icon("notification_success", var(--ilo-color-white));
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
&__warning {
|
|
111
|
-
@include icon("notification_warning", var(--ilo-color-white));
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
&__error {
|
|
116
|
-
background: var(--ilo-color-red-ramp);
|
|
117
|
-
|
|
118
|
-
#{$callout}__sidebar {
|
|
119
|
-
background: var(--ilo-color-red);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
&__info {
|
|
124
|
-
background: var(--ilo-color-blue-ramp);
|
|
125
|
-
|
|
126
|
-
#{$callout}__sidebar {
|
|
127
|
-
background: var(--ilo-color-blue);
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
&__success {
|
|
132
|
-
background: var(--ilo-ramp-green);
|
|
132
|
+
&__info {
|
|
133
|
+
@include icon("notification_info", var(--ilo-color-white));
|
|
134
|
+
}
|
|
133
135
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}
|
|
136
|
+
&__success {
|
|
137
|
+
@include icon("notification_success", var(--ilo-color-white));
|
|
138
|
+
}
|
|
138
139
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
#{$callout}__sidebar {
|
|
143
|
-
background: var(--ilo-color-yellow);
|
|
140
|
+
&__warning {
|
|
141
|
+
@include icon("notification_warning", var(--ilo-color-white));
|
|
142
|
+
}
|
|
144
143
|
}
|
|
145
144
|
}
|
|
146
145
|
}
|
|
@@ -100,14 +100,14 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
&--title {
|
|
103
|
-
color: var(--ilo-color-dark
|
|
103
|
+
color: var(--ilo-color-blue-dark);
|
|
104
104
|
@include typography("heading-4");
|
|
105
105
|
margin-bottom: spacing(6);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
&--intro {
|
|
109
109
|
color: var(--ilo-color-gray-charcoal);
|
|
110
|
-
@include typography("body-
|
|
110
|
+
@include typography("body-medium");
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
&--date {
|
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
|
|
9
9
|
&__type {
|
|
10
10
|
&__detail {
|
|
11
|
-
|
|
11
|
+
// Card will take up 100% of the width of the container
|
|
12
|
+
// in mobile view for all sizes
|
|
13
|
+
--max-width: 100%;
|
|
12
14
|
|
|
13
15
|
border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-light);
|
|
14
16
|
padding: spacing(8) spacing(4);
|
|
@@ -39,13 +41,7 @@
|
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
#{$self}--title {
|
|
42
|
-
|
|
43
|
-
@include font-styles("headline-6");
|
|
44
|
-
@include breakpoint("lg") {
|
|
45
|
-
#{$self}__size__wide & {
|
|
46
|
-
@include font-styles("headline-6");
|
|
47
|
-
}
|
|
48
|
-
}
|
|
44
|
+
margin-bottom: spacing(2);
|
|
49
45
|
}
|
|
50
46
|
|
|
51
47
|
#{$self}--intro {
|
|
@@ -53,16 +49,12 @@
|
|
|
53
49
|
}
|
|
54
50
|
|
|
55
51
|
#{$self}--date {
|
|
56
|
-
|
|
57
|
-
line-height: var(--ilo-line-height-xlg);
|
|
58
|
-
letter-spacing: var(--ilo-letter-spacing-md);
|
|
52
|
+
@include typography("body-small");
|
|
59
53
|
color: var(--ilo-color-gray-accessible);
|
|
60
54
|
}
|
|
61
55
|
|
|
62
56
|
#{$self}--date-extra {
|
|
63
|
-
|
|
64
|
-
line-height: var(--ilo-line-height-2xlg);
|
|
65
|
-
letter-spacing: var(--ilo-letter-spacing-md);
|
|
57
|
+
@include typography("body-medium");
|
|
66
58
|
color: var(--ilo-color-gray-charcoal);
|
|
67
59
|
gap: spacing(2);
|
|
68
60
|
|
|
@@ -82,13 +74,20 @@
|
|
|
82
74
|
|
|
83
75
|
&#{$self}__size {
|
|
84
76
|
&__narrow {
|
|
85
|
-
|
|
77
|
+
@include breakpoint("md") {
|
|
78
|
+
--max-width: #{px-to-rem(343px)};
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&__wide {
|
|
83
|
+
@include breakpoint("md") {
|
|
84
|
+
--max-width: #{px-to-rem(745px)};
|
|
85
|
+
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
&__wide,
|
|
89
89
|
&__fluid {
|
|
90
90
|
@include breakpoint("md") {
|
|
91
|
-
--max-width: #{px-to-rem(745px)};
|
|
92
91
|
padding: spacing(8) spacing(4) spacing(8) spacing(0);
|
|
93
92
|
|
|
94
93
|
#{$self}--image--wrapper {
|
|
@@ -117,11 +116,9 @@
|
|
|
117
116
|
#{$self}--image--wrapper {
|
|
118
117
|
flex: 0 0 px-to-rem(196px);
|
|
119
118
|
}
|
|
120
|
-
}
|
|
121
119
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
@include font-styles("headline-5");
|
|
120
|
+
#{$self}--title {
|
|
121
|
+
@include typography("heading-3");
|
|
125
122
|
}
|
|
126
123
|
}
|
|
127
124
|
}
|
|
@@ -7,14 +7,12 @@
|
|
|
7
7
|
$self: &;
|
|
8
8
|
|
|
9
9
|
&--wrapper__type__promo {
|
|
10
|
-
--max-width:
|
|
10
|
+
--max-width: 100%;
|
|
11
11
|
|
|
12
12
|
&__size {
|
|
13
13
|
&__narrow {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
@include breakpoint("md", true) {
|
|
17
|
-
--max-width: 100%;
|
|
14
|
+
@include breakpoint("md") {
|
|
15
|
+
--max-width: #{px-to-rem(343px)};
|
|
18
16
|
}
|
|
19
17
|
}
|
|
20
18
|
|
|
@@ -34,92 +32,72 @@
|
|
|
34
32
|
|
|
35
33
|
&__type {
|
|
36
34
|
&__promo {
|
|
37
|
-
// --max-width: #{px-to-rem(343px)};
|
|
38
|
-
|
|
39
35
|
padding: spacing(10) spacing(6);
|
|
40
36
|
width: 100%;
|
|
41
37
|
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
#{$self}--title {
|
|
39
|
+
@include typography("heading-3");
|
|
40
|
+
margin-bottom: spacing(2);
|
|
44
41
|
}
|
|
45
42
|
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
#{$self}--intro {
|
|
44
|
+
@include typography("body-medium");
|
|
45
|
+
margin-bottom: spacing(8);
|
|
48
46
|
}
|
|
49
47
|
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
&#{$self}__cornercut {
|
|
49
|
+
@include cornercut(72px, 40px);
|
|
50
|
+
|
|
51
|
+
[dir="rtl"] & {
|
|
52
|
+
@include cornercut(72px, 40px left);
|
|
53
|
+
}
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
&#{$self}__size {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
@include
|
|
57
|
+
@include breakpoint("md") {
|
|
58
|
+
&__standard,
|
|
59
|
+
&__wide,
|
|
60
|
+
&__fluid {
|
|
61
|
+
padding: spacing(12);
|
|
62
|
+
|
|
63
|
+
#{$self}--title {
|
|
64
|
+
@include typography("heading-2");
|
|
65
|
+
margin-bottom: spacing(3);
|
|
63
66
|
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
67
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
#{$self}--intro {
|
|
69
|
+
@include typography("body-large");
|
|
70
|
+
}
|
|
70
71
|
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
&#{$self}__cornercut {
|
|
73
|
+
@include cornercut(87px, 48px);
|
|
73
74
|
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
[dir="rtl"] & {
|
|
76
|
+
@include cornercut(87px, 48px, left);
|
|
77
|
+
}
|
|
76
78
|
}
|
|
77
79
|
}
|
|
78
80
|
}
|
|
79
81
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
+
@include breakpoint("lg") {
|
|
83
|
+
&__wide,
|
|
84
|
+
&__fluid {
|
|
85
|
+
padding: spacing(16) spacing(18);
|
|
86
|
+
&#{$self}__cornercut {
|
|
87
|
+
@include cornercut(116px, 64px);
|
|
82
88
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
[dir="rtl"] & {
|
|
87
|
-
@include cornercut(72px, 40px left);
|
|
89
|
+
[dir="rtl"] & {
|
|
90
|
+
@include cornercut(116px, 64px, left);
|
|
91
|
+
}
|
|
88
92
|
}
|
|
89
93
|
}
|
|
90
|
-
|
|
91
|
-
#{$self}--title {
|
|
92
|
-
@include font-styles("headline-5");
|
|
93
|
-
margin-bottom: spacing(2);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
#{$self}--intro {
|
|
97
|
-
@include font-styles("body-small");
|
|
98
|
-
}
|
|
99
94
|
}
|
|
100
95
|
}
|
|
101
96
|
|
|
102
97
|
&#{$self}__theme__light:not(:hover) #{$self}--title {
|
|
103
|
-
color:
|
|
98
|
+
color: var(--ilo-color-gray-charcoal);
|
|
104
99
|
@include globaltransition("color");
|
|
105
100
|
}
|
|
106
|
-
|
|
107
|
-
#{$self}--title {
|
|
108
|
-
@include font-styles("headline-4");
|
|
109
|
-
|
|
110
|
-
@include breakpoint("md") {
|
|
111
|
-
@include font-styles("headline-2");
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
#{$self}--intro {
|
|
116
|
-
@include font-styles("body-small");
|
|
117
|
-
margin-bottom: spacing(8);
|
|
118
|
-
|
|
119
|
-
@include breakpoint("md") {
|
|
120
|
-
@include font-styles("base");
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
101
|
}
|
|
124
102
|
}
|
|
125
103
|
}
|
|
@@ -54,10 +54,9 @@
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
#{$self}--title {
|
|
57
|
-
@include
|
|
58
|
-
font-family: var(--ilo-fonts-display);
|
|
59
|
-
font-weight: 700;
|
|
57
|
+
@include typography("heading-3");
|
|
60
58
|
margin-bottom: spacing(6);
|
|
59
|
+
color: var(--ilo-color-blue-dark);
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
#{$self}--area {
|
|
@@ -152,9 +151,7 @@
|
|
|
152
151
|
|
|
153
152
|
#{$self}--title {
|
|
154
153
|
grid-area: title;
|
|
155
|
-
|
|
156
|
-
line-height: var(--ilo-line-height-lg);
|
|
157
|
-
letter-spacing: var(--ilo-letter-spacing-sm);
|
|
154
|
+
@include typography("heading-4");
|
|
158
155
|
}
|
|
159
156
|
|
|
160
157
|
#{$self}--area--content {
|
|
@@ -20,12 +20,7 @@
|
|
|
20
20
|
padding: spacing(2) spacing(3);
|
|
21
21
|
width: fit-content;
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
font-family: var(--ilo-fonts-display);
|
|
25
|
-
font-size: var(--ilo-font-size-sm);
|
|
26
|
-
font-weight: var(--ilo-font-weight-medium);
|
|
27
|
-
line-height: var(--ilo-line-height-xlg);
|
|
28
|
-
letter-spacing: var(--ilo-letter-spacing-sm);
|
|
23
|
+
@include typography("highlight-small");
|
|
29
24
|
|
|
30
25
|
// Colors and border
|
|
31
26
|
color: var(--ilo-color-blue-dark);
|
|
@@ -62,6 +57,7 @@
|
|
|
62
57
|
}
|
|
63
58
|
|
|
64
59
|
&__button,
|
|
60
|
+
&__reset,
|
|
65
61
|
&__anchor {
|
|
66
62
|
&:hover,
|
|
67
63
|
&:focus {
|
|
@@ -85,7 +81,7 @@
|
|
|
85
81
|
}
|
|
86
82
|
|
|
87
83
|
.ilo--icon {
|
|
88
|
-
bottom: px-to-rem(
|
|
84
|
+
bottom: px-to-rem(1px);
|
|
89
85
|
fill: inherit;
|
|
90
86
|
position: relative;
|
|
91
87
|
margin-inline-start: px-to-rem(2px);
|