dso-toolkit 89.0.0 → 90.0.0
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/CHANGELOG.md +27 -0
- package/dist/di.svg +240 -219
- package/dist/dso.css +84 -606
- package/dist/dso.css.map +1 -1
- package/dist/dso.min.css +1 -1
- package/dist/dso.min.css.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +1 -1
- package/src/components/alert/alert.scss +2 -2
- package/src/components/banner/banner.scss +2 -2
- package/src/components/button/button.mixins.scss +15 -5
- package/src/components/button/button.scss +2 -2
- package/src/components/description/description.scss +1 -1
- package/src/components/form-group/files/form-group-files.scss +2 -4
- package/src/components/info/info.scss +1 -1
- package/src/components/info-button/info-button.scss +4 -4
- package/src/components/link/link.mixins.scss +3 -8
- package/src/components/link/link.variables.scss +1 -1
- package/src/components/modal/modal.scss +1 -1
- package/src/components/search-bar/search-bar.scss +1 -1
- package/src/dso.scss +0 -1
- package/src/components/label/_index.scss +0 -2
- package/src/components/label/label.mixins.scss +0 -73
- package/src/components/label/label.scss +0 -61
- package/src/components/label/label.variables.scss +0 -34
package/src/dso.scss
CHANGED
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
@use "components/input/input";
|
|
52
52
|
@use "components/insert/insert";
|
|
53
53
|
@use "components/justify-form-groups/justify-form-groups";
|
|
54
|
-
@use "components/label/label";
|
|
55
54
|
@use "components/label-group/label-group";
|
|
56
55
|
@use "components/link/link";
|
|
57
56
|
@use "components/link-list/link-list";
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
@use "../../variables/units";
|
|
2
|
-
@use "../../variables/colors";
|
|
3
|
-
@use "../../variables/typography";
|
|
4
|
-
@use "label.variables" as label-variables;
|
|
5
|
-
@use "../../global/mixins/set-colors.mixin" as set-colors;
|
|
6
|
-
@use "../delete";
|
|
7
|
-
@use "../insert";
|
|
8
|
-
|
|
9
|
-
@mixin root() {
|
|
10
|
-
border-radius: 4px;
|
|
11
|
-
display: inline-block;
|
|
12
|
-
line-height: 1.5;
|
|
13
|
-
max-inline-size: 100%;
|
|
14
|
-
padding-block: #{units.$u1 * 0.5};
|
|
15
|
-
padding-inline: units.$u1;
|
|
16
|
-
|
|
17
|
-
&:focus-within,
|
|
18
|
-
&.dso-hover {
|
|
19
|
-
text-decoration: line-through;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@include set-colors.apply(label-variables.$default-bg-color, "label");
|
|
23
|
-
|
|
24
|
-
&.dso-label-info {
|
|
25
|
-
@include set-colors.apply(label-variables.$info-bg-color, "label");
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&.dso-label-primary {
|
|
29
|
-
@include set-colors.apply(label-variables.$primary-bg-color, "label");
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&.dso-label-success {
|
|
33
|
-
@include set-colors.apply(label-variables.$success-bg-color, "label");
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
&.dso-label-warning {
|
|
37
|
-
@include set-colors.apply(label-variables.$warning-bg-color, "label");
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&.dso-label-error {
|
|
41
|
-
@include set-colors.apply(label-variables.$error-bg-color, "label");
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&.dso-label-bright {
|
|
45
|
-
@include set-colors.apply(label-variables.$bright-bg-color, "label");
|
|
46
|
-
|
|
47
|
-
outline: 1px solid label-variables.$bright-border-color;
|
|
48
|
-
outline-offset: -1px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&.dso-label-attention {
|
|
52
|
-
@include set-colors.apply(label-variables.$attention-bg-color, "label");
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&.dso-label-filter {
|
|
56
|
-
@include set-colors.apply(label-variables.$filter-bg-color, "label");
|
|
57
|
-
|
|
58
|
-
border-inline-start: 5px solid label-variables.$filter-border-color;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
&.dso-label-toegevoegd {
|
|
62
|
-
@include insert.root();
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
&.dso-label-verwijderd {
|
|
66
|
-
@include delete.root();
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
&.dso-compact {
|
|
70
|
-
padding-block: 0;
|
|
71
|
-
padding-inline: units.$u1;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
@use "../label";
|
|
2
|
-
@use "label.variables" as label-variables;
|
|
3
|
-
@use "../../global/mixins/symbol.mixins" as symbol-mixins;
|
|
4
|
-
@use "../../variables/units";
|
|
5
|
-
@use "../../variables/typography";
|
|
6
|
-
|
|
7
|
-
// HTML/CSS
|
|
8
|
-
.dso-label {
|
|
9
|
-
@include label.root();
|
|
10
|
-
|
|
11
|
-
.dso-label-symbol {
|
|
12
|
-
@include symbol-mixins.symbolContainer(
|
|
13
|
-
label-variables.$symbol-block-size,
|
|
14
|
-
label-variables.$symbol-block-size * label-variables.$symbol-aspect-ratio,
|
|
15
|
-
2px
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
> span {
|
|
19
|
-
@include symbol-mixins.symbol();
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
button {
|
|
24
|
-
line-height: 0;
|
|
25
|
-
background: none;
|
|
26
|
-
border: 0;
|
|
27
|
-
border-radius: 0 #{units.$u1 * 0.5} #{units.$u1 * 0.5} 0;
|
|
28
|
-
color: inherit;
|
|
29
|
-
float: inline-end;
|
|
30
|
-
|
|
31
|
-
font-size: typography.$root-font-size-base;
|
|
32
|
-
margin-block-end: units.$u1 * -0.5;
|
|
33
|
-
margin-inline-start: units.$u1;
|
|
34
|
-
margin-inline-end: units.$u1 * -0.5;
|
|
35
|
-
margin-block-start: 0;
|
|
36
|
-
padding: 0;
|
|
37
|
-
|
|
38
|
-
&:hover {
|
|
39
|
-
cursor: pointer;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
> dso-icon {
|
|
43
|
-
display: block;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// Web Component
|
|
49
|
-
dso-label {
|
|
50
|
-
span[slot="symbol"] {
|
|
51
|
-
@include symbol-mixins.symbolContainer(
|
|
52
|
-
label-variables.$symbol-block-size,
|
|
53
|
-
label-variables.$symbol-block-size * label-variables.$symbol-aspect-ratio,
|
|
54
|
-
2px
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
> span {
|
|
58
|
-
@include symbol-mixins.symbol();
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
@use "sass:math";
|
|
2
|
-
|
|
3
|
-
@use "../../variables/colors";
|
|
4
|
-
|
|
5
|
-
$default-bg-color: colors.$grijs-5;
|
|
6
|
-
$default-color: colors.$grijs-90;
|
|
7
|
-
|
|
8
|
-
$info-bg-color: colors.$info-color;
|
|
9
|
-
$info-color: colors.$zwart;
|
|
10
|
-
|
|
11
|
-
$primary-bg-color: colors.$bosgroen;
|
|
12
|
-
$primary-color: colors.$wit;
|
|
13
|
-
|
|
14
|
-
$success-bg-color: colors.$success-color;
|
|
15
|
-
$success-color: colors.$wit;
|
|
16
|
-
|
|
17
|
-
$warning-bg-color: colors.$warning-color;
|
|
18
|
-
$warning-color: colors.$zwart;
|
|
19
|
-
|
|
20
|
-
$error-bg-color: colors.$error-color;
|
|
21
|
-
$error-color: colors.$wit;
|
|
22
|
-
|
|
23
|
-
$bright-bg-color: colors.$wit;
|
|
24
|
-
$bright-color: colors.$grijs-90;
|
|
25
|
-
$bright-border-color: colors.$grijs-20;
|
|
26
|
-
|
|
27
|
-
$attention-bg-color: colors.$mauve;
|
|
28
|
-
$attention-color: colors.$wit;
|
|
29
|
-
|
|
30
|
-
$filter-bg-color: colors.$lichtblauw-20;
|
|
31
|
-
$filter-border-color: colors.$lichtblauw;
|
|
32
|
-
|
|
33
|
-
$symbol-block-size: 20px;
|
|
34
|
-
$symbol-aspect-ratio: math.div(30, 25);
|