From 6fa95a3d34838bf80d4fe69c9605640806d346ac Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 12 Jun 2012 14:58:44 +0300 Subject: [PATCH] CSS refactored --- app/assets/stylesheets/common.scss | 211 ----------------- app/assets/stylesheets/header.scss | 226 +++++++++++++++++++ app/assets/stylesheets/main.scss | 20 +- app/assets/stylesheets/nav.scss | 93 ++++++++ app/assets/stylesheets/themes/ui_basic.scss | 104 --------- app/assets/stylesheets/themes/ui_mars.scss | 49 +--- app/assets/stylesheets/themes/ui_modern.scss | 139 +++--------- app/views/projects/index.html.haml | 3 +- 8 files changed, 373 insertions(+), 472 deletions(-) create mode 100644 app/assets/stylesheets/header.scss create mode 100644 app/assets/stylesheets/nav.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 57d21360..5ce1b64c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -22,217 +22,6 @@ float:right; } -/** - * Common header style - * - */ -header { - /* Account box */ - .account-box { - position: absolute; - right: 0; - top: 13px; - z-index: 10000; - width: 128px; - font-size: 11px; - float: right; - display: block; - cursor: pointer; - img { - border-radius: 4px; - right: 0px; - position: absolute; - width: 33px; - height: 33px; - display: block; - top: 0; - &:after { - content: " "; - display: block; - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - float: right; - border-radius: 5px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-bottom: 0; - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); - background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); - -webkit-background-origin: border-box; - -moz-background-origin: border; - background-origin: border-box; } } } - - .account-box { - &.hover { - height: 138px; } - &:hover > .account-links { - display: block; } } - - .account-links { - background: #79C3E0; - display: none; - border-radius: 5px; - width: 100px; - margin-top: 0; - float: right; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - position: relative; - &:before { - content: "."; - width: 0; - height: 0; - position: absolute; - border: 5px solid transparent; - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #333; - text-indent: -9999px; - top: -10px; - line-height: 0; - right: 10px; - z-index: 10; } - background: #333; - display: none; - z-index: 100000; - border-radius: 5px; - width: 100px; - position: absolute; - right: 10px; - top: 46px; - margin-top: 0; - float: right; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - a { - color: #EEE; - padding: 6px 10px; - display: block; - text-shadow: none; - border-bottom: 1px solid #555; - &:hover { - color:#eee; - background: #444; - } - } - } - - .account-box.hover .arrow-up { - top: 41px; - right: 6px; - position: absolute; } - - .account-links a { - &:first-child { - -webkit-border-top-left-radius: 5px; - -webkit-border-top-right-radius: 5px; - -moz-border-radius-topleft: 5px; - -moz-border-radius-topright: 5px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; } - &:last-child { - -webkit-border-bottom-right-radius: 5px; - -webkit-border-bottom-left-radius: 5px; - -moz-border-radius-bottomright: 5px; - -moz-border-radius-bottomleft: 5px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; - border-bottom: 0; } } -} - -/* - * Main Menu of Application - * - */ -nav.main_menu { - border-radius: 4px; - margin: auto; - margin:30px 0; - background:#eee; - border:1px solid #bbb; - height:38px; - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); - @include shade; - .count { - position: relative; - top: -1px; - display: inline-block; - height: 15px; - margin: 0 0 0 5px; - padding: 0 8px 1px 8px; - height: auto; - font-size: 0.82em; - line-height: 14px; - text-align: center; - color: #777; - background: #f2f2f2; - border-top: 1px solid #CCC; - border-radius: 8px; - -moz-border-radius: 8px; - } - .label { - background:$hover; - text-shadow:none; - color:$style_color; - } - a { - // Landscape phone to portrait tablet - @media (max-width: 1080px) { min-width:35px; } - // Portrait tablet to landscape and desktop - @media (min-width: 1080px) and (max-width: 1200px) { min-width:40px; } - // Large desktop - @media (min-width: 1200px) { min-width:55px; } - - text-align:center; - font-weight:bold; - &:first-child{ - -webkit-border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-topleft: 4px; - -moz-border-radius-bottomleft: 4px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - border-left: 0; - } - padding: 10px 25px; - display: inline-block; - color: $style_color; - position: relative; - margin: 0; - float:left; - text-shadow:0 1px 1px white; - border-right: 1px solid #DDD; - border-left: 1px solid #EEE; - - &.home { - background: url(home_icon.PNG) no-repeat center center; - text-indent:-9999px; - //min-width:40px; - img { - position:relative; - top:4px; - } - } - &.current { - background-color:#D5D5D5; - border-bottom: 2px solid #474D57; - border-right: 1px solid #BBB; - border-left: 1px solid #BBB; - border-radius: 0 0 1px 1px; - &:first-child{ - border-bottom:none; - } - } - } -} -/* - * End of Main Menu - * - */ - .profile_avatar_holder { float:left; width:60px; diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss new file mode 100644 index 00000000..6a6b9fbc --- /dev/null +++ b/app/assets/stylesheets/header.scss @@ -0,0 +1,226 @@ +/* + * Application Header + * + */ +header { + width:100%; + padding:0; + margin:0; + top:1px; + left:0; + background: #F1F1F1; /* for non-css3 browsers */ + border-bottom: 1px solid #ccc; + box-shadow: 0 -1px 0 white inset; + -moz-box-shadow: 0 -1px 0 white inset; + -webkit-box-shadow: 0 -1px 0 white inset; + z-index:10; + height:60px; + + /** + * + * Logo holder + * + */ + .app_logo { + width:230px; + float:left; + position:relative; + top:-5px; + + a { + float:left; + + h1 { + text-indent:-9999px; + width:102px; + background: url('logo_text.png') no-repeat 0px -3px; + float:left; + margin-left:5px; + font-size:20px; + line-height:36px; + font-weight:bold; + color:#aaa; + text-shadow: 0 1px 1px #FFF; + padding-left:50px; + } + } + .separator { + margin-left:20px; + float: left; + height: 60px; + width: 1px; + background: white; + border-left: 1px solid #DDD; + margin-top: -10px; + } + } + .container { + .top_panel_content { + margin:auto; + position:relative; + padding:15px 0; + } + } + + /** + * + * Project / Area name + * + */ + .project_name { + float:left; + margin:0; + margin-right:30px; + font-size:20px; + line-height:36px; + font-weight:bold; + color:$style_color; + text-shadow: 0 1px 1px #FFF; + } + + .fbtn { + float: right; + margin-right:10px; + .btn { + margin-left:8px; + } + } + + + /** + * + * Search box + * + */ + .search { + float: right; + margin-right: 55px; + + .search-input { + width:130px; + background-image: url("icon-search.png"); + background-repeat: no-repeat; + background-position: 10px; + padding-left:25px; + @include border-radius(5px); + border:1px solid #ccc; + } + } + + /** + * + * Account box + * + */ + .account-box { + position: absolute; + right: 0; + top: 13px; + z-index: 10000; + width: 128px; + font-size: 11px; + float: right; + display: block; + cursor: pointer; + img { + border-radius: 4px; + right: 0px; + position: absolute; + width: 33px; + height: 33px; + display: block; + top: 0; + &:after { + content: " "; + display: block; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + float: right; + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 0; + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); + background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); + -webkit-background-origin: border-box; + -moz-background-origin: border; + background-origin: border-box; } } } + + .account-box { + &.hover { + height: 138px; } + &:hover > .account-links { + display: block; } } + + .account-links { + background: #79C3E0; + display: none; + border-radius: 5px; + width: 100px; + margin-top: 0; + float: right; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + position: relative; + &:before { + content: "."; + width: 0; + height: 0; + position: absolute; + border: 5px solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #333; + text-indent: -9999px; + top: -10px; + line-height: 0; + right: 10px; + z-index: 10; } + background: #333; + display: none; + z-index: 100000; + border-radius: 5px; + width: 100px; + position: absolute; + right: 10px; + top: 46px; + margin-top: 0; + float: right; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + a { + color: #EEE; + padding: 6px 10px; + display: block; + text-shadow: none; + border-bottom: 1px solid #555; + &:hover { + color:#eee; + background: #444; + } + } + } + + .account-box.hover .arrow-up { + top: 41px; + right: 6px; + position: absolute; } + + .account-links a { + &:first-child { + -webkit-border-top-left-radius: 5px; + -webkit-border-top-right-radius: 5px; + -moz-border-radius-topleft: 5px; + -moz-border-radius-topright: 5px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; } + &:last-child { + -webkit-border-bottom-right-radius: 5px; + -webkit-border-bottom-left-radius: 5px; + -moz-border-radius-bottomright: 5px; + -moz-border-radius-bottomleft: 5px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + border-bottom: 0; } } +} + diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 851d4295..7bf56cd0 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -64,14 +64,28 @@ $hover: #FDF5D9; border-radius: $radius; } + + +/** + * Header of application. + * Contain application logo, search panel, profile icon + */ +@import "header.scss"; + +/** + * Navigation menu of application. + * Panel with links to pages depends on project, profile or admin area + */ +@import "nav.scss"; + /** * This file represent some UI that can be changed * during web app restyle or theme select. * * Next items should be placed there - * - link colors - * - header styles - * - main menu styles + * - link, button colors + * - header restyles + * - main menu restyles * */ @import "themes/ui_basic.scss"; diff --git a/app/assets/stylesheets/nav.scss b/app/assets/stylesheets/nav.scss new file mode 100644 index 00000000..9403539b --- /dev/null +++ b/app/assets/stylesheets/nav.scss @@ -0,0 +1,93 @@ +/* + * Main Menu of Application + * + */ +nav.main_menu { + border-radius: 4px; + margin: auto; + margin:30px 0; + background:#eee; + border:1px solid #bbb; + height:38px; + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); + @include shade; + .count { + position: relative; + top: -1px; + display: inline-block; + height: 15px; + margin: 0 0 0 5px; + padding: 0 8px 1px 8px; + height: auto; + font-size: 0.82em; + line-height: 14px; + text-align: center; + color: #777; + background: #f2f2f2; + border-top: 1px solid #CCC; + border-radius: 8px; + -moz-border-radius: 8px; + } + .label { + background:$hover; + text-shadow:none; + color:$style_color; + } + a { + // Landscape phone to portrait tablet + @media (max-width: 1080px) { min-width:35px; } + // Portrait tablet to landscape and desktop + @media (min-width: 1080px) and (max-width: 1200px) { min-width:40px; } + // Large desktop + @media (min-width: 1200px) { min-width:55px; } + + text-align:center; + font-weight:bold; + &:first-child{ + -webkit-border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-topleft: 4px; + -moz-border-radius-bottomleft: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-left: 0; + } + padding: 10px 25px; + display: inline-block; + color: $style_color; + position: relative; + margin: 0; + float:left; + text-shadow:0 1px 1px white; + border-right: 1px solid #DDD; + border-left: 1px solid #EEE; + + &.home { + background: url(home_icon.PNG) no-repeat center center; + text-indent:-9999px; + //min-width:40px; + img { + position:relative; + top:4px; + } + } + &.current { + background-color:#D5D5D5; + border-bottom: 2px solid #474D57; + border-right: 1px solid #BBB; + border-left: 1px solid #BBB; + border-radius: 0 0 1px 1px; + &:first-child{ + border-bottom:none; + } + } + } +} +/* + * End of Main Menu + * + */ + diff --git a/app/assets/stylesheets/themes/ui_basic.scss b/app/assets/stylesheets/themes/ui_basic.scss index 16517dc7..1b731c91 100644 --- a/app/assets/stylesheets/themes/ui_basic.scss +++ b/app/assets/stylesheets/themes/ui_basic.scss @@ -1,11 +1,6 @@ /** * This file represent some UI that can be changed * during web app restyle or theme select. - * - * Next items should be placed there - * - link colors - * - header styles - * - main menu styles * */ .ui_basic { @@ -20,103 +15,4 @@ color: $blue_link; } } - - - /* - * Application Header - * - */ - header { - width:100%; - padding:0; - margin:0; - top:1px; - left:0; - background: #F1F1F1; /* for non-css3 browsers */ - border-bottom: 1px solid #ccc; - box-shadow: 0 -1px 0 white inset; - -moz-box-shadow: 0 -1px 0 white inset; - -webkit-box-shadow: 0 -1px 0 white inset; - z-index:10; - height:60px; - - .app_logo { - width:230px; - float:left; - position:relative; - top:-5px; - - a { - float:left; - - h1 { - text-indent:-9999px; - width:102px; - background: url('logo_text.png') no-repeat 0px -3px; - float:left; - margin-left:5px; - font-size:20px; - line-height:36px; - font-weight:bold; - color:#aaa; - text-shadow: 0 1px 1px #FFF; - padding-left:50px; - } - } - .separator { - margin-left:20px; - float: left; - height: 60px; - width: 1px; - background: white; - border-left: 1px solid #DDD; - margin-top: -10px; - } - } - .container { - .top_panel_content { - margin:auto; - position:relative; - padding:15px 0; - } - } - - .project_name { - float:left; - margin:0; - margin-right:30px; - font-size:20px; - line-height:36px; - font-weight:bold; - color:$style_color; - text-shadow: 0 1px 1px #FFF; - } - - .fbtn { - float: right; - margin-right:10px; - .btn { - margin-left:8px; - } - } - - .search { - float: right; - margin-right: 55px; - - .search-input { - width:130px; - background-image: url("icon-search.png"); - background-repeat: no-repeat; - background-position: 10px; - padding-left:25px; - @include border-radius(5px); - border:1px solid #ccc; - } - } - } - /* - * End of Application Header - * - */ } diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss index feb02e1f..0fea6144 100644 --- a/app/assets/stylesheets/themes/ui_mars.scss +++ b/app/assets/stylesheets/themes/ui_mars.scss @@ -4,8 +4,7 @@ * * Next items should be placed there * - link colors - * - header styles - * - main menu styles + * - header restyles * */ .ui_mars { @@ -15,18 +14,11 @@ * */ header { - width:100%; - padding:0; - margin:0; - top:1px; - left:0; background: #474D57 url('bg-header.png') repeat-x bottom; - z-index:10; - height:60px; + box-shadow:none; + border-bottom: 1px solid #444; .fbtn { - float: right; - margin-right:10px; .btn { margin-left:8px; background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#31363E)); @@ -51,20 +43,10 @@ float: right; margin-right: 55px; .search-input { - background-image:url("icon-search.png"); - float: right; - text-shadow: none; - width: 130px; - background-image: url("icon-search.png"); - background-repeat: no-repeat; - background-position: 10px; - border-radius: 100px; border: 1px solid rgba(0, 0, 0, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset; background-color: #D2D5DA; background-color: rgba(255, 255, 255, 0.5); - padding: 5px; - padding-left: 26px; &:focus { background-color: white; @@ -75,14 +57,7 @@ color: #666; } .app_logo { - width:230px; - float:left; - position:relative; - top:-5px; - a { - float:left; - h1 { background: url('images.png') no-repeat -3px -6px; width: 65px; @@ -94,25 +69,17 @@ float:left; } } + .separator { + border-color:#444; + background:#31363E; + } + } .project_name { - float:left; - margin:0; - margin-right:30px; - font-size:20px; line-height:38px; - font-weight:bold; color:#fff; text-shadow: 0 1px 1px #111; } - - .container { - .top_panel_content { - margin:auto; - position:relative; - padding:15px 0; - } - } } /* * End of Application Header diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss index cb55bcc8..03579d58 100644 --- a/app/assets/stylesheets/themes/ui_modern.scss +++ b/app/assets/stylesheets/themes/ui_modern.scss @@ -9,135 +9,52 @@ * */ .ui_modern { - - background:#eee; - - > .container { - background:#FFF; - border: 1px solid #ccc; - padding:20px; - margin-top:30px; - -moz-box-shadow: 0 0 1px 1px #E3E3E3; - -webkit-box-shadow: 0 0 1px 1px #E3E3E3; - box-shadow: 0 0 1px 1px #E3E3E3; - } - nav.main_menu { - position: absolute; - width: 100%; - left: 0; - top: 35px; + background:none; + box-shadow:none; @include border-radius(0px); + border:none; + border-bottom:2px solid #456; - a.current { - border-bottom:none; + a { + border:none; + + &.current { + border-bottom:2px solid #f90; + background-color:#fff; + } } } - .commit-box, .issue_form_box { - margin-top: 0px; - } - - .ui-box { - @include border-radius(0px); - } - /* * Common styles * */ a { - color: $link_color; + color: #FA8B2A; &:hover { text-decoration:none; - color: $blue_link; + color: #f90; } } + .btn { + &.primary, + &.btn-primary { + border-color:#C60; + background:#D70; - /* - * Application Header - * - */ - header { - width:100%; - padding:0; - margin:0; - top:1px; - left:0; - background: #FFF; /* for non-css3 browsers */ - z-index:10; - height:100px; - - .app_logo { - float:left; - position:relative; - top:-5px; - - a { - float:left; - - h1 { - - left: -30px; - position: relative; - text-indent:-9999px; - width:112px; - background: url('logo_text_tr.png') no-repeat 0px 0; - float:left; - font-size:20px; - line-height:36px; - font-weight:bold; - color:#aaa; - text-shadow: 0 1px 1px #FFF; - padding-left:50px; - } - } - } - .container { - .top_panel_content { - margin:auto; - position:relative; - padding:15px 0; - } - } - - .project_name { - float:left; - margin:0; - margin-right:30px; - font-size:20px; - line-height:36px; - font-weight:bold; - color:$style_color; - text-shadow: 0 1px 1px #FFF; - } - - .fbtn { - float: right; - margin-right:10px; - .btn { - margin-left:8px; - } - } - - .search { - float: right; - margin-right: 55px; - - .search-input { - width:130px; - background-image: url("icon-search.png"); - background-repeat: no-repeat; - background-position: 10px; - padding-left:25px; - @include border-radius(5px); - border:1px solid #ccc; + &:hover { + background:#F90; } } } - /* - * End of Application Header - * - */ + + .alert { + &.alert-info { + border-color:#FDA; + background:#FED; + color:#D70; + } + } } diff --git a/app/views/projects/index.html.haml b/app/views/projects/index.html.haml index 4a47e126..a8bc8ef3 100644 --- a/app/views/projects/index.html.haml +++ b/app/views/projects/index.html.haml @@ -12,8 +12,7 @@ - if @events.any? = render @events - else - .padded - %strong.cgray Projects activity will be displayed here + %h4.nothing_here_message Projects activity will be displayed here .side .projects_box %h5