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

Initial commit 🚀

Browse source
This commit is contained in:
Lucas 2019-11-27 15:31:49 +07:00
commit 16c7596319
30 changed files with 5996 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
*.DS_Store
prepros-6.config

1290
css/pico.classless.css Normal file
View file

File diff suppressed because it is too large Load diff

4
css/pico.classless.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1442
css/pico.css Normal file
View file

File diff suppressed because it is too large Load diff

1286
css/pico.fluid.classless.css Normal file
View file

File diff suppressed because it is too large Load diff

4
css/pico.fluid.classless.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

37
scss/_colors.scss Normal file
View file

@ -0,0 +1,37 @@
// Navy-Grey
$grey-hue: 200 !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
$grey-300: hsl($grey-hue, 14%, 68%) !default;
$grey-400: hsl($grey-hue, 12%, 59%) !default;
$grey-500: hsl($grey-hue, 10%, 50%) !default;
$grey-600: hsl($grey-hue, 15%, 41%) !default;
$grey-700: hsl($grey-hue, 20%, 32%) !default;
$grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue
$primary-hue: 200;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
$primary-300: hsl($primary-hue, 84%, 68%) !default;
$primary-400: hsl($primary-hue, 82%, 59%) !default;
$primary-500: hsl($primary-hue, 80%, 50%) !default;
$primary-600: hsl($primary-hue, 85%, 41%) !default;
$primary-700: hsl($primary-hue, 90%, 32%) !default;
$primary-800: hsl($primary-hue, 95%, 23%) !default;
$primary-900: hsl($primary-hue, 100%, 15%) !default;
// Black & White
$black: #000 !default;
$white: #FFF !default;
// Miscs
$amber-200: hsl(45, 100%, 75%) !default;
$green-500: hsl(160, 50%, 40%) !default;
$green-600: hsl(160, 55%, 35%) !default;
$green-700: hsl(160, 60%, 30%) !default;
$red-700: hsl(0, 45%, 50%) !default;
$red-900: hsl(0, 45%, 40%) !default;

136
scss/_variables.scss Normal file
View file

@ -0,0 +1,136 @@
// Config
// ––––––––––––––––––––
// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: false !default;
// Enable ".container" as a container
$enable-class-container: true !default;
// Enable a centered viewport
// Fluid layout if disabled
$enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings if disabled
$enable-responsive-spacings: true !default;
// Enable responsive typography
// Fixed base font if disabled
$enable-responsive-typography: true !default;
// Enable .classes
// .classless version if disabled
$enable-classes: true !default;
// Spacings
// ––––––––––––––––––––
// Gutters and horizontals margins
// For <body>, '.row' (grids), <nav>, <table>
$spacing-gutter: 1rem !default;
// Blocks verticals margins and paddings
// For <header>, <main>, <footer>, <section>, <article>
// This value is proportionally multiplied according breakpoints for great responsive spacings
$spacing-block: 2rem !default;
// Vertical margins for Typography and Form elements
// This value is proportionally multiplied according breakpoints for great responsive spacings
$spacing-typography: 1.5rem !default;
// Padding for <input> and <button>
// (Vertical Horizontal)
$spacing-input-button: .75rem 1rem !default;
// Typography
// ––––––––––––––––––––
// Sans serif native font stack
$sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji" !default;
// Monospace native font stack
$monospace: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !default;
$line-height: 1.5 !default;
$text-weight: 400 !default;
$heading-weight: 700 !default;
// Blocks
// ––––––––––––––––––––
// For <form> elements, <button>, card (<article>), inlined code, badge (<u>)
$round: .25rem !default;
// Transitions
// ––––––––––––––––––––
// For <a>, <form> elements and <button>
$transition: .2s ease-in-out !default;
// Responsive
// ––––––––––––––––––––
$enable-responsive-typography: false !default;
$enable-responsive-spacings: false !default;
// xs: Extra small (portrait phones)
// sm: Small(landscape phones)
// md: Medium(tablets)
// lg: Large(desktops)
// xl: Extra large (large desktops)
// NOTE:
// To provide an easy and fine styling on each breakpoint
// we didn't use @each, @mixin or @include.
// That means you need to edit each CSS selector file to add a breakpoint
// You can disable any viewports, base-font and spacing-factor with 'null'
// Breakpoints
// 'null' disable the breakpoint
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
// Viewports
$viewports: (
// 'null' disable the viewport (max-width) on a breakpoint
sm: 510px,
md: 700px,
lg: 920px,
xl: 1130px
) !default;
// Base font for .rem
// 'null' disable the base font on a breakpoint
// 'xs' should not be 'null'
$base-font: (
xs: 16px,
sm: 17px,
md: 18px,
lg: 19px,
xl: 20px
) !default;
// Multiplication factor for spacings
// 'null' disable spacing factor on a breakpoint
$spacing-factor: (
xs: 1,
sm: 1.25,
md: 1.5,
lg: 1.75,
xl: 2
) !default;

62
scss/components/_accordion.scss Normal file
View file

@ -0,0 +1,62 @@
/**
* Accordion (<details>)
* Inspiration: https://codepen.io/koca/pen/RyeLLV
*/
details {
display: block;
margin-bottom: $spacing-typography;
padding-bottom: $spacing-typography/2;
border-bottom: 1px solid var(--muted-border);
summary {
list-style-type: none;
cursor: pointer;
line-height: 1rem;
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
// Marker
&::after {
$caret-icon-color: "808080"; // Without '#' !important
display: inline-block;
width: 1rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
// Source: https://feathericons.com/
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='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;
content: '';
transition: transform $transition;
}
&:focus {
outline: none;
}
}
// Open
&[open] {
summary {
margin-bottom: $spacing-typography/4;
color: var(--muted-text);
&::after {
transform: rotate(0);
}
}
}
}

56
scss/components/_card.scss Normal file
View file

@ -0,0 +1,56 @@
/**
* Card (<article>)
*/
article {
margin: $spacing-block;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
background: var(--card-background);
box-shadow: var(--card-shadow);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
padding: $spacing-block*map-get($spacing-factor, "sm");
}
@else {
margin: $spacing-block 0;
padding: $spacing-block;
}
border-radius: $round;
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
padding: $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")) {
margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
padding: $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")) {
margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
padding: $spacing-block*map-get($spacing-factor, "xl");
}
}
}

71
scss/components/_nav.scss Normal file
View file

@ -0,0 +1,71 @@
/**
* Nav
*/
// Inline
nav,
nav ul {
display: flex;
}
nav {
justify-content: space-between;
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: -$spacing-gutter/2;
}
&:last-of-type {
margin-right: -$spacing-gutter/2;
}
}
li {
display: inline-block;
margin: 0;
padding: $spacing-gutter $spacing-gutter/2;
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
}
}
a {
display: block;
margin: -$spacing-gutter (-$spacing-gutter/2);
padding: $spacing-gutter $spacing-gutter/2;
border-radius: $round;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
}
// Vertical Nav
aside {
nav,
ul,
li {
display: block;
}
li {
padding: $spacing-gutter/2;
a {
margin: -$spacing-gutter/2;
padding: $spacing-gutter/2;
}
}
}

59
scss/components/_tooltip.scss Normal file
View file

@ -0,0 +1,59 @@
/**
* Tooltip ([data-tooltip])
*/
[data-tooltip] {
position: relative;
&:not(a):not(button):not(input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&::before,
&::after {
display: block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
padding: .25rem .5rem;
overflow: hidden;
transform: translate(-50%, -.25rem);
border-radius: $round;
background: var(--secondary);
color: var(--secondary-inverse);
font-size: .85rem;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
content: attr(data-tooltip);
opacity: 0;
pointer-events: none;
transition: opacity $transition;
}
&::after {
padding: 0;
transform: translate(-50%, 0rem);
border-top: .3rem solid;
border-right: .3rem solid transparent;
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
color: var(--secondary);
content: '';
}
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
}

172
scss/content/_button.scss Normal file
View file

@ -0,0 +1,172 @@
/**
* Button
*/
// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers.
// 2. Remove the margin in Firefox and Safari
// 3. Show the overflow in Edge
button {
margin: 0; // 2
overflow: visible; // 3
font-family: inherit; // 1
text-transform: none; // 1
}
// Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
// Restore the focus styles unset by the previous rule.
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
// Pico
// ––––––––––––––––––––
button {
display: block;
width: 100%;
margin-bottom: $spacing-typography;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
a[role="button"] {
padding: $spacing-input-button;
border: 1px solid var(--primary);
border-radius: $round;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: $line-height;
text-align: center;
cursor: pointer;
transition:
background-color $transition,
border-color $transition,
color $transition,
box-shadow $transition;
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
background-color: var(--primary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
}
// Input [type="reset"]
input[type="reset"] {
cursor: pointer;
}
// Button .secondary
@if $enable-classes {
button.secondary,
input.secondary[type="submit"],
input[type="reset"],
a.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
background-color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
}
// Button .outline
@if $enable-classes {
button.outline,
input.outline[type="submit"],
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
}
}
}
// Button .outline.secondary
@if $enable-classes {
button.outline.secondary,
input.outline.secondary[type="submit"],
input.outline[type="reset"],
a.outline.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
}
// Button [disabled]
button,
input[type="submit"],
input[type="reset"],
a[role="button"] {
&[disabled] {
opacity: .5;
pointer-events: none;
}
}

113
scss/content/_code.scss Normal file
View file

@ -0,0 +1,113 @@
/**
* Code
*/
// Reboot
// ––––––––––––––––––––
// 1. Correct the inheritance and scaling of font size in all browsers.
// 2. Correct the odd `em` font sizing in all browsers.
pre,
code,
kbd,
samp {
font-family: $monospace; // 1
font-size: 1rem; // 2
}
// Pico
// ––––––––––––––––––––
pre,
code,
kbd {
background: var(--code-inlined);
color: var(--muted-text);
font-size: 85%;
font-weight: 400;
line-height: 1;
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: 83%;
}
}
@if map-get($breakpoints, "md") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: 81%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: 79%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: 77%;
}
}
}
code,
kbd {
display: inline-block;
padding: .375rem .5rem;
border-radius: $round;
}
pre {
display: block;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
overflow-x: auto;
border-left: .25rem solid var(--code-border);
background: var(--code-background);
@media (min-width: map-get($breakpoints, "sm")) {
margin-right: 0;
margin-left: 0;
}
> code {
display: block;
padding: 0;
background: transparent;
font-size: 14px;
line-height: $line-height;
}
}
// Code syntax
code {
// Tags
b {
color: var(--code-color-1);
font-weight: normal;
}
// Properties
i {
color: var(--code-color-2);
font-style: normal;
}
// Values
u {
color: var(--text);
text-decoration: none;
}
}
// kbd
kbd {
background-color: var(--secondary);
color: var(--secondary-inverse);
font-weight: bolder;
}

322
scss/content/_form.scss Normal file
View file

