Update styles

clauderic · Mar 23, 2021 · 4bf585f · 4bf585f
1 parent b7c2780
commit 4bf585f
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 81 deletions.
diff --git a/stories/3 - Examples/Advanced/Pages/Page.module.css b/stories/3 - Examples/Advanced/Pages/Page.module.css
@@ -1,36 +1,31 @@
-.Page {
+.Wrapper {
   position: relative;
-  width: 150px;
-  height: 200px;
-  margin-bottom: 40px;
   list-style: none;
-  background-color: rgb(250, 255, 255);
-  background-size: cover;
-  border-radius: 3px;
-  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05),
-    0 1px 3px 0 rgba(34, 33, 81, 0.15);
-  outline: none;
-  touch-action: none;
-  cursor: grab;
-
-  &:focus-visible:not(.active) {
-    box-shadow: 0 0 0 2px #4c9ffe;
-  }
+  width: 150px;
+  margin-bottom: 0.5rem;
 
   &.active {
-    background-image: none !important;
-    background-color: rgba(230, 230, 230);
+    .Page {
+      background-image: none !important;
+      background-color: rgba(230, 230, 230);
+    }
 
     .PageNumber {
-      opacity: 0.5;
+      opacity: 0.3;
     }
   }
 
   &.clone {
-    transform: translate3d(10px, 10px, 0) scale(1.025);
-    box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05),
-      0 1px 6px 0 rgba(34, 33, 81, 0.3);
-    cursor: grabbing;
+    margin-top: 10px;
+    margin-left: 10px;
+
+    .Page {
+      transform: scale(1.025);
+      animation: pop 150ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+      box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05),
+        0 1px 6px 0 rgba(34, 33, 81, 0.3);
+      cursor: grabbing;
+    }
   }
 
   &:hover {
@@ -39,10 +34,10 @@
     }
   }
 
