Fix flexbox view when there are three items

This commit is contained in:
Dane Everitt 2018-10-14 13:17:37 -07:00
parent aee42df3ad
commit 8fd0e5ff57
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 62 additions and 42 deletions

View file

@ -52,21 +52,37 @@ code {
/**
* Flex boxes for server listing on user dashboard.
*/
.server-card {
@apply .block .no-underline .shadow;
.server-card-container {
@apply .mb-4;
@screen smx {
@apply .w-full;
}
@screen md {
@apply .w-1/3 .mr-4;
@apply .w-1/2 .pr-4;
&:nth-of-type(3n) {
@apply .mr-0;
&:nth-of-type(2n) {
@apply .pr-0;
}
}
@screen lg {
@apply .w-1/3 .pr-4;
&:nth-of-type(2n) {
@apply .pr-4;
}
&:nth-of-type(3n) {
@apply .pr-0;
}
}
}
.server-card {
@apply .block .no-underline .shadow;
& .identifier-icon {
@apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
}