welton/RRBEC
1
0
Fork 0
mirror of https://github.com/welton89/RRBEC.git synced 2026-04-05 13:35:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: seta down do dropdown girar no hover

Browse Source
This commit is contained in:
Welton Moura
2025-01-14 21:34:08 -03:00
parent 14d04eb280
commit a2fd5d12e3
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gestaoRaul/templates/base.html
View File

@@ -38,7 +38,7 @@
<li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a></li> <li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a></li>
<div class="dropdown"> <div class="dropdown">
<li class="nav-item">Cadastros</li> <li class="nav-item">Cadastros<img class="img-drop" src="{% static 'midia/icons/down.svg' %}"></li>
<div class="dropdown-content"> <div class="dropdown-content">
<a href="{% url 'products' %}" class="nav-link">Produtos</a> <a href="{% url 'products' %}" class="nav-link">Produtos</a>
<a href="{% url 'categories' %}" class="nav-link">Categorias</a> <a href="{% url 'categories' %}" class="nav-link">Categorias</a>
@@ -71,7 +71,7 @@
<div class="dropdown"> <div class="dropdown">
<li class="nav-item">Cadastros </li> <li class="nav-item">Cadastros<img class="img-drop" src="{% static 'midia/icons/down.svg' %}" style="width: 35px;"> </li>
<div class="dropdown-content"> <div class="dropdown-content">
<a href="{% url 'products' %}" class="nav-link"> Produtos</a> <a href="{% url 'products' %}" class="nav-link"> Produtos</a>
<a href="{% url 'categories' %}" class="nav-link"> Categorias</a> <a href="{% url 'categories' %}" class="nav-link"> Categorias</a>

18
gestaoRaul/templates/static/base.css
View File

@@ -88,6 +88,7 @@ text-align: center;
position: relative; position: relative;
display: inline-block; display: inline-block;
color: #fff; color: #fff;
cursor: pointer;
} }
.dropdown-content { .dropdown-content {
@@ -97,6 +98,7 @@ text-align: center;
background-color: #313238; background-color: #313238;
min-width: 160px; min-width: 160px;
box-shadow: 0px 3px 10px #464646; box-shadow: 0px 3px 10px #464646;
transition: display 0.9s ease-in-out
} }
.dropdown-content a { .dropdown-content a {
@@ -109,9 +111,21 @@ text-align: center;
.dropdown-content a:hover { .dropdown-content a:hover {
background-color: #7a7a7a; background-color: #7a7a7a;
border-radius: 5px; border-radius: 5px;
} }
.img-drop {
width: 35px;
transition: transform 0.3s ease-in-out;
}
.dropdown:hover .img-drop {
transform: rotate(180deg);
}
.dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropdown-content {
display: block;
}
/* .dropdown:hover .dropbtn {background-color: #3e8e41;} */ /* .dropdown:hover .dropbtn {background-color: #3e8e41;} */

7
gestaoRaul/templates/static/midia/icons/down.svg Normal file
View File

@@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="88px" height="88px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
Side by Side

After

Width:  |  Height:  |  Size: 565 B