geir/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-06-18 09:46:06 +02:00
commit 0c0d14b8fb
958 changed files with 941435 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

49
assets/pico/scss/_index.scss Normal file
View file

@ -0,0 +1,49 @@
@use "helpers/copyright";
// Config
@forward "settings";
// Theming
@use "themes/default";
// Layout
@use "layout/document"; // html
@use "layout/landmarks"; // body, header, main, footer
@use "layout/section"; // section
@use "layout/container"; // .container, .container-fluid
@use "layout/grid"; // .grid
@use "layout/overflow-auto"; // .overflow-auto
// Content
@use "content/typography"; // headings, p, ul, blockquote, ...
@use "content/link"; // a, role="link"
@use "content/button"; // button, role="button", type="button", type="submit" ...
@use "content/table"; // table, tr, td, ...
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/code"; // pre, code, ...
@use "content/figure"; // figure, figcaption
@use "content/miscs"; // hr, template, [hidden], dialog, canvas
// Forms
@use "forms/basics"; // input, select, textarea, label, fieldset, legend
@use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
@use "forms/input-color"; // type="color"
@use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
@use "forms/input-file"; // type="file"
@use "forms/input-range"; // type="range"
@use "forms/input-search"; // type="search"
// Components
@use "components/accordion"; // details, summary
@use "components/card"; // article
@use "components/dropdown"; // details.dropdown
@use "components/group"; // role="group"
@use "components/loading"; // aria-busy=true
@use "components/modal"; // dialog
@use "components/nav"; // nav
@use "components/progress"; // progress
@use "components/tooltip"; // data-tooltip
// Utilities
@use "utilities/accessibility"; // -ms-touch-action, aria-*
@use "utilities/reduce-motion"; // prefers-reduced-motion

148
assets/pico/scss/_settings.scss Normal file
View file

@ -0,0 +1,148 @@
@use "sass:map";
// Settings
// ––––––––––––––––––––
// Theme color
$theme-color: "azure" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"
// Define the root element used to target <header>, <main>, <footer>
// with $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default;
// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
// Fluid layout if disabled
$enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings by default
$enable-responsive-spacings: false !default;
// Enable responsive typography
// Fixed root element size (rem) if disabled
$enable-responsive-typography: true !default;
// Enable .classes
// .classless version if disabled
$enable-classes: true !default;
// Enable transitions
$enable-transitions: true !default;
// Enable overriding with !important
$enable-important: true !default;
// Optional parent selector
// If defined, all HTML tags are wrapped with this selector
// :root is not wrapped
$parent-selector: "" !default;
// Breakpoints, viewports and root font size
$breakpoints: () !default;
$breakpoints: map.deep-merge(
(
// Small (landscape phones)
// Font size: 17px
sm:
(
breakpoint: 576px,
viewport: 510px,
root-font-size: 106.25%,
),
// Medium (tablets)
// Font size: 18px
md:
(
breakpoint: 768px,
viewport: 700px,
root-font-size: 112.5%,
),
// Large
// Font size: 19px
lg:
(
breakpoint: 1024px,
viewport: 950px,
root-font-size: 118.75%,
),
// Extra large
// Font size: 20px
xl:
(
breakpoint: 1280px,
viewport: 1200px,
root-font-size: 125%,
),
// Extra extra large
// Font size: 21px
xxl:
(
breakpoint: 1536px,
viewport: 1450px,
root-font-size: 131.25%,
)
),
$breakpoints
);
// Modules to export
$modules: () !default;
$modules: map.merge(
(
// Theme
"themes/default": true,
// Layout
"layout/document": true,
"layout/landmarks": true,
"layout/container": true,
"layout/section": true,
"layout/grid": true,
"layout/overflow-auto": true,
// Content
"content/link": true,
"content/typography": true,
"content/embedded": true,
"content/button": true,
"content/table": true,
"content/code": true,
"content/figure": true,
"content/miscs": true,
// Forms
"forms/basics": true,
"forms/checkbox-radio-switch": true,
"forms/input-color": true,
"forms/input-date": true,
"forms/input-file": true,
"forms/input-range": true,
"forms/input-search": true,
// Components
"components/accordion": true,
"components/card": true,
"components/dropdown": true,
"components/group": true,
"components/loading": true,
"components/modal": true,
"components/nav": true,
"components/progress": true,
"components/tooltip": true,
// Utilities
"utilities/accessibility": true,
"utilities/reduce-motion": true
),
$modules
);

886
assets/pico/scss/colors/_index.scss Normal file
View file

