mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 18:56:15 -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
scss/content/_button.scss
View file

@ -23,7 +23,7 @@
// Correct the inability to style buttons in iOS and Safari
button,
input[type="submit"],
[type="submit"],
input[type="reset"],
input[type="button"] {
-webkit-appearance: button;
@ -33,7 +33,7 @@
// ––––––––––––––––––––
button,
input[type="submit"],
[type="submit"],
input[type="reset"],
input[type="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
@if $enable-classes {
// 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="file"]::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-background);
@ -99,7 +105,7 @@
}
// 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);
#{$✨}border-color: var(#{$✨}contrast-border);
#{$✨}color: var(#{$✨}contrast-inverse);
@ -117,7 +123,7 @@
}
// 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 {
#{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary);
@ -130,7 +136,7 @@
}
// 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 {
#{$✨}color: var(#{$✨}secondary);
#{$✨}border-color: currentColor;
@ -141,7 +147,7 @@
}
// 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);
&:is([aria-current], :hover, :active, :focus) {
@ -172,13 +178,13 @@
// Button [disabled]
:where(
button,
input[type="submit"],
[type="submit"],
input[type="reset"],
input[type="button"],
[role="button"]
)[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;
pointer-events: none;
}

6
scss/content/_link.scss
View file

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