Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
136 lines
2.5 KiB
CSS
136 lines
2.5 KiB
CSS
/**
|
|
* Grid System - Admin Interface
|
|
*
|
|
* Flexible Grid-System für Content-Layouts.
|
|
*/
|
|
|
|
@layer layout {
|
|
/**
|
|
* Basic Grid
|
|
*/
|
|
.admin-grid {
|
|
display: grid;
|
|
gap: var(--spacing-md);
|
|
|
|
/* Default: 1 column (mobile) */
|
|
grid-template-columns: 1fr;
|
|
|
|
/* Tablet+: Auto-fit with min 250px columns */
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Grid Variants
|
|
*/
|
|
.admin-grid--2-col {
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.admin-grid--3-col {
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.admin-grid--4-col {
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gap Variants
|
|
*/
|
|
.admin-grid--gap-sm {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.admin-grid--gap-lg {
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.admin-grid--gap-xl {
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
/**
|
|
* Sidebar Layout (2-column with sidebar)
|
|
*/
|
|
.admin-grid--sidebar {
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: 300px 1fr;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
}
|
|
|
|
.admin-grid--sidebar-right {
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: 1fr 300px;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Stack
|
|
*
|
|
* Vertical spacing utility.
|
|
*/
|
|
.admin-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.admin-stack--sm {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.admin-stack--lg {
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.admin-stack--xl {
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
/**
|
|
* Cluster
|
|
*
|
|
* Horizontal spacing utility with wrap.
|
|
*/
|
|
.admin-cluster {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-md);
|
|
align-items: center;
|
|
}
|
|
|
|
.admin-cluster--sm {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.admin-cluster--lg {
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.admin-cluster--justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.admin-cluster--justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|