mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 02:16:15 -04:00
Prettify code
This commit is contained in:
Lucas Larroche
parent
868e5d20cb
commit
5f6e3c1abd
59 changed files with 1079 additions and 1027 deletions
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
[data-theme=light],
|
||||
:root:not([data-theme=dark]) {
|
||||
--invalid-color: #C62828;
|
||||
--valid-color: #388E3C;
|
||||
--invalid-color: #c62828;
|
||||
--valid-color: #388e3c;
|
||||
--nav-background-color: rgba(255, 255, 255, 0.7);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #FFF;
|
||||
--nav-logo-color: #fff;
|
||||
--article-code-background-color: #f9fafb;
|
||||
}
|
||||
|
||||
|
|
@ -72,32 +72,32 @@ body > main div[role=document] {
|
|||
|
||||
div[role=document] > section::before {
|
||||
display: block;
|
||||
height: calc(2rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-2rem - 3.5rem + .5rem);
|
||||
height: calc(2rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-2rem - 3.5rem + 0.5rem);
|
||||
content: "";
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(2.5rem + 3.5rem - .5rem);
|
||||
height: calc(-2.5rem - 3.5rem + .5rem);
|
||||
height: calc(2.5rem + 3.5rem - 0.5rem);
|
||||
height: calc(-2.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(3rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-3rem - 3.5rem + .5rem);
|
||||
height: calc(3rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(3.5rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-3.5rem - 3.5rem + .5rem);
|
||||
height: calc(3.5rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(4rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-4rem - 3.5rem + .5rem);
|
||||
height: calc(4rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-4rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +139,8 @@ main > aside nav h1 {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
main > aside li, main > aside summary {
|
||||
main > aside li,
|
||||
main > aside summary {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
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
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
|
||||
export const aside = {
|
||||
|
||||
// Config
|
||||
minWidth: '992px',
|
||||
targets: {
|
||||
|
|
@ -14,19 +13,18 @@ export const aside = {
|
|||
details: 'aside details',
|
||||
},
|
||||
|
||||
|
||||
// Init
|
||||
init() {
|
||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
||||
let nav = document.querySelector(this.targets.nav);
|
||||
let details = document.querySelectorAll(this.targets.details);
|
||||
if (nav.clientHeight < nav.scrollHeight) {
|
||||
details.forEach(function(detail) {
|
||||
detail.removeAttribute("open");
|
||||
details.forEach(function (detail) {
|
||||
detail.removeAttribute('open');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default aside;
|
||||
export default aside;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
|
||||
export const colorPicker = {
|
||||
|
||||
// Config
|
||||
colors: null,
|
||||
buttonsTarget: '#customization article[data-theme="generated"]',
|
||||
|
|
@ -24,16 +23,19 @@ export const colorPicker = {
|
|||
|
||||
// Generate Buttons
|
||||
generateButtons() {
|
||||
|
||||
// Init
|
||||
let innerButtons = '';
|
||||
let innerStyles = '';
|
||||
|
||||
|
||||
// Loop colors
|
||||
for (const color in this.colors) {
|
||||
// Buttons
|
||||
innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
|
||||
innerButtons +=
|
||||
'<button data-color="' +
|
||||
color +
|
||||
'" aria-label="Activate ' +
|
||||
color +
|
||||
' theme"></button>';
|
||||
|
||||
// Styles
|
||||
innerStyles += `
|
||||
|
|
@ -52,7 +54,6 @@ export const colorPicker = {
|
|||
}`;
|
||||
}
|
||||
|
||||
|
||||
// Insert buttons
|
||||
let containerButtons = document.createElement('FIGURE');
|
||||
containerButtons.innerHTML = innerButtons;
|
||||
|
|
@ -60,13 +61,19 @@ export const colorPicker = {
|
|||
|
||||
// Buttons listeners
|
||||
this.buttons = document.querySelectorAll(this.selectorButton);
|
||||
this.buttons.forEach(function(button) {
|
||||
button.addEventListener('click', function(event) {
|
||||
let color = event.target.getAttribute('data-color');
|
||||
this.setActiveButton(color);
|
||||
this.generateTheme(color);
|
||||
}.bind(this), false);
|
||||
}.bind(this));
|
||||
this.buttons.forEach(
|
||||
function (button) {
|
||||
button.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
let color = event.target.getAttribute('data-color');
|
||||
this.setActiveButton(color);
|
||||
this.generateTheme(color);
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// Insert CSS Styles
|
||||
let containerStyles = document.createElement('STYLE');
|
||||
|
|
@ -76,21 +83,22 @@ export const colorPicker = {
|
|||
document.querySelector('head').appendChild(containerStyles);
|
||||
},
|
||||
|
||||
|
||||
// Set active button
|
||||
setActiveButton(color) {
|
||||
|
||||
// Remove all active states
|
||||
this.buttons.forEach(function(button) {
|
||||
button.removeAttribute('class');
|
||||
}.bind(this));
|
||||
this.buttons.forEach(
|
||||
function (button) {
|
||||
button.removeAttribute('class');
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// Set active state
|
||||
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
|
||||
let buttonPicked = document.querySelector(
|
||||
this.selectorButton + '[data-color="' + color + '"]'
|
||||
);
|
||||
buttonPicked.setAttribute('class', 'picked');
|
||||
},
|
||||
|
||||
|
||||
// Set active button
|
||||
generateTheme(color) {
|
||||
let name = color;
|
||||
|
|
@ -102,17 +110,23 @@ export const colorPicker = {
|
|||
'.c500': data[500],
|
||||
'.c600': data[600],
|
||||
'.c700': data[700],
|
||||
'.c600-outline-light': this.hexToRgbA(data[600], .125),
|
||||
'.c600-outline-dark': this.hexToRgbA(data[600], .25),
|
||||
'.c600-outline-light': this.hexToRgbA(data[600], 0.125),
|
||||
'.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
|
||||
'.inverse': data['inverse'],
|
||||
}
|
||||
};
|
||||
|
||||
Object.keys(swaps).forEach(function(swap) {
|
||||
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
|
||||
targets.forEach(function(target) {
|
||||
target.innerHTML = swaps[swap];
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
Object.keys(swaps).forEach(
|
||||
function (swap) {
|
||||
let targets = document.querySelectorAll(
|
||||
this.selectorSection + ' ' + swap
|
||||
);
|
||||
targets.forEach(
|
||||
function (target) {
|
||||
target.innerHTML = swaps[swap];
|
||||
}.bind(this)
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// 2. Update CSS Styles
|
||||
const innerStyles = `
|
||||
|
|
@ -120,7 +134,7 @@ export const colorPicker = {
|
|||
--h4-color: ${data[700]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[700]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], .125)};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.125)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
|
|
@ -128,7 +142,7 @@ export const colorPicker = {
|
|||
--h4-color: ${data[400]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], .25)};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
}
|
||||
|
|
@ -136,7 +150,7 @@ export const colorPicker = {
|
|||
--h4-color: ${data[500]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], .25)};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
[data-theme="generated"] {
|
||||
|
|
@ -146,16 +160,15 @@ export const colorPicker = {
|
|||
--switch-checked-background-color: var(--primary);
|
||||
}`;
|
||||
|
||||
document.querySelector('style[title="color-picker"]').innerHTML = this.generatedStyles + this.minifyCSS(innerStyles);
|
||||
document.querySelector('style[title="color-picker"]').innerHTML =
|
||||
this.generatedStyles + this.minifyCSS(innerStyles);
|
||||
},
|
||||
|
||||
|
||||
// Minify CSS
|
||||
minifyCSS(css) {
|
||||
return css.replace(/^ +/gm, '')
|
||||
return css.replace(/^ +/gm, '');
|
||||
},
|
||||
|
||||
|
||||
// Hexadecimal to Rgba
|
||||
hexToRgbA(hex, alpha) {
|
||||
let c;
|
||||
|
|
@ -165,10 +178,16 @@ export const colorPicker = {
|
|||
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||
}
|
||||
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');
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default colorPicker;
|
||||
export default colorPicker;
|
||||
|
|
|
|||
|
|
@ -6,34 +6,30 @@
|
|||
*/
|
||||
|
||||
export const grid = {
|
||||
|
||||
// Config
|
||||
buttons: {
|
||||
text: {
|
||||
add: 'Add column',
|
||||
remove: 'Remove column'
|
||||
remove: 'Remove column',
|
||||
},
|
||||
target: '#grids article'
|
||||
target: '#grids article',
|
||||
},
|
||||
grid: {
|
||||
current: 4,
|
||||
min: 1,
|
||||
max: 12,
|
||||
gridTarget: '#grids .grid',
|
||||
codeTarget: '#grids pre code'
|
||||
codeTarget: '#grids pre code',
|
||||
},
|
||||
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.addButtons();
|
||||
this.generateGrid()
|
||||
this.generateGrid();
|
||||
},
|
||||
|
||||
|
||||
// Add buttons
|
||||
addButtons() {
|
||||
|
||||
// Insert buttons
|
||||
let buttons = document.createElement('P');
|
||||
buttons.innerHTML = `
|
||||
|
|
@ -54,20 +50,26 @@ export const grid = {
|
|||
document.querySelector(this.buttons.target).before(buttons);
|
||||
|
||||
// Add button listener
|
||||
document.querySelector('#grids button.add').addEventListener('click', function() {
|
||||
this.addColumn();
|
||||
}.bind(this), false);
|
||||
document.querySelector('#grids button.add').addEventListener(
|
||||
'click',
|
||||
function () {
|
||||
this.addColumn();
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
|
||||
// Remove button listener
|
||||
document.querySelector('#grids button.remove').addEventListener('click', function() {
|
||||
this.removeColumn();
|
||||
}.bind(this), false);
|
||||
document.querySelector('#grids button.remove').addEventListener(
|
||||
'click',
|
||||
function () {
|
||||
this.removeColumn();
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
// Generate grid
|
||||
generateGrid() {
|
||||
|
||||
// Config
|
||||
let htmlInner = '';
|
||||
let codeInner = '<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';
|
||||
|
|
@ -84,7 +86,6 @@ export const grid = {
|
|||
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
|
||||
},
|
||||
|
||||
|
||||
// Add column
|
||||
addColumn() {
|
||||
if (this.grid.current < this.grid.max) {
|
||||
|
|
@ -93,14 +94,13 @@ export const grid = {
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
// Remove column
|
||||
removeColumn() {
|
||||
if (this.grid.current > this.grid.min) {
|
||||
this.grid.current--;
|
||||
this.generateGrid();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default grid;
|
||||
export default grid;
|
||||
|
|
|
|||
|
|
@ -1,303 +1,303 @@
|
|||
// Source: https://material.io/design/color/the-color-system.html
|
||||
export const materialDesignColors = {
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
'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"
|
||||
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"
|
||||
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"
|
||||
'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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
'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: "rgba(0, 0, 0, 0.75)"
|
||||
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: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
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: "rgba(0, 0, 0, 0.75)"
|
||||
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: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
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: "rgba(0, 0, 0, 0.75)"
|
||||
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: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
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"
|
||||
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"
|
||||
'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"
|
||||
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',
|
||||
},
|
||||
"blue-grey": {
|
||||
50: "#eceff1",
|
||||
100: "#cfd8dc",
|
||||
200: "#b0bec5",
|
||||
300: "#90a4ae",
|
||||
400: "#78909c",
|
||||
500: "#607d8b",
|
||||
600: "#546e7a",
|
||||
700: "#455a64",
|
||||
800: "#37474f",
|
||||
900: "#263238",
|
||||
inverse: "#FFF"
|
||||
}
|
||||
};
|
||||
|
||||
export default materialDesignColors;
|
||||
export default materialDesignColors;
|
||||
|
|
|
|||
|
|
@ -51,10 +51,9 @@
|
|||
* @property {number} defaults.offset An offset to take into account when calculating visibility.
|
||||
*/
|
||||
|
||||
|
||||
MostVisible.defaults = {
|
||||
percentage: false,
|
||||
offset: 0
|
||||
offset: 0,
|
||||
};
|
||||
MostVisible.prototype = {
|
||||
/**
|
||||
|
|
@ -66,11 +65,15 @@
|
|||
var _this = this;
|
||||
|
||||
var viewportHeight = document.documentElement.clientHeight;
|
||||
return Array.prototype.reduce.call(this.elements, function (carry, element) {
|
||||
var value = _this.getVisibleHeight(element, viewportHeight);
|
||||
return Array.prototype.reduce.call(
|
||||
this.elements,
|
||||
function (carry, element) {
|
||||
var value = _this.getVisibleHeight(element, viewportHeight);
|
||||
|
||||
return value > carry[0] ? [value, element] : carry;
|
||||
}, [0, null])[1];
|
||||
return value > carry[0] ? [value, element] : carry;
|
||||
},
|
||||
[0, null]
|
||||
)[1];
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -82,13 +85,13 @@
|
|||
*/
|
||||
getVisibleHeight: function (element, viewportHeight) {
|
||||
var rect = element.getBoundingClientRect(),
|
||||
rectTopOffset = rect.top - this.options.offset,
|
||||
rectBottomOffset = rect.bottom - this.options.offset,
|
||||
height = rect.bottom - rect.top,
|
||||
visible = {
|
||||
top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
|
||||
bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight
|
||||
};
|
||||
rectTopOffset = rect.top - this.options.offset,
|
||||
rectBottomOffset = rect.bottom - this.options.offset,
|
||||
height = rect.bottom - rect.top,
|
||||
visible = {
|
||||
top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
|
||||
bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
|
||||
};
|
||||
var visiblePx = 0;
|
||||
|
||||
if (visible.top && visible.bottom) {
|
||||
|
|
@ -108,11 +111,11 @@
|
|||
}
|
||||
|
||||
if (this.options.percentage) {
|
||||
return visiblePx / height * 100;
|
||||
return (visiblePx / height) * 100;
|
||||
}
|
||||
|
||||
return visiblePx;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
MostVisible.makeJQueryPlugin = function ($) {
|
||||
|
|
@ -126,7 +129,6 @@
|
|||
};
|
||||
}; // Try adding the jQuery plugin to window.jQuery
|
||||
|
||||
|
||||
MostVisible.makeJQueryPlugin(window.jQuery);
|
||||
/**
|
||||
* Extends obj by adding the properties of all other objects passed to the function.
|
||||
|
|
|
|||
|
|
@ -11,9 +11,8 @@
|
|||
import * as MostVisible from './most-visible.js';
|
||||
|
||||
export const scrollspy = {
|
||||
|
||||
mostVisible() {
|
||||
new MostVisible()
|
||||
new MostVisible();
|
||||
},
|
||||
|
||||
// Config
|
||||
|
|
@ -25,7 +24,6 @@ export const scrollspy = {
|
|||
active: 'active',
|
||||
},
|
||||
|
||||
|
||||
// Init
|
||||
init() {
|
||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
||||
|
|
@ -34,38 +32,48 @@ export const scrollspy = {
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
// Set active section in nav
|
||||
setActiveNav() {
|
||||
|
||||
// Get active section
|
||||
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
|
||||
|
||||
// Remove all active states
|
||||
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
|
||||
links.forEach(function(link) {
|
||||
link.classList.remove(this.targets.active);
|
||||
}.bind(this));
|
||||
let links = document.querySelectorAll(
|
||||
this.targets.nav + ' a.' + this.targets.active
|
||||
);
|
||||
links.forEach(
|
||||
function (link) {
|
||||
link.classList.remove(this.targets.active);
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// Set active state
|
||||
let activeLink = document.querySelector(this.targets.nav + ' a[href="#' + currentSection + '"]');
|
||||
let activeLink = document.querySelector(
|
||||
this.targets.nav + ' a[href="#' + currentSection + '"]'
|
||||
);
|
||||
activeLink.classList.add(this.targets.active);
|
||||
|
||||
// Open details parent
|
||||
activeLink.closest('details').setAttribute('open', '');
|
||||
},
|
||||
|
||||
|
||||
// Scroll stop
|
||||
scrollStop() {
|
||||
let isScrolling;
|
||||
window.addEventListener('scroll', function(event) {
|
||||
window.clearTimeout(isScrolling);
|
||||
isScrolling = setTimeout(function() {
|
||||
this.setActiveNav();
|
||||
}.bind(this), this.interval);
|
||||
}.bind(this), false);
|
||||
}
|
||||
}
|
||||
window.addEventListener(
|
||||
'scroll',
|
||||
function (event) {
|
||||
window.clearTimeout(isScrolling);
|
||||
isScrolling = setTimeout(
|
||||
function () {
|
||||
this.setActiveNav();
|
||||
}.bind(this),
|
||||
this.interval
|
||||
);
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default scrollspy;
|
||||
export default scrollspy;
|
||||
|
|
|
|||
|
|
@ -6,69 +6,63 @@
|
|||
*/
|
||||
|
||||
export const themeSwitcher = {
|
||||
|
||||
// Config
|
||||
_scheme: 'auto',
|
||||
change: {
|
||||
light: '<i>Turn on dark mode</i>',
|
||||
dark: '<i>Turn off dark mode</i>'
|
||||
dark: '<i>Turn off dark mode</i>',
|
||||
},
|
||||
buttonsTarget: '.theme-switcher',
|
||||
|
||||
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.scheme = this._scheme;
|
||||
this.initSwitchers();
|
||||
},
|
||||
|
||||
|
||||
// Prefered color scheme
|
||||
get preferedColorScheme() {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark';
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return 'light';
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Init switchers
|
||||
initSwitchers() {
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
buttons.forEach(function(button) {
|
||||
button.addEventListener('click', function(event) {
|
||||
if (this.scheme == 'dark') {
|
||||
this.scheme = 'light';
|
||||
}
|
||||
else {
|
||||
this.scheme = 'dark';
|
||||
}
|
||||
}.bind(this), false);
|
||||
}.bind(this));
|
||||
buttons.forEach(
|
||||
function (button) {
|
||||
button.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
if (this.scheme == 'dark') {
|
||||
this.scheme = 'light';
|
||||
} else {
|
||||
this.scheme = 'dark';
|
||||
}
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
// Add new button
|
||||
addButton(config) {
|
||||
|
||||
// Insert Switcher
|
||||
let button = document.createElement(config.tag);
|
||||
button.className = config.class;
|
||||
document.querySelector(config.target).appendChild(button);
|
||||
},
|
||||
|
||||
|
||||
// Set scheme
|
||||
set scheme(scheme) {
|
||||
|
||||
if (scheme == 'auto') {
|
||||
if (this.preferedColorScheme == 'dark') {
|
||||
this._scheme = 'dark';
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this._scheme = 'light';
|
||||
}
|
||||
}
|
||||
|
|
@ -82,33 +76,31 @@ export const themeSwitcher = {
|
|||
this.applyScheme();
|
||||
},
|
||||
|
||||
|
||||
// Get scheme
|
||||
get scheme() {
|
||||
return this._scheme;
|
||||
},
|
||||
|
||||
|
||||
// Apply scheme
|
||||
applyScheme() {
|
||||
|
||||
// Root attribute
|
||||
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
||||
|
||||
// Buttons text
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
let text;
|
||||
buttons.forEach(function(button) {
|
||||
if (this.scheme == 'dark') {
|
||||
text = this.change.dark;
|
||||
}
|
||||
else {
|
||||
text = this.change.light;
|
||||
}
|
||||
button.innerHTML = text;
|
||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||
}.bind(this));
|
||||
}
|
||||
}
|
||||
buttons.forEach(
|
||||
function (button) {
|
||||
if (this.scheme == 'dark') {
|
||||
text = this.change.dark;
|
||||
} else {
|
||||
text = this.change.light;
|
||||
}
|
||||
button.innerHTML = text;
|
||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default themeSwitcher;
|
||||
export default themeSwitcher;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ body > nav {
|
|||
|
||||
// Band & Title
|
||||
ul:first-of-type li {
|
||||
|
||||
// Brand
|
||||
&:first-of-type {
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
bottom: var(--spacing);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: .75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
line-height: 1;
|
||||
|
|
@ -20,9 +20,14 @@
|
|||
height: 1rem;
|
||||
border: 0.15rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
currentColor 0%,
|
||||
currentColor 50%,
|
||||
transparent 50%
|
||||
);
|
||||
vertical-align: bottom;
|
||||
content: '';
|
||||
content: "";
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +36,7 @@
|
|||
max-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -39,10 +44,8 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
max-width: 100%;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -54,8 +57,7 @@
|
|||
i {
|
||||
max-width: 100%;
|
||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||
transition: max-width var(--transition),
|
||||
padding var(--transition);
|
||||
transition: max-width var(--transition), padding var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ article pre code {
|
|||
section > pre {
|
||||
background: var(--article-code-background-color);
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5)
|
||||
var(--block-spacing-horizontal);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +34,7 @@ section > pre {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .375rem .75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0;
|
||||
color: var(--primary-inverse);
|
||||
font-size: 14px;
|
||||
|
|
@ -47,7 +48,8 @@ section > pre {
|
|||
|
||||
// Spacing for Valid & Invalid badge
|
||||
code {
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
|
||||
var(--block-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,13 +57,13 @@ section > pre {
|
|||
[data-theme="invalid"] {
|
||||
&:before {
|
||||
background: var(--invalid-color);
|
||||
content: 'Not so great';
|
||||
content: "Not so great";
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="valid"] {
|
||||
&:before {
|
||||
background: var(--valid-color);
|
||||
content: 'Great';
|
||||
content: "Great";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ section > hgroup {
|
|||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
a[role="button"] {
|
||||
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
[role=document] {
|
||||
[role="document"] {
|
||||
section > h1,
|
||||
section > h2,
|
||||
section > h3 {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
*/
|
||||
|
||||
main > aside {
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
|
|
@ -26,7 +25,8 @@ main > aside {
|
|||
}
|
||||
}
|
||||
|
||||
li, summary {
|
||||
li,
|
||||
summary {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 16px;
|
||||
|
|
@ -51,7 +51,7 @@ main > aside {
|
|||
}
|
||||
|
||||
details {
|
||||
padding-bottom: .25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: none;
|
||||
|
||||
summary {
|
||||
|
|
@ -66,7 +66,7 @@ main > aside {
|
|||
}
|
||||
|
||||
&[open] {
|
||||
>summary:not(:focus) {
|
||||
> summary:not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@
|
|||
*/
|
||||
|
||||
html {
|
||||
scroll-behavior:smooth;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
|
||||
// Docs: Customization
|
||||
#customization {
|
||||
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
|
|
@ -32,12 +31,12 @@
|
|||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
padding-top: 100%;
|
||||
border:none;
|
||||
border-radius: 0;
|
||||
button {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
padding-top: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
|
|
@ -47,8 +46,8 @@
|
|||
background-image: var(--icon-check);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
|
||||
background-size: 0.66rem auto;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&[data-color="lime"],
|
||||
&[data-color="yellow"],
|
||||
|
|
@ -69,10 +68,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Docs: Grids
|
||||
#grids {
|
||||
|
||||
--grid-spacing-vertical: 1rem;
|
||||
|
||||
button {
|
||||
|
|
@ -83,12 +80,12 @@
|
|||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: var(--secondary);
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 1rem;
|
||||
background: currentColor;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ $navHeight: 3.5rem;
|
|||
|
||||
// Main grid
|
||||
body > main {
|
||||
|
||||
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
|
|
@ -33,51 +32,51 @@ body > main {
|
|||
|
||||
// Anchors hacks for internal links
|
||||
div[role="document"] > section::before {
|
||||
|
||||
display: block;
|
||||
height: calc(2rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-2rem - #{$navHeight} + .5rem);
|
||||
content: '';
|
||||
height: calc(2rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
|
||||
content: "";
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
height: calc(2.5rem + #{$navHeight} - .5rem);
|
||||
height: calc(-2.5rem - #{$navHeight} + .5rem);
|
||||
height: calc(2.5rem + #{$navHeight} - 0.5rem);
|
||||
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
height: calc(3rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-3rem - #{$navHeight} + .5rem);
|
||||
height: calc(3rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
height: calc(3.5rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
|
||||
height: calc(3.5rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
height: calc(4rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-4rem - #{$navHeight} + .5rem);
|
||||
height: calc(4rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// External links
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
|
||||
{
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: var(--icon-external);
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
content: '';
|
||||
background-size: 0.66rem auto;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Embedded SVG
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
// Can be forced with data-theme="light"
|
||||
@import "docs/light";
|
||||
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@import "docs/dark";
|
||||
|
|
@ -23,4 +22,4 @@
|
|||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
@include dark;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Dark theme [Additions for docs]
|
||||
@mixin dark {
|
||||
--invalid-color: #{rgba($red-900, .5)};
|
||||
--valid-color: #{rgba($green-800, .5)};
|
||||
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
--invalid-color: #{rgba($red-900, 0.5)};
|
||||
--valid-color: #{rgba($green-800, 0.5)};
|
||||
--nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
|
||||
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||
--nav-logo-color: #{mix($black, $grey-900)};
|
||||
--article-code-background-color: var(--code-background-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Icons
|
||||
// Source: https://feathericons.com/
|
||||
: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-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-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-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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
:root:not([data-theme="dark"]) {
|
||||
--invalid-color: #{$red-800};
|
||||
--valid-color: #{$green-700};
|
||||
--nav-background-color: #{rgba($white, .7)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
--nav-background-color: #{rgba($white, 0.7)};
|
||||
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||
--nav-logo-color: #{$white};
|
||||
--article-code-background-color: #{mix($grey-50, $white, 33%)};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue