Add base CSUI styles: -Login
-Main header -Main UI container -Logo Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/0728316d Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/0728316d Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/0728316d Branch: refs/heads/ui-restyle Commit: 0728316d3997bf742268750c11428f97f36c75ea Parents: 382723d Author: Brian Federle <[email protected]> Authored: Mon Sep 23 11:19:12 2013 -0700 Committer: Brian Federle <[email protected]> Committed: Mon Sep 23 11:19:12 2013 -0700 ---------------------------------------------------------------------- ui/stylesheets/csui/_button.scss | 22 ++++++ ui/stylesheets/csui/_csui.scss | 17 +++++ ui/stylesheets/csui/_form.scss | 27 +++++++ ui/stylesheets/csui/_header.scss | 29 ++++++++ ui/stylesheets/csui/_login.scss | 70 +++++++++++++++++++ .../csui/img/form/dropdown-arrow-white.png | Bin 0 -> 146 bytes ui/stylesheets/csui/img/form/dropdown-arrow.png | Bin 0 -> 167 bytes ui/stylesheets/csui/img/header/gradient.png | Bin 0 -> 72040 bytes ui/stylesheets/csui/img/login/bottom-bar.png | Bin 0 -> 20161 bytes ui/stylesheets/csui/img/login/brand-logo.png | Bin 0 -> 34193 bytes ui/stylesheets/csui/img/login/gradient.png | Bin 0 -> 618303 bytes ui/stylesheets/csui/img/logo-main.png | Bin 0 -> 26591 bytes ui/stylesheets/csui/img/overlay-pattern.png | Bin 0 -> 14530 bytes 13 files changed, 165 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/_button.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_button.scss b/ui/stylesheets/csui/_button.scss new file mode 100644 index 0000000..033d8ba --- /dev/null +++ b/ui/stylesheets/csui/_button.scss @@ -0,0 +1,22 @@ +@mixin csui-button { + @include linear-gradient(#fff, darken(#ccc, 30%)); + + display: block; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 12px; + min-width: 92px; + font-size: 12px; + border-radius: 3px; + border: 1px solid black; +} + +@mixin csui-button-cta { + @include csui-button; + @include linear-gradient(darkgray, lighten(black, 15%)); + + color: white; + font-weight: bold; + text-shadow: 0px 1px 1px black; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/_csui.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_csui.scss b/ui/stylesheets/csui/_csui.scss new file mode 100644 index 0000000..35c9cf5 --- /dev/null +++ b/ui/stylesheets/csui/_csui.scss @@ -0,0 +1,17 @@ +// External libs +@import "../lib/normalize"; +@import "../lib/animate"; +@import "../lib/bourbon/bourbon"; +@import "../lib/neat/neat"; + +// Core style +html, body { + height: 100%; + font-family: Segoe UI,Trebuchet MS,Tahoma,Arial,sans-serif; +} + +// Sub-components +@import "login"; +@import "button"; +@import "form"; +@import "header"; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/_form.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_form.scss b/ui/stylesheets/csui/_form.scss new file mode 100644 index 0000000..b958207 --- /dev/null +++ b/ui/stylesheets/csui/_form.scss @@ -0,0 +1,27 @@ +@mixin csui-dropdown { + -webkit-appearance: button; + -moz-appearance: none; + + @include background( + url(csui/img/form/dropdown-arrow.png) no-repeat right 8px center, + linear-gradient(#fff, #b6b6b6) + ); + + border-radius: 3px; + border: 1px solid black; + font-size: 14px; + height: 30px; + text-indent: 8px; +} + +@mixin csui-dropdown-dark { + @include csui-dropdown; + @include background( + url(csui/img/form/dropdown-arrow-white.png) no-repeat right 8px center, + linear-gradient(#4e4e4e, #242424) + ); + + color: white; + font-weight: bold; + text-shadow: 0px 1px 1px black; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/_header.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_header.scss b/ui/stylesheets/csui/_header.scss new file mode 100644 index 0000000..b6d378d --- /dev/null +++ b/ui/stylesheets/csui/_header.scss @@ -0,0 +1,29 @@ +@mixin csui-header { + @include background( + url(csui/img/overlay-pattern.png) repeat, + url(csui/img/header/gradient.png) no-repeat + ); + + background-size: auto, cover; + + .logo { + background: url(csui/img/logo-main.png) no-repeat left; + width: 1280px; + height: 100px; + margin: auto; + background-size: 300px; + } + + .controls { + @include linear-gradient(#525252, #262626); + @include row; + + width: 1280px; + height: 75px; + padding-top: 14px; + margin: auto; + color: white; + border: 1px solid gray; + border-radius: 4px 4px 0 0; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/_login.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_login.scss b/ui/stylesheets/csui/_login.scss new file mode 100644 index 0000000..bf24345 --- /dev/null +++ b/ui/stylesheets/csui/_login.scss @@ -0,0 +1,70 @@ +@mixin csui-login { + height: 100%; + min-height: 630px; + + @include background( + url(csui/img/login/brand-logo.png), + url(csui/img/login/bottom-bar.png), + url(csui/img/login/overlay-pattern.png), + url(csui/img/login/gradient.png) + ); + + background-repeat: no-repeat, repeat-x, repeat, no-repeat; + background-size: auto, auto, auto, cover; + background-position: center bottom 25px, bottom, center, center; + + form { + @include row; + + background: rgba(#000812, 0.8); + padding-top: 60px; + padding-bottom: 60px; + position: relative; + top: 15%; + height: 400px; + + .logo { + @include shift(2); + @include span-columns(4); + + background: url(csui/img/logo-main.png) no-repeat top center; + background-size: contain; + float: left; + height: 500px; + } + + .fields { + @include shift(3); + @include span-columns(3); + + margin: auto; + color: white; + + input[type=text], + input[type=password] { + font-size: 13px; + width: 100%; + padding: 10px; + margin-top: 10px; + margin-bottom: 10px; + border: 2px solid gray; + + &:focus { + border: 2px solid #6aa6e9; + outline: none; + } + } + + input[type=submit] { + @include csui-button-cta; + } + + select { + @include csui-dropdown-dark; + + width: 100%; + margin-top: 20px; + } + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/form/dropdown-arrow-white.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/form/dropdown-arrow-white.png b/ui/stylesheets/csui/img/form/dropdown-arrow-white.png new file mode 100755 index 0000000..e6b4aea Binary files /dev/null and b/ui/stylesheets/csui/img/form/dropdown-arrow-white.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/form/dropdown-arrow.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/form/dropdown-arrow.png b/ui/stylesheets/csui/img/form/dropdown-arrow.png new file mode 100755 index 0000000..9c1f6e4 Binary files /dev/null and b/ui/stylesheets/csui/img/form/dropdown-arrow.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/header/gradient.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/header/gradient.png b/ui/stylesheets/csui/img/header/gradient.png new file mode 100644 index 0000000..8ff49a2 Binary files /dev/null and b/ui/stylesheets/csui/img/header/gradient.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/login/bottom-bar.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/login/bottom-bar.png b/ui/stylesheets/csui/img/login/bottom-bar.png new file mode 100644 index 0000000..978bbde Binary files /dev/null and b/ui/stylesheets/csui/img/login/bottom-bar.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/login/brand-logo.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/login/brand-logo.png b/ui/stylesheets/csui/img/login/brand-logo.png new file mode 100755 index 0000000..cca6540 Binary files /dev/null and b/ui/stylesheets/csui/img/login/brand-logo.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/login/gradient.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/login/gradient.png b/ui/stylesheets/csui/img/login/gradient.png new file mode 100644 index 0000000..56e0087 Binary files /dev/null and b/ui/stylesheets/csui/img/login/gradient.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/logo-main.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/logo-main.png b/ui/stylesheets/csui/img/logo-main.png new file mode 100644 index 0000000..82a0f05 Binary files /dev/null and b/ui/stylesheets/csui/img/logo-main.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0728316d/ui/stylesheets/csui/img/overlay-pattern.png ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/img/overlay-pattern.png b/ui/stylesheets/csui/img/overlay-pattern.png new file mode 100644 index 0000000..d03aba8 Binary files /dev/null and b/ui/stylesheets/csui/img/overlay-pattern.png differ
