| 1 |
// Pico Lib |
| 2 |
// https://picocss.com |
| 3 |
|
| 4 |
// Set the root element |
| 5 |
// thi |
| 6 |
//$semantic-root-element: "#root-givewp-donation-form"; |
| 7 |
|
| 8 |
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers |
| 9 |
$enable-semantic-container: true; |
| 10 |
|
| 11 |
// Enable .classes |
| 12 |
$enable-classes: true; |
| 13 |
$enable-important: false; |
| 14 |
|
| 15 |
// Config |
| 16 |
@import "@picocss/pico/scss/variables"; |
| 17 |
|
| 18 |
/** |
| 19 |
* Theme: default - hand-pick imports from default theme. |
| 20 |
* Only support light theme for now. |
| 21 |
*/ |
| 22 |
|
| 23 |
// Theming |
| 24 |
//@import "@picocss/pico/scss/themes/default"; |
| 25 |
|
| 26 |
// Variables |
| 27 |
@import "@picocss/pico/scss/themes/default/colors"; |
| 28 |
|
| 29 |
// Commons styles |
| 30 |
@import "@picocss/pico/scss/themes/default/styles"; |
| 31 |
|
| 32 |
// Light theme (Default) |
| 33 |
// Can be forced with data-theme="light" |
| 34 |
@import "@picocss/pico/scss/themes/default/light"; |
| 35 |
|
| 36 |
// Layout |
| 37 |
@import "@picocss/pico/scss/layout/document"; // html |
| 38 |
@import "@picocss/pico/scss/layout/sectioning"; // body, header, main, footer |
| 39 |
@import "@picocss/pico/scss/layout/container"; // .container, .container-fluid |
| 40 |
@import "@picocss/pico/scss/layout/section"; // section |
| 41 |
@import "@picocss/pico/scss/layout/grid"; // .grid |
| 42 |
@import "@picocss/pico/scss/layout/scroller"; // figure |
| 43 |
|
| 44 |
// Content |
| 45 |
@import "@picocss/pico/scss/content/typography"; // a, headings, p, ul, blockquote, ... |
| 46 |
@import "@picocss/pico/scss/content/embedded"; // audio, canvas, iframe, img, svg, video |
| 47 |
@import "@picocss/pico/scss/content/button"; // button, a[role=button], type=button, type=submit ... |
| 48 |
@import "@picocss/pico/scss/content/form"; // input, select, textarea, label, fieldset, legend |
| 49 |
@import "@picocss/pico/scss/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ... |
| 50 |
@import "@picocss/pico/scss/content/table"; // table, tr, td, ... |
| 51 |
@import "@picocss/pico/scss/content/code"; // pre, code, ... |
| 52 |
@import "@picocss/pico/scss/content/miscs"; // hr, template, [hidden], dialog, canvas |
| 53 |
|
| 54 |
// Components |
| 55 |
@import "@picocss/pico/scss/components/accordion"; // details, summary |
| 56 |
//@import "@picocss/pico/scss/components/card"; // article |
| 57 |
@import "@picocss/pico/scss/components/modal"; // dialog |
| 58 |
@import "@picocss/pico/scss/components/nav"; // nav |
| 59 |
@import "@picocss/pico/scss/components/progress"; // progress |
| 60 |
@import "@picocss/pico/scss/components/dropdown"; // dropdown |
| 61 |
|
| 62 |
// Utilities |
| 63 |
@import "@picocss/pico/scss/utilities/loading"; // aria-busy=true |
| 64 |
@import "@picocss/pico/scss/utilities/tooltip"; // data-tooltip |
| 65 |
@import "@picocss/pico/scss/utilities/accessibility"; // -ms-touch-action, aria-* |
| 66 |
@import "@picocss/pico/scss/utilities/reduce-motion"; // prefers-reduced-motion |
| 67 |
|
| 68 |
label { |
| 69 |
color: var(--color); |
| 70 |
} |
| 71 |
|
| 72 |
// Accent-color |
| 73 |
[type="checkbox"]="checkbox""], |
| 74 |
[type="radio"]="radio""], |
| 75 |
[type="range"]="range""] { |
| 76 |
accent-color: var(--primary); |
| 77 |
} |
| 78 |
|
| 79 |
a:focus, [role=link]=link]:focus { |
| 80 |
--background-color: transparent; |
| 81 |
} |
| 82 |
|
| 83 |
form { |
| 84 |
margin: 0; |
| 85 |
} |
| 86 |
|
| 87 |
ul li { |
| 88 |
list-style: disc; |
| 89 |
} |
| 90 |
|
| 91 |
// selection |
| 92 |
::selection { |
| 93 |
background-color: #B3D4FC; /* light blue */ |
| 94 |
color: black; |
| 95 |
} |
| 96 |
|
