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,41 @@
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
+ }
@@ -0,0 +1,204 @@
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
+
@@ -0,0 +1,36 @@
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;
@@ -0,0 +1,95 @@
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
+ }
@@ -0,0 +1,68 @@
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
+ }
@@ -0,0 +1,37 @@
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
+ }