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

input[type="reset"] styles merged with .secondary

Browse source
This commit is contained in:
Lucas Larroche 2022-01-16 12:12:52 +07:00
parent f90359ad7b
commit 5b17286648
13 changed files with 137 additions and 142 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

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

File diff suppressed because one or more lines are too long

29
css/pico.css
View file

@ -1015,25 +1015,10 @@ input[type=reset]:focus,
0 0 0 var(--outline-width) var(--primary-focus); 0 0 0 var(--outline-width) var(--primary-focus);
} }
input[type=reset] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
input[type=reset]: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);
}
button.secondary, button.secondary,
input[type=submit].secondary, input[type=submit].secondary,
input[type=button].secondary, input[type=button].secondary,
input[type=reset].secondary, input[type=reset],
[role=button].secondary { [role=button].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
@ -1047,9 +1032,9 @@ input[type=submit].secondary:focus,
input[type=button].secondary:hover, input[type=button].secondary:hover,
input[type=button].secondary:active, input[type=button].secondary:active,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset].secondary:hover, input[type=reset]:hover,
input[type=reset].secondary:active, input[type=reset]:active,
input[type=reset].secondary:focus, input[type=reset]:focus,
[role=button].secondary:hover, [role=button].secondary:hover,
[role=button].secondary:active, [role=button].secondary:active,
[role=button].secondary:focus { [role=button].secondary:focus {
@ -1060,11 +1045,12 @@ input[type=reset].secondary:focus,
button.secondary:focus, button.secondary:focus,
input[type=submit].secondary:focus, input[type=submit].secondary:focus,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset].secondary:focus, input[type=reset]:focus,
[role=button].secondary:focus { [role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus); 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.contrast, button.contrast,
input[type=submit].contrast, input[type=submit].contrast,
input[type=button].contrast, input[type=button].contrast,
@ -1099,6 +1085,7 @@ input[type=reset].contrast:focus,
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus); 0 0 0 var(--outline-width) var(--contrast-focus);
} }
button.outline, button.outline,
input[type=submit].outline, input[type=submit].outline,
input[type=button].outline, input[type=button].outline,
@ -1123,6 +1110,7 @@ input[type=reset].outline:focus,
--background-color: transparent; --background-color: transparent;
--color: var(--primary-hover); --color: var(--primary-hover);
} }
button.outline.secondary, button.outline.secondary,
input[type=submit].outline.secondary, input[type=submit].outline.secondary,
input[type=button].outline.secondary, input[type=button].outline.secondary,
@ -1145,6 +1133,7 @@ input[type=reset].outline.secondary:focus,
[role=button].outline.secondary:focus { [role=button].outline.secondary:focus {
--color: var(--secondary-hover); --color: var(--secondary-hover);
} }
button.outline.contrast, button.outline.contrast,
input[type=submit].outline.contrast, input[type=submit].outline.contrast,
input[type=button].outline.contrast, input[type=button].outline.contrast,

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.fluid.classless.min.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

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

File diff suppressed because one or more lines are too long

29
css/pico.slim.css
View file

@ -943,25 +943,10 @@ input[type=reset]:focus,
0 0 0 var(--outline-width) var(--primary-focus); 0 0 0 var(--outline-width) var(--primary-focus);
} }
input[type=reset] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
input[type=reset]: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);
}
button.secondary, button.secondary,
input[type=submit].secondary, input[type=submit].secondary,
input[type=button].secondary, input[type=button].secondary,
input[type=reset].secondary, input[type=reset],
[role=button].secondary { [role=button].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
@ -975,9 +960,9 @@ input[type=submit].secondary:focus,
input[type=button].secondary:hover, input[type=button].secondary:hover,
input[type=button].secondary:active, input[type=button].secondary:active,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset].secondary:hover, input[type=reset]:hover,
input[type=reset].secondary:active, input[type=reset]:active,
input[type=reset].secondary:focus, input[type=reset]:focus,
[role=button].secondary:hover, [role=button].secondary:hover,
[role=button].secondary:active, [role=button].secondary:active,
[role=button].secondary:focus { [role=button].secondary:focus {
@ -988,11 +973,12 @@ input[type=reset].secondary:focus,
button.secondary:focus, button.secondary:focus,
input[type=submit].secondary:focus, input[type=submit].secondary:focus,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset].secondary:focus, input[type=reset]:focus,
[role=button].secondary:focus { [role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus); 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.contrast, button.contrast,
input[type=submit].contrast, input[type=submit].contrast,
input[type=button].contrast, input[type=button].contrast,
@ -1027,6 +1013,7 @@ input[type=reset].contrast:focus,
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus); 0 0 0 var(--outline-width) var(--contrast-focus);
} }
button.outline, button.outline,
input[type=submit].outline, input[type=submit].outline,
input[type=button].outline, input[type=button].outline,
@ -1051,6 +1038,7 @@ input[type=reset].outline:focus,
--background-color: transparent; --background-color: transparent;
--color: var(--primary-hover); --color: var(--primary-hover);
} }
button.outline.secondary, button.outline.secondary,
input[type=submit].outline.secondary, input[type=submit].outline.secondary,
input[type=button].outline.secondary, input[type=button].outline.secondary,
@ -1073,6 +1061,7 @@ input[type=reset].outline.secondary:focus,
[role=button].outline.secondary:focus { [role=button].outline.secondary:focus {
--color: var(--secondary-hover); --color: var(--secondary-hover);
} }
button.outline.contrast, button.outline.contrast,
input[type=submit].outline.contrast, input[type=submit].outline.contrast,
input[type=button].outline.contrast, input[type=button].outline.contrast,

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

77
scss/content/_button.scss
View file

@ -92,35 +92,15 @@ input[type="reset"],
} }
} }
// Secondary button without .class
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&: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);
}
}
// .secondary, .contrast & .outline // .secondary, .contrast & .outline
@if $enable-classes { @if $enable-classes {
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"] {
// Secondary // Secondary
&.secondary { button.secondary,
input[type="submit"].secondary,
input[type="button"].secondary,
input[type="reset"],
[role="button"].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
@ -141,7 +121,11 @@ input[type="reset"] {
} }
// Contrast // Contrast
&.contrast { button.contrast,
input[type="submit"].contrast,
input[type="button"].contrast,
input[type="reset"].contrast,
[role="button"].contrast {
--background-color: var(--contrast); --background-color: var(--contrast);
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
@ -161,7 +145,11 @@ input[type="reset"] {
} }
// Outline (primary) // Outline (primary)
&.outline { button.outline,
input[type="submit"].outline,
input[type="button"].outline,
input[type="reset"].outline,
[role="button"].outline {
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --color: var(--primary);
@ -174,7 +162,11 @@ input[type="reset"] {
} }
// Outline (secondary) // Outline (secondary)
&.outline.secondary { button.outline.secondary,
input[type="submit"].outline.secondary,
input[type="button"].outline.secondary,
input[type="reset"].outline.secondary,
[role="button"].outline.secondary {
--color: var(--secondary); --color: var(--secondary);
&:hover, &:hover,
@ -185,7 +177,11 @@ input[type="reset"] {
} }
// Outline (contrast) // Outline (contrast)
&.outline.contrast { button.outline.contrast,
input[type="submit"].outline.contrast,
input[type="button"].outline.contrast,
input[type="reset"].outline.contrast,
[role="button"].outline.contrast {
--color: var(--contrast); --color: var(--contrast);
&:hover, &:hover,
@ -195,6 +191,27 @@ input[type="reset"] {
} }
} }
} }
@else {
// Secondary button without .class
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&: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);
}
}
} }
// Button [disabled] // Button [disabled]