Adds variables and relative based calc to coords module

This commit is contained in:
mrmrs 2023-07-12 13:22:14 -07:00
parent ea84b27cab
commit 3e3978aa12

View File

@ -30,25 +30,25 @@
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.bottom-1 { bottom: 1rem; }
.left-1 { left: 1rem; }
.top-1 { top: var(--size, 1rem); }
.right-1 { right: var(--size, 1rem); }
.bottom-1 { bottom: var(--size, 1rem); }
.left-1 { left: var(--size, 1rem); }
.top-2 { top: 2rem; }
.right-2 { right: 2rem; }
.bottom-2 { bottom: 2rem; }
.left-2 { left: 2rem; }
.top-2 { top: calc(var(--size, 1rem) * 2); }
.right-2 { right: calc(var(--size, 1rem) * 2); }
.bottom-2 { bottom: calc(var(--size, 1rem) * 2); }
.left-2 { left: calc(var(--size, 1rem) * 2); }
.top--1 { top: -1rem; }
.right--1 { right: -1rem; }
.bottom--1 { bottom: -1rem; }
.left--1 { left: -1rem; }
.top--1 { top: calc(var(--size, 1rem) * -1); }
.right--1 { right: calc(var(--size, 1rem) * -1); }
.bottom--1 { bottom: calc(var(--size, 1rem) * -1); }
.left--1 { left: calc(var(--size, 1rem) * -1); }
.top--2 { top: -2rem; }
.right--2 { right: -2rem; }
.bottom--2 { bottom: -2rem; }
.left--2 { left: -2rem; }
.top--2 { top: calc(var(--size, 1rem) * -2); }
.right--2 { right: calc(var(--size, 1rem) * -2); }
.bottom--2 { bottom: calc(var(--size, 1rem) * -2); }
.left--2 { left: calc(var(--size, 1rem) * -2); }
.absolute--fill {
@ -63,22 +63,22 @@
.left-0-s { left: 0; }
.right-0-s { right: 0; }
.bottom-0-s { bottom: 0; }
.top-1-s { top: 1rem; }
.left-1-s { left: 1rem; }
.right-1-s { right: 1rem; }
.bottom-1-s { bottom: 1rem; }
.top-2-s { top: 2rem; }
.left-2-s { left: 2rem; }
.right-2-s { right: 2rem; }
.bottom-2-s { bottom: 2rem; }
.top--1-s { top: -1rem; }
.right--1-s { right: -1rem; }
.bottom--1-s { bottom: -1rem; }
.left--1-s { left: -1rem; }
.top--2-s { top: -2rem; }
.right--2-s { right: -2rem; }
.bottom--2-s { bottom: -2rem; }
.left--2-s { left: -2rem; }
.top-1-s { top: var(--size, 1rem); }
.left-1-s { left: var(--size, 1rem); }
.right-1-s { right: var(--size, 1rem); }
.bottom-1-s { bottom: var(--size, 1rem); }
.top-2-s { top: calc(var(--size, 1rem) * 2); }
.left-2-s { left: calc(var(--size, 1rem) * 2); }
.right-2-s { right: calc(var(--size, 1rem) * 2); }
.bottom-2-s { bottom: calc(var(--size, 1rem) * 2); }
.top--1-s { top: calc(var(--size, 1rem) * -1); }
.right--1-s { right: calc(var(--size, 1rem) * -1); }
.bottom--1-s { bottom: calc(var(--size, 1rem) * -1); }
.left--1-s { left: calc(var(--size, 1rem) * -1); }
.top--2-s { top: calc(var(--size, 1rem) * -2); }
.right--2-s { right: calc(var(--size, 1rem) * -2); }
.bottom--2-s { bottom: calc(var(--size, 1rem) * -2); }
.left--2-s { left: calc(var(--size, 1rem) * -2); }
.absolute--fill-s {
top: 0;
right: 0;
@ -92,22 +92,22 @@
.left-0-m { left: 0; }
.right-0-m { right: 0; }
.bottom-0-m { bottom: 0; }
.top-1-m { top: 1rem; }
.left-1-m { left: 1rem; }
.right-1-m { right: 1rem; }
.bottom-1-m { bottom: 1rem; }
.top-2-m { top: 2rem; }
.left-2-m { left: 2rem; }
.right-2-m { right: 2rem; }
.bottom-2-m { bottom: 2rem; }
.top--1-m { top: -1rem; }
.right--1-m { right: -1rem; }
.bottom--1-m { bottom: -1rem; }
.left--1-m { left: -1rem; }
.top--2-m { top: -2rem; }
.right--2-m { right: -2rem; }
.bottom--2-m { bottom: -2rem; }
.left--2-m { left: -2rem; }
.top-1-m { top: var(--size, 1rem); }
.left-1-m { left: var(--size, 1rem); }
.right-1-m { right: var(--size, 1rem); }
.bottom-1-m { bottom: var(--size, 1rem); }
.top-2-m { top: calc(var(--size, 1rem) * 2); }
.left-2-m { left: calc(var(--size, 1rem) * 2); }
.right-2-m { right: calc(var(--size, 1rem) * 2); }
.bottom-2-m { bottom: calc(var(--size, 1rem) * 2); }
.top--1-m { top: calc(var(--size, 1rem) * -1); }
.right--1-m { right: calc(var(--size, 1rem) * -1); }
.bottom--1-m { bottom: calc(var(--size, 1rem) * -1); }
.left--1-m { left: calc(var(--size, 1rem) * -1); }
.top--2-m { top: calc(var(--size, 1rem) * -2); }
.right--2-m { right: calc(var(--size, 1rem) * -2); }
.bottom--2-m { bottom: calc(var(--size, 1rem) * -2); }
.left--2-m { left: calc(var(--size, 1rem) * -2); }
.absolute--fill-m {
top: 0;
right: 0;
@ -121,22 +121,22 @@
.left-0-l { left: 0; }
.right-0-l { right: 0; }
.bottom-0-l { bottom: 0; }
.top-1-l { top: 1rem; }
.left-1-l { left: 1rem; }
.right-1-l { right: 1rem; }
.bottom-1-l { bottom: 1rem; }
.top-2-l { top: 2rem; }
.left-2-l { left: 2rem; }
.right-2-l { right: 2rem; }
.bottom-2-l { bottom: 2rem; }
.top--1-l { top: -1rem; }
.right--1-l { right: -1rem; }
.bottom--1-l { bottom: -1rem; }
.left--1-l { left: -1rem; }
.top--2-l { top: -2rem; }
.right--2-l { right: -2rem; }
.bottom--2-l { bottom: -2rem; }
.left--2-l { left: -2rem; }
.top-1-l { top: var(--size, 1rem); }
.left-1-l { left: var(--size, 1rem); }
.right-1-l { right: var(--size, 1rem); }
.bottom-1-l { bottom: var(--size, 1rem); }
.top-2-l { top: calc(var(--size, 1rem) * 2); }
.left-2-l { left: calc(var(--size, 1rem) * 2); }
.right-2-l { right: calc(var(--size, 1rem) * 2); }
.bottom-2-l { bottom: calc(var(--size, 1rem) * 2); }
.top--1-l { top: calc(var(--size, 1rem) * -1); }
.right--1-l { right: calc(var(--size, 1rem) * -1); }
.bottom--1-l { bottom: calc(var(--size, 1rem) * -1); }
.left--1-l { left: calc(var(--size, 1rem) * -1); }
.top--2-l { top: calc(var(--size, 1rem) * -2); }
.right--2-l { right: calc(var(--size, 1rem) * -2); }
.bottom--2-l { bottom: calc(var(--size, 1rem) * -2); }
.left--2-l { left: calc(var(--size, 1rem) * -2); }
.absolute--fill-l {
top: 0;
right: 0;