Merge pull request #47 from jerone/issues/multi-row-tool-bar

🐛 Buttons overflow/wrap. Fixes #38
atom-community · May 26, 2015 · d0a8cd8 · d0a8cd8
2 parents dcbfa75 + 9a04537
commit d0a8cd8
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/styles/tool-bar.less b/styles/tool-bar.less
@@ -8,13 +8,15 @@
   background-color: @base-background-color;
   border: 1px solid @base-border-color;
   color: @text-color;
+  display: flex;
+  justify-content: flex-start;
 
   button.tool-bar-btn {
     background-color: @base-background-color;
     background-image: inherit;
     border-color: @base-background-color;
     cursor: pointer;
-    float: left;
+    flex: 0 0 auto;
     margin: @button-margin-size;
     padding: 0;
 
@@ -23,8 +25,8 @@
     }
     &:focus,
     &:hover {
-      outline: none;
       border-color: @button-border-color;
+      outline: none;
     }
   }
 
@@ -39,16 +41,12 @@
     border: 0 none;
     border-left: @button-border-size solid @button-background-color;
     border-right: @button-border-size solid @button-border-color;
-    display: block;
-    float: left;
     margin: @button-margin-size + 3 0;
   }
   &.tool-bar-vertical .tool-bar-spacer {
     border: 0 none;
     border-bottom: @button-border-size solid @button-background-color;
     border-top: @button-border-size solid @button-border-color;
-    display: block;
-    float: left;
     margin: 0 @button-margin-size + 3;
   }
 
@@ -66,12 +64,17 @@
     line-height: @size;
 
     &.tool-bar-horizontal {
-      height: @size + (@button-border-size * 3)+ (@button-margin-size * 2);
+      flex-direction: row;
       width: 100%;
+      flex-wrap: wrap;
     }
     &.tool-bar-vertical {
+      flex-direction: column;
       height: 100%;
-      width: @size + (@button-border-size * 3) + (@button-margin-size * 2);
+      overflow-x: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
 
     .tool-bar-btn {