v 0.1

aseven77 · Apr 20, 2021 · b7100ec · b7100ec
1 parent 8155df9
commit b7100ec
Show file tree

Hide file tree

Showing 7 changed files with 446 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# my-select
+# my-select - Плагин
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+    <div class="app">
+        <div class="wrapper">
+            <select name="" id="select" class="select">
+                <option value="Селект 1">Селект 1</option>
+                <option value="Селект 2">Селект 2</option>
+                <option value="Селект 3">Селект 3</option>
+                <option value="Селект 4">Селект 4</option>
+                <option value="Селект 5">Селект 5</option>
+            </select>
+        </div>
+    </div>    
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,10 @@
+import { Select } from './select/select';
+import './select/index';
+
+const select = new Select('#select', {
+    placeholder: "Выберите дату",
+    selectedId: 5,
+    data: ["Выбор 1", "Выбор 2", "Выбор 3"]
+});
+
+window.s = select;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "select": "^1.1.2"
+  },
+  "devDependencies": {
+    "sass": "^1.32.11"
+  }
+}
diff --git a/select/index.scss b/select/index.scss
@@ -0,0 +1,123 @@
+:root {
+    --my-select-border: #ccc;
+    --my-select-value-height: 48px;
+    --my-select-active: red;
+    --my-select-hover: #eee;
+}
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    padding: 0;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.app {
+    padding-top: 5px;
+    display: flex;
+    justify-content: center;
+}
+
+.wrapper {
+    max-width: 500px;
+    width: 100%;
+}
+
+.my-select {
+    width: 100%;
+    position: relative;
+    z-index: 100;
+
+    &__control {
+        border: 1px solid var(--my-select-border);
+        height: var(--my-select-value-height);
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        cursor: pointer;
+    }
+
+    &__backdrop {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        display: none;
+    }
+
+    &__dropdown {
+        position: absolute;
+        max-height: calc(var(--my-select-value-height) * 5);
+        overflow-y: auto;
+        width: 100%;
+        display: none;
+        border: 1px solid var(--my-select-border);
+
+        &::-webkit-scrollbar {
+            width: 2px;
+        }
+
+        &::-webkit-scrollbar-button {
+            display: none;
+        }
+
+        &::-webkit-scrollbar-corner {
+            background-color: transparent;
+            width: 0;
+            height: 0;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-clip: content-box;
+            background-color: #a0a4a8;
+            border: 2px solid red;
+            border-radius: 0px;
+        }
+    }
+
+    &__list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    &__item {
+        height: var(--my-select-value-height);
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        transition: 0.3s;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--my-select-border);
+        }
+
+        &:hover {
+            background-color: var(--my-select-hover);
+            cursor: pointer;
+        }
+
+        &--active {
+            background-color: var(--my-select-active);;
+        }
+    }
+
+    &--open &__control {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom-color: transparent;
+    }
+
+    &--open &__dropdown {
+        display: block;
+    }
+    &--open &__backdrop {
+        display: block;
+    }
+}