empower-container 0.1.15 → 0.1.18

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. package/dist/cjs/Modal.js +13 -1
  2. package/dist/cjs/assets/Asset.js +1 -1
  3. package/dist/esm/Modal.js +13 -1
  4. package/dist/esm/assets/Asset.js +1 -1
  5. package/dist-old/assets/Asset.d.ts +16 -0
  6. package/dist-old/assets/Asset.js +49 -0
  7. package/dist-old/assets/Asset.tsx +81 -0
  8. package/dist-old/assets/icons/icon-check-white-sm.svg +3 -0
  9. package/dist-old/assets/images/icon-arrowdown-graydark.svg +3 -0
  10. package/dist-old/assets/images/icon-arrowleft-graydark.svg +3 -0
  11. package/dist-old/assets/images/icon-arrowright-graydark.svg +3 -0
  12. package/dist-old/assets/images/icon-arrowup-graydark.svg +3 -0
  13. package/dist-old/assets/images/icon-check-graydark.svg +3 -0
  14. package/dist-old/cjs/DatetimeFormatter.d.ts +3 -0
  15. package/dist-old/cjs/DatetimeFormatter.js +389 -0
  16. package/dist-old/cjs/Information.d.ts +10 -0
  17. package/dist-old/cjs/Information.js +63 -0
  18. package/dist-old/cjs/MenuBar.d.ts +24 -0
  19. package/dist-old/cjs/MenuBar.js +537 -0
  20. package/dist-old/cjs/Modal.d.ts +33 -0
  21. package/dist-old/cjs/Modal.js +32 -0
  22. package/dist-old/cjs/assets/Asset.d.ts +16 -0
  23. package/dist-old/cjs/assets/Asset.js +30 -0
  24. package/dist-old/cjs/constants/Constant.d.ts +15 -0
  25. package/dist-old/cjs/constants/Constant.js +35 -0
  26. package/dist-old/cjs/index.d.ts +3 -0
  27. package/dist-old/cjs/index.js +10 -0
  28. package/dist-old/cjs/inputs/Input.d.ts +25 -0
  29. package/dist-old/cjs/inputs/Input.js +106 -0
  30. package/dist-old/cjs/inputs/InputSelectionHandler.d.ts +3 -0
  31. package/dist-old/cjs/inputs/InputSelectionHandler.js +36 -0
  32. package/dist-old/cjs/inputs/Select.d.ts +28 -0
  33. package/dist-old/cjs/inputs/Select.js +403 -0
  34. package/dist-old/esm/DatetimeFormatter.d.ts +3 -0
  35. package/dist-old/esm/DatetimeFormatter.js +385 -0
  36. package/dist-old/esm/Information.d.ts +10 -0
  37. package/dist-old/esm/Information.js +38 -0
  38. package/dist-old/esm/MenuBar.d.ts +24 -0
  39. package/dist-old/esm/MenuBar.js +532 -0
  40. package/dist-old/esm/Modal.d.ts +33 -0
  41. package/dist-old/esm/Modal.js +27 -0
  42. package/dist-old/esm/assets/Asset.d.ts +16 -0
  43. package/dist-old/esm/assets/Asset.js +27 -0
  44. package/dist-old/esm/constants/Constant.d.ts +15 -0
  45. package/dist-old/esm/constants/Constant.js +32 -0
  46. package/dist-old/esm/index.d.ts +3 -0
  47. package/dist-old/esm/index.js +3 -0
  48. package/dist-old/esm/inputs/Input.d.ts +25 -0
  49. package/dist-old/esm/inputs/Input.js +104 -0
  50. package/dist-old/esm/inputs/InputSelectionHandler.d.ts +3 -0
  51. package/dist-old/esm/inputs/InputSelectionHandler.js +31 -0
  52. package/dist-old/esm/inputs/Select.d.ts +28 -0
  53. package/dist-old/esm/inputs/Select.js +399 -0
  54. package/dist-old/scss/components/_modal.scss +66 -0
  55. package/dist-old/scss/elements/_button.scss +107 -0
  56. package/dist-old/scss/elements/_index.scss +2 -0
  57. package/dist-old/scss/elements/_popover.scss +8 -0
  58. package/dist-old/scss/foundation/_colors.scss +60 -0
  59. package/dist-old/scss/foundation/_mixins.scss +41 -0
  60. package/dist-old/scss/foundation/_normalize.scss +204 -0
  61. package/dist-old/scss/foundation/_settings.scss +36 -0
  62. package/dist-old/scss/foundation/_typography.scss +95 -0
  63. package/dist-old/scss/library/_information.scss +68 -0
  64. package/dist-old/scss/library/_input.scss +37 -0
  65. package/dist-old/scss/library/_menubar.scss +255 -0
  66. package/dist-old/scss/library/_select.scss +259 -0
  67. package/dist-old/scss/style.scss +24 -0
  68. package/package.json +1 -1
