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

refactor: modules and css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-23 10:47:50 +07:00
parent 2e4d6c66ec
commit ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
Download patch file Download diff file Expand all files Collapse all files

73
scss/forms/_input-date.scss
View file

@ -1,42 +1,45 @@
@use "sass:map";
@use "../settings" as *;
/**
* Input type datetime
*/
@if map.get($modules, "forms/input-date") {
/**
* 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;
// :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);
}
}
// 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;
}
}
// 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;
}