@xaypay/tui 0.0.17 → 0.0.18

package/src/components/pagination/index.js

@@ -87,14 +87,7 @@ export const Pagination = ({
           <li
             onClick={() => onPageChange(pageNumber)}
             key={id}
-            className={classnames(
-                `${
-                    pageNumber === currentPageNumber
-                        ? styles.selected
-                        : styles.listItem
-                    }`, styles['pagination-item']
-            )}
-          >
+            className={classnames(`${pageNumber === currentPageNumber ? styles.selected : styles.listItem}`, styles['pagination-item'])}>
             {pageNumber}
           </li>
         );

package/src/components/stepper/index.js

@@ -6,34 +6,22 @@ import styles from "./stepper.module.css";
 export const Stepper = ({ className, onChange, stepLength, activeSteps }) => {
   const classProps = classNames(className);
   return (
-    <>
+    <div className={styles['stepper-container']}>
       {(() => {
         let steppers = [];
         for (let step = 1; step <= stepLength; step++) {
           steppers.push(
-            <div
-              className={classNames(
-                `${step <= activeSteps ? styles.activeRing : styles.bigRing}`
-              )}
-              key={step}
-            >
-              <div
-                className={classNames(
-                  `${
-                    step <= activeSteps
-                      ? styles.smallActiveRing
-                      : styles.smallRing
-                  }`
-                )}
-              >
-                {step <= activeSteps ? step : ""}
+              <div className={classNames(`${step <= activeSteps ? styles.activeRing : styles.bigRing}`)} key={step}>
+                <div
+                    className={classNames(`${step <= activeSteps ? styles.smallActiveRing : styles.smallRing}`)}>
+                    {step <= activeSteps ? step : ""}
+                </div>
               </div>
-            </div>
           );
         }
         return steppers;
       })()}
-    </>
+    </div>
   );
 };
 

package/src/components/stepper/stepper.module.css

@@ -1,48 +1,58 @@
+.stepper-container > div:last-child:before {
+  display: none;
+}
+.bigRing, .activeRing {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  margin-bottom: 36px;
+  cursor:pointer;
+}
 .bigRing {
-    width: 30px;
-    height: 30px;
-    border: 1px solid gray;
-    border-radius: 50%;
-    position: relative;
-    margin: 10px;
-    cursor:pointer;
-  }
-  
-  .smallRing {
-    position: absolute;
-    width: 50%;
-    height: 50%;
-    border-radius: 50%;
-    background-color: gray;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 12px;
-    color: white;
-    text-align: center;
-  }
-
-
-  .activeRing {
-    width: 30px;
-    height: 30px;
-    border: 1px solid blue;
-    border-radius: 50%;
-    position: relative;
-    margin: 10px;
-    cursor:pointer;
-  }
-
-  .smallActiveRing {
-    position: absolute;
-    width: 50%;
-    height: 50%;
-    border-radius: 50%;
-    background-color: blue;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 12px;
-    color: white;
-    text-align: center;
-  }
+  box-shadow: 0 0 0 2px #D1D1D1;
+}
+.bigRing:before {
+  background: #D1D1D1;
+}
+.activeRing {
+  box-shadow: 0 0 0 2px #00236A;
+}
+.activeRing:before {
+  background: #00236A;
+}
+.bigRing:before, .activeRing:before {
+  position: absolute;
+  content: '';
+  width: 2px;
+  height: 28px;
+  bottom: -32px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 20px;
+  overflow: hidden;
+}
+.smallRing, .smallActiveRing {
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+.smallRing {
+  width: 14px;
+  height: 14px;
+  background-color: #D1D1D1;
+}
+.smallActiveRing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background-color: #00236A;
+  color: #ffffff;
+}