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,41 +0,0 @@
1
- // Breakpoint: Smaller devices
2
- @mixin xs {
3
- @media (min-width: #{$screen-xs-min}) {
4
- @content;
5
- }
6
- }
7
-
8
- // Breakpoint: Small devices
9
- @mixin sm {
10
- @media (min-width: #{$screen-sm-min}) {
11
- @content;
12
- }
13
- }
14
-
15
- // Breakpoint: Medium devices
16
- @mixin md {
17
- @media (min-width: #{$screen-md-min}) {
18
- @content;
19
- }
20
- }
21
-
22
- // Breakpoint: Large devices
23
- @mixin lg {
24
- @media (min-width: #{$screen-lg-min}) {
25
- @content;
26
- }
27
- }
28
-
29
- // Breakpoint: Extra large devices
30
- @mixin xl {
31
- @media (min-width: #{$screen-xl-min}) {
32
- @content;
33
- }
34
- }
35
-
36
- // Breakpoint: Extra large devices
37
- @mixin xxl {
38
- @media (min-width: #{$screen-xxl-min}) {
39
- @content;
40
- }
41
- }
@@ -1,204 +0,0 @@
1
- html {
2
- -webkit-box-sizing: border-box;
3
- -moz-box-sizing: border-box;
4
- box-sizing: border-box;
5
- overflow-x: hidden;
6
- }
7
-
8
- *, *:before, *:after {
9
- -webkit-box-sizing: inherit;
10
- -moz-box-sizing: inherit;
11
- box-sizing: inherit;
12
- }
13
-
14
- html {
15
- line-height: 1.15; /* 1 */
16
- -webkit-text-size-adjust: 100%; /* 2 */
17
- }
18
-
19
- body {
20
- margin: 0;
21
- }
22
-
23
- main {
24
- display: block;
25
- }
26
-
27
- h1 {
28
- font-size: 2em;
29
- margin: 0 0 0.67em;
30
- }
31
-
32
- hr {
33
- box-sizing: content-box; /* 1 */
34
- height: 0; /* 1 */
35
- overflow: visible; /* 2 */
36
- }
37
-
38
- pre {
39
- font-family: monospace, monospace; /* 1 */
40
- font-size: 1em; /* 2 */
41
- }
42
-
43
- a {
44
- background-color: transparent;
45
- }
46
-
47
- abbr[title] {
48
- border-bottom: none; /* 1 */
49
- text-decoration: underline; /* 2 */
50
- text-decoration: underline dotted; /* 2 */
51
- }
52
-
53
- b,
54
- strong {
55
- font-weight: bolder;
56
- }
57
-
58
- code,
59
- kbd,
60
- samp {
61
- font-family: monospace, monospace; /* 1 */
62
- font-size: 1em; /* 2 */
63
- }
64
-
65
- small {
66
- font-size: 80%;
67
- }
68
-
69
- sub,
70
- sup {
71
- font-size: 75%;
72
- line-height: 0;
73
- position: relative;
74
- vertical-align: baseline;
75
- }
76
-
77
- sub {
78
- bottom: -0.25em;
79
- }
80
-
81
- sup {
82
- top: -0.5em;
83
- }
84
-
85
- img {
86
- border-style: none;
87
- }
88
-
89
- button,
90
- input,
91
- optgroup,
92
- select,
93
- textarea {
94
- font-family: inherit; /* 1 */
95
- font-size: 100%; /* 1 */
96
- line-height: 1.15; /* 1 */
97
- margin: 0; /* 2 */
98
- }
99
-
100
- button,
101
- input { /* 1 */
102
- overflow: visible;
103
- }
104
-
105
- button,
106
- select { /* 1 */
107
- text-transform: none;
108
- }
109
-
110
- button,
111
- [type="button"],
112
- [type="reset"],
113
- [type="submit"] {
114
- -webkit-appearance: button;
115
- }
116
-
117
- button::-moz-focus-inner,
118
- [type="button"]::-moz-focus-inner,
119
- [type="reset"]::-moz-focus-inner,
120
- [type="submit"]::-moz-focus-inner {
121
- border-style: none;
122
- padding: 0;
123
- }
124
-
125
- button:-moz-focusring,
126
- [type="button"]:-moz-focusring,
127
- [type="reset"]:-moz-focusring,
128
- [type="submit"]:-moz-focusring {
129
- outline: 1px dotted ButtonText;
130
- }
131
-
132
- fieldset {
133
- padding: 0.35em 0.75em 0.625em;
134
- }
135
-
136
- legend {
137
- box-sizing: border-box;
138
- color: inherit;
139
- display: table;
140
- max-width: 100%;
141
- padding: 0;
142
- white-space: normal;
143
- }
144
-
145
- progress {
146
- vertical-align: baseline;
147
- }
148
-
149
- textarea {
150
- overflow: auto;
151
- }
152
-
153
- [type="checkbox"],
154
- [type="radio"] {
155
- box-sizing: border-box;
156
- padding: 0;
157
- }
158
-
159
- [type="number"]::-webkit-inner-spin-button,
160
- [type="number"]::-webkit-outer-spin-button {
161
- height: auto;
162
- }
163
-
164
- [type="search"] {
165
- -webkit-appearance: textfield;
166
- outline-offset: -2px;
167
- }
168
-
169
- [type="search"]::-webkit-search-decoration {
170
- -webkit-appearance: none;
171
- }
172
-
173
- ::-webkit-file-upload-button {
174
- -webkit-appearance: button; /* 1 */
175
- font: inherit; /* 2 */
176
- }
177
-
178
- details {
179
- display: block;
180
- }
181
-
182
- summary {
183
- display: list-item;
184
- }
185
-
186
- template {
187
- display: none;
188
- }
189
-
190
- [hidden] {
191
- display: none;
192
- }
193
-
194
- input{
195
- &:focus{
196
- outline: none;
197
- }
198
- }
199
-
200
- li{
201
- list-style: none;
202
- padding-top: 3px;
203
- }
204
-
@@ -1,36 +0,0 @@
1
- // Breakpoints
2
- $screen-xs-min: 400px; // Small smartphones
3
- $screen-sm-min: 576px; // Small tablets and large smartphones (landscape view)
4
- $screen-md-min: 768px; // Small tablets (portrait view)
5
- $screen-lg-min: 992px; // Tablets and small desktopsw
6
- $screen-xl-min: 1200px; // Large tablets and desktops
7
- $screen-xxl-min: 1500px; // Large tablets and desktops
8
-
9
- // Container max width
10
- $container-width: 1024px;
11
-
12
- // Transition easing
13
- $transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
14
-
15
- // Shadow
16
- $shadow-card: 0px 10px 20px 0px rgba(19, 37, 154, 0.05);
17
- $shadow-popover: 0px 15px 30px 0px rgba(19, 37, 154, 0.15);
18
- $shadow-modal: 0 30px 60px rgba(0,0,0,0.2);
19
-
20
- // Border Radius
21
- $border-radius-sm: 5px;
22
- $border-radius-md: 10px;
23
- $border-radius-lg: 20px;
24
-
25
- // Grid
26
- $grid-margin: -7.5px;
27
- $grid-gutter: 7.5px;
28
-
29
- // Typography
30
- $font-body: "Roboto", sans-serif;
31
- $font-heading: "Quicksand", sans-serif;
32
- $font-regular: 400;
33
- $font-bold: 700;
34
- $text-lg: 2rem;
35
- $text-base: 1rem;
36
- $text-sm: 0.875rem;
@@ -1,95 +0,0 @@
1
- body {
2
- font-family: 'Roboto', sans-serif;
3
- }
4
-
5
- h1, h2, h3, h4, h5, h6{
6
- margin: 0 0 1rem;
7
- color: $gray-dark;
8
- font-family: 'Quicksand', sans-serif;
9
-
10
- &:last-of-type{
11
- margin-bottom: 0;
12
- }
13
- }
14
-
15
- h1{
16
- font-size: 2.25rem;
17
-
18
- @include md{
19
- font-size: 2.625rem;
20
- }
21
- }
22
-
23
- h2{
24
- font-size: 1.875rem;
25
-
26
- @include md{
27
- font-size: 2.25rem;
28
- }
29
- }
30
-
31
- h3{
32
- font-size: 1.5rem;
33
-
34
- @include md{
35
- font-size: 1.875rem;
36
- }
37
- }
38
-
39
- h4{
40
- font-size: 1.25rem;
41
-
42
- @include md{
43
- font-size: 1.5rem;
44
- }
45
- }
46
-
47
- h5{
48
- font-size: 1rem;
49
-
50
- @include md{
51
- font-size: 1.25rem;
52
- }
53
- }
54
-
55
- h6{
56
- font-size: 0.875rem;
57
- }
58
-
59
- label{
60
- font-size: 0.875rem;
61
- font-weight: 700;
62
- color: $gray-light3;
63
- text-transform: capitalize;
64
- display: inline-block;
65
- margin: 0 0 0.25rem;
66
- }
67
-
68
- p{
69
- color: $gray-dark;
70
- line-height: 1.5;
71
- margin: 0 0 1rem;
72
-
73
- &:last-of-type{
74
- margin-bottom: 0;
75
- }
76
- }
77
-
78
- a{
79
- color: $green-dark;
80
- font-weight: 700;
81
- font-size: 0.875rem;
82
- text-decoration: none;
83
- transition: $transition;
84
-
85
- &:hover{
86
- color: $green-dark1;
87
- }
88
- }
89
-
90
- .sub-text{
91
- font-size: $text-sm;
92
- color: $gray-light4;
93
- display: block;
94
- line-height: 20px;
95
- }
@@ -1,68 +0,0 @@
1
- .em-belt-info {
2
- position: relative;
3
-
4
- .em-info-icon {
5
- display: flex;
6
- justify-content: center;
7
- align-items: center;
8
- height: 40px;
9
- width: 40px;
10
- border-radius: $border-radius-md;
11
-
12
- &:hover {
13
- background-color: $blue-light;
14
-
15
- svg {
16
- path {
17
- stroke: #5C7FF3;
18
- }
19
-
20
- circle {
21
- fill: #5C7FF3;
22
- }
23
- }
24
- }
25
- }
26
- }
27
-
28
- .em-popover-i {
29
- background-color: $white;
30
- width: 650px;
31
- border-bottom-left-radius: $border-radius-md;
32
- border-bottom-right-radius: $border-radius-md;
33
-
34
- .em-popover-i-content {
35
- > div {
36
- max-height: calc(75vh - 120px);
37
- overflow-y: auto;
38
- border-bottom: 1px solid $gray-light1;
39
- padding: 15px;
40
-
41
- &:last-of-type {
42
- border: none;
43
- border-bottom-left-radius: $border-radius-md;
44
- border-bottom-right-radius: $border-radius-md;
45
- }
46
- }
47
-
48
- .em-popover-i-title {
49
- display: flex;
50
- justify-content: space-between;
51
- align-items: center;
52
- }
53
-
54
- .em-popover-i-category {
55
- display: flex;
56
- justify-content: space-between;
57
-
58
- &:hover {
59
- cursor: pointer;
60
- background-color: $gray-light;
61
- }
62
- }
63
-
64
- .em-popover-i-close {
65
- cursor: pointer;
66
- }
67
- }
68
- }
@@ -1,37 +0,0 @@
1
- .em-input {
2
- position: relative;
3
- width: 100%;
4
-
5
- .em-input-field {
6
- min-height: 50px;
7
- width: 100%;
8
- background-color: $blue-light;
9
- border-top-left-radius: 10px;
10
- border-top-right-radius: 10px;
11
- border-bottom-right-radius: 0;
12
- border-bottom-left-radius: 0;
13
- box-shadow: inset 0 -2px 0 0 $blue-light1;
14
- border: none;
15
- font-size: 0.875rem;
16
- color: $gray-dark;
17
- padding: 10px 15px;
18
- margin-bottom: 15px;
19
- transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
20
-
21
- &:focus {
22
- background-color: $blue-light;
23
- color: $gray-dark;
24
- border: none;
25
- outline: none;
26
- box-shadow: inset 0 -2px 0 0 $blue-light4;
27
- }
28
- }
29
-
30
- .em-noresult {
31
- padding: 20px;
32
- }
33
- }
34
-
35
- .is-invalid .em-input .em-input-field {
36
- box-shadow: 0 2px 0 0 $red;
37
- }
@@ -1,225 +0,0 @@
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-belt-left {
9
- display: flex;
10
- align-items: center;
11
- flex-wrap: wrap;
12
-
13
- .belt-info {
14
- margin-left: 10px;
15
- }
16
- }
17
-
18
- .em-beltleft-container {
19
- display: flex;
20
- justify-content: center;
21
- align-items: center;
22
- margin-right: 20px;
23
-
24
- > .belt-icon {
25
- margin-right: 10px;
26
- display: flex;
27
- justify-content: center;
28
- align-items: center;
29
-
30
- svg {
31
- path, rect {
32
- fill: $blue-light4;
33
- }
34
- }
35
- }
36
-
37
- .icon-back {
38
- height: 40px;
39
- width: 40px;
40
- min-width: 40px;
41
- margin-right: 10px;
42
- border-radius: 10px;
43
- display: flex;
44
- align-items: center;
45
- justify-content: center;
46
- transition: all .5s cubic-bezier(.19,1,.22,1);
47
- box-shadow: none;
48
-
49
- &:hover {
50
- svg {
51
- transition: all .5s cubic-bezier(.19,1,.22,1);
52
- transform: translateX(-2px);
53
- }
54
- }
55
- }
56
-
57
- .belt-icon-check {
58
- margin-right: 10px;
59
-
60
- > div {
61
- display: flex;
62
- }
63
- }
64
-
65
- .belt-title {
66
- margin-block: 10px;
67
- flex: none;
68
-
69
- h6 {
70
- text-transform: uppercase;
71
- font-size: .875rem;
72
- color: $gray-dark;
73
- margin: 0;
74
- }
75
- }
76
- }
77
-
78
- .em-beltleft-cta {
79
- display: flex;
80
- justify-content: center;
81
- align-items: center;
82
- margin-right: 20px;
83
-
84
- a {
85
- margin-right: 10px;
86
- display: flex;
87
- justify-content: center;
88
- align-items: center;
89
- max-height: 40px;
90
- padding: 10px 20px;
91
- }
92
- }
93
-
94
- .em-belt-right {
95
- display: flex;
96
- align-items: center;
97
- justify-content: flex-end;
98
- flex-wrap: wrap;
99
-
100
- > a, > div {
101
- margin-left: 10px;
102
- }
103
-
104
- .em-dropdown {
105
- position: relative;
106
- }
107
-
108
- .pagination-summary, .belt-dropdown {
109
- display: flex;
110
- align-items: center;
111
- justify-content: center;
112
- height: 40px;
113
- padding: 10px 20px;
114
- border: none;
115
- border-radius: 10px;
116
- box-shadow: inset 0 0 0 1px $blue-light2;
117
- color: $gray-dark;
118
- text-decoration: none;
119
- font-size: .875rem;
120
- transition: all .5s cubic-bezier(.19,1,.22,1);
121
-
122
- &:hover {
123
- box-shadow: inset 0 0 0 1px $blue-light4;
124
- }
125
- }
126
-
127
- .pagination-summary {
128
- font-weight: $font-regular;
129
- }
130
-
131
- .belt-dropdown {
132
- span {
133
- font-size: .875rem;
134
- font-weight: 700;
135
- color: $gray-light4;
136
- }
137
-
138
- .icon-arrowdown {
139
- height: 20px;
140
- width: 20px;
141
- margin-left: 15px;
142
- transition: all .5s cubic-bezier(.19,1,.22,1);
143
- }
144
-
145
- .icon-add {
146
- display: flex;
147
- align-items: center;
148
- margin-right: 10px;
149
-
150
- svg path {
151
- fill: $gray-light4;
152
- }
153
- }
154
-
155
- &:hover{
156
- span {
157
- color: $gray-dark;
158
- }
159
-
160
- .icon-arrowdown {
161
- transform: translateY(2px);
162
-
163
- svg path {
164
- fill: $gray-light4;
165
- }
166
- }
167
- }
168
- }
169
-
170
- .belt-prev, .belt-next {
171
- padding: 10px;
172
- height: 40px;
173
- width: 40px;
174
- min-width: 40px;
175
- box-shadow: inset 0 0 0 1px $blue-light2;
176
- border-radius: 10px;
177
- transition: all .5s cubic-bezier(.19,1,.22,1);
178
-
179
- .belt-icon {
180
- height: 20px;
181
- width: 20px;
182
- background: 50% no-repeat;
183
- transition: all .5s cubic-bezier(.19,1,.22,1);
184
- }
185
-
186
- &:hover {
187
- box-shadow: inset 0 0 0 1px $blue-light4;
188
-
189
- .belt-icon {
190
- svg path {
191
- fill: $gray-light4;
192
- }
193
- }
194
- }
195
- }
196
-
197
- .belt-prev {
198
- &:hover .belt-icon {
199
- transform: translateX(-2px);
200
- }
201
- }
202
-
203
- .belt-next {
204
- &:hover .belt-icon {
205
- transform: translateX(2px);
206
- }
207
- }
208
-
209
- .modal-close {
210
- height: 40px;
211
- width: 40px;
212
- min-width: 40px;
213
- padding: 10px;
214
- box-shadow: none;
215
- border-radius: 10px;
216
- transition: all .5s cubic-bezier(.19,1,.22,1);
217
-
218
- &:hover {
219
- background-color: $blue-light1;
220
- box-shadow: inset 0 0 0 5px $blue-light1;
221
- }
222
- }
223
- }
224
- }
225
-