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

New --button-box-shadow var

Browse source 
+ rename `--form-element-focus` to `--form-element-focus-color`
+ code cleaning
This commit is contained in:
Lucas Larroche 2021-07-02 22:18:14 +07:00
parent fc67f39278
commit dd534ef6a6
21 changed files with 136 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

37
css/pico.classless.css
View file

@ -214,13 +214,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent; --form-element-background-color: transparent;
--form-element-border-color: #a2afb9; --form-element-border-color: #a2afb9;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent; --form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
@ -298,13 +300,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -383,13 +387,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -883,7 +889,7 @@ a[role="button"] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
--box-shadow: none; --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -914,6 +920,7 @@ a[role="button"]:active,
a[role="button"]:focus { a[role="button"]:focus {
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
} }
button:focus, button:focus,
@ -921,7 +928,7 @@ input[type="submit"]:focus,
input[type="button"]:focus, input[type="button"]:focus,
input[type="reset"]:focus, input[type="reset"]:focus,
a[role="button"]:focus { a[role="button"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
} }
input[type="reset"] { input[type="reset"] {
@ -937,7 +944,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
} }
input[type="reset"]:focus { input[type="reset"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button[disabled], button[disabled],
@ -1103,7 +1110,7 @@ textarea:focus {
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
@ -1375,9 +1382,9 @@ label > textarea {
} }
[type="file"]:hover, [type="file"]:active, [type="file"]:focus { [type="file"]:hover, [type="file"]:active, [type="file"]:focus {
--color: var(--color);
border: none; border: none;
background: none; background: none;
--color: var(--color);
} }
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
@ -1888,7 +1895,7 @@ progress::-moz-progress-bar {
progress:indeterminate { progress:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
@ -1899,7 +1906,7 @@ progress:indeterminate::-moz-progress-bar {
background-color: transparent; background-color: transparent;
} }
@keyframes progress-indeterminate { @keyframes progressIndeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -1958,8 +1965,8 @@ progress:indeterminate::-moz-progress-bar {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
animation-duration: .2s;
animation-name: slide; animation-name: slide;
animation-duration: .2s;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
@ -1968,12 +1975,12 @@ progress:indeterminate::-moz-progress-bar {
@keyframes slide { @keyframes slide {
from { from {
opacity: 0;
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
opacity: 1;
} }
} }
@ -1982,12 +1989,12 @@ progress:indeterminate::-moz-progress-bar {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
opacity: 1;
} }
} }

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

File diff suppressed because one or more lines are too long

41
css/pico.css
View file

@ -214,13 +214,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent; --form-element-background-color: transparent;
--form-element-border-color: #a2afb9; --form-element-border-color: #a2afb9;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent; --form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
@ -298,13 +300,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -383,13 +387,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -933,7 +939,7 @@ a[role="button"] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
--box-shadow: none; --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -964,6 +970,7 @@ a[role="button"]:active,
a[role="button"]:focus { a[role="button"]:focus {
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
} }
button:focus, button:focus,
@ -971,7 +978,7 @@ input[type="submit"]:focus,
input[type="button"]:focus, input[type="button"]:focus,
input[type="reset"]:focus, input[type="reset"]:focus,
a[role="button"]:focus { a[role="button"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
} }
input[type="reset"] { input[type="reset"] {
@ -987,7 +994,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
} }
input[type="reset"]:focus { input[type="reset"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.secondary, button.secondary,
@ -1023,7 +1030,7 @@ input[type="submit"].secondary:focus,
input[type="button"].secondary:focus, input[type="button"].secondary:focus,
input[type="reset"].secondary:focus, input[type="reset"].secondary:focus,
a[role="button"].secondary:focus { a[role="button"].secondary:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.contrast, button.contrast,
@ -1058,7 +1065,7 @@ input[type="submit"].contrast:focus,
input[type="button"].contrast:focus, input[type="button"].contrast:focus,
input[type="reset"].contrast:focus, input[type="reset"].contrast:focus,
a[role="button"].contrast:focus { a[role="button"].contrast:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
} }
button.outline, button.outline,
@ -1298,7 +1305,7 @@ textarea:focus {
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
@ -1570,9 +1577,9 @@ label > textarea {
} }
[type="file"]:hover, [type="file"]:active, [type="file"]:focus { [type="file"]:hover, [type="file"]:active, [type="file"]:focus {
--color: var(--color);
border: none; border: none;
background: none; background: none;
--color: var(--color);
} }
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
@ -2083,7 +2090,7 @@ progress::-moz-progress-bar {
progress:indeterminate { progress:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
@ -2094,7 +2101,7 @@ progress:indeterminate::-moz-progress-bar {
background-color: transparent; background-color: transparent;
} }
@keyframes progress-indeterminate { @keyframes progressIndeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -2153,8 +2160,8 @@ progress:indeterminate::-moz-progress-bar {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
animation-duration: .2s;
animation-name: slide; animation-name: slide;
animation-duration: .2s;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
@ -2163,12 +2170,12 @@ progress:indeterminate::-moz-progress-bar {
@keyframes slide { @keyframes slide {
from { from {
opacity: 0;
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
opacity: 1;
} }
} }
@ -2177,12 +2184,12 @@ progress:indeterminate::-moz-progress-bar {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
opacity: 1;
} }
} }

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

@ -214,13 +214,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent; --form-element-background-color: transparent;
--form-element-border-color: #a2afb9; --form-element-border-color: #a2afb9;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent; --form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
@ -298,13 +300,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -383,13 +387,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -849,7 +855,7 @@ a[role="button"] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
--box-shadow: none; --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -880,6 +886,7 @@ a[role="button"]:active,
a[role="button"]:focus { a[role="button"]:focus {
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
} }
button:focus, button:focus,
@ -887,7 +894,7 @@ input[type="submit"]:focus,
input[type="button"]:focus, input[type="button"]:focus,
input[type="reset"]:focus, input[type="reset"]:focus,
a[role="button"]:focus { a[role="button"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
} }
input[type="reset"] { input[type="reset"] {
@ -903,7 +910,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
} }
input[type="reset"]:focus { input[type="reset"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button[disabled], button[disabled],
@ -1069,7 +1076,7 @@ textarea:focus {
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
@ -1341,9 +1348,9 @@ label > textarea {
} }
[type="file"]:hover, [type="file"]:active, [type="file"]:focus { [type="file"]:hover, [type="file"]:active, [type="file"]:focus {
--color: var(--color);
border: none; border: none;
background: none; background: none;
--color: var(--color);
} }
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
@ -1854,7 +1861,7 @@ progress::-moz-progress-bar {
progress:indeterminate { progress:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
@ -1865,7 +1872,7 @@ progress:indeterminate::-moz-progress-bar {
background-color: transparent; background-color: transparent;
} }
@keyframes progress-indeterminate { @keyframes progressIndeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -1924,8 +1931,8 @@ progress:indeterminate::-moz-progress-bar {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
animation-duration: .2s;
animation-name: slide; animation-name: slide;
animation-duration: .2s;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
@ -1934,12 +1941,12 @@ progress:indeterminate::-moz-progress-bar {
@keyframes slide { @keyframes slide {
from { from {
opacity: 0;
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
opacity: 1;
} }
} }
@ -1948,12 +1955,12 @@ progress:indeterminate::-moz-progress-bar {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
opacity: 1;
} }
} }

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

25
css/pico.slim.css
View file

@ -157,13 +157,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent; --form-element-background-color: transparent;
--form-element-border-color: #a2afb9; --form-element-border-color: #a2afb9;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent; --form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
@ -241,13 +243,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -326,13 +330,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -875,7 +881,7 @@ a[role="button"] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
--box-shadow: none; --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -905,6 +911,7 @@ a[role="button"]:active,
a[role="button"]:focus { a[role="button"]:focus {
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
} }
button:focus, button:focus,
@ -912,7 +919,7 @@ input[type="submit"]:focus,
input[type="button"]:focus, input[type="button"]:focus,
input[type="reset"]:focus, input[type="reset"]:focus,
a[role="button"]:focus { a[role="button"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
} }
input[type="reset"] { input[type="reset"] {
@ -928,7 +935,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
} }
input[type="reset"]:focus { input[type="reset"]:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.secondary, button.secondary,
@ -964,7 +971,7 @@ input[type="submit"].secondary:focus,
input[type="button"].secondary:focus, input[type="button"].secondary:focus,
input[type="reset"].secondary:focus, input[type="reset"].secondary:focus,
a[role="button"].secondary:focus { a[role="button"].secondary:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.contrast, button.contrast,
@ -999,7 +1006,7 @@ input[type="submit"].contrast:focus,
input[type="button"].contrast:focus, input[type="button"].contrast:focus,
input[type="reset"].contrast:focus, input[type="reset"].contrast:focus,
a[role="button"].contrast:focus { a[role="button"].contrast:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
} }
button.outline, button.outline,
@ -1238,7 +1245,7 @@ textarea:focus {
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

12
css/themes/default.css
View file

@ -210,13 +210,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent; --form-element-background-color: transparent;
--form-element-border-color: #a2afb9; --form-element-border-color: #a2afb9;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent; --form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
@ -294,13 +296,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
@ -379,13 +383,15 @@ kbd {
--del-color: #C62828; --del-color: #C62828;
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f; --form-element-background-color: #11191f;
--form-element-border-color: #374956; --form-element-border-color: #374956;
--form-element-color: var(--color); --form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/css/themes/docs.min.css vendored Normal file
View file

@ -0,0 +1 @@
:root{--icon-external: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='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check: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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark: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='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--invalid-color:#C62828;--valid-color:#388E3C;--nav-background-color:rgba(255, 255, 255, 0.7);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#FFF}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}

4
docs/index.html
View file

@ -238,9 +238,9 @@
<em>/* <span class="name"></span>(Common styles) */</em> <em>/* <span class="name"></span>(Common styles) */</em>
<b>:root</b> { <b>:root</b> {
<i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>); <i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>);
<i>--form-element-focus:</i>: <u>var</u>(<i>--primary-focus</i>); <i>--form-element-focus-color</i>: <u>var</u>(<i>--primary-focus</i>);
<i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>); <i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>);
<i>--switch-checked-background-color:</i>: <u>var</u>(<i>--primary</i>); <i>--switch-checked-background-color</i>: <u>var</u>(<i>--primary</i>);
} }
</code></pre> </code></pre>

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
docs/js/src/color-picker.js
View file

@ -472,7 +472,7 @@
+ '[data-theme="generated"] {' + '[data-theme="generated"] {'
+ '--form-element-active-border-color: var(--primary);' + '--form-element-active-border-color: var(--primary);'
+ '--form-element-focus: var(--primary-focus);' + '--form-element-focus-color: var(--primary-focus);'
+ '--switch-color: var(--primary-inverse);' + '--switch-color: var(--primary-inverse);'
+ '--switch-checked-background-color: var(--primary);' + '--switch-checked-background-color: var(--primary);'
+ '}'; + '}';

4
scss/components/_progress.scss
View file

@ -54,7 +54,7 @@ progress {
&:indeterminate { &:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -65,7 +65,7 @@ progress {
} }
} }
@keyframes progress-indeterminate { @keyframes progressIndeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }

10
scss/components/_tooltip.scss
View file

@ -55,8 +55,8 @@
opacity: 1; opacity: 1;
@if $enable-transitions { @if $enable-transitions {
animation-duration: .2s;
animation-name: slide; animation-name: slide;
animation-duration: .2s;
} }
} }
@ -72,12 +72,12 @@
@if $enable-transitions { @if $enable-transitions {
@keyframes slide { @keyframes slide {
from { from {
opacity: 0;
transform: translate(-50%, .75rem); transform: translate(-50%, .75rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
opacity: 1;
} }
} }
@ -86,12 +86,12 @@
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
opacity: 1;
} }
} }
} }

14
scss/content/_button.scss
View file

@ -58,7 +58,7 @@ a[role="button"] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
--box-shadow: none; --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -85,10 +85,11 @@ a[role="button"] {
&:focus { &:focus {
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
} }
&:focus { &:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
} }
} }
@ -107,7 +108,8 @@ input[type="reset"] {
} }
&:focus { &:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); // --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
} }
@ -134,7 +136,8 @@ input[type="reset"] {
} }
&:focus { &:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); // --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
} }
} }
@ -152,7 +155,8 @@ input[type="reset"] {
} }
&:focus { &:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus); // --box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
} }
} }

