From 7a6de3dcb11b19c5a735c7f5ccbee54483fe35cc Mon Sep 17 00:00:00 2001 From: Jiri Tomasek Date: Tue, 11 Nov 2014 14:46:00 +0100 Subject: [PATCH] Reorganized scss imports This patch moves all css style tags from html head and imports them properly in horizon.scss. There will be only one request to make to bring all styleshets as it will be compiled into single horizon.css file. Imports have been reoganized to fit file structure, naming conventions and to enable use of horizon variables. Partially-Implements: blueprint css-breakdown Closes-Bug: 1390104 Change-Id: I868289b010589f01339615390cf0b2f09b11eb1c --- .../static/dashboard/css/rickshaw.css | 320 ------------------ .../static/dashboard/scss/_variables.scss | 14 + .../scss/{ => components}/_accordion_nav.scss | 2 - .../_charts.scss} | 2 - .../scss/{ => components}/_inline_edit.scss | 0 ...ce_browser.scss => _resource_browser.scss} | 0 .../dashboard/scss/components/_topbar.scss | 2 +- .../_workflow.scss} | 2 - .../static/dashboard/scss/horizon.scss | 23 +- .../templates/_stylesheets.html | 4 - 10 files changed, 31 insertions(+), 338 deletions(-) delete mode 100644 openstack_dashboard/static/dashboard/css/rickshaw.css rename openstack_dashboard/static/dashboard/scss/{ => components}/_accordion_nav.scss (98%) rename openstack_dashboard/static/dashboard/scss/{horizon_charts.scss => components/_charts.scss} (99%) rename openstack_dashboard/static/dashboard/scss/{ => components}/_inline_edit.scss (100%) rename openstack_dashboard/static/dashboard/scss/components/{resource_browser.scss => _resource_browser.scss} (100%) rename openstack_dashboard/static/dashboard/scss/{horizon_workflow.scss => components/_workflow.scss} (99%) diff --git a/openstack_dashboard/static/dashboard/css/rickshaw.css b/openstack_dashboard/static/dashboard/css/rickshaw.css deleted file mode 100644 index 0502514d37..0000000000 --- a/openstack_dashboard/static/dashboard/css/rickshaw.css +++ /dev/null @@ -1,320 +0,0 @@ -.rickshaw_graph .detail { - pointer-events: none; - position: absolute; - top: 0; - z-index: 2; - background: rgba(0, 0, 0, 0.1); - bottom: 0; - width: 1px; - transition: opacity 0.25s linear; - -moz-transition: opacity 0.25s linear; - -o-transition: opacity 0.25s linear; - -webkit-transition: opacity 0.25s linear; -} -.rickshaw_graph .detail.inactive { - opacity: 0; -} -.rickshaw_graph .detail .item.active { - opacity: 1; -} -.rickshaw_graph .detail .x_label { - font-family: Arial, sans-serif; - border-radius: 3px; - padding: 6px; - opacity: 0.5; - border: 1px solid #e0e0e0; - font-size: 12px; - position: absolute; - background: white; - white-space: nowrap; -} -.rickshaw_graph .detail .item { - position: absolute; - z-index: 2; - border-radius: 3px; - padding: 0.25em; - font-size: 12px; - font-family: Arial, sans-serif; - opacity: 0; - background: rgba(0, 0, 0, 0.4); - color: white; - border: 1px solid rgba(0, 0, 0, 0.4); - margin-left: 1em; - margin-top: -1em; - white-space: nowrap; -} -.rickshaw_graph .detail .item.active { - opacity: 1; - background: rgba(0, 0, 0, 0.8); -} -.rickshaw_graph .detail .item:before { - content: "\25c2"; - position: absolute; - left: -0.5em; - color: rgba(0, 0, 0, 0.7); - width: 0; -} -.rickshaw_graph .detail .dot { - width: 4px; - height: 4px; - margin-left: -4px; - margin-top: -3px; - border-radius: 5px; - position: absolute; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); - background: white; - border-width: 2px; - border-style: solid; - display: none; - background-clip: padding-box; -} -.rickshaw_graph .detail .dot.active { - display: block; -} -/* graph */ - -.rickshaw_graph { - position: relative; -} -.rickshaw_graph svg { - display: block; - overflow: hidden; -} - -/* ticks */ - -.rickshaw_graph .x_tick { - position: absolute; - top: 0; - bottom: 0; - width: 0px; - border-left: 1px dotted rgba(0, 0, 0, 0.2); - pointer-events: none; -} -.rickshaw_graph .x_tick .title { - position: absolute; - font-size: 12px; - font-family: Arial, sans-serif; - opacity: 0.5; - white-space: nowrap; - margin-left: 3px; - bottom: 1px; -} - -/* annotations */ - -.rickshaw_annotation_timeline { - height: 1px; - border-top: 1px solid #e0e0e0; - margin-top: 10px; - position: relative; -} -.rickshaw_annotation_timeline .annotation { - position: absolute; - height: 6px; - width: 6px; - margin-left: -2px; - top: -3px; - border-radius: 5px; - background-color: rgba(0, 0, 0, 0.25); -} -.rickshaw_graph .annotation_line { - position: absolute; - top: 0; - bottom: -6px; - width: 0px; - border-left: 2px solid rgba(0, 0, 0, 0.3); - display: none; -} -.rickshaw_graph .annotation_line.active { - display: block; -} - -.rickshaw_graph .annotation_range { - background: rgba(0, 0, 0, 0.1); - display: none; - position: absolute; - top: 0; - bottom: -6px; -} -.rickshaw_graph .annotation_range.active { - display: block; -} -.rickshaw_graph .annotation_range.active.offscreen { - display: none; -} - -.rickshaw_annotation_timeline .annotation .content { - background: white; - color: black; - opacity: 0.9; - padding: 5px 5px; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); - border-radius: 3px; - position: relative; - z-index: 20; - font-size: 12px; - padding: 6px 8px 8px; - top: 18px; - left: -11px; - width: 160px; - display: none; - cursor: pointer; -} -.rickshaw_annotation_timeline .annotation .content:before { - content: "\25b2"; - position: absolute; - top: -11px; - color: white; - text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); -} -.rickshaw_annotation_timeline .annotation.active, -.rickshaw_annotation_timeline .annotation:hover { - background-color: rgba(0, 0, 0, 0.8); - cursor: none; -} -.rickshaw_annotation_timeline .annotation .content:hover { - z-index: 50; -} -.rickshaw_annotation_timeline .annotation.active .content { - display: block; -} -.rickshaw_annotation_timeline .annotation:hover .content { - display: block; - z-index: 50; -} -.rickshaw_graph .y_axis, -.rickshaw_graph .x_axis_d3 { - fill: none; -} -.rickshaw_graph .y_ticks .tick, -.rickshaw_graph .x_ticks_d3 .tick { - stroke: rgba(0, 0, 0, 0.16); - stroke-width: 2px; - shape-rendering: crisp-edges; - pointer-events: none; -} -.rickshaw_graph .y_grid .tick, -.rickshaw_graph .x_grid_d3 .tick { - z-index: -1; - stroke: rgba(0, 0, 0, 0.20); - stroke-width: 1px; - stroke-dasharray: 1 1; -} -.rickshaw_graph .y_grid path, -.rickshaw_graph .x_grid_d3 path { - fill: none; - stroke: none; -} -.rickshaw_graph .y_ticks path, -.rickshaw_graph .x_ticks_d3 path { - fill: none; - stroke: #808080; -} -.rickshaw_graph .y_ticks text, -.rickshaw_graph .x_ticks_d3 text { - opacity: 0.5; - font-size: 12px; - pointer-events: none; -} -.rickshaw_graph .x_tick.glow .title, -.rickshaw_graph .y_ticks.glow text { - fill: black; - color: black; - text-shadow: - -1px 1px 0 rgba(255, 255, 255, 0.1), - 1px -1px 0 rgba(255, 255, 255, 0.1), - 1px 1px 0 rgba(255, 255, 255, 0.1), - 0px 1px 0 rgba(255, 255, 255, 0.1), - 0px -1px 0 rgba(255, 255, 255, 0.1), - 1px 0px 0 rgba(255, 255, 255, 0.1), - -1px 0px 0 rgba(255, 255, 255, 0.1), - -1px -1px 0 rgba(255, 255, 255, 0.1); -} -.rickshaw_graph .x_tick.inverse .title, -.rickshaw_graph .y_ticks.inverse text { - fill: white; - color: white; - text-shadow: - -1px 1px 0 rgba(0, 0, 0, 0.8), - 1px -1px 0 rgba(0, 0, 0, 0.8), - 1px 1px 0 rgba(0, 0, 0, 0.8), - 0px 1px 0 rgba(0, 0, 0, 0.8), - 0px -1px 0 rgba(0, 0, 0, 0.8), - 1px 0px 0 rgba(0, 0, 0, 0.8), - -1px 0px 0 rgba(0, 0, 0, 0.8), - -1px -1px 0 rgba(0, 0, 0, 0.8); -} -.rickshaw_legend { - font-family: Arial; - font-size: 12px; - color: white; - background: #404040; - display: inline-block; - padding: 12px 5px; - border-radius: 2px; - position: relative; -} -.rickshaw_legend:hover { - z-index: 10; -} -.rickshaw_legend .swatch { - width: 10px; - height: 10px; - border: 1px solid rgba(0, 0, 0, 0.2); -} -.rickshaw_legend .line { - clear: both; - line-height: 140%; - padding-right: 15px; -} -.rickshaw_legend .line .swatch { - display: inline-block; - margin-right: 3px; - border-radius: 2px; -} -.rickshaw_legend .label { - margin: 0; - white-space: nowrap; - display: inline; - font-size: inherit; - background-color: transparent; - color: inherit; - font-weight: normal; - line-height: normal; - padding: 0px; - text-shadow: none; -} -.rickshaw_legend .action:hover { - opacity: 0.6; -} -.rickshaw_legend .action { - margin-right: 0.2em; - font-size: 10px; - opacity: 0.2; - cursor: pointer; - font-size: 14px; -} -.rickshaw_legend .line.disabled { - opacity: 0.4; -} -.rickshaw_legend ul { - list-style-type: none; - margin: 0; - padding: 0; - margin: 2px; - cursor: pointer; -} -.rickshaw_legend li { - padding: 0 0 0 2px; - min-width: 80px; - white-space: nowrap; -} -.rickshaw_legend li:hover { - background: rgba(255, 255, 255, 0.08); - border-radius: 3px; -} -.rickshaw_legend li:active { - background: rgba(255, 255, 255, 0.2); - border-radius: 3px; -} diff --git a/openstack_dashboard/static/dashboard/scss/_variables.scss b/openstack_dashboard/static/dashboard/scss/_variables.scss index f46cb013a2..a6f6481ea5 100644 --- a/openstack_dashboard/static/dashboard/scss/_variables.scss +++ b/openstack_dashboard/static/dashboard/scss/_variables.scss @@ -1,5 +1,8 @@ +/* This import is required for using bootstrap variables as value +to our variables */ @import "/bootstrap/scss/bootstrap/variables"; + /* Bootstrap variables overrides */ $icon-font-path: "../../bootstrap/fonts/bootstrap/"; @@ -7,6 +10,7 @@ $font-size-base: 13px; $modal-md: 732px; $gray-light: #cccccc; + /* Horizon Custom Variables */ $sidebar-background-color: #f9f9f9; @@ -14,6 +18,7 @@ $sidebar-width: 220px; $border-color: #dddddd; $table-bg-odd: #f9f9f9; + /* Workflows */ $workflow-color-tab-complete-bg: #007acc; @@ -56,3 +61,12 @@ $rbrowser-footer-background-color: #f1f1f1; // Font-awesome path to the icon fonts $fa-font-path: "/static/horizon/lib/font-awesome/fonts"; + +/* Charts */ + +$overview_chart_height: 81px; + + +/* Accordion Navigation */ + +$accordionBorderColor: #e5e5e5; diff --git a/openstack_dashboard/static/dashboard/scss/_accordion_nav.scss b/openstack_dashboard/static/dashboard/scss/components/_accordion_nav.scss similarity index 98% rename from openstack_dashboard/static/dashboard/scss/_accordion_nav.scss rename to openstack_dashboard/static/dashboard/scss/components/_accordion_nav.scss index 663bc04f84..7a309444e8 100644 --- a/openstack_dashboard/static/dashboard/scss/_accordion_nav.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_accordion_nav.scss @@ -1,5 +1,3 @@ -$accordionBorderColor: #aeb0b2; - @mixin sidebar_toggle_icon { & > span { transition: all .3s ease 0s; diff --git a/openstack_dashboard/static/dashboard/scss/horizon_charts.scss b/openstack_dashboard/static/dashboard/scss/components/_charts.scss similarity index 99% rename from openstack_dashboard/static/dashboard/scss/horizon_charts.scss rename to openstack_dashboard/static/dashboard/scss/components/_charts.scss index a75e1c2730..091878d674 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon_charts.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_charts.scss @@ -24,8 +24,6 @@ width: 0; top: 12px; } } -$overview_chart_height: 81px; - .overview_chart { width: 214px; height: $overview_chart_height; diff --git a/openstack_dashboard/static/dashboard/scss/_inline_edit.scss b/openstack_dashboard/static/dashboard/scss/components/_inline_edit.scss similarity index 100% rename from openstack_dashboard/static/dashboard/scss/_inline_edit.scss rename to openstack_dashboard/static/dashboard/scss/components/_inline_edit.scss diff --git a/openstack_dashboard/static/dashboard/scss/components/resource_browser.scss b/openstack_dashboard/static/dashboard/scss/components/_resource_browser.scss similarity index 100% rename from openstack_dashboard/static/dashboard/scss/components/resource_browser.scss rename to openstack_dashboard/static/dashboard/scss/components/_resource_browser.scss diff --git a/openstack_dashboard/static/dashboard/scss/components/_topbar.scss b/openstack_dashboard/static/dashboard/scss/components/_topbar.scss index 64d5bbf44f..f2b8aac11a 100644 --- a/openstack_dashboard/static/dashboard/scss/components/_topbar.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_topbar.scss @@ -6,6 +6,7 @@ display: inline-block; width: 222px; margin: 0 0 0 10px; + line-height: 1; a { background: url(../img/logo.png) left center no-repeat; display: block; @@ -13,7 +14,6 @@ } } .switcher_bar { - @import "/dashboard/scss/context_selection"; display: inline-block; vertical-align: top; font-size: 0px; diff --git a/openstack_dashboard/static/dashboard/scss/horizon_workflow.scss b/openstack_dashboard/static/dashboard/scss/components/_workflow.scss similarity index 99% rename from openstack_dashboard/static/dashboard/scss/horizon_workflow.scss rename to openstack_dashboard/static/dashboard/scss/components/_workflow.scss index 64cf555073..08c076337d 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon_workflow.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_workflow.scss @@ -1,5 +1,3 @@ -@import '_variables'; - .workflow { .tab-content { border-left: 0 none; diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss index d623c987f2..6de8f71a8e 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon.scss +++ b/openstack_dashboard/static/dashboard/scss/horizon.scss @@ -1,13 +1,22 @@ -@import "variables"; -@import "/horizon/lib/font-awesome/scss/font-awesome"; // Configured in _variables.scss. -@import "/bootstrap/scss/bootstrap"; // Configured in _variables.scss. -@import "/horizon/lib/bootstrap_datepicker/datepicker.css"; -@import "accordion_nav"; -@import "inline_edit"; +// Pure CSS Vendor +@import "/horizon/lib/bootstrap_datepicker/datepicker3.css"; +@import "/horizon/lib/rickshaw.css"; -// Components +// Horizon Variables +@import "variables"; + +// Vendor Components +@import "/bootstrap/scss/bootstrap"; +@import "/horizon/lib/font-awesome/scss/font-awesome.scss"; + +// Dashboard Components @import "components/resource_browser"; @import "components/topbar"; +@import "components/accordion_nav"; +@import "components/inline_edit"; +@import "components/charts"; +@import "components/workflow"; + /* new clearfix */ .clearfix:after { diff --git a/openstack_dashboard/templates/_stylesheets.html b/openstack_dashboard/templates/_stylesheets.html index 4c4ccf5dd8..1afbe9deba 100644 --- a/openstack_dashboard/templates/_stylesheets.html +++ b/openstack_dashboard/templates/_stylesheets.html @@ -2,10 +2,6 @@ {% compress css %} - - - - {% endcompress %}