mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 03:06:14 -04:00
Styles reordering for optional custom checkboxes & radios
This commit is contained in:
Lucas
parent
456539a52e
commit
b37ef21253
12 changed files with 142 additions and 206 deletions
|
|
@ -811,12 +811,16 @@ textarea {
|
|||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="file"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]) {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -839,19 +843,31 @@ fieldset legend {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.75rem 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -908,13 +924,6 @@ textarea[disabled] {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
@ -951,12 +960,16 @@ label > textarea {
|
|||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: 0.125rem;
|
||||
border-width: 2px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -1028,22 +1041,6 @@ label > textarea {
|
|||
* Form elements
|
||||
* Alternatives input types (Not Checkboxes & Radios)
|
||||
*/
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"],
|
||||
[type="search"] {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
}
|
||||
|
||||
[type="color"] {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1054,10 +1051,12 @@ label > textarea {
|
|||
|
||||
[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
[type="color"]::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
[type="date"],
|
||||
|
|
@ -1225,8 +1224,8 @@ label > textarea {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
padding-left: 2.5rem;
|
||||
input[type="search"] {
|
||||
padding-left: 2.5rem !important;
|
||||
border-radius: 3rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-position: center left .75rem;
|
||||
|
|
@ -1234,7 +1233,7 @@ label > textarea {
|
|||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button {
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
57
css/pico.css
57
css/pico.css
|
|
@ -1032,12 +1032,16 @@ textarea {
|
|||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="file"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]) {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -1060,19 +1064,31 @@ fieldset legend {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.75rem 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -1129,13 +1145,6 @@ textarea[disabled] {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
input.valid, input.invalid,
|
||||
select.valid,
|
||||
select.invalid,
|
||||
|
|
@ -1195,12 +1204,16 @@ label > textarea {
|
|||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: 0.125rem;
|
||||
border-width: 2px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -1272,22 +1285,6 @@ label > textarea {
|
|||
* Form elements
|
||||
* Alternatives input types (Not Checkboxes & Radios)
|
||||
*/
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"],
|
||||
[type="search"] {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
}
|
||||
|
||||
[type="color"] {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1298,10 +1295,12 @@ label > textarea {
|
|||
|
||||
[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
[type="color"]::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
[type="date"],
|
||||
|
|
@ -1469,8 +1468,8 @@ label > textarea {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
padding-left: 2.5rem;
|
||||
input[type="search"] {
|
||||
padding-left: 2.5rem !important;
|
||||
border-radius: 3rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-position: center left .75rem;
|
||||
|
|
@ -1478,7 +1477,7 @@ label > textarea {
|
|||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button {
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -807,12 +807,16 @@ textarea {
|
|||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="file"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]) {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -835,19 +839,31 @@ fieldset legend {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.75rem 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -904,13 +920,6 @@ textarea[disabled] {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
@ -947,12 +956,16 @@ label > textarea {
|
|||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: 0.125rem;
|
||||
border-width: 2px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -1024,22 +1037,6 @@ label > textarea {
|
|||
* Form elements
|
||||
* Alternatives input types (Not Checkboxes & Radios)
|
||||
*/
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"],
|
||||
[type="search"] {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
}
|
||||
|
||||
[type="color"] {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1050,10 +1047,12 @@ label > textarea {
|
|||
|
||||
[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
[type="color"]::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
[type="date"],
|
||||
|
|
@ -1221,8 +1220,8 @@ label > textarea {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
padding-left: 2.5rem;
|
||||
input[type="search"] {
|
||||
padding-left: 2.5rem !important;
|
||||
border-radius: 3rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-position: center left .75rem;
|
||||
|
|
@ -1230,7 +1229,7 @@ label > textarea {
|
|||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button {
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -831,12 +831,16 @@ textarea {
|
|||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="file"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]) {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -859,19 +863,31 @@ fieldset legend {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.75rem 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input::placeholder, input::-webkit-input-placeholder,
|
||||
|
|
@ -927,13 +943,6 @@ textarea[disabled] {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
@ -964,84 +973,6 @@ label > textarea {
|
|||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
* Checkboxes & Radios
|
||||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: 0.125rem;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type="checkbox"]::-ms-check,
|
||||
[type="radio"]::-ms-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked,
|
||||
[type="radio"]:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75rem auto;
|
||||
}
|
||||
|
||||
[type="checkbox"] ~ label,
|
||||
[type="radio"] ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
[type="radio"]:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-inverse);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
width: 2.25rem;
|
||||
height: 1.25rem;
|
||||
border: 3px solid var(--input-border);
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--input-border);
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"]:before {
|
||||
display: block;
|
||||
width: calc(1.25rem - 6px);
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-inverse);
|
||||
content: '';
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"]:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"]:checked::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(1.125rem - 3px);
|
||||
}
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
|
|
|
|||
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue