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

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 (33) 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/ToggleInputSelect.vue +13 -7
  15. package/src/components/forms/ToggleInputText.vue +15 -6
  16. package/src/components/metrics/ToggleMetricSingleMetric.vue +7 -12
  17. package/src/components/metrics/ToggleMetricSparkLine.vue +3 -7
  18. package/src/components/mixins/mixins.js +2 -2
  19. package/src/components/tables/ToggleTable.vue +114 -49
  20. package/src/index.js +1 -3
  21. package/src/sass/includes/_as_buttons.scss +4 -47
  22. package/src/sass/includes/_as_cards.scss +0 -33
  23. package/src/sass/includes/_as_carousels.scss +0 -12
  24. package/src/sass/includes/_as_inputs.scss +851 -838
  25. package/src/sass/includes/_as_metrics.scss +0 -5
  26. package/src/sass/includes/_as_navs.scss +2 -18
  27. package/src/sass/includes/_as_table.scss +163 -163
  28. package/dist/img/airship-feedback-hover.a207c947.svg +0 -10
  29. package/dist/img/airship-feedback.1f7c858c.svg +0 -10
  30. package/package-lock.json +0 -20285
  31. package/src/assets/icons/airship-feedback-hover.svg +0 -10
  32. package/src/assets/icons/airship-feedback.svg +0 -10
  33. package/src/components/cards/ToggleCommentCard.vue +0 -55
@@ -134,9 +134,4 @@
134
134
 
135
135
  .increase-padding-bottom {
136
136
  padding-bottom: 3rem !important;
137
- }
138
-
139
- .toggle-metric-score-rating {
140
- font-size: 27px;
141
- margin-left: -8px;
142
137
  }
@@ -4,7 +4,7 @@
4
4
 
5
5
  .toggle-sidenav-container {
6
6
  font-size: $toggle-font-size-regular;
7
- width: 20%;
7
+ width: 25%;
8
8
  float: left;
9
9
  max-width: 280px;
10
10
  min-height: 100vh;
@@ -134,7 +134,7 @@
134
134
 
135
135
  line-height: 1rem;
136
136
  font-size: $toggle-font-size-regular;
137
- width: 20%;
137
+ width: 25%;
138
138
  float: left;
139
139
  max-width: 280px;
140
140
  min-height: 100vh;
@@ -342,11 +342,6 @@
342
342
  &.airship-hat-icon span::before {
343
343
  background-image: url("../assets/icons/airship-hat-hover.svg");
344
344
  }
345
-
346
- &.airship-feedback-icon a::before,
347
- &.airship-feedback-icon span::before {
348
- background-image: url("../assets/icons/airship-feedback-hover.svg");
349
- }
350
345
  }
351
346
  }
352
347
 
@@ -511,17 +506,6 @@
511
506
  animation: tilt-shake 0.4s;
512
507
  background-image: url("../assets/icons/airship-audiences-hover.svg");
513
508
  }
514
- // add feedbacl
515
- &.airship-feedback-icon a::before,
516
- &.airship-feedback-icon span::before {
517
- background-image: url("../assets/icons/airship-feedback.svg");
518
- }
519
-
520
- &.airship-feedback-icon a:hover::before,
521
- &.airship-feedback-icon span:hover::before {
522
- animation: tilt-shake 0.4s;
523
- background-image: url("../assets/icons/airship-feedback-hover.svg");
524
- }
525
509
 
526
510
  }
527
511
  }
