homebrewery/client/homebrew/pages/basePages/listPage/listPage.less

@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import '@sharedStyles/colors.less';

.noColumns() {
	-webkit-column-width : auto;
	-moz-column-width    : auto;
	column-width         : auto;
	-webkit-column-count : auto;
	-moz-column-count    : auto;
	column-count         : auto;
	column-fill          : auto;
	-webkit-column-gap   : normal;
	-moz-column-gap      : normal;
	column-gap           : normal;
	height               : auto;
	min-height           : 279.4mm;
	margin               : 20px auto;
	contain              : unset;
}
.listPage {
	.content {
		z-index : 1;
		padding : clamp(50px, 5vh, 200px) 10vw;
		.noBrews {
			margin     : 10px 0px;
			font-size  : 1.3em;
			font-style : italic;
		}
		.brewCollection {
			width:fit-content;

			h1 {
				margin-bottom : 20px;
				font-size     : 25px;
				color         : #DDDDDD;

				&.active::before, &.inactive::before {
					padding-right : 0.5em;
					font-family   : 'Font Awesome 6 Free';
					font-size     : 0.6cm;
					font-weight   : 900;
				}
				&.active { color : white; }
				&.active::before { content : '\f107'; }
				&.inactive::before { content : '\f105'; }

			}
			h1:hover { cursor : pointer; }
			
			.brewGroup {

				&.grid {
					display:flex;
					flex-wrap: wrap;
					justify-content: center;
					gap:20px;
					min-width:400px;
				}
			

				&.list {
					display        : flex;
					flex-direction : column;
					gap            : 2px;
				}
				&.card {
					display   : flex;
					flex-wrap : wrap;
					column-gap:40px;
					justify-content: center;
					
					h1 { position : absolute; }
				}
			}
		}
		
	}
	.sort-container {
		position              : sticky;
		top                   : 0;
		left                  : 0;
		z-index               : 1;
		display               : flex;
		flex-wrap             : wrap;
		row-gap               : 5px;
		column-gap            : 15px;
		align-items           : baseline;
		justify-content       : center;
		width                 : 100%;
		height                : 30px;
		font-family           : 'Open Sans', sans-serif;
		color                 : white;
		text-align            : center;
		background-color      : #555555;
		border-top            : 1px solid #666666;
		border-bottom         : 1px solid #666666;
		h6 {
			font-family    : 'Open Sans', sans-serif;
			font-size      : 11px;
			font-weight    : bold;
			text-transform : uppercase;
		}
		.sort-option {
			display     : flex;
			align-items : center;
			height      : 100%;
			padding     : 0 8px;
			color       : #CCCCCC;

			&:hover { background-color : #444444; }

			&.active {
				font-weight      : bold;
				color            : #DDDDDD;
				background-color : #333333;

				button {
					height      : 100%;
					font-weight : 800;
					color       : white;
					& + .sortDir { padding-left : 5px; }
				}
			}

		}
		.filter-option {
			margin-left      : 20px;
			font-size        : 11px;
			background-color : transparent !important;
			i { padding-right : 5px; }
		}
		button {
			padding          : 0;
			font-family      : 'Open Sans', sans-serif;
			font-size        : 11px;
			font-weight      : normal;
			color            : #CCCCCC;
			text-transform   : uppercase;
			background-color : transparent;
		}


	}
	.tags-container {
		display            : flex;
		flex-wrap          : wrap;
		row-gap            : 5px;
		column-gap         : 15px;
		align-items        : center;
		justify-content    : center;
		height             : 30px;
		color              : white;
		background-color   : #555555;
		border-top         : 1px solid #666666;
		border-bottom      : 1px solid #666666;
		span {
			padding        : 3px;
			font-family    : 'Open Sans', sans-serif;
			font-size      : 11px;
			font-weight    : bold;
			color          : #DFDFDF;
			cursor         : pointer;
			border         : 1px solid;
			border-radius  : 3px;
			&::before {
				margin-right : 3px;
				font-family  : 'Font Awesome 6 Free';
				font-size    : 12px;
			}
			&::after {
				margin-left : 3px;
				font-family : 'Font Awesome 6 Free';
				font-size   : 12px;
				content     : '\f00d';
			}
			&.type {
				background-color : #008000;
				border-color     : #00A000;
				&::before { content : '\f0ad'; }
			}
			&.group {
				background-color : #505050;
				border-color     : #000000;
				&::before { content : '\f500'; }
			}
			&.meta {
				background-color : #000080;
				border-color     : #0000A0;
				&::before { content : '\f05a'; }
			}
			&.system {
				background-color : #800000;
				border-color     : #A00000;
				&::before { content : '\f518'; }
			}
		}
	}
	.layout-container {
		position              : sticky;
		top                   : 0;
		left                  : 0;
		z-index               : 1;
		display               : flex;
		flex-wrap             : wrap;
		row-gap               : 5px;
		column-gap            : 15px;
		align-items           : center;
		justify-content       : center;
		width                 : 100%;
		height                : 30px;
		font-family           : 'Open Sans', sans-serif;
		color                 : white;
		text-align            : center;
		background-color      : #555555;
		border-top            : 1px solid #666666;
		border-bottom         : 1px solid #666666;

		input[type="radio"] {
			display:none;
		}

		i {
			transition:color 0.2s;
		}

		input:checked + i {
			color:@blue;
		}
	}
}