@ostack.tech/ui-kform 0.10.5 → 0.11.1

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 (41) hide show
  1. package/dist/chunks/{en-B9UXLueo.js → en-3JcwFYXc.js} +3 -3
  2. package/dist/chunks/{en-B9UXLueo.js.map → en-3JcwFYXc.js.map} +1 -1
  3. package/dist/locales/en-GB.js +1 -1
  4. package/dist/locales/en-US.js +1 -1
  5. package/dist/locales/fr-FR.js +2 -2
  6. package/dist/locales/fr-FR.js.map +1 -1
  7. package/dist/locales/pt-PT.js +2 -2
  8. package/dist/locales/pt-PT.js.map +1 -1
  9. package/dist/ostack-ui-kform.css +15 -36
  10. package/dist/ostack-ui-kform.js +97 -54
  11. package/dist/ostack-ui-kform.js.map +1 -1
  12. package/dist/types/components/Annexes/Annex.d.ts +3 -3
  13. package/dist/types/components/FormApp/FormApp.d.ts +8 -8
  14. package/dist/types/components/FormPages/FormPage.d.ts +3 -3
  15. package/dist/types/components/FormStepper/FormStep.d.ts +43 -6
  16. package/dist/types/components/FormStepper/FormStepButton.d.ts +8 -0
  17. package/dist/types/components/FormStepper/FormStepList.d.ts +1 -1
  18. package/dist/types/components/FormStepper/FormStepper.d.ts +1 -1
  19. package/dist/types/components/FormStepper/FormStepperFinishTrigger.d.ts +2 -0
  20. package/dist/types/components/FormStepper/FormStepperNextTrigger.d.ts +2 -0
  21. package/dist/types/components/FormStepper/FormStepperPreviousTrigger.d.ts +2 -0
  22. package/dist/types/components/FormStepper/FormStepperState.d.ts +3 -0
  23. package/dist/types/components/FormStepper/index.d.ts +4 -1
  24. package/dist/types/components/TableControl/TableControlAddRowTrigger.d.ts +24 -10
  25. package/dist/types/components/TableControl/TableControlRemoveRowTrigger.d.ts +21 -11
  26. package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts +3 -3
  27. package/package.json +2 -2
  28. package/scss/_utils.scss +1 -0
  29. package/scss/components/Annexes/_Annexes-variables.scss +2 -3
  30. package/scss/components/Annexes/_Annexes.scss +55 -56
  31. package/scss/components/FileControl/_FileControl.scss +7 -10
  32. package/scss/components/FormApp/_FormApp-variables.scss +9 -0
  33. package/scss/components/FormApp/_FormApp.scss +19 -38
  34. package/scss/components/FormPages/_FormPages-variables.scss +18 -22
  35. package/scss/components/FormPages/_FormPages.scss +73 -62
  36. package/scss/components/IssueMessages/_IssueMessages.scss +1 -1
  37. package/scss/components/IssuesPanel/_IssuesPanel-variables.scss +32 -34
  38. package/scss/components/IssuesPanel/_IssuesPanel.scss +9 -10
  39. package/scss/components/TopBar/_TopBar.scss +15 -14
  40. package/scss/scss/_base-variables.scss +2 -2
  41. package/dist/types/components/FormStepper/FormStepContent.d.ts +0 -20
package/scss/components/FormApp/_FormApp.scss CHANGED
@@ -1,67 +1,48 @@
1
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
1
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
2
2
  @use "@ostack.tech/ui/scss/components/Spinner/Spinner";
3
+ @use "FormApp-variables" as *;
3
4
  @use "../../scss/base-variables" as *;
4
5
 
5
6
  .#{$prefix}form-app {
6
- $overlay: ".#{ostack-ui.$prefix}overlay";
7
-
8
- $default-min-height: 100dvh;
9
-
10
7
  position: relative;
