61 lines
2 KiB
SCSS
61 lines
2 KiB
SCSS
@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;
|
|
}
|
|
}
|