Fix flexbox view when there are three items
This commit is contained in:
parent
aee42df3ad
commit
8fd0e5ff57
5 changed files with 62 additions and 42 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Reference in a new issue