@rhavenside/baseline-ui 1.0.23 → 1.0.25

package/src/components/_sidebar.scss

@@ -144,6 +144,11 @@
       left: 0;
       height: 100vh;
       min-height: auto;
+      
+      // Hide close button on desktop for persistent sidebars
+      .bl-sidebar-close {
+        display: none;
+      }
     }
     
     // On mobile, behave like normal sidebar (with backdrop)
@@ -154,6 +159,11 @@
       &.bl-sidebar-open {
         transform: translateX(0);
       }
+      
+      // Show close button on mobile
+      .bl-sidebar-close {
+        display: block;
+      }
     }
   }
 }
@@ -263,6 +273,14 @@
   }
 }
 
+// Sidebar Content (default padding)
+.bl-sidebar-content {
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+}
+
 // Sidebar Navigation
 .bl-sidebar-nav {
   flex: 1;

package/src/components/_spinner.scss

@@ -120,3 +120,48 @@
   height: 4rem;
   border-width: var(--border-width-base);
 }
+
+// Mobile/Tablet Optimizations
+@media (max-width: 575.98px) {
+  .bl-spinner {
+    width: 2.5rem; // Größer auf Mobile für bessere Sichtbarkeit
+    height: 2.5rem;
+  }
+
+  .bl-spinner-sm {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .bl-spinner-lg {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+
+  .bl-spinner-xl {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-spinner {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .bl-spinner-sm {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .bl-spinner-lg {
+    width: 3.25rem;
+    height: 3.25rem;
+  }
+
+  .bl-spinner-xl {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+}

package/src/components/_table.scss

@@ -180,3 +180,45 @@
     }
   }
 }
+
+// Mobile/Tablet Optimizations
+@media (max-width: 575.98px) {
+  .bl-table {
+    font-size: var(--font-size-sm); // Kleinere Schrift auf Mobile für mehr Platz
+  }
+
+  .bl-table > :not(caption) > * > * {
+    padding: var(--spacing-sm) var(--spacing-xs); // Kompakteres Padding
+    font-size: var(--font-size-xs);
+  }
+
+  .bl-table-head {
+    font-size: var(--font-size-sm);
+  }
+
+  .bl-table-sm > :not(caption) > * > * {
+    padding: var(--spacing-xs);
+    font-size: 0.625rem; // 10px
+  }
+
+  .bl-table-lg > :not(caption) > * > * {
+    padding: var(--spacing-md) var(--spacing-sm);
+    font-size: var(--font-size-sm);
+  }
+
+  .bl-table-caption {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) 0;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-table > :not(caption) > * > * {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+
+  .bl-table-head {
+    font-size: var(--font-size-base);
+  }
+}

package/src/components/_tooltip.scss

@@ -132,3 +132,27 @@
     }
   }
 }
+
+// Mobile/Tablet Optimizations
+@media (max-width: 575.98px) {
+  .bl-tooltip-content {
+    max-width: 90vw; // Größer auf Mobile
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm); // Größer für bessere Lesbarkeit
+  }
+
+  .bl-tooltip-trigger {
+    min-width: 2.75rem; // Touch-Target
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-tooltip-content {
+    max-width: 15rem; // 240px auf Tablet
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+}

package/src/layout/_container.scss

@@ -43,3 +43,13 @@
   padding-right: var(--spacing-md);
 }
 
+// Container with sidebar margin (for documentation layouts)
+.bl-container-sidebar {
+  margin-left: 17.5rem; // 280px - sidebar width
+  
+  @media (max-width: 768px) {
+    margin-left: 0;
+    padding: var(--spacing-md);
+  }
+}
+