Fix custom-file-input theme styles
This commit is contained in:
parent
fed1390710
commit
9c9483e5ce
@ -20,7 +20,6 @@
|
||||
<b-form-file
|
||||
:placeholder="$t('label.importPlaceholder')"
|
||||
:browse-text="$t('label.browse')"
|
||||
class="font-wight-normal pointer"
|
||||
@change="loadFile"
|
||||
/>
|
||||
|
||||
@ -199,26 +198,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$input-height: 42px;
|
||||
$line-height: 30px;
|
||||
|
||||
.custom-file-input {
|
||||
height: $input-height;
|
||||
}
|
||||
|
||||
.custom-file-label {
|
||||
height: $input-height;
|
||||
font-family: var(--font-regular);
|
||||
|
||||
&::after {
|
||||
height: 100%;
|
||||
font-family: var(--btn-font-family);
|
||||
line-height: $line-height;
|
||||
background-color: var(--light);
|
||||
color: var(--dark);
|
||||
font-weight: 400;
|
||||
padding: var(btn-padding-y) var(--btn-padding-x);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -326,6 +326,7 @@
|
||||
&[disabled] ~ .custom-file-label,
|
||||
&:disabled ~ .custom-file-label {
|
||||
background-color: $custom-file-disabled-bg;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
@each $lang, $value in $custom-file-text {
|
||||
@ -340,6 +341,7 @@
|
||||
}
|
||||
|
||||
.custom-file-label {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -365,12 +367,13 @@
|
||||
display: block;
|
||||
height: $custom-file-height-inner;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
font-family: $btn-font-family;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
content: "Browse";
|
||||
@include gradient-bg($custom-file-button-bg);
|
||||
border-left: inherit;
|
||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -955,6 +955,20 @@
|
||||
text-shadow: 0 0 0 $custom-select-color;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-input {
|
||||
&:focus ~ .custom-file-label {
|
||||
border-color: $custom-file-focus-border-color;
|
||||
box-shadow: $custom-file-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled] ~ .custom-file-label,
|
||||
&:disabled ~ .custom-file-label {
|
||||
background-color: $custom-file-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-label {
|
||||
font-family: $custom-file-font-family;
|
||||
font-weight: $custom-file-font-weight;
|
||||
@ -966,12 +980,10 @@
|
||||
@include box-shadow($custom-file-box-shadow);
|
||||
|
||||
&::after {
|
||||
font-family: $btn-font-family;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
@include gradient-bg($custom-file-button-bg);
|
||||
@include border-radius(
|
||||
0 $custom-file-border-radius $custom-file-border-radius 0
|
||||
);
|
||||
}
|
||||
}
|
||||
.custom-range {
|
||||
@ -991,10 +1003,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include gradient-bg($custom-range-thumb-bg);
|
||||
border: $custom-range-thumb-border;
|
||||
|
||||
@ -148,6 +148,7 @@ $pagination-active-bg: $primary !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
|
||||
// Forms
|
||||
$input-font-family: $font-regular !default;
|
||||
$input-color: $black !default;
|
||||
$input-disabled-bg: $light !default;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user