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

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/contacts-greyblue.ef6f8a9a.svg +1 -0
  2. package/dist/img/contacts-white.95d07c7a.svg +1 -0
  3. package/dist/toggle-components-library.common.js +243 -286
  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 +243 -286
  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.json +1 -1
  11. package/src/components/buttons/ToggleMetricsButton.vue +3 -22
  12. package/src/components/carousel/ToggleCarousel.vue +16 -29
  13. package/src/components/carousel/ToggleCarouselSlide.vue +1 -1
  14. package/src/components/forms/ToggleDatePicker.vue +7 -3
  15. package/src/components/forms/ToggleInputCurrency.vue +10 -3
  16. package/src/components/forms/ToggleInputPercentage.vue +7 -1
  17. package/src/components/forms/ToggleInputSelect.vue +13 -7
  18. package/src/components/forms/ToggleInputText.vue +16 -7
  19. package/src/components/metrics/ToggleMetricSingleMetric.vue +7 -12
  20. package/src/components/metrics/ToggleMetricSparkLine.vue +3 -7
  21. package/src/components/mixins/mixins.js +2 -2
  22. package/src/components/statusbar/ToggleStatusBar.vue +74 -0
  23. package/src/components/tables/ToggleTable.vue +114 -49
  24. package/src/index.js +4 -3
  25. package/src/sass/includes/_as_buttons.scss +4 -47
  26. package/src/sass/includes/_as_cards.scss +0 -33
  27. package/src/sass/includes/_as_carousels.scss +0 -12
  28. package/src/sass/includes/_as_inputs.scss +854 -836
  29. package/src/sass/includes/_as_metrics.scss +0 -5
  30. package/src/sass/includes/_as_navs.scss +2 -18
  31. package/src/sass/includes/_as_statusbar.scss +179 -0
  32. package/src/sass/includes/_as_table.scss +163 -163
  33. package/src/sass/main.scss +1 -0
  34. package/dist/img/airship-feedback-hover.a207c947.svg +0 -10
  35. package/dist/img/airship-feedback.1f7c858c.svg +0 -10
  36. package/package-lock.json +0 -20285
  37. package/src/assets/icons/airship-feedback-hover.svg +0 -10
  38. package/src/assets/icons/airship-feedback.svg +0 -10
  39. package/src/components/cards/ToggleCommentCard.vue +0 -55
package/src/sass/includes/_as_inputs.scss CHANGED
@@ -1,336 +1,350 @@
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;
88
- }
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;
89
88
  }
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
- }
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
228
  }
229
229
 
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%;
230
+ .calendar-icon-disabled {
231
+ cursor: default;
232
+ opacity: 0.5;
233
+ }
234
+
235
+ .calendar-icon-disabled {
236
+ cursor: default;
237
+ opacity: 0.5;
238
+ }
239
+
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){
238
250
  &:after{
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;
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;
247
260
  }
261
+ }
248
262
  }
249
263
 
250
-
251
264
  .toggle-input-select{
252
265
 
253
- padding : 0.5rem 2.5rem 0.5rem 1rem;
254
- cursor : pointer;
266
+ //padding : 0.5rem 2.5rem 0.5rem 1rem;
267
+ padding: 0.5rem;
268
+ cursor : pointer;
255
269
 
256
- -webkit-appearance: none;
257
- -moz-appearance : none;
258
- appearance : none;
270
+ -webkit-appearance: none;
271
+ -moz-appearance : none;
272
+ appearance : none;
259
273
 
260
- &:focus {
261
- outline: none;
262
- }
274
+ &:focus {
275
+ outline: none;
276
+ }
263
277
  }
264
278
 
265
279
  // For multi tier side nav
