Commit 56a62659 authored by Christian Hansen's avatar Christian Hansen Committed by Anton Koch
Browse files

Resolve "mb-select needs mobile makeover"

parent a2508db9
<template lang="pug">
q-select(
q-select.mb-select.mb-border-a.q-pl-md.q-pr-sm(
v-model="modelValue"
@input="handleInput"
:options="options"
......@@ -8,10 +8,17 @@ q-select(
:multiple="multiple"
:option-value="optionValue"
dropdown-icon="expand_more"
outlined
dense
emit-value
:clearable="clearable"
behavior="menu"
borderless
rounded
input-class="q-ma-xl"
@popup-show="active = true"
@popup-hide="active = false"
:class="{'active' : active}"
popup-content-class="mb-select-popup-content-class"
)
</template>
......@@ -29,6 +36,7 @@ export default {
],
data () {
return {
active: false,
modelValue: this.value
}
},
......@@ -41,4 +49,5 @@ export default {
</script>
<style lang="stylus" scoped>
// has to be sourced out into: src/css/components/mbSelect.styl
</style>
......@@ -7,6 +7,8 @@
@import "styling/shadows.styl"
@import "styling/tables.styl"
@import "components/mbSelect.styl"
#q-app
overflow hidden
body
......
.mb-select
border-radius $border-radius
&:hover
background-color $mb-blue-20
&:hover
&.active
border-color $mb-blue-100
*
color $mb-blue-100
.mb-select-popup-content-class
.q-focus-helper
visibility hidden
.body--dark
.mb-select-popup-content-class
> *
> *
background-color transparent
&:hover
background-color $mb-dark
.body--light
.mb-select-popup-content-class
> *
> *
background-color transparent
&:hover
background-color $mb-light
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment