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

Some extra work on the styling of some components

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-02-06 17:26:27 +01:00
parent 6c021b5772
commit 967222eac8
4 changed files with 95 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1484,7 +1484,8 @@ div.dialogBox {
font-size: 18pt; font-size: 18pt;
padding: 0px 30px; padding: 0px 30px;
margin: 0px 5px; margin: 0px 5px;
width: 290px; } width: 290px;
vertical-align: middle; }
#selections .search form label { #selections .search form label {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
@ -1498,7 +1499,8 @@ div.dialogBox {
font-size: 18pt; font-size: 18pt;
padding-left: 5px; padding-left: 5px;
margin-left: -295px; margin-left: -295px;
color: #666; } color: #666;
vertical-align: sub; }
#selections .search form .searchClear { #selections .search form .searchClear {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
@ -1559,15 +1561,22 @@ div.dialogBox {
padding-right: 8px; padding-right: 8px;
font-size: 14pt; } font-size: 14pt; }
#selections .showArchivedCards { #selections .showArchivedCards {
padding: 10px;
font-size: 12pt; } font-size: 12pt; }
#selections .showArchivedCards span.count { #selections .showArchivedCards .label {
background-color: gray; padding-left: 5px; }
font-size: 10pt;
margin-left: 10px; span.count {
padding: 0px 4px; background-color: gray;
-webkit-border-radius: 4px; font-size: 10pt;
-moz-border-radius: 4px; margin-left: 10px;
border-radius: 4px; } padding: 0px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: white;
font-weight: 300;
vertical-align: middle; }
#selections.ALL li.allCards { #selections.ALL li.allCards {
color: #ff9900; } color: #ff9900; }
@ -1712,58 +1721,61 @@ div.cardList ul {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; } padding-right: 8px; }
div.cardList.narrow.loadingCard li.selected:after { div.cardList.narrow {
color: white; overflow-y: auto;
margin-right: 10px; -webkit-overflow-scrolling: touch; }
content: "loading"; div.cardList.narrow.loadingCard li.selected:after {
-webkit-animation-name: spin; color: white;
-webkit-animation-duration: 1s; margin-right: 10px;
-webkit-animation-timing-function: linear; content: "loading";
-webkit-animation-iteration-count: infinite; -webkit-animation-name: spin;
-webkit-animation-fill-mode: none; -webkit-animation-duration: 1s;
-moz-animation-name: spin; -webkit-animation-timing-function: linear;
-moz-animation-duration: 1s; -webkit-animation-iteration-count: infinite;
-moz-animation-timing-function: linear; -webkit-animation-fill-mode: none;
-moz-animation-iteration-count: infinite; -moz-animation-name: spin;
-moz-animation-fill-mode: none; -moz-animation-duration: 1s;
-ms-animation-name: spin; -moz-animation-timing-function: linear;
-ms-animation-duration: 1s; -moz-animation-iteration-count: infinite;
-ms-animation-timing-function: linear; -moz-animation-fill-mode: none;
-ms-animation-iteration-count: infinite; -ms-animation-name: spin;
-ms-animation-fill-mode: none; -ms-animation-duration: 1s;
-o-animation-name: spin; -ms-animation-timing-function: linear;
-o-animation-duration: 1s; -ms-animation-iteration-count: infinite;
-o-animation-timing-function: linear; -ms-animation-fill-mode: none;
-o-animation-iteration-count: infinite; -o-animation-name: spin;
-o-animation-fill-mode: none; -o-animation-duration: 1s;
animation-name: spin; -o-animation-timing-function: linear;
animation-duration: 1s; -o-animation-iteration-count: infinite;
animation-timing-function: linear; -o-animation-fill-mode: none;
animation-iteration-count: infinite; animation-name: spin;
animation-fill-mode: none; } animation-duration: 1s;
div.cardList.narrow ul li:after { animation-timing-function: linear;
content: "show detail"; animation-iteration-count: infinite;
-webkit-box-flex: none; animation-fill-mode: none; }
-webkit-flex: none; div.cardList.narrow ul li:after {
-moz-box-flex: none; content: "show detail";
-moz-flex: none; -webkit-box-flex: none;
-ms-flex: none; -webkit-flex: none;
flex: none; -moz-box-flex: none;
font-family: 'clipperz-icons'; -moz-flex: none;
-webkit-font-feature-settings: "$foo","$bar"; -ms-flex: none;
-moz-font-feature-settings: "$foo=1, $bar=1"; flex: none;
-moz-font-feature-settings: "$foo","$bar"; font-family: 'clipperz-icons';
-ms-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
-o-font-feature-settings: "$foo","$bar"; -moz-font-feature-settings: "$foo=1, $bar=1";
font-feature-settings: "$foo","$bar"; -moz-font-feature-settings: "$foo","$bar";
-webkit-font-smoothing: antialiased; -ms-font-feature-settings: "$foo","$bar";
text-rendering: optimizeLegibility; -o-font-feature-settings: "$foo","$bar";
height: 48px; font-feature-settings: "$foo","$bar";
font-size: 24pt; -webkit-font-smoothing: antialiased;
line-height: 48px; text-rendering: optimizeLegibility;
margin-right: 25px; } height: 48px;
div.cardList.narrow.EXPIRED ul li:after { font-size: 24pt;
content: ""; } line-height: 48px;
margin-right: 25px; }
div.cardList.narrow.EXPIRED ul li:after {
content: ""; }
#cardDetailPage .view.archived, .cardDetail .view.archived { #cardDetailPage .view.archived, .cardDetail .view.archived {
background-color: #eeeeee; } background-color: #eeeeee; }

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

File diff suppressed because one or more lines are too long

2
frontend/delta/scss/style/card.scss
View File

@ -83,6 +83,8 @@ div.cardList {
} }
div.cardList.narrow { div.cardList.narrow {
@include overflow-scroll;
&.loadingCard { &.loadingCard {
li.selected { li.selected {
// background-color: gray; // background-color: gray;

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

@ -38,6 +38,7 @@
margin: 0px 5px; margin: 0px 5px;
// width: $selectionPanelWidth - $iconColumnWidth - 10px; // width: $selectionPanelWidth - $iconColumnWidth - 10px;
width: $selectionPanelWidth - ($spacing * 2); width: $selectionPanelWidth - ($spacing * 2);
vertical-align: middle;
} }
label { label {
@ -47,6 +48,7 @@
// padding-right:5px; // padding-right:5px;
margin-left: -$selectionPanelWidth + $spacing; margin-left: -$selectionPanelWidth + $spacing;
color: #666; color: #666;
vertical-align: sub;
} }
.searchClear { .searchClear {
@ -117,18 +119,28 @@
} }
.showArchivedCards { .showArchivedCards {
padding: 10px;
font-size: 12pt; font-size: 12pt;
span.count { .label {
background-color: gray; padding-left: 5px;
font-size: 10pt;
margin-left: 10px;
padding: 0px 4px;
@include border-radius(4px);
} }
} }
} }
span.count {
background-color: gray;
font-size: 10pt;
margin-left: 10px;
padding: 0px 4px;
@include border-radius(4px);
color: white;
font-weight: 300;
vertical-align: middle;
}
//$selectionColor: yellow; //$selectionColor: yellow;
$selectionColor: $clipperz-orange; $selectionColor: $clipperz-orange;