You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
697 lines
14 KiB
SCSS
697 lines
14 KiB
SCSS
3 years ago
|
/*!
|
||
|
* bootstrap-fileinput v4.4.9
|
||
|
* http://plugins.krajee.com/file-input
|
||
|
*
|
||
|
* Krajee default styling for bootstrap-fileinput.
|
||
|
*
|
||
|
* Author: Kartik Visweswaran
|
||
|
* Copyright: 2014 - 2018, Kartik Visweswaran, Krajee.com
|
||
|
*
|
||
|
* Licensed under the BSD 3-Clause
|
||
|
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
|
||
|
*/
|
||
|
//colors
|
||
|
$mountain-mist: #999 !default;
|
||
|
$apple-blossom: #a94442 !default;
|
||
|
$vanilla-ice: #f2dede !default;
|
||
|
$oyster-pink: #ebccd1 !default;
|
||
|
$gallery: #eee !default;
|
||
|
$alto: #ddd !default;
|
||
|
$green: #008000 !default;
|
||
|
$zorba: #a2958a !default;
|
||
|
$mine-shaft: #333 !default;
|
||
|
$boston-blue: #428bca !default;
|
||
|
$tapa: #777 !default;
|
||
|
$black: #000 !default;
|
||
|
$mystic: #e1edf7 !default;
|
||
|
$perano: #a1abff !default;
|
||
|
$silver-chalice: #aaa !default;
|
||
|
$viking: #5acde2 !default;
|
||
|
$curious-blue: #1c94c4 !default;
|
||
|
$link-water: #d9edf7 !default;
|
||
|
|
||
|
//fonts
|
||
|
$font-0: Impact !default;
|
||
|
$font-1: Charcoal !default;
|
||
|
$font-2: sans-serif !default;
|
||
|
$font-3: Menlo !default;
|
||
|
$font-4: Monaco !default;
|
||
|
$font-5: Consolas !default;
|
||
|
$font-6: "Courier New" !default;
|
||
|
$font-7: monospace !default;
|
||
|
|
||
|
//urls
|
||
|
$url-0: url(../img/loading.gif) !default;
|
||
|
$url-1: url(../img/loading-sm.gif) !default;
|
||
|
|
||
|
//standard measures
|
||
|
$radius: 4px !default;
|
||
|
$pad: 5px !default;
|
||
|
$border: 1px !default;
|
||
|
|
||
|
//operations
|
||
|
@function multiply($pixels, $multiplier) {
|
||
|
@return $pixels * $multiplier;
|
||
|
}
|
||
|
|
||
|
//@extend-elements
|
||
|
%set-invisible {
|
||
|
width: 0;
|
||
|
height: 0;
|
||
|
}
|
||
|
|
||
|
%set-hidden {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
%set-absolute {
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
%set-relative {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
%set-text-left {
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
%set-error {
|
||
|
@extend %set-text-left;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
%set-indicator {
|
||
|
margin: $pad 0 (-$pad);
|
||
|
width: multiply($pad, 3.2);
|
||
|
height: multiply($pad, 3.2);
|
||
|
}
|
||
|
|
||
|
%set-progress {
|
||
|
height: multiply($pad, 2.2);
|
||
|
font-size: multiply($pad, 1.8);
|
||
|
line-height: multiply($pad, 2);
|
||
|
}
|
||
|
|
||
|
%set-caption {
|
||
|
display: block;
|
||
|
white-space: nowrap;
|
||
|
overflow: hidden;
|
||
|
text-overflow: ellipsis;
|
||
|
width: multiply($pad, 32);
|
||
|
height: multiply($pad, 3);
|
||
|
margin: auto;
|
||
|
}
|
||
|
|
||
|
%set-object {
|
||
|
max-width: 100%;
|
||
|
max-height: 100%;
|
||
|
width: auto;
|
||
|
}
|
||
|
|
||
|
%set-object-video {
|
||
|
@extend %set-object;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
%set-object-default {
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.kv-hidden {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
|
||
|
.hide-content .kv-file-content {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
|
||
|
.rotate-2 {
|
||
|
transform: rotateY(180deg);
|
||
|
}
|
||
|
|
||
|
.rotate-3 {
|
||
|
transform: rotate(180deg);
|
||
|
}
|
||
|
|
||
|
.rotate-4 {
|
||
|
transform: rotate(180deg) rotateY(180deg);
|
||
|
}
|
||
|
|
||
|
.rotate-5 {
|
||
|
transform: rotate(270deg) rotateY(180deg);
|
||
|
}
|
||
|
|
||
|
.rotate-6 {
|
||
|
transform: rotate(90deg);
|
||
|
}
|
||
|
|
||
|
.rotate-7 {
|
||
|
transform: rotate(90deg) rotateY(180deg);
|
||
|
}
|
||
|
|
||
|
.rotate-8 {
|
||
|
transform: rotate(270deg);
|
||
|
}
|
||
|
|
||
|
.file-input {
|
||
|
@extend %set-relative;
|
||
|
}
|
||
|
|
||
|
.file-no-browse {
|
||
|
@extend %set-absolute;
|
||
|
left: 50%;
|
||
|
bottom: 20%;
|
||
|
width: 1px;
|
||
|
height: 1px;
|
||
|
font-size: 0;
|
||
|
opacity: 0;
|
||
|
border: none;
|
||
|
background: none;
|
||
|
outline: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
|
||
|
.file-loading {
|
||
|
input[type=file] {
|
||
|
@extend %set-invisible;
|
||
|
}
|
||
|
&:before {
|
||
|
@extend %set-relative;
|
||
|
content: " Loading...";
|
||
|
display: inline-block;
|
||
|
padding-left: multiply($pad, 4);
|
||
|
line-height: multiply($pad, 3.2);
|
||
|
font-size: multiply($pad, 2.6);
|
||
|
font-variant: small-caps;
|
||
|
color: $mountain-mist;
|
||
|
background: transparent $url-0 top left no-repeat;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
input[type=file].file-loading {
|
||
|
@extend %set-invisible;
|
||
|
}
|
||
|
|
||
|
.file-object {
|
||
|
margin: 0 0 (-$pad) 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.btn-file {
|
||
|
@extend %set-relative;
|
||
|
overflow: hidden;
|
||
|
input[type=file] {
|
||
|
@extend %set-absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
min-width: 100%;
|
||
|
min-height: 100%;
|
||
|
text-align: right;
|
||
|
opacity: 0;
|
||
|
background: none repeat scroll 0 0 transparent;
|
||
|
cursor: inherit;
|
||
|
display: block;
|
||
|
}
|
||
|
::-ms-browse {
|
||
|
font-size: multiply($pad, 2000);
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-caption {
|
||
|
@extend %set-relative;
|
||
|
.file-caption-name {
|
||
|
width: 100%;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
box-shadow: none;
|
||
|
border: none;
|
||
|
background: none;
|
||
|
outline: none;
|
||
|
}
|
||
|
&.icon-visible {
|
||
|
.file-caption-icon {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.file-caption-name {
|
||
|
padding-left: multiply($pad, 3);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-caption-icon {
|
||
|
@extend %set-hidden;
|
||
|
@extend %set-absolute;
|
||
|
left: multiply($pad, 1.6);
|
||
|
}
|
||
|
|
||
|
.file-error-message {
|
||
|
color: $apple-blossom;
|
||
|
background-color: $vanilla-ice;
|
||
|
margin: $pad;
|
||
|
border: $border solid $oyster-pink;
|
||
|
border-radius: $radius;
|
||
|
padding: multiply($pad, 3);
|
||
|
pre {
|
||
|
@extend %set-error;
|
||
|
margin: $pad 0;
|
||
|
}
|
||
|
ul {
|
||
|
@extend %set-error;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-caption-disabled {
|
||
|
background-color: $gallery;
|
||
|
cursor: not-allowed;
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
.file-preview {
|
||
|
@extend %set-relative;
|
||
|
border-radius: multiply($radius, 1.25);
|
||
|
border: $border solid $alto;
|
||
|
padding: multiply($pad, 1.6);
|
||
|
width: 100%;
|
||
|
margin-bottom: $pad;
|
||
|
.btn-xs {
|
||
|
padding: multiply($pad, 0.2) $pad;
|
||
|
font-size: multiply($pad, 2.4);
|
||
|
line-height: 1.5;
|
||
|
border-radius: multiply($radius, 0.75);
|
||
|
}
|
||
|
.fileinput-remove {
|
||
|
@extend %set-absolute;
|
||
|
top: multiply($pad, 0.2);
|
||
|
right: multiply($pad, 0.2);
|
||
|
line-height: multiply($pad, 2);
|
||
|
}
|
||
|
.clickable {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-preview-image {
|
||
|
font: multiply($pad, 8) $font-0, $font-1, $font-2;
|
||
|
color: $green;
|
||
|
}
|
||
|
|
||
|
.krajee-default {
|
||
|
&.file-preview-frame {
|
||
|
@extend %set-relative;
|
||
|
margin: multiply($pad, 1.6);
|
||
|
border: $border solid $alto;
|
||
|
box-shadow: $border $border $pad 0 $zorba;
|
||
|
padding: multiply($pad, 1.2);
|
||
|
float: left;
|
||
|
text-align: center;
|
||
|
.kv-file-content {
|
||
|
width: multiply($pad, 42.6);
|
||
|
height: multiply($pad, 32);
|
||
|
}
|
||
|
.file-thumbnail-footer {
|
||
|
height: multiply($pad, 14);
|
||
|
}
|
||
|
&:not(.file-preview-error):hover {
|
||
|
box-shadow: multiply($pad, 0.6) multiply($pad, 0.6) $pad 0 $mine-shaft;
|
||
|
}
|
||
|
}
|
||
|
.file-preview-text {
|
||
|
display: block;
|
||
|
color: $boston-blue;
|
||
|
border: $border solid $alto;
|
||
|
font-family: $font-3, $font-4, $font-5, $font-6, $font-7;
|
||
|
outline: none;
|
||
|
padding: multiply($pad, 1.6);
|
||
|
resize: none;
|
||
|
}
|
||
|
.file-preview-html {
|
||
|
border: $border solid $alto;
|
||
|
padding: multiply($pad, 1.6);
|
||
|
overflow: auto;
|
||
|
}
|
||
|
.file-actions {
|
||
|
@extend %set-text-left;
|
||
|
}
|
||
|
.file-other-error {
|
||
|
@extend %set-text-left;
|
||
|
}
|
||
|
.file-other-icon {
|
||
|
font-size: 6em;
|
||
|
}
|
||
|
.file-footer-buttons {
|
||
|
float: right;
|
||
|
}
|
||
|
.file-footer-caption {
|
||
|
display: block;
|
||
|
text-align: center;
|
||
|
padding-top: multiply($pad, 0.8);
|
||
|
font-size: multiply($pad, 2.2);
|
||
|
color: $tapa;
|
||
|
margin-bottom: multiply($pad, 3);
|
||
|
}
|
||
|
.file-preview-error {
|
||
|
opacity: 0.65;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
.file-drag-handle {
|
||
|
@extend %set-indicator;
|
||
|
}
|
||
|
.file-upload-indicator {
|
||
|
@extend %set-indicator;
|
||
|
}
|
||
|
.file-thumb-progress {
|
||
|
@extend %set-absolute;
|
||
|
height: multiply($pad, 2.2);
|
||
|
top: multiply($pad, 7.4);
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
.progress {
|
||
|
@extend %set-progress;
|
||
|
}
|
||
|
.progress-bar {
|
||
|
@extend %set-progress;
|
||
|
}
|
||
|
}
|
||
|
.file-thumbnail-footer {
|
||
|
@extend %set-relative;
|
||
|
}
|
||
|
.file-caption-info {
|
||
|
@extend %set-caption;
|
||
|
}
|
||
|
.file-size-info {
|
||
|
@extend %set-caption;
|
||
|
}
|
||
|
&.kvsortable-ghost {
|
||
|
background: $mystic;
|
||
|
border: multiply($border, 2) solid $perano;
|
||
|
}
|
||
|
.file-preview-other:hover {
|
||
|
opacity: 0.8;
|
||
|
}
|
||
|
.file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
|
||
|
color: $black;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.kv-upload-progress {
|
||
|
.progress {
|
||
|
height: multiply($pad, 4);
|
||
|
line-height: multiply($pad, 4);
|
||
|
margin: multiply($pad, 2) 0;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
.progress-bar {
|
||
|
height: multiply($pad, 4);
|
||
|
line-height: multiply($pad, 4);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-zoom-dialog {
|
||
|
.file-other-icon {
|
||
|
//noinspection CssOverwrittenProperties
|
||
|
font-size: 22em;
|
||
|
//noinspection CssOverwrittenProperties
|
||
|
font-size: 50vmin;
|
||
|
}
|
||
|
.modal-dialog {
|
||
|
@extend %set-relative;
|
||
|
width: auto;
|
||
|
}
|
||
|
.modal-header {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: space-between;
|
||
|
&:before {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
&:after {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
}
|
||
|
.btn-navigate {
|
||
|
@extend %set-absolute;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
background: transparent;
|
||
|
text-decoration: none;
|
||
|
outline: none;
|
||
|
opacity: 0.7;
|
||
|
top: 45%;
|
||
|
font-size: 4em;
|
||
|
color: $curious-blue;
|
||
|
&:not([disabled]):hover {
|
||
|
outline: none;
|
||
|
box-shadow: none;
|
||
|
opacity: 0.6;
|
||
|
}
|
||
|
}
|
||
|
.floating-buttons {
|
||
|
@extend %set-absolute;
|
||
|
top: $pad;
|
||
|
right: multiply($pad, 2);
|
||
|
}
|
||
|
.btn-navigate[disabled] {
|
||
|
opacity: 0.3;
|
||
|
}
|
||
|
.btn-prev {
|
||
|
left: multiply($pad, 0.2);
|
||
|
}
|
||
|
.btn-next {
|
||
|
right: multiply($pad, 0.2);
|
||
|
}
|
||
|
.kv-zoom-title {
|
||
|
font-weight: 300;
|
||
|
color: $mountain-mist;
|
||
|
max-width: 50%;
|
||
|
overflow: hidden;
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-input-new {
|
||
|
.file-preview {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.close {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.glyphicon-file {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.fileinput-remove-button {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.fileinput-upload-button {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.no-browse {
|
||
|
.input-group-btn {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.form-control {
|
||
|
border-top-right-radius: $radius;
|
||
|
border-bottom-right-radius: $radius;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-input-ajax-new {
|
||
|
.fileinput-remove-button {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.fileinput-upload-button {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.no-browse {
|
||
|
.input-group-btn {
|
||
|
@extend %set-hidden;
|
||
|
}
|
||
|
.form-control {
|
||
|
border-top-right-radius: $radius;
|
||
|
border-bottom-right-radius: $radius;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-caption-main {
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.file-thumb-loading {
|
||
|
background: transparent $url-0 no-repeat scroll center center content-box !important;
|
||
|
}
|
||
|
|
||
|
.file-drop-zone {
|
||
|
border: $border dashed $silver-chalice;
|
||
|
border-radius: $radius;
|
||
|
height: 100%;
|
||
|
text-align: center;
|
||
|
vertical-align: middle;
|
||
|
margin: multiply($pad, 2.4) multiply($pad, 3) multiply($pad, 2.4) multiply($pad, 2.4);
|
||
|
padding: $pad;
|
||
|
&.clickable {
|
||
|
&:hover {
|
||
|
border: multiply($border, 2) dashed $mountain-mist;
|
||
|
}
|
||
|
&:focus {
|
||
|
border: multiply($border, 2) solid $viking;
|
||
|
}
|
||
|
}
|
||
|
.file-preview-thumbnails {
|
||
|
cursor: default;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-drop-zone-title {
|
||
|
color: $silver-chalice;
|
||
|
font-size: 1.6em;
|
||
|
padding: multiply($pad, 17) multiply($pad, 2);
|
||
|
cursor: default;
|
||
|
}
|
||
|
|
||
|
.file-highlighted {
|
||
|
border: multiply($border, 2) dashed $mountain-mist !important;
|
||
|
background-color: $gallery;
|
||
|
}
|
||
|
|
||
|
.file-uploading {
|
||
|
background: $url-1 no-repeat center bottom multiply($pad, 2);
|
||
|
opacity: 0.65;
|
||
|
}
|
||
|
|
||
|
@media(min-width: 576px) {
|
||
|
.file-zoom-dialog .modal-dialog {
|
||
|
max-width: 500px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media(min-width: 992px) {
|
||
|
.file-zoom-dialog .modal-lg {
|
||
|
max-width: 800px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-zoom-fullscreen {
|
||
|
&.modal {
|
||
|
position: fixed;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
}
|
||
|
.modal-dialog {
|
||
|
position: fixed;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
max-width: 100%;
|
||
|
max-height: 100%;
|
||
|
}
|
||
|
.modal-content {
|
||
|
border-radius: 0;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
.modal-body {
|
||
|
overflow-y: auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.floating-buttons {
|
||
|
z-index: 3000;
|
||
|
.btn-kv {
|
||
|
margin-left: multiply($pad, 0.6);
|
||
|
z-index: 3000;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-zoom-content {
|
||
|
height: multiply($pad, 96);
|
||
|
text-align: center;
|
||
|
.file-preview-image {
|
||
|
max-height: 100%;
|
||
|
}
|
||
|
.file-preview-video {
|
||
|
max-height: 100%;
|
||
|
}
|
||
|
.is-portrait-gt4 {
|
||
|
margin-top: multiply($pad, 12);
|
||
|
}
|
||
|
> .file-object {
|
||
|
&.type-image {
|
||
|
@extend %set-object;
|
||
|
height: auto;
|
||
|
min-height: inherit;
|
||
|
}
|
||
|
&.type-video {
|
||
|
@extend %set-object-video;
|
||
|
}
|
||
|
&.type-flash {
|
||
|
@extend %set-object-video;
|
||
|
}
|
||
|
&.type-audio {
|
||
|
width: auto;
|
||
|
height: multiply($pad, 6);
|
||
|
}
|
||
|
&.type-pdf {
|
||
|
@extend %set-object-default;
|
||
|
}
|
||
|
&.type-html {
|
||
|
@extend %set-object-default;
|
||
|
}
|
||
|
&.type-text {
|
||
|
@extend %set-object-default;
|
||
|
}
|
||
|
&.type-default {
|
||
|
@extend %set-object-default;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and(max-width: 767px) {
|
||
|
.file-preview-thumbnails {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
.file-zoom-dialog .modal-header {
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and(max-width: 350px) {
|
||
|
.krajee-default.file-preview-frame .kv-file-content {
|
||
|
width: multiply($pad, 32);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.file-loading[dir=rtl]:before {
|
||
|
background: transparent $url-0 top right no-repeat;
|
||
|
padding-left: 0;
|
||
|
padding-right: multiply($pad, 4);
|
||
|
}
|
||
|
|
||
|
.file-sortable .file-drag-handle {
|
||
|
cursor: move;
|
||
|
opacity: 1;
|
||
|
&:hover {
|
||
|
opacity: 0.7;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.clickable .file-drop-zone-title {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.kv-zoom-actions .btn-kv {
|
||
|
margin-left: multiply($pad, 0.6);
|
||
|
}
|
||
|
|
||
|
.file-preview-initial.sortable-chosen {
|
||
|
background-color: $link-water;
|
||
|
}
|