From 1be02f5a85da490058374e04041daff3af97a320 Mon Sep 17 00:00:00 2001 From: jbpenrath Date: Thu, 20 Apr 2023 16:25:42 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20remove=20button=20box=20s?= =?UTF-8?q?hadow=20effect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On hover and active, buttons have a box shadow effect that is too heavy visually so we remove this effect for now. --- .changeset/late-fans-wave.md | 5 +++++ packages/react/src/components/Button/index.scss | 9 ++------- 2 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 .changeset/late-fans-wave.md diff --git a/.changeset/late-fans-wave.md b/.changeset/late-fans-wave.md new file mode 100644 index 0000000..d3f2891 --- /dev/null +++ b/.changeset/late-fans-wave.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +remove button box shadow diff --git a/packages/react/src/components/Button/index.scss b/packages/react/src/components/Button/index.scss index 7714ca1..f9fd4ec 100644 --- a/packages/react/src/components/Button/index.scss +++ b/packages/react/src/components/Button/index.scss @@ -13,10 +13,6 @@ 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 { border-color: #FFF; box-shadow: 0 0 0 4px var(--c--theme--colors--primary-400); @@ -25,7 +21,6 @@ &:active, &.c__button--active { border-color: currentColor; - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7); } &:disabled { @@ -107,12 +102,12 @@ color: var(--c--theme--colors--greyscale-800); &: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); } &: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); }