Commit 6fa95a3d34838bf80d4fe69c9605640806d346ac
1 parent
0e33bf6e
Exists in
master
and in
4 other branches
CSS refactored
Showing
8 changed files
with
371 additions
and
470 deletions
Show diff stats
app/assets/stylesheets/common.scss
| @@ -22,217 +22,6 @@ | @@ -22,217 +22,6 @@ | ||
| 22 | float:right; | 22 | float:right; |
| 23 | } | 23 | } |
| 24 | 24 | ||
| 25 | -/** | ||
| 26 | - * Common header style | ||
| 27 | - * | ||
| 28 | - */ | ||
| 29 | -header { | ||
| 30 | - /* Account box */ | ||
| 31 | - .account-box { | ||
| 32 | - position: absolute; | ||
| 33 | - right: 0; | ||
| 34 | - top: 13px; | ||
| 35 | - z-index: 10000; | ||
| 36 | - width: 128px; | ||
| 37 | - font-size: 11px; | ||
| 38 | - float: right; | ||
| 39 | - display: block; | ||
| 40 | - cursor: pointer; | ||
| 41 | - img { | ||
| 42 | - border-radius: 4px; | ||
| 43 | - right: 0px; | ||
| 44 | - position: absolute; | ||
| 45 | - width: 33px; | ||
| 46 | - height: 33px; | ||
| 47 | - display: block; | ||
| 48 | - top: 0; | ||
| 49 | - &:after { | ||
| 50 | - content: " "; | ||
| 51 | - display: block; | ||
| 52 | - position: absolute; | ||
| 53 | - top: 0; | ||
| 54 | - right: 0; | ||
| 55 | - left: 0; | ||
| 56 | - bottom: 0; | ||
| 57 | - float: right; | ||
| 58 | - border-radius: 5px; | ||
| 59 | - border: 1px solid rgba(255, 255, 255, 0.1); | ||
| 60 | - border-bottom: 0; | ||
| 61 | - 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))); | ||
| 62 | - 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)); | ||
| 63 | - 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)); | ||
| 64 | - -webkit-background-origin: border-box; | ||
| 65 | - -moz-background-origin: border; | ||
| 66 | - background-origin: border-box; } } } | ||
| 67 | - | ||
| 68 | - .account-box { | ||
| 69 | - &.hover { | ||
| 70 | - height: 138px; } | ||
| 71 | - &:hover > .account-links { | ||
| 72 | - display: block; } } | ||
| 73 | - | ||
| 74 | - .account-links { | ||
| 75 | - background: #79C3E0; | ||
| 76 | - display: none; | ||
| 77 | - border-radius: 5px; | ||
| 78 | - width: 100px; | ||
| 79 | - margin-top: 0; | ||
| 80 | - float: right; | ||
| 81 | - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| 82 | - position: relative; | ||
| 83 | - &:before { | ||
| 84 | - content: "."; | ||
| 85 | - width: 0; | ||
| 86 | - height: 0; | ||
| 87 | - position: absolute; | ||
| 88 | - border: 5px solid transparent; | ||
| 89 | - border-color: rgba(255, 255, 255, 0); | ||
| 90 | - border-bottom-color: #333; | ||
| 91 | - text-indent: -9999px; | ||
| 92 | - top: -10px; | ||
| 93 | - line-height: 0; | ||
| 94 | - right: 10px; | ||
| 95 | - z-index: 10; } | ||
| 96 | - background: #333; | ||
| 97 | - display: none; | ||
| 98 | - z-index: 100000; | ||
| 99 | - border-radius: 5px; | ||
| 100 | - width: 100px; | ||
| 101 | - position: absolute; | ||
| 102 | - right: 10px; | ||
| 103 | - top: 46px; | ||
| 104 | - margin-top: 0; | ||
| 105 | - float: right; | ||
| 106 | - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| 107 | - a { | ||
| 108 | - color: #EEE; | ||
| 109 | - padding: 6px 10px; | ||
| 110 | - display: block; | ||
| 111 | - text-shadow: none; | ||
| 112 | - border-bottom: 1px solid #555; | ||
| 113 | - &:hover { | ||
| 114 | - color:#eee; | ||
| 115 | - background: #444; | ||
| 116 | - } | ||
| 117 | - } | ||
| 118 | - } | ||
| 119 | - | ||
| 120 | - .account-box.hover .arrow-up { | ||
| 121 | - top: 41px; | ||
| 122 | - right: 6px; | ||
| 123 | - position: absolute; } | ||
| 124 | - | ||
| 125 | - .account-links a { | ||
| 126 | - &:first-child { | ||
| 127 | - -webkit-border-top-left-radius: 5px; | ||
| 128 | - -webkit-border-top-right-radius: 5px; | ||
| 129 | - -moz-border-radius-topleft: 5px; | ||
| 130 | - -moz-border-radius-topright: 5px; | ||
| 131 | - border-top-left-radius: 5px; | ||
| 132 | - border-top-right-radius: 5px; } | ||
| 133 | - &:last-child { | ||
| 134 | - -webkit-border-bottom-right-radius: 5px; | ||
| 135 | - -webkit-border-bottom-left-radius: 5px; | ||
| 136 | - -moz-border-radius-bottomright: 5px; | ||
| 137 | - -moz-border-radius-bottomleft: 5px; | ||
| 138 | - border-bottom-right-radius: 5px; | ||
| 139 | - border-bottom-left-radius: 5px; | ||
| 140 | - border-bottom: 0; } } | ||
| 141 | -} | ||
| 142 | - | ||
| 143 | -/* | ||
| 144 | - * Main Menu of Application | ||
| 145 | - * | ||
| 146 | - */ | ||
| 147 | -nav.main_menu { | ||
| 148 | - border-radius: 4px; | ||
| 149 | - margin: auto; | ||
| 150 | - margin:30px 0; | ||
| 151 | - background:#eee; | ||
| 152 | - border:1px solid #bbb; | ||
| 153 | - height:38px; | ||
| 154 | - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
| 155 | - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 156 | - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 157 | - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 158 | - @include shade; | ||
| 159 | - .count { | ||
| 160 | - position: relative; | ||
| 161 | - top: -1px; | ||
| 162 | - display: inline-block; | ||
| 163 | - height: 15px; | ||
| 164 | - margin: 0 0 0 5px; | ||
| 165 | - padding: 0 8px 1px 8px; | ||
| 166 | - height: auto; | ||
| 167 | - font-size: 0.82em; | ||
| 168 | - line-height: 14px; | ||
| 169 | - text-align: center; | ||
| 170 | - color: #777; | ||
| 171 | - background: #f2f2f2; | ||
| 172 | - border-top: 1px solid #CCC; | ||
| 173 | - border-radius: 8px; | ||
| 174 | - -moz-border-radius: 8px; | ||
| 175 | - } | ||
| 176 | - .label { | ||
| 177 | - background:$hover; | ||
| 178 | - text-shadow:none; | ||
| 179 | - color:$style_color; | ||
| 180 | - } | ||
| 181 | - a { | ||
| 182 | - // Landscape phone to portrait tablet | ||
| 183 | - @media (max-width: 1080px) { min-width:35px; } | ||
| 184 | - // Portrait tablet to landscape and desktop | ||
| 185 | - @media (min-width: 1080px) and (max-width: 1200px) { min-width:40px; } | ||
| 186 | - // Large desktop | ||
| 187 | - @media (min-width: 1200px) { min-width:55px; } | ||
| 188 | - | ||
| 189 | - text-align:center; | ||
| 190 | - font-weight:bold; | ||
| 191 | - &:first-child{ | ||
| 192 | - -webkit-border-top-left-radius: 4px; | ||
| 193 | - -webkit-border-bottom-left-radius: 4px; | ||
| 194 | - -moz-border-radius-topleft: 4px; | ||
| 195 | - -moz-border-radius-bottomleft: 4px; | ||
| 196 | - border-top-left-radius: 4px; | ||
| 197 | - border-bottom-left-radius: 4px; | ||
| 198 | - border-left: 0; | ||
| 199 | - } | ||
| 200 | - padding: 10px 25px; | ||
| 201 | - display: inline-block; | ||
| 202 | - color: $style_color; | ||
| 203 | - position: relative; | ||
| 204 | - margin: 0; | ||
| 205 | - float:left; | ||
| 206 | - text-shadow:0 1px 1px white; | ||
| 207 | - border-right: 1px solid #DDD; | ||
| 208 | - border-left: 1px solid #EEE; | ||
| 209 | - | ||
| 210 | - &.home { | ||
| 211 | - background: url(home_icon.PNG) no-repeat center center; | ||
| 212 | - text-indent:-9999px; | ||
| 213 | - //min-width:40px; | ||
| 214 | - img { | ||
| 215 | - position:relative; | ||
| 216 | - top:4px; | ||
| 217 | - } | ||
| 218 | - } | ||
| 219 | - &.current { | ||
| 220 | - background-color:#D5D5D5; | ||
| 221 | - border-bottom: 2px solid #474D57; | ||
| 222 | - border-right: 1px solid #BBB; | ||
| 223 | - border-left: 1px solid #BBB; | ||
| 224 | - border-radius: 0 0 1px 1px; | ||
| 225 | - &:first-child{ | ||
| 226 | - border-bottom:none; | ||
| 227 | - } | ||
| 228 | - } | ||
| 229 | - } | ||
| 230 | -} | ||
| 231 | -/* | ||
| 232 | - * End of Main Menu | ||
| 233 | - * | ||
| 234 | - */ | ||
| 235 | - | ||
| 236 | .profile_avatar_holder { | 25 | .profile_avatar_holder { |
| 237 | float:left; | 26 | float:left; |
| 238 | width:60px; | 27 | width:60px; |
| @@ -0,0 +1,226 @@ | @@ -0,0 +1,226 @@ | ||
| 1 | +/* | ||
| 2 | + * Application Header | ||
| 3 | + * | ||
| 4 | + */ | ||
| 5 | +header { | ||
| 6 | + width:100%; | ||
| 7 | + padding:0; | ||
| 8 | + margin:0; | ||
| 9 | + top:1px; | ||
| 10 | + left:0; | ||
| 11 | + background: #F1F1F1; /* for non-css3 browsers */ | ||
| 12 | + border-bottom: 1px solid #ccc; | ||
| 13 | + box-shadow: 0 -1px 0 white inset; | ||
| 14 | + -moz-box-shadow: 0 -1px 0 white inset; | ||
| 15 | + -webkit-box-shadow: 0 -1px 0 white inset; | ||
| 16 | + z-index:10; | ||
| 17 | + height:60px; | ||
| 18 | + | ||
| 19 | + /** | ||
| 20 | + * | ||
| 21 | + * Logo holder | ||
| 22 | + * | ||
| 23 | + */ | ||
| 24 | + .app_logo { | ||
| 25 | + width:230px; | ||
| 26 | + float:left; | ||
| 27 | + position:relative; | ||
| 28 | + top:-5px; | ||
| 29 | + | ||
| 30 | + a { | ||
| 31 | + float:left; | ||
| 32 | + | ||
| 33 | + h1 { | ||
| 34 | + text-indent:-9999px; | ||
| 35 | + width:102px; | ||
| 36 | + background: url('logo_text.png') no-repeat 0px -3px; | ||
| 37 | + float:left; | ||
| 38 | + margin-left:5px; | ||
| 39 | + font-size:20px; | ||
| 40 | + line-height:36px; | ||
| 41 | + font-weight:bold; | ||
| 42 | + color:#aaa; | ||
| 43 | + text-shadow: 0 1px 1px #FFF; | ||
| 44 | + padding-left:50px; | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + .separator { | ||
| 48 | + margin-left:20px; | ||
| 49 | + float: left; | ||
| 50 | + height: 60px; | ||
| 51 | + width: 1px; | ||
| 52 | + background: white; | ||
| 53 | + border-left: 1px solid #DDD; | ||
| 54 | + margin-top: -10px; | ||
| 55 | + } | ||
| 56 | + } | ||
| 57 | + .container { | ||
| 58 | + .top_panel_content { | ||
| 59 | + margin:auto; | ||
| 60 | + position:relative; | ||
| 61 | + padding:15px 0; | ||
| 62 | + } | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + /** | ||
| 66 | + * | ||
| 67 | + * Project / Area name | ||
| 68 | + * | ||
| 69 | + */ | ||
| 70 | + .project_name { | ||
| 71 | + float:left; | ||
| 72 | + margin:0; | ||
| 73 | + margin-right:30px; | ||
| 74 | + font-size:20px; | ||
| 75 | + line-height:36px; | ||
| 76 | + font-weight:bold; | ||
| 77 | + color:$style_color; | ||
| 78 | + text-shadow: 0 1px 1px #FFF; | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + .fbtn { | ||
| 82 | + float: right; | ||
| 83 | + margin-right:10px; | ||
| 84 | + .btn { | ||
| 85 | + margin-left:8px; | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + | ||
| 89 | + | ||
| 90 | + /** | ||
| 91 | + * | ||
| 92 | + * Search box | ||
| 93 | + * | ||
| 94 | + */ | ||
| 95 | + .search { | ||
| 96 | + float: right; | ||
| 97 | + margin-right: 55px; | ||
| 98 | + | ||
| 99 | + .search-input { | ||
| 100 | + width:130px; | ||
| 101 | + background-image: url("icon-search.png"); | ||
| 102 | + background-repeat: no-repeat; | ||
| 103 | + background-position: 10px; | ||
| 104 | + padding-left:25px; | ||
| 105 | + @include border-radius(5px); | ||
| 106 | + border:1px solid #ccc; | ||
| 107 | + } | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + /** | ||
| 111 | + * | ||
| 112 | + * Account box | ||
| 113 | + * | ||
| 114 | + */ | ||
| 115 | + .account-box { | ||
| 116 | + position: absolute; | ||
| 117 | + right: 0; | ||
| 118 | + top: 13px; | ||
| 119 | + z-index: 10000; | ||
| 120 | + width: 128px; | ||
| 121 | + font-size: 11px; | ||
| 122 | + float: right; | ||
| 123 | + display: block; | ||
| 124 | + cursor: pointer; | ||
| 125 | + img { | ||
| 126 | + border-radius: 4px; | ||
| 127 | + right: 0px; | ||
| 128 | + position: absolute; | ||
| 129 | + width: 33px; | ||
| 130 | + height: 33px; | ||
| 131 | + display: block; | ||
| 132 | + top: 0; | ||
| 133 | + &:after { | ||
| 134 | + content: " "; | ||
| 135 | + display: block; | ||
| 136 | + position: absolute; | ||
| 137 | + top: 0; | ||
| 138 | + right: 0; | ||
| 139 | + left: 0; | ||
| 140 | + bottom: 0; | ||
| 141 | + float: right; | ||
| 142 | + border-radius: 5px; | ||
| 143 | + border: 1px solid rgba(255, 255, 255, 0.1); | ||
| 144 | + border-bottom: 0; | ||
| 145 | + 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))); | ||
| 146 | + 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)); | ||
| 147 | + 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)); | ||
| 148 | + -webkit-background-origin: border-box; | ||
| 149 | + -moz-background-origin: border; | ||
| 150 | + background-origin: border-box; } } } | ||
| 151 | + | ||
| 152 | + .account-box { | ||
| 153 | + &.hover { | ||
| 154 | + height: 138px; } | ||
| 155 | + &:hover > .account-links { | ||
| 156 | + display: block; } } | ||
| 157 | + | ||
| 158 | + .account-links { | ||
| 159 | + background: #79C3E0; | ||
| 160 | + display: none; | ||
| 161 | + border-radius: 5px; | ||
| 162 | + width: 100px; | ||
| 163 | + margin-top: 0; | ||
| 164 | + float: right; | ||
| 165 | + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| 166 | + position: relative; | ||
| 167 | + &:before { | ||
| 168 | + content: "."; | ||
| 169 | + width: 0; | ||
| 170 | + height: 0; | ||
| 171 | + position: absolute; | ||
| 172 | + border: 5px solid transparent; | ||
| 173 | + border-color: rgba(255, 255, 255, 0); | ||
| 174 | + border-bottom-color: #333; | ||
| 175 | + text-indent: -9999px; | ||
| 176 | + top: -10px; | ||
| 177 | + line-height: 0; | ||
| 178 | + right: 10px; | ||
| 179 | + z-index: 10; } | ||
| 180 | + background: #333; | ||
| 181 | + display: none; | ||
| 182 | + z-index: 100000; | ||
| 183 | + border-radius: 5px; | ||
| 184 | + width: 100px; | ||
| 185 | + position: absolute; | ||
| 186 | + right: 10px; | ||
| 187 | + top: 46px; | ||
| 188 | + margin-top: 0; | ||
| 189 | + float: right; | ||
| 190 | + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| 191 | + a { | ||
| 192 | + color: #EEE; | ||
| 193 | + padding: 6px 10px; | ||
| 194 | + display: block; | ||
| 195 | + text-shadow: none; | ||
| 196 | + border-bottom: 1px solid #555; | ||
| 197 | + &:hover { | ||
| 198 | + color:#eee; | ||
| 199 | + background: #444; | ||
| 200 | + } | ||
| 201 | + } | ||
| 202 | + } | ||
| 203 | + | ||
| 204 | + .account-box.hover .arrow-up { | ||
| 205 | + top: 41px; | ||
| 206 | + right: 6px; | ||
| 207 | + position: absolute; } | ||
| 208 | + | ||
| 209 | + .account-links a { | ||
| 210 | + &:first-child { | ||
| 211 | + -webkit-border-top-left-radius: 5px; | ||
| 212 | + -webkit-border-top-right-radius: 5px; | ||
| 213 | + -moz-border-radius-topleft: 5px; | ||
| 214 | + -moz-border-radius-topright: 5px; | ||
| 215 | + border-top-left-radius: 5px; | ||
| 216 | + border-top-right-radius: 5px; } | ||
| 217 | + &:last-child { | ||
| 218 | + -webkit-border-bottom-right-radius: 5px; | ||
| 219 | + -webkit-border-bottom-left-radius: 5px; | ||
| 220 | + -moz-border-radius-bottomright: 5px; | ||
| 221 | + -moz-border-radius-bottomleft: 5px; | ||
| 222 | + border-bottom-right-radius: 5px; | ||
| 223 | + border-bottom-left-radius: 5px; | ||
| 224 | + border-bottom: 0; } } | ||
| 225 | +} | ||
| 226 | + |
app/assets/stylesheets/main.scss
| @@ -64,14 +64,28 @@ $hover: #FDF5D9; | @@ -64,14 +64,28 @@ $hover: #FDF5D9; | ||
| 64 | border-radius: $radius; | 64 | border-radius: $radius; |
| 65 | } | 65 | } |
| 66 | 66 | ||
| 67 | + | ||
| 68 | + | ||
| 69 | +/** | ||
| 70 | + * Header of application. | ||
| 71 | + * Contain application logo, search panel, profile icon | ||
| 72 | + */ | ||
| 73 | +@import "header.scss"; | ||
| 74 | + | ||
| 75 | +/** | ||
| 76 | + * Navigation menu of application. | ||
| 77 | + * Panel with links to pages depends on project, profile or admin area | ||
| 78 | + */ | ||
| 79 | +@import "nav.scss"; | ||
| 80 | + | ||
| 67 | /** | 81 | /** |
| 68 | * This file represent some UI that can be changed | 82 | * This file represent some UI that can be changed |
| 69 | * during web app restyle or theme select. | 83 | * during web app restyle or theme select. |
| 70 | * | 84 | * |
| 71 | * Next items should be placed there | 85 | * Next items should be placed there |
| 72 | - * - link colors | ||
| 73 | - * - header styles | ||
| 74 | - * - main menu styles | 86 | + * - link, button colors |
| 87 | + * - header restyles | ||
| 88 | + * - main menu restyles | ||
| 75 | * | 89 | * |
| 76 | */ | 90 | */ |
| 77 | @import "themes/ui_basic.scss"; | 91 | @import "themes/ui_basic.scss"; |
| @@ -0,0 +1,93 @@ | @@ -0,0 +1,93 @@ | ||
| 1 | +/* | ||
| 2 | + * Main Menu of Application | ||
| 3 | + * | ||
| 4 | + */ | ||
| 5 | +nav.main_menu { | ||
| 6 | + border-radius: 4px; | ||
| 7 | + margin: auto; | ||
| 8 | + margin:30px 0; | ||
| 9 | + background:#eee; | ||
| 10 | + border:1px solid #bbb; | ||
| 11 | + height:38px; | ||
| 12 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
| 13 | + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 14 | + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 15 | + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 16 | + @include shade; | ||
| 17 | + .count { | ||
| 18 | + position: relative; | ||
| 19 | + top: -1px; | ||
| 20 | + display: inline-block; | ||
| 21 | + height: 15px; | ||
| 22 | + margin: 0 0 0 5px; | ||
| 23 | + padding: 0 8px 1px 8px; | ||
| 24 | + height: auto; | ||
| 25 | + font-size: 0.82em; | ||
| 26 | + line-height: 14px; | ||
| 27 | + text-align: center; | ||
| 28 | + color: #777; | ||
| 29 | + background: #f2f2f2; | ||
| 30 | + border-top: 1px solid #CCC; | ||
| 31 | + border-radius: 8px; | ||
| 32 | + -moz-border-radius: 8px; | ||
| 33 | + } | ||
| 34 | + .label { | ||
| 35 | + background:$hover; | ||
| 36 | + text-shadow:none; | ||
| 37 | + color:$style_color; | ||
| 38 | + } | ||
| 39 | + a { | ||
| 40 | + // Landscape phone to portrait tablet | ||
| 41 | + @media (max-width: 1080px) { min-width:35px; } | ||
| 42 | + // Portrait tablet to landscape and desktop | ||
| 43 | + @media (min-width: 1080px) and (max-width: 1200px) { min-width:40px; } | ||
| 44 | + // Large desktop | ||
| 45 | + @media (min-width: 1200px) { min-width:55px; } | ||
| 46 | + | ||
| 47 | + text-align:center; | ||
| 48 | + font-weight:bold; | ||
| 49 | + &:first-child{ | ||
| 50 | + -webkit-border-top-left-radius: 4px; | ||
| 51 | + -webkit-border-bottom-left-radius: 4px; | ||
| 52 | + -moz-border-radius-topleft: 4px; | ||
| 53 | + -moz-border-radius-bottomleft: 4px; | ||
| 54 | + border-top-left-radius: 4px; | ||
| 55 | + border-bottom-left-radius: 4px; | ||
| 56 | + border-left: 0; | ||
| 57 | + } | ||
| 58 | + padding: 10px 25px; | ||
| 59 | + display: inline-block; | ||
| 60 | + color: $style_color; | ||
| 61 | + position: relative; | ||
| 62 | + margin: 0; | ||
| 63 | + float:left; | ||
| 64 | + text-shadow:0 1px 1px white; | ||
| 65 | + border-right: 1px solid #DDD; | ||
| 66 | + border-left: 1px solid #EEE; | ||
| 67 | + | ||
| 68 | + &.home { | ||
| 69 | + background: url(home_icon.PNG) no-repeat center center; | ||
| 70 | + text-indent:-9999px; | ||
| 71 | + //min-width:40px; | ||
| 72 | + img { | ||
| 73 | + position:relative; | ||
| 74 | + top:4px; | ||
| 75 | + } | ||
| 76 | + } | ||
| 77 | + &.current { | ||
| 78 | + background-color:#D5D5D5; | ||
| 79 | + border-bottom: 2px solid #474D57; | ||
| 80 | + border-right: 1px solid #BBB; | ||
| 81 | + border-left: 1px solid #BBB; | ||
| 82 | + border-radius: 0 0 1px 1px; | ||
| 83 | + &:first-child{ | ||
| 84 | + border-bottom:none; | ||
| 85 | + } | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | +} | ||
| 89 | +/* | ||
| 90 | + * End of Main Menu | ||
| 91 | + * | ||
| 92 | + */ | ||
| 93 | + |
app/assets/stylesheets/themes/ui_basic.scss
| 1 | /** | 1 | /** |
| 2 | * This file represent some UI that can be changed | 2 | * This file represent some UI that can be changed |
| 3 | * during web app restyle or theme select. | 3 | * during web app restyle or theme select. |
| 4 | - * | ||
| 5 | - * Next items should be placed there | ||
| 6 | - * - link colors | ||
| 7 | - * - header styles | ||
| 8 | - * - main menu styles | ||
| 9 | * | 4 | * |
| 10 | */ | 5 | */ |
| 11 | .ui_basic { | 6 | .ui_basic { |
| @@ -20,103 +15,4 @@ | @@ -20,103 +15,4 @@ | ||
| 20 | color: $blue_link; | 15 | color: $blue_link; |
| 21 | } | 16 | } |
| 22 | } | 17 | } |
| 23 | - | ||
| 24 | - | ||
| 25 | - /* | ||
| 26 | - * Application Header | ||
| 27 | - * | ||
| 28 | - */ | ||
| 29 | - header { | ||
| 30 | - width:100%; | ||
| 31 | - padding:0; | ||
| 32 | - margin:0; | ||
| 33 | - top:1px; | ||
| 34 | - left:0; | ||
| 35 | - background: #F1F1F1; /* for non-css3 browsers */ | ||
| 36 | - border-bottom: 1px solid #ccc; | ||
| 37 | - box-shadow: 0 -1px 0 white inset; | ||
| 38 | - -moz-box-shadow: 0 -1px 0 white inset; | ||
| 39 | - -webkit-box-shadow: 0 -1px 0 white inset; | ||
| 40 | - z-index:10; | ||
| 41 | - height:60px; | ||
| 42 | - | ||
| 43 | - .app_logo { | ||
| 44 | - width:230px; | ||
| 45 | - float:left; | ||
| 46 | - position:relative; | ||
| 47 | - top:-5px; | ||
| 48 | - | ||
| 49 | - a { | ||
| 50 | - float:left; | ||
| 51 | - | ||
| 52 | - h1 { | ||
| 53 | - text-indent:-9999px; | ||
| 54 | - width:102px; | ||
| 55 | - background: url('logo_text.png') no-repeat 0px -3px; | ||
| 56 | - float:left; | ||
| 57 | - margin-left:5px; | ||
| 58 | - font-size:20px; | ||
| 59 | - line-height:36px; | ||
| 60 | - font-weight:bold; | ||
| 61 | - color:#aaa; | ||
| 62 | - text-shadow: 0 1px 1px #FFF; | ||
| 63 | - padding-left:50px; | ||
| 64 | - } | ||
| 65 | - } | ||
| 66 | - .separator { | ||
| 67 | - margin-left:20px; | ||
| 68 | - float: left; | ||
| 69 | - height: 60px; | ||
| 70 | - width: 1px; | ||
| 71 | - background: white; | ||
| 72 | - border-left: 1px solid #DDD; | ||
| 73 | - margin-top: -10px; | ||
| 74 | - } | ||
| 75 | - } | ||
| 76 | - .container { | ||
| 77 | - .top_panel_content { | ||
| 78 | - margin:auto; | ||
| 79 | - position:relative; | ||
| 80 | - padding:15px 0; | ||
| 81 | - } | ||
| 82 | - } | ||
| 83 | - | ||
| 84 | - .project_name { | ||
| 85 | - float:left; | ||
| 86 | - margin:0; | ||
| 87 | - margin-right:30px; | ||
| 88 | - font-size:20px; | ||
| 89 | - line-height:36px; | ||
| 90 | - font-weight:bold; | ||
| 91 | - color:$style_color; | ||
| 92 | - text-shadow: 0 1px 1px #FFF; | ||
| 93 | - } | ||
| 94 | - | ||
| 95 | - .fbtn { | ||
| 96 | - float: right; | ||
| 97 | - margin-right:10px; | ||
| 98 | - .btn { | ||
| 99 | - margin-left:8px; | ||
| 100 | - } | ||
| 101 | - } | ||
| 102 | - | ||
| 103 | - .search { | ||
| 104 | - float: right; | ||
| 105 | - margin-right: 55px; | ||
| 106 | - | ||
| 107 | - .search-input { | ||
| 108 | - width:130px; | ||
| 109 | - background-image: url("icon-search.png"); | ||
| 110 | - background-repeat: no-repeat; | ||
| 111 | - background-position: 10px; | ||
| 112 | - padding-left:25px; | ||
| 113 | - @include border-radius(5px); | ||
| 114 | - border:1px solid #ccc; | ||
| 115 | - } | ||
| 116 | - } | ||
| 117 | - } | ||
| 118 | - /* | ||
| 119 | - * End of Application Header | ||
| 120 | - * | ||
| 121 | - */ | ||
| 122 | } | 18 | } |
app/assets/stylesheets/themes/ui_mars.scss
| @@ -4,8 +4,7 @@ | @@ -4,8 +4,7 @@ | ||
| 4 | * | 4 | * |
| 5 | * Next items should be placed there | 5 | * Next items should be placed there |
| 6 | * - link colors | 6 | * - link colors |
| 7 | - * - header styles | ||
| 8 | - * - main menu styles | 7 | + * - header restyles |
| 9 | * | 8 | * |
| 10 | */ | 9 | */ |
| 11 | .ui_mars { | 10 | .ui_mars { |
| @@ -15,18 +14,11 @@ | @@ -15,18 +14,11 @@ | ||
| 15 | * | 14 | * |
| 16 | */ | 15 | */ |
| 17 | header { | 16 | header { |
| 18 | - width:100%; | ||
| 19 | - padding:0; | ||
| 20 | - margin:0; | ||
| 21 | - top:1px; | ||
| 22 | - left:0; | ||
| 23 | background: #474D57 url('bg-header.png') repeat-x bottom; | 17 | background: #474D57 url('bg-header.png') repeat-x bottom; |
| 24 | - z-index:10; | ||
| 25 | - height:60px; | 18 | + box-shadow:none; |
| 19 | + border-bottom: 1px solid #444; | ||
| 26 | 20 | ||
| 27 | .fbtn { | 21 | .fbtn { |
| 28 | - float: right; | ||
| 29 | - margin-right:10px; | ||
| 30 | .btn { | 22 | .btn { |
| 31 | margin-left:8px; | 23 | margin-left:8px; |
| 32 | background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#31363E)); | 24 | background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#31363E)); |
| @@ -51,20 +43,10 @@ | @@ -51,20 +43,10 @@ | ||
| 51 | float: right; | 43 | float: right; |
| 52 | margin-right: 55px; | 44 | margin-right: 55px; |
| 53 | .search-input { | 45 | .search-input { |
| 54 | - background-image:url("icon-search.png"); | ||
| 55 | - float: right; | ||
| 56 | - text-shadow: none; | ||
| 57 | - width: 130px; | ||
| 58 | - background-image: url("icon-search.png"); | ||
| 59 | - background-repeat: no-repeat; | ||
| 60 | - background-position: 10px; | ||
| 61 | - border-radius: 100px; | ||
| 62 | border: 1px solid rgba(0, 0, 0, 0.7); | 46 | border: 1px solid rgba(0, 0, 0, 0.7); |
| 63 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset; | 47 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset; |
| 64 | background-color: #D2D5DA; | 48 | background-color: #D2D5DA; |
| 65 | background-color: rgba(255, 255, 255, 0.5); | 49 | background-color: rgba(255, 255, 255, 0.5); |
| 66 | - padding: 5px; | ||
| 67 | - padding-left: 26px; | ||
| 68 | 50 | ||
| 69 | &:focus { | 51 | &:focus { |
| 70 | background-color: white; | 52 | background-color: white; |
| @@ -75,14 +57,7 @@ | @@ -75,14 +57,7 @@ | ||
| 75 | color: #666; | 57 | color: #666; |
| 76 | } | 58 | } |
| 77 | .app_logo { | 59 | .app_logo { |
| 78 | - width:230px; | ||
| 79 | - float:left; | ||
| 80 | - position:relative; | ||
| 81 | - top:-5px; | ||
| 82 | - | ||
| 83 | a { | 60 | a { |
| 84 | - float:left; | ||
| 85 | - | ||
| 86 | h1 { | 61 | h1 { |
| 87 | background: url('images.png') no-repeat -3px -6px; | 62 | background: url('images.png') no-repeat -3px -6px; |
| 88 | width: 65px; | 63 | width: 65px; |
| @@ -94,25 +69,17 @@ | @@ -94,25 +69,17 @@ | ||
| 94 | float:left; | 69 | float:left; |
| 95 | } | 70 | } |
| 96 | } | 71 | } |
| 72 | + .separator { | ||
| 73 | + border-color:#444; | ||
| 74 | + background:#31363E; | ||
| 75 | + } | ||
| 76 | + | ||
| 97 | } | 77 | } |
| 98 | .project_name { | 78 | .project_name { |
| 99 | - float:left; | ||
| 100 | - margin:0; | ||
| 101 | - margin-right:30px; | ||
| 102 | - font-size:20px; | ||
| 103 | line-height:38px; | 79 | line-height:38px; |
| 104 | - font-weight:bold; | ||
| 105 | color:#fff; | 80 | color:#fff; |
| 106 | text-shadow: 0 1px 1px #111; | 81 | text-shadow: 0 1px 1px #111; |
| 107 | } | 82 | } |
| 108 | - | ||
| 109 | - .container { | ||
| 110 | - .top_panel_content { | ||
| 111 | - margin:auto; | ||
| 112 | - position:relative; | ||
| 113 | - padding:15px 0; | ||
| 114 | - } | ||
| 115 | - } | ||
| 116 | } | 83 | } |
| 117 | /* | 84 | /* |
| 118 | * End of Application Header | 85 | * End of Application Header |
app/assets/stylesheets/themes/ui_modern.scss
| @@ -9,37 +9,21 @@ | @@ -9,37 +9,21 @@ | ||
| 9 | * | 9 | * |
| 10 | */ | 10 | */ |
| 11 | .ui_modern { | 11 | .ui_modern { |
| 12 | - | ||
| 13 | - background:#eee; | ||
| 14 | - | ||
| 15 | - > .container { | ||
| 16 | - background:#FFF; | ||
| 17 | - border: 1px solid #ccc; | ||
| 18 | - padding:20px; | ||
| 19 | - margin-top:30px; | ||
| 20 | - -moz-box-shadow: 0 0 1px 1px #E3E3E3; | ||
| 21 | - -webkit-box-shadow: 0 0 1px 1px #E3E3E3; | ||
| 22 | - box-shadow: 0 0 1px 1px #E3E3E3; | ||
| 23 | - } | ||
| 24 | - | ||
| 25 | nav.main_menu { | 12 | nav.main_menu { |
| 26 | - position: absolute; | ||
| 27 | - width: 100%; | ||
| 28 | - left: 0; | ||
| 29 | - top: 35px; | 13 | + background:none; |
| 14 | + box-shadow:none; | ||
| 30 | @include border-radius(0px); | 15 | @include border-radius(0px); |
| 16 | + border:none; | ||
| 17 | + border-bottom:2px solid #456; | ||
| 31 | 18 | ||
| 32 | - a.current { | ||
| 33 | - border-bottom:none; | ||
| 34 | - } | ||
| 35 | - } | ||
| 36 | - | ||
| 37 | - .commit-box, .issue_form_box { | ||
| 38 | - margin-top: 0px; | ||
| 39 | - } | 19 | + a { |
| 20 | + border:none; | ||
| 40 | 21 | ||
| 41 | - .ui-box { | ||
| 42 | - @include border-radius(0px); | 22 | + &.current { |
| 23 | + border-bottom:2px solid #f90; | ||
| 24 | + background-color:#fff; | ||
| 25 | + } | ||
| 26 | + } | ||
| 43 | } | 27 | } |
| 44 | 28 | ||
| 45 | /* | 29 | /* |
| @@ -47,97 +31,30 @@ | @@ -47,97 +31,30 @@ | ||
| 47 | * | 31 | * |
| 48 | */ | 32 | */ |
| 49 | a { | 33 | a { |
| 50 | - color: $link_color; | 34 | + color: #FA8B2A; |
| 51 | &:hover { | 35 | &:hover { |
| 52 | text-decoration:none; | 36 | text-decoration:none; |
| 53 | - color: $blue_link; | 37 | + color: #f90; |
| 54 | } | 38 | } |
| 55 | } | 39 | } |
| 56 | 40 | ||
| 41 | + .btn { | ||
| 42 | + &.primary, | ||
| 43 | + &.btn-primary { | ||
| 44 | + border-color:#C60; | ||
| 45 | + background:#D70; | ||
| 57 | 46 | ||
| 58 | - /* | ||
| 59 | - * Application Header | ||
| 60 | - * | ||
| 61 | - */ | ||
| 62 | - header { | ||
| 63 | - width:100%; | ||
| 64 | - padding:0; | ||
| 65 | - margin:0; | ||
| 66 | - top:1px; | ||
| 67 | - left:0; | ||
| 68 | - background: #FFF; /* for non-css3 browsers */ | ||
| 69 | - z-index:10; | ||
| 70 | - height:100px; | ||
| 71 | - | ||
| 72 | - .app_logo { | ||
| 73 | - float:left; | ||
| 74 | - position:relative; | ||
| 75 | - top:-5px; | ||
| 76 | - | ||
| 77 | - a { | ||
| 78 | - float:left; | ||
| 79 | - | ||
| 80 | - h1 { | ||
| 81 | - | ||
| 82 | - left: -30px; | ||
| 83 | - position: relative; | ||
| 84 | - text-indent:-9999px; | ||
| 85 | - width:112px; | ||
| 86 | - background: url('logo_text_tr.png') no-repeat 0px 0; | ||
| 87 | - float:left; | ||
| 88 | - font-size:20px; | ||
| 89 | - line-height:36px; | ||
| 90 | - font-weight:bold; | ||
| 91 | - color:#aaa; | ||
| 92 | - text-shadow: 0 1px 1px #FFF; | ||
| 93 | - padding-left:50px; | ||
| 94 | - } | ||
| 95 | - } | ||
| 96 | - } | ||
| 97 | - .container { | ||
| 98 | - .top_panel_content { | ||
| 99 | - margin:auto; | ||
| 100 | - position:relative; | ||
| 101 | - padding:15px 0; | 47 | + &:hover { |
| 48 | + background:#F90; | ||
| 102 | } | 49 | } |
| 103 | } | 50 | } |
| 51 | + } | ||
| 104 | 52 | ||
| 105 | - .project_name { | ||
| 106 | - float:left; | ||
| 107 | - margin:0; | ||
| 108 | - margin-right:30px; | ||
| 109 | - font-size:20px; | ||
| 110 | - line-height:36px; | ||
| 111 | - font-weight:bold; | ||
| 112 | - color:$style_color; | ||
| 113 | - text-shadow: 0 1px 1px #FFF; | ||
| 114 | - } | ||
| 115 | - | ||
| 116 | - .fbtn { | ||
| 117 | - float: right; | ||
| 118 | - margin-right:10px; | ||
| 119 | - .btn { | ||
| 120 | - margin-left:8px; | ||
| 121 | - } | ||
| 122 | - } | ||
| 123 | - | ||
| 124 | - .search { | ||
| 125 | - float: right; | ||
| 126 | - margin-right: 55px; | ||
| 127 | - | ||
| 128 | - .search-input { | ||
| 129 | - width:130px; | ||
| 130 | - background-image: url("icon-search.png"); | ||
| 131 | - background-repeat: no-repeat; | ||
| 132 | - background-position: 10px; | ||
| 133 | - padding-left:25px; | ||
| 134 | - @include border-radius(5px); | ||
| 135 | - border:1px solid #ccc; | ||
| 136 | - } | 53 | + .alert { |
| 54 | + &.alert-info { | ||
| 55 | + border-color:#FDA; | ||
| 56 | + background:#FED; | ||
| 57 | + color:#D70; | ||
| 137 | } | 58 | } |
| 138 | } | 59 | } |
| 139 | - /* | ||
| 140 | - * End of Application Header | ||
| 141 | - * | ||
| 142 | - */ | ||
| 143 | } | 60 | } |
app/views/projects/index.html.haml
| @@ -12,8 +12,7 @@ | @@ -12,8 +12,7 @@ | ||
| 12 | - if @events.any? | 12 | - if @events.any? |
| 13 | = render @events | 13 | = render @events |
| 14 | - else | 14 | - else |
| 15 | - .padded | ||
| 16 | - %strong.cgray Projects activity will be displayed here | 15 | + %h4.nothing_here_message Projects activity will be displayed here |
| 17 | .side | 16 | .side |
| 18 | .projects_box | 17 | .projects_box |
| 19 | %h5 | 18 | %h5 |