/** * Gestion de l'uploader simple (avatar) */ /*.simple-uploader { & .simple-uploader--preview { } & .simple-uploader--btn { margin-left: 16px; } }*/ /** * Widget de choix des fichiers à envoyer */ .upload_chooser { // Zone de drag & drop & .upload_chooser--dragzone { width: 100%; display: table; margin:0 auto; vertical-align: middle; height: 280px; @include mq($to:phone) { display: block; height: auto; } } // Contenu de la zone de drag & drop (input & btn) & .upload_chooser--dragzone_content { display: table-cell; vertical-align: middle; text-align: center; border: 2px dotted grey; @include mq($to:phone) { display: block; padding:0.75em 0 0 0; } } & .upload_chooser--dragzone_info { font-size: 0.8em; } } //Lien d'upload .file-upload--wrapper { position: relative; overflow: hidden; z-index: 8; &.disabled .file-upload--input { display: none !important; } & .file-upload--input { display: block; z-index: 9; position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; @include opacity(0); } } /** * Dropdown du wigdet */ .upload_sender--dropdown { position:relative; @include mq($to:phone){position:static}; border-left: 1px solid transparent; border-right: 1px solid transparent; &.active { border-left: 1px solid #C1C1C1; border-right: 1px solid #C1C1C1; //Surcharge de la couleur de base de l'icon du header pour le dropdown & .icon-cloud-upload { color:$darkColor; } } } /* Container du weidget d'upload ---------------------------------*/ .upload_sender--dropdown_target { width: 400px; height: 230px; right: -1px; //border-left: 1px solid #C1C1C1; //border-right: 1px solid #C1C1C1; //border-bottom: 1px solid #C1C1C1; @include mq($to:phone) { width: 100%; box-sizing : border-box; right: 0; } } //Container de la liste des elements envoyés .upload_sender { border-left: 1px solid #c1c1c1; border-right: 1px solid #c1c1c1; border-bottom: 1px solid #c1c1c1; //Hauteur du widget d'upload & .upload_sender--viewport { height: 200px; } // Liste des documents & .upload_sender--document { //width: 98%; box-sizing : border-box; //margin-left:auto; //margin-right:auto; //margin: 0 auto 12px auto; border-top: 1px solid transparent; border-bottom: 1px solid transparent; //height: 43px; //line-height: 43px; padding: 8px; @extend %clearfloat; &:first-child { margin-top: 8px; } &:hover { border-top: 1px solid #F4F4F4; border-bottom: 1px solid #F4F4F4; } } /* Container du fichier envoyé -------------------------*/ & .upload_sender--document_title { float: left; width: 60%; margin:5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* lien vers le fichier envoyé ----------------------------------*/ & .upload_sender--document_link { display: block; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; & [class*="icon-"] { display: none; } &.disabled:hover { text-decoration: none !important; cursor: default; } } /* Statut du document envoyé ------------------------------*/ & .upload_sender--document_status { float: left; width: 38%; margin:5px 0; padding-left: 2%; position: relative; text-align: right; white-space: nowrap; overflow: hidden; font-weight: bold; text-overflow: ellipsis; z-index: 2; } /* Container Widget vide, sans upload de fichier en cours -----------------------------------------------------------*/ & .upload_sender--content_empty_container { display: table; width: 100%; height: 200px; } /* Element pour l'affichage du message d'aucun fichier en cours d'upload -------------------------------------------------------------------------*/ & .upload_sender--content_empty { display: table-cell; vertical-align: middle; text-align: center; & > span { color:#000; @include opacity(.5); //@include px2em($px: $fontSize * 8, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size); //@include px2em($px: $fontSize * 8, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : width); //@include px2em($px: $fontSize * 8, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : height); @include rem(( width : $fontSize * 8, height : $fontSize * 8, font-size : $fontSize * 8 )); } } /* Rajout d'un margin de 10px en bottom pour faire une séparation entre l'icon et le message --------------------------------------------------------------------------------------------*/ & .icon-medium-black-inbox-empty { margin: 0 0 10px 0; } /* Footer de la box d'upload. On y trouve deux btn: upload et cldean --------------------------------------------------------------------*/ & .upload_sender--footer { //border-top: 1px solid #c1c1c1; height: 60px; line-height: 60px; background-color: #F3F3F3; } & .upload_sender--footer_item { box-sizing : border-box; display: inline-block; width: 49%; padding:0 10px; vertical-align: middle; font-size: 0.8em; & #upload-sender-clean-btn { color:$titleColor; line-height: normal; //@todo à supprimer avant la prod display: inline-block !important; } & .btn:hover { text-decoration: none; } } /*& .upload_sender--footer_item + .upload_sender--footer_item { &:before { display: block; width: 1px; height: 100%; position: absolute; border-left: 1px solid #F1F1F1; content: ""; left: 0; top: 0; } }*/ } /** * Progress bar upload */ .upload-progress { width: 98%; clear: both; height: 15px; z-index: 1; //progress bar & .upload-progress-bar { display: block; height: 15px; display: block; //@include background-color-rgba(#3D9400, 0.2); background-color: $infoColor; transition : width 0.2s linear; } [data-finish="true"] & .upload-progress-bar { background-color: $successColor; } //progress bar erreur .upload_sender--document_error & .upload-progress-bar { background-color: $dangerColor; } } /** * Overlay Upload */ .upload_overlay { @extend .splash_screen_bg; z-index: 1003; display: none; //Container de l'icon et du message & .upload_overlay--container { position: absolute; width: 100%; left: 50%; top: 50%; left:0 \9; top:0 \9; transform : translate(-50%, -50%); text-align: center; text-align: left \9; } //Icone & [class*="icon-"] { //@include px2em($px:$fontSize * 14, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size); //@include px2em($px:$fontSize * 14, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : width); //@include px2em($px:$fontSize * 14, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : height); @include rem(( width : $fontSize * 14, height : $fontSize * 14, font-size : $fontSize * 14 )); color: #fff; margin-bottom:15px; @include opacity(1); } //Message & .upload_overlay--sub { //@include px2em($px:$fontSize * 3, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size); @include rem(( font-size: $fontSize *3 )); text-shadow: 0 1px 2px #2C2C2C; color: #fff; } } /* tools --------*/ //Icon d'état du heauder à gauche du label d'upload. //Lorsqu'il n'y a pas d'upload en cours, on affiche l'icon d'upload .icon_upload { @extend .icon-cloud-upload; color: #fff; @include opacity(1); } //Lorsqu'il y a un fichier en cours d'upload, on affiche le gif .upload-in-progress { .icon_upload { vertical-align: middle; //Loader sur fond #32383B @if($headerColor != #32383B ) { @warn "Modifier la couleur du fond du loader_uploader.gif"; } background-image:image-url('js/loader/loader_uploader.gif'); //On cache l'icone de base &:before { content: ""; } //loader sur fond blanc .active & { background-image:image-url('js/loader/loader_uploader_active.gif'); } } }