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

Fix RTL input date

Browse source
This commit is contained in:
Lucas Larroche 2022-01-01 13:40:31 +07:00
parent ab75fca7d1
commit ba0d42b405
13 changed files with 135 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

42
css/pico.classless.css
View file

@ -1399,25 +1399,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
@ -1630,14 +1643,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

42
css/pico.css
View file

@ -1586,25 +1586,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
@ -1817,14 +1830,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

42
css/pico.fluid.classless.css
View file

@ -1369,25 +1369,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
@ -1600,14 +1613,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

59
scss/content/_form-alt-input-types.scss
View file

@ -34,26 +34,49 @@
}
// Date & Time
:not([dir="rtl"]) {
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
&[type="date"],
&[type="datetime-local"],
&[type="month"],
&[type="time"],
&[type="week"] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem 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 {
opacity: 0;
}
}
[dir="rtl"] {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
text-align: right;
&::-webkit-calendar-picker-indicator {
opacity: 0;
display: none;
}
}
// Time
[type="time"] {
background-image: var(--icon-time);
}
}
// File
@ -213,20 +236,20 @@
}
// Search
[type="search"] {
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
&[type="search"] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
@if $enable-important {
padding-left: calc(
var(--form-element-spacing-horizontal) + 1.75rem
) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
}
// Cancel button
// Cancel button
[type="search"] {
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;