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

style: Validation states

Browse source
This commit is contained in:
Lucas Larroche 2023-03-15 22:16:03 +07:00
parent 5b96712843
commit ea66c420ff
2 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -71,9 +71,9 @@
#{$✨}mark-background-color: #{$azure-750};
#{$✨}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<ins>)
#{$✨}ins-color: #{desaturate($jade-350, 25%)};
#{$✨}del-color: #{desaturate($red-400, 25%)};
// Inserted (<ins>) & Deleted (<del>)
#{$✨}ins-color: #{mix($jade-450, $zinc-200)};
#{$✨}del-color: #{mix($red-500, $zinc-200)};
// Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
@ -115,11 +115,11 @@
#{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color);
#{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color);
#{$✨}form-element-disabled-opacity: 0.5;
#{$✨}form-element-invalid-border-color: #{desaturate($red-400, 25%)};
#{$✨}form-element-invalid-active-border-color: #{desaturate($red-500, 25%)};
#{$✨}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
#{$✨}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
#{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color);
#{$✨}form-element-valid-border-color: #{desaturate($jade-350, 25%)};
#{$✨}form-element-valid-active-border-color: #{desaturate($jade-450, 25%)};
#{$✨}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
#{$✨}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
#{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color);
// Focus for buttons, radio and select
@ -223,8 +223,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(desaturate($jade-350, 25%))}' 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(desaturate($red-400, 25%))}' 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-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");
}
// Search icon

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

@ -71,9 +71,9 @@
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
#{$✨}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<ins>)
#{$✨}ins-color: #{$jade-550};
#{$✨}del-color: #{$red-650};
// Inserted (<ins>) & Deleted (<del>)
#{$✨}ins-color: #{mix($jade-450, $zinc-750)};
#{$✨}del-color: #{mix($red-500, $zinc-750)};
// Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
@ -115,11 +115,11 @@
#{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color);
#{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color);
#{$✨}form-element-disabled-opacity: 0.5;
#{$✨}form-element-invalid-border-color: #{$red-650};
#{$✨}form-element-invalid-active-border-color: #{$red-700};
#{$✨}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
#{$✨}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
#{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color);
#{$✨}form-element-valid-border-color: #{$jade-550};
#{$✨}form-element-valid-active-border-color: #{$jade-600};
#{$✨}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
#{$✨}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
#{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color);
// Focus for buttons, radio and select
@ -223,8 +223,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($jade-550)}' 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($red-650)}' 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-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");
}
// Search icon