change background color of stage loader route

This commit is contained in:
Matteias Collet 2020-06-28 18:18:44 +02:00
parent c1ba6a85b3
commit bbc01ee2c9
3 changed files with 16 additions and 10 deletions

View file

@ -1,13 +1,16 @@
<template> <template>
<div class="select-wrapper"> <div class="select-wrapper">
<select @change="onValueChanged" autocomplete="off"> <select @change="onValueChanged" autocomplete="off">
<option v-if="placeholder != null" value="placeholder" selected disabled>{{ placeholder }}</option> <option v-if="placeholder != null" value="placeholder" selected disabled>{{
placeholder
}}</option>
<optgroup v-for="optGroup in optGroups" :label="optGroup.label"> <optgroup v-for="optGroup in optGroups" :label="optGroup.label">
<option <option
v-for="option in optGroup.options" v-for="option in optGroup.options"
:value="option.value" :value="option.value"
:selected="selectedValue && option.value === selectedValue" :selected="selectedValue && option.value === selectedValue"
>{{ option.label }}</option> >{{ option.label }}</option
>
</optgroup> </optgroup>
</select> </select>
</div> </div>
@ -19,19 +22,19 @@ export default {
selectedValue: { type: String }, selectedValue: { type: String },
placeholder: { type: String }, placeholder: { type: String },
optGroups: { type: Array }, optGroups: { type: Array },
onChange: { type: Function } onChange: { type: Function },
}, },
computed: {}, computed: {},
data() { data() {
return { return {
generation: 2 generation: 2,
}; };
}, },
methods: { methods: {
onValueChanged(e) { onValueChanged(e) {
this.onChange(e.target.value); this.onChange(e.target.value);
} },
} },
}; };
</script> </script>
@ -89,7 +92,7 @@ select optgroup {
top: 3px; top: 3px;
width: 40px; width: 40px;
height: 100%; height: 100%;
content: "\25BC"; content: '\25BC';
text-align: center; text-align: center;
color: white; color: white;
font-size: 14px; font-size: 14px;

View file

@ -270,10 +270,12 @@ ul li {
color: red; color: red;
cursor: pointer; cursor: pointer;
} }
</style>
<style> .level-select >>> .select-wrapper {
.ghost select { background-color: #62809e;
}
.ghost >>> .select-wrapper {
background-color: orange; background-color: orange;
} }
</style> </style>

View file

@ -6,6 +6,7 @@ module.exports = {
head: [ head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }], ['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }], ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
['meta', { name: 'Cache-control', content: 'public,max-age=3600' }],
], ],
/** /**