empower-container 0.1.24 → 0.1.25

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 +132 -132
  44. package/dist/scss/elements/_index.scss +1 -1
  45. package/dist/scss/elements/_popover.scss +7 -7
  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 +241 -240
  54. package/dist/scss/library/_select.scss +258 -258
  55. package/dist/scss/style.scss +38 -38
  56. package/package.json +63 -62
  57. package/tscnofig.old +26 -26
package/dist/scss/library/_menubar.scss CHANGED
@@ -1,240 +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
- }
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
+
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
+