@awes-io/ui 2.74.1 → 2.75.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 (20) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/assets/css/components/alert.css +9 -1
  3. package/assets/css/components/birthday-picker.css +11 -1
  4. package/assets/css/components/button-nav.css +2 -6
  5. package/assets/css/components/button.css +17 -1
  6. package/assets/css/components/icon-menu-item.css +43 -43
  7. package/assets/css/components/mobile-menu.css +2 -0
  8. package/assets/css/components/page-headline.css +8 -8
  9. package/assets/css/components/select.css +3 -0
  10. package/assets/css/components/switch-field.css +51 -23
  11. package/assets/css/components/table.css +44 -28
  12. package/assets/css/components/tags.css +6 -4
  13. package/assets/css/components/text-field.css +31 -10
  14. package/assets/css/components/tooltip.css +1 -1
  15. package/components/1_atoms/AwSwitcher.vue +1 -4
  16. package/components/2_molecules/AwAlert.vue +1 -1
  17. package/components/5_layouts/_AwMobileMenu.vue +1 -0
  18. package/components/5_layouts/_AwMobileMenuNav.vue +4 -2
  19. package/package.json +2 -2
  20. package/tailwind/colors.js +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.75.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.74.1...@awes-io/ui@2.75.0) (2023-10-12)
7
+
8
+
9
+ ### Features
10
+
11
+ * change style for alert, button nav and change menu logic ([62f96d8](https://github.com/awes-io/client/commit/62f96d84af39dee2bd1e5569451cb57901d262fa))
12
+ * partial dark theme support ([b3d1a9b](https://github.com/awes-io/client/commit/b3d1a9bbb009bf6a447f6ee748d9165450f33dbe))
13
+
14
+
15
+
16
+
17
+
6
18
  ## [2.74.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.74.0...@awes-io/ui@2.74.1) (2023-10-11)
7
19
 
8
20
 
package/assets/css/components/alert.css CHANGED
@@ -34,9 +34,17 @@
34
34
  font-size: 0.875rem;
35
35
 
36
36
  .aw-icon,
37
- a {
37
+ a, button {
38
38
  color: var(--aw-alert-on-color);
39
39
  }
40
+
41
+ a, button {
42
+ white-space: nowrap;
43
+ }
44
+
45
+ a {
46
+ text-decoration: underline;
47
+ }
40
48
  }
41
49
 
42
50
  &--title-start {
package/assets/css/components/birthday-picker.css CHANGED
@@ -1,9 +1,15 @@
1
1
  .aw-birthday-picker {
2
+ .aw-select__dropdown {
3
+ min-width: auto;
4
+ }
5
+
2
6
  &__wrap {
3
- @apply border rounded bg-surface justify-between;
7
+ @apply border bg-surface justify-between;
4
8
  display: flex;
5
9
  align-items: center;
6
10
  text-align: center;
11
+ border-radius: 0.625rem;
12
+ margin-top: 0.5rem;
7
13
  transition: 200ms border-color;
8
14
 
9
15
  &.has-error {
@@ -23,6 +29,10 @@
23
29
  border-radius: 0;
24
30
  flex: 1 1 auto;
25
31
 
32
+ input {
33
+ border-radius: 0.5rem;
34
+ }
35
+
26
36
  & + & {
27
37
  @apply border-l;
28
38
  border-top-left-radius: 0;
package/assets/css/components/button-nav.css CHANGED
@@ -52,10 +52,9 @@
52
52
  }
53
53
 
54
54
  &__toggler > span {
55
- padding: 1.125rem 1.25rem;
55
+ padding: 0.875rem 1.25rem;
56
56
  width: 100%;
57
57
  border-radius: 0.5rem;
58
- min-height: 2.75rem;
59
58
  }
60
59
 
61
60
  &__toggler:focus, &__toggler > span:focus {
@@ -118,7 +117,6 @@
118
117
 
119
118
  & > span {
120
119
  border-radius: 0.5rem;
121
- min-height: 2.5rem;
122
120
  }
123
121
  }
124
122
  }
@@ -153,9 +151,8 @@
153
151
  }
154
152
 
155
153
  & > span {
156
- min-height: 2.25rem;
157
154
  border-radius: 0.5rem;
158
- padding: 0.875rem 1.25rem;
155
+ padding: 0.625rem 1.25rem;
159
156
  }
160
157
  }
161
158
 
@@ -165,7 +162,6 @@
165
162
 
166
163
  & > span {
167
164
  border-radius: 0.5rem;
168
- min-height: 2.25rem;
169
165
  }
170
166
  }
171
167
  }
package/assets/css/components/button.css CHANGED
@@ -505,7 +505,7 @@
505
505
  }
506
506
  }
507
507
 
508
- :root[data-dark='true'] {
508
+ [data-dark='true'] {
509
509
  .aw-button {
510
510
  &.theme-ghost.color-default .aw-button__overlay {
511
511
  display: none;
@@ -521,6 +521,22 @@
521
521
  }
522
522
  }
523
523
 
524
+ [data-dark='false'] {
525
+ .aw-button {
526
+ &.theme-ghost.color-default .aw-button__overlay {
527
+ display: block;
528
+ }
529
+
530
+ &.theme-ghost.color-default {
531
+ box-shadow: none;
532
+
533
+ /* &:hover {
534
+ background: var(--c-mono-200);
535
+ } */
536
+ }
537
+ }
538
+ }
539
+
524
540
  .aw-button.theme-solid,
525
541
  .aw-button .aw-button__overlay,
526
542
  .aw-button.theme-circle,
package/assets/css/components/icon-menu-item.css CHANGED
@@ -12,7 +12,7 @@
12
12
  .aw-icon-menu-item {
13
13
  &__icon,
14
14
  &__text {
15
- color: var(--c-mono-100);
15
+ color: var(--c-mono-100);
16
16
  }
17
17
  }
18
18
  }
@@ -21,44 +21,44 @@
21
21
  .aw-icon-menu-item {
22
22
  &__icon,
23
23
  &__text {
24
- color: var(--c-mono-100);
24
+ color: var(--c-mono-100);
25
25
  }
26
26
  }
27
27
  }
28
28
 
29
29
  &__icon {
30
- display: block;
31
- color: var(--c-mono-300);
32
- transition: 60ms color;
30
+ display: block;
31
+ color: var(--c-mono-300);
32
+ transition: 60ms color;
33
33
 
34
- &-block {
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- flex-direction: column;
34
+ &-block {
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ flex-direction: column;
39
39
 
40
- padding: 0.75rem;
40
+ padding: 0.75rem;
41
41
 
42
- width: 100%;
43
- position: relative;
44
- }
42
+ width: 100%;
43
+ position: relative;
44
+ }
45
45
  }
46
46
 
47
47
  &__text {
48
- display: block;
48
+ display: block;
49
49
 
50
- font-size: 0.5625rem;
51
- font-weight: 400;
52
- line-height: 0.625rem;
53
- color: var(--c-mono-400);
54
- transition: 60ms color;
50
+ font-size: 0.5625rem;
51
+ font-weight: 400;
52
+ line-height: 0.625rem;
53
+ color: var(--c-mono-400);
54
+ transition: 60ms color;
55
55
 
56
- text-align: center;
56
+ text-align: center;
57
57
 
58
- white-space: nowrap;
59
- text-overflow: ellipsis;
60
- overflow: hidden;
61
- width: 100%;
58
+ white-space: nowrap;
59
+ text-overflow: ellipsis;
60
+ overflow: hidden;
61
+ width: 100%;
62
62
  }
63
63
 
64
64
  &__icon-badge {
@@ -88,38 +88,38 @@
88
88
  .aw-icon-menu-item {
89
89
  &--active {
90
90
  &:before {
91
- border-radius: 0.625rem;
92
- position: absolute;
93
- top: 50%;
94
- left: 50%;
95
- transform: translate(-50%, -50%);
96
- width: 3.5rem;
97
- height: 2.875rem;
98
- content: '';
99
- background-color: var(--c-mono-800);
91
+ border-radius: 0.625rem;
92
+ position: absolute;
93
+ top: 50%;
94
+ left: 50%;
95
+ transform: translate(-50%, -50%);
96
+ width: 3.5rem;
97
+ height: 2.875rem;
98
+ content: '';
99
+ background-color: var(--c-mono-800);
100
100
  }
101
101
  }
102
102
  }
103
103
 
104
- :root[data-dark="true"] {
104
+ [data-dark='true'] {
105
105
  .aw-icon-menu-item {
106
106
  &--active {
107
107
  &:before {
108
- background-color: rgba(var(--c-mono-700-rgb), 0.5);
108
+ background-color: rgba(var(--c-mono-700-rgb), 0.5);
109
109
  }
110
110
  }
111
111
  }
112
112
  }
113
113
  }
114
114
 
115
- :root[data-dark="true"] {
115
+ [data-dark='true'] {
116
116
  .aw-icon-menu-item {
117
117
  &:hover {
118
118
  .aw-icon-menu-item {
119
119
  &__icon,
120
120
  &__text {
121
- color: rgba(var(--c-on-surface-rgb), 0.9)
122
- }
121
+ color: rgba(var(--c-on-surface-rgb), 0.9);
122
+ }
123
123
  }
124
124
  }
125
125
 
@@ -127,17 +127,17 @@
127
127
  .aw-icon-menu-item {
128
128
  &__icon,
129
129
  &__text {
130
- color: rgba(var(--c-on-surface-rgb), 0.9)
131
- }
130
+ color: rgba(var(--c-on-surface-rgb), 0.9);
131
+ }
132
132
  }
133
133
  }
134
134
 
135
135
  &__icon {
136
- color: rgba(var(--c-on-surface-rgb), 0.8)
136
+ color: rgba(var(--c-on-surface-rgb), 0.8);
137
137
  }
138
138
 
139
139
  &__text {
140
- color: var(--c-mono-400);
140
+ color: var(--c-mono-400);
141
141
  }
142
142
  }
143
143
  }
package/assets/css/components/mobile-menu.css CHANGED
@@ -68,6 +68,8 @@
68
68
 
69
69
  .aw-avatar {
70
70
  --ui-avatar-size: 2.5rem !important;
71
+ --ui-avatar-font-size: 0.875rem !important;
72
+ font-weight: 900;
71
73
  }
72
74
 
73
75
  &-name {
package/assets/css/components/page-headline.css CHANGED
@@ -108,27 +108,27 @@
108
108
  }
109
109
 
110
110
  &__back {
111
- border-radius: 0.625rem;
112
- width: 2.5rem;
113
- height: 2.5rem;
111
+ border-radius: 0.625rem;
112
+ width: 2.5rem;
113
+ height: 2.5rem;
114
114
  }
115
115
  }
116
116
  }
117
117
 
118
- :root[data-dark="false"] {
118
+ [data-dark='false'] {
119
119
  .aw-page-headline {
120
120
  &__back {
121
- background: var(--c-mono-800);
122
- color: var(--c-on-mono-800);
121
+ background: var(--c-mono-800);
122
+ color: var(--c-on-mono-800);
123
123
 
124
124
  &:hover {
125
- background: var(--c-mono-700);
125
+ background: var(--c-mono-700);
126
126
  }
127
127
  }
128
128
  }
129
129
  }
130
130
 
131
- :root[data-dark="true"] {
131
+ [data-dark='true'] {
132
132
  .aw-page-headline {
133
133
  &__back {
134
134
  background: var(--c-mono-800);
package/assets/css/components/select.css CHANGED
@@ -91,6 +91,9 @@
91
91
  }
92
92
 
93
93
  &__mobile-input {
94
+ position: sticky;
95
+ top: 0;
96
+
94
97
  &.opened,
95
98
  & .aw-text-field__element {
96
99
  border-bottom-left-radius: 0;
package/assets/css/components/switch-field.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .aw-switch-field {
2
- @apply relative py-1;
2
+ @apply flex relative py-1;
3
3
 
4
4
  &__element {
5
5
  @apply bg-surface border;
@@ -7,8 +7,8 @@
7
7
  cursor: pointer;
8
8
  appearance: none;
9
9
  vertical-align: middle;
10
- width: theme('spacing.5', 1.25rem);
11
- height: theme('spacing.5', 1.25rem);
10
+ width: theme('spacing.8', 2rem);
11
+ height: theme('spacing.8', 2rem);
12
12
  /* border: 1px solid theme('colors.muted');
13
13
  color: theme('colors.secondary', blue);
14
14
  background: theme('colors.white', white); */
@@ -17,7 +17,7 @@
17
17
  box-shadow: none;
18
18
 
19
19
  &:checked {
20
- @apply bg-success;
20
+ @apply bg-accent;
21
21
  border-color: inherit;
22
22
  background-size: 100% 100%;
23
23
  }
@@ -32,26 +32,38 @@
32
32
  } */
33
33
  }
34
34
 
35
-
36
35
  /**
37
36
  * Checkbox
38
37
  */
39
38
 
40
39
  &.is-checkbox &__element {
41
- border-radius: theme('borderRadius.default', 0.25rem);
40
+ border-radius: theme('spacing.2', 0.5rem);
42
41
  flex-shrink: 0;
43
42
 
43
+ background-size: 20px 20px;
44
+ background-position: center;
45
+ background-repeat: no-repeat;
46
+
47
+ &:disabled {
48
+ @apply bg-mono-900;
49
+ }
50
+
44
51
  &:checked {
45
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
52
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='none'%3E%3Cpath fill='%23fff' d='m7 13.8-3-3.1a.8.8 0 0 0-1.3 1.1l3.8 3.8a.8.8 0 0 0 1.2 0l9.1-9.2a.8.8 0 0 0-1.1-1.2L7 13.8Z'/%3E%3C/svg%3E");
46
53
  }
47
54
 
48
- &--partial {
49
- &:checked {
50
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 22 22' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.77765 11.5553H17.2224C17.4286 11.5553 17.6264 11.4734 17.7722 11.3275C17.9181 11.1817 18 10.9839 18 10.7776C18 10.5714 17.9181 10.3736 17.7722 10.2278C17.6264 10.0819 17.4286 10 17.2224 10H4.77765C4.5714 10 4.37361 10.0819 4.22777 10.2278C4.08193 10.3736 4 10.5714 4 10.7776C4 10.9839 4.08193 11.1817 4.22777 11.3275C4.37361 11.4734 4.5714 11.5553 4.77765 11.5553V11.5553Z'/%3e%3c/svg%3e");
51
- }
55
+ &:checked:disabled {
56
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='none'%3E%3Cpath fill='%23838587' d='m7 13.8-3-3.1a.8.8 0 0 0-1.3 1.1l3.8 3.8a.8.8 0 0 0 1.2 0l9.1-9.2a.8.8 0 0 0-1.1-1.2L7 13.8Z'/%3E%3C/svg%3E");
52
57
  }
53
- }
54
58
 
59
+ &--partial:checked {
60
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23fff' d='M3.3 10.8h13.4a.8.8 0 0 0 0-1.6H3.3a.8.8 0 1 0 0 1.6Z'/%3E%3C/svg%3E");
61
+ }
62
+
63
+ &--partial:checked:disabled {
64
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23838587' d='M3.3 10.8h13.4a.8.8 0 0 0 0-1.6H3.3a.8.8 0 1 0 0 1.6Z'/%3E%3C/svg%3E");
65
+ }
66
+ }
55
67
 
56
68
  /**
57
69
  * Radio
@@ -65,14 +77,13 @@
65
77
  }
66
78
  }
67
79
 
68
-
69
80
  /**
70
81
  * Switcher
71
82
  */
72
83
 
73
84
  &.is-switcher {
74
85
  display: flex;
75
- align-items: center;
86
+ align-items: flex-start;
76
87
  }
77
88
 
78
89
  &.is-switcher &__label {
@@ -82,7 +93,7 @@
82
93
  &__switch {
83
94
  @apply bg-mono-600 relative;
84
95
  flex-shrink: 0;
85
- margin: 0.25rem 0;
96
+ margin: 0.15rem 0;
86
97
  cursor: pointer;
87
98
  order: -1;
88
99
  border-radius: 90px;
@@ -93,7 +104,7 @@
93
104
  color: var(--c-on-overlay, '#fff');
94
105
  top: 50%;
95
106
  transform: translateY(-50%);
96
- transition: opacity .15s ease;
107
+ transition: opacity 0.15s ease;
97
108
  }
98
109
 
99
110
  &-circle {
@@ -115,11 +126,17 @@
115
126
  outline: theme('focusOutline');
116
127
  }
117
128
 
118
- &.is-switcher &__element:not(:checked) ~ &__switch .aw-switch-field__switch-icon--on {
129
+ &.is-switcher
130
+ &__element:not(:checked)
131
+ ~ &__switch
132
+ .aw-switch-field__switch-icon--on {
119
133
  opacity: 0;
120
134
  }
121
135
 
122
- &.is-switcher &__element:checked ~ &__switch .aw-switch-field__switch-icon--off {
136
+ &.is-switcher
137
+ &__element:checked
138
+ ~ &__switch
139
+ .aw-switch-field__switch-icon--off {
123
140
  opacity: 0;
124
141
  }
125
142
 
@@ -197,17 +214,21 @@
197
214
  }
198
215
  }
199
216
 
200
-
201
217
  /**
202
218
  * Label styles
203
219
  */
220
+ &__label {
221
+ padding-top: 0.275rem;
222
+ font-size: 0.875rem;
223
+ line-height: 1.5;
224
+ }
225
+
204
226
  &__element + &__label {
205
- padding-left: theme('spacing.2', 0.5rem);
227
+ padding-left: theme('spacing.4', 1rem);
206
228
  cursor: pointer;
207
229
  vertical-align: middle;
208
230
  }
209
231
 
210
-
211
232
  /**
212
233
  * Error styles
213
234
  */
@@ -220,7 +241,6 @@
220
241
  @apply border border-error;
221
242
  }
222
243
 
223
-
224
244
  /**
225
245
  * Disabled style
226
246
  */
@@ -229,7 +249,15 @@
229
249
  &__element[disabled] + &__label {
230
250
  cursor: not-allowed;
231
251
  user-select: none;
232
- opacity: .5;
252
+ /* opacity: 0.5; */
253
+ }
254
+
255
+ &__element[disabled] + &__label {
256
+ @apply text-mono-400;
257
+ }
258
+
259
+ &__element[disabled] + &__label a {
260
+ pointer-events: none;
233
261
  }
234
262
 
235
263
  &.is-switcher &__element[disabled] ~ &__switch {
package/assets/css/components/table.css CHANGED
@@ -4,6 +4,18 @@
4
4
  margin-left: calc(-1 * var(--container-padding));
5
5
  margin-right: calc(-1 * var(--container-padding));
6
6
 
7
+ &--without-top-radius {
8
+ @apply rounded-t-none;
9
+
10
+ .aw-table__scroller {
11
+ @apply rounded-t-none;
12
+ }
13
+
14
+ .aw-table-builder__empty-filter-container, .aw-table-builder__empty-container {
15
+ @apply rounded-t-none;
16
+ }
17
+ }
18
+
7
19
  &--desktop {
8
20
  margin-left: 0;
9
21
  margin-right: 0;
@@ -36,8 +48,8 @@
36
48
  }
37
49
 
38
50
  &__head > tr {
39
- @apply bg-surface;
40
- border-bottom: 0;
51
+ @apply bg-surface;
52
+ border-bottom: 0;
41
53
  }
42
54
 
43
55
  &__scroller {
@@ -47,15 +59,31 @@
47
59
  border-radius: 15px;
48
60
 
49
61
  background:
50
- /* Shadow covers */
51
- linear-gradient(90deg, var(--c-surface) 30%, rgba(var(--c-surface-rgb),0)),
52
- linear-gradient(90deg, rgba(var(--c-surface-rgb),0), var(--c-surface) 70%) 100% 0,
53
-
62
+ /* Shadow covers */ linear-gradient(
63
+ 90deg,
64
+ var(--c-surface) 30%,
65
+ rgba(var(--c-surface-rgb), 0)
66
+ ),
67
+ linear-gradient(
68
+ 90deg,
69
+ rgba(var(--c-surface-rgb), 0),
70
+ var(--c-surface) 70%
71
+ )
72
+ 100% 0,
54
73
  /* Shadows */
55
- linear-gradient(90deg, rgba(var(--c-overlay-rgb),0.1) 30%, rgba(var(--c-overlay-rgb),0)),
56
- linear-gradient(90deg, rgba(var(--c-overlay-rgb),0), rgba(var(--c-overlay-rgb),0.1) 70%) 100% 0;
57
-
58
- /* radial-gradient(farthest-side at 0 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)),
74
+ linear-gradient(
75
+ 90deg,
76
+ rgba(var(--c-overlay-rgb), 0.1) 30%,
77
+ rgba(var(--c-overlay-rgb), 0)
78
+ ),
79
+ linear-gradient(
80
+ 90deg,
81
+ rgba(var(--c-overlay-rgb), 0),
82
+ rgba(var(--c-overlay-rgb), 0.1) 70%
83
+ )
84
+ 100% 0;
85
+
86
+ /* radial-gradient(farthest-side at 0 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)),
59
87
  radial-gradient(farthest-side at 100% 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)) 100% 0; */
60
88
  background-repeat: no-repeat;
61
89
  background-color: var(--c-surface);
@@ -82,9 +110,9 @@
82
110
  cursor: pointer;
83
111
 
84
112
  &:hover {
85
- background-color: unset;
86
- opacity: 1;
87
- color: var(--c-success);
113
+ background-color: unset;
114
+ opacity: 1;
115
+ color: var(--c-success);
88
116
  }
89
117
  }
90
118
  }
@@ -201,7 +229,7 @@
201
229
  }
202
230
  }
203
231
 
204
- :root[data-dark="false"] {
232
+ [data-dark='false'] {
205
233
  .aw-table {
206
234
  &__head-date {
207
235
  @apply text-mono-300;
@@ -209,10 +237,10 @@
209
237
  }
210
238
  }
211
239
 
212
- :root[data-dark="true"] {
240
+ [data-dark='true'] {
213
241
  .aw-table {
214
242
  &__head-date {
215
- @apply opacity-70;
243
+ @apply opacity-70;
216
244
  }
217
245
  }
218
246
  }
@@ -228,17 +256,5 @@
228
256
  border-color: var(--c-mono-800);
229
257
  }
230
258
  }
231
-
232
- &--without-top-radius {
233
- @apply rounded-t-none;
234
-
235
- .aw-table__scroller {
236
- @apply rounded-t-none;
237
- }
238
-
239
- .aw-table-builder__empty-filter-container, .aw-table-builder__empty-container {
240
- @apply rounded-t-none;
241
- }
242
- }
243
259
  }
244
260
  }
package/assets/css/components/tags.css CHANGED
@@ -7,7 +7,9 @@
7
7
 
8
8
  border-radius: 9999px;
9
9
  padding: theme('spacing.1', 0.25rem) theme('spacing.2', 0.5rem);
10
- min-width: calc(theme('spacing.2', 0.5rem) + theme('fontSize.xs', 0.625rem));
10
+ min-width: calc(
11
+ theme('spacing.2', 0.5rem) + theme('fontSize.xs', 0.625rem)
12
+ );
11
13
 
12
14
  text-align: center;
13
15
  font-size: theme('fontSize.xs', 0.625rem);
@@ -15,7 +17,7 @@
15
17
  font-weight: 700;
16
18
  line-height: 1;
17
19
  white-space: nowrap;
18
- text-shadow: 1px 1px 1px rgba(var(--c-overlay-rgb, 0,0,0), 0.1);
20
+ text-shadow: 1px 1px 1px rgba(var(--c-overlay-rgb, 0, 0, 0), 0.1);
19
21
 
20
22
  &--clickable {
21
23
  &:focus:not(:focus-visible) {
@@ -28,10 +30,10 @@
28
30
  }
29
31
  }
30
32
 
31
- :root[data-dark="true"] {
33
+ [data-dark='true'] {
32
34
  .aw-tag {
33
35
  &__button {
34
- color: var(--c-on-surface);
36
+ color: var(--c-on-surface);
35
37
  }
36
38
  }
37
39
  }
package/assets/css/components/text-field.css CHANGED
@@ -5,28 +5,43 @@
5
5
  background-color: var(--c-surface);
6
6
  border-radius: 0.625rem;
7
7
 
8
+ padding-top: 0.1875rem;
9
+ padding-bottom: 0.1875rem;
10
+
11
+ &.aw-search {
12
+ padding-top: 0;
13
+ padding-bottom: 0;
14
+ }
15
+
16
+ input:autofill {
17
+ background-image: none;
18
+ }
19
+
8
20
  &:focus-within {
9
21
  @apply border-mono-400;
10
22
  }
11
23
 
12
24
  & > div:first-child:not(.aw-tooltip),
13
25
  & > span:first-child:not(.aw-tooltip) {
14
- border-top-left-radius: 0.625rem;
15
- border-bottom-left-radius: 0.625rem;
26
+ border-top-left-radius: calc(0.625rem - 1px);
27
+ border-bottom-left-radius: calc(0.625rem - 1px);
16
28
  }
17
29
 
18
30
  & > div:last-child {
19
- border-top-right-radius: 0.625rem;
20
- border-bottom-right-radius: 0.625rem;
31
+ border-top-right-radius: calc(0.625rem - 1px);
32
+ border-bottom-right-radius: calc(0.625rem - 1px);
21
33
  }
22
34
 
23
35
  &.has-label::before {
24
- border-radius: 0.625rem;
36
+ border-radius: calc(0.625rem - 1px);
25
37
  }
26
38
 
27
39
  &__prefix,
28
40
  &__postfix {
29
41
  @apply bg-mono-800 flex items-center whitespace-no-wrap;
42
+
43
+ margin-top: -0.1875rem;
44
+ margin-bottom: -0.1875rem;
30
45
  }
31
46
 
32
47
  &__prefix {
@@ -179,6 +194,10 @@
179
194
  background-color: var(--c-surface, inherit);
180
195
  }
181
196
 
197
+ &.is-textarea.has-label.is-disabled:before {
198
+ @apply bg-mono-900;
199
+ }
200
+
182
201
  &.is-hidden {
183
202
  display: none;
184
203
  }
@@ -204,16 +223,16 @@
204
223
  }
205
224
 
206
225
  &:not([readonly]):focus::placeholder {
207
- opacity: 0.5;
226
+ @apply text-mono-400;
208
227
  }
209
228
  }
210
229
 
211
230
  &.is-filled &__element::placeholder {
212
- opacity: 0.5;
231
+ @apply text-mono-400;
213
232
  }
214
233
 
215
234
  &__label {
216
- @apply absolute opacity-50 truncate;
235
+ @apply absolute text-mono-400 truncate;
217
236
  max-width: calc(100% - 0.75rem);
218
237
  left: theme('spacing.3', 0.75rem);
219
238
  top: theme('spacing.3', 0.75rem);
@@ -292,12 +311,14 @@
292
311
 
293
312
  &__element[disabled],
294
313
  &__element[disabled] + &__label {
314
+ @apply bg-mono-900 text-mono-400;
295
315
  cursor: not-allowed;
296
316
  user-select: none;
297
- opacity: 0.5;
298
317
  }
299
318
 
300
319
  &.is-disabled {
320
+ @apply bg-mono-900;
321
+
301
322
  pointer-events: none;
302
323
  }
303
324
 
@@ -307,7 +328,7 @@
307
328
  }
308
329
 
309
330
  .is-disabled .aw-text-field__fake-input {
310
- opacity: 0.5;
331
+ @apply bg-mono-900 text-mono-400;
311
332
  }
312
333
 
313
334
  @keyframes autoFillStart {
package/assets/css/components/tooltip.css CHANGED
@@ -54,7 +54,7 @@
54
54
  }
55
55
  }
56
56
 
57
- :where(:root[data-dark='true']) .aw-tooltip {
57
+ :where([data-dark='true']) .aw-tooltip {
58
58
  background-color: var(--c-surface);
59
59
  color: rgba(var(--c-on-surface-rgb), 0.9);
60
60
  }
package/components/1_atoms/AwSwitcher.vue CHANGED
@@ -190,12 +190,9 @@ export default {
190
190
 
191
191
  methods: {
192
192
  _onPointerDown($event) {
193
- const isDisabled =
194
- Object.keys(this.$attrs).includes('disabled') &&
195
- this.$attrs.disabled
196
193
  // const hasTooltip = !!this.errorText /* blocks switcher */
197
194
 
198
- if (this.startPos !== null || isDisabled /* || hasTooltip */) return
195
+ if (this.startPos !== null || this.isDisabled /* || hasTooltip */) return
199
196
 
200
197
  this.startPos = $event.screenX
201
198
  this.isTouch = $event.type === 'touchstart'
package/components/2_molecules/AwAlert.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  :style="{
14
14
  color: iconColor ? `var(--c-${iconColor})` : null
15
15
  }"
16
- size="24"
16
+ size="16"
17
17
  />
18
18
  </slot>
19
19
  </span>
package/components/5_layouts/_AwMobileMenu.vue CHANGED
@@ -196,6 +196,7 @@
196
196
  v-show="submenuOpened"
197
197
  :title="text"
198
198
  :items="children"
199
+ all-divides
199
200
  :badge="badge"
200
201
  class="aw-mobile-menu__menu"
201
202
  />
package/components/5_layouts/_AwMobileMenuNav.vue CHANGED
@@ -20,7 +20,7 @@
20
20
  item.class,
21
21
  {
22
22
  'aw-mobile-menu-nav__item--divide':
23
- item.isDivide && i !== items.length - 1
23
+ (item.isDivide || allDivides) && i
24
24
  }
25
25
  ]"
26
26
  :href="_getChildrenCount(item) ? null : item.href"
@@ -72,7 +72,9 @@ export default {
72
72
  badge: {
73
73
  type: Object,
74
74
  default: null
75
- }
75
+ },
76
+
77
+ allDivides: Boolean
76
78
  },
77
79
 
78
80
  inject: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@awes-io/ui",
3
- "version": "2.74.1",
3
+ "version": "2.75.0",
4
4
  "description": "User Interface (UI) components",
5
5
  "keywords": [
6
6
  "ui",
@@ -112,5 +112,5 @@
112
112
  "rollup-plugin-visualizer": "^2.6.0",
113
113
  "rollup-plugin-vue": "^5.0.1"
114
114
  },
115
- "gitHead": "3cf0338e986c43e59e3ed03b1b4e1440a931ffa6"
115
+ "gitHead": "f06e4e7b83c40ecd59abd6f4249b00ce89d8a7b5"
116
116
  }
package/tailwind/colors.js CHANGED
@@ -42,7 +42,7 @@ module.exports = function({ addComponents, addUtilities, e, theme, variants }) {
42
42
  getRootVars(cssRoot)(value, 'on-' + key)
43
43
  )
44
44
 
45
- addComponents({ ':root': cssRoot })
45
+ addComponents({ ':root, [data-dark="false"]': cssRoot })
46
46
 
47
47
  _.forEach(darkColors, getRootVars(darkThemeCssRoot))
48
48
 
@@ -50,7 +50,7 @@ module.exports = function({ addComponents, addUtilities, e, theme, variants }) {
50
50
  getRootVars(darkThemeCssRoot)(value, 'on-' + key)
51
51
  )
52
52
 
53
- addComponents({ ':root[data-dark="true"]': darkThemeCssRoot })
53
+ addComponents({ '[data-dark="true"]': darkThemeCssRoot })
54
54
 
55
55
  /*
56
56
  * Add background colors