4
scss/content/_form-alt-input-types.scss
View file

@ -10,7 +10,7 @@
&::-webkit-color-swatch-wrapper { &::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
&::-moz-focus-inner { &::-moz-focus-inner {
padding: 0; padding: 0;
} }
@ -86,9 +86,9 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
--color: var(--color);
border: none; border: none;
background: none; background: none;
--color: var(--color);
&::-webkit-file-upload-button { &::-webkit-file-upload-button {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);

2
scss/content/_form.scss
View file

@ -209,7 +209,7 @@ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="r
select, select,
textarea { textarea {
&:focus { &:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
} }

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

@ -48,6 +48,12 @@
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
// Button
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Form elements // Form elements
--form-element-background-color: #{mix($black, $grey-900, 37.5%)}; --form-element-background-color: #{mix($black, $grey-900, 37.5%)};
--form-element-border-color: #{mix($grey-800, $grey-700)}; --form-element-border-color: #{mix($grey-800, $grey-700)};
@ -55,7 +61,7 @@
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color); --form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-800}; --form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700}; --form-element-disabled-border-color: #{$grey-700};
--form-element-invalid-border-color: #{$red-900}; --form-element-invalid-border-color: #{$red-900};

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

@ -49,6 +49,12 @@
--blockquote-border-color: var(--muted-border-color); --blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color); --blockquote-footer-color: var(--muted-color);
// Button
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Form elements // Form elements
--form-element-background-color: transparent; --form-element-background-color: transparent;
--form-element-border-color: #{$grey-300}; --form-element-border-color: #{$grey-300};
@ -56,7 +62,7 @@
--form-element-placeholder-color: var(--muted-color); --form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent; --form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary); --form-element-active-border-color: var(--primary);
--form-element-focus: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-100}; --form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300}; --form-element-disabled-border-color: #{$grey-300};
--form-element-invalid-border-color: #{$red-800}; --form-element-invalid-border-color: #{$red-800};