2023-04-30 11:33:25 +08:00
. list-header {
display : flex ;
align-items : center ;
flex-wrap : wrap ;
gap : . 5rem ;
}
. list-header-sort {
display : flex ;
align-items : center ;
padding-left : 1rem ;
padding-right : 1rem ;
}
. list-header-search {
display : flex ;
flex : 1 ;
align-items : center ;
flex-wrap : wrap ;
justify-content : center ;
min-width : 200px ; /* to enable flexbox wrapping on mobile */
}
. list-header-search . input {
flex : 1 ;
}
2023-05-04 05:58:59 +08:00
. small-menu-items {
2023-04-30 11:33:25 +08:00
min-height : 35 . 4px ! important ; /* match .small.button in height */
2023-06-09 16:37:47 +08:00
background : none ! important ; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
2023-04-30 11:33:25 +08:00
}
2023-05-04 05:58:59 +08:00
. small-menu-items . item {
2023-06-09 16:37:47 +08:00
background : var ( --color-menu ) ! important ;
2023-04-30 11:33:25 +08:00
padding-top : 6px ! important ;
padding-bottom : 6px ! important ;
}
2023-06-09 16:37:47 +08:00
. small-menu-items . item : hover {
background : var ( --color-hover ) ! important ;
}
. small-menu-items . item . active {
background : var ( --color-active ) ! important ;
}
2023-06-18 18:31:42 +08:00
@ media ( max-width : 767 . 98px ) {
. list-header-search {
order : 0 ;
}
. list-header-toggle {
order : 1 ;
}
. list-header-sort {
order : 2 ;
margin-left : auto ;
}
}