mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-04 22:38:43 +00:00
simplfying ui
This commit is contained in:
@@ -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; }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user