mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 18:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improvements

Browse source 
- Edit code colors and add a color for comments
- Add ::selection
- Small edits for cards: last-child and overflow
- Add card-sectioning (header, footer, pre)
- Change global hue for Primary color
- Remove border for pre
- Add querySelectorAll() for theme-switcher.js
- Update docs
This commit is contained in:
Lucas 2019-12-01 16:35:38 +07:00
parent c3f9d8d8c8
commit 85e21d35de
23 changed files with 937 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

61
docs/css/pico.docs.css
View file

@ -8,7 +8,7 @@
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: rgba(255, 255, 255, 0.7);
--nav-border: rgba(115, 132, 140, 0.2);
--nav-border: rgba(115, 130, 140, 0.2);
}
/**
@ -17,8 +17,8 @@
*/
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--nav-background: rgba(16, 25, 30, 0.8);
--nav-border: rgba(115, 132, 140, 0.2);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2);
}
}
@ -27,8 +27,8 @@
* Enabled if forced with data-theme="dark"
*/
[data-theme="dark"] {
--nav-background: rgba(16, 25, 30, 0.8);
--nav-border: rgba(115, 132, 140, 0.2);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2);
}
/**
@ -167,9 +167,10 @@ main > aside details {
}
main > aside details summary {
color: var(--h3);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
color: var(--h3);
}
main > aside details summary::after {
@ -370,19 +371,11 @@ a[role=button] {
content: 'Bulky';
}
[data-theme="invalid"] pre {
border-color: var(--invalid);
}
[data-theme="valid"]:before {
background: var(--valid);
content: 'Great';
}
[data-theme="valid"] pre {
border-color: var(--valid);
}
section[title="love"] [data-theme="invalid"]:before {
content: 'Not so great';
}
@ -427,46 +420,6 @@ body > nav ul:first-of-type li:nth-of-type(2) {
}
}
/**
* Docs: Code inside <article>
*/
article pre {
margin-top: 2rem;
margin-bottom: -2rem;
}
@media (min-width: 576px) {
article pre {
padding: 2rem 2.5rem;
margin: -2.5rem;
margin-top: 2.5rem;
}
}
@media (min-width: 768px) {
article pre {
padding: 2rem 3rem;
margin: -3rem;
margin-top: 3rem;
}
}
@media (min-width: 992px) {
article pre {
padding: 2rem 3.5rem;
margin: -3.5rem;
margin-top: 3.5rem;
}
}
@media (min-width: 1200px) {
article pre {
padding: 2rem 4rem;
margin: -4rem;
margin-top: 4rem;
}
}
/**
* Docs: Theme switcher
*/

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

56
docs/index.html
View file

