@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.7

package/src/styles/components/feedback/skeleton.css

@@ -0,0 +1,337 @@
+/* Skeleton Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* SKELETON BASE */
+/* ============================================================================ */
+
+.skeleton {
+  --skeleton-color: var(--cs-colors-surface-border);
+  --skeleton-bg-light: var(--cs-colors-surface-surface);
+  --skeleton-bg-dark: var(--cs-colors-surface-border);
+  --skeleton-border-radius: var(--cs-border-radius-sm);
+  --skeleton-border-radius-rounded: var(--cs-border-radius-md);
+  --skeleton-border-radius-full: var(--cs-border-radius-full);
+  --skeleton-transition: var(--cs-transitions-all);
+}
+
+.skeleton__base {
+  background-color: var(--skeleton-color);
+  border-radius: var(--skeleton-border-radius);
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Skeleton variants */
+.skeleton__base--rectangular {
+  border-radius: var(--skeleton-border-radius);
+}
+
+.skeleton__base--rounded {
+  border-radius: var(--skeleton-border-radius-rounded);
+}
+
+.skeleton__base--circular {
+  border-radius: var(--skeleton-border-radius-full);
+}
+
+.skeleton__base--text {
+  border-radius: var(--skeleton-border-radius);
+}
+
+/* Skeleton sizes */
+.skeleton__base--sm {
+  font-size: var(--cs-fonts-sizes-sm);
+}
+
+.skeleton__base--md {
+  font-size: var(--cs-fonts-sizes-base);
+}
+
+.skeleton__base--lg {
+  font-size: var(--cs-fonts-sizes-lg);
+}
+
+.skeleton__base--xl {
+  font-size: var(--cs-fonts-sizes-xl);
+}
+
+/* ============================================================================ */
+/* SKELETON ANIMATIONS */
+/* ============================================================================ */
+
+.skeleton__base--pulse {
+  animation: skeleton-pulse var(--cs-transitions-duration-slow) ease-in-out infinite;
+}
+
+.skeleton__base--wave {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-bg-light) 0%,
+    var(--skeleton-bg-dark) 50%,
+    var(--skeleton-bg-light) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-wave var(--cs-transitions-durations-slow) linear infinite;
+}
+
+.skeleton__base--shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-bg-light) 25%,
+    var(--skeleton-bg-dark) 50%,
+    var(--skeleton-bg-light) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer var(--cs-transitions-duration-slow) ease-in-out infinite;
+}
+
+.skeleton__base--none {
+  animation: none;
+}
+
+/* ============================================================================ */
+/* SKELETON TEXT */
+/* ============================================================================ */
+
+.skeleton__text {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.skeleton__text-line {
+  background-color: var(--skeleton-color);
+  border-radius: var(--skeleton-border-radius);
+  width: 100%;
+}
+
+.skeleton__text-line:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-2);
+}
+
+.skeleton__text-line--last {
+  width: var(--cs-percentage-75);
+}
+
+/* Text line sizes */
+.skeleton__text-line--sm {
+  height: var(--cs-spacing-scale-3-5);
+}
+
+.skeleton__text-line--md {
+  height: var(--cs-spacing-scale-4);
+}
+
+.skeleton__text-line--lg {
+  height: var(--cs-spacing-scale-5);
+}
+
+/* Text spacing */
+.skeleton__text--spacing-1 .skeleton__text-line:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-1);
+}
+
+.skeleton__text--spacing-2 .skeleton__text-line:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-2);
+}
+
+.skeleton__text--spacing-3 .skeleton__text-line:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-3);
+}
+
+.skeleton__text--spacing-4 .skeleton__text-line:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-4);
+}
+
+/* ============================================================================ */
+/* SKELETON AVATAR */
+/* ============================================================================ */
+
+.skeleton__avatar {
+  flex-shrink: 0;
+  background-color: var(--skeleton-color);
+}
+
+/* Avatar sizes */
+.skeleton__avatar--sm {
+  width: var(--cs-spacing-scale-8);
+  height: var(--cs-spacing-scale-8);
+}
+
+.skeleton__avatar--md {
+  width: var(--cs-spacing-scale-10);
+  height: var(--cs-spacing-scale-10);
+}
+
+.skeleton__avatar--lg {
+  width: var(--cs-spacing-scale-12);
+  height: var(--cs-spacing-scale-12);
+}
+
+.skeleton__avatar--xl {
+  width: var(--cs-spacing-scale-16);
+  height: var(--cs-spacing-scale-16);
+}
+
+/* Avatar shapes */
+.skeleton__avatar--circular {
+  border-radius: var(--skeleton-border-radius-full);
+}
+
+.skeleton__avatar--square {
+  border-radius: var(--skeleton-border-radius);
+}
+
+.skeleton__avatar--rounded {
+  border-radius: var(--skeleton-border-radius-rounded);
+}
+
+/* ============================================================================ */
+/* SKELETON BUTTON */
+/* ============================================================================ */
+
+.skeleton__button {
+  background-color: var(--skeleton-color);
+  border-radius: var(--skeleton-border-radius);
+  display: inline-block;
+}
+
+/* Button sizes */
+.skeleton__button--sm {
+  height: var(--cs-spacing-scale-8);
+  padding: 0 var(--cs-spacing-scale-3);
+  min-width: var(--cs-spacing-scale-16);
+}
+
+.skeleton__button--md {
+  height: var(--cs-spacing-scale-10);
+  padding: 0 var(--cs-spacing-scale-4);
+  min-width: var(--cs-spacing-scale-20);
+}
+
+.skeleton__button--lg {
+  height: var(--cs-spacing-scale-12);
+  padding: 0 var(--cs-spacing-scale-6);
+  min-width: var(--cs-spacing-scale-24);
+}
+
+/* Button variants */
+.skeleton__button--contained {
+  border-radius: var(--skeleton-border-radius);
+}
+
+.skeleton__button--outlined {
+  border: var(--cs-border-width-normal) solid var(--skeleton-color);
+  background-color: transparent;
+}
+
+.skeleton__button--text {
+  background-color: var(--skeleton-bg-light);
+  border-radius: var(--skeleton-border-radius);
+}
+
+.skeleton__button--full-width {
+  width: var(--cs-percentage-full);
+}
+
+/* ============================================================================ */
+/* SKELETON CONTAINER */
+/* ============================================================================ */
+
+.skeleton__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.skeleton__container--spacing-1 > *:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-1);
+}
+
+.skeleton__container--spacing-2 > *:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-2);
+}
+
+.skeleton__container--spacing-3 > *:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-3);
+}
+
+.skeleton__container--spacing-4 > *:not(:last-child) {
+  margin-bottom: var(--cs-spacing-scale-4);
+}
+
+/* ============================================================================ */
+/* KEYFRAME ANIMATIONS */
+/* ============================================================================ */
+
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--cs-opacity-50);
+  }
+}
+
+@keyframes skeleton-wave {
+  0% {
+    background-position: calc(-1 * var(--cs-percentage-200)) 0;
+  }
+  100% {
+    background-position: var(--cs-percentage-200) 0;
+  }
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: calc(-1 * var(--cs-percentage-200)) 0;
+  }
+  100% {
+    background-position: var(--cs-percentage-200) 0;
+  }
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .skeleton__button--lg {
+    height: var(--cs-spacing-scale-10);
+    padding: 0 var(--cs-spacing-scale-4);
+  }
+
+  .skeleton__avatar--xl {
+    width: var(--cs-spacing-scale-12);
+    height: var(--cs-spacing-scale-12);
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.skeleton__base[aria-busy="true"] {
+  pointer-events: none;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .skeleton__base,
+  .skeleton__text-line,
+  .skeleton__avatar,
+  .skeleton__button {
+    border: var(--cs-border-width-normal) solid;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton__base--pulse,
+  .skeleton__base--wave,
+  .skeleton__base--shimmer {
+    animation: none;
+  }
+}