golden hour

/var/www/html/wp-content/plugins/buddypress/bp-groups/sass/blocks

File/Folder	Size	Actions
dynamic-groups.scss	447 B
group.scss	1.94 KB
groups.scss	2.54 KB

Edit: groups.scss

/* CSS for the bp/members block */
[data-type="bp/groups"] {

.components-placeholder {

&.is-appender {
			min-height: 0;

.components-placeholder__label:empty {
				display: none;
			}
		}

input.components-placeholder__input {
			flex: 1 1 auto;
			border-radius: 2px;
			border: 1px solid #757575;
			padding: 6px 8px;
		}
	}

&.avatar-none {

.group-description {
			width: calc(100% - 44px);
		}
	}

&.avatar-full {

.group-description {
			width: calc(100% - 224px);
		}
	}

&.avatar-thumb {

.group-description {
			width: calc(100% - 114px);
		}
	}

.group-content {
		position: relative;

.is-right {
			position: absolute;
			top: 2px;
			right: 2px;
		}
	}

.columns-2,
	.columns-3,
	.columns-4 {

.group-content {

.group-description {
				padding-left: 44px;
				width: calc(100% - 44px);
			}
		}
	}

.columns-3 {

.is-right {
			right: -10px;
		}
	}

.columns-4 {

.is-right {
			right: -50px;
		}
	}
}

.bp-block-groups {

&.is-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 0;

.group-content {
			margin: 0 1.25em 1.25em 0;
			width: 100%;
		}
	}

@media (min-width: 600px) {

@for $i from 2 through 4 {
			&.columns-#{ $i } .group-content {
				width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));

&:nth-child( #{ $i }n ) {
					margin-right: 0;
				}
			}
		}
	}

.group-content {
		display: flex;
		flex-direction: column;
		padding-bottom: 1em;
		text-align: center;

.item-header-avatar,
		.group-description {
			width: 100%;
		}

.item-header-avatar {
			margin: 0 auto;

img.avatar {
				display: inline-block;
			}
		}

@media (min-width: 600px) {
			flex-direction: row;
			text-align: left;

.item-header-avatar,
			.group-description {
				width: auto;
			}

.item-header-avatar {
				margin: 0;
			}
		}

time {
			display: block;
			font-size: 80%;
			color: #767676;
		}
	}

&.avatar-none {

.item-header-avatar {
			display: none;
		}
	}

&.avatar-full {
		min-height: 190px;

.item-header-avatar {
			width: 180px;
		}
	}

&.avatar-thumb {

.group-content {
			min-height: 80px;
		}

.item-header-avatar {
			width: 70px;
		}
	}

&.columns-2 .group-content,
	&.columns-3 .group-content,
	&.columns-4 .group-content {
		display: block;
		text-align: center;

.item-header-avatar {
			margin: 0 auto;
		}
	}

img.avatar {
		width: auto;
		height: auto;
		max-width: fit-content;
	}

.member-content.has-description {
		align-items: center;

.item-header-avatar {
			padding-right: 1em;
		}

.group-description-content {
			margin-bottom: 0;
			text-align: left;
		}
	}
}