clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed rendering of search form

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/delta/css/clipperz.css
View File

@ -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,7 +1865,9 @@ 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; }
#selections .search form div.form div.label label {
display: block;
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "liga" 1, "dlig" 1; -webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-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; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-weight: normal; font-weight: normal;
padding-left: 8px; padding: 4px 8px 0px 8px;
padding-right: 8px;
font-size: 14pt; font-size: 14pt;
vertical-align: baseline; vertical-align: baseline; }
margin-top: 10px; } #selections .search form div.form div.input {
#selections .search form div .searchClear { -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,12 +1931,15 @@ 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;
padding-bottom: 4px; }
#selections .search form div.form .searchClear span {
padding: 3px 5px;
cursor: pointer; cursor: pointer;
margin: 12px 12px 6px 0px; } text-align: right;
#selections .search form div .searchClear .count { display: block; }
margin-right: 0px; #selections .search form div.form .searchClear span.count {
display: none; } display: none; }
#selections .search form div .searchClear .clear { #selections .search form div.form .searchClear span.clear {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "liga" 1, "dlig" 1; -webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga" 1, "dlig" 1; -moz-font-feature-settings: "liga" 1, "dlig" 1;
@ -1944,11 +1954,11 @@ div.dialogBox {
border-radius: 4px; border-radius: 4px;
color: white; color: white;
background-color: gray; background-color: gray;
padding: 3px 5px; font-size: 10pt;
font-size: 10pt; } margin-right: 12px; }
#selections .search form div .searchClear:hover .count { #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 {

2
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

88
frontend/delta/scss/style/selectionPanel.scss
View File

@ -65,19 +65,31 @@ 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);
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 { input {
@include flex(auto);
@include order(1);
font-family: "clipperz-font"; font-family: "clipperz-font";
font-size: 14pt; font-size: 14pt;
color: white; color: white;
@ -85,68 +97,41 @@ refer to http://www.clipperz.com.
border: 0px; border: 0px;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
outline: none; outline: none;
margin-right: 10px; display: block;
width: 160px;
// color: #999;
// padding: 0px 30px;
// margin: 0px 5px;
// width: 100%;
// box-sizing:border-box;
width: $selectionPanelWidth - $iconColumnWidth;
@include placeholder { @include placeholder {
font-style: italic; font-style: italic;
color: #ccc; 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 { .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; padding: 3px 5px;
cursor: pointer;
text-align: right;
display: block;
&.count {
display: none; display: none;
} }
.clear { &.clear {
@include icon-font(); @include icon-font();
display: none; display: none;
// @include border-radius(50%);
@include border-radius(4px); @include border-radius(4px);
color: white; color: white;
background-color: gray; background-color: gray;
// right:9px;
// top:9px;
// padding: 5px;
padding: 3px 5px;
font-size: 10pt; 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,11 +275,12 @@ $selectionColor: $clipperz-orange;
// } // }
form { form {
div.form {
label { label {
color: $selectionColor; color: $selectionColor;
} }
.searchClear { .searchClear {
.count { span.count {
display: block; display: block;
} }
@ -307,6 +292,7 @@ $selectionColor: $clipperz-orange;
} }
} }
} }
}
} }
#selections.TAG { #selections.TAG {