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;
}
.input-color {
background: rgba(23, 49, 79, 0.6);
}

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

@ -6,13 +6,13 @@
v-model="summoner"
type="text"
: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
@click="dropdown = !dropdown"
:class="{'border-2 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-teal-200': dropdown}"
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>
<svg
@ -35,7 +35,7 @@
leave-to-class="opacity-0 scale-90"
>
<div
v-if="dropdown"
v-show="dropdown"
:class="[dropdownClasses]"
class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer"
>
@ -44,7 +44,7 @@
:key="region"
@click="selectedRegion = region"
: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
v-if="region === selectedRegion"
@ -62,11 +62,11 @@
</transition>
<button
: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"
>
<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"
viewBox="0 0 512 512"
>
@ -122,7 +122,9 @@ export default {
inputClasses() {
return {
'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() {
@ -162,16 +164,4 @@ export default {
.offsetIcon {
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>