@ -0,0 +1,322 @@
/**
* Form elements
*/
// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers.
// 2. Remove the margin in Firefox and Safari.
input,
optgroup,
select,
textarea {
margin: 0; // 2
font-family: inherit; // 1
font-size: 1rem; // 1
line-height: $line-height; // 1
}
// Show the overflow in IE.
input {
overflow: visible;
}
// Remove the inheritance of text transform in Edge, Firefox, and IE.
select {
text-transform: none;
}
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
// 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers.
legend {
display: table; // 1
max-width: 100%; // 1
padding: 0; // 3
color: inherit; // 2
white-space: normal; // 1
}
// Remove the default vertical scrollbar in IE 10+.
textarea {
overflow: auto;
}
// Remove the padding in IE 10.
[type="checkbox"],
[type="radio"] {
padding: 0;
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button {
height: auto;
}
// 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari.
[type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
// Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}
// Pico
// ––––––––––––––––––––
// Fieldset
fieldset {
margin: 0;
margin-bottom: $spacing-typography;
padding: 0;
border: 0;
}
// Layout
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
form small {
display: block;
width: 100%;
}
// Spacing beteen label and input
$spacing-label-input: $spacing-typography/12;
// Label & legend
label,
fieldset legend {
display: block;
margin-bottom: $spacing-label-input;
vertical-align: middle;
}
// Inputs (Commons styles)
input,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid var(--input-border);
border-radius: $round;
outline: none;
background-color: var(--input-background);
color: var(--text);
font-weight: normal;
vertical-align: middle;
transition:
background-color $transition,
border-color $transition,
color $transition,
border-color $transition,
box-shadow $transition;
&::placeholder {
color: var(--muted-text);
opacity: 1;
}
&:active,
&:focus {
border-color: var(--primary);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
&[readonly],
&[disabled] {
border-color: var(--muted-border);
box-shadow: none;
& ~ label {
color: var(--muted-text);
}
}
&[disabled] {
background-color: var(--muted-background);
opacity: .5;
}
// Undo the Firefox inner focus ring
&:focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
}
// Text, Select & Textarea
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
margin-bottom: $spacing-typography;
padding: $spacing-input-button;
// Validation states
&[invalid]:not(:focus),
&[valid]:not(:focus) {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[invalid]:not(:focus) {
// Source: https://feathericons.com/
$invalid-icon-color: "b94646"; // Without '#' !important
border-bottom: 1px solid var(--invalid);
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='%23" + $invalid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
&[valid]:not(:focus) {
// Source: https://feathericons.com/
$valid-icon-color: "288a6a"; // Without '#' !important
border-bottom: 1px solid var(--valid);
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='%23" + $valid-icon-color + "' 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");
}
}
// Select
select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
&:not([multiple]) {
// Source: https://feathericons.com/
$caret-icon-color: "808080"; // Without '#' !important
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='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
}
// Checkboxes & Radios
[type="checkbox"],
[type="radio"] {
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: .375rem;
margin-bottom: $spacing-label-input;
vertical-align: middle;
cursor: pointer;
&::-ms-check {
display: none; // unstyle IE checkboxes
}
&:checked {
border-color: var(--primary);
background-color: var(--primary);
// Source: https://feathericons.com/
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='%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");
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
}
& ~ label {
display: inline-block;
margin-right: .375rem;
margin-bottom: 0;
cursor: pointer;
}
}
// Radios
[type="radio"] {
border-radius: 50%;
&:checked {
border-width: .33rem;
border-color: var(--primary);
background-color: var(--primary-inverse);
background-image: none;
}
}
// Switchs
[type="checkbox"][role="switch"] {
// Config
$switch-height: 1rem;
$switch-width: 1.85rem;
$switch-border: 2px;
$switch-transition: .1s ease-in-out;
// Styles
width: $switch-width;
height: $switch-height;
border: $switch-border solid var(--input-border);
border-radius: $switch-height;
background-color: var(--input-border);
line-height: $switch-height;
&:before {
display: block;
width: calc(#{$switch-height} - #{$switch-border*2});
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
content: '';
transition: margin $switch-transition;
}
&:checked {
border-color: var(--primary);
background-color: var(--primary);
// Disable if check box icon is needed
background-image: none;
// Enable if check box icon is needed
// background-position: center left $switch-width/6;
// background-size: $switch-width/5 auto;
&::before {
margin-right: 0;
margin-left: calc(#{$switch-width/2} - #{$switch-border});
}
}
}
// Helper
form small {
color: var(--muted-text);
}
input + small {
margin-top: -$spacing-typography/1.5;
margin-bottom: $spacing-typography;
}
// Styles for Input inside a label
label {
& > input:not([type="checkbox"]):not([type="radio"]),
& > select,
& > textarea {
margin-top: $spacing-label-input;
}
}

29
scss/content/_miscs.scss Normal file
View file

@ -0,0 +1,29 @@
/**
* Miscs
*/
// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
border: none;
border-top: 1px solid var(--muted-border);
}
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
}
// Add the correct display in IE 10+.
[hidden],
template {
display: none;
}

45
scss/content/_table.scss Normal file
View file

@ -0,0 +1,45 @@
/**
* Table
*/
table {
width: 100%;
border-spacing: 0;
background: var(--table-background);
}
// Cells
th,
td {
padding: ($spacing-gutter/2) $spacing-gutter;
border-bottom: 1px solid var(--table-border);
color: var(--muted-text);
font-weight: $text-weight;
text-align: left;
font-size: 0.875rem;
}
// Titles
th,
thead td {
color: var(--text);
font-weight: bolder;
font-size: 1rem;
}
// First row
thead {
th,
td {
border-bottom: 3px solid var(--table-border);
}
}
// Fine striping
tbody tr:nth-child(odd) {
background-color: rgba($grey-50,.02);
}
thead tr,
tbody tr:nth-child(even) {
background-color: rgba($grey-900,.02);
}

289
scss/content/_typography.scss Normal file
View file

@ -0,0 +1,289 @@
/**
* Typography
*/
// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: border;
}
// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
sub,
sup {
position: relative;
font-size: .75rem;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
}
sup {
top: -0.5rem;
}
// 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default
img {
max-width: 100%; // 2
height: auto; // 2
border-style: none; // 1
}
svg,
img {
vertical-align: text-bottom;
}
// Pico
// ––––––––––––––––––––
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
margin-top: 0;
margin-bottom: $spacing-typography;
color: var(--text);
font-size: 1rem;
font-style: normal;
}
// Links
// 1. Remove the gray background on active links in IE 10.
a {
background-color: transparent; // 1
color: var(--primary);
text-decoration: none;
transition:
background-color $transition,
color $transition,
text-decoration $transition,
box-shadow $transition;
&:hover,
&:active,
&:focus {
color: var(--primary-hover);
text-decoration: underline;
}
&:focus {
outline: none;
background-color: var(--primary-focus);
}
}
// Link .secondary
@if $enable-classes {
a.secondary {
color: var(--secondary);
&:hover,
&:active,
&:focus {
color: var(--secondary-hover);
}
&:focus {
background-color: var(--secondary-focus);
}
}
}
// Headings
// Because vertical margins can collapse, we avoid `margin-top`
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: $spacing-typography;
font-weight: $heading-weight;
}
h1 {
margin-bottom: $spacing-typography*2;
color: var(--h1);
font-size: 2rem;
}
h2 {
margin-bottom: $spacing-typography*1.75;
color: var(--h2);
font-size: 1.75rem;
}
h3 {
margin-bottom: $spacing-typography*1.5;
color: var(--h3);
font-size: 1.5rem;
}
h4 {
margin-bottom: $spacing-typography*1.25;
color: var(--h4);
font-size: 1.25rem;
}
h5 {
margin-bottom: $spacing-typography*1.125;
color: var(--h5);
font-size: 1.125rem;
}
h6 {
color: var(--h6);
font-size: 1rem;
}
// Increase headings font size inside <header>
header {
h1 {
font-size: 2rem*1.5;
}
h2 {
font-size: 1.75rem*1.5;
}
h3 {
font-size: 1.5rem*1.5;
}
h4 {
font-size: 1.25rem*1.5;
}
h5 {
font-size: 1.125rem*1.5;
}
h6 {
font-size: 1rem*1.5;
}
}
// Multi-level heading
hgroup {
margin-bottom: $spacing-typography;
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 0;
}
}
// Paragraphs
p {
margin-bottom: $spacing-typography/2;
}
// Small
small {
font-size: 85%;
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: 83%;
}
}
@if map-get($breakpoints, "md") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: 81%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: 79%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: 77%;
}
}
}
// Lists
ul,
ol {
padding-left: $spacing-typography;
li {
margin-bottom: $spacing-typography/2;
}
}
ul li {
list-style: square;
}
// Marked text
mark {
padding: .125rem .25rem;
background: var(--mark);
color: var(--text);
vertical-align: middle;
}
// Blockquote
blockquote {
display: block;
margin: ($spacing-typography*2) 0;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-gutter;
border-left: .25rem solid var(--muted-border);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
margin-right: 0;
margin-left: 0;
}
}
footer {
margin-top: $spacing-typography/2;
color: var(--muted-text);
}
}
// Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari.
abbr[title] {
border-bottom: 1px dotted;
text-decoration: none; // 1
cursor: help;
}
// Ins
ins {
color: var(--valid);
text-decoration: none;
}
// del
del {
color: var(--invalid);
}

44
scss/layout/_container.scss Normal file
View file

@ -0,0 +1,44 @@
@if ($enable-class-container and $enable-classes) {
/**
* Container
*/
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: $spacing-gutter;
padding-left: $spacing-gutter;
}
.container {
@if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) {
padding-right: 0;
padding-left: 0;
max-width: map-get($viewports, "sm");
}
}
@if map-get($breakpoints, "md") and $enable-viewport {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
}
}
}
}

68
scss/layout/_document.scss Normal file
View file

@ -0,0 +1,68 @@
/**
* Document
* Content-box & Responsive typography
*/
// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
box-sizing: border-box; // 1
}
// 1. Correct the line height in all browsers.
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 3. Change the default tap highlight to be completely transparent in iOS.
html {
-webkit-text-size-adjust: 100%; // 2
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
background: var(--background);
color: var(--text);
font-family: $sans-serif;
font-size: map-get($base-font, "xs");
font-weight: $text-weight;
line-height: $line-height; // 1
text-rendering: optimizeLegibility;
@if map-get($breakpoints, "sm") and
map-get($base-font, "sm") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: map-get($base-font, "sm");
}
}
@if map-get($breakpoints, "md") and
map-get($base-font, "md") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: map-get($base-font, "md");
}
}
@if map-get($breakpoints, "lg") and
map-get($base-font, "lg") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: map-get($base-font, "lg");
}
}
@if map-get($breakpoints, "xl") and
map-get($base-font, "xl") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: map-get($base-font, "xl");
}
}
}

