andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IconGrid: revise grid item hover/active state styles

Browse Source
This commit is contained in:
rektdeckard
2020-08-07 14:43:33 -04:00
parent 0af7c55ed7
commit ae4d6bedd2
2 changed files with 3 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/IconGrid/IconGrid.css
View File

@@ -1,18 +1,8 @@
.grid-container { .grid-container {
padding: 0px 16px 4px; padding: 0px 16px 4px;
/* background-color: #35313D;
color: white; */
} }
.grid { .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; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
@@ -41,7 +31,7 @@
.grid-item:focus { .grid-item:focus {
outline: none; outline: none;
box-shadow: 0 0 0 2px rgb(246, 242, 243); border: 2px solid rgba(163, 159, 171, 0.1);
} }
.grid-item p { .grid-item p {
@@ -56,7 +46,6 @@
width: 100%; width: 100%;
height: 0px; height: 0px;
margin: 0px; margin: 0px;
/* padding-right: 10%; */
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
} }
@@ -80,10 +69,6 @@
.icon-usage { .icon-usage {
flex: 1; flex: 1;
padding: 56px 0px 56px; padding: 56px 0px 56px;
/* display: flex; */
/* flex-direction: column; */
/* justify-content: flex-start; */
/* vertical-align: middle; */
} }
.snippet { .snippet {
@@ -91,7 +76,6 @@
} }
.snippet pre { .snippet pre {
text-overflow: ellipsis; text-overflow: ellipsis;
/* overflow-x: auto; */
} }
.snippet button { .snippet button {
background-color: transparent; background-color: transparent;

4
src/components/IconGrid/IconGridItem.tsx
View File

@@ -21,7 +21,7 @@ interface IconGridItemProps extends IconProps {
originOffset: MutableRefObject<{ top: number; left: number }>; 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 transition = { duration: 0.2 };
const originIndex = 0; const originIndex = 0;
const delayPerPixel = 0.0004; const delayPerPixel = 0.0004;
@@ -79,7 +79,7 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined, backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined,
}} }}
custom={delayRef} custom={delayRef}
whileTap={whileTap} // whileTap={whileTap}
transition={transition} transition={transition}
variants={itemVariants} variants={itemVariants}
onKeyPress={(e) => e.key === "Enter" && handleOpen()} onKeyPress={(e) => e.key === "Enter" && handleOpen()}