@greghowe79/the-lib 2.6.0 → 2.6.1

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 (3) hide show
  1. package/lib/components/skeletons/SkeletonSuggestion/styles.css.qwik.cjs +1 -1
  2. package/lib/components/skeletons/SkeletonSuggestion/styles.css.qwik.mjs +1 -1
  3. package/package.json +1 -1
package/lib/components/skeletons/SkeletonSuggestion/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = "/* ===========================\r\n Skeleton base (library)\r\n=========================== */\r\n\r\n/* .skeleton {\r\n pointer-events: none;\r\n}\r\n\r\n.skeleton-avatar {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: linear-gradient(90deg, #e5e5e5 25%, #f2f2f2 37%, #e5e5e5 63%);\r\n background-size: 400% 100%;\r\n animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n.skeleton-text {\r\n flex: 1;\r\n}\r\n\r\n.skeleton-line {\r\n height: 12px;\r\n border-radius: 6px;\r\n margin-bottom: 6px;\r\n background: linear-gradient(90deg, #e5e5e5 25%, #f2f2f2 37%, #e5e5e5 63%);\r\n background-size: 400% 100%;\r\n animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n.skeleton-line.title {\r\n width: 55%;\r\n height: 14px;\r\n}\r\n\r\n.skeleton-line.subtitle {\r\n width: 80%;\r\n}\r\n\r\n@keyframes shimmer {\r\n 0% {\r\n background-position: 100% 0;\r\n }\r\n 100% {\r\n background-position: -100% 0;\r\n }\r\n} */\r\n\r\n.skeleton-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 10px 15px;\r\n background: #fff;\r\n border-bottom: 1px solid #f0f0f0;\r\n}\r\n.skeleton-avatar {\r\n width: 45px;\r\n height: 45px;\r\n background: #e0e0e0;\r\n border-radius: 6px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n}\r\n.skeleton-info {\r\n flex: 1;\r\n}\r\n.skeleton-line {\r\n height: 12px;\r\n background: #e0e0e0;\r\n border-radius: 4px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.skeleton-line.title {\r\n width: 65%;\r\n height: 14px;\r\n margin-bottom: 8px;\r\n}\r\n.skeleton-line.subtitle {\r\n width: 85%;\r\n}\r\n/* Effetto movimento */\r\n.skeleton-avatar,\r\n.skeleton-line {\r\n background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s infinite linear;\r\n}\r\n@keyframes shimmer {\r\n 0% {\r\n background-position: 200% 0;\r\n }\r\n 100% {\r\n background-position: -200% 0;\r\n }\r\n}\r\n";
2
+ const styles = ".skeleton-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n padding: 0.5rem 1rem;\r\n border-bottom: 1px solid #e0e0e0;\r\n height: 3.75rem;\r\n box-sizing: border-box;\r\n pointer-events: none;\r\n}\r\n\r\n.skeleton-avatar {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 6px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.skeleton-info {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n}\r\n\r\n.skeleton-line {\r\n height: 12px;\r\n border-radius: 4px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.skeleton-line.title {\r\n width: 65%;\r\n height: 14px;\r\n margin-bottom: 6px;\r\n}\r\n\r\n.skeleton-line.subtitle {\r\n width: 85%;\r\n height: 10px;\r\n}\r\n\r\n/* Effetto movimento (Shimmer) */\r\n.skeleton-avatar,\r\n.skeleton-line {\r\n background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s infinite linear;\r\n}\r\n\r\n@keyframes shimmer {\r\n 0% {\r\n background-position: 200% 0;\r\n }\r\n 100% {\r\n background-position: -200% 0;\r\n }\r\n}\r\n\r\n/* Ottimizzazione Mobile */\r\n@media (max-width: 600px) {\r\n .skeleton-item {\r\n height: 4.5rem; /* 72px */\r\n padding: 0.75rem 1rem;\r\n }\r\n\r\n .skeleton-avatar {\r\n width: 3rem;\r\n height: 3rem;\r\n }\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/skeletons/SkeletonSuggestion/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = "/* ===========================\r\n Skeleton base (library)\r\n=========================== */\r\n\r\n/* .skeleton {\r\n pointer-events: none;\r\n}\r\n\r\n.skeleton-avatar {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: linear-gradient(90deg, #e5e5e5 25%, #f2f2f2 37%, #e5e5e5 63%);\r\n background-size: 400% 100%;\r\n animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n.skeleton-text {\r\n flex: 1;\r\n}\r\n\r\n.skeleton-line {\r\n height: 12px;\r\n border-radius: 6px;\r\n margin-bottom: 6px;\r\n background: linear-gradient(90deg, #e5e5e5 25%, #f2f2f2 37%, #e5e5e5 63%);\r\n background-size: 400% 100%;\r\n animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n.skeleton-line.title {\r\n width: 55%;\r\n height: 14px;\r\n}\r\n\r\n.skeleton-line.subtitle {\r\n width: 80%;\r\n}\r\n\r\n@keyframes shimmer {\r\n 0% {\r\n background-position: 100% 0;\r\n }\r\n 100% {\r\n background-position: -100% 0;\r\n }\r\n} */\r\n\r\n.skeleton-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 10px 15px;\r\n background: #fff;\r\n border-bottom: 1px solid #f0f0f0;\r\n}\r\n.skeleton-avatar {\r\n width: 45px;\r\n height: 45px;\r\n background: #e0e0e0;\r\n border-radius: 6px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n}\r\n.skeleton-info {\r\n flex: 1;\r\n}\r\n.skeleton-line {\r\n height: 12px;\r\n background: #e0e0e0;\r\n border-radius: 4px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.skeleton-line.title {\r\n width: 65%;\r\n height: 14px;\r\n margin-bottom: 8px;\r\n}\r\n.skeleton-line.subtitle {\r\n width: 85%;\r\n}\r\n/* Effetto movimento */\r\n.skeleton-avatar,\r\n.skeleton-line {\r\n background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s infinite linear;\r\n}\r\n@keyframes shimmer {\r\n 0% {\r\n background-position: 200% 0;\r\n }\r\n 100% {\r\n background-position: -200% 0;\r\n }\r\n}\r\n";
1
+ const styles = ".skeleton-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n padding: 0.5rem 1rem;\r\n border-bottom: 1px solid #e0e0e0;\r\n height: 3.75rem;\r\n box-sizing: border-box;\r\n pointer-events: none;\r\n}\r\n\r\n.skeleton-avatar {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 6px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.skeleton-info {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n}\r\n\r\n.skeleton-line {\r\n height: 12px;\r\n border-radius: 4px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.skeleton-line.title {\r\n width: 65%;\r\n height: 14px;\r\n margin-bottom: 6px;\r\n}\r\n\r\n.skeleton-line.subtitle {\r\n width: 85%;\r\n height: 10px;\r\n}\r\n\r\n/* Effetto movimento (Shimmer) */\r\n.skeleton-avatar,\r\n.skeleton-line {\r\n background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s infinite linear;\r\n}\r\n\r\n@keyframes shimmer {\r\n 0% {\r\n background-position: 200% 0;\r\n }\r\n 100% {\r\n background-position: -200% 0;\r\n }\r\n}\r\n\r\n/* Ottimizzazione Mobile */\r\n@media (max-width: 600px) {\r\n .skeleton-item {\r\n height: 4.5rem; /* 72px */\r\n padding: 0.75rem 1rem;\r\n }\r\n\r\n .skeleton-avatar {\r\n width: 3rem;\r\n height: 3rem;\r\n }\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.6.0",
3
+ "version": "2.6.1",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",