mirror of
https://github.com/picocss/pico.git
synced 2025-02-23 00:01:58 -05:00
43 lines
1.1 KiB
SCSS
43 lines
1.1 KiB
SCSS
@use "../settings" as *;
|
|
|
|
/**
|
|
* Input type datetime
|
|
*/
|
|
|
|
// :not() are needed to add Specificity and avoid !important on padding
|
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
|
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
|
#{$✨}icon-position: 0.75rem;
|
|
#{$✨}icon-width: 1rem;
|
|
padding-right: calc(var(#{$✨}icon-width) + var(#{$✨}icon-position));
|
|
background-image: var(#{$✨}icon-date);
|
|
background-position: center right var(#{$✨}icon-position);
|
|
background-size: var(#{$✨}icon-width) auto;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
// Time
|
|
&[type="time"] {
|
|
background-image: var(#{$✨}icon-time);
|
|
}
|
|
}
|
|
|
|
// Calendar picker
|
|
[type="date"],
|
|
[type="datetime-local"],
|
|
[type="month"],
|
|
[type="time"],
|
|
[type="week"] {
|
|
&::-webkit-calendar-picker-indicator {
|
|
width: var(#{$✨}icon-width);
|
|
margin-right: calc(var(#{$✨}icon-width) * -1);
|
|
margin-left: var(#{$✨}icon-position);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[dir="rtl"]
|
|
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
|
text-align: right;
|
|
}
|