@ostack.tech/ui-kform 0.11.0 → 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 (15) hide show
  1. package/dist/ostack-ui-kform.css +5 -29
  2. package/package.json +2 -2
  3. package/scss/_utils.scss +1 -0
  4. package/scss/components/Annexes/_Annexes-variables.scss +2 -3
  5. package/scss/components/Annexes/_Annexes.scss +50 -55
  6. package/scss/components/FileControl/_FileControl.scss +7 -10
  7. package/scss/components/FormApp/_FormApp-variables.scss +9 -0
  8. package/scss/components/FormApp/_FormApp.scss +19 -38
  9. package/scss/components/FormPages/_FormPages-variables.scss +18 -22
  10. package/scss/components/FormPages/_FormPages.scss +73 -63
  11. package/scss/components/IssueMessages/_IssueMessages.scss +1 -1
  12. package/scss/components/IssuesPanel/_IssuesPanel-variables.scss +32 -34
  13. package/scss/components/IssuesPanel/_IssuesPanel.scss +9 -10
  14. package/scss/components/TopBar/_TopBar.scss +15 -14
  15. package/scss/scss/_base-variables.scss +2 -2
package/dist/ostack-ui-kform.css CHANGED
@@ -319,30 +319,6 @@
319
319
  --o-ui-kform-form-app-min-height: var(--o-ui-kform-form-app-min-height-xxl);
320
320
  }
321
321
  }
322
- .o-ui-kform-form-app:focus-visible {
323
- outline: none;
324
- }
325
- .o-ui-kform-form-app::after {
326
- content: "";
327
- position: absolute;
328
- pointer-events: none;
329
- z-index: 1300;
330
- }
331
- @media screen and (prefers-reduced-motion: no-preference) {
332
- .o-ui-kform-form-app::after {
333
- transition-property: outline-color;
334
- transition-duration: var(--o-ui-transition-duration);
335
- transition-timing-function: var(--o-ui-transition-timing-function);
336
- }
337
- }
338
- .o-ui-kform-form-app:focus-visible::after {
339
- top: 0;
340
- left: 0;
341
- width: 100%;
342
- height: 100%;
343
- outline: 2px solid #8da4ef;
344
- outline-offset: -3px;
345
- }
346
322
  .o-ui-overlay .o-ui-kform-form-app {
347
323
  --o-ui-kform-form-app-min-height: auto;
348
324
  }
@@ -395,7 +371,7 @@
395
371
  }
396
372
  .o-ui-kform-form-pages__sidebar {
397
373
  position: sticky;
398
- top: var(--o-ui-kform-top-bar-height);
374
+ top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height));
399
375
  z-index: calc(var(--o-ui-z-index-sticky) + 1);
400
376
  max-height: calc(100dvh - var(--o-ui-kform-top-bar-height));
401
377
  overflow: auto;
@@ -440,7 +416,7 @@
440
416
  }
441
417
  .o-ui-kform-form-pages__navigation[data-navigation-mode=select] {
442
418
  position: sticky;
443
- top: var(--o-ui-kform-top-bar-height);
419
+ top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height));
444
420
  z-index: calc(var(--o-ui-z-index-sticky) + 2);
445
421
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
446
422
  }
@@ -524,7 +500,7 @@
524
500
  }
525
501
  .o-ui-kform-form-pages__page-header {
526
502
  position: sticky;
527
- top: var(--o-ui-kform-top-bar-height);
503
+ top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height));
528
504
  z-index: 1101;
529
505
  display: flex;
530
506
  align-items: center;
@@ -603,7 +579,7 @@
603
579
  }
604
580
  .o-ui-kform-form-pages__page-content {
605
581
  position: sticky;
606
- top: calc(var(--o-ui-kform-top-bar-height) + var(--o-ui-kform-form-pages-page-header-height));
582
+ top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height) + var(--o-ui-kform-form-pages-page-header-height));
607
583
  z-index: 1100;
608
584
  padding: calc(var(--o-ui-space) * 4);
609
585
  }
@@ -760,7 +736,7 @@
760
736
  align-items: flex-end;
761
737
  justify-content: space-between;
762
738
  position: sticky;
