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

Merge branch 'v2' into pr/416

Browse source
This commit is contained in:
Lucas Larroche 2023-12-28 12:48:15 +07:00
commit f55523135c
26 changed files with 1878 additions and 10112 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.node-version Normal file
View file

@ -0,0 +1 @@
18.19.0

1
.nvmrc Normal file
View file

@ -0,0 +1 @@
18.19.0

1000
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

79
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2424
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

1190
css/pico.css
View file

File diff suppressed because it is too large Load diff

85
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

1000
css/pico.fluid.classless.css
View file

File diff suppressed because it is too large Load diff

79
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2387
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2820
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

23
package.json
View file

@ -47,17 +47,20 @@
"done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"caniuse-lite": "1.0.30001481",
"clean-css-cli": "^5.6.2",
"css-declaration-sorter": "^6.4.0",
"nodemon": "^2.0.22",
"autoprefixer": "^10.4.16",
"caniuse-lite": "1.0.30001571",
"clean-css-cli": "^5.6.3",
"css-declaration-sorter": "^7.1.1",
"nodemon": "^3.0.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.23",
"postcss-cli": "^10.1.0",
"postcss-scss": "^4.0.6",
"prettier": "^2.8.7",
"sass": "^1.62.0"
"postcss": "^8.4.32",
"postcss-cli": "^11.0.0",
"postcss-scss": "^4.0.9",
"prettier": "^3.1.1",
"sass": "^1.69.5"
},
"engines": {
"node": ">=18.19.0"
},
"browserslist": [
">= 0.5%",

15
scss/components/_dropdown.scss
View file

@ -65,8 +65,11 @@
user-select: none;
@if $enable-transitions {
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
transition:
background-color var(#{$✨}transition),
border-color var(#{$✨}transition),
color var(#{$✨}transition),
box-shadow var(#{$✨}transition);
}
&:active,
@ -138,7 +141,9 @@
opacity: 0;
@if $enable-transitions {
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
transition:
opacity var(--pico-transition),
transform 0s ease-in-out 1s;
}
&[dir="rtl"] {
@ -209,7 +214,9 @@
opacity: 1;
@if $enable-transitions {
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
transition:
opacity var(--pico-transition),
transform 0s ease-in-out 0s;
}
}
}

5
scss/components/_group.scss
View file

@ -84,6 +84,11 @@
// Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-button);
input:not([type="checkbox"], [type="radio"]),
select {
border-color: transparent;
}
}
// Group box shadow when an input is focused

2
scss/components/_loading.scss
View file

@ -8,6 +8,8 @@
// Everything except form elements
[aria-busy="true"]:not(input, select, textarea, html) {
white-space: nowrap;
&::before {
display: inline-block;
width: 1em;

11
scss/components/_nav.scss
View file

@ -82,15 +82,22 @@
margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
}
a {
margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
}
&:not(:last-child) {
&::after {
display: inline-block;
position: absolute;
width: calc(var(#{$✨}nav-link-spacing-horizontal) * 2);
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) / 2);
width: calc(var(#{$✨}nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
content: var(#{$✨}nav-breadcrumb-divider);
color: var(#{$✨}muted-color);
text-align: center;
text-decoration: none;
white-space: nowrap;
}
}
}

19
scss/content/_button.scss
View file

@ -58,8 +58,11 @@
user-select: none;
@if $enable-transitions {
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
transition:
background-color var(#{$✨}transition),
border-color var(#{$✨}transition),
color var(#{$✨}transition),
box-shadow var(#{$✨}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
@ -70,7 +73,8 @@
}
&:focus {
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
#{$✨}box-shadow:
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
}
}
@ -99,7 +103,8 @@
}
&:focus {
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
#{$✨}box-shadow:
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
}
}
@ -117,7 +122,8 @@
}
&:focus {
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
#{$✨}box-shadow:
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}contrast-focus);
}
}
@ -169,7 +175,8 @@
}
&:focus {
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
#{$✨}box-shadow:
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
}
}

7
scss/content/_link.scss
View file

@ -19,8 +19,11 @@
text-underline-offset: 0.125em;
@if $enable-transitions {
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
transition:
background-color var(#{$✨}transition),
color var(#{$✨}transition),
text-decoration var(#{$✨}transition),
box-shadow var(#{$✨}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {

8
scss/forms/_basics.scss
View file

@ -145,6 +145,7 @@
// Blocks, 100%
input:not([type="checkbox"], [type="radio"]),
button[type="submit"],
select,
textarea {
width: 100%;
@ -175,8 +176,11 @@
font-weight: var(#{$✨}font-weight);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
transition:
background-color var(#{$✨}transition),
border-color var(#{$✨}transition),
color var(#{$✨}transition),
box-shadow var(#{$✨}transition);
}
}

3
scss/forms/_input-file.scss
View file

@ -32,7 +32,8 @@
&:focus {
&::file-selector-button {
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
#{$✨}box-shadow:
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
}
}

8
scss/forms/_input-range.scss
View file

@ -14,7 +14,9 @@ $border-thumb: 2px;
background-color: var(#{$✨}range-border-color);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), box-shadow var(#{$✨}transition);
transition:
background-color var(#{$✨}transition),
box-shadow var(#{$✨}transition);
}
}
@ -30,7 +32,9 @@ $border-thumb: 2px;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
transition:
background-color var(#{$✨}transition),
transform var(#{$✨}transition);
}
}

8
scss/forms/_input-search.scss
View file

@ -23,7 +23,9 @@
} @else {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
}
background-position: center left 1.125rem, center right 0.75rem;
background-position:
center left 1.125rem,
center right 0.75rem;
}
&[aria-invalid="false"] {
@ -43,7 +45,9 @@
background-position: center right 1.125rem;
&[aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
background-position:
center right 1.125rem,
center left 0.75rem;
}
}
}

4
scss/themes/default/_dark.scss
View file

@ -216,8 +216,8 @@
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$✨}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-200))}' 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");
#{$✨}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-200))}' 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");
#{$✨}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");
#{$✨}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)

4
scss/themes/default/_light.scss
View file

@ -200,8 +200,8 @@
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$✨}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-750))}' 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");
#{$✨}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-750))}' 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");
#{$✨}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");
#{$✨}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

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

@ -36,7 +36,7 @@
// Borders
#{$✨}border-radius: 0.25rem;
#{$✨}border-width: 0.0625rem;
#{$✨}outline-width: 0.1875rem;
#{$✨}outline-width: 0.125rem;
// Transitions
#{$✨}transition: 0.2s ease-in-out;
@ -381,7 +381,7 @@
nav {
details.dropdown {
summary:focus-visible {
#{$✨}outline-width: 0.1875rem;
#{$✨}outline-width: 0.125rem;
}
}
}

797
yarn.lock
View file

File diff suppressed because it is too large Load diff