@licklist/design 0.78.5-dev.91 → 0.78.5-dev.92

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.
@@ -1,6 +1,6 @@
1
1
  import styleInject from 'style-inject';
2
2
 
3
- var css_248z = ".new-table-wrapper{overflow-x:auto;overflow-y:visible;width:100%}.new-table-wrapper.action-menu-open{overflow:visible!important}.new-table{border-collapse:collapse;font-family:var(--font-family-sans);table-layout:fixed;text-align:left;width:100%}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:14px 16px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);overflow:visible;transition:background-color .2s ease}.new-table__row.action-menu-open{overflow:visible!important;position:relative;z-index:20}.new-table__row.action-menu-open .new-table__cell{overflow:visible!important}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);overflow:visible;padding:16px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch}.new-table{min-width:600px}.new-table__header-cell{font-size:12px;padding:10px 12px}.new-table__cell{font-size:13px;padding:12px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:500px}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
3
+ var css_248z = ".new-table-wrapper{overflow-x:auto;overflow-y:visible;width:100%}.new-table-wrapper.action-menu-open{overflow:visible!important}.new-table{border-collapse:collapse;font-family:var(--font-family-sans);min-width:100%;table-layout:fixed;text-align:left}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:14px 16px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);overflow:visible;transition:background-color .2s ease}.new-table__row.action-menu-open{overflow:visible!important;position:relative;z-index:20}.new-table__row.action-menu-open .new-table__cell{overflow:visible!important}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);overflow:visible;padding:16px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch}.new-table{min-width:600px}.new-table__header-cell{font-size:12px;padding:10px 12px}.new-table__cell{font-size:13px;padding:12px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:500px}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
@@ -1,6 +1,6 @@
1
1
  import styleInject from 'style-inject';
2
2
 
3
- var css_248z = ".new-tabs{align-items:center;align-self:stretch;border-bottom:1px solid var(--border-primary,#e8e9ef);display:flex;justify-content:space-between;margin:20px 0;padding-bottom:0;padding-left:0;padding-top:0}.new-tabs__container{display:flex;gap:0}.new-tabs__tab{background:none;border:none;color:var(--label-selected,#121e52);cursor:pointer;font-family:var(--font-family-sans);font-size:15px;font-style:normal;font-weight:600;line-height:18px;margin-bottom:-1px;margin-right:24px;padding:12px 4px;position:relative;transition:color .15s cubic-bezier(.4,0,.2,1)}.new-tabs__tab:after{background-color:initial;border-radius:4px;bottom:0;content:\"\";height:3.5px;left:50%;position:absolute;transform:translateX(-50%);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.new-tabs__tab:hover:not(:disabled):after{background-color:var(--fill-action-secondary,#6200ee);width:50%}.new-tabs__tab:hover:not(:disabled){color:var(--fill-action-secondary,#6200ee)}.new-tabs__tab--active:after{background-color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab--active{color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab:disabled{cursor:not-allowed;opacity:.5}";
3
+ var css_248z = ".new-tabs{align-items:center;align-self:stretch;border-bottom:1px solid var(--border-primary,#e8e9ef);display:flex;justify-content:space-between;margin:20px 0 0;padding-bottom:0;padding-left:0;padding-top:0}.new-tabs__container{display:flex;gap:0}.new-tabs__tab{background:none;border:none;color:var(--label-selected,#121e52);cursor:pointer;font-family:var(--font-family-sans);font-size:15px;font-style:normal;font-weight:600;line-height:18px;margin-bottom:0;margin-right:24px;padding:12px 4px;position:relative;transition:color .15s cubic-bezier(.4,0,.2,1)}.new-tabs__tab:after{background-color:initial;border-radius:4px;bottom:0;content:\"\";height:3px;left:50%;position:absolute;transform:translateX(-50%);transition-duration:.25s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.new-tabs__tab:hover:not(:disabled):after{background-color:var(--fill-action-secondary,#6200ee);width:50%}.new-tabs__tab:hover:not(:disabled){color:var(--fill-action-secondary,#6200ee)}.new-tabs__tab--active:after{background-color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab--active{color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab:disabled{cursor:not-allowed;opacity:.5}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.78.5-dev.91",
3
+ "version": "0.78.5-dev.92",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -178,56 +178,67 @@
178
178
 
179
179
  // Cells styling (usually specific to the table in this page)
