@bloom-housing/ui-components 12.7.5 → 12.7.7

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 (7) hide show
  1. package/package.json +1 -2
  2. package/src/global/forms.scss +14 -14
  3. package/src/global/lists.scss +13 -8
  4. package/src/headers/StepHeader.scss +2 -2
  5. package/src/navigation/ProgressNav.scss +12 -12
  6. package/src/notifications/AlertBox.scss +10 -12
  7. package/src/page_components/ApplicationTimeline.scss +9 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "12.7.5",
3
+ "version": "12.7.7",
4
4
  "author": "Sean Albert <sean.albert@exygy.com>",
5
5
  "description": "Shared user interface components for Bloom affordable housing system",
6
6
  "homepage": "https://github.com/bloom-housing/ui-components",
@@ -130,7 +130,6 @@
130
130
  "ag-grid-community": "^26.0.0",
131
131
  "ag-grid-react": "^26.0.0",
132
132
  "aria-autocomplete": "^1.4.0",
133
- "axios": "0.21.2",
134
133
  "dayjs": "^1.10.7",
135
134
  "jwt-decode": "^2.2.0",
136
135
  "markdown-to-jsx": "7.1.8",
package/src/global/forms.scss CHANGED
@@ -38,9 +38,9 @@
38
38
  .field-border {
39
39
  label {
40
40
  background-color: var(--bloom-color-white);
41
- padding-top: var(--bordered-vertical-padding);
42
- padding-bottom: var(--bordered-vertical-padding);
43
- padding-left: var(--bordered-leftward-padding);
41
+ padding-block-start: var(--bordered-vertical-padding);
42
+ padding-block-end: var(--bordered-vertical-padding);
43
+ padding-inline-start: var(--bordered-leftward-padding);
44
44
  border-width: var(--bordered-border-width);
45
45
  border-radius: var(--bordered-border-radius);
46
46
  border-color: var(--bloom-color-gray-450);
@@ -80,8 +80,8 @@
80
80
  }
81
81
 
82
82
  select.input {
83
- @apply pl-3;
84
- @apply pr-8;
83
+ @apply ps-3;
84
+ @apply pe-8;
85
85
  }
86
86
 
87
87
  input.input {
@@ -98,11 +98,11 @@
98
98
  }
99
99
 
100
100
  .prepend + input[aria-invalid="false"] {
101
- @apply pl-8;
101
+ @apply ps-8;
102
102
  }
103
103
 
104
104
  .prepend + input[aria-invalid="true"] {
105
- @apply pl-12;
105
+ @apply ps-12;
106
106
  }
107
107
 
108
108
  &.control-narrower {
@@ -114,7 +114,7 @@
114
114
  input[type="radio"] {
115
115
  opacity: 0;
116
116
  position: absolute;
117
- margin-left: -20px;
117
+ margin-inline-start: -20px;
118
118
 
119
119
  &:focus {
120
120
  text-decoration: none;
@@ -287,7 +287,7 @@ input[type="number"] {
287
287
  @apply flex;
288
288
 
289
289
  .field {
290
- @apply mr-5;
290
+ @apply me-5;
291
291
  @apply mb-0;
292
292
  }
293
293
  }
@@ -303,23 +303,23 @@ input[type="number"] {
303
303
  }
304
304
 
305
305
  .field--inline + .field--inline {
306
- margin-left: 1.5rem;
306
+ margin-inline-start: 1.5rem;
307
307
  }
308
308
 
309
309
  .flex > .field,
310
310
  .field-group--date .field {
311
311
  @apply flex-auto;
312
- margin-left: 0.325rem;
313
- margin-right: 0.325rem;
312
+ margin-inline-start: 0.325rem;
313
+ margin-inline-end: 0.325rem;
314
314
  }
315
315
 
316
316
  .flex > .field,
317
317
  .field-group--date .field {
318
318
  &:first-of-type {
319
- margin-left: 0;
319
+ margin-inline-start: 0;
320
320
  }
321
321
  &:last-of-type {
322
- margin-right: 0;
322
+ margin-inline-end: 0;
323
323
  }
324
324
  }
325
325
 
package/src/global/lists.scss CHANGED
@@ -13,8 +13,7 @@
13
13
 
14
14
  .header-hidden {
15
15
  @screen md {
16
- @apply pt-0;
17
- @apply pb-0;
16
+ padding-block: 0;
18
17
  }
19
18
  }
20
19
  }
@@ -28,13 +27,16 @@
28
27
  position: relative;
29
28
  display: block;
30
29
  counter-increment: list;
31
- margin: 0 0 1rem 2rem;
30
+ margin-block-start: 0;
31
+ margin-inline-end: 0;
32
+ margin-block-end: 1rem;
33
+ margin-inline-start: 2rem;
32
34
  }
33
35
  .numbered-list li:before {
34
36
  display: inline-block;
35
37
  position: absolute;
36
- top: 0;
37
- left: -2rem;
38
+ inset-block-start: 0;
39
+ inset-inline-start: -2rem;
38
40
  text-align: center;
39
41
  content: counter(list);
40
42
  border-radius: 50%;
@@ -49,7 +51,10 @@
49
51
  }
50
52
  @screen md {
51
53
  .numbered-list li {
52
- margin: 0 0 1.5rem 2.5rem;
54
+ margin-block-start: 0;
55
+ margin-inline-end: 0;
56
+ margin-block-end: 1.5rem;
57
+ margin-inline-start: 2.5rem;
53
58
  }
54
59
  .numbered-list li:before {
55
60
  font-size: 1rem;
@@ -57,7 +62,7 @@
57
62
  width: 2rem;
58
63
  height: 2rem;
59
64
  line-height: 2rem;
60
- top: -0.25rem;
61
- left: -2.5rem;
65
+ inset-block-start: -0.25rem;
66
+ inset-inline-start: -2.5rem;
62
67
  }
63
68
  }
package/src/headers/StepHeader.scss CHANGED
@@ -33,11 +33,11 @@
33
33
  height: var(--circle-desktop-size);
34
34
  }
35
35
  padding: 0rem var(--circle-x-padding);
36
- margin-right: var(--title-spacing);
36
+ margin-inline-end: var(--title-spacing);
37
37
  border-radius: 50%;
38
38
  }
39
39
 
40
40
  .step-header__title {
41
- margin-left: var(--title-spacing);
41
+ margin-inline-start: var(--title-spacing);
42
42
  font-weight: var(--label-font-weight);
43
43
  }
package/src/navigation/ProgressNav.scss CHANGED
@@ -47,8 +47,8 @@
47
47
  width: var(--dot-size);
48
48
  background-color: var(--completed-step-color);
49
49
  border-radius: 50%;
50
- top: 0;
51
- left: 0.5rem;
50
+ inset-block-start: 0;
51
+ inset-inline-start: 0.5rem;
52
52
  content: "";
53
53
  transform: translateX(-50%);
54
54
  z-index: 2;
@@ -58,34 +58,34 @@
58
58
  position: absolute;
59
59
  background-color: var(--completed-step-color);
60
60
  width: 100%;
61
- left: 0.5rem;
62
- top: 0.4rem;
61
+ inset-inline-start: 0.9rem;
62
+ inset-block-start: 0.4rem;
63
63
  content: "";
64
64
  height: 1px;
65
65
  }
66
66
 
67
67
  &:first-of-type {
68
68
  &:after {
69
- left: 20%;
69
+ inset-inline-start: 32%;
70
70
  }
71
71
  }
72
72
 
73
73
  &:last-of-type {
74
74
  &:after {
75
- left: auto;
76
- right: 80%;
75
+ inset-inline-start: auto;
76
+ inset-inline-end: 80%;
77
77
  }
78
78
  }
79
79
  .progress-nav__item-container {
80
- padding-top: var(--dot-label-padding-top);
81
- padding-left: var(--dot-label-padding-left);
80
+ padding-block-start: var(--dot-label-padding-top);
81
+ padding-inline-start: var(--dot-label-padding-left);
82
82
  color: var(--completed-step-font-color);
83
83
  display: block;
84
84
  position: relative;
85
85
  pointer-events: none;
86
86
  cursor: default;
87
87
  z-index: 3;
88
- padding-right: var(--dot-label-padding-right);
88
+ padding-inline-end: var(--dot-label-padding-right);
89
89
  }
90
90
 
91
91
  &.is-active {
@@ -129,8 +129,8 @@
129
129
  .progress-nav__bar-item {
130
130
  // drop the labels on mobile view
131
131
  font-size: 0;
132
- padding-top: var(--bar-label-padding-top);
133
- padding-left: var(--bar-label-padding-left);
132
+ padding-block-start: var(--bar-label-padding-top);
133
+ padding-inline-start: var(--bar-label-padding-left);
134
134
  position: relative;
135
135
  display: table-cell;
136
136
  white-space: normal;
package/src/notifications/AlertBox.scss CHANGED
@@ -31,16 +31,14 @@
31
31
  .alert-box_inner {
32
32
  margin: auto;
33
33
  max-width: var(--max-width);
34
- padding-right: var(--horizontal-padding);
35
- padding-left: var(--horizontal-padding);
34
+ padding-inline: var(--horizontal-padding);
36
35
  flex: 1;
37
36
  display: flex;
38
37
  align-items: center;
39
38
  }
40
39
 
41
40
  &.narrow {
42
- padding-top: var(--bloom-s1_5);
43
- padding-bottom: var(--bloom-s1_5);
41
+ padding-block: var(--bloom-s1_5);
44
42
  }
45
43
 
46
44
  &.invert {
@@ -104,8 +102,8 @@
104
102
 
105
103
  .alert-box__close {
106
104
  font-size: var(--body-close-font-size);
107
- right: var(--horizontal-padding);
108
- margin-left: var(--bloom-s3);
105
+ inset-inline-end: var(--horizontal-padding);
106
+ margin-inline-start: var(--bloom-s3);
109
107
  padding: 0;
110
108
  line-height: var(--bloom-s4);
111
109
  color: var(--close-icon-color);
@@ -116,20 +114,20 @@
116
114
  }
117
115
 
118
116
  .alert-box__icon {
119
- margin-right: var(--bloom-s3);
117
+ margin-inline-end: var(--bloom-s3);
120
118
  }
121
119
 
122
120
  .alert-box__sticky {
123
121
  position: sticky;
124
- top: var(--bloom-s3);
125
- margin-top: var(--bloom-s3);
126
- margin-right: var(--bloom-s3);
122
+ inset-block-start: var(--bloom-s3);
123
+ margin-block-start: var(--bloom-s3);
124
+ margin-inline-end: var(--bloom-s3);
127
125
  z-index: 10;
128
- margin-left: auto;
126
+ margin-inline-start: auto;
129
127
  width: fit-content;
130
128
  }
131
129
 
132
130
  .alert-box__sticky + * {
133
131
  --alert-box-height: -3.6rem;
134
- margin-top: var(--alert-box-height);
132
+ margin-block-start: var(--alert-box-height);
135
133
  }
package/src/page_components/ApplicationTimeline.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .markdown ul.application-timeline {
2
2
  @apply mb-8;
3
- @apply ml-0;
3
+ @apply ms-0;
4
4
  }
5
5
 
6
6
  .application-timeline {
@@ -11,9 +11,9 @@
11
11
  text-transform: unset;
12
12
 
13
13
  .absolute {
14
- margin-top: 0.25rem;
14
+ margin-block-start: 0.25rem;
15
15
  z-index: 2;
16
- margin-left: -0.4rem;
16
+ margin-inline-start: -0.4rem;
17
17
  }
18
18
 
19
19
  p {
@@ -21,23 +21,23 @@
21
21
  }
22
22
 
23
23
  &:before {
24
- left: 50%;
24
+ inset-inline-start: 50%;
25
25
  }
26
26
 
27
27
  &:after {
28
- left: 0;
28
+ inset-inline-start: 0;
29
29
  }
30
30
 
31
31
  &:first-of-type {
32
32
  &:after {
33
- left: 50%;
33
+ inset-inline-start: 50%;
34
34
  }
35
35
  }
36
36
 
37
37
  &:last-of-type {
38
38
  &:after {
39
- left: auto;
40
- right: 50%;
39
+ inset-inline-start: auto;
40
+ inset-inline-end: 50%;
41
41
  }
42
42
  }
43
43
 
@@ -67,6 +67,6 @@
67
67
  }
68
68
 
69
69
  .progress-nav__dot-item::after {
70
- top: 1rem;
70
+ inset-block-start: 1rem;
71
71
  }
72
72
  }