UNPKG

@radix-ui/themes

Version:

[![Radix Themes Logo](https://radix-ui.com/social/themes.png)](https://radix-ui.com/themes)

555 lines (534 loc) 10.3 kB
/* * * * * * * * * * * * * * * * * * * */ /* */ /* All sides */ /* */ /* * * * * * * * * * * * * * * * * * * */ @breakpoints { .rt-r-p { /* Keep this selector here to maintain the source order */ } .rt-r-p-0 { padding: 0; } .rt-r-p-1 { padding: var(--space-1); } .rt-r-p-2 { padding: var(--space-2); } .rt-r-p-3 { padding: var(--space-3); } .rt-r-p-4 { padding: var(--space-4); } .rt-r-p-5 { padding: var(--space-5); } .rt-r-p-6 { padding: var(--space-6); } .rt-r-p-7 { padding: var(--space-7); } .rt-r-p-8 { padding: var(--space-8); } .rt-r-p-9 { padding: var(--space-9); } .rt-r-p-inset { padding-top: var(--inset-padding-top); padding-right: var(--inset-padding-right); padding-bottom: var(--inset-padding-bottom); padding-left: var(--inset-padding-left); } } .rt-r-p { padding: var(--p); } @media (--xs) { .xs\:rt-r-p { padding: var(--p-xs); } } @media (--sm) { .sm\:rt-r-p { padding: var(--p-sm); } } @media (--md) { .md\:rt-r-p { padding: var(--p-md); } } @media (--lg) { .lg\:rt-r-p { padding: var(--p-lg); } } @media (--xl) { .xl\:rt-r-p { padding: var(--p-xl); } } /* * * * * * * * * * * * * * * * * * * */ /* */ /* Left and right */ /* */ /* * * * * * * * * * * * * * * * * * * */ @breakpoints { .rt-r-px { /* Keep this selector here to maintain the source order */ } .rt-r-px-0 { padding-left: 0; padding-right: 0; } .rt-r-px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .rt-r-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .rt-r-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .rt-r-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .rt-r-px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .rt-r-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .rt-r-px-7 { padding-left: var(--space-7); padding-right: var(--space-7); } .rt-r-px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .rt-r-px-9 { padding-left: var(--space-9); padding-right: var(--space-9); } .rt-r-px-inset { padding-left: var(--inset-padding-left); padding-right: var(--inset-padding-right); } } .rt-r-px { padding-left: var(--pl); padding-right: var(--pr); } @media (--xs) { .xs\:rt-r-px { padding-left: var(--pl-xs); padding-right: var(--pr-xs); } } @media (--sm) { .sm\:rt-r-px { padding-left: var(--pl-sm); padding-right: var(--pr-sm); } } @media (--md) { .md\:rt-r-px { padding-left: var(--pl-md); padding-right: var(--pr-md); } } @media (--lg) { .lg\:rt-r-px { padding-left: var(--pl-lg); padding-right: var(--pr-lg); } } @media (--xl) { .xl\:rt-r-px { padding-left: var(--pl-xl); padding-right: var(--pr-xl); } } /* * * * * * * * * * * * * * * * * * * */ /* */ /* Top and bottom */ /* */ /* * * * * * * * * * * * * * * * * * * */ @breakpoints { .rt-r-py { /* Keep this selector here to maintain the source order */ } .rt-r-py-0 { padding-top: 0; padding-bottom: 0; } .rt-r-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .rt-r-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .rt-r-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .rt-r-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .rt-r-py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .rt-r-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .rt-r-py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); } .rt-r-py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .rt-r-py-9 { padding-top: var(--space-9); padding-bottom: var(--space-9); } .rt-r-py-inset { padding-top: var(--inset-padding-top); padding-bottom: var(--inset-padding-bottom); } } .rt-r-py { padding-top: var(--pt); padding-bottom: var(--pb); } @media (--xs) { .xs\:rt-r-py { padding-top: var(--pt-xs); padding-bottom: var(--pb-xs); } } @media (--sm) { .sm\:rt-r-py { padding-top: var(--pt-sm); padding-bottom: var(--pb-sm); } } @media (--md) { .md\:rt-r-py { padding-top: var(--pt-md); padding-bottom: var(--pb-md); } } @media (--lg) { .lg\:rt-r-py { padding-top: var(--pt-lg); padding-bottom: var(--pb-lg); } } @media (--xl) { .xl\:rt-r-py { padding-top: var(--pt-xl); padding-bottom: var(--pb-xl); } } /* * * * * * * * * * * * * * * * * * * */ /* */ /* Top */ /* */ /* * * * * * * * * * * * * * * * * * * */ @breakpoints { .rt-r-pt { /* Keep this selector here to maintain the source order */ } .rt-r-pt-0 { padding-top: 0; } .rt-r-pt-1 { padding-top: var(--space-1); } .rt-r-pt-2 { padding-top: var(--space-2); } .rt-r-pt-3 { padding-top: var(--space-3); } .rt-r-pt-4 { padding-top: var(--space-4); } .rt-r-pt-5 { padding-top: var(--space-5); } .rt-r-pt-6 { padding-top: var(--space-6); } .rt-r-pt-7 { padding-top: var(--space-7); } .rt-r-pt-8 { padding-top: var(--space-8); } .rt-r-pt-9 { padding-top: var(--space-9); } .rt-r-pt-inset { padding-top: var(--inset-padding-top); } } .rt-r-pt { padding-top: var(--pt); } @media (--xs) { .xs\:rt-r-pt { padding-top: var(--pt-xs); } } @media (--sm) { .sm\:rt-r-pt { padding-top: var(--pt-sm); } } @media (--md) { .md\:rt-r-pt { padding-top: var(--pt-md); } } @media (--lg) { .lg\:rt-r-pt { padding-top: var(--pt-lg); } } @media (--xl) { .xl\:rt-r-pt { padding-top: var(--pt-xl); } } /* * * * * * * * * * * * * * * * * * * */ /* */ /* Right */ /* */ /* * * * * * * * * * * * * * * * * * * */ @breakpoints { .rt-r-pr { /* Keep this selector here to maintain the source order */ } .rt-r-pr-0 { padding-right: 0; } .rt-r-pr-1 { padding-right: var(--space-1); } .rt-r-pr-2 { padding-right: var(--space-2); } .rt-r-pr-3 { padding-right: var(--space-3); } .rt-r-pr-4 { padding-right: var(--space-4); } .rt-r-pr-5 { padding-right: var(--space-5); } .rt-r-pr-6 { padding-right: var(--space-6); } .rt-r-pr-7 { padding-right: var(--space-7); } .rt-r-pr-8 { padding-right: var(--space-8); } .rt-r-pr-9 { padding-right: var(--space-9); } .rt-r-pr-inset { padding-right: var(--inset-padding-right); } } .rt-r-pr { padding-right: var(--pr); } @media (--xs) { .xs\:rt-r-pr { padding-right: var(--pr-xs); } } @media (--sm) { .sm\:rt-r-pr { padding-right: var(--pr-sm); } } @media (--md) { .md\:rt-r-pr { padding-right: var(--pr-md); } } @media (--lg) { .lg\:rt-r-pr { padding-right: var(--pr-lg); } } @media (--xl) { .xl\:rt-r-pr { padding-right: var(--pr-xl); } } /* * * * * * * * * * * * * * * * * * * */ /* */ /* Bottom */ /* */ /* * * * * * * * * * * * * * * * * * * */ @breakpoints { .rt-r-pb { /* Keep this selector here to maintain the source order */ } .rt-r-pb-0 { padding-bottom: 0; } .rt-r-pb-1 { padding-bottom: var(--space-1); } .rt-r-pb-2 { padding-bottom: var(--space-2); } .rt-r-pb-3 { padding-bottom: var(--space-3); } .rt-r-pb-4 { padding-bottom: var(--space-4); } .rt-r-pb-5 { padding-bottom: var(--space-5); } .rt-r-pb-6 { padding-bottom: var(--space-6); } .rt-r-pb-7 { padding-bottom: var(--space-7); } .rt-r-pb-8 { padding-bottom: var(--space-8); } .rt-r-pb-9 { padding-bottom: var(--space-9); } .rt-r-pb-inset { padding-bottom: var(--inset-padding-bottom); } } .rt-r-pb { padding-bottom: var(--pb); } @media (--xs) { .xs\:rt-r-pb { padding-bottom: var(--pb-xs); } } @media (--sm) { .sm\:rt-r-pb { padding-bottom: var(--pb-sm); } } @media (--md) { .md\:rt-r-pb { padding-bottom: var(--pb-md); } } @media (--lg) { .lg\:rt-r-pb { padding-bottom: var(--pb-lg); } } @media (--xl) { .xl\:rt-r-pb { padding-bottom: var(--pb-xl); } } /* * * * * * * * * * * * * * * * * * * */ /* */ /* Left */ /* */ /* * * * * * * * * * * * * * * * * * * */ @breakpoints { .rt-r-pl { /* Keep this selector here to maintain the source order */ } .rt-r-pl-0 { padding-left: 0; } .rt-r-pl-1 { padding-left: var(--space-1); } .rt-r-pl-2 { padding-left: var(--space-2); } .rt-r-pl-3 { padding-left: var(--space-3); } .rt-r-pl-4 { padding-left: var(--space-4); } .rt-r-pl-5 { padding-left: var(--space-5); } .rt-r-pl-6 { padding-left: var(--space-6); } .rt-r-pl-7 { padding-left: var(--space-7); } .rt-r-pl-8 { padding-left: var(--space-8); } .rt-r-pl-9 { padding-left: var(--space-9); } .rt-r-pl-inset { padding-left: var(--inset-padding-left); } } .rt-r-pl { padding-left: var(--pl); } @media (--xs) { .xs\:rt-r-pl { padding-left: var(--pl-xs); } } @media (--sm) { .sm\:rt-r-pl { padding-left: var(--pl-sm); } } @media (--md) { .md\:rt-r-pl { padding-left: var(--pl-md); } } @media (--lg) { .lg\:rt-r-pl { padding-left: var(--pl-lg); } } @media (--xl) { .xl\:rt-r-pl { padding-left: var(--pl-xl); } }