zenkit-css 1.0.0

package/scss/components/_result.scss

@@ -0,0 +1,383 @@
+// ========================================
+// ZenKit - Result / Status Pages
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Base Result
+// ----------------------------------------
+.result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 3rem 1.5rem;
+}
+
+// ----------------------------------------
+// Result Icon
+// ----------------------------------------
+.result-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  margin-bottom: 1.5rem;
+  border-radius: 50%;
+
+  svg {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+// Result Icon Colors
+.result-icon-success {
+  color: $success;
+  background-color: $success-light;
+}
+
+.result-icon-error,
+.result-icon-danger {
+  color: $danger;
+  background-color: $danger-light;
+}
+
+.result-icon-warning {
+  color: $warning-dark;
+  background-color: $warning-light;
+}
+
+.result-icon-info {
+  color: $info;
+  background-color: $info-light;
+}
+
+.result-icon-primary {
+  color: var(--primary);
+  background-color: var(--primary-50);
+}
+
+// ----------------------------------------
+// Result Title
+// ----------------------------------------
+.result-title {
+  font-size: var(--text-2xl);
+  font-weight: $font-weight-bold;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+
+// ----------------------------------------
+// Result Subtitle
+// ----------------------------------------
+.result-subtitle {
+  font-size: var(--text-base);
+  color: var(--text-muted);
+  max-width: 480px;
+  margin-bottom: 1.5rem;
+  line-height: $line-height-relaxed;
+}
+
+// ----------------------------------------
+// Result Actions
+// ----------------------------------------
+.result-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+// ----------------------------------------
+// Result Extra Content
+// ----------------------------------------
+.result-extra {
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: $border-width solid var(--border);
+  width: 100%;
+  max-width: 600px;
+}
+
+// ----------------------------------------
+// Result Status Variants
+// ----------------------------------------
+.result-success {
+  .result-title {
+    color: $success-dark;
+  }
+}
+
+.result-error {
+  .result-title {
+    color: $danger-dark;
+  }
+}
+
+.result-warning {
+  .result-title {
+    color: $warning-dark;
+  }
+}
+
+.result-info {
+  .result-title {
+    color: $info-dark;
+  }
+}
+
+// ----------------------------------------
+// Result Sizes
+// ----------------------------------------
+.result-sm {
+  padding: 2rem 1rem;
+
+  .result-icon {
+    width: 3.5rem;
+    height: 3.5rem;
+    margin-bottom: 1rem;
+
+    svg {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+
+  .result-title {
+    font-size: var(--text-lg);
+  }
+
+  .result-subtitle {
+    font-size: var(--text-sm);
+    margin-bottom: 1rem;
+  }
+}
+
+.result-lg {
+  padding: 4rem 2rem;
+
+  .result-icon {
+    width: 7rem;
+    height: 7rem;
+    margin-bottom: 2rem;
+
+    svg {
+      width: 4rem;
+      height: 4rem;
+    }
+  }
+
+  .result-title {
+    font-size: var(--text-3xl);
+  }
+
+  .result-subtitle {
+    font-size: var(--text-lg);
+    max-width: 560px;
+  }
+}
+
+// ----------------------------------------
+// Full Page Result
+// ----------------------------------------
+.result-fullpage {
+  min-height: 100vh;
+  padding: 2rem;
+
+  .result-icon {
+    width: 8rem;
+    height: 8rem;
+
+    svg {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
+
+  .result-title {
+    font-size: var(--text-4xl);
+  }
+
+  .result-subtitle {
+    font-size: var(--text-xl);
+    max-width: 640px;
+  }
+}
+
+// ----------------------------------------
+// Result with Image
+// ----------------------------------------
+.result-image {
+  max-width: 320px;
+  max-height: 240px;
+  margin-bottom: 2rem;
+
+  img,
+  svg {
+    width: 100%;
+    height: auto;
+  }
+}
+
+// ----------------------------------------
+// Common Result Types
+// ----------------------------------------
+
+// 404 Not Found
+.result-404 {
+  .result-code {
+    font-size: var(--text-5xl);
+    font-weight: $font-weight-bold;
+    color: var(--gray-300);
+    margin-bottom: 1rem;
+    line-height: 1;
+  }
+}
+
+// 403 Forbidden
+.result-403 {
+  .result-icon {
+    color: $warning-dark;
+    background-color: $warning-light;
+  }
+}
+
+// 500 Server Error
+.result-500 {
+  .result-icon {
+    color: $danger;
+    background-color: $danger-light;
+  }
+}
+
+// ----------------------------------------
+// Result Card
+// ----------------------------------------
+.result-card {
+  padding: 2rem;
+  background-color: var(--bg);
+  border: $border-width solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+}
+
+// ----------------------------------------
+// Inline Result (Compact)
+// ----------------------------------------
+.result-inline {
+  flex-direction: row;
+  text-align: left;
+  padding: 1.5rem;
+  gap: 1rem;
+
+  .result-icon {
+    margin-bottom: 0;
+    flex-shrink: 0;
+  }
+
+  .result-content {
+    flex: 1;
+  }
+
+  .result-subtitle {
+    margin-bottom: 0;
+  }
+
+  .result-actions {
+    flex-shrink: 0;
+    margin-top: 0;
+    justify-content: flex-end;
+  }
+}
+
+// ----------------------------------------
+// Result with Steps
+// ----------------------------------------
+.result-steps {
+  margin-top: 2rem;
+  width: 100%;
+  max-width: 480px;
+}
+
+.result-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  text-align: left;
+
+  &:not(:last-child) {
+    border-bottom: $border-width solid var(--border);
+  }
+}
+
+.result-step-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--text-xs);
+  font-weight: $font-weight-semibold;
+  color: var(--white);
+  background-color: var(--primary);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.result-step-content {
+  flex: 1;
+
+  .result-step-title {
+    font-size: var(--text-sm);
+    font-weight: $font-weight-medium;
+    color: var(--text);
+  }
+
+  .result-step-description {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    margin-top: 0.125rem;
+  }
+}
+
+// ----------------------------------------
+// Animated Result Icon
+// ----------------------------------------
+.result-icon-animated {
+  animation: result-icon-bounce 0.5s ease-out;
+}
+
+@keyframes result-icon-bounce {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Checkmark animation for success
+.result-icon-success.result-icon-animated svg {
+  animation: result-checkmark 0.4s ease-out 0.2s both;
+}
+
+@keyframes result-checkmark {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}