Changed length field rendering in password generator

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

View File

@ -3446,47 +3446,7 @@ div.cardList.narrow {
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
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;
}
}
}
*/ }
font-size: 9pt; }
.passwordGenerator .passwordGeneratorBaloon form span {
font-size: 8pt;
color: #ccc; }
@ -3526,41 +3486,42 @@ div.cardList.narrow {
border-bottom: 0px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options.closed div {
visibility: hidden; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span {
margin-right: 3px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span:after {
content: ':'; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input {
background-color: #888;
color: white;
font-weight: bold;
font-size: 12pt;
border: 0px;
text-align: right;
max-width: 50px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input::-webkit-outer-spin-button {
opacity: 1; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span {
display: inline-block;
line-height: 10px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span:after {
content: ':'; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets {
display: inline-block;
align: right; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label {
padding-right: 5px;
cursor: pointer; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span {
font-size: 10pt;
color: #eee; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span:after {
content: ''; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea {
color: gray;
min-height: 34px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea:focus {
outline: 0; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length {
padding-top: 2px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span {
margin-right: 3px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span:after {
content: ':'; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input {
font-weight: bold;
font-size: 10pt;
text-align: right;
max-width: 50px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length input::-webkit-outer-spin-button {
opacity: 1; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList {
padding-top: 2px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span {
display: inline-block;
line-height: 10px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList span:after {
content: ':'; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets {
display: inline-block;
align: right; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label {
padding-right: 5px;
cursor: pointer; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span {
font-size: 10pt;
color: #eee; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span:after {
content: ''; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea {
color: gray;
min-height: 34px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea:focus {
outline: 0; }
.passwordGenerator .passwordGeneratorBaloon form .passwordValue {
display: -webkit-box;
display: -webkit-flex;

File diff suppressed because one or more lines are too long

View File

@ -738,20 +738,23 @@ $cardViewBasePadding: 10px;
}
.length {
padding-top: 2px;
span {
margin-right: 3px;
&:after {
content: ':';
}
}
input {
background-color: #888;
color: white;
// background-color: #888;
// color: white;
font-weight: bold;
font-size: 12pt;
border: 0px;
font-size: 10pt;
// border: 0px;
text-align: right;
max-width: 50px;
@ -761,8 +764,9 @@ $cardViewBasePadding: 10px;
}
}
.charList {
padding-top: 2px;
span {
display: inline-block;
line-height: 10px;
@ -775,22 +779,6 @@ $cardViewBasePadding: 10px;
.charsetSets {
display: inline-block;
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 {
span {
@ -801,12 +789,12 @@ $cardViewBasePadding: 10px;
content: '';
}
}
padding-right: 5px;
cursor: pointer;
}
}
textarea {
color: gray;
min-height: 34px;
@ -826,8 +814,6 @@ $cardViewBasePadding: 10px;
padding: $passwordBaloonBorder;
padding-top: 3px;
// padding-bottom: $passwordBaloonBorder - $borderRadius;
// padding-bottom: 0px;
padding-right: 0px;
.passwordWrapper {
@ -861,10 +847,8 @@ $cardViewBasePadding: 10px;
font-size: 14pt;
font-weight: bold;
text-align: center;
// padding-left: 5px;
color: #999;
width: 40px;
// height: 30px;
height: inherit;
&.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;
}
}
}
*/
}
}
}