266
280
  .toggle-multi-tier-sidenav-container {
267
281
 
268
- .toggle-input-container {
269
- padding: 0.4rem 0rem 0rem 0.8rem;
270
- }
282
+ .toggle-input-container {
283
+ padding: 0.4rem 0rem 0rem 0.8rem;
284
+ }
271
285
 
272
- .toggle-input-label {
273
- margin-bottom: 0;
274
- font-size: 0.8rem;
275
- }
286
+ .toggle-input-label {
287
+ margin-bottom: 0;
288
+ font-size: 0.8rem;
289
+ }
276
290
 
277
- .toggle-input-select-container {
278
- position: relative;
279
- background-color: transparent;
280
- }
291
+ .toggle-input-select-container {
292
+ position: relative;
293
+ background-color: transparent;
294
+ }
281
295
 
282
- .toggle-input-select {
283
- padding: 0rem;
284
- font-size: 0.9rem;
285
- }
296
+ .toggle-input-select {
297
+ padding: 0rem;
298
+ font-size: 0.9rem;
299
+ }
286
300
  }
287
301
 
288
302
  // radio
289
303
 
290
304
  .toggle-input-radio-container{
291
305
 
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
- }
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
+ }
303
317
 
304
- .toggle-input-radio-button-img{
305
- margin-left: 1rem;
306
- }
307
- .toggle-input-checkbox-icon {
308
- height: 2rem;
309
- margin-left: auto ;
310
- }
318
+ .toggle-input-radio-button-img{
319
+ margin-left: 1rem;
320
+ }
321
+ .toggle-input-checkbox-icon {
322
+ height: 2rem;
323
+ margin-left: auto ;
324
+ }
311
325
 
312
326
  }
313
327
 
314
328
  .toggle-input-radio-group-container{
315
329
 
316
- padding-bottom:0.4rem;
317
- clear: both;
318
- float: left;
330
+ padding-bottom:0.4rem;
331
+ clear: both;
332
+ float: left;
319
333
 
320
- .toggle-input-container{
321
- padding-bottom:0;
334
+ .toggle-input-container{
335
+ padding-bottom:0;
322
336
 
323
- }
337
+ }
324
338
 
325
- .toggle-input-checkbox, .toggle-input-checkbox-inline{
326
- background-color: $toggle-dark-grey;
327
- }
339
+ .toggle-input-checkbox, .toggle-input-checkbox-inline{
340
+ background-color: $toggle-dark-grey;
341
+ }
328
342
 
329
- .toggle-input-radio{
330
- clear:both;
331
- float: left;
332
- margin-left:2.2rem;
333
- }
343
+ .toggle-input-radio{
344
+ clear:both;
345
+ float: left;
346
+ margin-left:2.2rem;
347
+ }
334
348
 
335
349
  }
336
350
 
@@ -338,150 +352,154 @@
338
352
 
339
353
 
340
354
  .toggle-input-radio, .toggle-input-checkbox, .toggle-input-checkbox-inline{
341
- cursor : pointer;
342
- align-items : center;
343
- float : left;
344
- display : inline-block;
345
- padding : 0 1rem;
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 {
346
365
  background-color: $toggle-off-white;
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;
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;
360
378
  align-items: center;
379
+ }
361
380
 
362
- div{
363
- display : flex;
364
- align-items: center;
365
- }
366
-
367
-
368
- input[type="radio"], input[type="checkbox"]{
369
- display: none;
370
- }
371
381
 
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
- }
382
+ input[type="radio"], input[type="checkbox"]{
383
+ display: none;
384
+ }
385
+
386
+ &:hover > input + div {
387
+ .toggle-input-radio-check-element{
388
+ background: #D1D1D1;
389
+ border-radius: 25px;
380
390
  }
391
+ .toggle-input-checkbox-check-element{
392
+ background: url('../assets/icons/checkbox_hover.svg') no-repeat;
393
+ }
394
+ }
381
395
 
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
- }
396
+ > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
397
+ .toggle-input-radio-check-element {
398
+ background: url('../assets/icons/tick_circle.svg') no-repeat;
386
399
  }
