ghost styles for poll form

This commit is contained in:
Henry Jameson 2021-03-11 16:19:11 +02:00
parent c6d4c20982
commit 5d3bf43fdc
3 changed files with 33 additions and 33 deletions

View file

@ -47,6 +47,7 @@
:title="$t('polls.type')" :title="$t('polls.type')"
> >
<Select <Select
kind="ghost"
v-model="pollType" v-model="pollType"
@change="updatePollToParent" @change="updatePollToParent"
> >
@ -68,6 +69,7 @@
> >
<Select <Select
v-model="expiryUnit" v-model="expiryUnit"
kind="ghost"
class="expiry-unit" class="expiry-unit"
@change="expiryAmountChange" @change="expiryAmountChange"
> >
@ -132,12 +134,6 @@
.poll-type { .poll-type {
margin-right: 0.75em; margin-right: 0.75em;
flex: 1 1 60%; flex: 1 1 60%;
.select {
border: none;
box-shadow: none;
background-color: transparent;
padding-right: 0.75em;
}
} }
.poll-expiry { .poll-expiry {
@ -147,12 +143,6 @@
width: 3em; width: 3em;
text-align: right; text-align: right;
} }
.expiry-unit {
border: none;
box-shadow: none;
background-color: transparent;
}
} }
} }
</style> </style>

View file

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

View file

@ -2,7 +2,7 @@
<template> <template>
<label <label
class="Select input" class="Select input"
:class="{ disabled }" :class="[ kindClass, { disabled } ]"
> >
<select <select
:disabled="disabled" :disabled="disabled"
@ -18,26 +18,7 @@
</label> </label>
</template> </template>
<script> <script src="./select.js"> </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>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
@ -45,6 +26,14 @@ export default {
.Select { .Select {
padding: 0; 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 { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;