11
8
  min-height: var(--#{$prefix}form-app-min-height);
12
- margin-bottom: 0; // Remove default `form` margin
13
- background-color: var(--#{ostack-ui.$prefix}background-color);
9
+ margin-bottom: 0; // Remove default `<form>` margin
10
+ background-color: $form-app-background-color;
11
+
12
+ // Base `top` value for top-sticky elements
13
+ @include o-ui.declare-var(
14
+ --#{$prefix}form-app-base-sticky-top,
15
+ $form-app-base-sticky-top
16
+ );
14
17
 
15
- @include ostack-ui.responsive-values(
18
+ @include o-ui.responsive-values(
16
19
  --#{$prefix}form-app,
17
20
  (
18
- min-height: $default-min-height,
21
+ min-height: $form-app-default-min-height,
19
22
  )
20
23
  );
21
24
 
22
- // Focus style around form
23
- &:focus-visible {
24
- outline: none;
25
- }
26
-
27
- &::after {
28
- content: "";
29
- position: absolute;
30
- pointer-events: none;
31
- z-index: ostack-ui.$z-index-overlay;
32
-
33
- @include ostack-ui.accessible-transition(outline-color);
34
- }
35
-
36
- &:focus-visible::after {
37
- top: 0;
38
- left: 0;
39
- width: 100%;
40
- height: 100%;
41
- outline: 2px solid ostack-ui.$primary-8;
42
- outline-offset: -3px;
43
- }
44
-
45
25
  // When the form app is within an overlay (e.g. being rendered as a dialog),
46
26
  // we default the min-height to auto
47
- #{$overlay} & {
48
- @include ostack-ui.declare-var(--#{$prefix}form-app-min-height, auto);
27
+ .#{o-ui.$prefix}overlay & {
28
+ @include o-ui.declare-var(--#{$prefix}form-app-min-height, auto);
49
29
  }
50
30
 
31
+ // TODO: move this to ostack/UI somehow: .o-ui-app-spinner
51
32
  // Manually set this class on the form app's container to display a spinner
52
33
  // while the app is loading
53
34
  &__container:empty {
54
35
  display: flex;
55
36
  align-items: center;
56
37
  justify-content: center;
57
- padding: ostack-ui.spacing(30) ostack-ui.spacing(10);
38
+ padding: o-ui.spacing(30) o-ui.spacing(10);
58
39
 
59
40
  &::after {
60
41
  content: "";
61
- color: ostack-ui.$primary-9;
62
- font-size: ostack-ui.$font-size-6xl;
42
+ color: o-ui.$primary-9;
43
+ font-size: o-ui.$font-size-6xl;
63
44
 
64
- @include ostack-ui.spinner;
45
+ @include o-ui.spinner;
65
46
  }
66
47
  }
67
48
  }
package/scss/components/FormPages/_FormPages-variables.scss CHANGED
@@ -1,37 +1,33 @@
1
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
1
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
2
2
 
3
3
  // Sidebar
4
4
  $form-pages-sidebar-width: 220px !default;
5
5
  $form-pages-sidebar-width-xl: 300px !default;
6
6
  $form-pages-sidebar-border-radius: null !default;
7
- $form-pages-sidebar-background-color: var(
8
- --#{ostack-ui.$prefix}primary-a3
9
- ) !default;
7
+ $form-pages-sidebar-background-color: var(--#{o-ui.$prefix}primary-a3) !default;
10
8
  $form-pages-sidebar-border-width: 1px !default;
11
- $form-pages-sidebar-border-color: var(--#{ostack-ui.$prefix}primary-4) !default;
9
+ $form-pages-sidebar-border-color: var(--#{o-ui.$prefix}primary-4) !default;
12
10
  $form-pages-sidebar-z-index: calc(
13
- var(--#{ostack-ui.$prefix}z-index-sticky) + 1
11
+ var(--#{o-ui.$prefix}z-index-sticky) + 1
14
12
  ) !default;
15
13
 
16
14
  // Sidebar item code
17
15
  $form-pages-sidebar-item-code-min-size: 20px;
18
- $form-pages-sidebar-item-code-margin-x: ostack-ui.spacing(2) !default;
19
- $form-pages-sidebar-item-code-padding: ostack-ui.spacing(0.5) !default;
20
- $form-pages-sidebar-item-code-padding: ostack-ui.spacing(0.5) !default;
21
- $form-pages-sidebar-item-code-border-radius: ostack-ui.$control-code-border-radius !default;
16
+ $form-pages-sidebar-item-code-margin-x: o-ui.spacing(2) !default;
17
+ $form-pages-sidebar-item-code-padding: o-ui.spacing(0.5) !default;
18
+ $form-pages-sidebar-item-code-padding: o-ui.spacing(0.5) !default;
19
+ $form-pages-sidebar-item-code-border-radius: o-ui.$control-code-border-radius !default;
22
20
  $form-pages-sidebar-item-code-font-size: var(
23
- --#{ostack-ui.$prefix}font-size-xs
21
+ --#{o-ui.$prefix}font-size-xs
24
22
  ) !default;
25
23
  $form-pages-sidebar-item-code-line-height: var(
26
- --#{ostack-ui.$prefix}line-height-xs
24
+ --#{o-ui.$prefix}line-height-xs
27
25
  ) !default;
28
- $form-pages-sidebar-item-code-font-weight: ostack-ui.$font-weight-bold !default;
26
+ $form-pages-sidebar-item-code-font-weight: o-ui.$font-weight-bold !default;
29
27
  $form-pages-sidebar-item-code-background-color: var(
30
- --#{ostack-ui.$prefix}primary-2
31
- ) !default;
32
- $form-pages-sidebar-item-code-color: var(
33
- --#{ostack-ui.$prefix}primary-9
28
+ --#{o-ui.$prefix}primary-2
34
29
  ) !default;
30
+ $form-pages-sidebar-item-code-color: var(--#{o-ui.$prefix}primary-9) !default;
35
31
 
36
32
  // Sidebar item code - Selected
37
33
  $form-pages-sidebar-item-code-selected-background-color: rgba(
@@ -41,22 +37,22 @@ $form-pages-sidebar-item-code-selected-background-color: rgba(
41
37
  0.25
42
38
  ) !default;
43
39
  $form-pages-sidebar-item-code-selected-color: var(
44
- --#{ostack-ui.$prefix}primary-contrast
40
+ --#{o-ui.$prefix}primary-contrast
45
41
  ) !default;
46
42
 
47
43
  // Sidebar item code - Status
48
44
  $form-pages-sidebar-item-code-status-background-color: var(
49
- --#{ostack-ui.$prefix}accent-9
45
+ --#{o-ui.$prefix}accent-9
50
46
  ) !default;
51
47
  $form-pages-sidebar-item-code-status-color: var(
52
- --#{ostack-ui.$prefix}accent-contrast
48
+ --#{o-ui.$prefix}accent-contrast
53
49
  ) !default;
54
50
 
55
51
  // Select
56
52
  $form-pages-select-z-index: calc(
57
- var(--#{ostack-ui.$prefix}z-index-sticky) + 2
53
+ var(--#{o-ui.$prefix}z-index-sticky) + 2
58
54
  ) !default;
59
55
  $form-pages-select-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !default;
60
56
  $form-pages-select-menu-background-color: var(
61
- --#{ostack-ui.$prefix}primary-2
57
+ --#{o-ui.$prefix}primary-2
62
58
  ) !default;
package/scss/components/FormPages/_FormPages.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "sass:color";
2
2
  @use "sass:map";
3
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
3
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
4
4
  @use "FormPages-variables" as *;
5
5
  @use "../../scss/base-variables" as *;
6
6
 
@@ -27,14 +27,17 @@
27
27
  border-right: $form-pages-sidebar-border-width solid
28
28
  $form-pages-sidebar-border-color;
29
29
 
30
- @include ostack-ui.media-breakpoint-up(xl) {
30
+ @include o-ui.media-breakpoint-up(xl) {
31
31
  width: $form-pages-sidebar-width-xl;
32
32
  }
33
33
  }
34
34
 
35
35
  &__sidebar {
36
36
  position: sticky;
37
- top: var(--#{$prefix}top-bar-height);
37
+ top: calc(
38
+ var(--#{$prefix}form-app-base-sticky-top, 0px) +
39
+ var(--#{$prefix}top-bar-height)
40
+ );
38
41
  z-index: $form-pages-sidebar-z-index;
39
42
 
40
43
  max-height: calc(100dvh - var(--#{$prefix}top-bar-height));
@@ -63,7 +66,7 @@
63
66
  background-color: $form-pages-sidebar-item-code-background-color;
64
67
  color: $form-pages-sidebar-item-code-color;
65
68
 
66
- @include ostack-ui.accessible-transition();
69
+ @include o-ui.accessible-transition();
67
70
 
68
71
  &[data-selected] {
69
72
  background-color: $form-pages-sidebar-item-code-selected-background-color;
@@ -83,7 +86,10 @@
83
86
 
84
87
  &__navigation[data-navigation-mode="select"] {
85
88
  position: sticky;
86
- top: var(--#{$prefix}top-bar-height);
89
+ top: calc(
90
+ var(--#{$prefix}form-app-base-sticky-top, 0px) +
91
+ var(--#{$prefix}top-bar-height)
92
+ );
87
93
  z-index: $form-pages-select-z-index;
88
94
  box-shadow: $form-pages-select-box-shadow;
89
95
  }
@@ -91,25 +97,25 @@
91
97
  &__select-container[data-variant="default"] {
92
98
  border-radius: 0;
93
99
  border: 0;
94
- background-color: var(--#{ostack-ui.$prefix}primary-9);
100
+ background-color: var(--#{o-ui.$prefix}primary-9);
95
101
  background-image: none;
96
102
 
97
103
  &[data-focused] {
98
- box-shadow: inset 0 0 0 2px var(--#{ostack-ui.$prefix}neutral-a12);
104
+ box-shadow: inset 0 0 0 2px var(--#{o-ui.$prefix}neutral-a12);
99
105
  }
100
106
  }
101
107
 
102
108
  &__select[data-variant="default"] {
103
- padding-top: calc(ostack-ui.spacing(2) - 2px);
104
- padding-bottom: ostack-ui.spacing(2);
109
+ padding-top: calc(o-ui.spacing(2) - 2px);
110
+ padding-bottom: o-ui.spacing(2);
105
111
  height: auto;
106
112
  border-radius: 0 !important;
107
113
 
108
- font-weight: ostack-ui.$font-weight-bold;
109
- font-size: ostack-ui.$font-size-md;
110
- color: var(--#{ostack-ui.$prefix}background-color);
114
+ font-weight: o-ui.$font-weight-bold;
115
+ font-size: o-ui.$font-size-md;
116
+ color: var(--#{o-ui.$prefix}background-color);
111
117
 
112
- @include ostack-ui.accessible-transition();
118
+ @include o-ui.accessible-transition();
113
119
  }
114
120
 
115
121
  &__select-value > span,
@@ -120,7 +126,7 @@
120
126
 
121
127
  &__select-popover {
122
128
  min-width: 0;
123
- width: calc(100dvw - ostack-ui.spacing(1));
129
+ width: calc(100dvw - o-ui.spacing(1));
124
130
  }
125
131
 
126
132
  &__select-option-code {
@@ -131,32 +137,32 @@
131
137
  justify-content: center;
132
138
  min-width: $code-size;
133
139
  min-height: $code-size;
134
- margin-right: ostack-ui.spacing(3);
135
- padding: ostack-ui.spacing(0.5) ostack-ui.spacing(1);
136
- border-radius: ostack-ui.$control-code-border-radius;
140
+ margin-right: o-ui.spacing(3);
141
+ padding: o-ui.spacing(0.5) o-ui.spacing(1);
142
+ border-radius: o-ui.$control-code-border-radius;
137
143
 
138
- font-size: var(--#{ostack-ui.$prefix}font-size-sm);
139
- line-height: var(--#{ostack-ui.$prefix}line-height-sm);
140
- font-weight: ostack-ui.$font-weight-bold;
144
+ font-size: var(--#{o-ui.$prefix}font-size-sm);
145
+ line-height: var(--#{o-ui.$prefix}line-height-sm);
146
+ font-weight: o-ui.$font-weight-bold;
141
147
  background-color: rgba(255, 255, 255, 0.6);
142
- color: var(--#{ostack-ui.$prefix}primary-9);
148
+ color: var(--#{o-ui.$prefix}primary-9);
143
149
 
144
- @include ostack-ui.accessible-transition();
150
+ @include o-ui.accessible-transition();
145
151
 
146
152
  #{$form-pages}__select-value &,
147
153
  #{$form-pages}__select-option[data-state="checked"] &:not([data-status]) {
148
154
  background-color: rgba(255, 255, 255, 0.25);
149
- color: var(--#{ostack-ui.$prefix}background-color);
155
+ color: var(--#{o-ui.$prefix}background-color);
150
156
  }
151
157
 
152
158
  &[data-status] {
153
- background-color: var(--#{ostack-ui.$prefix}accent-9);
154
- color: var(--#{ostack-ui.$prefix}accent-contrast);
159
+ background-color: var(--#{o-ui.$prefix}accent-9);
160
+ color: var(--#{o-ui.$prefix}accent-contrast);
155
161
  }
156
162
  }
157
163
 
158
164
  &__select-arrow {
159
- color: var(--#{ostack-ui.$prefix}background-color);
165
+ color: var(--#{o-ui.$prefix}background-color);
160
166
  }
161
167
 
162
168
  &__page {
@@ -169,7 +175,7 @@
169
175
  --#{$prefix}bottom-panel-height
170
176
  )
171
177
  );
172
- background-color: var(--#{ostack-ui.$prefix}background-color);
178
+ background-color: var(--#{o-ui.$prefix}background-color);
173
179
 
174
180
  @media print {
175
181
  min-height: 0;
@@ -178,23 +184,26 @@
178
184
 
179
185
  &__page-header {
180
186
  position: sticky;
181
- top: var(--#{$prefix}top-bar-height);
182
- z-index: ostack-ui.$z-index-sticky + 1;
187
+ top: calc(
188
+ var(--#{$prefix}form-app-base-sticky-top, 0px) +
189
+ var(--#{$prefix}top-bar-height)
190
+ );
191
+ z-index: o-ui.$z-index-sticky + 1;
183
192
 
184
193
  display: flex;
185
194
  align-items: center;
186
- padding: ostack-ui.spacing(2) ostack-ui.spacing(4);
187
- border-bottom: 1px solid var(--#{ostack-ui.$prefix}primary-3);
188
- background-color: var(--#{ostack-ui.$prefix}background-color);
195
+ padding: o-ui.spacing(2) o-ui.spacing(4);
196
+ border-bottom: 1px solid var(--#{o-ui.$prefix}primary-3);
197
+ background-color: var(--#{o-ui.$prefix}background-color);
189
198
  }
190
199
 
191
200
  // Hide page header in small screens when navigation is present
192
- @include ostack-ui.media-breakpoint-down(sm) {
201
+ @include o-ui.media-breakpoint-down(sm) {
193
202
  &__navigation + &__page {
194
203
  & > #{$form-pages}__page-header {
195
204
  background-color: transparent;
196
- padding-left: ostack-ui.spacing(2.5);
197
- padding-right: ostack-ui.spacing(2.5);
205
+ padding-left: o-ui.spacing(2.5);
206
+ padding-right: o-ui.spacing(2.5);
198
207
  overflow: hidden;
199
208
 
200
209
  &:not([data-has-popovers]) {
@@ -223,71 +232,73 @@
223
232
  justify-content: center;
224
233
  min-height: $code-size;
225
234
  min-width: $code-size;
226
- margin-right: ostack-ui.spacing(2);
227
- border-radius: ostack-ui.$control-code-border-radius;
228
- padding: ostack-ui.spacing(0.5) ostack-ui.spacing(1);
235
+ margin-right: o-ui.spacing(2);
236
+ border-radius: o-ui.$control-code-border-radius;
237
+ padding: o-ui.spacing(0.5) o-ui.spacing(1);
229
238
 
230
- background-color: var(--#{ostack-ui.$prefix}primary-3);
231
- color: var(--#{ostack-ui.$prefix}primary-9);
232
- font-size: ostack-ui.$font-size-sm;
233
- line-height: ostack-ui.$line-height-sm;
234
- font-weight: ostack-ui.$font-weight-bold;
239
+ background-color: var(--#{o-ui.$prefix}primary-3);
240
+ color: var(--#{o-ui.$prefix}primary-9);
241
+ font-size: o-ui.$font-size-sm;
242
+ line-height: o-ui.$line-height-sm;
243
+ font-weight: o-ui.$font-weight-bold;
235
244
 
236
- @include ostack-ui.accessible-transition();
245
+ @include o-ui.accessible-transition();
237
246
 
238
247
  &[data-status] {
239
- background-color: var(--#{ostack-ui.$prefix}accent-9);
240
- color: var(--#{ostack-ui.$prefix}accent-contrast);
248
+ background-color: var(--#{o-ui.$prefix}accent-9);
249
+ color: var(--#{o-ui.$prefix}accent-contrast);
241
250
  }
242
251
  }
243
252
 
244
253
  &__page-title {
245
254
  margin: 0;
246
- color: var(--#{ostack-ui.$prefix}primary-9);
247
- font-size: ostack-ui.$font-size-md;
248
- line-height: ostack-ui.$line-height-md;
249
- font-weight: ostack-ui.$font-weight-bold;
255
+ color: var(--#{o-ui.$prefix}primary-9);
256
+ font-size: o-ui.$font-size-md;
257
+ line-height: o-ui.$line-height-md;
258
+ font-weight: o-ui.$font-weight-bold;
250
259
  break-after: avoid;
251
260
 
252
261
  &:not(:last-child) {
253
- margin-right: ostack-ui.spacing(4);
262
+ margin-right: o-ui.spacing(4);
254
263
  }
255
264
  }
256
265
 
257
266
  &__page-header-popovers {
258
267
  margin-left: auto;
259
- margin-right: ostack-ui.spacing(-0.5);
268
+ margin-right: o-ui.spacing(-0.5);
260
269
  }
261
270
 
262
271
  &__page-helper-button,
263
272
  &__page-issues-popover-button {
264
- margin-top: ostack-ui.spacing(-3) !important;
265
- margin-bottom: ostack-ui.spacing(-3) !important;
266
- margin-right: ostack-ui.spacing(-1.5) !important;
273
+ margin-top: o-ui.spacing(-3) !important;
274
+ margin-bottom: o-ui.spacing(-3) !important;
275
+ margin-right: o-ui.spacing(-1.5) !important;
267
276
  }
268
277
 
269
278
  &__page-helper-popover {
270
279
  max-width: min(
271
- #{ostack-ui.$container-md-max-width},
280
+ #{o-ui.$container-md-max-width},
272
281
  var(--radix-popover-content-available-width)
273
282
  );
274
283
  max-height: min(600px, var(--radix-popover-content-available-height));
275
- padding: ostack-ui.spacing(1) ostack-ui.spacing(2);
284
+ padding: o-ui.$label-helper-popover-padding-y
285
+ o-ui.$label-helper-popover-padding-x;
276
286
  }
277
287
 
278
288
  &__page-content {
279
289
  position: sticky;
280
290
  top: calc(
281
- var(--#{$prefix}top-bar-height) +
291
+ var(--#{$prefix}form-app-base-sticky-top, 0px) +
292
+ var(--#{$prefix}top-bar-height) +
282
293
  var(--#{$prefix}form-pages-page-header-height)
283
294
  );
284
- z-index: ostack-ui.$z-index-sticky;
295
+ z-index: o-ui.$z-index-sticky;
285
296
 
286
- padding: ostack-ui.spacing(4);
297
+ padding: o-ui.spacing(4);
287
298
 
288
- @include ostack-ui.media-breakpoint-up(sm) {
299
+ @include o-ui.media-breakpoint-up(sm) {
289
300
  padding-bottom: calc(
290
- var(--#{$prefix}bottom-panel-height, 0px) + ostack-ui.spacing(4)
301
+ var(--#{$prefix}bottom-panel-height, 0px) + o-ui.spacing(4)
291
302
  );
292
303
  margin-bottom: calc(var(--#{$prefix}bottom-panel-height) * -1);
293
304
  }
package/scss/components/IssueMessages/_IssueMessages.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
1
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
2
2
  @use "../../scss/base-variables" as *;
3
3
 
4
4
  .#{$prefix}issue-messages {
package/scss/components/IssuesPanel/_IssuesPanel-variables.scss CHANGED
@@ -1,12 +1,12 @@
1
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
1
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
2
2
 
3
- $issues-panel-margin-x: ostack-ui.spacing(4) !default;
4
- $issues-panel-padding-y: ostack-ui.spacing(3) !default;
5
- $issues-panel-padding-x: ostack-ui.spacing(4) !default;
6
- $issues-panel-z-index: ostack-ui.$z-index-sticky + 1 !default;
3
+ $issues-panel-margin-x: o-ui.spacing(4) !default;
4
+ $issues-panel-padding-y: o-ui.spacing(3) !default;
5
+ $issues-panel-padding-x: o-ui.spacing(4) !default;
6
+ $issues-panel-z-index: o-ui.$z-index-sticky + 1 !default;
7
7
 
8
- $issues-panel-border-radius: ostack-ui.$card-border-radius
9
- ostack-ui.$card-border-radius 0 0 !default;
8
+ $issues-panel-border-radius: o-ui.$card-border-radius o-ui.$card-border-radius 0
9
+ 0 !default;
10
10
  $issues-panel-border-width: 1px 1px 0 1px !default;
11
11
  $issues-panel-stuck-border-radius: null !default;
12
12
  $issues-panel-stuck-border-width: null !default;
@@ -18,64 +18,62 @@ $issues-panel-stuck-border-width-sm: null !default;
18
18
 
19
19
  // Issues panel header
20
20
  $issues-panel-header-padding-x: $issues-panel-padding-x !default;
21
- $issues-panel-header-padding-bottom: ostack-ui.spacing(2) !default;
22
- $issues-panel-header-z-index: ostack-ui.$z-index-sticky !default;
21
+ $issues-panel-header-padding-bottom: o-ui.spacing(2) !default;
22
+ $issues-panel-header-z-index: o-ui.$z-index-sticky !default;
23
23
  $issues-panel-header-stuck-shadow-size: 8px !default;
24
24
  $issues-panel-header-stuck-shadow-color: rgba(0, 0, 0, 0.1) !default;
25
25
  $issues-panel-header-stuck-shadow-gradient:
26
26
  $issues-panel-header-stuck-shadow-color, transparent !default;
27
27
 
28
28
  // Issues panel icon
29
- $issues-panel-icon-margin-y: ostack-ui.spacing(5) !default;
30
- $issues-panel-icon-margin-x: ostack-ui.spacing(3) !default;
29
+ $issues-panel-icon-margin-y: o-ui.spacing(5) !default;
30
+ $issues-panel-icon-margin-x: o-ui.spacing(3) !default;
31
31
 
32
32
  // Issues panel title
33
- $issues-panel-title-font-size: ostack-ui.$font-size-md !default;
34
- $issues-panel-title-line-height: ostack-ui.$line-height-md !default;
33
+ $issues-panel-title-font-size: o-ui.$font-size-md !default;
34
+ $issues-panel-title-line-height: o-ui.$line-height-md !default;
35
35
 
36
- $issues-panel-title-font-size-sm: ostack-ui.$font-size-sm !default;
36
+ $issues-panel-title-font-size-sm: o-ui.$font-size-sm !default;
37
37
  $issues-panel-title-line-height-sm: null !default;
38
38
 
39
39
  // Issues panel breadcrumbs
40
- $issues-panel-breadcrumb-item-margin-x: ostack-ui.spacing(1.5) !default;
40
+ $issues-panel-breadcrumb-item-margin-x: o-ui.spacing(1.5) !default;
41
41
 
42
42
  // Issues panel controls
43
- $issues-panel-controls-margin-y: ostack-ui.spacing(3.5) !default;
44
- $issues-panel-controls-margin-left: ostack-ui.spacing(4) !default;
45
- $issues-panel-action-group-margin-x: ostack-ui.spacing(3) !default;
46
- $issues-panel-action-margin-x: ostack-ui.spacing(1) !default;
47
- $issues-panel-validating-spinner-margin-x: ostack-ui.spacing(2) !default;
48
- $issues-panel-pagination-font-size: ostack-ui.$font-size-xs !default;
49
- $issues-panel-pagination-line-height: ostack-ui.$line-height-xs !default;
50
- $issues-panel-pagination-font-weight: ostack-ui.$font-weight-bold !default;
43
+ $issues-panel-controls-margin-y: o-ui.spacing(3.5) !default;
44
+ $issues-panel-controls-margin-left: o-ui.spacing(4) !default;
45
+ $issues-panel-action-group-margin-x: o-ui.spacing(3) !default;
46
+ $issues-panel-action-margin-x: o-ui.spacing(1) !default;
47
+ $issues-panel-validating-spinner-margin-x: o-ui.spacing(2) !default;
48
+ $issues-panel-pagination-font-size: o-ui.$font-size-xs !default;
49
+ $issues-panel-pagination-line-height: o-ui.$line-height-xs !default;
50
+ $issues-panel-pagination-font-weight: o-ui.$font-weight-bold !default;
51
51
 
52
52
  // Issues panel body
53
53
  $issues-panel-body-padding-x: $issues-panel-padding-x !default;
54
- $issues-panel-body-padding-bottom: ostack-ui.spacing(3) !default;
54
+ $issues-panel-body-padding-bottom: o-ui.spacing(3) !default;
55
55
 
56
56
  // Issues panel messages
57
57
  $issues-panel-messages-min-height: 190px !default;
58
58
  $issues-panel-messages-max-height: 260px !default;
59
59
 
60
60
  // Issues panel issues list title
61
- $issues-panel-issues-list-title-margin-bottom: ostack-ui.spacing(2) !default;
61
+ $issues-panel-issues-list-title-margin-bottom: o-ui.spacing(2) !default;
62
62
  $issues-panel-issues-list-title-font-size: var(
63
- --#{ostack-ui.$prefix}font-size-sm
63
+ --#{o-ui.$prefix}font-size-sm
64
64
  ) !default;
65
65
  $issues-panel-issues-list-title-line-height: var(
66
- --#{ostack-ui.$prefix}line-height-sm
66
+ --#{o-ui.$prefix}line-height-sm
67
67
  ) !default;
68
68
 
69
69
  // Issues panel issues list
70
- $issues-panel-issues-list-margin-bottom: ostack-ui.spacing(4) !default;
71
- $issues-panel-issues-list-padding-left: ostack-ui.spacing(4) !default;
70
+ $issues-panel-issues-list-margin-bottom: o-ui.spacing(4) !default;
71
+ $issues-panel-issues-list-padding-left: o-ui.spacing(4) !default;
72
72
 
73
73
  // Issues panel issue
74
- $issues-panel-issue-margin-y: ostack-ui.spacing(2) !default;
75
- $issues-panel-issue-font-size: var(--#{ostack-ui.$prefix}font-size-xs) !default;
76
- $issues-panel-issue-line-height: var(
77
- --#{ostack-ui.$prefix}line-height-xs
78
- ) !default;
74
+ $issues-panel-issue-margin-y: o-ui.spacing(2) !default;
75
+ $issues-panel-issue-font-size: var(--#{o-ui.$prefix}font-size-xs) !default;
76
+ $issues-panel-issue-line-height: var(--#{o-ui.$prefix}line-height-xs) !default;
79
77
 
80
78
  // Issues panel issue code
81
79
  $issues-panel-issue-code-font-style: italic !default;
package/scss/components/IssuesPanel/_IssuesPanel.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @use "sass:color";
2
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
2
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
3
3
  @use "IssuesPanel-variables" as *;
4
4
  @use "../../scss/base-variables" as *;
5
5
 
6
6
  .#{$prefix}issues-panel {
7
7
  $issues-panel: &;
8
- $card: ".#{ostack-ui.$prefix}card";
8
+ $card: ".#{o-ui.$prefix}card";
9
9
 
10
10
  border-radius: $issues-panel-border-radius;
11
11
  pointer-events: auto;
@@ -17,7 +17,7 @@
17
17
  border-width: $issues-panel-border-width;
18
18
  }
19
19
 
20
- @include ostack-ui.media-breakpoint-down(sm) {
20
+ @include o-ui.media-breakpoint-down(sm) {
21
21
  border-radius: $issues-panel-border-radius-xs;
22
22
  // Override card styles
23
23
  &#{$card} {
@@ -33,10 +33,9 @@
33
33
  justify-content: center;
34
34
  pointer-events: none;
35
35
 
36
- @include ostack-ui.accessible-animation(
37
- ostack-ui.$animation-fade-in
38
- var(--#{ostack-ui.$prefix}animation-fade-duration)
39
- var(--#{ostack-ui.$prefix}animation-fade-timing-function)
36
+ @include o-ui.accessible-animation(
37
+ o-ui.$animation-fade-in var(--#{o-ui.$prefix}animation-fade-duration)
38
+ var(--#{o-ui.$prefix}animation-fade-timing-function)
40
39
  );
41
40
  }
42
41
 
@@ -47,7 +46,7 @@
47
46
  border-width: $issues-panel-stuck-border-width;
48
47
  }
49
48
 
50
- @include ostack-ui.media-breakpoint-down(sm) {
49
+ @include o-ui.media-breakpoint-down(sm) {
51
50
  border-radius: $issues-panel-stuck-border-radius-xs;
52
51
  // Override card styles
53
52
  &#{$card} {
@@ -56,7 +55,7 @@
56
55
  }
57
56
  }
58
57
 
59
- @include ostack-ui.media-breakpoint-up(sm) {
58
+ @include o-ui.media-breakpoint-up(sm) {
60
59
  width: calc(100% - $issues-panel-margin-x * 2);
61
60
  padding: $issues-panel-padding-y $issues-panel-padding-x;
62
61
 
@@ -121,7 +120,7 @@
121
120
  font-size: $issues-panel-title-font-size !important;
122
121
  line-height: $issues-panel-title-line-height !important;
123
122
 
124
- @include ostack-ui.media-breakpoint-down(sm) {
123
+ @include o-ui.media-breakpoint-down(sm) {
125
124
  font-size: $issues-panel-title-font-size-sm !important;
126
125
  line-height: $issues-panel-title-line-height-sm !important;
127
126
  }