Fixed rendering of search form

This commit is contained in:
Giulio Cesare Solaroli 2015-07-31 09:15:13 +02:00
parent 392a8bb3a4
commit 197bce0d00
3 changed files with 150 additions and 154 deletions

View File

@ -1837,7 +1837,7 @@ div.dialogBox {
content: "recent"; }
#selections ul.defaultSet li.untaggedCards {
padding-left: 35px; }
#selections .search form div {
#selections .search form div.form {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
@ -1848,41 +1848,13 @@ div.dialogBox {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
#selections .search form div input {
-webkit-box-flex: auto;
-webkit-flex: auto;
-moz-box-flex: auto;
-moz-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-moz-order: 1;
-ms-flex-order: 1;
order: 1;
font-family: "clipperz-font";
font-size: 14pt;
color: white;
background-color: black;
border: 0px;
border-bottom: 1px solid #333;
outline: none;
margin-right: 10px;
width: 210px; }
#selections .search form div input::-webkit-input-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div input:-moz-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div input::-moz-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div input:-ms-input-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div label {
flex-direction: row;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
align-items: stretch; }
#selections .search form div.form div.label {
-webkit-box-flex: none;
-webkit-flex: none;
-moz-box-flex: none;
@ -1893,7 +1865,9 @@ div.dialogBox {
-webkit-order: 0;
-moz-order: 0;
-ms-flex-order: 0;
order: 0;
order: 0; }
#selections .search form div.form div.label label {
display: block;
font-family: 'clipperz-icons';
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga" 1, "dlig" 1;
@ -1903,12 +1877,45 @@ div.dialogBox {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-weight: normal;
padding-left: 8px;
padding-right: 8px;
padding: 4px 8px 0px 8px;
font-size: 14pt;
vertical-align: baseline;
margin-top: 10px; }
#selections .search form div .searchClear {
vertical-align: baseline; }
#selections .search form div.form div.input {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-moz-order: 1;
-ms-flex-order: 1;
order: 1;
overflow: hidden; }
#selections .search form div.form div.input input {
font-family: "clipperz-font";
font-size: 14pt;
color: white;
background-color: black;
border: 0px;
border-bottom: 1px solid #333;
outline: none;
display: block;
width: 160px; }
#selections .search form div.form div.input input::-webkit-input-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div.form div.input input:-moz-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div.form div.input input::-moz-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div.form div.input input:-ms-input-placeholder {
font-style: italic;
color: #ccc; }
#selections .search form div.form .searchClear {
-webkit-box-flex: none;
-webkit-flex: none;
-moz-box-flex: none;
@ -1924,12 +1931,15 @@ div.dialogBox {
-moz-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
padding-bottom: 4px; }
#selections .search form div.form .searchClear span {
padding: 3px 5px;
cursor: pointer;
margin: 12px 12px 6px 0px; }
#selections .search form div .searchClear .count {
margin-right: 0px;
text-align: right;
display: block; }
#selections .search form div.form .searchClear span.count {
display: none; }
#selections .search form div .searchClear .clear {
#selections .search form div.form .searchClear span.clear {
font-family: 'clipperz-icons';
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga" 1, "dlig" 1;
@ -1944,11 +1954,11 @@ div.dialogBox {
border-radius: 4px;
color: white;
background-color: gray;
padding: 3px 5px;
font-size: 10pt; }
#selections .search form div .searchClear:hover .count {
font-size: 10pt;
margin-right: 12px; }
#selections .search form div.form .searchClear:hover .count {
display: none; }
#selections .search form div .searchClear:hover .clear {
#selections .search form div.form .searchClear:hover .clear {
background-color: #666;
display: block; }
#selections .search .searchResultInfo {
@ -2074,11 +2084,11 @@ span.count {
#selections.UNTAGGED li.untaggedCards {
color: #ff9900; }
#selections.SEARCH div.search form label {
#selections.SEARCH div.search form div.form label {
color: #ff9900; }
#selections.SEARCH div.search form .searchClear .count {
#selections.SEARCH div.search form div.form .searchClear span.count {
display: block; }
#selections.SEARCH div.search form .searchClear:hover .count {
#selections.SEARCH div.search form div.form .searchClear:hover .count {
display: none; }
#selections.TAG ul.tagList li.selected {

File diff suppressed because one or more lines are too long

View File

@ -65,19 +65,31 @@ refer to http://www.clipperz.com.
.search {
form {
// padding:2px;
// position:relative;
// box-sizing:border-box;
// width:95%;
div {
div.form {
@include flexbox();
@include flex-direction(row);
@include align-items(stretch);
div.label {
@include flex(none);
@include order(0);
label {
display: block;
@include icon-font();
font-weight: normal;
padding: 4px 8px 0px 8px;
font-size: 14pt;
vertical-align: baseline;
}
}
div.input {
@include flex(1);
@include order(1);
overflow: hidden;
input {
@include flex(auto);
@include order(1);
font-family: "clipperz-font";
font-size: 14pt;
color: white;
@ -85,68 +97,41 @@ refer to http://www.clipperz.com.
border: 0px;
border-bottom: 1px solid #333;
outline: none;
margin-right: 10px;
// color: #999;
// padding: 0px 30px;
// margin: 0px 5px;
// width: 100%;
// box-sizing:border-box;
width: $selectionPanelWidth - $iconColumnWidth;
display: block;
width: 160px;
@include placeholder {
font-style: italic;
color: #ccc;
}
}
label {
@include flex(none);
@include order(0);
@include icon-font();
font-weight: normal;
padding-left: 8px;
padding-right: 8px;
font-size: 14pt;
vertical-align: baseline;
margin-top: 10px;
// font-size: 18pt;
// padding-left: $spacing;
// padding-right:5px;
// position:absolute;
// top:9px;
// left:9px;
// color: #666;
}
.searchClear {
@include flex(none);
@include order(2);
@include align-self(flex-end);
cursor: pointer;
margin: 12px 12px 6px 0px;
padding-bottom: 4px;
.count {
margin-right: 0px;
span {
padding: 3px 5px;
cursor: pointer;
text-align: right;
display: block;
&.count {
display: none;
}
.clear {
&.clear {
@include icon-font();
display: none;
// @include border-radius(50%);
@include border-radius(4px);
color: white;
background-color: gray;
// right:9px;
// top:9px;
// padding: 5px;
padding: 3px 5px;
font-size: 10pt;
margin-right: 12px;
}
}
&:hover {
@ -163,7 +148,6 @@ refer to http://www.clipperz.com.
}
.searchResultInfo {
// color: #999;
font-size: 10pt;
padding: 2px 6px;
display: none;
@ -291,11 +275,12 @@ $selectionColor: $clipperz-orange;
// }
form {
div.form {
label {
color: $selectionColor;
}
.searchClear {
.count {
span.count {
display: block;
}
@ -307,6 +292,7 @@ $selectionColor: $clipperz-orange;
}
}
}
}
}
#selections.TAG {