dso-toolkit 96.0.0 → 97.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/dso.css +6 -592
  3. package/dist/dso.css.map +1 -1
  4. package/dist/dso.min.css +1 -1
  5. package/dist/dso.min.css.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/heading/heading.mixins.scss +1 -0
  8. package/src/components/rich-content/rich-content.scss +3 -0
  9. package/src/dso.scss +0 -1
  10. package/src/components/banner/_index.scss +0 -2
  11. package/src/components/banner/banner.mixins.scss +0 -118
  12. package/src/components/banner/banner.scss +0 -175
  13. package/src/components/banner/banner.variables.scss +0 -22
package/src/components/banner/banner.scss DELETED
@@ -1,175 +0,0 @@
1
- @use "../../variables/colors";
2
- @use "../../variables/media-query-breakpoints";
3
- @use "../../variables/units";
4
-
5
- @use "../../di";
6
-
7
- @use "banner.mixins" as banner-mixins;
8
- @use "banner.variables" as banner-variables;
9
-
10
- // HTML/CSS
11
- .dso-banner {
12
- @include banner-mixins.root();
13
- @include banner-mixins.children();
14
-
15
- .dso-banner-inner {
16
- margin-inline: auto;
17
-
18
- @media (min-width: media-query-breakpoints.$screen-sm-min) {
19
- inline-size: banner-variables.$banner-sm;
20
- }
21
-
22
- @media (min-width: media-query-breakpoints.$screen-md-min) {
23
- inline-size: banner-variables.$banner-md;
24
- }
25
-
26
- @media (min-width: media-query-breakpoints.$screen-lg-min) {
27
- inline-size: banner-variables.$banner-lg;
28
- }
29
- }
30
-
31
- .dso-banner-inner::before {
32
- content: "";
33
- display: inline-block;
34
- inset-inline-start: units.$u2;
35
- position: absolute;
36
- inset-block-start: 0;
37
- }
38
-
39
- &.dso-icon {
40
- .dso-banner-inner {
41
- @media screen and (min-width: #{media-query-breakpoints.$screen-xs-min}) {
42
- padding-inline-start: banner-variables.$inline-start-padding;
43
- }
44
-
45
- @media screen and (max-width: #{media-query-breakpoints.$screen-xs-min - 0.99}) {
46
- padding-block-start: banner-variables.$small-padding-block-start;
47
-
48
- > .dso-rich-content {
49
- padding-inline-end: 0;
50
- }
51
- }
52
- }
53
- }
54
-
55
- &.alert-success {
56
- @include banner-mixins.success();
57
-
58
- &.dso-icon {
59
- @include banner-mixins.with-icon("success");
60
- }
61
- }
62
-
63
- &.alert-error {
64
- @include banner-mixins.error();
65
-
66
- &.dso-icon {
67
- @include banner-mixins.with-icon("error");
68
- }
69
- }
70
-
71
- &.alert-info {
72
- @include banner-mixins.info();
73
-
74
- &.dso-icon {
75
- @include banner-mixins.with-icon("info-solid");
76
- }
77
- }
78
-
79
- &.alert-warning {
80
- @include banner-mixins.warning();
81
-
82
- &.dso-icon {
83
- @include banner-mixins.with-icon("warning");
84
- }
85
- }
86
-
87
- a {
88
- &.download {
89
- @include di.variant("download-grijs90");
90
- }
91
-
92
- &.extern {
93
- @include di.variant("external-link-grijs90");
94
- }
95
- }
96
- }
97
-
98
- // Web Component
99
- dso-banner {
100
- @include banner-mixins.children();
101
-
102
- .dso-banner-inner {
103
- margin-inline: auto;
104
-
105
- @media (min-width: media-query-breakpoints.$screen-sm-min) {
106
- inline-size: banner-variables.$banner-sm;
107
- }
108
-
109
- @media (min-width: media-query-breakpoints.$screen-md-min) {
110
- inline-size: banner-variables.$banner-md;
111
- }
112
-
113
- @media (min-width: media-query-breakpoints.$screen-lg-min) {
114
- inline-size: banner-variables.$banner-lg;
115
- }
116
- }
117
-
118
- .dso-banner-inner::before {
119
- content: "";
120
-
121
- position: absolute;
122
- inset-inline-start: units.$u2;
123
- inset-block-start: 0;
124
-
125
- display: inline-block;
126
- }
127
-
128
- &[icon] {
129
- .dso-banner-inner {
130
- @media screen and (min-width: #{media-query-breakpoints.$screen-xs-min}) {
131
- padding-inline-start: banner-variables.$inline-start-padding;
132
- }
133
-
134
- @media screen and (max-width: #{media-query-breakpoints.$screen-xs-min - 0.99}) {
135
- padding-block-start: banner-variables.$small-padding-block-start;
136
-
137
- > .dso-rich-content {
138
- padding-inline-end: 0;
139
- }
140
- }
141
- }
142
- }
143
-
144
- &[status="success"] {
145
- @include banner-mixins.success();
146
-
147
- &[icon] {
148
- @include banner-mixins.with-icon("success");
149
- }
150
- }
151
-
152
- &[status="error"] {
153
- @include banner-mixins.error();
154
-
155
- &[icon] {
156
- @include banner-mixins.with-icon("error");
157
- }
158
- }
159
-
160
- &[status="info"] {
161
- @include banner-mixins.info();
162
-
163
- &[icon] {
164
- @include banner-mixins.with-icon("info-solid");
165
- }
166
- }
167
-
168
- &[status="warning"] {
169
- @include banner-mixins.warning();
170
-
171
- &[icon] {
172
- @include banner-mixins.with-icon("warning");
173
- }
174
- }
175
- }
package/src/components/banner/banner.variables.scss DELETED
@@ -1,22 +0,0 @@
1
- @use "../../variables/units";
2
- @use "../../variables/states";
3
-
4
- $inline-start-padding: units.$u6;
5
-
6
- $small-padding-block-start: units.$u5 - 1px;
7
-
8
- $warning-bg: states.$warning-bg;
9
- $warning-border: states.$warning-border;
10
-
11
- $error-bg: states.$error-bg;
12
- $error-border: states.$error-border;
13
-
14
- $success-bg: states.$success-bg;
15
- $success-border: states.$success-border;
16
-
17
- $info-bg: states.$info-bg;
18
- $info-border: states.$info-border;
19
-
20
- $banner-sm: auto; // Small screen / tablet
21
- $banner-md: 922px; // Medium screen / desktop
22
- $banner-lg: 1152px; // Large screen / wide desktop