Elastic: Fix buttons box-shadow in :active and :focus state

pull/5578/merge
Aleksander Machniak 6 years ago
parent 1841f17879
commit 246b1ef02c

@ -210,8 +210,8 @@ html.touch {
} }
&:hover { &:hover {
background: darken(@color-btn-secondary-background, 8%); background: darken(@color-btn-secondary-background, 5%);
border-color: darken(@color-btn-secondary-background, 10%); border-color: darken(@color-btn-secondary-background, 7%);
} }
&.disabled, &.disabled,
@ -221,15 +221,14 @@ html.touch {
opacity: 1; opacity: 1;
} }
&:not(:disabled):not(.disabled):active { &:not(:disabled):not(.disabled):active,
background: darken(@color-btn-secondary-background, 11%); &:not(:disabled):not(.disabled).active {
border-color: darken(@color-btn-secondary-background, 13%); background: darken(@color-btn-secondary-background, 10%);
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%); border-color: darken(@color-btn-secondary-background, 12%);
} }
&:not(:disabled):not(.disabled).active { &:not(:disabled):not(.disabled):focus {
background: darken(@color-btn-secondary-background, 20%); box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%) !important;
border-color: darken(@color-btn-secondary-background, 22%);
} }
} }
@ -243,8 +242,8 @@ html.touch {
} }
&:hover { &:hover {
background: darken(@color-btn-primary-background, 8%); background: darken(@color-btn-primary-background, 5%);
border-color: darken(@color-btn-primary-background, 10%); border-color: darken(@color-btn-primary-background, 7%);
} }
&.disabled, &.disabled,
@ -254,15 +253,14 @@ html.touch {
opacity: 1; opacity: 1;
} }
&:not(:disabled):not(.disabled):active { &:not(:disabled):not(.disabled):active,
background: darken(@color-btn-primary-background, 11%); &:not(:disabled):not(.disabled).active {
border-color: darken(@color-btn-primary-background, 13%); background: darken(@color-btn-primary-background, 10%);
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%); border-color: darken(@color-btn-primary-background, 12%);
} }
&:not(:disabled):not(.disabled).active { &:not(:disabled):not(.disabled):focus {
background: darken(@color-btn-primary-background, 20%); box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%) !important;
border-color: darken(@color-btn-primary-background, 22%);
} }
} }
@ -276,8 +274,8 @@ html.touch {
} }
&:hover { &:hover {
background: darken(@color-btn-danger-background, 8%); background: darken(@color-btn-danger-background, 5%);
border-color: darken(@color-btn-danger-background, 10%); border-color: darken(@color-btn-danger-background, 7%);
} }
&.disabled, &.disabled,
@ -287,14 +285,13 @@ html.touch {
opacity: 1; opacity: 1;
} }
&:not(:disabled):not(.disabled):active { &:not(:disabled):not(.disabled):active,
background: darken(@color-btn-danger-background, 11%); &:not(:disabled):not(.disabled).active {
border-color: darken(@color-btn-danger-background, 13%); background: darken(@color-btn-danger-background, 10%);
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%); border-color: darken(@color-btn-danger-background, 12%);
} }
&:not(:disabled):not(.disabled).active { &:not(:disabled):not(.disabled):focus {
background: darken(@color-btn-danger-background, 20%); box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%) !important;
border-color: darken(@color-btn-danger-background, 22%);
} }
} }

@ -117,14 +117,16 @@
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
text-decoration: none; text-decoration: none;
color: @color-font;
&:focus { &:focus {
background-color: @color-input-border-focus-shadow; background-color: fade(@color-btn-primary-background, 50%);
} }
&.options { &.options {
order: -1; order: -1;
padding: .375rem .25rem; padding: .375rem .25rem;
margin-right: .3rem;
&:before { &:before {
// this icon is for mobile version // this icon is for mobile version

Loading…
Cancel
Save