3
0

Fix custom-file-input theme styles

This commit is contained in:
Jože Fortun 2024-03-06 17:14:43 +01:00
parent fed1390710
commit 9c9483e5ce
4 changed files with 20 additions and 32 deletions

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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;