@ilo-org/styles 0.1.2 → 0.1.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/build/css/components/index.css +550 -223
- package/build/css/components/index.css.map +1 -1
- package/build/css/index.css +550 -223
- package/build/css/index.css.map +1 -1
- package/build/css/monorepo.css +550 -223
- 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 +3 -3
- package/scss/components/_breadcrumb.scss +25 -16
- package/scss/components/_card.scss +87 -9
- package/scss/components/_checkbox.scss +0 -14
- package/scss/components/_contextmenu.scss +3 -2
- package/scss/components/_credit.scss +37 -0
- package/scss/components/_dropdown.scss +23 -8
- package/scss/components/_fieldset.scss +1 -0
- package/scss/components/_footer.scss +3 -1
- package/scss/components/_image.scss +14 -0
- package/scss/components/_input.scss +1 -13
- package/scss/components/_linklist.scss +1 -0
- package/scss/components/_modal.scss +9 -1
- package/scss/components/_profile.scss +15 -28
- package/scss/components/_radio.scss +0 -14
- package/scss/components/_richtext.scss +54 -0
- package/scss/components/_searchfield.scss +2 -2
- package/scss/components/_table.scss +17 -4
- package/scss/components/_tableofcontents.scss +140 -1
- package/scss/components/_tabs.scss +15 -31
- package/scss/components/_textarea.scss +0 -12
- package/scss/components/_video.scss +42 -5
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
@use "../functions" as *;
|
|
3
3
|
@import "../mixins";
|
|
4
4
|
|
|
5
|
-
/*
|
|
6
|
-
Note that the styles for this component rely on CSS container queries, which currently require a polyfill. Your site template should load the polyfill in the <head> using the method described here: https://github.com/GoogleChromeLabs/container-query-polyfil
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
5
|
.ilo--tabs {
|
|
6
|
+
border-bottom: px-to-rem(4px) solid $color-base-neutrals-lighter;
|
|
7
|
+
border-left: px-to-rem(4px) solid $color-base-neutrals-lighter;
|
|
8
|
+
border-right: px-to-rem(4px) solid $color-base-neutrals-lighter;
|
|
9
|
+
|
|
10
10
|
&:not(.tabs--js) {
|
|
11
11
|
.ilo--tabs--selection {
|
|
12
12
|
margin-bottom: px-to-rem(24px);
|
|
@@ -37,18 +37,18 @@ Note that the styles for this component rely on CSS container queries, which cur
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
&:active {
|
|
40
|
-
background: map-get($color, "link", "background", "
|
|
41
|
-
border-bottom: $widths-border-
|
|
42
|
-
map-get($color, "link", "underline", "
|
|
43
|
-
color: map-get($color, "link", "text", "
|
|
40
|
+
background: map-get($color, "link", "background", "default");
|
|
41
|
+
border-bottom: $widths-border-sm solid
|
|
42
|
+
map-get($color, "link", "underline", "default");
|
|
43
|
+
color: map-get($color, "link", "text", "default");
|
|
44
44
|
outline: none;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
&:focus {
|
|
48
|
-
background: map-get($color, "link", "background", "
|
|
49
|
-
border-bottom: $widths-border-
|
|
50
|
-
map-get($color, "link", "underline", "
|
|
51
|
-
color: map-get($color, "link", "text", "
|
|
48
|
+
background: map-get($color, "link", "background", "default");
|
|
49
|
+
border-bottom: $widths-border-sm solid
|
|
50
|
+
map-get($color, "link", "underline", "default");
|
|
51
|
+
color: map-get($color, "link", "text", "default");
|
|
52
52
|
outline: none;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -94,9 +94,7 @@ Note that the styles for this component rely on CSS container queries, which cur
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
&:hover,
|
|
97
|
-
|
|
98
|
-
&[aria-selected="true"]:hover,
|
|
99
|
-
&[aria-selected="true"]:focus {
|
|
97
|
+
&[aria-selected="true"]:hover {
|
|
100
98
|
background-color: $color-base-blue-light;
|
|
101
99
|
color: $color-base-blue-medium;
|
|
102
100
|
outline: none;
|
|
@@ -174,21 +172,7 @@ Note that the styles for this component rely on CSS container queries, which cur
|
|
|
174
172
|
}
|
|
175
173
|
}
|
|
176
174
|
|
|
177
|
-
|
|
178
|
-
|
|
175
|
+
.right-to-left & {
|
|
176
|
+
direction: rtl;
|
|
179
177
|
}
|
|
180
|
-
|
|
181
|
-
[aria-expanded="false"] {
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
[aria-expanded="false"] {
|
|
186
|
-
display: none;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
@container (min-width: 700px) {
|
|
190
|
-
[aria-expanded="true"] {
|
|
191
|
-
display: block;
|
|
192
|
-
}
|
|
193
|
-
} */
|
|
194
178
|
}
|
|
@@ -45,18 +45,6 @@
|
|
|
45
45
|
);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
&:hover {
|
|
49
|
-
background-color: map-get(
|
|
50
|
-
$color,
|
|
51
|
-
"formelements",
|
|
52
|
-
"input",
|
|
53
|
-
"hover",
|
|
54
|
-
"background"
|
|
55
|
-
);
|
|
56
|
-
@include bordervalues("input", "formelements", "hover");
|
|
57
|
-
padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
48
|
&:focus {
|
|
61
49
|
background-color: map-get(
|
|
62
50
|
$color,
|
|
@@ -148,19 +148,44 @@
|
|
|
148
148
|
.vjs-big-play-button {
|
|
149
149
|
@include iconbutton(
|
|
150
150
|
"play",
|
|
151
|
-
$spacing-ux-video-
|
|
152
|
-
$spacing-ux-video-
|
|
151
|
+
$spacing-ux-video-bigplaybutton-height,
|
|
152
|
+
$spacing-ux-video-bigplaybutton-width,
|
|
153
153
|
$color-ux-video-controls-default-icon
|
|
154
154
|
);
|
|
155
155
|
|
|
156
156
|
&:hover {
|
|
157
157
|
background-color: $color-ux-video-controls-hover-background;
|
|
158
|
+
@include iconbutton(
|
|
159
|
+
"play",
|
|
160
|
+
$spacing-ux-video-bigplaybutton-height,
|
|
161
|
+
$spacing-ux-video-bigplaybutton-width,
|
|
162
|
+
$color-ux-video-controls-hover-icon
|
|
163
|
+
);
|
|
164
|
+
|
|
165
|
+
& ~ .vjs-duration,
|
|
166
|
+
& ~ .ilo--video--controls--duration {
|
|
167
|
+
background-color: $color-ux-video-controls-hover-background;
|
|
168
|
+
color: $color-ux-video-controls-hover-icon;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&.vjs-paused {
|
|
158
173
|
@include iconbutton(
|
|
159
174
|
"play",
|
|
160
175
|
$spacing-ux-video-buttonicon-height,
|
|
161
176
|
$spacing-ux-video-buttonicon-width,
|
|
162
|
-
$color-ux-video-controls-
|
|
177
|
+
$color-ux-video-controls-default-icon
|
|
163
178
|
);
|
|
179
|
+
|
|
180
|
+
&:hover {
|
|
181
|
+
background-color: $color-ux-video-controls-hover-background;
|
|
182
|
+
@include iconbutton(
|
|
183
|
+
"play",
|
|
184
|
+
$spacing-ux-video-buttonicon-height,
|
|
185
|
+
$spacing-ux-video-buttonicon-width,
|
|
186
|
+
$color-ux-video-controls-hover-icon
|
|
187
|
+
);
|
|
188
|
+
}
|
|
164
189
|
}
|
|
165
190
|
}
|
|
166
191
|
|
|
@@ -187,6 +212,7 @@
|
|
|
187
212
|
&--duration,
|
|
188
213
|
.vjs-duration {
|
|
189
214
|
background-color: $color-ux-video-controls-default-background;
|
|
215
|
+
color: $color-ux-video-controls-default-icon;
|
|
190
216
|
display: none;
|
|
191
217
|
height: 100%;
|
|
192
218
|
font-weight: 700;
|
|
@@ -196,6 +222,11 @@
|
|
|
196
222
|
text-align: center;
|
|
197
223
|
width: px-to-rem(80px);
|
|
198
224
|
|
|
225
|
+
&:hover {
|
|
226
|
+
background-color: $color-ux-video-controls-hover-background;
|
|
227
|
+
color: $color-ux-video-controls-hover-icon;
|
|
228
|
+
}
|
|
229
|
+
|
|
199
230
|
@include font-styles("label-small");
|
|
200
231
|
|
|
201
232
|
&.show {
|
|
@@ -407,6 +438,12 @@
|
|
|
407
438
|
.vjs-has-started & {
|
|
408
439
|
display: block;
|
|
409
440
|
}
|
|
441
|
+
|
|
442
|
+
&:hover {
|
|
443
|
+
.vjs-volume-control {
|
|
444
|
+
display: block;
|
|
445
|
+
}
|
|
446
|
+
}
|
|
410
447
|
}
|
|
411
448
|
|
|
412
449
|
&--showvolume,
|
|
@@ -520,7 +557,7 @@
|
|
|
520
557
|
.vjs-volume-bar {
|
|
521
558
|
height: 4px;
|
|
522
559
|
position: relative;
|
|
523
|
-
width: calc(100% -
|
|
560
|
+
width: calc(100% - 26px);
|
|
524
561
|
}
|
|
525
562
|
|
|
526
563
|
.vjs-mouse-display,
|
|
@@ -547,7 +584,7 @@
|
|
|
547
584
|
margin: 0;
|
|
548
585
|
padding: 0;
|
|
549
586
|
position: absolute;
|
|
550
|
-
right: -
|
|
587
|
+
right: -16px;
|
|
551
588
|
top: 50%;
|
|
552
589
|
width: 16px;
|
|
553
590
|
-webkit-transform: translate(-50%, -50%);
|