simplfying ui

This commit is contained in:
Víctor Losada Hernández
2026-10-07 10:50:27 +02:00
parent 17c01b888a
commit 84295ac833
@@ -105,7 +105,6 @@
&:not(:has(.brewItem:last-child:nth-child(3n))) { &:not(:has(.brewItem:last-child:nth-child(3n))) {
.brewItem:last-child { .brewItem:last-child {
margin-right : auto; margin-right : auto;
background : green;
} }
} }
} }
@@ -136,53 +135,49 @@
padding-inline : 10px; padding-inline : 10px;
} }
.sort-container { .radio-toggle {
z-index : 1; z-index : 1;
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
row-gap : 5px; row-gap : 5px;
column-gap : 15px; align-items : center;
align-items : baseline;
justify-content : center; justify-content : center;
text-align : center; text-align : center;
h6 { h6 {
font-size : 11px; font-size : 14px;
font-weight : bold; margin-right:5px;
text-transform : uppercase;
} }
.sort-option {
.option {
display : flex; display : flex;
align-items : center; align-items : center;
height : 100%; height : 100%;
padding : 0 8px; padding : 0 8px;
color : #CCCCCC; color : #CCCCCC;
&:hover { background-color : #444444; } input[type='radio'] { display : none; }
&.active { button {
padding : 0;
font-size : 11px;
font-weight : normal;
text-transform : uppercase;
background-color : transparent;
}
&:hover { background-color : #444444; }
&.active, &:has(input:checked) {
font-weight : bold; font-weight : bold;
color : #DDDDDD; color : white;
background-color : #333333; background-color : #333333;
button { button {
height : 100%; height : 100%;
font-weight : 800; font-weight : 800;
color : white;
& + .sortDir { padding-left : 5px; } & + .sortDir { padding-left : 5px; }
} }
} }
} }
button {
padding : 0;
font-size : 11px;
font-weight : normal;
color : #CCCCCC;
text-transform : uppercase;
background-color : transparent;
}
} }
.filter-option { .filter-option {
@@ -242,21 +237,5 @@
} }
} }
} }
.layout-container {
z-index : 1;
display : flex;
flex-wrap : wrap;
row-gap : 5px;
column-gap : 15px;
align-items : center;
justify-content : center;
text-align : center;
input[type='radio'] { display : none; }
i { transition : color 0.2s; }
input:checked + i { color : @blueLight; }
}
} }
} }