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

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2024-12-31 05:18:39 +00:00
parent ddf41a191a
commit 951aae3801
77 changed files with 7702 additions and 7702 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,60 +1,60 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-date") {
/**
* Input type datetime
*/
// :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
#{$css-var-prefix}icon-position: 0.75rem;
#{$css-var-prefix}icon-width: 1rem;
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
background-image: var(#{$css-var-prefix}icon-date);
background-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$css-var-prefix}icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(#{$css-var-prefix}icon-time);
}
}
// Calendar picker
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position);
opacity: 0;
}
}
// Calendar icons are hidden in Firefox
@if $enable-important {
@-moz-document url-prefix() {
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important;
}
}
}
[dir="rtl"]
#{$parent-selector}
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-date") {
/**
* Input type datetime
*/
// :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
#{$css-var-prefix}icon-position: 0.75rem;
#{$css-var-prefix}icon-width: 1rem;
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
background-image: var(#{$css-var-prefix}icon-date);
background-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$css-var-prefix}icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(#{$css-var-prefix}icon-time);
}
}
// Calendar picker
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position);
opacity: 0;
}
}
// Calendar icons are hidden in Firefox
@if $enable-important {
@-moz-document url-prefix() {
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important;
}
}
}
[dir="rtl"]
#{$parent-selector}
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
}