mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
New --button-box-shadow var
+ rename `--form-element-focus` to `--form-element-focus-color` + code cleaning
This commit is contained in:
Lucas Larroche
parent
fc67f39278
commit
dd534ef6a6
21 changed files with 136 additions and 85 deletions
41
css/pico.css
41
css/pico.css
|
|
@ -214,13 +214,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-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-border-color: #a2afb9;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--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-border-color: #a2afb9;
|
||||
--form-element-invalid-border-color: #C62828;
|
||||
|
|
@ -298,13 +300,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-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-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--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-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -383,13 +387,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-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-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--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-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -933,7 +939,7 @@ a[role="button"] {
|
|||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--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);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -964,6 +970,7 @@ a[role="button"]:active,
|
|||
a[role="button"]:focus {
|
||||
--background-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,
|
||||
|
|
@ -971,7 +978,7 @@ input[type="submit"]:focus,
|
|||
input[type="button"]:focus,
|
||||
input[type="reset"]: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"] {
|
||||
|
|
@ -987,7 +994,7 @@ input[type="reset"]:hover, input[type="reset"]:active, 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,
|
||||
|
|
@ -1023,7 +1030,7 @@ input[type="submit"].secondary:focus,
|
|||
input[type="button"].secondary:focus,
|
||||
input[type="reset"].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,
|
||||
|
|
@ -1058,7 +1065,7 @@ input[type="submit"].contrast:focus,
|
|||
input[type="button"].contrast:focus,
|
||||
input[type="reset"].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,
|
||||
|
|
@ -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,
|
||||
select: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],
|
||||
|
|
@ -1570,9 +1577,9 @@ label > textarea {
|
|||
}
|
||||
|
||||
[type="file"]:hover, [type="file"]:active, [type="file"]:focus {
|
||||
--color: var(--color);
|
||||
border: 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 {
|
||||
|
|
@ -2083,7 +2090,7 @@ progress::-moz-progress-bar {
|
|||
|
||||
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;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
animation: progressIndeterminate 1s linear infinite;
|
||||
}
|
||||
|
||||
progress:indeterminate[value]::-webkit-progress-value {
|
||||
|
|
@ -2094,7 +2101,7 @@ progress:indeterminate::-moz-progress-bar {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
@keyframes progressIndeterminate {
|
||||
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 {
|
||||
opacity: 1;
|
||||
animation-duration: .2s;
|
||||
animation-name: slide;
|
||||
animation-duration: .2s;
|
||||
}
|
||||
|
||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||
|
|
@ -2163,12 +2170,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
|
||||
@keyframes slide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2177,12 +2184,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue