voa-ds-core 1.0.11 → 1.0.12

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

@@ -1,566 +0,0 @@
-/* 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;
-  }
-}