toggle-components-library 1.36.1 → 1.36.3-beta.0

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 (39) hide show
  1. package/dist/img/airship-feedback-hover.a207c947.svg +10 -0
  2. package/dist/img/airship-feedback.1f7c858c.svg +10 -0
  3. package/dist/toggle-components-library.common.js +39486 -13335
  4. package/dist/toggle-components-library.common.js.map +1 -1
  5. package/dist/toggle-components-library.css +1 -1
  6. package/dist/toggle-components-library.umd.js +39486 -13335
  7. package/dist/toggle-components-library.umd.js.map +1 -1
  8. package/dist/toggle-components-library.umd.min.js +285 -8
  9. package/dist/toggle-components-library.umd.min.js.map +1 -1
  10. package/package.json +2 -1
  11. package/src/assets/icons/airship-feedback-hover.svg +10 -0
  12. package/src/assets/icons/airship-feedback.svg +10 -0
  13. package/src/components/buttons/ToggleMetricsButton.vue +22 -3
  14. package/src/components/cards/ToggleCommentCard.vue +55 -0
  15. package/src/components/carousel/ToggleCarousel.vue +29 -16
  16. package/src/components/carousel/ToggleCarouselSlide.vue +1 -1
  17. package/src/components/forms/ToggleDatePicker.vue +229 -138
  18. package/src/components/forms/ToggleInputCurrency.vue +10 -3
  19. package/src/components/forms/ToggleInputPercentage.vue +7 -1
  20. package/src/components/forms/ToggleInputSelect.vue +7 -13
  21. package/src/components/forms/ToggleInputText.vue +0 -11
  22. package/src/components/metrics/ToggleMetricSingleMetric.vue +12 -7
  23. package/src/components/metrics/ToggleMetricSparkLine.vue +7 -3
  24. package/src/components/mixins/mixins.js +2 -2
  25. package/src/components/statusbar/ToggleStatusBar.vue +74 -0
  26. package/src/components/tables/ToggleTable.vue +49 -114
  27. package/src/index.js +7 -4
  28. package/src/sass/includes/_as_buttons.scss +47 -4
  29. package/src/sass/includes/_as_cards.scss +33 -0
  30. package/src/sass/includes/_as_carousels.scss +12 -0
  31. package/src/sass/includes/_as_inputs.scss +830 -825
  32. package/src/sass/includes/_as_metrics.scss +5 -0
  33. package/src/sass/includes/_as_navs.scss +18 -2
  34. package/src/sass/includes/_as_statusbar.scss +183 -0
  35. package/src/sass/includes/_as_table.scss +163 -163
  36. package/src/sass/main.scss +1 -0
  37. package/dist/img/contacts-greyblue.ef6f8a9a.svg +0 -1
  38. package/dist/img/contacts-white.95d07c7a.svg +0 -1
  39. package/package-lock.json +0 -20285
package/src/sass/includes/_as_inputs.scss CHANGED
@@ -8,223 +8,232 @@
8
8
  .toggle-input-search-options,
9
9
  .toggle-input-select,
10
10
  .toggle-contact-search-container{
11
- @include toggle-global-font-config;
11
+ @include toggle-global-font-config;
12
12
  }
13
13
 
14
14
  .toggle-input-counter{
15
- font-size: $toggle-font-size-small;
16
- display : inline-block;
17
- float : right;
15
+ font-size: $toggle-font-size-small;
16
+ display : inline-block;
17
+ float : right;
18
18
  }
19
19
 
20
20
  .toggle-input, .toggle-input-select, .toggle-input-crud-container{
21
- font-size : $toggle-font-size-large;
22
- color : $toggle-input-colour;
23
- width : 100%;
24
- background-color: transparent;
25
- background: none;
26
- border : none;
27
- font-weight : bold;
28
- border-radius : 5px;
29
- padding : 0 0 1rem 0;
30
- box-sizing : border-box;
31
- padding: 0rem 3.5rem 1rem 0rem;
32
- position : relative;
33
- box-shadow : none;
34
- z-index : 1;
35
- background-color : transparent;
36
- background-image : none;
37
- height: 2.8rem;
38
- clear: both;
39
- float: left;
40
- margin: 0;
41
-
42
- &.height-medium {
43
- height: 6rem;
44
- }
45
-
46
- &.height-large {
47
- height: 10rem;
48
- }
49
-
50
- &.height-extra-large {
51
- height: 15rem;
52
- }
21
+ font-size : $toggle-font-size-large;
22
+ color : $toggle-input-colour;
23
+ width : 100%;
24
+ background-color: transparent;
25
+ background: none;
26
+ border : none;
27
+ font-weight : bold;
28
+ border-radius : 5px;
29
+ padding : 0 0 1rem 0;
30
+ box-sizing : border-box;
31
+ padding: 0rem 3.5rem 1rem 0rem;
32
+ position : relative;
33
+ box-shadow : none;
34
+ z-index : 1;
35
+ background-color : transparent;
36
+ background-image : none;
37
+ height: 2.8rem;
38
+ clear: both;
39
+ float: left;
40
+ margin: 0;
41
+
42
+ &.height-medium {
43
+ height: 6rem;
44
+ }
45
+
46
+ &.height-large {
47
+ height: 10rem;
48
+ }
49
+
50
+ &.height-extra-large {
51
+ height: 15rem;
52
+ }
53
53
 
54
54
  }
55
55
 
56
56
  .toggle-input-search-options-container{
57
- position:relative;
58
- float:left;
59
- clear: both;
60
- width: 100%;
57
+ position:relative;
58
+ float:left;
59
+ clear: both;
60
+ width: 100%;
61
61
  }
62
62
 
63
63
 
64
64
  .toggle-input-search-options{
65
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
66
- float:left;
67
- clear: both;
68
- background: $toggle-white;
69
- margin:0;
70
- width:100%;
71
- padding: 0;
72
- position:absolute;
73
- list-style: none;
74
- max-height: 10rem;
75
- overflow: scroll;
76
- z-index: 10;
77
-
78
- li{
79
- padding:0.5rem 0.5rem 0 0.5rem;
80
- cursor: pointer;
81
- opacity: 0.8;
82
-
83
- &:hover{
84
- opacity: 1;
85
- }
86
- &:last-child{
87
- padding:0.5rem;
65
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
66
+ float:left;
67
+ clear: both;
68
+ background: $toggle-white;
69
+ margin:0;
70
+ width:100%;
71
+ padding: 0;
72
+ position:absolute;
73
+ list-style: none;
74
+ max-height: 10rem;
75
+ overflow: scroll;
76
+ z-index: 10;
77
+
78
+ li{
79
+ padding:0.5rem 0.5rem 0 0.5rem;
80
+ cursor: pointer;
81
+ opacity: 0.8;
82
+
83
+ &:hover{
84
+ opacity: 1;
85
+ }
86
+ &:last-child{
87
+ padding:0.5rem;
88
+ }
88
89
  }
89
- }
90
90
  }
91
91
 
92
- // placeholders
92
+ // placeholders
93
93
  ::-webkit-input-placeholder { /* Edge */
94
- color:$toggle-placeholder-grey;
94
+ color:$toggle-placeholder-grey;
95
95
  }
96
96
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
97
- color:$toggle-placeholder-grey;
97
+ color:$toggle-placeholder-grey;
98
98
  }
99
99
  ::placeholder {
100
- color:$toggle-placeholder-grey;
100
+ color:$toggle-placeholder-grey;
101
101
  }
102
102
 
103
103
  .toggle-input-is-invalid{
104
- border:1px solid $toggle-error-red !important;
104
+ border:1px solid $toggle-error-red !important;
105
105
  }
106
106
 
107
107
 
108
108
 
109
109
  .toggle-input-container, .toggle-date-container, .toggle-input-group{
110
110
 
111
- padding : 0.8rem 1.2rem 1.4rem 1.2rem;
112
- background-color: $toggle-off-white;
113
- border-radius : 9px;
114
- box-sizing : border-box;
115
- border : 1px solid $toggle-off-white;
116
- position : relative;
117
- float : left;
118
- width : 100%;
119
- &:hover {
120
- background-color: $toggle-white;
121
- }
122
- &.margin-bottom-0{
123
- padding-bottom:0;
124
- }
111
+ padding : 0.8rem 1.2rem 1.4rem 1.2rem;
112
+ background-color: $toggle-off-white;
113
+ border-radius : 9px;
114
+ box-sizing : border-box;
115
+ border : 1px solid $toggle-off-white;
116
+ position : relative;
117
+ float : left;
118
+ width : 100%;
119
+ &:hover {
120
+ background-color: $toggle-white;
121
+ }
122
+ &.margin-bottom-0{
123
+ padding-bottom:0;
124
+ }
125
125
 
126
126
  }
127
127
 
128
128
  // When inputs are inside input groups or modals, they look a bit different
129
129
  .toggle-input-group, .toggle-modal-container, .toggle-input-radio-group-container{
130
- .toggle-input-is-invalid{
131
- border:none !important;
132
- }
133
-
134
- .toggle-input-container, .toggle-date-container{
135
- padding: 0 0 1.4rem 0 ;
136
- background:none;
137
- border:none;
138
- }
139
- .toggle-input{
140
- background:$toggle-dark-grey;
141
- padding : 0.5rem 2.5rem 0.5rem 1rem;
142
- }
130
+ .toggle-input-is-invalid{
131
+ border:none !important;
132
+ }
133
+
134
+ .toggle-input-container, .toggle-date-container{
135
+ padding: 0 0 1.4rem 0 ;
136
+ background:none;
137
+ border:none;
138
+ }
139
+ .toggle-input{
140
+ background:$toggle-dark-grey;
141
+ padding : 0.5rem 2.5rem 0.5rem 1rem;
142
+ }
143
143
  }
144
144
 
145
145
 
146
146
  .toggle-input-label {
147
- display : inline-block;
148
- font-size: 1rem;
149
- color : $toggle-input-colour;
150
- margin-bottom: 0.5rem;
151
- float: left;
147
+ display : inline-block;
148
+ font-size: 1rem;
149
+ color : $toggle-input-colour;
150
+ margin-bottom: 0.5rem;
151
+ float: left;
152
152
  }
153
153
 
154
154
  .toggle-input-label-error {
155
- font-size: $toggle-font-size-small;
156
- color : $toggle-error-red !important;
157
- display : block;
158
- position : absolute;
159
- bottom : 0.3rem;
155
+ font-size: $toggle-font-size-small;
156
+ color : $toggle-error-red !important;
157
+ display : block;
158
+ position : absolute;
159
+ bottom : 0.3rem;
160
160
  }
161
161
 
162
162
  // date picker
163
163
 
164
164
  .toggle-date-container{
165
165
 
166
- *{
167
- font-family: $toggle-font-family;
168
- color : $toggle-input-colour;
169
- }
166
+ *{
167
+ font-family: $toggle-font-family;
168
+ color : $toggle-input-colour;
169
+ }
170
170
 
171
- .toggle-input{
172
- padding:0.5rem 3.5rem 0.5rem 1rem;
173
- background-color: $toggle-dark-grey;
174
- }
171
+ .toggle-input{
172
+ padding:0.5rem 3.5rem 0.5rem 1rem;
173
+ background-color: $toggle-dark-grey;
174
+ }
175
175
  }
176
176
 
177
177
 
178
178
 
179
179
  .toggle-clear{
180
- background : transparent;
181
- background-image : url('../assets/icons/delete.svg');
182
- background-repeat: no-repeat;
183
- cursor : pointer;
184
- margin-left : 1rem;
185
- height : 1.5rem;
186
- width : 1.5rem;
187
- border : none;
180
+ background : transparent;
181
+ background-image : url('../assets/icons/delete.svg');
182
+ background-repeat: no-repeat;
183
+ cursor : pointer;
184
+ margin-left : 1rem;
185
+ height : 1.5rem;
186
+ width : 1.5rem;
187
+ border : none;
188
188
  }
189
189
 
190
190
  .toggle-clear-dates {
191
- position : absolute;
192
- top : 1rem;
193
- right : 1rem;
194
- background: url("../assets/icons/grey_cross.svg") no-repeat;
195
- width : 1rem;
196
- height : 1rem;
197
- opacity : 0.5;
198
- cursor : pointer;
199
- &:hover {
200
- opacity: 1;
201
- }
191
+ position : absolute;
192
+ top : 1rem;
193
+ right : 1rem;
194
+ background: url("../assets/icons/grey_cross.svg") no-repeat;
195
+ width : 1rem;
196
+ height : 1rem;
197
+ opacity : 0.5;
198
+ cursor : pointer;
199
+ &:hover {
200
+ opacity: 1;
201
+ }
202
202
  }
203
203
 
204
204
 
205
205
 
206
206
  .toggle-date-input-container {
207
- display: flex;
208
- align-items: center;
209
- width:100%;
210
- clear: both;
211
- float:left;
207
+ display: flex;
208
+ align-items: center;
209
+ width:100%;
210
+ clear: both;
211
+ float:left;
212
212
  }
213
213
 
214
214
  .toggle-date-input-calendar-icon{
215
- position:relative;
216
- width: 100%;
217
- &:after{
218
- cursor: pointer;
219
- content: url("../assets/icons/calendar.svg");
220
- width: 1.5rem;
221
- height: 1.5rem;
222
- position: absolute;
223
- right: 1rem;
224
- top: 0.7rem;
225
- pointer-events: none;
226
- z-index: 2;
227
- }
215
+ position:relative;
216
+ width: 100%;
217
+ &:after{
218
+ cursor: pointer;
219
+ content: url("../assets/icons/calendar.svg");
220
+ width: 1.5rem;
221
+ height: 1.5rem;
222
+ position: absolute;
223
+ right: 1rem;
224
+ top: 0.7rem;
225
+ pointer-events: none;
226
+ z-index: 2;
227
+ }
228
+ }
229
+
230
+ .toggle-date-input-calendar-icon-disabled {
231
+ cursor: default;
232
+ opacity: 0.4;
233
+ }
234
+
235
+ .toggle-date-input-disabled {
236
+ opacity: 0.7 !important;
228
237
  }
229
238
 
230
239
  .calendar-icon-disabled {
@@ -232,114 +241,110 @@
232
241
  opacity: 0.5;
233
242
  }
234
243
 
