toggle-components-library 1.36.1-beta.9 → 1.36.2

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