/* ------------------------------------------------------------------------------
*
* # Bootstrap file input
*
* File input styling for Bootstrap 3.0
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Layout
// ------------------------------
// With input field
.file-input {
overflow-x: auto;
display: inline-block;
width: 100%;
.btn[disabled],
.btn .disabled {
cursor: @cursor-disabled;
}
}
// Button only
.btn-file {
position: relative;
overflow: hidden;
// Hide original file input
input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
background: none repeat scroll 0 0 transparent;
cursor: inherit;
display: block;
.opacity(0);
}
}
// Caption
// ------------------------------
// Base
.file-caption {
> span {
display: inline-block;
float: left;
margin-top: 3px;
margin-right: 6px;
}
[class*=icon-] {
display: none;
}
}
// Name
.file-caption-name {
display: inline-block;
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 85%;
}
// Error
.file-error-message {
background-color: #f5f5f5;
color: @text-muted;
text-align: center;
border-radius: @border-radius-small;
padding: 5px;
font-size: @font-size-small;
}
// Disabled
.file-caption-disabled {
background-color: @input-bg-disabled;
cursor: @cursor-disabled;
}
// Caption
// ------------------------------
// Base
.file-preview {
border-radius: @border-radius-small;
border: 1px solid @panel-default-border;
width: 100%;
margin-bottom: @line-height-computed;
position: relative;
// Close button
.close {
font-weight: 400;
font-size: @font-size-h5;
opacity: 1;
position: absolute;
top: 0;
right: 0;
background-color: #FFF;
padding: 8px;
line-height: 0.6;
border-radius: @border-radius-base;
color: @color-grey-700;
.opacity(1);
}
// Loading icon animation
&.loading {
// Background
&:before {
content: "";
display: inline-block;
background-color: @color-slate-900;
width: (@icon-font-size * 2);
height: (@icon-font-size * 2);
position: absolute;
top: 50%;
left: 50%;
margin: -(@icon-font-size) 0 0 -(@icon-font-size);
border-radius: @border-radius-base;
.box-shadow(0 1px 5px fade(#fff, 50%));
}
// Icon itself
&:after {
content: "\eb55";
font-family: "icomoon";
display: inline-block;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
margin: -(@icon-font-size / 2) 0 0 -(@icon-font-size / 2);
font-size: @icon-font-size;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.animation(rotation 1s linear infinite);
}
}
}
// Status
.file-preview-status {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: @text-color;
background-color: fade(#fafafa, 80%);
border-top: 1px solid #ddd;
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-small;
&:empty {
padding: 0;
background-color: transparent;
border: 0;
}
}
// Frame
.file-preview-frame {
margin: 5px;
border-radius: @border-radius-base;
text-align: center;
&:hover {
border-color: #555;
}
> object {
max-height: 200px;
}
@media (min-width: @screen-sm-min) {
float: left;
height: 200px;
max-height: 200px;
}
}
// Image
.file-preview-image {
vertical-align: middle;
max-width: 100%;
display: inline-block;
@media (min-width: @screen-sm-min) {
height: 200px;
min-height: 200px;
}
}
// Preview text
.file-preview-text {
display: table-cell;
height: 200px;
color: @brand-primary;
font-size: @font-size-small;
vertical-align: middle;
text-align: center;
}
// Other preview
.file-preview-other {
display: table-cell;
height: 200px;
font-family: Monaco, Consolas, monospace;
font-size: @font-size-small;
vertical-align: middle;
text-align: center;
}
// Hide by default
.file-input-new {
.file-preview,
.close,
.fileinput-remove-button,
.fileinput-upload-button {
display: none;
}
}
// Indicator
.wrap-indicator {
font-weight: 500;
color: @brand-primary;
cursor: pointer;
}