FIX: poll fake 3D button effect with custom background color

This commit is contained in:
Régis Hanol 2015-05-05 20:00:42 +02:00
parent 72cb784eae
commit 73703dd557

View file

@ -26,29 +26,26 @@ div.poll {
} }
li[data-poll-option-id] { li[data-poll-option-id] {
position: relative;
color: $option-foreground; color: $option-foreground;
background: $option-background; background: $option-background;
box-shadow: 0 6px $option-shadow; box-shadow: inset 0 -6px rgba(0,0,0,.25), inset 0 0 0 100px rgba(0,0,0,0);
padding: 0 .8em; padding: 0 12px;
margin-bottom: .7em; margin-bottom: 10px;
border-radius: 4px; border-radius: 4px;
height: 2.3em;
&:hover { &:hover {
top: 2px; box-shadow: inset 0 -6px rgba(0,0,0,.35), inset 0 0 0 100px rgba(0,0,0,.1);
box-shadow: 0 4px $option-shadow;
} }
&:active { &:active {
top: 6px; -webkit-transform: translate(0,2px);
box-shadow: 0 0 $option-shadow; transform: translate(0,2px);
box-shadow: inset 0 -4px rgba(0,0,0,.35), inset 0 0 0 100px rgba(0,0,0,.1);
} }
&[data-poll-selected="selected"] { &[data-poll-selected="selected"] {
background: $success !important; background: $success !important;
box-shadow: 0 6px darken($success, 10%);
&:hover { box-shadow: 0 4px darken($success, 10%); }
&:active { box-shadow: 0 0 darken($success, 10%); }
} }
} }