danielGe/PortaFront
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

commit nuevo

Browse Source
This commit is contained in:
casnet1
2020-08-24 13:07:38 -05:00
parent d0cac70d64
commit c7350df32e
4 changed files with 143 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/esteticas/nav.vue
+36 -28
View File
@@ -106,7 +106,7 @@
aria-describedby="basic-addon2"
v-model="nombre"
/>
<div class="input-group-append reDer bg-white">
<div class="input-group-append reDer bg-white dropdown">
<button class="btn my-0" type="submit">
<svg
width="1em"
@@ -128,27 +128,31 @@
</div>
</div>
<!-- <div>-->
<div v-if="nombre.length > 2" class=" rescont dropdown ">
<ul
class=" list-group reslist dropdown-content "
>
<li class=" list-group-item " v-for="item in buscarLibro"
v-bind:key="item.idLibro" @click="descripcion(item.idLibro)">
<div v-if="nombre.length > 2" class=" rescont ">
<ul class=" dropdown-menu d-block dropdown-menu-right ">
<li
class=" dropdown-item text-wrap "
v-for="item in buscarLibro"
v-bind:key="item.idLibro"
@click="descripcion(item.idLibro)"
>
{{ item.titulo }}
</li>
</li>
</ul>
<!-- <ul class="list-group reslist dropdown-content ">
<li class="list-group-item ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>
<li class=" list-group-item ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>
<li class=" list-group-item ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>
<!-- <ul class=" dropdown-menu d-block dropdown-menu-right">
<li class="dropdown-item text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="dropdown-item text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>
<li class=" dropdown-item text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>
<li class=" dropdown-item text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>
</ul> -->
</div>
</div>
</form>
</nav>
</div>
@@ -272,39 +276,43 @@ nav {
border-bottom-left-radius: 20px 20px !important;
}
/*
.dropdown-menu {
width: 10% !important;
} */
.dropdown {
position: relative;
display: inline-block;
height: auto;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* padding: 12px 16px; */
top: .8rem;
left: -10rem;
display: block;
top: 0.8rem;
left: -10rem;
display: block;
}
.rescont{
.rescont {
z-index: 2;
}
.list-group-item {
padding: 12px 16px;
padding: 12px 16px;
}
@media (max-width: 450px) {
.menuText,
.buscador {
display: block !important;
}
.dropdown-menu {
width: 80vw !important;
}
}
</style>