studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(react) remove button box shadow effect

Browse Source 
On hover and active, buttons have a box shadow effect that is too heavy
visually so we remove this effect for now.
This commit is contained in:
jbpenrath
2023-04-20 16:25:42 +02:00
committed by Jean-Baptiste PENRATH
parent 1667d9b501
commit 1be02f5a85
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/late-fans-wave.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
remove button box shadow

9
packages/react/src/components/Button/index.scss
View File

@@ -13,10 +13,6 @@
border-radius: var(--c--components--button--border-radius--active); border-radius: var(--c--components--button--border-radius--active);
} }
&:hover, &:focus-visible {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6);
}
&:focus-visible { &:focus-visible {
border-color: #FFF; border-color: #FFF;
box-shadow: 0 0 0 4px var(--c--theme--colors--primary-400); box-shadow: 0 0 0 4px var(--c--theme--colors--primary-400);
@@ -25,7 +21,6 @@
&:active, &.c__button--active { &:active, &.c__button--active {
border-color: currentColor; border-color: currentColor;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
} }
&:disabled { &:disabled {
@@ -107,12 +102,12 @@
color: var(--c--theme--colors--greyscale-800); color: var(--c--theme--colors--greyscale-800);
&:hover, &:focus-visible { &:hover, &:focus-visible {
background-color: var(--c--theme--colors--greyscale-100); background-color: var(--c--theme--colors--greyscale-200);
color: var(--c--theme--colors--greyscale-900); color: var(--c--theme--colors--greyscale-900);
} }
&:active, &.c__button--active { &:active, &.c__button--active {
background-color: var(--c--theme--colors--greyscale-200); background-color: var(--c--theme--colors--greyscale-100);
color: var(--c--theme--colors--greyscale-800); color: var(--c--theme--colors--greyscale-800);
} }