From 1af4c801ded50e50a3066aed3f86f6106ffc9e7a Mon Sep 17 00:00:00 2001
From: Spencer Flagg <spencer@iflylocal.com>
Date: Mon, 20 Dec 2021 13:37:36 +0100
Subject: [PATCH] attempt to fix scoped v-select styles

---
 assets/css/main.css | 30 ++++++++++++++++++++++++++++++
 login/index.js      |  2 +-
 pages/flights.vue   | 30 ------------------------------
 stylelint.config.js |  1 +
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 84deae9..a079177 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -154,4 +154,34 @@ main {
 
 .flyout-container.flyout-container--show {
   transform: translateY(0);
+}
+
+.flyout .v-select {
+  font-size: 1.5rem;
+}
+
+.flyout .vs__dropdown-menu {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.flyout .vs__dropdown-menu li {
+  border-radius: 999px;
+  transition: 0.3 all;
+}
+
+.flyout .vs__dropdown-menu li:hover {
+  border-radius: 999px;
+  background-color: #007fff;
+}
+
+.flyout .vs__dropdown-toggle {
+  background: #eee;
+  border-radius: 1.2rem 1.2rem 1.2rem 1.2rem;
+}
+
+.flyout .vs--open .vs__dropdown-toggle {
+  background: #eee;
+  border-radius: 1.2rem 1.2rem 0 0;
 }
\ No newline at end of file
diff --git a/login/index.js b/login/index.js
index bb75d1f..738966f 100644
--- a/login/index.js
+++ b/login/index.js
@@ -202,7 +202,7 @@ app.get("/", (req, res) => {
       <p><strong>No new password to remember!</strong></p>
       <form method="post" action="/login/auth">
         ${redirect}
-        <input name="email" type="email" value="spencer@seasteading.org" placeholder="coolname@website.com" pattern="/(?:[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/" required>
+        <input name="email" type="email" placeholder="coolname@website.com" pattern="/(?:[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/" required>
         <button type="submit" class="btn btn--primary">
           get my link
           <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-wand" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
diff --git a/pages/flights.vue b/pages/flights.vue
index 21f1d8b..d56cbe9 100644
--- a/pages/flights.vue
+++ b/pages/flights.vue
@@ -882,36 +882,6 @@ span.badge--avail {
   color: #fff;
 }
 
-.flyout .v-select {
-  font-size: 1.5rem;
-}
-
-.flyout .vs__dropdown-menu {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.flyout .vs__dropdown-menu li {
-  border-radius: 999px;
-  transition: 0.3 all;
-}
-
-.flyout .vs__dropdown-menu li:hover {
-  border-radius: 999px;
-  background-color: #007fff;
-}
-
-.flyout .vs__dropdown-toggle {
-  background: #eee;
-  border-radius: 1.2rem 1.2rem 1.2rem 1.2rem;
-}
-
-.flyout .vs--open .vs__dropdown-toggle {
-  background: #eee;
-  border-radius: 1.2rem 1.2rem 0 0;
-}
-
 .flyout p {
   font-size: 1rem;
   line-height: 1.2;
diff --git a/stylelint.config.js b/stylelint.config.js
index 12b12bb..52f5b89 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -6,5 +6,6 @@ module.exports = {
   // https://stylelint.io/user-guide/configuration
   rules: {
     // 'length-zero-no-unit': ['fix']
+    'selector-pseudo-element-no-unknown': [ true, { ignorePseudoElements: ['/^v-/', 'pseudo-element'], }, ],
   }
 }