Added nativ select in mobile scrin

2022-10-28 16:56:14 +03:00
parent e5f2df8b2c
commit bb22c0dc85
4 changed files with 34 additions and 1 deletions
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cg-Select</title>
    <link href="./style/main.scss" rel="stylesheet" />
-    <link href="./style/nativSelect.scss" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
--- a/src/index.js
+++ b/src/index.js
@@ -23,6 +23,7 @@ const dropdown = new DropDown({
      borderRadius: '5px',
    },
  },
+  // multiselect: true,
 });

 // ------------------------------URL--------------------
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,3 +1,5 @@
+@import 'src/style/nativSelect.scss';
+
 * {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
@@ -230,3 +232,17 @@ input[type='checkbox'] {
 ::-webkit-scrollbar-thumb {
  background-color: #4d4d4d;
 }
+
+@media (max-width: 425px) {
+  .list {
+    display: none !important;
+  }
+
+  .open {
+    display: none !important;
+  }
+
+  .cg-select {
+    display: none !important;
+  }
+}
--- a/src/style/nativSelect.scss
+++ b/src/style/nativSelect.scss
@@ -6,8 +6,25 @@
  background: #2a2f3b;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
+  margin: 0;

  &__nativOption {
    border: 1px #0a0b0e solid;
  }
 }
+
+@media (max-width: 425px) {
+  .nativSelect {
+    display: block;
+    min-width: 235px;
+    height: 50px;
+
+    border: none;
+    border-radius: 10px;
+  }
+  select[multiple='multiple'] {
+    color: black;
+    background-color: white;
+    border-radius: 0;
+  }
+}