upgrade flex-grow defs to use the flex shorthand and define their fle…

…x-basis
elastic · Jun 4, 2014 · f618a6b · f618a6b
1 parent 9f032ce
commit f618a6b
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 11 deletions.
diff --git a/src/kibana/apps/dashboard/styles/main.css b/src/kibana/apps/dashboard/styles/main.css
@@ -119,6 +119,18 @@ dashboard-grid {
   justify-content: flex-start;
 }
 .gridster dashboard-panel .panel .panel-heading {
+  -webkit-flex-grow: 0;
+  -moz-flex-grow: 0;
+  -ms-flex-grow: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+  flex-shrink: 0;
+  -webkit-flex-basis: auto;
+  -moz-flex-basis: auto;
+  -ms-flex-basis: auto;
+  flex-basis: auto;
   min-height: 45px;
 }
 .gridster dashboard-panel .panel .panel-heading a {
@@ -135,6 +147,14 @@ dashboard-grid {
   -moz-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -moz-flex-shrink: 1;
+  -ms-flex-shrink: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 100%;
+  -moz-flex-basis: 100%;
+  -ms-flex-basis: 100%;
+  flex-basis: 100%;
   height: auto;
 }
 .dashboard-load {

diff --git a/src/kibana/apps/dashboard/styles/main.less b/src/kibana/apps/dashboard/styles/main.less
@@ -50,6 +50,7 @@ dashboard-grid {
       .justify-content(flex-start);
 
       .panel-heading {
+        .flex();
         min-height: 45px;
 
         a {
@@ -62,8 +63,9 @@ dashboard-grid {
           }
         }
       }
+
       visualize {
-        .flex-grow(1);
+        .flex(1, 1, 100%);
         height: auto;
       }
     }

diff --git a/src/kibana/apps/visualize/styles/main.css b/src/kibana/apps/visualize/styles/main.css
@@ -85,13 +85,32 @@
     justify-content: flex-start;
   }
   .vis-editor-content .vis-sidebar {
-    width: 300px;
+    -webkit-flex-grow: 0;
+    -moz-flex-grow: 0;
+    -ms-flex-grow: 0;
+    flex-grow: 0;
+    -webkit-flex-shrink: 0;
+    -moz-flex-shrink: 0;
+    -ms-flex-shrink: 0;
+    flex-shrink: 0;
+    -webkit-flex-basis: 300px;
+    -moz-flex-basis: 300px;
+    -ms-flex-basis: 300px;
+    flex-basis: 300px;
   }
   .vis-editor-content .vis-canvas {
     -webkit-flex-grow: 1;
     -moz-flex-grow: 1;
     -ms-flex-grow: 1;
     flex-grow: 1;
+    -webkit-flex-shrink: 1;
+    -moz-flex-shrink: 1;
+    -ms-flex-shrink: 1;
+    flex-shrink: 1;
+    -webkit-flex-basis: 100%;
+    -moz-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
   }
 }
 .vis-editor-content vis-config-editor {

diff --git a/src/kibana/apps/visualize/styles/main.less b/src/kibana/apps/visualize/styles/main.less
@@ -13,11 +13,11 @@
     .justify-content(flex-start);
 
     .vis-sidebar {
-      width: 300px;
+      .flex(0, 0, 300px);
     }
 
     .vis-canvas {
-      .flex-grow(1);
+      .flex(1, 1, 100%);
     }
   }
 }

diff --git a/src/kibana/apps/visualize/styles/visualization.css b/src/kibana/apps/visualize/styles/visualization.css
@@ -98,7 +98,18 @@ visualize .k4tip {
   white-space: pre-line;
 }
 visualize .visualize-show-table {
-  width: 100%;
+  -webkit-flex-grow: 0;
+  -moz-flex-grow: 0;
+  -ms-flex-grow: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+  flex-shrink: 0;
+  -webkit-flex-basis: auto;
+  -moz-flex-basis: auto;
+  -ms-flex-basis: auto;
+  flex-basis: auto;
   background-color: #ecf0f1;
   text-align: center;
 }
@@ -127,6 +138,18 @@ visualize .visualize-chart.only-table {
   display: none;
 }
 visualize .visualize-table {
+  -webkit-flex-grow: 0;
+  -moz-flex-grow: 0;
+  -ms-flex-grow: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+  flex-shrink: 0;
+  -webkit-flex-basis: auto;
+  -moz-flex-basis: auto;
+  -ms-flex-basis: auto;
+  flex-basis: auto;
   display: none;
   overflow: hidden;
 }

diff --git a/src/kibana/apps/visualize/styles/visualization.less b/src/kibana/apps/visualize/styles/visualization.less
@@ -27,7 +27,8 @@ visualize {
   }
 
   .visualize-show-table {
-    width: 100%;
+    .flex();
+
     background-color: @well-bg;
     text-align: center;
     &.active {
@@ -36,9 +37,7 @@ visualize {
   }
 
   .visualize-chart {
-    .flex-grow(1);
-    .flex-shrink(1);
-    .flex-basis(100%);
+    .flex(1, 1, 100%);
     overflow: hidden;
 
     &.table-visible {
@@ -51,6 +50,7 @@ visualize {
   }
 
   .visualize-table {
+    .flex();
     display: none;
     overflow: hidden;
 

diff --git a/src/kibana/styles/_mixins.less b/src/kibana/styles/_mixins.less
@@ -150,6 +150,11 @@
   -ms-flex-direction: @rule;
   flex-direction: @rule;
 }
+.flex (@grow: 0, @shrink: 0, @basis: auto) {
+  .flex-grow(@grow);
+  .flex-shrink(@shrink);
+  .flex-basis(@basis);
+}
 .flex-grow (@rule) {
   -webkit-flex-grow: @rule;
   -moz-flex-grow: @rule;

diff --git a/src/kibana/styles/_pagination.less b/src/kibana/styles/_pagination.less
@@ -8,7 +8,7 @@ paginate {
     padding: 5px;
 
     .paginate-other-pages {
-      .flex-grow(1);
+      .flex(1, 1, 100%);
       text-align: center;
 
       a {
@@ -30,6 +30,6 @@ paginate {
   }
 
   .paginate-content {
-    .flex-grow(1);
+    .flex(1, 1, auto);
   }
 }
diff --git a/src/kibana/styles/main.css b/src/kibana/styles/main.css
@@ -6983,6 +6983,14 @@ paginate paginate-controls .paginate-other-pages {
   -moz-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -moz-flex-shrink: 1;
+  -ms-flex-shrink: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 100%;
+  -moz-flex-basis: 100%;
+  -ms-flex-basis: 100%;
+  flex-basis: 100%;
   text-align: center;
 }
 paginate paginate-controls .paginate-other-pages a {
@@ -7003,6 +7011,14 @@ paginate .paginate-content {
   -moz-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -moz-flex-shrink: 1;
+  -ms-flex-shrink: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -moz-flex-basis: auto;
+  -ms-flex-basis: auto;
+  flex-basis: auto;
 }
 html,
 body {