Merge pull request #403 from conversionxl/anoblet/feat/action-bar

conversionxl · Mar 27, 2024 · 5732746 · 5732746
2 parents f5139fb + c64af93
commit 5732746
Showing 1 changed file with 21 additions and 9 deletions.
diff --git a/packages/cxl-ui/scss/global/cxl-app-layout.scss b/packages/cxl-ui/scss/global/cxl-app-layout.scss
@@ -97,17 +97,30 @@ cxl-app-layout {
   /**
    * Action bar.
    */
-  [slot="action-bar"] > * {
-    margin-left: var(--lumo-space-xs);
-  }
+  [slot="action-bar"] {
+    > * {
+      margin-left: var(--lumo-space-xs);
 
-  [slot="action-bar"] > *:first-child {
-    flex: 1;
-    margin-left: unset;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    > .mobile,
+    > vaadin-button {
+      flex: 1;
+    }
+
+    > .mobile {
+      text-align: center;
+    }
   }
 
-  &[wide] [slot="action-bar"] > *:first-child {
-    flex: unset;
+  &[wide] [slot="action-bar"] {
+    > .mobile,
+    > vaadin-button {
+      flex: initial;
+    }
   }
 
   /**
@@ -126,5 +139,4 @@ cxl-app-layout {
       }
     }
   }
-
 }