Sha256: a0fa4db1fc814b646930d24e64be48b359d68aae8819d57adfa3fff3dae31a51
Contents?: true
Size: 1.64 KB
Versions: 25
Compression:
Stored size: 1.64 KB
Contents
@layer components {
[data-coco][data-component="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 image-picker-sm;
}
&[data-size="md"] {
@apply image-picker-md;
}
@media screen(md) {
&[data-size-md="sm"] {
@apply image-picker-sm;
}
&[data-size-md="md"] {
@apply image-picker-md;
}
}
@media screen(lg) {
&[data-size-lg="sm"] {
@apply image-picker-sm;
}
&[data-size-lg="md"] {
@apply image-picker-md;
}
}
@media screen(xl) {
&[data-size-xl="sm"] {
@apply image-picker-sm;
}
&[data-size-xl="md"] {
@apply image-picker-md;
}
}
}
}
@layer utilities {
.image-picker-sm {
@apply p-6;
width: 196px;
&.has-image {
width: 258px;
}
.picker-placeholder-text {
@apply para-sm;
width: 148px;
}
.picker-file-name {
@apply label-sm;
}
.picker-actions {
@apply pt-6;
}
}
.image-picker-md {
@apply p-8;
width: 220px;
&.has-image {
width: 298px;
}
.picker-placeholder-text {
@apply para-md;
width: 172px;
}
.picker-file-name {
@apply label-md;
}
.picker-actions {
@apply pt-8;
}
}
}
Version data entries
25 entries across 25 versions & 1 rubygems