These patches are the first step towards actually using Compass in Aggregator.
Namely: * a place for defining globally-available mixins and variables * some stylesheet simplification using the Compass goodness * small formating changes
From: Tomas Sedovic tsedovic@redhat.com
The conversion from .sass to .scss caused the stylesheets to have a lispish formatting style (all the closing curly braces on a single line).
We prefer to have each closing brace on a separate line with the propper indentation. --- src/app/stylesheets/components.scss | 216 ++++++++++++++++++++++++----------- src/app/stylesheets/dcloud.scss | 157 ++++++++++++++++++-------- src/app/stylesheets/grid.scss | 19 ++- src/app/stylesheets/layout.scss | 109 ++++++++++++------ 4 files changed, 350 insertions(+), 151 deletions(-)
diff --git a/src/app/stylesheets/components.scss b/src/app/stylesheets/components.scss index c7bc8ff..ba8cbfd 100644 --- a/src/app/stylesheets/components.scss +++ b/src/app/stylesheets/components.scss @@ -9,7 +9,9 @@ text-transform: uppercase; margin-left: 5px; font-weight: bold; - letter-spacing: -0.02em; } } + letter-spacing: -0.02em; + } +}
ul.nav { padding: 0; @@ -24,18 +26,23 @@ ul.nav { color: #b3b3b3; a { color: #313a3d; - text-shadow: 0 1px 1px white; } + text-shadow: 0 1px 1px white; + } &.selected { background: #cbd6db !important; border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; - -moz-box-shadow: 0 1px 1px #efefef; } + -moz-box-shadow: 0 1px 1px #efefef; + } &:hover { background: #dedede; border-radius: 16px; -moz-border-radius: 16px; - -webkit-border-radius: 16px; } } } + -webkit-border-radius: 16px; + } + } +}
.header_menu_wrapper { padding: 0; @@ -43,7 +50,8 @@ ul.nav { float: left; height: 35px; width: 230px; - background: #cccccc; } + background: #cccccc; +}
.header_menu { padding: 5px 0 0 10px; @@ -53,7 +61,8 @@ ul.nav { line-height: 1.5; height: 26px; width: 216px; - border: white solid 1px; } + border: white solid 1px; +}
.header_menu_greybox { padding: 0; @@ -61,17 +70,20 @@ ul.nav { float: left; height: 35px; width: 230px; - background: #cccccc; } + background: #cccccc; +}
#hi-username { margin-right: 15px; - float: left; } + float: left; +}
/* dashboard style */
.dashboard_column { float: left; - width: 50%; } + width: 50%; +}
.dashboard_section_summary { background: #f2f2f2; @@ -82,12 +94,16 @@ ul.nav { p { display: inline; float: left; - margin: 3px 0 3px 0; } + margin: 3px 0 3px 0; + } img { &:first-child { - padding-right: 5px; } + padding-right: 5px; + } vertical-align: middle; - float: right; } } + float: right; + } +}
#getting_started_dashboard_section { background: #f2f2f2; @@ -99,7 +115,8 @@ ul.nav { -moz-border-radius: 5px; -webkit-border-radius: 5px; p { - padding-bottom: 5px; } + padding-bottom: 5px; + } ul { width: 100%; height: 120px; @@ -112,12 +129,18 @@ ul.nav { border-right: 1px solid black; &:last-child { border-right: none; - width: 150px; } } } + width: 150px; + } + } + } img { - height: 91px; } } + height: 91px; + } +}
#getting_started_links a { - float: right; } + float: right; +}
#actions_dashboard_section { height: 100px; @@ -131,13 +154,16 @@ ul.nav { padding: 0; margin: 0 0 15px; letter-spacing: -0.02em; - color: #4b5d63; } + color: #4b5d63; + } a { display: block; float: left; margin: 0px 15px 5px 0px; color: #0075c0; - text-decoration: underline; } } + text-decoration: underline; + } +}
#service_quality_dashboard_section { border: 1px solid #dddddd; @@ -150,19 +176,23 @@ ul.nav { padding: 0; margin: 0 0 15px; letter-spacing: -0.02em; - color: #4b5d63; } } + color: #4b5d63; + } +}
.provider_service_quality_graph { width: 100px; height: 50px; float: left; - margin: 0px 5px 0px 5px; } + margin: 0px 5px 0px 5px; +}
.provider_service_quality_graph_summary { float: left; width: 60px; height: 15px; - padding: 20px 0 24px 0; } + padding: 20px 0 24px 0; +}
#key_indicators_dashboard_section { height: 220px; @@ -176,7 +206,8 @@ ul.nav { padding: 0; margin: 0 0 15px; letter-spacing: -0.02em; - color: #4b5d63; } + color: #4b5d63; + } ul { float: left !important; width: 195px; @@ -186,15 +217,21 @@ ul.nav { li { width: 80%; margin: 0; - padding-bottom: 10px; } } + padding-bottom: 10px; + } + } .count { - float: right; } + float: right; + } .instance_graph { - float: left; } } + float: left; + } +}
#provider_instances_graph { width: 250px; - float: left; } + float: left; +}
#quota_usage_dashboard_section { border: 1px solid #dddddd; @@ -208,13 +245,16 @@ ul.nav { padding: 0; margin: 0 0 15px; letter-spacing: -0.02em; - color: #4b5d63; } } + color: #4b5d63; + } +}
.account_quota_usage_graph_summary { padding: 15px 15px; display: inline; float: left; - width: 45%; } + width: 45%; +}
.account_quota_usage_graph_key { float: right; @@ -223,7 +263,8 @@ ul.nav { text-align: right; width: 100%; height: 20px; - padding: 0 15px 0 0; } + padding: 0 15px 0 0; +}
.account_quota_usage_history_graph { display: inline; @@ -231,20 +272,23 @@ ul.nav { margin-left: 10px; border: 1px solid black; width: 120px; - height: 20px; } + height: 20px; +}
.account_quota_usage_current_graph { display: inline; float: left; margin: 0 0 10px 10px; width: 140px; - height: 50px; } + height: 50px; +}
.pool_quota_usage_summary { display: inline; float: left; padding-left: 15px; - width: 15%; } + width: 15%; +}
.pool_quota_usage_limit { display: inline; @@ -252,7 +296,8 @@ ul.nav { width: 33%; height: 25px; border: 1px solid black; - margin-left: 17px; } + margin-left: 17px; +}
.pool_quota_usage_instances { display: inline; @@ -261,7 +306,8 @@ ul.nav { height: 25px; border: 1px solid black; margin-left: 17px; - margin-bottom: 15px; } + margin-bottom: 15px; +}
#image_descriptor_nav { margin: 2px 0px 0 0px; @@ -270,7 +316,8 @@ ul.nav { height: 29px; font-weight: normal; padding: 10px 10px 0px 10px; - margin: 0px; } + margin: 0px; + } ul { margin: 20px; width: 100%; @@ -285,14 +332,20 @@ ul.nav { clear: none; font-size: 1em; h4 { - margin-top: 0px; - margin-bottom: 0.5em; } + margin-top: 0px; + margin-bottom: 0.5em; + } p { margin-top: 0; margin-bottom: 2em; - color: gray; } + color: gray; + } &.selected p { - color: black; } } } } + color: black; + } + } + } +}
#image_descriptor_form { border: none; @@ -302,7 +355,8 @@ ul.nav { margin: 20px; display: inline-block; input { - width: auto; } + width: auto; + } ul li { textarea, select, input[type=text] { width: 302px; @@ -312,19 +366,24 @@ ul.nav { border-bottom: 1px solid #7f7f7f; border-left: 1px solid black; border-right: 1px solid black; - -moz-border-radius: 4px; } } + -moz-border-radius: 4px; + } + } .description { float: left; width: 300px; font-size: 95%; padding-left: 1em; - padding-bottom: 20px; } + padding-bottom: 20px; + } label { color: black; font-size: 90%; font-weight: bold; &.plain { - font-weight: normal; } } + font-weight: normal; + } + } .pkglist { float: left; width: 380px; @@ -332,46 +391,63 @@ ul.nav { overflow: auto; background-color: white; border: 2px solid #cccccc; - -moz-border-radius: 6px; } + -moz-border-radius: 6px; + } .submit { - padding-top: 20px; } + padding-top: 20px; + } .pkglist .action_link { float: right; width: 60px !important; - color: blue; } + color: blue; + } .closed_folder { background-image: url(/images/dir_closed.png); - background-repeat: no-repeat; } + background-repeat: no-repeat; + } .opened_folder { background-image: url(/images/dir_open.png); - background-repeat: no-repeat; } + background-repeat: no-repeat; + } .groupname { - cursor: pointer; } + cursor: pointer; + } .hidden { - display: none; } + display: none; + } .selection_list > li { - padding-bottom: 10px; } + padding-bottom: 10px; + } .group, .groupkgs { - padding-left: 20px; } + padding-left: 20px; + } .pkglist .ui-tabs { padding: 0; .ui-tabs-panel { - padding: 1em 0.5em; } } + padding: 1em 0.5em; + } + } .left-pkglist .ui-widget-header { height: 26px; - padding: 10px; } + padding: 10px; + } .pkglist { ul.ui-tabs-nav { background-color: white; width: 379px; - height: 44px; } + height: 44px; + } .select_repository { float: right; padding: 5px 0px 5px 0px; select { - width: 150px; } } } + width: 150px; + } + } + } .selection_list { - padding: 10px; } + padding: 10px; + } .side_panel { width: 150px; float: left; @@ -382,9 +458,12 @@ ul.nav { label { float: none; font-size: 1em; - padding: 5px; } + padding: 5px; + } li { - padding-bottom: 20px; } } + padding-bottom: 20px; + } + } .main_panel { width: 580px; float: left; @@ -396,10 +475,14 @@ ul.nav { border-bottom: 1px solid #cccccc; padding: 10px; input { - font-size: 1em; } } } + font-size: 1em; + } + } + } .expand_target_list_button { float: right; - display: none; } + display: none; + } .target_list { li { border: 1px solid #cccccc; @@ -407,9 +490,12 @@ ul.nav { padding: 5px; .status, .actions { float: right; - width: 100px; } } + width: 100px; + } + } .empty { text-align: center; - padding: 30px; } } } - -/* dcloud form redefines all input fields */ + padding: 30px; + } + } +} diff --git a/src/app/stylesheets/dcloud.scss b/src/app/stylesheets/dcloud.scss index ef4ff2f..7636974 100644 --- a/src/app/stylesheets/dcloud.scss +++ b/src/app/stylesheets/dcloud.scss @@ -2,14 +2,16 @@ form { border: none; margin: 0; padding: 0; - display: inline-block; } + display: inline-block; +}
fieldset { border: 3px solid #efeff0; border-right: none; border-left: none; border-bottom: none; - padding: 18px 0 10px 10px; } + padding: 18px 0 10px 10px; +}
ul li input { border: 2px solid #becfe4; @@ -20,34 +22,40 @@ ul li input { outline-style: none; outline-width: medium; padding: 3px; - width: 302px; } + width: 302px; +}
legend { text-transform: uppercase; color: #9a9a9a; - font-weight: bold; } + 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; } + font-size: 1.4em; +}
.fieldWithErrors { display: inline-block; padding: 3px; background: #fff7b2; - border: 3px solid #fff7b2; } + border: 3px solid #fff7b2; +}
.errorExplanation { margin: 0 0 24px 0; padding: 9px; background: #fff7b2; color: #867a5e; - -moz-border-radius: 3px; } + -moz-border-radius: 3px; +}
#errorExplanation h2 { font-size: 14px; font-weight: bold; - color: #867a5e; } + color: #867a5e; +}
.dcloud_form { background: #e8e8e8; @@ -64,7 +72,8 @@ input, select { font-weight: normal; color: #43728e; margin: 0 0 24px 0; - padding: 0; } + padding: 0; + } ul { list-style-image: none; list-style-position: outside; @@ -83,9 +92,13 @@ input, select { float: left; width: 160px; font-size: 0.8em; - color: #9a9a9a; } } + color: #9a9a9a; + } + } li { - clear: both; } } + clear: both; + } + } .txtfield { border: 2px solid #becfe4; color: #333333; @@ -95,11 +108,14 @@ input, select { outline-style: none; outline-width: medium; padding: 3px; - width: 318px; } + width: 318px; + } .submit { float: right; display: inline; - clear: both; } } + clear: both; + } +}
/* Styles for table */
@@ -114,7 +130,8 @@ input, select { text-align: left; font-size: 14px; line-height: 24px; - padding-left: 18px; } + padding-left: 18px; + } th { background: none; border-top: none; @@ -122,16 +139,22 @@ input, select { display: block; text-decoration: none; &:hover { - text-decoration: underline; } } } } + text-decoration: underline; + } + } + } +}
.actionlink { color: #0075c0 !important; line-height: 36px; font-size: 14px; - padding-left: 18px; } + padding-left: 18px; +}
ul#providers + a.actionlink { - display: block; } + display: block; +}
.submit_link { background: none; @@ -142,7 +165,9 @@ ul#providers + a.actionlink { font-size: 14px; padding-left: 10px; &:hover { - cursor: pointer; } } + cursor: pointer; + } +}
/* Styles for the left navigator */
@@ -153,7 +178,9 @@ ul#providers + a.actionlink { color: #0075c0; line-height: 36px; font-size: 14px; - padding-left: 10px; } } + padding-left: 10px; + } +}
$provider_icon: "/images/icon_provider.png"; $pool_icon: "/images/icon_vmpool.png"; @@ -170,7 +197,10 @@ ul { width: 224px; &:hover { background: #efefef url($provider_icon) no-repeat 2px 50%; - color: black; } } } + color: black; + } + } + } &#pools { list-style-type: none; line-height: 36px; @@ -185,27 +215,38 @@ ul { border-bottom: none; &:hover { background: #efefef url($pool_icon) no-repeat 2px 50%; - color: black; } } } } } + color: black; + } + } + } + } +}
.providername, .poolname { - font-size: 14px; } + font-size: 14px; +}
.providername { background: url($provider_icon) no-repeat 2px 50%; &.selected { background: #5599b8 url($provider_icon) no-repeat 2px 50%; - color: white; } } + color: white; + } +}
.poolname { - background: url($pool_icon) no-repeat 2px 50%; } + background: url($pool_icon) no-repeat 2px 50%; +}
.selected { background: #f2a922; - color: white; } + color: white; +}
.poolname.selected { background: #5599b8 url($pool_icon) no-repeat 2px 50%; - color: white; } + color: white; +}
.instance_action_list { padding: 0; @@ -214,11 +255,15 @@ ul { border-left: 1px solid black; display: inline; &.first { - border-left: none; } } } + border-left: none; + } + } +}
#instances_table_wrapper { min-height: 0; - margin-bottom: 1em; } + margin-bottom: 1em; +}
/* Style for button links */
@@ -231,13 +276,16 @@ a.button_link { background: #666666; color: white; -moz-border-radius: 5px; - -webkit-border-radius: 5px; } + -webkit-border-radius: 5px; +}
#dashboard-tabs, #provider-tabs, #pool-tabs { - border: none; } + border: none; +}
#dashboard-tabs ul, #provider-tabs ul, #pool-tabs ul { - float: none; } + float: none; +}
/* paginated data table */ .dtable { @@ -245,49 +293,66 @@ a.button_link { width: 96%; margin: 20px 2% 20px 2%; .wrapped_table { - border: 1px solid #bbbbbb; } + border: 1px solid #bbbbbb; + } table { - width: 100%; } + width: 100%; + } .dtable_form { - width: 100%; } + width: 100%; + } tbody tr:hover { - background-color: #eeeeee; } + background-color: #eeeeee; + } table th { - text-align: left; } + text-align: left; + } .ordercol { background-position: left center; background-repeat: no-repeat; - padding-left: 20px; } + padding-left: 20px; + } .asc { - background-image: url(/images/Sort_down_11.png); } + background-image: url(/images/Sort_down_11.png); + } .desc { - background-image: url(/images/Sort_up_11.png); } + background-image: url(/images/Sort_up_11.png); + } .header { height: 25px; background-color: #eeeeee; - border-bottom: 1px solid #bbbbbb; } + border-bottom: 1px solid #bbbbbb; + } .footer { height: 24px; background-color: #eeeeee; border-top: 1px solid #bbbbbb; line-height: 1.8; - padding-left: 10px; } + padding-left: 10px; + } .search_field { font-size: 14px; position: absolute; top: 0px; - right: 1px; } + right: 1px; + } .search_field input { - font-size: 14px; } + font-size: 14px; + } .pagination { float: right; padding-right: 10px; a { - color: blue; } } + color: blue; + } + } .title { font-size: 15px; font-weight: bold; - padding-left: 10px; } + padding-left: 10px; + } .action_buttons { padding-top: 10px; - padding-bottom: 10px; } } + padding-bottom: 10px; + } +} diff --git a/src/app/stylesheets/grid.scss b/src/app/stylesheets/grid.scss index bb3305f..3b231ca 100644 --- a/src/app/stylesheets/grid.scss +++ b/src/app/stylesheets/grid.scss @@ -8,10 +8,12 @@
// The following generates the default grids provided by the css version of 960.gs .container_12 { - @include grid-system(12); } + @include grid-system(12); +}
.container_16 { - @include grid-system(16); } + @include grid-system(16); +}
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
@@ -23,10 +25,15 @@ $ninesixty-columns: 24; #footer, #sidebar, #main-content { - @include grid-unit-base; } + @include grid-unit-base; + } #header, #footer { - @include grid-width(24); } + @include grid-width(24); + } #sidebar { - @include grid-width(8); } + @include grid-width(8); + } #main-content { - @include grid-width(16); } } + @include grid-width(16); + } +} diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss index b94fed3..9e00da6 100644 --- a/src/app/stylesheets/layout.scss +++ b/src/app/stylesheets/layout.scss @@ -3,7 +3,8 @@ html { font-size: small; min-width: 900px; - min-height: 400px; } + min-height: 400px; +}
body { font-family: "Lucida Grande", "Luxi Sans", "Bitstream Vera Sans", "Trebuchet MS", helvetica, verdana, arial, sans-serif; @@ -12,17 +13,21 @@ body { width: 100%; height: 100%; background-color: #333333; - font-size: 90%; } + font-size: 90%; +}
img { - border-style: none; } + border-style: none; +}
a { color: black; - text-decoration: none; } + text-decoration: none; +}
h2, h3 { - font-weight: normal; } + font-weight: normal; +}
#header { padding: 0; @@ -33,7 +38,8 @@ h2, h3 { width: 100%; height: 90px; overflow: hidden; - background: #535353 url(/images/bg_header.png) repeat-x top; } + background: #535353 url(/images/bg_header.png) repeat-x top; +}
#content { position: absolute; @@ -42,7 +48,8 @@ h2, h3 { right: 0px; bottom: 0px; overflow: auto; - background-color: white; } + background-color: white; +}
#side { padding: 5px 0 0 5px; @@ -59,7 +66,9 @@ h2, h3 { color: #999999; font-size: 1em; margin: 1em 1em 0.5em 1em; - text-transform: uppercase; } } + text-transform: uppercase; + } +}
#main { padding: 0; @@ -68,7 +77,8 @@ h2, h3 { bottom: 0px; overflow: auto; background-color: white; - border-left: #cccccc solid 0px; } + border-left: #cccccc solid 0px; +}
/* ----- Right side of Header -------- */
@@ -83,7 +93,10 @@ h2, h3 { font-weight: bold; &:link, &:active, &:visited, &:hover { color: black; - text-decoration: none; } } } + text-decoration: none; + } + } +}
#textfield_effect { border-width: 1px; @@ -94,7 +107,8 @@ h2, h3 { font-size: 100%; color: white; width: 100px; - height: 16px; } + height: 16px; +}
/* ----- Blue Tabbed Navigation -------- */
@@ -108,7 +122,8 @@ h2, h3 { li { margin: 0 1px 0 1px; padding: 0; - float: left; } + float: left; + } a { float: left; padding: 0 15px 0 15px; @@ -120,65 +135,80 @@ h2, h3 { background: none; &:hover { color: white; - border-bottom: 5px solid #537585; } + border-bottom: 5px solid #537585; + } &:focus, &:active { - outline-style: none; } } } + outline-style: none; + } + } +}
.ui-tabs-selected a { color: white; outline-style: none; height: 24px; line-height: 1.6; - border-bottom: 5px solid #5599b8; } + border-bottom: 5px solid #5599b8; +}
.ui-tabs-hide { - /*display:none; */ } + /*display:none; */ +}
/* ----- PopUp Dialog -------- */
.dialog_title { background: #dee7eb; padding: 15px; - width: 600px; } + width: 600px; +}
.dialog_title_small { background: #dee7eb; padding: 15px; - min-width: 500px; } + min-width: 500px; +}
.header { font-size: 180%; - line-height: 1.6; } + line-height: 1.6; +}
.dialog_body { overflow: auto; - height: 350px; } + height: 350px; +}
.confirm_dialog_title { width: 400px; padding: 15px; font-size: 110%; - background: url(/images/bg_warningMessage.png) top repeat-x; } + 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; } + min-height: 36px; +}
.confirm_dialog_footer { height: 37px; text-align: right; - padding: 5px 9px 0 0; } + padding: 5px 9px 0 0; +}
.button { padding: 0 0 0 2px; - float: right; } + float: right; +}
.button_left_blue { background: url(/images/button_left.png) no-repeat; width: 6px; height: 29px; - float: left; } + float: left; +}
.button_middle_blue { background: url(/images/button_middle.png) repeat-x; @@ -187,13 +217,15 @@ h2, h3 { color: white; line-height: 2.3; font-size: 105%; - display: block; } + display: block; +}
.button_right_blue { background: url(/images/button_right.png) no-repeat; width: 6px; height: 29px; - float: left; } + float: left; +}
.button_middle_blue a { color: white; @@ -203,13 +235,16 @@ h2, h3 { &:hover { color: #e7eff6; text-decoration: none; - padding: 0 10px 0 10px; } } + padding: 0 10px 0 10px; + } +}
.button_left_grey { background: url(/images/button_left_grey.png) no-repeat; width: 6px; height: 29px; - float: left; } + float: left; +}
.button_middle_grey { background: url(/images/button_middle_grey.png) repeat-x; @@ -218,13 +253,15 @@ h2, h3 { color: white; line-height: 2.3; font-size: 105%; - display: block; } + display: block; +}
.button_right_grey { background: url(/images/button_right_grey.png) no-repeat; width: 6px; height: 29px; - float: left; } + float: left; +}
.button_middle_grey a { color: white; @@ -234,12 +271,16 @@ h2, h3 { &:hover { color: #e7eff6; text-decoration: none; - padding: 0 10px 0 10px; } } + padding: 0 10px 0 10px; + } +}
.fieldWithErrors { background-color: #ffb2b2; - border: 3px solid #ffb2b2; } + border: 3px solid #ffb2b2; +}
.errorExplanation { color: #333333; - padding: 2px; } + padding: 2px; +}
From: Tomas Sedovic tsedovic@redhat.com
This adds a stylesheet whose definitions will be available across all our other stylesheets.
It contains one mixin that provides cross-browser rounded corners. --- src/app/stylesheets/_base.scss | 5 +++++ src/app/stylesheets/components.scss | 29 ++++++++++------------------- src/app/stylesheets/dcloud.scss | 10 +++++----- src/app/stylesheets/layout.scss | 1 + 4 files changed, 21 insertions(+), 24 deletions(-) create mode 100644 src/app/stylesheets/_base.scss
diff --git a/src/app/stylesheets/_base.scss b/src/app/stylesheets/_base.scss new file mode 100644 index 0000000..6c86b0f --- /dev/null +++ b/src/app/stylesheets/_base.scss @@ -0,0 +1,5 @@ +@mixin border-radius($radius) { + border-radius: $radius; + -moz-border-radius: $radius; + -webkit-border-radius: $radius; +} diff --git a/src/app/stylesheets/components.scss b/src/app/stylesheets/components.scss index ba8cbfd..4f3ca4c 100644 --- a/src/app/stylesheets/components.scss +++ b/src/app/stylesheets/components.scss @@ -1,3 +1,4 @@ +@import "base"; /* header style */
.header_logo { @@ -30,16 +31,12 @@ ul.nav { } &.selected { background: #cbd6db !important; - border-radius: 16px; - -moz-border-radius: 16px; - -webkit-border-radius: 16px; + @include border-radius(16px); -moz-box-shadow: 0 1px 1px #efefef; } &:hover { background: #dedede; - border-radius: 16px; - -moz-border-radius: 16px; - -webkit-border-radius: 16px; + @include border-radius(16px); } } } @@ -112,8 +109,7 @@ ul.nav { padding: 10px; margin: 10px 0px 10px 5px; border: 1px solid black; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; + @include border-radius(5px); p { padding-bottom: 5px; } @@ -147,8 +143,7 @@ ul.nav { border: 1px solid #dddddd; padding: 15px; margin: 5px 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; + @include border-radius(5px); -moz-box-shadow: 0 1px 3px #cccccc; h2 { padding: 0; @@ -169,8 +164,7 @@ ul.nav { border: 1px solid #dddddd; padding: 15px; margin: 0 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; + @include border-radius(5px); -moz-box-shadow: 0 1px 3px #cccccc; h2 { padding: 0; @@ -199,8 +193,7 @@ ul.nav { border: 1px solid #dddddd; padding: 15px; margin: 0 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; + @include border-radius(5px); -moz-box-shadow: 0 1px 3px #cccccc; h2 { padding: 0; @@ -237,9 +230,7 @@ ul.nav { border: 1px solid #dddddd; padding: 15px; margin: 5px 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; + @include border-radius(5px); -moz-box-shadow: 0 1px 3px #cccccc; h2 { padding: 0; @@ -366,7 +357,7 @@ ul.nav { border-bottom: 1px solid #7f7f7f; border-left: 1px solid black; border-right: 1px solid black; - -moz-border-radius: 4px; + @include border-radius(4px); } } .description { @@ -391,7 +382,7 @@ ul.nav { overflow: auto; background-color: white; border: 2px solid #cccccc; - -moz-border-radius: 6px; + @include border-radius(6px); } .submit { padding-top: 20px; diff --git a/src/app/stylesheets/dcloud.scss b/src/app/stylesheets/dcloud.scss index 7636974..3bddd34 100644 --- a/src/app/stylesheets/dcloud.scss +++ b/src/app/stylesheets/dcloud.scss @@ -1,3 +1,5 @@ +@import "base"; + form { border: none; margin: 0; @@ -48,7 +50,7 @@ input, select { padding: 9px; background: #fff7b2; color: #867a5e; - -moz-border-radius: 3px; + @include border-radius(3px); }
#errorExplanation h2 { @@ -60,8 +62,7 @@ input, select { .dcloud_form { background: #e8e8e8; border: solid 8px #f5f5f5; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; + @include border-radius(10px); margin-top: 54px; width: 550px; margin-left: auto; @@ -275,8 +276,7 @@ a.button_link { display: block; background: #666666; color: white; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; + @include border-radius(5px); }
#dashboard-tabs, #provider-tabs, #pool-tabs { diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss index 9e00da6..b871a26 100644 --- a/src/app/stylesheets/layout.scss +++ b/src/app/stylesheets/layout.scss @@ -1,4 +1,5 @@ @charset "UTF-8"; +@import "base";
html { font-size: small;
From: Tomas Sedovic tsedovic@redhat.com
--- src/app/stylesheets/_base.scss | 3 +++ src/app/stylesheets/screen.scss | 8 -------- src/app/views/layouts/aggregator.haml | 3 --- 3 files changed, 3 insertions(+), 11 deletions(-) delete mode 100644 src/app/stylesheets/screen.scss
diff --git a/src/app/stylesheets/_base.scss b/src/app/stylesheets/_base.scss index 6c86b0f..8e475a8 100644 --- a/src/app/stylesheets/_base.scss +++ b/src/app/stylesheets/_base.scss @@ -1,3 +1,6 @@ +@import "grid"; +@import "text"; + @mixin border-radius($radius) { border-radius: $radius; -moz-border-radius: $radius; diff --git a/src/app/stylesheets/screen.scss b/src/app/stylesheets/screen.scss deleted file mode 100644 index be2e0cb..0000000 --- a/src/app/stylesheets/screen.scss +++ /dev/null @@ -1,8 +0,0 @@ -/* 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 b9fd4df..8173c33 100644 --- a/src/app/views/layouts/aggregator.haml +++ b/src/app/views/layouts/aggregator.haml @@ -6,9 +6,6 @@ Deltacloud = yield :title
- = stylesheet_link_tag 'compiled/grid.css', :media => 'screen, projection' - = stylesheet_link_tag 'compiled/text.css', :media => 'screen, projection' - = stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection' = stylesheet_link_tag 'compiled/layout' = stylesheet_link_tag 'compiled/components' = stylesheet_link_tag 'compiled/dcloud'
From: Tomas Sedovic tsedovic@redhat.com
--- src/app/stylesheets/dcloud.scss | 64 +++++++++++--------------------------- 1 files changed, 19 insertions(+), 45 deletions(-)
diff --git a/src/app/stylesheets/dcloud.scss b/src/app/stylesheets/dcloud.scss index 3bddd34..36fce3d 100644 --- a/src/app/stylesheets/dcloud.scss +++ b/src/app/stylesheets/dcloud.scss @@ -186,57 +186,36 @@ ul#providers + a.actionlink { $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 { +@mixin list-menu($icon) { + line-height: 36px; + list-style-type: none; + margin: 0; + padding: 0 0 0 10px; + li { + font-size: 14px; + a { display: block; - line-height: 36px; padding-left: 32px; width: 224px; + background: url($icon) no-repeat 2px 50%; &:hover { - background: #efefef url($provider_icon) no-repeat 2px 50%; - color: black; + background-color: #efefef; } - } - } - &#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: black; - } + &.selected { + background-color: #5599b8; + color: white; } } } }
-.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: white; +ul { + &#providers { + @include list-menu($provider_icon); + } + &#pools { + @include list-menu($pool_icon); } -} - -.poolname { - background: url($pool_icon) no-repeat 2px 50%; }
.selected { @@ -244,11 +223,6 @@ ul { color: white; }
-.poolname.selected { - background: #5599b8 url($pool_icon) no-repeat 2px 50%; - color: white; -} - .instance_action_list { padding: 0; li {
On Tue, 2010-08-31 at 19:48 +0200, tsedovic@redhat.com wrote:
These patches are the first step towards actually using Compass in Aggregator.
Namely:
- a place for defining globally-available mixins and variables
- some stylesheet simplification using the Compass goodness
- small formating changes
ACK to the series, with one comment on 3/4 (just repeating what we discussed privately so we don't forget). We should probably keep screen.scss and import dcloud (which will need a rename, not sure how we still have that old one), components, and layout. That way from layout template, we only load one css file, as compass will compile them together for us. As I said, this can be an optimization later, as the ui guys may well want to start over on much/all of the css anyway, given the completely new look under development there.
-j
On Wed, 2010-09-01 at 11:24 -0400, Jason Guiditta wrote:
On Tue, 2010-08-31 at 19:48 +0200, tsedovic@redhat.com wrote:
These patches are the first step towards actually using Compass in Aggregator.
Namely:
- a place for defining globally-available mixins and variables
- some stylesheet simplification using the Compass goodness
- small formating changes
ACK to the series, with one comment on 3/4 (just repeating what we discussed privately so we don't forget). We should probably keep screen.scss and import dcloud (which will need a rename, not sure how we still have that old one), components, and layout. That way from layout template, we only load one css file, as compass will compile them together for us. As I said, this can be an optimization later, as the ui guys may well want to start over on much/all of the css anyway, given the completely new look under development there.
-j
BTW, I just pushed this series, just wanted to make sure it was in for some other ui work.
-j
deltacloud-devel@lists.fedorahosted.org