@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
555 lines (534 loc) • 10.3 kB
CSS
/* * * * * * * * * * * * * * * * * * * */
/* */
/* 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);
}
}