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

Improved card editing form layout

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-02-03 22:48:29 +01:00
parent 88139883f5
commit 3d17482db4
6 changed files with 99 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

3
frontend/delta/scss/clipperz.scss
View File

@ -29,6 +29,9 @@ body:after {
display: none; display: none;
} }
input {
font-family: "clipperz-font";
}
@import "core/sizes"; @import "core/sizes";
//@import "sizes/narrow"; //@import "sizes/narrow";

2
frontend/delta/scss/core/fonts.scss
View File

File diff suppressed because one or more lines are too long

3
frontend/delta/scss/core/layout.scss
View File

@ -280,7 +280,8 @@ div.cardContent {
z-index: 10+1; z-index: 10+1;
.content { .content {
background-color: yellow; // background-color: yellow;
background-color: white;
} }
} }
} }

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

@ -1,7 +1,7 @@
$cardListHeight: 48px; $cardListHeight: 48px;
$faviconSize: 32px; $faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2; $padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #ccc;
$cardToolbarBackgroundColor: brown; $cardToolbarBackgroundColor: brown;
div.cardList { div.cardList {
@ -27,7 +27,8 @@ div.cardList {
} }
&.archived { &.archived {
background-color: pink; // background-color: pink;
background-color: $cardArchivedColor;
} }
.favicon { .favicon {
@ -110,7 +111,8 @@ $cardViewBasePadding: 10px;
.view { .view {
&.archived { &.archived {
background-color: pink; // background-color: pink;
background-color: $cardArchivedColor;
} }
.cardDetailToolbar { .cardDetailToolbar {
@ -186,8 +188,11 @@ $cardViewBasePadding: 10px;
.edit { .edit {
.cardDetailToolbar { .cardDetailToolbar {
background-color: purple; // background-color: purple;
background-color: $cardToolbarBackgroundColor;
color: white; color: white;
// @include icon-font();
// font-size: 20pt;
} }
} }
} }
@ -200,17 +205,23 @@ $cardViewBasePadding: 10px;
&.edit { &.edit {
li { li {
font-weight: 100; font-weight: 100;
// color: #aaa;
&:hover {
color: white;
};
} }
li.save { li.save {
color: yellow; // color: yellow;
} }
&.hasPendingChanges { &.hasPendingChanges {
li { li {
// color: #ccc;
font-weight: 500; font-weight: 500;
} }
li.save { li.save {
color: white; // color: white;
} }
} }
} }
@ -233,7 +244,15 @@ $cardViewBasePadding: 10px;
@include user-select(text); @include user-select(text);
font-size: 24pt; font-size: 24pt;
width: 100%;
padding: $cardViewBasePadding; padding: $cardViewBasePadding;
// height: 52px;
// line-height: 32px;
border: 0px;
}
input.cardLabel {
height: 52px;
} }
.tagEditor { .tagEditor {
@ -242,6 +261,7 @@ $cardViewBasePadding: 10px;
.cardNotes { .cardNotes {
padding: $cardViewBasePadding; padding: $cardViewBasePadding;
width: 100%;
} }
.dropArea { .dropArea {
@ -254,7 +274,7 @@ $cardViewBasePadding: 10px;
@include flexbox; @include flexbox;
@include flex-direction(row); @include flex-direction(row);
background-color: lightgreen; // background-color: lightgreen;
&.dragged { &.dragged {
// border: 4px dotted red; // border: 4px dotted red;
@ -278,7 +298,14 @@ $cardViewBasePadding: 10px;
} }
.removeField { .removeField {
@include icon-font();
cursor: pointer; cursor: pointer;
color: gray;
font-size: 20pt;
&:hover {
color: red;
};
} }
} }
@ -297,13 +324,22 @@ $cardViewBasePadding: 10px;
} }
.newCardField { .newCardField {
@include icon-font();
cursor: pointer; cursor: pointer;
color: gray;
font-size: 20pt;
&:hover {
color: green;
};
} }
.cardDirectLogin { .cardDirectLogin {
font-size: 18pt; font-size: 18pt;
padding: $cardViewBasePadding; padding: $cardViewBasePadding;
background-color: pink; // background-color: pink;
background-color: $clipperz-orange;
color: white;
cursor: pointer; cursor: pointer;
} }
} }