400
+ }
387
401
 
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
- }
402
+ > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
403
+ .toggle-input-checkbox-check-element {
404
+ background: url('../assets/icons/checkbox_checked.svg') no-repeat;
392
405
  }
406
+ }
393
407
 
394
-
395
408
 
396
- > input:disabled:checked + div{
397
- .toggle-input-radio-check-element {
398
- background: url('../assets/icons/tick_circle_grey.svg') no-repeat !important;
399
- }
400
409
 
410
+ > input:disabled:checked + div{
411
+ .toggle-input-radio-check-element {
412
+ background: url('../assets/icons/tick_circle_grey.svg') no-repeat !important;
401
413
  }
402
414
 
403
- > input:disabled:checked + div{
404
- .toggle-input-checkbox-check-element {
405
- background: url('../assets/icons/checkbox_inactive.svg') no-repeat !important;
406
- }
415
+ }
407
416
 
417
+ > input:disabled:checked + div{
418
+ .toggle-input-checkbox-check-element {
419
+ background: url('../assets/icons/checkbox_inactive.svg') no-repeat !important;
408
420
  }
409
421
 
422
+ }
423
+
410
424
  }
411
425
 
412
426
  .toggle-input-is-disabled{
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
- }
419
- }
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;
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
+ }
425
432
  }
426
- .toggle-input-select-container{
427
- &:after{
428
- opacity: 0.3;
429
- }
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;
430
443
  }
444
+ }
431
445
  }
432
446
 
433
- .toggle-input-radio-label, .toggle-input-checkbox-label{
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
- }
447
+ .toggle-input-is-readonly:focus {
448
+ outline: none;
449
+ }
449
450
 
450
- &.inactive {
451
- padding: 0.25rem 1rem;
452
- text-align: center;
453
- color: white;
454
- background-color: $toggle-inactive-grey;
455
- }
451
+ .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
+ }
456
474
  }
457
475
 
458
476
  .toggle-input-radio-check-element, .toggle-input-checkbox-check-element {
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;
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;
468
486
  }
469
487
 
470
488
  .toggle-input-checkbox-inline{
471
- padding: 0;
472
- min-height:0;
473
- display: inline-block;
474
- float: none;
475
- margin:0;
489
+ padding: 0;
490
+ min-height:0;
491
+ display: inline-block;
492
+ float: none;
493
+ margin:0;
476
494
 
477
- .toggle-input-checkbox-check-element{
478
- margin: 0;
479
- }
495
+ .toggle-input-checkbox-check-element{
496
+ margin: 0;
497
+ }
480
498
 
481
499
  }
482
500
 
483
501
  .toggle-input-checkbox-check-element {
484
- background: url('../assets/icons/checkbox_blank.svg') no-repeat;
502
+ background: url('../assets/icons/checkbox_blank.svg') no-repeat;
485
503
  }
486
504
 
487
505
  // image input
@@ -491,461 +509,461 @@ $thumbnailWidth:80px;
491
509
  $iconWidth:20px;
492
510
 
493
511
  .toggle-helper-text {
494
- font-size: 12px;
512
+ font-size: 12px;
495
513
  }
496
514
 
497
515
  .toggle-dropzone-image-holder {
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
- }
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;
552
562
  }
563
+ }
564
+
565
+
566
+ li:first-child div:first-child{
567
+ border:4px solid #189ED1;
568
+ margin:0px !important;
569
+ }
553
570
  }
571
+ }
572
+
573
+
554
574
 
555
-
556
-
557
575
  }
558
576
 
559
577
  .toggle-dropzone-container{
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;
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;
566
607
  border-radius: 4px;
567
- display: block;
608
+ padding: 0;
609
+ background: none transparent;
610
+ height: 100%;
568
611
  position:relative;
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
- }
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;
584
621
  }
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
-
622
+ &:hover{
623
+ &:after{
624
+ background-color: $toggle-light-blue;
625
+ }
610
626
  }
