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

fix: button display

Browse source
This commit is contained in:
Lucas Larroche 2023-03-12 12:12:18 +07:00
parent b642fbc014
commit af050f9088
12 changed files with 91 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

24
css/pico.classless.css
View file

@ -749,6 +749,10 @@ a:focus-visible,
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
a[role=button] {
display: inline-block;
}
/** /**
* Typography * Typography
*/ */
@ -964,14 +968,14 @@ button {
} }
button, button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button] { input[type=button] {
-webkit-appearance: button; -webkit-appearance: button;
} }
button, button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button], input[type=button],
input[type=file]::file-selector-button, input[type=file]::file-selector-button,
@ -999,7 +1003,7 @@ input[type=file]::file-selector-button,
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current], :hover, :active, :focus), button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus), [type=submit]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus), input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
@ -1010,7 +1014,7 @@ input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focu
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
button:focus, button:focus,
input[type=submit]:focus, [type=submit]:focus,
input[type=reset]:focus, input[type=reset]:focus,
input[type=button]:focus, input[type=button]:focus,
input[type=file]::file-selector-button:focus, input[type=file]::file-selector-button:focus,
@ -1018,6 +1022,12 @@ input[type=file]::file-selector-button:focus,
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
[type=submit],
input[type=reset],
input[type=button] {
margin-bottom: var(--pico-spacing);
}
input[type=reset], input[type=reset],
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary);
@ -1036,11 +1046,11 @@ input[type=file]::file-selector-button:focus {
} }
:where(button, :where(button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button], input[type=button],
[role=button])[disabled], [role=button])[disabled],
:where(fieldset[disabled]) :is(button, input[type=submit], input[type=button], input[type=reset], [role=button]) { :where(fieldset[disabled]) :is(button, [type=submit], input[type=button], input[type=reset], [role=button]) {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
@ -2078,7 +2088,7 @@ details[role=list][open] summary::before {
} }
button[aria-busy=true], button[aria-busy=true],
input[type=submit][aria-busy=true], [type=submit][aria-busy=true],
input[type=button][aria-busy=true], input[type=button][aria-busy=true],
input[type=reset][aria-busy=true], input[type=reset][aria-busy=true],
a[aria-busy=true] { a[aria-busy=true] {

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

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

48
css/pico.css
View file

@ -793,6 +793,10 @@ a.contrast:is([aria-current], :hover, :active, :focus),
--pico-underline: var(--pico-contrast-underline-hover); --pico-underline: var(--pico-contrast-underline-hover);
} }
a[role=button] {
display: inline-block;
}
/** /**
* Typography * Typography
*/ */
@ -1008,14 +1012,14 @@ button {
} }
button, button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button] { input[type=button] {
-webkit-appearance: button; -webkit-appearance: button;
} }
button, button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button], input[type=button],
input[type=file]::file-selector-button, input[type=file]::file-selector-button,
@ -1043,7 +1047,7 @@ input[type=file]::file-selector-button,
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current], :hover, :active, :focus), button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus), [type=submit]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus), input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
@ -1054,7 +1058,7 @@ input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focu
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
button:focus, button:focus,
input[type=submit]:focus, [type=submit]:focus,
input[type=reset]:focus, input[type=reset]:focus,
input[type=button]:focus, input[type=button]:focus,
input[type=file]::file-selector-button:focus, input[type=file]::file-selector-button:focus,
@ -1062,7 +1066,13 @@ input[type=file]::file-selector-button:focus,
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
:is(button, input[type=submit], input[type=button], [role=button]).secondary, [type=submit],
input[type=reset],
input[type=button] {
margin-bottom: var(--pico-spacing);
}
:is(button, [type=submit], input[type=button], [role=button]).secondary,
input[type=reset], input[type=reset],
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
--pico-background-color: var(--pico-secondary-background); --pico-background-color: var(--pico-secondary-background);
@ -1070,68 +1080,68 @@ input[type=file]::file-selector-button {
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
cursor: pointer; cursor: pointer;
} }
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus), :is(button, [type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) { input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-background-hover); --pico-background-color: var(--pico-secondary-background-hover);
--pico-border-color: var(--pico-secondary-border-hover); --pico-border-color: var(--pico-secondary-border-hover);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
} }
:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus, :is(button, [type=submit], input[type=button], [role=button]).secondary:focus,
input[type=reset]:focus, input[type=reset]:focus,
input[type=file]::file-selector-button:focus { input[type=file]::file-selector-button:focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
} }
:is(button, input[type=submit], input[type=button], [role=button]).contrast { :is(button, [type=submit], input[type=button], [role=button]).contrast {
--pico-background-color: var(--pico-contrast-background); --pico-background-color: var(--pico-contrast-background);
--pico-border-color: var(--pico-contrast-border); --pico-border-color: var(--pico-contrast-border);
--pico-color: var(--pico-contrast-inverse); --pico-color: var(--pico-contrast-inverse);
} }
:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) { :is(button, [type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
--pico-background-color: var(--pico-contrast-background-hover); --pico-background-color: var(--pico-contrast-background-hover);
--pico-border-color: var(--pico-contrast-border-hover); --pico-border-color: var(--pico-contrast-border-hover);
--pico-color: var(--pico-contrast-inverse); --pico-color: var(--pico-contrast-inverse);
} }
:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus { :is(button, [type=submit], input[type=button], [role=button]).contrast:focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline, :is(button, [type=submit], input[type=button], [role=button]).outline,
input[type=reset].outline { input[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: currentColor;
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus), :is(button, [type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) { input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--pico-background-color: transparent; --pico-background-color: transparent;
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary, :is(button, [type=submit], input[type=button], [role=button]).outline.secondary,
input[type=reset].outline { input[type=reset].outline {
--pico-color: var(--pico-secondary); --pico-color: var(--pico-secondary);
--pico-border-color: currentColor; --pico-border-color: currentColor;
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus), :is(button, [type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) { input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover); --pico-color: var(--pico-secondary-hover);
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast { :is(button, [type=submit], input[type=button], [role=button]).outline.contrast {
--pico-color: var(--pico-contrast); --pico-color: var(--pico-contrast);
} }
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) { :is(button, [type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover); --pico-color: var(--pico-contrast-hover);
} }
:where(button, :where(button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button], input[type=button],
[role=button])[disabled], [role=button])[disabled],
:where(fieldset[disabled]) :is(button, input[type=submit], input[type=button], input[type=reset], [role=button]) { :where(fieldset[disabled]) :is(button, [type=submit], input[type=button], input[type=reset], [role=button]) {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
@ -2187,7 +2197,7 @@ details[role=list][open] summary::before {
} }
button[aria-busy=true], button[aria-busy=true],
input[type=submit][aria-busy=true], [type=submit][aria-busy=true],
input[type=button][aria-busy=true], input[type=button][aria-busy=true],
input[type=reset][aria-busy=true], input[type=reset][aria-busy=true],
a[aria-busy=true] { a[aria-busy=true] {

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

24
css/pico.fluid.classless.css
View file

@ -719,6 +719,10 @@ a:focus-visible,
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
a[role=button] {
display: inline-block;
}
/** /**
* Typography * Typography
*/ */
@ -934,14 +938,14 @@ button {
} }
button, button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button] { input[type=button] {
-webkit-appearance: button; -webkit-appearance: button;
} }
button, button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button], input[type=button],
input[type=file]::file-selector-button, input[type=file]::file-selector-button,
@ -969,7 +973,7 @@ input[type=file]::file-selector-button,
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current], :hover, :active, :focus), button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus), [type=submit]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus), input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
@ -980,7 +984,7 @@ input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focu
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
button:focus, button:focus,
input[type=submit]:focus, [type=submit]:focus,
input[type=reset]:focus, input[type=reset]:focus,
input[type=button]:focus, input[type=button]:focus,
input[type=file]::file-selector-button:focus, input[type=file]::file-selector-button:focus,
@ -988,6 +992,12 @@ input[type=file]::file-selector-button:focus,
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
[type=submit],
input[type=reset],
input[type=button] {
margin-bottom: var(--pico-spacing);
}
input[type=reset], input[type=reset],
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
--pico-background-color: var(--pico-secondary); --pico-background-color: var(--pico-secondary);
@ -1006,11 +1016,11 @@ input[type=file]::file-selector-button:focus {
} }
:where(button, :where(button,
input[type=submit], [type=submit],
input[type=reset], input[type=reset],
input[type=button], input[type=button],
[role=button])[disabled], [role=button])[disabled],
:where(fieldset[disabled]) :is(button, input[type=submit], input[type=button], input[type=reset], [role=button]) { :where(fieldset[disabled]) :is(button, [type=submit], input[type=button], input[type=reset], [role=button]) {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
@ -2048,7 +2058,7 @@ details[role=list][open] summary::before {
} }
button[aria-busy=true], button[aria-busy=true],
input[type=submit][aria-busy=true], [type=submit][aria-busy=true],
input[type=button][aria-busy=true], input[type=button][aria-busy=true],
input[type=reset][aria-busy=true], input[type=reset][aria-busy=true],
a[aria-busy=true] { a[aria-busy=true] {

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

File diff suppressed because one or more lines are too long

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

2
scss/components/_loading.scss
View file

@ -43,7 +43,7 @@
// Buttons and links // Buttons and links
button, button,
input[type="submit"], [type="submit"],
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
a { a {

24
scss/content/_button.scss
View file

@ -23,7 +23,7 @@
// Correct the inability to style buttons in iOS and Safari // Correct the inability to style buttons in iOS and Safari
button, button,
input[type="submit"], [type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"] { input[type="button"] {
-webkit-appearance: button; -webkit-appearance: button;
@ -33,7 +33,7 @@
// –––––––––––––––––––– // ––––––––––––––––––––
button, button,
input[type="submit"], [type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"], input[type="button"],
input[type="file"]::file-selector-button, input[type="file"]::file-selector-button,
@ -75,10 +75,16 @@
} }
} }
[type="submit"],
input[type="reset"],
input[type="button"] {
margin-bottom: var(#{$✨}spacing);
}
// .secondary, .contrast & .outline // .secondary, .contrast & .outline
@if $enable-classes { @if $enable-classes {
// Secondary // Secondary
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary, :is(button, [type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"], input[type="reset"],
input[type="file"]::file-selector-button { input[type="file"]::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-background); #{$✨}background-color: var(#{$✨}secondary-background);
@ -99,7 +105,7 @@
} }
// Contrast // Contrast
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast { :is(button, [type="submit"], input[type="button"], [role="button"]).contrast {
#{$✨}background-color: var(#{$✨}contrast-background); #{$✨}background-color: var(#{$✨}contrast-background);
#{$✨}border-color: var(#{$✨}contrast-border); #{$✨}border-color: var(#{$✨}contrast-border);
#{$✨}color: var(#{$✨}contrast-inverse); #{$✨}color: var(#{$✨}contrast-inverse);
@ -117,7 +123,7 @@
} }
// Outline (primary) // Outline (primary)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline, :is(button, [type="submit"], input[type="button"], [role="button"]).outline,
input[type="reset"].outline { input[type="reset"].outline {
#{$✨}background-color: transparent; #{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary); #{$✨}color: var(#{$✨}primary);
@ -130,7 +136,7 @@
} }
// Outline (secondary) // Outline (secondary)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary, :is(button, [type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline { input[type="reset"].outline {
#{$✨}color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary);
#{$✨}border-color: currentColor; #{$✨}border-color: currentColor;
@ -141,7 +147,7 @@
} }
// Outline (contrast) // Outline (contrast)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast { :is(button, [type="submit"], input[type="button"], [role="button"]).outline.contrast {
#{$✨}color: var(#{$✨}contrast); #{$✨}color: var(#{$✨}contrast);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
@ -172,13 +178,13 @@
// Button [disabled] // Button [disabled]
:where( :where(
button, button,
input[type="submit"], [type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"], input[type="button"],
[role="button"] [role="button"]
)[disabled], )[disabled],
:where(fieldset[disabled]) :where(fieldset[disabled])
:is(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) { :is(button, [type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }

6
scss/content/_link.scss
View file

@ -57,4 +57,10 @@
} }
} }
} }
a {
&[role="button"] {
display: inline-block;
}
}
} }