This patch moves the stylesheets away from vanila CSS towards the Compass framework and the SASS indented syntax (similar to HAML).
Right now it's just a backend change -- the UI should stay the same. There's not much point in doing UI changes when it's still prone to big changes.
After you apply this, run `rake gems:install` to install the missing gem (compass). More details in the commit message.
Thomas
From: Tomas Sedovic tsedovic@redhat.com
This is the first step towards migrating to Compass[1] / Blueprint[2] for our CSS needs.
You need to install the `compass` gem. Run `rake gems:install`.
This removes our CSS files from src/public/stylesheets and replaces them with SASS[3] alternatives. However, this is just a framework change -- UI stays the same for now.
Note that this update makes changes to the stylesheet location:
src/app/stylesheets/*.sass - the stylesheet sources in the SASS language src/stylesheets/compiled/ - CSS files generated from the SASS sources src/stylesheets/ - third-party CSS (like jQueryUI stuff)
Compass watches the *.sass files for changes and updates the compiled CSS automatically.
[1]: http://compass-style.org/ [2]: http://blueprintcss.org/ [3]: http://sass-lang.com/ --- .gitignore | 5 + src/app/stylesheets/components.sass | 415 ++++++++++++++++++++++++ src/app/stylesheets/dcloud.sass | 241 ++++++++++++++ src/app/stylesheets/layout.sass | 239 ++++++++++++++ src/app/stylesheets/screen.sass | 8 + src/app/views/layouts/aggregator.haml | 10 +- src/config/compass.rb | 11 + src/config/environment.rb | 1 + src/config/initializers/compass.rb | 5 + src/public/stylesheets/components.css | 565 --------------------------------- src/public/stylesheets/dcloud.css | 303 ------------------ src/public/stylesheets/ie.css | 1 - src/public/stylesheets/layout.css | 250 --------------- 13 files changed, 930 insertions(+), 1124 deletions(-) create mode 100644 src/app/stylesheets/components.sass create mode 100644 src/app/stylesheets/dcloud.sass create mode 100644 src/app/stylesheets/layout.sass create mode 100644 src/app/stylesheets/screen.sass create mode 100644 src/config/compass.rb create mode 100644 src/config/initializers/compass.rb delete mode 100644 src/public/stylesheets/components.css delete mode 100644 src/public/stylesheets/dcloud.css delete mode 100644 src/public/stylesheets/ie.css delete mode 100644 src/public/stylesheets/layout.css
diff --git a/.gitignore b/.gitignore index 0444368..b70174c 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,11 @@ database.yml *~ *.swp
+ +# compass compiled and temporary files +src/tmp +src/public/stylesheets/compiled + # databases automatically generated by Rails migrations development.sqlite3 production.sqlite3 diff --git a/src/app/stylesheets/components.sass b/src/app/stylesheets/components.sass new file mode 100644 index 0000000..f3e59cf --- /dev/null +++ b/src/app/stylesheets/components.sass @@ -0,0 +1,415 @@ +/* header style + +.header_logo + position: absolute + top: 10px + left: 10px + color: #B5B5B5 + span + text-transform: uppercase + margin-left: 5px + font-weight: bold + letter-spacing: -0.02em + +ul.nav + padding: 0 + padding-top: 1em + margin: 0 + white-space: nowrap + list-style-type: none + li + display: inline + font-size: 120% + padding: 3px 15px + color: #b3b3b3 + a + color: #313a3d + text-shadow: 0 1px 1px #FFF + &.selected + background: #cbd6db !important + border-radius: 16px + -moz-border-radius: 16px + -webkit-border-radius: 16px + -moz-box-shadow: 0 1px 1px #efefef + &:hover + background: #dedede + border-radius: 16px + -moz-border-radius: 16px + -webkit-border-radius: 16px + +.header_menu_wrapper + padding: 0 + margin: 35px 0 0 0 + float: left + height: 35px + width: 230px + background: #CCCCCC + +.header_menu + padding: 5px 0 0 10px + margin: 1px + background: #cccccc url(/images/bg_navtoolbar.png) repeat-x top + font-size: 110% + line-height: 1.5 + height: 26px + width: 216px + border: #FFFFFF solid 1px + +.header_menu_greybox + padding: 0 + margin: 35px 0 0 0 + float: left + height: 35px + width: 230px + background: #CCCCCC + +#hi-username + margin-right: 15px + float: left + +/* dashboard style + +.dashboard_column + float: left + width: 50% + +.dashboard_section_summary + background: #F2F2F2 + font-size: 0.8em + font-weight: bolder + margin: 10px 0 + padding: 5px 0px 5px 5px + p + display: inline + float: left + margin: 3px 0 3px 0 + img + &:first-child + padding-right: 5px + vertical-align: middle + float: right + +#getting_started_dashboard_section + background: #F2F2F2 + width: 850px + font-size: .9em + padding: 10px + margin: 10px 0px 10px 5px + border: 1px solid black + -moz-border-radius: 5px + -webkit-border-radius: 5px + p + padding-bottom: 5px + ul + width: 100% + height: 120px + padding-left: 7px + li + display: inline + float: left + width: 205px + padding: 0 7px 0 10px + border-right: 1px solid black + &:last-child + border-right: none + width: 150px + img + height: 91px + +#getting_started_links a + float: right + +#actions_dashboard_section + height: 100px + border: 1px solid #DDD + padding: 15px + margin: 5px 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + a + display: block + float: left + margin: 0px 15px 5px 0px + color: #0075c0 + text-decoration: underline + +#service_quality_dashboard_section + border: 1px solid #DDD + padding: 15px + margin: 0 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + +.provider_service_quality_graph + width: 100px + height: 50px + float: left + margin: 0px 5px 0px 5px + +.provider_service_quality_graph_summary + float: left + width: 60px + height: 15px + padding: 20px 0 24px 0 + +#key_indicators_dashboard_section + height: 220px + border: 1px solid #DDD + padding: 15px + margin: 0 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + ul + float: left !important + width: 195px + margin: 0 + padding: 0 + list-style: none + li + width: 80% + margin: 0 + padding-bottom: 10px + .count + float: right + .instance_graph + float: left + +#provider_instances_graph + width: 250px + float: left + +#quota_usage_dashboard_section + border: 1px solid #DDD + padding: 15px + margin: 5px 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + +.account_quota_usage_graph_summary + padding: 15px 15px + display: inline + float: left + width: 45% + +.account_quota_usage_graph_key + float: right + vertical-align: top + font-size: 0.8em + text-align: right + width: 100% + height: 20px + padding: 0 15px 0 0 + +.account_quota_usage_history_graph + display: inline + float: left + margin-left: 10px + border: 1px solid black + width: 120px + height: 20px + +.account_quota_usage_current_graph + display: inline + float: left + margin: 0 0 10px 10px + width: 140px + height: 50px + +.pool_quota_usage_summary + display: inline + float: left + padding-left: 15px + width: 15% + +.pool_quota_usage_limit + display: inline + float: left + width: 33% + height: 25px + border: 1px solid black + margin-left: 17px + +.pool_quota_usage_instances + display: inline + float: left + width: 33% + height: 25px + border: 1px solid black + margin-left: 17px + margin-bottom: 15px + +#image_descriptor_nav + margin: 2px 0px 0 0px + width: 98% + h2 + height: 29px + font-weight: normal + padding: 10px 10px 0px 10px + margin: 0px + ul + margin: 20px + width: 100% + li + display: inline + float: left + width: 200px + border: 1px solid #ccc + border-top: none + border-right: none + padding-left: 10px + clear: none + font-size: 1em + h4 + margin-top: 0px + margin-bottom: 0.5em + p + margin-top: 0 + margin-bottom: 2em + color: #808080 + &.selected p + color: #000 + +#image_descriptor_form + border: none + padding: 1em 0 + background: none + width: 800px + margin: 20px + display: inline-block + input + width: auto + ul li + textarea, select, input[type=text] + width: 302px + float: left + border-top: 1px solid #7f7f7f + background: #fff + border-bottom: 1px solid #7f7f7f + border-left: 1px solid #000 + border-right: 1px solid #000 + -moz-border-radius: 4px + .description + float: left + width: 300px + font-size: 95% + padding-left: 1em + padding-bottom: 20px + label + color: #000 + font-size: 90% + font-weight: bold + &.plain + font-weight: normal + .pkglist + float: left + width: 380px + height: 300px + overflow: auto + background-color: white + border: 2px solid #ccc + -moz-border-radius: 6px + .submit + padding-top: 20px + .pkglist .action_link + float: right + width: 60px !important + color: blue + .closed_folder + background-image: url(/images/dir_closed.png) + background-repeat: no-repeat + .opened_folder + background-image: url(/images/dir_open.png) + background-repeat: no-repeat + .groupname + cursor: pointer + .hidden + display: none + .selection_list > li + padding-bottom: 10px + .group, .groupkgs + padding-left: 20px + .pkglist .ui-tabs + padding: 0 + .ui-tabs-panel + padding: 1em 0.5em + .left-pkglist .ui-widget-header + height: 26px + padding: 10px + .pkglist + ul.ui-tabs-nav + background-color: white + width: 379px + height: 44px + .select_repository + float: right + padding: 5px 0px 5px 0px + select + width: 150px + .selection_list + padding: 10px + .side_panel + width: 150px + float: left + border: 1px solid #ccc + margin: 5px + padding: 10px + min-height: 300px + label + float: none + font-size: 1em + padding: 5px + li + padding-bottom: 20px + .main_panel + width: 580px + float: left + border: 1px solid #ccc + margin: 5px + min-height: 300px + padding: 10px + .image_build_panel + border-bottom: 1px solid #ccc + padding: 10px + input + font-size: 1em + .expand_target_list_button + float: right + display: none + .target_list + li + border: 1px solid #ccc + margin: 20px + padding: 5px + .status, .actions + float: right + width: 100px + .empty + text-align: center + padding: 30px + +/* dcloud form redefines all input fields diff --git a/src/app/stylesheets/dcloud.sass b/src/app/stylesheets/dcloud.sass new file mode 100644 index 0000000..841dda4 --- /dev/null +++ b/src/app/stylesheets/dcloud.sass @@ -0,0 +1,241 @@ +form + border: none + margin: 0 + padding: 0 + display: inline-block + +fieldset + border: 3px solid #efeff0 + border-right: none + border-left: none + border-bottom: none + padding: 18px 0 10px 10px + +ul li input + border: 2px solid #becfe4 + color: #333 + display: block + float: left + outline-color: -moz-use-text-color + outline-style: none + outline-width: medium + padding: 3px + width: 302px + +legend + text-transform: uppercase + color: #9a9a9a + font-weight: bold + +input, select + font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif + font-size: 1.4em + +.fieldWithErrors + display: inline-block + padding: 3px + background: #fff7b2 + border: 3px solid #fff7b2 + +.errorExplanation + margin: 0 0 24px 0 + padding: 9px + background: #fff7b2 + color: #867a5e + -moz-border-radius: 3px + +#errorExplanation h2 + font-size: 14px + font-weight: bold + color: #867a5e + +.dcloud_form + background: #e8e8e8 + border: solid 8px #f5f5f5 + -moz-border-radius: 10px + -webkit-border-radius: 10px + margin-top: 54px + width: 550px + margin-left: auto + margin-right: auto + padding: 36px + h2 + font-size: 1.9em + font-weight: normal + color: #43728e + margin: 0 0 24px 0 + padding: 0 + ul + list-style-image: none + list-style-position: outside + list-style-type: none + margin: 0 + padding: 0 + label + display: block + float: left + padding: 3px 0 24px 0 + width: 175px + font-size: 1.4em + color: #616161 + span + display: block + float: left + width: 160px + font-size: .8em + color: #9a9a9a + li + clear: both + .txtfield + border: 2px solid #becfe4 + color: #333 + display: block + float: left + outline-color: -moz-use-text-color + outline-style: none + outline-width: medium + padding: 3px + width: 318px + .submit + float: right + display: inline + clear: both + +/* Styles for table + +#content_area table + width: 100% + border-collapse: collapse + th, td + border: 1px solid #e1e2e3 + border-right: 0 + border-left: 0 + padding: 0 + text-align: left + font-size: 14px + line-height: 24px + padding-left: 18px + th + background: none + border-top: none + a + display: block + text-decoration: none + &:hover + text-decoration: underline + +.actionlink + color: #0075c0 !important + line-height: 36px + font-size: 14px + padding-left: 18px + +ul#providers + a.actionlink + display: block + border-bottom: 1px solid #ccc + +.submit_link + background: none + border: 0 + text-decoration: underline + color: #0075c0 + line-height: 36px + font-size: 14px + padding-left: 10px + &:hover + cursor: pointer + +/* Styles for the left navigator + +#side + padding: 0 + width: 229px + a.actionlink + color: #0075c0 + line-height: 36px + font-size: 14px + padding-left: 10px + + +$provider_icon: "/images/icon_provider.png" +$pool_icon: "/images/icon_vmpool.png" + +ul + &#providers + list-style-type: none + margin: 0 + padding: 0 0 0 10px + li a + display: block + line-height: 36px + padding-left: 32px + &:hover + background: #efefef url($provider_icon) no-repeat 2px 50% + color: #000 + &#pools + list-style-type: none + line-height: 36px + margin: 0 + padding: 0 0 0 10px + li + border-bottom: none + a + display: block + line-height: 36px + padding-left: 32px + border-bottom: none + &:hover + background: #efefef url($pool_icon) no-repeat 2px 50% + color: #000 + +.providername, .poolname + font-size: 14px + +.providername + background: url($provider_icon) no-repeat 2px 50% + &.selected + background: #5599b8 url($provider_icon) no-repeat 2px 50% + color: #FFF + +.poolname + background: url($pool_icon) no-repeat 2px 50% + +.selected + background: #f2a922 + color: #FFF + +.poolname.selected + background: #5599b8 url($pool_icon) no-repeat 2px 50% + color: #FFF + +.instance_action_list + padding: 0 + li + padding: 0 0.3em + border-left: 1px solid #000 + display: inline + &.first + border-left: none + +#instances_table_wrapper + min-height: 0 + margin-bottom: 1em + +/* Style for button links + +a.button_link + border: 1px solid black + text-decoration: none + padding: 4px + margin-bottom: 3px + display: block + background: #666666 + color: white + -moz-border-radius: 5px + -webkit-border-radius: 5px + +#dashboard-tabs, #provider-tabs, #pool-tabs + border: none + +#dashboard-tabs ul, #provider-tabs ul, #pool-tabs ul + float: none diff --git a/src/app/stylesheets/layout.sass b/src/app/stylesheets/layout.sass new file mode 100644 index 0000000..7a0667f --- /dev/null +++ b/src/app/stylesheets/layout.sass @@ -0,0 +1,239 @@ +@charset "UTF-8" + +html + font-size: small + min-width: 900px + min-height: 400px + +body + font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif + padding: 0 + margin: 0 + width: 100% + height: 100% + background-color: #333333 + font-size: 90% + +img + border-style: none + +a + color: #000000 + text-decoration: none + +h2, h3 + font-weight: normal + +#header + padding: 0 + margin: 0 + position: absolute + top: 0px + left: 0px + width: 100% + height: 90px + overflow: hidden + background: #535353 url(/images/bg_header.png) repeat-x top + +#side + padding: 5px 0 0 5px + margin: 0 + position: absolute + top: 70px + left: 0px + bottom: 0px + overflow: auto + width: 224px + background-color: #FFFFFF + border-right: 1px #CCCCCC solid + h3 + color: #999999 + font-size: 1em + margin: 1em 1em .5em 1em + text-transform: uppercase + +#main + padding: 0 + margin-left: 0 + position: absolute + top: 70px + left: 230px + right: 0px + bottom: 0px + overflow: auto + background-color: #FFFFFF + border-left: #CCCCCC solid 0px + +/* ----- Right side of Header -------- + +.header_info + padding: 10px 31px 0px 10px + margin: 0 + float: right + text-align: right + font-size: 100% + color: #B5B5B5 + a + font-weight: bold + &:link, &:active, &:visited, &:hover + color: #000 + text-decoration: none + +#textfield_effect + border-width: 1px + border-style: solid + border-color: #7A7A7A + padding-left: 5px + background: #4A4A4A + font-size: 100% + color: #FFFFFF + width: 100px + height: 16px + +/* ----- Blue Tabbed Navigation -------- + +.ui-tabs-nav + margin: 0 + padding: 0 + background: none + list-style-type: none + float: left + font-size: 110% + li + margin: 0 1px 0 1px + padding: 0 + float: left + a + float: left + padding: 0 15px 0 15px + color: #CCCCCC + text-decoration: none + line-height: 2.3 + height: 24px + text-align: center + background: none + &:hover + color: #FFFFFF + border-bottom: 5px solid #537585 + &:focus, &:active + outline-style: none + +.ui-tabs-selected a + color: #FFFFFF + outline-style: none + height: 24px + line-height: 1.6 + border-bottom: 5px solid #5599B8 + +.ui-tabs-hide + /*display:none; + +/* ----- PopUp Dialog -------- + +.dialog_title + background: #DEE7EB + padding: 15px + width: 600px + +.dialog_title_small + background: #DEE7EB + padding: 15px + min-width: 500px + +.header + font-size: 180% + line-height: 1.6 + +.dialog_body + overflow: auto + height: 350px + +.confirm_dialog_title + width: 400px + padding: 15px + font-size: 110% + background: url(/images/bg_warningMessage.png) top repeat-x + +.confirm_dialog_header + background: url(/images/icon_warning.png) top left no-repeat + padding: 0 0 0 45px + min-height: 36px + +.confirm_dialog_footer + height: 37px + text-align: right + padding: 5px 9px 0 0 + +.button + padding: 0 0 0 2px + float: right + +.button_left_blue + background: url(/images/button_left.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_blue + background: url(/images/button_middle.png) repeat-x + height: 29px + float: left + color: #FFFFFF + line-height: 2.3 + font-size: 105% + display: block + +.button_right_blue + background: url(/images/button_right.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_blue a + color: #FFFFFF + text-decoration: none + display: block + padding: 0 10px 0 10px + &:hover + color: #E7EFF6 + text-decoration: none + padding: 0 10px 0 10px + +.button_left_grey + background: url(/images/button_left_grey.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_grey + background: url(/images/button_middle_grey.png) repeat-x + height: 29px + float: left + color: #FFFFFF + line-height: 2.3 + font-size: 105% + display: block + +.button_right_grey + background: url(/images/button_right_grey.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_grey a + color: #FFFFFF + text-decoration: none + display: block + padding: 0 10px 0 10px + &:hover + color: #E7EFF6 + text-decoration: none + padding: 0 10px 0 10px + +.fieldWithErrors + background-color: #FFB2B2 + border: 3px solid #FFB2B2 + +.errorExplanation + color: #333333 + padding: 2px diff --git a/src/app/stylesheets/screen.sass b/src/app/stylesheets/screen.sass new file mode 100644 index 0000000..af6e229 --- /dev/null +++ b/src/app/stylesheets/screen.sass @@ -0,0 +1,8 @@ +/* This is a placeholder for the Compass/Blueprint stuff. It shows how it's + * supposed to work. Uncomment the last lines to enable the Compass Reset + * plugin and the Blueprint Typography. + +// @import compass/reset +// @import blueprint + +// +blueprint-typography diff --git a/src/app/views/layouts/aggregator.haml b/src/app/views/layouts/aggregator.haml index 0a187bb..8243ba1 100644 --- a/src/app/views/layouts/aggregator.haml +++ b/src/app/views/layouts/aggregator.haml @@ -5,11 +5,11 @@ %title Deltacloud = yield :title - = stylesheet_link_tag 'layout' - = stylesheet_link_tag 'components' - = stylesheet_link_tag 'dcloud' - /[if IE] - = stylesheet_link_tag 'ie' + + = stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection' + = stylesheet_link_tag 'compiled/layout' + = stylesheet_link_tag 'compiled/components' + = stylesheet_link_tag 'compiled/dcloud' = stylesheet_link_tag 'facebox' = stylesheet_link_tag 'jquery.ui-1.8.1/jquery-ui-1.8.1.custom.css' = stylesheet_link_tag 'jquery-datatables/demo_table_jui.css' diff --git a/src/config/compass.rb b/src/config/compass.rb new file mode 100644 index 0000000..3e772ab --- /dev/null +++ b/src/config/compass.rb @@ -0,0 +1,11 @@ +# This configuration file works with both the Compass command line tool and within Rails. +# Require any additional compass plugins here. +project_type = :rails +project_path = Compass::AppIntegration::Rails.root +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "public/stylesheets/compiled" +sass_dir = "app/stylesheets" +environment = Compass::AppIntegration::Rails.env +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/src/config/environment.rb b/src/config/environment.rb index 3b49fbc..7863031 100644 --- a/src/config/environment.rb +++ b/src/config/environment.rb @@ -50,6 +50,7 @@ Rails::Initializer.run do |config| config.gem "nokogiri", :version => ">= 1.4.0" config.gem "gnuplot" config.gem "scruffy" + config.gem "compass", :version => ">= 0.10.2"
config.active_record.observers = :instance_observer, :task_observer # Only load the plugins named here, in the order given. By default, all plugins diff --git a/src/config/initializers/compass.rb b/src/config/initializers/compass.rb new file mode 100644 index 0000000..4375914 --- /dev/null +++ b/src/config/initializers/compass.rb @@ -0,0 +1,5 @@ +require 'compass' +rails_root = (defined?(Rails) ? Rails.root : RAILS_ROOT).to_s +Compass.add_project_configuration(File.join(rails_root, "config", "compass.rb")) +Compass.configure_sass_plugin! +Compass.handle_configuration_change! diff --git a/src/public/stylesheets/components.css b/src/public/stylesheets/components.css deleted file mode 100644 index 88ab05b..0000000 --- a/src/public/stylesheets/components.css +++ /dev/null @@ -1,565 +0,0 @@ -/* header style */ - -.header_logo { - position:absolute; - top:10px; - left:10px; - color: #B5B5B5; -} - -.header_logo span { - text-transform: uppercase; - margin-left: 5px; - font-weight: bold; - letter-spacing: -0.02em; -} - -ul.nav { - padding: 0; - padding-top: 1em; - margin: 0; - white-space: nowrap; - list-style-type: none; -} - -ul.nav li { - display: inline; - font-size: 120%; - padding: 3px 15px; - color : #b3b3b3; -} - -ul.nav li a { - color: #313a3d; - text-shadow: 0 1px 1px #FFF; -} - -ul.nav li.selected { - background: #cbd6db !important; - border-radius: 16px; - -moz-border-radius: 16px; - -webkit-border-radius: 16px; - -moz-box-shadow: 0 1px 1px #efefef; -} - -ul.nav li:hover { - background: #dedede; - border-radius: 16px; - -moz-border-radius: 16px; - -webkit-border-radius: 16px; -} - -.header_menu_wrapper { - padding: 0; - margin: 35px 0 0 0; - float:left; - height: 35px; - width: 230px; - background: #CCCCCC; -} - -.header_menu { - padding: 5px 0 0 10px; - margin: 1px; - background: #CCCCCC url(../images/bg_navtoolbar.png) repeat-x top; - font-size: 110%; - line-height:1.5; - height: 26px; - width: 216px; - border: #FFFFFF solid 1px; -} - -.header_menu_greybox { - padding: 0; - margin: 35px 0 0 0; - float:left; - height: 35px; - width: 230px; - background: #CCCCCC; -} - -#hi-username{ - margin-right: 15px; - float: left; -} - -/* dashboard style */ -.dashboard_column{ - float: left; - width: 50%; -} - -.dashboard_section_summary { - background: #F2F2F2; - font-size: 0.8em; - font-weight: bolder; - margin: 10px 0; - padding: 5px 0px 5px 5px; -} - -.dashboard_section_summary p { - display: inline; - float: left; - margin: 3px 0 3px 0; -} - -.dashboard_section_summary img:first-child { - padding-right: 5px; -} - -.dashboard_section_summary img { - vertical-align: middle; - float: right; -} - -#getting_started_dashboard_section { - background: #F2F2F2; - width: 850px; - font-size: .9em; - padding: 10px; - margin: 10px 0px 10px 5px; - border: 1px solid black; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; -} - -#getting_started_dashboard_section p { - padding-bottom: 5px; -} - -#getting_started_dashboard_section ul { - width: 100%; - height: 120px; - padding-left: 7px; -} - -#getting_started_dashboard_section ul li{ - display: inline; - float: left; - width: 205px; - padding: 0 7px 0 10px; - border-right: 1px solid black; -} - -#getting_started_dashboard_section ul li:last-child { - border-right: none; - width: 150px; -} - -#getting_started_dashboard_section img { - height: 91px; -} - -#getting_started_links a { - float: right; -} - -#actions_dashboard_section { - height: 100px; - border: 1px solid #DDD; - padding: 15px; - margin: 5px 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#actions_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -#actions_dashboard_section a { - display: block; - float: left; - margin: 0px 15px 5px 0px; - color: #0075c0; - text-decoration: underline; -} - -#service_quality_dashboard_section { - border: 1px solid #DDD; - padding: 15px; - margin: 0 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#service_quality_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -.provider_service_quality_graph { - width: 100px; - height: 50px; - float: left; - margin: 0px 5px 0px 5px; -} - -.provider_service_quality_graph_summary { - float: left; - width: 60px; - height: 15px; - padding: 20px 0 24px 0; -} - -#key_indicators_dashboard_section { - height: 220px; - border: 1px solid #DDD; - padding: 15px; - margin: 0 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#key_indicators_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -#key_indicators_dashboard_section ul { - float: left !important; - width: 195px; - margin: 0; - padding: 0; - list-style: none; -} - -#key_indicators_dashboard_section ul li { - width: 80%; - margin: 0; - padding-bottom: 10px; -} - -#key_indicators_dashboard_section .count { - float: right; -} - -#key_indicators_dashboard_section .instance_graph { - float: left; -} - -#provider_instances_graph { - width: 250px; - float: left; -} - -#quota_usage_dashboard_section { - border: 1px solid #DDD; - padding: 15px; - margin: 5px 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#quota_usage_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -.account_quota_usage_graph_summary { - padding: 15px 15px; - display: inline; - float: left; - width: 45% -} - -.account_quota_usage_graph_key { - float: right; - vertical-align: top; - font-size: 0.8em; - text-align: right; - width: 100%; - height: 20px; - padding: 0 15px 0 0; -} - -.account_quota_usage_history_graph { - display: inline; - float: left; - margin-left: 10px; - border: 1px solid black; - width: 120px; - height: 20px; -} - -.account_quota_usage_current_graph { - display: inline; - float: left; - margin: 0 0 10px 10px; - width: 140px; - height: 50px; -} - -.pool_quota_usage_summary { - display: inline; - float: left; - padding-left: 15px; - width: 15%; -} - -.pool_quota_usage_limit { - display: inline; - float: left; - width: 33%; - height: 25px; - border: 1px solid black; - margin-left: 17px; -} - -.pool_quota_usage_instances { - display: inline; - float: left; - width: 33%; - height: 25px; - border: 1px solid black; - margin-left: 17px; - margin-bottom: 15px; -} - -#image_descriptor_nav { - margin: 2px 0px 0 0px; - width: 98%; -} - -#image_descriptor_nav h2 { - height : 29px; - font-weight : normal; - padding : 10px 10px 0px 10px; - margin : 0px; -} - -#image_descriptor_nav ul { - margin : 20px; - width: 100%; -} - -#image_descriptor_nav ul li { - display: inline; - float: left; - width: 200px; - border: 1px solid #ccc; - border-top : none; - border-right : none; - padding-left: 10px; - clear: none; - font-size: 1em; -} - -#image_descriptor_nav ul li h4 { - margin-top : 0px; - margin-bottom : 0.5em; -} - -#image_descriptor_nav ul li p { - margin-top : 0; - margin-bottom : 2em; - color : #808080; -} - -#image_descriptor_nav ul li.selected p { - color : #000; -} - -#image_descriptor_form { - border : none; - padding : 1em 0; - background : none; - width: 800px; - margin: 20px; - display: inline-block; -} - -/* dcloud form redefines all input fields */ -#image_descriptor_form input { - width: auto; -} - -#image_descriptor_form ul li textarea, -#image_descriptor_form ul li select, -#image_descriptor_form ul li input[type=text] { - width: 302px; - float : left; - border-top: 1px solid #7f7f7f; - background : #fff; - border-bottom: 1px solid #7f7f7f; - border-left : 1px solid #000; - border-right : 1px solid #000; - -moz-border-radius : 4px; -} - -#image_descriptor_form .description { - float : left; - width : 300px; - font-size : 95%; - padding-left : 1em; - padding-bottom: 20px; -} - -#image_descriptor_form label { - color : #000; - font-size : 90%; - font-weight : bold; -} - -#image_descriptor_form label.plain { - font-weight : normal; -} - -#image_descriptor_form .pkglist { - float: left; - width: 380px; - height: 300px; - overflow: auto; - background-color: white; - border: 2px solid #ccc; - -moz-border-radius: 6px; -} - -#image_descriptor_form .submit { - padding-top: 20px; -} - -#image_descriptor_form .pkglist .action_link { - float:right; - width: 60px !important; - color: blue; -} - -#image_descriptor_form .closed_folder { - background-image: url(/images/dir_closed.png); - background-repeat: no-repeat; -} - -#image_descriptor_form .opened_folder { - background-image: url(/images/dir_open.png); - background-repeat: no-repeat; -} - -#image_descriptor_form .groupname { - cursor: pointer; -} - -#image_descriptor_form .hidden { - display: none; -} - -#image_descriptor_form .selection_list > li { - padding-bottom: 10px; -} - -#image_descriptor_form .group { - padding-left: 20px; -} - -#image_descriptor_form .groupkgs { - padding-left: 20px; -} - -#image_descriptor_form .pkglist .ui-tabs { - padding : 0; -} - -#image_descriptor_form .pkglist .ui-tabs .ui-tabs-panel { - padding : 1em 0.5em; -} - -#image_descriptor_form .left-pkglist .ui-widget-header { - height : 26px; - padding : 10px; -} - -#image_descriptor_form .pkglist ul.ui-tabs-nav { - background-color: white; - width : 379px; - height : 44px; -} - -#image_descriptor_form .pkglist .select_repository { - float:right; - padding: 5px 0px 5px 0px; -} - -#image_descriptor_form .pkglist .select_repository select { - width:150px; -} - -#image_descriptor_form .selection_list { - padding: 10px; -} - -#image_descriptor_form .side_panel { - width: 150px; - float: left; - border: 1px solid #ccc; - margin: 5px; - padding: 10px; - min-height: 300px; -} - -#image_descriptor_form .side_panel label { - float: none; - font-size: 1em; - padding: 5px; -} - -#image_descriptor_form .side_panel li { - padding-bottom: 20px; -} - -#image_descriptor_form .main_panel { - width: 580px; - float: left; - border: 1px solid #ccc; - margin: 5px; - min-height: 300px; - padding: 10px; -} - -#image_descriptor_form .main_panel .image_build_panel { - border-bottom: 1px solid #ccc; - padding: 10px; -} - -#image_descriptor_form .main_panel .image_build_panel input { - font-size: 1em; -} - -#image_descriptor_form .expand_target_list_button { - float: right; - display: none; -} - -#image_descriptor_form .target_list li { - border: 1px solid #ccc; - margin: 20px; - padding: 5px; -} - -#image_descriptor_form .target_list li .status { - float: right; - width: 100px; -} - -#image_descriptor_form .target_list li .actions { - float: right; - width: 100px; -} - -#image_descriptor_form .target_list .empty { - text-align: center; - padding: 30px; -} diff --git a/src/public/stylesheets/dcloud.css b/src/public/stylesheets/dcloud.css deleted file mode 100644 index b643754..0000000 --- a/src/public/stylesheets/dcloud.css +++ /dev/null @@ -1,303 +0,0 @@ -/* Styles for forms */ -form { - border: none; - margin: 0; - padding: 0; - display: inline-block; -} - -fieldset { - border: 3px solid #efeff0; - border-right: none; - border-left: none; - border-bottom: none; - padding: 18px 0 10px 10px; -} - -ul li input { - border:2px solid #becfe4; - color:#333; - display:block; - float:left; - outline-color:-moz-use-text-color; - outline-style:none; - outline-width:medium; - padding:3px; - width:302px;} - -legend { - text-transform: uppercase; - color: #9a9a9a; - font-weight: bold; -} - -input, select { - font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif; - font-size: 1.4em; -} - -.fieldWithErrors { - display:inline-block; - padding: 3px; - background: #fff7b2; - border: 3px solid #fff7b2; -} - -.errorExplanation { - margin: 0 0 24px 0; - padding: 9px; - background: #fff7b2; - color: #867a5e; - -moz-border-radius: 3px; -} - -#errorExplanation h2 { - font-size: 14px; - font-weight: bold; - color: #867a5e; -} - -.dcloud_form { - background: #e8e8e8; - border: solid 8px #f5f5f5; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - margin-top: 54px; - width: 550px ; - margin-left: auto ; - margin-right: auto ; - padding: 36px; -} - -.dcloud_form h2 { - font-size: 1.9em; - font-weight: normal; - color: #43728e; - margin: 0 0 24px 0; - padding: 0; -} - -.dcloud_form ul { - list-style-image: none; - list-style-position: outside; - list-style-type: none; - margin: 0; - padding: 0; -} - -.dcloud_form ul label { - display: block; - float: left; - padding: 3px 0 24px 0; - width: 175px; - font-size: 1.4em; - color: #616161; -} - -.dcloud_form ul label span { - display: block; - float: left; - width: 160px; - font-size: .8em; - color: #9a9a9a; -} - -.dcloud_form ul li { - clear:both; -} - -.dcloud_form .txtfield { - border:2px solid #becfe4; - color:#333; - display:block; - float:left; - outline-color:-moz-use-text-color; - outline-style:none; - outline-width:medium; - padding:3px; - width:318px; -} - -.dcloud_form .submit { - float: right; - display: inline; - clear:both; -} - -/* Styles for table */ -#content_area table { - width:100%; - border-collapse: collapse; -} - -#content_area table th, #content_area table td { - border:1px solid #e1e2e3; - border-right: 0; - border-left: 0; - padding:0; - text-align:left; - font-size: 14px; - line-height: 24px; - padding-left: 18px; -} - -#content_area table th { - background: none; - border-top: none; -} - -#content_area table th a { - display: block; - text-decoration: none; -} - -#content_area table th a:hover { - text-decoration: underline; -} - -.actionlink { - color: #0075c0 !important; - line-height: 36px; - font-size: 14px; - padding-left: 18px; -} - -ul#providers + a.actionlink { - display: block; - border-bottom: 1px solid #ccc; -} - -.submit_link { - background: none; - border:0; - text-decoration: underline; - color: #0075c0; - line-height: 36px; - font-size: 14px; - padding-left: 10px; -} - -.submit_link:hover {cursor:pointer;} - - -/* Styles for the left navigator */ - -#side { - padding: 0; - width: 229px; -} - -#side a.actionlink { - color: #0075c0; - line-height: 36px; - font-size: 14px; - padding-left: 10px; -} - -ul#providers { - list-style-type: none; - margin: 0; - padding: 0 0 0 10px; -} - -ul#providers li a { - display: block; - line-height: 36px; - padding-left: 32px; -} - -ul#providers li a:hover { - background: #efefef url(../images/icon_provider.png) no-repeat 2px 50%; - color: #000; -} - -ul#pools { - list-style-type: none; - line-height: 36px; - margin: 0; - padding: 0 0 0 10px; -} - -ul#pools li { - border-bottom: none; -} - -ul#pools li a { - display: block; - line-height: 36px; - padding-left: 32px; - border-bottom: none; -} - -ul#pools li a:hover { - background: #efefef url(../images/icon_vmpool.png) no-repeat 2px 50%; - color: #000; -} - - -.providername, .poolname { - font-size: 14px; -} - -.providername { - background: url(../images/icon_provider.png) no-repeat 2px 50%; -} - -.providername.selected { - background: #5599B8 url(../images/icon_provider.png) no-repeat 2px 50%; - color: #FFF; -} - -.poolname { - background: url(../images/icon_vmpool.png) no-repeat 2px 50%; -} - -.selected { - background: #f2a922; - color: #FFF; -} - -.poolname.selected { - background: #5599B8 url(../images/icon_vmpool.png) no-repeat 2px 50%; - color: #FFF; -} - -.instance_action_list { - padding: 0; -} - -.instance_action_list li { - padding: 0 0.3em; - border-left: 1px solid #000; - display: inline; -} - -.instance_action_list li.first { - border-left: none; -} - -#instances_table_wrapper { - min-height: 0; - margin-bottom: 1em; -} - -/* Style for button links */ -a.button_link { - border: 1px solid black; - text-decoration : none; - padding : 4px; - margin-bottom: 3px; - display: block; - background: #666666; - color: white; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; -} - -#dashboard-tabs, #provider-tabs, #pool-tabs{ - border: none; -} - -#dashboard-tabs ul, #provider-tabs ul, #pool-tabs ul{ - float: none; -} diff --git a/src/public/stylesheets/ie.css b/src/public/stylesheets/ie.css deleted file mode 100644 index 50a1ece..0000000 --- a/src/public/stylesheets/ie.css +++ /dev/null @@ -1 +0,0 @@ -/* ie only style here */ diff --git a/src/public/stylesheets/layout.css b/src/public/stylesheets/layout.css deleted file mode 100644 index 872440d..0000000 --- a/src/public/stylesheets/layout.css +++ /dev/null @@ -1,250 +0,0 @@ -@charset "UTF-8"; - -/**************** -html elements - **/ - -html { - /*overflow: hidden;*/ - font-size: small; - min-width: 900px; - min-height: 400px; -} - -body { - /*overflow: hidden;*/ - font-family:"Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif; - padding: 0; - margin: 0; - width: 100%; - height: 100%; - background-color:#333333; - font-size: 90%; -} - -img { - border-style: none; -} - - -a { color:#000000; text-decoration: none;} - -h2, h3 { - font-weight: normal; -} - -/************************** -oVirt layout components - **/ - -#header { - padding: 0; - margin: 0; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 90px; - overflow: hidden; - background:#535353 url(../images/bg_header.png) repeat-x top; -} - -#side { - padding: 5px 0 0 5px; - margin: 0; - position: absolute; - top: 70px; - left: 0px; - bottom: 0px; - overflow: auto; - width: 224px; - background-color:#FFFFFF; - border-right: 1px #CCCCCC solid; -} - -#side h3 { - color: #999999; - font-size: 1em; - margin: 1em 1em .5em 1em; - text-transform: uppercase; -} - - -#main { - padding: 0; - margin-left: 0; - position: absolute; - top: 70px; - left: 230px; - right: 0px; - bottom: 0px; - overflow: auto; - background-color:#FFFFFF; - border-left:#CCCCCC solid 0px; -} - -/* ----- Right side of Header -------- */ - -.header_info { - padding: 10px 31px 0px 10px; - margin: 0; - float: right; - text-align: right; - font-size: 100%; - color: #B5B5B5; -} -.header_info a { font-weight: bold; } -.header_info a:link { color: #000; text-decoration: none; } -.header_info a:active { color: #000; text-decoration: none; } -.header_info a:visited { color: #000; text-decoration: none; } -.header_info a:hover { color: #000; text-decoration: none; } - -#textfield_effect { - border-width: 1px; - border-style: solid; - border-color: #7A7A7A; - padding-left: 5px; - background: #4A4A4A; - font-size: 100%; - color: #FFFFFF; - width: 100px; - height: 16px; -} - -/* ----- Blue Tabbed Navigation -------- */ -.ui-tabs-nav { - margin:0; - padding: 0; - background: none; - list-style-type: none; - float: left; - font-size: 110%; -} -.ui-tabs-nav li { - margin: 0 1px 0 1px; - padding: 0; - float: left; -} -.ui-tabs-nav a { - float:left; - padding: 0 15px 0 15px; - color: #CCCCCC; - text-decoration: none; - line-height: 2.3; - height: 24px; - text-align: center; - background: none; - -} -.ui-tabs-nav a:hover {color:#FFFFFF; border-bottom: 5px solid #537585;} -.ui-tabs-nav a:focus, .ui-tabs-nav a:active {outline-style: none;} -.ui-tabs-selected a {color:#FFFFFF; outline-style: none; height: 24px; line-height:1.6; border-bottom: 5px solid #5599B8;} - -.ui-tabs-hide {/*display:none;*/} - -/* ----- PopUp Dialog -------- */ - - -.dialog_title { - background:#DEE7EB; - padding:15px; - width:600px; -} - -.dialog_title_small { - background:#DEE7EB; - padding:15px; - min-width: 500px; -} - -.header { - font-size: 180%; - line-height: 1.6; -} - -.dialog_body { - overflow: auto; - height: 350px; -} - -.confirm_dialog_title { - width:400px; - padding: 15px; - font-size: 110%; - background:url(../images/bg_warningMessage.png) top repeat-x; -} -.confirm_dialog_header { - background:url(../images/icon_warning.png) top left no-repeat; - padding: 0 0 0 45px; - min-height:36px; - -} -.confirm_dialog_footer { - height: 37px; - text-align:right; - padding: 5px 9px 0 0; -} - -.button { - padding: 0 0 0 2px; - float:right; - } - - .button_left_blue { - background:url(../images/button_left.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_blue { - background:url(../images/button_middle.png) repeat-x; - height: 29px; - float: left; - color:#FFFFFF; - line-height: 2.3; - font-size: 105%; - display:block; -} -.button_right_blue { - background:url(../images/button_right.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_blue a {color:#FFFFFF; text-decoration: none; display:block; padding: 0 10px 0 10px;} -.button_middle_blue a:hover {color:#E7EFF6; text-decoration:none; padding: 0 10px 0 10px;} - -.button_left_grey { - background:url(../images/button_left_grey.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_grey { - background:url(../images/button_middle_grey.png) repeat-x; - height: 29px; - float: left; - color:#FFFFFF; - line-height: 2.3; - font-size: 105%; - display:block; -} -.button_right_grey { - background:url(../images/button_right_grey.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_grey a {color:#FFFFFF; text-decoration: none; display:block; padding: 0 10px 0 10px;} -.button_middle_grey a:hover {color:#E7EFF6; text-decoration:none; padding: 0 10px 0 10px;} - - -.fieldWithErrors { - background-color:#FFB2B2; - border:3px solid #FFB2B2; -} - -.errorExplanation { - color:#333333; - padding: 2px; -}
On Wed, 2010-07-14 at 17:37 +0200, tsedovic@redhat.com wrote:
From: Tomas Sedovic tsedovic@redhat.com
This is the first step towards migrating to Compass[1] / Blueprint[2] for our CSS needs.
You need to install the `compass` gem. Run `rake gems:install`.
This removes our CSS files from src/public/stylesheets and replaces them with SASS[3] alternatives. However, this is just a framework change -- UI stays the same for now.
Note that this update makes changes to the stylesheet location:
src/app/stylesheets/*.sass - the stylesheet sources in the SASS language src/stylesheets/compiled/ - CSS files generated from the SASS sources src/stylesheets/ - third-party CSS (like jQueryUI stuff)
Compass watches the *.sass files for changes and updates the compiled CSS automatically.
Mostly ACK, everything looks as before, which is the desired outcome. My only concern is that we are using newer compass/haml than is in fedora. Maybe you could submit a bug for that to be updated? Think Michal may be the maintainer. Other than that, think it is fine to push.
On Wed, 2010-07-14 at 17:37 +0200, tsedovic@redhat.com wrote:
This patch moves the stylesheets away from vanila CSS towards the Compass framework and the SASS indented syntax (similar to HAML).
Right now it's just a backend change -- the UI should stay the same. There's not much point in doing UI changes when it's still prone to big changes.
After you apply this, run `rake gems:install` to install the missing gem (compass). More details in the commit message.
Thomas
FYI, rubygem-compass is available for install as well. Got waylaid chasing bugs today, I'll hopefully get to review this tomorrow.
deltacloud-devel@lists.fedorahosted.org