Changed length field rendering in password generator
This commit is contained in:
parent
feef7e9705
commit
00398aa65e
@ -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
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user