611
627
 
612
- .dropzone{
613
- min-height: 33px;
614
- .dz-preview {
615
- display:none !important;
616
- }
617
- }
628
+ }
618
629
 
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
- }
630
+ .dropzone{
631
+ min-height: 33px;
632
+ .dz-preview {
633
+ display:none !important;
638
634
  }
635
+ }
639
636
 
640
- .dropzone > .dz-preview {
641
- width: 40%;
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;
642
655
  }
643
-
656
+ }
657
+
658
+ .dropzone > .dz-preview {
659
+ width: 40%;
660
+ }
661
+
644
662
  }
645
663
 
646
664
  .toggle-dropzone-file-container {
647
- height: 15vw;
648
- width: 15vw;
665
+ height: 15vw;
666
+ width: 15vw;
649
667
  }
650
668
 
651
669
  //Colour picker
652
670
 
653
671
  .toggle-chrome-picker {
654
- position: absolute;
655
- z-index: 99;
672
+ position: absolute;
673
+ z-index: 99;
656
674
  }
657
675
 
658
676
 
659
677
  .toggle-color-picker-current-color {
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;
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;
671
689
  }
672
690
  .toggle-input-colour-picker {
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;
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;
680
698
  }
681
699
 
682
700
 
683
701
  // input crud buttons
684
- //
702
+ //
685
703
  .toggle-input-crud-container{
686
- padding:1rem 3.5rem 1rem 1rem;;
687
- height:auto;
688
- background: $toggle-white;
689
- padding-left:2rem;
690
- width: 100%;
691
- 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;
692
710
  }
693
711
 
694
712
  .toggle-input-crud-container-empty{
695
- opacity: 0.5;
696
- padding-left:3.5rem;
713
+ opacity: 0.5;
714
+ padding-left:3.5rem;
697
715
 
716
+ cursor: pointer;
717
+ *{
698
718
  cursor: pointer;
699
- *{
700
- cursor: pointer;
701
- }
719
+ }
702
720
 
703
-
704
721
 
705
- .toggle-input-crud-container-description{
706
- text-align: center;
707
- width:100%;
708
- }
709
722
 
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
- }
723
+ .toggle-input-crud-container-description{
724
+ text-align: center;
725
+ width:100%;
726
+ }
727
+
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;
722
739
  }
740
+ }
723
741
  }
724
742
 
725
743
 
726
744
  .toggle-input-crud-container-buttons{
727
- .toggle-button-container{
728
- display: block;
729
- margin-bottom: 0.5rem;
730
- }
745
+ .toggle-button-container{
731
746
  display: block;
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;
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;
739
757
  }
740
758
 
741
759
 
742
760
 
743
761
  .toggle-input-crud-container-label{
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;
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;
749
767
  }
750
768
 
751
769
  .toggle-input-crud-container-description{
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
- }
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
+ }
763
781
  }
764
782
  .toggle-input-protocol {
765
- width: 100px;
766
- float: left;
767
- clear: left;
768
- padding: 0.5rem 0 0.5rem 0;
783
+ width: 100px;
784
+ float: left;
785
+ clear: left;
786
+ padding: 0.5rem 0 0.5rem 0;
769
787
  }
770
788
 
771
789
  .toggle-input-website {
772
- width: 80%;
773
- float: left;
774
- padding: 1rem;
775
- clear: right;
790
+ width: 80%;
791
+ float: left;
792
+ padding: 1rem;
793
+ clear: right;
776
794
  }
777
795
 
778
796
  .toggle-input-file-background {
779
- background-size: 5rem;
780
- background-image : url('../assets/icons/file.svg');
797
+ background-size: 5rem;
798
+ background-image : url('../assets/icons/file.svg');
781
799
  }
782
800
 
783
801
  .toggle-input-integration-container {
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
- }
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
+ }
795
813
 
