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

Merge pull request #112 from picocss/fix/input-type-date

Browse source 
Fix: Input type date icon position
This commit is contained in:
Lucas Larroche 2022-01-04 22:11:01 +07:00 • committed by GitHub
commit 60b4ac524b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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] {
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-position: center right 0.75rem;
background-size: 1rem auto;
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
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=time]::-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;
}
@ -1425,13 +1430,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[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] {
--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] {
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-position: center right 0.75rem;
background-size: 1rem auto;
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
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=time]::-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;
}
@ -1612,13 +1617,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[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] {
--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] {
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-position: center right 0.75rem;
background-size: 1rem auto;
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
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=time]::-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;
}
@ -1395,13 +1400,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[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] {
--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="time"],
&[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-position: center right 0.75rem;
background-size: 1rem auto;
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
@ -61,6 +63,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
[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;
}
}
@ -72,10 +77,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
[type="time"],
[type="week"] {
text-align: right;
&::-webkit-calendar-picker-indicator {
display: none;
}
}
}