toggle-components-library 1.33.0-beta.9 → 1.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/toggle-components-library.common.js +64 -171
  2. package/dist/toggle-components-library.common.js.map +1 -1
  3. package/dist/toggle-components-library.css +1 -1
  4. package/dist/toggle-components-library.umd.js +64 -171
  5. package/dist/toggle-components-library.umd.js.map +1 -1
  6. package/dist/toggle-components-library.umd.min.js +1 -1
  7. package/dist/toggle-components-library.umd.min.js.map +1 -1
  8. package/package-lock.json +20285 -0
  9. package/package.json +1 -1
  10. package/src/assets/img/feedback.svg +1 -0
  11. package/src/components/boosters/ToggleBoosterButton.vue +3 -1
  12. package/src/components/forms/ToggleInputSelect.vue +8 -27
  13. package/src/components/forms/ToggleInputText.vue +6 -29
  14. package/src/components/tables/ToggleTable.vue +49 -116
  15. package/src/sass/includes/_as_boosters.scss +21 -4
  16. package/src/sass/includes/_as_inputs.scss +839 -849
  17. package/src/sass/includes/_as_table.scss +176 -176
  18. package/src/sass/includes/_as_variables.scss +4 -0
package/src/sass/includes/_as_table.scss CHANGED
@@ -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;
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;
33
37
  }
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;
44
+ padding: 0 10px 20px 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,6 +75,7 @@ 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;
78
79
  background-size: 15px;
79
80
  padding : 0.5rem 0rem 0.5rem 1rem;
80
81
  }
@@ -96,209 +97,208 @@ table.toggle-table {
96
97
  }
97
98
 
98
99
  td.toggle-tablee-td {
99
- @include toggle-global-font-config;
100
-
101
- font-size: $toggle-font-size-small;
102
- padding: 1rem 0;
103
- padding-left:1rem;
100
+ @include toggle-global-font-config;
101
+
102
+ font-size: $toggle-font-size-small;
103
+ padding: 1rem 0;
104
+ padding-left:1rem;
104
105
 
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;
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;
112
113
 
113
- &:has(.toggle-three-dots-container) {
114
- overflow: inherit;
115
- text-align: right;
116
- }
114
+ &:has(.toggle-three-dots-container) {
115
+ overflow: inherit;
116
+ text-align: right;
117
+ }
117
118
  }
118
119
 
119
120
 
120
121
  tr.toggle-tablee-tr {
121
122
 
122
- &:hover {
123
- background-color: #FFF;
124
- .arrow-order {
125
- display: block;
123
+ &:hover {
124
+ background-color: #FFF;
125
+ .arrow-order {
126
+ display: block;
127
+ }
128
+ }
129
+ td.toggle-tablee-td:first-child {
130
+ border-top-left-radius: 10px;
131
+ border-bottom-left-radius: 10px;
126
132
  }
127
- }
128
- td.toggle-tablee-td:first-child {
129
- border-top-left-radius: 10px;
130
- border-bottom-left-radius: 10px;
131
- }
132
133
 
133
- td.toggle-tablee-td:last-child {
134
- border-top-right-radius: 10px;
135
- border-bottom-right-radius: 10px;
136
- }
134
+ td.toggle-tablee-td:last-child {
135
+ border-top-right-radius: 10px;
136
+ border-bottom-right-radius: 10px;
137
+ }
137
138
 
138
- td.toggle-tablee-td {
139
- .toggle-button {
140
- &.neutral {
141
- padding: 0.2rem 0.9rem 0.2rem 0.9rem;
142
- }
139
+ td.toggle-tablee-td {
140
+ .toggle-button {
141
+ &.neutral {
142
+ padding: 0.2rem 0.9rem 0.2rem 0.9rem;
143
+ }
144
+ }
143
145
  }
144
- }
145
146
 
146
147
 
147
148
  }
148
-
149
+
149
150
  }
150
151
 
151
152
  .toggle-date-input-calendar-icon{
152
153
  &:after{
153
- content: '';
154
- }
154
+ content: '';
155
+ }
155
156
  .toggle-input{
156
- font-size: 12px;
157
- padding-right:0px !important;
157
+ font-size: 12px;
158
+ padding-right:0px !important;
158
159
  }
159
- }
160
-
160
+ }
161
+
161
162
  }
