Updated Branches: refs/heads/ui-restyle 261eba901 -> aa9ff0efa
Style detail multi-group Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/aa9ff0ef Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/aa9ff0ef Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/aa9ff0ef Branch: refs/heads/ui-restyle Commit: aa9ff0efa7556753638df149b1dc984ef3914f9d Parents: 261eba9 Author: Brian Federle <[email protected]> Authored: Wed Oct 16 16:02:06 2013 -0700 Committer: Brian Federle <[email protected]> Committed: Wed Oct 16 16:02:06 2013 -0700 ---------------------------------------------------------------------- ui/stylesheets/_detail-view.scss | 20 +++++++++ ui/stylesheets/_icons.scss | 3 +- ui/stylesheets/cloudstack.css | 77 ++++++++++++++++++++++++++++++++++- 3 files changed, 98 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/aa9ff0ef/ui/stylesheets/_detail-view.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/_detail-view.scss b/ui/stylesheets/_detail-view.scss index 70eb1f4..0e0af94 100644 --- a/ui/stylesheets/_detail-view.scss +++ b/ui/stylesheets/_detail-view.scss @@ -15,6 +15,14 @@ // specific language governing permissions and limitations // under the License. .detail-view { + .details { + &.group-multiple { + th { + text-align: left; + } + } + } + .toolbar { background: none; float: right; @@ -32,6 +40,18 @@ .detail-group { @include csui-details; + .button { + @include csui-action-button; + @include csui-button; + + float: right; + + .icon { + @include csui-sprite(0, 0); + background-position: inherit; + } + } + .main-groups { max-height: 400px; overflow: auto; http://git-wip-us.apache.org/repos/asf/cloudstack/blob/aa9ff0ef/ui/stylesheets/_icons.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/_icons.scss b/ui/stylesheets/_icons.scss index 8b4c1cb..1b07fe2 100644 --- a/ui/stylesheets/_icons.scss +++ b/ui/stylesheets/_icons.scss @@ -16,7 +16,8 @@ // under the License. @mixin csui-sprite($x, $y) { - background: url(../images/sprites.png) no-repeat -#{$x}px -#{$y}px; + background: url(../images/sprites.png) no-repeat; + background-position: -#{$x}px -#{$y}px; } http://git-wip-us.apache.org/repos/asf/cloudstack/blob/aa9ff0ef/ui/stylesheets/cloudstack.css ---------------------------------------------------------------------- diff --git a/ui/stylesheets/cloudstack.css b/ui/stylesheets/cloudstack.css index 6e09ab0..f848c5c 100644 --- a/ui/stylesheets/cloudstack.css +++ b/ui/stylesheets/cloudstack.css @@ -6640,6 +6640,8 @@ ul.ui-tabs-nav { left: 556px; top: 16px; } +.detail-view .details.group-multiple th { + text-align: left; } .detail-view .toolbar { background: none; float: right; @@ -6680,6 +6682,78 @@ ul.ui-tabs-nav { background: #f2f2f2; padding: 10px; border-bottom: 1px solid #ccc; } + .detail-view .detail-group .button { + float: left; + cursor: pointer; + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #cccccc)); + background-image: -webkit-linear-gradient(white, #cccccc); + background-image: linear-gradient(white, #cccccc); + display: block; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 12px; + min-width: 92px; + font-size: 11px; + border-radius: 3px; + border: 1px solid #999999; + cursor: pointer; + text-align: center; + float: right; } + .detail-view .detail-group .button span { + display: block; + float: left; } + .detail-view .detail-group .button a { + width: 25px; + height: 20px; + display: block; + float: left; + text-decoration: none; } + .detail-view .detail-group .button .icon { + display: block; + width: 25px; + height: 20px; + margin-bottom: -12px; + float: left; + position: relative; + top: -5px; + left: -5px; } + .detail-view .detail-group .button.text { + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #cccccc)); + background-image: -webkit-linear-gradient(white, #cccccc); + background-image: linear-gradient(white, #cccccc); + display: block; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 12px; + min-width: 92px; + font-size: 11px; + border-radius: 3px; + border: 1px solid #999999; + cursor: pointer; + text-align: center; + float: right; } + .detail-view .detail-group .button.text:hover { + box-shadow: inset 0 0 10px #ccc; + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f2f2f2)); + background-image: -webkit-linear-gradient(white, #f2f2f2); + background-image: linear-gradient(white, #f2f2f2); } + .detail-view .detail-group .button.text span { + float: right; } + .detail-view .detail-group .button:hover { + box-shadow: inset 0 0 10px #ccc; + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f2f2f2)); + background-image: -webkit-linear-gradient(white, #f2f2f2); + background-image: linear-gradient(white, #f2f2f2); } + .detail-view .detail-group .button .icon { + background: url(../images/sprites.png) no-repeat; + background-position: -0px -0px; + background-position: inherit; } .detail-view .detail-group .main-groups { max-height: 400px; overflow: auto; } @@ -7123,7 +7197,8 @@ body { float: left; margin-right: 1.75788%; width: 17.32172%; - background: url(../images/sprites.png) no-repeat -142px -390px; + background: url(../images/sprites.png) no-repeat; + background-position: -142px -390px; height: 30px; } #header .region-switcher .icon:last-child { margin-right: 0; }
