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

New form elements

Browse source 
- CSS icons color dynamization in `_color.scss`
- Bigger Checkboxes and Radio buttons
- Small refactoring for Checkboxes and Radio buttons in `_form.scss` and `form-checkbox-radio.scss`
- Styles for new form elements: `type=date`, `type=datetime-local`, `type=month`, `type=time`, `type=week`, `type=range`, `type=search`
- Reordering @import in `pico.scss` and `pico.slim.scss`
This commit is contained in:
Lucas 2020-09-24 22:35:30 +07:00
parent 86a54ed191
commit 456539a52e
21 changed files with 1518 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

389
css/pico.classless.css
View file

@ -641,6 +641,98 @@ svg:not(:root) {
overflow: hidden;
}
/**
* Button
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button {
display: block;
width: 100%;
margin-bottom: 1.5rem;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:hover,
[type="file"]::-webkit-file-upload-button:active,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
background-color: var(--primary-hover);
}
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
input[type="reset"] {
cursor: pointer;
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
}
/**
* Form elements
*/
@ -760,7 +852,7 @@ textarea {
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, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
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;
}
input::placeholder, input::-webkit-input-placeholder,
@ -803,31 +895,34 @@ textarea[disabled] ~ label {
color: var(--muted-text);
}
input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
background-color: var(--muted-background);
}
input[disabled],
select[disabled],
textarea[disabled] {
background-color: var(--muted-background);
cursor: not-allowed;
opacity: .5;
}
input:not([type="checkbox"]):not([type="radio"]),
input,
select,
textarea {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
}
input[type="color"] {
height: calc(3rem + 2px);
}
select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
padding-right: 2.5rem;
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
@ -844,7 +939,7 @@ textarea + small {
margin-bottom: 1.5rem;
}
label > input:not([type="checkbox"]):not([type="radio"]),
label > input,
label > select,
label > textarea {
margin-top: 0.125rem;
@ -852,19 +947,17 @@ label > textarea {
/**
* Form elements
* Checkboxes & Radios
*/
[type="checkbox"],
[type="radio"] {
display: inline-block;
width: 1em;
height: 1em;
width: 1.25rem;
height: 1.25rem;
margin-right: .375rem;
margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle;
cursor: pointer;
transition: none;
}
[type="checkbox"]::-ms-check,
@ -879,7 +972,7 @@ label > textarea {
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: .66rem auto;
background-size: .75rem auto;
}
[type="checkbox"] ~ label,
@ -902,17 +995,17 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1em;
width: 2.25rem;
height: 1.25rem;
border: 3px solid var(--input-border);
border-radius: 1.25rem;
background-color: var(--input-border);
line-height: 1em;
line-height: 1.25rem;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1em - 4px);
width: calc(1.25rem - 6px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
@ -928,88 +1021,222 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925em - 2px);
margin-left: calc(1.125rem - 3px);
}
/**
* Button
* Form elements
* Alternatives input types (Not Checkboxes & Radios)
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
[type="color"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"],
[type="search"] {
height: calc(1.5rem + 1.5rem + 2px);
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
[type="color"] {
position: relative;
padding: 0;
border-style: none;
overflow: hidden;
}
button {
[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
[type="color"]::-moz-focus-inner {
padding: 0;
}
[type="color"]::-webkit-color-swatch {
border: none;
}
[type="color"]::-moz-color-swatch {
border: none;
}
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
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-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
[type="date"]::-webkit-calendar-picker-indicator,
[type="datetime-local"]::-webkit-calendar-picker-indicator,
[type="month"]::-webkit-calendar-picker-indicator,
[type="time"]::-webkit-calendar-picker-indicator,
[type="week"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
[type="time"] {
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-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
[type="file"] {
padding: 0.5rem 0;
border: none;
border-radius: 0;
background: none;
color: var(--muted-text);
}
[type="file"]::-webkit-file-upload-button {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: var(--secondary);
color: var(--secondary-inverse);
}
[type="file"]:hover, [type="file"]:active, [type="file"]:focus {
border: none;
}
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
background-color: var(--secondary-hover);
}
[type="file"]:focus {
box-shadow: none;
}
[type="file"]:focus::-webkit-file-upload-button {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
margin-bottom: 1.5rem;
height: 1.25rem;
background: transparent;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
[type="range"]::-moz-range-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
[type="range"]::-ms-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
[type="range"]::-ms-fill-lower {
background-color: var(--input-border);
}
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border: 2px solid var(--background);
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
[type="range"]::-ms-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
[type="range"]:focus::-webkit-slider-runnable-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:focus::-moz-range-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:focus::-ms-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:focus::-ms-fill-lower {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
button:focus,
input[type="submit"]:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
[type="range"]:active::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
input[type="reset"] {
cursor: pointer;
[type="range"]:active::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
[type="range"]:focus {
box-shadow: none;
}
[type="search"] {
padding-left: 2.5rem;
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;
background-repeat: no-repeat;
background-size: 1rem auto;
}
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
/**
@ -1274,7 +1501,7 @@ details summary::after {
height: 1rem;
float: right;
transform: rotate(-90deg);
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;

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

File diff suppressed because one or more lines are too long

617
css/pico.css
View file

@ -724,6 +724,236 @@ svg:not(:root) {
overflow: hidden;
}
/**
* Button
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button {
display: block;
width: 100%;
margin-bottom: 1.5rem;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:hover,
[type="file"]::-webkit-file-upload-button:active,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
background-color: var(--primary-hover);
}
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
input[type="reset"] {
cursor: pointer;
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
}
/**
* Button Styles
*/
button.secondary,
input[type="submit"].secondary,
input[type="reset"],
a[role="button"].secondary {
background-color: var(--secondary);
color: var(--secondary-inverse);
}
button.secondary:hover, button.secondary:active, button.secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:active,
input[type="submit"].secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
a[role="button"].secondary:hover,
a[role="button"].secondary:active,
a[role="button"].secondary:focus {
background-color: var(--secondary-hover);
}
button.secondary:focus,
input[type="submit"].secondary:focus,
input[type="reset"]:focus,
a[role="button"].secondary:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
button.contrast,
input[type="submit"].contrast,
input[type="reset"].contrast,
a[role="button"].contrast {
background-color: var(--contrast);
color: var(--contrast-inverse);
}
button.contrast:hover, button.contrast:active, button.contrast:focus,
input[type="submit"].contrast:hover,
input[type="submit"].contrast:active,
input[type="submit"].contrast:focus,
input[type="reset"].contrast:hover,
input[type="reset"].contrast:active,
input[type="reset"].contrast:focus,
a[role="button"].contrast:hover,
a[role="button"].contrast:active,
a[role="button"].contrast:focus {
background-color: var(--contrast-hover);
}
button.contrast:focus,
input[type="submit"].contrast:focus,
input[type="reset"].contrast:focus,
a[role="button"].contrast:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
button.outline,
input[type="submit"].outline,
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
}
button.outline:hover, button.outline:active, button.outline:focus,
input[type="submit"].outline:hover,
input[type="submit"].outline:active,
input[type="submit"].outline:focus,
a.outline[role="button"]:hover,
a.outline[role="button"]:active,
a.outline[role="button"]:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
}
button.outline.secondary,
input[type="submit"].outline.secondary,
input[type="reset"].outline,
a[role="button"].outline.secondary {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
input[type="submit"].outline.secondary:hover,
input[type="submit"].outline.secondary:active,
input[type="submit"].outline.secondary:focus,
input[type="reset"].outline:hover,
input[type="reset"].outline:active,
input[type="reset"].outline:focus,
a[role="button"].outline.secondary:hover,
a[role="button"].outline.secondary:active,
a[role="button"].outline.secondary:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
}
button.outline.secondary:focus,
input[type="submit"].outline.secondary:focus,
input[type="reset"].outline:focus,
a[role="button"].outline.secondary:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
button.outline.contrast,
input[type="submit"].outline.contrast,
input[type="reset"].outline.contrast,
a[role="button"].outline.contrast {
border: 1px solid var(--contrast);
background-color: transparent;
color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
input[type="submit"].outline.contrast:hover,
input[type="submit"].outline.contrast:active,
input[type="submit"].outline.contrast:focus,
input[type="reset"].outline.contrast:hover,
input[type="reset"].outline.contrast:active,
input[type="reset"].outline.contrast:focus,
a[role="button"].outline.contrast:hover,
a[role="button"].outline.contrast:active,
a[role="button"].outline.contrast:focus {
border: 1px solid var(--contrast-hover);
color: var(--contrast-hover);
}
button.outline.contrast:focus,
input[type="submit"].outline.contrast:focus,
input[type="reset"].outline.contrast:focus,
a[role="button"].outline.contrast:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
/**
* Form elements
*/
@ -843,7 +1073,7 @@ textarea {
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, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
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;
}
input::placeholder, input::-webkit-input-placeholder,
@ -886,21 +1116,27 @@ textarea[disabled] ~ label {
color: var(--muted-text);
}
input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
background-color: var(--muted-background);
}
input[disabled],
select[disabled],
textarea[disabled] {
background-color: var(--muted-background);
cursor: not-allowed;
opacity: .5;
}
input:not([type="checkbox"]):not([type="radio"]),
input,
select,
textarea {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
}
input:not([type="checkbox"]):not([type="radio"]).valid, input:not([type="checkbox"]):not([type="radio"]).invalid,
input.valid, input.invalid,
select.valid,
select.invalid,
textarea.valid,
@ -911,22 +1147,16 @@ textarea.invalid {
background-size: 1rem auto;
}
input:not([type="checkbox"]):not([type="radio"]).valid,
input.valid,
select.valid,
textarea.valid {
border-bottom: 1px solid var(--valid);
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(40, 138, 106, 0.99)' 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");
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(40, 138, 106, 0.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");
}
input:not([type="checkbox"]):not([type="radio"]).invalid,
input.invalid,
select.invalid,
textarea.invalid {
border-bottom: 1px solid var(--invalid);
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(185, 70, 70, 0.99)' 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");
}
input[type="color"] {
height: calc(3rem + 2px);
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(185, 70, 70, 0.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");
}
select::-ms-expand {
@ -935,7 +1165,8 @@ select::-ms-expand {
}
select:not([multiple]):not([size]) {
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
padding-right: 2.5rem;
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
@ -952,7 +1183,7 @@ textarea + small {
margin-bottom: 1.5rem;
}
label > input:not([type="checkbox"]):not([type="radio"]),
label > input,
label > select,
label > textarea {
margin-top: 0.125rem;
@ -960,19 +1191,17 @@ label > textarea {
/**
* Form elements
* Checkboxes & Radios
*/
[type="checkbox"],
[type="radio"] {
display: inline-block;
width: 1em;
height: 1em;
width: 1.25rem;
height: 1.25rem;
margin-right: .375rem;
margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle;
cursor: pointer;
transition: none;
}
[type="checkbox"]::-ms-check,
@ -987,7 +1216,7 @@ label > textarea {
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: .66rem auto;
background-size: .75rem auto;
}
[type="checkbox"] ~ label,
@ -1010,17 +1239,17 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1em;
width: 2.25rem;
height: 1.25rem;
border: 3px solid var(--input-border);
border-radius: 1.25rem;
background-color: var(--input-border);
line-height: 1em;
line-height: 1.25rem;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1em - 4px);
width: calc(1.25rem - 6px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
@ -1036,226 +1265,222 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925em - 2px);
margin-left: calc(1.125rem - 3px);
}
/**
* Button
* Form elements
* Alternatives input types (Not Checkboxes & Radios)
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
[type="color"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"],
[type="search"] {
height: calc(1.5rem + 1.5rem + 2px);
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
[type="color"] {
position: relative;
padding: 0;
border-style: none;
overflow: hidden;
}
button {
display: block;
width: 100%;
margin-bottom: 1.5rem;
[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
[type="color"]::-moz-focus-inner {
padding: 0;
}
button,
input[type="submit"],
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
[type="color"]::-webkit-color-swatch {
border: none;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
background-color: var(--primary-hover);
[type="color"]::-moz-color-swatch {
border: none;
}
button:focus,
input[type="submit"]:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
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-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input[type="reset"] {
cursor: pointer;
[type="date"]::-webkit-calendar-picker-indicator,
[type="datetime-local"]::-webkit-calendar-picker-indicator,
[type="month"]::-webkit-calendar-picker-indicator,
[type="time"]::-webkit-calendar-picker-indicator,
[type="week"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
[type="time"] {
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-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
/**
* Button Styles
*/
button.secondary,
input.secondary[type="submit"],
input[type="reset"],
a.secondary[role="button"] {
[type="file"] {
padding: 0.5rem 0;
border: none;
border-radius: 0;
background: none;
color: var(--muted-text);
}
[type="file"]::-webkit-file-upload-button {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: var(--secondary);
color: var(--secondary-inverse);
}
button.secondary:hover, button.secondary:active, button.secondary:focus,
input.secondary[type="submit"]:hover,
input.secondary[type="submit"]:active,
input.secondary[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
a.secondary[role="button"]:hover,
a.secondary[role="button"]:active,
a.secondary[role="button"]:focus {
[type="file"]:hover, [type="file"]:active, [type="file"]:focus {
border: none;
}
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
background-color: var(--secondary-hover);
}
button.secondary:focus,
input.secondary[type="submit"]:focus,
input[type="reset"]:focus,
a.secondary[role="button"]:focus {
[type="file"]:focus {
box-shadow: none;
}
[type="file"]:focus::-webkit-file-upload-button {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
button.contrast,
input.contrast[type="submit"],
input.contrast[type="reset"],
a.contrast[role="button"] {
background-color: var(--contrast);
color: var(--contrast-inverse);
[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 1.25rem;
background: transparent;
}
button.contrast:hover, button.contrast:active, button.contrast:focus,
input.contrast[type="submit"]:hover,
input.contrast[type="submit"]:active,
input.contrast[type="submit"]:focus,
input.contrast[type="reset"]:hover,
input.contrast[type="reset"]:active,
input.contrast[type="reset"]:focus,
a.contrast[role="button"]:hover,
a.contrast[role="button"]:active,
a.contrast[role="button"]:focus {
background-color: var(--contrast-hover);
[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button.contrast:focus,
input.contrast[type="submit"]:focus,
input.contrast[type="reset"]:focus,
a.contrast[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
[type="range"]::-moz-range-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button.outline,
input.outline[type="submit"],
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
[type="range"]::-ms-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button.outline:hover, button.outline:active, button.outline:focus,
input.outline[type="submit"]:hover,
input.outline[type="submit"]:active,
input.outline[type="submit"]:focus,
a.outline[role="button"]:hover,
a.outline[role="button"]:active,
a.outline[role="button"]:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
[type="range"]::-ms-fill-lower {
background-color: var(--input-border);
}
button.outline.secondary,
input.outline.secondary[type="submit"],
input.outline[type="reset"],
a.outline.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border: 2px solid var(--background);
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
input.outline.secondary[type="submit"]:hover,
input.outline.secondary[type="submit"]:active,
input.outline.secondary[type="submit"]:focus,
input.outline[type="reset"]:hover,
input.outline[type="reset"]:active,
input.outline[type="reset"]:focus,
a.outline.secondary[role="button"]:hover,
a.outline.secondary[role="button"]:active,
a.outline.secondary[role="button"]:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
button.outline.secondary:focus,
input.outline.secondary[type="submit"]:focus,
input.outline[type="reset"]:focus,
a.outline.secondary[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
[type="range"]::-ms-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
button.outline.contrast,
input.outline.contrast[type="submit"],
input.outline.contrast[type="reset"],
a.outline.contrast[role="button"] {
border: 1px solid var(--contrast);
background-color: transparent;
color: var(--contrast);
[type="range"]:focus::-webkit-slider-runnable-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
input.outline.contrast[type="submit"]:hover,
input.outline.contrast[type="submit"]:active,
input.outline.contrast[type="submit"]:focus,
input.outline.contrast[type="reset"]:hover,
input.outline.contrast[type="reset"]:active,
input.outline.contrast[type="reset"]:focus,
a.outline.contrast[role="button"]:hover,
a.outline.contrast[role="button"]:active,
a.outline.contrast[role="button"]:focus {
border: 1px solid var(--contrast-hover);
color: var(--contrast-hover);
[type="range"]:focus::-moz-range-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
button.outline.contrast:focus,
input.outline.contrast[type="submit"]:focus,
input.outline.contrast[type="reset"]:focus,
a.outline.contrast[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
[type="range"]:focus::-ms-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:focus::-ms-fill-lower {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
[type="range"]:active::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
[type="range"]:active::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
[type="range"]:focus {
box-shadow: none;
}
[type="search"] {
padding-left: 2.5rem;
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;
background-repeat: no-repeat;
background-size: 1rem auto;
}
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
/**
@ -1520,7 +1745,7 @@ details summary::after {
height: 1rem;
float: right;
transform: rotate(-90deg);
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;

389
css/pico.fluid.classless.css
View file

@ -637,6 +637,98 @@ svg:not(:root) {
overflow: hidden;
}
/**
* Button
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button {
display: block;
width: 100%;
margin-bottom: 1.5rem;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:hover,
[type="file"]::-webkit-file-upload-button:active,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
background-color: var(--primary-hover);
}
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
input[type="reset"] {
cursor: pointer;
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
}
/**
* Form elements
*/
@ -756,7 +848,7 @@ textarea {
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, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
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;
}
input::placeholder, input::-webkit-input-placeholder,
@ -799,31 +891,34 @@ textarea[disabled] ~ label {
color: var(--muted-text);
}
input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
background-color: var(--muted-background);
}
input[disabled],
select[disabled],
textarea[disabled] {
background-color: var(--muted-background);
cursor: not-allowed;
opacity: .5;
}
input:not([type="checkbox"]):not([type="radio"]),
input,
select,
textarea {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
}
input[type="color"] {
height: calc(3rem + 2px);
}
select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
padding-right: 2.5rem;
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
@ -840,7 +935,7 @@ textarea + small {
margin-bottom: 1.5rem;
}
label > input:not([type="checkbox"]):not([type="radio"]),
label > input,
label > select,
label > textarea {
margin-top: 0.125rem;
@ -848,19 +943,17 @@ label > textarea {
/**
* Form elements
* Checkboxes & Radios
*/
[type="checkbox"],
[type="radio"] {
display: inline-block;
width: 1em;
height: 1em;
width: 1.25rem;
height: 1.25rem;
margin-right: .375rem;
margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle;
cursor: pointer;
transition: none;
}
[type="checkbox"]::-ms-check,
@ -875,7 +968,7 @@ label > textarea {
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: .66rem auto;
background-size: .75rem auto;
}
[type="checkbox"] ~ label,
@ -898,17 +991,17 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1em;
width: 2.25rem;
height: 1.25rem;
border: 3px solid var(--input-border);
border-radius: 1.25rem;
background-color: var(--input-border);
line-height: 1em;
line-height: 1.25rem;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1em - 4px);
width: calc(1.25rem - 6px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
@ -924,88 +1017,222 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925em - 2px);
margin-left: calc(1.125rem - 3px);
}
/**
* Button
* Form elements
* Alternatives input types (Not Checkboxes & Radios)
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
[type="color"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"],
[type="search"] {
height: calc(1.5rem + 1.5rem + 2px);
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
[type="color"] {
position: relative;
padding: 0;
border-style: none;
overflow: hidden;
}
button {
[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
[type="color"]::-moz-focus-inner {
padding: 0;
}
[type="color"]::-webkit-color-swatch {
border: none;
}
[type="color"]::-moz-color-swatch {
border: none;
}
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
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-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
[type="date"]::-webkit-calendar-picker-indicator,
[type="datetime-local"]::-webkit-calendar-picker-indicator,
[type="month"]::-webkit-calendar-picker-indicator,
[type="time"]::-webkit-calendar-picker-indicator,
[type="week"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
[type="time"] {
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-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
[type="file"] {
padding: 0.5rem 0;
border: none;
border-radius: 0;
background: none;
color: var(--muted-text);
}
[type="file"]::-webkit-file-upload-button {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: var(--secondary);
color: var(--secondary-inverse);
}
[type="file"]:hover, [type="file"]:active, [type="file"]:focus {
border: none;
}
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
background-color: var(--secondary-hover);
}
[type="file"]:focus {
box-shadow: none;
}
[type="file"]:focus::-webkit-file-upload-button {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
margin-bottom: 1.5rem;
height: 1.25rem;
background: transparent;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
[type="range"]::-moz-range-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
[type="range"]::-ms-track {
width: 100%;
height: 0.25rem;
border-radius: 0.25rem;
background-color: var(--input-border);
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
[type="range"]::-ms-fill-lower {
background-color: var(--input-border);
}
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border: 2px solid var(--background);
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
[type="range"]::-ms-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 0;
border-radius: 50%;
background-color: var(--text);
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
[type="range"]:focus::-webkit-slider-runnable-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:focus::-moz-range-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:focus::-ms-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:focus::-ms-fill-lower {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
button:focus,
input[type="submit"]:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
[type="range"]:active::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
input[type="reset"] {
cursor: pointer;
[type="range"]:active::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
[type="range"]:focus {
box-shadow: none;
}
[type="search"] {
padding-left: 2.5rem;
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;
background-repeat: no-repeat;
background-size: 1rem auto;
}
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
/**
@ -1270,7 +1497,7 @@ details summary::after {
height: 1rem;
float: right;
transform: rotate(-90deg);
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;

2
css/pico.fluid.classless.min.css vendored
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

214
css/pico.slim.css
View file

@ -662,6 +662,97 @@ svg:not(:root) {
overflow: hidden;
}
/**
* Button
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button {
display: block;
width: 100%;
margin-bottom: 1.5rem;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:hover,
[type="file"]::-webkit-file-upload-button:active,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
background-color: var(--primary-hover);
}
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
[type="file"]::-webkit-file-upload-button:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
input[type="reset"] {
cursor: pointer;
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
}
/**
* Form elements
*/
@ -823,31 +914,34 @@ textarea[disabled] ~ label {
color: var(--muted-text);
}
input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
background-color: var(--muted-background);
}
input[disabled],
select[disabled],
textarea[disabled] {
background-color: var(--muted-background);
cursor: not-allowed;
opacity: .5;
}
input:not([type="checkbox"]):not([type="radio"]),
input,
select,
textarea {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
}
input[type="color"] {
height: calc(3rem + 2px);
}
select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
padding-right: 2.5rem;
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
@ -864,7 +958,7 @@ textarea + small {
margin-bottom: 1.5rem;
}
label > input:not([type="checkbox"]):not([type="radio"]),
label > input,
label > select,
label > textarea {
margin-top: 0.125rem;
@ -872,19 +966,17 @@ label > textarea {
/**
* Form elements
* Checkboxes & Radios
*/
[type="checkbox"],
[type="radio"] {
display: inline-block;
width: 1em;
height: 1em;
width: 1.25rem;
height: 1.25rem;
margin-right: .375rem;
margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle;
cursor: pointer;
transition: none;
}
[type="checkbox"]::-ms-check,
@ -899,7 +991,7 @@ label > textarea {
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: .66rem auto;
background-size: .75rem auto;
}
[type="checkbox"] ~ label,
@ -922,17 +1014,17 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1em;
width: 2.25rem;
height: 1.25rem;
border: 3px solid var(--input-border);
border-radius: 1.25rem;
background-color: var(--input-border);
line-height: 1em;
line-height: 1.25rem;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1em - 4px);
width: calc(1.25rem - 6px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
@ -947,87 +1039,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925em - 2px);
}
/**
* Button
*/
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button {
display: block;
width: 100%;
margin-bottom: 1.5rem;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
a[role="button"] {
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
cursor: pointer;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
background-color: var(--primary-hover);
}
button:focus,
input[type="submit"]:focus,
a[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
input[type="reset"] {
cursor: pointer;
}
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
margin-left: calc(1.125rem - 3px);
}
/**

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

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.css
View file

@ -106,7 +106,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
display: inline-block;
width: 1rem;
height: 1rem;
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.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
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'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;

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

File diff suppressed because one or more lines are too long

2
docs/scss/layout/_main.scss
View file

@ -72,7 +72,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
width: 1rem;
height: 1rem;
// 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($grey-500, .66)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
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'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;

3
scss/_variables.scss
View file

@ -47,7 +47,8 @@ $spacing-block: 2rem !default;
$spacing-typography: 1.5rem !default;
// Padding for <input> and <button>
$spacing-input-button: .75rem 1rem !default;
$spacing-input-button-vertical: .75rem !default;
$spacing-input-button-horizontal: 1rem !default;
// Typography

2
scss/components/_accordion.scss
View file

@ -33,7 +33,7 @@ details {
float: right;
transform: rotate(-90deg);
// 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($grey-500, .66)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;

24
scss/content/_button-styles.scss
View file

@ -6,9 +6,9 @@
// Button .secondary
button.secondary,
input.secondary[type="submit"],
input[type="submit"].secondary,
input[type="reset"],
a.secondary[role="button"] {
a[role="button"].secondary {
background-color: var(--secondary);
color: var(--secondary-inverse);
@ -26,9 +26,9 @@
// Button .contrast
button.contrast,
input.contrast[type="submit"],
input.contrast[type="reset"],
a.contrast[role="button"] {
input[type="submit"].contrast,
input[type="reset"].contrast,
a[role="button"].contrast {
background-color: var(--contrast);
color: var(--contrast-inverse);
@ -46,7 +46,7 @@
// Button .outline
button.outline,
input.outline[type="submit"],
input[type="submit"].outline,
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
@ -63,9 +63,9 @@
// Button .outline.secondary
button.outline.secondary,
input.outline.secondary[type="submit"],
input.outline[type="reset"],
a.outline.secondary[role="button"] {
input[type="submit"].outline.secondary,
input[type="reset"].outline,
a[role="button"].outline.secondary {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
@ -85,9 +85,9 @@
// Button .outline.contrast
button.outline.contrast,
input.outline.contrast[type="submit"],
input.outline.contrast[type="reset"],
a.outline.contrast[role="button"] {
input[type="submit"].outline.contrast,
input[type="reset"].outline.contrast,
a[role="button"].outline.contrast {
border: 1px solid var(--contrast);
background-color: transparent;
color: var(--contrast);

5
scss/content/_button.scss
View file

@ -52,8 +52,10 @@ a[role="button"] {
button,
input[type="submit"],
input[type="button"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] {
padding: $spacing-input-button;
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
border: 1px solid transparent;
border-radius: $round;
outline: none;
@ -91,6 +93,7 @@ input[type="reset"] {
// Button [disabled]
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {

268
scss/content/_form-alt-input-types.scss Normal file
View file

@ -0,0 +1,268 @@
/**
* Form elements
* 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 {
padding: 0;
}
&::-moz-focus-inner {
padding: 0;
}
// Swatch
&::-webkit-color-swatch {
border: none;
}
&::-moz-color-swatch {
border: none;
}
}
// Date & Time
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
// 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-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
&::-webkit-calendar-picker-indicator {
opacity: 0;
}
}
// Time
[type="time"] {
// 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-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
// File
[type="file"] {
padding: $spacing-input-button-horizontal/2 0;
border: none;
border-radius: 0;
background: none;
color: var(--muted-text);
&::-webkit-file-upload-button {
padding-top: $spacing-input-button-horizontal/2;
padding-bottom: $spacing-input-button-horizontal/2;
background-color: var(--secondary);
color: var(--secondary-inverse);
}
&:hover,
&:active,
&:focus {
border: none;
&::-webkit-file-upload-button {
background-color: var(--secondary-hover);
}
}
&:focus {
box-shadow: none;
&::-webkit-file-upload-button {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
}
// Range
[type="range"]{
// Config
$height-track: .25rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
height: $height-thumb;
background: transparent;
// Slider Track
&::-webkit-slider-runnable-track {
width: 100%;
height: $height-track;
border-radius: $round;
background-color: var(--input-border);
@if $enable-transitions {
transition:
background-color $transition,
box-shadow $transition;
}
}
&::-moz-range-track {
width: 100%;
height:$height-track;
border-radius: $round;
background-color: var(--input-border);
@if $enable-transitions {
transition:
background-color $transition,
box-shadow $transition;
}
}
&::-ms-track {
width: 100%;
height: $height-track;
border-radius: $round;
background-color: var(--input-border);
@if $enable-transitions {
transition:
background-color $transition,
box-shadow $transition;
}
}
&::-ms-fill-lower {
background-color: var(--input-border);
}
// Slider Thumb
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: 0;
border: $border-thumb solid var(--background);
border-radius: 50%;
background-color: var(--text);
@if $enable-transitions {
transition:
background-color $transition,
transform $transition;
}
}
&::-moz-range-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: 0;
border-radius: 50%;
background-color: var(--text);
@if $enable-transitions {
transition:
background-color $transition,
transform $transition;
}
}
&::-ms-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: 0;
border-radius: 50%;
background-color: var(--text);
@if $enable-transitions {
transition:
background-color $transition,
transform $transition;
}
}
&:focus {
// Slider Track
&::-webkit-slider-runnable-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
&::-moz-range-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
&::-ms-track {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
&::-ms-fill-lower {
background-color: var(--muted-text);
box-shadow: 0 0 0 0.1rem var(--primary-focus);
}
}
&:active {
// Slider Thumb
&::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
&::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
&::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
}
}
&:focus {
box-shadow: none;
}
}
// Search
[type="search"]{
padding-left: #{$spacing-input-button-horizontal + 1.5rem};
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");
background-position: center left .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
// Cancel button
&::-webkit-search-cancel-button{
-webkit-appearance: none;
display: none;
}
}

21
scss/content/_form-checkbox-radio.scss
View file

@ -1,20 +1,17 @@
/**
* Form elements
* Checkboxes & Radios
*/
// Checkboxes & Radios
[type="checkbox"],
[type="radio"] {
display: inline-block;
width: 1em;
height: 1em;
width: 1.25rem;
height: 1.25rem;
margin-right: .375rem;
margin-bottom: $spacing-label-input;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle;
cursor: pointer;
transition: none; // Prevent frozen state on mobile devices
&::-ms-check {
display: none; // unstyle IE checkboxes
@ -27,7 +24,7 @@
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: .66rem auto;
background-size: .75rem auto;
}
& ~ label {
@ -54,9 +51,9 @@
[type="checkbox"][role="switch"] {
// Config
$switch-height: 1em;
$switch-width: 1.85em;
$switch-border: 2px;
$switch-height: 1.25rem;
$switch-width: 2.25rem;
$switch-border: 3px;
$switch-transition: .1s ease-in-out;
// Styles
@ -83,11 +80,7 @@
&:checked {
border-color: var(--primary);
background-color: var(--primary);
// Disable if check box icon is needed
background-image: none;
// Enable if check box icon is needed
// background-position: center left $switch-width/6;
// background-size: $switch-width/5 auto;
&::before {
margin-right: 0;

29
scss/content/_form.scss
View file

@ -164,7 +164,6 @@ textarea {
background-color $transition,
border-color $transition,
color $transition,
border-color $transition,
box-shadow $transition;
}
@ -193,18 +192,22 @@ textarea {
}
}
&[disabled] {
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
background-color: var(--muted-background);
}
&[disabled] {
cursor: not-allowed;
opacity: .5;
}
}
// Text, Select & Textarea
input:not([type="checkbox"]):not([type="radio"]),
input,
select,
textarea {
margin-bottom: $spacing-typography;
padding: $spacing-input-button;
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
@if $enable-input-states and $enable-classes {
@ -218,24 +221,19 @@ textarea {
}
&.valid {
border-bottom: 1px solid var(--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, .99)}' 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");
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);
// 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, .99)}' 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");
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");
}
}
}
// Color
input[type="color"] {
height: calc(3rem + 2px); // HACK
}
// Select
select {
@ -246,8 +244,9 @@ select {
}
&:not([multiple]):not([size]) {
padding-right: #{$spacing-input-button-horizontal + 1.5rem};
// 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($grey-500, .66)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
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'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
@ -270,7 +269,7 @@ textarea {
// Styles for Input inside a label
label {
& > input:not([type="checkbox"]):not([type="radio"]),
& > input,
& > select,
& > textarea {
margin-top: $spacing-label-input;

7
scss/pico.scss
View file

@ -20,10 +20,11 @@
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/form"; // label, input, select, ...
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/button"; // button, a[role=button], ...
@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-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/accessibility"; // -ms-touch-action, aria-*

7
scss/pico.slim.scss
View file

@ -40,10 +40,11 @@ $enable-transitions: false;
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/form"; // label, input, select, ...
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/button"; // button, a[role=button], ...
@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-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
// @import "content/code"; // pre, code, ...
@import "content/accessibility"; // -ms-touch-action, aria-*

6
scss/themes/default/_colors.scss
View file

@ -35,3 +35,9 @@ $green-600: hsl(160, 55%, 35%) !default;
$green-700: hsl(160, 60%, 30%) !default;
$red-700: hsl(0, 45%, 50%) !default;
$red-900: hsl(0, 45%, 40%) !default;
// Icons color
// For <details>, [type="date"], <select>, etc.
// Must be neutral to work in light or dark mode
// HACK: .99 opacity is used to force rgba() vs #hex
$icon-color: #{rgba($grey-500, .999)};