Sha256: 55a359e20098da2e1e8f37d6cc97aea1301220347a4333f8ca55b27ee895e42a
Contents?: true
Size: 1.7 KB
Versions: 41
Compression:
Stored size: 1.7 KB
Contents
@layer components {
[data-coco][data-component="app-image-picker"] {
.picker-blank-state {
@apply flex flex-col items-center;
}
.picker-placeholder-text {
@apply text-center mb-5;
}
.picker-file-name {
@apply font-semibold truncate text-center mb-5 block;
}
.picker-thumbnail {
@apply w-full;
}
.picker-actions {
@apply flex items-center justify-between;
}
/* Sizes */
&[data-size="sm"] {
@apply app-image-picker-sm;
}
&[data-size="md"] {
@apply app-image-picker-md;
}
@media screen(md) {
&[data-size-md="sm"] {
@apply app-image-picker-sm;
}
&[data-size-md="md"] {
@apply app-image-picker-md;
}
}
@media screen(lg) {
&[data-size-lg="sm"] {
@apply app-image-picker-sm;
}
&[data-size-lg="md"] {
@apply app-image-picker-md;
}
}
@media screen(xl) {
&[data-size-xl="sm"] {
@apply app-image-picker-sm;
}
&[data-size-xl="md"] {
@apply app-image-picker-md;
}
}
}
}
@layer utilities {
.app-image-picker-sm {
@apply p-6;
width: 196px;
&.has-image {
width: 258px;
}
.picker-placeholder-text {
@apply text-para-sm;
width: 148px;
}
.picker-file-name {
@apply text-label-sm;
}
.picker-actions {
@apply pt-6;
}
}
.app-image-picker-md {
@apply p-8;
width: 220px;
&.has-image {
width: 298px;
}
.picker-placeholder-text {
@apply text-para-md;
width: 172px;
}
.picker-file-name {
@apply text-label-md;
}
.picker-actions {
@apply pt-8;
}
}
}
Version data entries
41 entries across 41 versions & 1 rubygems