Fileminiature Complex component
The component draws an icon and the filename in a box, that is representative of the file's format. The user can then download the file either by clicking on it's name, or it's icon
Supported events:
Show, Hide, Animation, Click, MouseEvents, Scroll, Touch, HotKey, Drag&Drop, DownloadError
Style customization
| Name | Default value | Derived value | Computed value | Comment |
|---|---|---|---|---|
| $file-box-border | 1px solid $border-color | $file-box-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef | 1px solid #e9ecef | File miniature component frame. |
| $file-box-bg-color | $white | $file-box-bg-color-->$white-->#fff | #fff | File miniature component background color. |
| $file-box-icon-color | $gray-400 | $file-box-icon-color-->$gray-400-->#ced4da | #ced4da | File miniature component icon color. |
| $file-box-icon-height | $font-size-base * 7 | - | 7 rem | File miniature component icon height. |
| $file-box-image-height | $font-size-base * 7 | - | 7 rem | File miniature component image height. |
| $file-box-icon-font-size | $font-size-base * 5 | - | 5 rem | File miniature component icon size. |
| $file-box-icon-padding | $spacer ($spacer * 0.7) | $file-box-icon-padding-->$spacer 0.7rem-->$spacer ($spacer * 0.7) | 1 (1 * 0.7) | File miniature component icon container padding. |
| $file-box-icon-text-align | center | - | center | File miniature component icon alignment. |
| $file-box-name-bg-color | $light | $file-box-name-bg-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) | mix(#f8f9fa, #e9ecef, 50%) | File miniature component file name background color. |
| $file-box-name-border-top | 1px solid $border-color | $file-box-name-border-top-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef | 1px solid #e9ecef | File miniature component file name upper frame. |
| $file-box-name-color | $blue | $file-box-name-color-->$blue-->#007BFF | #007BFF | File miniature component file name color. |
| $file-box-name-align | center | - | center | - |
| $file-box-name-padding | $spacer * 0.7 | - | 0.7 | File miniature component file name padding. |
| $file-box-name-font-size | $font-size-base | $file-box-name-font-size-->$font-size-base-->0.8125rem | 0.8125rem | File miniature component file name font size. |