-  &.insertBefore,
-  &.insertAfter {
-    &:not(.active, .clone) {
-      &:after {
+  &:not(.active, .clone) {
+    &.insertBefore,
+    &.insertAfter {
+      .Page:after {
         content: '';
         position: absolute;
         background-color: #4c9ffe;
@@ -53,61 +48,76 @@
   &:not(.vertical) {
     &.insertBefore,
     &.insertAfter {
-      &:after {
+      .Page:after {
         top: 0;
         bottom: 0;
         width: 2px;
       }
     }
     &.insertBefore {
-      &:after {
-        left: -9px;
-      }
-
       &.clone {
-        transform: translate3d(-85px, 10px, 0) scale(1.025);
+        margin-left: -75px;
+      }
+      .Page:after {
+        left: -9px;
       }
     }
-
     &.insertAfter {
-      &:after {
-        right: -9px;
-      }
-
       &.clone {
-        transform: translate3d(85px, 10px, 0) scale(1.025);
+        margin-left: 75px;
+      }
+      .Page:after {
+        right: -9px;
       }
     }
   }
   &.vertical {
     &.insertBefore,
     &.insertAfter {
-      &:after {
+      .Page:after {
         left: 0;
         right: 0;
         height: 2px;
       }
     }
     &.insertBefore {
-      &:after {
-        top: -15px;
-      }
-
       &.clone {
-        transform: translate3d(100px, -125px, 0) scale(1.025);
+        margin-top: -125px;
+      }
+      .Page:after {
+        top: -15px;
       }
     }
-
     &.insertAfter {
-      &:after {
-        bottom: -40px;
-      }
-
       &.clone {
-        transform: translate3d(100px, 125px, 0) scale(1.025);
+        margin-bottom: 125px;
+      }
+      .Page:after {
+        bottom: -45px;
       }
     }
   }
+}
+
+.Page {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 200px;
+  background-color: rgb(250, 255, 255);
+  background-size: cover;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05),
+    0 1px 3px 0 rgba(34, 33, 81, 0.15);
+  outline: none;
+  appearance: none;
+  border: none;
+  touch-action: none;
+  cursor: grab;
+
+  &:focus-visible:not(.active &) {
+    box-shadow: 0 0 0 2px #4c9ffe;
+  }
 
   &[data-id='1'] {
     background-image: url('https://images.unsplash.com/photo-1581714239128-da7bf940cd82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');
@@ -177,12 +187,9 @@
 }
 
 .PageNumber {
-  position: absolute;
   display: block;
+  margin-top: 1rem;
   text-align: center;
-  left: 0;
-  right: 0;
-  bottom: -30px;
   color: rgba(0, 0, 0, 0.5);
   user-select: none;
   animation: fadeIn 1000ms ease;
@@ -197,3 +204,12 @@
     opacity: 1;
   }
 }
+
+@keyframes pop {
+  0% {
+    transform: translate3d(-10px, -10px, 0) scale(1);
+  }
+  100% {
+    transform: translate3d(0px, 0px, 0) scale(1.025);
+  }
+}
diff --git a/stories/3 - Examples/Advanced/Pages/Page.tsx b/stories/3 - Examples/Advanced/Pages/Page.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, HTMLAttributes} from 'react';
 import classNames from 'classnames';
 
+import {trashIcon} from './icons';
 import styles from './Page.module.css';
 
 export enum Position {
@@ -14,7 +15,7 @@ export enum Layout {
   Grid = 'grid',
 }
 
-export interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface Props extends HTMLAttributes<HTMLButtonElement> {
   active?: boolean;
   clone?: boolean;
   insertPosition?: Position;
@@ -24,43 +25,31 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   onRemove?(): void;
 }
 
-export const Page = forwardRef<HTMLDivElement, Props>(function Page(
-  {id, index, active, clone, insertPosition, layout, onRemove, ...props},
+export const Page = forwardRef<HTMLButtonElement, Props>(function Page(
+  {id, index, active, clone, insertPosition, layout, onRemove, style, ...props},
   ref
 ) {
   return (
-    <div
-      ref={ref}
+    <li
       className={classNames(
-        styles.Page,
+        styles.Wrapper,
         active && styles.active,
         clone && styles.clone,
         insertPosition === Position.Before && styles.insertBefore,
         insertPosition === Position.After && styles.insertAfter,
         layout === Layout.Vertical && styles.vertical
       )}
-      data-id={id}
-      {...props}
+      style={style}
     >
-      {index != null ? (
-        <span className={styles.PageNumber}>{index}</span>
-      ) : null}
+      <button ref={ref} className={styles.Page} data-id={id} {...props} />
       {onRemove ? (
         <button className={styles.Remove} onClick={onRemove}>
           {trashIcon}
         </button>
       ) : null}
-    </div>
+      {index != null ? (
+        <span className={styles.PageNumber}>{index}</span>
+      ) : null}
+    </li>
   );
 });
-
-const trashIcon = (
-  <svg
-    width="10"
-    height="10"
-    viewBox="0 0 22 22"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
-  </svg>
-);
diff --git a/stories/3 - Examples/Advanced/Pages/Pages.module.css b/stories/3 - Examples/Advanced/Pages/Pages.module.css
@@ -1,6 +1,8 @@
 .Pages {
   display: grid;
   gap: 1rem;
+  padding: 1rem;
+  margin: 0;
 
   &.horizontal {
     grid-auto-flow: column;

diff --git a/stories/3 - Examples/Advanced/Pages/Pages.tsx b/stories/3 - Examples/Advanced/Pages/Pages.tsx
@@ -41,9 +41,7 @@ export function Pages({layout}: Props) {
   );
   const activeIndex = items.indexOf(activeId);
   const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {distance: 1},
-    }),
+    useSensor(PointerSensor),
     useSensor(KeyboardSensor, {coordinateGetter: sortableKeyboardCoordinates})
   );
 

diff --git a/stories/3 - Examples/Advanced/Pages/icons/index.ts b/stories/3 - Examples/Advanced/Pages/icons/index.ts
@@ -0,0 +1 @@
+export {trashIcon} from './trash';
diff --git a/stories/3 - Examples/Advanced/Pages/icons/trash.tsx b/stories/3 - Examples/Advanced/Pages/icons/trash.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const trashIcon = (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 22 22"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
+  </svg>
+);