diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/forms/_form-file.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/forms/_form-file.scss | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/assets/stylesheets/bootstrap/forms/_form-file.scss b/assets/stylesheets/bootstrap/forms/_form-file.scss new file mode 100644 index 0000000..5bc4afc --- /dev/null +++ b/assets/stylesheets/bootstrap/forms/_form-file.scss @@ -0,0 +1,91 @@ +.form-file { + --bs-form-file-height: #{$form-file-height}; + position: relative; +} + +.form-file-input { + position: relative; + z-index: 2; + width: 100%; + height: var(--bs-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(--bs-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 { + --bs-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 { + --bs-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; + } +} |