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

201
scss/content/_button.scss
View file

@ -92,107 +92,124 @@ input[type="reset"],
} }
} }
// Secondary button without .class // .secondary, .contrast & .outline
input[type="reset"] { @if $enable-classes {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover, // Secondary
&:active, button.secondary,
&:focus { input[type="submit"].secondary,
--background-color: var(--secondary-hover); input[type="button"].secondary,
--border-color: var(--secondary-hover); input[type="reset"],
[role="button"].secondary {
--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);
--color: var(--secondary-inverse);
}
&: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);
}
} }
&:focus { // Contrast
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), button.contrast,
0 0 0 var(--outline-width) var(--secondary-focus); input[type="submit"].contrast,
input[type="button"].contrast,
input[type="reset"].contrast,
[role="button"].contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
}
// Outline (primary)
button.outline,
input[type="submit"].outline,
input[type="button"].outline,
input[type="reset"].outline,
[role="button"].outline {
--background-color: transparent;
--color: var(--primary);
&:hover,
&:active,
&:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// 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);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
}
// 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);
&:hover,
&:active,
&:focus {
--color: var(--contrast-hover);
}
} }
} }
// .secondary, .contrast & .outline @else {
@if $enable-classes { // Secondary button without .class
button, input[type="reset"] {
input[type="submit"], --background-color: var(--secondary);
input[type="button"], --border-color: var(--secondary);
input[type="reset"], --color: var(--secondary-inverse);
[role="button"] { cursor: pointer;
// Secondary
&.secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
&: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);
}
} }
// Contrast &:focus {
&.contrast { --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
--background-color: var(--contrast); 0 0 0 var(--outline-width) var(--secondary-focus);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
}
// Outline (primary)
&.outline {
--background-color: transparent;
--color: var(--primary);
&:hover,
&:active,
&:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// Outline (secondary)
&.outline.secondary {
--color: var(--secondary);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
}
// Outline (contrast)
&.outline.contrast {
--color: var(--contrast);
&:hover,
&:active,
&:focus {
--color: var(--contrast-hover);
}
} }
} }
} }