796
- .toggle-input-is-invalid {
797
- padding-bottom: 1rem !important;
798
- .toggle-input-label-error{
799
- z-index: 1;
800
- }
814
+ .toggle-input-is-invalid {
815
+ padding-bottom: 1rem !important;
816
+ .toggle-input-label-error{
817
+ z-index: 1;
801
818
  }
819
+ }
802
820
 
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
- }
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
+ }
810
828
 
811
- p {
812
- margin: 0;
813
- };
829
+ p {
830
+ margin: 0;
831
+ };
814
832
 
815
- .toggle-input-integration-unit {
816
- grid-column-start: 1;
817
- }
818
- .toggle-input-integration-input-container {
819
- grid-column-start: 2;
820
- }
833
+ .toggle-input-integration-unit {
834
+ grid-column-start: 1;
835
+ }
836
+ .toggle-input-integration-input-container {
837
+ grid-column-start: 2;
838
+ }
821
839
 
822
- .toggle-input-integration-delete-button-container {
823
- display: flex;
824
- justify-self: flex-end;
825
- grid-column-start: 3;
826
- }
840
+ .toggle-input-integration-delete-button-container {
841
+ display: flex;
842
+ justify-self: flex-end;
843
+ grid-column-start: 3;
844
+ }
827
845
 
828
846
  }
829
847
 
830
848
  .toggle-country-wrapper {
831
- display: inline-flex;
832
- height:57px;
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 {
833
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
+ }
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
+ }
834
918
 
919
+ div {
920
+ float:left;
921
+ }
835
922
 
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;
923
+ .toggle-selected-country-emoji {
924
+ margin-left: 5px;
925
+ margin-top: 2px;
842
926
  }
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;
865
927
  }
866
928
 
867
- input, select, .toggle-selected-wraper{
868
- @include toggle-input-country-font-config;
869
- }
870
929
 
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
- }
930
+ }
913
931
 
914
- .toggle-input-label-error {
915
- position: absolute;
916
- bottom:-17px;
917
- }
932
+ .toggle-input-label-error {
933
+ position: absolute;
934
+ bottom:-17px;
935
+ }
918
936
 
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;
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%;
935
948
  }
936
949
 
950
+ }
951
+ .toggle-invalid-number {
952
+ border:1px solid #ED7B7C !important;
953
+ }
954
+
937
955
  }
938
956
 
939
957
  .toggle-input-is-editable{
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
- }
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
+ }
949
967
  }
950
968
 
951
969
  //
@@ -953,218 +971,218 @@ $iconWidth:20px;
953
971
  //
954
972
 
955
973
  .toggle-contact-search-input-container {
956
- width: 100%;
957
- height: 40px;
958
- background-color: $toggle-white;
959
- border-radius: 8px;
960
- min-width: 500px;
974
+ width: 100%;
975
+ height: 40px;
976
+ background-color: $toggle-white;
977
+ border-radius: 8px;
978
+ min-width: 500px;
961
979
  }
962
980
 
963
981
  .toggle-contact-search-input-container-active {
964
- border-radius: 8px 8px 0 0;
982
+ border-radius: 8px 8px 0 0;
965
983
  }
966
984
 
967
985
  .toggle-contact-search-icon-input-container {
968
- display: flex;
969
- flex-direction: row;
970
- width: 100%;
986
+ display: flex;
987
+ flex-direction: row;
988
+ width: 100%;
971
989
  }
972
990
 
973
991
  .toggle-contact-search-dropdown-container {
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;
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;
980
998
  }
981
999
 
982
1000
  .toggle-contact-search-input {
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;
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;
993
1011
  }
994
1012
 
995
1013
  .toggle-contact-search-input::placeholder {
996
- color: #C5CED8;
997
- opacity: 1;
1014
+ color: #C5CED8;
1015
+ opacity: 1;
998
1016
  }
