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

Merge branch 'dev' into pr/596

Browse source
This commit is contained in:
Lucas Larroche 2025-03-09 20:09:48 +07:00
commit e66b84b53e
21 changed files with 1045 additions and 649 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scss/_index.scss
View file

@ -22,7 +22,7 @@
@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
@use "content/misc"; // hr, template, [hidden], dialog, canvas
// Forms
@use "forms/basics"; // input, select, textarea, label, fieldset, legend

17
scss/_settings.scss
View file

@ -49,8 +49,7 @@ $breakpoints: map.deep-merge(
(
// Small (landscape phones)
// Font size: 17px
sm:
(
sm: (
breakpoint: 576px,
viewport: 510px,
root-font-size: 106.25%,
@ -58,8 +57,7 @@ $breakpoints: map.deep-merge(
// Medium (tablets)
// Font size: 18px
md:
(
md: (
breakpoint: 768px,
viewport: 700px,
root-font-size: 112.5%,
@ -67,8 +65,7 @@ $breakpoints: map.deep-merge(
// Large
// Font size: 19px
lg:
(
lg: (
breakpoint: 1024px,
viewport: 950px,
root-font-size: 118.75%,
@ -76,8 +73,7 @@ $breakpoints: map.deep-merge(
// Extra large
// Font size: 20px
xl:
(
xl: (
breakpoint: 1280px,
viewport: 1200px,
root-font-size: 125%,
@ -85,8 +81,7 @@ $breakpoints: map.deep-merge(
// Extra extra large
// Font size: 21px
xxl:
(
xxl: (
breakpoint: 1536px,
viewport: 1450px,
root-font-size: 131.25%,
@ -118,7 +113,7 @@ $modules: map.merge(
"content/table": true,
"content/code": true,
"content/figure": true,
"content/miscs": true,
"content/misc": true,
// Forms
"forms/basics": true,

3
scss/colors/utilities/_css-vars.scss
View file

@ -9,7 +9,8 @@
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars {
:root {
:root,
:host {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {

6
scss/colors/utilities/_settings.scss
View file

@ -10,8 +10,7 @@ $palette: () !default;
$palette: map.merge(
(
// Color families
"color-families":
(
"color-families": (
red,
pink,
fuchsia,
@ -34,8 +33,7 @@ $palette: map.merge(
slate
),
// Shades
"shades":
(
"shades": (
50,
100,
150,

16
scss/components/_dropdown.scss
View file

@ -14,7 +14,7 @@
// Marker
// ––––––––––––––––––––
summary,
> summary,
> button,
> a {
&::after {
@ -43,10 +43,10 @@
margin-bottom: 0;
}
// Bouton as a select
// Button as a select
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown summary:not([role]) {
#{$parent-selector} details.dropdown > summary:not([role]) {
height: calc(
1rem *
var(#{$css-var-prefix}line-height) +
@ -126,7 +126,7 @@
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
summary {
> summary {
&::after {
transform: rotate(0deg) translateX(0rem);
}
@ -156,7 +156,7 @@
// Submenu
// ––––––––––––––––––––
#{$parent-selector} details.dropdown summary + ul {
#{$parent-selector} details.dropdown > summary + ul {
display: flex;
z-index: 99;
position: absolute;
@ -236,14 +236,14 @@
// Button opened
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
#{$parent-selector} details.dropdown[open] > summary {
margin-bottom: 0;
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
#{$parent-selector} details.dropdown[open] summary {
#{$parent-selector} details.dropdown[open] > summary {
+ ul {
transform: scaleY(1);
opacity: 1;
@ -259,7 +259,7 @@
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
#{$parent-selector} details.dropdown[open] > summary {
&::before {
display: block;
z-index: 1;

2
scss/components/_loading.scss
View file

@ -7,7 +7,7 @@
*/
// Everything except form elements
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
white-space: nowrap;
&::before {

5
scss/components/_modal.scss
View file

@ -6,7 +6,8 @@
* Modal (<dialog>)
*/
:root {
:root,
:host {
#{$css-var-prefix}scrollbar-width: 0px;
}
@ -31,7 +32,7 @@
color: var(#{$css-var-prefix}color);
// Content
article {
> article {
$close-selector: if(
$enable-classes,
".close, :is(a, button)[rel=prev]",

12
scss/content/_code.scss
View file

@ -21,7 +21,8 @@
font-family: var(#{$css-var-prefix}font-family); // 1
}
#{$parent-selector} pre code {
#{$parent-selector} pre code,
#{$parent-selector} pre samp {
font-size: inherit;
font-family: inherit;
}
@ -37,7 +38,8 @@
#{$parent-selector} pre,
#{$parent-selector} code,
#{$parent-selector} kbd {
#{$parent-selector} kbd,
#{$parent-selector} samp {
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}code-background-color);
color: var(#{$css-var-prefix}code-color);
@ -46,7 +48,8 @@
}
#{$parent-selector} code,
#{$parent-selector} kbd {
#{$parent-selector} kbd,
#{$parent-selector} samp {
display: inline-block;
padding: 0.375rem;
}
@ -56,7 +59,8 @@
margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto;
> code {
> code,
> samp {
display: block;
padding: var(#{$css-var-prefix}spacing);
background: none;

3
scss/content/_embedded.scss
View file

@ -47,7 +47,8 @@
}
// Hide the overflow in IE
#{$parent-selector} svg:not(:root) {
#{$parent-selector} svg:not(:root),
#{$parent-selector} svg:not(:host) {
overflow: hidden;
}
}

4
scss/content/_miscs.scss → scss/content/_misc.scss
View file

@ -1,9 +1,9 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/miscs") {
@if map.get($modules, "content/misc") {
/**
* Miscs
* Misc
*/
// Reboot based on :

4
scss/content/_table.scss
View file

@ -52,8 +52,8 @@
@if enable-classes {
#{$parent-selector} table {
&.striped {
tbody tr:nth-child(odd) th,
tbody tr:nth-child(odd) td {
tbody tr:nth-child(odd of :not([hidden])) th,
tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
}
}

2
scss/forms/_checkbox-radio-switch.scss
View file

@ -79,7 +79,7 @@
}
}
// Switchs
// Switches
#{$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);

14
scss/helpers/_functions.scss
View file

@ -11,39 +11,39 @@
// Generate a shadow with 7 layers
@function shadow($color) {
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-blur-strength: 6rem;
$box-shadow-opacity: 0.06;
@return shadow-layer(
$box-shadow-elevation * 0.029,
$box-shadow-blur-strengh * 0.029,
$box-shadow-blur-strength * 0.029,
$box-shadow-opacity * 0.283,
$color
),
shadow-layer(
$box-shadow-elevation * 0.067,
$box-shadow-blur-strengh * 0.067,
$box-shadow-blur-strength * 0.067,
$box-shadow-opacity * 0.4,
$color
),
shadow-layer(
$box-shadow-elevation * 0.125,
$box-shadow-blur-strengh * 0.125,
$box-shadow-blur-strength * 0.125,
$box-shadow-opacity * 0.5,
$color
),
shadow-layer(
$box-shadow-elevation * 0.225,
$box-shadow-blur-strengh * 0.225,
$box-shadow-blur-strength * 0.225,
$box-shadow-opacity * 0.6,
$color
),
shadow-layer(
$box-shadow-elevation * 0.417,
$box-shadow-blur-strengh * 0.417,
$box-shadow-blur-strength * 0.417,
$box-shadow-opacity * 0.717,
$color
),
shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color),
shadow-layer($box-shadow-elevation, $box-shadow-blur-strength, $box-shadow-opacity, $color),
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
}

3
scss/layout/_document.scss
View file

@ -34,7 +34,8 @@
// 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) {
:where(:root),
:where(:host) {
-webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5

2
scss/layout/_grid.scss
View file

@ -20,7 +20,7 @@
}
& > * {
min-width: 0; // HACK for childs in overflow
min-width: 0; // HACK for children in overflow
}
}
}

6
scss/themes/default/_schemes.scss
View file

@ -12,14 +12,16 @@
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
:root:not([data-theme="dark"]),
:host(: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]) {
:root:not([data-theme]),
:host(:not([data-theme])) {
@include dark.theme;
}
}

18
scss/themes/default/_styles.scss
View file

@ -9,15 +9,17 @@
* Styles
*/
:root {
:root,
:host {
// 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,
#{$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-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;
@ -143,7 +145,7 @@
}
}
// Responsives spacings
// Responsive spacings
@if $enable-responsive-spacings {
// Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {