Fixed rendering of search form
This commit is contained in:
Giulio Cesare Solaroli
parent
392a8bb3a4
commit
197bce0d00
@ -1837,7 +1837,7 @@ div.dialogBox {
|
|||||||
content: "recent"; }
|
content: "recent"; }
|
||||||
#selections ul.defaultSet li.untaggedCards {
|
#selections ul.defaultSet li.untaggedCards {
|
||||||
padding-left: 35px; }
|
padding-left: 35px; }
|
||||||
#selections .search form div {
|
#selections .search form div.form {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -moz-flex;
|
display: -moz-flex;
|
||||||
@ -1848,41 +1848,13 @@ div.dialogBox {
|
|||||||
-webkit-flex-direction: row;
|
-webkit-flex-direction: row;
|
||||||
-moz-flex-direction: row;
|
-moz-flex-direction: row;
|
||||||
-ms-flex-direction: row;
|
-ms-flex-direction: row;
|
||||||
flex-direction: row; }
|
flex-direction: row;
|
||||||
#selections .search form div input {
|
-webkit-box-align: stretch;
|
||||||
-webkit-box-flex: auto;
|
-ms-flex-align: stretch;
|
||||||
-webkit-flex: auto;
|
-webkit-align-items: stretch;
|
||||||
-moz-box-flex: auto;
|
-moz-align-items: stretch;
|
||||||
-moz-flex: auto;
|
align-items: stretch; }
|
||||||
-ms-flex: auto;
|
#selections .search form div.form div.label {
|
||||||
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 {
|
|
||||||
-webkit-box-flex: none;
|
-webkit-box-flex: none;
|
||||||
-webkit-flex: none;
|
-webkit-flex: none;
|
||||||
-moz-box-flex: none;
|
-moz-box-flex: none;
|
||||||
@ -1893,22 +1865,57 @@ div.dialogBox {
|
|||||||
-webkit-order: 0;
|
-webkit-order: 0;
|
||||||
-moz-order: 0;
|
-moz-order: 0;
|
||||||
-ms-flex-order: 0;
|
-ms-flex-order: 0;
|
||||||
order: 0;
|
order: 0; }
|
||||||
font-family: 'clipperz-icons';
|
#selections .search form div.form div.label label {
|
||||||
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
|
display: block;
|
||||||
-moz-font-feature-settings: "liga" 1, "dlig" 1;
|
font-family: 'clipperz-icons';
|
||||||
-ms-font-feature-settings: "liga" 1, "dlig" 1;
|
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
-o-font-feature-settings: "liga" 1, "dlig" 1;
|
-moz-font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
font-feature-settings: "liga" 1, "dlig" 1;
|
-ms-font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
-webkit-font-smoothing: antialiased;
|
-o-font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
text-rendering: optimizeLegibility;
|
font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
font-weight: normal;
|
-webkit-font-smoothing: antialiased;
|
||||||
padding-left: 8px;
|
text-rendering: optimizeLegibility;
|
||||||
padding-right: 8px;
|
font-weight: normal;
|
||||||
font-size: 14pt;
|
padding: 4px 8px 0px 8px;
|
||||||
vertical-align: baseline;
|
font-size: 14pt;
|
||||||
margin-top: 10px; }
|
vertical-align: baseline; }
|
||||||
#selections .search form div .searchClear {
|
#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-box-flex: none;
|
||||||
-webkit-flex: none;
|
-webkit-flex: none;
|
||||||
-moz-box-flex: none;
|
-moz-box-flex: none;
|
||||||
@ -1924,31 +1931,34 @@ div.dialogBox {
|
|||||||
-moz-align-self: flex-end;
|
-moz-align-self: flex-end;
|
||||||
-ms-flex-item-align: end;
|
-ms-flex-item-align: end;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
cursor: pointer;
|
padding-bottom: 4px; }
|
||||||
margin: 12px 12px 6px 0px; }
|
#selections .search form div.form .searchClear span {
|
||||||
#selections .search form div .searchClear .count {
|
|
||||||
margin-right: 0px;
|
|
||||||
display: none; }
|
|
||||||
#selections .search form div .searchClear .clear {
|
|
||||||
font-family: 'clipperz-icons';
|
|
||||||
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
|
|
||||||
-moz-font-feature-settings: "liga" 1, "dlig" 1;
|
|
||||||
-ms-font-feature-settings: "liga" 1, "dlig" 1;
|
|
||||||
-o-font-feature-settings: "liga" 1, "dlig" 1;
|
|
||||||
font-feature-settings: "liga" 1, "dlig" 1;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
display: none;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: white;
|
|
||||||
background-color: gray;
|
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
font-size: 10pt; }
|
cursor: pointer;
|
||||||
#selections .search form div .searchClear:hover .count {
|
text-align: right;
|
||||||
|
display: block; }
|
||||||
|
#selections .search form div.form .searchClear span.count {
|
||||||
|
display: none; }
|
||||||
|
#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;
|
||||||
|
-ms-font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
|
-o-font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
|
font-feature-settings: "liga" 1, "dlig" 1;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
display: none;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: white;
|
||||||
|
background-color: gray;
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-right: 12px; }
|
||||||
|
#selections .search form div.form .searchClear:hover .count {
|
||||||
display: none; }
|
display: none; }
|
||||||
#selections .search form div .searchClear:hover .clear {
|
#selections .search form div.form .searchClear:hover .clear {
|
||||||
background-color: #666;
|
background-color: #666;
|
||||||
display: block; }
|
display: block; }
|
||||||
#selections .search .searchResultInfo {
|
#selections .search .searchResultInfo {
|
||||||
@ -2074,11 +2084,11 @@ span.count {
|
|||||||
#selections.UNTAGGED li.untaggedCards {
|
#selections.UNTAGGED li.untaggedCards {
|
||||||
color: #ff9900; }
|
color: #ff9900; }
|
||||||
|
|
||||||
#selections.SEARCH div.search form label {
|
#selections.SEARCH div.search form div.form label {
|
||||||
color: #ff9900; }
|
color: #ff9900; }
|
||||||
#selections.SEARCH div.search form .searchClear .count {
|
#selections.SEARCH div.search form div.form .searchClear span.count {
|
||||||
display: block; }
|
display: block; }
|
||||||
#selections.SEARCH div.search form .searchClear:hover .count {
|
#selections.SEARCH div.search form div.form .searchClear:hover .count {
|
||||||
display: none; }
|
display: none; }
|
||||||
|
|
||||||
#selections.TAG ul.tagList li.selected {
|
#selections.TAG ul.tagList li.selected {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -65,88 +65,73 @@ refer to http://www.clipperz.com.
|
|||||||
|
|
||||||
.search {
|
.search {
|
||||||
form {
|
form {
|
||||||
// padding:2px;
|
div.form {
|
||||||
// position:relative;
|
|
||||||
// box-sizing:border-box;
|
|
||||||
// width:95%;
|
|
||||||
|
|
||||||
div {
|
|
||||||
@include flexbox();
|
@include flexbox();
|
||||||
@include flex-direction(row);
|
@include flex-direction(row);
|
||||||
|
@include align-items(stretch);
|
||||||
|
|
||||||
input {
|
div.label {
|
||||||
@include flex(auto);
|
@include flex(none);
|
||||||
@include order(1);
|
@include order(0);
|
||||||
|
|
||||||
font-family: "clipperz-font";
|
label {
|
||||||
font-size: 14pt;
|
display: block;
|
||||||
color: white;
|
@include icon-font();
|
||||||
background-color: black;
|
font-weight: normal;
|
||||||
border: 0px;
|
padding: 4px 8px 0px 8px;
|
||||||
border-bottom: 1px solid #333;
|
font-size: 14pt;
|
||||||
outline: none;
|
vertical-align: baseline;
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
// color: #999;
|
|
||||||
// padding: 0px 30px;
|
|
||||||
// margin: 0px 5px;
|
|
||||||
// width: 100%;
|
|
||||||
// box-sizing:border-box;
|
|
||||||
|
|
||||||
width: $selectionPanelWidth - $iconColumnWidth;
|
|
||||||
|
|
||||||
@include placeholder {
|
|
||||||
font-style: italic;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
div.input {
|
||||||
@include flex(none);
|
@include flex(1);
|
||||||
@include order(0);
|
@include order(1);
|
||||||
@include icon-font();
|
overflow: hidden;
|
||||||
|
|
||||||
font-weight: normal;
|
input {
|
||||||
padding-left: 8px;
|
font-family: "clipperz-font";
|
||||||
padding-right: 8px;
|
font-size: 14pt;
|
||||||
font-size: 14pt;
|
color: white;
|
||||||
vertical-align: baseline;
|
background-color: black;
|
||||||
|
border: 0px;
|
||||||
margin-top: 10px;
|
border-bottom: 1px solid #333;
|
||||||
|
outline: none;
|
||||||
|
display: block;
|
||||||
|
width: 160px;
|
||||||
|
|
||||||
// font-size: 18pt;
|
@include placeholder {
|
||||||
// padding-left: $spacing;
|
font-style: italic;
|
||||||
// padding-right:5px;
|
color: #ccc;
|
||||||
// position:absolute;
|
}
|
||||||
// top:9px;
|
}
|
||||||
// left:9px;
|
|
||||||
// color: #666;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchClear {
|
.searchClear {
|
||||||
@include flex(none);
|
@include flex(none);
|
||||||
@include order(2);
|
@include order(2);
|
||||||
@include align-self(flex-end);
|
@include align-self(flex-end);
|
||||||
cursor: pointer;
|
padding-bottom: 4px;
|
||||||
margin: 12px 12px 6px 0px;
|
|
||||||
|
|
||||||
.count {
|
span {
|
||||||
margin-right: 0px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.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;
|
padding: 3px 5px;
|
||||||
font-size: 10pt;
|
cursor: pointer;
|
||||||
|
text-align: right;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&.count {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&.clear {
|
||||||
|
@include icon-font();
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include border-radius(4px);
|
||||||
|
color: white;
|
||||||
|
background-color: gray;
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -163,7 +148,6 @@ refer to http://www.clipperz.com.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.searchResultInfo {
|
.searchResultInfo {
|
||||||
// color: #999;
|
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
display: none;
|
display: none;
|
||||||
@ -291,17 +275,19 @@ $selectionColor: $clipperz-orange;
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
form {
|
form {
|
||||||
label {
|
div.form {
|
||||||
color: $selectionColor;
|
label {
|
||||||
}
|
color: $selectionColor;
|
||||||
.searchClear {
|
|
||||||
.count {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
.searchClear {
|
||||||
|
span.count {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.count {
|
.count {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user