999
1017
  .toggle-contact-search-input:-ms-input-placeholder {
1000
- color: #C5CED8;
1001
- opacity: 1;
1018
+ color: #C5CED8;
1019
+ opacity: 1;
1002
1020
  }
1003
1021
  .toggle-contact-search-input::-ms-input-placeholder {
1004
- color: #C5CED8;
1005
- opacity: 1;
1022
+ color: #C5CED8;
1023
+ opacity: 1;
1006
1024
  }
1007
1025
  .toggle-contact-search-input::-webkit-input-placeholder {
1008
- color: #C5CED8;
1009
- opacity: 1;
1026
+ color: #C5CED8;
1027
+ opacity: 1;
1010
1028
  }
1011
1029
  .toggle-contact-search-input:-moz-placeholder {
1012
- color: #C5CED8;
1013
- opacity: 1;
1030
+ color: #C5CED8;
1031
+ opacity: 1;
1014
1032
  }
1015
1033
  .toggle-contact-search-input::-ms-placeholder {
1016
- color: #C5CED8;
1017
- opacity: 1;
1034
+ color: #C5CED8;
1035
+ opacity: 1;
1018
1036
  }
1019
1037
 
1020
1038
  .toggle-contact-search-icon {
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;
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;
1029
1047
  }
1030
1048
 
1031
1049
  .toggle-contact-search-icon-email {
1032
- background-image: url('../assets/icons/email-icon.svg');
1050
+ background-image: url('../assets/icons/email-icon.svg');
1033
1051
  }
1034
1052
 
1035
1053
  .toggle-contact-search-icon-mobile {
1036
- background-image: url('../assets/icons/mobile-icon.svg');
1054
+ background-image: url('../assets/icons/mobile-icon.svg');
1037
1055
  }
1038
1056
 
1039
1057
  .toggle-contact-search-icon-arrow-container:hover {
1040
- .toggle-contact-search-icon {
1041
- transform: scale(1.1);
1042
- }
1058
+ .toggle-contact-search-icon {
1059
+ transform: scale(1.1);
1060
+ }
1043
1061
  }
1044
1062
 
1045
1063
  .toggle-contact-search-icon-arrow-container {
1046
- display: flex;
1047
- width: 100px;
1048
- min-width: 60px;
1049
- flex-direction: row;
1050
- justify-content: center;
1051
- cursor: pointer;
1064
+ display: flex;
1065
+ width: 100px;
1066
+ min-width: 60px;
1067
+ flex-direction: row;
1068
+ justify-content: center;
1069
+ cursor: pointer;
1052
1070
  }
1053
1071
 
1054
1072
  .toggle-contact-search-icon-arrow-container-disabled {
1055
- cursor: default !important;
1056
- opacity: 0.5;
1073
+ cursor: default !important;
1074
+ opacity: 0.5;
1057
1075
  }
1058
1076
 
1059
1077
  .toggle-contact-search-magnifying-glass-icon {
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;
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;
1068
1086
  }
1069
1087
 
1070
1088
  .toggle-contact-search-magnifying-glass-icon:hover {
1071
- transform: scale(1.1);
1089
+ transform: scale(1.1);
1072
1090
  }
1073
1091
 
1074
1092
  .toggle-contact-search-magnifying-glass-icon-disabled {
1075
- cursor: default;
1076
- opacity: 0.5;
1093
+ cursor: default;
1094
+ opacity: 0.5;
1077
1095
  }
1078
1096
 
1079
1097
  .toggle-contact-search-arrow {
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;
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;
1086
1104
  }
1087
1105
 
1088
1106
  .toggle-contact-search-arrow-active {
1089
- transition: all .2s ease;
1090
- transform: rotate(-3.1416rad) translateY(5px);
1107
+ transition: all .2s ease;
1108
+ transform: rotate(-3.1416rad) translateY(5px);
1091
1109
  }
1092
1110
 
