empower-container 0.1.26 → 0.1.29

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/dist/cjs/inputs/Select.js +1 -1
  2. package/dist/esm/inputs/Select.js +1 -1
  3. package/dist/scss/elements/_button.scss +11 -1
  4. package/dist/scss/elements/_popover.scss +8 -155
  5. package/dist/scss/library/_menubar.scss +3 -6
  6. package/dist/scss/library/_select.scss +272 -126
  7. package/package.json +1 -1
package/dist/cjs/inputs/Select.js CHANGED
@@ -29,7 +29,7 @@ var Asset_1 = require("../assets/Asset");
29
29
  var Popover = function (_a) {
30
30
  var open = _a.open, origin = _a.origin, children = _a.children, onClick = _a.onClick;
31
31
  return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: open &&
32
- (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, { children: children }))] }) }));
32
+ (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover em-menubar-dropdown", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, { children: children }))] }) }));
33
33
  };
34
34
  exports.Popover = Popover;
35
35
  var Dropdown = function (_a) {
package/dist/esm/inputs/Select.js CHANGED
@@ -26,7 +26,7 @@ import { SVG_CLOSE_GRAY, SVG_ARROWDOWN } from '../assets/Asset';
26
26
  export var Popover = function (_a) {
27
27
  var open = _a.open, origin = _a.origin, children = _a.children, onClick = _a.onClick;
28
28
  return (_jsx(Fragment, { children: open &&
29
- _jsxs(Fragment, { children: [_jsx("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }), _jsx("div", __assign({ className: "em-popover", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, { children: children }))] }) }));
29
+ _jsxs(Fragment, { children: [_jsx("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }), _jsx("div", __assign({ className: "em-popover em-menubar-dropdown", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, { children: children }))] }) }));
30
30
  };
31
31
  var Dropdown = function (_a) {
32
32
  var config = _a.config, customClass = _a.customClass, onChanged = _a.onChanged, isEmployeeSelection = _a.isEmployeeSelection, hideClearIcon = _a.hideClearIcon;
package/dist/scss/elements/_button.scss CHANGED
@@ -1,4 +1,4 @@
1
- .em-button{
1
+ .em-button {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  justify-content: center;
@@ -104,6 +104,16 @@
104
104
  }
105
105
  }
106
106
  }
107
+
108
+ &.delete {
109
+ color: $red;
110
+ box-shadow: inset 0 0 0 1px $red;
111
+ padding: 15px;
112
+
113
+ &:hover {
114
+ background-color: $red;
115
+ }
116
+ }
107
117
  }
108
118
 
109
119
  .em-text-link {
package/dist/scss/elements/_popover.scss CHANGED
@@ -1,4 +1,12 @@
1
1
  .em-popover {
2
+ position: absolute;
3
+ top: 50px;
4
+ margin-top: -2px;
5
+ font-size: 0.875rem;
6
+ color: $gray-dark;
7
+ z-index: 100;
8
+ display: flex;
9
+ width: 100%;
2
10
  background-color: $white;
3
11
  border-top: 5px solid $blue-light4;
4
12
  border-bottom-left-radius: $border-radius-md;
@@ -6,158 +14,3 @@
6
14
  box-shadow: $shadow-popover;
7
15
  max-width: 650px;
8
16
  }
9
-
10
-
11
- .em-datepicker-weekly {
12
- .rdrCalendarWrapper {
13
- display: flex;
14
- flex-direction: column;
15
- font-size: $text-sm;
16
- box-shadow: $shadow-popover;
17
-
18
- .rdrMonthAndYearWrapper {
19
- width: 100%;
20
- display: flex;
21
- justify-content: space-between;
22
- align-items: center;
23
- background-color: #0f2473;
24
- padding: 15px;
25
-
26
- button {
27
- border: none;
28
- width: 50px;
29
- height: 50px;
30
- border-radius: 0;
31
- background-color: transparent;
32
- display: flex;
33
- justify-content: center;
34
- align-items: center;
35
- border: none;
36
- transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
37
- cursor: pointer;
38
- }
39
- }
40
-
41
- .rdrMonthAndYearPickers {
42
- display: flex;
43
-
44
- select {
45
- min-width: 100px;
46
- color: $white;
47
- font-size: $text-base;
48
- height: 50px;
49
- border-radius: 0;
50
- border: none;
51
- // background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowdown-white.svg") right center no-repeat;
52
- background: transparent;
53
- transition: $transition;
54
-
55
- &:focus-visible {
56
- outline: none;
57
- }
58
-
59
- &:hover {
60
- background-color: transparentize(#091336, 0.5);
61
- }
62
-
63
- option {
64
- padding: 10px;
65
- background-color: $white;
66
- color: #4A5568;
67
- }
68
- }
69
- }
70
-
71
- .rdrNextPrevButton {
72
-
73
- i {
74
- height: 20px;
75
- width: 20px;
76
- border: 0;
77
- margin: 0;
78
- transition: $transition;
79
- }
80
-
81
- &.rdrPprevButton {
82
- i {
83
- background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowleft-white.svg") center center no-repeat;
84
- }
85
-
86
- &:hover {
87
- i {
88
- transform: translateX(-5px);
89
- }
90
- }
91
- }
92
-
93
- &.rdrNextButton {
94
- i {
95
- background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowright-white.svg") center center no-repeat;
96
- }
97
-
98
- &:hover {
99
- i {
100
- transform: translateX(5px);
101
- }
102
- }
103
- }
104
- }
105
-
106
- .rdrWeekDays {
107
- display: flex;
108
- padding: 15px 15px 0;
109
- }
110
-
111
- .rdrWeekDay {
112
- font-weight: 700;
113
- padding: 1rem 0.25rem;
114
- text-transform: uppercase;
115
- color: #A0AEC0;
116
- font-size: 0.875rem;
117
- width: 50px;
118
- text-align: center;
119
- }
120
-
121
- .rdrDay {
122
- font-size: 0.875rem;
123
- width: 50px;
124
- text-align: center;
125
- border: none;
126
- background-color: transparent;
127
-
128
- .rdrDayNumber {
129
- span {
130
- width: 50px;
131
- height: 50px;
132
- display: flex;
133
- align-items: center;
134
- justify-content: center;
135
- cursor: pointer;
136
- transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
137
- color: $gray-dark;
138
-
139
- &:hover {
140
- background-color: #EDF2F7;
141
- }
142
- }
143
- }
144
-
145
- &.rdrDayPassive {
146
- .rdrDayNumber > span{
147
- cursor: default;
148
- color: $gray-light3;
149
-
150
- &:hover{
151
- background-color: transparent;
152
- }
153
- }
154
- }
155
- }
156
-
157
- .rdrDays {
158
- display: flex;
159
- flex-wrap: wrap;
160
- padding: 0 15px 15px;
161
- }
162
- }
163
- }
package/dist/scss/library/_menubar.scss CHANGED
@@ -8,12 +8,13 @@
8
8
  .em-dropdown {
9
9
  position: relative;
10
10
  min-width: 100px;
11
+ white-space: nowrap;
11
12
  }
12
13
 
13
14
  .em-belt-left {
14
15
  display: flex;
15
16
  align-items: center;
16
- flex-wrap: nowrap;
17
+ flex-wrap: wrap;
17
18
 
18
19
  .belt-info {
19
20
  margin-left: 10px;
@@ -78,10 +79,6 @@
78
79
  margin: 0;
79
80
  }
80
81
  }
81
-
82
- .em-dropdown .em-popover {
83
- width: auto;
84
- }
85
82
  }
86
83
 
87
84
  .em-beltleft-cta {
@@ -134,7 +131,7 @@
134
131
  display: flex;
135
132
  align-items: center;
136
133
  justify-content: flex-end;
137
- flex-wrap: wrap;
134
+ flex-wrap: nowrap;
138
135
 
139
136
  > a, > div {
140
137
  margin-left: 10px;
package/dist/scss/library/_select.scss CHANGED
@@ -1,7 +1,27 @@
1
+ .em-popover.em-menubar-dropdown {
2
+ top: 50px;
3
+ margin-top: 0;
4
+ width: auto;
5
+ border-top: 5px solid $blue-light4;
6
+ }
7
+
1
8
  .em-select {
2
9
  position: relative;
3
10
  width: 100%;
4
11
 
12
+ option{
13
+ font-size: 0.875rem;
14
+ color: $gray-dark;
15
+ padding: 20px;
16
+ transition: $transition;
17
+ cursor: pointer;
18
+
19
+ &:hover{
20
+ background-color: $blue-light;
21
+ padding: 20px 18px 20px 22px;
22
+ }
23
+ }
24
+
5
25
  .em-input-field {
6
26
  width: 100%;
7
27
  }
@@ -57,181 +77,307 @@
57
77
  z-index: 99;
58
78
  }
59
79
 
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%;
80
+ .em-popover-input{
81
+ display: flex;
82
+ padding: 20px;
73
83
 
74
- option{
75
- font-size: 0.875rem;
76
- color: $gray-dark;
77
- padding: 20px;
78
- transition: $transition;
79
- cursor: pointer;
84
+ .field {
85
+ margin: 0 15px 0 0;
86
+ width: 160px;
80
87
 
81
- &:hover{
82
- background-color: $blue-light;
83
- padding: 20px 18px 20px 22px;
84
- }
88
+ > label {
89
+ position: relative;
90
+ top: 0;
91
+ left: 0;
92
+ padding: 0;
93
+ margin-bottom: 5px;
94
+ display: inline-block;
95
+ font-size: .875rem;
96
+ font-weight: 700;
97
+ color: $gray-light3;
98
+ text-transform: uppercase;
85
99
  }
86
100
  }
87
101
 
88
- .em-popover-input{
89
- display: flex;
90
- padding: 20px;
102
+ button {
103
+ border: 0;
104
+ background: none;
105
+ height: 50px;
106
+ width: 50px;
107
+ display: inline-flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ cursor: pointer;
111
+ transition: $transition;
112
+ }
113
+ }
91
114
 
92
- .field {
93
- margin: 0 15px 0 0;
94
- width: 160px;
95
-
96
- > label {
97
- position: relative;
98
- top: 0;
99
- left: 0;
100
- padding: 0;
101
- margin-bottom: 5px;
102
- display: inline-block;
103
- font-size: .875rem;
104
- font-weight: 700;
105
- color: $gray-light3;
106
- text-transform: uppercase;
107
- }
115
+ .em-popover-list {
116
+ display: block;
117
+ padding: 0;
118
+
119
+ a {
120
+ display: block;
121
+ font-weight: 700;
122
+ font-size: .875rem;
123
+ color: $gray-light4;
124
+ padding: 15px 20px;
125
+ min-height: 50px;
126
+ line-height: 20px;
127
+ text-decoration: none;
128
+ text-align: left;
129
+ border: none;
130
+ box-shadow: none;
131
+ transition: $transition;
132
+ margin-right: 0;
133
+ cursor: pointer;
134
+
135
+ &:hover {
136
+ background-color: $blue-light;
137
+ color: $gray-dark;
138
+ padding: 15px 18px 15px 22px;
139
+ box-shadow: none;
140
+ border: none;
108
141
  }
142
+ }
143
+ }
144
+
145
+ .em-popover-months {
146
+ width: 300px;
147
+ padding: 0;
148
+ flex-direction: column;
149
+
150
+ .list-years {
151
+ background-color: $blue-dark;
152
+ display: flex;
153
+ justify-content: space-between;
154
+ margin-top: -1px;
155
+ width: 100%;
109
156
 
110
157
  button {
111
- border: 0;
112
- background: none;
113
- height: 50px;
114
- width: 50px;
115
- display: inline-flex;
116
- align-items: center;
117
- justify-content: center;
158
+ background-color: transparent;
159
+ border: none;
118
160
  cursor: pointer;
119
161
  transition: $transition;
162
+
163
+ svg path {
164
+ fill: $white;
165
+ }
166
+
167
+ img {
168
+ transition: $transition;
169
+
170
+ &:hover {
171
+ background-color: transparentize($blue-dark1, 0.5);
172
+ }
173
+
174
+ &:focus {
175
+ outline: none;
176
+ }
177
+ }
178
+ }
179
+
180
+ > div {
181
+ color: $white;
182
+ font-size: 1.5rem;
183
+ padding: 15px;
120
184
  }
121
185
  }
122
186
 
123
- .em-popover-list {
124
- display: block;
125
- padding: 0;
187
+ .list-months {
188
+ display: flex;
189
+ flex-wrap: wrap;
126
190
 
127
191
  a {
128
- display: block;
192
+ width: 33.33%;
193
+ box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
194
+ padding: 15px;
195
+ color: $gray-light4;
196
+ text-align: center;
129
197
  font-weight: 700;
130
198
  font-size: .875rem;
131
- color: $gray-light4;
132
- padding: 15px 20px;
133
- min-height: 50px;
134
- line-height: 20px;
135
199
  text-decoration: none;
136
- text-align: left;
137
- border: none;
138
- box-shadow: none;
139
- transition: $transition;
140
- margin-right: 0;
141
- cursor: pointer;
142
200
 
143
201
  &:hover {
144
- background-color: $blue-light;
202
+ background-color: $gray-light;
145
203
  color: $gray-dark;
146
- padding: 15px 18px 15px 22px;
147
- box-shadow: none;
148
- border: none;
204
+ }
205
+
206
+ &.is-disabled{
207
+ background-color: $gray-light;
208
+ color: $gray-light3;
209
+ cursor: initial;
210
+
211
+ &:hover{
212
+ background-color: $gray-light;
213
+ color: $gray-light3;
214
+ }
215
+ }
216
+
217
+ &.is-selected{
218
+ background-color: $blue-dark1;
219
+ color: $white;
220
+ box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
149
221
  }
150
222
  }
151
223
  }
224
+ }
152
225
 
153
- .em-popover-months {
154
- width: 300px;
155
- padding: 0;
226
+ .em-datepicker-weekly {
227
+ .rdrCalendarWrapper {
228
+ display: flex;
156
229
  flex-direction: column;
157
-
158
- .list-years {
159
- background-color: $blue-dark;
230
+ font-size: $text-sm;
231
+ box-shadow: $shadow-popover;
232
+
233
+ .rdrMonthAndYearWrapper {
234
+ width: 100%;
160
235
  display: flex;
161
236
  justify-content: space-between;
162
- margin-top: -1px;
163
- width: 100%;
164
-
165
- button {
166
- background-color: transparent;
237
+ align-items: center;
238
+ background-color: #0f2473;
239
+ padding: 15px;
240
+
241
+ button {
242
+ border: none;
243
+ width: 50px;
244
+ height: 50px;
245
+ border-radius: 0;
246
+ background-color: transparent;
247
+ display: flex;
248
+ justify-content: center;
249
+ align-items: center;
250
+ border: none;
251
+ transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
252
+ cursor: pointer;
253
+ }
254
+ }
255
+
256
+ .rdrMonthAndYearPickers {
257
+ display: flex;
258
+
259
+ select {
260
+ min-width: 100px;
261
+ color: $white;
262
+ font-size: $text-base;
263
+ height: 50px;
264
+ border-radius: 0;
167
265
  border: none;
168
- cursor: pointer;
266
+ // background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowdown-white.svg") right center no-repeat;
267
+ background: transparent;
169
268
  transition: $transition;
170
-
171
- svg path {
172
- fill: $white;
269
+
270
+ &:focus-visible {
271
+ outline: none;
173
272
  }
174
273
 
175
- img {
176
- transition: $transition;
177
-
178
- &:hover {
179
- background-color: transparentize($blue-dark1, 0.5);
180
- }
274
+ &:hover {
275
+ background-color: transparentize(#091336, 0.5);
276
+ }
181
277
 
182
- &:focus {
183
- outline: none;
184
- }
278
+ option {
279
+ padding: 10px;
280
+ background-color: $white;
281
+ color: #4A5568;
185
282
  }
186
283
  }
187
-
188
- > div {
189
- color: $white;
190
- font-size: 1.5rem;
191
- padding: 15px;
284
+ }
285
+
286
+ .rdrNextPrevButton {
287
+
288
+ i {
289
+ height: 20px;
290
+ width: 20px;
291
+ border: 0;
292
+ margin: 0;
293
+ transition: $transition;
294
+ }
295
+
296
+ &.rdrPprevButton {
297
+ i {
298
+ background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowleft-white.svg") center center no-repeat;
299
+ }
300
+
301
+ &:hover {
302
+ i {
303
+ transform: translateX(-5px);
304
+ }
192
305
  }
306
+ }
307
+
308
+ &.rdrNextButton {
309
+ i {
310
+ background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowright-white.svg") center center no-repeat;
311
+ }
312
+
313
+ &:hover {
314
+ i {
315
+ transform: translateX(5px);
316
+ }
317
+ }
318
+ }
193
319
  }
194
-
195
- .list-months {
320
+
321
+ .rdrWeekDays {
196
322
  display: flex;
197
- flex-wrap: wrap;
198
-
199
- a {
200
- width: 33.33%;
201
- box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
202
- padding: 15px;
203
- color: $gray-light4;
204
- text-align: center;
205
- font-weight: 700;
206
- font-size: .875rem;
207
- text-decoration: none;
208
-
209
- &:hover {
210
- background-color: $gray-light;
323
+ padding: 15px 15px 0;
324
+ }
325
+
326
+ .rdrWeekDay {
327
+ font-weight: 700;
328
+ padding: 1rem 0.25rem;
329
+ text-transform: uppercase;
330
+ color: #A0AEC0;
331
+ font-size: 0.875rem;
332
+ width: 50px;
333
+ text-align: center;
334
+ }
335
+
336
+ .rdrDay {
337
+ font-size: 0.875rem;
338
+ width: 50px;
339
+ text-align: center;
340
+ border: none;
341
+ background-color: transparent;
342
+
343
+ .rdrDayNumber {
344
+ span {
345
+ width: 50px;
346
+ height: 50px;
347
+ display: flex;
348
+ align-items: center;
349
+ justify-content: center;
350
+ cursor: pointer;
351
+ transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
211
352
  color: $gray-dark;
353
+
354
+ &:hover {
355
+ background-color: #EDF2F7;
356
+ }
212
357
  }
213
-
214
- &.is-disabled{
215
- background-color: $gray-light;
358
+ }
359
+
360
+ &.rdrDayPassive {
361
+ .rdrDayNumber > span{
362
+ cursor: default;
216
363
  color: $gray-light3;
217
- cursor: initial;
218
-
364
+
219
365
  &:hover{
220
- background-color: $gray-light;
221
- color: $gray-light3;
366
+ background-color: transparent;
222
367
  }
223
368
  }
224
-
225
- &.is-selected{
226
- background-color: $blue-dark1;
227
- color: $white;
228
- box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
229
- }
230
369
  }
231
370
  }
232
- }
371
+
372
+ .rdrDays {
373
+ display: flex;
374
+ flex-wrap: wrap;
375
+ padding: 0 15px 15px;
376
+ }
377
+ }
233
378
  }
234
379
 
380
+
235
381
  /* scroll */
236
382
  .em-select-popover {
237
383
  scrollbar-width: thin;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "empower-container",
3
- "version": "0.1.26",
3
+ "version": "0.1.29",
4
4
  "private": false,
5
5
  "homepage": "https://bitbucket.org/empowerteams/empower-container",
6
6
  "main": "./dist/cjs/ndex.js",