.groups-header { display: flex; flex-wrap: wrap; margin-bottom: 1em; .groups-header-new { order: 2; margin-bottom: 0.5em; } } .groups-header-filters { display: flex; flex-wrap: wrap; .groups-header-filters-name, .groups-header-filters-type { margin: 0 0.5em 0.5em 0; } &:last-child { margin-right: auto; } .select-kit-header { height: 100%; } } .groups-boxes { display: grid; grid-gap: 1em; grid-template-columns: repeat(4, 1fr); margin: 1em 0; width: 100%; @include breakpoint("medium") { grid-template-columns: repeat(3, 1fr); } @include breakpoint("mobile-extra-large") { grid-template-columns: repeat(2, 1fr); } .group-box { display: flex; box-sizing: border-box; cursor: pointer; border: 1px solid var(--primary-low); color: var(--primary); .discourse-no-touch & { transition: all 0.25s; &:hover { box-shadow: shadow("card"); } } .group-membership { color: var(--primary-medium); margin-top: auto; padding-top: 1em; .is-group-owner, .is-group-member { color: var(--success); } } .group-box-inner { padding: 1em; width: 100%; display: flex; flex-direction: column; box-sizing: border-box; min-height: 8em; .group-info-wrapper { align-items: center; display: flex; flex: 0 1 auto; margin-bottom: 0.25em; min-height: 40px; overflow: hidden; .group-avatar-flair { margin-right: 0.5em; } .group-info { flex: 1 1 auto; span { width: 100%; word-break: break-word; line-height: $line-height-medium; } } } .group-user-count { display: flex; align-items: center; color: var(--primary-high); .d-icon { margin-right: 0.25em; font-size: 0.8em; color: var(--primary-medium); } } .group-description { color: var(--primary-high); word-wrap: break-word; } } .groups-info-name { font-size: $font-up-1; font-weight: bold; color: var(--primary); } $size: 40px; $icon-size: $size / 1.8; .group-avatar-flair { display: inline-block; color: var(--primary); .avatar-flair { background-size: $size; height: $size; width: $size; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; .d-icon { height: $icon-size; width: $icon-size; } } } .avatar-flair-image { width: $size; } } } .groups-form { .control-group-inline { display: inline; } &.groups-notifications-form { .control-instructions { color: $primary-medium; margin-bottom: 10px; font-size: $font-down-1; line-height: $line-height-large; } .category-selector, .tag-chooser { width: 100%; } } .groups-form-incoming-email { margin-bottom: 1em; } } .group-manage-logs-controls { button { .d-icon { // flip the icon order for the remove button order: 2; margin: 0 0 0 0.45em; } } }