empower-container 0.1.23 → 0.1.26

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 (57) hide show
  1. package/README.md +378 -377
  2. package/dist/cjs/DatetimeFormatter.d.ts +3 -3
  3. package/dist/cjs/DatetimeFormatter.js +389 -389
  4. package/dist/cjs/Information.d.ts +10 -10
  5. package/dist/cjs/Information.js +63 -63
  6. package/dist/cjs/MenuBar.d.ts +24 -24
  7. package/dist/cjs/MenuBar.js +539 -539
  8. package/dist/cjs/Modal.d.ts +33 -33
  9. package/dist/cjs/Modal.js +44 -44
  10. package/dist/cjs/assets/Asset.d.ts +17 -17
  11. package/dist/cjs/assets/Asset.js +31 -31
  12. package/dist/cjs/constants/Constant.d.ts +15 -15
  13. package/dist/cjs/constants/Constant.js +35 -35
  14. package/dist/cjs/index.d.ts +3 -3
  15. package/dist/cjs/index.js +10 -10
  16. package/dist/cjs/inputs/Input.d.ts +25 -25
  17. package/dist/cjs/inputs/Input.js +106 -106
  18. package/dist/cjs/inputs/InputSelectionHandler.d.ts +3 -3
  19. package/dist/cjs/inputs/InputSelectionHandler.js +36 -36
  20. package/dist/cjs/inputs/Select.d.ts +28 -28
  21. package/dist/cjs/inputs/Select.js +403 -403
  22. package/dist/esm/DatetimeFormatter.d.ts +3 -3
  23. package/dist/esm/DatetimeFormatter.js +385 -385
  24. package/dist/esm/Information.d.ts +10 -10
  25. package/dist/esm/Information.js +38 -38
  26. package/dist/esm/MenuBar.d.ts +24 -24
  27. package/dist/esm/MenuBar.js +534 -534
  28. package/dist/esm/Modal.d.ts +33 -33
  29. package/dist/esm/Modal.js +39 -39
  30. package/dist/esm/assets/Asset.d.ts +17 -17
  31. package/dist/esm/assets/Asset.js +28 -28
  32. package/dist/esm/constants/Constant.d.ts +15 -15
  33. package/dist/esm/constants/Constant.js +32 -32
  34. package/dist/esm/index.d.ts +3 -3
  35. package/dist/esm/index.js +3 -3
  36. package/dist/esm/inputs/Input.d.ts +25 -25
  37. package/dist/esm/inputs/Input.js +104 -104
  38. package/dist/esm/inputs/InputSelectionHandler.d.ts +3 -3
  39. package/dist/esm/inputs/InputSelectionHandler.js +31 -31
  40. package/dist/esm/inputs/Select.d.ts +28 -28
  41. package/dist/esm/inputs/Select.js +399 -399
  42. package/dist/scss/components/_modal.scss +66 -66
  43. package/dist/scss/elements/_button.scss +132 -132
  44. package/dist/scss/elements/_index.scss +1 -1
  45. package/dist/scss/elements/_popover.scss +163 -8
  46. package/dist/scss/foundation/_colors.scss +59 -59
  47. package/dist/scss/foundation/_mixins.scss +40 -40
  48. package/dist/scss/foundation/_normalize.scss +203 -203
  49. package/dist/scss/foundation/_settings.scss +36 -36
  50. package/dist/scss/foundation/_typography.scss +94 -94
  51. package/dist/scss/library/_information.scss +72 -63
  52. package/dist/scss/library/_input.scss +37 -37
  53. package/dist/scss/library/_menubar.scss +244 -240
  54. package/dist/scss/library/_select.scss +254 -258
  55. package/dist/scss/style.scss +38 -38
  56. package/package.json +64 -62
  57. package/tscnofig.old +26 -26
