empower-container 0.1.7 → 0.1.10

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 (69) hide show
  1. package/README.md +66 -0
  2. package/package.json +2 -2
  3. package/src/main/Information.js +2 -1
  4. package/src/main/Information.tsx +3 -1
  5. package/src/main/MenuBar.js +12 -11
  6. package/src/main/MenuBar.tsx +22 -20
  7. package/src/main/assets/Asset.d.ts +1 -0
  8. package/src/main/assets/Asset.js +5 -3
  9. package/src/main/assets/Asset.tsx +8 -2
  10. package/src/sample/TestMenuBar.d.ts +1 -0
  11. package/src/sample/TestMenuBar.js +35 -16
  12. package/src/sample/TestMenuBar.tsx +63 -48
  13. package/src/scss/elements/_button.scss +5 -5
  14. package/src/scss/library/_menubar.scss +41 -11
  15. package/src/scss/library/_select.scss +6 -5
  16. package/dist/cjs/DatetimeFormatter.d.ts +0 -3
  17. package/dist/cjs/DatetimeFormatter.js +0 -389
  18. package/dist/cjs/Information.d.ts +0 -10
  19. package/dist/cjs/Information.js +0 -62
  20. package/dist/cjs/MenuBar.d.ts +0 -24
  21. package/dist/cjs/MenuBar.js +0 -537
  22. package/dist/cjs/Modal.d.ts +0 -33
  23. package/dist/cjs/Modal.js +0 -32
  24. package/dist/cjs/assets/Asset.d.ts +0 -15
  25. package/dist/cjs/assets/Asset.js +0 -29
  26. package/dist/cjs/constants/Constant.d.ts +0 -15
  27. package/dist/cjs/constants/Constant.js +0 -35
  28. package/dist/cjs/index.d.ts +0 -3
  29. package/dist/cjs/index.js +0 -10
  30. package/dist/cjs/inputs/Input.d.ts +0 -25
  31. package/dist/cjs/inputs/Input.js +0 -106
  32. package/dist/cjs/inputs/InputSelectionHandler.d.ts +0 -3
  33. package/dist/cjs/inputs/InputSelectionHandler.js +0 -36
  34. package/dist/cjs/inputs/Select.d.ts +0 -28
  35. package/dist/cjs/inputs/Select.js +0 -403
  36. package/dist/esm/DatetimeFormatter.d.ts +0 -3
  37. package/dist/esm/DatetimeFormatter.js +0 -385
  38. package/dist/esm/Information.d.ts +0 -10
  39. package/dist/esm/Information.js +0 -37
  40. package/dist/esm/MenuBar.d.ts +0 -24
  41. package/dist/esm/MenuBar.js +0 -532
  42. package/dist/esm/Modal.d.ts +0 -33
  43. package/dist/esm/Modal.js +0 -27
  44. package/dist/esm/assets/Asset.d.ts +0 -15
  45. package/dist/esm/assets/Asset.js +0 -26
  46. package/dist/esm/constants/Constant.d.ts +0 -15
  47. package/dist/esm/constants/Constant.js +0 -32
  48. package/dist/esm/index.d.ts +0 -3
  49. package/dist/esm/index.js +0 -3
  50. package/dist/esm/inputs/Input.d.ts +0 -25
  51. package/dist/esm/inputs/Input.js +0 -104
  52. package/dist/esm/inputs/InputSelectionHandler.d.ts +0 -3
  53. package/dist/esm/inputs/InputSelectionHandler.js +0 -31
  54. package/dist/esm/inputs/Select.d.ts +0 -28
  55. package/dist/esm/inputs/Select.js +0 -399
  56. package/dist/scss/components/_modal.scss +0 -66
  57. package/dist/scss/elements/_button.scss +0 -107
  58. package/dist/scss/elements/_index.scss +0 -2
  59. package/dist/scss/elements/_popover.scss +0 -8
  60. package/dist/scss/foundation/_colors.scss +0 -60
  61. package/dist/scss/foundation/_mixins.scss +0 -41
  62. package/dist/scss/foundation/_normalize.scss +0 -204
  63. package/dist/scss/foundation/_settings.scss +0 -36
  64. package/dist/scss/foundation/_typography.scss +0 -95
  65. package/dist/scss/library/_information.scss +0 -68
  66. package/dist/scss/library/_input.scss +0 -37
  67. package/dist/scss/library/_menubar.scss +0 -225
  68. package/dist/scss/library/_select.scss +0 -258
  69. package/dist/scss/style.scss +0 -24
@@ -1,258 +0,0 @@
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: all .5s cubic-bezier(.19,1,.22,1);
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: all .5s cubic-bezier(.19,1,.22,1);
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: all .5s cubic-bezier(.19,1,.22,1);
152
- cursor: pointer;
153
- }
154
- }
155
-
156
- .em-popover-months {
157
- width: 300px;
158
- padding: 0;
159
- flex-direction: column;
160
-
161
- .list-years {
162
- background-color: $blue-dark;
163
- display: flex;
164
- justify-content: space-between;
165
- margin-top: -1px;
166
- width: 100%;
167
-
168
- button {
169
- background-color: transparent;
170
- border: none;
171
- cursor: pointer;
172
- transition: all .5s cubic-bezier(.19,1,.22,1);
173
-
174
- svg path {
175
- fill: $white;
176
- }
177
-
178
- img {
179
- transition: all .5s cubic-bezier(.19,1,.22,1);
180
-
181
- &:hover {
182
- background-color: transparentize($blue-dark1, 0.5);
183
- }
184
-
185
- &:focus {
186
- outline: none;
187
- }
188
- }
189
- }
190
-
191
- > div {
192
- color: $white;
193
- font-size: 1.5rem;
194
- padding: 15px;
195
- }
196
- }
197
-
198
- .list-months {
199
- display: flex;
200
- flex-wrap: wrap;
201
-
202
- a {
203
- width: 33.33%;
204
- box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
205
- padding: 15px;
206
- color: $gray-light4;
207
- text-align: center;
208
- font-weight: 700;
209
- font-size: .875rem;
210
- text-decoration: none;
211
-
212
- &:hover {
213
- background-color: $gray-light;
214
- color: $gray-dark;
215
- }
216
-
217
- &.is-disabled{
218
- background-color: $gray-light;
219
- color: $gray-light3;
220
- cursor: initial;
221
-
222
- &:hover{
223
- background-color: $gray-light;
224
- color: $gray-light3;
225
- }
226
- }
227
-
228
- &.is-selected{
229
- background-color: $blue-dark1;
230
- color: $white;
231
- box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
232
- }
233
- }
234
- }
235
- }
236
- }
237
-
238
- /* scroll */
239
- .em-select-popover {
240
- scrollbar-width: thin;
241
- scrollbar-color: $gray;
242
- }
243
-
244
- .em-select-popover::-webkit-scrollbar-track{
245
- background: $gray-light;
246
- }
247
-
248
- .em-select-popover::-webkit-scrollbar-thumb{
249
- background-color: $gray-light2;
250
- border-radius: 20px;
251
- border: 3px solid $gray-light;
252
- cursor: pointer;
253
- }
254
-
255
- .em-select-popover::-webkit-scrollbar{
256
- width: 12px;
257
- cursor: pointer;
258
- }
@@ -1,24 +0,0 @@
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
- }