30
scss/layout/_grid.scss Normal file
View file

@ -0,0 +1,30 @@
@if $enable-classes {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
margin: 0;
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
grid-column-gap: $spacing-gutter;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for childs in overflow
margin-bottom: $spacing-gutter;
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "lg")) {
margin-bottom: 0;
}
}
}
}
}

29
scss/layout/_scroller.scss Normal file
View file

@ -0,0 +1,29 @@
/**
* Horizontal scroller (<figure>)
*/
// Wrapper to make any content responsive across all viewports
figure {
display: block;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: 0;
overflow-x: auto;
figcaption {
color: var(--muted-text);
font-size: 87.5%;
padding: 0 $spacing-gutter ;
}
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
margin-right: 0;
margin-left: 0;
figcaption {
padding: 0;
}
}
}
}

44
scss/layout/_section.scss Normal file
View file

@ -0,0 +1,44 @@
/**
* Section
* Responsive spacings for section
*/
section {
margin-bottom: $spacing-block*map-get($spacing-factor, "xs")*2;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-bottom: $spacing-block*map-get($spacing-factor, "sm")*2;
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-bottom: $spacing-block*map-get($spacing-factor, "md")*2;
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-bottom: $spacing-block*map-get($spacing-factor, "lg")*2;
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-bottom: $spacing-block*map-get($spacing-factor, "xl")*2;
}
}
}

113
scss/layout/_sectioning.scss Normal file
View file

@ -0,0 +1,113 @@
/**
* Sectioning
* Container and responsive spacings for header, main, footer
*/
// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––
// Render the `main` element consistently in IE.
main {
display: block;
}
// Pico
// ––––––––––––––––––––
body {
width: 100%;
margin: 0;
> header,
> main,
> footer {
$padding-horizontal: $spacing-gutter !default;
$spacing-vertical: $spacing-block !default;
width: 100%;
margin-right: auto;
margin-left: auto;
// xs
@if $enable-semantic-container == false {
$padding-horizontal: 0;
}
padding: $spacing-vertical $padding-horizontal;
// sm
@if map-get($breakpoints, "sm")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "sm")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "sm");
}
@if $enable-responsive-spacings or $enable-viewport {
@if $enable-viewport or $enable-semantic-container == false {
$padding-horizontal: 0;
}
@else {
$padding-horizontal: $spacing-gutter;
}
@if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
}
@else {
$spacing-vertical: $spacing-block;
}
padding: $spacing-vertical $padding-horizontal;
}
}
}
// md
@if map-get($breakpoints, "md")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "md")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "md");
}
@if $enable-responsive-spacings and map-get($spacing-factor, "md") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "md");
padding: $spacing-vertical $padding-horizontal;
}
}
}
// lg
@if map-get($breakpoints, "lg")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "lg")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "lg");
}
@if $enable-responsive-spacings and map-get($spacing-factor, "lg") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "lg");
padding: $spacing-vertical $padding-horizontal;
}
}
}
// xl
@if map-get($breakpoints, "xl")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "xl")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "xl");
}
@if $enable-responsive-spacings and map-get($spacing-factor, "xl") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
padding: $spacing-vertical $padding-horizontal;
}
}
}
}
}

