voa-ds-core 1.0.8 → 1.0.10

package/dist/voa/styles/external/saas-dashboard.css

@@ -0,0 +1,566 @@
+/* SaaS Dashboard Story Styles */
+/* Layout and Structure Only - No Colors, Fonts, or Visual Effects */
+/* This CSS file follows the Voa Design System principle of "structure-only" styling */
+/* All visual properties (colors, fonts, borders) are applied via component external CSS */
+
+.saas-dashboard {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+  gap: 0;
+}
+
+/* Header Styles */
+.dashboard-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 16px 24px;
+  border-bottom: 1px solid;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.dashboard-header.compact {
+  padding: 12px 16px;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  flex: 1;
+}
+
+.app-logo {
+  margin: 0;
+  white-space: nowrap;
+}
+
+.breadcrumbs-nav {
+  display: flex;
+  gap: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.search-box {
+  min-width: 300px;
+}
+
+.search-box voa-input {
+  width: 100%;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.icon-button voa-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+}
+
+.user-menu {
+  display: flex;
+  gap: 8px;
+}
+
+.header-tabs {
+  display: flex;
+  gap: 0;
+  margin-top: 16px;
+  border-top: 1px solid;
+  padding-top: 0;
+}
+
+.header-tabs.compact {
+  display: none;
+}
+
+/* Main Content */
+.dashboard-main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.dashboard-main.compact {
+  padding: 16px;
+}
+
+/* Filters Section */
+.filters-section {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 200px;
+}
+
+.filter-group label {
+  display: block;
+}
+
+.filter-group voa-select,
+.filter-group voa-input {
+  width: 100%;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* Stats Section */
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.stats-section.compact {
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+.stat-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 16px;
+  border: 1px solid;
+  gap: 12px;
+  min-height: 120px;
+}
+
+.stat-card.compact {
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+  min-height: auto;
+  gap: 8px;
+}
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stat-content h3 {
+  margin: 0;
+}
+
+.stat-value {
+  margin: 0;
+}
+
+.stat-trend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-trend.positive {
+  /* Color applied via external CSS */
+}
+
+.stat-trend.negative {
+  /* Color applied via external CSS */
+}
+
+/* Table Section */
+.table-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.table-header h2 {
+  margin: 0;
+}
+
+.table-wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+  border: 1px solid;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table thead {
+  position: sticky;
+  top: 0;
+}
+
+.data-table th {
+  padding: 12px 16px;
+  border-bottom: 1px solid;
+}
+
+.data-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid;
+}
+
+.data-table tbody tr {
+  /* Hover styling applied via external CSS */
+}
+
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.project-name {
+  /* Font weight applied via external CSS */
+}
+
+.progress-bar {
+  display: flex;
+  height: 4px;
+  overflow: hidden;
+  min-width: 100px;
+  border: 1px solid;
+}
+
+.progress-fill {
+  /* Background gradient applied via external CSS */
+  flex: 1;
+}
+
+.owner-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-top: 1px solid;
+}
+
+.results-info {
+  /* Font size applied via external CSS */
+}
+
+/* Settings Section */
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid;
+}
+
+.settings-section h2 {
+  margin: 0;
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.setting-item label {
+  margin: 0;
+}
+
+/* Preferences Section */
+.preferences-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid;
+}
+
+.preferences-section h2 {
+  margin: 0;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.radio-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.radio-item span {
+  /* Font size applied via external CSS */
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.checkbox-item span {
+  /* Font size applied via external CSS */
+}
+
+/* Form Section */
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  border: 1px solid;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  margin: 0;
+}
+
+.form-group voa-input,
+.form-group voa-select,
+.form-group voa-text-area {
+  width: 100%;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+/* Quick List */
+.quick-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid;
+  gap: 12px;
+}
+
+.item-name {
+  /* Font weight applied via external CSS */
+}
+
+/* Footer */
+.dashboard-footer {
+  display: flex;
+  justify-content: center;
+  padding: 24px;
+  border-top: 1px solid;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+}
+
+.footer-content p {
+  margin: 0;
+}
+
+.footer-links {
+  display: flex;
+  gap: 24px;
+}
+
+.footer-links a {
+  /* Text decoration and font size applied via external CSS */
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .header-left {
+    gap: 16px;
+  }
+
+  .stats-section {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .search-box {
+    min-width: 200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-main {
+    padding: 12px;
+    gap: 16px;
+  }
+
+  .header-top {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .header-right {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .search-box {
+    width: 100%;
+    min-width: auto;
+  }
+
+  .filter-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .stats-section {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  .footer-links {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard-header {
+    padding: 8px 12px;
+  }
+
+  .dashboard-main {
+    padding: 8px;
+  }
+
+  .app-logo {
+    white-space: nowrap;
+  }
+
+  .header-left {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .breadcrumbs-nav {
+    display: none;
+  }
+
+  .data-table th,
+  .data-table td {
+    padding: 8px;
+  }
+}