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/views/segments/customer/AvisaCustomer/AvisaCustomer.scss

98 lines
2.2 KiB
SCSS

#AvisaCustomer {
padding: 2rem 0;
.avisa-avatar {
height: 128px;
width: 128px;
display: block;
border-radius: 50%;
object-fit: cover;
margin: auto;
}
#avisa-tabs {
list-style: none;
padding: 1rem 0;
margin: 1rem 0;
border-radius: var(--xshop-border-radius);
background: var(--xshop-primary);
li {
a {
padding: .5rem 1rem;
color: var(--xshop-diff);
display: block;
font-size: 20px;
transition: 500ms;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
&.active, &:hover {
background: var(--xshop-secondary);
color: var(--xshop-diff2);
}
}
i{
margin: 0 1rem;
}
}
}
.avisa-grid{
.grid-item{
overflow: hidden;
height: 200px;
border-radius: var(--xshop-border-radius);
position: relative;
display: flex;
align-items: center;
justify-content: center;
i{
position: absolute;
transform: rotateZ(-17deg);
inset-inline-start: 7%;
top: -10%;
font-size: 75px;
opacity: .3;
}
h3{
position: absolute;
left: 0;
right: 0;
bottom: .2rem;
text-align: center;
opacity: .7;
}
}
&:nth-child(1){
.grid-item{
background: rgba(248, 170, 0, 0.63);
}
}
&:nth-child(2){
.grid-item{
background: rgba(184, 11, 109, 0.63);
}
}
&:nth-child(3){
.grid-item{
background: rgba(11, 184, 123, 0.63);
}
}
&:nth-child(4){
.grid-item{
background: rgba(11, 112, 184, 0.63);
}
}
}
}