Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 21:07:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: change color of the searchbar

Browse source
This commit is contained in:
Valentin Kaelin 2019-11-17 16:10:27 +01:00
parent 74cdf54eec
commit 3c99c818ec
2 changed files with 14 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/assets/css/base.css
View file

@ -54,3 +54,7 @@ button:focus {
); );
box-shadow: rgba(235, 248, 255, 0.1) 0px -1px inset; box-shadow: rgba(235, 248, 255, 0.1) 0px -1px inset;
} }
.input-color {
background: rgba(23, 49, 79, 0.6);
}

30
client/src/components/SearchForm.vue
View file

@ -6,13 +6,13 @@
v-model="summoner" v-model="summoner"
type="text" type="text"
:class="[inputClasses]" :class="[inputClasses]"
class="input w-full rounded-lg outline-none pl-6 pr-32 font-bold" class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000"
/> />
<div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-12"> <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-12">
<div <div
@click="dropdown = !dropdown" @click="dropdown = !dropdown"
:class="{'border-2 border-teal-200' : dropdown}" :class="{'border-teal-200': dropdown}"
class="border border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white" class="border-2 border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
> >
<span class="selected font-bold select-none">{{ selectedRegion }}</span> <span class="selected font-bold select-none">{{ selectedRegion }}</span>
<svg <svg
@ -35,7 +35,7 @@
leave-to-class="opacity-0 scale-90" leave-to-class="opacity-0 scale-90"
> >
<div <div
v-if="dropdown" v-show="dropdown"
:class="[dropdownClasses]" :class="[dropdownClasses]"
class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer" class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer"
> >
@ -44,7 +44,7 @@
:key="region" :key="region"
@click="selectedRegion = region" @click="selectedRegion = region"
:class="classRegions(index)" :class="classRegions(index)"
class="relative pr-2 pl-5 py-1 text-xs dropdown text-right" class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800"
> >
<svg <svg
v-if="region === selectedRegion" v-if="region === selectedRegion"
@ -62,11 +62,11 @@
</transition> </transition>
<button <button
:class="[btnClasses]" :class="[btnClasses]"
class="absolute right-0 z-30 btn rounded-lg h-full hover:text-teal-500" class="absolute right-0 z-30 h-full hover:text-teal-200"
type="submit" type="submit"
> >
<svg <svg
class="absolute vertical-center horizontal-center w-4 h-4 fill-current " class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" viewBox="0 0 512 512"
> >
@ -122,7 +122,9 @@ export default {
inputClasses() { inputClasses() {
return { return {
'py-2 px-1': this.size === 'small', 'py-2 px-1': this.size === 'small',
'py-4 px-2': this.size === 'xl' 'py-4 px-2': this.size === 'xl',
'input-color': !this.dropdown,
'bg-blue-1000': this.dropdown
} }
}, },
dropdownClasses() { dropdownClasses() {
@ -162,16 +164,4 @@ export default {
.offsetIcon { .offsetIcon {
left: 4px; left: 4px;
} }
.input, .dropdown {
background: rgba(23,49,79,0.60);
}
.dropdown:hover {
background: rgba(23,49,79,0.90);
}
.input:focus{
background: rgba(23,49,79,0.70);
}
</style> </style>