375 lines
11 KiB
CSS
375 lines
11 KiB
CSS
* {
|
|
--0-5: 0.124rem;
|
|
--1: 0.25rem;
|
|
--1-5: 0.375rem;
|
|
--2: 0.5rem;
|
|
--2-5: 0.625rem;
|
|
--3: 0.75rem;
|
|
--3-5: 0.875rem;
|
|
--4: 1rem;
|
|
--5: 1.25rem;
|
|
|
|
--red-50: #fef2f2;
|
|
--red-100: #fee2e2;
|
|
--red-200: #fecaca;
|
|
--red-300: #fca5a5;
|
|
--red-400: #f87171;
|
|
--red-500: #ef4444;
|
|
--red-600: #dc2626;
|
|
--red-700: #b91c1c;
|
|
--red-800: #991b1b;
|
|
--red-900: #7f1d1d;
|
|
--red-950: #450a0a;
|
|
--red: var(--red-400);
|
|
|
|
/*
|
|
All "top level" variables have to be reset before they are used. This prevents
|
|
from values of top elements affecting children elements, without this, all children
|
|
elements would have padding added if their parents has.
|
|
|
|
Since inline-styles have priority, when we specify --p on the html, this ends
|
|
up being overridden for the element, but not it's children.
|
|
*/
|
|
--p: initial;
|
|
--text: initial;
|
|
|
|
color: var(--text);
|
|
}
|
|
|
|
/*
|
|
--------------------------------------------------------------------------------
|
|
FLEX
|
|
--------------------------------------------------------------------------------
|
|
*/
|
|
* {
|
|
/*
|
|
Creating something like this:
|
|
--display: initial;
|
|
display(--display);
|
|
|
|
Does not work, since it ends up making all elements inline (initial "display"'s
|
|
value). To make this work, it would be needed to "emulate" each elements default
|
|
value provided by browsers to properly reset "--display":
|
|
|
|
div {
|
|
--display: block;
|
|
}
|
|
span {
|
|
--display: inline;
|
|
}
|
|
|
|
etc. etc.
|
|
|
|
This would explode the size of this CSS file. So a possible "compromise" is just
|
|
using inline-styles normally to change the display property:
|
|
|
|
<div style="display:flex;/>
|
|
|
|
Also, other Tailwind's flex utilities are so simple that just using inline-styles
|
|
is probably better than creating utility variables. Things such as "grow" can be
|
|
easily used without adding too much characters from their Tailwind counterparts.
|
|
|
|
<div class="flex flex-wrap grow"/>
|
|
<div style="display:flex;flex-wrap:wrap;flex-grow:1;"/>
|
|
*/
|
|
|
|
/*
|
|
Flex basis can be similar to text colors and sizes:
|
|
*/
|
|
flex-basis: var(--basis);
|
|
/*
|
|
And then in the HTML just use the already defined sizes:
|
|
<div style="--basis:var(--1);"/>
|
|
*/
|
|
|
|
/*
|
|
The main thing that could be useful is making "alias variables", for example:
|
|
|
|
flex-grow: var(--grow);
|
|
|
|
Just to be able to make inline-styles be responsive and have state variations,
|
|
so things like --sm-grow, --hover-grow, --lg-hover-grow.
|
|
*/
|
|
}
|
|
|
|
/*
|
|
--------------------------------------------------------------------------------
|
|
GRID
|
|
--------------------------------------------------------------------------------
|
|
*/
|
|
* {
|
|
/*
|
|
Similarly to flex elements, "display" should be set directly in the inline style:
|
|
<div style="display:grid;"/>
|
|
|
|
However, compared to flex, it can have a lot more space for pre-defining variables
|
|
that can be useful.
|
|
*/
|
|
|
|
/*
|
|
Grid template columns can just have a variable for the number of columns:
|
|
*/
|
|
--grid-cols: initial;
|
|
grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
|
|
/*
|
|
This ends up being very similar to Tailwind:
|
|
|
|
<div class="grid grid-cols-8"/>
|
|
<div style="display:grid;--grid-cols:8;"/>
|
|
|
|
-------
|
|
P.S: "grid-cols-none" and "grid-cols-subgrid" can be just placed directly in inline-styles,
|
|
they seem to be very rarely used nonetheless.
|
|
*/
|
|
|
|
/*
|
|
Other utilities follow a similar path.
|
|
*/
|
|
|
|
/* Grid Column Start / End */
|
|
--col-span: initial;
|
|
grid-column: span var(--col-span) / span var(--col-span);
|
|
|
|
/* Grid Template Rows */
|
|
--grid-rows: initial;
|
|
grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
|
|
|
|
/* Grid Row Start / End */
|
|
--row-span: initial;
|
|
grid-row: span var(--row-span) / span var(--row-span);
|
|
|
|
/* Grid Auto Flow */
|
|
--grid-flow: initial;
|
|
grid-auto-flow: var(--grid-flow);
|
|
/*
|
|
<div
|
|
style="display:grid;--grid-flow:row"
|
|
class="grid grid-flow-row"
|
|
/>
|
|
<div
|
|
style="display:grid;--grid-flow:column"
|
|
class="grid grid-flow-col"
|
|
/>
|
|
*/
|
|
|
|
/* Grid Auto Columns */
|
|
--auto-cols: initial;
|
|
grid-auto-columns: var(--auto-cols);
|
|
/*
|
|
<div
|
|
style="display:grid;--grid-flow:row;--auto-cols:auto;"
|
|
class="grid grid-flow-row auto-cols-auto"
|
|
/>
|
|
<div
|
|
style="display:grid;--grid-flow:column;--auto-cols:min-content"
|
|
class="grid grid-flow-col auto-cols-min"
|
|
/>
|
|
|
|
----
|
|
This also applies to Grid Auto Rows, just rename "cols" to "rows";
|
|
*/
|
|
|
|
}
|
|
|
|
/*
|
|
--------------------------------------------------------------------------------
|
|
BOX ELEMENTS
|
|
--------------------------------------------------------------------------------
|
|
*/
|
|
* {
|
|
/*
|
|
Since Tailwind has different variations for each axis, we can use the ability
|
|
of var() having a fallback value to prioritize some variables over another.
|
|
*/
|
|
--px: var(--p, initial);
|
|
--py: var(--p, initial);
|
|
--pr: var(--px, initial);
|
|
--pl: var(--px, initial);
|
|
--pt: var(--py, initial);
|
|
--pb: var(--py, initial);
|
|
|
|
padding-top: var(--pt, 0);
|
|
padding-right: var(--pr, 0);
|
|
padding-left: var(--pl, 0);
|
|
padding-bottom: var(--pb, 0);
|
|
|
|
}
|
|
|
|
*:hover {
|
|
/*
|
|
FIX ME: reset all variables to initial state, since parents can affect
|
|
the chain of fallback values
|
|
*/
|
|
--hover-pl: var(--hover-px, var(--hover-p, var(--pl)));
|
|
--hover-pr: var(--hover-px, var(--hover-p, var(--pr)));
|
|
--hover-pt: var(--hover-py, var(--hover-p, var(--pt)));
|
|
--hover-pb: var(--hover-py, var(--hover-p, var(--pb)));
|
|
|
|
padding-top: var(--hover-pt, 0);
|
|
padding-right: var(--hover-pr, 0);
|
|
padding-left: var(--hover-pl, 0);
|
|
padding-bottom: var(--hover-pb, 0);
|
|
|
|
/*
|
|
To "minify" the resulting CSS, we can also write them as following:
|
|
*/
|
|
padding-top: var(--hover-pt, var(--hover-px, var(--hover-p, var(--pt))));
|
|
padding-right: var(--hover-pr, var(--hover-px, var(--hover-p, var(--pr))));
|
|
padding-left: var(--hover-pl, var(--hover-py, var(--hover-p, var(--pl))));
|
|
padding-bottom: var(--hover-pb, var(--hover-py, var(--hover-p, var(--pb))));
|
|
|
|
padding: var(--hover-pt, var(--hover-px, var(--hover-p, var(--pt))))
|
|
/* (comment breaks just to prevent reader's formatters from merging the lines) */
|
|
var(--hover-pr, var(--hover-px, var(--hover-p, var(--pr))))
|
|
/* */
|
|
var(--hover-pl, var(--hover-py, var(--hover-p, var(--pl))))
|
|
/* */
|
|
var(--hover-pb, var(--hover-py, var(--hover-p, var(--pb))))
|
|
/* */
|
|
;
|
|
|
|
padding: var(--hover-pt, var(--hover-px, var(--hover-p, var(--pt)))) var(--hover-pr, var(--hover-px, var(--hover-p, var(--pr)))) var(--hover-pl, var(--hover-py, var(--hover-p, var(--pl)))) var(--hover-pb, var(--hover-py, var(--hover-p, var(--pb))));
|
|
}
|
|
|
|
/*
|
|
--------------------------------------------------------------------------------
|
|
RESPONSIVENESS
|
|
--------------------------------------------------------------------------------
|
|
*/
|
|
@media (min-width: 640px) {
|
|
* {
|
|
--sm-pl: var(--sm-px, var(--sm-p, var(--pl)));
|
|
--sm-pr: var(--sm-px, var(--sm-p, var(--pr)));
|
|
--sm-pt: var(--sm-py, var(--sm-p, var(--pt)));
|
|
--sm-pb: var(--sm-py, var(--sm-p, var(--pb)));
|
|
|
|
padding-top: var(--sm-pt, 0);
|
|
padding-right: var(--sm-pr, 0);
|
|
padding-left: var(--sm-pl, 0);
|
|
padding-bottom: var(--sm-pb, 0);
|
|
}
|
|
|
|
*:hover {
|
|
--sm-hover-pl: var(--sm-hover-px, var(--sm-hover-p, var(--hover-pl)));
|
|
--sm-hover-pr: var(--sm-hover-px, var(--sm-hover-p, var(--hover-pr)));
|
|
--sm-hover-pt: var(--sm-hover-py, var(--sm-hover-p, var(--hover-pt)));
|
|
--sm-hover-pb: var(--sm-hover-py, var(--sm-hover-p, var(--hover-pb)));
|
|
|
|
padding-top: var(--sm-hover-pt, 0);
|
|
padding-right: var(--sm-hover-pr, 0);
|
|
padding-left: var(--sm-hover-pl, 0);
|
|
padding-bottom: var(--sm-hover-pb, 0);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
* {
|
|
/*
|
|
Since values from the previous width size can be still be active, we have
|
|
to propagate them upwards the chain. We use again var() fallback value so
|
|
you can still specify a value just for this breakpoint.
|
|
|
|
We pretty much have to almost "simulate the browser's priorities".
|
|
*/
|
|
--md-pl: var(--md-px, var(--md-p, var(--sm-pl)));
|
|
--md-pr: var(--md-px, var(--md-p, var(--sm-pr)));
|
|
--md-pt: var(--md-py, var(--md-p, var(--sm-pt)));
|
|
--md-pb: var(--md-py, var(--md-p, var(--sm-pb)));
|
|
|
|
padding-top: var(--md-pt, 0);
|
|
padding-right: var(--md-pr, 0);
|
|
padding-left: var(--md-pl, 0);
|
|
padding-bottom: var(--md-pb, 0);
|
|
}
|
|
|
|
*:hover {
|
|
--md-hover-pl: var(--md-hover-px, var(--md-hover-p, var(--sm-hover-pl)));
|
|
--md-hover-pr: var(--md-hover-px, var(--md-hover-p, var(--sm-hover-pr)));
|
|
--md-hover-pt: var(--md-hover-py, var(--md-hover-p, var(--sm-hover-pt)));
|
|
--md-hover-pb: var(--md-hover-py, var(--md-hover-p, var(--sm-hover-pb)));
|
|
|
|
padding-top: var(--md-hover-pt, 0);
|
|
padding-right: var(--md-hover-pr, 0);
|
|
padding-left: var(--md-hover-pl, 0);
|
|
padding-bottom: var(--md-hover-pb, 0);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
* {
|
|
--lg-pl: var(--lg-px, var(--lg-p, var(--md-pl)));
|
|
--lg-pr: var(--lg-px, var(--lg-p, var(--md-pr)));
|
|
--lg-pt: var(--lg-py, var(--lg-p, var(--md-pt)));
|
|
--lg-pb: var(--lg-py, var(--lg-p, var(--md-pb)));
|
|
|
|
padding-top: var(--lg-pt, 0);
|
|
padding-right: var(--lg-pr, 0);
|
|
padding-left: var(--lg-pl, 0);
|
|
padding-bottom: var(--lg-pb, 0);
|
|
}
|
|
|
|
*:hover {
|
|
--lg-hover-pl: var(--lg-hover-px, var(--lg-hover-p, var(--md-hover-pl)));
|
|
--lg-hover-pr: var(--lg-hover-px, var(--lg-hover-p, var(--md-hover-pr)));
|
|
--lg-hover-pt: var(--lg-hover-py, var(--lg-hover-p, var(--md-hover-pt)));
|
|
--lg-hover-pb: var(--lg-hover-py, var(--lg-hover-p, var(--md-hover-pb)));
|
|
|
|
padding-top: var(--lg-hover-pt, 0);
|
|
padding-right: var(--lg-hover-pr, 0);
|
|
padding-left: var(--lg-hover-pl, 0);
|
|
padding-bottom: var(--lg-hover-pb, 0);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
* {
|
|
--xl-pl: var(--xl-px, var(--xl-p, var(--lg-pl)));
|
|
--xl-pr: var(--xl-px, var(--xl-p, var(--lg-pr)));
|
|
--xl-pt: var(--xl-py, var(--xl-p, var(--lg-pt)));
|
|
--xl-pb: var(--xl-py, var(--xl-p, var(--lg-pb)));
|
|
|
|
padding-top: var(--xl-pt, 0);
|
|
padding-right: var(--xl-pr, 0);
|
|
padding-left: var(--xl-pl, 0);
|
|
padding-bottom: var(--xl-pb, 0);
|
|
}
|
|
|
|
*:hover {
|
|
--xl-hover-pl: var(--xl-hover-px, var(--xl-hover-p, var(--lg-hover-pl)));
|
|
--xl-hover-pr: var(--xl-hover-px, var(--xl-hover-p, var(--lg-hover-pr)));
|
|
--xl-hover-pt: var(--xl-hover-py, var(--xl-hover-p, var(--lg-hover-pt)));
|
|
--xl-hover-pb: var(--xl-hover-py, var(--xl-hover-p, var(--lg-hover-pb)));
|
|
|
|
padding-top: var(--xl-hover-pt, 0);
|
|
padding-right: var(--xl-hover-pr, 0);
|
|
padding-left: var(--xl-hover-pl, 0);
|
|
padding-bottom: var(--xl-hover-pb, 0);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1536px) {
|
|
* {
|
|
--2xl-pl: var(--2xl-px, var(--2xl-p, var(--xl-pl)));
|
|
--2xl-pr: var(--2xl-px, var(--2xl-p, var(--xl-pr)));
|
|
--2xl-pt: var(--2xl-py, var(--2xl-p, var(--xl-pt)));
|
|
--2xl-pb: var(--2xl-py, var(--2xl-p, var(--xl-pb)));
|
|
|
|
padding-top: var(--2xl-pt, 0);
|
|
padding-right: var(--2xl-pr, 0);
|
|
padding-left: var(--2xl-pl, 0);
|
|
padding-bottom: var(--2xl-pb, 0);
|
|
}
|
|
|
|
*:hover {
|
|
--2xl-hover-pl: var(--2xl-hover-px, var(--2xl-hover-p, var(--xl-hover-pl)));
|
|
--2xl-hover-pr: var(--2xl-hover-px, var(--2xl-hover-p, var(--xl-hover-pr)));
|
|
--2xl-hover-pt: var(--2xl-hover-py, var(--2xl-hover-p, var(--xl-hover-pt)));
|
|
--2xl-hover-pb: var(--2xl-hover-py, var(--2xl-hover-p, var(--xl-hover-pb)));
|
|
|
|
padding-top: var(--2xl-hover-pt, 0);
|
|
padding-right: var(--2xl-hover-pr, 0);
|
|
padding-left: var(--2xl-hover-pl, 0);
|
|
padding-bottom: var(--2xl-hover-pb, 0);
|
|
}
|
|
}
|