hubl/src/scss/menu.css

101 lines
1.8 KiB
CSS

.menu ldp-route {
display: block;
font-size: 1.2em;
text-decoration: none;
line-height: 2.5em;
color: #666;
padding: 0.5em;
margin: auto;
padding-left: 20px;
transition: background-color 0.3s;
position: relative;
}
/* Fait office de border-bottom */
.menu ldp-route::after {
content: "";
background: #f1f1f1;
position: absolute;
bottom: -1px;
left: 10px;
width: 80%;
height: 1px;
}
.menu ldp-route:hover {
cursor: pointer;
color: #000;
background-color: darkgrey;
}
.menu ldp-route[active] {
cursor: pointer;
/* color: #000; */
background-color: aliceblue;
}
.menu ldp-route:hover {
cursor: pointer;
color: #000;
background-color: darkgrey;
}
.menu {
border-right: 0.5px solid #ccc;
max-width: 275px;
min-width: 125px;
padding: 0;
}
.menu ldp-router {
padding: 10px 0;
}
#menu-title {
font-size: 2em;
/* margin-left: 10px; */
/* pas top centrer sur peite largeur, comment faire sans margin-left ? */
margin-right: 2px;
font-weight: bold;
font-family: 'Righteous', cursive;
display: flex;
justify-content: center;
}
#menu-placeholder {
display: flex;
justify-content: center;
overflow: hidden;
margin: 25px 10px 0 10px;
background-color: #666666;
}
@media only screen and (max-width: 767px) {
#menu-placeholder {
display: none;
}
.menu {
border-right: none;
max-width: none;
}
.menu ldp-router {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.menu ldp-route {
padding-left: 0.5em;
}
ldp-route:hover,
.used {
background: transparent;
}
}
@media only screen and (max-height: 800px) and (min-width: 767px) {
.menu ldp-route {
padding: 0;
padding-left: 20px;
}
}