60 lines
1.0 KiB
CSS
60 lines
1.0 KiB
CSS
/* Separator Component Styles */
|
|
|
|
/* Base separator with default horizontal orientation */
|
|
.separator {
|
|
@apply shrink-0 rounded-sm border-t-0 border-b-0 bg-separator;
|
|
|
|
/* Default size - horizontal orientation */
|
|
@apply h-px w-full;
|
|
}
|
|
|
|
/* Orientation variants */
|
|
.separator--horizontal {
|
|
@apply h-px w-full;
|
|
}
|
|
|
|
.separator--vertical {
|
|
@apply h-auto min-h-2 w-px self-stretch;
|
|
}
|
|
|
|
/* Color variants */
|
|
.separator--default {
|
|
@apply bg-separator;
|
|
}
|
|
|
|
.separator--secondary {
|
|
@apply bg-separator-secondary;
|
|
}
|
|
|
|
.separator--tertiary {
|
|
@apply bg-separator-tertiary;
|
|
}
|
|
|
|
.separator__container {
|
|
@apply flex items-center gap-3;
|
|
}
|
|
|
|
.separator__container--horizontal {
|
|
@apply w-full flex-row;
|
|
}
|
|
|
|
.separator__container--vertical {
|
|
@apply h-full flex-col justify-center;
|
|
}
|
|
|
|
.separator__line {
|
|
@apply shrink-0 grow;
|
|
}
|
|
|
|
.separator__content {
|
|
@apply inline-flex items-center justify-center text-center whitespace-nowrap text-muted;
|
|
}
|
|
|
|
.separator__content--horizontal {
|
|
@apply text-center;
|
|
}
|
|
|
|
.separator__content--vertical {
|
|
@apply text-center;
|
|
}
|