mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16: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
|
|
@ -3,22 +3,8 @@
|
|||
* Alternatives input types (Not Checkboxes & Radios)
|
||||
*/
|
||||
|
||||
// Force height
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"],
|
||||
[type="search"] {
|
||||
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
|
||||
}
|
||||
|
||||
// Color
|
||||
[type="color"] {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// Wrapper
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
|
|
@ -31,9 +17,11 @@
|
|||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
}
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -251,8 +239,8 @@
|
|||
}
|
||||
|
||||
// Search
|
||||
[type="search"]{
|
||||
padding-left: #{$spacing-input-button-horizontal + 1.5rem};
|
||||
input[type="search"] {
|
||||
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
|
||||
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
|
||||
// Source: https://feathericons.com/
|
||||
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='#{$icon-color}' 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");
|
||||
|
|
|
|||
|
|
@ -5,12 +5,16 @@
|
|||
|
||||
[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: $spacing-label-input;
|
||||
border-width: 2px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&::-ms-check {
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ textarea {
|
|||
}
|
||||
|
||||
// Remove the border and padding in all browsers (opinionated)
|
||||
[type="color"],
|
||||
[type="file"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
|
|
@ -116,6 +116,11 @@ textarea {
|
|||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"]):not([type="radio"]) {
|
||||
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
|
|
@ -144,20 +149,35 @@ fieldset legend {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Inputs (Commons styles)
|
||||
input,
|
||||
// Inputs (Not Checkboxes, Radios, Range, File)
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Inputs (Not Checkboxes, Radios)
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: $spacing-typography;
|
||||
}
|
||||
|
||||
// Inputs (Commons styles)
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: $round;
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -202,12 +222,10 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
// Text, Select & Textarea
|
||||
// Validation states for Text, Select & Textarea
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: $spacing-typography;
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
|
||||
@if $enable-input-states and $enable-classes {
|
||||
|
||||
|
|
@ -221,13 +239,11 @@ textarea {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
// border-bottom: 1px solid var(--valid);
|
||||
// Source: https://feathericons.com/
|
||||
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($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
// border-bottom: 1px solid var(--invalid);
|
||||
// Source: https://feathericons.com/
|
||||
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($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ $enable-transitions: false;
|
|||
@import "content/button"; // button, a[role=button], type=button, type=submit, ...
|
||||
// @import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
// @import "content/code"; // pre, code, ...
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue