@agorapulse/ui-theme 20.2.0-6 → 20.2.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 (30) hide show
  1. package/agorapulse-ui-theme-20.2.0.tgz +0 -0
  2. package/assets/style/css-ui/_accordion.scss +35 -35
  3. package/assets/style/css-ui/_avatar.scss +12 -4
  4. package/assets/style/css-ui/_button.scss +11 -7
  5. package/assets/style/css-ui/_card.scss +12 -12
  6. package/assets/style/css-ui/_checkbox.scss +33 -10
  7. package/assets/style/css-ui/_datepicker.scss +3 -1
  8. package/assets/style/css-ui/_dialog.scss +48 -48
  9. package/assets/style/css-ui/_icon-button.scss +56 -18
  10. package/assets/style/css-ui/_infobox.scss +27 -10
  11. package/assets/style/css-ui/_input.scss +0 -5
  12. package/assets/style/css-ui/_list-panel.scss +48 -47
  13. package/assets/style/css-ui/_loader.scss +80 -30
  14. package/assets/style/css-ui/_radio.scss +0 -5
  15. package/assets/style/css-ui/_select.scss +3 -1
  16. package/assets/style/css-ui/_snackbar.scss +20 -0
  17. package/assets/style/css-ui/_status.scss +18 -6
  18. package/assets/style/css-ui/_table.scss +0 -2
  19. package/assets/style/css-ui/_tabs.scss +7 -0
  20. package/assets/style/css-ui/_tag.scss +18 -6
  21. package/assets/style/css-ui/_textarea.scss +1 -5
  22. package/assets/style/css-ui/_toggle.scss +0 -5
  23. package/assets/style/css-ui/_tooltip.scss +17 -6
  24. package/assets/style/css-ui/_typography.scss +24 -8
  25. package/assets/style/css-ui/index.css +5 -37
  26. package/assets/style/css-ui/index.css.map +1 -1
  27. package/package.json +34 -34
  28. package/agorapulse-ui-theme-1.0.0-SNAPSHOT.tgz +0 -0
  29. package/assets/style/theme.css +0 -6173
  30. package/assets/style/theme.css.map +0 -1
package/agorapulse-ui-theme-20.2.0.tgz ADDED
Binary file
package/assets/style/css-ui/_accordion.scss CHANGED
@@ -1,54 +1,54 @@
1
1
  .ap-accordion {
2
- background-color: var(--ref-color-white);
3
- border: 1px solid var(--ref-color-grey-10);
4
- border-radius: var(--ref-border-radius-md);
5
- display: flex;
6
- flex-direction: column;
2
+ background-color: var(--ref-color-white);
3
+ border: 1px solid var(--ref-color-grey-10);
4
+ border-radius: var(--ref-border-radius-md);
5
+ display: flex;
6
+ flex-direction: column;
7
7
  }
8
8
 
9
9
  .ap-accordion-header {
10
- border-bottom: 1px solid var(--ref-color-grey-10);
11
- display: flex;
12
- align-items: center;
13
- gap: var(--ref-spacing-xxs);
14
- padding: 6px var(--ref-spacing-xs) 6px var(--ref-spacing-sm);
15
-
16
- > i {
17
- flex-shrink: 0;
18
- }
10
+ border-bottom: 1px solid var(--ref-color-grey-10);
11
+ display: flex;
12
+ align-items: center;
13
+ gap: var(--ref-spacing-xxs);
14
+ padding: 6px var(--ref-spacing-xs) 6px var(--ref-spacing-sm);
15
+
16
+ > i {
17
+ flex-shrink: 0;
18
+ }
19
19
  }
20
20
 
21
21
  .ap-accordion-title {
22
- flex: 1;
23
- min-width: 0;
24
- font-size: var(--ref-font-size-sm);
25
- font-weight: var(--ref-font-weight-bold);
26
- line-height: var(--ref-font-line-height-md);
27
- color: var(--ref-color-grey-100);
22
+ flex: 1;
23
+ min-width: 0;
24
+ font-size: var(--ref-font-size-sm);
25
+ font-weight: var(--ref-font-weight-bold);
26
+ line-height: var(--ref-font-line-height-md);
27
+ color: var(--ref-color-grey-100);
28
28
  }
29
29
 
30
30
  .ap-accordion-toggle {
31
- flex-shrink: 0;
32
- transition: transform var(--ref-animation-short);
31
+ flex-shrink: 0;
32
+ transition: transform var(--ref-animation-short);
33
33
  }
34
34
 
35
35
  .ap-accordion-content {
36
- display: flex;
37
- flex-direction: column;
38
- gap: var(--ref-spacing-sm);
39
- padding: var(--ref-spacing-sm);
36
+ display: flex;
37
+ flex-direction: column;
38
+ gap: var(--ref-spacing-sm);
39
+ padding: var(--ref-spacing-sm);
40
40
  }
41
41
 
42
42
  .ap-accordion.collapsed {
43
- .ap-accordion-header {
44
- border-bottom: none;
45
- }
43
+ .ap-accordion-header {
44
+ border-bottom: none;
45
+ }
46
46
 
47
- .ap-accordion-toggle {
48
- transform: rotate(180deg);
49
- }
47
+ .ap-accordion-toggle {
48
+ transform: rotate(180deg);
49
+ }
50
50
 
51
- .ap-accordion-content {
52
- display: none;
53
- }
51
+ .ap-accordion-content {
52
+ display: none;
53
+ }
54
54
  }
package/assets/style/css-ui/_avatar.scss CHANGED
@@ -173,10 +173,18 @@
173
173
  height: var(--ap-avatar-network-size);
174
174
 
175
175
  // Monochrome icon fallback colors (when using ap-icon-{network} instead of -official)
176
- &.ap-icon-facebook { color: var(--ref-color-facebook-100); }
177
- &.ap-icon-instagram { color: var(--ref-color-instagram-100); }
178
- &.ap-icon-linkedin { color: var(--ref-color-linkedin-100); }
179
- &.ap-icon-youtube { color: var(--ref-color-youtube-100); }
176
+ &.ap-icon-facebook {
177
+ color: var(--ref-color-facebook-100);
178
+ }
179
+ &.ap-icon-instagram {
180
+ color: var(--ref-color-instagram-100);
181
+ }
182
+ &.ap-icon-linkedin {
183
+ color: var(--ref-color-linkedin-100);
184
+ }
185
+ &.ap-icon-youtube {
186
+ color: var(--ref-color-youtube-100);
187
+ }
180
188
  }
181
189
  }
182
190
 
package/assets/style/css-ui/_button.scss CHANGED
@@ -46,10 +46,6 @@
46
46
  @include m.focus-ring;
47
47
  }
48
48
 
49
- &.inverse {
50
- flex-direction: row-reverse;
51
- }
52
-
53
49
  // Primary variants
54
50
  &.primary {
55
51
  color: var(--ref-color-white);
@@ -101,7 +97,14 @@
101
97
 
102
98
  &.grey {
103
99
  border: 1px solid var(--ref-color-grey-20);
104
- @include btn.btn-stroked-color('grey', $text-color-shade: 80, $border-color-shade: 20, $hover-border-shade: 40, $active-border-shade: 60, $focus-border-shade: 20);
100
+ @include btn.btn-stroked-color(
101
+ 'grey',
102
+ $text-color-shade: 80,
103
+ $border-color-shade: 20,
104
+ $hover-border-shade: 40,
105
+ $active-border-shade: 60,
106
+ $focus-border-shade: 20
107
+ );
105
108
  }
106
109
 
107
110
  &.blue {
@@ -242,8 +245,9 @@
242
245
  animation: slide 1.5s ease-in-out infinite;
243
246
  }
244
247
 
245
- // Locked icon — lives inside .ap-button.locked, no wrapper needed
246
- .ap-button.locked > .ap-locked-symbol {
248
+ // Locked icon — lives inside .ap-button.locked or .ap-icon-button.locked, no wrapper needed
249
+ .ap-button.locked > .ap-locked-symbol,
250
+ .ap-icon-button.locked > .ap-locked-symbol {
247
251
  position: absolute;
248
252
  top: -6px;
249
253
  right: -6px;
package/assets/style/css-ui/_card.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  .ap-card {
2
- background-color: var(--ref-color-white);
3
- border: 1px solid var(--ref-color-grey-10);
4
- border-radius: var(--ref-border-radius-md);
5
- display: flex;
6
- flex-direction: column;
7
- gap: var(--ref-spacing-sm);
8
- padding: var(--ref-spacing-sm);
2
+ background-color: var(--ref-color-white);
3
+ border: 1px solid var(--ref-color-grey-10);
4
+ border-radius: var(--ref-border-radius-md);
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: var(--ref-spacing-sm);
8
+ padding: var(--ref-spacing-sm);
9
9
  }
10
10
 
11
11
  .ap-card-title {
12
- font-size: var(--ref-font-size-md);
13
- font-weight: var(--ref-font-weight-bold);
14
- line-height: var(--ref-font-line-height-lg);
15
- color: var(--ref-color-grey-100);
16
- margin: 0;
12
+ font-size: var(--ref-font-size-md);
13
+ font-weight: var(--ref-font-weight-bold);
14
+ line-height: var(--ref-font-line-height-lg);
15
+ color: var(--ref-color-grey-100);
16
+ margin: 0;
17
17
  }
package/assets/style/css-ui/_checkbox.scss CHANGED
@@ -12,16 +12,35 @@
12
12
  @include m.sr-only;
13
13
  }
14
14
 
15
- // Label positioning
16
- &.label-left {
17
- flex-direction: row-reverse;
18
- }
19
-
20
15
  &.full-width {
21
16
  justify-content: space-between;
22
17
  width: 100%;
23
18
  }
24
19
 
20
+ // No-label variant: larger hit area with background feedback
21
+ &:not(:has(> span:not(:empty))) {
22
+ padding: 10px;
23
+ border-radius: var(--ref-border-radius-md);
24
+ transition: background-color 0.15s;
25
+
26
+ // Hover: grey background
27
+ &:hover:not(:has(input:disabled)) {
28
+ background: var(--ref-color-grey-05);
29
+ }
30
+
31
+ // Checked hover: blue background
32
+ &:hover:not(:has(input:disabled)):has(input:checked),
33
+ &:hover:not(:has(input:disabled)).indeterminate {
34
+ background: var(--ref-color-electric-blue-10);
35
+ }
36
+
37
+ // Checked active: darker blue background
38
+ &:active:not(:has(input:disabled)):has(input:checked),
39
+ &:active:not(:has(input:disabled)).indeterminate {
40
+ background: var(--ref-color-electric-blue-20);
41
+ }
42
+ }
43
+
25
44
  // Disabled container
26
45
  &:has(input:disabled) {
27
46
  cursor: default;
@@ -38,7 +57,9 @@
38
57
  background: var(--ref-color-white);
39
58
  box-sizing: border-box;
40
59
  flex-shrink: 0;
41
- transition: background-color 0.15s, border-color 0.15s;
60
+ transition:
61
+ background-color 0.15s,
62
+ border-color 0.15s;
42
63
 
43
64
  // Checkmark via CSS (no inline SVG needed)
44
65
  &::after {
@@ -46,7 +67,7 @@
46
67
  display: none;
47
68
  width: 10px;
48
69
  height: 10px;
49
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 5L4 8L9 2' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
70
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.238 3.337a.92.92 0 0 1 .025 1.301l-7.7 8a.92.92 0 0 1-1.326 0l-3.5-3.636a.92.92 0 1 1 1.326-1.276L5.9 10.674l7.037-7.312a.92.92 0 0 1 1.301-.025' clip-rule='evenodd' fill='white'/%3E%3C/svg%3E");
50
71
  mask-size: contain;
51
72
  mask-repeat: no-repeat;
52
73
  background-color: var(--ref-color-white);
@@ -129,9 +150,11 @@
129
150
  border-color: var(--ref-color-grey-20);
130
151
  }
131
152
 
132
- // Focus ring (keyboard only)
133
- &:has(input:focus-visible) > i {
134
- @include m.focus-ring-3px;
153
+ // Focus ring (any focus on hover-capable devices, matching original component)
154
+ @media (hover: hover) {
155
+ &:has(input:focus:not(:disabled)) > i {
156
+ @include m.focus-ring-3px;
157
+ }
135
158
  }
136
159
 
137
160
  // Error state
package/assets/style/css-ui/_datepicker.scss CHANGED
@@ -239,7 +239,9 @@
239
239
  color: var(--ref-color-grey-80);
240
240
  text-align: left;
241
241
  cursor: pointer;
242
- transition: background-color 0.15s ease, color 0.15s ease;
242
+ transition:
243
+ background-color 0.15s ease,
244
+ color 0.15s ease;
243
245
 
244
246
  &:hover:not(.active):not(:disabled) {
245
247
  color: var(--ref-color-electric-blue-100);
package/assets/style/css-ui/_dialog.scss CHANGED
@@ -1,74 +1,74 @@
1
1
  .ap-dialog {
2
- background-color: var(--ref-color-white);
3
- border-radius: var(--ref-border-radius-md);
4
- display: flex;
5
- flex-direction: column;
6
- overflow: hidden;
7
- position: relative;
2
+ background-color: var(--ref-color-white);
3
+ border-radius: var(--ref-border-radius-md);
4
+ display: flex;
5
+ flex-direction: column;
6
+ overflow: hidden;
7
+ position: relative;
8
8
  }
9
9
 
10
10
  .ap-dialog-header {
11
- display: flex;
12
- flex-direction: column;
13
- gap: var(--ref-spacing-xxxs);
14
- padding: var(--ref-spacing-lg) var(--ref-spacing-lg) 0;
15
- padding-right: 64px;
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: var(--ref-spacing-xxxs);
14
+ padding: var(--ref-spacing-lg) var(--ref-spacing-lg) 0;
15
+ padding-right: 64px;
16
16
  }
17
17
 
18
18
  .ap-dialog-title {
19
- font-size: var(--ref-font-size-xxl);
20
- font-weight: var(--ref-font-weight-bold);
21
- line-height: var(--ref-font-line-height-xl);
22
- color: var(--ref-color-grey-100);
23
- margin: 0;
19
+ font-size: var(--ref-font-size-xxl);
20
+ font-weight: var(--ref-font-weight-bold);
21
+ line-height: var(--ref-font-line-height-xl);
22
+ color: var(--ref-color-grey-100);
23
+ margin: 0;
24
24
  }
25
25
 
26
26
  .ap-dialog-subtitle {
27
- font-size: var(--ref-font-size-md);
28
- line-height: var(--ref-font-line-height-lg);
29
- color: var(--ref-color-grey-80);
27
+ font-size: var(--ref-font-size-md);
28
+ line-height: var(--ref-font-line-height-lg);
29
+ color: var(--ref-color-grey-80);
30
30
  }
31
31
 
32
32
  .ap-dialog-content {
33
- display: flex;
34
- flex-direction: column;
35
- gap: var(--ref-spacing-md);
36
- padding: var(--ref-spacing-md) var(--ref-spacing-lg);
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: var(--ref-spacing-md);
36
+ padding: var(--ref-spacing-md) var(--ref-spacing-lg);
37
37
  }
38
38
 
39
39
  .ap-dialog-footer {
40
- border-top: 1px solid var(--ref-color-grey-10);
41
- display: flex;
42
- align-items: center;
43
- gap: var(--ref-spacing-sm);
44
- padding: var(--ref-spacing-sm) var(--ref-spacing-lg);
40
+ border-top: 1px solid var(--ref-color-grey-10);
41
+ display: flex;
42
+ align-items: center;
43
+ gap: var(--ref-spacing-sm);
44
+ padding: var(--ref-spacing-sm) var(--ref-spacing-lg);
45
45
  }
46
46
 
47
47
  .ap-dialog-footer-left {
48
- display: flex;
49
- align-items: center;
50
- gap: var(--ref-spacing-sm);
48
+ display: flex;
49
+ align-items: center;
50
+ gap: var(--ref-spacing-sm);
51
51
  }
52
52
 
53
53
  .ap-dialog-footer-right {
54
- display: flex;
55
- align-items: center;
56
- gap: var(--ref-spacing-sm);
57
- flex: 1;
58
- justify-content: flex-end;
54
+ display: flex;
55
+ align-items: center;
56
+ gap: var(--ref-spacing-sm);
57
+ flex: 1;
58
+ justify-content: flex-end;
59
59
  }
60
60
 
61
61
  .ap-dialog-close {
62
- position: absolute;
63
- top: 20px;
64
- right: 20px;
65
- padding: 10px;
66
- border-radius: var(--ref-border-radius-md);
67
- cursor: pointer;
68
- background: none;
69
- border: none;
70
- color: var(--ref-color-grey-100);
71
- display: flex;
72
- align-items: center;
73
- justify-content: center;
62
+ position: absolute;
63
+ top: 20px;
64
+ right: 20px;
65
+ padding: 10px;
66
+ border-radius: var(--ref-border-radius-md);
67
+ cursor: pointer;
68
+ background: none;
69
+ border: none;
70
+ color: var(--ref-color-grey-100);
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
74
  }
package/assets/style/css-ui/_icon-button.scss CHANGED
@@ -3,7 +3,12 @@
3
3
  @use '../button-mixins' as btn;
4
4
 
5
5
  .ap-icon-button {
6
- display: flex;
6
+ &.ap-icon-button {
7
+ display: flex;
8
+ width: var(--comp-icon-button-width);
9
+ height: var(--comp-icon-button-height);
10
+ }
11
+
7
12
  justify-content: center;
8
13
  align-items: center;
9
14
  @include m.fixed-size(var(--comp-icon-button-width));
@@ -13,13 +18,16 @@
13
18
  padding: var(--comp-icon-button-padding);
14
19
  position: relative;
15
20
  cursor: pointer;
16
- transition: border-color 0.25s, background-color 0.25s;
21
+ transition:
22
+ border-color 0.25s,
23
+ background-color 0.25s;
17
24
  box-sizing: border-box;
18
25
 
19
26
  > i {
20
27
  color: var(--ref-color-grey-60);
21
- @include m.fixed-size(calc(var(--comp-icon-button-height) - (var(--comp-icon-button-padding) * 2)));
28
+ font-size: calc(var(--comp-icon-button-height) - (var(--comp-icon-button-padding) * 2));
22
29
  flex-shrink: 0;
30
+ line-height: 1;
23
31
  }
24
32
 
25
33
  // Default hover/active (flat, no color)
@@ -45,7 +53,9 @@
45
53
 
46
54
  // Color variants — flat
47
55
  &.blue {
48
- > i { color: var(--ref-color-electric-blue-100); }
56
+ > i {
57
+ color: var(--ref-color-electric-blue-100);
58
+ }
49
59
 
50
60
  &:hover:not(.stroked):not(.locked):not(:disabled) {
51
61
  background: var(--ref-color-electric-blue-05);
@@ -55,11 +65,15 @@
55
65
  background: var(--ref-color-electric-blue-10);
56
66
  }
57
67
 
58
- &:disabled > i { color: var(--ref-color-electric-blue-20); }
68
+ &:disabled > i {
69
+ color: var(--ref-color-electric-blue-20);
70
+ }
59
71
  }
60
72
 
61
73
  &.green {
62
- > i { color: var(--ref-color-green-100); }
74
+ > i {
75
+ color: var(--ref-color-green-100);
76
+ }
63
77
 
64
78
  &:hover:not(.stroked):not(.locked):not(:disabled) {
65
79
  background: var(--ref-color-green-10);
@@ -69,11 +83,15 @@
69
83
  background: var(--ref-color-green-20);
70
84
  }
71
85
 
72
- &:disabled > i { color: var(--ref-color-green-20); }
86
+ &:disabled > i {
87
+ color: var(--ref-color-green-20);
88
+ }
73
89
  }
74
90
 
75
91
  &.red {
76
- > i { color: var(--ref-color-red-100); }
92
+ > i {
93
+ color: var(--ref-color-red-100);
94
+ }
77
95
 
78
96
  &:hover:not(.stroked):not(.locked):not(:disabled) {
79
97
  background: var(--ref-color-red-10);
@@ -83,7 +101,9 @@
83
101
  background: var(--ref-color-red-20);
84
102
  }
85
103
 
86
- &:disabled > i { color: var(--ref-color-red-20); }
104
+ &:disabled > i {
105
+ color: var(--ref-color-red-20);
106
+ }
87
107
  }
88
108
 
89
109
  // Stroked variant
@@ -107,25 +127,43 @@
107
127
  &.blue:not(.loading):not(.locked) {
108
128
  border-color: var(--ref-color-electric-blue-100);
109
129
 
110
- &:hover:not(:disabled) { border-color: var(--ref-color-electric-blue-60); }
111
- &:active:not(:disabled) { border-color: var(--ref-color-electric-blue-100); }
112
- &:disabled { border-color: var(--ref-color-electric-blue-20); }
130
+ &:hover:not(:disabled) {
131
+ border-color: var(--ref-color-electric-blue-60);
132
+ }
133
+ &:active:not(:disabled) {
134
+ border-color: var(--ref-color-electric-blue-100);
135
+ }
136
+ &:disabled {
137
+ border-color: var(--ref-color-electric-blue-20);
138
+ }
113
139
  }
114
140
 
115
141
  &.green:not(.loading):not(.locked) {
116
142
  border-color: var(--ref-color-green-100);
117
143
 
118
- &:hover:not(:disabled) { border-color: var(--ref-color-green-60); }
119
- &:active:not(:disabled) { border-color: var(--ref-color-green-100); }
120
- &:disabled { border-color: var(--ref-color-green-20); }
144
+ &:hover:not(:disabled) {
145
+ border-color: var(--ref-color-green-60);
146
+ }
147
+ &:active:not(:disabled) {
148
+ border-color: var(--ref-color-green-100);
149
+ }
150
+ &:disabled {
151
+ border-color: var(--ref-color-green-20);
152
+ }
121
153
  }
122
154
 
123
155
  &.red:not(.loading):not(.locked) {
124
156
  border-color: var(--ref-color-red-100);
125
157
 
126
- &:hover:not(:disabled) { border-color: var(--ref-color-red-60); }
127
- &:active:not(:disabled) { border-color: var(--ref-color-red-100); }
128
- &:disabled { border-color: var(--ref-color-red-20); }
158
+ &:hover:not(:disabled) {
159
+ border-color: var(--ref-color-red-60);
160
+ }
161
+ &:active:not(:disabled) {
162
+ border-color: var(--ref-color-red-100);
163
+ }
164
+ &:disabled {
165
+ border-color: var(--ref-color-red-20);
166
+ }
129
167
  }
130
168
  }
131
169
 
package/assets/style/css-ui/_infobox.scss CHANGED
@@ -10,7 +10,8 @@
10
10
  line-height: var(--ref-font-line-height-sm);
11
11
  align-items: flex-start;
12
12
  color: var(--ref-color-grey-100);
13
- padding: var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);
13
+ padding: var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom)
14
+ var(--comp-infobox-padding-left);
14
15
  border-radius: var(--comp-infobox-border-radius);
15
16
  overflow: hidden;
16
17
  font-family: var(--comp-infobox-text-title-font-family);
@@ -44,29 +45,45 @@
44
45
  }
45
46
  }
46
47
 
47
- // Variants
48
+ // Variants — expected icons: ap-icon-info_fill, ap-icon-warning_fill, ap-icon-error_fill, ap-icon-rounded-check_fill
48
49
  &.info {
49
50
  background-color: var(--comp-infobox-info-background-color);
50
- > i { color: var(--comp-infobox-info-icon-color); }
51
- &::before { background-color: var(--comp-infobox-info-border-left-color); }
51
+ > i {
52
+ color: var(--comp-infobox-info-icon-color);
53
+ }
54
+ &::before {
55
+ background-color: var(--comp-infobox-info-border-left-color);
56
+ }
52
57
  }
53
58
 
54
59
  &.warning {
55
60
  background-color: var(--comp-infobox-warning-background-color);
56
- > i { color: var(--comp-infobox-warning-icon-color); }
57
- &::before { background-color: var(--comp-infobox-warning-border-left-color); }
61
+ > i {
62
+ color: var(--comp-infobox-warning-icon-color);
63
+ }
64
+ &::before {
65
+ background-color: var(--comp-infobox-warning-border-left-color);
66
+ }
58
67
  }
59
68
 
60
69
  &.error {
61
70
  background-color: var(--comp-infobox-error-background-color);
62
- > i { color: var(--comp-infobox-error-icon-color); }
63
- &::before { background-color: var(--comp-infobox-error-border-left-color); }
71
+ > i {
72
+ color: var(--comp-infobox-error-icon-color);
73
+ }
74
+ &::before {
75
+ background-color: var(--comp-infobox-error-border-left-color);
76
+ }
64
77
  }
65
78
 
66
79
  &.success {
67
80
  background-color: var(--comp-infobox-success-background-color);
68
- > i { color: var(--comp-infobox-success-icon-color); }
69
- &::before { background-color: var(--comp-infobox-success-border-left-color); }
81
+ > i {
82
+ color: var(--comp-infobox-success-icon-color);
83
+ }
84
+ &::before {
85
+ background-color: var(--comp-infobox-success-border-left-color);
86
+ }
70
87
  }
71
88
  }
72
89
 
package/assets/style/css-ui/_input.scss CHANGED
@@ -57,11 +57,6 @@
57
57
  border-color: var(--comp-input-border-success-color);
58
58
  }
59
59
 
60
- // Icon on right
61
- &.inverse {
62
- flex-direction: row-reverse;
63
- }
64
-
65
60
  // Input — implicit > input
66
61
  > input {
67
62
  flex: 1;