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

Fix: Input type date icon position

Browse source
This commit is contained in:
Lucas Larroche 2022-01-04 22:08:36 +07:00
parent f8ad8c9f23
commit 07e9dc2587
13 changed files with 41 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

18
css/pico.classless.css
View file

@ -1400,10 +1400,12 @@ label > input, label > select, label > textarea {
} }
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] { 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); --icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date); background-image: var(--icon-date);
background-position: center right 0.75rem; background-position: center right var(--icon-position);
background-size: 1rem auto; background-size: var(--icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
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=time] {
@ -1415,6 +1417,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[type=month]::-webkit-calendar-picker-indicator, [type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0; opacity: 0;
} }
@ -1425,13 +1430,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[dir=rtl] [type=week] { [dir=rtl] [type=week] {
text-align: right; 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] { [type=file] {
--color: var(--muted-color); --color: var(--muted-color);

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

18
css/pico.css
View file

@ -1587,10 +1587,12 @@ label > input, label > select, label > textarea {
} }
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] { 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); --icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date); background-image: var(--icon-date);
background-position: center right 0.75rem; background-position: center right var(--icon-position);
background-size: 1rem auto; background-size: var(--icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
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=time] {
@ -1602,6 +1604,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[type=month]::-webkit-calendar-picker-indicator, [type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0; opacity: 0;
} }
@ -1612,13 +1617,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[dir=rtl] [type=week] { [dir=rtl] [type=week] {
text-align: right; 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] { [type=file] {
--color: var(--muted-color); --color: var(--muted-color);

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -1370,10 +1370,12 @@ label > input, label > select, label > textarea {
} }
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] { 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); --icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date); background-image: var(--icon-date);
background-position: center right 0.75rem; background-position: center right var(--icon-position);
background-size: 1rem auto; background-size: var(--icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
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=time] {
@ -1385,6 +1387,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[type=month]::-webkit-calendar-picker-indicator, [type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator { [type=week]::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0; opacity: 0;
} }
@ -1395,13 +1400,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[dir=rtl] [type=week] { [dir=rtl] [type=week] {
text-align: right; 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] { [type=file] {
--color: var(--muted-color); --color: var(--muted-color);

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

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

@ -41,10 +41,12 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
&[type="month"], &[type="month"],
&[type="time"], &[type="time"],
&[type="week"] { &[type="week"] {
padding-right: calc(1.75rem + var(--spacing) * 0.5); --icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date); background-image: var(--icon-date);
background-position: center right 0.75rem; background-position: center right var(--icon-position);
background-size: 1rem auto; background-size: var(--icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -61,6 +63,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
[type="time"], [type="time"],
[type="week"] { [type="week"] {
&::-webkit-calendar-picker-indicator { &::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0; opacity: 0;
} }
} }
@ -72,10 +77,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
[type="time"], [type="time"],
[type="week"] { [type="week"] {
text-align: right; text-align: right;
&::-webkit-calendar-picker-indicator {
display: none;
}
} }
} }