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

fix: outline buttons

Browse source
This commit is contained in:
Lucas Larroche 2024-01-14 13:37:32 +07:00
parent 48c60e0ec3
commit 5fc1da9b42
6 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

8
css/pico.css
View file

@ -1189,29 +1189,33 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=reset].outline { [type=reset].outline {
--pico-background-color: transparent; --pico-background-color: transparent;
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-border-color: currentColor; --pico-border-color: var(--pico-primary);
} }
:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), :is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-background-color: transparent; --pico-background-color: transparent;
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-border-color: var(--pico-primary-hover);
} }
:is(button, [type=submit], [type=button], [role=button]).outline.secondary, :is(button, [type=submit], [type=button], [role=button]).outline.secondary,
[type=reset].outline { [type=reset].outline {
--pico-color: var(--pico-secondary); --pico-color: var(--pico-secondary);
--pico-border-color: currentColor; --pico-border-color: var(--pico-secondary);
} }
:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), :is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover); --pico-color: var(--pico-secondary-hover);
--pico-border-color: var(--pico-secondary-hover);
} }
:is(button, [type=submit], [type=button], [role=button]).outline.contrast { :is(button, [type=submit], [type=button], [role=button]).outline.contrast {
--pico-color: var(--pico-contrast); --pico-color: var(--pico-contrast);
--pico-border-color: var(--pico-contrast);
} }
:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { :is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover); --pico-color: var(--pico-contrast-hover);
--pico-border-color: var(--pico-contrast-hover);
} }
:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled], :where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.css.map
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

8
scss/content/_button.scss
View file

@ -141,11 +141,12 @@
[type="reset"].outline { [type="reset"].outline {
#{$css-var-prefix}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary); #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}border-color: currentColor; #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: transparent; #{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
} }
} }
@ -153,19 +154,22 @@
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
[type="reset"].outline { [type="reset"].outline {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$css-var-prefix}border-color: currentColor; #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
} }
} }
// Outline (contrast) // Outline (contrast)
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast { :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
} }
} }
} @else { } @else {