feat: add select-arrow-color var (#24)

oruga-ui · Apr 9, 2024 · d7009b0 · d7009b0
1 parent eb5fe21
commit d7009b0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss
@@ -16,6 +16,7 @@ $select-height: $control-height !default;
 $select-line-height: var(--#{$prefix}base-line-height) !default;
 $select-margin: 0 !default;
 $select-padding: $control-padding-vertical $control-padding-horizontal !default;
+$select-arrow-color: $select-color !default;
 $select-arrow-size: 1rem !default;
 $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 /* @docs */
@@ -66,7 +67,7 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
   margin: var(--#{$prefix}select-margin, $select-margin);
 
   &-arrow {
-    background-image: url(svg_arrow($select-color));
+    background-image: url(svg_arrow($select-arrow-color));
     background-repeat: no-repeat;
     background-size: var(--#{$prefix}select-arrow-size, $select-arrow-size);
     background-position: calc(

diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -99,6 +99,40 @@ const selectedOptions = ref([]);
     </o-field>
   </section>
 
+  <section class="my-4">
+    <h3>Variants</h3>
+    <o-field label="Primary" variant="primary">
+      <o-select placeholder="Select a character">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+    <o-field label="Success" variant="success">
+      <o-select placeholder="Select a character">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+    <o-field label="Info" variant="info">
+      <o-select placeholder="Select a character">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+    <o-field label="Warning" variant="warning">
+      <o-select placeholder="Select a character">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+    <o-field label="Danger" variant="danger">
+      <o-select placeholder="Select a character">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+  </section>
+
   <section class="my-4">
     <h3>Sizes</h3>