180
180
  .entity-cell {
181
+ position: relative;
182
+ overflow: hidden;
183
+
181
184
  &__name {
182
185
  font-size: 15px;
183
186
  font-weight: 600;
184
187
  color: var(--label-primary);
185
188
  }
189
+
190
+ &__info-wrapper {
191
+ position: relative;
192
+ height: 1.2em;
193
+ }
194
+
195
+ &__id,
186
196
  &__sub {
187
197
  font-size: 13px;
188
198
  color: var(--label-secondary);
189
- display: block !important;
199
+ line-height: 1.2;
200
+ transition: opacity 0.2s ease, visibility 0.2s ease;
190
201
  }
202
+
191
203
  &__id {
192
- font-size: 13px;
193
- color: var(--label-secondary);
194
- display: none !important;
204
+ position: absolute;
205
+ top: 0;
206
+ left: 0;
207
+ opacity: 0;
208
+ visibility: hidden;
195
209
  }
196
210
 
197
- &:hover {
198
- .entity-cell__id {
199
- display: block !important;
200
- }
201
- .entity-cell__sub {
202
- display: none !important;
203
- }
211
+ &__sub {
212
+ display: block;
213
+ opacity: 1;
214
+ visibility: visible;
204
215
  }
205
216
 
206
- // Ensure hover state on the row also triggers the same behavior
207
- // This addresses potential flickering when moving between cells
217
+ &:hover,
208
218
  :is(.new-table__row:hover) & {
209
219
  .entity-cell__id {
210
- display: block !important;
220
+ opacity: 1;
221
+ visibility: visible;
211
222
  }
212
223
  .entity-cell__sub {
213
- display: none !important;
224
+ opacity: 0;
225
+ visibility: hidden;
214
226
  }
215
227
  }
216
228
 
217
- // When entity-cell__sub is missing (like in template list),
218
- // showing entity-cell__id on hover causes height jump.
219
- // We only want to swap if both exist, or ensure height is stable.
229
+ // When entity-cell__sub is missing, always show ID if it exists
220
230
  &:not(:has(.entity-cell__sub)) {
221
231
  .entity-cell__id {
222
- display: block !important;
232
+ position: static;
233
+ opacity: 1;
234
+ visibility: visible;
223
235
  }
224
236
  }
225
237
 
226
- :is(.new-table__row:hover) &:not(:has(.entity-cell__sub)) {
227
- .entity-cell__id {
228
- display: block !important;
229
- }
230
- }
238
+ // Special case for templates list where sub might be a space ( )
239
+ // We only want to swap if the content is meaningful.
240
+ // If it's empty or just whitespace, we could show ID by default.
241
+ // For now, the opacity-based swap should handle the visual stability.
231
242
  }
232
243
 
233
244
  .type-cell {
@@ -547,8 +558,10 @@
547
558
  }
548
559
 
549
560
  &__pagination {
550
- flex-direction: column;
551
- align-items: flex-start;
561
+ display: flex;
562
+ flex-direction: row;
563
+ justify-content: flex-start;
564
+ align-items: center;
552
565
  gap: 12px;
553
566
  margin-top: 12px;
554
567
  padding: 24px 0 24px 0;
@@ -881,9 +894,16 @@
881
894
  padding: 0 12px 12px;
882
895
  }
883
896
 
897
+ &__pagination {
898
+ justify-content: center;
899
+
900
+ .pagination__pages {
901
+ justify-content: center;
902
+ }
903
+ }
904
+
884
905
  &__tabs-container {
885
- margin-left: 12px;
886
- margin-right: 12px;
906
+ margin: 0 12px 12px 12px;
887
907
  }
888
908
  }
889
909
  }
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .new-table {
12
- width: 100%;
12
+ min-width: 100%;
13
13
  border-collapse: collapse;
14
14
  text-align: left;
15
15
  table-layout: fixed;
@@ -6,7 +6,7 @@
6
6
  padding-bottom: 0;
7
7
  padding-left: 0;
8
8
  padding-top: 0;
9
- margin: 20px 0 20px 0;
9
+ margin: 20px 0 0 0;
10
10
  border-bottom: 1px solid var(--border-primary, #E8E9EF);
11
11
 
12
12
  &__container {
@@ -26,7 +26,7 @@
26
26
  font-family: var(--font-family-sans);
27
27
  color: var(--label-selected, #121E52);
28
28
  cursor: pointer;
29
- margin-bottom: -1px;
29
+ margin-bottom: 0;
30
30
  position: relative;
31
31
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
32
32
 
@@ -37,12 +37,12 @@
37
37
  left: 50%;
38
38
  transform: translateX(-50%);
39
39
  width: 100%;
40
- height: 3.5px;
40
+ height: 3px;
41
41
  background-color: transparent;
42
42
  border-radius: 4px;
43
43
  transition-property: all;
44
44
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
45
- transition-duration: 0.15s;
45
+ transition-duration: 0.25s;
46
46
  }
47
47
 
48
48
  &:hover:not(:disabled)::after {