162
163
 
163
164
 
164
165
 
165
166
 
166
167
  .toggle-table-any-search-active {
167
- .toggle-table-th-inner {
168
- height:74px;
169
- }
168
+ .toggle-table-th-inner {
169
+ height:74px;
170
+ }
170
171
  }
171
172
  .toggle-table-th-inner {
172
- line-height: 1em;
173
- position: relative;
174
- display: block;
175
- height: 50px;
176
- margin: 0 4px 8px 4px;
177
- padding: 10px;
178
- border:1px solid transparent;
179
- border-radius: 4px;
180
- box-sizing:border-box;
181
- transition: height .5s;
182
-
183
- .toggle-table-search-active & {
184
- z-index: 25;
185
- //overflow: hidden;
186
- background-color: white;
187
- border:1px solid #FFA300;
188
- input {
189
- cursor: text;
190
- pointer-events: auto;
191
- }
192
- .toggle-table-close-search {
193
- display: inline-block;
194
- }
195
- }
196
- .toggle-table-searchable & {
197
- cursor: pointer;
198
- .toggle-table-th-title {
199
- position: relative;
200
- display: inline-block;
201
- &:after {
202
- display: block;
203
- content:'';
204
- position: absolute;
205
- right: -15px;
206
- top: 3px;
207
- background: url(../assets/icons/search.svg) no-repeat;
208
- width: 10px;
209
- height: 10px;
210
- opacity: 0.3;
211
- }
173
+ line-height: 1em;
174
+ position: relative;
175
+ display: block;
176
+ height: 20px;
177
+ margin: 0 4px 8px 4px;
178
+ padding: 10px;
179
+ border:1px solid transparent;
180
+ border-radius: 4px;
181
+ box-sizing:border-box;
182
+ transition: height .5s;
183
+
184
+ .toggle-table-search-active & {
185
+ z-index: 25;
186
+ //overflow: hidden;
187
+ background-color: white;
188
+ border:1px solid #FFA300;
189
+ input {
190
+ cursor: text;
191
+ pointer-events: auto;
192
+ }
193
+ .toggle-table-close-search {
194
+ display: inline-block;
195
+ }
212
196
  }
213
- &:hover .toggle-table-th-title:after {
214
- opacity: 1;
197
+ .toggle-table-searchable & {
198
+ .toggle-table-th-title {
199
+ position: relative;
200
+ display: inline-block;
201
+ &:after {
202
+ display: block;
203
+ content:'';
204
+ position: absolute;
205
+ right: -15px;
206
+ top: 3px;
207
+ background: url(../assets/icons/search.svg) no-repeat;
208
+ width: 10px;
209
+ height: 10px;
210
+ opacity: 0.3;
211
+ }
212
+ }
213
+ &:hover .toggle-table-th-title:after {
214
+ opacity: 1;
215
+ }
215
216
  }
216
- }
217
- .toggle-table-searchable.toggle-table-search-active & {
218
- .toggle-table-th-title:after {
219
- display: none;
217
+ .toggle-table-searchable.toggle-table-search-active & {
218
+ .toggle-table-th-title:after {
219
+ display: none;
220
+ }
220
221
  }
221
- }
222
222
  }
223
223
 
224
224
 
225
225
  .toggle-table-close-search {
226
- position: absolute;
227
- top: 12px;
228
- right: 10px;
229
- display: block;
230
- opacity: 0.3;
231
- cursor:pointer;
226
+ position: absolute;
227
+ top: 12px;
228
+ right: 10px;
229
+ display: block;
230
+ opacity: 0.3;
231
+ cursor:pointer;
232
232
  }
233
233
  .toggle-table-close-search {
234
- background: url(../assets/icons/grey_cross.svg) no-repeat;
235
- width: 12px;
236
- height: 12px;
237
- display: none;
238
- float: right;
239
- &:hover {
240
- opacity: 1;
241
- }
234
+ background: url(../assets/icons/grey_cross.svg) no-repeat;
235
+ width: 12px;
236
+ height: 12px;
237
+ display: none;
238
+ float: right;
239
+ &:hover {
240
+ opacity: 1;
241
+ }
242
242
  }
243
243
 
244
244
  .arrow-order {
245
- background: url(/img/icons/arrow-right-blue-small.svg);
246
- position: absolute;
247
- top: 50%;
248
- margin-top: -10px;
249
- right: 15px;
250
- width: 20px;
251
- height: 20px;
252
- display: none;
245
+ background: url(/img/icons/arrow-right-blue-small.svg);
246
+ position: absolute;
247
+ top: 50%;
248
+ margin-top: -10px;
249
+ right: 15px;
250
+ width: 20px;
251
+ height: 20px;
252
+ display: none;
253
253
  }
254
254
 
255
255
 
256
256
 
257
257
  .toggle-pagination {
258
258
 
259
- ul, li {
260
- list-style: none;
261
- }
262
- ul {
263
- margin: 0;
264
- padding: 0;
265
- li {
266
- float: left;
267
-
268
- button {
269
- border: none;
270
- cursor: pointer;
271
- padding: 0 10px;
272
- color: #354B64;
273
- background-color: transparent;
274
- &:disabled {
275
- color: rgba(24, 158, 209, 0.7);
276
- font-weight: bold;
277
- }
278
- }
279
-
280
- .toggle-pagination-prev, .toggle-pagination-next {
281
- text-indent: -99999px;
282
- width: 25px;
283
- height: 25px;
284
- }
285
-
286
- .toggle-pagination-prev{
287
- background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
288
- margin-right: 10px;
289
-
290
- &:hover {
291
- background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
292
- }
293
- }
294
-
295
- .toggle-pagination-next{
296
- background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
297
- margin-left: 10px;
298
- &:hover {
299
- background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
259
+ ul, li {
260
+ list-style: none;
261
+ }
262
+ ul {
263
+ margin: 0;
264
+ padding: 0;
265
+ li {
266
+ float: left;
267
+
268
+ button {
269
+ border: none;
270
+ cursor: pointer;
271
+ padding: 0 10px;
272
+ color: #354B64;
273
+ background-color: transparent;
274
+ &:disabled {
275
+ color: rgba(24, 158, 209, 0.7);
276
+ font-weight: bold;
277
+ }
278
+ }
279
+
280
+ .toggle-pagination-prev, .toggle-pagination-next {
281
+ text-indent: -99999px;
282
+ width: 25px;
283
+ height: 25px;
284
+ }
285
+
286
+ .toggle-pagination-prev{
287
+ background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
288
+ margin-right: 10px;
289
+
290
+ &:hover {
291
+ background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
292
+ }
293
+ }
294
+
295
+ .toggle-pagination-next{
296
+ background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
297
+ margin-left: 10px;
298
+ &:hover {
299
+ background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
300
+ }
301
+ }
300
302
  }
301
- }
302
303
  }
303
- }
304
304
  }
package/src/sass/includes/_as_variables.scss CHANGED
@@ -62,6 +62,10 @@ $booster-test-colour-light:#02add3;
62
62
  $booster-test-colour-med:#0098ac;
63
63
  $booster-test-colour-dark:#008ba4;
64
64
 
65
+ $booster-feedback-colour-light:#ffffff;
66
+ $booster-feedback-colour-med:#dd3c3c;
67
+ $booster-feedback-colour-dark:#000000;
68
+
65
69
  /* metrics */
66
70
  $toggle-metric-label-blue: #477EF6;
67
71
  $toggle-metric-label-black: #354B64;