Merge pull request #25 from apuc/fix-media-phone

Fixed media requests

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "",
   "scripts": {
-    "start": "parcel ./src/index.html -p 4500 --open ",
+    "start": "parcel src/index.html -p 4500 --open ",
     "build": "parcel build ./src/index.html  --public-url /cg-select/",
     "deploy": "gh-pages -d dist",
     "predeploy": "npm run build"

src/cg-dropdown.js

@@ -217,11 +217,14 @@ export class DropDown {
     }
 
     const select = this.#element.querySelector('.cg-select');
+    const nativSelect = this.#element.querySelector('.nativSelect');
     if (value === true) {
       this.#element.setAttribute('disabled', true);
+      nativSelect.setAttribute('disabled', true);
       select.classList.add('disabled');
     } else {
       this.#element.removeAttribute('disabled');
+      nativSelect.removeAttribute('disabled');
       select.classList.remove('disabled');
     }
   }

src/style/main.scss

@@ -322,7 +322,23 @@ input[type='checkbox'] {
   display: none;
 }
 
-@media (max-width: 425px) {
+/*320px - 576px*/
+@media (max-width: 576px) {
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    width: 90%;
+
+    .header {
+      h1 {
+        font-size: 32px;
+      }
+    }
+  }
+
   .list {
     display: none !important;
   }

src/style/nativSelect.scss

@@ -18,7 +18,7 @@
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 576px) {
   .nativSelect {
     display: block;
     min-width: 235px;
@@ -27,6 +27,7 @@
     border: none;
     border-radius: 10px;
   }
+
   select[multiple='multiple'] {
     color: black;
     background-color: white;