package/dist/scss/library/_menubar.scss CHANGED
@@ -1,240 +1,244 @@
1
- .em-card-belt {
2
- display: flex;
3
- justify-content: space-between;
4
- width: 100%;
5
- min-height: 40px;
6
- padding: 20px 15px;
7
-
8
- .em-dropdown {
9
- position: relative;
10
- }
11
-
12
- .em-belt-left {
13
- display: flex;
14
- align-items: center;
15
- flex-wrap: wrap;
16
-
17
- .belt-info {
18
- margin-left: 10px;
19
- }
20
- }
21
-
22
- .em-beltleft-container {
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- margin-right: 20px;
27
-
28
- > .belt-icon {
29
- margin-right: 10px;
30
- display: flex;
31
- justify-content: center;
32
- align-items: center;
33
-
34
- svg {
35
- path, rect {
36
- fill: $blue-light4;
37
- }
38
- }
39
- }
40
-
41
- .icon-back {
42
- height: 40px;
43
- width: 40px;
44
- min-width: 40px;
45
- margin-right: 10px;
46
- border-radius: 10px;
47
- display: flex;
48
- align-items: center;
49
- justify-content: center;
50
- transition: $transition;
51
- box-shadow: none;
52
-
53
- &:hover {
54
- svg {
55
- transition: $transition;
56
- transform: translateX(-2px);
57
- }
58
- }
59
- }
60
-
61
- .belt-icon-check {
62
- margin-right: 10px;
63
-
64
- > div {
65
- display: flex;
66
- }
67
- }
68
-
69
- .belt-title {
70
- margin-block: 10px;
71
- flex: none;
72
-
73
- h6 {
74
- text-transform: uppercase;
75
- font-size: .875rem;
76
- color: $gray-dark;
77
- margin: 0;
78
- }
79
- }
80
- }
81
-
82
- .em-beltleft-cta {
83
- display: flex;
84
- justify-content: center;
85
- align-items: center;
86
- margin-right: 20px;
87
-
88
- a {
89
- margin-right: 10px;
90
- display: flex;
91
- justify-content: center;
92
- align-items: center;
93
- max-height: 40px;
94
- padding: 10px 20px;
95
- }
96
-
97
- .em-button{
98
- &:not(:first-child){
99
- background-color: transparent;
100
- color: $green-dark;
101
- box-shadow: inset 0 0 0 1px $green;
102
-
103
- svg{
104
- margin-right: 10px;
105
-
106
- path, rect, circle {
107
- transition: $transition;
108
- fill: $green;;
109
- }
110
- }
111
-
112
- span{
113
- color: $gray-light4;
114
- }
115
-
116
- &:hover{
117
- background-color: $blue-light1;
118
- box-shadow: none;
119
-
120
- span{
121
- color: $gray;
122
- }
123
- }
124
- }
125
- }
126
- }
127
-
128
- .em-belt-right {
129
- display: flex;
130
- align-items: center;
131
- justify-content: flex-end;
132
- flex-wrap: wrap;
133
-
134
- > a, > div {
135
- margin-left: 10px;
136
- }
137
-
138
- .pagination-summary, .belt-dropdown {
139
- display: flex;
140
- align-items: center;
141
- justify-content: center;
142
- height: 40px;
143
- padding: 10px 20px;
144
- border: none;
145
- border-radius: 10px;
146
- box-shadow: inset 0 0 0 1px $blue-light2;
147
- color: $gray-dark;
148
- text-decoration: none;
149
- font-size: .875rem;
150
- transition: $transition;
151
-
152
- &:hover {
153
- box-shadow: inset 0 0 0 1px $blue-light4;
154
- }
155
- }
156
-
157
- .pagination-summary {
158
- font-weight: $font-regular;
159
- }
160
-
161
- .belt-dropdown {
162
- span {
163
- font-size: .875rem;
164
- font-weight: 700;
165
- color: $gray-light4;
166
- }
167
-
168
- .icon-arrowdown {
169
- height: 20px;
170
- width: 20px;
171
- margin-left: 15px;
172
- transition: $transition;
173
- }
174
-
175
- .icon-add {
176
- display: flex;
177
- align-items: center;
178
- margin-right: 10px;
179
-
180
- svg path {
181
- fill: $gray-light4;
182
- }
183
- }
184
-
185
- &:hover{
186
- span {
187
- color: $gray-dark;
188
- }
189
-
190
- .icon-arrowdown {
191
- transform: translateY(2px);
192
-
193
- svg path {
194
- fill: $gray-light4;
195
- }
196
- }
197
- }
198
- }
199
-
200
- .belt-prev, .belt-next {
201
- padding: 10px;
202
- height: 40px;
203
- width: 40px;
204
- min-width: 40px;
205
- box-shadow: inset 0 0 0 1px $blue-light2;
206
- border-radius: 10px;
207
- transition: $transition;
208
-
209
- .belt-icon {
210
- height: 20px;
211
- width: 20px;
212
- background: 50% no-repeat;
213
- transition: $transition;
214
- }
215
-
216
- &:hover {
217
- box-shadow: inset 0 0 0 1px $blue-light4;
218
-
219
- .belt-icon {
220
- svg path {
221
- fill: $gray-light4;
222
- }
223
- }
224
- }
225
- }
226
-
227
- .belt-prev {
228
- &:hover .belt-icon {
229
- transform: translateX(-2px);
230
- }
231
- }
232
-
233
- .belt-next {
234
- &:hover .belt-icon {
235
- transform: translateX(2px);
236
- }
237
- }
238
- }
239
- }
240
-
1
+ .em-card-belt {
2
+ display: flex;
3
+ justify-content: space-between;
4
+ width: 100%;
5
+ min-height: 40px;
6
+ padding: 20px 15px;
7
+
8
+ .em-dropdown {
9
+ position: relative;
10
+ min-width: 100px;
11
+ }
12
+
13
+ .em-belt-left {
14
+ display: flex;
15
+ align-items: center;
16
+ flex-wrap: nowrap;
17
+
18
+ .belt-info {
19
+ margin-left: 10px;
20
+ }
21
+ }
22
+
23
+ .em-beltleft-container {
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ margin-right: 20px;
28
+
29
+ > .belt-icon {
30
+ margin-right: 10px;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+
35
+ svg {
36
+ path, rect {
37
+ fill: $blue-light4;
38
+ }
39
+ }
40
+ }
41
+
42
+ .icon-back {
43
+ height: 40px;
44
+ width: 40px;
45
+ min-width: 40px;
46
+ margin-right: 10px;
47
+ border-radius: 10px;
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ transition: $transition;
52
+ box-shadow: none;
53
+
54
+ &:hover {
55
+ svg {
56
+ transition: $transition;
57
+ transform: translateX(-2px);
58
+ }
59
+ }
60
+ }
61
+
62
+ .belt-icon-check {
63
+ margin-right: 10px;
64
+
65
+ > div {
66
+ display: flex;
67
+ }
68
+ }
69
+
70
+ .belt-title {
71
+ margin-block: 10px;
72
+ flex: none;
73
+
74
+ h6 {
75
+ text-transform: uppercase;
76
+ font-size: .875rem;
77
+ color: $gray-dark;
78
+ margin: 0;
79
+ }
80
+ }
81
+
82
+ .em-dropdown .em-popover {
83
+ width: auto;
84
+ }
85
+ }
86
+
87
+ .em-beltleft-cta {
88
+ display: flex;
89
+ justify-content: center;
90
+ align-items: center;
91
+ margin-right: 20px;
92
+
93
+ a {
94
+ margin-right: 10px;
95
+ display: flex;
96
+ justify-content: center;
97
+ align-items: center;
98
+ max-height: 40px;
99
+ padding: 10px 20px;
100
+ }
101
+
102
+ .em-button{
103
+ &:not(:first-child){
104
+ background-color: transparent;
105
+ color: $green-dark;
106
+ box-shadow: inset 0 0 0 1px $green;
107
+
108
+ svg{
109
+ margin-right: 10px;
110
+
111
+ path, rect, circle {
112
+ transition: $transition;
113
+ fill: $green;;
114
+ }
115
+ }
116
+
117
+ span{
118
+ color: $gray-light4;
119
+ }
120
+
121
+ &:hover{
122
+ background-color: $blue-light1;
123
+ box-shadow: none;
124
+
125
+ span{
126
+ color: $gray;
127
+ }
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ .em-belt-right {
134
+ display: flex;
135
+ align-items: center;
136
+ justify-content: flex-end;
137
+ flex-wrap: wrap;
138
+
139
+ > a, > div {
140
+ margin-left: 10px;
141
+ }
142
+
143
+ .pagination-summary, .belt-dropdown {
144
+ display: flex;
145
+ align-items: center;
146
+ justify-content: center;
147
+ height: 40px;
148
+ padding: 10px 20px;
149
+ border: none;
150
+ border-radius: 10px;
151
+ box-shadow: inset 0 0 0 1px $blue-light2;
152
+ color: $gray-dark;
153
+ text-decoration: none;
154
+ font-size: .875rem;
155
+ transition: $transition;
156
+
157
+ &:hover {
158
+ box-shadow: inset 0 0 0 1px $blue-light4;
159
+ }
160
+ }
161
+
162
+ .pagination-summary {
163
+ font-weight: $font-regular;
164
+ }
165
+
166
+ .belt-dropdown {
167
+ span {
168
+ font-size: .875rem;
169
+ font-weight: 700;
170
+ color: $gray-light4;
171
+ }
172
+
173
+ .icon-arrowdown {
174
+ height: 20px;
175
+ width: 20px;
176
+ margin-left: 15px;
177
+ transition: $transition;
178
+ }
179
+
180
+ .icon-add {
181
+ display: flex;
182
+ align-items: center;
183
+ margin-right: 10px;
184
+
185
+ svg path {
186
+ fill: $gray-light4;
187
+ }
188
+ }
189
+
190
+ &:hover{
191
+ span {
192
+ color: $gray-dark;
193
+ }
194
+
195
+ .icon-arrowdown {
196
+ transform: translateY(2px);
197
+
198
+ svg path {
199
+ fill: $gray-light4;
200
+ }
201
+ }
202
+ }
203
+ }
204
+
205
+ .belt-prev, .belt-next {
206
+ padding: 10px;
207
+ height: 40px;
208
+ width: 40px;
209
+ min-width: 40px;
210
+ box-shadow: inset 0 0 0 1px $blue-light2;
211
+ border-radius: 10px;
212
+ transition: $transition;
213
+
214
+ .belt-icon {
215
+ height: 20px;
216
+ width: 20px;
217
+ background: 50% no-repeat;
218
+ transition: $transition;
219
+ }
220
+
221
+ &:hover {
222
+ box-shadow: inset 0 0 0 1px $blue-light4;
223
+
224
+ .belt-icon {
225
+ svg path {
226
+ fill: $gray-light4;
227
+ }
228
+ }
229
+ }
230
+ }
231
+
232
+ .belt-prev {
233
+ &:hover .belt-icon {
234
+ transform: translateX(-2px);
235
+ }
236
+ }
237
+
238
+ .belt-next {
239
+ &:hover .belt-icon {
240
+ transform: translateX(2px);
241
+ }
242
+ }
243
+ }
244
+ }