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

Merge pull request #319 from picocss/ll/v2-refactor-input-file

Browse source 
refactor: input file
This commit is contained in:
Lucas Larroche 2023-02-19 10:28:46 +07:00 • committed by GitHub
commit b9008fff9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

7
scss/content/_button.scss
View file

@ -47,6 +47,7 @@
input[type="submit"], input[type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"], input[type="button"],
input[type="file"]::file-selector-button,
[role="button"] { [role="button"] {
#{$✨}background-color: var(#{$✨}primary-background); #{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary-border); #{$✨}border-color: var(#{$✨}primary-border);
@ -88,7 +89,8 @@
@if $enable-classes { @if $enable-classes {
// Secondary // Secondary
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary, :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"] { input[type="reset"],
input[type="file"]::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-background); #{$✨}background-color: var(#{$✨}secondary-background);
#{$✨}border-color: var(#{$✨}secondary-border); #{$✨}border-color: var(#{$✨}secondary-border);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
@ -158,7 +160,8 @@
} }
} @else { } @else {
// Secondary button without .class // Secondary button without .class
input[type="reset"] { input[type="reset"],
input[type="file"]::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);

71
scss/forms/_input-file.scss
View file

@ -1,80 +1,39 @@
@use "sass:map"; @use "sass:map";
@use "../settings" as *; @use "../settings" as *;
@mixin file-selector-button-hover {
#{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover);
}
@mixin file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-background);
#{$✨}border-color: var(#{$✨}secondary-border);
#{$✨}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)
var(#{$✨}form-element-spacing-horizontal);
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) {
@include file-selector-button-hover;
}
}
@if map.get($modules, "forms/input-file") { @if map.get($modules, "forms/input-file") {
/** /**
* Input type file * Input type file
*/ */
[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.
input[type="file"] {
#{$✨}color: var(#{$✨}muted-color); #{$✨}color: var(#{$✨}muted-color);
z-index: 1; margin-left: calc(var(#{$✨}outline-width) * -1); // 1
position: relative;
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0; padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$✨}outline-width); // 1
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
&::file-selector-button { &::file-selector-button {
@include file-selector-button; margin-right: calc(var(#{$✨}spacing) / 2);
} padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
var(#{$✨}form-element-spacing-horizontal);
&::-webkit-file-upload-button {
@include file-selector-button;
}
&::-ms-browse {
@include file-selector-button;
} }
&:is(:hover, :active, :focus) { &:is(:hover, :active, :focus) {
&::file-selector-button { &::file-selector-button {
@include file-selector-button-hover; #{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover);
}
} }
&::-webkit-file-upload-button { &:focus {
@include file-selector-button-hover; &::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);
&::-ms-browse {
@include file-selector-button-hover;
} }
} }
} }