mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
62 lines
1.7 KiB
SCSS
62 lines
1.7 KiB
SCSS
@use "sass:map";
|
|
@use "../settings" as *;
|
|
|
|
@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 $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);
|
|
}
|
|
}
|
|
|
|
@if map.get($modules, "forms/input-file") {
|
|
/**
|
|
* 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;
|
|
|
|
&::file-selector-button {
|
|
@include file-selector-button;
|
|
}
|
|
|
|
&::-webkit-file-upload-button {
|
|
@include file-selector-button;
|
|
}
|
|
|
|
&::-ms-browse {
|
|
@include file-selector-button;
|
|
}
|
|
}
|
|
}
|