mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 11:16:15 -04:00
New form elements
- 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
parent
86a54ed191
commit
456539a52e
21 changed files with 1518 additions and 555 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
268
scss/content/_form-alt-input-types.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -164,9 +164,8 @@ textarea {
|
|||
background-color $transition,
|
||||
border-color $transition,
|
||||
color $transition,
|
||||
border-color $transition,
|
||||
box-shadow $transition;
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue