From f618a6bc2fb6b3844e6c7105689fcba3065c6234 Mon Sep 17 00:00:00 2001 From: Spencer Alger Date: Wed, 4 Jun 2014 11:57:00 -0700 Subject: [PATCH] upgrade flex-grow defs to use the flex shorthand and define their flex-basis --- src/kibana/apps/dashboard/styles/main.css | 20 +++++++++++++++ src/kibana/apps/dashboard/styles/main.less | 4 ++- src/kibana/apps/visualize/styles/main.css | 21 +++++++++++++++- src/kibana/apps/visualize/styles/main.less | 4 +-- .../apps/visualize/styles/visualization.css | 25 ++++++++++++++++++- .../apps/visualize/styles/visualization.less | 8 +++--- src/kibana/styles/_mixins.less | 5 ++++ src/kibana/styles/_pagination.less | 4 +-- src/kibana/styles/main.css | 16 ++++++++++++ 9 files changed, 96 insertions(+), 11 deletions(-) diff --git a/src/kibana/apps/dashboard/styles/main.css b/src/kibana/apps/dashboard/styles/main.css index 9d75a13d05baa4..423c10de940264 100644 --- 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 index 4f4b79746b4d63..235357cb714cc2 100644 --- 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 index 57e6b5c27b8bc7..ff176197cb7d8f 100644 --- 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 index 6edd9c809f7e95..1eb4562b276b9c 100644 --- 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 index 720eb5e255c837..52ef584ae295d6 100644 --- 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 index 31d6013283b0b1..4758f73376862f 100644 --- 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 index 80e4211a3a5e3b..058b4996a51f8a 100644 --- 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 index 2ed8416e14ba9c..39c48d2f169dc7 100644 --- 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); } } \ No newline at end of file diff --git a/src/kibana/styles/main.css b/src/kibana/styles/main.css index 5bea6580e7f72c..277616fad27eaf 100644 --- 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 {