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

4
scss/components/_progress.scss
View file

@ -54,7 +54,7 @@ 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;
&[value]::-webkit-progress-value {
background-color: transparent;
@ -65,7 +65,7 @@ progress {
}
}
@keyframes progress-indeterminate {
@keyframes progressIndeterminate {
0% {
background-position: 200% 0;
}

10
scss/components/_tooltip.scss
View file

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

14
scss/content/_button.scss
View file

@ -58,7 +58,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);
@ -85,10 +85,11 @@ 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));
}
&: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 {
--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 {
--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 {
--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 {
padding: 0;
}
&::-moz-focus-inner {
padding: 0;
}
@ -86,9 +86,9 @@
&:hover,
&:active,
&:focus {
--color: var(--color);
border: none;
background: none;
--color: var(--color);
&::-webkit-file-upload-button {
--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,
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);
}
}

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

@ -48,6 +48,12 @@
--blockquote-border-color: var(--muted-border-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-element-background-color: #{mix($black, $grey-900, 37.5%)};
--form-element-border-color: #{mix($grey-800, $grey-700)};
@ -55,7 +61,7 @@
--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: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700};
--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-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-element-background-color: transparent;
--form-element-border-color: #{$grey-300};
@ -56,7 +62,7 @@
--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: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300};
--form-element-invalid-border-color: #{$red-800};