commit: 5d3bf43fdc83efb0294229df63201877032a85ff
parent c6d4c20982261b55b16dda59c3e657eb1feb0041
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:19:11 +0200
ghost styles for poll form
Diffstat:
3 files changed, 33 insertions(+), 33 deletions(-)
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
@@ -47,6 +47,7 @@
:title="$t('polls.type')"
>
<Select
+ kind="ghost"
v-model="pollType"
@change="updatePollToParent"
>
@@ -68,6 +69,7 @@
>
<Select
v-model="expiryUnit"
+ kind="ghost"
class="expiry-unit"
@change="expiryAmountChange"
>
@@ -132,12 +134,6 @@
.poll-type {
margin-right: 0.75em;
flex: 1 1 60%;
- .select {
- border: none;
- box-shadow: none;
- background-color: transparent;
- padding-right: 0.75em;
- }
}
.poll-expiry {
@@ -147,12 +143,6 @@
width: 3em;
text-align: right;
}
-
- .expiry-unit {
- border: none;
- box-shadow: none;
- background-color: transparent;
- }
}
}
</style>
diff --git a/src/components/select/select.js b/src/components/select/select.js
@@ -0,0 +1,21 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
+
+export default {
+ model: {
+ prop: 'value',
+ event: 'change'
+ },
+ props: [
+ 'value',
+ 'disabled',
+ 'unstyled',
+ 'kind'
+ ]
+}
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
@@ -2,7 +2,7 @@
<template>
<label
class="Select input"
- :class="{ disabled }"
+ :class="[ kindClass, { disabled } ]"
>
<select
:disabled="disabled"
@@ -18,26 +18,7 @@
</label>
</template>
-<script>
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
- faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
- faChevronDown
-)
-export default {
- model: {
- prop: 'value',
- event: 'change'
- },
- props: [
- 'value',
- 'disabled'
- ]
-}
-</script>
+<script src="./select.js"> </script>
<style lang="scss">
@import '../../_variables.scss';
@@ -45,6 +26,14 @@ export default {
.Select {
padding: 0;
+ /* Overriding input styles, probably should make proper Input component? */
+ &.-kind_ghost {
+ border: none;
+ box-shadow: none;
+ background-color: transparent;
+ padding-right: 0.75em;
+ }
+
select {
-webkit-appearance: none;
-moz-appearance: none;