etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

List/toolbar search: Better styling for advanced search icon

This commit is contained in:
Brian Federle 2013-10-15 13:18:41 -07:00
parent d55ed95335
commit 418ebb2fa7
5 changed files with 78 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/scripts/ui/widgets/listView.js
View File

@ -862,7 +862,7 @@
$search.append('<div id="basic_search" class="button search"></div>');
if (listViewData.advSearchFields != null) {
$search.append(
$search.prepend(
$('<div>').attr({
id: 'advanced_search'
})

40
ui/stylesheets/_list-view.scss
View File

@ -20,27 +20,47 @@
// Advanced search field
#advanced_search {
float: right;
.icon {
@include csui-sprite(61, 167);
$border: 1px solid #808080;
.icon {
position: relative;
width: 15px;
height: 15px;
left: 215px;
top: 10px;
width: $csui-toolbar-field-height;
height: $csui-toolbar-field-height;
left: -10px;
cursor: pointer;
z-index: 10;
border-radius: 0 3px 3px 0;
text-align: center;
border: $border;
border-left: none;
&:hover {
box-shadow: inset 0px 0px 7px lighten(black, 30%);
}
@include linear-gradient(white, #9E9E9E);
&:after {
@include icon($caret-down);
font-size: 15px;
position: relative;
top: $csui-toolbar-field-height / 4;
}
}
.form-container {
@include csui-dialog;
@include csui-form;
width: 400px;
margin-top: -15px;
margin-left: -160px;
opacity: 0.9;
$width: 400px;
width: $width;
margin-top: -$csui-toolbar-field-height;
margin-left: -$width - 10;
padding-top: 0px;
border: $border;
form {
display: inline-block;

65
ui/stylesheets/cloudstack.css
View File

@ -4990,7 +4990,7 @@ input[type=text], input[type=password] {
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid gray;
border: 1px solid gray;
text-indent: 15px;
padding-right: 15px; }
input[type=text]:focus, input[type=password]:focus {
@ -5319,7 +5319,7 @@ ul.ui-tabs-nav {
cursor: pointer;
text-align: center;
float: right;
margin-right: 10px; }
margin-left: 10px; }
.dashboard.admin .sub.alerts .top .button.action:hover {
box-shadow: inset 0 0 10px black; }
.dashboard.admin .sub.alerts .top input, .dashboard.admin .sub.alerts .top label, .dashboard.admin .sub.alerts .top select {
@ -5327,12 +5327,12 @@ ul.ui-tabs-nav {
margin: 0 10px 0 10px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 12px; }
font-size: 12px;
height: 35px; }
.dashboard.admin .sub.alerts .top label {
margin-right: 0px; }
.dashboard.admin .sub.alerts .top .search-bar {
float: right;
margin-right: 25px; }
float: right; }
.dashboard.admin .sub.alerts .top .title {
float: left;
padding-top: 8px; }
@ -5385,7 +5385,7 @@ ul.ui-tabs-nav {
cursor: pointer;
text-align: center;
float: right;
margin-right: 10px; }
margin-left: 10px; }
.dashboard.admin .head .top .button.action:hover {
box-shadow: inset 0 0 10px black; }
.dashboard.admin .head .top input, .dashboard.admin .head .top label, .dashboard.admin .head .top select {
@ -5393,12 +5393,12 @@ ul.ui-tabs-nav {
margin: 0 10px 0 10px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 12px; }
font-size: 12px;
height: 35px; }
.dashboard.admin .head .top label {
margin-right: 0px; }
.dashboard.admin .head .top .search-bar {
float: right;
margin-right: 25px; }
float: right; }
.dashboard.admin .head .top .title {
float: left;
margin-top: 8px; }
@ -6098,24 +6098,43 @@ ul.ui-tabs-nav {
.list-view #advanced_search {
float: right; }
.list-view #advanced_search .icon {
background: url(../images/sprites.png) no-repeat -61px -167px;
position: relative;
width: 15px;
height: 15px;
left: 215px;
top: 10px;
width: 35px;
height: 35px;
left: -10px;
cursor: pointer;
z-index: 10; }
z-index: 10;
border-radius: 0 3px 3px 0;
text-align: center;
border: 1px solid gray;
border-left: none;
background-color: white;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #9e9e9e));
background-image: -webkit-linear-gradient(white, #9e9e9e);
background-image: linear-gradient(white, #9e9e9e); }
.list-view #advanced_search .icon:hover {
box-shadow: inset 0px 0px 7px #4d4d4d; }
.list-view #advanced_search .icon:after {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
content: "\f0d7";
font-size: 15px;
position: relative;
top: 8.75px; }
.list-view #advanced_search .form-container {
background: white;
box-shadow: 0px 2px 10px black;
position: absolute;
padding: 20px;
width: 400px;
margin-top: -15px;
margin-left: -160px;
opacity: 0.9;
padding-top: 0px; }
margin-top: -35px;
margin-left: -410px;
padding-top: 0px;
border: 1px solid gray; }
.list-view #advanced_search .form-container .ui-dialog-titlebar {
*zoom: 1;
display: block;
@ -6976,7 +6995,7 @@ body {
cursor: pointer;
text-align: center;
float: right;
margin-right: 10px; }
margin-left: 10px; }
.toolbar .button.action:hover {
box-shadow: inset 0 0 10px black; }
.toolbar input, .toolbar label, .toolbar select {
@ -6984,12 +7003,12 @@ body {
margin: 0 10px 0 10px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 12px; }
font-size: 12px;
height: 35px; }
.toolbar label {
margin-right: 0px; }
.toolbar .search-bar {
float: right;
margin-right: 25px; }
float: right; }
.toolbar .panel-controls {
display: none; }
.toolbar .button.refresh {

2
ui/stylesheets/csui/_form.scss
View File

@ -60,7 +60,7 @@
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid gray;
border: 1px solid gray;
text-indent: 15px;
padding-right: 15px;

6
ui/stylesheets/csui/_toolbar.scss
View File

@ -1,3 +1,5 @@
$csui-toolbar-field-height: 35px;
@mixin csui-toolbar {
@include row;
@ -8,7 +10,7 @@
@include csui-button;
float: right;
margin-right: 10px;
margin-left: 10px;
}
input, label, select {
@ -17,6 +19,7 @@
padding-top: 6px;
padding-bottom: 6px;
font-size: 12px;
height: $csui-toolbar-field-height;
}
label {
@ -25,6 +28,5 @@
.search-bar {
float: right;
margin-right: 25px;
}
}