@ -0,0 +1,886 @@
// B&W
$black: #000;
$white: #fff;
// Red
$red-950: #1c0d06;
$red-900: #30130a;
$red-850: #45150c;
$red-800: #5c160d;
$red-750: #72170f;
$red-700: #861d13;
$red-650: #9b2318;
$red-600: #af291d;
$red-550: #c52f21;
$red-500: #d93526;
$red-450: #ee402e;
$red-400: #f06048;
$red-350: #f17961;
$red-300: #f38f79;
$red-250: #f5a390;
$red-200: #f5b7a8;
$red-150: #f6cabf;
$red-100: #f8dcd6;
$red-50: #faeeeb;
$red: $red-550;
// Pink
$pink-950: #25060c;
$pink-900: #380916;
$pink-850: #4b0c1f;
$pink-800: #5f0e28;
$pink-750: #740f31;
$pink-700: #88143b;
$pink-650: #9d1945;
$pink-600: #b21e4f;
$pink-550: #c72259;
$pink-500: #d92662;
$pink-450: #f42c6f;
$pink-400: #f6547e;
$pink-350: #f7708e;
$pink-300: #f8889e;
$pink-250: #f99eae;
$pink-200: #f9b4be;
$pink-150: #f9c8ce;
$pink-100: #f9dbdf;
$pink-50: #fbedef;
$pink: $pink-500;
// Fuchsia
$fuchsia-950: #230518;
$fuchsia-900: #360925;
$fuchsia-850: #480b33;
$fuchsia-800: #5c0d41;
$fuchsia-750: #700e4f;
$fuchsia-700: #84135e;
$fuchsia-650: #98176d;
$fuchsia-600: #ac1c7c;
$fuchsia-550: #c1208b;
$fuchsia-500: #d9269d;
$fuchsia-450: #ed2aac;
$fuchsia-400: #f748b7;
$fuchsia-350: #f869bf;
$fuchsia-300: #f983c7;
$fuchsia-250: #fa9acf;
$fuchsia-200: #f9b1d8;
$fuchsia-150: #f9c6e1;
$fuchsia-100: #f9daea;
$fuchsia-50: #fbedf4;
$fuchsia: $fuchsia-550;
// Purple
$purple-950: #1e0820;
$purple-900: #2d0f33;
$purple-850: #3d1545;
$purple-800: #4d1a57;
$purple-750: #5e206b;
$purple-700: #6f277d;
$purple-650: #802e90;
$purple-600: #9236a4;
$purple-550: #aa40bf;
$purple-500: #b645cd;
$purple-450: #c652dc;
$purple-400: #cd68e0;
$purple-350: #d47de4;
$purple-300: #db90e8;
$purple-250: #e2a3eb;
$purple-200: #e7b6ee;
$purple-150: #edc9f1;
$purple-100: #f2dcf4;
$purple-50: #f8eef9;
$purple: $purple-600;
// Violet
$violet-950: #190928;
$violet-900: #251140;
$violet-850: #321856;
$violet-800: #3f1e6d;
$violet-750: #4d2585;
$violet-700: #5b2d9c;
$violet-650: #6935b3;
$violet-600: #7540bf;
$violet-550: #8352c5;
$violet-500: #9062ca;
$violet-450: #9b71cf;
$violet-400: #a780d4;
$violet-350: #b290d9;
$violet-300: #bd9fdf;
$violet-250: #c9afe4;
$violet-200: #d3bfe8;
$violet-150: #decfed;
$violet-100: #e8dff2;
$violet-50: #f3eff7;
$violet: $violet-600;
// Indigo
$indigo-950: #110b31;
$indigo-900: #181546;
$indigo-850: #1f1e5e;
$indigo-800: #272678;
$indigo-750: #2f2f92;
$indigo-700: #3838ab;
$indigo-650: #4040bf;
$indigo-600: #524ed2;
$indigo-550: #655cd6;
$indigo-500: #7569da;
$indigo-450: #8577dd;
$indigo-400: #9486e1;
$indigo-350: #a294e5;
$indigo-300: #b0a3e8;
$indigo-250: #bdb2ec;
$indigo-200: #cac1ee;
$indigo-150: #d8d0f1;
$indigo-100: #e5e0f4;
$indigo-50: #f2f0f9;
$indigo: $indigo-600;
// Blue
$blue-950: #080f2d;
$blue-900: #0c1a41;
$blue-850: #0e2358;
$blue-800: #0f2d70;
$blue-750: #0f3888;
$blue-700: #1343a0;
$blue-650: #184eb8;
$blue-600: #1d59d0;
$blue-550: #2060df;
$blue-500: #3c71f7;
$blue-450: #5c7ef8;
$blue-400: #748bf8;
$blue-350: #8999f9;
$blue-300: #9ca7fa;
$blue-250: #aeb5fb;
$blue-200: #bfc3fa;
$blue-150: #d0d2fa;
$blue-100: #e0e1fa;
$blue-50: #f0f0fb;
$blue: $blue-550;
// Azure
$azure-950: #04121d;
$azure-900: #061e2f;
$azure-850: #052940;
$azure-800: #033452;
$azure-750: #014063;
$azure-700: #014c75;
$azure-650: #015887;
$azure-600: #02659a;
$azure-550: #0172ad;
$azure-500: #017fc0;
$azure-450: #018cd4;
$azure-400: #029ae8;
$azure-350: #01aaff;
$azure-300: #51b4ff;
$azure-250: #79c0ff;
$azure-200: #9bccfd;
$azure-150: #b7d9fc;
$azure-100: #d1e5fb;
$azure-50: #e9f2fc;
$azure: $azure-550;
// Cyan
$cyan-950: #041413;
$cyan-900: #051f1f;
$cyan-850: #052b2b;
$cyan-800: #043737;
$cyan-750: #014343;
$cyan-700: #015050;
$cyan-650: #025d5d;
$cyan-600: #046a6a;
$cyan-550: #047878;
$cyan-500: #058686;
$cyan-450: #059494;
$cyan-400: #05a2a2;
$cyan-350: #0ab1b1;
$cyan-300: #0ac2c2;
$cyan-250: #0ccece;
$cyan-200: #25dddd;
$cyan-150: #3deceb;
$cyan-100: #58faf9;
$cyan-50: #c3fcfa;
$cyan: $cyan-550;
// Jade
$jade-950: #04140c;
$jade-900: #052014;
$jade-850: #042c1b;
$jade-800: #033823;
$jade-750: #00452b;
$jade-700: #015234;
$jade-650: #005f3d;
$jade-600: #006d46;
$jade-550: #007a50;
$jade-500: #00895a;
$jade-450: #029764;
$jade-400: #00a66e;
$jade-350: #00b478;
$jade-300: #00c482;
$jade-250: #00cc88;
$jade-200: #21e299;
$jade-150: #39f1a6;
$jade-100: #70fcba;
$jade-50: #cbfce1;
$jade: $jade-550;
// Green
$green-950: #0b1305;
$green-900: #131f07;
$green-850: #152b07;
$green-800: #173806;
$green-750: #1a4405;
$green-700: #205107;
$green-650: #265e09;
$green-600: #2c6c0c;
$green-550: #33790f;
$green-500: #398712;
$green-450: #409614;
$green-400: #47a417;
$green-350: #4eb31b;
$green-300: #55c21e;
$green-250: #5dd121;
$green-200: #62d926;
$green-150: #77ef3d;
$green-100: #95fb62;
$green-50: #d7fbc1;
$green: $green-500;
// Lime
$lime-950: #101203;
$lime-900: #191d03;
$lime-850: #202902;
$lime-800: #273500;
$lime-750: #304100;
$lime-700: #394d00;
$lime-650: #435a00;
$lime-600: #4d6600;
$lime-550: #577400;
$lime-500: #628100;
$lime-450: #6c8f00;
$lime-400: #779c00;
$lime-350: #82ab00;
$lime-300: #8eb901;
$lime-250: #99c801;
$lime-200: #a5d601;
$lime-150: #b2e51a;
$lime-100: #c1f335;
$lime-50: #defc85;
$lime: $lime-200;
// Yellow
$yellow-950: #141103;
$yellow-900: #1f1c02;
$yellow-850: #2b2600;
$yellow-800: #363100;
$yellow-750: #423c00;
$yellow-700: #4e4700;
$yellow-650: #5b5300;
$yellow-600: #685f00;
$yellow-550: #756b00;
$yellow-500: #827800;
$yellow-450: #908501;
$yellow-400: #9e9200;
$yellow-350: #ad9f00;
$yellow-300: #bbac00;
$yellow-250: #caba01;
$yellow-200: #d9c800;
$yellow-150: #e8d600;
$yellow-100: #f2df0d;
$yellow-50: #fdf1b4;
$yellow: $yellow-100;
// Amber
$amber-950: #161003;
$amber-900: #231a03;
$amber-850: #312302;
$amber-800: #3f2d00;
$amber-750: #4d3700;
$amber-700: #5b4200;
$amber-650: #694d00;
$amber-600: #785800;
$amber-550: #876400;
$amber-500: #977000;
$amber-450: #a77c00;
$amber-400: #b78800;
$amber-350: #c79400;
$amber-300: #d8a100;
$amber-250: #e8ae01;
$amber-200: #ffbf00;
$amber-150: #fecc63;
$amber-100: #fddea6;
$amber-50: #fcefd9;
$amber: $amber-200;
// Pumpkin
$pumpkin-950: #180f04;
$pumpkin-900: #271805;
$pumpkin-850: #372004;
$pumpkin-800: #482802;
$pumpkin-750: #593100;
$pumpkin-700: #693a00;
$pumpkin-650: #7a4400;
$pumpkin-600: #8b4f00;
$pumpkin-550: #9c5900;
$pumpkin-500: #ad6400;
$pumpkin-450: #bf6e00;
$pumpkin-400: #d27a01;
$pumpkin-350: #e48500;
$pumpkin-300: #ff9500;
$pumpkin-250: #ffa23a;
$pumpkin-200: #feb670;
$pumpkin-150: #fcca9b;
$pumpkin-100: #fcdcc1;
$pumpkin-50: #fceee3;
$pumpkin: $pumpkin-300;
// Orange
$orange-950: #1b0d06;
$orange-900: #2d1509;
$orange-850: #411a0a;
$orange-800: #561e0a;
$orange-750: #6b220a;
$orange-700: #7f270b;
$orange-650: #942d0d;
$orange-600: #a83410;
$orange-550: #bd3c13;
$orange-500: #d24317;
$orange-450: #e74b1a;
$orange-400: #f45d2c;
$orange-350: #f56b3d;
$orange-300: #f68e68;
$orange-250: #f8a283;
$orange-200: #f8b79f;
$orange-150: #f8cab9;
$orange-100: #f9dcd2;
$orange-50: #faeeea;
$orange: $orange-500;
// Sand
$sand-950: #111110;
$sand-900: #1c1b19;
$sand-850: #272622;
$sand-800: #32302b;
$sand-750: #3d3b35;
$sand-700: #49463f;
$sand-650: #55524a;
$sand-600: #615e55;
$sand-550: #6e6a60;
$sand-500: #7b776b;
$sand-450: #888377;
$sand-400: #959082;
$sand-350: #a39e8f;
$sand-300: #b0ab9b;
$sand-250: #beb8a7;
$sand-200: #ccc6b4;
$sand-150: #dad4c2;
$sand-100: #e8e2d2;
$sand-50: #f2f0ec;
$sand: $sand-200;
// Grey
$grey-950: #111111;
$grey-900: #1b1b1b;
$grey-850: #262626;
$grey-800: #303030;
$grey-750: #3b3b3b;
$grey-700: #474747;
$grey-650: #525252;
$grey-600: #5e5e5e;
$grey-550: #6a6a6a;
$grey-500: #777777;
$grey-450: #808080;
$grey-400: #919191;
$grey-350: #9e9e9e;
$grey-300: #ababab;
$grey-250: #b9b9b9;
$grey-200: #c6c6c6;
$grey-150: #d4d4d4;
$grey-100: #e2e2e2;
$grey-50: #f1f1f1;
$grey: $grey-300;
// Zinc
$zinc-950: #0f1114;
$zinc-900: #191c20;
$zinc-850: #23262c;
$zinc-800: #2d3138;
$zinc-750: #373c44;
$zinc-700: #424751;
$zinc-650: #4d535e;
$zinc-600: #5c6370;
$zinc-550: #646b79;
$zinc-500: #6f7887;
$zinc-450: #7b8495;
$zinc-400: #8891a4;
$zinc-350: #969eaf;
$zinc-300: #a4acba;
$zinc-250: #b3b9c5;
$zinc-200: #c2c7d0;
$zinc-150: #d1d5db;
$zinc-100: #e0e3e7;
$zinc-50: #f0f1f3;
$zinc: $zinc-550;
// Slate
$slate-950: #0e1118;
$slate-900: #181c25;
$slate-850: #202632;
$slate-800: #2a3140;
$slate-750: #333c4e;
$slate-700: #3d475c;
$slate-650: #48536b;
$slate-600: #525f7a;
$slate-550: #5d6b89;
$slate-500: #687899;
$slate-450: #7385a9;
$slate-400: #8191b5;
$slate-350: #909ebe;
$slate-300: #a0acc7;
$slate-250: #b0b9d0;
$slate-200: #bfc7d9;
$slate-150: #cfd5e2;
$slate-100: #dfe3eb;
$slate-50: #eff1f4;
$slate: $slate-600;
$colors: (
red: (
950: $red-950,
900: $red-900,
850: $red-850,
800: $red-800,
750: $red-750,
700: $red-700,
650: $red-650,
600: $red-600,
550: $red-550,
500: $red-500,
450: $red-450,
400: $red-400,
350: $red-350,
300: $red-300,
250: $red-250,
200: $red-200,
150: $red-150,
100: $red-100,
50: $red-50,
main: $red,
),
pink: (
950: $pink-950,
900: $pink-900,
850: $pink-850,
800: $pink-800,
750: $pink-750,
700: $pink-700,
650: $pink-650,
600: $pink-600,
550: $pink-550,
500: $pink-500,
450: $pink-450,
400: $pink-400,
350: $pink-350,
300: $pink-300,
250: $pink-250,
200: $pink-200,
150: $pink-150,
100: $pink-100,
50: $pink-50,
main: $pink,
),
fuchsia: (
950: $fuchsia-950,
900: $fuchsia-900,
850: $fuchsia-850,
800: $fuchsia-800,
750: $fuchsia-750,
700: $fuchsia-700,
650: $fuchsia-650,
600: $fuchsia-600,
550: $fuchsia-550,
500: $fuchsia-500,
450: $fuchsia-450,
400: $fuchsia-400,
350: $fuchsia-350,
300: $fuchsia-300,
250: $fuchsia-250,
200: $fuchsia-200,
150: $fuchsia-150,
100: $fuchsia-100,
50: $fuchsia-50,
main: $fuchsia,
),
purple: (
950: $purple-950,
900: $purple-900,
850: $purple-850,
800: $purple-800,
750: $purple-750,
700: $purple-700,
650: $purple-650,
600: $purple-600,
550: $purple-550,
500: $purple-500,
450: $purple-450,
400: $purple-400,
350: $purple-350,
300: $purple-300,
250: $purple-250,
200: $purple-200,
150: $purple-150,
100: $purple-100,
50: $purple-50,
main: $purple,
),
violet: (
950: $violet-950,
900: $violet-900,
850: $violet-850,
800: $violet-800,
750: $violet-750,
700: $violet-700,
650: $violet-650,
600: $violet-600,
550: $violet-550,
500: $violet-500,
450: $violet-450,
400: $violet-400,
350: $violet-350,
300: $violet-300,
250: $violet-250,
200: $violet-200,
150: $violet-150,
100: $violet-100,
50: $violet-50,
main: $violet,
),
indigo: (
950: $indigo-950,
900: $indigo-900,
850: $indigo-850,
800: $indigo-800,
750: $indigo-750,
700: $indigo-700,
650: $indigo-650,
600: $indigo-600,
550: $indigo-550,
500: $indigo-500,
450: $indigo-450,
400: $indigo-400,
350: $indigo-350,
300: $indigo-300,
250: $indigo-250,
200: $indigo-200,
150: $indigo-150,
100: $indigo-100,
50: $indigo-50,
main: $indigo,
),
blue: (
950: $blue-950,
900: $blue-900,
850: $blue-850,
800: $blue-800,
750: $blue-750,
700: $blue-700,
650: $blue-650,
600: $blue-600,
550: $blue-550,
500: $blue-500,
450: $blue-450,
400: $blue-400,
350: $blue-350,
300: $blue-300,
250: $blue-250,
200: $blue-200,
150: $blue-150,
100: $blue-100,
50: $blue-50,
main: $blue,
),
azure: (
950: $azure-950,
900: $azure-900,
850: $azure-850,
800: $azure-800,
750: $azure-750,
700: $azure-700,
650: $azure-650,
600: $azure-600,
550: $azure-550,
500: $azure-500,
450: $azure-450,
400: $azure-400,
350: $azure-350,
300: $azure-300,
250: $azure-250,
200: $azure-200,
150: $azure-150,
100: $azure-100,
50: $azure-50,
main: $azure,
),
cyan: (
950: $cyan-950,
900: $cyan-900,
850: $cyan-850,
800: $cyan-800,
750: $cyan-750,
700: $cyan-700,
650: $cyan-650,
600: $cyan-600,
550: $cyan-550,
500: $cyan-500,
450: $cyan-450,
400: $cyan-400,
350: $cyan-350,
300: $cyan-300,
250: $cyan-250,
200: $cyan-200,
150: $cyan-150,
100: $cyan-100,
50: $cyan-50,
main: $cyan,
),
jade: (
950: $jade-950,
900: $jade-900,
850: $jade-850,
800: $jade-800,
750: $jade-750,
700: $jade-700,
650: $jade-650,
600: $jade-600,
550: $jade-550,
500: $jade-500,
450: $jade-450,
400: $jade-400,
350: $jade-350,
300: $jade-300,
250: $jade-250,
200: $jade-200,
150: $jade-150,
100: $jade-100,
50: $jade-50,
main: $jade,
),
green: (
950: $green-950,
900: $green-900,
850: $green-850,
800: $green-800,
750: $green-750,
700: $green-700,
650: $green-650,
600: $green-600,
550: $green-550,
500: $green-500,
450: $green-450,
400: $green-400,
350: $green-350,
300: $green-300,
250: $green-250,
200: $green-200,
150: $green-150,
100: $green-100,
50: $green-50,
main: $green,
),
lime: (
950: $lime-950,
900: $lime-900,
850: $lime-850,
800: $lime-800,
750: $lime-750,
700: $lime-700,
650: $lime-650,
600: $lime-600,
550: $lime-550,
500: $lime-500,
450: $lime-450,
400: $lime-400,
350: $lime-350,
300: $lime-300,
250: $lime-250,
200: $lime-200,
150: $lime-150,
100: $lime-100,
50: $lime-50,
main: $lime,
),
yellow: (
950: $yellow-950,
900: $yellow-900,
850: $yellow-850,
800: $yellow-800,
750: $yellow-750,
700: $yellow-700,
650: $yellow-650,
600: $yellow-600,
550: $yellow-550,
500: $yellow-500,
450: $yellow-450,
400: $yellow-400,
350: $yellow-350,
300: $yellow-300,
250: $yellow-250,
200: $yellow-200,
150: $yellow-150,
100: $yellow-100,
50: $yellow-50,
main: $yellow,
),
amber: (
950: $amber-950,
900: $amber-900,
850: $amber-850,
800: $amber-800,
750: $amber-750,
700: $amber-700,
650: $amber-650,
600: $amber-600,
550: $amber-550,
500: $amber-500,
450: $amber-450,
400: $amber-400,
350: $amber-350,
300: $amber-300,
250: $amber-250,
200: $amber-200,
150: $amber-150,
100: $amber-100,
50: $amber-50,
main: $amber,
),
pumpkin: (
950: $pumpkin-950,
900: $pumpkin-900,
850: $pumpkin-850,
800: $pumpkin-800,
750: $pumpkin-750,
700: $pumpkin-700,
650: $pumpkin-650,
600: $pumpkin-600,
550: $pumpkin-550,
500: $pumpkin-500,
450: $pumpkin-450,
400: $pumpkin-400,
350: $pumpkin-350,
300: $pumpkin-300,
250: $pumpkin-250,
200: $pumpkin-200,
150: $pumpkin-150,
100: $pumpkin-100,
50: $pumpkin-50,
main: $pumpkin,
),
orange: (
950: $orange-950,
900: $orange-900,
850: $orange-850,
800: $orange-800,
750: $orange-750,
700: $orange-700,
650: $orange-650,
600: $orange-600,
550: $orange-550,
500: $orange-500,
450: $orange-450,
400: $orange-400,
350: $orange-350,
300: $orange-300,
250: $orange-250,
200: $orange-200,
150: $orange-150,
100: $orange-100,
50: $orange-50,
main: $orange,
),
sand: (
950: $sand-950,
900: $sand-900,
850: $sand-850,
800: $sand-800,
750: $sand-750,
700: $sand-700,
650: $sand-650,
600: $sand-600,
550: $sand-550,
500: $sand-500,
450: $sand-450,
400: $sand-400,
350: $sand-350,
300: $sand-300,
250: $sand-250,
200: $sand-200,
150: $sand-150,
100: $sand-100,
50: $sand-50,
main: $sand,
),
grey: (
950: $grey-950,
900: $grey-900,
850: $grey-850,
800: $grey-800,
750: $grey-750,
700: $grey-700,
650: $grey-650,
600: $grey-600,
550: $grey-550,
500: $grey-500,
450: $grey-450,
400: $grey-400,
350: $grey-350,
300: $grey-300,
250: $grey-250,
200: $grey-200,
150: $grey-150,
100: $grey-100,
50: $grey-50,
main: $grey,
),
zinc: (
950: $zinc-950,
900: $zinc-900,
850: $zinc-850,
800: $zinc-800,
750: $zinc-750,
700: $zinc-700,
650: $zinc-650,
600: $zinc-600,
550: $zinc-550,
500: $zinc-500,
450: $zinc-450,
400: $zinc-400,
350: $zinc-350,
300: $zinc-300,
250: $zinc-250,
200: $zinc-200,
150: $zinc-150,
100: $zinc-100,
50: $zinc-50,
main: $zinc,
),
slate: (
950: $slate-950,
900: $slate-900,
850: $slate-850,
800: $slate-800,
750: $slate-750,
700: $slate-700,
650: $slate-650,
600: $slate-600,
550: $slate-550,
500: $slate-500,
450: $slate-450,
400: $slate-400,
350: $slate-350,
300: $slate-300,
250: $slate-250,
200: $slate-200,
150: $slate-150,
100: $slate-100,
50: $slate-50,
main: $slate,
),
);