235
- .toggle-input-select-container {
236
- position:relative;
237
- background-color: $toggle-dark-grey;
238
- border-radius:5px;
239
- overflow: auto;
240
- float: left;
241
- clear: both;
242
- width: 100%;
243
- container-type: inline-size;
244
- @container (inline-size > 140px){
244
+ .toggle-input-select-container{
245
+ position:relative;
246
+ background-color: $toggle-dark-grey;
247
+ border-radius:5px;
248
+ overflow: auto;
249
+ float: left;
250
+ clear: both;
251
+ width: 100%;
245
252
  &:after{
246
- content: '';
247
- width: 1.5rem;
248
- height: 1.5rem;
249
- background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
250
- position: absolute;
251
- z-index: 1;
252
- right: 1rem;
253
- top: 0.7rem;
254
- pointer-events: none;
253
+ content: '';
254
+ width: 1.5rem;
255
+ height: 1.5rem;
256
+ background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
257
+ position: absolute;
258
+ right: 1rem;
259
+ top: 0.7rem;
260
+ pointer-events: none;
255
261
  }
256
- }
257
262
  }
258
263
 
264
+
259
265
  .toggle-input-select{
260
266
 
261
- //padding : 0.5rem 2.5rem 0.5rem 1rem;
262
- padding: 0.5rem;
263
- cursor : pointer;
267
+ padding : 0.5rem 2.5rem 0.5rem 1rem;
268
+ cursor : pointer;
264
269
 
265
- -webkit-appearance: none;
266
- -moz-appearance : none;
267
- appearance : none;
270
+ -webkit-appearance: none;
271
+ -moz-appearance : none;
272
+ appearance : none;
268
273
 
269
- &:focus {
270
- outline: none;
271
- }
274
+ &:focus {
275
+ outline: none;
276
+ }
272
277
  }
273
278
 
274
279
  // For multi tier side nav
275
280
  .toggle-multi-tier-sidenav-container {
276
281
 
277
- .toggle-input-container {
278
- padding: 0.4rem 0rem 0rem 0.8rem;
279
- }
282
+ .toggle-input-container {
283
+ padding: 0.4rem 0rem 0rem 0.8rem;
284
+ }
280
285
 
281
- .toggle-input-label {
282
- margin-bottom: 0;
283
- font-size: 0.8rem;
284
- }
286
+ .toggle-input-label {
287
+ margin-bottom: 0;
288
+ font-size: 0.8rem;
289
+ }
285
290
 
286
- .toggle-input-select-container {
287
- position: relative;
288
- background-color: transparent;
289
- }
291
+ .toggle-input-select-container {
292
+ position: relative;
293
+ background-color: transparent;
294
+ }
290
295
 
291
- .toggle-input-select {
292
- padding: 0rem;
293
- font-size: 0.9rem;
294
- }
296
+ .toggle-input-select {
297
+ padding: 0rem;
298
+ font-size: 0.9rem;
299
+ }
295
300
  }
296
301
 
297
302
  // radio
298
303
 
299
304
  .toggle-input-radio-container{
300
305
 
301
- display : flex;
302
- padding-bottom:0.4rem;
303
- width:100%;
304
- clear: both;
305
- float: left;
306
- &.wrap {
307
- flex-wrap: wrap;
308
- }
309
- .toggle-input-radio,.toggle-input-checkbox, .toggle-input-checkbox-inline{
310
- background-color: $toggle-dark-grey;
311
- }
306
+ display : flex;
307
+ padding-bottom:0.4rem;
308
+ width:100%;
309
+ clear: both;
310
+ float: left;
311
+ &.wrap {
312
+ flex-wrap: wrap;
313
+ }
314
+ .toggle-input-radio,.toggle-input-checkbox, .toggle-input-checkbox-inline{
315
+ background-color: $toggle-dark-grey;
316
+ }
312
317
 
313
- .toggle-input-radio-button-img{
314
- margin-left: 1rem;
315
- }
316
- .toggle-input-checkbox-icon {
317
- height: 2rem;
318
- margin-left: auto ;
319
- }
318
+ .toggle-input-radio-button-img{
319
+ margin-left: 1rem;
320
+ }
321
+ .toggle-input-checkbox-icon {
322
+ height: 2rem;
323
+ margin-left: auto ;
324
+ }
320
325
 
321
326
  }
322
327
 
323
328
  .toggle-input-radio-group-container{
324
329
 
325
- padding-bottom:0.4rem;
326
- clear: both;
327
- float: left;
330
+ padding-bottom:0.4rem;
331
+ clear: both;
332
+ float: left;
328
333
 
329
- .toggle-input-container{
330
- padding-bottom:0;
334
+ .toggle-input-container{
335
+ padding-bottom:0;
331
336
 
332
- }
337
+ }
333
338
 
334
- .toggle-input-checkbox, .toggle-input-checkbox-inline{
335
- background-color: $toggle-dark-grey;
336
- }
339
+ .toggle-input-checkbox, .toggle-input-checkbox-inline{
340
+ background-color: $toggle-dark-grey;
341
+ }
337
342
 
338
- .toggle-input-radio{
339
- clear:both;
340
- float: left;
341
- margin-left:2.2rem;
342
- }
343
+ .toggle-input-radio{
344
+ clear:both;
345
+ float: left;
346
+ margin-left:2.2rem;
347
+ }
343
348
 
344
349
  }
345
350
 
@@ -347,154 +352,154 @@
347
352
 
348
353
 
349
354
  .toggle-input-radio, .toggle-input-checkbox, .toggle-input-checkbox-inline{
350
- cursor : pointer;
351
- align-items : center;
352
- float : left;
353
- display : inline-block;
354
- padding : 0 1rem;
355
- background-color: $toggle-off-white;
356
- border-radius : 6px;
357
- margin-right : 1rem;
358
- margin-bottom : 1rem;
359
- &:hover {
355
+ cursor : pointer;
356
+ align-items : center;
357
+ float : left;
358
+ display : inline-block;
359
+ padding : 0 1rem;
360
360
  background-color: $toggle-off-white;
361
- }
362
- span {
363
- float: left;
364
- display: inline-block;
365
- }
366
- min-height: 2.8rem;;
367
- box-sizing:border-box;
368
- display: flex;
369
- align-items: center;
370
-
371
- div{
372
- display : flex;
361
+ border-radius : 6px;
362
+ margin-right : 1rem;
363
+ margin-bottom : 1rem;
364
+ &:hover {
365
+ background-color: $toggle-off-white;
366
+ }
367
+ span {
368
+ float: left;
369
+ display: inline-block;
370
+ }
371
+ min-height: 2.8rem;;
372
+ box-sizing:border-box;
373
+ display: flex;
373
374
  align-items: center;
374
- }
375
375
 
376
+ div{
377
+ display : flex;
378
+ align-items: center;
379
+ }
376
380
 
377
- input[type="radio"], input[type="checkbox"]{
378
- display: none;
379
- }
380
381
 
381
- &:hover > input + div {
382
- .toggle-input-radio-check-element{
383
- background: #D1D1D1;
384
- border-radius: 25px;
382
+ input[type="radio"], input[type="checkbox"]{
383
+ display: none;
385
384
  }
386
- .toggle-input-checkbox-check-element{
387
- background: url('../assets/icons/checkbox_hover.svg') no-repeat;
385
+
386
+ &:hover > input + div {
387
+ .toggle-input-radio-check-element{
388
+ background: #D1D1D1;
389
+ border-radius: 25px;
390
+ }
391
+ .toggle-input-checkbox-check-element{
392
+ background: url('../assets/icons/checkbox_hover.svg') no-repeat;
393
+ }
388
394
  }
389
- }
390
395
 
391
- > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
392
- .toggle-input-radio-check-element {
393
- background: url('../assets/icons/tick_circle.svg') no-repeat;
396
+ > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
397
+ .toggle-input-radio-check-element {
398
+ background: url('../assets/icons/tick_circle.svg') no-repeat;
399
+ }
394
400
  }
395
- }
396
401
 
397
- > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
398
- .toggle-input-checkbox-check-element {
399
- background: url('../assets/icons/checkbox_checked.svg') no-repeat;
402
+ > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
403
+ .toggle-input-checkbox-check-element {
404
+ background: url('../assets/icons/checkbox_checked.svg') no-repeat;
405
+ }
400
406
  }
401
- }
402
407
 
403
408
 
404
409
 
405
- > input:disabled:checked + div{
406
- .toggle-input-radio-check-element {
407
- background: url('../assets/icons/tick_circle_grey.svg') no-repeat !important;
410
+ > input:disabled:checked + div{
411
+ .toggle-input-radio-check-element {
412
+ background: url('../assets/icons/tick_circle_grey.svg') no-repeat !important;
413
+ }
414
+
408
415
  }
409
416
 
410
- }
417
+ > input:disabled:checked + div{
418
+ .toggle-input-checkbox-check-element {
419
+ background: url('../assets/icons/checkbox_inactive.svg') no-repeat !important;
420
+ }
411
421
 
412
- > input:disabled:checked + div{
413
- .toggle-input-checkbox-check-element {
414
- background: url('../assets/icons/checkbox_inactive.svg') no-repeat !important;
415
422
  }
416
423
 
417
- }
418
-
419
424
  }
420
425
 
421
426
  .toggle-input-is-disabled{
422
- .toggle-input-radio, .toggle-input-checkbox, .toggle-input-checkbox-inline{
423
- &:hover > input + div {
424
- .toggle-input-radio-check-element{
425
- background: url('../assets/icons/circle_blank.svg') no-repeat;
426
- }
427
+ .toggle-input-radio, .toggle-input-checkbox, .toggle-input-checkbox-inline{
428
+ &:hover > input + div {
429
+ .toggle-input-radio-check-element{
430
+ background: url('../assets/icons/circle_blank.svg') no-repeat;
431
+ }
432
+ }
427
433
  }
428
- }
429
- .toggle-input-radio-label, .toggle-input-checkbox-label{
430
- opacity: 0.5;
431
- }
432
- .toggle-input-label, .toggle-input, .toggle-contact-search-container{
433
- opacity: 0.5;
434
- }
435
- .toggle-input-select-container{
436
- &:after{
437
- opacity: 0.3;
434
+ .toggle-input-radio-label, .toggle-input-checkbox-label{
435
+ opacity: 0.5;
436
+ }
437
+ .toggle-input-label, .toggle-input, .toggle-contact-search-container{
438
+ opacity: 0.5;
439
+ }
440
+ .toggle-input-select-container{
441
+ &:after{
442
+ opacity: 0.3;
443
+ }
438
444
  }
439
- }
440
445
  }
441
446
 
442
447
  .toggle-input-is-readonly:focus {
443
- outline: none;
448
+ outline: none;
444
449
  }
445
450
 
446
451
  .toggle-input-radio-label, .toggle-input-checkbox-label{
447
- display : inline-block;
448
- font-size: $toggle-font-size-large;
449
- color : $toggle-input-colour;
450
- border-radius: 3px;
451
- font-weight: bold;
452
- padding: 0.3rem 0;
453
- display: inline-block;
454
- text-align: left;
455
-
456
- &.active{
457
- padding: 0.25rem 1rem;
458
- text-align: center;
459
- color: white;
460
- background-color: $toggle-success-green;
461
- }
462
-
463
- &.inactive {
464
- padding: 0.25rem 1rem;
465
- text-align: center;
466
- color: white;
467
- background-color: $toggle-inactive-grey;
468
- }
452
+ display : inline-block;
453
+ font-size: $toggle-font-size-large;
454
+ color : $toggle-input-colour;
455
+ border-radius: 3px;
456
+ font-weight: bold;
457
+ padding: 0.3rem 0;
458
+ display: inline-block;
459
+ text-align: left;
460
+
461
+ &.active{
462
+ padding: 0.25rem 1rem;
463
+ text-align: center;
464
+ color: white;
465
+ background-color: $toggle-success-green;
466
+ }
467
+
468
+ &.inactive {
469
+ padding: 0.25rem 1rem;
470
+ text-align: center;
471
+ color: white;
472
+ background-color: $toggle-inactive-grey;
473
+ }
469
474
  }
470
475
 
471
476
  .toggle-input-radio-check-element, .toggle-input-checkbox-check-element {
472
- background: url('../assets/icons/circle_blank.svg') no-repeat;
473
- background-size: 100%;
474
- margin: 0px 1rem 0 0;
475
- vertical-align: text-top;
476
- display: inline-block;
477
- float: none;
478
- height: 1.2rem;
479
- min-width: 1.2rem;
480
- float: left;
477
+ background: url('../assets/icons/circle_blank.svg') no-repeat;
478
+ background-size: 100%;
479
+ margin: 0px 1rem 0 0;
480
+ vertical-align: text-top;
481
+ display: inline-block;
482
+ float: none;
483
+ height: 1.2rem;
484
+ min-width: 1.2rem;
485
+ float: left;
481
486
  }
482
487
 
483
488
  .toggle-input-checkbox-inline{
484
- padding: 0;
485
- min-height:0;
486
- display: inline-block;
487
- float: none;
488
- margin:0;
489
+ padding: 0;
490
+ min-height:0;
491
+ display: inline-block;
492
+ float: none;
493
+ margin:0;
489
494
 
490
- .toggle-input-checkbox-check-element{
491
- margin: 0;
492
- }
495
+ .toggle-input-checkbox-check-element{
496
+ margin: 0;
497
+ }
493
498
 
494
499
  }
495
500
 
496
501
  .toggle-input-checkbox-check-element {
497
- background: url('../assets/icons/checkbox_blank.svg') no-repeat;
502
+ background: url('../assets/icons/checkbox_blank.svg') no-repeat;
498
503
  }
499
504
 
500
505
  // image input
@@ -504,461 +509,461 @@ $thumbnailWidth:80px;
504
509
  $iconWidth:20px;
505
510
 
506
511
  .toggle-helper-text {
507
- font-size: 12px;
512
+ font-size: 12px;
508
513
  }
509
514
 
510
515
  .toggle-dropzone-image-holder {
511
- display:flex;
512
- justify-content: left;
513
- align-items: center;
514
- width:100%;
515
- .toggle-draggable-group {
516
- min-height: 20px;
517
- padding:0%;
518
- span {
519
- display: flex;
520
- align-items: center;
521
- .toggle-dark-grey {
522
- border:7px solid inherit;
523
- }
524
- .toggle-draggable-group-item {
525
- position: relative;
526
- list-style: none;
527
- margin:5px 10px 5px 0px;
528
- .toggle-item-img {
529
- margin:2px;
530
- height:$thumbnailWidth;
531
- width:$thumbnailWidth;
532
- background-size: cover !important;
533
- background-position: center;
534
- border-radius:4px;
535
- }
536
- .toggle-center {
537
- display: flex;
538
- align-items: center;
539
- justify-content: center;
540
- }
541
- .toggle-move-icon::after {
542
- position: absolute;
543
- content:'';
544
- height: 100%;
545
- width: 100%;
546
- background-size: $iconWidth!important;
547
- background: url('../assets/icons/draggable.svg') no-repeat center center;
548
- cursor: move;
549
- }
550
-
551
- }
552
- .toggle-button-container{
553
- border:0px solid transparent!important;
554
- .toggle-button{
555
- width:$iconWidth;
556
- height:$iconWidth;
516
+ display:flex;
517
+ justify-content: left;
518
+ align-items: center;
519
+ width:100%;
520
+ .toggle-draggable-group {
521
+ min-height: 20px;
522
+ padding:0%;
523
+ span {
524
+ display: flex;
525
+ align-items: center;
526
+ .toggle-dark-grey {
527
+ border:7px solid inherit;
528
+ }
529
+ .toggle-draggable-group-item {
530
+ position: relative;
531
+ list-style: none;
532
+ margin:5px 10px 5px 0px;
533
+ .toggle-item-img {
534
+ margin:2px;
535
+ height:$thumbnailWidth;
536
+ width:$thumbnailWidth;
537
+ background-size: cover !important;
538
+ background-position: center;
539
+ border-radius:4px;
540
+ }
541
+ .toggle-center {
542
+ display: flex;
543
+ align-items: center;
544
+ justify-content: center;
545
+ }
546
+ .toggle-move-icon::after {
547
+ position: absolute;
548
+ content:'';
549
+ height: 100%;
550
+ width: 100%;
551
+ background-size: $iconWidth!important;
552
+ background: url('../assets/icons/draggable.svg') no-repeat center center;
553
+ cursor: move;
554
+ }
555
+
556
+ }
557
+ .toggle-button-container{
558
+ border:0px solid transparent!important;
559
+ .toggle-button{
560
+ width:$iconWidth;
561
+ height:$iconWidth;
562
+ }
563
+ }
564
+
565
+
566
+ li:first-child div:first-child{
567
+ border:4px solid #189ED1;
568
+ margin:0px !important;
569
+ }
557
570
  }
558
- }
559
-
560
-
561
- li:first-child div:first-child{
562
- border:4px solid #189ED1;
563
- margin:0px !important;
564
- }
565
571
  }
566
- }
567
572
 
568
573
 
569
574
 
570
575
  }
571
576
 
572
577
  .toggle-dropzone-container{
573
- margin:0px 5px 30px 0px;
574
- margin-bottom:42px;
575
- background: $toggle-dark-grey;
576
- background-size: auto 100%;
577
- background-position: center;
578
- background-repeat: no-repeat;
579
- border-radius: 4px;
580
- display: block;
581
- position:relative;
582
- background: #F4F6F7 url('../assets/icons/upload.svg') no-repeat center center;
583
- background-size: $iconWidth;
584
-
585
- .toggle-fill-loader-container-background {
586
- display: flex;
587
- justify-content: center;
588
- align-items: center;
589
- height:100%;
590
- width:100%;
591
- .toggle-fill-loader {
592
- position:static;
593
- margin:0px;
594
- width:0.5vw;
595
- height:0.5vw;
596
- }
597
- }
598
-
599
-
600
- .vue-dropzone {
601
- border: 0;
578
+ margin:0px 5px 30px 0px;
579
+ margin-bottom:42px;
580
+ background: $toggle-dark-grey;
581
+ background-size: auto 100%;
582
+ background-position: center;
583
+ background-repeat: no-repeat;
602
584
  border-radius: 4px;
603
- padding: 0;
604
- background: none transparent;
605
- height: 100%;
585
+ display: block;
606
586
  position:relative;
607
- &:after{
608
- content: '';
609
- top:0;
610
- left:0;
611
- height:100%;
612
- width: 100%;
613
- position:absolute;
614
- z-index: 0;
615
- opacity: 0.2;
616
- }
617
- &:hover{
618
- &:after{
619
- background-color: $toggle-light-blue;
620
- }
587
+ background: #F4F6F7 url('../assets/icons/upload.svg') no-repeat center center;
588
+ background-size: $iconWidth;
589
+
590
+ .toggle-fill-loader-container-background {
591
+ display: flex;
592
+ justify-content: center;
593
+ align-items: center;
594
+ height:100%;
595
+ width:100%;
596
+ .toggle-fill-loader {
597
+ position:static;
598
+ margin:0px;
599
+ width:0.5vw;
600
+ height:0.5vw;
601
+ }
621
602
  }
622
603
 
623
- }
624
604
 
625
- .dropzone{
626
- min-height: 33px;
627
- .dz-preview {
628
- display:none !important;
605
+ .vue-dropzone {
606
+ border: 0;
607
+ border-radius: 4px;
608
+ padding: 0;
609
+ background: none transparent;
610
+ height: 100%;
611
+ position:relative;
612
+ &:after{
613
+ content: '';
614
+ top:0;
615
+ left:0;
616
+ height:100%;
617
+ width: 100%;
618
+ position:absolute;
619
+ z-index: 0;
620
+ opacity: 0.2;
621
+ }
622
+ &:hover{
623
+ &:after{
624
+ background-color: $toggle-light-blue;
625
+ }
626
+ }
627
+
628
+ }
629
+
630
+ .dropzone{
631
+ min-height: 33px;
632
+ .dz-preview {
633
+ display:none !important;
634
+ }
629
635
  }
630
- }
631
636
 
632
- .dropzone > .dz-message {
633
- margin: 0;
634
- display: block !important;
635
- position:absolute;
636
- left: 0;
637
- height: 100%;
638
- width:100%;
639
- //padding: 10rem 0 0 0;
640
- background-size: 2.61rem;
641
- font-size: $toggle-font-size-small;
642
- font-weight: bold;
643
- color: #354B64;
644
- z-index: 1;
645
- span{
646
- position: absolute;
647
- bottom: 0;
648
- width:100%;
649
- left:0;
637
+ .dropzone > .dz-message {
638
+ margin: 0;
639
+ display: block !important;
640
+ position:absolute;
641
+ left: 0;
642
+ height: 100%;
643
+ width:100%;
644
+ //padding: 10rem 0 0 0;
645
+ background-size: 2.61rem;
646
+ font-size: $toggle-font-size-small;
647
+ font-weight: bold;
648
+ color: #354B64;
649
+ z-index: 1;
650
+ span{
651
+ position: absolute;
652
+ bottom: 0;
653
+ width:100%;
654
+ left:0;
655
+ }
650
656
  }
651
- }
652
657
 
653
- .dropzone > .dz-preview {
654
- width: 40%;
655
- }
658
+ .dropzone > .dz-preview {
659
+ width: 40%;
660
+ }
656
661
 
657
662
  }
658
663
 
659
664
  .toggle-dropzone-file-container {
660
- height: 15vw;
661
- width: 15vw;
665
+ height: 15vw;
666
+ width: 15vw;
662
667
  }
663
668
 
664
669
  //Colour picker
665
670
 
666
671
  .toggle-chrome-picker {
667
- position: absolute;
668
- z-index: 99;
672
+ position: absolute;
673
+ z-index: 99;
669
674
  }
670
675
 
671
676
 
672
677
  .toggle-color-picker-current-color {
673
- box-shadow: 0px 0px 1px $toggle-placeholder-grey;
674
- display: inline-block;
675
- width: 16px;
676
- height: 16px;
677
- background-color: #000;
678
- cursor: pointer;
679
- float:left;
680
- height: 2rem;
681
- width: 2rem;
682
- border-radius: 0% 50% 50% 0%;
683
- margin-left: -5px;
678
+ box-shadow: 0px 0px 1px $toggle-placeholder-grey;
679
+ display: inline-block;
680
+ width: 16px;
681
+ height: 16px;
682
+ background-color: #000;
683
+ cursor: pointer;
684
+ float:left;
685
+ height: 2rem;
686
+ width: 2rem;
687
+ border-radius: 0% 50% 50% 0%;
688
+ margin-left: -5px;
684
689
  }
685
690
  .toggle-input-colour-picker {
686
- box-shadow: 0px 0px 1px $toggle-placeholder-grey;
687
- height: 2rem;
688
- width: 7rem;
689
- float: left;
690
- outline: 1px solid ;
691
- outline-offset: -1px;
692
- padding: 0 0 0 1rem !important;
691
+ box-shadow: 0px 0px 1px $toggle-placeholder-grey;
692
+ height: 2rem;
693
+ width: 7rem;
694
+ float: left;
695
+ outline: 1px solid ;
696
+ outline-offset: -1px;
697
+ padding: 0 0 0 1rem !important;
693
698
  }
694
699
 
695
700
 
696
701
  // input crud buttons
697
702
  //
698
703
  .toggle-input-crud-container{
699
- padding:1rem 3.5rem 1rem 1rem;;
700
- height:auto;
701
- background: $toggle-white;
702
- padding-left:2rem;
703
- width: 100%;
704
- position:relative;
704
+ padding:1rem 3.5rem 1rem 1rem;;
705
+ height:auto;
706
+ background: $toggle-white;
707
+ padding-left:2rem;
708
+ width: 100%;
709
+ position:relative;
705
710
  }
706
711
 
707
712
  .toggle-input-crud-container-empty{
708
- opacity: 0.5;
709
- padding-left:3.5rem;
713
+ opacity: 0.5;
714
+ padding-left:3.5rem;
710
715
 
711
- cursor: pointer;
712
- *{
713
716
  cursor: pointer;
714
- }
717
+ *{
718
+ cursor: pointer;
719
+ }
715
720
 
716
721
 
717
722
 
718
- .toggle-input-crud-container-description{
719
- text-align: center;
720
- width:100%;
721
- }
723
+ .toggle-input-crud-container-description{
724
+ text-align: center;
725
+ width:100%;
726
+ }
722
727
 
723
- .toggle-input-crud-container-label{
724
- width: 100%;
725
- padding:0;
726
- text-align: center;
727
- background: transparent;
728
- border:none;
729
- cursor: pointer;
730
- outline: none;
731
- &.toggle-input-crud-container-label-vertical-center{
732
- position:relative;
733
- top:0.5rem;
728
+ .toggle-input-crud-container-label{
729
+ width: 100%;
730
+ padding:0;
731
+ text-align: center;
732
+ background: transparent;
733
+ border:none;
734
+ cursor: pointer;
735
+ outline: none;
736
+ &.toggle-input-crud-container-label-vertical-center{
737
+ position:relative;
738
+ top:0.5rem;
739
+ }
734
740
  }
735
- }
736
741
  }
737
742
 
738
743
 
739
744
  .toggle-input-crud-container-buttons{
740
- .toggle-button-container{
745
+ .toggle-button-container{
746
+ display: block;
747
+ margin-bottom: 0.5rem;
748
+ }
741
749
  display: block;
742
- margin-bottom: 0.5rem;
743
- }
744
- display: block;
745
- right:0;
746
- height:100%;
747
- box-sizing:border-box;
748
- padding:1rem 0;
749
- top: 0.8rem;
750
- position: absolute;
751
- width:2rem;
750
+ right:0;
751
+ height:100%;
752
+ box-sizing:border-box;
753
+ padding:1rem 0;
754
+ top: 0.8rem;
755
+ position: absolute;
756
+ width:2rem;
752
757
  }
753
758
 
754
759
 
755
760
 
756
761
  .toggle-input-crud-container-label{
757
- @include toggle-global-font-config;
758
- float:left;
759
- font-size: $toggle-font-size-regular;
760
- color: $toggle-header-colour;
761
- font-weight: bold;
762
+ @include toggle-global-font-config;
763
+ float:left;
764
+ font-size: $toggle-font-size-regular;
765
+ color: $toggle-header-colour;
766
+ font-weight: bold;
762
767
  }
763
768
 
764
769
  .toggle-input-crud-container-description{
765
- @include toggle-global-font-config;
766
- float:left;
767
- clear: both;
768
- font-size: $toggle-font-size-small;
769
- color: $toggle-header-colour;
770
- &.hide-overflow{
771
- overflow-x: clip;
772
- text-overflow: ellipsis;
773
- white-space: nowrap;
774
- width: inherit;
775
- }
770
+ @include toggle-global-font-config;
771
+ float:left;
772
+ clear: both;
773
+ font-size: $toggle-font-size-small;
774
+ color: $toggle-header-colour;
775
+ &.hide-overflow{
776
+ overflow-x: clip;
777
+ text-overflow: ellipsis;
778
+ white-space: nowrap;
779
+ width: inherit;
780
+ }
776
781
  }
777
782
  .toggle-input-protocol {
778
- width: 100px;
779
- float: left;
780
- clear: left;
781
- padding: 0.5rem 0 0.5rem 0;
783
+ width: 100px;
784
+ float: left;
785
+ clear: left;
786
+ padding: 0.5rem 0 0.5rem 0;
782
787
  }
783
788
 
784
789
  .toggle-input-website {
785
- width: 80%;
786
- float: left;
787
- padding: 1rem;
788
- clear: right;
790
+ width: 80%;
791
+ float: left;
792
+ padding: 1rem;
793
+ clear: right;
789
794
  }
790
795
 
791
796
  .toggle-input-file-background {
792
- background-size: 5rem;
793
- background-image : url('../assets/icons/file.svg');
797
+ background-size: 5rem;
798
+ background-image : url('../assets/icons/file.svg');
794
799
  }
795
800
 
796
801
  .toggle-input-integration-container {
797
- @include toggle-global-font-config;
798
- display: grid;
799
- align-items: center;
800
- grid-template-columns: 4fr 4fr 1fr;
801
- padding: 0.5rem 1.2rem;
802
- background: $toggle-off-white;
803
- border-radius: 9px;
804
- border: 1px solid $toggle-off-white;
805
- &:hover{
806
- background: $toggle-white;
807
- }
802
+ @include toggle-global-font-config;
803
+ display: grid;
804
+ align-items: center;
805
+ grid-template-columns: 4fr 4fr 1fr;
806
+ padding: 0.5rem 1.2rem;
807
+ background: $toggle-off-white;
808
+ border-radius: 9px;
809
+ border: 1px solid $toggle-off-white;
810
+ &:hover{
811
+ background: $toggle-white;
812
+ }
808
813
 
809
- .toggle-input-is-invalid {
810
- padding-bottom: 1rem !important;
811
- .toggle-input-label-error{
812
- z-index: 1;
814
+ .toggle-input-is-invalid {
815
+ padding-bottom: 1rem !important;
816
+ .toggle-input-label-error{
817
+ z-index: 1;
818
+ }
813
819
  }
814
- }
815
820
 
816
- .toggle-input-container,
817
- .toggle-input {
818
- background: $toggle-dark-grey;
819
- padding-bottom: 0;
820
- padding-top: 0;
821
- border-radius: 9px;
822
- }
821
+ .toggle-input-container,
822
+ .toggle-input {
823
+ background: $toggle-dark-grey;
824
+ padding-bottom: 0;
825
+ padding-top: 0;
826
+ border-radius: 9px;
827
+ }
823
828
 
824
- p {
825
- margin: 0;
826
- };
829
+ p {
830
+ margin: 0;
831
+ };
827
832
 
828
- .toggle-input-integration-unit {
829
- grid-column-start: 1;
830
- }
831
- .toggle-input-integration-input-container {
832
- grid-column-start: 2;
833
- }
833
+ .toggle-input-integration-unit {
834
+ grid-column-start: 1;
835
+ }
836
+ .toggle-input-integration-input-container {
837
+ grid-column-start: 2;
838
+ }
834
839
 
835
- .toggle-input-integration-delete-button-container {
836
- display: flex;
837
- justify-self: flex-end;
838
- grid-column-start: 3;
839
- }
840
+ .toggle-input-integration-delete-button-container {
841
+ display: flex;
842
+ justify-self: flex-end;
843
+ grid-column-start: 3;
844
+ }
840
845
 
841
846
  }
842
847
 
843
848
  .toggle-country-wrapper {
844
- display: inline-flex;
845
- height:57px;
846
- position: relative;
849
+ display: inline-flex;
850
+ height:57px;
851
+ position: relative;
847
852
 
848
853
 
849
- @mixin toggle-input-country-font-config {
850
- color: black;
851
- font-size: 12px;
852
- line-height: 1.4;
853
- -webkit-font-smoothing: antialiased;
854
- -moz-osx-font-smoothing: grayscale;
855
- }
854
+ @mixin toggle-input-country-font-config {
855
+ color: black;
856
+ font-size: 12px;
857
+ line-height: 1.4;
858
+ -webkit-font-smoothing: antialiased;
859
+ -moz-osx-font-smoothing: grayscale;
860
+ }
856
861
 
857
- @mixin toggle-input-border-base {
858
- border: 1px solid #ccc;
859
- }
862
+ @mixin toggle-input-border-base {
863
+ border: 1px solid #ccc;
864
+ }
860
865
 
861
- @mixin toggle-input-border {
862
- @include toggle-input-border-base;
863
- border-radius: 4px;
864
- box-sizing: border-box;
865
- }
866
-
867
- @mixin toggle-input-border-country-left {
868
- @include toggle-input-border-base;
869
- border-top-left-radius: 4px;
870
- border-bottom-left-radius: 4px;
871
- border-right: none;
872
- }
873
-
874
- @mixin toggle-input-border-country-right {
875
- @include toggle-input-border-base;
876
- border-top-right-radius: 4px;
877
- border-bottom-right-radius: 4px;
878
- }
879
-
880
- input, select, .toggle-selected-wraper{
881
- @include toggle-input-country-font-config;
882
- }
883
-
884
- .toggle-country-selector {
885
- position: relative;
886
- display: inline-block;
887
- width: 130px;
888
- margin: 5px 0px;
889
- @include toggle-input-border-country-left;
890
-
891
- select{
892
- position: relative;
893
- opacity: 0;
894
- width: 100% !important;
895
- z-index: 2;
896
- cursor: pointer;
897
- height: 100%;
898
- }
899
-
900
- .toggle-selected-wraper {
901
- top:20%;
902
- font-size: 0.9em;
903
- position: absolute;
904
- padding: 3px;
905
- left: 5px;
906
-
907
- &:before{
908
- float:left;
909
- content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 317 275'><path id='Arrow_downw' data-name='Arrow_Down' d='M158.5,0,317,275H0Z' transform='translate(317 275) rotate(180)' fill='gray'/></svg>");
910
- margin-top:1px;
911
- margin-right: 2px;
912
- }
866
+ @mixin toggle-input-border {
867
+ @include toggle-input-border-base;
868
+ border-radius: 4px;
869
+ box-sizing: border-box;
870
+ }
913
871
 
914
- div {
915
- float:left;
916
- }
872
+ @mixin toggle-input-border-country-left {
873
+ @include toggle-input-border-base;
874
+ border-top-left-radius: 4px;
875
+ border-bottom-left-radius: 4px;
876
+ border-right: none;
877
+ }
917
878
 
918
- .toggle-selected-country-emoji {
919
- margin-left: 5px;
920
- margin-top: 2px;
921
- }
879
+ @mixin toggle-input-border-country-right {
880
+ @include toggle-input-border-base;
881
+ border-top-right-radius: 4px;
882
+ border-bottom-right-radius: 4px;
922
883
  }
923
884
 
885
+ input, select, .toggle-selected-wraper{
886
+ @include toggle-input-country-font-config;
887
+ }
924
888
 
925
- }
889
+ .toggle-country-selector {
890
+ position: relative;
891
+ display: inline-block;
892
+ width: 130px;
893
+ margin: 5px 0px;
894
+ @include toggle-input-border-country-left;
895
+
896
+ select{
897
+ position: relative;
898
+ opacity: 0;
899
+ width: 100% !important;
900
+ z-index: 2;
901
+ cursor: pointer;
902
+ height: 100%;
903
+ }
926
904
 
927
- .toggle-input-label-error {
928
- position: absolute;
929
- bottom:-17px;
930
- }
905
+ .toggle-selected-wraper {
906
+ top:20%;
907
+ font-size: 0.9em;
908
+ position: absolute;
909
+ padding: 3px;
910
+ left: 5px;
911
+
912
+ &:before{
913
+ float:left;
914
+ content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 317 275'><path id='Arrow_downw' data-name='Arrow_Down' d='M158.5,0,317,275H0Z' transform='translate(317 275) rotate(180)' fill='gray'/></svg>");
915
+ margin-top:1px;
916
+ margin-right: 2px;
917
+ }
918
+
919
+ div {
920
+ float:left;
921
+ }
922
+
923
+ .toggle-selected-country-emoji {
924
+ margin-left: 5px;
925
+ margin-top: 2px;
926
+ }
927
+ }
931
928
 
932
- .toggle-input-select-country {
933
- padding: 3px 10px 22px 10px;
934
- margin: 5px 0px 5px 0px;
935
929
 
936
- &.toggle-number {
930
+ }
937
931
 
938
- position: relative;
939
- font-size:0.9em;
940
- padding:10px;
941
- @include toggle-input-border-country-right;
942
- width: 80%;
932
+ .toggle-input-label-error {
933
+ position: absolute;
934
+ bottom:-17px;
943
935
  }
944
936
 
945
- }
946
- .toggle-invalid-number {
947
- border:1px solid #ED7B7C !important;
948
- }
937
+ .toggle-input-select-country {
938
+ padding: 3px 10px 22px 10px;
939
+ margin: 5px 0px 5px 0px;
940
+
941
+ &.toggle-number {
942
+
943
+ position: relative;
944
+ font-size:0.9em;
945
+ padding:10px;
946
+ @include toggle-input-border-country-right;
947
+ width: 80%;
948
+ }
949
+
950
+ }
951
+ .toggle-invalid-number {
952
+ border:1px solid #ED7B7C !important;
953
+ }
949
954
 
950
955
  }
951
956
 
952
957
  .toggle-input-is-editable{
953
- .toggle-input{
954
- width: 90%;
955
- }
956
- .toggle-button-container{
957
- position: absolute;
958
- right: 20px;
959
- top: 50%;
960
- transform: translate(0, -50%);
961
- }
958
+ .toggle-input{
959
+ width: 90%;
960
+ }
961
+ .toggle-button-container{
962
+ position: absolute;
963
+ right: 20px;
964
+ top: 50%;
965
+ transform: translate(0, -50%);
966
+ }
962
967
  }
963
968
 
964
969
  //
@@ -966,218 +971,218 @@ $iconWidth:20px;
966
971
  //
967
972
 
968
973
  .toggle-contact-search-input-container {
969
- width: 100%;
970
- height: 40px;
971
- background-color: $toggle-white;
972
- border-radius: 8px;
973
- min-width: 500px;
974
+ width: 100%;
975
+ height: 40px;
976
+ background-color: $toggle-white;
977
+ border-radius: 8px;
978
+ min-width: 500px;
974
979
  }
975
980
 
976
981
  .toggle-contact-search-input-container-active {
977
- border-radius: 8px 8px 0 0;
982
+ border-radius: 8px 8px 0 0;
978
983
  }
979
984
 
980
985
  .toggle-contact-search-icon-input-container {
981
- display: flex;
982
- flex-direction: row;
983
- width: 100%;
986
+ display: flex;
987
+ flex-direction: row;
988
+ width: 100%;
984
989
  }
985
990
 
986
991
  .toggle-contact-search-dropdown-container {
987
- min-width: 550px;
988
- background-color: $toggle-white;
989
- border-radius: 0 0 8px 8px;
990
- overflow: hidden;
991
- position: absolute;
992
- z-index: 1;
992
+ min-width: 550px;
993
+ background-color: $toggle-white;
994
+ border-radius: 0 0 8px 8px;
995
+ overflow: hidden;
996
+ position: absolute;
997
+ z-index: 1;
993
998
  }
994
999
 
995
1000
  .toggle-contact-search-input {
996
- width: 100%;
997
- border: 0;
998
- border-radius: 0px;
999
- height: 30px;
1000
- margin: 4px 5px 0px 14px;
1001
- color: #3A4A62;
1002
- font-family: $toggle-font-family;
1003
- font-weight: 700;
1004
- font-size: 16px;
1005
- background-color: #FFFFFF;
1001
+ width: 100%;
1002
+ border: 0;
1003
+ border-radius: 0px;
1004
+ height: 30px;
1005
+ margin: 4px 5px 0px 14px;
1006
+ color: #3A4A62;
1007
+ font-family: $toggle-font-family;
1008
+ font-weight: 700;
1009
+ font-size: 16px;
1010
+ background-color: #FFFFFF;
1006
1011
  }
1007
1012
 
1008
1013
  .toggle-contact-search-input::placeholder {
1009
- color: #C5CED8;
1010
- opacity: 1;
1014
+ color: #C5CED8;
1015
+ opacity: 1;
1011
1016
  }
1012
1017
  .toggle-contact-search-input:-ms-input-placeholder {
1013
- color: #C5CED8;
1014
- opacity: 1;
1018
+ color: #C5CED8;
1019
+ opacity: 1;
1015
1020
  }
1016
1021
  .toggle-contact-search-input::-ms-input-placeholder {
1017
- color: #C5CED8;
1018
- opacity: 1;
1022
+ color: #C5CED8;
1023
+ opacity: 1;
1019
1024
  }
1020
1025
  .toggle-contact-search-input::-webkit-input-placeholder {
1021
- color: #C5CED8;
1022
- opacity: 1;
1026
+ color: #C5CED8;
1027
+ opacity: 1;
1023
1028
  }
1024
1029
  .toggle-contact-search-input:-moz-placeholder {
1025
- color: #C5CED8;
1026
- opacity: 1;
1030
+ color: #C5CED8;
1031
+ opacity: 1;
1027
1032
  }
1028
1033
  .toggle-contact-search-input::-ms-placeholder {
1029
- color: #C5CED8;
1030
- opacity: 1;
1034
+ color: #C5CED8;
1035
+ opacity: 1;
1031
1036
  }
1032
1037
 
1033
1038
  .toggle-contact-search-icon {
1034
- max-width: 20px;
1035
- max-height: 20px;
1036
- margin: 10px 16px 0 0;
1037
- transition: transform .2s ease-in-out;
1038
- width: 25px;
1039
- height: 25px;
1040
- background-repeat: no-repeat;
1041
- background-size: contain;
1039
+ max-width: 20px;
1040
+ max-height: 20px;
1041
+ margin: 10px 16px 0 0;
1042
+ transition: transform .2s ease-in-out;
1043
+ width: 25px;
1044
+ height: 25px;
1045
+ background-repeat: no-repeat;
1046
+ background-size: contain;
1042
1047
  }
1043
1048
 
1044
1049
  .toggle-contact-search-icon-email {
1045
- background-image: url('../assets/icons/email-icon.svg');
1050
+ background-image: url('../assets/icons/email-icon.svg');
1046
1051
  }
1047
1052
 
1048
1053
  .toggle-contact-search-icon-mobile {
1049
- background-image: url('../assets/icons/mobile-icon.svg');
1054
+ background-image: url('../assets/icons/mobile-icon.svg');
1050
1055
  }
1051
1056
 
1052
1057
  .toggle-contact-search-icon-arrow-container:hover {
1053
- .toggle-contact-search-icon {
1054
- transform: scale(1.1);
1055
- }
1058
+ .toggle-contact-search-icon {
1059
+ transform: scale(1.1);
1060
+ }
1056
1061
  }
1057
1062
 
1058
1063
  .toggle-contact-search-icon-arrow-container {
1059
- display: flex;
1060
- width: 100px;
1061
- min-width: 60px;
1062
- flex-direction: row;
1063
- justify-content: center;
1064
- cursor: pointer;
1064
+ display: flex;
1065
+ width: 100px;
1066
+ min-width: 60px;
1067
+ flex-direction: row;
1068
+ justify-content: center;
1069
+ cursor: pointer;
1065
1070
  }
1066
1071
 
1067
1072
  .toggle-contact-search-icon-arrow-container-disabled {
1068
- cursor: default !important;
1069
- opacity: 0.5;
1073
+ cursor: default !important;
1074
+ opacity: 0.5;
1070
1075
  }
1071
1076
 
1072
1077
  .toggle-contact-search-magnifying-glass-icon {
1073
- cursor: pointer;
1074
- margin: 10px 15px 0 3px;
1075
- width: 25px;
1076
- height: 25px;
1077
- background-image: url('../assets/icons/magnifying-glass-icon.svg');
1078
- background-repeat: no-repeat;
1079
- background-size: contain;
1080
- transition: transform .2s ease-in-out;
1078
+ cursor: pointer;
1079
+ margin: 10px 15px 0 3px;
1080
+ width: 25px;
1081
+ height: 25px;
1082
+ background-image: url('../assets/icons/magnifying-glass-icon.svg');
1083
+ background-repeat: no-repeat;
1084
+ background-size: contain;
1085
+ transition: transform .2s ease-in-out;
1081
1086
  }
1082
1087
 
1083
1088
  .toggle-contact-search-magnifying-glass-icon:hover {
1084
- transform: scale(1.1);
1089
+ transform: scale(1.1);
1085
1090
  }
1086
1091
 
1087
1092
  .toggle-contact-search-magnifying-glass-icon-disabled {
1088
- cursor: default;
1089
- opacity: 0.5;
1093
+ cursor: default;
1094
+ opacity: 0.5;
1090
1095
  }
1091
1096
 
1092
1097
  .toggle-contact-search-arrow {
1093
- margin: 17px 0px 0px;
1094
- width: 10px;
1095
- height: 10px;
1096
- background-image: url('../assets/icons/arrow-icon.svg');
1097
- background-repeat: no-repeat;
1098
- background-size: contain;
1098
+ margin: 17px 0px 0px;
1099
+ width: 10px;
1100
+ height: 10px;
1101
+ background-image: url('../assets/icons/arrow-icon.svg');
1102
+ background-repeat: no-repeat;
1103
+ background-size: contain;
1099
1104
  }
1100
1105
 
1101
1106
  .toggle-contact-search-arrow-active {
1102
- transition: all .2s ease;
1103
- transform: rotate(-3.1416rad) translateY(5px);
1107
+ transition: all .2s ease;
1108
+ transform: rotate(-3.1416rad) translateY(5px);
1104
1109
  }
1105
1110
 
1106
1111
  .toggle-contact-search-divider {
1107
- height: 28px;
1108
- margin: 7px 0 0 0;
1109
- border-right: 2px solid #D9D9D9;
1112
+ height: 28px;
1113
+ margin: 7px 0 0 0;
1114
+ border-right: 2px solid #D9D9D9;
1110
1115
  }
1111
1116
 
1112
1117
  .toggle-contact-search-dropdown-item {
1113
- margin: 5px 5px 5px 10px;
1114
- border-radius: 8px;
1115
- cursor: pointer;
1116
- font-size: 16px;
1117
- display: flex;
1118
- flex-direction: row;
1119
- justify-content: left;
1120
- align-items: center;
1121
- padding: 5px;
1118
+ margin: 5px 5px 5px 10px;
1119
+ border-radius: 8px;
1120
+ cursor: pointer;
1121
+ font-size: 16px;
1122
+ display: flex;
1123
+ flex-direction: row;
1124
+ justify-content: left;
1125
+ align-items: center;
1126
+ padding: 5px;
1122
1127
  }
1123
1128
 
1124
1129
  .toggle-contact-search-dropdown-item-label {
1125
- cursor: pointer;
1126
- font-weight: 700;
1127
- color: #3A4A62;
1130
+ cursor: pointer;
1131
+ font-weight: 700;
1132
+ color: #3A4A62;
1128
1133
  }
1129
1134
 
1130
1135
  .toggle-contact-search-dropwdown-item-highlighted {
1131
- color: #547DEE;
1136
+ color: #547DEE;
1132
1137
  }
1133
1138
 
1134
1139
  .toggle-contact-search-dropdown-item:hover {
1135
- background-color: #F5F5F5;
1136
- color: #3A4A62;
1140
+ background-color: #F5F5F5;
1141
+ color: #3A4A62;
1137
1142
 
1138
- .toggle-contact-search-icon-dropdown {
1139
- transform: scale(1.1);
1140
- }
1143
+ .toggle-contact-search-icon-dropdown {
1144
+ transform: scale(1.1);
1145
+ }
1141
1146
 
1142
- .toggle-contact-search-dropdown-item-label {
1143
- color: #3A4A62;
1144
- }
1147
+ .toggle-contact-search-dropdown-item-label {
1148
+ color: #3A4A62;
1149
+ }
1145
1150
  }
1146
1151
 
1147
1152
  .toggle-contact-search-icon-dropdown {
1148
- width: 25px;
1149
- height: 25px;
1150
- background-repeat: no-repeat;
1151
- background-size: contain;
1152
- max-width: 20px;
1153
- max-height: 20px;
1154
- margin: 2px 14px 0 0;
1155
- transition: transform .2s ease-in-out;
1153
+ width: 25px;
1154
+ height: 25px;
1155
+ background-repeat: no-repeat;
1156
+ background-size: contain;
1157
+ max-width: 20px;
1158
+ max-height: 20px;
1159
+ margin: 2px 14px 0 0;
1160
+ transition: transform .2s ease-in-out;
1156
1161
  }
1157
1162
 
1158
1163
  .toggle-contact-search-error {
1159
- height: 16.8px;
1160
- text-align: right;
1161
- color: #FF6F6F;
1162
- font-size: 12px;
1163
- margin: 0 0 10px 0;
1164
+ height: 16.8px;
1165
+ text-align: right;
1166
+ color: #FF6F6F;
1167
+ font-size: 12px;
1168
+ margin: 0 0 10px 0;
1164
1169
  }
1165
1170
 
1166
1171
  .toggle-contact-search-input-disabled {
1167
- color: #D3D9DF !important;
1172
+ color: #D3D9DF !important;
1168
1173
  }
1169
1174
 
1170
1175
  .toggle-contact-search-input-disabled::placeholder,
1171
1176
  .toggle-contact-search-input-disabled:-ms-input-placeholder,
1172
1177
  .toggle-contact-search-input-disabled::-ms-input-placeholder {
1173
- color: #D3D9DF !important;
1174
- opacity: 1;
1178
+ color: #D3D9DF !important;
1179
+ opacity: 1;
1175
1180
  }
1176
1181
 
1177
1182
  .toggle-contact-search-loading-container {
1178
- display: flex;
1179
- align-items: center;
1180
- margin: 0 0 3px 0;
1183
+ display: flex;
1184
+ align-items: center;
1185
+ margin: 0 0 3px 0;
1181
1186
  }
1182
1187
 
1183
1188
  //
@@ -1185,35 +1190,35 @@ $iconWidth:20px;
1185
1190
  //
1186
1191
 
1187
1192
  .drop-down-enter-active {
1188
- -moz-transition-duration: 0.4s;
1189
- -webkit-transition-duration: 0.4s;
1190
- -o-transition-duration: 0.4s;
1191
- transition-duration: 0.4s;
1192
- -moz-transition-timing-function: ease-in;
1193
- -webkit-transition-timing-function: ease-in;
1194
- -o-transition-timing-function: ease-in;
1195
- transition-timing-function: ease-in;
1193
+ -moz-transition-duration: 0.4s;
1194
+ -webkit-transition-duration: 0.4s;
1195
+ -o-transition-duration: 0.4s;
1196
+ transition-duration: 0.4s;
1197
+ -moz-transition-timing-function: ease-in;
1198
+ -webkit-transition-timing-function: ease-in;
1199
+ -o-transition-timing-function: ease-in;
1200
+ transition-timing-function: ease-in;
1196
1201
  }
1197
1202
 
1198
1203
  .drop-down-leave-active {
1199
- -moz-transition-duration: 0.4s;
1200
- -webkit-transition-duration: 0.4s;
1201
- -o-transition-duration: 0.4s;
1202
- transition-duration: 0.4s;
1203
- -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1204
- -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1205
- -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1206
- transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1204
+ -moz-transition-duration: 0.4s;
1205
+ -webkit-transition-duration: 0.4s;
1206
+ -o-transition-duration: 0.4s;
1207
+ transition-duration: 0.4s;
1208
+ -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1209
+ -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1210
+ -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1211
+ transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
1207
1212
  }
1208
1213
 
1209
1214
  .drop-down-enter-to,
1210
1215
  .drop-down-leave {
1211
- max-height: 100px;
1212
- overflow: hidden;
1216
+ max-height: 100px;
1217
+ overflow: hidden;
1213
1218
  }
1214
1219
 
1215
1220
  .drop-down-enter,
1216
1221
  .drop-down-leave-to {
1217
- overflow: hidden;
1218
- max-height: 0;
1222
+ overflow: hidden;
1223
+ max-height: 0;
1219
1224
  }