@ -113,7 +113,7 @@
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<p>Starter template:</p>
<pre><code>&lt;!doctype html&gt;
<pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
&lt;<b>head</b>&gt;
&lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
@ -211,18 +211,18 @@
<p>SCSS:</p>
<pre data-theme="generated"><code>// <span class="name">Custom colors</span>
<pre><code><em>// <span class="name">Custom colors</em></span>
<i>$primary-500</i>: <u class="c500">...</u>;
<i>$primary-600</i>: <u class="c600">...</u>;
<i>$primary-700</i>: <u class="c700">...</u>;
// Pico library
<em>// Pico library</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre>
<p>CSS:</p>
<pre data-theme="generated"><code>/* <span class="name"></span>Light theme (Default) */
/* Can be forced with data-theme="light" */
<pre><code><em>/* <span class="name"></span>Light theme (Default) */
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
@ -232,8 +232,8 @@
}
/* <span class="name"></span>Dark theme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
<em>/* <span class="name"></span>Dark theme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme="light"])</b> {
<i>--primary</i>: <u class="c600">...</u>;
@ -243,8 +243,8 @@
}
/* <span class="name"></span>Dark theme (Forced) */
/* Enabled if forced with data-theme="dark" */
<em>/* <span class="name"></span>Dark theme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme="<u>dark</u>"]</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
@ -264,7 +264,6 @@
<h3>For wild HTML purists!</h3>
</hgroup>
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p>
<p>Obviously this version do not include <code>.container</code>, <code>.container-fluid</code>, <code>.grid</code>, <code>.secondary</code>, <code>.contrast</code> and <code>.outline</code>.</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
@ -656,11 +655,11 @@
<pre><code>
&lt;<b>form</b>&gt;
&lt;!-- Grid --&gt;
<em>&lt;!-- Grid --&gt;</em>
&lt;<b>section</b> <i>class</i>=<u>"grid"</u>&gt;
&lt;<b>div</b>&gt;
&lt;!-- Markup example 1: input is inside label --&gt;
<em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
First name
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt;
@ -676,12 +675,12 @@
&lt;/<b>section</b>&gt;
&lt;!-- Markup example 2: input is after label --&gt;
<em>&lt;!-- Markup example 2: input is after label --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"email"</u>&gt;Email address&lt;/<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>&gt;
&lt;<b>small</b>&gt;We'll never share your email with anyone else.&lt;/<b>small</b>&gt;
&lt;!-- Button --&gt;
<em>&lt;!-- Button --&gt;</em>
&lt;<b>button</b> <i>type</i>=<u>"submit"</u>&gt;Submit&lt;/<b>button</b>&gt;
&lt;/<b>form</b>&gt;</code></pre>
@ -748,14 +747,14 @@
</label>
</fieldset>
<pre><code>&lt;!-- Select --&gt;
<pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"country"</u>&gt;Country&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"country</u>"&gt;
&lt;<b>option</b> <i>selected</i>&gt;Choose...&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
&lt;!-- Radios --&gt;
<em>&lt;!-- Radios --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>legend</b>&gt;Gender&lt;/<b>legend</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"male"</u>&gt;
@ -772,7 +771,7 @@
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
&lt;!-- Checkbox --&gt;
<em>&lt;!-- Checkbox --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
@ -780,7 +779,7 @@
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
&lt;!-- Switch --&gt;
<em>&lt;!-- Switch --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
@ -842,6 +841,27 @@
I'm a card!
&lt;/<b>article</b>&gt;</code></pre>
<p>You can use <code>&lt;<b>header</b>&gt;</code> and footer <code>&lt;<b>footer</b>&gt;</code> inside <code>&lt;<b>article</b>&gt;</code></p>
<article>
<header>
Header
</header>
Body
<footer>
Footer
</footer>
</article>
<pre><code>&lt;<b>article</b>&gt;
&lt;<b>header</b>&gt;
Header
&lt;/<b>header</b>&gt;
Body
&lt;<b>footer</b>&gt;
Footer
&lt;/<b>footer</b>&gt;
&lt;/<b>article</b>&gt;</code></pre>
</section><!-- ./ Docs: Card -->
<!-- Docs: Navs -->

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

9
docs/js/src/theme-switcher.js
View file

@ -19,7 +19,7 @@
off: '<i>Turn off dark mode</i>'
},
target: 'body', // Button append in target
selector: 'button.theme-switcher', // Button selector in Dom
selector: 'button.theme-switcher', // Button selector in Dom
currentTheme: systemColorScheme()
};
@ -101,8 +101,11 @@
// Apply theme
document.querySelector('html').setAttribute('data-theme', set);
document.querySelector(switcher.selector).innerHTML = label;
document.querySelector(switcher.selector).setAttribute('aria-label', stripTags(label));
var switchers = document.querySelectorAll(switcher.selector);
for (var i = 0; i < switchers.length; i++) {
switchers[i].innerHTML = label;
switchers[i].setAttribute('aria-label', stripTags(label));
}
switcher.currentTheme = set;
}

52
docs/scss/components/_card-code.scss
View file

@ -1,52 +0,0 @@
/**
* Docs: Code inside <article>
*/
// Custom spacings
article pre {
margin-top: $spacing-block;
margin-bottom: -$spacing-gutter*2;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
margin: -$spacing-block*map-get($spacing-factor, "sm");
margin-top: $spacing-block*map-get($spacing-factor, "sm");
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
margin: -$spacing-block*map-get($spacing-factor, "md");
margin-top: $spacing-block*map-get($spacing-factor, "md");
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
margin: -$spacing-block*map-get($spacing-factor, "lg");
margin-top: $spacing-block*map-get($spacing-factor, "lg");
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
margin: -$spacing-block*map-get($spacing-factor, "xl");
margin-top: $spacing-block*map-get($spacing-factor, "xl");
}
}
}

8
docs/scss/content/_code.scss
View file

@ -83,10 +83,6 @@ pre {
background: var(--invalid);
content: 'Bulky';
}
pre {
border-color: var(--invalid);
}
}
[data-theme="valid"] {
@ -94,10 +90,6 @@ pre {
background: var(--valid);
content: 'Great';
}
pre {
border-color: var(--valid);
}
}
section[title="love"] [data-theme="invalid"] {

3
docs/scss/layout/_aside.scss
View file

@ -53,9 +53,10 @@ main > aside {
border-bottom: none;
summary {
color: var(--h3);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
color: var(--h3);
&::after {
display: none;

2
docs/scss/pico.docs.scss
View file

@ -21,5 +21,5 @@
// Components
@import "components/nav";
@import "components/card-code";
//@import "components/card-code";
@import "components/theme-switcher";