mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 09:32:01 +00:00
Revert "V5 final final"
This commit is contained in:
Mark Hadley
GitHub
parent
2486c586dc
commit
d44bce729b
11
README.md
11
README.md
@ -19,16 +19,17 @@ Quickly build and design new UI without writing CSS.
|
||||
## Features
|
||||
|
||||
* Mobile-first CSS architecture
|
||||
* 490 accessible color combinations
|
||||
* 8px baseline grid
|
||||
* Multiple debugging utilities to reduce layout struggles
|
||||
* Single-purpose class structure
|
||||
* Optimized for maximum gzip compression
|
||||
* Lightweight (~19.4kB)
|
||||
* Lightweight (~14kB)
|
||||
* Usable across projects
|
||||
* Growing open source component library
|
||||
* Works well with plain HTML, React, Ember, Angular, Rails Svelte, Vue, and more
|
||||
* Works well with plain HTML, React, Ember, Angular, Rails and more
|
||||
* Infinitely nestable responsive grid system
|
||||
* Works out of the box but easy to customize and extend
|
||||
* Built with PostCSS
|
||||
|
||||
## Getting Started
|
||||
|
||||
@ -127,11 +128,11 @@ And of course...
|
||||
|
||||
Development of Tachyons is supported by
|
||||
|
||||
* [Components AI](https://components.ai)
|
||||
* [Digital Ocean](https://digitalocean.com)
|
||||
* [DWYL](https://dwyl.com)
|
||||
* [VTEX](https://vtex.com)
|
||||
* [Manifold](https://manifold.co)
|
||||
|
||||
## Help
|
||||
|
||||
If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new).
|
||||
If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new) or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).
|
||||
|
||||
6756
css/tachyons.css
6756
css/tachyons.css
File diff suppressed because it is too large
Load Diff
4
css/tachyons.min.css
vendored
4
css/tachyons.min.css
vendored
File diff suppressed because one or more lines are too long
427
index.html
427
index.html
@ -6,433 +6,12 @@
|
||||
<title>
|
||||
|
||||
</title>
|
||||
<meta name="author" content="mrmrs">
|
||||
<meta name="description" content="Tachyons stuff">
|
||||
<meta name="author" content="">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="./css/tachyons.min.css">
|
||||
|
||||
<link rel="stylesheet" href="/css/tachyons.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class='bb flex justify-between items-center'>
|
||||
<a href="#0" class='link br p3 flex gray-0 fw9'>Tachyons</a>
|
||||
<nav class='flex mr3'>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<article class='p3 tc'>
|
||||
<header class='p6'>
|
||||
<article class='f3 dif justify-center g3 items-center gray-3 py2 px3 br9 shadow-border-solid'><p class='my0'>An inline notification that can be centered or not</p><a href="#0" class='link indigo-4 fw7'>Learn more</a></article>
|
||||
<h2 class='tc f8 lh-solid my3 fw9 measure'>The fastest and lightest way to style the web</h2>
|
||||
<p class='measure lh-copy f5 gray-4 center'>
|
||||
Start building with Tachyons today. Use one of many off the shelf themes or bring your own variables to the party.
|
||||
</p>
|
||||
<footer class='flex items-center justify-center g4 mt4'>
|
||||
<a class='f3 fw7 link bg-indigo-5 indigo-11 px3 py3 lh-copy br2' href='#0'>Get started</a>
|
||||
<a class='f3 fw7 link indigo-4' href='#0'>Learn more →</a>
|
||||
</footer>
|
||||
</header>
|
||||
</article>
|
||||
<article class='grid g3 p3 cols-3'>
|
||||
<a href="#0" class='db link gray-0 overflow-hidden br4 shadow shadow-hover'>
|
||||
<img src='https://mrmrs.github.io/photos/u/049.jpg' />
|
||||
<section class='p4'>
|
||||
<h4 class='f6 fw9 my2'>Card title example</h4>
|
||||
<p class='gray-5 lh-copy'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</section>
|
||||
</a>
|
||||
<a href="#0" class='db link gray-0 br4 overflow-hidden shadow shadow-hover'>
|
||||
<img src='https://mrmrs.github.io/photos/v/044.jpg' />
|
||||
<section class='p4'>
|
||||
<h4 class='f6 fw9 my2'>Card title example</h4>
|
||||
<p class='gray-5 lh-copy'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</section>
|
||||
</a>
|
||||
<a href="#0" class='db link gray-0 br4 overflow-hidden shadow shadow-hover'>
|
||||
|
||||
<img src='https://mrmrs.github.io/photos/u/053.jpg' />
|
||||
<section class='p4'>
|
||||
<h4 class='f6 fw9 my2'>Card title example</h4>
|
||||
<p class='gray-5 lh-copy'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</section>
|
||||
</a>
|
||||
</article>
|
||||
<article class='flex g5 m4'>
|
||||
<dl class='flex flex-column-reverse'>
|
||||
<dt class='gray-4'>A definition term</dt>
|
||||
<dd class='m0 f7 fw7'>Description</dd>
|
||||
</dl>
|
||||
<dl class='flex flex-column-reverse'>
|
||||
<dt class='gray-4'>GitHub Stars</dt>
|
||||
<dd class='m0 f7 fw7'>11.4k+</dd>
|
||||
</dl>
|
||||
<dl class='flex flex-column-reverse'>
|
||||
<dt class='gray-4'>File Size</dt>
|
||||
<dd class='m0 f7 fw7'>24kb</dd>
|
||||
</dl>
|
||||
<dl class='flex flex-column-reverse'>
|
||||
<dt class='gray-4'>Amazing Colors</dt>
|
||||
<dd class='m0 f7 fw7'>144</dd>
|
||||
</dl>
|
||||
<dl class='flex flex-column-reverse'>
|
||||
<dt class='gray-4'>Configurability</dt>
|
||||
<dd class='m0 f7 fw7'>100%</dd>
|
||||
</dl>
|
||||
<dl class='flex flex-column-reverse'>
|
||||
<dt class='gray-4'>Possible designs</dt>
|
||||
<dd class='m0 f7 fw7'>Inifinite</dd>
|
||||
</dl>
|
||||
</article>
|
||||
<article class='p3'>
|
||||
<article class='f2 flex items-center indigo-4 bg-indigo-11 py3 px3 br9 shadow-border-solid'><p class='mx2 my0'>An alert banner for a new feature or notification</p><a href="#0" class='link indigo-4 fw7'>Learn more</a></article>
|
||||
</article>
|
||||
<article class='grid cols-3 g3 p3'>
|
||||
<article class='shadow bg-blue-4 blue-11 p4 br4 flex g5 items-center justify-between'>
|
||||
<div>
|
||||
<h3 class='f6 fw9 my2'>This is a banner title</h3>
|
||||
<p class='f3 lh-copy measure indigo-9'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
</div>
|
||||
<a href="#0" class='f2 link indigo-11 px4 py3 ba br3 nowrap'>Click here</a>
|
||||
</article>
|
||||
<article class='shadow gradient-1 violet-11 p4 br4 flex g5 items-center justify-between' style='--gradient-color-1: var(--blue-0); --gradient-color-2: var(--violet-4)'>
|
||||
<div>
|
||||
<h3 class='f6 fw9 my2'>This is a banner title</h3>
|
||||
<p class='f3 lh-copy measure violet-9'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
</div>
|
||||
<a href="#0" class='f2 link indigo-11 px4 py3 ba br3 nowrap'>Click here</a>
|
||||
</article>
|
||||
<article style='--gradient-color-1: var(--blue-10); --gradient-color-2: var(--magenta-11)' class='shadow gradient-1 indigo-3 p4 br4 flex g5 items-center justify-between'>
|
||||
<div>
|
||||
<h3 class='f6 fw9 my2'>This is a banner title</h3>
|
||||
<p class='f3 lh-copy measure indigo-4'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
</div>
|
||||
<a href="#0" class='f2 link indigo-3 px4 py3 ba br3 nowrap'>Click here</a>
|
||||
</article>
|
||||
</article>
|
||||
<article class='p3'>
|
||||
<article style='--gradient-degree: 180deg; --gradient-color-1: var(--blue-0); --gradient-color-2: var(--violet-4);' class='shadow gradient-1 indigo-11 py6 br5 items-center justify-between'>
|
||||
<h3 class='f7 fw9 my2 tc'>CSS Variables are the future</h3>
|
||||
<p class='fw4 f5 lh-copy measure-narrow tc center'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
|
||||
</p>
|
||||
<div class='tc mt4'>
|
||||
<a href="#0" class='f3 fw7 link lh-copy bg-indigo-11 px3 py2 ba br3 nowrap'>Click here</a>
|
||||
<a href="#0" class='f3 fw7 link lh-copy indigo-11 px3 py2 br3 nowrap'>Learn more →</a>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
<article class='p3'>
|
||||
<article class='grid cols-2'>
|
||||
<div style='background: url(https://mrmrs.github.io/photos/u/035.jpg);' class='br4 aspect-ratio-16x9'>
|
||||
|
||||
</div>
|
||||
<div class='bg-white pl5 flex flex-column justify-center'>
|
||||
<h3 class='f7 fw9 mt0 mb3'>A large section panel title</h3>
|
||||
<p class='measure lh-copy'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<div class='mt4'>
|
||||
<a href="#0" class='f3 fw7 link lh-copy indigo-0 px3 py2 ba br3 nowrap'>Click here</a>
|
||||
<a href="#0" class='f3 fw7 link lh-copy indigo-0 px3 py2 br3 nowrap'>Learn more →</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</main>
|
||||
<section>
|
||||
<article class='flex items-center g3 p3'>
|
||||
<img src='https://dc28c2r6oodom.cloudfront.net/avatars/11.jpg' class='br10 db aspect--1x1 w4' />
|
||||
<img src='https://dc28c2r6oodom.cloudfront.net/avatars/11.jpg' class='br10 db aspect--1x1 w3' />
|
||||
<img src='https://dc28c2r6oodom.cloudfront.net/avatars/11.jpg' class='br10 db aspect--1x1 w2' />
|
||||
</article>
|
||||
<article class='grid g3 p3'>
|
||||
<label>
|
||||
<span class='db'>Label</span>
|
||||
<input type='text' />
|
||||
</label>
|
||||
<label>
|
||||
<span class='db'>Password</span>
|
||||
<input type='password' />
|
||||
</label>
|
||||
</article>
|
||||
</section>
|
||||
<section class='grid cols-6 g4 m4' style='display: none;'>
|
||||
<h4 class='m0 col-6'>Box Shadows</h4>
|
||||
<div class='br4 p6 shadow-6'></div>
|
||||
<div class='br4 p6 shadow-2'></div>
|
||||
<div class='br4 p6 shadow-3'></div>
|
||||
<div class='br4 p6 shadow-4'></div>
|
||||
<div class='br4 p6 shadow-5'></div>
|
||||
<div class='br4 p6 shadow-6'></div>
|
||||
<div class='br4 p6 shadow-7'></div>
|
||||
<div class='br4 p6 shadow-8'></div>
|
||||
<div class='br4 p6 shadow-9'></div>
|
||||
<div class='br4 p6 shadow-60'></div>
|
||||
<div class='br4 p6 shadow-61'></div>
|
||||
<div class='br4 p6 shadow-62'></div>
|
||||
</section>
|
||||
<section class='grid cols-6 g4 m4' style='display: none;'>
|
||||
<h4 class='m0 col-6'>Gradients</h4>
|
||||
<div class='br4 p6 gradient-1'></div>
|
||||
<div class='br4 p6 gradient-2'></div>
|
||||
<div style='--gradient-degree: 0' class='br4 p6 gradient-3'></div>
|
||||
<div class='br4 p6 gradient-4'></div>
|
||||
<div class='br4 p6 gradient-5'></div>
|
||||
<div class='br4 p6 gradient-6'></div>
|
||||
<div class='br4 p6 gradient-7'></div>
|
||||
<div class='br4 p6 gradient-8'></div>
|
||||
<div class='br4 p6 gradient-9'></div>
|
||||
<div class='br4 p6 gradient-10'></div>
|
||||
<div class='br4 p6 gradient-11'></div>
|
||||
<div class='br4 p6 gradient-12'></div>
|
||||
<div class='br4 p6 gradient-13'></div>
|
||||
<div class='br4 p6 gradient-14'></div>
|
||||
<div class='br4 p6 gradient-15'></div>
|
||||
<div class='br4 p6 gradient-16'></div>
|
||||
</section>
|
||||
<section class='flex flex-wrap g3 px3 py4'>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-green-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-green-11 h1 w1 p2 br10'></div>
|
||||
</article><article class='flex g1'>
|
||||
<div class='bg-teal-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-teal-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-cyan-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-cyan-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
|
||||
<article class='flex g1'>
|
||||
<div class='bg-blue-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-blue-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-indigo-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-indigo-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-violet-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-violet-11 h1 w1 p2 br10'></div>
|
||||
</article><article class='flex g1'>
|
||||
<div class='bg-magenta-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-magenta-11 h1 w1 p2 br10'></div>
|
||||
</article><article class='flex g1'>
|
||||
<div class='bg-red-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-11 h1 w1 p2 br10'></div>
|
||||
</article><article class='flex g1'>
|
||||
<div class='bg-red-orange-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-red-orange-11 h1 w1 p2 br10'></div>
|
||||
</article><article class='flex g1'>
|
||||
<div class='bg-orange-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-orange-11 h1 w1 p2 br10'></div>
|
||||
</article><article class='flex g1'>
|
||||
<div class='bg-gold-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gold-11 h1 w1 p2 br10'></div>
|
||||
</article><article class='flex g1'>
|
||||
<div class='bg-yellow-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-yellow-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-slate-gray-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-slate-gray-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-gray-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-gray-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-overlay-tint-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-1 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-10 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-tint-11 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
<article class='flex g1'>
|
||||
<div class='bg-overlay-shadow-0 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-2 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-3 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-4 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-5 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-6 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-7 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-8 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-9 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-60 h1 w1 p2 br10'></div>
|
||||
<div class='bg-overlay-shadow-61 h1 w1 p2 br10'></div>
|
||||
</article>
|
||||
</section>
|
||||
<section class='p3 dif items-baseline g4'>
|
||||
<p class='dib lh-solid m0 f11 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f10 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f9 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f8 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f7 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f6 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f5 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f4 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f3 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f2 fw9'>Aa</p>
|
||||
<p class='dib lh-solid m0 f1 fw9'>Aa</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
27
package.json
27
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tachyons",
|
||||
"version": "5.0.0-beta.0",
|
||||
"version": "4.12.0",
|
||||
"description": "Functional CSS for humans",
|
||||
"author": "mrmrs",
|
||||
"style": "css/tachyons.min.css",
|
||||
@ -11,46 +11,39 @@
|
||||
],
|
||||
"repository": "tachyons-css/tachyons",
|
||||
"keywords": [
|
||||
"UI",
|
||||
"UI design",
|
||||
"css",
|
||||
"oocss",
|
||||
"postcss",
|
||||
"functional css",
|
||||
"utility css",
|
||||
"design",
|
||||
"responsive",
|
||||
"performance"
|
||||
],
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"brotli-size": "^4.0.0",
|
||||
"copy-files": "^0.1.0",
|
||||
"immutable-css-cli": "^1.1.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"tachyons-cli": "^1.3.3",
|
||||
"normalize.css": "^8.0.0",
|
||||
"tachyons-modules": "^1.1.10",
|
||||
"tachyons-cli": "^1.3.2",
|
||||
"watch": "^1.0.2"
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Adam Morse",
|
||||
"url": "https://mrmrs.cc"
|
||||
"name": "adam morse",
|
||||
"email": "hi@mrmrs.cc"
|
||||
},
|
||||
{
|
||||
"name": "John Otander",
|
||||
"url": "https://johnotander.com"
|
||||
"name": "john otander",
|
||||
"url": "http://johnotander.com"
|
||||
}
|
||||
],
|
||||
"scripts": {
|
||||
"start": "npm run build:watch",
|
||||
"mutations": "immutable-css src/tachyons.css --strict",
|
||||
"build": "npm run build:css && npm run build:minify && brotli-size css/tachyons.min.css",
|
||||
"build:css": "tachyons src/tachyons.css --preserveVariables > css/tachyons.css",
|
||||
"build:minify": "tachyons src/tachyons.css --minify --preserveVariables > css/tachyons.min.css",
|
||||
"build": "npm run build:css && npm run build:minify",
|
||||
"build:css": "tachyons src/tachyons.css > css/tachyons.css",
|
||||
"build:minify": "tachyons src/tachyons.css --minify > css/tachyons.min.css",
|
||||
"build:watch": "watch \"npm run build\" ./src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"gzip-size": "^7.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
/*
|
||||
|
||||
ALIGN-CONTENT
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
|
||||
|
||||
*/
|
||||
|
||||
.content-start { align-content: flex-start; }
|
||||
.content-end { align-content: flex-end; }
|
||||
.content-center { align-content: center; }
|
||||
.content-between { align-content: space-between; }
|
||||
.content-around { align-content: space-around; }
|
||||
.content-stretch { align-content: stretch; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.content-start-s { align-content: flex-start; }
|
||||
.content-end-s { align-content: flex-end; }
|
||||
.content-center-s { align-content: center; }
|
||||
.content-between-s { align-content: space-between; }
|
||||
.content-around-s { align-content: space-around; }
|
||||
.content-stretch-s { align-content: stretch; }
|
||||
}
|
||||
@container (min-width:48em) {
|
||||
.content-start-m { align-content: flex-start; }
|
||||
.content-end-m { align-content: flex-end; }
|
||||
.content-center-m { align-content: center; }
|
||||
.content-between-m { align-content: space-between; }
|
||||
.content-around-m { align-content: space-around; }
|
||||
.content-stretch-m { align-content: stretch; }
|
||||
}
|
||||
@container (min-width:64em) {
|
||||
.content-start-l { align-content: flex-start; }
|
||||
.content-end-l { align-content: flex-end; }
|
||||
.content-center-l { align-content: center; }
|
||||
.content-between-l { align-content: space-between; }
|
||||
.content-around-l { align-content: space-around; }
|
||||
.content-stretch-l { align-content: stretch; }
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
/*
|
||||
|
||||
ALIGN-ITEMS
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-center { align-items: center; }
|
||||
.items-baseline { align-items: baseline; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.items-start-s { align-items: flex-start; }
|
||||
.items-end-s { align-items: flex-end; }
|
||||
.items-center-s { align-items: center; }
|
||||
.items-baseline-s { align-items: baseline; }
|
||||
.items-stretch-s { align-items: stretch; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.items-start-m { align-items: flex-start; }
|
||||
.items-end-m { align-items: flex-end; }
|
||||
.items-center-m { align-items: center; }
|
||||
.items-baseline-m { align-items: baseline; }
|
||||
.items-stretch-m { align-items: stretch; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.items-start-l { align-items: flex-start; }
|
||||
.items-end-l { align-items: flex-end; }
|
||||
.items-center-l { align-items: center; }
|
||||
.items-baseline-l { align-items: baseline; }
|
||||
.items-stretch-l { align-items: stretch; }
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
/*
|
||||
|
||||
ALIGN-SELF
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.self-start { align-self: flex-start; }
|
||||
.self-end { align-self: flex-end; }
|
||||
.self-center { align-self: center; }
|
||||
.self-baseline { align-self: baseline; }
|
||||
.self-stretch { align-self: stretch; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.self-start-s { align-self: flex-start; }
|
||||
.self-end-s { align-self: flex-end; }
|
||||
.self-center-s { align-self: center; }
|
||||
.self-baseline-s { align-self: baseline; }
|
||||
.self-stretch-s { align-self: stretch; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.self-start-m { align-self: flex-start; }
|
||||
.self-end-m { align-self: flex-end; }
|
||||
.self-center-m { align-self: center; }
|
||||
.self-baseline-m { align-self: baseline; }
|
||||
.self-stretch-m { align-self: stretch; }
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.self-start-l { align-self: flex-start; }
|
||||
.self-end-l { align-self: flex-end; }
|
||||
.self-center-l { align-self: center; }
|
||||
.self-baseline-l { align-self: baseline; }
|
||||
.self-stretch-l { align-self: stretch; }
|
||||
}
|
||||
12
src/_all.css
12
src/_all.css
@ -1,12 +0,0 @@
|
||||
/*
|
||||
|
||||
ALL
|
||||
|
||||
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all
|
||||
|
||||
*/
|
||||
|
||||
.unset { all: unset; }
|
||||
.initial { all: initial; }
|
||||
.inherit { all: inherit; }
|
||||
.revert { all: revert; }
|
||||
@ -1,86 +1,135 @@
|
||||
/*
|
||||
|
||||
ASPECT RATIOS
|
||||
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
|
||||
|
||||
*/
|
||||
|
||||
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
|
||||
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
|
||||
* Make sure there are no height and width attributes on the embedded media.
|
||||
* Adapted from: https://github.com/suitcss/components-flex-embed
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* <div class="aspect-ratio aspect-ratio--16x9">
|
||||
* <iframe class="aspect-ratio--object"></iframe>
|
||||
* </div>
|
||||
*
|
||||
* */
|
||||
|
||||
.aspect-ratio-16x9 { aspect-ratio: 16 / 9; }
|
||||
.aspect-ratio-9x16 { aspect-ratio: 9 / 16; }
|
||||
|
||||
.aspect-ratio-4x3 { aspect-ratio: 4 / 3; }
|
||||
.aspect-ratio-3x4 { aspect-ratio: 3 / 4; }
|
||||
|
||||
.aspect-ratio-6x4 { aspect-ratio: 6 / 4; }
|
||||
.aspect-ratio-4x6 { aspect-ratio: 4 / 6; }
|
||||
|
||||
.aspect-ratio-8x5 { aspect-ratio: 8 / 5; }
|
||||
.aspect-ratio-5x8 { aspect-ratio: 5 / 8; }
|
||||
|
||||
.aspect-ratio-7x5 { aspect-ratio: 7 / 5; }
|
||||
.aspect-ratio-5x7 { aspect-ratio: 5 / 7; }
|
||||
|
||||
.aspect-ratio-square,
|
||||
.aspect-ratio-1x1 { aspect-ratio: 1 / 1; }
|
||||
|
||||
|
||||
@container (min-width:30em){
|
||||
.aspect-ratio-16x9-s { aspect-ratio: 16 / 9; }
|
||||
.aspect-ratio-9x16-s { aspect-ratio: 9 / 16; }
|
||||
|
||||
.aspect-ratio-4x3-s { aspect-ratio: 4 / 3; }
|
||||
.aspect-ratio-3x4-s { aspect-ratio: 3 / 4; }
|
||||
|
||||
.aspect-ratio-6x4-s { aspect-ratio: 6 / 4; }
|
||||
.aspect-ratio-4x6-s { aspect-ratio: 4 / 6; }
|
||||
|
||||
.aspect-ratio-8x5-s { aspect-ratio: 8 / 5; }
|
||||
.aspect-ratio-5x8-s { aspect-ratio: 5 / 8; }
|
||||
|
||||
.aspect-ratio-7x5-s { aspect-ratio: 7 / 5; }
|
||||
.aspect-ratio-5x7-s { aspect-ratio: 5 / 7; }
|
||||
|
||||
.aspect-ratio-square-s,
|
||||
.aspect-ratio-1x1-s { aspect-ratio: 1 / 1; }
|
||||
.aspect-ratio {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@container (min-width:48em){
|
||||
.aspect-ratio-16x9-m { aspect-ratio: 16 / 9; }
|
||||
.aspect-ratio-9x16-m { aspect-ratio: 9 / 16; }
|
||||
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
|
||||
|
||||
.aspect-ratio-4x3-m { aspect-ratio: 4 / 3; }
|
||||
.aspect-ratio-3x4-m { aspect-ratio: 3 / 4; }
|
||||
.aspect-ratio--4x3 { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
|
||||
|
||||
.aspect-ratio-6x4-m { aspect-ratio: 6 / 4; }
|
||||
.aspect-ratio-4x6-m { aspect-ratio: 4 / 6; }
|
||||
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6 { padding-bottom: 150%; }
|
||||
|
||||
.aspect-ratio-8x5-m { aspect-ratio: 8 / 5; }
|
||||
.aspect-ratio-5x8-m { aspect-ratio: 5 / 8; }
|
||||
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8 { padding-bottom: 160%; }
|
||||
|
||||
.aspect-ratio-7x5-m { aspect-ratio: 7 / 5; }
|
||||
.aspect-ratio-5x7-m { aspect-ratio: 5 / 7; }
|
||||
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7 { padding-bottom: 140%; }
|
||||
|
||||
.aspect-ratio-square-m,
|
||||
.aspect-ratio-1x1-m { aspect-ratio: 1 / 1; }
|
||||
.aspect-ratio--1x1 { padding-bottom: 100%; }
|
||||
|
||||
.aspect-ratio--object {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@container (min-width:64em){
|
||||
.aspect-ratio-16x9-l { aspect-ratio: 16 / 9; }
|
||||
.aspect-ratio-9x16-l { aspect-ratio: 9 / 16; }
|
||||
|
||||
.aspect-ratio-4x3-l { aspect-ratio: 4 / 3; }
|
||||
.aspect-ratio-3x4-l { aspect-ratio: 3 / 4; }
|
||||
|
||||
.aspect-ratio-6x4-l { aspect-ratio: 6 / 4; }
|
||||
.aspect-ratio-4x6-l { aspect-ratio: 4 / 6; }
|
||||
|
||||
.aspect-ratio-8x5-l { aspect-ratio: 8 / 5; }
|
||||
.aspect-ratio-5x8-l { aspect-ratio: 5 / 8; }
|
||||
|
||||
.aspect-ratio-7x5-l { aspect-ratio: 7 / 5; }
|
||||
.aspect-ratio-5x7-l { aspect-ratio: 5 / 7; }
|
||||
|
||||
.aspect-ratio-square-l,
|
||||
.aspect-ratio-1x1-l { aspect-ratio: 1 / 1; }
|
||||
@media (--breakpoint-not-small){
|
||||
.aspect-ratio-ns {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-ns { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-ns { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-ns { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-ns { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-ns { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-ns {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium){
|
||||
.aspect-ratio-m {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-m { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-m { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-m { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-m { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-m { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-m { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-m { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-m { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-m { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-m {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-large){
|
||||
.aspect-ratio-l {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-l { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-l { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-l { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-l { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-l { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-l { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-l { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-l { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-l { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-l {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,76 +0,0 @@
|
||||
/*
|
||||
|
||||
BACKDROP-FILTER EFFECTS
|
||||
|
||||
- Blur
|
||||
- Grayscale
|
||||
- Hue Rotate
|
||||
- Invert
|
||||
- INTERACTIONS
|
||||
- Hover
|
||||
- Focus
|
||||
|
||||
*/
|
||||
|
||||
.filter-none { filter: none; }
|
||||
|
||||
.blur1 { filter: blur(4px); }
|
||||
.blur2 { filter: blur(16px); }
|
||||
.blur3 { filter: blur(96px); }
|
||||
|
||||
.grayscale1 { filter: grayscale(0); }
|
||||
.grayscale2 { filter: grayscale(50%); }
|
||||
.grayscale3 { filter: grayscale(100%); }
|
||||
|
||||
.hue-rotate0 { filter: hue-rotate(0deg);}
|
||||
.hue-rotate1 { filter: hue-rotate(45deg);}
|
||||
.hue-rotate2 { filter: hue-rotate(90deg);}
|
||||
.hue-rotate3 { filter: hue-rotate(135deg);}
|
||||
.hue-rotate4 { filter: hue-rotate(180deg);}
|
||||
.hue-rotate5 { filter: hue-rotate(225deg);}
|
||||
.hue-rotate6 { filter: hue-rotate(270deg);}
|
||||
.hue-rotate7 { filter: hue-rotate(315deg);}
|
||||
|
||||
.invert { filter: invert(100%); }
|
||||
|
||||
/* TODO: Add drop-shadow */
|
||||
|
||||
.filter-none-hover:hover { filter: none; }
|
||||
|
||||
.blur1-hover:hover { filter: blur(4px); }
|
||||
.blur2-hover:hover { filter: blur(16px); }
|
||||
.blur3-hover:hover { filter: blur(96px); }
|
||||
|
||||
.grayscale1-hover:hover { filter: grayscale(0); }
|
||||
.grayscale2-hover:hover { filter: grayscale(50%); }
|
||||
.grayscale3-hover:hover { filter: grayscale(100%); }
|
||||
|
||||
.hue-rotate0-hover:hover { filter: hue-rotate(0deg);}
|
||||
.hue-rotate1-hover:hover { filter: hue-rotate(45deg);}
|
||||
.hue-rotate2-hover:hover { filter: hue-rotate(90deg);}
|
||||
.hue-rotate3-hover:hover { filter: hue-rotate(135deg);}
|
||||
.hue-rotate4-hover:hover { filter: hue-rotate(180deg);}
|
||||
.hue-rotate5-hover:hover { filter: hue-rotate(225deg);}
|
||||
.hue-rotate6-hover:hover { filter: hue-rotate(270deg);}
|
||||
.hue-rotate7-hover:hover { filter: hue-rotate(315deg);}
|
||||
|
||||
.invert-hover:hover { filter: invert(100%); }
|
||||
|
||||
.blur1-focus:focus { filter: blur(4px); }
|
||||
.blur2-focus:focus { filter: blur(16px); }
|
||||
.blur3-focus:focus { filter: blur(96px); }
|
||||
|
||||
.grayscale1-focus:focus { filter: grayscale(0); }
|
||||
.grayscale2-focus:focus { filter: grayscale(50%); }
|
||||
.grayscale3-focus:focus { filter: grayscale(100%); }
|
||||
|
||||
.hue-rotate0-focus:focus { filter: hue-rotate(0deg);}
|
||||
.hue-rotate1-focus:focus { filter: hue-rotate(45deg);}
|
||||
.hue-rotate2-focus:focus { filter: hue-rotate(90deg);}
|
||||
.hue-rotate3-focus:focus { filter: hue-rotate(135deg);}
|
||||
.hue-rotate4-focus:focus { filter: hue-rotate(180deg);}
|
||||
.hue-rotate5-focus:focus { filter: hue-rotate(225deg);}
|
||||
.hue-rotate6-focus:focus { filter: hue-rotate(270deg);}
|
||||
.hue-rotate7-focus:focus { filter: hue-rotate(315deg);}
|
||||
|
||||
.invert-focus:focus { filter: invert(100%); }
|
||||
@ -13,7 +13,7 @@
|
||||
-left = center left
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -44,34 +44,34 @@
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
@container (min-width:30em) {
|
||||
.bg-center-s {
|
||||
@media (--breakpoint-not-small) {
|
||||
.bg-center-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bg-top-s {
|
||||
.bg-top-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.bg-right-s {
|
||||
.bg-right-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.bg-bottom-s {
|
||||
.bg-bottom-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
}
|
||||
|
||||
.bg-left-s {
|
||||
.bg-left-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.bg-center-m {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
@ -98,7 +98,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.bg-center-l {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
Docs: http://tachyons.io/docs/themes/background-size/
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -15,52 +15,20 @@
|
||||
on an html element.
|
||||
*/
|
||||
|
||||
.cover { background-size: cover!important; }
|
||||
.cover { background-size: cover!important; }
|
||||
.contain { background-size: contain!important; }
|
||||
.bg1 { background-size: 4px; }
|
||||
.bg2 { background-size: 8px; }
|
||||
.bg3 { background-size: 16px; }
|
||||
.bg4 { background-size: 32px; }
|
||||
.bg5 { background-size: 64px; }
|
||||
.bg6 { background-size: 100%; }
|
||||
.bg7 { background-size: 150%; }
|
||||
.bg8 { background-size: 200%; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.cover-s { background-size: cover!important; }
|
||||
.contain-s { background-size: contain!important; }
|
||||
.bg1-s { background-size: 4px; }
|
||||
.bg2-s { background-size: 8px; }
|
||||
.bg3-s { background-size: 16px; }
|
||||
.bg4-s { background-size: 32px; }
|
||||
.bg5-s { background-size: 64px; }
|
||||
.bg6-s { background-size: 100%; }
|
||||
.bg7-s { background-size: 150%; }
|
||||
.bg8-s { background-size: 200%; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.cover-ns { background-size: cover!important; }
|
||||
.contain-ns { background-size: contain!important; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.cover-m { background-size: cover!important; }
|
||||
.contain-m { background-size: contain!important; }
|
||||
.bg1-m { background-size: 4px; }
|
||||
.bg2-m { background-size: 8px; }
|
||||
.bg3-m { background-size: 16px; }
|
||||
.bg4-m { background-size: 32px; }
|
||||
.bg5-m { background-size: 64px; }
|
||||
.bg6-m { background-size: 100%; }
|
||||
.bg7-m { background-size: 150%; }
|
||||
.bg8-m { background-size: 200%; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.cover-l { background-size: cover!important; }
|
||||
.contain-l { background-size: contain!important; }
|
||||
.bg1-l { background-size: 4px; }
|
||||
.bg2-l { background-size: 8px; }
|
||||
.bg3-l { background-size: 16px; }
|
||||
.bg4-l { background-size: 32px; }
|
||||
.bg5-l { background-size: 64px; }
|
||||
.bg6-l { background-size: 100%; }
|
||||
.bg7-l { background-size: 150%; }
|
||||
.bg8-l { background-size: 200%; }
|
||||
}
|
||||
|
||||
@ -18,11 +18,71 @@
|
||||
|
||||
*/
|
||||
|
||||
.b--color { border-color: var(--border-color, gray); }
|
||||
.b--light { border-color: var(--overlay-tint-2, gray); }
|
||||
.b--dark { border-color: var(--overlay-shadow-9, gray); }
|
||||
.b--transparent { border-color: transparent; }
|
||||
.b--current { border-color: currentColor; }
|
||||
.b--black { border-color: var(--black); }
|
||||
.b--near-black { border-color: var(--near-black); }
|
||||
.b--dark-gray { border-color: var(--dark-gray); }
|
||||
.b--mid-gray { border-color: var(--mid-gray); }
|
||||
.b--gray { border-color: var(--gray); }
|
||||
.b--silver { border-color: var(--silver); }
|
||||
.b--light-silver { border-color: var(--light-silver); }
|
||||
.b--moon-gray { border-color: var(--moon-gray); }
|
||||
.b--light-gray { border-color: var(--light-gray); }
|
||||
.b--near-white { border-color: var(--near-white); }
|
||||
.b--white { border-color: var(--white); }
|
||||
|
||||
.b--white-90 { border-color: var(--white-90); }
|
||||
.b--white-80 { border-color: var(--white-80); }
|
||||
.b--white-70 { border-color: var(--white-70); }
|
||||
.b--white-60 { border-color: var(--white-60); }
|
||||
.b--white-50 { border-color: var(--white-50); }
|
||||
.b--white-40 { border-color: var(--white-40); }
|
||||
.b--white-30 { border-color: var(--white-30); }
|
||||
.b--white-20 { border-color: var(--white-20); }
|
||||
.b--white-10 { border-color: var(--white-10); }
|
||||
.b--white-05 { border-color: var(--white-05); }
|
||||
.b--white-025 { border-color: var(--white-025); }
|
||||
.b--white-0125 { border-color: var(--white-0125); }
|
||||
|
||||
.b--black-90 { border-color: var(--black-90); }
|
||||
.b--black-80 { border-color: var(--black-80); }
|
||||
.b--black-70 { border-color: var(--black-70); }
|
||||
.b--black-60 { border-color: var(--black-60); }
|
||||
.b--black-50 { border-color: var(--black-50); }
|
||||
.b--black-40 { border-color: var(--black-40); }
|
||||
.b--black-30 { border-color: var(--black-30); }
|
||||
.b--black-20 { border-color: var(--black-20); }
|
||||
.b--black-10 { border-color: var(--black-10); }
|
||||
.b--black-05 { border-color: var(--black-05); }
|
||||
.b--black-025 { border-color: var(--black-025); }
|
||||
.b--black-0125 { border-color: var(--black-0125); }
|
||||
|
||||
.b--dark-red { border-color: var(--dark-red); }
|
||||
.b--red { border-color: var(--red); }
|
||||
.b--light-red { border-color: var(--light-red); }
|
||||
.b--orange { border-color: var(--orange); }
|
||||
.b--gold { border-color: var(--gold); }
|
||||
.b--yellow { border-color: var(--yellow); }
|
||||
.b--light-yellow { border-color: var(--light-yellow); }
|
||||
.b--purple { border-color: var(--purple); }
|
||||
.b--light-purple { border-color: var(--light-purple); }
|
||||
.b--dark-pink { border-color: var(--dark-pink); }
|
||||
.b--hot-pink { border-color: var(--hot-pink); }
|
||||
.b--pink { border-color: var(--pink); }
|
||||
.b--light-pink { border-color: var(--light-pink); }
|
||||
.b--dark-green { border-color: var(--dark-green); }
|
||||
.b--green { border-color: var(--green); }
|
||||
.b--light-green { border-color: var(--light-green); }
|
||||
.b--navy { border-color: var(--navy); }
|
||||
.b--dark-blue { border-color: var(--dark-blue); }
|
||||
.b--blue { border-color: var(--blue); }
|
||||
.b--light-blue { border-color: var(--light-blue); }
|
||||
.b--lightest-blue { border-color: var(--lightest-blue); }
|
||||
.b--washed-blue { border-color: var(--washed-blue); }
|
||||
.b--washed-green { border-color: var(--washed-green); }
|
||||
.b--washed-yellow { border-color: var(--washed-yellow); }
|
||||
.b--washed-red { border-color: var(--washed-red); }
|
||||
|
||||
.b--transparent { border-color: var(--transparent); }
|
||||
.b--inherit { border-color: inherit; }
|
||||
.b--initial { border-color: initial; }
|
||||
.b--unset { border-color: unset; }
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
BORDER RADIUS
|
||||
Docs: http://tachyons.io/docs/themes/border-radius/
|
||||
Interactive examples: https://components.ai/u/system/cl7crcjia022509masfvq73ny/cl7ztbozs1650909l6rllmvpko
|
||||
|
||||
Base:
|
||||
br = border-radius
|
||||
@ -13,34 +12,25 @@
|
||||
2 = 2nd step in scale
|
||||
3 = 3rd step in scale
|
||||
4 = 4th step in scale
|
||||
5 = 5th step in scale
|
||||
6 = 6th step in scale
|
||||
|
||||
Literal values:
|
||||
-100 = 100%
|
||||
-pill = 9999px
|
||||
|
||||
Media Query Extensions:
|
||||
-n = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.br-primary { border-radius: var(--border-radius, 6px); }
|
||||
.br0 { border-radius: var(--border-radius-0, 0); }
|
||||
.br1 { border-radius: var(--border-radius-1, 4px); }
|
||||
.br2 { border-radius: var(--border-radius-2, 6px); }
|
||||
.br3 { border-radius: var(--border-radius-3, 8px); }
|
||||
.br4 { border-radius: var(--border-radius-4, 12px); }
|
||||
.br5 { border-radius: var(--border-radius-5, 16px); }
|
||||
.br6 { border-radius: var(--border-radius-6, 20px); }
|
||||
.br7 { border-radius: var(--border-radius-7, 24px); }
|
||||
.br8 { border-radius: var(--border-radius-8, 32px); }
|
||||
.br9 { border-radius: var(--border-radius-9, 48px); }
|
||||
.br10 { border-radius: var(--border-radius-10, 64px); }
|
||||
.br11 { border-radius: var(--border-radius-11, 9999px); }
|
||||
|
||||
.br0 { border-radius: 0; }
|
||||
.br1 { border-radius: .125rem; }
|
||||
.br2 { border-radius: .25rem; }
|
||||
.br3 { border-radius: .5rem; }
|
||||
.br4 { border-radius: 1rem; }
|
||||
.br-100 { border-radius: 100%; }
|
||||
.br-pill { border-radius: 9999px; }
|
||||
.br--bottom {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@ -61,55 +51,43 @@
|
||||
.br-initial { border-radius: initial; }
|
||||
.br-unset { border-radius: unset; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.br-primary-s { border-radius: var(--border-radius, 6px); }
|
||||
.br0-s { border-radius: var(--border-radius-0, 0); }
|
||||
.br1-s { border-radius: var(--border-radius-1, 4px); }
|
||||
.br2-s { border-radius: var(--border-radius-2, 6px); }
|
||||
.br3-s { border-radius: var(--border-radius-3, 8px); }
|
||||
.br4-s { border-radius: var(--border-radius-4, 12px); }
|
||||
.br5-s { border-radius: var(--border-radius-5, 16px); }
|
||||
.br6-s { border-radius: var(--border-radius-6, 20px); }
|
||||
.br7-s { border-radius: var(--border-radius-7, 24px); }
|
||||
.br8-s { border-radius: var(--border-radius-8, 32px); }
|
||||
.br9-s { border-radius: var(--border-radius-9, 48px); }
|
||||
.br10-s { border-radius: var(--border-radius-10, 64px); }
|
||||
.br11-s { border-radius: var(--border-radius-11, 9999px); }
|
||||
.br--bottom-s {
|
||||
@media (--breakpoint-not-small) {
|
||||
.br0-ns { border-radius: 0; }
|
||||
.br1-ns { border-radius: .125rem; }
|
||||
.br2-ns { border-radius: .25rem; }
|
||||
.br3-ns { border-radius: .5rem; }
|
||||
.br4-ns { border-radius: 1rem; }
|
||||
.br-100-ns { border-radius: 100%; }
|
||||
.br-pill-ns { border-radius: 9999px; }
|
||||
.br--bottom-ns {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.br--top-s {
|
||||
.br--top-ns {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br--right-s {
|
||||
.br--right-ns {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.br--left-s {
|
||||
.br--left-ns {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br-inherit-s { border-radius: inherit; }
|
||||
.br-initial-s { border-radius: initial; }
|
||||
.br-unset-s { border-radius: unset; }
|
||||
.br-inherit-ns { border-radius: inherit; }
|
||||
.br-initial-ns { border-radius: initial; }
|
||||
.br-unset-ns { border-radius: unset; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.br-primary-m { border-radius: var(--border-radius, 6px); }
|
||||
.br0-m { border-radius: var(--border-radius-0, 0); }
|
||||
.br1-m { border-radius: var(--border-radius-1, 4px); }
|
||||
.br2-m { border-radius: var(--border-radius-2, 6px); }
|
||||
.br3-m { border-radius: var(--border-radius-3, 8px); }
|
||||
.br4-m { border-radius: var(--border-radius-4, 12px); }
|
||||
.br5-m { border-radius: var(--border-radius-5, 16px); }
|
||||
.br6-m { border-radius: var(--border-radius-6, 20px); }
|
||||
.br7-m { border-radius: var(--border-radius-7, 24px); }
|
||||
.br8-m { border-radius: var(--border-radius-8, 32px); }
|
||||
.br9-m { border-radius: var(--border-radius-9, 48px); }
|
||||
.br10-m { border-radius: var(--border-radius-10, 64px); }
|
||||
.br11-m { border-radius: var(--border-radius-11, 9999px); }
|
||||
@media (--breakpoint-medium) {
|
||||
.br0-m { border-radius: 0; }
|
||||
.br1-m { border-radius: .125rem; }
|
||||
.br2-m { border-radius: .25rem; }
|
||||
.br3-m { border-radius: .5rem; }
|
||||
.br4-m { border-radius: 1rem; }
|
||||
.br-100-m { border-radius: 100%; }
|
||||
.br-pill-m { border-radius: 9999px; }
|
||||
.br--bottom-m {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@ -131,20 +109,14 @@
|
||||
.br-unset-m { border-radius: unset; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.br-primary-l { border-radius: var(--border-radius, 6px); }
|
||||
.br0-l { border-radius: var(--border-radius-0, 0); }
|
||||
.br1-l { border-radius: var(--border-radius-1, 4px); }
|
||||
.br2-l { border-radius: var(--border-radius-2, 6px); }
|
||||
.br3-l { border-radius: var(--border-radius-3, 8px); }
|
||||
.br4-l { border-radius: var(--border-radius-4, 12px); }
|
||||
.br5-l { border-radius: var(--border-radius-5, 16px); }
|
||||
.br6-l { border-radius: var(--border-radius-6, 20px); }
|
||||
.br7-l { border-radius: var(--border-radius-7, 24px); }
|
||||
.br8-l { border-radius: var(--border-radius-8, 32px); }
|
||||
.br9-l { border-radius: var(--border-radius-9, 48px); }
|
||||
.br10-l { border-radius: var(--border-radius-10, 64px); }
|
||||
.br11-l { border-radius: var(--border-radius-11, 9999px); }
|
||||
@media (--breakpoint-large) {
|
||||
.br0-l { border-radius: 0; }
|
||||
.br1-l { border-radius: .125rem; }
|
||||
.br2-l { border-radius: .25rem; }
|
||||
.br3-l { border-radius: .5rem; }
|
||||
.br4-l { border-radius: 1rem; }
|
||||
.br-100-l { border-radius: 100%; }
|
||||
.br-pill-l { border-radius: 9999px; }
|
||||
.br--bottom-l {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
--solid = solid
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -26,21 +26,21 @@
|
||||
.b--solid { border-style: solid; }
|
||||
.b--none { border-style: none; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.b--dotted-s { border-style: dotted; }
|
||||
.b--dashed-s { border-style: dashed; }
|
||||
.b--solid-s { border-style: solid; }
|
||||
.b--none-s { border-style: none; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.b--dotted-ns { border-style: dotted; }
|
||||
.b--dashed-ns { border-style: dashed; }
|
||||
.b--solid-ns { border-style: solid; }
|
||||
.b--none-ns { border-style: none; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.b--dotted-m { border-style: dotted; }
|
||||
.b--dashed-m { border-style: dashed; }
|
||||
.b--solid-m { border-style: solid; }
|
||||
.b--none-m { border-style: none; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.b--dotted-l { border-style: dotted; }
|
||||
.b--dashed-l { border-style: dashed; }
|
||||
.b--solid-l { border-style: solid; }
|
||||
|
||||
@ -15,19 +15,18 @@
|
||||
5 = 5th step in border-width scale
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.bw { border-width: var(--border-width,1px); }
|
||||
.bw0 { border-width: var(--border-width-0,0); }
|
||||
.bw1 { border-width: var(--border-width-1,1px); }
|
||||
.bw2 { border-width: var(--border-width-2,2px); }
|
||||
.bw3 { border-width: var(--border-width-3,4px); }
|
||||
.bw4 { border-width: var(--border-width-4,8px); }
|
||||
.bw5 { border-width: var(--border-width-5,16px); }
|
||||
.bw0 { border-width: 0; }
|
||||
.bw1 { border-width: .125rem; }
|
||||
.bw2 { border-width: .25rem; }
|
||||
.bw3 { border-width: .5rem; }
|
||||
.bw4 { border-width: 1rem; }
|
||||
.bw5 { border-width: 2rem; }
|
||||
|
||||
/* Resets */
|
||||
.bt-0 { border-top-width: 0; }
|
||||
@ -35,42 +34,39 @@
|
||||
.bb-0 { border-bottom-width: 0; }
|
||||
.bl-0 { border-left-width: 0; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.bw-s { border-width: var(--border-width,1px); }
|
||||
.bw0-s { border-width: var(--border-width-0,0); }
|
||||
.bw1-s { border-width: var(--border-width-1,1px); }
|
||||
.bw2-s { border-width: var(--border-width-2,2px); }
|
||||
.bw3-s { border-width: var(--border-width-3,4px); }
|
||||
.bw4-s { border-width: var(--border-width-4,8px); }
|
||||
.bw5-s { border-width: var(--border-width-5,16px); }
|
||||
.bt-0-s { border-top-width: 0; }
|
||||
.br-0-s { border-right-width: 0; }
|
||||
.bb-0-s { border-bottom-width: 0; }
|
||||
.bl-0-s { border-left-width: 0; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.bw0-ns { border-width: 0; }
|
||||
.bw1-ns { border-width: .125rem; }
|
||||
.bw2-ns { border-width: .25rem; }
|
||||
.bw3-ns { border-width: .5rem; }
|
||||
.bw4-ns { border-width: 1rem; }
|
||||
.bw5-ns { border-width: 2rem; }
|
||||
.bt-0-ns { border-top-width: 0; }
|
||||
.br-0-ns { border-right-width: 0; }
|
||||
.bb-0-ns { border-bottom-width: 0; }
|
||||
.bl-0-ns { border-left-width: 0; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.bw-m { border-width: var(--border-width,1px); }
|
||||
.bw0-m { border-width: var(--border-width-0,0); }
|
||||
.bw1-m { border-width: var(--border-width-1,1px); }
|
||||
.bw2-m { border-width: var(--border-width-2,2px); }
|
||||
.bw3-m { border-width: var(--border-width-3,4px); }
|
||||
.bw4-m { border-width: var(--border-width-4,8px); }
|
||||
.bw5-m { border-width: var(--border-width-5,16px); }
|
||||
@media (--breakpoint-medium) {
|
||||
.bw0-m { border-width: 0; }
|
||||
.bw1-m { border-width: .125rem; }
|
||||
.bw2-m { border-width: .25rem; }
|
||||
.bw3-m { border-width: .5rem; }
|
||||
.bw4-m { border-width: 1rem; }
|
||||
.bw5-m { border-width: 2rem; }
|
||||
.bt-0-m { border-top-width: 0; }
|
||||
.br-0-m { border-right-width: 0; }
|
||||
.bb-0-m { border-bottom-width: 0; }
|
||||
.bl-0-m { border-left-width: 0; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.bw-l { border-width: var(--border-width,1px); }
|
||||
.bw0-l { border-width: var(--border-width-0,0); }
|
||||
.bw1-l { border-width: var(--border-width-1,1px); }
|
||||
.bw2-l { border-width: var(--border-width-2,2px); }
|
||||
.bw3-l { border-width: var(--border-width-3,4px); }
|
||||
.bw4-l { border-width: var(--border-width-4,8px); }
|
||||
.bw5-l { border-width: var(--border-width-5,16px); }
|
||||
@media (--breakpoint-large) {
|
||||
.bw0-l { border-width: 0; }
|
||||
.bw1-l { border-width: .125rem; }
|
||||
.bw2-l { border-width: .25rem; }
|
||||
.bw3-l { border-width: .5rem; }
|
||||
.bw4-l { border-width: 1rem; }
|
||||
.bw5-l { border-width: 2rem; }
|
||||
.bt-0-l { border-top-width: 0; }
|
||||
.br-0-l { border-right-width: 0; }
|
||||
.bb-0-l { border-bottom-width: 0; }
|
||||
|
||||
@ -15,44 +15,44 @@
|
||||
n = none
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.ba { border-style: solid; border-width: var(--border-width, 1px); }
|
||||
.bt { border-top-style: solid; border-top-width: var(--border-width, 1px); }
|
||||
.br { border-right-style: solid; border-right-width: var(--border-width, 1px); }
|
||||
.bb { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
|
||||
.bl { border-left-style: solid; border-left-width: var(--border-width, 1px); }
|
||||
.ba { border-style: solid; border-width: 1px; }
|
||||
.bt { border-top-style: solid; border-top-width: 1px; }
|
||||
.br { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn { border-style: none; border-width: 0; }
|
||||
|
||||
|
||||
@container (min-width:30em) {
|
||||
.ba-s { border-style: solid; border-width: var(--border-width, 1px); }
|
||||
.bt-s { border-top-style: solid; border-top-width: var(--border-width, 1px); }
|
||||
.br-s { border-right-style: solid; border-right-width: var(--border-width, 1px); }
|
||||
.bb-s { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
|
||||
.bl-s { border-left-style: solid; border-left-width: var(--border-width, 1px); }
|
||||
.bn-s { border-style: none; border-width: 0; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.ba-ns { border-style: solid; border-width: 1px; }
|
||||
.bt-ns { border-top-style: solid; border-top-width: 1px; }
|
||||
.br-ns { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl-ns { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn-ns { border-style: none; border-width: 0; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.ba-m { border-style: solid; border-width: var(--border-width, 1px); }
|
||||
.bt-m { border-top-style: solid; border-top-width: var(--border-width, 1px); }
|
||||
.br-m { border-right-style: solid; border-right-width: var(--border-width, 1px); }
|
||||
.bb-m { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
|
||||
.bl-m { border-left-style: solid; border-left-width: var(--border-width, 1px); }
|
||||
@media (--breakpoint-medium) {
|
||||
.ba-m { border-style: solid; border-width: 1px; }
|
||||
.bt-m { border-top-style: solid; border-top-width: 1px; }
|
||||
.br-m { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl-m { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn-m { border-style: none; border-width: 0; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.ba-l { border-style: solid; border-width: var(--border-width, 1px); }
|
||||
.bt-l { border-top-style: solid; border-top-width: var(--border-width, 1px); }
|
||||
.br-l { border-right-style: solid; border-right-width: var(--border-width, 1px); }
|
||||
.bb-l { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
|
||||
.bl-l { border-left-style: solid; border-left-width: var(--border-width, 1px); }
|
||||
@media (--breakpoint-large) {
|
||||
.ba-l { border-style: solid; border-width: 1px; }
|
||||
.bt-l { border-top-style: solid; border-top-width: 1px; }
|
||||
.br-l { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl-l { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn-l { border-style: none; border-width: 0; }
|
||||
}
|
||||
|
||||
|
||||
@ -3,120 +3,39 @@
|
||||
BOX-SHADOW
|
||||
Docs: http://tachyons.io/docs/themes/box-shadow/
|
||||
|
||||
REF
|
||||
Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.shadow {
|
||||
box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5)));
|
||||
.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
|
||||
@media (--breakpoint-not-small) {
|
||||
.shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
}
|
||||
|
||||
.shadow-hover:hover,
|
||||
.shadow-hover:focus {
|
||||
--shadow-opacity: .6;
|
||||
@media (--breakpoint-medium) {
|
||||
.shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
}
|
||||
|
||||
/*
|
||||
* TODO: potential pattern
|
||||
.shadow-hover:hover {
|
||||
--shadow-opacity: .09;
|
||||
--shadow-x: 1px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 1px;
|
||||
--shadow-spread: 1px;
|
||||
--shadow-multiplier: 2;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Box shadow based borders */
|
||||
|
||||
.shadow-border-1 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); }
|
||||
.shadow-border-2 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .25)); }
|
||||
.shadow-border-3 { box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor; }
|
||||
.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125)); }
|
||||
.shadow-border-5 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125))}
|
||||
.shadow-border-6 { box-shadow: inset 0 0 2px 0 currentColor; }
|
||||
|
||||
.shadow-1 {
|
||||
box-shadow:
|
||||
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
|
||||
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
|
||||
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
|
||||
0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
|
||||
0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
|
||||
}
|
||||
|
||||
.shadow-2 {
|
||||
box-shadow:
|
||||
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
|
||||
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
|
||||
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
|
||||
0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
|
||||
}
|
||||
|
||||
.shadow-3 {
|
||||
--shadow-opacity: .11;
|
||||
box-shadow:
|
||||
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
|
||||
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
|
||||
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
|
||||
0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
|
||||
0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
|
||||
0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11));
|
||||
}
|
||||
|
||||
.shadow-4 {
|
||||
--shadow-opacity: .05;
|
||||
box-shadow:
|
||||
0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.25) * 5)),
|
||||
0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 4)),
|
||||
0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.15) * 3)),
|
||||
0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.10) * 2)),
|
||||
0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.05));
|
||||
}
|
||||
|
||||
.shadow-5 {
|
||||
--shadow-opacity: .08;
|
||||
box-shadow:
|
||||
0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.08) * 1)),
|
||||
0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.12) * 1.5)),
|
||||
0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.16) * 2)),
|
||||
0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 2.5));
|
||||
}
|
||||
|
||||
.shadow-6 {
|
||||
--shadow-opacity: .07;
|
||||
box-shadow:
|
||||
0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
|
||||
0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
|
||||
0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
|
||||
0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
|
||||
0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
|
||||
0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7));
|
||||
}
|
||||
|
||||
.shadow-7 {
|
||||
--shadow-opacity: .11;
|
||||
box-shadow:
|
||||
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
|
||||
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
|
||||
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
|
||||
0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
|
||||
0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11));
|
||||
}
|
||||
|
||||
.shadow-8 {
|
||||
--shadow-opacity: .09;
|
||||
box-shadow:
|
||||
0 2px 1px rgb(var(--shadow-color, 0 0 0) / 0.09),
|
||||
0 4px 2px rgb(var(--shadow-color, 0 0 0) / 0.09),
|
||||
0 8px 4px rgb(var(--shadow-color, 0 0 0) / 0.09),
|
||||
0 16px 8px rgb(var(--shadow-color, 0 0 0) / 0.09),
|
||||
0 32px 16px rgb(var(--shadow-color, 0 0 0) / 0.09);
|
||||
@media (--breakpoint-large) {
|
||||
.shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
.shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
|
||||
}
|
||||
|
||||
@ -4,10 +4,45 @@
|
||||
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after,
|
||||
.border-box,
|
||||
.border-box::before,
|
||||
.border-box::after { box-sizing: border-box; }
|
||||
.content-box { box-sizing: content-box; }
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
article,
|
||||
aside,
|
||||
section,
|
||||
main,
|
||||
nav,
|
||||
footer,
|
||||
header,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
pre,
|
||||
code,
|
||||
a,
|
||||
h1,h2,h3,h4,h5,h6,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figcaption,
|
||||
figure,
|
||||
textarea,
|
||||
table,
|
||||
td,
|
||||
th,
|
||||
tr,
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
.border-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -11,8 +11,30 @@
|
||||
.cf:before,
|
||||
.cf:after { content: " "; display: table; }
|
||||
.cf:after { clear: both; }
|
||||
.cf { *zoom: 1; }
|
||||
|
||||
.cl { clear: left; }
|
||||
.cr { clear: right; }
|
||||
.cb { clear: both; }
|
||||
.cn { clear: none; }
|
||||
|
||||
@media (--breakpoint-not-small) {
|
||||
.cl-ns { clear: left; }
|
||||
.cr-ns { clear: right; }
|
||||
.cb-ns { clear: both; }
|
||||
.cn-ns { clear: none; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium) {
|
||||
.cl-m { clear: left; }
|
||||
.cr-m { clear: right; }
|
||||
.cb-m { clear: both; }
|
||||
.cn-m { clear: none; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-large) {
|
||||
.cl-l { clear: left; }
|
||||
.cr-l { clear: right; }
|
||||
.cb-l { clear: both; }
|
||||
.cn-l { clear: none; }
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
*/
|
||||
|
||||
.pre {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
80
src/_colors.css
Normal file
80
src/_colors.css
Normal file
@ -0,0 +1,80 @@
|
||||
/*
|
||||
|
||||
Tachyons
|
||||
COLOR VARIABLES
|
||||
|
||||
Grayscale
|
||||
- Solids
|
||||
- Transparencies
|
||||
Colors
|
||||
|
||||
*/
|
||||
|
||||
:root {
|
||||
--black: #000;
|
||||
--near-black: #111;
|
||||
--dark-gray:#333;
|
||||
--mid-gray:#555;
|
||||
--gray: #777;
|
||||
--silver: #999;
|
||||
--light-silver: #aaa;
|
||||
--moon-gray: #ccc;
|
||||
--light-gray: #eee;
|
||||
--near-white: #f4f4f4;
|
||||
--white: #fff;
|
||||
|
||||
--transparent:transparent;
|
||||
|
||||
--black-90: rgba(0,0,0,.9);
|
||||
--black-80: rgba(0,0,0,.8);
|
||||
--black-70: rgba(0,0,0,.7);
|
||||
--black-60: rgba(0,0,0,.6);
|
||||
--black-50: rgba(0,0,0,.5);
|
||||
--black-40: rgba(0,0,0,.4);
|
||||
--black-30: rgba(0,0,0,.3);
|
||||
--black-20: rgba(0,0,0,.2);
|
||||
--black-10: rgba(0,0,0,.1);
|
||||
--black-05: rgba(0,0,0,.05);
|
||||
--black-025: rgba(0,0,0,.025);
|
||||
--black-0125: rgba(0,0,0,.0125);
|
||||
|
||||
--white-90: rgba(255,255,255,.9);
|
||||
--white-80: rgba(255,255,255,.8);
|
||||
--white-70: rgba(255,255,255,.7);
|
||||
--white-60: rgba(255,255,255,.6);
|
||||
--white-50: rgba(255,255,255,.5);
|
||||
--white-40: rgba(255,255,255,.4);
|
||||
--white-30: rgba(255,255,255,.3);
|
||||
--white-20: rgba(255,255,255,.2);
|
||||
--white-10: rgba(255,255,255,.1);
|
||||
--white-05: rgba(255,255,255,.05);
|
||||
--white-025: rgba(255,255,255,.025);
|
||||
--white-0125: rgba(255,255,255,.0125);
|
||||
|
||||
--dark-red: #e7040f;
|
||||
--red: #ff4136;
|
||||
--light-red: #ff725c;
|
||||
--orange: #ff6300;
|
||||
--gold: #ffb700;
|
||||
--yellow: #ffd700;
|
||||
--light-yellow: #fbf1a9;
|
||||
--purple: #5e2ca5;
|
||||
--light-purple: #a463f2;
|
||||
--dark-pink: #d5008f;
|
||||
--hot-pink: #ff41b4;
|
||||
--pink: #ff80cc;
|
||||
--light-pink: #ffa3d7;
|
||||
--dark-green: #137752;
|
||||
--green: #19a974;
|
||||
--light-green: #9eebcf;
|
||||
--navy: #001b44;
|
||||
--dark-blue: #00449e;
|
||||
--blue: #357edd;
|
||||
--light-blue: #96ccff;
|
||||
--lightest-blue: #cdecff;
|
||||
--washed-blue: #f6fffe;
|
||||
--washed-green: #e8fdf5;
|
||||
--washed-yellow: #fffceb;
|
||||
--washed-red: #ffdfdf;
|
||||
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
/*
|
||||
|
||||
CONTAINER-TYPE
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
|
||||
|
||||
*/
|
||||
|
||||
.container-size { container-type: size; }
|
||||
.root,
|
||||
.container-inline { container-type: inline-size; }
|
||||
.container-normal { container-type: normal; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.container-size-s { container-type: size; }
|
||||
.container-inline-s { container-type: inline-size; }
|
||||
.container-normal-s { container-type: normal; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.container-size-m { container-type: size; }
|
||||
.container-inline-m { container-type: inline-size; }
|
||||
.container-normal-m { container-type: normal; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.container-size-l { container-type: size; }
|
||||
.container-inline-l { container-type: inline-size; }
|
||||
.container-normal-l { container-type: normal; }
|
||||
}
|
||||
@ -19,7 +19,7 @@
|
||||
--2 = literal value -2
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -30,96 +30,117 @@
|
||||
.bottom-0 { bottom: 0; }
|
||||
.left-0 { left: 0; }
|
||||
|
||||
.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-1 { top: 1rem; }
|
||||
.right-1 { right: 1rem; }
|
||||
.bottom-1 { bottom: 1rem; }
|
||||
.left-1 { left: 1rem; }
|
||||
|
||||
.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-2 { top: 2rem; }
|
||||
.right-2 { right: 2rem; }
|
||||
.bottom-2 { bottom: 2rem; }
|
||||
.left-2 { left: 2rem; }
|
||||
|
||||
.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--1 { top: -1rem; }
|
||||
.right--1 { right: -1rem; }
|
||||
.bottom--1 { bottom: -1rem; }
|
||||
.left--1 { left: -1rem; }
|
||||
|
||||
.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--2 { top: -2rem; }
|
||||
.right--2 { right: -2rem; }
|
||||
.bottom--2 { bottom: -2rem; }
|
||||
.left--2 { left: -2rem; }
|
||||
|
||||
.inset-0 { inset: 0; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.top-0-s { top: 0; }
|
||||
.left-0-s { left: 0; }
|
||||
.right-0-s { right: 0; }
|
||||
.bottom-0-s { bottom: 0; }
|
||||
.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); }
|
||||
.inset-0-s { inset: 0; }
|
||||
.absolute--fill {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-not-small) {
|
||||
.top-0-ns { top: 0; }
|
||||
.left-0-ns { left: 0; }
|
||||
.right-0-ns { right: 0; }
|
||||
.bottom-0-ns { bottom: 0; }
|
||||
.top-1-ns { top: 1rem; }
|
||||
.left-1-ns { left: 1rem; }
|
||||
.right-1-ns { right: 1rem; }
|
||||
.bottom-1-ns { bottom: 1rem; }
|
||||
.top-2-ns { top: 2rem; }
|
||||
.left-2-ns { left: 2rem; }
|
||||
.right-2-ns { right: 2rem; }
|
||||
.bottom-2-ns { bottom: 2rem; }
|
||||
.top--1-ns { top: -1rem; }
|
||||
.right--1-ns { right: -1rem; }
|
||||
.bottom--1-ns { bottom: -1rem; }
|
||||
.left--1-ns { left: -1rem; }
|
||||
.top--2-ns { top: -2rem; }
|
||||
.right--2-ns { right: -2rem; }
|
||||
.bottom--2-ns { bottom: -2rem; }
|
||||
.left--2-ns { left: -2rem; }
|
||||
.absolute--fill-ns {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium) {
|
||||
.top-0-m { top: 0; }
|
||||
.left-0-m { left: 0; }
|
||||
.right-0-m { right: 0; }
|
||||
.bottom-0-m { bottom: 0; }
|
||||
.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); }
|
||||
.inset-0-m { inset: 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; }
|
||||
.absolute--fill-m {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.top-0-l { top: 0; }
|
||||
.left-0-l { left: 0; }
|
||||
.right-0-l { right: 0; }
|
||||
.bottom-0-l { bottom: 0; }
|
||||
.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); }
|
||||
.inset-0-l { inset: 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; }
|
||||
.absolute--fill-l {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,7 @@
|
||||
|
||||
*/
|
||||
|
||||
.debug * {
|
||||
--debug-color: 128 0 90;
|
||||
--debug-opacity: .8;
|
||||
outline: 1px solid rbg(var(--debug-color, 128 0 90) / (--debug-opacity, .8));
|
||||
}
|
||||
|
||||
.debug * { outline: 1px solid gold; }
|
||||
.debug-white * { outline: 1px solid white; }
|
||||
.debug-black * { outline: 1px solid black; }
|
||||
|
||||
|
||||
@ -5,17 +5,22 @@
|
||||
|
||||
Can be useful for debugging layout issues
|
||||
or helping to make sure things line up perfectly.
|
||||
Just tack this class onto a parent element
|
||||
Just tack one of these classes onto a parent element.
|
||||
|
||||
*/
|
||||
|
||||
.debug-grid {
|
||||
--grid-size: 16px;
|
||||
--grid-color: var(--magenta-9);
|
||||
|
||||
background-image:
|
||||
repeating-linear-gradient(0deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)),
|
||||
repeating-linear-gradient(90deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size));
|
||||
background-size: 100% var(--grid-size);
|
||||
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
|
||||
}
|
||||
|
||||
.debug-grid-16 {
|
||||
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
|
||||
}
|
||||
|
||||
.debug-grid-8-solid {
|
||||
background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
|
||||
}
|
||||
|
||||
.debug-grid-16-solid {
|
||||
background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
|
||||
}
|
||||
|
||||
199
src/_debug.css
199
src/_debug.css
@ -11,123 +11,122 @@
|
||||
|
||||
*/
|
||||
|
||||
body { outline: 1px solid var(--blue-0)!important; }
|
||||
article { outline: 1px solid var(--blue-1)!important; }
|
||||
nav { outline: 1px solid var(--blue-2)!important; }
|
||||
aside { outline: 1px solid var(--blue-3)!important; }
|
||||
section { outline: 1px solid var(--blue-4)!important; }
|
||||
header { outline: 1px solid var(--blue-5)!important; }
|
||||
footer { outline: 1px solid var(--blue-6)!important; }
|
||||
h1 { outline: 1px solid var(--blue-7)!important; }
|
||||
h2 { outline: 1px solid var(--blue-8)!important; }
|
||||
h3 { outline: 1px solid var(--blue-9)!important; }
|
||||
h4 { outline: 1px solid var(--blue-10)!important; }
|
||||
h5 { outline: 1px solid var(--blue-11)!important; }
|
||||
h6 { outline: 1px solid var(--indigo-0)!important; }
|
||||
main { outline: 1px solid var(--indigo-1)!important; }
|
||||
address { outline: 1px solid var(--indigo-2)!important; }
|
||||
div { outline: 1px solid var(--indigo-3)!important; }
|
||||
body { outline: 1px solid #2980B9!important; }
|
||||
article { outline: 1px solid #3498DB!important; }
|
||||
nav { outline: 1px solid #0088C3!important; }
|
||||
aside { outline: 1px solid #33A0CE!important; }
|
||||
section { outline: 1px solid #66B8DA!important; }
|
||||
header { outline: 1px solid #99CFE7!important; }
|
||||
footer { outline: 1px solid #CCE7F3!important; }
|
||||
h1 { outline: 1px solid #162544!important; }
|
||||
h2 { outline: 1px solid #314E6E!important; }
|
||||
h3 { outline: 1px solid #3E5E85!important; }
|
||||
h4 { outline: 1px solid #449BAF!important; }
|
||||
h5 { outline: 1px solid #C7D1CB!important; }
|
||||
h6 { outline: 1px solid #4371D0!important; }
|
||||
main { outline: 1px solid #2F4F90!important; }
|
||||
address { outline: 1px solid #1A2C51!important; }
|
||||
div { outline: 1px solid #036CDB!important; }
|
||||
|
||||
|
||||
p { outline: 1px solid var(--red-0)!important; }
|
||||
hr { outline: 1px solid var(--red-1)!important; }
|
||||
pre { outline: 1px solid var(--red-2)!important; }
|
||||
blockquote { outline: 1px solid var(--red-3)!important; }
|
||||
ol { outline: 1px solid var(--red-4)!important; }
|
||||
ul { outline: 1px solid var(--red-5)!important; }
|
||||
li { outline: 1px solid var(--red-6)!important; }
|
||||
dl { outline: 1px solid var(--red-7)!important; }
|
||||
dt { outline: 1px solid var(--red-8)!important; }
|
||||
dd { outline: 1px solid var(--red-9)!important; }
|
||||
figure { outline: 1px solid var(--red-10)!important; }
|
||||
figcaption { outline: 1px solid var(--red-11)!important; }
|
||||
p { outline: 1px solid #AC050B!important; }
|
||||
hr { outline: 1px solid #FF063F!important; }
|
||||
pre { outline: 1px solid #850440!important; }
|
||||
blockquote { outline: 1px solid #F1B8E7!important; }
|
||||
ol { outline: 1px solid #FF050C!important; }
|
||||
ul { outline: 1px solid #D90416!important; }
|
||||
li { outline: 1px solid #D90416!important; }
|
||||
dl { outline: 1px solid #FD3427!important; }
|
||||
dt { outline: 1px solid #FF0043!important; }
|
||||
dd { outline: 1px solid #E80174!important; }
|
||||
figure { outline: 1px solid #FF00BB!important; }
|
||||
figcaption { outline: 1px solid #BF0032!important; }
|
||||
|
||||
|
||||
|
||||
table { outline: 1px solid var(--teal-2)!important; }
|
||||
caption { outline: 1px solid var(--teal-3)!important; }
|
||||
thead { outline: 1px solid var(--teal-4)!important; }
|
||||
tbody { outline: 1px solid var(--teal-5)!important; }
|
||||
tfoot { outline: 1px solid var(--teal-6)!important; }
|
||||
tr { outline: 1px solid var(--teal-7)!important; }
|
||||
th { outline: 1px solid var(--teal-8)!important; }
|
||||
td { outline: 1px solid var(--teal-9)!important; }
|
||||
col { outline: 1px solid var(--teal-10)!important; }
|
||||
colgroup { outline: 1px solid var(--teal-11)!important; }
|
||||
table { outline: 1px solid #00CC99!important; }
|
||||
caption { outline: 1px solid #37FFC4!important; }
|
||||
thead { outline: 1px solid #98DACA!important; }
|
||||
tbody { outline: 1px solid #64A7A0!important; }
|
||||
tfoot { outline: 1px solid #22746B!important; }
|
||||
tr { outline: 1px solid #86C0B2!important; }
|
||||
th { outline: 1px solid #A1E7D6!important; }
|
||||
td { outline: 1px solid #3F5A54!important; }
|
||||
col { outline: 1px solid #6C9A8F!important; }
|
||||
colgroup { outline: 1px solid #6C9A9D!important; }
|
||||
|
||||
|
||||
button { outline: 1px solid var(--magenta-0)!important; }
|
||||
datalist { outline: 1px solid var(--magenta-1)!important; }
|
||||
fieldset { outline: 1px solid var(--magenta-2)!important; }
|
||||
form { outline: 1px solid var(--magenta-3)!important; }
|
||||
input { outline: 1px solid var(--magenta-4)!important; }
|
||||
keygen { outline: 1px solid var(--magenta-5)!important; }
|
||||
label { outline: 1px solid var(--magenta-6)!important; }
|
||||
legend { outline: 1px solid var(--magenta-7)!important; }
|
||||
meter { outline: 1px solid var(--magenta-8)!important; }
|
||||
optgroup { outline: 1px solid var(--magenta-9)!important; }
|
||||
option { outline: 1px solid var(--magenta-10)!important; }
|
||||
output { outline: 1px solid var(--magenta-11)!important; }
|
||||
progress { outline: 1px solid var(--violet-0)!important; }
|
||||
select { outline: 1px solid var(--violet-1)!important; }
|
||||
textarea { outline: 1px solid var(--violet-2)!important; }
|
||||
button { outline: 1px solid #DA8301!important; }
|
||||
datalist { outline: 1px solid #C06000!important; }
|
||||
fieldset { outline: 1px solid #D95100!important; }
|
||||
form { outline: 1px solid #D23600!important; }
|
||||
input { outline: 1px solid #FCA600!important; }
|
||||
keygen { outline: 1px solid #B31E00!important; }
|
||||
label { outline: 1px solid #EE8900!important; }
|
||||
legend { outline: 1px solid #DE6D00!important; }
|
||||
meter { outline: 1px solid #E8630C!important; }
|
||||
optgroup { outline: 1px solid #B33600!important; }
|
||||
option { outline: 1px solid #FF8A00!important; }
|
||||
output { outline: 1px solid #FF9619!important; }
|
||||
progress { outline: 1px solid #E57C00!important; }
|
||||
select { outline: 1px solid #E26E0F!important; }
|
||||
textarea { outline: 1px solid #CC5400!important; }
|
||||
|
||||
|
||||
|
||||
details { outline: 1px solid var(--cyan-0)!important; }
|
||||
summary { outline: 1px solid var(--cyan-1)!important; }
|
||||
command { outline: 1px solid var(--cyan-2)!important; }
|
||||
menu { outline: 1px solid var(--cyan-3)!important; }
|
||||
details { outline: 1px solid #33848F!important; }
|
||||
summary { outline: 1px solid #60A1A6!important; }
|
||||
command { outline: 1px solid #438DA1!important; }
|
||||
menu { outline: 1px solid #449DA6!important; }
|
||||
|
||||
|
||||
|
||||
del { outline: 1px solid var(--red-5)!important; }
|
||||
ins { outline: 1px solid var(--green-5)!important; }
|
||||
del { outline: 1px solid #BF0000!important; }
|
||||
ins { outline: 1px solid #400000!important; }
|
||||
|
||||
|
||||
|
||||
img { outline: 1px solid var(--green-0)!important; }
|
||||
iframe { outline: 1px solid var(--green-1)!important; }
|
||||
embed { outline: 1px solid var(--green-2)!important; }
|
||||
object { outline: 1px solid var(--green-3)!important; }
|
||||
param { outline: 1px solid var(--green-4)!important; }
|
||||
video { outline: 1px solid var(--green-6)!important; }
|
||||
audio { outline: 1px solid var(--green-7)!important; }
|
||||
source { outline: 1px solid var(--green-8)!important; }
|
||||
canvas { outline: 1px solid var(--green-9)!important; }
|
||||
track { outline: 1px solid var(--green-10)!important; }
|
||||
map { outline: 1px solid var(--green-11)!important; }
|
||||
area { outline: 1px solid var(--cyan-5)!important; }
|
||||
img { outline: 1px solid #22746B!important; }
|
||||
iframe { outline: 1px solid #64A7A0!important; }
|
||||
embed { outline: 1px solid #98DACA!important; }
|
||||
object { outline: 1px solid #00CC99!important; }
|
||||
param { outline: 1px solid #37FFC4!important; }
|
||||
video { outline: 1px solid #6EE866!important; }
|
||||
audio { outline: 1px solid #027353!important; }
|
||||
source { outline: 1px solid #012426!important; }
|
||||
canvas { outline: 1px solid #A2F570!important; }
|
||||
track { outline: 1px solid #59A600!important; }
|
||||
map { outline: 1px solid #7BE500!important; }
|
||||
area { outline: 1px solid #305900!important; }
|
||||
|
||||
|
||||
|
||||
a { outline: 1px solid var(--violet-0)!important; }
|
||||
em { outline: 1px solid var(--violet-1)!important; }
|
||||
strong { outline: 1px solid var(--violet-2)!important; }
|
||||
i { outline: 1px solid var(--violet-3)!important; }
|
||||
b { outline: 1px solid var(--violet-4)!important; }
|
||||
u { outline: 1px solid var(--violet-5)!important; }
|
||||
s { outline: 1px solid var(--violet-6)!important; }
|
||||
small { outline: 1px solid var(--violet-7)!important; }
|
||||
abbr { outline: 1px solid var(--violet-8)!important; }
|
||||
q { outline: 1px solid var(--violet-9)!important; }
|
||||
cite { outline: 1px solid var(--violet-10)!important; }
|
||||
dfn { outline: 1px solid var(--violet-11)!important; }
|
||||
sub { outline: 1px solid var(--red-orange-0)!important; }
|
||||
sup { outline: 1px solid var(--red-orange-1)!important; }
|
||||
time { outline: 1px solid var(--red-orange-2)!important; }
|
||||
code { outline: 1px solid var(--red-orange-3)!important; }
|
||||
kbd { outline: 1px solid var(--red-orange-4)!important; }
|
||||
samp { outline: 1px solid var(--red-orange-5)!important; }
|
||||
var { outline: 1px solid var(--red-orange-6)!important; }
|
||||
mark { outline: 1px solid var(--red-orange-7)!important; }
|
||||
bdi { outline: 1px solid var(--red-orange-8)!important; }
|
||||
bdo { outline: 1px solid var(--red-orange-9)!important; }
|
||||
ruby { outline: 1px solid var(--red-orange-10)!important; }
|
||||
ruby { outline: 1px solid var(--red-orange-11)!important; }
|
||||
rt { outline: 1px solid var(--yellow-6)!important; }
|
||||
rp { outline: 1px solid var(--yellow-7)!important; }
|
||||
span { outline: 1px solid var(--yellow-8)!important; }
|
||||
br { outline: 1px solid var(--yellow-9)!important; }
|
||||
wbr { outline: 1px solid var(--yellow-10)!important; }
|
||||
a { outline: 1px solid #FF62AB!important; }
|
||||
em { outline: 1px solid #800B41!important; }
|
||||
strong { outline: 1px solid #FF1583!important; }
|
||||
i { outline: 1px solid #803156!important; }
|
||||
b { outline: 1px solid #CC1169!important; }
|
||||
u { outline: 1px solid #FF0430!important; }
|
||||
s { outline: 1px solid #F805E3!important; }
|
||||
small { outline: 1px solid #D107B2!important; }
|
||||
abbr { outline: 1px solid #4A0263!important; }
|
||||
q { outline: 1px solid #240018!important; }
|
||||
cite { outline: 1px solid #64003C!important; }
|
||||
dfn { outline: 1px solid #B4005A!important; }
|
||||
sub { outline: 1px solid #DBA0C8!important; }
|
||||
sup { outline: 1px solid #CC0256!important; }
|
||||
time { outline: 1px solid #D6606D!important; }
|
||||
code { outline: 1px solid #E04251!important; }
|
||||
kbd { outline: 1px solid #5E001F!important; }
|
||||
samp { outline: 1px solid #9C0033!important; }
|
||||
var { outline: 1px solid #D90047!important; }
|
||||
mark { outline: 1px solid #FF0053!important; }
|
||||
bdi { outline: 1px solid #BF3668!important; }
|
||||
bdo { outline: 1px solid #6F1400!important; }
|
||||
ruby { outline: 1px solid #FF7B93!important; }
|
||||
rt { outline: 1px solid #FF2F54!important; }
|
||||
rp { outline: 1px solid #803E49!important; }
|
||||
span { outline: 1px solid #CC2643!important; }
|
||||
br { outline: 1px solid #DB687D!important; }
|
||||
wbr { outline: 1px solid #DB175B!important; }
|
||||
|
||||
|
||||
133
src/_display.css
133
src/_display.css
@ -10,86 +10,95 @@
|
||||
n = none
|
||||
b = block
|
||||
ib = inline-block
|
||||
if = inline-flex
|
||||
ig = inline-grid
|
||||
f = flex
|
||||
g = grid
|
||||
it = inline-table
|
||||
t = table
|
||||
tc = table-cell
|
||||
t-row = table-row
|
||||
t-columm = table-column
|
||||
t-column-group = table-column-group
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.dn { display: none; }
|
||||
.di { display: inline; }
|
||||
.db { display: block; }
|
||||
.dib { display: inline-block; }
|
||||
.df, .flex { display: flex; }
|
||||
.dif, .inline-flex { display: inline-flex; }
|
||||
.dg,
|
||||
.grid {
|
||||
display: grid;
|
||||
.dn { display: none; }
|
||||
.di { display: inline; }
|
||||
.db { display: block; }
|
||||
.dib { display: inline-block; }
|
||||
.dit { display: inline-table; }
|
||||
.dt { display: table; }
|
||||
.dtc { display: table-cell; }
|
||||
.dt-row { display: table-row; }
|
||||
.dt-row-group { display: table-row-group; }
|
||||
.dt-column { display: table-column; }
|
||||
.dt-column-group { display: table-column-group; }
|
||||
|
||||
/*
|
||||
This will set table to full width and then
|
||||
all cells will be equal width
|
||||
*/
|
||||
.dt--fixed {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dig,
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
}
|
||||
@media (--breakpoint-not-small) {
|
||||
.dn-ns { display: none; }
|
||||
.di-ns { display: inline; }
|
||||
.db-ns { display: block; }
|
||||
.dib-ns { display: inline-block; }
|
||||
.dit-ns { display: inline-table; }
|
||||
.dt-ns { display: table; }
|
||||
.dtc-ns { display: table-cell; }
|
||||
.dt-row-ns { display: table-row; }
|
||||
.dt-row-group-ns { display: table-row-group; }
|
||||
.dt-column-ns { display: table-column; }
|
||||
.dt-column-group-ns { display: table-column-group; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.dn-s { display: none; }
|
||||
.di-s { display: inline; }
|
||||
.db-s { display: block; }
|
||||
.dib-s { display: inline-block; }
|
||||
.df-s, .flex-s { display: flex; }
|
||||
.dif-s, .inline-flex-s { display: inline-flex; }
|
||||
.dg-s,
|
||||
.grid-s {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.dig-s,
|
||||
.inline-grid-s {
|
||||
display: inline-grid;
|
||||
.dt--fixed-ns {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.dn-m { display: none; }
|
||||
.di-m { display: inline; }
|
||||
.db-m { display: block; }
|
||||
.dib-m { display: inline-block; }
|
||||
.dit-m { display: inline-table; }
|
||||
.dt-m { display: table; }
|
||||
.dtc-m { display: table-cell; }
|
||||
.dt-row-m { display: table-row; }
|
||||
.dt-row-group-m { display: table-row-group; }
|
||||
.dt-column-m { display: table-column; }
|
||||
.dt-column-group-m { display: table-column-group; }
|
||||
|
||||
.dn-m { display: none; }
|
||||
.di-m { display: inline; }
|
||||
.db-m { display: block; }
|
||||
.dib-m { display: inline-block; }
|
||||
.df-m, .flex-m { display: flex; }
|
||||
.dif-m, .inline-flex-m { display: inline-flex; }
|
||||
.dg-m,
|
||||
.grid-m {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.dig-m,
|
||||
.inline-grid-m {
|
||||
display: inline-grid;
|
||||
.dt--fixed-m {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.dn-l { display: none; }
|
||||
.di-l { display: inline; }
|
||||
.db-l { display: block; }
|
||||
.dib-l { display: inline-block; }
|
||||
.df-l, .flex-l { display: flex; }
|
||||
.dif-l, .inline-flex-l { display: inline-flex; }
|
||||
.dg-l,
|
||||
.grid-l {
|
||||
display: grid;
|
||||
}
|
||||
@media (--breakpoint-large) {
|
||||
.dn-l { display: none; }
|
||||
.di-l { display: inline; }
|
||||
.db-l { display: block; }
|
||||
.dib-l { display: inline-block; }
|
||||
.dit-l { display: inline-table; }
|
||||
.dt-l { display: table; }
|
||||
.dtc-l { display: table-cell; }
|
||||
.dt-row-l { display: table-row; }
|
||||
.dt-row-group-l { display: table-row-group; }
|
||||
.dt-column-l { display: table-column; }
|
||||
.dt-column-group-l { display: table-column-group; }
|
||||
|
||||
.dig-l,
|
||||
.inline-grid-l {
|
||||
display: inline-grid;
|
||||
.dt--fixed-l {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,113 +0,0 @@
|
||||
html {}
|
||||
|
||||
body {}
|
||||
article {}
|
||||
section {}
|
||||
nav {}
|
||||
aside {}
|
||||
h1 {}
|
||||
h2 {}
|
||||
h3 {}
|
||||
h4 {}
|
||||
h5 {}
|
||||
h6 {}
|
||||
header {}
|
||||
footer {}
|
||||
address {}
|
||||
|
||||
p {}
|
||||
hr {}
|
||||
pre {}
|
||||
blockquote {}
|
||||
ol {}
|
||||
ul {}
|
||||
li {}
|
||||
dl {}
|
||||
dt {}
|
||||
dd {}
|
||||
figure {}
|
||||
figcaption {}
|
||||
main {}
|
||||
div {}
|
||||
|
||||
a {}
|
||||
em {}
|
||||
strong {}
|
||||
small {}
|
||||
s {}
|
||||
cite {}
|
||||
q {}
|
||||
dfn {}
|
||||
abbr {}
|
||||
ruby {}
|
||||
rt {}
|
||||
rp {}
|
||||
data {}
|
||||
time {}
|
||||
code {}
|
||||
var {}
|
||||
samp {}
|
||||
kbd {}
|
||||
sub {}
|
||||
sup {}
|
||||
i {}
|
||||
b {}
|
||||
u {}
|
||||
mark {}
|
||||
bdi {}
|
||||
bdo {}
|
||||
span {}
|
||||
br {}
|
||||
wbr {}
|
||||
|
||||
area {}
|
||||
map {}
|
||||
|
||||
ins {}
|
||||
del {}
|
||||
|
||||
picture {}
|
||||
source {}
|
||||
img {}
|
||||
iframe {}
|
||||
embed {}
|
||||
object {}
|
||||
param {}
|
||||
video {}
|
||||
audio {}
|
||||
track {}
|
||||
|
||||
table {}
|
||||
caption {}
|
||||
colgroup {}
|
||||
col {}
|
||||
tbody {}
|
||||
thead {}
|
||||
tfoot {}
|
||||
tr {}
|
||||
td {}
|
||||
th {}
|
||||
|
||||
form {}
|
||||
fieldset {}
|
||||
legend {}
|
||||
label {}
|
||||
input {}
|
||||
button {}
|
||||
select {}
|
||||
datalist {}
|
||||
optgroup {}
|
||||
option {}
|
||||
textarea {}
|
||||
output {}
|
||||
progress {}
|
||||
meter {}
|
||||
|
||||
details {}
|
||||
summary {}
|
||||
dialog {}
|
||||
menu {}
|
||||
menuitem {}
|
||||
slot {}
|
||||
template {}
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
/*
|
||||
|
||||
FILTER EFFECTS
|
||||
|
||||
- Blur
|
||||
- Grayscale
|
||||
- Hue Rotate
|
||||
- Invert
|
||||
|
||||
*/
|
||||
|
||||
.filter-none { filter: none; }
|
||||
|
||||
.blur1 { filter: blur(4px); }
|
||||
.blur2 { filter: blur(16px); }
|
||||
.blur3 { filter: blur(96px); }
|
||||
|
||||
.grayscale1 { filter: grayscale(0); }
|
||||
.grayscale2 { filter: grayscale(50%); }
|
||||
.grayscale3 { filter: grayscale(100%); }
|
||||
|
||||
.hue-rotate0 { filter: hue-rotate(0deg);}
|
||||
.hue-rotate1 { filter: hue-rotate(45deg);}
|
||||
.hue-rotate2 { filter: hue-rotate(90deg);}
|
||||
.hue-rotate3 { filter: hue-rotate(135deg);}
|
||||
.hue-rotate4 { filter: hue-rotate(180deg);}
|
||||
.hue-rotate5 { filter: hue-rotate(225deg);}
|
||||
.hue-rotate6 { filter: hue-rotate(270deg);}
|
||||
.hue-rotate7 { filter: hue-rotate(315deg);}
|
||||
|
||||
.invert { filter: invert(100%); }
|
||||
|
||||
/* TODO: Add drop-shadow */
|
||||
|
||||
.filter-none-hover:hover { filter: none; }
|
||||
|
||||
.blur1-hover:hover { filter: blur(4px); }
|
||||
.blur2-hover:hover { filter: blur(16px); }
|
||||
.blur3-hover:hover { filter: blur(96px); }
|
||||
|
||||
.grayscale1-hover:hover { filter: grayscale(0); }
|
||||
.grayscale2-hover:hover { filter: grayscale(50%); }
|
||||
.grayscale3-hover:hover { filter: grayscale(100%); }
|
||||
|
||||
.hue-rotate0-hover:hover { filter: hue-rotate(0deg);}
|
||||
.hue-rotate1-hover:hover { filter: hue-rotate(45deg);}
|
||||
.hue-rotate2-hover:hover { filter: hue-rotate(90deg);}
|
||||
.hue-rotate3-hover:hover { filter: hue-rotate(135deg);}
|
||||
.hue-rotate4-hover:hover { filter: hue-rotate(180deg);}
|
||||
.hue-rotate5-hover:hover { filter: hue-rotate(225deg);}
|
||||
.hue-rotate6-hover:hover { filter: hue-rotate(270deg);}
|
||||
.hue-rotate7-hover:hover { filter: hue-rotate(315deg);}
|
||||
|
||||
.invert-hover:hover { filter: invert(100%); }
|
||||
|
||||
.blur1-focus:focus { filter: blur(4px); }
|
||||
.blur2-focus:focus { filter: blur(16px); }
|
||||
.blur3-focus:focus { filter: blur(96px); }
|
||||
|
||||
.grayscale1-focus:focus { filter: grayscale(0); }
|
||||
.grayscale2-focus:focus { filter: grayscale(50%); }
|
||||
.grayscale3-focus:focus { filter: grayscale(100%); }
|
||||
|
||||
.hue-rotate0-focus:focus { filter: hue-rotate(0deg);}
|
||||
.hue-rotate1-focus:focus { filter: hue-rotate(45deg);}
|
||||
.hue-rotate2-focus:focus { filter: hue-rotate(90deg);}
|
||||
.hue-rotate3-focus:focus { filter: hue-rotate(135deg);}
|
||||
.hue-rotate4-focus:focus { filter: hue-rotate(180deg);}
|
||||
.hue-rotate5-focus:focus { filter: hue-rotate(225deg);}
|
||||
.hue-rotate6-focus:focus { filter: hue-rotate(270deg);}
|
||||
.hue-rotate7-focus:focus { filter: hue-rotate(315deg);}
|
||||
|
||||
.invert-focus:focus { filter: invert(100%); }
|
||||
@ -1,37 +0,0 @@
|
||||
/*
|
||||
|
||||
FLEX-DIRECTION
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-column-reverse { flex-direction: column-reverse; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.flex-column-s { flex-direction: column; }
|
||||
.flex-row-s { flex-direction: row; }
|
||||
.flex-column-reverse-s { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-s { flex-direction: row-reverse; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.flex-column-m { flex-direction: column; }
|
||||
.flex-row-m { flex-direction: row; }
|
||||
.flex-column-reverse-m { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-m { flex-direction: row-reverse; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.flex-column-l { flex-direction: column; }
|
||||
.flex-row-l { flex-direction: row; }
|
||||
.flex-column-reverse-l { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-l { flex-direction: row-reverse; }
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
/*
|
||||
|
||||
FLEX-WRAP
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.flex-wrap-s { flex-wrap: wrap; }
|
||||
.flex-nowrap-s { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-s { flex-wrap: wrap-reverse; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.flex-wrap-m { flex-wrap: wrap; }
|
||||
.flex-nowrap-m { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.flex-wrap-l { flex-wrap: wrap; }
|
||||
.flex-nowrap-l { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
|
||||
}
|
||||
198
src/_flexbox.css
198
src/_flexbox.css
@ -3,12 +3,15 @@
|
||||
FLEXBOX
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.flex { display: flex; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
|
||||
/* 1. Fix for Chrome 44 bug.
|
||||
* https://code.google.com/p/chromium/issues/detail?id=506893 */
|
||||
.flex-auto {
|
||||
@ -19,29 +22,115 @@
|
||||
|
||||
.flex-none { flex: none; }
|
||||
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse { flex-direction: column-reverse; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-center { align-items: center; }
|
||||
.items-baseline { align-items: baseline; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
.self-start { align-self: flex-start; }
|
||||
.self-end { align-self: flex-end; }
|
||||
.self-center { align-self: center; }
|
||||
.self-baseline { align-self: baseline; }
|
||||
.self-stretch { align-self: stretch; }
|
||||
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
.content-start { align-content: flex-start; }
|
||||
.content-end { align-content: flex-end; }
|
||||
.content-center { align-content: center; }
|
||||
.content-between { align-content: space-between; }
|
||||
.content-around { align-content: space-around; }
|
||||
.content-stretch { align-content: stretch; }
|
||||
|
||||
.order-0 { order: 0; }
|
||||
.order-1 { order: 1; }
|
||||
.order-2 { order: 2; }
|
||||
.order-3 { order: 3; }
|
||||
.order-4 { order: 4; }
|
||||
.order-5 { order: 5; }
|
||||
.order-6 { order: 6; }
|
||||
.order-7 { order: 7; }
|
||||
.order-8 { order: 8; }
|
||||
.order-last { order: 99999; }
|
||||
|
||||
.flex-grow-0 { flex-grow: 0; }
|
||||
.flex-grow-1 { flex-grow: 1; }
|
||||
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.flex-shrink-1 { flex-shrink: 1; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.flex-s { display: flex; }
|
||||
.inline-flex-s { display: inline-flex; }
|
||||
.flex-auto-s {
|
||||
@media (--breakpoint-not-small) {
|
||||
.flex-ns { display: flex; }
|
||||
.inline-flex-ns { display: inline-flex; }
|
||||
.flex-auto-ns {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0; /* 1 */
|
||||
min-height: 0; /* 1 */
|
||||
}
|
||||
.flex-none-s { flex: none; }
|
||||
.flex-none-ns { flex: none; }
|
||||
.flex-column-ns { flex-direction: column; }
|
||||
.flex-row-ns { flex-direction: row; }
|
||||
.flex-wrap-ns { flex-wrap: wrap; }
|
||||
.flex-nowrap-ns { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-ns { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-ns { flex-direction: row-reverse; }
|
||||
.items-start-ns { align-items: flex-start; }
|
||||
.items-end-ns { align-items: flex-end; }
|
||||
.items-center-ns { align-items: center; }
|
||||
.items-baseline-ns { align-items: baseline; }
|
||||
.items-stretch-ns { align-items: stretch; }
|
||||
|
||||
.flex-grow-0-s { flex-grow: 0; }
|
||||
.flex-grow-1-s { flex-grow: 1; }
|
||||
.self-start-ns { align-self: flex-start; }
|
||||
.self-end-ns { align-self: flex-end; }
|
||||
.self-center-ns { align-self: center; }
|
||||
.self-baseline-ns { align-self: baseline; }
|
||||
.self-stretch-ns { align-self: stretch; }
|
||||
|
||||
.flex-shrink-0-s { flex-shrink: 0; }
|
||||
.flex-shrink-1-s { flex-shrink: 1; }
|
||||
.justify-start-ns { justify-content: flex-start; }
|
||||
.justify-end-ns { justify-content: flex-end; }
|
||||
.justify-center-ns { justify-content: center; }
|
||||
.justify-between-ns { justify-content: space-between; }
|
||||
.justify-around-ns { justify-content: space-around; }
|
||||
|
||||
.content-start-ns { align-content: flex-start; }
|
||||
.content-end-ns { align-content: flex-end; }
|
||||
.content-center-ns { align-content: center; }
|
||||
.content-between-ns { align-content: space-between; }
|
||||
.content-around-ns { align-content: space-around; }
|
||||
.content-stretch-ns { align-content: stretch; }
|
||||
|
||||
.order-0-ns { order: 0; }
|
||||
.order-1-ns { order: 1; }
|
||||
.order-2-ns { order: 2; }
|
||||
.order-3-ns { order: 3; }
|
||||
.order-4-ns { order: 4; }
|
||||
.order-5-ns { order: 5; }
|
||||
.order-6-ns { order: 6; }
|
||||
.order-7-ns { order: 7; }
|
||||
.order-8-ns { order: 8; }
|
||||
.order-last-ns { order: 99999; }
|
||||
|
||||
.flex-grow-0-ns { flex-grow: 0; }
|
||||
.flex-grow-1-ns { flex-grow: 1; }
|
||||
|
||||
.flex-shrink-0-ns { flex-shrink: 0; }
|
||||
.flex-shrink-1-ns { flex-shrink: 1; }
|
||||
}
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.flex-m { display: flex; }
|
||||
.inline-flex-m { display: inline-flex; }
|
||||
.flex-auto-m {
|
||||
@ -50,6 +139,48 @@
|
||||
min-height: 0; /* 1 */
|
||||
}
|
||||
.flex-none-m { flex: none; }
|
||||
.flex-column-m { flex-direction: column; }
|
||||
.flex-row-m { flex-direction: row; }
|
||||
.flex-wrap-m { flex-wrap: wrap; }
|
||||
.flex-nowrap-m { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-m { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-m { flex-direction: row-reverse; }
|
||||
.items-start-m { align-items: flex-start; }
|
||||
.items-end-m { align-items: flex-end; }
|
||||
.items-center-m { align-items: center; }
|
||||
.items-baseline-m { align-items: baseline; }
|
||||
.items-stretch-m { align-items: stretch; }
|
||||
|
||||
.self-start-m { align-self: flex-start; }
|
||||
.self-end-m { align-self: flex-end; }
|
||||
.self-center-m { align-self: center; }
|
||||
.self-baseline-m { align-self: baseline; }
|
||||
.self-stretch-m { align-self: stretch; }
|
||||
|
||||
.justify-start-m { justify-content: flex-start; }
|
||||
.justify-end-m { justify-content: flex-end; }
|
||||
.justify-center-m { justify-content: center; }
|
||||
.justify-between-m { justify-content: space-between; }
|
||||
.justify-around-m { justify-content: space-around; }
|
||||
|
||||
.content-start-m { align-content: flex-start; }
|
||||
.content-end-m { align-content: flex-end; }
|
||||
.content-center-m { align-content: center; }
|
||||
.content-between-m { align-content: space-between; }
|
||||
.content-around-m { align-content: space-around; }
|
||||
.content-stretch-m { align-content: stretch; }
|
||||
|
||||
.order-0-m { order: 0; }
|
||||
.order-1-m { order: 1; }
|
||||
.order-2-m { order: 2; }
|
||||
.order-3-m { order: 3; }
|
||||
.order-4-m { order: 4; }
|
||||
.order-5-m { order: 5; }
|
||||
.order-6-m { order: 6; }
|
||||
.order-7-m { order: 7; }
|
||||
.order-8-m { order: 8; }
|
||||
.order-last-m { order: 99999; }
|
||||
|
||||
.flex-grow-0-m { flex-grow: 0; }
|
||||
.flex-grow-1-m { flex-grow: 1; }
|
||||
@ -58,7 +189,7 @@
|
||||
.flex-shrink-1-m { flex-shrink: 1; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.flex-l { display: flex; }
|
||||
.inline-flex-l { display: inline-flex; }
|
||||
.flex-auto-l {
|
||||
@ -67,6 +198,49 @@
|
||||
min-height: 0; /* 1 */
|
||||
}
|
||||
.flex-none-l { flex: none; }
|
||||
.flex-column-l { flex-direction: column; }
|
||||
.flex-row-l { flex-direction: row; }
|
||||
.flex-wrap-l { flex-wrap: wrap; }
|
||||
.flex-nowrap-l { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
|
||||
.flex-column-reverse-l { flex-direction: column-reverse; }
|
||||
.flex-row-reverse-l { flex-direction: row-reverse; }
|
||||
|
||||
.items-start-l { align-items: flex-start; }
|
||||
.items-end-l { align-items: flex-end; }
|
||||
.items-center-l { align-items: center; }
|
||||
.items-baseline-l { align-items: baseline; }
|
||||
.items-stretch-l { align-items: stretch; }
|
||||
|
||||
.self-start-l { align-self: flex-start; }
|
||||
.self-end-l { align-self: flex-end; }
|
||||
.self-center-l { align-self: center; }
|
||||
.self-baseline-l { align-self: baseline; }
|
||||
.self-stretch-l { align-self: stretch; }
|
||||
|
||||
.justify-start-l { justify-content: flex-start; }
|
||||
.justify-end-l { justify-content: flex-end; }
|
||||
.justify-center-l { justify-content: center; }
|
||||
.justify-between-l { justify-content: space-between; }
|
||||
.justify-around-l { justify-content: space-around; }
|
||||
|
||||
.content-start-l { align-content: flex-start; }
|
||||
.content-end-l { align-content: flex-end; }
|
||||
.content-center-l { align-content: center; }
|
||||
.content-between-l { align-content: space-between; }
|
||||
.content-around-l { align-content: space-around; }
|
||||
.content-stretch-l { align-content: stretch; }
|
||||
|
||||
.order-0-l { order: 0; }
|
||||
.order-1-l { order: 1; }
|
||||
.order-2-l { order: 2; }
|
||||
.order-3-l { order: 3; }
|
||||
.order-4-l { order: 4; }
|
||||
.order-5-l { order: 5; }
|
||||
.order-6-l { order: 6; }
|
||||
.order-7-l { order: 7; }
|
||||
.order-8-l { order: 8; }
|
||||
.order-last-l { order: 99999; }
|
||||
|
||||
.flex-grow-0-l { flex-grow: 0; }
|
||||
.flex-grow-1-l { flex-grow: 1; }
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
n = none
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -26,24 +26,24 @@
|
||||
|
||||
|
||||
|
||||
.fl { float: left; }
|
||||
.fr { float: right; }
|
||||
.fl { float: left; _display: inline; }
|
||||
.fr { float: right; _display: inline; }
|
||||
.fn { float: none; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.fl-s { float: left; }
|
||||
.fr-s { float: right; }
|
||||
.fn-s { float: none; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.fl-ns { float: left; _display: inline; }
|
||||
.fr-ns { float: right; _display: inline; }
|
||||
.fn-ns { float: none; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.fl-m { float: left; }
|
||||
.fr-m { float: right; }
|
||||
@media (--breakpoint-medium) {
|
||||
.fl-m { float: left; _display: inline; }
|
||||
.fr-m { float: right; _display: inline; }
|
||||
.fn-m { float: none; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.fl-l { float: left; }
|
||||
.fr-l { float: right; }
|
||||
@media (--breakpoint-large) {
|
||||
.fl-l { float: left; _display: inline; }
|
||||
.fr-l { float: right; _display: inline; }
|
||||
.fn-l { float: none; }
|
||||
}
|
||||
|
||||
@ -5,6 +5,96 @@
|
||||
|
||||
*/
|
||||
|
||||
.f-heading { font-family: var(--font-family-heading, sans-serif); }
|
||||
.f-body { font-family: var(--font-family-body, sans-serif); }
|
||||
.f-mono { font-family: var(--font-family-mono, monospace); }
|
||||
|
||||
.sans-serif {
|
||||
font-family: -apple-system, BlinkMacSystemFont,
|
||||
'avenir next', avenir,
|
||||
'helvetica neue', helvetica,
|
||||
ubuntu,
|
||||
roboto, noto,
|
||||
'segoe ui', arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.serif {
|
||||
font-family: georgia,
|
||||
times,
|
||||
serif;
|
||||
}
|
||||
|
||||
.system-sans-serif {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.system-serif {
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
|
||||
/* Monospaced Typefaces (for code) */
|
||||
|
||||
/* From http://cssfontstack.com */
|
||||
code, .code {
|
||||
font-family: Consolas,
|
||||
monaco,
|
||||
monospace;
|
||||
}
|
||||
|
||||
.courier {
|
||||
font-family: 'Courier Next',
|
||||
courier,
|
||||
monospace;
|
||||
}
|
||||
|
||||
|
||||
/* Sans-Serif Typefaces */
|
||||
|
||||
.helvetica {
|
||||
font-family: 'helvetica neue', helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.avenir {
|
||||
font-family: 'avenir next', avenir,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* Serif Typefaces */
|
||||
|
||||
.athelas {
|
||||
font-family: athelas,
|
||||
georgia,
|
||||
serif;
|
||||
}
|
||||
|
||||
.georgia {
|
||||
font-family: georgia,
|
||||
serif;
|
||||
}
|
||||
|
||||
.times {
|
||||
font-family: times,
|
||||
serif;
|
||||
}
|
||||
|
||||
.bodoni {
|
||||
font-family: "Bodoni MT",
|
||||
serif;
|
||||
}
|
||||
|
||||
.calisto {
|
||||
font-family: "Calisto MT",
|
||||
serif;
|
||||
}
|
||||
|
||||
.garamond {
|
||||
font-family: garamond,
|
||||
serif;
|
||||
}
|
||||
|
||||
.baskerville {
|
||||
font-family: baskerville,
|
||||
serif;
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
Docs: http://tachyons.io/docs/typography/font-style/
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -13,3 +13,17 @@
|
||||
.i { font-style: italic; }
|
||||
.fs-normal { font-style: normal; }
|
||||
|
||||
@media (--breakpoint-not-small) {
|
||||
.i-ns { font-style: italic; }
|
||||
.fs-normal-ns { font-style: normal; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium) {
|
||||
.i-m { font-style: italic; }
|
||||
.fs-normal-m { font-style: normal; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-large) {
|
||||
.i-l { font-style: italic; }
|
||||
.fs-normal-l { font-style: normal; }
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
9 = literal value 900
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -37,21 +37,21 @@
|
||||
.fw9 { font-weight: 900; }
|
||||
|
||||
|
||||
@container (min-width:30em) {
|
||||
.normal-s { font-weight: normal; }
|
||||
.b-s { font-weight: bold; }
|
||||
.fw1-s { font-weight: 100; }
|
||||
.fw2-s { font-weight: 200; }
|
||||
.fw3-s { font-weight: 300; }
|
||||
.fw4-s { font-weight: 400; }
|
||||
.fw5-s { font-weight: 500; }
|
||||
.fw6-s { font-weight: 600; }
|
||||
.fw7-s { font-weight: 700; }
|
||||
.fw8-s { font-weight: 800; }
|
||||
.fw9-s { font-weight: 900; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.normal-ns { font-weight: normal; }
|
||||
.b-ns { font-weight: bold; }
|
||||
.fw1-ns { font-weight: 100; }
|
||||
.fw2-ns { font-weight: 200; }
|
||||
.fw3-ns { font-weight: 300; }
|
||||
.fw4-ns { font-weight: 400; }
|
||||
.fw5-ns { font-weight: 500; }
|
||||
.fw6-ns { font-weight: 600; }
|
||||
.fw7-ns { font-weight: 700; }
|
||||
.fw8-ns { font-weight: 800; }
|
||||
.fw9-ns { font-weight: 900; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.normal-m { font-weight: normal; }
|
||||
.b-m { font-weight: bold; }
|
||||
.fw1-m { font-weight: 100; }
|
||||
@ -65,7 +65,7 @@
|
||||
.fw9-m { font-weight: 900; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.normal-l { font-weight: normal; }
|
||||
.b-l { font-weight: bold; }
|
||||
.fw1-l { font-weight: 100; }
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
.input-reset {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.button-reset::-moz-focus-inner,
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
GAP: GRID AND FLEX SPACING
|
||||
Docs: http://tachyons.io/docs/layout/gap/
|
||||
|
||||
Base:
|
||||
g = gap
|
||||
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
|
||||
.gc0 { gap-column: var(--spacing-0, 0); }
|
||||
.gc1 { gap-column: var(--spacing-1, 4px); }
|
||||
.gc2 { gap-column: var(--spacing-2, 8px); }
|
||||
.gc3 { gap-column: var(--spacing-3, 16px); }
|
||||
.gc4 { gap-column: var(--spacing-4, 32px); }
|
||||
.gc5 { gap-column: var(--spacing-5, 64px); }
|
||||
.gc6 { gap-column: var(--spacing-6, 128px); }
|
||||
.gc7 { gap-column: var(--spacing-7, 256px); }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.gc0-s { gap-column: var(--spacing-0, 0); }
|
||||
.gc1-s { gap-column: var(--spacing-1, 4px); }
|
||||
.gc2-s { gap-column: var(--spacing-2, 8px); }
|
||||
.gc3-s { gap-column: var(--spacing-3, 16px); }
|
||||
.gc4-s { gap-column: var(--spacing-4, 32px); }
|
||||
.gc5-s { gap-column: var(--spacing-5, 64px); }
|
||||
.gc6-s { gap-column: var(--spacing-6, 128px); }
|
||||
.gc7-s { gap-column: var(--spacing-7, 256px); }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.gc0-m { gap-column: var(--spacing-0, 0); }
|
||||
.gc1-m { gap-column: var(--spacing-1, 4px); }
|
||||
.gc2-m { gap-column: var(--spacing-2, 8px); }
|
||||
.gc3-m { gap-column: var(--spacing-3, 16px); }
|
||||
.gc4-m { gap-column: var(--spacing-4, 32px); }
|
||||
.gc5-m { gap-column: var(--spacing-5, 64px); }
|
||||
.gc6-m { gap-column: var(--spacing-6, 128px); }
|
||||
.gc7-m { gap-column: var(--spacing-7, 256px); }
|
||||
}
|
||||
|
||||
|
||||
@container (min-width:64em) {
|
||||
.gc0-l { gap-column: var(--spacing-0); }
|
||||
.gc1-l { gap-column: var(--spacing-1); }
|
||||
.gc2-l { gap-column: var(--spacing-2); }
|
||||
.gc3-l { gap-column: var(--spacing-3); }
|
||||
.gc4-l { gap-column: var(--spacing-4); }
|
||||
.gc5-l { gap-column: var(--spacing-5); }
|
||||
.gc6-l { gap-column: var(--spacing-6); }
|
||||
.gc7-l { gap-column: var(--spacing-7); }
|
||||
}
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
GAP: GRID AND FLEX SPACING
|
||||
Docs: http://tachyons.io/docs/layout/gap/
|
||||
|
||||
Base:
|
||||
g = gap
|
||||
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
|
||||
.gr0 { gap-row: var(--spacing-0, 0); }
|
||||
.gr1 { gap-row: var(--spacing-1, 4px); }
|
||||
.gr2 { gap-row: var(--spacing-2, 8px); }
|
||||
.gr3 { gap-row: var(--spacing-3, 16px); }
|
||||
.gr4 { gap-row: var(--spacing-4, 32px); }
|
||||
.gr5 { gap-row: var(--spacing-5, 64px); }
|
||||
.gr6 { gap-row: var(--spacing-6, 128px); }
|
||||
.gr7 { gap-row: var(--spacing-7, 256px); }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.gr0-s { gap-row: var(--spacing-0, 0); }
|
||||
.gr1-s { gap-row: var(--spacing-1, 4px); }
|
||||
.gr2-s { gap-row: var(--spacing-2, 8px); }
|
||||
.gr3-s { gap-row: var(--spacing-3, 16px); }
|
||||
.gr4-s { gap-row: var(--spacing-4, 32px); }
|
||||
.gr5-s { gap-row: var(--spacing-5, 64px); }
|
||||
.gr6-s { gap-row: var(--spacing-6, 128px); }
|
||||
.gr7-s { gap-row: var(--spacing-7, 256px); }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.gr0-m { gap-row: var(--spacing-0, 0); }
|
||||
.gr1-m { gap-row: var(--spacing-1, 4px); }
|
||||
.gr2-m { gap-row: var(--spacing-2, 8px); }
|
||||
.gr3-m { gap-row: var(--spacing-3, 16px); }
|
||||
.gr4-m { gap-row: var(--spacing-4, 32px); }
|
||||
.gr5-m { gap-row: var(--spacing-5, 64px); }
|
||||
.gr6-m { gap-row: var(--spacing-6, 128px); }
|
||||
.gr7-m { gap-row: var(--spacing-7, 256px); }
|
||||
}
|
||||
|
||||
|
||||
@container (min-width:64em) {
|
||||
.gr0-l { gap-row: var(--spacing-0); }
|
||||
.gr1-l { gap-row: var(--spacing-1); }
|
||||
.gr2-l { gap-row: var(--spacing-2); }
|
||||
.gr3-l { gap-row: var(--spacing-3); }
|
||||
.gr4-l { gap-row: var(--spacing-4); }
|
||||
.gr5-l { gap-row: var(--spacing-5); }
|
||||
.gr6-l { gap-row: var(--spacing-6); }
|
||||
.gr7-l { gap-row: var(--spacing-7); }
|
||||
}
|
||||
|
||||
59
src/_gap.css
59
src/_gap.css
@ -1,59 +0,0 @@
|
||||
/*
|
||||
GAP: GRID AND FLEX SPACING
|
||||
Docs: http://tachyons.io/docs/layout/gap/
|
||||
|
||||
Base:
|
||||
g = gap
|
||||
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
|
||||
.g0 { gap: var(--spacing-0, 0); }
|
||||
.g1 { gap: var(--spacing-1, 4px); }
|
||||
.g2 { gap: var(--spacing-2, 8px); }
|
||||
.g3 { gap: var(--spacing-3, 16px); }
|
||||
.g4 { gap: var(--spacing-4, 32px); }
|
||||
.g5 { gap: var(--spacing-5, 64px); }
|
||||
.g6 { gap: var(--spacing-6, 128px); }
|
||||
.g7 { gap: var(--spacing-7, 256px); }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.g0-s { gap: var(--spacing-0, 0); }
|
||||
.g1-s { gap: var(--spacing-1, 4px); }
|
||||
.g2-s { gap: var(--spacing-2, 8px); }
|
||||
.g3-s { gap: var(--spacing-3, 16px); }
|
||||
.g4-s { gap: var(--spacing-4, 32px); }
|
||||
.g5-s { gap: var(--spacing-5, 64px); }
|
||||
.g6-s { gap: var(--spacing-6, 128px); }
|
||||
.g7-s { gap: var(--spacing-7, 256px); }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.g0-m { gap: var(--spacing-0, 0); }
|
||||
.g1-m { gap: var(--spacing-1, 4px); }
|
||||
.g2-m { gap: var(--spacing-2, 8px); }
|
||||
.g3-m { gap: var(--spacing-3, 16px); }
|
||||
.g4-m { gap: var(--spacing-4, 32px); }
|
||||
.g5-m { gap: var(--spacing-5, 64px); }
|
||||
.g6-m { gap: var(--spacing-6, 128px); }
|
||||
.g7-m { gap: var(--spacing-7, 256px); }
|
||||
}
|
||||
|
||||
|
||||
@container (min-width:64em) {
|
||||
.g0-l { gap: var(--spacing-0); }
|
||||
.g1-l { gap: var(--spacing-1); }
|
||||
.g2-l { gap: var(--spacing-2); }
|
||||
.g3-l { gap: var(--spacing-3); }
|
||||
.g4-l { gap: var(--spacing-4); }
|
||||
.g5-l { gap: var(--spacing-5); }
|
||||
.g6-l { gap: var(--spacing-6); }
|
||||
.g7-l { gap: var(--spacing-7); }
|
||||
}
|
||||
|
||||
202
src/_glass.css
202
src/_glass.css
@ -1,202 +0,0 @@
|
||||
.glass1 {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass2 {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass3 {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass4 {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass5 {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass6 {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass7 {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass8 {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass9 {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass10 {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass1-hover:hover {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass2-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass3-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass4-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass5-hover:hover {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass6-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass7-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass8-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass9-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass10-hover:hover {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass1-focus:focus {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass2-focus:focus {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass3-focus:focus {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass4-focus:focus {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass5-focus:focus {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass6-focus:focus {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass7-focus:focus {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass8-focus:focus {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass9-focus:focus {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass10-focus:focus {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
/*
|
||||
|
||||
GRADIENTS
|
||||
|
||||
|
||||
*/
|
||||
|
||||
.gradient-1 {
|
||||
background: linear-gradient(
|
||||
var(--gradient-degree),
|
||||
var(--gradient-color-1),
|
||||
var(--gradient-color-2)
|
||||
);
|
||||
}
|
||||
|
||||
.gradient-2 {
|
||||
background: linear-gradient(
|
||||
var(--gradient-degree),
|
||||
var(--gradient-color-1) var(--gradient-stop),
|
||||
var(--gradient-color-2) var(--gradient-stop)
|
||||
);
|
||||
}
|
||||
|
||||
.gradient-3 {
|
||||
background: repeating-linear-gradient(
|
||||
var(--gradient-degree),
|
||||
transparent 0px,
|
||||
transparent var(--gradient-stripe-width),
|
||||
var(--gradient-color-1) var(--gradient-stripe-width),
|
||||
var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
|
||||
);
|
||||
}
|
||||
|
||||
.gradient-4 {
|
||||
background: repeating-radial-gradient(
|
||||
circle,
|
||||
transparent 0px,
|
||||
transparent var(--gradient-stripe-width),
|
||||
var(--gradient-color-1) var(--gradient-stripe-width),
|
||||
var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@container (min-width:30em) {
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
|
||||
}
|
||||
|
||||
@ -1,242 +0,0 @@
|
||||
/*
|
||||
|
||||
Grid Column
|
||||
Docs: http://tachyons.io/docs/grid-column
|
||||
|
||||
This sets the width of the element via declaring how many columns wide it should be
|
||||
|
||||
Base:
|
||||
cols = columns
|
||||
|
||||
*/
|
||||
|
||||
.col-1 { grid-column: span 1 / span 1; }
|
||||
.col-2 { grid-column: span 2 / span 2; }
|
||||
.col-3 { grid-column: span 3 / span 3; }
|
||||
.col-4 { grid-column: span 4 / span 4; }
|
||||
.col-5 { grid-column: span 5 / span 5; }
|
||||
.col-6 { grid-column: span 6 / span 6; }
|
||||
.col-7 { grid-column: span 7 / span 7; }
|
||||
.col-8 { grid-column: span 8 / span 8; }
|
||||
.col-9 { grid-column: span 9 / span 9; }
|
||||
.col-10 { grid-column: span 10 / span 10; }
|
||||
.col-11 { grid-column: span 11 / span 11; }
|
||||
.col-12 { grid-column: span 12 / span 12; }
|
||||
.col-13 { grid-column: span 13 / span 13; }
|
||||
.col-14 { grid-column: span 14 / span 14; }
|
||||
.col-15 { grid-column: span 15 / span 15; }
|
||||
.col-16 { grid-column: span 16 / span 16; }
|
||||
.col-full { grid-column: 1 / -1; }
|
||||
.col-center1 { grid-column: 2 / -2; }
|
||||
.col-center2 { grid-column: 3 / -3; }
|
||||
.col-center3 { grid-column: 4 / -4; }
|
||||
.col-center4 { grid-column: 6 / -6; }
|
||||
.col-auto { grid-column: auto; }
|
||||
|
||||
.start-1 { grid-column-start: 1; }
|
||||
.start-2 { grid-column-start: 2; }
|
||||
.start-3 { grid-column-start: 3; }
|
||||
.start-4 { grid-column-start: 4; }
|
||||
.start-5 { grid-column-start: 5; }
|
||||
.start-6 { grid-column-start: 6; }
|
||||
.start-7 { grid-column-start: 7; }
|
||||
.start-8 { grid-column-start: 8; }
|
||||
.start-9 { grid-column-start: 9; }
|
||||
.start-10 { grid-column-start: 10; }
|
||||
.start-11 { grid-column-start: 11; }
|
||||
.start-12 { grid-column-start: 12; }
|
||||
.start-13 { grid-column-start: 13; }
|
||||
.start-14 { grid-column-start: 14; }
|
||||
.start-15 { grid-column-start: 15; }
|
||||
|
||||
.end-1 { grid-column-end: 1; }
|
||||
.end-2 { grid-column-end: 2; }
|
||||
.end-3 { grid-column-end: 3; }
|
||||
.end-4 { grid-column-end: 4; }
|
||||
.end-5 { grid-column-end: 5; }
|
||||
.end-6 { grid-column-end: 6; }
|
||||
.end-7 { grid-column-end: 7; }
|
||||
.end-8 { grid-column-end: 8; }
|
||||
.end-9 { grid-column-end: 9; }
|
||||
.end-10 { grid-column-end: 10; }
|
||||
.end-11 { grid-column-end: 11; }
|
||||
.end-12 { grid-column-end: 12; }
|
||||
.end-13 { grid-column-end: 13; }
|
||||
.end-14 { grid-column-end: 14; }
|
||||
.end-15 { grid-column-end: 15; }
|
||||
.end-16 { grid-column-end: 16; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.col-1-s { grid-column: span 1 / span 1; }
|
||||
.col-2-s { grid-column: span 2 / span 2; }
|
||||
.col-3-s { grid-column: span 3 / span 3; }
|
||||
.col-4-s { grid-column: span 4 / span 4; }
|
||||
.col-5-s { grid-column: span 5 / span 5; }
|
||||
.col-6-s { grid-column: span 6 / span 6; }
|
||||
.col-7-s { grid-column: span 7 / span 7; }
|
||||
.col-8-s { grid-column: span 8 / span 8; }
|
||||
.col-9-s { grid-column: span 9 / span 9; }
|
||||
.col-10-s { grid-column: span 10 / span 10; }
|
||||
.col-11-s { grid-column: span 11 / span 11; }
|
||||
.col-12-s { grid-column: span 12 / span 12; }
|
||||
.col-13-s { grid-column: span 13 / span 13; }
|
||||
.col-14-s { grid-column: span 14 / span 14; }
|
||||
.col-15-s { grid-column: span 15 / span 15; }
|
||||
.col-16-s { grid-column: span 16 / span 16; }
|
||||
.col-full-s { grid-column: 1 / -1; }
|
||||
.col-center1-s { grid-column: 2 / -2; }
|
||||
.col-center2-s { grid-column: 3 / -3; }
|
||||
.col-center3-s { grid-column: 4 / -4; }
|
||||
.col-center4-s { grid-column: 6 / -6; }
|
||||
.col-auto-s { grid-column: auto; }
|
||||
|
||||
.start-1-s { grid-column-start: 1; }
|
||||
.start-2-s { grid-column-start: 2; }
|
||||
.start-3-s { grid-column-start: 3; }
|
||||
.start-4-s { grid-column-start: 4; }
|
||||
.start-5-s { grid-column-start: 5; }
|
||||
.start-6-s { grid-column-start: 6; }
|
||||
.start-7-s { grid-column-start: 7; }
|
||||
.start-8-s { grid-column-start: 8; }
|
||||
.start-9-s { grid-column-start: 9; }
|
||||
.start-10-s { grid-column-start: 10; }
|
||||
.start-11-s { grid-column-start: 11; }
|
||||
.start-12-s { grid-column-start: 12; }
|
||||
.start-13-s { grid-column-start: 13; }
|
||||
.start-14-s { grid-column-start: 14; }
|
||||
.start-15-s { grid-column-start: 15; }
|
||||
|
||||
.end-1-s { grid-column-end: 1; }
|
||||
.end-2-s { grid-column-end: 2; }
|
||||
.end-3-s { grid-column-end: 3; }
|
||||
.end-4-s { grid-column-end: 4; }
|
||||
.end-5-s { grid-column-end: 5; }
|
||||
.end-6-s { grid-column-end: 6; }
|
||||
.end-7-s { grid-column-end: 7; }
|
||||
.end-8-s { grid-column-end: 8; }
|
||||
.end-9-s { grid-column-end: 9; }
|
||||
.end-10-s { grid-column-end: 10; }
|
||||
.end-11-s { grid-column-end: 11; }
|
||||
.end-12-s { grid-column-end: 12; }
|
||||
.end-13-s { grid-column-end: 13; }
|
||||
.end-14-s { grid-column-end: 14; }
|
||||
.end-15-s { grid-column-end: 15; }
|
||||
.end-16-s { grid-column-end: 16; }
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.col-1-m { grid-column: span 1 / span 1; }
|
||||
.col-2-m { grid-column: span 2 / span 2; }
|
||||
.col-3-m { grid-column: span 3 / span 3; }
|
||||
.col-4-m { grid-column: span 4 / span 4; }
|
||||
.col-5-m { grid-column: span 5 / span 5; }
|
||||
.col-6-m { grid-column: span 6 / span 6; }
|
||||
.col-7-m { grid-column: span 7 / span 7; }
|
||||
.col-8-m { grid-column: span 8 / span 8; }
|
||||
.col-9-m { grid-column: span 9 / span 9; }
|
||||
.col-10-m { grid-column: span 10 / span 10; }
|
||||
.col-11-m { grid-column: span 11 / span 11; }
|
||||
.col-12-m { grid-column: span 12 / span 12; }
|
||||
.col-13-m { grid-column: span 13 / span 13; }
|
||||
.col-14-m { grid-column: span 14 / span 14; }
|
||||
.col-15-m { grid-column: span 15 / span 15; }
|
||||
.col-16-m { grid-column: span 16 / span 16; }
|
||||
.col-full-m { grid-column: 1 / -1; }
|
||||
.col-center1-m { grid-column: 2 / -2; }
|
||||
.col-center2-m { grid-column: 3 / -3; }
|
||||
.col-center3-m { grid-column: 4 / -4; }
|
||||
.col-center4-m { grid-column: 6 / -6; }
|
||||
.col-auto-m { grid-column: auto; }
|
||||
|
||||
.start-1-m { grid-column-start: 1; }
|
||||
.start-2-m { grid-column-start: 2; }
|
||||
.start-3-m { grid-column-start: 3; }
|
||||
.start-4-m { grid-column-start: 4; }
|
||||
.start-5-m { grid-column-start: 5; }
|
||||
.start-6-m { grid-column-start: 6; }
|
||||
.start-7-m { grid-column-start: 7; }
|
||||
.start-8-m { grid-column-start: 8; }
|
||||
.start-9-m { grid-column-start: 9; }
|
||||
.start-10-m { grid-column-start: 10; }
|
||||
.start-11-m { grid-column-start: 11; }
|
||||
.start-12-m { grid-column-start: 12; }
|
||||
.start-13-m { grid-column-start: 13; }
|
||||
.start-14-m { grid-column-start: 14; }
|
||||
.start-15-m { grid-column-start: 15; }
|
||||
|
||||
.end-1-m { grid-column-end: 1; }
|
||||
.end-2-m { grid-column-end: 2; }
|
||||
.end-3-m { grid-column-end: 3; }
|
||||
.end-4-m { grid-column-end: 4; }
|
||||
.end-5-m { grid-column-end: 5; }
|
||||
.end-6-m { grid-column-end: 6; }
|
||||
.end-7-m { grid-column-end: 7; }
|
||||
.end-8-m { grid-column-end: 8; }
|
||||
.end-9-m { grid-column-end: 9; }
|
||||
.end-10-m { grid-column-end: 10; }
|
||||
.end-11-m { grid-column-end: 11; }
|
||||
.end-12-m { grid-column-end: 12; }
|
||||
.end-13-m { grid-column-end: 13; }
|
||||
.end-14-m { grid-column-end: 14; }
|
||||
.end-15-m { grid-column-end: 15; }
|
||||
.end-16-m { grid-column-end: 16; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.col-1-l { grid-column: span 1 / span 1; }
|
||||
.col-2-l { grid-column: span 2 / span 2; }
|
||||
.col-3-l { grid-column: span 3 / span 3; }
|
||||
.col-4-l { grid-column: span 4 / span 4; }
|
||||
.col-5-l { grid-column: span 5 / span 5; }
|
||||
.col-6-l { grid-column: span 6 / span 6; }
|
||||
.col-7-l { grid-column: span 7 / span 7; }
|
||||
.col-8-l { grid-column: span 8 / span 8; }
|
||||
.col-9-l { grid-column: span 9 / span 9; }
|
||||
.col-10-l { grid-column: span 10 / span 10; }
|
||||
.col-11-l { grid-column: span 11 / span 11; }
|
||||
.col-12-l { grid-column: span 12 / span 12; }
|
||||
.col-13-l { grid-column: span 13 / span 13; }
|
||||
.col-14-l { grid-column: span 14 / span 14; }
|
||||
.col-15-l { grid-column: span 15 / span 15; }
|
||||
.col-16-l { grid-column: span 16 / span 16; }
|
||||
.col-full-l { grid-column: 1 / -1; }
|
||||
.col-center1-l { grid-column: 2 / -2; }
|
||||
.col-center2-l { grid-column: 3 / -3; }
|
||||
.col-center3-l { grid-column: 4 / -4; }
|
||||
.col-center4-l { grid-column: 6 / -6; }
|
||||
.col-auto-l { grid-column: auto; }
|
||||
|
||||
.start-1-l { grid-column-start: 1; }
|
||||
.start-2-l { grid-column-start: 2; }
|
||||
.start-3-l { grid-column-start: 3; }
|
||||
.start-4-l { grid-column-start: 4; }
|
||||
.start-5-l { grid-column-start: 5; }
|
||||
.start-6-l { grid-column-start: 6; }
|
||||
.start-7-l { grid-column-start: 7; }
|
||||
.start-8-l { grid-column-start: 8; }
|
||||
.start-9-l { grid-column-start: 9; }
|
||||
.start-10-l { grid-column-start: 10; }
|
||||
.start-11-l { grid-column-start: 11; }
|
||||
.start-12-l { grid-column-start: 12; }
|
||||
.start-13-l { grid-column-start: 13; }
|
||||
.start-14-l { grid-column-start: 14; }
|
||||
.start-15-l { grid-column-start: 15; }
|
||||
|
||||
.end-1-l { grid-column-end: 1; }
|
||||
.end-2-l { grid-column-end: 2; }
|
||||
.end-3-l { grid-column-end: 3; }
|
||||
.end-4-l { grid-column-end: 4; }
|
||||
.end-5-l { grid-column-end: 5; }
|
||||
.end-6-l { grid-column-end: 6; }
|
||||
.end-7-l { grid-column-end: 7; }
|
||||
.end-8-l { grid-column-end: 8; }
|
||||
.end-9-l { grid-column-end: 9; }
|
||||
.end-10-l { grid-column-end: 10; }
|
||||
.end-11-l { grid-column-end: 11; }
|
||||
.end-12-l { grid-column-end: 12; }
|
||||
.end-13-l { grid-column-end: 13; }
|
||||
.end-14-l { grid-column-end: 14; }
|
||||
.end-15-l { grid-column-end: 15; }
|
||||
.end-16-l { grid-column-end: 16; }
|
||||
}
|
||||
@ -1,161 +0,0 @@
|
||||
/*
|
||||
|
||||
Grid Row
|
||||
Docs: http://tachyons.io/docs/layout/grid-column-row
|
||||
|
||||
This sets the width of the element via declaring how many columns wide it should be
|
||||
|
||||
Base:
|
||||
cols = columns
|
||||
|
||||
*/
|
||||
|
||||
.row-auto { grid-row: auto; }
|
||||
|
||||
.row-start-1 { grid-row-start: 1; }
|
||||
.row-start-2 { grid-row-start: 2; }
|
||||
.row-start-3 { grid-row-start: 3; }
|
||||
.row-start-4 { grid-row-start: 4; }
|
||||
.row-start-5 { grid-row-start: 5; }
|
||||
.row-start-6 { grid-row-start: 6; }
|
||||
.row-start-7 { grid-row-start: 7; }
|
||||
.row-start-8 { grid-row-start: 8; }
|
||||
.row-start-9 { grid-row-start: 9; }
|
||||
.row-start-10 { grid-row-start: 10; }
|
||||
.row-start-11 { grid-row-start: 11; }
|
||||
.row-start-12 { grid-row-start: 12; }
|
||||
.row-start-13 { grid-row-start: 13; }
|
||||
.row-start-14 { grid-row-start: 14; }
|
||||
.row-start-15 { grid-row-start: 15; }
|
||||
.row-start-16 { grid-row-start: 16; }
|
||||
|
||||
.row-end-1 { grid-row-end: 1; }
|
||||
.row-end-2 { grid-row-end: 2; }
|
||||
.row-end-3 { grid-row-end: 3; }
|
||||
.row-end-4 { grid-row-end: 4; }
|
||||
.row-end-5 { grid-row-end: 5; }
|
||||
.row-end-6 { grid-row-end: 6; }
|
||||
.row-end-7 { grid-row-end: 7; }
|
||||
.row-end-8 { grid-row-end: 8; }
|
||||
.row-end-9 { grid-row-end: 9; }
|
||||
.row-end-10 { grid-row-end: 10; }
|
||||
.row-end-11 { grid-row-end: 11; }
|
||||
.row-end-12 { grid-row-end: 12; }
|
||||
.row-end-13 { grid-row-end: 13; }
|
||||
.row-end-14 { grid-row-end: 14; }
|
||||
.row-end-15 { grid-row-end: 15; }
|
||||
.row-end-16 { grid-row-end: 16; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.row-auto-s { grid-row: auto; }
|
||||
|
||||
.row-start-1-s { grid-row-start: 1; }
|
||||
.row-start-2-s { grid-row-start: 2; }
|
||||
.row-start-3-s { grid-row-start: 3; }
|
||||
.row-start-4-s { grid-row-start: 4; }
|
||||
.row-start-5-s { grid-row-start: 5; }
|
||||
.row-start-6-s { grid-row-start: 6; }
|
||||
.row-start-7-s { grid-row-start: 7; }
|
||||
.row-start-8-s { grid-row-start: 8; }
|
||||
.row-start-9-s { grid-row-start: 9; }
|
||||
.row-start-10-s { grid-row-start: 10; }
|
||||
.row-start-11-s { grid-row-start: 11; }
|
||||
.row-start-12-s { grid-row-start: 12; }
|
||||
.row-start-13-s { grid-row-start: 13; }
|
||||
.row-start-14-s { grid-row-start: 14; }
|
||||
.row-start-15-s { grid-row-start: 15; }
|
||||
.row-start-16-s { grid-row-start: 16; }
|
||||
|
||||
.row-end-1-s { grid-row-end: 1; }
|
||||
.row-end-2-s { grid-row-end: 2; }
|
||||
.row-end-3-s { grid-row-end: 3; }
|
||||
.row-end-4-s { grid-row-end: 4; }
|
||||
.row-end-5-s { grid-row-end: 5; }
|
||||
.row-end-6-s { grid-row-end: 6; }
|
||||
.row-end-7-s { grid-row-end: 7; }
|
||||
.row-end-8-s { grid-row-end: 8; }
|
||||
.row-end-9-s { grid-row-end: 9; }
|
||||
.row-end-10-s { grid-row-end: 10; }
|
||||
.row-end-11-s { grid-row-end: 11; }
|
||||
.row-end-12-s { grid-row-end: 12; }
|
||||
.row-end-13-s { grid-row-end: 13; }
|
||||
.row-end-14-s { grid-row-end: 14; }
|
||||
.row-end-15-s { grid-row-end: 15; }
|
||||
.row-end-16-s { grid-row-end: 16; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.row-auto-m { grid-row: auto; }
|
||||
|
||||
.row-start-1-m { grid-row-start: 1; }
|
||||
.row-start-2-m { grid-row-start: 2; }
|
||||
.row-start-3-m { grid-row-start: 3; }
|
||||
.row-start-4-m { grid-row-start: 4; }
|
||||
.row-start-5-m { grid-row-start: 5; }
|
||||
.row-start-6-m { grid-row-start: 6; }
|
||||
.row-start-7-m { grid-row-start: 7; }
|
||||
.row-start-8-m { grid-row-start: 8; }
|
||||
.row-start-9-m { grid-row-start: 9; }
|
||||
.row-start-10-m { grid-row-start: 10; }
|
||||
.row-start-11-m { grid-row-start: 11; }
|
||||
.row-start-12-m { grid-row-start: 12; }
|
||||
.row-start-13-m { grid-row-start: 13; }
|
||||
.row-start-14-m { grid-row-start: 14; }
|
||||
.row-start-15-m { grid-row-start: 15; }
|
||||
.row-start-16-m { grid-row-start: 16; }
|
||||
|
||||
.row-end-1-m { grid-row-end: 1; }
|
||||
.row-end-2-m { grid-row-end: 2; }
|
||||
.row-end-3-m { grid-row-end: 3; }
|
||||
.row-end-4-m { grid-row-end: 4; }
|
||||
.row-end-5-m { grid-row-end: 5; }
|
||||
.row-end-6-m { grid-row-end: 6; }
|
||||
.row-end-7-m { grid-row-end: 7; }
|
||||
.row-end-8-m { grid-row-end: 8; }
|
||||
.row-end-9-m { grid-row-end: 9; }
|
||||
.row-end-10-m { grid-row-end: 10; }
|
||||
.row-end-11-m { grid-row-end: 11; }
|
||||
.row-end-12-m { grid-row-end: 12; }
|
||||
.row-end-13-m { grid-row-end: 13; }
|
||||
.row-end-14-m { grid-row-end: 14; }
|
||||
.row-end-15-m { grid-row-end: 15; }
|
||||
.row-end-16-m { grid-row-end: 16; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.row-auto-l { grid-row: auto; }
|
||||
|
||||
.row-start-1-l { grid-row-start: 1; }
|
||||
.row-start-2-l { grid-row-start: 2; }
|
||||
.row-start-3-l { grid-row-start: 3; }
|
||||
.row-start-4-l { grid-row-start: 4; }
|
||||
.row-start-5-l { grid-row-start: 5; }
|
||||
.row-start-6-l { grid-row-start: 6; }
|
||||
.row-start-7-l { grid-row-start: 7; }
|
||||
.row-start-8-l { grid-row-start: 8; }
|
||||
.row-start-9-l { grid-row-start: 9; }
|
||||
.row-start-10-l { grid-row-start: 10; }
|
||||
.row-start-11-l { grid-row-start: 11; }
|
||||
.row-start-12-l { grid-row-start: 12; }
|
||||
.row-start-13-l { grid-row-start: 13; }
|
||||
.row-start-14-l { grid-row-start: 14; }
|
||||
.row-start-15-l { grid-row-start: 15; }
|
||||
.row-start-16-l { grid-row-start: 16; }
|
||||
|
||||
.row-end-1-l { grid-row-end: 1; }
|
||||
.row-end-2-l { grid-row-end: 2; }
|
||||
.row-end-3-l { grid-row-end: 3; }
|
||||
.row-end-4-l { grid-row-end: 4; }
|
||||
.row-end-5-l { grid-row-end: 5; }
|
||||
.row-end-6-l { grid-row-end: 6; }
|
||||
.row-end-7-l { grid-row-end: 7; }
|
||||
.row-end-8-l { grid-row-end: 8; }
|
||||
.row-end-9-l { grid-row-end: 9; }
|
||||
.row-end-10-l { grid-row-end: 10; }
|
||||
.row-end-11-l { grid-row-end: 11; }
|
||||
.row-end-12-l { grid-row-end: 12; }
|
||||
.row-end-13-l { grid-row-end: 13; }
|
||||
.row-end-14-l { grid-row-end: 14; }
|
||||
.row-end-15-l { grid-row-end: 15; }
|
||||
.row-end-16-l { grid-row-end: 16; }
|
||||
}
|
||||
@ -1,135 +0,0 @@
|
||||
/*
|
||||
|
||||
Grid Template Columns
|
||||
Docs: http://tachyons.io/docs/layout/grid-template-columns/
|
||||
|
||||
Base:
|
||||
cols = columns
|
||||
|
||||
*/
|
||||
|
||||
.cols-1 { grid-template-columns: repeat(1, 1fr) }
|
||||
.cols-2 { grid-template-columns: repeat(2, 1fr) }
|
||||
.cols-3 { grid-template-columns: repeat(3, 1fr) }
|
||||
.cols-4 { grid-template-columns: repeat(4, 1fr) }
|
||||
.cols-5 { grid-template-columns: repeat(5, 1fr) }
|
||||
.cols-6 { grid-template-columns: repeat(6, 1fr) }
|
||||
.cols-7 { grid-template-columns: repeat(7, 1fr) }
|
||||
.cols-8 { grid-template-columns: repeat(8, 1fr) }
|
||||
.cols-9 { grid-template-columns: repeat(9, 1fr) }
|
||||
.cols-10 { grid-template-columns: repeat(10, 1fr) }
|
||||
.cols-11 { grid-template-columns: repeat(11, 1fr) }
|
||||
.cols-12 { grid-template-columns: repeat(12, 1fr) }
|
||||
.cols-13 { grid-template-columns: repeat(13, 1fr) }
|
||||
.cols-14 { grid-template-columns: repeat(14, 1fr) }
|
||||
.cols-15 { grid-template-columns: repeat(15, 1fr) }
|
||||
.cols-16 { grid-template-columns: repeat(16, 1fr) }
|
||||
|
||||
.cols-min-32 { grid-template-columns: repeat(auto-fill, minmax( 32px, 1fr )); }
|
||||
.cols-min-64 { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
|
||||
.cols-min-128 { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
|
||||
.cols-min-192 { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
|
||||
.cols-min-240 { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
|
||||
.cols-min-256 { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
|
||||
.cols-min-320 { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
|
||||
.cols-min-480 { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
|
||||
|
||||
.masonry { grid-template-columns: masonry }
|
||||
.subgrid { grid-template-columns: subgrid }
|
||||
.cols-none { grid-template-columns: none }
|
||||
|
||||
|
||||
@container (min-width:30em) {
|
||||
.cols-1-s { grid-template-columns: repeat(1, 1fr) }
|
||||
.cols-2-s { grid-template-columns: repeat(2, 1fr) }
|
||||
.cols-3-s { grid-template-columns: repeat(3, 1fr) }
|
||||
.cols-4-s { grid-template-columns: repeat(4, 1fr) }
|
||||
.cols-5-s { grid-template-columns: repeat(5, 1fr) }
|
||||
.cols-6-s { grid-template-columns: repeat(6, 1fr) }
|
||||
.cols-7-s { grid-template-columns: repeat(7, 1fr) }
|
||||
.cols-8-s { grid-template-columns: repeat(8, 1fr) }
|
||||
.cols-9-s { grid-template-columns: repeat(9, 1fr) }
|
||||
.cols-10-s { grid-template-columns: repeat(10, 1fr) }
|
||||
.cols-11-s { grid-template-columns: repeat(11, 1fr) }
|
||||
.cols-12-s { grid-template-columns: repeat(12, 1fr) }
|
||||
.cols-13-s { grid-template-columns: repeat(13, 1fr) }
|
||||
.cols-14-s { grid-template-columns: repeat(14, 1fr) }
|
||||
.cols-15-s { grid-template-columns: repeat(15, 1fr) }
|
||||
.cols-16-s { grid-template-columns: repeat(16, 1fr) }
|
||||
|
||||
.cols-min-32-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
|
||||
.cols-min-64-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
|
||||
.cols-min-128-s { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
|
||||
.cols-min-192-s { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
|
||||
.cols-min-240-s { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
|
||||
.cols-min-256-s { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
|
||||
.cols-min-320-s { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
|
||||
.cols-min-480-s { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
|
||||
|
||||
.masonry-s { grid-template-columns: masonry }
|
||||
.subgrid-s { grid-template-columns: subgrid }
|
||||
.cols-none-s { grid-template-columns: none }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.cols-1-m { grid-template-columns: repeat(1, 1fr) }
|
||||
.cols-2-m { grid-template-columns: repeat(2, 1fr) }
|
||||
.cols-3-m { grid-template-columns: repeat(3, 1fr) }
|
||||
.cols-4-m { grid-template-columns: repeat(4, 1fr) }
|
||||
.cols-5-m { grid-template-columns: repeat(5, 1fr) }
|
||||
.cols-6-m { grid-template-columns: repeat(6, 1fr) }
|
||||
.cols-7-m { grid-template-columns: repeat(7, 1fr) }
|
||||
.cols-8-m { grid-template-columns: repeat(8, 1fr) }
|
||||
.cols-9-m { grid-template-columns: repeat(9, 1fr) }
|
||||
.cols-10-m { grid-template-columns: repeat(10, 1fr) }
|
||||
.cols-11-m { grid-template-columns: repeat(11, 1fr) }
|
||||
.cols-12-m { grid-template-columns: repeat(12, 1fr) }
|
||||
.cols-13-m { grid-template-columns: repeat(13, 1fr) }
|
||||
.cols-14-m { grid-template-columns: repeat(14, 1fr) }
|
||||
.cols-15-m { grid-template-columns: repeat(15, 1fr) }
|
||||
.cols-16-m { grid-template-columns: repeat(16, 1fr) }
|
||||
|
||||
.cols-min-64-m { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
|
||||
.cols-min-128-m { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
|
||||
.cols-min-192-m { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
|
||||
.cols-min-240-m { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
|
||||
.cols-min-256-m { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
|
||||
.cols-min-320-m { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
|
||||
.cols-min-480-m { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
|
||||
|
||||
.masonry-m { grid-template-columns: masonry }
|
||||
.subgrid-m { grid-template-columns: subgrid }
|
||||
.cols-none-m { grid-template-columns: none }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.cols-1-l { grid-template-columns: repeat(1, 1fr) }
|
||||
.cols-2-l { grid-template-columns: repeat(2, 1fr) }
|
||||
.cols-3-l { grid-template-columns: repeat(3, 1fr) }
|
||||
.cols-4-l { grid-template-columns: repeat(4, 1fr) }
|
||||
.cols-5-l { grid-template-columns: repeat(5, 1fr) }
|
||||
.cols-6-l { grid-template-columns: repeat(6, 1fr) }
|
||||
.cols-7-l { grid-template-columns: repeat(7, 1fr) }
|
||||
.cols-8-l { grid-template-columns: repeat(8, 1fr) }
|
||||
.cols-9-l { grid-template-columns: repeat(9, 1fr) }
|
||||
.cols-10-l { grid-template-columns: repeat(10, 1fr) }
|
||||
.cols-11-l { grid-template-columns: repeat(11, 1fr) }
|
||||
.cols-12-l { grid-template-columns: repeat(12, 1fr) }
|
||||
.cols-13-l { grid-template-columns: repeat(13, 1fr) }
|
||||
.cols-14-l { grid-template-columns: repeat(14, 1fr) }
|
||||
.cols-15-l { grid-template-columns: repeat(15, 1fr) }
|
||||
.cols-16-l { grid-template-columns: repeat(16, 1fr) }
|
||||
|
||||
.cols-min-64-l { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
|
||||
.cols-min-128-l { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
|
||||
.cols-min-192-l { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
|
||||
.cols-min-240-l { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
|
||||
.cols-min-256-l { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
|
||||
.cols-min-320-l { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
|
||||
.cols-min-480-l { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
|
||||
|
||||
.masonry-l { grid-template-columns: masonry }
|
||||
.subgrid-l { grid-template-columns: subgrid }
|
||||
.cols-none-l { grid-template-columns: none }
|
||||
}
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
/*
|
||||
|
||||
Grid
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.flow-row { grid-auto-flow: row; }
|
||||
.flow-column { grid-auto-flow: column; }
|
||||
.flow-dense { grid-auto-flow: dense; }
|
||||
|
||||
|
||||
@container (min-width:30em) {
|
||||
}
|
||||
@container (min-width:48em) {
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
/* TODO: Variables review
|
||||
/*
|
||||
|
||||
HEIGHTS
|
||||
Docs: http://tachyons.io/docs/layout/heights/
|
||||
@ -16,6 +16,7 @@
|
||||
4 = 4th step in height scale
|
||||
5 = 5th step in height scale
|
||||
|
||||
-25 = literal value 25%
|
||||
-50 = literal value 50%
|
||||
-75 = literal value 75%
|
||||
-100 = literal value 100%
|
||||
@ -24,7 +25,7 @@
|
||||
-inherit = string value of inherit
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -32,18 +33,15 @@
|
||||
|
||||
/* Height Scale */
|
||||
|
||||
.h0 { height: var(--size-0, 0); }
|
||||
.h1 { height: var(--size-1, 1rem); }
|
||||
.h2 { height: var(--size-2, 2rem); }
|
||||
.h3 { height: var(--size-3, 3rem); }
|
||||
.h4 { height: var(--size-4, 4rem); }
|
||||
.h5 { height: var(--size-5, 8rem); }
|
||||
.h6 { height: var(--size-6, 16rem); }
|
||||
.h7 { height: var(--size-7, 32rem); }
|
||||
.h8 { height: var(--size-8, 64rem); }
|
||||
.h1 { height: 1rem; }
|
||||
.h2 { height: 2rem; }
|
||||
.h3 { height: 4rem; }
|
||||
.h4 { height: 8rem; }
|
||||
.h5 { height: 16rem; }
|
||||
|
||||
/* Height Percentages - Based off of height of parent */
|
||||
|
||||
.h-25 { height: 25%; }
|
||||
.h-50 { height: 50%; }
|
||||
.h-75 { height: 75%; }
|
||||
.h-100 { height: 100%; }
|
||||
@ -65,35 +63,33 @@
|
||||
.h-auto { height: auto; }
|
||||
.h-inherit { height: inherit; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.h0-s { height: var(--size-0, 0); }
|
||||
.h1-s { height: var(--size-1, 1rem); }
|
||||
.h2-s { height: var(--size-2, 2rem); }
|
||||
.h3-s { height: var(--size-3, 3rem); }
|
||||
.h4-s { height: var(--size-4, 4rem); }
|
||||
.h5-s { height: var(--size-5, 8rem); }
|
||||
.h6-s { height: var(--size-6, 16rem); }
|
||||
.h7-s { height: var(--size-7, 32rem); }
|
||||
.h8-s { height: var(--size-8, 64rem); }
|
||||
.h-50-s { height: 50%; }
|
||||
.h-75-s { height: 75%; }
|
||||
.h-100-s { height: 100%; }
|
||||
.min-h-100-s { min-height: 100%; }
|
||||
.vh-25-s { height: 25vh; }
|
||||
.vh-50-s { height: 50vh; }
|
||||
.vh-75-s { height: 75vh; }
|
||||
.vh-100-s { height: 100vh; }
|
||||
.min-vh-100-s { min-height: 100vh; }
|
||||
.h-auto-s { height: auto; }
|
||||
.h-inherit-s { height: inherit; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.h1-ns { height: 1rem; }
|
||||
.h2-ns { height: 2rem; }
|
||||
.h3-ns { height: 4rem; }
|
||||
.h4-ns { height: 8rem; }
|
||||
.h5-ns { height: 16rem; }
|
||||
.h-25-ns { height: 25%; }
|
||||
.h-50-ns { height: 50%; }
|
||||
.h-75-ns { height: 75%; }
|
||||
.h-100-ns { height: 100%; }
|
||||
.min-h-100-ns { min-height: 100%; }
|
||||
.vh-25-ns { height: 25vh; }
|
||||
.vh-50-ns { height: 50vh; }
|
||||
.vh-75-ns { height: 75vh; }
|
||||
.vh-100-ns { height: 100vh; }
|
||||
.min-vh-100-ns { min-height: 100vh; }
|
||||
.h-auto-ns { height: auto; }
|
||||
.h-inherit-ns { height: inherit; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.h1-m { height: 1rem; }
|
||||
.h2-m { height: 2rem; }
|
||||
.h3-m { height: 4rem; }
|
||||
.h4-m { height: 8rem; }
|
||||
.h5-m { height: 16rem; }
|
||||
.h-25-m { height: 25%; }
|
||||
.h-50-m { height: 50%; }
|
||||
.h-75-m { height: 75%; }
|
||||
.h-100-m { height: 100%; }
|
||||
@ -107,12 +103,13 @@
|
||||
.h-inherit-m { height: inherit; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.h1-l { height: 1rem; }
|
||||
.h2-l { height: 2rem; }
|
||||
.h3-l { height: 4rem; }
|
||||
.h4-l { height: 8rem; }
|
||||
.h5-l { height: 16rem; }
|
||||
.h-25-l { height: 25%; }
|
||||
.h-50-l { height: 50%; }
|
||||
.h-75-l { height: 75%; }
|
||||
.h-100-l { height: 100%; }
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
- Grow
|
||||
- Pointer
|
||||
- Shadow
|
||||
- Colors
|
||||
|
||||
*/
|
||||
|
||||
@ -29,8 +28,7 @@
|
||||
transition: opacity .15s ease-in;
|
||||
}
|
||||
.dim:active {
|
||||
opacity: .8;
|
||||
transition: opacity .15s ease-out;
|
||||
opacity: .8; transition: opacity .15s ease-out;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -115,20 +113,16 @@
|
||||
|
||||
/* Add pointer on hover */
|
||||
|
||||
.pointer {
|
||||
.pointer:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trans-all {
|
||||
transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* TODO: Test and rename
|
||||
Add shadow on hover.
|
||||
|
||||
Performant box-shadow animation pattern from
|
||||
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
|
||||
*/
|
||||
|
||||
.shadow-hover {
|
||||
cursor: pointer;
|
||||
@ -154,24 +148,13 @@
|
||||
.shadow-hover:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Combine with classes in skins and skins-pseudo for
|
||||
* many different transition possibilities. */
|
||||
|
||||
.trans-bg {
|
||||
transition: background-color .25s ease-in-out;
|
||||
.bg-animate,
|
||||
.bg-animate:hover,
|
||||
.bg-animate:focus {
|
||||
transition: background-color .15s ease-in-out;
|
||||
}
|
||||
|
||||
.trans-color {
|
||||
transition: color .25s ease-in-out;
|
||||
}
|
||||
|
||||
.hover-filter-none:hover { filter: none; }
|
||||
|
||||
.hover-filter-blur-none:hover { filter: blur(0); }
|
||||
.hover-filter-blur:hover { filter: blur(96px); }
|
||||
|
||||
.hover-grayscale-0:hover { filter: grayscale(0); }
|
||||
.hover-grayscale-50:hover { filter: grayscale(50%); }
|
||||
.hover-grayscale-100:hover { filter: grayscale(100%); }
|
||||
|
||||
@ -5,19 +5,7 @@
|
||||
|
||||
*/
|
||||
|
||||
img { display: block; max-width: 100%; }
|
||||
/* Responsive images! */
|
||||
|
||||
.random-image {
|
||||
background-image: url(https://source.unsplash.com/random/);
|
||||
background-size: cover;
|
||||
}
|
||||
img { max-width: 100%; }
|
||||
|
||||
.random-image-landscape {
|
||||
background-image: url(https://source.unsplash.com/random/1920x1080);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.random-image-portrait {
|
||||
background-image: url(https://source.unsplash.com/random/1080x1920);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
/*
|
||||
|
||||
JUSTIFY-CONTENT
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
||||
|
||||
*/
|
||||
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.justify-start-s { justify-content: flex-start; }
|
||||
.justify-end-s { justify-content: flex-end; }
|
||||
.justify-center-s { justify-content: center; }
|
||||
.justify-between-s { justify-content: space-between; }
|
||||
.justify-around-s { justify-content: space-around; }
|
||||
}
|
||||
@container (min-width:48em) {
|
||||
.justify-start-m { justify-content: flex-start; }
|
||||
.justify-end-m { justify-content: flex-end; }
|
||||
.justify-center-m { justify-content: center; }
|
||||
.justify-between-m { justify-content: space-between; }
|
||||
.justify-around-m { justify-content: space-around; }
|
||||
|
||||
}
|
||||
@container (min-width:64em) {
|
||||
.justify-start-l { justify-content: flex-start; }
|
||||
.justify-end-l { justify-content: flex-end; }
|
||||
.justify-center-l { justify-content: center; }
|
||||
.justify-between-l { justify-content: space-between; }
|
||||
.justify-around-l { justify-content: space-around; }
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
/*
|
||||
|
||||
JUSTIFY-SELF
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
|
||||
|
||||
*/
|
||||
|
||||
.justify-self-start { justify-self: start; }
|
||||
.justify-self-end { justify-self: end; }
|
||||
.justify-self-center { justify-self: center; }
|
||||
.justify-self-stretch{ justify-self: stretch; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.justify-self-start-s { justify-self: start; }
|
||||
.justify-self-end-s { justify-self: end; }
|
||||
.justify-self-center-s { justify-self: center; }
|
||||
.justify-self-stretch-s { justify-self: stretch; }
|
||||
}
|
||||
@container (min-width:48em) {
|
||||
.justify-self-start-m { justify-self: start; }
|
||||
.justify-self-end-m { justify-self: end; }
|
||||
.justify-self-center-m { justify-self: center; }
|
||||
.justify-self-stretch-m { justify-self: stretch; }
|
||||
}
|
||||
@container (min-width:64em) {
|
||||
.justify-self-start-l { justify-self: start; }
|
||||
.justify-self-end-l { justify-self: end; }
|
||||
.justify-self-center-l { justify-self: center; }
|
||||
.justify-self-stretch-l { justify-self: stretch; }
|
||||
}
|
||||
@ -4,30 +4,30 @@
|
||||
Docs: http://tachyons.io/docs/typography/tracking/
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.tracked { letter-spacing: var(--letter-spacing-tracked, .1em); }
|
||||
.tracked-tight { letter-spacing: var(--letter-spacing-tight, -0.05em); }
|
||||
.tracked-mega { letter-spacing: var(--letter-spacing-large, .25em); }
|
||||
.tracked { letter-spacing: .1em; }
|
||||
.tracked-tight { letter-spacing: -.05em; }
|
||||
.tracked-mega { letter-spacing: .25em; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.tracked-s { letter-spacing: var(--letter-spacing-tracked, .1em); }
|
||||
.tracked-tight-s { letter-spacing: var(--letter-spacing-tight, -0.05em); }
|
||||
.tracked-mega-s { letter-spacing: var(--letter-spacing-large, .25em); }
|
||||
@media (--breakpoint-not-small) {
|
||||
.tracked-ns { letter-spacing: .1em; }
|
||||
.tracked-tight-ns { letter-spacing: -.05em; }
|
||||
.tracked-mega-ns { letter-spacing: .25em; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.tracked-m { letter-spacing: var(--letter-spacing-tracked, .1em); }
|
||||
.tracked-tight-m { letter-spacing: var(--letter-spacing-tight, -0.05em); }
|
||||
.tracked-mega-m { letter-spacing: var(--letter-spacing-large, .25em); }
|
||||
@media (--breakpoint-medium) {
|
||||
.tracked-m { letter-spacing: .1em; }
|
||||
.tracked-tight-m { letter-spacing: -.05em; }
|
||||
.tracked-mega-m { letter-spacing: .25em; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.tracked-l { letter-spacing: var(--letter-spacing-tracked, .1em); }
|
||||
.tracked-tight-l { letter-spacing: var(--letter-spacing-tight, -0.05em); }
|
||||
.tracked-mega-l { letter-spacing: var(--letter-spacing-large, .25em); }
|
||||
@media (--breakpoint-large) {
|
||||
.tracked-l { letter-spacing: .1em; }
|
||||
.tracked-tight-l { letter-spacing: -.05em; }
|
||||
.tracked-mega-l { letter-spacing: .25em; }
|
||||
}
|
||||
|
||||
@ -4,31 +4,31 @@
|
||||
Docs: http://tachyons.io/docs/typography/line-height
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.lh-solid { line-height: var(--line-height-solid, 1); }
|
||||
.lh-title { line-height: var(--line-height-title, 1.25); }
|
||||
.lh-body { line-height: var(--line-height-body, 1.5); }
|
||||
.lh-solid { line-height: 1; }
|
||||
.lh-title { line-height: 1.25; }
|
||||
.lh-copy { line-height: 1.5; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.lh-solid-s { line-height: var(--line-height-solid, 1); }
|
||||
.lh-title-s { line-height: var(--line-height-title, 1.25); }
|
||||
.lh-body-s { line-height: var(--line-height-body, 1.5); }
|
||||
@media (--breakpoint-not-small) {
|
||||
.lh-solid-ns { line-height: 1; }
|
||||
.lh-title-ns { line-height: 1.25; }
|
||||
.lh-copy-ns { line-height: 1.5; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.lh-solid-m { line-height: var(--line-height-solid, 1); }
|
||||
.lh-title-m { line-height: var(--line-height-title, 1.25); }
|
||||
.lh-body-m { line-height: var(--line-height-body, 1.5); }
|
||||
@media (--breakpoint-medium) {
|
||||
.lh-solid-m { line-height: 1; }
|
||||
.lh-title-m { line-height: 1.25; }
|
||||
.lh-copy-m { line-height: 1.5; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.lh-solid-l { line-height: var(--line-height-solid, 1); }
|
||||
.lh-title-l { line-height: var(--line-height-title, 1.25); }
|
||||
.lh-body-l { line-height: var(--line-height-body, 1.5); }
|
||||
@media (--breakpoint-large) {
|
||||
.lh-solid-l { line-height: 1; }
|
||||
.lh-title-l { line-height: 1.25; }
|
||||
.lh-copy-l { line-height: 1.5; }
|
||||
}
|
||||
|
||||
|
||||
@ -7,21 +7,21 @@
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
transition: all .15s ease-in;
|
||||
transition: color .15s ease-in;
|
||||
}
|
||||
|
||||
.link:link,
|
||||
.link:visited {
|
||||
transition: all .15s ease-in;
|
||||
transition: color .15s ease-in;
|
||||
}
|
||||
.link:hover {
|
||||
transition: all .15s ease-in;
|
||||
transition: color .15s ease-in;
|
||||
}
|
||||
.link:active {
|
||||
transition: all .15s ease-in;
|
||||
transition: color .15s ease-in;
|
||||
}
|
||||
.link:focus {
|
||||
transition: all .15s ease-in;
|
||||
transition: color .15s ease-in;
|
||||
outline: 1px dotted currentColor;
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -49,23 +49,23 @@
|
||||
|
||||
.mw-none { max-width: none; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.mw-100-s { max-width: 100%; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.mw-100-ns { max-width: 100%; }
|
||||
|
||||
.mw1-s { max-width: 1rem; }
|
||||
.mw2-s { max-width: 2rem; }
|
||||
.mw3-s { max-width: 4rem; }
|
||||
.mw4-s { max-width: 8rem; }
|
||||
.mw5-s { max-width: 16rem; }
|
||||
.mw6-s { max-width: 32rem; }
|
||||
.mw7-s { max-width: 48rem; }
|
||||
.mw8-s { max-width: 64rem; }
|
||||
.mw9-s { max-width: 96rem; }
|
||||
.mw1-ns { max-width: 1rem; }
|
||||
.mw2-ns { max-width: 2rem; }
|
||||
.mw3-ns { max-width: 4rem; }
|
||||
.mw4-ns { max-width: 8rem; }
|
||||
.mw5-ns { max-width: 16rem; }
|
||||
.mw6-ns { max-width: 32rem; }
|
||||
.mw7-ns { max-width: 48rem; }
|
||||
.mw8-ns { max-width: 64rem; }
|
||||
.mw9-ns { max-width: 96rem; }
|
||||
|
||||
.mw-none-s { max-width: none; }
|
||||
.mw-none-ns { max-width: none; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.mw-100-m { max-width: 100%; }
|
||||
|
||||
.mw1-m { max-width: 1rem; }
|
||||
@ -81,7 +81,7 @@
|
||||
.mw-none-m { max-width: none; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.mw-100-l { max-width: 100%; }
|
||||
|
||||
.mw1-l { max-width: 1rem; }
|
||||
|
||||
@ -10,20 +10,20 @@
|
||||
|
||||
These media queries can be referenced like so:
|
||||
|
||||
@container (min-width:30em) {
|
||||
.example-s {
|
||||
@media (--breakpoint-not-small) {
|
||||
.medium-and-larger-specific-style {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.example-m {
|
||||
@media (--breakpoint-medium) {
|
||||
.medium-screen-specific-style {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.example-l {
|
||||
@media (--breakpoint-large) {
|
||||
.large-and-larger-screen-specific-style {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
@ -31,6 +31,6 @@
|
||||
*/
|
||||
|
||||
/* Media Queries */
|
||||
@custom-media min-width:30em screen and (min-width: 30em);
|
||||
@custom-media min-width:48em screen and (min-width: 48em);
|
||||
@custom-media min-width:64em screen and (min-width: 60em);
|
||||
@custom-media --breakpoint-not-small screen and (min-width: 30em);
|
||||
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
|
||||
@custom-media --breakpoint-large screen and (min-width: 60em);
|
||||
|
||||
@ -8,15 +8,15 @@
|
||||
*/
|
||||
|
||||
|
||||
@container (min-width:30em) {
|
||||
@media (--breakpoint-not-small) {
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
7 = 7th step in spacing scale
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -28,172 +28,172 @@
|
||||
|
||||
|
||||
|
||||
.na1 { margin: calc(-1 * var(--spacing-1)); }
|
||||
.na2 { margin: calc(-1 * var(--spacing-2)); }
|
||||
.na3 { margin: calc(-1 * var(--spacing-3)); }
|
||||
.na4 { margin: calc(-1 * var(--spacing-4)); }
|
||||
.na5 { margin: calc(-1 * var(--spacing-5)); }
|
||||
.na6 { margin: calc(-1 * var(--spacing-6)); }
|
||||
.na7 { margin: calc(-1 * var(--spacing-7)); }
|
||||
.na1 { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2 { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3 { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4 { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5 { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6 { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7 { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nl1 { margin-left: calc(-1 * var(--spacing-1)); }
|
||||
.nl2 { margin-left: calc(-1 * var(--spacing-2)); }
|
||||
.nl3 { margin-left: calc(-1 * var(--spacing-3)); }
|
||||
.nl4 { margin-left: calc(-1 * var(--spacing-4)); }
|
||||
.nl5 { margin-left: calc(-1 * var(--spacing-5)); }
|
||||
.nl6 { margin-left: calc(-1 * var(--spacing-6)); }
|
||||
.nl7 { margin-left: calc(-1 * var(--spacing-7)); }
|
||||
.nl1 { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2 { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3 { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4 { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5 { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6 { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7 { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nr1 { margin-right: calc(-1 * var(--spacing-1)); }
|
||||
.nr2 { margin-right: calc(-1 * var(--spacing-2)); }
|
||||
.nr3 { margin-right: calc(-1 * var(--spacing-3)); }
|
||||
.nr4 { margin-right: calc(-1 * var(--spacing-4)); }
|
||||
.nr5 { margin-right: calc(-1 * var(--spacing-5)); }
|
||||
.nr6 { margin-right: calc(-1 * var(--spacing-6)); }
|
||||
.nr7 { margin-right: calc(-1 * var(--spacing-7)); }
|
||||
.nr1 { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2 { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3 { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4 { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5 { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6 { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7 { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nb1 { margin-bottom: calc(-1 * var(--spacing-1)); }
|
||||
.nb2 { margin-bottom: calc(-1 * var(--spacing-2)); }
|
||||
.nb3 { margin-bottom: calc(-1 * var(--spacing-3)); }
|
||||
.nb4 { margin-bottom: calc(-1 * var(--spacing-4)); }
|
||||
.nb5 { margin-bottom: calc(-1 * var(--spacing-5)); }
|
||||
.nb6 { margin-bottom: calc(-1 * var(--spacing-6)); }
|
||||
.nb7 { margin-bottom: calc(-1 * var(--spacing-7)); }
|
||||
.nb1 { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2 { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3 { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4 { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5 { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6 { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7 { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nt1 { margin-top: calc(-1 * var(--spacing-1)); }
|
||||
.nt2 { margin-top: calc(-1 * var(--spacing-2)); }
|
||||
.nt3 { margin-top: calc(-1 * var(--spacing-3)); }
|
||||
.nt4 { margin-top: calc(-1 * var(--spacing-4)); }
|
||||
.nt5 { margin-top: calc(-1 * var(--spacing-5)); }
|
||||
.nt6 { margin-top: calc(-1 * var(--spacing-6)); }
|
||||
.nt7 { margin-top: calc(-1 * var(--spacing-7)); }
|
||||
.nt1 { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2 { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3 { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4 { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5 { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
@container (--breakpoint-2) {
|
||||
@media (--breakpoint-not-small) {
|
||||
|
||||
.na1-s { margin: calc(-1 * var(--spacing-1)); }
|
||||
.na2-s { margin: calc(-1 * var(--spacing-2)); }
|
||||
.na3-s { margin: calc(-1 * var(--spacing-3)); }
|
||||
.na4-s { margin: calc(-1 * var(--spacing-4)); }
|
||||
.na5-s { margin: calc(-1 * var(--spacing-5)); }
|
||||
.na6-s { margin: calc(-1 * var(--spacing-6)); }
|
||||
.na7-s { margin: calc(-1 * var(--spacing-7)); }
|
||||
.na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2-ns { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3-ns { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4-ns { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5-ns { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nl1-s { margin-left: calc(-1 * var(--spacing-1)); }
|
||||
.nl2-s { margin-left: calc(-1 * var(--spacing-2)); }
|
||||
.nl3-s { margin-left: calc(-1 * var(--spacing-3)); }
|
||||
.nl4-s { margin-left: calc(-1 * var(--spacing-4)); }
|
||||
.nl5-s { margin-left: calc(-1 * var(--spacing-5)); }
|
||||
.nl6-s { margin-left: calc(-1 * var(--spacing-6)); }
|
||||
.nl7-s { margin-left: calc(-1 * var(--spacing-7)); }
|
||||
.nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2-ns { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4-ns { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nr1-s { margin-right: calc(-1 * var(--spacing-1)); }
|
||||
.nr2-s { margin-right: calc(-1 * var(--spacing-2)); }
|
||||
.nr3-s { margin-right: calc(-1 * var(--spacing-3)); }
|
||||
.nr4-s { margin-right: calc(-1 * var(--spacing-4)); }
|
||||
.nr5-s { margin-right: calc(-1 * var(--spacing-5)); }
|
||||
.nr6-s { margin-right: calc(-1 * var(--spacing-6)); }
|
||||
.nr7-s { margin-right: calc(-1 * var(--spacing-7)); }
|
||||
.nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2-ns { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4-ns { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nb1-s { margin-bottom: calc(-1 * var(--spacing-1)); }
|
||||
.nb2-s { margin-bottom: calc(-1 * var(--spacing-2)); }
|
||||
.nb3-s { margin-bottom: calc(-1 * var(--spacing-3)); }
|
||||
.nb4-s { margin-bottom: calc(-1 * var(--spacing-4)); }
|
||||
.nb5-s { margin-bottom: calc(-1 * var(--spacing-5)); }
|
||||
.nb6-s { margin-bottom: calc(-1 * var(--spacing-6)); }
|
||||
.nb7-s { margin-bottom: calc(-1 * var(--spacing-7)); }
|
||||
.nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nt1-s { margin-top: calc(-1 * var(--spacing-1)); }
|
||||
.nt2-s { margin-top: calc(-1 * var(--spacing-2)); }
|
||||
.nt3-s { margin-top: calc(-1 * var(--spacing-3)); }
|
||||
.nt4-s { margin-top: calc(-1 * var(--spacing-4)); }
|
||||
.nt5-s { margin-top: calc(-1 * var(--spacing-5)); }
|
||||
.nt6-s { margin-top: calc(-1 * var(--spacing-6)); }
|
||||
.nt7-s { margin-top: calc(-1 * var(--spacing-7)); }
|
||||
.nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2-ns { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4-ns { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
}
|
||||
|
||||
@container (--breakpoint-3) {
|
||||
.na1-m { margin: calc(-1 * var(--spacing-1)); }
|
||||
.na2-m { margin: calc(-1 * var(--spacing-2)); }
|
||||
.na3-m { margin: calc(-1 * var(--spacing-3)); }
|
||||
.na4-m { margin: calc(-1 * var(--spacing-4)); }
|
||||
.na5-m { margin: calc(-1 * var(--spacing-5)); }
|
||||
.na6-m { margin: calc(-1 * var(--spacing-6)); }
|
||||
.na7-m { margin: calc(-1 * var(--spacing-7)); }
|
||||
@media (--breakpoint-medium) {
|
||||
.na1-m { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2-m { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3-m { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4-m { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5-m { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6-m { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7-m { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nl1-m { margin-left: calc(-1 * var(--spacing-1)); }
|
||||
.nl2-m { margin-left: calc(-1 * var(--spacing-2)); }
|
||||
.nl3-m { margin-left: calc(-1 * var(--spacing-3)); }
|
||||
.nl4-m { margin-left: calc(-1 * var(--spacing-4)); }
|
||||
.nl5-m { margin-left: calc(-1 * var(--spacing-5)); }
|
||||
.nl6-m { margin-left: calc(-1 * var(--spacing-6)); }
|
||||
.nl7-m { margin-left: calc(-1 * var(--spacing-7)); }
|
||||
.nl1-m { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2-m { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3-m { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4-m { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5-m { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6-m { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7-m { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nr1-m { margin-right: calc(-1 * var(--spacing-1)); }
|
||||
.nr2-m { margin-right: calc(-1 * var(--spacing-2)); }
|
||||
.nr3-m { margin-right: calc(-1 * var(--spacing-3)); }
|
||||
.nr4-m { margin-right: calc(-1 * var(--spacing-4)); }
|
||||
.nr5-m { margin-right: calc(-1 * var(--spacing-5)); }
|
||||
.nr6-m { margin-right: calc(-1 * var(--spacing-6)); }
|
||||
.nr7-m { margin-right: calc(-1 * var(--spacing-7)); }
|
||||
.nr1-m { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2-m { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3-m { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4-m { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5-m { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6-m { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7-m { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nb1-m { margin-bottom: calc(-1 * var(--spacing-1)); }
|
||||
.nb2-m { margin-bottom: calc(-1 * var(--spacing-2)); }
|
||||
.nb3-m { margin-bottom: calc(-1 * var(--spacing-3)); }
|
||||
.nb4-m { margin-bottom: calc(-1 * var(--spacing-4)); }
|
||||
.nb5-m { margin-bottom: calc(-1 * var(--spacing-5)); }
|
||||
.nb6-m { margin-bottom: calc(-1 * var(--spacing-6)); }
|
||||
.nb7-m { margin-bottom: calc(-1 * var(--spacing-7)); }
|
||||
.nb1-m { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2-m { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3-m { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4-m { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5-m { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nt1-m { margin-top: calc(-1 * var(--spacing-1)); }
|
||||
.nt2-m { margin-top: calc(-1 * var(--spacing-2)); }
|
||||
.nt3-m { margin-top: calc(-1 * var(--spacing-3)); }
|
||||
.nt4-m { margin-top: calc(-1 * var(--spacing-4)); }
|
||||
.nt5-m { margin-top: calc(-1 * var(--spacing-5)); }
|
||||
.nt6-m { margin-top: calc(-1 * var(--spacing-6)); }
|
||||
.nt7-m { margin-top: calc(-1 * var(--spacing-7)); }
|
||||
.nt1-m { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2-m { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3-m { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4-m { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5-m { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6-m { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7-m { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.na1-l { margin: calc(-1 * var(--spacing-1)); }
|
||||
.na2-l { margin: calc(-1 * var(--spacing-2)); }
|
||||
.na3-l { margin: calc(-1 * var(--spacing-3)); }
|
||||
.na4-l { margin: calc(-1 * var(--spacing-4)); }
|
||||
.na5-l { margin: calc(-1 * var(--spacing-5)); }
|
||||
.na6-l { margin: calc(-1 * var(--spacing-6)); }
|
||||
.na7-l { margin: calc(-1 * var(--spacing-7)); }
|
||||
@media (--breakpoint-large) {
|
||||
.na1-l { margin: calc(-1 * var(--spacing-extra-small)); }
|
||||
.na2-l { margin: calc(-1 * var(--spacing-small)); }
|
||||
.na3-l { margin: calc(-1 * var(--spacing-medium)); }
|
||||
.na4-l { margin: calc(-1 * var(--spacing-large)); }
|
||||
.na5-l { margin: calc(-1 * var(--spacing-extra-large)); }
|
||||
.na6-l { margin: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.na7-l { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nl1-l { margin-left: calc(-1 * var(--spacing-1)); }
|
||||
.nl2-l { margin-left: calc(-1 * var(--spacing-2)); }
|
||||
.nl3-l { margin-left: calc(-1 * var(--spacing-3)); }
|
||||
.nl4-l { margin-left: calc(-1 * var(--spacing-4)); }
|
||||
.nl5-l { margin-left: calc(-1 * var(--spacing-5)); }
|
||||
.nl6-l { margin-left: calc(-1 * var(--spacing-6)); }
|
||||
.nl7-l { margin-left: calc(-1 * var(--spacing-7)); }
|
||||
.nl1-l { margin-left: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nl2-l { margin-left: calc(-1 * var(--spacing-small)); }
|
||||
.nl3-l { margin-left: calc(-1 * var(--spacing-medium)); }
|
||||
.nl4-l { margin-left: calc(-1 * var(--spacing-large)); }
|
||||
.nl5-l { margin-left: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nl6-l { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nl7-l { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nr1-l { margin-right: calc(-1 * var(--spacing-1)); }
|
||||
.nr2-l { margin-right: calc(-1 * var(--spacing-2)); }
|
||||
.nr3-l { margin-right: calc(-1 * var(--spacing-3)); }
|
||||
.nr4-l { margin-right: calc(-1 * var(--spacing-4)); }
|
||||
.nr5-l { margin-right: calc(-1 * var(--spacing-5)); }
|
||||
.nr6-l { margin-right: calc(-1 * var(--spacing-6)); }
|
||||
.nr7-l { margin-right: calc(-1 * var(--spacing-7)); }
|
||||
.nr1-l { margin-right: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nr2-l { margin-right: calc(-1 * var(--spacing-small)); }
|
||||
.nr3-l { margin-right: calc(-1 * var(--spacing-medium)); }
|
||||
.nr4-l { margin-right: calc(-1 * var(--spacing-large)); }
|
||||
.nr5-l { margin-right: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nr6-l { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nr7-l { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nb1-l { margin-bottom: calc(-1 * var(--spacing-1)); }
|
||||
.nb2-l { margin-bottom: calc(-1 * var(--spacing-2)); }
|
||||
.nb3-l { margin-bottom: calc(-1 * var(--spacing-3)); }
|
||||
.nb4-l { margin-bottom: calc(-1 * var(--spacing-4)); }
|
||||
.nb5-l { margin-bottom: calc(-1 * var(--spacing-5)); }
|
||||
.nb6-l { margin-bottom: calc(-1 * var(--spacing-6)); }
|
||||
.nb7-l { margin-bottom: calc(-1 * var(--spacing-7)); }
|
||||
.nb1-l { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nb2-l { margin-bottom: calc(-1 * var(--spacing-small)); }
|
||||
.nb3-l { margin-bottom: calc(-1 * var(--spacing-medium)); }
|
||||
.nb4-l { margin-bottom: calc(-1 * var(--spacing-large)); }
|
||||
.nb5-l { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nb6-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nb7-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
|
||||
.nt1-l { margin-top: calc(-1 * var(--spacing-1)); }
|
||||
.nt2-l { margin-top: calc(-1 * var(--spacing-2)); }
|
||||
.nt3-l { margin-top: calc(-1 * var(--spacing-3)); }
|
||||
.nt4-l { margin-top: calc(-1 * var(--spacing-4)); }
|
||||
.nt5-l { margin-top: calc(-1 * var(--spacing-5)); }
|
||||
.nt6-l { margin-top: calc(-1 * var(--spacing-6)); }
|
||||
.nt7-l { margin-top: calc(-1 * var(--spacing-7)); }
|
||||
.nt1-l { margin-top: calc(-1 * var(--spacing-extra-small)); }
|
||||
.nt2-l { margin-top: calc(-1 * var(--spacing-small)); }
|
||||
.nt3-l { margin-top: calc(-1 * var(--spacing-medium)); }
|
||||
.nt4-l { margin-top: calc(-1 * var(--spacing-large)); }
|
||||
.nt5-l { margin-top: calc(-1 * var(--spacing-extra-large)); }
|
||||
.nt6-l { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
|
||||
.nt7-l { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
.nested-copy-line-height p,
|
||||
.nested-copy-line-height ul,
|
||||
.nested-copy-line-height ol {
|
||||
line-height: var(--line-height-body, 1.5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nested-headline-line-height h1,
|
||||
@ -18,7 +18,7 @@
|
||||
.nested-headline-line-height h4,
|
||||
.nested-headline-line-height h5,
|
||||
.nested-headline-line-height h6 {
|
||||
line-height: var(--line-height-title, 1.25);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.nested-list-reset ul,
|
||||
@ -45,13 +45,13 @@
|
||||
}
|
||||
|
||||
.nested-links a {
|
||||
color: var(--blue-5);
|
||||
color: var(--blue);
|
||||
transition: color .15s ease-in;
|
||||
}
|
||||
|
||||
.nested-links a:hover,
|
||||
.nested-links a:focus {
|
||||
color: var(--blue-3);
|
||||
color: var(--light-blue);
|
||||
transition: color .15s ease-in;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
@ -24,14 +24,6 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
|
||||
@ -5,44 +5,16 @@
|
||||
|
||||
*/
|
||||
|
||||
.o12 { opacity: var(--opacity-12, 1); }
|
||||
.o11 { opacity: var(--opacity-11,.9); }
|
||||
.o10 { opacity: var(--opacity-10,.8); }
|
||||
.o9 { opacity: var(--opacity-9,.7); }
|
||||
.o8 { opacity: var(--opacity-8,.6); }
|
||||
.o7 { opacity: var(--opacity-7,.5); }
|
||||
.o6 { opacity: var(--opacity-6,.4); }
|
||||
.o5 { opacity: var(--opacity-5,.3); }
|
||||
.o4 { opacity: var(--opacity-4,.2); }
|
||||
.o3 { opacity: var(--opacity-3,.1); }
|
||||
.o2 { opacity: var(--opacity-2,.05); }
|
||||
.o1 { opacity: var(--opacity-1,.025);}
|
||||
.o0 { opacity: var(--opacity-0,0); }
|
||||
|
||||
.h-o12:hover { opacity: var(--opacity-12, 1); }
|
||||
.h-o11:hover { opacity: var(--opacity-11,.9); }
|
||||
.h-o10:hover { opacity: var(--opacity-10,.8); }
|
||||
.h-o9:hover { opacity: var(--opacity-9,.7); }
|
||||
.h-o8:hover { opacity: var(--opacity-8,.6); }
|
||||
.h-o7:hover { opacity: var(--opacity-7,.5); }
|
||||
.h-o6:hover { opacity: var(--opacity-6,.4); }
|
||||
.h-o5:hover { opacity: var(--opacity-5,.3); }
|
||||
.h-o4:hover { opacity: var(--opacity-4,.2); }
|
||||
.h-o3:hover { opacity: var(--opacity-3,.1); }
|
||||
.h-o2:hover { opacity: var(--opacity-2,.05); }
|
||||
.h-o1:hover { opacity: var(--opacity-1,.025);}
|
||||
.h-o0:hover { opacity: var(--opacity-0,0); }
|
||||
|
||||
.f-o12:focus { opacity: var(--opacity-12, 1); }
|
||||
.f-o11:focus { opacity: var(--opacity-11,.9); }
|
||||
.f-o10:focus { opacity: var(--opacity-10,.8); }
|
||||
.f-o9:focus { opacity: var(--opacity-9,.7); }
|
||||
.f-o8:focus { opacity: var(--opacity-8,.6); }
|
||||
.f-o7:focus { opacity: var(--opacity-7,.5); }
|
||||
.f-o6:focus { opacity: var(--opacity-6,.4); }
|
||||
.f-o5:focus { opacity: var(--opacity-5,.3); }
|
||||
.f-o4:focus { opacity: var(--opacity-4,.2); }
|
||||
.f-o3:focus { opacity: var(--opacity-3,.1); }
|
||||
.f-o2:focus { opacity: var(--opacity-2,.05); }
|
||||
.f-o1:focus { opacity: var(--opacity-1,.025);}
|
||||
.f-o0:focus { opacity: var(--opacity-0,0); }
|
||||
.o-100 { opacity: 1; }
|
||||
.o-90 { opacity: .9; }
|
||||
.o-80 { opacity: .8; }
|
||||
.o-70 { opacity: .7; }
|
||||
.o-60 { opacity: .6; }
|
||||
.o-50 { opacity: .5; }
|
||||
.o-40 { opacity: .4; }
|
||||
.o-30 { opacity: .3; }
|
||||
.o-20 { opacity: .2; }
|
||||
.o-10 { opacity: .1; }
|
||||
.o-05 { opacity: .05; }
|
||||
.o-025 { opacity: .025; }
|
||||
.o-0 { opacity: 0; }
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
/*
|
||||
|
||||
ORDER
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.order-0 { order: 0; }
|
||||
.order-1 { order: 1; }
|
||||
.order-2 { order: 2; }
|
||||
.order-3 { order: 3; }
|
||||
.order-4 { order: 4; }
|
||||
.order-5 { order: 5; }
|
||||
.order-6 { order: 6; }
|
||||
.order-7 { order: 7; }
|
||||
.order-8 { order: 8; }
|
||||
.order-last { order: 99999; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.order-0-s { order: 0; }
|
||||
.order-1-s { order: 1; }
|
||||
.order-2-s { order: 2; }
|
||||
.order-3-s { order: 3; }
|
||||
.order-4-s { order: 4; }
|
||||
.order-5-s { order: 5; }
|
||||
.order-6-s { order: 6; }
|
||||
.order-7-s { order: 7; }
|
||||
.order-8-s { order: 8; }
|
||||
.order-last-s { order: 99999; }
|
||||
}
|
||||
@container (min-width:48em) {
|
||||
.order-0-m { order: 0; }
|
||||
.order-1-m { order: 1; }
|
||||
.order-2-m { order: 2; }
|
||||
.order-3-m { order: 3; }
|
||||
.order-4-m { order: 4; }
|
||||
.order-5-m { order: 5; }
|
||||
.order-6-m { order: 6; }
|
||||
.order-7-m { order: 7; }
|
||||
.order-8-m { order: 8; }
|
||||
.order-last-m { order: 99999; }
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.order-0-l { order: 0; }
|
||||
.order-1-l { order: 1; }
|
||||
.order-2-l { order: 2; }
|
||||
.order-3-l { order: 3; }
|
||||
.order-4-l { order: 4; }
|
||||
.order-5-l { order: 5; }
|
||||
.order-6-l { order: 6; }
|
||||
.order-7-l { order: 7; }
|
||||
.order-8-l { order: 8; }
|
||||
.order-last-l { order: 99999; }
|
||||
}
|
||||
@ -3,34 +3,30 @@
|
||||
OUTLINES
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.outline { outline: var(--border-width, 1px) solid currentColor; }
|
||||
.outline-color { outline: var(--border-width, 1px) solid var(--border-color, gray); }
|
||||
.outline-transparent { outline: var(--border-width, 1px) solid transparent; }
|
||||
.outline { outline: 1px solid; }
|
||||
.outline-transparent { outline: 1px solid transparent; }
|
||||
.outline-0 { outline: 0; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.outline-s { outline: var(--border-width, 1px) solid currentColor; }
|
||||
.outline-color-s { outline: var(--border-width, 1px) solid var(--border-color, gray); }
|
||||
.outline-transparent-s { outline: var(--border-width, 1px) solid transparent; }
|
||||
.outline-0-s { outline: 0; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.outline-ns { outline: 1px solid; }
|
||||
.outline-transparent-ns { outline: 1px solid transparent; }
|
||||
.outline-0-ns { outline: 0; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.outline-m { outline: var(--border-width, 1px) solid currentColor; }
|
||||
.outline-color-m { outline: var(--border-width, 1px) solid var(--border-color, gray); }
|
||||
.outline-transparent-m { outline: var(--border-width, 1px) solid transparent; }
|
||||
@media (--breakpoint-medium) {
|
||||
.outline-m { outline: 1px solid; }
|
||||
.outline-transparent-m { outline: 1px solid transparent; }
|
||||
.outline-0-m { outline: 0; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.outline-l { outline: var(--border-width, 1px) solid currentColor; }
|
||||
.outline-color-l { outline: var(--border-width, 1px) solid var(--border-color, gray); }
|
||||
.outline-transparent-l { outline: var(--border-width, 1px) solid transparent; }
|
||||
@media (--breakpoint-large) {
|
||||
.outline-l { outline: 1px solid; }
|
||||
.outline-transparent-l { outline: 1px solid transparent; }
|
||||
.outline-0-l { outline: 0; }
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
OVERFLOW
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -24,23 +24,23 @@
|
||||
.overflow-y-scroll { overflow-y: scroll; }
|
||||
.overflow-y-auto { overflow-y: auto; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.overflow-visible-s { overflow: visible; }
|
||||
.overflow-hidden-s { overflow: hidden; }
|
||||
.overflow-scroll-s { overflow: scroll; }
|
||||
.overflow-auto-s { overflow: auto; }
|
||||
.overflow-x-visible-s { overflow-x: visible; }
|
||||
.overflow-x-hidden-s { overflow-x: hidden; }
|
||||
.overflow-x-scroll-s { overflow-x: scroll; }
|
||||
.overflow-x-auto-s { overflow-x: auto; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.overflow-visible-ns { overflow: visible; }
|
||||
.overflow-hidden-ns { overflow: hidden; }
|
||||
.overflow-scroll-ns { overflow: scroll; }
|
||||
.overflow-auto-ns { overflow: auto; }
|
||||
.overflow-x-visible-ns { overflow-x: visible; }
|
||||
.overflow-x-hidden-ns { overflow-x: hidden; }
|
||||
.overflow-x-scroll-ns { overflow-x: scroll; }
|
||||
.overflow-x-auto-ns { overflow-x: auto; }
|
||||
|
||||
.overflow-y-visible-s { overflow-y: visible; }
|
||||
.overflow-y-hidden-s { overflow-y: hidden; }
|
||||
.overflow-y-scroll-s { overflow-y: scroll; }
|
||||
.overflow-y-auto-s { overflow-y: auto; }
|
||||
.overflow-y-visible-ns { overflow-y: visible; }
|
||||
.overflow-y-hidden-ns { overflow-y: hidden; }
|
||||
.overflow-y-scroll-ns { overflow-y: scroll; }
|
||||
.overflow-y-auto-ns { overflow-y: auto; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.overflow-visible-m { overflow: visible; }
|
||||
.overflow-hidden-m { overflow: hidden; }
|
||||
.overflow-scroll-m { overflow: scroll; }
|
||||
@ -57,7 +57,7 @@
|
||||
.overflow-y-auto-m { overflow-y: auto; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.overflow-visible-l { overflow: visible; }
|
||||
.overflow-hidden-l { overflow: hidden; }
|
||||
.overflow-scroll-l { overflow: scroll; }
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
Docs: http://tachyons.io/docs/layout/position/
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -14,28 +14,24 @@
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
.sticky { position: sticky; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.static-s { position: static; }
|
||||
.relative-s { position: relative; }
|
||||
.absolute-s { position: absolute; }
|
||||
.fixed-s { position: fixed; }
|
||||
.sticky-s { position: sticky; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.static-ns { position: static; }
|
||||
.relative-ns { position: relative; }
|
||||
.absolute-ns { position: absolute; }
|
||||
.fixed-ns { position: fixed; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.static-m { position: static; }
|
||||
.relative-m { position: relative; }
|
||||
.absolute-m { position: absolute; }
|
||||
.fixed-m { position: fixed; }
|
||||
.sticky-m { position: sticky; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.static-l { position: static; }
|
||||
.relative-l { position: relative; }
|
||||
.absolute-l { position: absolute; }
|
||||
.fixed-l { position: fixed; }
|
||||
.sticky-l { position: sticky; }
|
||||
}
|
||||
|
||||
@ -12,17 +12,17 @@
|
||||
.rotate-270 { transform: rotate(270deg); }
|
||||
.rotate-315 { transform: rotate(315deg); }
|
||||
|
||||
@container (min-width:30em){
|
||||
.rotate-45-s { transform: rotate(45deg); }
|
||||
.rotate-90-s { transform: rotate(90deg); }
|
||||
.rotate-135-s { transform: rotate(135deg); }
|
||||
.rotate-180-s { transform: rotate(180deg); }
|
||||
.rotate-225-s { transform: rotate(225deg); }
|
||||
.rotate-270-s { transform: rotate(270deg); }
|
||||
.rotate-315-s { transform: rotate(315deg); }
|
||||
@media (--breakpoint-not-small){
|
||||
.rotate-45-ns { transform: rotate(45deg); }
|
||||
.rotate-90-ns { transform: rotate(90deg); }
|
||||
.rotate-135-ns { transform: rotate(135deg); }
|
||||
.rotate-180-ns { transform: rotate(180deg); }
|
||||
.rotate-225-ns { transform: rotate(225deg); }
|
||||
.rotate-270-ns { transform: rotate(270deg); }
|
||||
.rotate-315-ns { transform: rotate(315deg); }
|
||||
}
|
||||
|
||||
@container (min-width:48em){
|
||||
@media (--breakpoint-medium){
|
||||
.rotate-45-m { transform: rotate(45deg); }
|
||||
.rotate-90-m { transform: rotate(90deg); }
|
||||
.rotate-135-m { transform: rotate(135deg); }
|
||||
@ -32,7 +32,7 @@
|
||||
.rotate-315-m { transform: rotate(315deg); }
|
||||
}
|
||||
|
||||
@container (min-width:64em){
|
||||
@media (--breakpoint-large){
|
||||
.rotate-45-l { transform: rotate(45deg); }
|
||||
.rotate-90-l { transform: rotate(90deg); }
|
||||
.rotate-135-l { transform: rotate(135deg); }
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
694
src/_skins.css
694
src/_skins.css
@ -1,4 +1,5 @@
|
||||
/*
|
||||
|
||||
SKINS
|
||||
Docs: http://tachyons.io/docs/themes/skins/
|
||||
|
||||
@ -10,583 +11,126 @@
|
||||
|
||||
/* Text colors */
|
||||
|
||||
.tint-0 { color: var(--tint-0); }
|
||||
.tint-1 { color: var(--tint-1); }
|
||||
.tint-2 { color: var(--tint-2); }
|
||||
.tint-3 { color: var(--tint-3); }
|
||||
.tint-4 { color: var(--tint-4); }
|
||||
.tint-5 { color: var(--tint-5); }
|
||||
.tint-6 { color: var(--tint-6); }
|
||||
.tint-7 { color: var(--tint-7); }
|
||||
.tint-8 { color: var(--tint-8); }
|
||||
.tint-9 { color: var(--tint-9); }
|
||||
.tint-10 { color: var(--tint-10); }
|
||||
.tint-11 { color: var(--tint-11); }
|
||||
.shadow-0 { color: var(--shadow-0); }
|
||||
.shadow-1 { color: var(--shadow-1); }
|
||||
.shadow-2 { color: var(--shadow-2); }
|
||||
.shadow-3 { color: var(--shadow-3); }
|
||||
.shadow-4 { color: var(--shadow-4); }
|
||||
.shadow-5 { color: var(--shadow-5); }
|
||||
.shadow-6 { color: var(--shadow-6); }
|
||||
.shadow-7 { color: var(--shadow-7); }
|
||||
.shadow-8 { color: var(--shadow-8); }
|
||||
.shadow-9 { color: var(--shadow-9); }
|
||||
.shadow-10 { color: var(--shadow-10); }
|
||||
.shadow-11 { color: var(--shadow-11); }
|
||||
.black,
|
||||
.gray-0 { color: var(--gray-0); }
|
||||
.gray-1 { color: var(--gray-1); }
|
||||
.gray-2 { color: var(--gray-2); }
|
||||
.gray-3 { color: var(--gray-3); }
|
||||
.gray-4 { color: var(--gray-4); }
|
||||
.gray-5 { color: var(--gray-5); }
|
||||
.gray-6 { color: var(--gray-6); }
|
||||
.gray-7 { color: var(--gray-7); }
|
||||
.gray-8 { color: var(--gray-8); }
|
||||
.gray-9 { color: var(--gray-9); }
|
||||
.gray-10 { color: var(--gray-10); }
|
||||
.white, .gray-11 { color: var(--gray-11); }
|
||||
.slate-gray-0 { color: var(--slate-gray-0); }
|
||||
.slate-gray-1 { color: var(--slate-gray-1); }
|
||||
.slate-gray-2 { color: var(--slate-gray-2); }
|
||||
.slate-gray-3 { color: var(--slate-gray-3); }
|
||||
.slate-gray-4 { color: var(--slate-gray-4); }
|
||||
.slate-gray-5 { color: var(--slate-gray-5); }
|
||||
.slate-gray-6 { color: var(--slate-gray-6); }
|
||||
.slate-gray-7 { color: var(--slate-gray-7); }
|
||||
.slate-gray-8 { color: var(--slate-gray-8); }
|
||||
.slate-gray-9 { color: var(--slate-gray-9); }
|
||||
.slate-gray-10 { color: var(--slate-gray-10); }
|
||||
.slate-gray-11 { color: var(--slate-gray-11); }
|
||||
.blue-0 { color: var(--blue-0); }
|
||||
.blue-1 { color: var(--blue-1); }
|
||||
.blue-2 { color: var(--blue-2); }
|
||||
.blue-3 { color: var(--blue-3); }
|
||||
.blue-4 { color: var(--blue-4); }
|
||||
.blue-5 { color: var(--blue-5); }
|
||||
.blue-6 { color: var(--blue-6); }
|
||||
.blue-7 { color: var(--blue-7); }
|
||||
.blue-8 { color: var(--blue-8); }
|
||||
.blue-9 { color: var(--blue-9); }
|
||||
.blue-10 { color: var(--blue-10); }
|
||||
.blue-11 { color: var(--blue-11); }
|
||||
.indigo-0 { color: var(--indigo-0); }
|
||||
.indigo-1 { color: var(--indigo-1); }
|
||||
.indigo-2 { color: var(--indigo-2); }
|
||||
.indigo-3 { color: var(--indigo-3); }
|
||||
.indigo-4 { color: var(--indigo-4); }
|
||||
.indigo-5 { color: var(--indigo-5); }
|
||||
.indigo-6 { color: var(--indigo-6); }
|
||||
.indigo-7 { color: var(--indigo-7); }
|
||||
.indigo-8 { color: var(--indigo-8); }
|
||||
.indigo-9 { color: var(--indigo-9); }
|
||||
.indigo-10 { color: var(--indigo-10); }
|
||||
.indigo-11 { color: var(--indigo-11); }
|
||||
.violet-0 { color: var(--violet-0); }
|
||||
.violet-1 { color: var(--violet-1); }
|
||||
.violet-2 { color: var(--violet-2); }
|
||||
.violet-3 { color: var(--violet-3); }
|
||||
.violet-4 { color: var(--violet-4); }
|
||||
.violet-5 { color: var(--violet-5); }
|
||||
.violet-6 { color: var(--violet-6); }
|
||||
.violet-7 { color: var(--violet-7); }
|
||||
.violet-8 { color: var(--violet-8); }
|
||||
.violet-9 { color: var(--violet-9); }
|
||||
.violet-10 { color: var(--violet-10); }
|
||||
.violet-11 { color: var(--violet-11); }
|
||||
.magenta-0 { color: var(--magenta-0); }
|
||||
.magenta-1 { color: var(--magenta-1); }
|
||||
.magenta-2 { color: var(--magenta-2); }
|
||||
.magenta-3 { color: var(--magenta-3); }
|
||||
.magenta-4 { color: var(--magenta-4); }
|
||||
.magenta-5 { color: var(--magenta-5); }
|
||||
.magenta-6 { color: var(--magenta-6); }
|
||||
.magenta-7 { color: var(--magenta-7); }
|
||||
.magenta-8 { color: var(--magenta-8); }
|
||||
.magenta-9 { color: var(--magenta-9); }
|
||||
.magenta-10 { color: var(--magenta-10); }
|
||||
.magenta-11 { color: var(--magenta-11); }
|
||||
.red-0 { color: var(--red-0); }
|
||||
.red-1 { color: var(--red-1); }
|
||||
.red-2 { color: var(--red-2); }
|
||||
.red-3 { color: var(--red-3); }
|
||||
.red-4 { color: var(--red-4); }
|
||||
.red-5 { color: var(--red-5); }
|
||||
.red-6 { color: var(--red-6); }
|
||||
.red-7 { color: var(--red-7); }
|
||||
.red-8 { color: var(--red-8); }
|
||||
.red-9 { color: var(--red-9); }
|
||||
.red-10 { color: var(--red-10); }
|
||||
.red-11 { color: var(--red-11); }
|
||||
.red-orange-0 { color: var(--red-orange-0); }
|
||||
.red-orange-1 { color: var(--red-orange-1); }
|
||||
.red-orange-2 { color: var(--red-orange-2); }
|
||||
.red-orange-3 { color: var(--red-orange-3); }
|
||||
.red-orange-4 { color: var(--red-orange-4); }
|
||||
.red-orange-5 { color: var(--red-orange-5); }
|
||||
.red-orange-6 { color: var(--red-orange-6); }
|
||||
.red-orange-7 { color: var(--red-orange-7); }
|
||||
.red-orange-8 { color: var(--red-orange-8); }
|
||||
.red-orange-9 { color: var(--red-orange-9); }
|
||||
.red-orange-10 { color: var(--red-orange-10); }
|
||||
.red-orange-11 { color: var(--red-orange-11); }
|
||||
.orange-0 { color: var(--orange-0); }
|
||||
.orange-1 { color: var(--orange-1); }
|
||||
.orange-2 { color: var(--orange-2); }
|
||||
.orange-3 { color: var(--orange-3); }
|
||||
.orange-4 { color: var(--orange-4); }
|
||||
.orange-5 { color: var(--orange-5); }
|
||||
.orange-6 { color: var(--orange-6); }
|
||||
.orange-7 { color: var(--orange-7); }
|
||||
.orange-8 { color: var(--orange-8); }
|
||||
.orange-9 { color: var(--orange-9); }
|
||||
.orange-10 { color: var(--orange-10); }
|
||||
.orange-11 { color: var(--orange-11); }
|
||||
.gold-0 { color: var(--gold-0); }
|
||||
.gold-1 { color: var(--gold-1); }
|
||||
.gold-2 { color: var(--gold-2); }
|
||||
.gold-3 { color: var(--gold-3); }
|
||||
.gold-4 { color: var(--gold-4); }
|
||||
.gold-5 { color: var(--gold-5); }
|
||||
.gold-6 { color: var(--gold-6); }
|
||||
.gold-7 { color: var(--gold-7); }
|
||||
.gold-8 { color: var(--gold-8); }
|
||||
.gold-9 { color: var(--gold-9); }
|
||||
.gold-10 { color: var(--gold-10); }
|
||||
.gold-11 { color: var(--gold-11); }
|
||||
.yellow-0 { color: var(--yellow-0); }
|
||||
.yellow-1 { color: var(--yellow-1); }
|
||||
.yellow-2 { color: var(--yellow-2); }
|
||||
.yellow-3 { color: var(--yellow-3); }
|
||||
.yellow-4 { color: var(--yellow-4); }
|
||||
.yellow-5 { color: var(--yellow-5); }
|
||||
.yellow-6 { color: var(--yellow-6); }
|
||||
.yellow-7 { color: var(--yellow-7); }
|
||||
.yellow-8 { color: var(--yellow-8); }
|
||||
.yellow-9 { color: var(--yellow-9); }
|
||||
.yellow-10 { color: var(--yellow-10); }
|
||||
.yellow-11 { color: var(--yellow-11); }
|
||||
.green-0 { color: var(--green-0); }
|
||||
.green-1 { color: var(--green-1); }
|
||||
.green-2 { color: var(--green-2); }
|
||||
.green-3 { color: var(--green-3); }
|
||||
.green-4 { color: var(--green-4); }
|
||||
.green-5 { color: var(--green-5); }
|
||||
.green-6 { color: var(--green-6); }
|
||||
.green-7 { color: var(--green-7); }
|
||||
.green-8 { color: var(--green-8); }
|
||||
.green-9 { color: var(--green-9); }
|
||||
.green-10 { color: var(--green-10); }
|
||||
.green-11 { color: var(--green-11); }
|
||||
.teal-0 { color: var(--teal-0); }
|
||||
.teal-1 { color: var(--teal-1); }
|
||||
.teal-2 { color: var(--teal-2); }
|
||||
.teal-3 { color: var(--teal-3); }
|
||||
.teal-4 { color: var(--teal-4); }
|
||||
.teal-5 { color: var(--teal-5); }
|
||||
.teal-6 { color: var(--teal-6); }
|
||||
.teal-7 { color: var(--teal-7); }
|
||||
.teal-8 { color: var(--teal-8); }
|
||||
.teal-9 { color: var(--teal-9); }
|
||||
.teal-10 { color: var(--teal-10); }
|
||||
.teal-11 { color: var(--teal-11); }
|
||||
.cyan-0 { color: var(--cyan-0); }
|
||||
.cyan-1 { color: var(--cyan-1); }
|
||||
.cyan-2 { color: var(--cyan-2); }
|
||||
.cyan-3 { color: var(--cyan-3); }
|
||||
.cyan-4 { color: var(--cyan-4); }
|
||||
.cyan-5 { color: var(--cyan-5); }
|
||||
.cyan-6 { color: var(--cyan-6); }
|
||||
.cyan-7 { color: var(--cyan-7); }
|
||||
.cyan-8 { color: var(--cyan-8); }
|
||||
.cyan-9 { color: var(--cyan-9); }
|
||||
.cyan-10 { color: var(--cyan-10); }
|
||||
.cyan-11 { color: var(--cyan-11); }
|
||||
.black-90 { color: var(--black-90); }
|
||||
.black-80 { color: var(--black-80); }
|
||||
.black-70 { color: var(--black-70); }
|
||||
.black-60 { color: var(--black-60); }
|
||||
.black-50 { color: var(--black-50); }
|
||||
.black-40 { color: var(--black-40); }
|
||||
.black-30 { color: var(--black-30); }
|
||||
.black-20 { color: var(--black-20); }
|
||||
.black-10 { color: var(--black-10); }
|
||||
.black-05 { color: var(--black-05); }
|
||||
|
||||
.white-90 { color: var(--white-90); }
|
||||
.white-80 { color: var(--white-80); }
|
||||
.white-70 { color: var(--white-70); }
|
||||
.white-60 { color: var(--white-60); }
|
||||
.white-50 { color: var(--white-50); }
|
||||
.white-40 { color: var(--white-40); }
|
||||
.white-30 { color: var(--white-30); }
|
||||
.white-20 { color: var(--white-20); }
|
||||
.white-10 { color: var(--white-10); }
|
||||
|
||||
.black { color: var(--black); }
|
||||
.near-black { color: var(--near-black); }
|
||||
.dark-gray { color: var(--dark-gray); }
|
||||
.mid-gray { color: var(--mid-gray); }
|
||||
.gray { color: var(--gray); }
|
||||
.silver { color: var(--silver); }
|
||||
.light-silver { color: var(--light-silver); }
|
||||
.moon-gray { color: var(--moon-gray); }
|
||||
.light-gray { color: var(--light-gray); }
|
||||
.near-white { color: var(--near-white); }
|
||||
.white { color: var(--white); }
|
||||
|
||||
.dark-red { color: var(--dark-red); }
|
||||
.red { color: var(--red); }
|
||||
.light-red { color: var(--light-red); }
|
||||
.orange { color: var(--orange); }
|
||||
.gold { color: var(--gold); }
|
||||
.yellow { color: var(--yellow); }
|
||||
.light-yellow { color: var(--light-yellow); }
|
||||
.purple { color: var(--purple); }
|
||||
.light-purple { color: var(--light-purple); }
|
||||
.dark-pink { color: var(--dark-pink); }
|
||||
.hot-pink { color: var(--hot-pink); }
|
||||
.pink { color: var(--pink); }
|
||||
.light-pink { color: var(--light-pink); }
|
||||
.dark-green { color: var(--dark-green); }
|
||||
.green { color: var(--green); }
|
||||
.light-green { color: var(--light-green); }
|
||||
.navy { color: var(--navy); }
|
||||
.dark-blue { color: var(--dark-blue); }
|
||||
.blue { color: var(--blue); }
|
||||
.light-blue { color: var(--light-blue); }
|
||||
.lightest-blue { color: var(--lightest-blue); }
|
||||
.washed-blue { color: var(--washed-blue); }
|
||||
.washed-green { color: var(--washed-green); }
|
||||
.washed-yellow { color: var(--washed-yellow); }
|
||||
.washed-red { color: var(--washed-red); }
|
||||
.color-inherit { color: inherit; }
|
||||
|
||||
|
||||
|
||||
/* Background colors */
|
||||
|
||||
.bg-tint-0 { background-color: var(--tint-0); }
|
||||
.bg-tint-1 { background-color: var(--tint-1); }
|
||||
.bg-tint-2 { background-color: var(--tint-2); }
|
||||
.bg-tint-3 { background-color: var(--tint-3); }
|
||||
.bg-tint-4 { background-color: var(--tint-4); }
|
||||
.bg-tint-5 { background-color: var(--tint-5); }
|
||||
.bg-tint-6 { background-color: var(--tint-6); }
|
||||
.bg-tint-7 { background-color: var(--tint-7); }
|
||||
.bg-tint-8 { background-color: var(--tint-8); }
|
||||
.bg-tint-9 { background-color: var(--tint-9); }
|
||||
.bg-tint-10 { background-color: var(--tint-10); }
|
||||
.bg-tint-11 { background-color: var(--tint-11); }
|
||||
.bg-shadow-0 { background-color: var(--shadow-0); }
|
||||
.bg-shadow-1 { background-color: var(--shadow-1); }
|
||||
.bg-shadow-2 { background-color: var(--shadow-2); }
|
||||
.bg-shadow-3 { background-color: var(--shadow-3); }
|
||||
.bg-shadow-4 { background-color: var(--shadow-4); }
|
||||
.bg-shadow-5 { background-color: var(--shadow-5); }
|
||||
.bg-shadow-6 { background-color: var(--shadow-6); }
|
||||
.bg-shadow-7 { background-color: var(--shadow-7); }
|
||||
.bg-shadow-8 { background-color: var(--shadow-8); }
|
||||
.bg-shadow-9 { background-color: var(--shadow-9); }
|
||||
.bg-shadow-10 { background-color: var(--shadow-10); }
|
||||
.bg-shadow-11 { background-color: var(--shadow-11); }
|
||||
.bg-black,
|
||||
.bg-gray-0 { background-color: var(--gray-0); }
|
||||
.bg-gray-1 { background-color: var(--gray-1); }
|
||||
.bg-gray-2 { background-color: var(--gray-2); }
|
||||
.bg-gray-3 { background-color: var(--gray-3); }
|
||||
.bg-gray-4 { background-color: var(--gray-4); }
|
||||
.bg-gray-5 { background-color: var(--gray-5); }
|
||||
.bg-gray-6 { background-color: var(--gray-6); }
|
||||
.bg-gray-7 { background-color: var(--gray-7); }
|
||||
.bg-gray-8 { background-color: var(--gray-8); }
|
||||
.bg-gray-9 { background-color: var(--gray-9); }
|
||||
.bg-gray-10 { background-color: var(--gray-10); }
|
||||
.bg-white,
|
||||
.bg-gray-11 { background-color: var(--gray-11); }
|
||||
.bg-slate-gray-0 { background-color: var(--slate-gray-0); }
|
||||
.bg-slate-gray-1 { background-color: var(--slate-gray-1); }
|
||||
.bg-slate-gray-2 { background-color: var(--slate-gray-2); }
|
||||
.bg-slate-gray-3 { background-color: var(--slate-gray-3); }
|
||||
.bg-slate-gray-4 { background-color: var(--slate-gray-4); }
|
||||
.bg-slate-gray-5 { background-color: var(--slate-gray-5); }
|
||||
.bg-slate-gray-6 { background-color: var(--slate-gray-6); }
|
||||
.bg-slate-gray-7 { background-color: var(--slate-gray-7); }
|
||||
.bg-slate-gray-8 { background-color: var(--slate-gray-8); }
|
||||
.bg-slate-gray-9 { background-color: var(--slate-gray-9); }
|
||||
.bg-slate-gray-10 { background-color: var(--slate-gray-10); }
|
||||
.bg-slate-gray-11 { background-color: var(--slate-gray-11); }
|
||||
.bg-blue-0 { background-color: var(--blue-0); }
|
||||
.bg-blue-1 { background-color: var(--blue-1); }
|
||||
.bg-blue-2 { background-color: var(--blue-2); }
|
||||
.bg-blue-3 { background-color: var(--blue-3); }
|
||||
.bg-blue-4 { background-color: var(--blue-4); }
|
||||
.bg-blue-5 { background-color: var(--blue-5); }
|
||||
.bg-blue-6 { background-color: var(--blue-6); }
|
||||
.bg-blue-7 { background-color: var(--blue-7); }
|
||||
.bg-blue-8 { background-color: var(--blue-8); }
|
||||
.bg-blue-9 { background-color: var(--blue-9); }
|
||||
.bg-blue-10 { background-color: var(--blue-10); }
|
||||
.bg-blue-11 { background-color: var(--blue-11); }
|
||||
.bg-indigo-0 { background-color: var(--indigo-0); }
|
||||
.bg-indigo-1 { background-color: var(--indigo-1); }
|
||||
.bg-indigo-2 { background-color: var(--indigo-2); }
|
||||
.bg-indigo-3 { background-color: var(--indigo-3); }
|
||||
.bg-indigo-4 { background-color: var(--indigo-4); }
|
||||
.bg-indigo-5 { background-color: var(--indigo-5); }
|
||||
.bg-indigo-6 { background-color: var(--indigo-6); }
|
||||
.bg-indigo-7 { background-color: var(--indigo-7); }
|
||||
.bg-indigo-8 { background-color: var(--indigo-8); }
|
||||
.bg-indigo-9 { background-color: var(--indigo-9); }
|
||||
.bg-indigo-10 { background-color: var(--indigo-10); }
|
||||
.bg-indigo-11 { background-color: var(--indigo-11); }
|
||||
.bg-violet-0 { background-color: var(--violet-0); }
|
||||
.bg-violet-1 { background-color: var(--violet-1); }
|
||||
.bg-violet-2 { background-color: var(--violet-2); }
|
||||
.bg-violet-3 { background-color: var(--violet-3); }
|
||||
.bg-violet-4 { background-color: var(--violet-4); }
|
||||
.bg-violet-5 { background-color: var(--violet-5); }
|
||||
.bg-violet-6 { background-color: var(--violet-6); }
|
||||
.bg-violet-7 { background-color: var(--violet-7); }
|
||||
.bg-violet-8 { background-color: var(--violet-8); }
|
||||
.bg-violet-9 { background-color: var(--violet-9); }
|
||||
.bg-violet-10 { background-color: var(--violet-10); }
|
||||
.bg-violet-11 { background-color: var(--violet-11); }
|
||||
.bg-magenta-0 { background-color: var(--magenta-0); }
|
||||
.bg-magenta-1 { background-color: var(--magenta-1); }
|
||||
.bg-magenta-2 { background-color: var(--magenta-2); }
|
||||
.bg-magenta-3 { background-color: var(--magenta-3); }
|
||||
.bg-magenta-4 { background-color: var(--magenta-4); }
|
||||
.bg-magenta-5 { background-color: var(--magenta-5); }
|
||||
.bg-magenta-6 { background-color: var(--magenta-6); }
|
||||
.bg-magenta-7 { background-color: var(--magenta-7); }
|
||||
.bg-magenta-8 { background-color: var(--magenta-8); }
|
||||
.bg-magenta-9 { background-color: var(--magenta-9); }
|
||||
.bg-magenta-10 { background-color: var(--magenta-10); }
|
||||
.bg-magenta-11 { background-color: var(--magenta-11); }
|
||||
.bg-red-0 { background-color: var(--red-0); }
|
||||
.bg-red-1 { background-color: var(--red-1); }
|
||||
.bg-red-2 { background-color: var(--red-2); }
|
||||
.bg-red-3 { background-color: var(--red-3); }
|
||||
.bg-red-4 { background-color: var(--red-4); }
|
||||
.bg-red-5 { background-color: var(--red-5); }
|
||||
.bg-red-6 { background-color: var(--red-6); }
|
||||
.bg-red-7 { background-color: var(--red-7); }
|
||||
.bg-red-8 { background-color: var(--red-8); }
|
||||
.bg-red-9 { background-color: var(--red-9); }
|
||||
.bg-red-10 { background-color: var(--red-10); }
|
||||
.bg-red-11 { background-color: var(--red-11); }
|
||||
.bg-red-orange-0 { background-color: var(--red-orange-0); }
|
||||
.bg-red-orange-1 { background-color: var(--red-orange-1); }
|
||||
.bg-red-orange-2 { background-color: var(--red-orange-2); }
|
||||
.bg-red-orange-3 { background-color: var(--red-orange-3); }
|
||||
.bg-red-orange-4 { background-color: var(--red-orange-4); }
|
||||
.bg-red-orange-5 { background-color: var(--red-orange-5); }
|
||||
.bg-red-orange-6 { background-color: var(--red-orange-6); }
|
||||
.bg-red-orange-7 { background-color: var(--red-orange-7); }
|
||||
.bg-red-orange-8 { background-color: var(--red-orange-8); }
|
||||
.bg-red-orange-9 { background-color: var(--red-orange-9); }
|
||||
.bg-red-orange-10 { background-color: var(--red-orange-10); }
|
||||
.bg-red-orange-11 { background-color: var(--red-orange-11); }
|
||||
.bg-orange-0 { background-color: var(--orange-0); }
|
||||
.bg-orange-1 { background-color: var(--orange-1); }
|
||||
.bg-orange-2 { background-color: var(--orange-2); }
|
||||
.bg-orange-3 { background-color: var(--orange-3); }
|
||||
.bg-orange-4 { background-color: var(--orange-4); }
|
||||
.bg-orange-5 { background-color: var(--orange-5); }
|
||||
.bg-orange-6 { background-color: var(--orange-6); }
|
||||
.bg-orange-7 { background-color: var(--orange-7); }
|
||||
.bg-orange-8 { background-color: var(--orange-8); }
|
||||
.bg-orange-9 { background-color: var(--orange-9); }
|
||||
.bg-orange-10 { background-color: var(--orange-10); }
|
||||
.bg-orange-11 { background-color: var(--orange-11); }
|
||||
.bg-gold-0 { background-color: var(--gold-0); }
|
||||
.bg-gold-1 { background-color: var(--gold-1); }
|
||||
.bg-gold-2 { background-color: var(--gold-2); }
|
||||
.bg-gold-3 { background-color: var(--gold-3); }
|
||||
.bg-gold-4 { background-color: var(--gold-4); }
|
||||
.bg-gold-5 { background-color: var(--gold-5); }
|
||||
.bg-gold-6 { background-color: var(--gold-6); }
|
||||
.bg-gold-7 { background-color: var(--gold-7); }
|
||||
.bg-gold-8 { background-color: var(--gold-8); }
|
||||
.bg-gold-9 { background-color: var(--gold-9); }
|
||||
.bg-gold-10 { background-color: var(--gold-10); }
|
||||
.bg-gold-11 { background-color: var(--gold-11); }
|
||||
.bg-yellow-0 { background-color: var(--yellow-0); }
|
||||
.bg-yellow-1 { background-color: var(--yellow-1); }
|
||||
.bg-yellow-2 { background-color: var(--yellow-2); }
|
||||
.bg-yellow-3 { background-color: var(--yellow-3); }
|
||||
.bg-yellow-4 { background-color: var(--yellow-4); }
|
||||
.bg-yellow-5 { background-color: var(--yellow-5); }
|
||||
.bg-yellow-6 { background-color: var(--yellow-6); }
|
||||
.bg-yellow-7 { background-color: var(--yellow-7); }
|
||||
.bg-yellow-8 { background-color: var(--yellow-8); }
|
||||
.bg-yellow-9 { background-color: var(--yellow-9); }
|
||||
.bg-yellow-10 { background-color: var(--yellow-10); }
|
||||
.bg-yellow-11 { background-color: var(--yellow-11); }
|
||||
.bg-green-0 { background-color: var(--green-0); }
|
||||
.bg-green-1 { background-color: var(--green-1); }
|
||||
.bg-green-2 { background-color: var(--green-2); }
|
||||
.bg-green-3 { background-color: var(--green-3); }
|
||||
.bg-green-4 { background-color: var(--green-4); }
|
||||
.bg-green-5 { background-color: var(--green-5); }
|
||||
.bg-green-6 { background-color: var(--green-6); }
|
||||
.bg-green-7 { background-color: var(--green-7); }
|
||||
.bg-green-8 { background-color: var(--green-8); }
|
||||
.bg-green-9 { background-color: var(--green-9); }
|
||||
.bg-green-10 { background-color: var(--green-10); }
|
||||
.bg-green-11 { background-color: var(--green-11); }
|
||||
.bg-teal-0 { background-color: var(--teal-0); }
|
||||
.bg-teal-1 { background-color: var(--teal-1); }
|
||||
.bg-teal-2 { background-color: var(--teal-2); }
|
||||
.bg-teal-3 { background-color: var(--teal-3); }
|
||||
.bg-teal-4 { background-color: var(--teal-4); }
|
||||
.bg-teal-5 { background-color: var(--teal-5); }
|
||||
.bg-teal-6 { background-color: var(--teal-6); }
|
||||
.bg-teal-7 { background-color: var(--teal-7); }
|
||||
.bg-teal-8 { background-color: var(--teal-8); }
|
||||
.bg-teal-9 { background-color: var(--teal-9); }
|
||||
.bg-teal-10 { background-color: var(--teal-10); }
|
||||
.bg-teal-11 { background-color: var(--teal-11); }
|
||||
.bg-cyan-0 { background-color: var(--cyan-0); }
|
||||
.bg-cyan-1 { background-color: var(--cyan-1); }
|
||||
.bg-cyan-2 { background-color: var(--cyan-2); }
|
||||
.bg-cyan-3 { background-color: var(--cyan-3); }
|
||||
.bg-cyan-4 { background-color: var(--cyan-4); }
|
||||
.bg-cyan-5 { background-color: var(--cyan-5); }
|
||||
.bg-cyan-6 { background-color: var(--cyan-6); }
|
||||
.bg-cyan-7 { background-color: var(--cyan-7); }
|
||||
.bg-cyan-8 { background-color: var(--cyan-8); }
|
||||
.bg-cyan-9 { background-color: var(--cyan-9); }
|
||||
.bg-cyan-10 { background-color: var(--cyan-10); }
|
||||
.bg-cyan-11 { background-color: var(--cyan-11); }
|
||||
.bg-black-90 { background-color: var(--black-90); }
|
||||
.bg-black-80 { background-color: var(--black-80); }
|
||||
.bg-black-70 { background-color: var(--black-70); }
|
||||
.bg-black-60 { background-color: var(--black-60); }
|
||||
.bg-black-50 { background-color: var(--black-50); }
|
||||
.bg-black-40 { background-color: var(--black-40); }
|
||||
.bg-black-30 { background-color: var(--black-30); }
|
||||
.bg-black-20 { background-color: var(--black-20); }
|
||||
.bg-black-10 { background-color: var(--black-10); }
|
||||
.bg-black-05 { background-color: var(--black-05); }
|
||||
.bg-white-90 { background-color: var(--white-90); }
|
||||
.bg-white-80 { background-color: var(--white-80); }
|
||||
.bg-white-70 { background-color: var(--white-70); }
|
||||
.bg-white-60 { background-color: var(--white-60); }
|
||||
.bg-white-50 { background-color: var(--white-50); }
|
||||
.bg-white-40 { background-color: var(--white-40); }
|
||||
.bg-white-30 { background-color: var(--white-30); }
|
||||
.bg-white-20 { background-color: var(--white-20); }
|
||||
.bg-white-10 { background-color: var(--white-10); }
|
||||
|
||||
.dark {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.bg-black { background-color: var(--black); }
|
||||
.bg-near-black { background-color: var(--near-black); }
|
||||
.bg-dark-gray { background-color: var(--dark-gray); }
|
||||
.bg-mid-gray { background-color: var(--mid-gray); }
|
||||
.bg-gray { background-color: var(--gray); }
|
||||
.bg-silver { background-color: var(--silver); }
|
||||
.bg-light-silver { background-color: var(--light-silver); }
|
||||
.bg-moon-gray { background-color: var(--moon-gray); }
|
||||
.bg-light-gray { background-color: var(--light-gray); }
|
||||
.bg-near-white { background-color: var(--near-white); }
|
||||
.bg-white { background-color: var(--white); }
|
||||
.bg-transparent { background-color: var(--transparent); }
|
||||
|
||||
.light {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: var(--blue-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.blue-dark {
|
||||
background-color: var(--blue-3);
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.blue-light {
|
||||
color: var(--blue-3);
|
||||
background-color: var(--blue-10);
|
||||
}
|
||||
|
||||
.indigo {
|
||||
background-color: var(--indigo-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.indigo-dark {
|
||||
background-color: var(--indigo-3);
|
||||
color: var(--indigo-9);
|
||||
}
|
||||
|
||||
.indigo-light {
|
||||
color: var(--indigo-3);
|
||||
background-color: var(--indigo-10);
|
||||
}
|
||||
|
||||
.violet {
|
||||
background-color: var(--violet-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.violet-dark {
|
||||
background-color: var(--violet-3);
|
||||
color: var(--violet-9);
|
||||
}
|
||||
|
||||
.violet-light {
|
||||
color: var(--violet-3);
|
||||
background-color: var(--violet-10);
|
||||
}
|
||||
|
||||
.magenta {
|
||||
background-color: var(--magenta-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.magenta-dark {
|
||||
background-color: var(--magenta-3);
|
||||
color: var(--magenta-9);
|
||||
}
|
||||
|
||||
.magenta-light {
|
||||
color: var(--magenta-3);
|
||||
background-color: var(--magenta-10);
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: var(--red-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.red-dark {
|
||||
background-color: var(--red-3);
|
||||
color: var(--red-9);
|
||||
}
|
||||
|
||||
.red-light {
|
||||
color: var(--red-3);
|
||||
background-color: var(--red-10);
|
||||
}
|
||||
|
||||
.red-orange {
|
||||
background-color: var(--red-orange-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.red-orange-dark {
|
||||
background-color: var(--red-orange-3);
|
||||
color: var(--red-orange-9);
|
||||
}
|
||||
|
||||
.red-orange-light {
|
||||
color: var(--red-orange-3);
|
||||
background-color: var(--red-orange-10);
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: var(--orange-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.orange-dark {
|
||||
background-color: var(--orange-3);
|
||||
color: var(--orange-9);
|
||||
}
|
||||
|
||||
.orange-light {
|
||||
color: var(--orange-3);
|
||||
background-color: var(--orange-10);
|
||||
}
|
||||
|
||||
.gold {
|
||||
background-color: var(--gold-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.gold-dark {
|
||||
background-color: var(--gold-3);
|
||||
color: var(--gold-9);
|
||||
}
|
||||
|
||||
.gold-light {
|
||||
color: var(--gold-3);
|
||||
background-color: var(--gold-10);
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: var(--yellow-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.yellow-dark {
|
||||
background-color: var(--yellow-3);
|
||||
color: var(--yellow-9);
|
||||
}
|
||||
|
||||
.yellow-light {
|
||||
color: var(--yellow-3);
|
||||
background-color: var(--yellow-10);
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: var(--green-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.green-dark {
|
||||
background-color: var(--green-3);
|
||||
color: var(--green-9);
|
||||
}
|
||||
|
||||
.green-light {
|
||||
color: var(--green-3);
|
||||
background-color: var(--green-10);
|
||||
}
|
||||
|
||||
.teal {
|
||||
background-color: var(--teal-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.teal-dark {
|
||||
background-color: var(--teal-3);
|
||||
color: var(--teal-9);
|
||||
}
|
||||
|
||||
.teal-light {
|
||||
color: var(--teal-3);
|
||||
background-color: var(--teal-10);
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: var(--cyan-5);
|
||||
color: var(--gray-11);
|
||||
}
|
||||
|
||||
.cyan-dark {
|
||||
background-color: var(--cyan-3);
|
||||
color: var(--cyan-9);
|
||||
}
|
||||
|
||||
.cyan-light {
|
||||
color: var(--cyan-3);
|
||||
background-color: var(--cyan-10);
|
||||
}
|
||||
.bg-dark-red { background-color: var(--dark-red); }
|
||||
.bg-red { background-color: var(--red); }
|
||||
.bg-light-red { background-color: var(--light-red); }
|
||||
.bg-orange { background-color: var(--orange); }
|
||||
.bg-gold { background-color: var(--gold); }
|
||||
.bg-yellow { background-color: var(--yellow); }
|
||||
.bg-light-yellow { background-color: var(--light-yellow); }
|
||||
.bg-purple { background-color: var(--purple); }
|
||||
.bg-light-purple { background-color: var(--light-purple); }
|
||||
.bg-dark-pink { background-color: var(--dark-pink); }
|
||||
.bg-hot-pink { background-color: var(--hot-pink); }
|
||||
.bg-pink { background-color: var(--pink); }
|
||||
.bg-light-pink { background-color: var(--light-pink); }
|
||||
.bg-dark-green { background-color: var(--dark-green); }
|
||||
.bg-green { background-color: var(--green); }
|
||||
.bg-light-green { background-color: var(--light-green); }
|
||||
.bg-navy { background-color: var(--navy); }
|
||||
.bg-dark-blue { background-color: var(--dark-blue); }
|
||||
.bg-blue { background-color: var(--blue); }
|
||||
.bg-light-blue { background-color: var(--light-blue); }
|
||||
.bg-lightest-blue { background-color: var(--lightest-blue); }
|
||||
.bg-washed-blue { background-color: var(--washed-blue); }
|
||||
.bg-washed-green { background-color: var(--washed-green); }
|
||||
.bg-washed-yellow { background-color: var(--washed-yellow); }
|
||||
.bg-washed-red { background-color: var(--washed-red); }
|
||||
.bg-inherit { background-color: inherit; }
|
||||
|
||||
1728
src/_spacing.css
1728
src/_spacing.css
File diff suppressed because it is too large
Load Diff
@ -10,10 +10,26 @@
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.striped--light:nth-child(odd) {
|
||||
background-color: var(--gray-10);
|
||||
.striped--light-silver:nth-child(odd) {
|
||||
background-color: var(--light-silver);
|
||||
}
|
||||
|
||||
.striped--dark:nth-child(odd) {
|
||||
background-color: var(--gray-0);
|
||||
.striped--moon-gray:nth-child(odd) {
|
||||
background-color: var(--moon-gray);
|
||||
}
|
||||
|
||||
.striped--light-gray:nth-child(odd) {
|
||||
background-color: var(--light-gray);
|
||||
}
|
||||
|
||||
.striped--near-white:nth-child(odd) {
|
||||
background-color: var(--near-white);
|
||||
}
|
||||
|
||||
.stripe-light:nth-child(odd) {
|
||||
background-color: var(--white-10);
|
||||
}
|
||||
|
||||
.stripe-dark:nth-child(odd) {
|
||||
background-color: var(--black-10);
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
j = justify
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -24,21 +24,21 @@
|
||||
.tc { text-align: center; }
|
||||
.tj { text-align: justify; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.tl-s { text-align: left; }
|
||||
.tr-s { text-align: right; }
|
||||
.tc-s { text-align: center; }
|
||||
.tj-s { text-align: justify; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.tl-ns { text-align: left; }
|
||||
.tr-ns { text-align: right; }
|
||||
.tc-ns { text-align: center; }
|
||||
.tj-ns { text-align: justify; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.tl-m { text-align: left; }
|
||||
.tr-m { text-align: right; }
|
||||
.tc-m { text-align: center; }
|
||||
.tj-m { text-align: justify; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.tl-l { text-align: left; }
|
||||
.tr-l { text-align: right; }
|
||||
.tc-l { text-align: center; }
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -14,3 +14,22 @@
|
||||
.strike { text-decoration: line-through; }
|
||||
.underline { text-decoration: underline; }
|
||||
.no-underline { text-decoration: none; }
|
||||
|
||||
|
||||
@media (--breakpoint-not-small) {
|
||||
.strike-ns { text-decoration: line-through; }
|
||||
.underline-ns { text-decoration: underline; }
|
||||
.no-underline-ns { text-decoration: none; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium) {
|
||||
.strike-m { text-decoration: line-through; }
|
||||
.underline-m { text-decoration: underline; }
|
||||
.no-underline-m { text-decoration: none; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-large) {
|
||||
.strike-l { text-decoration: line-through; }
|
||||
.underline-l { text-decoration: underline; }
|
||||
.no-underline-l { text-decoration: none; }
|
||||
}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
/*
|
||||
|
||||
TEXT-SHADOW
|
||||
Docs: http://tachyons.io/docs/themes/text-shadow/
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.text-shadow-1 { text-shadow: rgb(var(--shadow-color)) -4px 4px 0px; }
|
||||
.text-shadow-2 { text-shadow: rgb(var(--shadow-color)) -8px 8px 0px; }
|
||||
.text-shadow-3 { text-shadow: rgb(var(--shadow-color) / var(--shadow-opacity ,.5)) -8px 8px 0px; }
|
||||
.text-shadow-4 { text-shadow: rgba(var(--shadow-color) / var(--shadow-opacity, .5)) -4px 4px 8px; }
|
||||
.text-shadow-5 { text-shadow: rgb(var(--shadow-color)) 2px 0px 0px, rgb(var(--shadow-color)) 0px 2px 0px, rgb(var(--shadow-color)) -2px 0px 0px, rgb(var(--shadow-color)) 0px -2px 0px, rgb(var(--shadow-color)) -2px -2px 0px, rgb(var(--shadow-color)) 2px -2px 0px, rgb(var(--shadow-color)) 2px 2px 0px, rgb(var(--shadow-color)) -2px 2px 0px; }
|
||||
.text-shadow-6 { text-shadow: rgb(var(--shadow-color-invert)) 2px 0px 0px, rgb(var(--shadow-color-invert)) 0px 2px 0px, rgb(var(--shadow-color-invert)) -2px 0px 0px, rgb(var(--shadow-color-invert)) 0px -2px 0px, rgb(var(--shadow-color-invert)) -2px -2px 0px, rgb(var(--shadow-color-invert)) 2px -2px 0px, rgb(var(--shadow-color-invert)) 2px 2px 0px, rgb(var(--shadow-color-invert)) -2px 2px 0px; }
|
||||
|
||||
|
||||
@container (min-width:30em) {
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
n = none
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -24,21 +24,21 @@
|
||||
.ttu { text-transform: uppercase; }
|
||||
.ttn { text-transform: none; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.ttc-s { text-transform: capitalize; }
|
||||
.ttl-s { text-transform: lowercase; }
|
||||
.ttu-s { text-transform: uppercase; }
|
||||
.ttn-s { text-transform: none; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.ttc-ns { text-transform: capitalize; }
|
||||
.ttl-ns { text-transform: lowercase; }
|
||||
.ttu-ns { text-transform: uppercase; }
|
||||
.ttn-ns { text-transform: none; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.ttc-m { text-transform: capitalize; }
|
||||
.ttl-m { text-transform: lowercase; }
|
||||
.ttu-m { text-transform: uppercase; }
|
||||
.ttn-m { text-transform: none; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.ttc-l { text-transform: capitalize; }
|
||||
.ttl-l { text-transform: lowercase; }
|
||||
.ttu-l { text-transform: uppercase; }
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
|
||||
TYPE SCALE
|
||||
Docs: http://tachyons.io/docs/type-scale
|
||||
Docs: http://tachyons.io/docs/typography/scale/
|
||||
|
||||
Base:
|
||||
f = font-size
|
||||
@ -14,75 +14,82 @@
|
||||
5 = 5th step in size scale
|
||||
6 = 6th step in size scale
|
||||
7 = 7th step in size scale
|
||||
8 = 8th step in size scale
|
||||
9 = 9th step in size scale
|
||||
10 = 10th step in size scale
|
||||
11 = 11th step in size scale
|
||||
12 = 12th step in size scale
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
*/
|
||||
|
||||
/*
|
||||
* For Hero/Marketing Titles
|
||||
*
|
||||
* These generally are too large for mobile
|
||||
* so be careful using them on smaller screens.
|
||||
* */
|
||||
|
||||
.f-6,
|
||||
.f-headline {
|
||||
font-size: 6rem;
|
||||
}
|
||||
.f-5,
|
||||
.f-subheadline {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
|
||||
/* Type Scale */
|
||||
|
||||
.f1 { font-size: var(--font-size-1, .75rem); }
|
||||
.f2 { font-size: var(--font-size-2, .875rem); }
|
||||
.f3 { font-size: var(--font-size-3, 1rem); }
|
||||
.f4 { font-size: var(--font-size-4, 1.125rem); }
|
||||
.f5 { font-size: var(--font-size-5, 1.25rem); }
|
||||
.f6 { font-size: var(--font-size-6, 1.5rem); }
|
||||
.f7 { font-size: var(--font-size-7, 2rem); }
|
||||
.f8 { font-size: var(--font-size-8, 3rem); }
|
||||
.f9 { font-size: var(--font-size-9, 4rem); }
|
||||
.f10 { font-size: var(--font-size-10, 6rem); }
|
||||
.f11 { font-size: var(--font-size-11, 8rem); }
|
||||
.f12 { font-size: var(--font-size-12, 12rem); }
|
||||
.f1 { font-size: 3rem; }
|
||||
.f2 { font-size: 2.25rem; }
|
||||
.f3 { font-size: 1.5rem; }
|
||||
.f4 { font-size: 1.25rem; }
|
||||
.f5 { font-size: 1rem; }
|
||||
.f6 { font-size: .875rem; }
|
||||
.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */
|
||||
|
||||
|
||||
@container (min-width:30em){
|
||||
.f1-s { font-size: var(--font-size-1, .75rem); }
|
||||
.f2-s { font-size: var(--font-size-2, .875rem); }
|
||||
.f3-s { font-size: var(--font-size-3, 1rem); }
|
||||
.f4-s { font-size: var(--font-size-4, 1.125rem); }
|
||||
.f5-s { font-size: var(--font-size-5, 1.25rem); }
|
||||
.f6-s { font-size: var(--font-size-6, 1.5rem); }
|
||||
.f7-s { font-size: var(--font-size-7, 2rem); }
|
||||
.f8-s { font-size: var(--font-size-8, 3rem); }
|
||||
.f9-s { font-size: var(--font-size-9, 4rem); }
|
||||
.f10-s { font-size: var(--font-size-10, 6rem); }
|
||||
.f11-s { font-size: var(--font-size-11, 8rem); }
|
||||
.f12-s { font-size: var(--font-size-12, 12rem); }
|
||||
@media (--breakpoint-not-small){
|
||||
.f-6-ns,
|
||||
.f-headline-ns { font-size: 6rem; }
|
||||
.f-5-ns,
|
||||
.f-subheadline-ns { font-size: 5rem; }
|
||||
.f1-ns { font-size: 3rem; }
|
||||
.f2-ns { font-size: 2.25rem; }
|
||||
.f3-ns { font-size: 1.5rem; }
|
||||
.f4-ns { font-size: 1.25rem; }
|
||||
.f5-ns { font-size: 1rem; }
|
||||
.f6-ns { font-size: .875rem; }
|
||||
.f7-ns { font-size: .75rem; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.f1-m { font-size: var(--font-size-1, .75rem); }
|
||||
.f2-m { font-size: var(--font-size-2, .875rem); }
|
||||
.f3-m { font-size: var(--font-size-3, 1rem); }
|
||||
.f4-m { font-size: var(--font-size-4, 1.125rem); }
|
||||
.f5-m { font-size: var(--font-size-5, 1.25rem); }
|
||||
.f6-m { font-size: var(--font-size-6, 1.5rem); }
|
||||
.f7-m { font-size: var(--font-size-7, 2rem); }
|
||||
.f8-m { font-size: var(--font-size-8, 3rem); }
|
||||
.f9-m { font-size: var(--font-size-9, 4rem); }
|
||||
.f10-m { font-size: var(--font-size-10, 6rem); }
|
||||
.f11-m { font-size: var(--font-size-11, 8rem); }
|
||||
.f12-m { font-size: var(--font-size-12, 12rem); }
|
||||
@media (--breakpoint-medium) {
|
||||
.f-6-m,
|
||||
.f-headline-m { font-size: 6rem; }
|
||||
.f-5-m,
|
||||
.f-subheadline-m { font-size: 5rem; }
|
||||
.f1-m { font-size: 3rem; }
|
||||
.f2-m { font-size: 2.25rem; }
|
||||
.f3-m { font-size: 1.5rem; }
|
||||
.f4-m { font-size: 1.25rem; }
|
||||
.f5-m { font-size: 1rem; }
|
||||
.f6-m { font-size: .875rem; }
|
||||
.f7-m { font-size: .75rem; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.f1-l { font-size: var(--font-size-1, .75rem); }
|
||||
.f2-l { font-size: var(--font-size-2, .875rem); }
|
||||
.f3-l { font-size: var(--font-size-3, 1rem); }
|
||||
.f4-l { font-size: var(--font-size-4, 1.125rem); }
|
||||
.f5-l { font-size: var(--font-size-5, 1.25rem); }
|
||||
.f6-l { font-size: var(--font-size-6, 1.5rem); }
|
||||
.f7-l { font-size: var(--font-size-7, 2rem); }
|
||||
.f8-l { font-size: var(--font-size-8, 3rem); }
|
||||
.f9-l { font-size: var(--font-size-9, 4rem); }
|
||||
.f10-l { font-size: var(--font-size-10, 6rem); }
|
||||
.f11-l { font-size: var(--font-size-11, 8rem); }
|
||||
.f12-l { font-size: var(--font-size-12, 12rem); }
|
||||
@media (--breakpoint-large) {
|
||||
.f-6-l,
|
||||
.f-headline-l {
|
||||
font-size: 6rem;
|
||||
}
|
||||
.f-5-l,
|
||||
.f-subheadline-l {
|
||||
font-size: 5rem;
|
||||
}
|
||||
.f1-l { font-size: 3rem; }
|
||||
.f2-l { font-size: 2.25rem; }
|
||||
.f3-l { font-size: 1.5rem; }
|
||||
.f4-l { font-size: 1.25rem; }
|
||||
.f5-l { font-size: 1rem; }
|
||||
.f6-l { font-size: .875rem; }
|
||||
.f7-l { font-size: .75rem; }
|
||||
}
|
||||
|
||||
@ -4,26 +4,27 @@
|
||||
http://tachyons.io/docs/typography/measure/
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* Measure is limited to 66 characters */
|
||||
|
||||
/* Measure is limited to ~66 characters */
|
||||
.measure {
|
||||
max-width: var(--measure, 66ch);
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
/* Measure is limited to ~80 characters */
|
||||
.measure-wide {
|
||||
max-width: var(--measure-wide, 80ch);
|
||||
max-width: 34em;
|
||||
}
|
||||
|
||||
/* Measure is limited to 45 characters */
|
||||
/* Measure is limited to ~45 characters */
|
||||
.measure-narrow {
|
||||
max-width: var(--measure-narrow, 45ch);
|
||||
max-width: 20em;
|
||||
}
|
||||
|
||||
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
|
||||
@ -45,33 +46,49 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@container (min-width:30em) {
|
||||
.measure-s { max-width: var(--measure, 66ch); }
|
||||
.measure-wide-s { max-width: var(--measure-wide, 80ch); }
|
||||
.measure-narrow-s { max-width: var(--measure-narrow, 45ch); }
|
||||
.small-caps-s { font-variant: small-caps; }
|
||||
.indent-s {
|
||||
@media (--breakpoint-not-small) {
|
||||
.measure-ns {
|
||||
max-width: 30em;
|
||||
}
|
||||
.measure-wide-ns {
|
||||
max-width: 34em;
|
||||
}
|
||||
.measure-narrow-ns {
|
||||
max-width: 20em;
|
||||
}
|
||||
.indent-ns {
|
||||
text-indent: 1em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.truncate-s {
|
||||
.small-caps-ns {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.truncate-ns {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.measure-m { max-width: var(--measure, 66ch); }
|
||||
.measure-wide-m { max-width: var(--measure-wide, 80ch); }
|
||||
.measure-narrow-m { max-width: var(--measure-narrow, 45ch); }
|
||||
.small-caps-m { font-variant: small-caps; }
|
||||
@media (--breakpoint-medium) {
|
||||
.measure-m {
|
||||
max-width: 30em;
|
||||
}
|
||||
.measure-wide-m {
|
||||
max-width: 34em;
|
||||
}
|
||||
.measure-narrow-m {
|
||||
max-width: 20em;
|
||||
}
|
||||
.indent-m {
|
||||
text-indent: 1em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.small-caps-m {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.truncate-m {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -79,16 +96,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.measure-l { max-width: var(--measure, 66ch); }
|
||||
.measure-wide-l { max-width: var(--measure-wide, 80ch); }
|
||||
.measure-narrow-l { max-width: var(--measure-narrow, 45ch); }
|
||||
.small-caps-l { font-variant: small-caps; }
|
||||
@media (--breakpoint-large) {
|
||||
.measure-l {
|
||||
max-width: 30em;
|
||||
}
|
||||
.measure-wide-l {
|
||||
max-width: 34em;
|
||||
}
|
||||
.measure-narrow-l {
|
||||
max-width: 20em;
|
||||
}
|
||||
.indent-l {
|
||||
text-indent: 1em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.small-caps-l {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.truncate-l {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@ -3,12 +3,17 @@
|
||||
UTILITIES
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
/* Equivalent to .overflow-y-scroll */
|
||||
.overflow-container {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@ -17,16 +22,16 @@
|
||||
.mr-auto { margin-right: auto; }
|
||||
.ml-auto { margin-left: auto; }
|
||||
|
||||
@container (min-width:30em){
|
||||
.center-s {
|
||||
@media (--breakpoint-not-small){
|
||||
.center-ns {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.mr-auto-s { margin-right: auto; }
|
||||
.ml-auto-s { margin-left: auto; }
|
||||
.mr-auto-ns { margin-right: auto; }
|
||||
.ml-auto-ns { margin-left: auto; }
|
||||
}
|
||||
|
||||
@container (min-width:48em){
|
||||
@media (--breakpoint-medium){
|
||||
.center-m {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@ -35,7 +40,7 @@
|
||||
.ml-auto-m { margin-left: auto; }
|
||||
}
|
||||
|
||||
@container (min-width:64em){
|
||||
@media (--breakpoint-large){
|
||||
.center-l {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@ -1,392 +0,0 @@
|
||||
/*
|
||||
|
||||
VARIABLES
|
||||
|
||||
|
||||
*/
|
||||
|
||||
:root {
|
||||
|
||||
/*
|
||||
* COLORS
|
||||
* A balanced color system optimized for accessibility
|
||||
* Theme generated with https://components.ai/theme
|
||||
* The first six steps in each scale are accessible with white
|
||||
*
|
||||
*/
|
||||
|
||||
--tint-0: hsla(0, 0%, 100%, 0.035);
|
||||
--tint-1: hsla(0, 0%, 100%, 0.1);
|
||||
--tint-2: hsla(0, 0%, 100%, 0.19);
|
||||
--tint-3: hsla(0, 0%, 100%, 0.28);
|
||||
--tint-4: hsla(0, 0%, 100%, 0.36);
|
||||
--tint-5: hsla(0, 0%, 100%, 0.45);
|
||||
--tint-6: hsla(0, 0%, 100%, 0.55);
|
||||
--tint-7: hsla(0, 0%, 100%, 0.64);
|
||||
--tint-8: hsla(0, 0%, 100%, 0.73);
|
||||
--tint-9: hsla(0, 0%, 100%, 0.815);
|
||||
--tint-10: hsla(0, 0%, 100%, 0.895);
|
||||
--tint-11: hsla(0, 0%, 100%, 0.94);
|
||||
--shadow-11: hsla(0, 0%, 0%, 0.94);
|
||||
--shadow-10: hsla(0, 0%, 0%, 0.895);
|
||||
--shadow-9: hsla(0, 0%, 0%, 0.815);
|
||||
--shadow-8: hsla(0, 0%, 0%, 0.73);
|
||||
--shadow-7: hsla(0, 0%, 0%, 0.64);
|
||||
--shadow-6: hsla(0, 0%, 0%, 0.55);
|
||||
--shadow-5: hsla(0, 0%, 0%, 0.45);
|
||||
--shadow-4: hsla(0, 0%, 0%, 0.36);
|
||||
--shadow-3: hsla(0, 0%, 0%, 0.28);
|
||||
--shadow-2: hsla(0, 0%, 0%, 0.19);
|
||||
--shadow-1: hsla(0, 0%, 0%, 0.1);
|
||||
--shadow-0: hsla(0, 0%, 0%, 0.035);
|
||||
--gray-0: #000000;
|
||||
--gray-1: #171717;
|
||||
--gray-2: #2f2f2f;
|
||||
--gray-3: #464646;
|
||||
--gray-4: #5e5e5e;
|
||||
--gray-5: #757575;
|
||||
--gray-6: #8c8c8c;
|
||||
--gray-7: #a3a3a3;
|
||||
--gray-8: #bababa;
|
||||
--gray-9: #d1d1d1;
|
||||
--gray-10: #e8e8e8;
|
||||
--gray-11: #ffffff;
|
||||
--slate-gray-0: #09090b;
|
||||
--slate-gray-1: #1d1d22;
|
||||
--slate-gray-2: #313138;
|
||||
--slate-gray-3: #45444f;
|
||||
--slate-gray-4: #595866;
|
||||
--slate-gray-5: #6d6c7d;
|
||||
--slate-gray-6: #838292;
|
||||
--slate-gray-7: #9a9aa7;
|
||||
--slate-gray-8: #b2b1bb;
|
||||
--slate-gray-9: #c9c9d0;
|
||||
--slate-gray-10: #e1e0e4;
|
||||
--slate-gray-11: #f8f8f9;
|
||||
--blue-1: #071e3f;
|
||||
--blue-2: #0c3166;
|
||||
--blue-3: #10448d;
|
||||
--blue-4: #1556b4;
|
||||
--blue-5: #1969db;
|
||||
--blue-6: #317fed;
|
||||
--blue-7: #5797f0;
|
||||
--blue-8: #7daef4;
|
||||
--blue-9: #a3c6f7;
|
||||
--blue-10: #c9ddfa;
|
||||
--blue-11: #eff5fe;
|
||||
--indigo-0: #080614;
|
||||
--indigo-1: #19143f;
|
||||
--indigo-2: #2a216a;
|
||||
--indigo-3: #3a2e95;
|
||||
--indigo-4: #4b3bc0;
|
||||
--indigo-5: #5c49eb;
|
||||
--indigo-6: #725fff;
|
||||
--indigo-7: #8c7cff;
|
||||
--indigo-8: #a69aff;
|
||||
--indigo-9: #c0b7ff;
|
||||
--indigo-10: #dad5ff;
|
||||
--indigo-11: #f4f3ff;
|
||||
--violet-0: #110517;
|
||||
--violet-1: #2e0d3e;
|
||||
--violet-2: #4b1465;
|
||||
--violet-3: #681c8c;
|
||||
--violet-4: #8424b3;
|
||||
--violet-5: #a12cda;
|
||||
--violet-6: #b543ec;
|
||||
--violet-7: #c366f0;
|
||||
--violet-8: #d089f3;
|
||||
--violet-9: #deabf7;
|
||||
--violet-10: #eccefa;
|
||||
--violet-11: #f9f0fe;
|
||||
--magenta-0: #13040f;
|
||||
--magenta-1: #350a2c;
|
||||
--magenta-2: #581148;
|
||||
--magenta-3: #7b1765;
|
||||
--magenta-4: #9e1e82;
|
||||
--magenta-5: #c1249e;
|
||||
--magenta-6: #d43cb2;
|
||||
--magenta-7: #dc61c1;
|
||||
--magenta-8: #e485cf;
|
||||
--magenta-9: #eca9dd;
|
||||
--magenta-10: #f4ceec;
|
||||
--magenta-11: #fcf2fa;
|
||||
--red-0: #120205;
|
||||
--red-1: #39050f;
|
||||
--red-2: #5f0819;
|
||||
--red-3: #860b24;
|
||||
--red-4: #ac0e2e;
|
||||
--red-5: #d31138;
|
||||
--red-6: #e7284e;
|
||||
--red-7: #ec506f;
|
||||
--red-8: #f07790;
|
||||
--red-9: #f49fb0;
|
||||
--red-10: #f9c7d1;
|
||||
--red-11: #fdeef1;
|
||||
--red-orange-0: #190b05;
|
||||
--red-orange-1: #3d1307;
|
||||
--red-orange-2: #601b0a;
|
||||
--red-orange-3: #84240c;
|
||||
--red-orange-4: #a72c0e;
|
||||
--red-orange-5: #cb3411;
|
||||
--red-orange-6: #ee3c13;
|
||||
--red-orange-7: #fe562f;
|
||||
--red-orange-8: #fe7d5e;
|
||||
--red-orange-9: #ffa48e;
|
||||
--red-orange-10: #ffccbe;
|
||||
--red-orange-11: #fff3ee;
|
||||
--orange-0: #150d04;
|
||||
--orange-1: #2e1c08;
|
||||
--orange-2: #472a0c;
|
||||
--orange-3: #603910;
|
||||
--orange-4: #794714;
|
||||
--orange-5: #a65d13;
|
||||
--orange-6: #d37413;
|
||||
--orange-7: #ff8a14;
|
||||
--orange-8: #ffa54a;
|
||||
--orange-9: #ffc081;
|
||||
--orange-10: #ffdab7;
|
||||
--orange-11: #fff5ed;
|
||||
--gold-0: #140e05;
|
||||
--gold-1: #2c1f0a;
|
||||
--gold-2: #432f0e;
|
||||
--gold-3: #5b4013;
|
||||
--gold-4: #725118;
|
||||
--gold-5: #946818;
|
||||
--gold-6: #d4950d;
|
||||
--gold-7: #eeb028;
|
||||
--gold-8: #f2c259;
|
||||
--gold-9: #f7d38a;
|
||||
--gold-10: #fbe5bc;
|
||||
--gold-11: #fff5e9;
|
||||
--yellow-0: #111006;
|
||||
--yellow-1: #252405;
|
||||
--yellow-2: #3a3804;
|
||||
--yellow-3: #4e4d03;
|
||||
--yellow-4: #636101;
|
||||
--yellow-5: #777500;
|
||||
--yellow-6: #ccc500;
|
||||
--yellow-7: #fcf433;
|
||||
--yellow-8: #fdf67a;
|
||||
--yellow-9: #fdf89b;
|
||||
--yellow-10: #fef9bb;
|
||||
--yellow-11: #fefadb;
|
||||
--green-0: #091108;
|
||||
--green-1: #0f2611;
|
||||
--green-2: #153c1a;
|
||||
--green-3: #1b5122;
|
||||
--green-4: #21662b;
|
||||
--green-5: #25833a;
|
||||
--green-6: #26b056;
|
||||
--green-7: #35d272;
|
||||
--green-8: #63dd90;
|
||||
--green-9: #90e8ae;
|
||||
--green-10: #bdf3cc;
|
||||
--green-11: #eafeea;
|
||||
--teal-0: #07100c;
|
||||
--teal-1: #0c231a;
|
||||
--teal-2: #113628;
|
||||
--teal-3: #164936;
|
||||
--teal-4: #1b5b45;
|
||||
--teal-5: #177f63;
|
||||
--teal-6: #12a282;
|
||||
--teal-7: #2abb9b;
|
||||
--teal-8: #5acab1;
|
||||
--teal-9: #8bdac7;
|
||||
--teal-10: #bbe9dc;
|
||||
--teal-11: #ecf8f2;
|
||||
--cyan-0: #0a1211;
|
||||
--cyan-1: #102425;
|
||||
--cyan-2: #153639;
|
||||
--cyan-3: #1b484c;
|
||||
--cyan-4: #215a60;
|
||||
--cyan-5: #247981;
|
||||
--cyan-6: #24a9b6;
|
||||
--cyan-7: #28d6e6;
|
||||
--cyan-8: #57e0ec;
|
||||
--cyan-9: #85eaf2;
|
||||
--cyan-10: #b4f5f9;
|
||||
--cyan-11: #e2ffff;
|
||||
--transparent: hsla(0,0,0,0);
|
||||
|
||||
@supports (color: color(display-p3 1 1 1)) {
|
||||
:root {
|
||||
--blue-0: color(display-p3 0 0.07 0.25);
|
||||
--blue-1: color(display-p3 0 0.09 0.32);
|
||||
--blue-2: color(display-p3 0 0.11 0.42);
|
||||
--blue-3: color(display-p3 0 0.15 0.53);
|
||||
--blue-4: color(display-p3 0 0.16 0.7);
|
||||
--blue-5: color(display-p3 0 0.22 0.88);
|
||||
--blue-6: color(display-p3 0.06 0.37 1);
|
||||
--blue-7: color(display-p3 0.38 0.59 1 );
|
||||
--blue-8: color(display-p3 0.66 0.79 1);
|
||||
--blue-9: color(display-p3 0.79 0.86 0.99);
|
||||
--blue-10: color(display-p3 0.87 0.92 0.99);
|
||||
--blue-11: color(display-p3 0.92 0.95 1);
|
||||
--indigo-0: color(display-p3 0.06 0.03 0.21);
|
||||
--indigo-1: color(display-p3 0.09 0.07 0.26);
|
||||
--indigo-2: color(display-p3 0.15 0.11 0.42);
|
||||
--indigo-3: color(display-p3 0.18 0.14 0.57);
|
||||
--indigo-4: color(display-p3 0.2 0.18 0.75);
|
||||
--indigo-5: color(display-p3 0.26 0.22 1);
|
||||
--indigo-6: color(display-p3 0.28 0.28 1);
|
||||
--indigo-7: color(display-p3 0.47 0.49 1);
|
||||
--indigo-8: color(display-p3 0.67 0.68 1);
|
||||
--indigo-9: color(display-p3 0.81 0.81 0.98);
|
||||
--indigo-10: color(display-p3 0.87 0.92 0.99);
|
||||
--indigo-11: color(display-p3 0.92 0.95 1);
|
||||
}
|
||||
}
|
||||
|
||||
--degrees-1: 0;
|
||||
--degrees-2: 45deg;
|
||||
--degrees-3: 90deg;
|
||||
--degrees-4: 135deg;
|
||||
--degrees-5: 180deg;
|
||||
--degrees-6: 225deg;
|
||||
--degrees-7: 270deg;
|
||||
--degrees-8: 315deg;
|
||||
|
||||
--gradient-degree-0: var(--degrees-1, 0);
|
||||
--gradient-degree: var(--degrees-2, 45deg);
|
||||
--gradient-degree-2: var(--degrees-4, 135deg);
|
||||
|
||||
--gradient-stripe-width: 12px;
|
||||
--gradient-stripe-width-2: var(--border-width-1);
|
||||
|
||||
--gradient-color-1: var(--blue-2);
|
||||
--gradient-color-2: var(--magenta-6);
|
||||
--gradient-color-3: var(--red-5);
|
||||
--gradient-color-4: var(--indigo-5);
|
||||
--gradient-color-5: var(--violet-0);
|
||||
--gradient-color-6: var(--violet-5);
|
||||
--gradient-color-7: var(--magenta-0);
|
||||
--gradient-color-8: var(--magenta-5);
|
||||
--gradient-color-9: var(--red-0);
|
||||
--gradient-color-10: var(--red-5);
|
||||
--gradient-color-11: var(--red-orange-0);
|
||||
--gradient-color-12: var(--red-orange-5);
|
||||
--gradient-color-13: var(--orange-0);
|
||||
--gradient-color-14: var(--orange-5);
|
||||
--gradient-color-15: var(--gold-0);
|
||||
--gradient-color-16: var(--gold-5);
|
||||
--gradient-color-17: var(--yellow-0);
|
||||
--gradient-color-18: var(--yellow-5);
|
||||
--gradient-color-19: var(--green-0);
|
||||
--gradient-color-20: var(--green-5);
|
||||
--gradient-color-21: var(--teal-0);
|
||||
--gradient-color-22: var(--teal-5);
|
||||
--gradient-color-23: var(--cyan-0);
|
||||
--gradient-color-24: var(--cyan-5);
|
||||
|
||||
--gradient-stop: 50%;
|
||||
|
||||
--font-size-1: 12px;
|
||||
--font-size-2: 14px;
|
||||
--font-size-3: 16px;
|
||||
--font-size-4: 20px;
|
||||
--font-size-5: 24px;
|
||||
--font-size-6: 32px;
|
||||
--font-size-7: 48px;
|
||||
--font-size-8: 64px;
|
||||
--font-size-9: 96px;
|
||||
--font-size-10: 128px;
|
||||
--font-size-11: 192px;
|
||||
--font-size-12: 256px;
|
||||
|
||||
--measure-narrow: 45ch;
|
||||
--measure: 66ch;
|
||||
--measure-wide: 80ch;
|
||||
|
||||
--border-radius-0: 0;
|
||||
--border-radius-1: 4px;
|
||||
--border-radius-2: 6px;
|
||||
--border-radius-3: 8px;
|
||||
--border-radius-4: 12px;
|
||||
--border-radius-5: 16px;
|
||||
--border-radius-6: 20px;
|
||||
--border-radius-7: 24px;
|
||||
--border-radius-8: 32px;
|
||||
--border-radius-9: 48px;
|
||||
--border-radius-10: 64px;
|
||||
--border-radius-11: 9999px;
|
||||
--border-radius: var(--border-radius-2);
|
||||
|
||||
--border-width-0: 0;
|
||||
--border-width-1: 1px;
|
||||
--border-width-2: 2px;
|
||||
--border-width-3: 4px;
|
||||
--border-width-4: 8px;
|
||||
--border-width-5: 16px;
|
||||
|
||||
--border-width: var(--border-width-1,1px);
|
||||
--border-color: var(--gray-5, gray);
|
||||
|
||||
--line-height-solid: 1;
|
||||
--line-height-heading: 1.25;
|
||||
--line-height-body: 1.5;
|
||||
|
||||
--letter-spacing-tracked: 0.1em;
|
||||
--letter-spacing-tight: -0.05em;
|
||||
--letter-spacing-large: 0.25em;
|
||||
|
||||
--font-family-heading: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
--font-family-body: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
--font-family-mono: Inconsolata, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
||||
|
||||
--spacing-0: 0;
|
||||
--spacing-1: 2px;
|
||||
--spacing-2: 4px;
|
||||
--spacing-3: 8px;
|
||||
--spacing-4: 16px;
|
||||
--spacing-5: 32px;
|
||||
--spacing-6: 64px;
|
||||
--spacing-7: 128px;
|
||||
--spacing-8: 256px;
|
||||
--spacing-9: 512px;
|
||||
|
||||
--size-0: 0;
|
||||
--size-1: 1rem;
|
||||
--size-2: 2rem;
|
||||
--size-3: 3rem;
|
||||
--size-4: 4rem;
|
||||
--size-5: 8rem;
|
||||
--size-6: 16rem;
|
||||
--size-7: 32rem;
|
||||
--size-8: 64rem;
|
||||
|
||||
--shadow-color: 0 0 0;
|
||||
--shadow-color-invert: 255 255 255;
|
||||
--shadow-border-width: 1px;
|
||||
--shadow-opacity: .25;
|
||||
|
||||
/* Opacity scale */
|
||||
|
||||
--opacity-0: 0;
|
||||
--opacity-1: .025;
|
||||
--opacity-2: .05;
|
||||
--opacity-3: .1;
|
||||
--opacity-4: .2;
|
||||
--opacity-5: .3;
|
||||
--opacity-6: .4;
|
||||
--opacity-7: .5;
|
||||
--opacity-8: .6;
|
||||
--opacity-9: .7;
|
||||
--opacity-10: .8;
|
||||
--opacity-11: .9;
|
||||
--opacity-12: 1;
|
||||
|
||||
--duration-0: 125ms;
|
||||
--duration-1: 250ms;
|
||||
--duration-2: 500ms;
|
||||
|
||||
--easing-function-0: cubic-bezier(0.543, 1.086, 0.5, -0.383);
|
||||
--easing-function-1: ease;
|
||||
--easing-function-2: ease-out;
|
||||
--easing-function-3: ease-in-out;
|
||||
--easing-function-4: linear;
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--shadow-color: 255 255 255;
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
VERTICAL ALIGN
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -14,21 +14,21 @@
|
||||
.v-top { vertical-align: top; }
|
||||
.v-btm { vertical-align: bottom; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.v-base-s { vertical-align: baseline; }
|
||||
.v-mid-s { vertical-align: middle; }
|
||||
.v-top-s { vertical-align: top; }
|
||||
.v-btm-s { vertical-align: bottom; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.v-base-ns { vertical-align: baseline; }
|
||||
.v-mid-ns { vertical-align: middle; }
|
||||
.v-top-ns { vertical-align: top; }
|
||||
.v-btm-ns { vertical-align: bottom; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.v-base-m { vertical-align: baseline; }
|
||||
.v-mid-m { vertical-align: middle; }
|
||||
.v-top-m { vertical-align: top; }
|
||||
.v-btm-m { vertical-align: bottom; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.v-base-l { vertical-align: baseline; }
|
||||
.v-mid-l { vertical-align: middle; }
|
||||
.v-top-l { vertical-align: top; }
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
VISIBILITY
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -12,56 +12,40 @@
|
||||
|
||||
/*
|
||||
Text that is hidden but accessible
|
||||
Ref: https://accessibility.18f.gov/hidden-content/
|
||||
Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*/
|
||||
|
||||
.clip {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
@container (min-width:30em) {
|
||||
.clip-s {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@media (--breakpoint-not-small) {
|
||||
.clip-ns {
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.clip-m {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.clip-l {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
WHITE SPACE
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -14,19 +14,19 @@
|
||||
.nowrap { white-space: nowrap; }
|
||||
.pre { white-space: pre; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.ws-normal-s { white-space: normal; }
|
||||
.nowrap-s { white-space: nowrap; }
|
||||
.pre-s { white-space: pre; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.ws-normal-ns { white-space: normal; }
|
||||
.nowrap-ns { white-space: nowrap; }
|
||||
.pre-ns { white-space: pre; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.ws-normal-m { white-space: normal; }
|
||||
.nowrap-m { white-space: nowrap; }
|
||||
.pre-m { white-space: pre; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.ws-normal-l { white-space: normal; }
|
||||
.nowrap-l { white-space: nowrap; }
|
||||
.pre-l { white-space: pre; }
|
||||
|
||||
117
src/_widths.css
117
src/_widths.css
@ -12,9 +12,6 @@
|
||||
3 = 3rd step in width scale
|
||||
4 = 4th step in width scale
|
||||
5 = 5th step in width scale
|
||||
6 = 6th step in width scale
|
||||
7 = 7th step in width scale
|
||||
8 = 8th step in width scale
|
||||
|
||||
-10 = literal value 10%
|
||||
-20 = literal value 20%
|
||||
@ -37,7 +34,7 @@
|
||||
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -45,84 +42,100 @@
|
||||
|
||||
/* Width Scale */
|
||||
|
||||
.w0 { width: var(--size-0, 0); }
|
||||
.w1 { width: var(--size-1, 1rem); }
|
||||
.w2 { width: var(--size-2, 2rem); }
|
||||
.w3 { width: var(--size-3, 3rem); }
|
||||
.w4 { width: var(--size-4, 4rem); }
|
||||
.w5 { width: var(--size-5, 8rem); }
|
||||
.w6 { width: var(--size-6, 16rem); }
|
||||
.w7 { width: var(--size-7, 32rem); }
|
||||
.w8 { width: var(--size-8, 64rem); }
|
||||
.w1 { width: 1rem; }
|
||||
.w2 { width: 2rem; }
|
||||
.w3 { width: 4rem; }
|
||||
.w4 { width: 8rem; }
|
||||
.w5 { width: 16rem; }
|
||||
|
||||
.w-10 { width: 10%; }
|
||||
.w-20 { width: 20%; }
|
||||
.w-25 { width: 25%; }
|
||||
.w-30 { width: 30%; }
|
||||
.w-33 { width: 33%; }
|
||||
.w-34 { width: 34%; }
|
||||
.w-40 { width: 40%; }
|
||||
.w-50 { width: 50%; }
|
||||
.w-60 { width: 60%; }
|
||||
.w-70 { width: 70%; }
|
||||
.w-75 { width: 75%; }
|
||||
.w-80 { width: 80%; }
|
||||
.w-90 { width: 90%; }
|
||||
.w-100 { width: 100%; }
|
||||
|
||||
.w-third { width: calc(100% / 3); }
|
||||
.w-two-thirds { width: calc(100% / 1.5); }
|
||||
.w-auto { width: auto; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.w0-s { width: var(--size-0, 0); }
|
||||
.w1-s { width: var(--size-1, 1rem); }
|
||||
.w2-s { width: var(--size-2, 2rem); }
|
||||
.w3-s { width: var(--size-3, 3rem); }
|
||||
.w4-s { width: var(--size-4, 4rem); }
|
||||
.w5-s { width: var(--size-5, 8rem); }
|
||||
.w6-s { width: var(--size-6, 16rem); }
|
||||
.w7-s { width: var(--size-7, 32rem); }
|
||||
.w8-s { width: var(--size-8, 64rem); }
|
||||
.w-10-s { width: 10%; }
|
||||
.w-20-s { width: 20%; }
|
||||
.w-25-s { width: 25%; }
|
||||
.w-50-s { width: 50%; }
|
||||
.w-75-s { width: 75%; }
|
||||
.w-100-s { width: 100%; }
|
||||
.w-third-s { width: calc(100% / 3); }
|
||||
.w-two-thirds-s { width: calc(100% / 1.5); }
|
||||
.w-auto-s { width: auto; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.w1-ns { width: 1rem; }
|
||||
.w2-ns { width: 2rem; }
|
||||
.w3-ns { width: 4rem; }
|
||||
.w4-ns { width: 8rem; }
|
||||
.w5-ns { width: 16rem; }
|
||||
.w-10-ns { width: 10%; }
|
||||
.w-20-ns { width: 20%; }
|
||||
.w-25-ns { width: 25%; }
|
||||
.w-30-ns { width: 30%; }
|
||||
.w-33-ns { width: 33%; }
|
||||
.w-34-ns { width: 34%; }
|
||||
.w-40-ns { width: 40%; }
|
||||
.w-50-ns { width: 50%; }
|
||||
.w-60-ns { width: 60%; }
|
||||
.w-70-ns { width: 70%; }
|
||||
.w-75-ns { width: 75%; }
|
||||
.w-80-ns { width: 80%; }
|
||||
.w-90-ns { width: 90%; }
|
||||
.w-100-ns { width: 100%; }
|
||||
.w-third-ns { width: calc(100% / 3); }
|
||||
.w-two-thirds-ns { width: calc(100% / 1.5); }
|
||||
.w-auto-ns { width: auto; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
.w0-m { width: var(--size-0, 0); }
|
||||
.w1-m { width: var(--size-1, 1rem); }
|
||||
.w2-m { width: var(--size-2, 2rem); }
|
||||
.w3-m { width: var(--size-3, 3rem); }
|
||||
.w4-m { width: var(--size-4, 4rem); }
|
||||
.w5-m { width: var(--size-5, 8rem); }
|
||||
.w6-m { width: var(--size-6, 16rem); }
|
||||
.w7-m { width: var(--size-7, 32rem); }
|
||||
.w8-m { width: var(--size-8, 64rem); }
|
||||
@media (--breakpoint-medium) {
|
||||
.w1-m { width: 1rem; }
|
||||
.w2-m { width: 2rem; }
|
||||
.w3-m { width: 4rem; }
|
||||
.w4-m { width: 8rem; }
|
||||
.w5-m { width: 16rem; }
|
||||
.w-10-m { width: 10%; }
|
||||
.w-20-m { width: 20%; }
|
||||
.w-25-m { width: 25%; }
|
||||
.w-30-m { width: 30%; }
|
||||
.w-33-m { width: 33%; }
|
||||
.w-34-m { width: 34%; }
|
||||
.w-40-m { width: 40%; }
|
||||
.w-50-m { width: 50%; }
|
||||
.w-60-m { width: 60%; }
|
||||
.w-70-m { width: 70%; }
|
||||
.w-75-m { width: 75%; }
|
||||
.w-80-m { width: 80%; }
|
||||
.w-90-m { width: 90%; }
|
||||
.w-100-m { width: 100%; }
|
||||
.w-third-m { width: calc(100% / 3); }
|
||||
.w-two-thirds-m { width: calc(100% / 1.5); }
|
||||
.w-auto-m { width: auto; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
.w0-l { width: var(--size-0, 0); }
|
||||
.w1-l { width: var(--size-1, 1rem); }
|
||||
.w2-l { width: var(--size-2, 2rem); }
|
||||
.w3-l { width: var(--size-3, 3rem); }
|
||||
.w4-l { width: var(--size-4, 4rem); }
|
||||
.w5-l { width: var(--size-5, 8rem); }
|
||||
.w6-l { width: var(--size-6, 16rem); }
|
||||
.w7-l { width: var(--size-7, 32rem); }
|
||||
.w8-l { width: var(--size-8, 64rem); }
|
||||
@media (--breakpoint-large) {
|
||||
.w1-l { width: 1rem; }
|
||||
.w2-l { width: 2rem; }
|
||||
.w3-l { width: 4rem; }
|
||||
.w4-l { width: 8rem; }
|
||||
.w5-l { width: 16rem; }
|
||||
.w-10-l { width: 10%; }
|
||||
.w-20-l { width: 20%; }
|
||||
.w-25-l { width: 25%; }
|
||||
.w-30-l { width: 30%; }
|
||||
.w-33-l { width: 33%; }
|
||||
.w-34-l { width: 34%; }
|
||||
.w-40-l { width: 40%; }
|
||||
.w-50-l { width: 50%; }
|
||||
.w-60-l { width: 60%; }
|
||||
.w-70-l { width: 70%; }
|
||||
.w-75-l { width: 75%; }
|
||||
.w-80-l { width: 80%; }
|
||||
.w-90-l { width: 90%; }
|
||||
.w-100-l { width: 100%; }
|
||||
.w-third-l { width: calc(100% / 3); }
|
||||
.w-two-thirds-l { width: calc(100% / 1.5); }
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
word = word-break
|
||||
|
||||
Media Query Extensions:
|
||||
-s = small
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
@ -16,19 +16,19 @@
|
||||
.word-wrap { word-break: break-all; }
|
||||
.word-nowrap { word-break: keep-all; }
|
||||
|
||||
@container (min-width:30em) {
|
||||
.word-normal-s { word-break: normal; }
|
||||
.word-wrap-s { word-break: break-all; }
|
||||
.word-nowrap-s { word-break: keep-all; }
|
||||
@media (--breakpoint-not-small) {
|
||||
.word-normal-ns { word-break: normal; }
|
||||
.word-wrap-ns { word-break: break-all; }
|
||||
.word-nowrap-ns { word-break: keep-all; }
|
||||
}
|
||||
|
||||
@container (min-width:48em) {
|
||||
@media (--breakpoint-medium) {
|
||||
.word-normal-m { word-break: normal; }
|
||||
.word-wrap-m { word-break: break-all; }
|
||||
.word-nowrap-m { word-break: keep-all; }
|
||||
}
|
||||
|
||||
@container (min-width:64em) {
|
||||
@media (--breakpoint-large) {
|
||||
.word-normal-l { word-break: normal; }
|
||||
.word-wrap-l { word-break: break-all; }
|
||||
.word-nowrap-l { word-break: keep-all; }
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! TACHYONS v5.0.0.beta | http://tachyons.io */
|
||||
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
||||
|
||||
/*
|
||||
*
|
||||
@ -27,18 +27,9 @@
|
||||
/* External Library Includes */
|
||||
@import './_normalize';
|
||||
|
||||
/* Variables */
|
||||
/* Importing here will allow you to override any variables in the modules */
|
||||
@import './_media-queries';
|
||||
@import './_variables';
|
||||
|
||||
@import './_gradients';
|
||||
|
||||
|
||||
/* Modules */
|
||||
@import './_box-sizing';
|
||||
@import './_container-type';
|
||||
@import './_all';
|
||||
@import './_aspect-ratios';
|
||||
@import './_images';
|
||||
@import './_background-size';
|
||||
@ -50,29 +41,11 @@
|
||||
@import './_border-style';
|
||||
@import './_border-widths';
|
||||
@import './_box-shadow';
|
||||
@import './_text-shadow';
|
||||
@import './_code';
|
||||
@import './_coordinates';
|
||||
@import './_clears';
|
||||
@import './_display';
|
||||
@import './_glass';
|
||||
@import './_gap';
|
||||
@import './_gap-column';
|
||||
@import './_gap-row';
|
||||
@import './_grid-template-columns';
|
||||
@import './_grid-column';
|
||||
@import './_grid-row';
|
||||
@import './_backdrop-filters';
|
||||
@import './_filters';
|
||||
@import './_flexbox';
|
||||
@import './_flex-direction';
|
||||
@import './_flex-wrap';
|
||||
@import './_align-items';
|
||||
@import './_align-content';
|
||||
@import './_align-self';
|
||||
@import './_justify-self';
|
||||
@import './_justify-content';
|
||||
@import './_order';
|
||||
@import './_floats';
|
||||
@import './_font-family';
|
||||
@import './_font-style';
|
||||
@ -108,6 +81,10 @@
|
||||
@import './_nested';
|
||||
@import './_styles';
|
||||
|
||||
/* Variables */
|
||||
/* Importing here will allow you to override any variables in the modules */
|
||||
@import './_colors';
|
||||
@import './_media-queries';
|
||||
|
||||
/* Debugging */
|
||||
@import './_debug-children';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user