5
scss/pico.classless.scss Normal file
View file

@ -0,0 +1,5 @@
// Classless version
$enable-semantic-container: true;
$enable-classes: false;
@import "pico";

6
scss/pico.fluid.classless.scss Normal file
View file

@ -0,0 +1,6 @@
// Fluid version
$enable-semantic-container: true;
$enable-viewport: false;
$enable-classes: false;
@import "pico";

34
scss/pico.scss Normal file
View file

@ -0,0 +1,34 @@
/*!
* Pico.css v0.1.0 (https://picocss.com)
* Copyright 2019 - Licensed under MIT
*/
// Config
@import "colors";
@import "variables";
// Theming
@import "themes/light";
@import "themes/dark";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container
@import "layout/section"; // main > section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul ...
@import "content/form"; // label, input, select, ...
@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]
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/tooltip"; // data-tooltip

137
scss/themes/_dark.scss Normal file
View file

@ -0,0 +1,137 @@
/**
* Dark theme (Auto)
* Automatically enabled if user has Dark mode enabled
*/
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
// Document
--background: #{darken($grey-900, 6%)};
// Typography
--text: #{$grey-300};
--h1: #{$grey-50};
--h2: #{$grey-100};
--h3: #{$grey-200};
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};
// Card
--card-background: #{darken($grey-900, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
// Badge
--badge-background: #{$grey-800};
--badge-text: #{$grey-300};
// Table
--table-background: #{darken($grey-900, 4%)};
--table-border: #{darken($grey-900, 6%)};
}
}
/**
* Dark theme (Forced)
* Enabled if forced with data-theme="dark"
*/
[data-theme="dark"] {
// Document
--background: #{darken($grey-900, 6%)};
// Typography
--text: #{$grey-300};
--h1: #{$grey-50};
--h2: #{$grey-100};
--h3: #{$grey-200};
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};
// Card
--card-background: #{darken($grey-900, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
// Badge
--badge-background: #{$grey-800};
--badge-text: #{$grey-300};
// Table
--table-background: #{darken($grey-900, 4%)};
--table-border: #{darken($grey-900, 6%)};
}

63
scss/themes/_light.scss Normal file
View file

@ -0,0 +1,63 @@
/**
* Light theme (Default)
* Can be forced with data-theme="light"
*/
[data-theme="light"],
:root:not([data-theme="dark"]) {
// Document
--background: #{$white};
// Typography
--text: #{$grey-700};
--h1: #{$grey-900};
--h2: #{$grey-800};
--h3: #{$grey-700};
--h4: #{$grey-600};
--h5: #{$grey-500};
--h6: #{$grey-400};
--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};
// Secondary Call-to-Action
--secondary: #{mix($grey-700, $grey-800)};
--secondary-hover: #{mix($grey-800, $grey-900)};
--secondary-focus: #{rgba(mix($grey-700, $grey-800), .125)};
--secondary-inverse: #{$white};
// Form elements
--input-background: #{$white};
--input-border: #{mix($grey-100, $grey-200)};
// Utilities states
--valid: #{$green-600};
--invalid: #{$red-700};
--muted-text: #{mix($grey-400, $grey-500)};
--muted-background: #{$grey-50};
--muted-border: #{$grey-50};
// Card
--card-background: #{$white};
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
// Code
--code-background: #{lighten($grey-50, 2%)};
--code-border: #{$grey-100};
--code-inlined: #{$grey-50};
--code-color-1: #{desaturate($red-700, 20%)};
--code-color-2: #{desaturate($primary-600, 30%)};
// Badge
--badge-background: #{$grey-500};
--badge-text: #{$white};
// Table
--table-background: #{$white};
--table-border: #{rgba($grey-50, .75)};
}