mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10: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

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;
}
}
}