pixel perfect selector arrow

Aashw1n · Feb 1, 2024 · 68bd583 · 68bd583
1 parent a2bd84b
commit 68bd583
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/docs/_includes/selector.html b/docs/_includes/selector.html
@@ -1,7 +1,8 @@
 {% assign values = include.values | split: "," %}
 
-<div class="selector">
-<select class="platform" onchange="selectOption(this)">
+<div class="selector-container">
+
+<select class="selector" onchange="selectOption(this)">
     {% for value in values %}
         <option value="option-{{ value | strip | downcase }}">{{ value | strip | capitalize }}</option>
     {% endfor %}

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
@@ -459,7 +459,7 @@ button {
             }
         }
 
-        .selector {
+        .selector-container {
             background-color: $color-highlightBG;
             display: flex;
             flex-direction: row-reverse;
@@ -476,11 +476,22 @@ button {
         select {
             height: 28px;
             border-radius: 20px;
-            padding: 0px 12px;
-            background-color: $color-button-background;
+            padding: 0px 26px 0px 12px;
             color: $color-text;
             font-size: 11px;
             font-weight: 700;
+            text-align: center;
+            cursor: pointer;
+
+            appearance: none;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        select {
+            background: url("/assets/images/down.svg") no-repeat right $color-button-background;
+            background-size: 12px;
+            background-position-x: 85%;
         }
     }
 

diff --git a/docs/assets/js/selector.js b/docs/assets/js/selector.js
@@ -34,4 +34,4 @@ function selectOption(s) {
     });
 }
 
-window.onload = selectOption(document.getElementsByClassName('platform')[0]);
+window.onload = selectOption(document.getElementsByClassName('selector')[0]);
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,4 +34,4 @@ function selectOption(s) { @@
         });
     }
-    window.onload = selectOption(document.getElementsByClassName('platform')[0]);
+    window.onload = selectOption(document.getElementsByClassName('selector')[0]);