From ae4d6bedd2823177ae9238f33f29bbb55a018e6d Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Fri, 7 Aug 2020 14:43:33 -0400 Subject: [PATCH] IconGrid: revise grid item hover/active state styles --- src/components/IconGrid/IconGrid.css | 18 +----------------- src/components/IconGrid/IconGridItem.tsx | 4 ++-- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css index 297c35e..2165659 100644 --- a/src/components/IconGrid/IconGrid.css +++ b/src/components/IconGrid/IconGrid.css @@ -1,18 +1,8 @@ .grid-container { padding: 0px 16px 4px; - /* background-color: #35313D; - color: white; */ } .grid { - /* display: grid; - grid-area: auto; - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - grid-gap: 10px; - grid-auto-rows: 160px; - grid-auto-columns: auto; - max-width: 1120px; */ - display: flex; flex-flow: row wrap; justify-content: space-between; @@ -41,7 +31,7 @@ .grid-item:focus { outline: none; - box-shadow: 0 0 0 2px rgb(246, 242, 243); + border: 2px solid rgba(163, 159, 171, 0.1); } .grid-item p { @@ -56,7 +46,6 @@ width: 100%; height: 0px; margin: 0px; - /* padding-right: 10%; */ border-radius: 16px; overflow: hidden; } @@ -80,10 +69,6 @@ .icon-usage { flex: 1; padding: 56px 0px 56px; - /* display: flex; */ - /* flex-direction: column; */ - /* justify-content: flex-start; */ - /* vertical-align: middle; */ } .snippet { @@ -91,7 +76,6 @@ } .snippet pre { text-overflow: ellipsis; - /* overflow-x: auto; */ } .snippet button { background-color: transparent; diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx index a05ee26..ff8c95c 100644 --- a/src/components/IconGrid/IconGridItem.tsx +++ b/src/components/IconGrid/IconGridItem.tsx @@ -21,7 +21,7 @@ interface IconGridItemProps extends IconProps { originOffset: MutableRefObject<{ top: number; left: number }>; } -const whileTap = { boxShadow: "0 0 0 4px rgb(73, 70, 80)" }; +// const whileTap = { boxShadow: "0 0 0 6px rgba(163, 159, 171, 0.1)" }; const transition = { duration: 0.2 }; const originIndex = 0; const delayPerPixel = 0.0004; @@ -79,7 +79,7 @@ const IconGridItem: React.FC = (props) => { backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined, }} custom={delayRef} - whileTap={whileTap} + // whileTap={whileTap} transition={transition} variants={itemVariants} onKeyPress={(e) => e.key === "Enter" && handleOpen()}