mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-22 05:03:16 +02:00
Drop custom file upload plugin in favor of CSS
This commit is contained in:
Martijn Cuppens
@@ -23,6 +23,14 @@
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
&[type="file"] {
|
||||
overflow: hidden; // prevent pseudo element button overlap
|
||||
|
||||
&:not(:disabled):not([readonly]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
&:focus {
|
||||
color: $input-focus-color;
|
||||
@@ -56,6 +64,49 @@
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// File input buttons theming
|
||||
// stylelint-disable-next-line selector-pseudo-element-no-unknown
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin: (-$input-padding-y) (-$input-padding-x);
|
||||
margin-inline-end: $input-padding-x;
|
||||
line-height: inherit;
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
pointer-events: none;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-inline-end-width: $input-border-width;
|
||||
border-radius: 0; // stylelint-disable-line property-disallowed-list
|
||||
@include transition($btn-transition);
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-pseudo-element-no-unknown
|
||||
&:hover:not(:disabled):not([readonly])::file-selector-button {
|
||||
background-color: $form-file-button-hover-bg;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin: (-$input-padding-y) (-$input-padding-x);
|
||||
margin-inline-end: $input-padding-x;
|
||||
line-height: inherit;
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
pointer-events: none;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-inline-end-width: $input-border-width;
|
||||
border-radius: 0; // stylelint-disable-line property-disallowed-list
|
||||
@include transition($btn-transition);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
|
||||
background-color: $form-file-button-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly controls as plain text
|
||||
@@ -93,6 +144,19 @@
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
@include font-size($input-font-size-sm);
|
||||
@include border-radius($input-border-radius-sm);
|
||||
|
||||
// stylelint-disable-next-line selector-pseudo-element-no-unknown
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||
margin-inline-end: $input-padding-x-sm;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||
margin-inline-end: $input-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
@@ -100,6 +164,19 @@
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
@include font-size($input-font-size-lg);
|
||||
@include border-radius($input-border-radius-lg);
|
||||
|
||||
// stylelint-disable-next-line selector-pseudo-element-no-unknown
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||
margin-inline-end: $input-padding-x-lg;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||
margin-inline-end: $input-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-color {
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
.form-file {
|
||||
--#{$variable-prefix}form-file-height: #{$form-file-height};
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-file-input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: var(--#{$variable-prefix}form-file-height);
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus-within ~ .form-file-label {
|
||||
border-color: $form-file-focus-border-color;
|
||||
box-shadow: $form-file-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled] ~ .form-file-label .form-file-text,
|
||||
&:disabled ~ .form-file-label .form-file-text {
|
||||
background-color: $form-file-disabled-bg;
|
||||
border-color: $form-file-disabled-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: var(--#{$variable-prefix}form-file-height);
|
||||
border-color: $form-file-border-color;
|
||||
@include border-radius($form-file-border-radius);
|
||||
@include box-shadow($form-file-box-shadow);
|
||||
}
|
||||
|
||||
.form-file-text {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
padding: $form-file-padding-y $form-file-padding-x;
|
||||
overflow: hidden;
|
||||
font-family: $form-file-font-family;
|
||||
font-weight: $form-file-font-weight;
|
||||
line-height: $form-file-line-height;
|
||||
color: $form-file-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: $form-file-bg;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: $form-file-border-width;
|
||||
@include border-left-radius(inherit);
|
||||
}
|
||||
|
||||
.form-file-button {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
padding: $form-file-padding-y $form-file-padding-x;
|
||||
margin-left: -$form-file-border-width;
|
||||
line-height: $form-file-line-height;
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: $form-file-border-width;
|
||||
@include border-right-radius(inherit);
|
||||
}
|
||||
|
||||
.form-file-sm {
|
||||
--#{$variable-prefix}form-file-height: #{$form-file-height-sm};
|
||||
@include font-size($form-file-font-size-sm);
|
||||
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
padding: $form-file-padding-y-sm $form-file-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-lg {
|
||||
--#{$variable-prefix}form-file-height: #{$form-file-height-lg};
|
||||
@include font-size($form-file-font-size-lg);
|
||||
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
padding: $form-file-padding-y-lg $form-file-padding-x-lg;
|
||||
}
|
||||
}
|
||||
@@ -10,8 +10,7 @@
|
||||
width: 100%;
|
||||
|
||||
> .form-control,
|
||||
> .form-select,
|
||||
> .form-file {
|
||||
> .form-select {
|
||||
position: relative; // For focus state's z-index
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
@@ -20,26 +19,10 @@
|
||||
|
||||
// Bring the "active" form control to the top of surrounding elements
|
||||
> .form-control:focus,
|
||||
> .form-select:focus,
|
||||
> .form-file .form-file-input:focus ~ .form-file-label {
|
||||
> .form-select:focus {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Bring the custom file input above the label
|
||||
> .form-file {
|
||||
> .form-file-input:focus {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&:not(:last-child) > .form-file-label {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
&:not(:first-child) > .form-file-label {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure buttons are always above inputs for more visually pleasing borders.
|
||||
// This isn't needed for `.input-group-text` since it shares the same border-color
|
||||
// as our inputs.
|
||||
|
||||
Reference in New Issue
Block a user