73
assets/pico/scss/colors/utilities/_background-colors.scss Normal file
View file

@ -0,0 +1,73 @@
@use "sass:map";
@use "../../colors";
@use "settings";
@use "utils";
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$background-color-property-name: map.get(settings.$properties, "background-color");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@mixin foreground-color($background-color) {
@if map.get(settings.$utilities, "color-for-background-colors") {
@if utils.foreground-brightness($background-color) == "light" {
@if $enable-css-vars {
color: var(#{$css-var-color-prefix}-light);
} @else {
color: utils.display-color(map.get(settings.$palette, "light-color"));
}
} @else {
@if $enable-css-vars {
color: var(#{$css-var-color-prefix}-dark);
} @else {
color: utils.display-color(map.get(settings.$palette, "dark-color"));
}
}
}
}
@mixin background-colors {
@if map.get(settings.$utilities, "background-colors") {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$background-color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
background-color: $value;
@include foreground-color($color-value);
}
}
// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name}-#{$shade});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
background-color: $value;
@include foreground-color($color-value);
}
}
}
}
}
}
}

50
assets/pico/scss/colors/utilities/_colors.scss Normal file
View file

@ -0,0 +1,50 @@
@use "sass:map";
@use "../../colors";
@use "settings";
@use "utils";
@mixin colors {
@if map.get(settings.$utilities, "colors") {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
color: $color-value;
}
}
// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name}-#{$shade});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
color: $color-value;
}
}
}
}
}
}
}

53
assets/pico/scss/colors/utilities/_css-vars.scss Normal file
View file

@ -0,0 +1,53 @@
@use "sass:map";
@use "../../colors";
@use "settings";
@use "utils";
@mixin css-vars {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars {
:root {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
#{$css-var-family-name}: #{utils.display-color($color-value)};
}
// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
}
}
}
}
// Black & white
@if map.get(settings.$palette, "enable-black-and-white") {
#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
}
// Text color variables
@if map.get(settings.$utilities, "color-for-background-colors") {
#{$css-var-color-prefix}-light: #{utils.display-color(
map.get(settings.$palette, "light-color")
)};
#{$css-var-color-prefix}-dark: #{utils.display-color(
map.get(settings.$palette, "dark-color")
)};
}
}
}
}

8
assets/pico/scss/colors/utilities/_index.scss Normal file
View file

@ -0,0 +1,8 @@
@forward "settings";
@use "css-vars" as *;
@use "colors" as *;
@use "background-colors" as *;
@include css-vars;
@include colors;
@include background-colors;

108
assets/pico/scss/colors/utilities/_settings.scss Normal file
View file

@ -0,0 +1,108 @@
@use "sass:map";
@use "../../settings" as pico-settings;
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"
$css-class-prefix: "pico-" !default;
// Palette
$palette: () !default;
$palette: map.merge(
(
// Color families
"color-families":
(
red,
pink,
fuchsia,
purple,
violet,
indigo,
blue,
azure,
cyan,
jade,
green,
lime,
yellow,
amber,
pumpkin,
orange,
sand,
grey,
zinc,
slate
),
// Shades
"shades":
(
50,
100,
150,
200,
250,
300,
350,
400,
450,
500,
550,
600,
650,
700,
750,
800,
850,
900,
950
),
// Export main color for each family
"enable-main-color": true,
// Export shades for each family
"enable-shades": true,
// Export black and white
"enable-black-and-white": false,
// Light color used for dark backgrounds
"light-color": #fff,
// Dark color used for light backgrounds
"dark-color": #000,
// Export as HEX, RGB or HSL values
"export-as": "hex" // hex | rgb | hsl
),
$palette
);
// Properties names used for CSS variables and classes
// Useful if you want to shorten the names
$properties: () !default;
$properties: map.merge(
(
"color": "color",
"background-color": "background",
),
$properties
);
// Utilities to export
$utilities: () !default;
$utilities: map.merge(
(
// CSS Vars
"css-vars": true,
// Colors utility classes
"colors": true,
// Background color utility classes
"background-colors": true,
// Color value for background color utility classes
"color-for-background-colors": true
),
$utilities
);

56
assets/pico/scss/colors/utilities/_utils.scss Normal file
View file

@ -0,0 +1,56 @@
@use "sass:color";
@use "sass:math";
@use "sass:map";
@use "settings";
// Determines if the foreground needs to be light or dark
// depending on the background color passed.
// W3C reference: http://www.w3.org/TR/AERT#color-contrast
// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
@function foreground-brightness($background-color) {
$background-color-brightness: brightness($background-color);
$light-color-brightness: brightness(#ffffff);
@if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
@return "light";
} @else {
@return "dark";
}
}
// Calculates the color brightness
// Color brightness is determined by the following formula:
// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
@function brightness($color) {
$color-brightness: round(
math.div(
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
1000
)
);
@return $color-brightness;
}
// Returns the color as RGB, HSL or HEX
@function display-color($color) {
@if map.get(settings.$palette, "export-as") == "rgb" {
@return display-rgb($color);
}
@if map.get(settings.$palette, "export-as") == "hsl" {
@return display-hsl($color);
}
@return $color;
}
// Display color as HSL
@function display-hsl($color) {
@return unquote(
"hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
);
}
// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
}

116
assets/pico/scss/components/_accordion.scss Normal file
View file

@ -0,0 +1,116 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/accordion") {
/**
* Accordion (<details>)
*/
#{$parent-selector} details {
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color);
}
@if $enable-transitions {
transition: color var(#{$css-var-prefix}transition);
}
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
// Marker
&::after {
display: block;
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@if $enable-transitions {
transition: transform var(#{$css-var-prefix}transition);
}
}
&:focus {
outline: none;
&:not([role]) {
color: var(#{$css-var-prefix}accordion-active-summary-color);
}
}
&:focus-visible {
&:not([role]) {
outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
color: var(#{$css-var-prefix}primary);
}
}
// Type button
&[role="button"] {
width: 100%;
text-align: left;
// Marker
&::after {
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
}
}
}
// Open
&[open] {
> summary {
margin-bottom: var(#{$css-var-prefix}spacing);
&:not([role]) {
&:not(:focus) {
color: var(#{$css-var-prefix}accordion-open-summary-color);
}
}
&::after {
transform: rotate(0);
}
}
}
}
[dir="rtl"] {
#{$parent-selector} details {
summary {
text-align: right;
&::after {
float: left;
background-position: left center;
}
}
}
}
}

46
assets/pico/scss/components/_card.scss Normal file
View file

@ -0,0 +1,46 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/card") {
/**
* Card (<article>)
*/
#{$parent-selector} article {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}card-background-color);
box-shadow: var(#{$css-var-prefix}card-box-shadow);
> header,
> footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
var(#{$css-var-prefix}block-spacing-horizontal);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
}
> header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius);
}
> footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
}
}
}

280
assets/pico/scss/components/_dropdown.scss Normal file
View file

@ -0,0 +1,280 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/dropdown") and $enable-classes {
/**
* Dropdown (details.dropdown)
*/
// Container
// ––––––––––––––––––––
#{$parent-selector} details.dropdown {
position: relative;
border-bottom: none;
// Marker
// ––––––––––––––––––––
summary,
> button,
> a {
&::after {
display: block;
width: 1rem;
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
margin-inline-start: 0.25rem;
float: right;
// TODO: find out why we need this magic number (0.2 rem)
// for the marker to be aligned with the regular select
transform: rotate(0deg) translateX(0.2rem);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
}
}
// Container type accordion
// inside a nav
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
// Override height
margin-bottom: 0;
}
// Bouton as a select
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown summary:not([role]) {
height: calc(
1rem *
var(#{$css-var-prefix}line-height) +
var(#{$css-var-prefix}form-element-spacing-vertical) *
2 +
var(#{$css-var-prefix}border-width) *
2
);
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}form-element-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
user-select: none;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
&:active,
&:focus {
border-color: var(#{$css-var-prefix}form-element-active-border-color);
background-color: var(#{$css-var-prefix}form-element-active-background-color);
}
&:focus {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
}
// Reset focus visible from accordion component
&:focus-visible {
outline: none;
}
// Aria-invalid
&[aria-invalid="false"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-valid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
}
&[aria-invalid="true"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
}
}
// Dropdown inside a nav
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
summary {
&::after {
transform: rotate(0deg) translateX(0rem);
}
&:not([role]) {
// Override height
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
);
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
&:focus-visible {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus);
}
}
}
}
// Submenu
// ––––––––––––––––––––
#{$parent-selector} details.dropdown summary + ul {
display: flex;
z-index: 99;
position: absolute;
left: 0;
flex-direction: column;
width: 100%;
min-width: fit-content;
margin: 0;
margin-top: var(#{$css-var-prefix}outline-width);
padding: 0;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}dropdown-background-color);
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
color: var(#{$css-var-prefix}dropdown-color);
white-space: nowrap;
opacity: 0;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 1s;
}
&[dir="rtl"] {
right: 0;
left: auto;
}
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
overflow: hidden;
border-radius: 0;
color: var(#{$css-var-prefix}dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover,
&:focus,
&:active,
&:focus-visible,
&[aria-current]:not([aria-current="false"]) {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
label {
width: 100%;
}
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
&:has(label):hover {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
}
// Button opened
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
margin-bottom: 0;
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
#{$parent-selector} details.dropdown[open] summary {
+ ul {
transform: scaleY(1);
opacity: 1;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 0s;
}
}
}
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
&::before {
display: block;
z-index: 1;
position: fixed;
width: 100vw;
height: 100vh;
inset: 0;
background: none;
content: "";
cursor: default;
}
}
// Label
// ––––––––––––––––––––
#{$parent-selector} label > details.dropdown {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}

120
assets/pico/scss/components/_group.scss Normal file
View file

@ -0,0 +1,120 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/group") {
/**
* Group ([role="group"], [role="search"])
*/
#{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] {
display: inline-flex;
position: relative;
width: 100%;
margin-bottom: var(#{$css-var-prefix}spacing);
border-radius: var(#{$css-var-prefix}border-radius);
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle;
transition: box-shadow var(#{$css-var-prefix}transition);
> *,
input:not([type="checkbox"], [type="radio"]),
select {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
&:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:focus {
z-index: 2;
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select {
&:not(:first-child) {
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
width: auto;
}
@supports selector(:has(*)) {
// Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-button
);
input:not([type="checkbox"], [type="radio"]),
select {
border-color: transparent;
}
}
// Group box shadow when an input is focused
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-input
);
// Adapt box shadow for buttons
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-hover-border);
}
}
// Remove button box shadow if we have a group box shadow
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
&:focus {
box-shadow: none;
}
}
}
}
#{$parent-selector} [role="search"] {
> * {
&:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
}
&:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
}
}
}
}

46
assets/pico/scss/components/_loading.scss Normal file
View file

@ -0,0 +1,46 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/loading") {
/**
* Loading ([aria-busy=true])
*/
// Everything except form elements
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
white-space: nowrap;
&::before {
display: inline-block;
width: 1em;
height: 1em;
background-image: var(#{$css-var-prefix}icon-loading);
background-size: 1em auto;
background-repeat: no-repeat;
content: "";
vertical-align: -0.125em; // Visual alignment
}
&:not(:empty) {
&::before {
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
&:empty {
text-align: center;
}
}
// Buttons and links
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="button"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [role="button"],
#{$parent-selector} a {
&[aria-busy="true"] {
pointer-events: none;
}
}
}

176
assets/pico/scss/components/_modal.scss Normal file
View file

@ -0,0 +1,176 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/modal") {
/**
* Modal (<dialog>)
*/
:root {
#{$css-var-prefix}scrollbar-width: 0px;
}
#{$parent-selector} dialog {
display: flex;
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
padding: 0;
border: 0;
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
color: var(#{$css-var-prefix}color);
// Content
article {
$close-selector: if(
$enable-classes,
".close, :is(a, button)[rel=prev]",
":is(a, button)[rel=prev]"
);
width: 100%;
max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
margin: var(#{$css-var-prefix}spacing);
overflow: auto;
@if map.get($breakpoints, "sm") {
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "sm"), "viewport");
}
}
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "md"), "viewport");
}
}
> header {
> * {
margin-bottom: 0;
}
#{$close-selector} {
margin: 0;
margin-left: var(#{$css-var-prefix}spacing);
padding: 0;
float: right;
}
}
> footer {
text-align: right;
button,
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
}
// Close icon
#{$close-selector} {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
margin-bottom: var(#{$css-var-prefix}spacing);
margin-left: auto;
border: none;
background-image: var(#{$css-var-prefix}icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
background-color: transparent;
opacity: 0.5;
@if $enable-transitions {
transition: opacity var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
opacity: 1;
}
}
}
// Closed state
&:not([open]),
&[open="false"] {
display: none;
}
}
// Utilities
@if $enable-classes {
.modal-is-open {
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
dialog {
pointer-events: auto;
touch-action: auto;
}
}
}
// Animations
@if $enable-classes and $enable-transitions {
$animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) {
dialog,
dialog > article {
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
dialog {
animation-duration: ($animation-duration * 4);
animation-name: modal-overlay;
> article {
animation-delay: $animation-duration;
animation-name: modal;
}
}
}
.modal-is-closing {
dialog,
dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
}
@keyframes modal-overlay {
from {
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
}
}

160
assets/pico/scss/components/_nav.scss Normal file
View file

@ -0,0 +1,160 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/nav") {
/**
* Nav
*/
// Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
:where(nav li)::before {
float: left;
content: "\200B";
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} nav,
#{$parent-selector} nav ul {
display: flex;
}
#{$parent-selector} nav {
justify-content: space-between;
overflow: visible;
ol,
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
:where(a, [role="link"]) {
display: inline-block;
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
&:not(:hover) {
text-decoration: none;
}
}
// Minimal support for buttons and forms elements
button,
[role="button"],
[type="button"],
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select {
height: auto;
margin-right: inherit;
margin-bottom: 0;
margin-left: inherit;
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
}
// Breadcrumb
&[aria-label="breadcrumb"] {
align-items: center;
justify-content: start;
& ul li {
&:not(:first-child) {
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
a {
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
}
&:not(:last-child) {
&::after {
display: inline-block;
position: absolute;
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
content: var(#{$css-var-prefix}nav-breadcrumb-divider);
color: var(#{$css-var-prefix}muted-color);
text-align: center;
text-decoration: none;
white-space: nowrap;
}
}
}
// Minimal support for aria-current
& a[aria-current]:not([aria-current="false"]) {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
}
}
// Vertical Nav
#{$parent-selector} aside {
nav,
ol,
ul,
li {
display: block;
}
li {
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
a {
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}
// Breadcrumb RTL
[dir="rtl"] {
#{$parent-selector} nav {
&[aria-label="breadcrumb"] {
& ul li {
&:not(:last-child) {
::after {
content: "\\";
}
}
}
}
}
}
}

102
assets/pico/scss/components/_progress.scss Normal file
View file

@ -0,0 +1,102 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/progress") {
/**
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
#{$parent-selector} progress {
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
overflow: hidden;
// Remove Firefox and Opera border
border: 0;
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}progress-background-color);
// IE10 uses `color` to set the bar background-color
color: var(#{$css-var-prefix}progress-color);
&::-webkit-progress-bar {
border-radius: var(#{$css-var-prefix}border-radius);
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(#{$css-var-prefix}progress-color);
@if $enable-transitions {
transition: inline-size var(#{$css-var-prefix}transition);
}
}
&::-moz-progress-bar {
background-color: var(#{$css-var-prefix}progress-color);
}
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&:indeterminate {
background: var(#{$css-var-prefix}progress-background-color)
linear-gradient(
to right,
var(#{$css-var-prefix}progress-color) 30%,
var(#{$css-var-prefix}progress-background-color) 30%
)
top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
}
}
[dir="rtl"] {
@media (prefers-reduced-motion: no-preference) {
#{$parent-selector} progress:indeterminate {
animation-direction: reverse;
}
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
}

215
assets/pico/scss/components/_tooltip.scss Normal file
View file

@ -0,0 +1,215 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tooltip") {
/**
* Tooltip ([data-tooltip])
*/
#{$parent-selector} [data-tooltip] {
position: relative;
&:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before,
&::after {
display: block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -0.25rem);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}tooltip-background-color);
content: attr(data-tooltip);
color: var(#{$css-var-prefix}tooltip-color);
font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight);
font-size: 0.875rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
// Caret
&[data-placement="top"]::after,
&::after {
padding: 0;
transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(#{$css-var-prefix}tooltip-background-color);
}
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
&:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
&:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
&:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
}
// Display
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
@if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) {
// Default (top)
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
}
}
// Bottom
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
}
}
}
// Left
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
// Right
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
}
@keyframes tooltip-slide {
to {
transform: var(#{$css-var-prefix}tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0;
}
to {
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
opacity: 1;
}
}
}
}
}

209
assets/pico/scss/content/_button.scss Normal file
View file

@ -0,0 +1,209 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/button") {
/**
* Button
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers
// 2. Remove the margin on controls in Safari
// 3. Show the overflow in Edge
#{$parent-selector} button {
margin: 0; // 2
overflow: visible; // 3
font-family: inherit; // 1
text-transform: none; // 1
}
// Correct the inability to style buttons in iOS and Safari
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] {
-webkit-appearance: button;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"],
#{$parent-selector} [type="file"]::file-selector-button,
#{$parent-selector} [role="button"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius);
outline: none;
background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: 1rem;
line-height: var(#{$css-var-prefix}line-height);
text-align: center;
text-decoration: none;
cursor: pointer;
user-select: none;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"])),
&:is(:hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
#{$css-var-prefix}box-shadow: var(
#{$css-var-prefix}button-hover-box-shadow,
0 0 0 rgba(0, 0, 0, 0)
);
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
}
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
}
}
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] {
margin-bottom: var(#{$css-var-prefix}spacing);
}
// .secondary, .contrast & .outline
@if $enable-classes {
// Secondary
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="file"]::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
cursor: pointer;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
}
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
}
// Contrast
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
}
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
}
}
// Outline (primary)
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
[type="reset"].outline {
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
}
}
// Outline (secondary)
#{$parent-selector}
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
[type="reset"].outline {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
}
}
// Outline (contrast)
#{$parent-selector}
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
}
}
} @else {
// Secondary button without .class
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="file"]::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
cursor: pointer;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
}
&:focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
}
}
// Button [disabled]
#{$parent-selector}
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
#{$parent-selector}
:where(fieldset[disabled])
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
opacity: 0.5;
pointer-events: none;
}
}

73
assets/pico/scss/content/_code.scss Normal file
View file

@ -0,0 +1,73 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/code") {
/**
* Code
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the odd `em` font sizing in all browsers
#{$parent-selector} pre,
#{$parent-selector} code,
#{$parent-selector} kbd,
#{$parent-selector} samp {
font-size: 0.875em; // 2
font-family: var(#{$css-var-prefix}font-family); // 1
}
#{$parent-selector} pre code {
font-size: inherit;
font-family: inherit;
}
// Prevent overflow of the container in all browsers (opinionated)
#{$parent-selector} pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} pre,
#{$parent-selector} code,
#{$parent-selector} kbd {
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}code-background-color);
color: var(#{$css-var-prefix}code-color);
font-weight: var(#{$css-var-prefix}font-weight);
line-height: initial;
}
#{$parent-selector} code,
#{$parent-selector} kbd {
display: inline-block;
padding: 0.375rem;
}
#{$parent-selector} pre {
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto;
> code {
display: block;
padding: var(#{$css-var-prefix}spacing);
background: none;
line-height: var(#{$css-var-prefix}line-height);
}
}
// kbd
#{$parent-selector} kbd {
background-color: var(#{$css-var-prefix}code-kbd-background-color);
color: var(#{$css-var-prefix}code-kbd-color);
vertical-align: baseline;
}
}

53
assets/pico/scss/content/_embedded.scss Normal file
View file

@ -0,0 +1,53 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/embedded") {
/**
* Embedded content
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Change the alignment on media elements in all browsers (opinionated)
#{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
// Add the correct display in IE 9-
#{$parent-selector} audio,
#{$parent-selector} video {
display: inline-block;
}
// Add the correct display in iOS 4-7
#{$parent-selector} audio:not([controls]) {
display: none;
height: 0;
}
// Remove the border on iframes in all browsers (opinionated)
#{$parent-selector} :where(iframe) {
border-style: none;
}
// 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default
#{$parent-selector} img {
max-width: 100%; // 2
height: auto; // 2
border-style: none; // 1
}
// Change the fill color to match the text color in all browsers (opinionated)
#{$parent-selector} :where(svg:not([fill])) {
fill: currentColor;
}
// Hide the overflow in IE
#{$parent-selector} svg:not(:root) {
overflow: hidden;
}
}

19
assets/pico/scss/content/_figure.scss Normal file
View file

@ -0,0 +1,19 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/figure") {
/**
* Figure
*/
#{$parent-selector} figure {
display: block;
margin: 0;
padding: 0;
figcaption {
padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
color: var(#{$css-var-prefix}muted-color);
}
}
}

69
assets/pico/scss/content/_link.scss Normal file
View file

