diff --git a/src/style.scss b/src/style.scss index 714ca1b..4e92db4 100644 --- a/src/style.scss +++ b/src/style.scss @@ -102,7 +102,7 @@ slot { // handle hover state auro-button @media (hover: hover) { &:active, - &:hover { + &:hover:not(:disabled) { background-image: linear-gradient(var(--ds-color-ui-hover-default, $ds-color-ui-hover-default), var(--ds-color-ui-hover-default, $ds-color-ui-hover-default)); border: 1px solid var(--ds-color-ui-hover-default, $ds-color-ui-hover-default); } @@ -144,13 +144,6 @@ slot { background-color: rgba($ds-color-ui-default-default, $disabledOPacity); border: 1px solid rgba($ds-color-ui-default-default, 0); - - @media (hover: hover) { - &:hover { - background-color: rgba($ds-color-ui-default-default, $disabledOPacity); - border: 1px solid rgba($ds-color-ui-default-default, 0); - } - } } // auro-button--secondary @@ -162,7 +155,7 @@ slot { @media (hover: hover) { &:active, - &:hover { + &:hover:not(:disabled) { background-image: linear-gradient(var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default)); border: 1px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default); } @@ -180,14 +173,6 @@ slot { color: rgba($ds-color-text-link-default, $disabledOPacity); background-color: rgba($ds-color-background-lightest, $disabledOPacity); border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity); - - @media (hover: hover) { - &:hover { - color: rgba($ds-color-text-link-default, $disabledOPacity); - background-color: rgba($ds-color-background-lightest, $disabledOPacity); - border: 1px solid rgba($ds-color-ui-default-default, $disabledOPacity); - } - } } } @@ -200,7 +185,7 @@ slot { @media (hover: hover) { &:active, - &:hover { + &:hover:not(:disabled) { background-image: linear-gradient(var(--ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default)); border-color: transparent; } @@ -218,13 +203,6 @@ slot { color: rgba($ds-color-text-link-default, $disabledOPacity); background-color: $auro-rgb-color-base-black-03; border: 1px solid transparent; - - @media (hover: hover) { - &:hover { - background-color: $auro-rgb-color-base-black-03; - border: 1px solid transparent; - } - } } } @@ -236,7 +214,7 @@ slot { // auro-buttonOndark hover @media (hover: hover) { &:active, - &:hover { + &:hover:not(:disabled) { background-image: linear-gradient(var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse), var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse)); border: 1px solid var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse); } @@ -254,14 +232,6 @@ slot { color: rgba($ds-color-text-primary-default, $disabledOPacity); background-color: rgba($ds-color-ui-default-inverse, $disabledOPacity); border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity); - - @media (hover: hover) { - &:hover { - color: rgba($ds-color-text-primary-default, $disabledOPacity); - background-color: rgba($ds-color-ui-default-inverse, $disabledOPacity); - border: 1px solid rgba($ds-color-ui-default-inverse, $disabledOPacity); - } - } } // auro-buttonOndark--secondary @@ -273,7 +243,7 @@ slot { @media (hover: hover) { &:active, - &:hover { + &:hover:not(:disabled) { background-image: linear-gradient(var(--ds-color-background-darkest, $ds-color-background-darkest), var(--ds-color-background-darkest, $ds-color-background-darkest)); } } @@ -283,15 +253,6 @@ slot { border: 1px solid var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse); } - &:disabled { - @media (hover: hover) { - &:hover { - background-color: var(--ds-color-background-darker, $ds-color-background-darker); - border: 1px solid var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse); - } - } - } - &:disabled { cursor: not-allowed; transform: unset;