@@ -16,37 +16,37 @@ table.toggle-table {
16
16
  border-radius:0;
17
17
  border:none;
18
18
  .toggle-input{
19
- margin-top:11px;
20
- padding:1px 3px 1px 3px;
21
- font-size:14px;
22
- height:1.5rem;
19
+ margin-top:11px;
20
+ padding:1px 3px 1px 3px;
21
+ font-size:14px;
22
+ height:1.5rem;
23
23
  }
24
24
  .toggle-input-label{
25
- display: none;
25
+ display: none;
26
26
  }
27
27
  .toggle-date-input-container{
28
- .toggle-date-input-calendar-icon{
29
- .toggle-input{
30
- background:transparent;
31
- padding:3px 1rem 3px 0.1rem;
32
- margin-top: 10px;
33
- }
34
- }
35
- .toggle-clear{
36
- display: none;
28
+ .toggle-date-input-calendar-icon{
29
+ .toggle-input{
30
+ background:transparent;
31
+ padding:3px 1rem 3px 0.1rem;
32
+ margin-top: 10px;
37
33
  }
34
+ }
35
+ .toggle-clear{
36
+ display: none;
37
+ }
38
38
  }
39
39
 
40
40
  }
41
41
 
42
42
  thead {
43
43
  th.toggle-table-th {
44
- padding: 0 10px 20px 0;
44
+ padding: 0;
45
45
  border: none;
46
46
  text-align: left;
47
- @include toggle-global-font-config;
48
- font-weight: bold;
49
- font-size: $toggle-font-size-small;
47
+ @include toggle-global-font-config;
48
+ font-weight: bold;
49
+ font-size: $toggle-font-size-small;
50
50
 
51
51
  &:hover {
52
52
  .search {
@@ -54,7 +54,7 @@ table.toggle-table {
54
54
  }
55
55
  }
56
56
 
57
-
57
+
58
58
  }
59
59
 
60
60
 
@@ -75,7 +75,6 @@ table.toggle-table {
75
75
  text-indent: 1px;
76
76
  text-overflow: '';
77
77
 
78
- background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
79
78
  background-size: 15px;
80
79
  padding : 0.5rem 0rem 0.5rem 1rem;
81
80
  }
@@ -97,24 +96,24 @@ table.toggle-table {
97
96
  }
98
97
 
99
98
  td.toggle-tablee-td {
100
- @include toggle-global-font-config;
101
-
102
- font-size: $toggle-font-size-small;
103
- padding: 1rem 0;
104
- padding-left:1rem;
99
+ @include toggle-global-font-config;
105
100
 
106
- cursor: pointer;
107
- vertical-align: middle;
108
- text-overflow: ellipsis;
109
- overflow: hidden;
110
- max-width: 80px;
111
- border: none;
112
- text-align: left;
101
+ font-size: $toggle-font-size-small;
102
+ padding: 1rem 0;
103
+ padding-left:1rem;
113
104
 
114
- &:has(.toggle-three-dots-container) {
115
- overflow: inherit;
116
- text-align: right;
117
- }
105
+ cursor: pointer;
106
+ vertical-align: middle;
107
+ text-overflow: ellipsis;
108
+ overflow: hidden;
109
+ max-width: 80px;
110
+ border: none;
111
+ text-align: left;
112
+
113
+ &:has(.toggle-three-dots-container) {
114
+ overflow: inherit;
115
+ text-align: right;
116
+ }
118
117
  }
119
118
 
120
119
  tr.toggle-tablee-tr {
@@ -129,18 +128,18 @@ table.toggle-table {
129
128
  border-bottom-left-radius: 10px;
130
129
  }
131
130
 
132
- td.toggle-tablee-td:last-child {
133
- border-top-right-radius: 10px;
134
- border-bottom-right-radius: 10px;
135
- }
131
+ td.toggle-tablee-td:last-child {
132
+ border-top-right-radius: 10px;
133
+ border-bottom-right-radius: 10px;
134
+ }
136
135
 
137
- td.toggle-tablee-td {
138
- .toggle-button {
139
- &.neutral {
140
- padding: 0.2rem 0.9rem 0.2rem 0.9rem;
141
- }
142
- }
136
+ td.toggle-tablee-td {
137
+ .toggle-button {
138
+ &.neutral {
139
+ padding: 0.2rem 0.9rem 0.2rem 0.9rem;
140
+ }
143
141
  }
142
+ }
144
143
 
145
144
 
146
145
  }
@@ -148,159 +147,160 @@ table.toggle-table {
148
147
  opacity: 0.5;
149
148
  cursor: not-allowed;
150
149
  }
151
-
150
+
152
151
  }
153
152
 
154
153
  .toggle-date-input-calendar-icon{
155
154
  &:after{
156
- content: '';
157
- }
155
+ content: '';
156
+ }
158
157
  .toggle-input{
159
- font-size: 12px;
160
- padding-right:0px !important;
158
+ font-size: 12px;
159
+ padding-right:0px !important;
161
160
  }
162
- }
163
-
161
+ }
162
+
164
163
  }
