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

Browser support: [type="file"]

Browse source
This commit is contained in:
Lucas Larroche 2021-10-23 16:24:10 +07:00
parent 08d6d34f44
commit 6ffe09837b
7 changed files with 254 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

80
css/pico.classless.css
View file

@ -1315,6 +1315,10 @@ label > input, label > select, label > textarea {
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]:hover, [type=file]:active, [type=file]:focus {
border: none;
background: none;
}
[type=file]::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
@ -1335,12 +1339,78 @@ label > input, label > select, label > textarea {
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
} }
[type=file]:hover, [type=file]:active, [type=file]:focus { [type=file]::file-selector-button {
--color: var(--color); --background-color: var(--secondary);
border: none; --border-color: var(--secondary);
background: none; --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
} }
[type=file]:hover::-webkit-file-upload-button, [type=file]:active::-webkit-file-upload-button, [type=file]:focus::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::-webkit-file-upload-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::-ms-browse {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
} }

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

File diff suppressed because one or more lines are too long

80
css/pico.css
View file

@ -1492,6 +1492,10 @@ label > input, label > select, label > textarea {
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]:hover, [type=file]:active, [type=file]:focus {
border: none;
background: none;
}
[type=file]::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
@ -1512,12 +1516,78 @@ label > input, label > select, label > textarea {
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
} }
[type=file]:hover, [type=file]:active, [type=file]:focus { [type=file]::file-selector-button {
--color: var(--color); --background-color: var(--secondary);
border: none; --border-color: var(--secondary);
background: none; --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
} }
[type=file]:hover::-webkit-file-upload-button, [type=file]:active::-webkit-file-upload-button, [type=file]:focus::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::-webkit-file-upload-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::-ms-browse {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
} }

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

@ -1285,6 +1285,10 @@ label > input, label > select, label > textarea {
border-radius: 0; border-radius: 0;
background: none; background: none;
} }
[type=file]:hover, [type=file]:active, [type=file]:focus {
border: none;
background: none;
}
[type=file]::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
@ -1305,12 +1309,78 @@ label > input, label > select, label > textarea {
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
} }
[type=file]:hover, [type=file]:active, [type=file]:focus { [type=file]::file-selector-button {
--color: var(--color); --background-color: var(--secondary);
border: none; --border-color: var(--secondary);
background: none; --color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
} }
[type=file]:hover::-webkit-file-upload-button, [type=file]:active::-webkit-file-upload-button, [type=file]:focus::-webkit-file-upload-button { [type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::-webkit-file-upload-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type=file]::-ms-browse {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
} }

2
css/pico.fluid.classless.min.css vendored
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

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

@ -55,8 +55,15 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
background: none; background: none;
&:hover,
&:active,
&:focus {
border: none;
background: none;
}
&::-webkit-file-upload-button { @mixin file-selector-button {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
@ -73,7 +80,7 @@
line-height: var(--line-height); line-height: var(--line-height);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
background-color var(--transition), background-color var(--transition),
@ -81,19 +88,25 @@
color var(--transition), color var(--transition),
box-shadow var(--transition); box-shadow var(--transition);
} }
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
} }
&:hover, &::file-selector-button {
&:active, @include file-selector-button;
&:focus { }
--color: var(--color);
border: none; &::-webkit-file-upload-button {
background: none; @include file-selector-button;
}
&::-webkit-file-upload-button {
--background-color: var(--secondary-hover); &::-ms-browse {
--border-color: var(--secondary-hover); @include file-selector-button;
}
} }
} }