add a Slider

2023-07-13 16:06:22 +08:00
parent cb2bb8663f
commit eddf31332f
4 changed files with 83 additions and 2 deletions
--- a/src/components/Slider/slider.css
+++ b/src/components/Slider/slider.css
@@ -0,0 +1,28 @@
+.slider {
+    height: 5vh;
+    width: 20vw;
+    border-radius: 88px;
+    box-shadow: 0 0 68px 8px rgba(0, 0, 0, .3);
+    padding: 32px;
+    display: grid;
+    place-items: center;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    opacity: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
+}
+
+.slider input {
+    width: 100%;
+    transform: translateY(-7px);
+    color: #0b58ff;
+    background: #fcc;
+}
+
+.slider.show {
+    opacity: 1;
+    bottom: 64px;
+}