@ -0,0 +1,69 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/link") {
/**
* Link
*/
#{$parent-selector} :where(a:not([role="button"])),
#{$parent-selector} [role="link"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
outline: none;
background-color: var(#{$css-var-prefix}background-color); // 1
color: var(#{$css-var-prefix}color);
text-decoration: var(#{$css-var-prefix}text-decoration);
text-decoration-color: var(#{$css-var-prefix}underline);
text-underline-offset: 0.125em;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
text-decoration var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
#{$css-var-prefix}text-decoration: underline;
}
&:focus-visible {
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
}
@if $enable-classes {
// Secondary
&.secondary {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
}
}
// Contrast
&.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
}
}
}
}
#{$parent-selector} a {
&[role="button"] {
display: inline-block;
}
}
}

38
assets/pico/scss/content/_miscs.scss Normal file
View file

@ -0,0 +1,38 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/miscs") {
/**
* Miscs
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Correct the inheritance of border color in Firefox
// 2. Add the correct box sizing in Firefox
#{$parent-selector} hr {
height: 0; // 2
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
border: 0;
border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
color: inherit; // 1
}
// Add the correct display in IE 10+
#{$parent-selector} [hidden],
#{$parent-selector} template {
@if $enable-important {
display: none !important;
} @else {
display: none;
}
}
// Add the correct display in IE 9-
#{$parent-selector} canvas {
display: inline-block;
}
}

62
assets/pico/scss/content/_table.scss Normal file
View file

@ -0,0 +1,62 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/table") {
/**
* Table
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Collapse border spacing in all browsers (opinionated)
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
#{$parent-selector} :where(table) {
width: 100%;
border-collapse: collapse; // 1
border-spacing: 0;
text-indent: 0; // 2
}
// Pico
// ––––––––––––––––––––
// Cells
#{$parent-selector} th,
#{$parent-selector} td {
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
border-bottom: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}table-border-color);
background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
text-align: left;
text-align: start;
}
// Footer
#{$parent-selector} tfoot {
th,
td {
border-top: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}table-border-color);
border-bottom: 0;
}
}
// Striped
@if enable-classes {
#{$parent-selector} table {
&.striped {
tbody tr:nth-child(odd) th,
tbody tr:nth-child(odd) td {
background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
}
}
}
}
}

182
assets/pico/scss/content/_typography.scss Normal file
View file

@ -0,0 +1,182 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/typography") {
/**
* Typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Add the correct font weight in Chrome, Edge, and Safari
#{$parent-selector} b,
#{$parent-selector} strong {
font-weight: bolder;
}
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
#{$parent-selector} sub,
#{$parent-selector} sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
#{$parent-selector} sub {
bottom: -0.25em;
}
#{$parent-selector} sup {
top: -0.5em;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} address,
#{$parent-selector} blockquote,
#{$parent-selector} dl,
#{$parent-selector} ol,
#{$parent-selector} p,
#{$parent-selector} pre,
#{$parent-selector} table,
#{$parent-selector} ul {
margin-top: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color);
font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight);
}
// Headings
#{$parent-selector} h1,
#{$parent-selector} h2,
#{$parent-selector} h3,
#{$parent-selector} h4,
#{$parent-selector} h5,
#{$parent-selector} h6 {
margin-top: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height);
font-family: var(#{$css-var-prefix}font-family);
}
#{$parent-selector} h1 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
}
#{$parent-selector} h2 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
}
#{$parent-selector} h3 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
}
#{$parent-selector} h4 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
}
#{$parent-selector} h5 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
}
#{$parent-selector} h6 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
}
// Margin-top for headings after a block
#{$parent-selector}
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(#{$css-var-prefix}typography-spacing-top);
}
}
// Paragraphs
#{$parent-selector} p {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
}
// Heading group
#{$parent-selector} hgroup {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
> * {
margin-top: 0;
margin-bottom: 0;
}
> *:not(:first-child):last-child {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
#{$css-var-prefix}font-weight: unset;
font-size: 1rem;
}
}
// Lists
#{$parent-selector} :where(ol, ul) {
li {
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
}
}
// Margin-top for nested lists
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; // 1
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
}
#{$parent-selector} ul li {
list-style: square;
}
// Highlighted text
#{$parent-selector} mark {
padding: 0.125rem 0.25rem;
background-color: var(#{$css-var-prefix}mark-background-color);
color: var(#{$css-var-prefix}mark-color);
vertical-align: baseline;
}
// Blockquote
#{$parent-selector} blockquote {
display: block;
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
padding: var(#{$css-var-prefix}spacing);
border-right: none;
border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
border-inline-end: none;
footer {
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
color: var(#{$css-var-prefix}blockquote-footer-color);
}
}
// Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
#{$parent-selector} abbr[title] {
border-bottom: 1px dotted;
text-decoration: none; // 1
cursor: help;
}
// Ins
#{$parent-selector} ins {
color: var(#{$css-var-prefix}ins-color);
text-decoration: none;
}
// del
#{$parent-selector} del {
color: var(#{$css-var-prefix}del-color);
}
// selection
#{$parent-selector} ::selection {
background-color: var(#{$css-var-prefix}text-selection-color);
}
}

471
assets/pico/scss/forms/_basics.scss Normal file
View file

@ -0,0 +1,471 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/basics") {
// Helper
$helper-previous-tags: "input, select, textarea, fieldset";
/**
* Basics form elements
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari
#{$parent-selector} input,
#{$parent-selector} optgroup,
#{$parent-selector} select,
#{$parent-selector} textarea {
margin: 0; // 2
font-size: 1rem; // 1
line-height: var(#{$css-var-prefix}line-height); // 1
font-family: inherit; // 1
letter-spacing: inherit; // 2
}
// Show the overflow in IE.
#{$parent-selector} input {
overflow: visible;
}
// Remove the inheritance of text transform in Edge, Firefox, and IE
#{$parent-selector} 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
#{$parent-selector} legend {
max-width: 100%; // 1
padding: 0; // 3
color: inherit; // 2
white-space: normal; // 1
}
// 1. Remove the default vertical scrollbar in IE
#{$parent-selector} textarea {
overflow: auto; // 1
}
// Remove the padding in IE 10
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"] {
padding: 0;
}
// Correct the cursor style of increment and decrement buttons in Safari
#{$parent-selector} ::-webkit-inner-spin-button,
#{$parent-selector} ::-webkit-outer-spin-button {
height: auto;
}
// 1. Correct the odd appearance in Chrome and Safari
// 2. Correct the outline style in Safari
#{$parent-selector} [type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
// Remove the inner padding in Chrome and Safari on macOS
#{$parent-selector} [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
#{$parent-selector} ::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}
// Remove the inner border and padding of focus outlines in Firefox
#{$parent-selector} ::-moz-focus-inner {
padding: 0;
border-style: none;
}
// Remove the focus outline in Firefox
#{$parent-selector} :-moz-focusring {
outline: none;
}
// Remove the additional :invalid styles in Firefox
#{$parent-selector} :-moz-ui-invalid {
box-shadow: none;
}
// Change the inconsistent appearance in IE (opinionated)
#{$parent-selector} ::-ms-expand {
display: none;
}
// Remove the border and padding in all browsers (opinionated)
#{$parent-selector} [type="file"],
#{$parent-selector} [type="range"] {
padding: 0;
border-width: 0;
}
// Pico
// ––––––––––––––––––––
// Force height for alternatives input types
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
}
// Fieldset
#{$parent-selector} fieldset {
width: 100%;
margin: 0;
margin-bottom: var(#{$css-var-prefix}spacing);
padding: 0;
border: 0;
}
// Label & legend
#{$parent-selector} label,
#{$parent-selector} fieldset legend {
display: block;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
}
#{$parent-selector} fieldset legend {
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
// Blocks, 100%
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} button[type="submit"],
#{$parent-selector} select,
#{$parent-selector} textarea {
width: 100%;
}
// Reset appearance (Not Checkboxes, Radios, Range and File)
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
appearance: none;
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
}
// Commons styles
#{$parent-selector} input,
#{$parent-selector} select,
#{$parent-selector} textarea {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
#{$css-var-prefix}box-shadow: none;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius);
outline: none;
background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
}
// Active & Focus
#{$parent-selector}
input:not(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[readonly]
),
#{$parent-selector} :where(select, textarea):not([readonly]) {
&:is(:active, :focus) {
#{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-active-background-color
);
}
}
// Active & Focus
#{$parent-selector}
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
#{$parent-selector} :where(select, textarea):not([readonly]) {
&:is(:active, :focus) {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
}
}
// Focus
#{$parent-selector}
input:not(
[type="submit"],
[type="button"],
[type="reset"],
[type="range"],
[type="file"],
[readonly]
),
#{$parent-selector} :where(select, textarea):not([readonly]) {
&:focus {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
}
}
// Disabled
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
#{$parent-selector} select[disabled],
#{$parent-selector} textarea[disabled],
#{$parent-selector} label[aria-disabled="true"],
#{$parent-selector}
:where(fieldset[disabled])
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
pointer-events: none;
}
#{$parent-selector} label[aria-disabled="true"] input[disabled] {
opacity: 1;
}
// Aria-invalid
#{$parent-selector} :where(input, select, textarea) {
&:not(
[type="checkbox"],
[type="radio"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"],
[type="range"]
) {
&[aria-invalid] {
@if $enable-important {
padding-right: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
padding-inline-end: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
} @else {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
}
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[aria-invalid="false"]:not(select) {
background-image: var(#{$css-var-prefix}icon-valid);
}
&[aria-invalid="true"]:not(select) {
background-image: var(#{$css-var-prefix}icon-invalid);
}
}
&[aria-invalid="false"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
&:is(:active, :focus) {
@if $enable-important {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color) !important;
}
} @else {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color);
}
}
}
}
&[aria-invalid="true"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
&:is(:active, :focus) {
@if $enable-important {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
}
} @else {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color);
}
}
}
}
}
[dir="rtl"] {
#{$parent-selector} :where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
background-position: center left 0.75rem;
}
}
}
}
// Placeholder
#{$parent-selector} input::placeholder,
#{$parent-selector} input::-webkit-input-placeholder,
#{$parent-selector} textarea::placeholder,
#{$parent-selector} textarea::-webkit-input-placeholder,
#{$parent-selector} select:invalid {
color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
margin-bottom: var(#{$css-var-prefix}spacing);
}
// Select
#{$parent-selector} select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
&:not([multiple], [size]) {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[multiple] {
option {
&:checked {
background: var(#{$css-var-prefix}form-element-selected-background-color);
color: var(#{$css-var-prefix}form-element-color);
}
}
}
}
[dir="rtl"] {
#{$parent-selector} select {
&:not([multiple], [size]) {
background-position: center left 0.75rem;
}
}
}
// Textarea
#{$parent-selector} textarea {
display: block;
resize: vertical;
&[aria-invalid] {
@if $enable-important {
#{$css-var-prefix}icon-height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
background-position: top right 0.75rem !important;
background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
}
}
}
@if map.get($modules, "layout/grid") and $enable-classes {
$helper-previous-tags: $helper-previous-tags + ", .grid";
}
#{$parent-selector} :where(#{$helper-previous-tags}) {
+ small {
display: block;
width: 100%;
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-bottom: var(#{$css-var-prefix}spacing);
color: var(#{$css-var-prefix}muted-color);
}
&[aria-invalid="false"] {
+ small {
color: var(#{$css-var-prefix}ins-color);
}
}
&[aria-invalid="true"] {
+ small {
color: var(#{$css-var-prefix}del-color);
}
}
}
// Styles for Input inside a label
#{$parent-selector} label {
> :where(input, select, textarea) {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
}

177
assets/pico/scss/forms/_checkbox-radio-switch.scss Normal file
View file

@ -0,0 +1,177 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/checkbox-radio-switch") {
/**
* Checkboxes, Radios and Switches
*/
// Labels
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
#{$parent-selector} label {
&:has([type="checkbox"], [type="radio"]) {
width: fit-content;
cursor: pointer;
}
}
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em;
border-width: var(#{$css-var-prefix}border-width);
vertical-align: middle;
cursor: pointer;
&::-ms-check {
display: none; // unstyle IE checkboxes
}
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
& ~ label {
display: inline-block;
margin-bottom: 0;
cursor: pointer;
&:not(:last-of-type) {
margin-inline-end: 1em;
}
}
}
// Checkboxes
#{$parent-selector} [type="checkbox"] {
&:indeterminate {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
}
// Radios
#{$parent-selector} [type="radio"] {
border-radius: 50%;
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
border-width: 0.35em;
background-image: none;
}
}
// Switchs
#{$parent-selector} [type="checkbox"][role="switch"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
// Config
$switch-height: 1.25em;
$switch-width: 2.25em;
$switch-transition: 0.1s ease-in-out;
// Styles
width: $switch-width;
height: $switch-height;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: $switch-height;
background-color: var(#{$css-var-prefix}background-color);
line-height: $switch-height;
&:not([aria-invalid]) {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
}
&:before {
display: block;
aspect-ratio: 1;
height: 100%;
border-radius: 50%;
background-color: var(#{$css-var-prefix}color);
box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
content: "";
@if $enable-transitions {
transition: margin $switch-transition;
}
}
&:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
}
&:checked {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
background-image: none;
&::before {
margin-inline-start: calc(#{$switch-width} - #{$switch-height});
}
}
&[disabled] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
}
}
// Aria-invalid
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="checkbox"][role="switch"] {
&[aria-invalid="false"] {
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
}
}
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
}
}
}
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="checkbox"][role="switch"] {
&[aria-invalid="false"] {
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
}
}
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
}
}
}

