Improved rendering for password generator

master-GE
Giulio Cesare Solaroli 2015-08-10 15:26:45 +02:00
parent 2e6ae458de
commit cb949d791f
3 changed files with 17 additions and 16 deletions

View File

@ -3579,7 +3579,7 @@ div.cardList.narrow {
.passwordGenerator .passwordGeneratorBaloon form .setValue {
background-color: #333333;
height: 4px;
border-bottom: 6px solid #333333;
border-bottom: 6px solid #4d4d4d;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; }
.passwordGenerator .passwordGeneratorBaloon form .setValue:after {
@ -3587,19 +3587,20 @@ div.cardList.narrow {
position: absolute;
top: 100%;
left: 10%;
margin-left: 0px;
width: 0;
height: 0;
border-top: 6px solid #333333;
border-top: 6px solid #4d4d4d;
border-left: 6px solid transparent;
border-right: 6px solid transparent; }
.passwordGenerator .passwordGeneratorBaloon form .setValue:hover {
border-color: #aaaaaa;
border-color: #999999;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4); }
.passwordGenerator .passwordGeneratorBaloon form .setValue:hover:after {
border-top: 8px solid #aaaaaa;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
margin-left: -1px; }
border-top: 10px solid #999999;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin-left: -2px; }
div.dialog {
-webkit-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.75);

File diff suppressed because one or more lines are too long

View File

@ -865,38 +865,38 @@ $cardViewBasePadding: 10px;
}
}
$setValueColor: lighten($passwordBaloonColor, 10%);
$setValueHoverColor: lighten($passwordBaloonColor, 40%);
.setValue {
background-color: $passwordBaloonColor;
// height: $borderRadius;
height: 10px - $borderRadius;
border-bottom: $borderRadius solid $passwordBaloonColor;
border-bottom: $borderRadius solid $setValueColor;
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
$arrowSize: 6px;
$hoverArrowSize: 8px;
// $hoverColor: $clipperz-blue;
$hoverColor: #aaa;
$hoverArrowSize: 10px;
&:after {
content:'';
position:absolute;
top:100%;
// left:10px;
left:10%;
margin-left: 0px;
width:0;
height:0;
border-top:$arrowSize solid $passwordBaloonColor;
border-top:$arrowSize solid $setValueColor;
border-left:$arrowSize solid transparent;
border-right:$arrowSize solid transparent;
}
&:hover {
border-color: $hoverColor;
border-color: $setValueHoverColor;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);
&:after {
// background-color: $hoverColor;
border-top:$hoverArrowSize solid $hoverColor;
border-top:$hoverArrowSize solid $setValueHoverColor;
border-left:$hoverArrowSize solid transparent;
border-right:$hoverArrowSize solid transparent;
margin-left: -($hoverArrowSize - $arrowSize) / 2;