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

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 +154 -224
  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 +154 -224
  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/components/cards/ToggleCommentCard.vue +3 -4
  11. package/src/components/carousel/ToggleCarousel.vue +9 -2
  12. package/src/components/forms/ToggleInputSelect.vue +7 -13
  13. package/src/components/forms/ToggleInputText.vue +6 -15
  14. package/src/components/metrics/ToggleMetricSparkLine.vue +5 -1
  15. package/src/components/mixins/mixins.js +2 -2
  16. package/src/components/tables/ToggleTable.vue +49 -114
  17. package/src/sass/includes/_as_inputs.scss +838 -851
  18. package/src/sass/includes/_as_table.scss +163 -163
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,24 +97,24 @@ 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
  tr.toggle-tablee-tr {
@@ -128,18 +129,18 @@ table.toggle-table {
128
129
  border-bottom-left-radius: 10px;
129
130
  }
130
131
 
131
- td.toggle-tablee-td:last-child {
132
- border-top-right-radius: 10px;
133
- border-bottom-right-radius: 10px;
134
- }
132
+ td.toggle-tablee-td:last-child {
133
+ border-top-right-radius: 10px;
134
+ border-bottom-right-radius: 10px;
135
+ }
135
136
 
136
- td.toggle-tablee-td {
137
- .toggle-button {
138
- &.neutral {
139
- padding: 0.2rem 0.9rem 0.2rem 0.9rem;
140
- }
137
+ td.toggle-tablee-td {
138
+ .toggle-button {
139
+ &.neutral {
140
+ padding: 0.2rem 0.9rem 0.2rem 0.9rem;
141
+ }
142
+ }
141
143
  }
142
- }
143
144
 
144
145
 
145
146
  }
@@ -147,160 +148,159 @@ table.toggle-table {
147
148
  opacity: 0.5;
148
149
  cursor: not-allowed;
149
150
  }
150
-
151
+
151
152
  }
152
153
 
153
154
  .toggle-date-input-calendar-icon{
154
155
  &:after{
155
- content: '';
156
- }
156
+ content: '';
157
+ }
157
158
  .toggle-input{
158
- font-size: 12px;
159
- padding-right:0px !important;
159
+ font-size: 12px;
160
+ padding-right:0px !important;
160
161
  }
161
- }
162
-
162
+ }
163
+
163
164
  }
164
165
 
165
166
 
166
167
 
167
168
 
168
169
  .toggle-table-any-search-active {
169
- .toggle-table-th-inner {
170
- height:74px;
171
- }
170
+ .toggle-table-th-inner {
171
+ height:74px;
172
+ }
172
173
  }
173
174
  .toggle-table-th-inner {
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;
193
- }
194
- .toggle-table-close-search {
195
- display: inline-block;
196
- }
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
- }
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
+ }
214
198
  }
215
- &:hover .toggle-table-th-title:after {
216
- opacity: 1;
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
+ }
217
218
  }
218
- }
219
- .toggle-table-searchable.toggle-table-search-active & {
220
- .toggle-table-th-title:after {
221
- display: none;
219
+ .toggle-table-searchable.toggle-table-search-active & {
220
+ .toggle-table-th-title:after {
221
+ display: none;
222
+ }
222
223
  }
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;
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
+ }
281
281
 
282
- .toggle-pagination-prev, .toggle-pagination-next {
283
- text-indent: -99999px;
284
- width: 25px;
285
- height: 25px;
286
- }
282
+ .toggle-pagination-prev, .toggle-pagination-next {
283
+ text-indent: -99999px;
284
+ width: 25px;
285
+ height: 25px;
286
+ }
287
287
 
288
- .toggle-pagination-prev{
289
- background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
290
- margin-right: 10px;
288
+ .toggle-pagination-prev{
289
+ background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
290
+ margin-right: 10px;
291
291
 
292
- &:hover {
293
- background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
294
- }
295
- }
292
+ &:hover {
293
+ background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
294
+ }
295
+ }
296
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;
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
+ }
302
304
  }
303
- }
304
305
  }
305
- }
306
306
  }