From 58866a3e191926092a5ad67c2e6ba1c610c0edb4 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 12 Jun 2023 18:50:37 +0200
Subject: [PATCH] move select styling to gitea-select class

---
 web_src/css/index.css                         |  1 +
 web_src/css/modules/select.css                | 25 ++++++++++++++
 .../components/ScopedAccessTokenSelector.vue  | 34 +------------------
 3 files changed, 27 insertions(+), 33 deletions(-)
 create mode 100644 web_src/css/modules/select.css

diff --git a/web_src/css/index.css b/web_src/css/index.css
index 689c3f4a29..c9cc1d8032 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -1,7 +1,8 @@
 @import "./modules/normalize.css";
 @import "./modules/animations.css";
 @import "./modules/button.css";
+@import "./modules/select.css";
 @import "./modules/tippy.css";
 @import "./modules/modal.css";
 @import "./modules/breadcrumb.css";
 @import "./modules/card.css";
diff --git a/web_src/css/modules/select.css b/web_src/css/modules/select.css
new file mode 100644
index 0000000000..57a87888e0
--- /dev/null
+++ b/web_src/css/modules/select.css
@@ -0,0 +1,25 @@
+.gitea-select {
+  position: relative;
+}
+
+.gitea-select select {
+  appearance: none; /* hide default triangle */
+}
+
+/* ::before and ::after pseudo elements don't work on select elements,
+   so we need to put it on the parent. */
+.gitea-select::after {
+  position: absolute;
+  top: 12px;
+  right: 8px;
+  pointer-events: none;
+  content: '';
+  width: 14px;
+  height: 14px;
+  mask-size: cover;
+  -webkit-mask-size: cover;
+  mask-image: var(--octicon-chevron-right);
+  -webkit-mask-image: var(--octicon-chevron-right);
+  transform: rotate(90deg); /* point the chevron down */
+  background: currentcolor;
+}
diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 4dcf0a5e5e..b4b9b979ea 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -2,9 +2,9 @@
   <div v-for="category in categories" :key="category" class="field gt-pl-2 gt-pb-2 access-token-category">
     <label class="category-label" :for="'access-token-scope-' + category">
       {{ category }}
     </label>
-    <div class="access-token-select-wrapper">
+    <div class="gitea-select">
       <select
         class="ui selection access-token-select"
         name="scope"
         :id="'access-token-scope-' + category"
@@ -110,36 +110,4 @@ export function initScopedAccessTokenCategories() {
   }
 }
 
 </script>
-
-<style scoped>
-.access-token-select-wrapper {
-  position: relative;
-}
-
-/* ::before and ::after pseudo elements don't work on select elements, so we
-need to put it on the parent. */
-.access-token-select-wrapper::before {
-  position: absolute;
-  top: 12px;
-  right: 8px;
-  pointer-events: none;
-  display: inline-block;
-  content: '';
-  width: 14px;
-  height: 14px;
-  mask-size: cover;
-  -webkit-mask-size: cover;
-  mask-image: var(--octicon-chevron-right);
-  -webkit-mask-image: var(--octicon-chevron-right);
-  /* Point the chevron down. */
-  transform: rotate(90deg);
-  background: currentcolor;
-}
-
-.ui.form .access-token-select {
-  appearance: none;
-  /* Increase padding for the chevron */
-  padding-right: 26px;
-}
-</style>
-- 
2.40.1