@ilo-org/styles 0.1.0 → 0.1.2
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/build/css/components/index.css +899 -180
- package/build/css/components/index.css.map +1 -1
- package/build/css/index.css +899 -180
- package/build/css/index.css.map +1 -1
- package/build/css/monorepo.css +899 -180
- package/build/css/monorepo.css.map +1 -1
- package/build/minified/index.css +1 -1
- package/build/minified/index.css.map +1 -1
- package/build/minified/monorepo.css +1 -1
- package/build/minified/monorepo.css.map +1 -1
- package/package.json +4 -4
- package/scss/_animations.scss +12 -0
- package/scss/components/_accordion.scss +2 -2
- package/scss/components/_button.scss +12 -0
- package/scss/components/_card.scss +382 -67
- package/scss/components/_cardgroup.scss +12 -0
- package/scss/components/_footer.scss +128 -19
- package/scss/components/_hero.scss +4 -5
- package/scss/components/_linklist.scss +33 -0
- package/scss/components/_navigation.scss +160 -8
- package/scss/components/_notification.scss +51 -24
- package/scss/components/_table.scss +34 -2
|
@@ -27,13 +27,23 @@
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
&--inline {
|
|
30
|
-
width:
|
|
30
|
+
max-width: 340px;
|
|
31
31
|
|
|
32
32
|
.ilo--notification--content {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
padding: calc(px-to-rem($spacing-padding-3) + 2px)
|
|
34
|
+
px-to-rem($spacing-padding-3);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@include breakpoint("medium") {
|
|
38
|
+
max-width: 100%;
|
|
39
|
+
width: 100%;
|
|
40
|
+
|
|
41
|
+
.ilo--notification--content {
|
|
42
|
+
align-items: center;
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-items: space-between;
|
|
45
|
+
padding: px-to-rem(14px) px-to-rem($spacing-padding-3);
|
|
46
|
+
}
|
|
37
47
|
}
|
|
38
48
|
}
|
|
39
49
|
|
|
@@ -54,8 +64,10 @@
|
|
|
54
64
|
width: px-to-rem($spacing-padding-5);
|
|
55
65
|
top: 0;
|
|
56
66
|
|
|
57
|
-
|
|
58
|
-
|
|
67
|
+
@include breakpoint("medium") {
|
|
68
|
+
.ilo--notification--inline & {
|
|
69
|
+
background-position: center;
|
|
70
|
+
}
|
|
59
71
|
}
|
|
60
72
|
|
|
61
73
|
.icon--error & {
|
|
@@ -84,8 +96,12 @@
|
|
|
84
96
|
font-weight: 700;
|
|
85
97
|
@include font-styles("body-small");
|
|
86
98
|
|
|
87
|
-
|
|
88
|
-
|
|
99
|
+
margin-bottom: px-to-rem($spacing-padding-1-5);
|
|
100
|
+
|
|
101
|
+
@include breakpoint("medium") {
|
|
102
|
+
.ilo--notification--inline & {
|
|
103
|
+
margin-bottom: 0;
|
|
104
|
+
}
|
|
89
105
|
}
|
|
90
106
|
}
|
|
91
107
|
|
|
@@ -93,20 +109,23 @@
|
|
|
93
109
|
font-weight: 400;
|
|
94
110
|
@include font-styles("body-xs");
|
|
95
111
|
|
|
96
|
-
|
|
97
|
-
|
|
112
|
+
@include breakpoint("medium") {
|
|
113
|
+
.ilo--notification--inline & {
|
|
114
|
+
margin-left: px-to-rem($spacing-padding-3);
|
|
115
|
+
}
|
|
98
116
|
}
|
|
99
117
|
|
|
100
118
|
&:not(:last-child) {
|
|
101
|
-
|
|
102
|
-
margin-bottom: px-to-rem($spacing-padding-3);
|
|
103
|
-
}
|
|
119
|
+
margin-bottom: px-to-rem($spacing-padding-3);
|
|
104
120
|
|
|
105
|
-
|
|
106
|
-
|
|
121
|
+
@include breakpoint("medium") {
|
|
122
|
+
.ilo--notification--inline & {
|
|
123
|
+
margin-bottom: 0;
|
|
124
|
+
max-width: 24%;
|
|
107
125
|
|
|
108
|
-
|
|
109
|
-
|
|
126
|
+
@include breakpoint("large") {
|
|
127
|
+
max-width: 40%;
|
|
128
|
+
}
|
|
110
129
|
}
|
|
111
130
|
}
|
|
112
131
|
}
|
|
@@ -118,20 +137,28 @@
|
|
|
118
137
|
font-weight: 400;
|
|
119
138
|
@include font-styles("body-xs");
|
|
120
139
|
|
|
121
|
-
|
|
122
|
-
|
|
140
|
+
@include breakpoint("medium") {
|
|
141
|
+
.ilo--notification--inline & {
|
|
142
|
+
margin-left: px-to-rem($spacing-padding-2);
|
|
143
|
+
}
|
|
123
144
|
}
|
|
124
145
|
|
|
125
146
|
&:not(:last-child) {
|
|
126
|
-
|
|
127
|
-
|
|
147
|
+
margin-bottom: px-to-rem(19px);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@include breakpoint("medium") {
|
|
151
|
+
.ilo--notification--inline & {
|
|
152
|
+
margin-bottom: 0;
|
|
128
153
|
}
|
|
129
154
|
}
|
|
130
155
|
}
|
|
131
156
|
|
|
132
157
|
&--cta {
|
|
133
|
-
|
|
134
|
-
|
|
158
|
+
@include breakpoint("medium") {
|
|
159
|
+
.ilo--notification--inline & {
|
|
160
|
+
margin-left: px-to-rem($spacing-padding-3);
|
|
161
|
+
}
|
|
135
162
|
}
|
|
136
163
|
}
|
|
137
164
|
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
font-family: $fonts-display;
|
|
49
49
|
font-weight: 700;
|
|
50
50
|
@include font-styles("body-xs");
|
|
51
|
+
letter-spacing: -0.02em;
|
|
51
52
|
padding: $spacing-ux-table-head-padding-top
|
|
52
53
|
$spacing-ux-table-head-padding-right
|
|
53
54
|
$spacing-ux-table-head-padding-bottom
|
|
@@ -55,6 +56,13 @@
|
|
|
55
56
|
pointer-events: none;
|
|
56
57
|
text-align: left;
|
|
57
58
|
|
|
59
|
+
.ilo--table--small & {
|
|
60
|
+
padding: $spacing-ux-table-smallhead-padding-top
|
|
61
|
+
$spacing-ux-table-smallhead-padding-right
|
|
62
|
+
$spacing-ux-table-smallhead-padding-bottom
|
|
63
|
+
$spacing-ux-table-smallhead-padding-left;
|
|
64
|
+
}
|
|
65
|
+
|
|
58
66
|
&:first-of-type {
|
|
59
67
|
border-left: none;
|
|
60
68
|
}
|
|
@@ -113,6 +121,13 @@
|
|
|
113
121
|
$spacing-ux-table-cell-padding-left;
|
|
114
122
|
position: relative;
|
|
115
123
|
|
|
124
|
+
.ilo--table--small & {
|
|
125
|
+
padding: $spacing-ux-table-smallcell-padding-top
|
|
126
|
+
$spacing-ux-table-smallcell-padding-right
|
|
127
|
+
$spacing-ux-table-smallcell-padding-bottom
|
|
128
|
+
$spacing-ux-table-smallcell-padding-left;
|
|
129
|
+
}
|
|
130
|
+
|
|
116
131
|
&:first-of-type {
|
|
117
132
|
border-left: none;
|
|
118
133
|
}
|
|
@@ -121,10 +136,17 @@
|
|
|
121
136
|
text-align: right;
|
|
122
137
|
}
|
|
123
138
|
|
|
139
|
+
&:hover {
|
|
140
|
+
background-color: $color-ux-table-selected-background;
|
|
141
|
+
border-bottom: 2px solid $color-ux-labels-hover;
|
|
142
|
+
color: $color-ux-labels-hover;
|
|
143
|
+
}
|
|
144
|
+
|
|
124
145
|
&.selected {
|
|
125
146
|
background-color: $color-ux-table-selected-background;
|
|
126
147
|
border-bottom: 2px solid $color-ux-labels-hover;
|
|
127
148
|
color: $color-ux-labels-hover;
|
|
149
|
+
cursor: pointer;
|
|
128
150
|
}
|
|
129
151
|
|
|
130
152
|
&.column--selected {
|
|
@@ -145,6 +167,7 @@
|
|
|
145
167
|
}
|
|
146
168
|
|
|
147
169
|
&--description {
|
|
170
|
+
color: $color-base-neutrals-medium;
|
|
148
171
|
font-family: $fonts-copy;
|
|
149
172
|
font-weight: 400;
|
|
150
173
|
@include font-styles("body-xxs");
|
|
@@ -167,11 +190,20 @@
|
|
|
167
190
|
border-left: px-to-rem(1px) solid $color-base-neutrals-white;
|
|
168
191
|
|
|
169
192
|
&:hover,
|
|
170
|
-
&:focus
|
|
171
|
-
&.selected {
|
|
193
|
+
&:focus {
|
|
172
194
|
background-color: $color-ux-table-selected-background;
|
|
173
195
|
}
|
|
174
196
|
}
|
|
197
|
+
|
|
198
|
+
&.selected {
|
|
199
|
+
.ilo--table--body--cell {
|
|
200
|
+
background-color: $color-ux-table-hover-background;
|
|
201
|
+
|
|
202
|
+
&.selected {
|
|
203
|
+
background-color: $color-ux-table-selected-background;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
175
207
|
}
|
|
176
208
|
}
|
|
177
209
|
}
|