diff --git a/ui/stylesheets/_icons.scss b/ui/stylesheets/_icons.scss index 07196622d69..8b4c1cbbd73 100644 --- a/ui/stylesheets/_icons.scss +++ b/ui/stylesheets/_icons.scss @@ -14,6 +14,12 @@ // KIND, either express or implied. See the License for the // specific language governing permissions and limitations // under the License. + +@mixin csui-sprite($x, $y) { + background: url(../images/sprites.png) no-repeat -#{$x}px -#{$y}px; +} + + .action.edit .icon { background-position: 1px -1px; } diff --git a/ui/stylesheets/cloudstack.scss b/ui/stylesheets/cloudstack.scss index 0ff5616c92d..73566c3a7d0 100644 --- a/ui/stylesheets/cloudstack.scss +++ b/ui/stylesheets/cloudstack.scss @@ -224,6 +224,66 @@ body { .list-view { @include csui-list; + // Advanced search field + #advanced_search { + float: right; + .icon { + @include csui-sprite(61, 167); + + position: relative; + width: 15px; + height: 15px; + left: 215px; + top: 10px; + cursor: pointer; + z-index: 10000; + } + + .form-container { + @include csui-dialog; + @include csui-form; + + width: 400px; + margin-top: -15px; + margin-left: -160px; + opacity: 0.9; + padding-top: 0px; + + form { + display: inline-block; + border: none; + } + + .message { display: none; } + + .form-item { + margin-top: 20px; + } + + .name { + position: relative; + top: -20px; + } + + input[type=submit], .button.cancel { + position: relative; + top: 25px; + } + + input[type=submit] { + @include csui-button-cta; + + float: right; + } + + .button.cancel { + @include csui-button; + + float: left; + } + } + } + max-height: 85%; } @@ -257,7 +317,7 @@ body { background: lighten(#ccc, 12%); } } - + th, td { padding: 10px; } diff --git a/ui/stylesheets/csui/_button.scss b/ui/stylesheets/csui/_button.scss index 087ca50622f..48b3982c959 100644 --- a/ui/stylesheets/csui/_button.scss +++ b/ui/stylesheets/csui/_button.scss @@ -27,6 +27,7 @@ border-radius: 3px; border: 1px solid black; cursor: pointer; + text-align: center; &:hover { box-shadow: inset 0 0 10px black;