mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 16:46:14 -04:00
Repair customization JS in docs
This commit is contained in:
Lucas
parent
a5f837a08b
commit
a0c65bcded
7 changed files with 61 additions and 60 deletions
|
|
@ -5,8 +5,9 @@
|
||||||
* Theme: Additions for docs
|
* Theme: Additions for docs
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
--icon-external: 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='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
--icon-external: 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='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-check-dark: 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='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme="light"],
|
||||||
|
|
@ -243,6 +244,10 @@ main > aside details[open] summary {
|
||||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
|
||||||
|
background-image: var(--icon-check-dark);
|
||||||
|
}
|
||||||
|
|
||||||
#customization h4 {
|
#customization h4 {
|
||||||
transition: color var(--transition);
|
transition: color var(--transition);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
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
|
|
@ -202,7 +202,7 @@
|
||||||
|
|
||||||
<p>CSS:</p>
|
<p>CSS:</p>
|
||||||
|
|
||||||
<pre><code><em>/* <span class="name"></span>Light theme (Default) */
|
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
|
||||||
/* Can be forced with data-theme="light" */</em>
|
/* Can be forced with data-theme="light" */</em>
|
||||||
<b>[data-theme=<u>"light"</u>]</b>,
|
<b>[data-theme=<u>"light"</u>]</b>,
|
||||||
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
||||||
|
|
@ -213,7 +213,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
<em>/* <span class="name"></span>Dark theme (Auto) */
|
<em>/* <span class="name"></span>Dark scheme (Auto) */
|
||||||
/* Automatically enabled if user has Dark mode enabled */</em>
|
/* 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> {
|
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
|
||||||
<b>:root:not([data-theme="light"])</b> {
|
<b>:root:not([data-theme="light"])</b> {
|
||||||
|
|
@ -224,7 +224,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
<em>/* <span class="name"></span>Dark theme (Forced) */
|
<em>/* <span class="name"></span>Dark scheme (Forced) */
|
||||||
/* Enabled if forced with data-theme="dark" */</em>
|
/* Enabled if forced with data-theme="dark" */</em>
|
||||||
<b>[data-theme="<u>dark</u>"]</b> {
|
<b>[data-theme="<u>dark</u>"]</b> {
|
||||||
<i>--primary</i>: <u class="c600">...</u>;
|
<i>--primary</i>: <u class="c600">...</u>;
|
||||||
|
|
|
||||||
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
|
|
@ -221,7 +221,7 @@
|
||||||
"a200": "#eeff41",
|
"a200": "#eeff41",
|
||||||
"a400": "#c6ff00",
|
"a400": "#c6ff00",
|
||||||
"a700": "#aeea00",
|
"a700": "#aeea00",
|
||||||
"inverse": "#000"
|
"inverse": "rgba(0, 0, 0, 0.75)"
|
||||||
},
|
},
|
||||||
"yellow": {
|
"yellow": {
|
||||||
"50": "#fffde7",
|
"50": "#fffde7",
|
||||||
|
|
@ -238,7 +238,7 @@
|
||||||
"a200": "#ffff00",
|
"a200": "#ffff00",
|
||||||
"a400": "#ffea00",
|
"a400": "#ffea00",
|
||||||
"a700": "#ffd600",
|
"a700": "#ffd600",
|
||||||
"inverse": "#000"
|
"inverse": "rgba(0, 0, 0, 0.75)"
|
||||||
},
|
},
|
||||||
"amber": {
|
"amber": {
|
||||||
"50": "#fff8e1",
|
"50": "#fff8e1",
|
||||||
|
|
@ -255,7 +255,7 @@
|
||||||
"a200": "#ffd740",
|
"a200": "#ffd740",
|
||||||
"a400": "#ffc400",
|
"a400": "#ffc400",
|
||||||
"a700": "#ffab00",
|
"a700": "#ffab00",
|
||||||
"inverse": "#000"
|
"inverse": "rgba(0, 0, 0, 0.75)"
|
||||||
},
|
},
|
||||||
"orange": {
|
"orange": {
|
||||||
"50": "#fff3e0",
|
"50": "#fff3e0",
|
||||||
|
|
@ -360,24 +360,24 @@
|
||||||
if (data.hasOwnProperty(color)) {
|
if (data.hasOwnProperty(color)) {
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
colorButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
|
colorButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
|
||||||
|
|
||||||
// CSS Styles
|
// CSS Styles
|
||||||
colors.styles += 'button[data-color="'+ color +'"] {'
|
colors.styles += 'button[data-color="'+ color +'"] {'
|
||||||
+ 'background-color: '+ data[color]['600'] +'; '
|
+ 'background-color: '+ data[color]['600'] +'; '
|
||||||
+ '}'
|
+ '}'
|
||||||
|
|
||||||
+ '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
|
+ '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
|
||||||
+ '[data-theme="light"] button[data-color="'+ color +'"]:active, '
|
+ '[data-theme="light"] button[data-color="'+ color +'"]:active, '
|
||||||
+ '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
|
+ '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
|
||||||
+ 'background-color: '+ data[color]['700'] +'; '
|
+ 'background-color: '+ data[color]['700'] +'; '
|
||||||
+ '}'
|
+ '}'
|
||||||
|
|
||||||
+ '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
|
||||||
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
|
||||||
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
|
||||||
+ 'background-color: '+ data[color]['500'] +'; '
|
+ 'background-color: '+ data[color]['500'] +'; '
|
||||||
+ '}'
|
+ '}';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -438,41 +438,28 @@
|
||||||
|
|
||||||
function generateTheme(name, data) {
|
function generateTheme(name, data) {
|
||||||
|
|
||||||
// Code and Color name
|
// Update name and colors in demo code
|
||||||
// TODO: Create a function
|
var swap = {
|
||||||
var cName = document.querySelectorAll(colors.selectorTheme + ' .name');
|
'.name' : name.charAt(0).toUpperCase() + name.substring(1) + ' ',
|
||||||
for (var i = 0; i < cName.length; ++i) {
|
'.c500' : data[500],
|
||||||
cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' ';
|
'.c600' : data[600],
|
||||||
}
|
'.c700' : data[700],
|
||||||
var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500');
|
'.c600-outline-light' : hexToRgbA(data[600], .125),
|
||||||
for (var i = 0; i < c500.length; ++i) {
|
'.c600-outline-dark' : hexToRgbA(data[600], .25),
|
||||||
c500[i].innerHTML = data[500];
|
'.inverse' : data['inverse'],
|
||||||
}
|
|
||||||
var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600');
|
|
||||||
for (var i = 0; i < c600.length; ++i) {
|
|
||||||
c600[i].innerHTML = data[600];
|
|
||||||
}
|
|
||||||
var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700');
|
|
||||||
for (var i = 0; i < c700.length; ++i) {
|
|
||||||
c700[i].innerHTML = data[700];
|
|
||||||
}
|
|
||||||
var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light');
|
|
||||||
for (var i = 0; i < c600OutlineLight.length; ++i) {
|
|
||||||
c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125);
|
|
||||||
}
|
|
||||||
var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark');
|
|
||||||
for (var i = 0; i < c600OutlineDark.length; ++i) {
|
|
||||||
c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25);
|
|
||||||
}
|
|
||||||
var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse');
|
|
||||||
for (var i = 0; i < inverse.length; ++i) {
|
|
||||||
inverse[i].innerHTML = data['inverse'];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// CSS Style
|
Object.keys(swap).forEach(function(key) {
|
||||||
|
var target = document.querySelectorAll(colors.selectorTheme + ' ' + key);
|
||||||
|
for (var i = 0; i < target.length; ++i) {
|
||||||
|
target[i].innerHTML = swap[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update CSS Style
|
||||||
var generatedStyles = '[data-theme="generated"] {'
|
var generatedStyles = '[data-theme="generated"] {'
|
||||||
+ '--primary:' + data[600] + ';'
|
|
||||||
+ '--h4:' + data[700] + ';'
|
+ '--h4:' + data[700] + ';'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
+ '--primary-hover:' + data[700] + ';'
|
+ '--primary-hover:' + data[700] + ';'
|
||||||
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
|
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
|
||||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
|
@ -480,8 +467,8 @@
|
||||||
|
|
||||||
+ '@media only screen and (prefers-color-scheme: dark) {'
|
+ '@media only screen and (prefers-color-scheme: dark) {'
|
||||||
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
||||||
+ '--primary:' + data[600] + ';'
|
|
||||||
+ '--h4:' + data[400] + ';'
|
+ '--h4:' + data[400] + ';'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
+ '--primary-hover:' + data[500] + ';'
|
+ '--primary-hover:' + data[500] + ';'
|
||||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
|
@ -489,11 +476,19 @@
|
||||||
+ '}'
|
+ '}'
|
||||||
|
|
||||||
+ '[data-theme="dark"] [data-theme="generated"] {'
|
+ '[data-theme="dark"] [data-theme="generated"] {'
|
||||||
+ '--primary:' + data[600] + ';'
|
|
||||||
+ '--h4:' + data[500] + ';'
|
+ '--h4:' + data[500] + ';'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
+ '--primary-hover:' + data[500] + ';'
|
+ '--primary-hover:' + data[500] + ';'
|
||||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
+ '}'
|
||||||
|
|
||||||
|
+ '[data-theme="generated"] {'
|
||||||
|
+ '--primary-border: var(--primary);'
|
||||||
|
+ '--primary-hover-border: var(--primary-hover);'
|
||||||
|
+ '--input-hover-border: var(--primary-hover);'
|
||||||
|
+ '--input-focus: var(--primary-focus);'
|
||||||
|
+ '--input-inverse: var(--primary-inverse);'
|
||||||
+ '}';
|
+ '}';
|
||||||
|
|
||||||
// Insert CSS Styles
|
// Insert CSS Styles
|
||||||
|
|
@ -518,7 +513,7 @@
|
||||||
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||||
}
|
}
|
||||||
c= '0x' + c.join('');
|
c= '0x' + c.join('');
|
||||||
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')';
|
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')';
|
||||||
}
|
}
|
||||||
throw new Error('Bad Hex');
|
throw new Error('Bad Hex');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
&[data-color="yellow"],
|
&[data-color="yellow"],
|
||||||
&[data-color="amber"] {
|
&[data-color="amber"] {
|
||||||
&.picked {
|
&.picked {
|
||||||
// TODO
|
background-image: var(--icon-check-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
// Source: https://feathericons.com/
|
// Source: https://feathericons.com/
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
--icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-check: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-check-dark: 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='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue