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

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

@@ -0,0 +1,435 @@
+/* Progress Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* PROGRESS CONTAINER */
+/* ============================================================================ */
+
+.progress {
+  --progress-border-radius: var(--cs-border-radius-full);
+  --progress-transition: var(--cs-transitions-properties-all);
+  --progress-track-color: var(--cs-colors-surface-divider);
+  --progress-color: var(--cs-colors-primary-500);
+}
+
+.progress__container {
+  position: relative;
+  width: 100%;
+  background-color: var(--progress-track-color);
+  border-radius: var(--progress-border-radius);
+  overflow: hidden;
+}
+
+/* Progress container sizes */
+.progress__container--xs {
+  height: var(--cs-spacing-scale-1);
+}
+
+.progress__container--sm {
+  height: var(--cs-spacing-scale-2);
+}
+
+.progress__container--md {
+  height: var(--cs-spacing-scale-3);
+}
+
+.progress__container--lg {
+  height: var(--cs-spacing-scale-4);
+}
+
+.progress__container--xl {
+  height: var(--cs-spacing-scale-6);
+}
+
+/* Progress variants */
+.progress__container--indeterminate {
+  background: linear-gradient(
+    90deg,
+    var(--progress-track-color) 25%,
+    transparent 25%,
+    transparent 50%,
+    var(--progress-track-color) 50%,
+    var(--progress-track-color) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: var(--cs-spacing-scale-10) var(--cs-spacing-scale-10);
+  animation: progress-indeterminate var(--cs-transitions-durations-slower) linear infinite;
+}
+
+/* ============================================================================ */
+/* PROGRESS BAR */
+/* ============================================================================ */
+
+.progress__bar {
+  height: 100%;
+  background-color: var(--progress-color);
+  border-radius: var(--progress-border-radius);
+  transition: var(--progress-transition);
+  position: relative;
+  overflow: hidden;
+}
+
+.progress__bar--animated {
+  transition: width var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in-out);
+}
+
+.progress__bar--striped {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: var(--cs-spacing-scale-4) var(--cs-spacing-scale-4);
+}
+
+.progress__bar--striped.progress__bar--animated {
+  animation: progress-stripes var(--cs-transitions-durations-slow) linear infinite;
+}
+
+/* Progress bar colors */
+.progress__bar--success {
+  background-color: var(--cs-colors-semantic-success-500);
+}
+
+.progress__bar--warning {
+  background-color: var(--cs-colors-semantic-warning-500);
+}
+
+.progress__bar--error {
+  background-color: var(--cs-colors-semantic-error-500);
+}
+
+.progress__bar--info {
+  background-color: var(--cs-colors-primary-500);
+}
+
+/* ============================================================================ */
+/* PROGRESS LABEL */
+/* ============================================================================ */
+
+.progress__label-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--cs-spacing-scale-2);
+}
+
+.progress__label {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+}
+
+.progress__value {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--cs-colors-text-secondary);
+}
+
+/* ============================================================================ */
+/* CIRCULAR PROGRESS */
+/* ============================================================================ */
+
+.progress__circular {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress__circle {
+  transform: rotate(-90deg);
+}
+
+.progress__circle-track {
+  fill: none;
+  stroke: var(--progress-track-color);
+  stroke-width: var(--cs-border-width-thick);
+}
+
+.progress__circle-progress {
+  fill: none;
+  stroke: var(--progress-color);
+  stroke-width: var(--cs-border-width-thick);
+  stroke-linecap: round;
+  transition: var(--progress-transition);
+}
+
+.progress__circle-progress--animated {
+  transition: stroke-dashoffset var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in-out);
+}
+
+.progress__circle-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--cs-colors-text-primary);
+}
+
+/* Circular progress sizes */
+.progress__circular--xs {
+  width: var(--cs-spacing-scale-12);
+  height: var(--cs-spacing-scale-12);
+}
+
+.progress__circular--xs .progress__circle-label {
+  font-size: var(--cs-fonts-primary-sizes-xs);
+}
+
+.progress__circular--sm {
+  width: var(--cs-spacing-scale-16);
+  height: var(--cs-spacing-scale-16);
+}
+
+.progress__circular--md {
+  width: var(--cs-spacing-scale-20);
+  height: var(--cs-spacing-scale-20);
+}
+
+.progress__circular--lg {
+  width: var(--cs-spacing-scale-24);
+  height: var(--cs-spacing-scale-24);
+}
+
+.progress__circular--lg .progress__circle-label {
+  font-size: var(--cs-fonts-primary-sizes-base);
+}
+
+.progress__circular--xl {
+  width: var(--cs-spacing-scale-32);
+  height: var(--cs-spacing-scale-32);
+}
+
+.progress__circular--xl .progress__circle-label {
+  font-size: var(--cs-fonts-primary-sizes-lg);
+}
+
+/* ============================================================================ */
+/* STEPPED PROGRESS */
+/* ============================================================================ */
+
+.progress__steps {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.progress__step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+.progress__step:not(:last-child) {
+  margin-right: var(--cs-spacing-scale-2);
+}
+
+.progress__step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cs-spacing-scale-8);
+  height: var(--cs-spacing-scale-8);
+  border-radius: var(--cs-border-radius-full);
+  background-color: var(--cs-colors-surface-divider);
+  color: var(--cs-colors-text-secondary);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  transition: var(--progress-transition);
+  position: relative;
+  z-index: 2;
+}
+
+.progress__step-indicator--active {
+  background-color: var(--cs-colors-primary-500);
+  color: var(--cs-colors-surface-background);
+}
+
+.progress__step-indicator--completed {
+  background-color: var(--cs-colors-semantic-success-500);
+  color: var(--cs-colors-surface-background);
+}
+
+.progress__step-indicator--error {
+  background-color: var(--cs-colors-semantic-error-500);
+  color: var(--cs-colors-surface-background);
+}
+
+.progress__step-indicator--pending {
+  background-color: var(--cs-colors-surface-divider);
+  color: var(--cs-colors-text-secondary);
+}
+
+.progress__step-icon {
+  width: var(--cs-spacing-scale-4);
+  height: var(--cs-spacing-scale-4);
+}
+
+.progress__step-connector {
+  position: absolute;
+  top: var(--cs-spacing-scale-4);
+  left: 50%;
+  right: -50%;
+  height: var(--cs-border-width-thick);
+  background-color: var(--cs-colors-surface-divider);
+  z-index: 1;
+}
+
+.progress__step-connector--completed {
+  background-color: var(--cs-colors-semantic-success-500);
+}
+
+.progress__step-label {
+  margin-top: var(--cs-spacing-scale-2);
+  text-align: center;
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-colors-text-secondary);
+}
+
+.progress__step-label--active {
+  color: var(--cs-colors-primary-500);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.progress__step-label--completed {
+  color: var(--cs-colors-semantic-success-500);
+}
+
+.progress__step-label--error {
+  color: var(--cs-colors-semantic-error-500);
+}
+
+.progress__step-label--pending {
+  color: var(--cs-colors-text-secondary);
+}
+
+.progress__step-title {
+  font-weight: var(--cs-fonts-primary-weights-medium);
+  margin-bottom: var(--cs-spacing-scale-0-5);
+}
+
+.progress__step-description {
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  color: var(--cs-colors-text-muted);
+  max-width: var(--cs-spacing-scale-20);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================================================ */
+/* ANIMATIONS */
+/* ============================================================================ */
+
+@keyframes progress-stripes {
+  from {
+    background-position: var(--cs-spacing-scale-4) 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: var(--cs-spacing-scale-10) 0;
+  }
+}
+
+@keyframes progress-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.progress__bar--pulse {
+  animation: progress-pulse var(--cs-transitions-durations-slower) var(--cs-transitions-easings-ease-in-out) infinite;
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 640px) {
+  .progress__steps {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .progress__step {
+    flex-direction: column;
+    margin-right: 0;
+    margin-bottom: var(--cs-spacing-scale-4);
+  }
+
+  .progress__step:not(:last-child) {
+    margin-right: 0;
+  }
+
+  .progress__step-connector {
+    height: var(--cs-spacing-scale-4);
+    width: var(--cs-border-width-thick);
+    margin: var(--cs-spacing-scale-2) auto;
+  }
+
+  .progress__step-label {
+    margin-top: var(--cs-spacing-scale-1);
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.progress__container:focus-within {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .progress__container {
+    border: var(--cs-border-width-normal) solid;
+  }
+
+  .progress__bar {
+    border: var(--cs-border-width-normal) solid;
+  }
+
+  .progress__step-indicator {
+    border: var(--cs-border-width-thick) solid;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .progress__bar,
+  .progress__circle-progress,
+  .progress__step-indicator {
+    transition: none;
+  }
+
+  .progress__bar--striped.progress__bar--animated,
+  .progress__container--indeterminate,
+  .progress__bar--pulse {
+    animation: none;
+  }
+}