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

Changed length field rendering in password generator

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-08-12 11:05:11 +02:00
parent feef7e9705
commit 00398aa65e
3 changed files with 51 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3446,47 +3446,7 @@ div.cardList.narrow {
-moz-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
font-size: 9pt; font-size: 9pt; }
/*
$setValueColor: lighten($passwordBaloonColor, 10%);
$setValueHoverColor: lighten($passwordBaloonColor, 40%);
.setValue {
background-color: $passwordBaloonColor;
// height: $borderRadius;
height: 10px - $borderRadius;
border-bottom: $borderRadius solid $setValueColor;
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
$arrowSize: 6px;
$hoverArrowSize: 10px;
&:after {
content:'';
position:absolute;
top:100%;
// left:10px;
left:10%;
margin-left: 0px;
width:0;
height:0;
border-top:$arrowSize solid $setValueColor;
border-left:$arrowSize solid transparent;
border-right:$arrowSize solid transparent;
}
&:hover {
border-color: $setValueHoverColor;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);
&:after {
border-top:$hoverArrowSize solid $setValueHoverColor;
border-left:$hoverArrowSize solid transparent;
border-right:$hoverArrowSize solid transparent;
margin-left: -($hoverArrowSize - $arrowSize) / 2;
}
}
}
*/ }
.passwordGenerator .passwordGeneratorBaloon form span { .passwordGenerator .passwordGeneratorBaloon form span {
font-size: 8pt; font-size: 8pt;
color: #ccc; } color: #ccc; }
@ -3526,41 +3486,42 @@ div.cardList.narrow {
border-bottom: 0px; } border-bottom: 0px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options.closed div { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options.closed div {
visibility: hidden; } visibility: hidden; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length {
margin-right: 3px; } padding-top: 2px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span:after { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span {
content: ':'; } margin-right: 3px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span:after {
background-color: #888; content: ':'; }
color: white; .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input {
font-weight: bold; font-weight: bold;
font-size: 12pt; font-size: 10pt;
border: 0px; text-align: right;
text-align: right; max-width: 50px; }
max-width: 50px; } .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input::-webkit-outer-spin-button {
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input::-webkit-outer-spin-button { opacity: 1; }
opacity: 1; } .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList {
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span { padding-top: 2px; }
display: inline-block; .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span {
line-height: 10px; } display: inline-block;
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span:after { line-height: 10px; }
content: ':'; } .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span:after {
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets { content: ':'; }
display: inline-block; .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets {
align: right; } display: inline-block;
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label { align: right; }
padding-right: 5px; .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label {
cursor: pointer; } padding-right: 5px;
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span { cursor: pointer; }
font-size: 10pt; .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span {
color: #eee; } font-size: 10pt;
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span:after { color: #eee; }
content: ''; } .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span:after {
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea { content: ''; }
color: gray; .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea {
min-height: 34px; } color: gray;
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea:focus { min-height: 34px; }
outline: 0; } .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea:focus {
outline: 0; }
.passwordGenerator .passwordGeneratorBaloon form .passwordValue { .passwordGenerator .passwordGeneratorBaloon form .passwordValue {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;

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

File diff suppressed because one or more lines are too long

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

@ -738,20 +738,23 @@ $cardViewBasePadding: 10px;
} }
.length { .length {
padding-top: 2px;
span { span {
margin-right: 3px; margin-right: 3px;
&:after { &:after {
content: ':'; content: ':';
} }
} }
input { input {
background-color: #888; // background-color: #888;
color: white; // color: white;
font-weight: bold; font-weight: bold;
font-size: 12pt; font-size: 10pt;
border: 0px; // border: 0px;
text-align: right; text-align: right;
max-width: 50px; max-width: 50px;
@ -761,8 +764,9 @@ $cardViewBasePadding: 10px;
} }
} }
.charList { .charList {
padding-top: 2px;
span { span {
display: inline-block; display: inline-block;
line-height: 10px; line-height: 10px;
@ -775,22 +779,6 @@ $cardViewBasePadding: 10px;
.charsetSets { .charsetSets {
display: inline-block; display: inline-block;
align: right; align: right;
// div {
// font-size: 8pt;
// display: inline-block;
// border: 1px solid gray;
// height: 20px;
// line-height: 20px;
// padding: 0px 4px;
// margin: 0px 2px;
// @include border-radius(5px);
//
// &.selected {
// border: 1px solid #aaa;
// background-color: gray;
// }
// }
label { label {
span { span {
@ -801,12 +789,12 @@ $cardViewBasePadding: 10px;
content: ''; content: '';
} }
} }
padding-right: 5px; padding-right: 5px;
cursor: pointer; cursor: pointer;
} }
} }
textarea { textarea {
color: gray; color: gray;
min-height: 34px; min-height: 34px;
@ -826,8 +814,6 @@ $cardViewBasePadding: 10px;
padding: $passwordBaloonBorder; padding: $passwordBaloonBorder;
padding-top: 3px; padding-top: 3px;
// padding-bottom: $passwordBaloonBorder - $borderRadius;
// padding-bottom: 0px;
padding-right: 0px; padding-right: 0px;
.passwordWrapper { .passwordWrapper {
@ -861,10 +847,8 @@ $cardViewBasePadding: 10px;
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
// padding-left: 5px;
color: #999; color: #999;
width: 40px; width: 40px;
// height: 30px;
height: inherit; height: inherit;
&.setPasswordValue { &.setPasswordValue {
@ -876,46 +860,6 @@ $cardViewBasePadding: 10px;
}; };
} }
} }
/*
$setValueColor: lighten($passwordBaloonColor, 10%);
$setValueHoverColor: lighten($passwordBaloonColor, 40%);
.setValue {
background-color: $passwordBaloonColor;
// height: $borderRadius;
height: 10px - $borderRadius;
border-bottom: $borderRadius solid $setValueColor;
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
$arrowSize: 6px;
$hoverArrowSize: 10px;
&:after {
content:'';
position:absolute;
top:100%;
// left:10px;
left:10%;
margin-left: 0px;
width:0;
height:0;
border-top:$arrowSize solid $setValueColor;
border-left:$arrowSize solid transparent;
border-right:$arrowSize solid transparent;
}
&:hover {
border-color: $setValueHoverColor;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);
&:after {
border-top:$hoverArrowSize solid $setValueHoverColor;
border-left:$hoverArrowSize solid transparent;
border-right:$hoverArrowSize solid transparent;
margin-left: -($hoverArrowSize - $arrowSize) / 2;
}
}
}
*/
} }
} }
} }