@qwickapps/react-framework 1.3.0

package/src/components/pages/Page.css

@@ -0,0 +1,460 @@
+/**
+ * Page Component Styles
+ * 
+ * Styles for the main page component with various layout options
+ * and responsive behavior.
+ */
+
+.page {
+  --page-padding-none: 0;
+  --page-padding-small: 1rem;
+  --page-padding-medium: 1.5rem;
+  --page-padding-large: 2rem;
+  
+  min-height: 100%;
+  width: 100%;
+}
+
+/* =================== PAGE VARIANTS =================== */
+
+.page-variant-default {
+  /* Standard page layout */
+}
+
+.page-variant-centered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.page-variant-narrow {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.page-variant-wide {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.page-variant-fullwidth {
+  max-width: none;
+  width: 100%;
+}
+
+/* =================== PADDING =================== */
+
+.page-padding-none {
+  padding: var(--page-padding-none);
+}
+
+.page-padding-small {
+  padding: var(--page-padding-small);
+}
+
+.page-padding-medium {
+  padding: var(--page-padding-medium);
+}
+
+.page-padding-large {
+  padding: var(--page-padding-large);
+}
+
+/* =================== BACKGROUND =================== */
+
+.page-background-default {
+  background: transparent;
+}
+
+.page-background-surface {
+  background: var(--theme-surface);
+}
+
+.page-background-alternate {
+  background: var(--theme-surface-variant);
+}
+
+/* =================== MAX WIDTH =================== */
+
+.page-max-width-small {
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page-max-width-medium {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page-max-width-large {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page-max-width-extra-large {
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page-max-width-none {
+  max-width: none;
+}
+
+/* =================== PAGE HEADER & FOOTER =================== */
+
+.page-header {
+  margin-bottom: 1.5rem;
+}
+
+.page-footer {
+  margin-top: 1.5rem;
+}
+
+.page-title {
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 0;
+  color: var(--theme-on-background);
+  flex: 1;
+  transition: font-size 0.3s ease, font-weight 0.3s ease, margin 0.3s ease;
+}
+
+/* Title shrinking on scroll */
+.page-title-collapsed .page-title {
+  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.page-title-collapsed .page-header {
+  margin-bottom: 1rem;
+}
+
+.page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+/* =================== PAGE CONTENT =================== */
+
+.page-content {
+  color: var(--theme-on-background);
+  line-height: 1.6;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--page-header-height, 200px));
+}
+
+/* =================== LOADING STATE =================== */
+
+.page-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  text-align: center;
+  color: var(--theme-on-background);
+  gap: 1rem;
+}
+
+.loading-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--theme-outline-variant);
+  border-top: 3px solid var(--theme-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Loading Bar Variants */
+.page-loading-bar {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: var(--theme-outline-variant);
+  overflow: hidden;
+}
+
+.page-loading-bar-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.page-loading-bar-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.loading-bar-progress {
+  height: 100%;
+  background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
+  width: 30%;
+  animation: loading-bar-slide 2s ease-in-out infinite;
+}
+
+@keyframes loading-bar-slide {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(350%); }
+  100% { transform: translateX(-100%); }
+}
+
+/* Loading Dots */
+.page-loading-dots {
+  min-height: 120px;
+}
+
+.loading-dots {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.loading-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--theme-primary);
+  animation: loading-dots-bounce 1.4s ease-in-out infinite both;
+}
+
+.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
+.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes loading-dots-bounce {
+  0%, 80%, 100% { 
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% { 
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.loading-message {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+  color: var(--theme-on-background);
+  opacity: 0.8;
+}
+
+/* =================== MESSAGE STATE =================== */
+
+.page-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  margin: 1rem 0;
+  border-radius: var(--theme-border-radius, 8px);
+  border-left: 4px solid;
+  color: var(--theme-on-background);
+  background: var(--theme-surface-variant);
+}
+
+.page-message-error {
+  border-left-color: var(--theme-error, #dc2626);
+  background: rgba(220, 38, 38, 0.05);
+  color: var(--theme-error, #dc2626);
+}
+
+.page-message-warning {
+  border-left-color: var(--theme-warning, #f59e0b);
+  background: rgba(245, 158, 11, 0.05);
+  color: var(--theme-warning, #f59e0b);
+}
+
+.page-message-success {
+  border-left-color: var(--theme-success, #10b981);
+  background: rgba(16, 185, 129, 0.05);
+  color: var(--theme-success, #10b981);
+}
+
+.page-message-info {
+  border-left-color: var(--theme-info, #3b82f6);
+  background: rgba(59, 130, 246, 0.05);
+  color: var(--theme-info, #3b82f6);
+}
+
+.page-message-loading {
+  border-left-color: var(--theme-primary);
+  background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.05);
+  color: var(--theme-primary);
+}
+
+.message-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.message-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.message-content p {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.message-content h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+/* Message variants for different contexts */
+.page-message.message-compact {
+  padding: 0.75rem 1rem;
+  margin: 0.5rem 0;
+}
+
+.page-message.message-prominent {
+  padding: 1.5rem 2rem;
+  margin: 1.5rem 0;
+  text-align: center;
+  flex-direction: column;
+  min-height: 200px;
+  justify-content: center;
+}
+
+.page-message.message-prominent .message-icon {
+  font-size: 3rem;
+  margin: 0 auto 1rem;
+}
+
+.page-message.message-prominent .message-content {
+  text-align: center;
+}
+
+/* =================== RESPONSIVE ADJUSTMENTS =================== */
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .page-title {
+    font-size: clamp(1.5rem, 6vw, 2rem);
+  }
+  
+  .page-header-actions {
+    justify-content: flex-start;
+  }
+  
+  .page-padding-medium {
+    padding: var(--page-padding-small);
+  }
+  
+  .page-padding-large {
+    padding: var(--page-padding-medium);
+  }
+  
+  /* Adjust max widths on mobile */
+  .page-max-width-small,
+  .page-max-width-medium,
+  .page-max-width-large,
+  .page-max-width-extra-large {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    max-width: calc(100% - 2rem);
+  }
+}
+
+@media (max-width: 480px) {
+  .page-header-actions {
+    width: 100%;
+    justify-content: stretch;
+    
+    > * {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+  
+  .retry-button {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+/* =================== HIGH CONTRAST MODE =================== */
+
+@media (prefers-contrast: high) {
+  .page-title {
+    font-weight: 700;
+  }
+  
+  .spinner {
+    border-width: 4px;
+  }
+  
+  .retry-button {
+    border: 2px solid var(--theme-on-primary);
+  }
+}
+
+/* =================== REDUCED MOTION =================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+  
+  .retry-button {
+    transition: none;
+  }
+  
+  .retry-button:hover {
+    transform: none;
+  }
+}
+
+/* =================== PRINT STYLES =================== */
+
+@media print {
+  .page-header-actions {
+    display: none;
+  }
+  
+  .page-loading,
+  .page-error {
+    display: none;
+  }
+  
+  .page-title {
+    color: black;
+    font-size: 1.5rem;
+  }
+  
+  .page-content {
+    color: black;
+  }
+}