763
- top: 0;
739
+ top: var(--o-ui-kform-form-app-base-sticky-top, 0px);
764
740
  z-index: 1103;
765
741
  padding: var(--o-ui-space) var(--o-ui-space) 0;
766
742
  border-bottom: 2px solid #3e63dd;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ostack.tech/ui-kform",
3
3
  "description": "Integration of ostack/UI with ostack/KForm.",
4
- "version": "0.11.0",
4
+ "version": "0.11.1",
5
5
  "homepage": "https://ui.ostack.tech/",
6
6
  "author": {
7
7
  "name": "Opensoft",
@@ -50,7 +50,7 @@
50
50
  "@fortawesome/free-solid-svg-icons": "^6.2.0 || ^7.0.0",
51
51
  "@ostack.tech/kform": "~0.32.0",
52
52
  "@ostack.tech/kform-react": "~0.32.0",
53
- "@ostack.tech/ui": "~0.11.0",
53
+ "@ostack.tech/ui": "~0.11.1",
54
54
  "@types/react": "^18.0.0 || ^19.0.0",
55
55
  "@types/react-dom": "^18.0.0 || ^19.0.0",
56
56
  "date-fns": "^4.1.0",
package/scss/_utils.scss CHANGED
@@ -2,5 +2,6 @@
2
2
 
3
3
  // Component variables
4
4
  @forward "components/Annexes/Annexes-variables";
5
+ @forward "components/FormApp/FormApp-variables";
5
6
  @forward "components/FormPages/FormPages-variables";
6
7
  @forward "components/IssuesPanel/IssuesPanel-variables";
package/scss/components/Annexes/_Annexes-variables.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
 
3
3
  // Manager
4
4
  $annexes-manager-min-width: 200px !default;
@@ -8,8 +8,7 @@ $annexes-tab-issues-popover-button-icon-border-width: 1px !default;
8
8
  $annexes-tab-issues-popover-button-padding: calc(
9
9
  (
10
10
  (
11
- ostack-ui.$icon-button-md-min-size -
12
- ostack-ui.$icon-button-md-font-size -
11
+ o-ui.$icon-button-md-min-size - o-ui.$icon-button-md-font-size -
13
12
  $annexes-tab-issues-popover-button-icon-border-width * 2
14
13
  ) /
15
14
  2
package/scss/components/Annexes/_Annexes.scss CHANGED
@@ -1,5 +1,5 @@
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 "Annexes-variables" as *;
4
4
  @use "../../scss/base-variables" as *;
5
5
 
@@ -16,28 +16,28 @@
16
16
  flex: 1 1 auto;
17
17
 
18
18
  &:not(:last-child) {
19
- margin-right: ostack-ui.spacing(2);
19
+ margin-right: o-ui.spacing(2);
20
20
 
21
- @include ostack-ui.media-breakpoint-up(sm) {
22
- margin-right: ostack-ui.spacing(4);
21
+ @include o-ui.media-breakpoint-up(sm) {
22
+ margin-right: o-ui.spacing(4);
23
23
  }
24
24
  }
25
25
  }
26
26
 
27
27
  &__menu-container {
28
- margin-bottom: ostack-ui.$tabs-tab-list-annexes-margin-bottom;
29
- padding-right: ostack-ui.spacing(2);
30
- box-shadow: ostack-ui.$tabs-tab-list-annexes-box-shadow;
28
+ margin-bottom: o-ui.$tabs-tab-list-annexes-margin-bottom;
29
+ padding-right: o-ui.spacing(2);
30
+ box-shadow: o-ui.$tabs-tab-list-annexes-box-shadow;
31
31
 
32
- @include ostack-ui.media-breakpoint-up(sm) {
33
- padding-right: ostack-ui.spacing(4);
32
+ @include o-ui.media-breakpoint-up(sm) {
33
+ padding-right: o-ui.spacing(4);
34
34
  }
35
35
  }
36
36
 
37
37
  &__issues-popover-container {
38
- margin-left: ostack-ui.spacing(-4);
39
- margin-right: ostack-ui.spacing(7);
40
- padding-top: ostack-ui.spacing(0.5);
38
+ margin-left: o-ui.spacing(-4);
39
+ margin-right: o-ui.spacing(7);
40
+ padding-top: o-ui.spacing(0.5);
41
41
  height: $tab-height;
42
42
  }
43
43
 
@@ -50,14 +50,14 @@
50
50
  height: $tab-height;
51
51
  border-bottom-left-radius: 0;
52
52
  border-bottom-right-radius: 0;
53
- color: var(--#{ostack-ui.$prefix}primary-9) !important;
53
+ color: var(--#{o-ui.$prefix}primary-9) !important;
54
54
 
55
55
  &[data-state="open"] {
56
- border-color: ostack-ui.$neutral-7;
56
+ border-color: o-ui.$neutral-7;
57
57
  border-bottom-color: transparent;
58
- background-color: var(--#{ostack-ui.$prefix}background-color) !important;
58
+ background-color: var(--#{o-ui.$prefix}background-color) !important;
59
59
  position: relative;
60
- z-index: ostack-ui.$z-index-dropdown + 1;
60
+ z-index: o-ui.$z-index-dropdown + 1;
61
61
  }
62
62
  }
63
63
 
@@ -72,7 +72,7 @@
72
72
  border-bottom-left-radius: 0;
73
73
  }
74
74
 
75
- @include ostack-ui.media-breakpoint-down(sm) {
75
+ @include o-ui.media-breakpoint-down(sm) {
76
76
  min-width: 100vw;
77
77
  margin-left: -5px; // XXX: Override Radix's hard-coded collision margin
78
78
  border-radius: 0;
@@ -87,14 +87,12 @@
87
87
  content: "";
88
88
  position: absolute;
89
89
  top: 0;
90
- left: calc(
91
- (ostack-ui.$menu-padding-x + ostack-ui.$menu-item-margin-x) * -1
92
- );
90
+ left: calc((o-ui.$menu-padding-x + o-ui.$menu-item-margin-x) * -1);
93
91
  height: 100%;
94
92
  width: 3px;
95
- border-radius: 0 var(--#{ostack-ui.$prefix}border-radius-sm)
96
- var(--#{ostack-ui.$prefix}border-radius-sm) 0;
97
- background-color: var(--#{ostack-ui.$prefix}accent-9);
93
+ border-radius: 0 var(--#{o-ui.$prefix}border-radius-sm)
94
+ var(--#{o-ui.$prefix}border-radius-sm) 0;
95
+ background-color: var(--#{o-ui.$prefix}accent-9);
98
96
  }
99
97
  }
100
98
 
@@ -115,27 +113,27 @@
115
113
  }
116
114
 
117
115
  &__menu-annex-title {
118
- font-weight: ostack-ui.$font-weight-bold;
116
+ font-weight: o-ui.$font-weight-bold;
119
117
  overflow: hidden;
120
118
  text-overflow: ellipsis;
121
119
  white-space: nowrap;
122
120
  }
123
121
 
124
122
  &__menu-annex-subtitle {
125
- margin-left: ostack-ui.spacing(2);
126
- font-weight: ostack-ui.$font-weight-normal;
127
- font-size: ostack-ui.$font-size-xs;
128
- line-height: ostack-ui.$font-size-xs;
123
+ margin-left: o-ui.spacing(2);
124
+ font-weight: o-ui.$font-weight-normal;
125
+ font-size: o-ui.$font-size-xs;
126
+ line-height: o-ui.$font-size-xs;
129
127
  text-transform: none;
130
128
  }
131
129
 
132
130
  &__menu-annex-description {
133
- font-weight: ostack-ui.$font-weight-normal;
131
+ font-weight: o-ui.$font-weight-normal;
134
132
  text-transform: none;
135
133
  }
136
134
 
137
135
  &__menu-annex-remove {
138
- margin-left: ostack-ui.spacing(2);
136
+ margin-left: o-ui.spacing(2);
139
137
  $min-size: 28px;
140
138
  min-height: $min-size;
141
139
  min-width: $min-size;
@@ -148,14 +146,14 @@
148
146
 
149
147
  &__menu-new-annex-title {
150
148
  flex: 1;
151
- font-weight: ostack-ui.$font-weight-bold;
152
- color: ostack-ui.$primary-9;
149
+ font-weight: o-ui.$font-weight-bold;
150
+ color: o-ui.$primary-9;
153
151
  }
154
152
 
155
153
  &__menu-new-annex-description {
156
154
  flex: 2;
157
- margin-left: ostack-ui.spacing(2);
158
- font-weight: ostack-ui.$font-weight-normal;
155
+ margin-left: o-ui.spacing(2);
156
+ font-weight: o-ui.$font-weight-normal;
159
157
  text-transform: none;
160
158
  }
161
159
 
@@ -180,61 +178,58 @@
180
178
 
181
179
  &__tab-title {
182
180
  font-weight: var(
183
- --#{ostack-ui.$prefix}tabs-tab-open-font-weight,
184
- var(
185
- --#{ostack-ui.$prefix}tabs-tab-font-weight,
186
- ostack-ui.$font-weight-bold
187
- )
181
+ --#{o-ui.$prefix}tabs-tab-open-font-weight,
182
+ var(--#{o-ui.$prefix}tabs-tab-font-weight, o-ui.$font-weight-bold)
188
183
  );
189
184
  }
190
185
 
191
186
  &__tab-subtitle {
192
- font-weight: ostack-ui.$font-weight-normal;
193
- font-size: ostack-ui.$font-size-xs;
194
- line-height: ostack-ui.$line-height-xs;
187
+ font-weight: o-ui.$font-weight-normal;
188
+ font-size: o-ui.$font-size-xs;
189
+ line-height: o-ui.$line-height-xs;
195
190
  }
196
191
 
197
192
  // Tab issues
198
193
  &__tab[data-has-issues] &__tab-inner {
199
194
  padding-right: calc(
200
- ostack-ui.$tabs-tab-inner-annexes-padding-x * 2 +
201
- ostack-ui.$icon-button-md-font-size +
195
+ o-ui.$tabs-tab-inner-annexes-padding-x * 2 +
196
+ o-ui.$icon-button-md-font-size +
202
197
  $annexes-tab-issues-popover-button-padding
203
198
  );
204
199
  }
205
200
 
206
201
  &__tab-issues-popover-button-container {
207
- z-index: calc(ostack-ui.$tabs-tab-focus-z-index + 1);
202
+ z-index: calc(o-ui.$tabs-tab-focus-z-index + 1);
208
203
  margin-left: calc(
209
- ostack-ui.$icon-button-md-min-size *
210
- -1 - var(--#{ostack-ui.$prefix}tabs-tab-list-gap-x) -
204
+ o-ui.$icon-button-md-min-size *
205
+ -1 - var(--#{o-ui.$prefix}tabs-tab-list-gap-x) -
211
206
  $annexes-tab-issues-popover-button-padding / 2
212
207
  );
213
208
  padding-right: calc(
214
- var(--#{ostack-ui.$prefix}tabs-tab-list-gap-x) +
209
+ var(--#{o-ui.$prefix}tabs-tab-list-gap-x) +
215
210
  $annexes-tab-issues-popover-button-padding / 2
216
211
  );
217
212
  }
218
213
 
219
- &__tab-issues-popover-button .#{ostack-ui.$prefix}icon {
214
+ &__tab-issues-popover-button .#{o-ui.$prefix}icon {
220
215
  // Border around the icon
221
216
  filter: drop-shadow(
222
217
  /* Top */ 0
223
218
  calc($annexes-tab-issues-popover-button-icon-border-width * -1) 0
224
- var(--#{ostack-ui.$prefix}background-color)
219
+ var(--#{o-ui.$prefix}background-color)
225
220
  )
226
221
  drop-shadow(
227
222
  /* Right */ $annexes-tab-issues-popover-button-icon-border-width 0 0
228
- var(--#{ostack-ui.$prefix}background-color)
223
+ var(--#{o-ui.$prefix}background-color)
229
224
  )
230
225
  drop-shadow(
231
226
  /* Bottom */ 0 $annexes-tab-issues-popover-button-icon-border-width 0
232
- var(--#{ostack-ui.$prefix}background-color)
227
+ var(--#{o-ui.$prefix}background-color)
233
228
  )
234
229
  drop-shadow(
235
230
  /* Left */
236
231
  calc($annexes-tab-issues-popover-button-icon-border-width * -1) 0 0
237
- var(--#{ostack-ui.$prefix}background-color)
232
+ var(--#{o-ui.$prefix}background-color)
238
233
  );
239
234
  }
240
235
 
@@ -255,14 +250,14 @@
255
250
  align-items: baseline;
256
251
 
257
252
  .#{$prefix}annexes__tab-title {
258
- font-size: var(--#{ostack-ui.$prefix}font-size-md);
253
+ font-size: var(--#{o-ui.$prefix}font-size-md);
259
254
  }
260
255
  .#{$prefix}annexes__tab-subtitle {
261
256
  &:not(:first-child)::before {
262
257
  content: "\00a0—\00a0";
263
258
  }
264
259
 
265
- font-size: var(--#{ostack-ui.$prefix}font-size-sm);
260
+ font-size: var(--#{o-ui.$prefix}font-size-sm);
266
261
  }
267
262
  }
268
263
  }
package/scss/components/FileControl/_FileControl.scss CHANGED
@@ -1,19 +1,16 @@
1
1
  @use "sass:map";
2
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
2
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
3
3
  @use "../../scss/base-variables" as *;
4
4
 
5
5
  .#{$prefix}file-control {
6
6
  &__viewer-dialog {
7
7
  width: fit-content;
8
8
  min-width: 0;
9
- max-width: min(
10
- calc(100dvw - ostack-ui.spacing(14)),
11
- ostack-ui.$dialog-xl-width
12
- );
9
+ max-width: min(calc(100dvw - o-ui.spacing(14)), o-ui.$dialog-xl-width);
13
10
  }
14
11
 
15
12
  &__viewer-download {
16
- margin-left: ostack-ui.spacing(4);
13
+ margin-left: o-ui.spacing(4);
17
14
  }
18
15
 
19
16
  &__viewer-dialog-title {
@@ -36,9 +33,9 @@
36
33
  max-height: $max-height;
37
34
  margin: 0 auto;
38
35
 
39
- border-bottom-left-radius: var(--#{ostack-ui.$prefix}border-radius-xs);
40
- border-bottom-right-radius: var(--#{ostack-ui.$prefix}border-radius-xs);
41
- background-color: var(--#{ostack-ui.$prefix}background-color);
36
+ border-bottom-left-radius: var(--#{o-ui.$prefix}border-radius-xs);
37
+ border-bottom-right-radius: var(--#{o-ui.$prefix}border-radius-xs);
38
+ background-color: var(--#{o-ui.$prefix}background-color);
42
39
 
43
40
  &:not([type^="image/"]):not([type^="video/"]):not([type^="audio/"]) {
44
41
  width: 100vw;
@@ -47,6 +44,6 @@
47
44
  }
48
45
 
49
46
  &__viewer-fallback {
50
- margin: ostack-ui.spacing(3) ostack-ui.spacing(4);
47
+ margin: o-ui.spacing(3) o-ui.spacing(4);
51
48
  }
52
49
  }
package/scss/components/FormApp/_FormApp-variables.scss ADDED
@@ -0,0 +1,9 @@
1
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
2
+
3
+ $form-app-default-min-height: 100dvh !default;
4
+ $form-app-background-color: var(--#{o-ui.$prefix}background-color) !default;
5
+ $form-app-base-sticky-top: null !default;
6
+
7
+ // Focus
8
+ $form-app-focus-outline: 2px solid o-ui.$primary-8 !default;
9
+ $form-app-focus-outline-offset: -3px !default;
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,72 +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.$label-helper-popover-padding-y
276
- ostack-ui.$label-helper-popover-padding-x;
284
+ padding: o-ui.$label-helper-popover-padding-y
285
+ o-ui.$label-helper-popover-padding-x;
277
286
  }
278
287
 
279
288
  &__page-content {
280
289
  position: sticky;
281
290
  top: calc(
282
- var(--#{$prefix}top-bar-height) +
291
+ var(--#{$prefix}form-app-base-sticky-top, 0px) +
292
+ var(--#{$prefix}top-bar-height) +
283
293
  var(--#{$prefix}form-pages-page-header-height)
284
294
  );
285
- z-index: ostack-ui.$z-index-sticky;
295
+ z-index: o-ui.$z-index-sticky;
286
296
 
287
- padding: ostack-ui.spacing(4);
297
+ padding: o-ui.spacing(4);
288
298
 
289
- @include ostack-ui.media-breakpoint-up(sm) {
299
+ @include o-ui.media-breakpoint-up(sm) {
290
300
  padding-bottom: calc(
291
- var(--#{$prefix}bottom-panel-height, 0px) + ostack-ui.spacing(4)
301
+ var(--#{$prefix}bottom-panel-height, 0px) + o-ui.spacing(4)
292
302
  );
293
303
  margin-bottom: calc(var(--#{$prefix}bottom-panel-height) * -1);
294
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
  }
package/scss/components/TopBar/_TopBar.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}top-bar {
@@ -11,14 +11,15 @@
11
11
  justify-content: space-between;
12
12
 
13
13
  position: sticky;
14
- top: 0;
15
- z-index: ostack-ui.$z-index-sticky + 3;
14
+ top: var(--#{$prefix}form-app-base-sticky-top, 0px);
15
+ z-index: o-ui.$z-index-sticky + 3;
16
16
 
17
- padding: ostack-ui.spacing(1) ostack-ui.spacing(1) 0;
18
- border-bottom: 2px solid ostack-ui.$primary-9;
17
+ padding: o-ui.spacing(1) o-ui.spacing(1) 0;
18
+ border-bottom: 2px solid o-ui.$primary-9;
19
19
 
20
- background-color: var(--#{ostack-ui.$prefix}background-color);
20
+ background-color: var(--#{o-ui.$prefix}background-color);
21
21
 
22
+ // TODO: Simplify this
22
23
  // Deal with double border (since the annex manager already comes with a
23
24
  // bottom border). At first we had a simple `margin-bottom: -2px` on the annex
24
25
  // manager, but that causes off-by-one pixel alignment issues in scaled
@@ -33,20 +34,20 @@
33
34
 
34
35
  & #{$annexes-tab}:focus-visible:not(:disabled):not([data-disabled]) {
35
36
  box-shadow:
36
- inset -1px 0 0 0 ostack-ui.$neutral-12,
37
- inset 0 1px 0 0 ostack-ui.$neutral-12,
38
- inset 1px 0 0 0 ostack-ui.$neutral-12,
39
- inset 0 -2px 0 ostack-ui.$neutral-12;
37
+ inset -1px 0 0 0 o-ui.$neutral-12,
38
+ inset 0 1px 0 0 o-ui.$neutral-12,
39
+ inset 1px 0 0 0 o-ui.$neutral-12,
40
+ inset 0 -2px 0 o-ui.$neutral-12;
40
41
 
41
42
  &[data-status] {
42
43
  box-shadow:
43
- inset -1px 0 0 0 ostack-ui.$neutral-12,
44
- inset 1px 0 0 0 ostack-ui.$neutral-12,
45
- inset 0 -2px 0 ostack-ui.$neutral-12;
44
+ inset -1px 0 0 0 o-ui.$neutral-12,
45
+ inset 1px 0 0 0 o-ui.$neutral-12,
46
+ inset 0 -2px 0 o-ui.$neutral-12;
46
47
  }
47
48
  }
48
49
 
49
50
  &__actions {
50
- margin: 0 0 ostack-ui.spacing(1) auto;
51
+ margin: 0 0 o-ui.spacing(1) auto;
51
52
  }
52
53
  }
package/scss/scss/_base-variables.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "@ostack.tech/ui/scss/utils" as ostack-ui;
1
+ @use "@ostack.tech/ui/scss/utils" as o-ui;
2
2
 
3
3
  // Library's prefix
4
4
  $prefix-suffix: "kform-" !default;
5
- $prefix: #{ostack-ui.$prefix}#{$prefix-suffix};
5
+ $prefix: #{o-ui.$prefix}#{$prefix-suffix};