attempt to fix scoped v-select styles

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;
 }

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">

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;

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'], }, ],
   }
 }