refactor(skeletons): doc changes

eBay · Nov 14, 2023 · 03f3916 · 03f3916
1 parent b6664f0
commit 03f3916
Show file tree

Hide file tree

Showing 5 changed files with 328 additions and 401 deletions.
diff --git a/dist/skeleton/skeleton.css b/dist/skeleton/skeleton.css
@@ -5,34 +5,6 @@
   --skeleton-tile-width-min: 121px;
   --skeleton-width: 100%;
 }
-.skeleton-avatar--elevated,
-.skeleton-btn--elevated,
-.skeleton-text--elevated,
-.skeleton-image--elevated,
-.skeleton-form--elevated {
-  background: var(--color-loading-elevated-fill);
-}
-.skeleton-avatar--ai-gradient-purple-subtle,
-.skeleton-btn--ai-gradient-purple-subtle,
-.skeleton-text--ai-gradient-purple-subtle,
-.skeleton-image--ai-gradient-purple-subtle,
-.skeleton-form--ai-gradient-purple-subtle {
-  background: var(--color-ai-gradient-purple-subtle);
-}
-.skeleton-avatar--ai-gradient-green-subtle,
-.skeleton-btn--ai-gradient-green-subtle,
-.skeleton-text--ai-gradient-green-subtle,
-.skeleton-image--ai-gradient-green-subtle,
-.skeleton-form--ai-gradient-green-subtle {
-  background: var(--color-ai-gradient-green-subtle);
-}
-.skeleton-avatar--ai-gradient-blue-subtle,
-.skeleton-btn--ai-gradient-blue-subtle,
-.skeleton-text--ai-gradient-blue-subtle,
-.skeleton-image--ai-gradient-blue-subtle,
-.skeleton-form--ai-gradient-blue-subtle {
-  background: var(--color-ai-gradient-blue-subtle);
-}
 .skeleton-avatar {
   background: var(--color-loading-fill);
   border-radius: 50%;
@@ -41,23 +13,23 @@
   min-height: 12px;
   width: var(--skeleton-height);
 }
-.skeleton-btn {
+.skeleton-button {
   background: var(--color-loading-fill);
   border-radius: 20px;
   cursor: progress;
   height: 40px;
   min-height: 12px;
   width: var(--skeleton-width);
 }
-.skeleton-btn--small {
+.skeleton-button--small {
   background: var(--color-loading-fill);
   border-radius: 16px;
   cursor: progress;
   height: 32px;
   min-height: 12px;
   width: var(--skeleton-width);
 }
-.skeleton-btn--large {
+.skeleton-button--large {
   background: var(--color-loading-fill);
   border-radius: 24px;
   cursor: progress;
@@ -74,6 +46,7 @@
   min-height: 12px;
   width: var(--skeleton-width);
 }
+.skeleton-text::after,
 .skeleton-text--small::after {
   height: 16px;
   margin-top: calc(16px + var(--spacing-100));
@@ -91,6 +64,7 @@
   margin-top: calc(24px + var(--spacing-100));
 }
 .skeleton-text--multiline {
+  margin-bottom: var(--spacing-300);
   position: relative;
   width: calc(100% - var(--spacing-300));
 }
@@ -100,9 +74,6 @@
   position: absolute;
   width: calc(100% - var(--spacing-700));
 }
-.skeleton-text--small.skeleton-text--multiline {
-  margin-bottom: var(--spacing-300);
-}
 .skeleton-text--large.skeleton--text--multiline {
   margin-bottom: var(--spacing-400);
 }
@@ -134,79 +105,42 @@
   top: 0;
   width: 100%;
 }
-.skeleton__tile {
+.skeleton-tile {
   max-width: var(--skeleton-tile-width-max);
   min-width: var(--skeleton-tile-width-min);
 }
-.skeleton__tile .skeleton-text--small,
-.skeleton__tile .skeleton-text--large {
+.skeleton-tile .skeleton-text--small,
+.skeleton-tile .skeleton-text--large {
   width: calc(100% - var(--spacing-300));
 }
-.skeleton__tile .skeleton-image {
+.skeleton-tile .skeleton-image {
   margin-bottom: var(--spacing-150);
   padding-bottom: 100%;
   position: relative;
   width: 100%;
 }
-.skeleton__tile-container {
-  display: inline-block;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-.skeleton__tile-container li {
-  display: inline-table;
-  margin: var(--spacing-50);
-}
-/* Columns */
-.skeleton__tile-container[data-columns="2"] li {
-  width: calc(100% / 2 - 11px);
-}
-.skeleton__tile-container[data-columns="3"] li {
-  width: calc(100% / 3 - 11px);
-}
-.skeleton__tile-container[data-columns="4"] li {
-  width: calc(100% / 4 - 11px);
-}
-.skeleton__tile-container[data-columns="5"] li {
-  width: calc(100% / 5 - 11px);
-}
-.skeleton__tile-container[data-columns="6"] li {
-  width: calc(100% / 6 - 11px);
-}
-[dir="rtl"] .skeleton-avatar,
-[dir="rtl"] .skeleton-btn,
-[dir="rtl"] .skeleton-text,
-[dir="rtl"] .skeleton-image,
-[dir="rtl"] .skeleton-form {
-  animation-direction: normal, reverse;
-}
-[dir="rtl"] .skeleton-text--multiline::after {
-  left: var(--spacing-700);
-}
-@keyframes loading-frames {
-  0% {
-    background-position: 0% 0%;
-  }
-  50% {
-    background-position: 45% 0%;
-  }
-  100% {
-    background-position: 90% 0%;
-  }
-}
-@keyframes fade-in {
-  0% {
-    opacity: 0;
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes loading-frames {
+    0% {
+      background-position: 0% 0%;
+    }
+    50% {
+      background-position: 45% 0%;
+    }
+    100% {
+      background-position: 90% 0%;
+    }
   }
-  100% {
-    opacity: 1;
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
-}
-@media (prefers-reduced-motion: no-preference) {
   .skeleton-avatar,
-  .skeleton-btn,
+  .skeleton-button,
   .skeleton-text,
   .skeleton-image,
   .skeleton-form {
@@ -217,24 +151,62 @@
     background-size: 200%;
   }
 }
+.skeleton-avatar--elevated,
+.skeleton-button--elevated,
+.skeleton-text--elevated,
+.skeleton-image--elevated,
+.skeleton-form--elevated {
+  background: var(--color-loading-fill-elevated);
+}
 @media screen and (max-width: 512px) {
   .skeleton-avatar,
-  .skeleton-btn,
+  .skeleton-button,
   .skeleton-text,
   .skeleton-image,
   .skeleton-form {
     background: var(--color-loading-shimmer);
   }
   .skeleton-avatar--elevated,
-  .skeleton-btn--elevated,
+  .skeleton-button--elevated,
   .skeleton-text--elevated,
   .skeleton-image--elevated,
   .skeleton-form--elevated {
     background: var(--color-loading-shimmer-elevated);
   }
 }
+.skeleton-avatar--purple,
+.skeleton-button--purple,
+.skeleton-text--purple,
+.skeleton-image--purple,
+.skeleton-form--purple {
+  background: var(--color-ai-gradient-purple-subtle);
+}
+.skeleton-avatar--green,
+.skeleton-button--green,
+.skeleton-text--green,
+.skeleton-image--green,
+.skeleton-form--green {
+  background: var(--color-ai-gradient-green-subtle);
+}
+.skeleton-avatar--blue,
+.skeleton-button--blue,
+.skeleton-text--blue,
+.skeleton-image--blue,
+.skeleton-form--blue {
+  background: var(--color-ai-gradient-blue-subtle);
+}
 @container skeleton-image (width > 79px) {
   .skeleton-image {
     border-radius: 16px;
   }
 }
+[dir="rtl"] .skeleton-avatar,
+[dir="rtl"] .skeleton-button,
+[dir="rtl"] .skeleton-text,
+[dir="rtl"] .skeleton-image,
+[dir="rtl"] .skeleton-form {
+  animation-direction: normal, reverse;
+}
+[dir="rtl"] .skeleton-text--multiline::after {
+  left: var(--spacing-700);
+}