mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
166 lines
6.5 KiB
SCSS
166 lines
6.5 KiB
SCSS
// Responsive breakpoint variants
|
|
|
|
// sm: 640px+
|
|
@media (min-width: 640px) {
|
|
.sm\:flex { display: flex }
|
|
.sm\:hidden { display: none }
|
|
.sm\:block { display: block }
|
|
.sm\:inline-flex { display: inline-flex }
|
|
.sm\:grid { display: grid }
|
|
.sm\:flex-row { flex-direction: row }
|
|
.sm\:flex-col { flex-direction: column }
|
|
.sm\:items-center { align-items: center }
|
|
.sm\:justify-between { justify-content: space-between }
|
|
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
|
|
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
|
|
.sm\:gap-4 { gap: 16px }
|
|
.sm\:gap-6 { gap: 24px }
|
|
.sm\:p-4 { padding: 16px }
|
|
.sm\:p-6 { padding: 24px }
|
|
.sm\:px-4 { padding-left: 16px; padding-right: 16px }
|
|
.sm\:px-6 { padding-left: 24px; padding-right: 24px }
|
|
.sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
|
|
.sm\:text-base { font-size: 1rem; line-height: 1.5rem }
|
|
.sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
|
|
.sm\:w-auto { width: auto }
|
|
.sm\:max-w-sm { max-width: 384px }
|
|
.sm\:max-w-md { max-width: 448px }
|
|
.sm\:max-w-lg { max-width: 512px }
|
|
}
|
|
|
|
// md: 768px+
|
|
@media (min-width: 768px) {
|
|
.md\:flex { display: flex }
|
|
.md\:hidden { display: none }
|
|
.md\:block { display: block }
|
|
.md\:inline-flex { display: inline-flex }
|
|
.md\:grid { display: grid }
|
|
.md\:contents { display: contents }
|
|
.md\:flex-row { flex-direction: row }
|
|
.md\:flex-col { flex-direction: column }
|
|
.md\:flex-1 { flex: 1 1 0% }
|
|
.md\:items-center { align-items: center }
|
|
.md\:items-start { align-items: flex-start }
|
|
.md\:justify-between { justify-content: space-between }
|
|
.md\:justify-start { justify-content: flex-start }
|
|
.md\:justify-end { justify-content: flex-end }
|
|
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
|
|
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
|
|
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
|
|
.md\:col-span-2 { grid-column: span 2 / span 2 }
|
|
.md\:col-span-3 { grid-column: span 3 / span 3 }
|
|
.md\:gap-4 { gap: 16px }
|
|
.md\:gap-6 { gap: 24px }
|
|
.md\:gap-8 { gap: 32px }
|
|
.md\:p-4 { padding: 16px }
|
|
.md\:p-6 { padding: 24px }
|
|
.md\:p-8 { padding: 32px }
|
|
.md\:px-4 { padding-left: 16px; padding-right: 16px }
|
|
.md\:px-6 { padding-left: 24px; padding-right: 24px }
|
|
.md\:px-8 { padding-left: 32px; padding-right: 32px }
|
|
.md\:py-4 { padding-top: 16px; padding-bottom: 16px }
|
|
.md\:py-6 { padding-top: 24px; padding-bottom: 24px }
|
|
.md\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
|
|
.md\:text-base { font-size: 1rem; line-height: 1.5rem }
|
|
.md\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
|
|
.md\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
|
|
.md\:text-2xl { font-size: 1.5rem; line-height: 2rem }
|
|
.md\:text-left { text-align: left }
|
|
.md\:text-center { text-align: center }
|
|
.md\:w-auto { width: auto }
|
|
.md\:w-1\/2 { width: 50% }
|
|
.md\:w-1\/3 { width: 33.333333% }
|
|
.md\:w-2\/3 { width: 66.666667% }
|
|
.md\:max-w-md { max-width: 448px }
|
|
.md\:max-w-lg { max-width: 512px }
|
|
.md\:max-w-xl { max-width: 576px }
|
|
.md\:max-w-2xl { max-width: 672px }
|
|
.md\:space-y-0 > :not(:first-child) { margin-top: 0 }
|
|
.md\:space-x-4 > :not(:first-child) { margin-left: 16px }
|
|
.md\:space-x-6 > :not(:first-child) { margin-left: 24px }
|
|
.md\:sticky { position: sticky }
|
|
.md\:top-0 { top: 0 }
|
|
.md\:overflow-auto { overflow: auto }
|
|
.md\:rounded-lg { border-radius: var(--radius-lg) }
|
|
.md\:border { border: 1px solid var(--border) }
|
|
.md\:shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) }
|
|
}
|
|
|
|
// lg: 1024px+
|
|
@media (min-width: 1024px) {
|
|
.lg\:flex { display: flex }
|
|
.lg\:hidden { display: none }
|
|
.lg\:block { display: block }
|
|
.lg\:inline-flex { display: inline-flex }
|
|
.lg\:grid { display: grid }
|
|
.lg\:flex-row { flex-direction: row }
|
|
.lg\:flex-col { flex-direction: column }
|
|
.lg\:flex-1 { flex: 1 1 0% }
|
|
.lg\:items-center { align-items: center }
|
|
.lg\:justify-between { justify-content: space-between }
|
|
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
|
|
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
|
|
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
|
|
.lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
|
|
.lg\:col-span-2 { grid-column: span 2 / span 2 }
|
|
.lg\:col-span-3 { grid-column: span 3 / span 3 }
|
|
.lg\:col-span-4 { grid-column: span 4 / span 4 }
|
|
.lg\:gap-4 { gap: 16px }
|
|
.lg\:gap-6 { gap: 24px }
|
|
.lg\:gap-8 { gap: 32px }
|
|
.lg\:p-6 { padding: 24px }
|
|
.lg\:p-8 { padding: 32px }
|
|
.lg\:px-6 { padding-left: 24px; padding-right: 24px }
|
|
.lg\:px-8 { padding-left: 32px; padding-right: 32px }
|
|
.lg\:py-6 { padding-top: 24px; padding-bottom: 24px }
|
|
.lg\:py-8 { padding-top: 32px; padding-bottom: 32px }
|
|
.lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
|
|
.lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
|
|
.lg\:text-2xl { font-size: 1.5rem; line-height: 2rem }
|
|
.lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
|
|
.lg\:w-auto { width: auto }
|
|
.lg\:w-1\/3 { width: 33.333333% }
|
|
.lg\:w-1\/4 { width: 25% }
|
|
.lg\:max-w-lg { max-width: 512px }
|
|
.lg\:max-w-xl { max-width: 576px }
|
|
.lg\:max-w-4xl { max-width: 896px }
|
|
.lg\:sticky { position: sticky }
|
|
.lg\:top-0 { top: 0 }
|
|
}
|
|
|
|
// xl: 1280px+
|
|
@media (min-width: 1280px) {
|
|
.xl\:flex { display: flex }
|
|
.xl\:hidden { display: none }
|
|
.xl\:block { display: block }
|
|
.xl\:grid { display: grid }
|
|
.xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
|
|
.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
|
|
.xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
|
|
.xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
|
|
.xl\:gap-6 { gap: 24px }
|
|
.xl\:gap-8 { gap: 32px }
|
|
.xl\:p-8 { padding: 32px }
|
|
.xl\:px-8 { padding-left: 32px; padding-right: 32px }
|
|
.xl\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
|
|
.xl\:text-2xl { font-size: 1.5rem; line-height: 2rem }
|
|
.xl\:max-w-6xl { max-width: 1152px }
|
|
.xl\:max-w-7xl { max-width: 1280px }
|
|
}
|
|
|
|
// 2xl: 1536px+
|
|
@media (min-width: 1536px) {
|
|
.\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
|
|
.\32xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
|
|
.\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
|
|
.\32xl\:gap-8 { gap: 32px }
|
|
.\32xl\:p-8 { padding: 32px }
|
|
.\32xl\:max-w-7xl { max-width: 1280px }
|
|
}
|
|
|
|
// Print
|
|
@media print {
|
|
.print\:hidden { display: none }
|
|
.print\:block { display: block }
|
|
}
|