165
164
 
166
165
 
167
166
 
168
167
 
169
168
  .toggle-table-any-search-active {
170
- .toggle-table-th-inner {
171
- height:74px;
172
- }
169
+ .toggle-table-th-inner {
170
+ height:74px;
171
+ }
173
172
  }
174
173
  .toggle-table-th-inner {
175
- line-height: 1em;
176
- position: relative;
177
- display: block;
178
- height: 20px;
179
- margin: 0 4px 8px 4px;
180
- padding: 10px;
181
- border:1px solid transparent;
182
- border-radius: 4px;
183
- box-sizing:border-box;
184
- transition: height .5s;
185
-
186
- .toggle-table-search-active & {
187
- z-index: 25;
188
- //overflow: hidden;
189
- background-color: white;
190
- border:1px solid #FFA300;
191
- input {
192
- cursor: text;
193
- pointer-events: auto;
194
- }
195
- .toggle-table-close-search {
196
- display: inline-block;
197
- }
174
+ line-height: 1em;
175
+ position: relative;
176
+ display: block;
177
+ height: 50px;
178
+ margin: 0 4px 8px 4px;
179
+ padding: 10px;
180
+ border:1px solid transparent;
181
+ border-radius: 4px;
182
+ box-sizing:border-box;
183
+ transition: height .5s;
184
+
185
+ .toggle-table-search-active & {
186
+ z-index: 25;
187
+ //overflow: hidden;
188
+ background-color: white;
189
+ border:1px solid #FFA300;
190
+ input {
191
+ cursor: text;
192
+ pointer-events: auto;
198
193
  }
199
- .toggle-table-searchable & {
200
- .toggle-table-th-title {
201
- position: relative;
202
- display: inline-block;
203
- &:after {
204
- display: block;
205
- content:'';
206
- position: absolute;
207
- right: -15px;
208
- top: 3px;
209
- background: url(../assets/icons/search.svg) no-repeat;
210
- width: 10px;
211
- height: 10px;
212
- opacity: 0.3;
213
- }
214
- }
215
- &:hover .toggle-table-th-title:after {
216
- opacity: 1;
217
- }
194
+ .toggle-table-close-search {
195
+ display: inline-block;
218
196
  }
219
- .toggle-table-searchable.toggle-table-search-active & {
220
- .toggle-table-th-title:after {
221
- display: none;
222
- }
197
+ }
198
+ .toggle-table-searchable & {
199
+ cursor: pointer;
200
+ .toggle-table-th-title {
201
+ position: relative;
202
+ display: inline-block;
203
+ &:after {
204
+ display: block;
205
+ content:'';
206
+ position: absolute;
207
+ right: -15px;
208
+ top: 3px;
209
+ background: url(../assets/icons/search.svg) no-repeat;
210
+ width: 10px;
211
+ height: 10px;
212
+ opacity: 0.3;
213
+ }
214
+ }
215
+ &:hover .toggle-table-th-title:after {
216
+ opacity: 1;
217
+ }
218
+ }
219
+ .toggle-table-searchable.toggle-table-search-active & {
220
+ .toggle-table-th-title:after {
221
+ display: none;
223
222
  }
223
+ }
224
224
  }
225
225
 
226
226
 
227
227
  .toggle-table-close-search {
228
- position: absolute;
229
- top: 12px;
230
- right: 10px;
231
- display: block;
232
- opacity: 0.3;
233
- cursor:pointer;
228
+ position: absolute;
229
+ top: 12px;
230
+ right: 10px;
231
+ display: block;
232
+ opacity: 0.3;
233
+ cursor:pointer;
234
234
  }
235
235
  .toggle-table-close-search {
236
- background: url(../assets/icons/grey_cross.svg) no-repeat;
237
- width: 12px;
238
- height: 12px;
239
- display: none;
240
- float: right;
241
- &:hover {
242
- opacity: 1;
243
- }
236
+ background: url(../assets/icons/grey_cross.svg) no-repeat;
237
+ width: 12px;
238
+ height: 12px;
239
+ display: none;
240
+ float: right;
241
+ &:hover {
242
+ opacity: 1;
243
+ }
244
244
  }
245
245
 
246
246
  .arrow-order {
247
- background: url(/img/icons/arrow-right-blue-small.svg);
248
- position: absolute;
249
- top: 50%;
250
- margin-top: -10px;
251
- right: 15px;
252
- width: 20px;
253
- height: 20px;
254
- display: none;
247
+ background: url(/img/icons/arrow-right-blue-small.svg);
248
+ position: absolute;
249
+ top: 50%;
250
+ margin-top: -10px;
251
+ right: 15px;
252
+ width: 20px;
253
+ height: 20px;
254
+ display: none;
255
255
  }
256
256
 
257
257
 
258
258
 
259
259
  .toggle-pagination {
260
260
 
261
- ul, li {
262
- list-style: none;
263
- }
264
- ul {
265
- margin: 0;
266
- padding: 0;
267
- li {
268
- float: left;
269
-
270
- button {
271
- border: none;
272
- cursor: pointer;
273
- padding: 0 10px;
274
- color: #354B64;
275
- background-color: transparent;
276
- &:disabled {
277
- color: rgba(24, 158, 209, 0.7);
278
- font-weight: bold;
279
- }
280
- }
261
+ ul, li {
262
+ list-style: none;
263
+ }
264
+ ul {
265
+ margin: 0;
266
+ padding: 0;
267
+ li {
268
+ float: left;
281
269
 
282
- .toggle-pagination-prev, .toggle-pagination-next {
283
- text-indent: -99999px;
284
- width: 25px;
285
- height: 25px;
286
- }
270
+ button {
271
+ border: none;
272
+ cursor: pointer;
273
+ padding: 0 10px;
274
+ color: #354B64;
275
+ background-color: transparent;
276
+ &:disabled {
277
+ color: rgba(24, 158, 209, 0.7);
278
+ font-weight: bold;
279
+ }
280
+ }
287
281
 
288
- .toggle-pagination-prev{
289
- background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
290
- margin-right: 10px;
282
+ .toggle-pagination-prev, .toggle-pagination-next {
283
+ text-indent: -99999px;
284
+ width: 25px;
285
+ height: 25px;
286
+ }
291
287
 
292
- &:hover {
293
- background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
294
- }
295
- }
288
+ .toggle-pagination-prev{
289
+ background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
290
+ margin-right: 10px;
296
291
 
297
- .toggle-pagination-next{
298
- background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
299
- margin-left: 10px;
300
- &:hover {
301
- background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
302
- }
303
- }
292
+ &:hover {
293
+ background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
304
294
  }
295
+ }
296
+
297
+ .toggle-pagination-next{
298
+ background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
299
+ margin-left: 10px;
300
+ &:hover {
301
+ background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
302
+ }
303
+ }
305
304
  }
305
+ }
306
306
  }
@@ -1,10 +0,0 @@
1
- <svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
2
- <defs>
3
- <clipPath id="clip-path">
4
- <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
5
- </clipPath>
6
- </defs>
7
- <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
8
- <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#477ef6"/>
9
- </g>
10
- </svg>
@@ -1,10 +0,0 @@
1
- <svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
2
- <defs>
3
- <clipPath id="clip-path">
4
- <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
5
- </clipPath>
6
- </defs>
7
- <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
8
- <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#354b64"/>
9
- </g>
10
- </svg>