mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
59 lines
1.5 KiB
SCSS
59 lines
1.5 KiB
SCSS
|
@use "../settings";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Input type file
|
||
|
|
*/
|
||
|
|
|
||
|
|
[type="file"] {
|
||
|
|
--color: var(--muted-color);
|
||
|
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
background: none;
|
||
|
|
|
||
|
|
@mixin file-selector-button {
|
||
|
|
--background-color: var(--secondary);
|
||
|
|
--border-color: var(--secondary);
|
||
|
|
--color: var(--secondary-inverse);
|
||
|
|
margin-right: calc(var(--spacing) / 2);
|
||
|
|
margin-left: 0;
|
||
|
|
margin-inline-start: 0;
|
||
|
|
margin-inline-end: 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-weight: var(--font-weight);
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: var(--line-height);
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
@if settings.$enable-transitions {
|
||
|
|
transition: background-color var(--transition), border-color var(--transition),
|
||
|
|
color var(--transition), box-shadow var(--transition);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:is(:hover, :active, :focus) {
|
||
|
|
--background-color: var(--secondary-hover);
|
||
|
|
--border-color: var(--secondary-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::file-selector-button {
|
||
|
|
@include file-selector-button;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-file-upload-button {
|
||
|
|
@include file-selector-button;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-ms-browse {
|
||
|
|
@include file-selector-button;
|
||
|
|
}
|
||
|
|
}
|