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

Improved drag&drop handler rendering as suggested by Roberto Pasini

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-08-03 17:32:35 +02:00
parent b8abf8aea4
commit c99e8bcd71
3 changed files with 97 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3215,7 +3215,7 @@ div.cardList.narrow {
font-size: 20pt; } font-size: 20pt; }
.content .cardField .fieldEditAction .removeField:hover { .content .cardField .fieldEditAction .removeField:hover {
color: #9b0000; } color: #9b0000; }
.content .cardField .fieldEditAction .dragHandler { .content .cardField .fieldEditAction .dragHandler3 {
cursor: grab; cursor: grab;
cursor: -moz-grab; cursor: -moz-grab;
cursor: -webkit-grab; cursor: -webkit-grab;
@ -3223,19 +3223,52 @@ div.cardList.narrow {
width: 28px; width: 28px;
height: 20px; height: 20px;
margin-left: 6px; margin-left: 6px;
display: block; }
.content .cardField .fieldEditAction .dragHandler3:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing; }
.content .cardField .fieldEditAction .dragHandler {
display: block; display: block;
/* box-sizing: border-box;
@include icon-font(); width: 5px;
color: #aaa; height: 24px;
margin-left: 15px;
font-size: 15pt; border: 1px solid #E8E8E8;
margin: $iconMargin; border-top: 0;
margin-left: 10px; border-bottom: 0;
*/ } cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab; }
.content .cardField .fieldEditAction .dragHandler:active { .content .cardField .fieldEditAction .dragHandler:active {
cursor: grabbing; cursor: grabbing;
cursor: -moz-grabbing; cursor: -moz-grabbing;
cursor: -webkit-grabbing; } cursor: -webkit-grabbing; }
.content .cardField .fieldEditAction .dragHandler:before {
display: block;
box-sizing: border-box;
content: '';
position: relative;
left: -1px;
right: -2px;
height: 100%;
width: 5px;
border: 2px dotted #FFF;
border-top: 0;
border-bottom: 0;
z-index: 2; }
.content .cardField .fieldEditAction .dragHandler:after {
display: block;
box-sizing: border-box;
content: '';
position: relative;
top: -24px;
left: 0px;
right: 0px;
height: 100%;
border: 1px solid #EEE;
border-top: 0;
border-bottom: 0; }
.content .cardField .fieldValues { .content .cardField .fieldValues {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1; -webkit-flex: 1;

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

File diff suppressed because one or more lines are too long

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

@ -437,7 +437,9 @@ $cardViewBasePadding: 10px;
}; };
} }
.dragHandler {
.dragHandler3 {
// @include dotted-background(); // @include dotted-background();
@include cursor-grab(); @include cursor-grab();
@ -453,19 +455,62 @@ $cardViewBasePadding: 10px;
height: 20px; height: 20px;
margin-left: 6px; margin-left: 6px;
display: block; display: block;
/*
@include icon-font();
color: #aaa;
font-size: 15pt;
margin: $iconMargin;
margin-left: 10px;
*/
&:active { &:active {
@include cursor-grabbing(); @include cursor-grabbing();
}; };
} }
$dragHandlerHeight: 24px;
$dragHandlerWidth: 5px;
.dragHandler {
display: block;
box-sizing: border-box;
width: $dragHandlerWidth;
height: $dragHandlerHeight;
margin-left: 15px;
border:1px solid #E8E8E8;
// border:1px solid red;
border-top:0;
border-bottom:0;
@include cursor-grab();
&:active {
@include cursor-grabbing();
}
&:before {
display: block;
box-sizing: border-box;
content:'';
position: relative;
left:-1px;
right:-2px;
height: 100%;
width: $dragHandlerWidth;
border:2px dotted #FFF;
// border:2px dotted blue;
border-top:0;
border-bottom:0;
z-index:2;
}
&:after {
display: block;
box-sizing: border-box;
content:'';
position: relative;
top: -$dragHandlerHeight;
left:0px;
right:0px;
height:100%;
border:1px solid #EEE;
// border:1px solid green;
border-top:0;
border-bottom:0;
}
}
} }
.fieldValues { .fieldValues {