1093
1111
  .toggle-contact-search-divider {
1094
- height: 28px;
1095
- margin: 7px 0 0 0;
1096
- border-right: 2px solid #D9D9D9;
1112
+ height: 28px;
1113
+ margin: 7px 0 0 0;
1114
+ border-right: 2px solid #D9D9D9;
1097
1115
  }
1098
1116
 
1099
1117
  .toggle-contact-search-dropdown-item {
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;
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;
1109
1127
  }
1110
1128
 
1111
1129
  .toggle-contact-search-dropdown-item-label {
1112
- cursor: pointer;
1113
- font-weight: 700;
1114
- color: #3A4A62;
1130
+ cursor: pointer;
1131
+ font-weight: 700;
1132
+ color: #3A4A62;
1115
1133
  }
1116
1134
 
1117
1135
  .toggle-contact-search-dropwdown-item-highlighted {
1118
- color: #547DEE;
1136
+ color: #547DEE;
1119
1137
  }
1120
1138
 
1121
1139
  .toggle-contact-search-dropdown-item:hover {
1122
- background-color: #F5F5F5;
1123
- color: #3A4A62;
1140
+ background-color: #F5F5F5;
1141
+ color: #3A4A62;
1124
1142
 
1125
- .toggle-contact-search-icon-dropdown {
1126
- transform: scale(1.1);
1127
- }
1143
+ .toggle-contact-search-icon-dropdown {
1144
+ transform: scale(1.1);
1145
+ }
1128
1146
 
1129
- .toggle-contact-search-dropdown-item-label {
1130
- color: #3A4A62;
1131
- }
1147
+ .toggle-contact-search-dropdown-item-label {
1148
+ color: #3A4A62;
1149
+ }
1132
1150
  }
1133
1151
 
1134
1152
  .toggle-contact-search-icon-dropdown {
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;
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;
1143
1161
  }
1144
1162
 
1145
1163
  .toggle-contact-search-error {
1146
- height: 16.8px;
1147
- text-align: right;
1148
- color: #FF6F6F;
1149
- font-size: 12px;
1150
- 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;
1151
1169
  }
1152
1170
 
1153
1171
  .toggle-contact-search-input-disabled {
1154
- color: #D3D9DF !important;
1172
+ color: #D3D9DF !important;
1155
1173
  }
1156
1174
 
1157
1175
  .toggle-contact-search-input-disabled::placeholder,
1158
1176
  .toggle-contact-search-input-disabled:-ms-input-placeholder,
1159
1177
  .toggle-contact-search-input-disabled::-ms-input-placeholder {
1160
- color: #D3D9DF !important;
1161
- opacity: 1;
1178
+ color: #D3D9DF !important;
1179
+ opacity: 1;
1162
1180
  }
1163
1181
 
1164
1182
  .toggle-contact-search-loading-container {
1165
- display: flex;
1166
- align-items: center;
1167
- margin: 0 0 3px 0;
1183
+ display: flex;
1184
+ align-items: center;
1185
+ margin: 0 0 3px 0;
1168
1186
  }
1169
1187
 
1170
1188
  //
@@ -1172,35 +1190,35 @@ $iconWidth:20px;
1172
1190
  //
1173
1191
 
1174
1192
  .drop-down-enter-active {
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;
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;
1183
1201
  }
1184
1202
 
1185
1203
  .drop-down-leave-active {
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);
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);
1194
1212
  }
1195
1213
 
1196
1214
  .drop-down-enter-to,
1197
1215
  .drop-down-leave {
1198
- max-height: 100px;
1199
- overflow: hidden;
1216
+ max-height: 100px;
1217
+ overflow: hidden;
1200
1218
  }
1201
1219
 
1202
1220
  .drop-down-enter,
1203
1221
  .drop-down-leave-to {
1204
- overflow: hidden;
1205
- max-height: 0;
1222
+ overflow: hidden;
1223
+ max-height: 0;
1206
1224
  }