mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -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.fluid.classless.css
View file

@ -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;
@ -849,7 +855,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);
@ -880,6 +886,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,
@ -887,7 +894,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"] {
@ -903,7 +910,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[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,
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],
@ -1341,9 +1348,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 {
@ -1854,7 +1861,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 {
@ -1865,7 +1872,7 @@ progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
@keyframes progress-indeterminate {
@keyframes progressIndeterminate {
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 {
opacity: 1;
animation-duration: .2s;
animation-name: slide;
animation-duration: .2s;
}
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
@ -1934,12 +1941,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;
}
}
@ -1948,12 +1955,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;
}
}