mirror of
https://github.com/picocss/pico.git
synced 2025-02-23 00:01:58 -05:00
42 lines
1.2 KiB
SCSS
42 lines
1.2 KiB
SCSS
@use "sass:map";
|
|
@use "../settings" as *;
|
|
|
|
@if map.get($modules, "forms/input-file") {
|
|
/**
|
|
* Input type file
|
|
*/
|
|
|
|
// 1. Hack to display the outline on the focused file selector button
|
|
// with the forced overflow hidden on the input[type="file"] element.
|
|
[type="file"] {
|
|
#{$✨}color: var(#{$✨}muted-color);
|
|
margin-left: calc(var(#{$✨}outline-width) * -1); // 1
|
|
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
|
|
padding-left: var(#{$✨}outline-width); // 1
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
|
|
&::file-selector-button {
|
|
margin-right: calc(var(#{$✨}spacing) / 2);
|
|
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
|
|
var(#{$✨}form-element-spacing-horizontal);
|
|
}
|
|
|
|
&:is(:hover, :active, :focus) {
|
|
&::file-selector-button {
|
|
#{$✨}background-color: var(#{$✨}secondary-hover-background);
|
|
#{$✨}border-color: var(#{$✨}secondary-hover-border);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
&::file-selector-button {
|
|
#{$✨}box-shadow:
|
|
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
|
}
|
|
}
|
|
}
|
|
}
|