empower-container 0.1.25 → 0.1.28

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