mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
Documentation
This commit is contained in:
Lucas
parent
80ce6f23c1
commit
f5e4d01cbb
18 changed files with 429 additions and 427 deletions
|
|
@ -17,10 +17,10 @@
|
|||
--h5: #73848c;
|
||||
--h6: #8a9ba3;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #374b56;
|
||||
--secondary-hover: #23353e;
|
||||
--secondary-focus: rgba(55, 75, 86, 0.125);
|
||||
|
|
@ -60,10 +60,10 @@
|
|||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--mark: rgba(255, 223, 128, 0.25);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #bbc7ce;
|
||||
--secondary-hover: #edf1f3;
|
||||
--secondary-focus: rgba(187, 199, 206, 0.25);
|
||||
|
|
@ -105,10 +105,10 @@
|
|||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--mark: rgba(255, 223, 128, 0.25);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #bbc7ce;
|
||||
--secondary-hover: #edf1f3;
|
||||
--secondary-focus: rgba(187, 199, 206, 0.25);
|
||||
|
|
@ -718,6 +718,10 @@ textarea[valid]:not(:focus) {
|
|||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
height: calc(3rem + 2px);
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
28
css/pico.css
28
css/pico.css
|
|
@ -17,10 +17,10 @@
|
|||
--h5: #73848c;
|
||||
--h6: #8a9ba3;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #374b56;
|
||||
--secondary-hover: #23353e;
|
||||
--secondary-focus: rgba(55, 75, 86, 0.125);
|
||||
|
|
@ -60,10 +60,10 @@
|
|||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--mark: rgba(255, 223, 128, 0.25);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #bbc7ce;
|
||||
--secondary-hover: #edf1f3;
|
||||
--secondary-focus: rgba(187, 199, 206, 0.25);
|
||||
|
|
@ -105,10 +105,10 @@
|
|||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--mark: rgba(255, 223, 128, 0.25);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #bbc7ce;
|
||||
--secondary-hover: #edf1f3;
|
||||
--secondary-focus: rgba(187, 199, 206, 0.25);
|
||||
|
|
@ -791,6 +791,10 @@ textarea[valid]:not(:focus) {
|
|||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
height: calc(3rem + 2px);
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@
|
|||
--h5: #73848c;
|
||||
--h6: #8a9ba3;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #374b56;
|
||||
--secondary-hover: #23353e;
|
||||
--secondary-focus: rgba(55, 75, 86, 0.125);
|
||||
|
|
@ -60,10 +60,10 @@
|
|||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--mark: rgba(255, 223, 128, 0.25);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #bbc7ce;
|
||||
--secondary-hover: #edf1f3;
|
||||
--secondary-focus: rgba(187, 199, 206, 0.25);
|
||||
|
|
@ -105,10 +105,10 @@
|
|||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--mark: rgba(255, 223, 128, 0.25);
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #bbc7ce;
|
||||
--secondary-hover: #edf1f3;
|
||||
--secondary-focus: rgba(187, 199, 206, 0.25);
|
||||
|
|
@ -714,6 +714,10 @@ textarea[valid]:not(:focus) {
|
|||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
height: calc(3rem + 2px);
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -411,7 +411,8 @@ article pre {
|
|||
@media (min-width: 576px) {
|
||||
article pre {
|
||||
padding: 2rem 2.5rem;
|
||||
margin-bottom: 0;
|
||||
margin: -2.5rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@
|
|||
<li><a href="#start" class="secondary">Start</a></li>
|
||||
<li><a href="#docs" class="secondary">Docs</a></li>
|
||||
<li>
|
||||
<a href="#" class="secondary">
|
||||
<a href="https://github.com/picocss/pico" class="secondary">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem">
|
||||
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
|
|
@ -107,21 +107,33 @@
|
|||
<h2>Usage</h2>
|
||||
<p>Work without package manager or dependencies 🙂!</p>
|
||||
</hgroup>
|
||||
<p>1. Download Pico CSS:</p>
|
||||
<p>1. Download Pico:</p>
|
||||
<p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p>
|
||||
<p>2. Link the CSS <small>(~5KB minified and gzipped)</small>:</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||
<p><strong>Customization:</strong></p>
|
||||
<p>You can compile your own version of Pico: Sass sources are included.</p>
|
||||
<p>A <a href="#classless">class-less version</a> is also included in the library.</p>
|
||||
<p></p>
|
||||
<p>Starter template:</p>
|
||||
|
||||
<pre><code><!doctype html>
|
||||
<<b>html</b> <i>lang</i>=<u>"en"</u>>
|
||||
<<b>head</b>>
|
||||
<<b>meta</b> <i>charset</i>=<u>"utf-8"</u>>
|
||||
<<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"</u>>
|
||||
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>>
|
||||
<<b>title</b>>Hello, world!</<b>title</b>>
|
||||
</<b>head</b>>
|
||||
<<b>body</b>>
|
||||
<<b>main</b> <i>class</i>=<u>"container"</u>>
|
||||
<<b>h1</b>>Hello, world!</<b>h1</b>>
|
||||
</<b>main</b>>
|
||||
</<b>body</b>>
|
||||
</<b>html</b>></code></pre>
|
||||
</section><!-- ./ Docs: Start -->
|
||||
|
||||
<!-- Docs: Themes -->
|
||||
<section id="themes">
|
||||
<a name="themes"></a>
|
||||
<hgroup>
|
||||
<h2>Customize</h2>
|
||||
<h2>Themes</h2>
|
||||
<p>Pico is shipped with 2 consistents themes: Light & Dark.<p>
|
||||
</hgroup>
|
||||
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
|
||||
|
|
@ -337,7 +349,7 @@
|
|||
</<b>section</b>></code></pre>
|
||||
|
||||
</article>
|
||||
<p>Columns intentionally collapses for small and medium devices (below <code><u>992px</u></code>).</p>
|
||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
|
||||
</section><!-- ./ Docs: Grid -->
|
||||
|
||||
<!-- Docs: Horizontal scroller -->
|
||||
|
|
@ -519,7 +531,7 @@
|
|||
<a name="buttons"></a>
|
||||
<hgroup>
|
||||
<h2>Buttons</h2>
|
||||
<p>The essential button in pure html, without <code>.classes</code> for the default style.</p>
|
||||
<p>The essential button in pure HTML, without <code>.classes</code> for the default style.</p>
|
||||
</hgroup>
|
||||
<article>
|
||||
<button>Button</button>
|
||||
|
|
@ -570,7 +582,7 @@
|
|||
<a name="forms"></a>
|
||||
<hgroup>
|
||||
<h2>Forms</h2>
|
||||
<p>All form elements in pure html, without <code>.classes</code> and responsives, allowing forms to scale gracefully across devices and viewport sizes.</p>
|
||||
<p>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</p>
|
||||
</hgroup>
|
||||
<p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
|
||||
<p>All natives form elements are fully customized and themables with CSS variables.</p>
|
||||
|
|
@ -739,7 +751,7 @@
|
|||
<a name="accordions"></a>
|
||||
<hgroup>
|
||||
<h2>Accordions</h2>
|
||||
<p>Toggle sections of content in pure HTML, without Javascript.</p>
|
||||
<p>Toggle sections of content in pure HTML, without JavaScript.</p>
|
||||
</hgroup>
|
||||
<article>
|
||||
<details>
|
||||
|
|
@ -794,7 +806,7 @@
|
|||
<a name="navs"></a>
|
||||
<hgroup>
|
||||
<h2>Navs</h2>
|
||||
<p>The essential navbar in pure semantic HTML.</p>
|
||||
<p>The essential navbar component in pure semantic HTML.</p>
|
||||
</hgroup>
|
||||
<article>
|
||||
<nav>
|
||||
|
|
@ -893,7 +905,7 @@
|
|||
<a name="tooltips"></a>
|
||||
<hgroup>
|
||||
<h2>Tooltips</h2>
|
||||
<p>Enable tooltips everywhere in pure HTML, without Javascript.</p>
|
||||
<p>Enable tooltips everywhere in pure HTML, without JavaScript.</p>
|
||||
</hgroup>
|
||||
<article>
|
||||
<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
|
||||
|
|
@ -902,7 +914,7 @@
|
|||
|
||||
<pre><code><<b>p</b>>Tooltip on a <<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>>link</<b>a</b>></<b>p</b>>
|
||||
<<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>
|
||||
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></p></code></pre>
|
||||
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>></code></pre>
|
||||
|
||||
</article>
|
||||
</section><!-- ./ Docs: Nav -->
|
||||
|
|
@ -921,7 +933,7 @@
|
|||
</hgroup>
|
||||
|
||||
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</p>
|
||||
<p>But, off course, <code>.classes</code> are not a bad practice at all.</p>
|
||||
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
|
||||
<p>Feel free to use <em>modifiers</em>.</p>
|
||||
<section data-theme="valid">
|
||||
|
||||
|
|
@ -941,11 +953,11 @@
|
|||
<p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="http://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p>
|
||||
</footer><!-- ./ Footer -->
|
||||
|
||||
</div> <!-- ./ Document -->
|
||||
</div><!-- ./ Document -->
|
||||
|
||||
</main><!-- ./ Main -->
|
||||
|
||||
<!-- Javascript -->
|
||||
<!-- JavaScript -->
|
||||
<script src="js/pico.docs.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
2
docs/js/pico.docs.min.js
vendored
2
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -16,6 +16,321 @@
|
|||
target: '#customization h5', // Buttons inserted after target
|
||||
selectorButton: '#customization button[data-color]', // Button selector in Dom
|
||||
selectorTheme: '#customization', // Theme selector in Dom
|
||||
|
||||
// Source: https://material.io/design/color/the-color-system.html
|
||||
system: {
|
||||
"red": {
|
||||
"50": "#ffebee",
|
||||
"100": "#ffcdd2",
|
||||
"200": "#ef9a9a",
|
||||
"300": "#e57373",
|
||||
"400": "#ef5350",
|
||||
"500": "#f44336",
|
||||
"600": "#e53935",
|
||||
"700": "#d32f2f",
|
||||
"800": "#c62828",
|
||||
"900": "#b71c1c",
|
||||
"a100": "#ff8a80",
|
||||
"a200": "#ff5252",
|
||||
"a400": "#ff1744",
|
||||
"a700": "#d50000",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"pink": {
|
||||
"50": "#fce4ec",
|
||||
"100": "#f8bbd0",
|
||||
"200": "#f48fb1",
|
||||
"300": "#f06292",
|
||||
"400": "#ec407a",
|
||||
"500": "#e91e63",
|
||||
"600": "#d81b60",
|
||||
"700": "#c2185b",
|
||||
"800": "#ad1457",
|
||||
"900": "#880e4f",
|
||||
"a100": "#ff80ab",
|
||||
"a200": "#ff4081",
|
||||
"a400": "#f50057",
|
||||
"a700": "#c51162",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"purple": {
|
||||
"50": "#f3e5f5",
|
||||
"100": "#e1bee7",
|
||||
"200": "#ce93d8",
|
||||
"300": "#ba68c8",
|
||||
"400": "#ab47bc",
|
||||
"500": "#9c27b0",
|
||||
"600": "#8e24aa",
|
||||
"700": "#7b1fa2",
|
||||
"800": "#6a1b9a",
|
||||
"900": "#4a148c",
|
||||
"a100": "#ea80fc",
|
||||
"a200": "#e040fb",
|
||||
"a400": "#d500f9",
|
||||
"a700": "#aa00ff",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"deep-purple": {
|
||||
"50": "#ede7f6",
|
||||
"100": "#d1c4e9",
|
||||
"200": "#b39ddb",
|
||||
"300": "#9575cd",
|
||||
"400": "#7e57c2",
|
||||
"500": "#673ab7",
|
||||
"600": "#5e35b1",
|
||||
"700": "#512da8",
|
||||
"800": "#4527a0",
|
||||
"900": "#311b92",
|
||||
"a100": "#b388ff",
|
||||
"a200": "#7c4dff",
|
||||
"a400": "#651fff",
|
||||
"a700": "#6200ea",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"indigo": {
|
||||
"50": "#e8eaf6",
|
||||
"100": "#c5cae9",
|
||||
"200": "#9fa8da",
|
||||
"300": "#7986cb",
|
||||
"400": "#5c6bc0",
|
||||
"500": "#3f51b5",
|
||||
"600": "#3949ab",
|
||||
"700": "#303f9f",
|
||||
"800": "#283593",
|
||||
"900": "#1a237e",
|
||||
"a100": "#8c9eff",
|
||||
"a200": "#536dfe",
|
||||
"a400": "#3d5afe",
|
||||
"a700": "#304ffe",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"blue": {
|
||||
"50": "#e3f2fd",
|
||||
"100": "#bbdefb",
|
||||
"200": "#90caf9",
|
||||
"300": "#64b5f6",
|
||||
"400": "#42a5f5",
|
||||
"500": "#2196f3",
|
||||
"600": "#1e88e5",
|
||||
"700": "#1976d2",
|
||||
"800": "#1565c0",
|
||||
"900": "#0d47a1",
|
||||
"a100": "#82b1ff",
|
||||
"a200": "#448aff",
|
||||
"a400": "#2979ff",
|
||||
"a700": "#2962ff",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"light-blue": {
|
||||
"50": "#e1f5fe",
|
||||
"100": "#b3e5fc",
|
||||
"200": "#81d4fa",
|
||||
"300": "#4fc3f7",
|
||||
"400": "#29b6f6",
|
||||
"500": "#03a9f4",
|
||||
"600": "#039be5",
|
||||
"700": "#0288d1",
|
||||
"800": "#0277bd",
|
||||
"900": "#01579b",
|
||||
"a100": "#80d8ff",
|
||||
"a200": "#40c4ff",
|
||||
"a400": "#00b0ff",
|
||||
"a700": "#0091ea",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"cyan": {
|
||||
"50": "#e0f7fa",
|
||||
"100": "#b2ebf2",
|
||||
"200": "#80deea",
|
||||
"300": "#4dd0e1",
|
||||
"400": "#26c6da",
|
||||
"500": "#00bcd4",
|
||||
"600": "#00acc1",
|
||||
"700": "#0097a7",
|
||||
"800": "#00838f",
|
||||
"900": "#006064",
|
||||
"a100": "#84ffff",
|
||||
"a200": "#18ffff",
|
||||
"a400": "#00e5ff",
|
||||
"a700": "#00b8d4",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"teal": {
|
||||
"50": "#e0f2f1",
|
||||
"100": "#b2dfdb",
|
||||
"200": "#80cbc4",
|
||||
"300": "#4db6ac",
|
||||
"400": "#26a69a",
|
||||
"500": "#009688",
|
||||
"600": "#00897b",
|
||||
"700": "#00796b",
|
||||
"800": "#00695c",
|
||||
"900": "#004d40",
|
||||
"a100": "#a7ffeb",
|
||||
"a200": "#64ffda",
|
||||
"a400": "#1de9b6",
|
||||
"a700": "#00bfa5",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"green": {
|
||||
"50": "#e8f5e9",
|
||||
"100": "#c8e6c9",
|
||||
"200": "#a5d6a7",
|
||||
"300": "#81c784",
|
||||
"400": "#66bb6a",
|
||||
"500": "#4caf50",
|
||||
"600": "#43a047",
|
||||
"700": "#388e3c",
|
||||
"800": "#2e7d32",
|
||||
"900": "#1b5e20",
|
||||
"a100": "#b9f6ca",
|
||||
"a200": "#69f0ae",
|
||||
"a400": "#00e676",
|
||||
"a700": "#00c853",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"light-green": {
|
||||
"50": "#f1f8e9",
|
||||
"100": "#dcedc8",
|
||||
"200": "#c5e1a5",
|
||||
"300": "#aed581",
|
||||
"400": "#9ccc65",
|
||||
"500": "#8bc34a",
|
||||
"600": "#7cb342",
|
||||
"700": "#689f38",
|
||||
"800": "#558b2f",
|
||||
"900": "#33691e",
|
||||
"a100": "#ccff90",
|
||||
"a200": "#b2ff59",
|
||||
"a400": "#76ff03",
|
||||
"a700": "#64dd17",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"lime": {
|
||||
"50": "#f9fbe7",
|
||||
"100": "#f0f4c3",
|
||||
"200": "#e6ee9c",
|
||||
"300": "#dce775",
|
||||
"400": "#d4e157",
|
||||
"500": "#cddc39",
|
||||
"600": "#c0ca33",
|
||||
"700": "#afb42b",
|
||||
"800": "#9e9d24",
|
||||
"900": "#827717",
|
||||
"a100": "#f4ff81",
|
||||
"a200": "#eeff41",
|
||||
"a400": "#c6ff00",
|
||||
"a700": "#aeea00",
|
||||
"inverse": "#2c4049"
|
||||
},
|
||||
"yellow": {
|
||||
"50": "#fffde7",
|
||||
"100": "#fff9c4",
|
||||
"200": "#fff59d",
|
||||
"300": "#fff176",
|
||||
"400": "#ffee58",
|
||||
"500": "#ffeb3b",
|
||||
"600": "#fdd835",
|
||||
"700": "#fbc02d",
|
||||
"800": "#f9a825",
|
||||
"900": "#f57f17",
|
||||
"a100": "#ffff8d",
|
||||
"a200": "#ffff00",
|
||||
"a400": "#ffea00",
|
||||
"a700": "#ffd600",
|
||||
"inverse": "#2c4049"
|
||||
},
|
||||
"amber": {
|
||||
"50": "#fff8e1",
|
||||
"100": "#ffecb3",
|
||||
"200": "#ffe082",
|
||||
"300": "#ffd54f",
|
||||
"400": "#ffca28",
|
||||
"500": "#ffc107",
|
||||
"600": "#ffb300",
|
||||
"700": "#ffa000",
|
||||
"800": "#ff8f00",
|
||||
"900": "#ff6f00",
|
||||
"a100": "#ffe57f",
|
||||
"a200": "#ffd740",
|
||||
"a400": "#ffc400",
|
||||
"a700": "#ffab00",
|
||||
"inverse": "#2c4049"
|
||||
},
|
||||
"orange": {
|
||||
"50": "#fff3e0",
|
||||
"100": "#ffe0b2",
|
||||
"200": "#ffcc80",
|
||||
"300": "#ffb74d",
|
||||
"400": "#ffa726",
|
||||
"500": "#ff9800",
|
||||
"600": "#fb8c00",
|
||||
"700": "#f57c00",
|
||||
"800": "#ef6c00",
|
||||
"900": "#e65100",
|
||||
"a100": "#ffd180",
|
||||
"a200": "#ffab40",
|
||||
"a400": "#ff9100",
|
||||
"a700": "#ff6d00",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"deep-orange": {
|
||||
"50": "#fbe9e7",
|
||||
"100": "#ffccbc",
|
||||
"200": "#ffab91",
|
||||
"300": "#ff8a65",
|
||||
"400": "#ff7043",
|
||||
"500": "#ff5722",
|
||||
"600": "#f4511e",
|
||||
"700": "#e64a19",
|
||||
"800": "#d84315",
|
||||
"900": "#bf360c",
|
||||
"a100": "#ff9e80",
|
||||
"a200": "#ff6e40",
|
||||
"a400": "#ff3d00",
|
||||
"a700": "#dd2c00",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
/*"brown": {
|
||||
"50": "#efebe9",
|
||||
"100": "#d7ccc8",
|
||||
"200": "#bcaaa4",
|
||||
"300": "#a1887f",
|
||||
"400": "#8d6e63",
|
||||
"500": "#795548",
|
||||
"600": "#6d4c41",
|
||||
"700": "#5d4037",
|
||||
"800": "#4e342e",
|
||||
"900": "#3e2723",
|
||||
"inverse": "#FFF"
|
||||
},*/
|
||||
"grey": {
|
||||
"50": "#fafafa",
|
||||
"100": "#f5f5f5",
|
||||
"200": "#eeeeee",
|
||||
"300": "#e0e0e0",
|
||||
"400": "#bdbdbd",
|
||||
"500": "#9e9e9e",
|
||||
"600": "#757575",
|
||||
"700": "#616161",
|
||||
"800": "#424242",
|
||||
"900": "#212121",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"blue-grey": {
|
||||
"50": "#eceff1",
|
||||
"100": "#cfd8dc",
|
||||
"200": "#b0bec5",
|
||||
"300": "#90a4ae",
|
||||
"400": "#78909c",
|
||||
"500": "#607d8b",
|
||||
"600": "#546e7a",
|
||||
"700": "#455a64",
|
||||
"800": "#37474f",
|
||||
"900": "#263238",
|
||||
"inverse": "#FFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -24,51 +339,8 @@
|
|||
* Init
|
||||
*/
|
||||
|
||||
colorPicker();
|
||||
|
||||
|
||||
/**
|
||||
* Color Picker
|
||||
*/
|
||||
|
||||
function colorPicker() {
|
||||
|
||||
// Load colors
|
||||
loadJson(colors.list, function(data) {
|
||||
generateButtons(data);
|
||||
pickColor('pink', data['pink']);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Load Json
|
||||
*
|
||||
* @param {url} json
|
||||
* @param {function} callback
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
function loadJson(json, callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', json, true);
|
||||
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var data = JSON.parse(request.responseText);
|
||||
callback(data);
|
||||
}
|
||||
else {
|
||||
return 'error';
|
||||
}
|
||||
};
|
||||
request.onerror = function() {
|
||||
return 'error';
|
||||
};
|
||||
request.send();
|
||||
}
|
||||
generateButtons(colors.system);
|
||||
pickColor('pink', colors.system['pink']);
|
||||
|
||||
|
||||
|
||||
|
|
@ -210,7 +482,7 @@
|
|||
+ '@media only screen and (prefers-color-scheme: dark) {'
|
||||
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--h4:' + data[300] + ';'
|
||||
+ '--h4:' + data[400] + ';'
|
||||
+ '--primary-hover:' + data[500] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||
|
|
@ -219,7 +491,7 @@
|
|||
|
||||
+ '[data-theme="dark"] [data-theme="generated"] {'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--h4:' + data[300] + ';'
|
||||
+ '--h4:' + data[500] + ';'
|
||||
+ '--primary-hover:' + data[500] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||
|
|
@ -248,7 +520,7 @@
|
|||
* @return {rgba}
|
||||
*/
|
||||
|
||||
function hexToRgbA(hex, alpha){
|
||||
function hexToRgbA(hex, alpha) {
|
||||
var c;
|
||||
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
|
||||
c= hex.substring(1).split('');
|
||||
|
|
|
|||
|
|
@ -1,300 +0,0 @@
|
|||
{
|
||||
"red": {
|
||||
"50": "#ffebee",
|
||||
"100": "#ffcdd2",
|
||||
"200": "#ef9a9a",
|
||||
"300": "#e57373",
|
||||
"400": "#ef5350",
|
||||
"500": "#f44336",
|
||||
"600": "#e53935",
|
||||
"700": "#d32f2f",
|
||||
"800": "#c62828",
|
||||
"900": "#b71c1c",
|
||||
"a100": "#ff8a80",
|
||||
"a200": "#ff5252",
|
||||
"a400": "#ff1744",
|
||||
"a700": "#d50000",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"pink": {
|
||||
"50": "#fce4ec",
|
||||
"100": "#f8bbd0",
|
||||
"200": "#f48fb1",
|
||||
"300": "#f06292",
|
||||
"400": "#ec407a",
|
||||
"500": "#e91e63",
|
||||
"600": "#d81b60",
|
||||
"700": "#c2185b",
|
||||
"800": "#ad1457",
|
||||
"900": "#880e4f",
|
||||
"a100": "#ff80ab",
|
||||
"a200": "#ff4081",
|
||||
"a400": "#f50057",
|
||||
"a700": "#c51162",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"purple": {
|
||||
"50": "#f3e5f5",
|
||||
"100": "#e1bee7",
|
||||
"200": "#ce93d8",
|
||||
"300": "#ba68c8",
|
||||
"400": "#ab47bc",
|
||||
"500": "#9c27b0",
|
||||
"600": "#8e24aa",
|
||||
"700": "#7b1fa2",
|
||||
"800": "#6a1b9a",
|
||||
"900": "#4a148c",
|
||||
"a100": "#ea80fc",
|
||||
"a200": "#e040fb",
|
||||
"a400": "#d500f9",
|
||||
"a700": "#aa00ff",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"deep-purple": {
|
||||
"50": "#ede7f6",
|
||||
"100": "#d1c4e9",
|
||||
"200": "#b39ddb",
|
||||
"300": "#9575cd",
|
||||
"400": "#7e57c2",
|
||||
"500": "#673ab7",
|
||||
"600": "#5e35b1",
|
||||
"700": "#512da8",
|
||||
"800": "#4527a0",
|
||||
"900": "#311b92",
|
||||
"a100": "#b388ff",
|
||||
"a200": "#7c4dff",
|
||||
"a400": "#651fff",
|
||||
"a700": "#6200ea",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"indigo": {
|
||||
"50": "#e8eaf6",
|
||||
"100": "#c5cae9",
|
||||
"200": "#9fa8da",
|
||||
"300": "#7986cb",
|
||||
"400": "#5c6bc0",
|
||||
"500": "#3f51b5",
|
||||
"600": "#3949ab",
|
||||
"700": "#303f9f",
|
||||
"800": "#283593",
|
||||
"900": "#1a237e",
|
||||
"a100": "#8c9eff",
|
||||
"a200": "#536dfe",
|
||||
"a400": "#3d5afe",
|
||||
"a700": "#304ffe",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"blue": {
|
||||
"50": "#e3f2fd",
|
||||
"100": "#bbdefb",
|
||||
"200": "#90caf9",
|
||||
"300": "#64b5f6",
|
||||
"400": "#42a5f5",
|
||||
"500": "#2196f3",
|
||||
"600": "#1e88e5",
|
||||
"700": "#1976d2",
|
||||
"800": "#1565c0",
|
||||
"900": "#0d47a1",
|
||||
"a100": "#82b1ff",
|
||||
"a200": "#448aff",
|
||||
"a400": "#2979ff",
|
||||
"a700": "#2962ff",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"light-blue": {
|
||||
"50": "#e1f5fe",
|
||||
"100": "#b3e5fc",
|
||||
"200": "#81d4fa",
|
||||
"300": "#4fc3f7",
|
||||
"400": "#29b6f6",
|
||||
"500": "#03a9f4",
|
||||
"600": "#039be5",
|
||||
"700": "#0288d1",
|
||||
"800": "#0277bd",
|
||||
"900": "#01579b",
|
||||
"a100": "#80d8ff",
|
||||
"a200": "#40c4ff",
|
||||
"a400": "#00b0ff",
|
||||
"a700": "#0091ea",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"cyan": {
|
||||
"50": "#e0f7fa",
|
||||
"100": "#b2ebf2",
|
||||
"200": "#80deea",
|
||||
"300": "#4dd0e1",
|
||||
"400": "#26c6da",
|
||||
"500": "#00bcd4",
|
||||
"600": "#00acc1",
|
||||
"700": "#0097a7",
|
||||
"800": "#00838f",
|
||||
"900": "#006064",
|
||||
"a100": "#84ffff",
|
||||
"a200": "#18ffff",
|
||||
"a400": "#00e5ff",
|
||||
"a700": "#00b8d4",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"teal": {
|
||||
"50": "#e0f2f1",
|
||||
"100": "#b2dfdb",
|
||||
"200": "#80cbc4",
|
||||
"300": "#4db6ac",
|
||||
"400": "#26a69a",
|
||||
"500": "#009688",
|
||||
"600": "#00897b",
|
||||
"700": "#00796b",
|
||||
"800": "#00695c",
|
||||
"900": "#004d40",
|
||||
"a100": "#a7ffeb",
|
||||
"a200": "#64ffda",
|
||||
"a400": "#1de9b6",
|
||||
"a700": "#00bfa5",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"green": {
|
||||
"50": "#e8f5e9",
|
||||
"100": "#c8e6c9",
|
||||
"200": "#a5d6a7",
|
||||
"300": "#81c784",
|
||||
"400": "#66bb6a",
|
||||
"500": "#4caf50",
|
||||
"600": "#43a047",
|
||||
"700": "#388e3c",
|
||||
"800": "#2e7d32",
|
||||
"900": "#1b5e20",
|
||||
"a100": "#b9f6ca",
|
||||
"a200": "#69f0ae",
|
||||
"a400": "#00e676",
|
||||
"a700": "#00c853",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"light-green": {
|
||||
"50": "#f1f8e9",
|
||||
"100": "#dcedc8",
|
||||
"200": "#c5e1a5",
|
||||
"300": "#aed581",
|
||||
"400": "#9ccc65",
|
||||
"500": "#8bc34a",
|
||||
"600": "#7cb342",
|
||||
"700": "#689f38",
|
||||
"800": "#558b2f",
|
||||
"900": "#33691e",
|
||||
"a100": "#ccff90",
|
||||
"a200": "#b2ff59",
|
||||
"a400": "#76ff03",
|
||||
"a700": "#64dd17",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"lime": {
|
||||
"50": "#f9fbe7",
|
||||
"100": "#f0f4c3",
|
||||
"200": "#e6ee9c",
|
||||
"300": "#dce775",
|
||||
"400": "#d4e157",
|
||||
"500": "#cddc39",
|
||||
"600": "#c0ca33",
|
||||
"700": "#afb42b",
|
||||
"800": "#9e9d24",
|
||||
"900": "#827717",
|
||||
"a100": "#f4ff81",
|
||||
"a200": "#eeff41",
|
||||
"a400": "#c6ff00",
|
||||
"a700": "#aeea00",
|
||||
"inverse": "#2c4049"
|
||||
},
|
||||
"yellow": {
|
||||
"50": "#fffde7",
|
||||
"100": "#fff9c4",
|
||||
"200": "#fff59d",
|
||||
"300": "#fff176",
|
||||
"400": "#ffee58",
|
||||
"500": "#ffeb3b",
|
||||
"600": "#fdd835",
|
||||
"700": "#fbc02d",
|
||||
"800": "#f9a825",
|
||||
"900": "#f57f17",
|
||||
"a100": "#ffff8d",
|
||||
"a200": "#ffff00",
|
||||
"a400": "#ffea00",
|
||||
"a700": "#ffd600",
|
||||
"inverse": "#2c4049"
|
||||
},
|
||||
"amber": {
|
||||
"50": "#fff8e1",
|
||||
"100": "#ffecb3",
|
||||
"200": "#ffe082",
|
||||
"300": "#ffd54f",
|
||||
"400": "#ffca28",
|
||||
"500": "#ffc107",
|
||||
"600": "#ffb300",
|
||||
"700": "#ffa000",
|
||||
"800": "#ff8f00",
|
||||
"900": "#ff6f00",
|
||||
"a100": "#ffe57f",
|
||||
"a200": "#ffd740",
|
||||
"a400": "#ffc400",
|
||||
"a700": "#ffab00",
|
||||
"inverse": "#2c4049"
|
||||
},
|
||||
"orange": {
|
||||
"50": "#fff3e0",
|
||||
"100": "#ffe0b2",
|
||||
"200": "#ffcc80",
|
||||
"300": "#ffb74d",
|
||||
"400": "#ffa726",
|
||||
"500": "#ff9800",
|
||||
"600": "#fb8c00",
|
||||
"700": "#f57c00",
|
||||
"800": "#ef6c00",
|
||||
"900": "#e65100",
|
||||
"a100": "#ffd180",
|
||||
"a200": "#ffab40",
|
||||
"a400": "#ff9100",
|
||||
"a700": "#ff6d00",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"deep-orange": {
|
||||
"50": "#fbe9e7",
|
||||
"100": "#ffccbc",
|
||||
"200": "#ffab91",
|
||||
"300": "#ff8a65",
|
||||
"400": "#ff7043",
|
||||
"500": "#ff5722",
|
||||
"600": "#f4511e",
|
||||
"700": "#e64a19",
|
||||
"800": "#d84315",
|
||||
"900": "#bf360c",
|
||||
"a100": "#ff9e80",
|
||||
"a200": "#ff6e40",
|
||||
"a400": "#ff3d00",
|
||||
"a700": "#dd2c00",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"grey": {
|
||||
"50": "#fafafa",
|
||||
"100": "#f5f5f5",
|
||||
"200": "#eeeeee",
|
||||
"300": "#e0e0e0",
|
||||
"400": "#bdbdbd",
|
||||
"500": "#9e9e9e",
|
||||
"600": "#757575",
|
||||
"700": "#616161",
|
||||
"800": "#424242",
|
||||
"900": "#212121",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
"blue-grey": {
|
||||
"50": "#eceff1",
|
||||
"100": "#cfd8dc",
|
||||
"200": "#b0bec5",
|
||||
"300": "#90a4ae",
|
||||
"400": "#78909c",
|
||||
"500": "#607d8b",
|
||||
"600": "#546e7a",
|
||||
"700": "#455a64",
|
||||
"800": "#37474f",
|
||||
"900": "#263238",
|
||||
"inverse": "#FFF"
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,8 @@ article pre {
|
|||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
||||
margin-bottom: 0;
|
||||
margin: -$spacing-block*map-get($spacing-factor, "sm");
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $enable-classes: true !default;
|
|||
// ––––––––––––––––––––
|
||||
|
||||
// Gutters and horizontals margins
|
||||
// For <body>, '.row' (grids), <nav>, <table>
|
||||
// For <body>, .grid, <nav>, <table>
|
||||
$spacing-gutter: 1rem !default;
|
||||
|
||||
// Blocks verticals margins and paddings
|
||||
|
|
@ -41,7 +41,6 @@ $spacing-block: 2rem !default;
|
|||
$spacing-typography: 1.5rem !default;
|
||||
|
||||
// Padding for <input> and <button>
|
||||
// (Vertical Horizontal)
|
||||
$spacing-input-button: .75rem 1rem !default;
|
||||
|
||||
|
||||
|
|
@ -66,7 +65,7 @@ $heading-weight: 700 !default;
|
|||
// Blocks
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// For <form> elements, <button>, card (<article>), inlined code, badge (<u>)
|
||||
// For <form> elements, <button>, <article>, <details> inlined code, tooltips
|
||||
$round: .25rem !default;
|
||||
|
||||
|
||||
|
|
@ -107,7 +106,7 @@ $breakpoints: (
|
|||
|
||||
// Viewports
|
||||
$viewports: (
|
||||
// 'null' disable the viewport (max-width) on a breakpoint
|
||||
// 'null' disable the viewport on a breakpoint
|
||||
sm: 510px,
|
||||
md: 700px,
|
||||
lg: 920px,
|
||||
|
|
|
|||
|
|
@ -196,6 +196,11 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
// Color
|
||||
input[type="color"] {
|
||||
height: calc(3rem + 2px); // HACK
|
||||
}
|
||||
|
||||
// Select
|
||||
select {
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@
|
|||
// Layout
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // main > section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "content/typography"; // a, headings, p, ul ...
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote ...
|
||||
@import "content/form"; // label, input, select, ...
|
||||
@import "content/button"; // button, a[role=button]
|
||||
@import "content/button"; // button, a[role=button], ...
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
@import "content/code"; // pre, code, ...
|
||||
@import "content/miscs"; // hr, progress, template, [hidden]
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
--mark: #{rgba($amber-200, .25)};
|
||||
|
||||
// Call-to-Action
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action
|
||||
--secondary: #{$grey-200};
|
||||
|
|
@ -90,10 +90,10 @@
|
|||
--mark: #{rgba($amber-200, .25)};
|
||||
|
||||
// Call-to-Action
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action
|
||||
--secondary: #{$grey-200};
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
--mark: #{rgba($amber-200, .5)};
|
||||
|
||||
// Primary Call-to-Action
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action
|
||||
--secondary: #{mix($grey-700, $grey-800)};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue