You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/sass/panel/_breadcrumbs.scss

89 lines
2.0 KiB
SCSS

$pnl-brc-height: 50px;
#panel-breadcrumb{
height: $pnl-brc-height;
background: #282d46;
margin-bottom: 1rem;
ul{
padding: 0;
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
list-style: none;
//border: 1px solid black;
border-radius: 4px ;
transition: .5s;
li{
transition: 300ms;
position: relative;
overflow: hidden;
a,span{
height: $pnl-brc-height;
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
}
i{
font-size: 25px;
margin: 0 .5rem;
}
&:before {
transition: 300ms;
content: "";
width: 37px;
height: 37px;
border: 1px solid black;
transform: rotate(45deg);
position: absolute;
inset-inline-start: -1.05rem;
background: #282d46;
top: 7px;
}
&:first-child:before {
display: none;
}
&:hover{
background: #444e7c;
//background-image: url("../images/pattern.png");
& + li:before{
background: #444e7c;
//background-image: url("../images/pattern.png");
}
}
}
}
}
/*-500px width*/
@media (max-width: 600px) {
#panel-breadcrumb{
display: block;
li{
text-align: end;
}
span{
display: none !important;
}
i{
margin: 0;
display: inline-block;
}
a{
justify-content: end !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
}
}