image-uploader-crop
Version:
cropper and uploader of images that uses another libraries
1 lines • 3.93 kB
Source Map (JSON)
{"version":3,"sources":["image-uploader-crop.scss"],"names":[],"mappings":"AAaA,mBACE,MAAO,KACP,gBAAiB,YACjB,gBAAiB,aACjB,QAAS,YACT,QAAS,YACT,QAAS,KACT,kBAAmB,IAAA,KACnB,cAAe,IAAA,KACf,UAAW,IAAA,KACX,oBAAqB,QACrB,kBAAmB,QACnB,eAAgB,QAChB,YAAa,QAbf,gCAgBI,aAAc,EACd,iBAAkB,EAClB,SAAU,EACV,KAAM,EACN,QAAS,KApBb,8CAuBM,YAAa,MAvBnB,6CA2BM,aAAc,MAMpB,qBAAA,sBAAA,2BAAA,4BACsB,QAAS,IAAM,QAAS,MAD9C,qBAAA,2BAEY,MAAO,KAOjB,8DAMM,QAAS,OACT,MAAO,MACP,cAAe,KACf,QAAS,IAAA,KACT,WAAY,OACZ,MAAO,KACP,WAAY,QACZ,MAAO,KACP,cAAe,IACf,OAAQ,IAAA,MAAA,QACR,WAAY,EAAE,IAAI,IAAI,sBAAsB,KAAK,CAC/C,IAAI,EAAE,IAAI,sBAAsB,KAAK,CACrC,EAAE,IAAI,EAAE,eAAe,CACvB,EAAG,KAAI,KAAK,gBAAgB,MAC9B,MAAO,KApBb,qFAuBQ,WAAY,QAvBpB,gEA4BM,WAAY,OACZ,MAAO,EACP,OAAQ,EACR,OAAQ,EACR,QAAS,EAMf,4BACE,SAAU,OAMd,+CAEI,SAAU,SACV,WAAY,MACZ,WAAY,MACZ,WAAY,OACZ,MAAO,QACP,cAAe,IACf,iBAAkB,QAClB,OAAQ,IAAA,OAAA,KACR,QAAS,KAVb,sDAaM,QAAS,0BAA0B,IACnC,SAAU,SACV,UAAW,IACX,KAAM,EACN,MAAO,KACP,WAAY,OACZ,IAAK,IACL,WAAY,KACZ,QAAS","file":"image-uploader-crop.css","sourcesContent":["/* image-uploader-crop v0.1.0 for jQuery that uses fine-uploader, jcrop\n* (c) 2017, MIT licensed. http://tuproyecto.com\n* ====================================================================\n* Dependencies: jQuery, fine-uploader, jcrop\n* Author: TuProyecto.com\n* Developer: @krobing\n* Created: 04/03/2016\n* Website: http://tuproyecto.com\n* Description: cropper and uploader of images that uses another libraries\n*/\n\n// flexbox to content and columns\n// ------------------------------\n.__fx-main-content {\n width: 100%;\n -webkit-display: -webkit-box;\n -webkit-display: -webkit-flex;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-flow: row wrap;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-align-items: stretch;\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n\n .__fx-column {\n -webkit-flex: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n padding: 10px;\n\n &:first-of-type {\n margin-left: -10px;\n }\n\n &:last-of-type {\n margin-right: -10px;\n }\n }\n}\n\n// Selector to do clear floats\n.iuc__clearfix {\n &:before, &:after { content: \" \"; display: table; }\n &:after { clear: both; }\n}\n\n// Content uploader and cropper styles\n// -----------------------------------\n.iuc {\n // Uploader content\n &__image-uploader {\n @extend .iuc__clearfix;\n\n .iuc__qq-uploader {\n\n .iuc__qq-upload-button {\n display: inline;\n width: 105px;\n margin-bottom: 10px;\n padding: 7px 10px;\n text-align: center;\n float: left;\n background: #00abc7;\n color: #fff;\n border-radius: 2px;\n border: 1px solid #2dadc2;\n box-shadow: 0 1px 1px rgba(255,255,255,.37) inset,\n 1px 0 1px rgba(255,255,255,.07) inset,\n 0 1px 0 rgba(0,0,0,.36),\n 0 -2px 12px rgba(0,0,0,.08) inset;\n width: auto;\n\n &.qq-upload-button-hover {\n background: #33b6cc;\n }\n }\n\n .qq-upload-list-selector {\n visibility: hidden;\n width: 0px;\n height: 0px;\n margin: 0;\n padding: 0;\n }\n }\n }\n\n // Crop preview\n &__content-image-preview {\n overflow: hidden;\n }\n}\n\n// Area crop and drop\n// ------------------\n*:not(.qq-uploader) {\n .iuc__content-image-to-crop {\n position: relative;\n min-height: 200px;\n max-height: 490px;\n overflow-y: hidden;\n width: inherit;\n border-radius: 6px;\n background-color: #fdfdfd;\n border: 1px dashed #ccc;\n padding: 20px;\n\n &:before {\n content: attr(iuc__drop-area-text) \" \";\n position: absolute;\n font-size: 2em;\n left: 0;\n width: 100%;\n text-align: center;\n top: 50%;\n margin-top: -1em;\n opacity: .25;\n }\n }\n}\n"]}