toggle-components-library 1.35.0 → 1.36.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 (7) hide show
  1. package/package-lock.json +1 -1
  2. package/package.json +1 -1
  3. package/src/components/forms/ToggleInputSelect.vue +13 -7
  4. package/src/components/forms/ToggleInputText.vue +15 -6
  5. package/src/components/tables/ToggleTable.vue +114 -49
  6. package/src/sass/includes/_as_inputs.scss +851 -838
  7. 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;
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
  }