37
assets/pico/scss/forms/_input-color.scss Normal file
View file

@ -0,0 +1,37 @@
@use "sass:map";
@use "../settings" as *;
// Wrapper
@mixin color-wrapper {
padding: 0;
}
// Swatch
@mixin color-swatch {
border: 0;
border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
}
@if map.get($modules, "forms/input-color") {
/**
* Input type color
*/
#{$parent-selector} [type="color"] {
&::-webkit-color-swatch-wrapper {
@include color-wrapper;
}
&::-moz-focus-inner {
@include color-wrapper;
}
&::-webkit-color-swatch {
@include color-swatch;
}
&::-moz-color-swatch {
@include color-swatch;
}
}
}

60
assets/pico/scss/forms/_input-date.scss Normal file
View file

@ -0,0 +1,60 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-date") {
/**
* Input type datetime
*/
// :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
#{$css-var-prefix}icon-position: 0.75rem;
#{$css-var-prefix}icon-width: 1rem;
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
background-image: var(#{$css-var-prefix}icon-date);
background-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$css-var-prefix}icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(#{$css-var-prefix}icon-time);
}
}
// Calendar picker
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position);
opacity: 0;
}
}
// Calendar icons are hidden in Firefox
@if $enable-important {
@-moz-document url-prefix() {
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important;
}
}
}
[dir="rtl"]
#{$parent-selector}
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
}

41
assets/pico/scss/forms/_input-file.scss Normal file
View file

@ -0,0 +1,41 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-file") {
/**
* Input type file
*/
// 1. Hack to display the outline on the focused file selector button
// with the forced overflow hidden on the input[type="file"] element.
#{$parent-selector} [type="file"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$css-var-prefix}outline-width); // 1
border: 0;
border-radius: 0;
background: none;
&::file-selector-button {
margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
}
&:is(:hover, :active, :focus) {
&::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
}
}
&:focus {
&::file-selector-button {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
}
}
}

100
assets/pico/scss/forms/_input-range.scss Normal file
View file

@ -0,0 +1,100 @@
@use "sass:map";
@use "../settings" as *;
// Config
$height-track: 0.375rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Slider Track
@mixin slider-track {
width: 100%;
height: $height-track;
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}range-border-color);
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
}
// Slider Thumb
@mixin slider-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
border-radius: 50%;
background-color: var(#{$css-var-prefix}range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
transform var(#{$css-var-prefix}transition);
}
}
@if map.get($modules, "forms/input-range") {
/**
* Input type range
*/
#{$parent-selector} [type="range"] {
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: $height-thumb;
background: none;
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track {
@include slider-track;
}
&::-ms-track {
@include slider-track;
}
&::-webkit-slider-thumb {
@include slider-thumb;
}
&::-moz-range-thumb {
@include slider-thumb;
}
&::-ms-thumb {
@include slider-thumb;
}
&:active,
&:focus-within {
#{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
}
&:active {
// Slider Thumb
&::-webkit-slider-thumb {
transform: scale(1.25);
}
&::-moz-range-thumb {
transform: scale(1.25);
}
&::-ms-thumb {
transform: scale(1.25);
}
}
}
}

60
assets/pico/scss/forms/_input-search.scss Normal file
View file

@ -0,0 +1,60 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-search") {
/**
* Input type search
*/
// :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
background-image: var(#{$css-var-prefix}icon-search);
background-position: center
left
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem);
background-size: 1rem auto;
background-repeat: no-repeat;
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
) !important;
} @else {
padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
);
}
background-position:
center left 1.125rem,
center right 0.75rem;
}
&[aria-invalid="false"] {
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
}
&[aria-invalid="true"] {
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
}
}
}
[dir="rtl"] {
#{$parent-selector} :where(input) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
background-position: center right 1.125rem;
&[aria-invalid] {
background-position:
center right 1.125rem,
center left 0.75rem;
}
}
}
}
}
}

4
assets/pico/scss/helpers/_copyright.scss Normal file
View file

@ -0,0 +1,4 @@
/*!
* Pico CSS ✨ v2.0.6 (https://picocss.com)
* Copyright 2019-2024 - Licensed under MIT
*/

49
assets/pico/scss/helpers/_functions.scss Normal file
View file

@ -0,0 +1,49 @@
// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
}
// Generate a shadow layer
@function shadow-layer($elevation, $blur, $opacity, $color) {
@return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
}
// Generate a shadow with 7 layers
@function shadow($color) {
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
@return shadow-layer(
$box-shadow-elevation * 0.029,
$box-shadow-blur-strengh * 0.029,
$box-shadow-opacity * 0.283,
$color
),
shadow-layer(
$box-shadow-elevation * 0.067,
$box-shadow-blur-strengh * 0.067,
$box-shadow-opacity * 0.4,
$color
),
shadow-layer(
$box-shadow-elevation * 0.125,
$box-shadow-blur-strengh * 0.125,
$box-shadow-opacity * 0.5,
$color
),
shadow-layer(
$box-shadow-elevation * 0.225,
$box-shadow-blur-strengh * 0.225,
$box-shadow-opacity * 0.6,
$color
),
shadow-layer(
$box-shadow-elevation * 0.417,
$box-shadow-blur-strengh * 0.417,
$box-shadow-opacity * 0.717,
$color
),
shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color),
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
}

33
assets/pico/scss/layout/_container.scss Normal file
View file

@ -0,0 +1,33 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/container") and $enable-classes {
/**
* Container
*/
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(#{$css-var-prefix}spacing);
padding-left: var(#{$css-var-prefix}spacing);
}
.container {
$first-breakpoint: true;
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}

52
assets/pico/scss/layout/_document.scss Normal file
View file

@ -0,0 +1,52 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/document") {
/**
* Document
* Content-box & Responsive typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add border box sizing in all browsers (opinionated)
// 2. Backgrounds do not repeat by default (opinionated)
*,
*::before,
*::after {
box-sizing: border-box; // 1
background-repeat: no-repeat; // 2
}
// 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Add vertical alignment inheritance in all browsers (opinionated)
::before,
::after {
text-decoration: inherit; // 1
vertical-align: inherit; // 2
}
// 1. Change the line height in all browsers (opinionated)
// 2. Breaks words to prevent overflow in all browsers (opinionated)
// 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root) {
-webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5
background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); // 1
font-family: var(#{$css-var-prefix}font-family);
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 2
tab-size: 4; // 3
}
}

26
assets/pico/scss/layout/_grid.scss Normal file
View file

@ -0,0 +1,26 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/grid") and $enable-classes {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
display: grid;
grid-template-columns: 1fr;
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for childs in overflow
}
}
}

62
assets/pico/scss/layout/_landmarks.scss Normal file
View file

@ -0,0 +1,62 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/landmarks") {
/**
* Landmarks
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Remove the margin in all browsers (opinionated)
body {
width: 100%;
margin: 0; // 1
}
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} #{$semantic-root-element} {
> header,
> main,
> footer {
// <header>, <main>, <footer> as containers
@if $enable-semantic-container {
$first-breakpoint: true;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
@if $enable-viewport {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}
// Regular vertical spacings for <header>, <main>, <footer>
@else {
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
}
}
}
}

12
assets/pico/scss/layout/_overflow-auto.scss Normal file
View file

@ -0,0 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/overflow-auto") and $enable-classes {
/**
* Overflow auto
*/
#{$parent-selector} .overflow-auto {
overflow: auto;
}
}

12
assets/pico/scss/layout/_section.scss Normal file
View file

@ -0,0 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/section") {
/**
* Section
*/
#{$parent-selector} section {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
}
}

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

@ -0,0 +1,5 @@
// Pico classless version
@use "index" with (
$enable-semantic-container: true,
$enable-classes: false
);

2
assets/pico/scss/pico.colors.scss Normal file
View file

@ -0,0 +1,2 @@
@use "helpers/copyright";
@use "colors/utilities";

4
assets/pico/scss/pico.conditional.scss Normal file
View file

@ -0,0 +1,4 @@
// Pico conditional version
@use "index" with (
$parent-selector: ".pico"
);

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

@ -0,0 +1,6 @@
// Pico classless version
@use "index" with (
$enable-semantic-container: true,
$enable-viewport: false,
$enable-classes: false
);

2
assets/pico/scss/pico.scss Normal file
View file

@ -0,0 +1,2 @@
@forward "settings";
@use "index";

9
assets/pico/scss/postcss.config.js Normal file
View file

@ -0,0 +1,9 @@
module.exports = {
syntax: "postcss-scss",
map: false,
plugins: {
"css-declaration-sorter": {
order: "smacss"
}
}
}

5
assets/pico/scss/themes/_default.scss Normal file
View file

@ -0,0 +1,5 @@
// Styles
@use "default/styles";
// Colors schemes
@use "default/schemes";

248
assets/pico/scss/themes/default/_dark.scss Normal file
View file

@ -0,0 +1,248 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@use "theme-colors";
// Default: Dark theme
@mixin theme {
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
// Text color
#{$css-var-prefix}color: #{$zinc-200};
// Text selection color
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
// Muted colors
#{$css-var-prefix}muted-color: #{$zinc-450};
#{$css-var-prefix}muted-border-color: #{$slate-850};
// Primary colors
#{$css-var-prefix}primary: theme-colors.get("primary", "dark");
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
#{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
// Secondary colors
#{$css-var-prefix}secondary: #{$zinc-350};
#{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$css-var-prefix}secondary-hover: #{$zinc-250};
#{$css-var-prefix}secondary-hover-background: #{$slate-550};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors
#{$css-var-prefix}contrast: #{$slate-100};
#{$css-var-prefix}contrast-background: #{$slate-50};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
#{$css-var-prefix}contrast-hover: #{$white};
#{$css-var-prefix}contrast-hover-background: #{$white};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$black};
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$css-var-prefix}h1-color: #{$zinc-50};
#{$css-var-prefix}h2-color: #{$zinc-100};
#{$css-var-prefix}h3-color: #{$zinc-200};
#{$css-var-prefix}h4-color: #{$zinc-250};
#{$css-var-prefix}h5-color: #{$zinc-300};
#{$css-var-prefix}h6-color: #{$zinc-400};
// Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{$azure-750};
#{$css-var-prefix}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
}
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-color: #{$zinc-400};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
#{$css-var-prefix}form-element-border-color: #{$slate-800};
#{$css-var-prefix}form-element-color: #{$zinc-100};
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
#{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-750};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-850};
#{$css-var-prefix}range-active-border-color: #{$slate-800};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
}
// Card (<article>)
@if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: #{$slate-900};
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$slate-900};
#{$css-var-prefix}dropdown-border-color: #{$slate-850};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-850};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}
// Chevron icons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
// Change the icon color to black for accordion and dropdown .contrast buttons
@if $enable-classes {
#{$parent-selector} details {
summary {
&[role="button"].contrast:not(.outline) {
&::after {
filter: brightness(0);
}
}
}
}
}
}
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: 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='#{functions.display-rgb(mix($jade-450, $slate-600))}' 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");
#{$css-var-prefix}icon-invalid: 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='#{functions.display-rgb(mix($red-500, $slate-600))}' 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");
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to black for .contrast buttons
@if $enable-classes {
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
&.contrast:is(
button,
[type="submit"],
[type="button"],
[type="reset"],
[role="button"]
):not(.outline) {
&::before {
filter: brightness(0);
}
}
}
}
}
// Document
color-scheme: dark;
}

212
assets/pico/scss/themes/default/_light.scss Normal file
View file

@ -0,0 +1,212 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@use "theme-colors";
// Default: Light theme
@mixin theme {
#{$css-var-prefix}background-color: #{$white};
// Text color
#{$css-var-prefix}color: #{$zinc-750};
// Text selection color
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light");
// Muted colors
#{$css-var-prefix}muted-color: #{$zinc-550};
#{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
// Primary colors
#{$css-var-prefix}primary: theme-colors.get("primary", "light");
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light");
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light");
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light");
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light");
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light");
#{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light");
// Secondary colors
#{$css-var-prefix}secondary: #{$slate-550};
#{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
#{$css-var-prefix}secondary-hover: #{$slate-650};
#{$css-var-prefix}secondary-hover-background: #{$slate-650};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors
#{$css-var-prefix}contrast: #{$slate-900};
#{$css-var-prefix}contrast-background: #{$slate-900};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
#{$css-var-prefix}contrast-hover: #{$black};
#{$css-var-prefix}contrast-hover-background: #{$black};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$white};
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow($slate-400);
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$css-var-prefix}h1-color: #{$zinc-800};
#{$css-var-prefix}h2-color: #{$zinc-750};
#{$css-var-prefix}h3-color: #{$zinc-700};
#{$css-var-prefix}h4-color: #{$zinc-650};
#{$css-var-prefix}h5-color: #{$zinc-600};
#{$css-var-prefix}h6-color: #{$zinc-550};
// Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
#{$css-var-prefix}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
}
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
#{$css-var-prefix}code-color: #{$zinc-550};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
#{$css-var-prefix}form-element-border-color: #{$slate-150};
#{$css-var-prefix}form-element-color: #{$zinc-850};
#{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
#{$css-var-prefix}form-element-active-background-color: #{$white};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-200};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-100};
#{$css-var-prefix}range-active-border-color: #{$slate-200};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
}
// Card (<article>)
@if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$white};
#{$css-var-prefix}dropdown-border-color: #{$slate-50};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-100};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: 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='#{functions.display-rgb(mix($jade-450, $zinc-350))}' 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");
#{$css-var-prefix}icon-invalid: 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='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' 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");
}
// Document
color-scheme: light;
}

39
assets/pico/scss/themes/default/_schemes.scss Normal file
View file

@ -0,0 +1,39 @@
@use "sass:map";
@use "../../settings" as *;
@use "light";
@use "dark";
@if map.get($modules, "themes/default") {
/**
* Color schemes
*/
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
@include dark.theme;
}
}
// Dark color scheme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark.theme;
}
#{$parent-selector} progress,
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="range"] {
accent-color: var(#{$css-var-prefix}primary);
}
}

433
assets/pico/scss/themes/default/_styles.scss Normal file
View file

@ -0,0 +1,433 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@use "theme-colors";
@if map.get($modules, "themes/default") {
/**
* Styles
*/
:root {
// Typography
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
#{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu,
Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
#{$css-var-prefix}line-height: 1.5;
#{$css-var-prefix}font-weight: 400;
#{$css-var-prefix}font-size: 100%;
#{$css-var-prefix}text-underline-offset: 0.1rem;
// Responsive root font size
@if $enable-responsive-typography {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
#{$css-var-prefix}font-size: map.get($values, "root-font-size");
}
}
}
}
// Borders
#{$css-var-prefix}border-radius: 0.25rem;
#{$css-var-prefix}border-width: 0.0625rem;
#{$css-var-prefix}outline-width: 0.125rem;
// Transitions
#{$css-var-prefix}transition: 0.2s ease-in-out;
// Spacings
#{$css-var-prefix}spacing: 1rem;
// Spacings for typography elements
@if map.get($modules, "content/typography") {
#{$css-var-prefix}typography-spacing-vertical: 1rem;
}
// Spacings for body > header, body > main, body > footer, section, article
@if map.get($modules, "layout/landmarks") or
map.get($modules, "layout/section") or
map.get($modules, "components/card") or
map.get($modules, "components/modal")
{
#{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
#{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
}
@if map.get($modules, "layout/grid") and $enable-classes {
#{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
#{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
}
// Spacings for form elements and button
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
#{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
#{$css-var-prefix}form-element-spacing-horizontal: 1rem;
}
// Font weight for form labels & fieldsets legend
@if map.get($modules, "forms/basic") {
#{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
}
// Group (role="group")
@if map.get($modules, "components/group") {
#{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus);
#{$css-var-prefix}group-box-shadow-focus-with-input: 0
0
0
0.0625rem
var(#{$css-var-prefix}form-element-border-color);
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
}
// Spacings for nav component
@if map.get($modules, "components/nav") {
#{$css-var-prefix}nav-element-spacing-vertical: 1rem;
#{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
#{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-breadcrumb-divider: ">";
}
// Checkboxes icons
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}icon-checkbox: 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='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-minus: 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='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
// Chevron icons
@if map.get($modules, "forms/basics") or
map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown")
{
#{$css-var-prefix}icon-chevron: 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='#{functions.display-rgb($zinc-400)}' 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");
}
// Datetime icons
@if map.get($modules, "forms/input-date") {
#{$css-var-prefix}icon-date: 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='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
#{$css-var-prefix}icon-time: 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='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
// Search icon
@if map.get($modules, "forms/input-search") {
#{$css-var-prefix}icon-search: 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='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}
// Close icon
@if map.get($modules, "components/modal") {
#{$css-var-prefix}icon-close: 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='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo
#{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
}
}
// Responsives spacings
@if $enable-responsive-spacings {
// Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
#{$semantic-root-element} > header,
#{$semantic-root-element} > main,
#{$semantic-root-element} > footer,
section {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key == "sm" {
$multiplier: 1.25;
} @else if $key == "md" {
$multiplier: 1.5;
} @else if $key == "lg" {
$multiplier: 1.75;
} @else if $key == "xl" {
$multiplier: 2;
} @else if $key == "xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
}
}
}
}
}
// Card (<article>)
@if map.get($modules, "components/card") {
article {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key == "sm" {
$multiplier: 1.25;
} @else if $key == "md" {
$multiplier: 1.5;
} @else if $key == "lg" {
$multiplier: 1.75;
} @else if $key == "xl" {
$multiplier: 2;
} @else if $key == "xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
#{$css-var-prefix}block-spacing-horizontal: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
}
}
}
}
}
}
// Link
@if map.get($modules, "content/link") {
a {
#{$css-var-prefix}text-decoration: underline;
// Secondary & Contrast
@if $enable-classes {
&.secondary,
&.contrast {
#{$css-var-prefix}text-decoration: underline;
}
}
}
}
// Typography
@if map.get($modules, "content/typography") {
// Small
small {
#{$css-var-prefix}font-size: 0.875em;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
#{$css-var-prefix}font-weight: 700;
}
h1 {
#{$css-var-prefix}font-size: 2rem;
#{$css-var-prefix}line-height: 1.125;
#{$css-var-prefix}typography-spacing-top: 3rem;
}
h2 {
#{$css-var-prefix}font-size: 1.75rem;
#{$css-var-prefix}line-height: 1.15;
#{$css-var-prefix}typography-spacing-top: 2.625rem;
}
h3 {
#{$css-var-prefix}font-size: 1.5rem;
#{$css-var-prefix}line-height: 1.175;
#{$css-var-prefix}typography-spacing-top: 2.25rem;
}
h4 {
#{$css-var-prefix}font-size: 1.25rem;
#{$css-var-prefix}line-height: 1.2;
#{$css-var-prefix}typography-spacing-top: 1.874rem;
}
h5 {
#{$css-var-prefix}font-size: 1.125rem;
#{$css-var-prefix}line-height: 1.225;
#{$css-var-prefix}typography-spacing-top: 1.6875rem;
}
h6 {
#{$css-var-prefix}font-size: 1rem;
#{$css-var-prefix}line-height: 1.25;
#{$css-var-prefix}typography-spacing-top: 1.5rem;
}
}
// Table
@if map.get($modules, "content/table") {
thead,
tfoot {
th,
td {
#{$css-var-prefix}font-weight: 600;
#{$css-var-prefix}border-width: 0.1875rem;
}
}
}
// Code
@if map.get($modules, "content/code") {
pre,
code,
kbd,
samp {
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
}
kbd {
#{$css-var-prefix}font-weight: bolder;
}
}
// Inputs and Selects
input:not(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
),
:where(select, textarea) {
#{$css-var-prefix}outline-width: 0.0625rem;
}
[type="search"] {
#{$css-var-prefix}border-radius: 5rem;
}
// Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"],
[type="radio"] {
#{$css-var-prefix}border-width: 0.125rem;
}
[type="checkbox"][role="switch"] {
#{$css-var-prefix}border-width: 0.1875rem;
}
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
details.dropdown {
summary:not([role="button"]) {
#{$css-var-prefix}outline-width: 0.0625rem;
}
}
nav {
details.dropdown {
summary:focus-visible {
#{$css-var-prefix}outline-width: 0.125rem;
}
}
}
}
// Group (role="group")
@if map.get($modules, "components/group") {
[role="search"] {
#{$css-var-prefix}border-radius: 5rem;
}
[role="search"],
[role="group"] {
@if $enable-classes {
&:has(
button.secondary:focus,
[type="submit"].secondary:focus,
[type="button"].secondary:focus,
[role="button"].secondary:focus
) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}secondary-focus);
}
&:has(
button.contrast:focus,
[type="submit"].contrast:focus,
[type="button"].contrast:focus,
[role="button"].contrast:focus
) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}contrast-focus);
}
}
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$css-var-prefix}form-element-spacing-horizontal: 2rem;
}
}
}
// Chevron icons
// Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$parent-selector} details {
summary {
$selector: '&[role="button"]';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::after {
filter: brightness(0) invert(1);
}
}
}
}
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
@if theme-colors.get("primary-inverse", "dark") == $white {
filter: brightness(0) invert(1);
} @else {
filter: brightness(0) invert(0);
}
}
}
}
}
}

490
assets/pico/scss/themes/default/_theme-colors.scss Normal file
View file

@ -0,0 +1,490 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
$color-mappings: (
"amber": (
"dark": (
"text-selection-color": rgba($amber-350, 0.1875),
"primary": $amber-350,
"primary-background": $amber-200,
"primary-underline": rgba($amber-350, 0.5),
"primary-hover": $amber-250,
"primary-hover-background": $amber-150,
"primary-focus": rgba($amber-350, 0.375),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"light": (
"text-selection-color": rgba($amber-400, 0.25),
"primary": $amber-550,
"primary-background": $amber-200,
"primary-underline": rgba($amber-550, 0.5),
"primary-hover": $amber-650,
"primary-hover-background": $amber-250,
"primary-focus": rgba($amber-400, 0.5),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"azure": (
"dark": (
"text-selection-color": rgba($azure-350, 0.1875),
"primary": $azure-350,
"primary-background": $azure-550,
"primary-underline": rgba($azure-350, 0.5),
"primary-hover": $azure-250,
"primary-hover-background": $azure-500,
"primary-focus": rgba($azure-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($azure-400, 0.25),
"primary": $azure-550,
"primary-background": $azure-550,
"primary-underline": rgba($azure-550, 0.5),
"primary-hover": $azure-650,
"primary-hover-background": $azure-600,
"primary-focus": rgba($azure-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"blue": (
"dark": (
"text-selection-color": rgba($blue-350, 0.1875),
"primary": $blue-350,
"primary-background": $blue-550,
"primary-underline": rgba($blue-350, 0.5),
"primary-hover": $blue-250,
"primary-hover-background": $blue-500,
"primary-focus": rgba($blue-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($blue-400, 0.25),
"primary": $blue-550,
"primary-background": $blue-550,
"primary-underline": rgba($blue-550, 0.5),
"primary-hover": $blue-650,
"primary-hover-background": $blue-600,
"primary-focus": rgba($blue-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"cyan": (
"dark": (
"text-selection-color": rgba($cyan-350, 0.1875),
"primary": $cyan-350,
"primary-background": $cyan-550,
"primary-underline": rgba($cyan-350, 0.5),
"primary-hover": $cyan-250,
"primary-hover-background": $cyan-500,
"primary-focus": rgba($cyan-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($cyan-400, 0.25),
"primary": $cyan-550,
"primary-background": $cyan-550,
"primary-underline": rgba($cyan-550, 0.5),
"primary-hover": $cyan-650,
"primary-hover-background": $cyan-600,
"primary-focus": rgba($cyan-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"fuchsia": (
"dark": (
"text-selection-color": rgba($fuchsia-350, 0.1875),
"primary": $fuchsia-350,
"primary-background": $fuchsia-550,
"primary-underline": rgba($fuchsia-350, 0.5),
"primary-hover": $fuchsia-250,
"primary-hover-background": $fuchsia-500,
"primary-focus": rgba($fuchsia-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($fuchsia-400, 0.25),
"primary": $fuchsia-550,
"primary-background": $fuchsia-550,
"primary-underline": rgba($fuchsia-550, 0.5),
"primary-hover": $fuchsia-650,
"primary-hover-background": $fuchsia-600,
"primary-focus": rgba($fuchsia-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"green": (
"dark": (
"text-selection-color": rgba($green-350, 0.1875),
"primary": $green-350,
"primary-background": $green-500,
"primary-underline": rgba($green-350, 0.5),
"primary-hover": $green-250,
"primary-hover-background": $green-450,
"primary-focus": rgba($green-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($green-400, 0.25),
"primary": $green-550,
"primary-background": $green-500,
"primary-underline": rgba($green-550, 0.5),
"primary-hover": $green-650,
"primary-hover-background": $green-550,
"primary-focus": rgba($green-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"grey": (
"dark": (
"text-selection-color": rgba($grey-350, 0.1875),
"primary": $grey-350,
"primary-background": $grey-300,
"primary-underline": rgba($grey-350, 0.5),
"primary-hover": $grey-250,
"primary-hover-background": $grey-250,
"primary-focus": rgba($grey-350, 0.375),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"light": (
"text-selection-color": rgba($grey-400, 0.25),
"primary": $grey-550,
"primary-background": $grey-300,
"primary-underline": rgba($grey-550, 0.5),
"primary-hover": $grey-650,
"primary-hover-background": $grey-350,
"primary-focus": rgba($grey-400, 0.5),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"indigo": (
"dark": (
"text-selection-color": rgba($indigo-350, 0.1875),
"primary": $indigo-350,
"primary-background": $indigo-600,
"primary-underline": rgba($indigo-350, 0.5),
"primary-hover": $indigo-250,
"primary-hover-background": $indigo-550,
"primary-focus": rgba($indigo-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($indigo-400, 0.25),
"primary": $indigo-550,
"primary-background": $indigo-600,
"primary-underline": rgba($indigo-550, 0.5),
"primary-hover": $indigo-650,
"primary-hover-background": $indigo-650,
"primary-focus": rgba($indigo-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"jade": (
"dark": (
"text-selection-color": rgba($jade-350, 0.1875),
"primary": $jade-350,
"primary-background": $jade-550,
"primary-underline": rgba($jade-350, 0.5),
"primary-hover": $jade-250,
"primary-hover-background": $jade-500,
"primary-focus": rgba($jade-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($jade-400, 0.25),
"primary": $jade-550,
"primary-background": $jade-550,
"primary-underline": rgba($jade-550, 0.5),
"primary-hover": $jade-650,
"primary-hover-background": $jade-600,
"primary-focus": rgba($jade-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"lime": (
"dark": (
"text-selection-color": rgba($lime-350, 0.1875),
"primary": $lime-350,
"primary-background": $lime-200,
"primary-underline": rgba($lime-350, 0.5),
"primary-hover": $lime-250,
"primary-hover-background": $lime-150,
"primary-focus": rgba($lime-350, 0.375),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"light": (
"text-selection-color": rgba($lime-400, 0.25),
"primary": $lime-550,
"primary-background": $lime-200,
"primary-underline": rgba($lime-550, 0.5),
"primary-hover": $lime-650,
"primary-hover-background": $lime-250,
"primary-focus": rgba($lime-400, 0.5),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"orange": (
"dark": (
"text-selection-color": rgba($orange-350, 0.1875),
"primary": $orange-350,
"primary-background": $orange-500,
"primary-underline": rgba($orange-350, 0.5),
"primary-hover": $orange-250,
"primary-hover-background": $orange-450,
"primary-focus": rgba($orange-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($orange-400, 0.25),
"primary": $orange-550,
"primary-background": $orange-500,
"primary-underline": rgba($orange-550, 0.5),
"primary-hover": $orange-650,
"primary-hover-background": $orange-550,
"primary-focus": rgba($orange-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"pink": (
"dark": (
"text-selection-color": rgba($pink-350, 0.1875),
"primary": $pink-350,
"primary-background": $pink-500,
"primary-underline": rgba($pink-350, 0.5),
"primary-hover": $pink-250,
"primary-hover-background": $pink-450,
"primary-focus": rgba($pink-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($pink-400, 0.25),
"primary": $pink-550,
"primary-background": $pink-500,
"primary-underline": rgba($pink-550, 0.5),
"primary-hover": $pink-650,
"primary-hover-background": $pink-550,
"primary-focus": rgba($pink-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"pumpkin": (
"dark": (
"text-selection-color": rgba($pumpkin-350, 0.1875),
"primary": $pumpkin-350,
"primary-background": $pumpkin-300,
"primary-underline": rgba($pumpkin-350, 0.5),
"primary-hover": $pumpkin-250,
"primary-hover-background": $pumpkin-250,
"primary-focus": rgba($pumpkin-350, 0.375),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"light": (
"text-selection-color": rgba($pumpkin-400, 0.25),
"primary": $pumpkin-550,
"primary-background": $pumpkin-300,
"primary-underline": rgba($pumpkin-550, 0.5),
"primary-hover": $pumpkin-650,
"primary-hover-background": $pumpkin-350,
"primary-focus": rgba($pumpkin-400, 0.5),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"purple": (
"dark": (
"text-selection-color": rgba($purple-350, 0.1875),
"primary": $purple-350,
"primary-background": $purple-600,
"primary-underline": rgba($purple-350, 0.5),
"primary-hover": $purple-250,
"primary-hover-background": $purple-550,
"primary-focus": rgba($purple-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($purple-400, 0.25),
"primary": $purple-550,
"primary-background": $purple-600,
"primary-underline": rgba($purple-550, 0.5),
"primary-hover": $purple-650,
"primary-hover-background": $purple-650,
"primary-focus": rgba($purple-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"red": (
"dark": (
"text-selection-color": rgba($red-350, 0.1875),
"primary": $red-350,
"primary-background": $red-550,
"primary-underline": rgba($red-350, 0.5),
"primary-hover": $red-250,
"primary-hover-background": $red-500,
"primary-focus": rgba($red-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($red-400, 0.25),
"primary": $red-550,
"primary-background": $red-550,
"primary-underline": rgba($red-550, 0.5),
"primary-hover": $red-650,
"primary-hover-background": $red-600,
"primary-focus": rgba($red-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"sand": (
"dark": (
"text-selection-color": rgba($sand-350, 0.1875),
"primary": $sand-350,
"primary-background": $sand-200,
"primary-underline": rgba($sand-350, 0.5),
"primary-hover": $sand-250,
"primary-hover-background": $sand-150,
"primary-focus": rgba($sand-350, 0.375),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"light": (
"text-selection-color": rgba($sand-400, 0.25),
"primary": $sand-550,
"primary-background": $sand-200,
"primary-underline": rgba($sand-550, 0.5),
"primary-hover": $sand-650,
"primary-hover-background": $sand-250,
"primary-focus": rgba($sand-400, 0.5),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"slate": (
"dark": (
"text-selection-color": rgba($slate-350, 0.1875),
"primary": $slate-350,
"primary-background": $slate-600,
"primary-underline": rgba($slate-350, 0.5),
"primary-hover": $slate-250,
"primary-hover-background": $slate-550,
"primary-focus": rgba($slate-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($slate-400, 0.25),
"primary": $slate-550,
"primary-background": $slate-600,
"primary-underline": rgba($slate-550, 0.5),
"primary-hover": $slate-650,
"primary-hover-background": $slate-650,
"primary-focus": rgba($slate-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"violet": (
"dark": (
"text-selection-color": rgba($violet-350, 0.1875),
"primary": $violet-350,
"primary-background": $violet-600,
"primary-underline": rgba($violet-350, 0.5),
"primary-hover": $violet-250,
"primary-hover-background": $violet-550,
"primary-focus": rgba($violet-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($violet-400, 0.25),
"primary": $violet-550,
"primary-background": $violet-600,
"primary-underline": rgba($violet-550, 0.5),
"primary-hover": $violet-650,
"primary-hover-background": $violet-650,
"primary-focus": rgba($violet-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"yellow": (
"dark": (
"text-selection-color": rgba($yellow-350, 0.1875),
"primary": $yellow-350,
"primary-background": $yellow-100,
"primary-underline": rgba($yellow-350, 0.5),
"primary-hover": $yellow-250,
"primary-hover-background": mix($yellow-100, $yellow-50),
"primary-focus": rgba($yellow-350, 0.375),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"light": (
"text-selection-color": rgba($yellow-400, 0.25),
"primary": $yellow-550,
"primary-background": $yellow-100,
"primary-underline": rgba($yellow-550, 0.5),
"primary-hover": $yellow-650,
"primary-hover-background": $yellow-150,
"primary-focus": rgba($yellow-400, 0.5),
"primary-inverse": $black,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"zinc": (
"dark": (
"text-selection-color": rgba($zinc-350, 0.1875),
"primary": $zinc-350,
"primary-background": $zinc-550,
"primary-underline": rgba($zinc-350, 0.5),
"primary-hover": $zinc-250,
"primary-hover-background": $zinc-500,
"primary-focus": rgba($zinc-350, 0.375),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"light": (
"text-selection-color": rgba($zinc-400, 0.25),
"primary": $zinc-550,
"primary-background": $zinc-550,
"primary-underline": rgba($zinc-550, 0.5),
"primary-hover": $zinc-650,
"primary-hover-background": $zinc-600,
"primary-focus": rgba($zinc-400, 0.5),
"primary-inverse": $white,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
);
@function get($key, $mode: "light") {
@return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
}

57
assets/pico/scss/utilities/_accessibility.scss Normal file
View file

@ -0,0 +1,57 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "utilities/accessibility") {
/**
* Accessibility & User interaction
*/
// Based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Accessibility
// Change the cursor on control elements in all browsers (opinionated)
#{$parent-selector} [aria-controls] {
cursor: pointer;
}
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
#{$parent-selector} [aria-disabled="true"],
#{$parent-selector} [disabled] {
cursor: not-allowed;
}
// Change the display on visually hidden accessible elements in all browsers (opinionated)
#{$parent-selector} [aria-hidden="false"][hidden] {
display: initial;
}
#{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
// User interaction
// Remove the tapping delay in IE 10
#{$parent-selector} a,
#{$parent-selector} area,
#{$parent-selector} button,
#{$parent-selector} input,
#{$parent-selector} label,
#{$parent-selector} select,
#{$parent-selector} summary,
#{$parent-selector} textarea,
#{$parent-selector} [tabindex] {
-ms-touch-action: manipulation;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} [dir="rtl"] {
direction: rtl;
}
}

30
assets/pico/scss/utilities/_reduce-motion.scss Normal file
View file

@ -0,0 +1,30 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
/**
* Reduce Motion Features
*/
// Based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Remove animations when motion is reduced (opinionated)
// 2. Remove fixed background attachments when motion is reduced (opinionated)
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
// 4. Remove transitions when motion is reduced (opinionated)
@media (prefers-reduced-motion: reduce) {
#{$parent-selector} *:not([aria-busy="true"]),
#{$parent-selector} :not([aria-busy="true"])::before,
#{$parent-selector} :not([aria-busy="true"])::after {
background-attachment: initial !important; // 2
animation-duration: 1ms !important; // 1
animation-delay: -1ms !important; // 1
animation-iteration-count: 1 !important; // 1
scroll-behavior: auto !important; // 3
transition-delay: 0s !important; // 4
transition-duration: 0s !important; // 4
}
}
}