@@ -0,0 +1,255 @@
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
+ .modal-close {
240
+ height: 40px;
241
+ width: 40px;
242
+ min-width: 40px;
243
+ padding: 10px;
244
+ box-shadow: none;
245
+ border-radius: 10px;
246
+ transition: $transition;
247
+
248
+ &:hover {
249
+ background-color: $blue-light1;
250
+ box-shadow: inset 0 0 0 5px $blue-light1;
251
+ }
252
+ }
253
+ }
254
+ }
255
+
@@ -0,0 +1,259 @@
1
+ .em-select {
2
+ position: relative;
3
+ width: 100%;
4
+
5
+ .em-input-field {
6
+ width: 100%;
7
+ }
8
+
9
+ .em-input-field .em-select-input,
10
+ .em-popover .em-select-search input {
11
+ min-height: 50px;
12
+ width: 100%;
13
+ background-color: $blue-light;
14
+ border-top-left-radius: 10px;
15
+ border-top-right-radius: 10px;
16
+ border-bottom-right-radius: 0;
17
+ border-bottom-left-radius: 0;
18
+ box-shadow: inset 0 -2px 0 0 $blue-light1;
19
+ border: none;
20
+ font-size: 0.875rem;
21
+ color: $gray-dark;
22
+ padding: 10px 15px;
23
+ margin-bottom: 15px;
24
+ resize: none;
25
+ transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
26
+
27
+ &:focus {
28
+ background-color: $blue-light;
29
+ color: $gray-dark;
30
+ border: none;
31
+ outline: none;
32
+ box-shadow: inset 0 -2px 0 0 $blue-light4;
33
+ }
34
+ }
35
+
36
+ .em-field-icon {
37
+ position: absolute;
38
+ top: 15px;
39
+ right: 15px;
40
+ }
41
+
42
+ .em-noresult {
43
+ padding: 20px;
44
+ }
45
+ }
46
+
47
+ .is-invalid .em-select .em-input-field .select-input {
48
+ box-shadow: 0 2px 0 0 $red;
49
+ }
50
+
51
+ .em-overlay {
52
+ width: 100vw;
53
+ height: 100vh;
54
+ position: fixed;
55
+ top: 0;
56
+ left: 0;
57
+ z-index: 99;
58
+ }
59
+
60
+ .em-popover{
61
+ position: absolute;
62
+ top: 50px;
63
+ margin-top: -2px;
64
+ background-color: $white;
65
+ font-size: 0.875rem;
66
+ color: $gray-dark;
67
+ border-top: 5px solid $blue;
68
+ box-shadow: 0 15px 30px 0 rgb(19 37 154 / 15%);
69
+ z-index: 100;
70
+
71
+ .em-select{
72
+ width: 100%;
73
+
74
+ option{
75
+ font-size: 0.875rem;
76
+ color: $gray-dark;
77
+ padding: 20px;
78
+ transition: $transition;
79
+ cursor: pointer;
80
+
81
+ &:hover{
82
+ background-color: $blue-light;
83
+ padding: 20px 18px 20px 22px;
84
+ }
85
+ }
86
+ }
87
+
88
+ .popover{
89
+ a {
90
+ &:hover {
91
+ background-color: $blue-light;
92
+ color: $gray-dark;
93
+ padding: 15px 18px 15px 22px;
94
+ box-shadow: none;
95
+ border: none;
96
+ }
97
+ }
98
+ }
99
+
100
+ .em-popover-input{
101
+ display: flex;
102
+ padding: 20px;
103
+
104
+ .field {
105
+ margin: 0 15px 0 0;
106
+ width: 160px;
107
+
108
+ > label {
109
+ position: relative;
110
+ top: 0;
111
+ left: 0;
112
+ padding: 0;
113
+ margin-bottom: 5px;
114
+ display: inline-block;
115
+ font-size: .875rem;
116
+ font-weight: 700;
117
+ color: $gray-light3;
118
+ text-transform: uppercase;
119
+ }
120
+ }
121
+
122
+ button {
123
+ border: 0;
124
+ background: none;
125
+ height: 50px;
126
+ width: 50px;
127
+ display: inline-flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ cursor: pointer;
131
+ transition: $transition;
132
+ }
133
+ }
134
+
135
+ .em-popover-list {
136
+ display: block;
137
+ padding: 0;
138
+
139
+ a {
140
+ display: block;
141
+ font-weight: 700;
142
+ font-size: .875rem;
143
+ color: $gray-light4;
144
+ padding: 15px 20px;
145
+ min-height: 50px;
146
+ line-height: 20px;
147
+ text-decoration: none;
148
+ text-align: left;
149
+ border: none;
150
+ box-shadow: none;
151
+ transition: $transition;
152
+ margin-right: 0;
153
+ cursor: pointer;
154
+ }
155
+ }
156
+
157
+ .em-popover-months {
158
+ width: 300px;
159
+ padding: 0;
160
+ flex-direction: column;
161
+
162
+ .list-years {
163
+ background-color: $blue-dark;
164
+ display: flex;
165
+ justify-content: space-between;
166
+ margin-top: -1px;
167
+ width: 100%;
168
+
169
+ button {
170
+ background-color: transparent;
171
+ border: none;
172
+ cursor: pointer;
173
+ transition: $transition;
174
+
175
+ svg path {
176
+ fill: $white;
177
+ }
178
+
179
+ img {
180
+ transition: $transition;
181
+
182
+ &:hover {
183
+ background-color: transparentize($blue-dark1, 0.5);
184
+ }
185
+
186
+ &:focus {
187
+ outline: none;
188
+ }
189
+ }
190
+ }
191
+
192
+ > div {
193
+ color: $white;
194
+ font-size: 1.5rem;
195
+ padding: 15px;
196
+ }
197
+ }
198
+
199
+ .list-months {
200
+ display: flex;
201
+ flex-wrap: wrap;
202
+
203
+ a {
204
+ width: 33.33%;
205
+ box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
206
+ padding: 15px;
207
+ color: $gray-light4;
208
+ text-align: center;
209
+ font-weight: 700;
210
+ font-size: .875rem;
211
+ text-decoration: none;
212
+
213
+ &:hover {
214
+ background-color: $gray-light;
215
+ color: $gray-dark;
216
+ }
217
+
218
+ &.is-disabled{
219
+ background-color: $gray-light;
220
+ color: $gray-light3;
221
+ cursor: initial;
222
+
223
+ &:hover{
224
+ background-color: $gray-light;
225
+ color: $gray-light3;
226
+ }
227
+ }
228
+
229
+ &.is-selected{
230
+ background-color: $blue-dark1;
231
+ color: $white;
232
+ box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
233
+ }
234
+ }
235
+ }
236
+ }
237
+ }
238
+
239
+ /* scroll */
240
+ .em-select-popover {
241
+ scrollbar-width: thin;
242
+ scrollbar-color: $gray;
243
+ }
244
+
245
+ .em-select-popover::-webkit-scrollbar-track{
246
+ background: $gray-light;
247
+ }
248
+
249
+ .em-select-popover::-webkit-scrollbar-thumb{
250
+ background-color: $gray-light2;
251
+ border-radius: 20px;
252
+ border: 3px solid $gray-light;
253
+ cursor: pointer;
254
+ }
255
+
256
+ .em-select-popover::-webkit-scrollbar{
257
+ width: 12px;
258
+ cursor: pointer;
259
+ }
@@ -0,0 +1,24 @@
1
+ @import url("https://fonts.googleapis.com/css?family=Quicksand:400,700|Roboto:400,400i,700&display=swap");
2
+
3
+ @import 'foundation/colors';
4
+ @import 'foundation/settings';
5
+ @import 'foundation/mixins';
6
+ @import 'foundation/typography';
7
+ @import 'foundation/normalize';
8
+ @import 'components/modal';
9
+ @import 'elements/button';
10
+ @import 'elements/popover';
11
+ @import 'library/input';
12
+ @import 'library/menubar';
13
+ @import 'library/select';
14
+ @import 'library/information';
15
+
16
+ body {
17
+ font-family: 'Roboto', sans-serif;
18
+ }
19
+
20
+ * {
21
+ box-sizing: border-box;
22
+ margin: 0;
23
+ padding: 0;
24
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "empower-container",
3
- "version": "0.1.15",
3
+ "version": "0.1.18",
4
4
  "private": false,
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",