fix: outline buttons

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

File diff suppressed because one or more lines are too long

View file

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

View file

@ -141,11 +141,12 @@
[type="reset"].outline {
#{$css-var-prefix}background-color: transparent;
#{$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) {
#{$css-var-prefix}background-color: transparent;
#{$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,
[type="reset"].outline {
#{$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) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
}
}
// Outline (contrast)
:is(button, [type="submit"], [type="button"], [role="button"]).outline.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) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
}
}
} @else {