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')"
>
<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>

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>
<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;