initial
This commit is contained in:
BIN
Binary file not shown.
+13
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="dropify" horiz-adv-x="1000" >
|
||||
<font-face font-family="dropify" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="upload" unicode="" d="m654 189c3-3 8-4 12-4 4 0 8 1 11 4 6 7 6 17 0 23l-167 166c0 0 0 0 0 0l-11 12-11-12c0 0 0 0 0 0l-167-166c-6-6-6-16 0-23 7-6 17-6 23 0l139 140v-281c0-9 7-16 16-16s16 7 16 16v281l139-140z m158 292c-39 110-143 184-261 184-111 0-211-67-254-169-21 10-43 15-65 15-86 0-156-70-156-156-45-34-71-87-71-143 0-99 81-180 183-180 1 0 3 0 4 0 1 0 2 0 2 0h168c9 0 16 7 16 16 0 9-7 16-16 16h-168c-2 0-4 0-5 0l-3 0c-82 0-149 66-149 148 0 49 24 95 64 122l8 8-1 13c0 68 55 124 124 124 23 0 45-7 65-19l17-10 6 19c34 98 127 164 231 164 107 0 201-69 234-171l3-9 9-2c95-15 164-96 164-192 0-108-87-195-195-195h-130c-9 0-16-8-16-16 0-9 7-16 16-16h130c125 0 227 101 227 227 0 108-75 200-181 222z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="file" unicode="" d="m853 507c0 3 0 6-1 8-1 14-3 16-4 18-2 4-24 27-65 68l-167 166c-41 41-64 63-68 66-4 2-8 5-103 5h-165c-26 0-88 0-93-1-8-1-21-9-26-14-4-4-10-12-12-18-2-5-2-39-2-100v-710c0-3 0-86 1-93 1-8 8-20 13-25 4-4 12-10 19-13 6-2 58-2 100-2h440c4 0 87 0 93 1 9 1 21 9 26 14 4 4 10 12 12 18 2 5 2 39 2 100v435c0 34 0 57-1 72 1 1 1 3 1 5z m-313 287c11-10 29-28 52-51l166-167c24-23 41-41 52-52h-202c-38 0-68 31-68 69v201l0 0z m279-799c0-50-1-87 0-89-1-1-2-3-4-5-1-1-6-4-5-4-4 0-38-1-90-1h-440c-43 0-76 1-86 1-2 0-3 0-3 0-1 0-4 2-6 4-1 1-3 5-3 5h-1c0 4 0 37 0 89v710c0 52 1 87 0 89 1 1 3 4 4 5 1 1 6 4 6 4 4 1 39 1 89 1h165c24 0 45 0 61-1v-210c0-57 46-103 102-103h211c0-15 0-36 0-60l0-435 0 0z" horiz-adv-x="1000" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
+636
@@ -0,0 +1,636 @@
|
||||
var pluginName = "dropify";
|
||||
|
||||
/**
|
||||
* Dropify plugin
|
||||
*
|
||||
* @param {Object} element
|
||||
* @param {Array} options
|
||||
*/
|
||||
function Dropify(element, options) {
|
||||
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
defaultFile: '',
|
||||
maxFileSize: 0,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
minHeight: 0,
|
||||
maxHeight: 0,
|
||||
showRemove: true,
|
||||
showLoader: true,
|
||||
showErrors: true,
|
||||
errorTimeout: 3000,
|
||||
errorsPosition: 'overlay',
|
||||
imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
|
||||
maxFileSizePreview: "5M",
|
||||
allowedFormats: ['portrait', 'square', 'landscape'],
|
||||
allowedFileExtensions: ['*'],
|
||||
messages: {
|
||||
'default': 'Drag and drop a file here or click',
|
||||
'replace': 'Drag and drop or click to replace',
|
||||
'remove': 'Remove',
|
||||
'error': 'Ooops, something wrong happended.'
|
||||
},
|
||||
error: {
|
||||
'fileSize': 'The file size is too big ({{ value }} max).',
|
||||
'minWidth': 'The image width is too small ({{ value }}}px min).',
|
||||
'maxWidth': 'The image width is too big ({{ value }}}px max).',
|
||||
'minHeight': 'The image height is too small ({{ value }}}px min).',
|
||||
'maxHeight': 'The image height is too big ({{ value }}px max).',
|
||||
'imageFormat': 'The image format is not allowed ({{ value }} only).',
|
||||
'fileExtension': 'The file is not allowed ({{ value }} only).'
|
||||
},
|
||||
tpl: {
|
||||
wrap: '<div class="dropify-wrapper"></div>',
|
||||
loader: '<div class="dropify-loader"></div>',
|
||||
message: '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
|
||||
preview: '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
|
||||
filename: '<p class="dropify-filename"><span class="dropify-filename-inner"></span></p>',
|
||||
clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
|
||||
errorLine: '<p class="dropify-error">{{ error }}</p>',
|
||||
errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'
|
||||
}
|
||||
};
|
||||
|
||||
this.element = element;
|
||||
this.input = $(this.element);
|
||||
this.wrapper = null;
|
||||
this.preview = null;
|
||||
this.filenameWrapper = null;
|
||||
this.settings = $.extend(true, defaults, options, this.input.data());
|
||||
this.errorsEvent = $.Event('dropify.errors');
|
||||
this.isDisabled = false;
|
||||
this.isInit = false;
|
||||
this.file = {
|
||||
object: null,
|
||||
name: null,
|
||||
size: null,
|
||||
width: null,
|
||||
height: null,
|
||||
type: null
|
||||
};
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFormats)) {
|
||||
this.settings.allowedFormats = this.settings.allowedFormats.split(' ');
|
||||
}
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFileExtensions)) {
|
||||
this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(' ');
|
||||
}
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.clearElement = this.clearElement.bind(this);
|
||||
this.onFileReady = this.onFileReady.bind(this);
|
||||
|
||||
this.translateMessages();
|
||||
this.createElements();
|
||||
this.setContainerSize();
|
||||
|
||||
this.errorsEvent.errors = [];
|
||||
|
||||
this.input.on('change', this.onChange);
|
||||
}
|
||||
|
||||
/**
|
||||
* On change event
|
||||
*/
|
||||
Dropify.prototype.onChange = function()
|
||||
{
|
||||
this.resetPreview();
|
||||
this.readFile(this.element);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements
|
||||
*/
|
||||
Dropify.prototype.createElements = function()
|
||||
{
|
||||
this.isInit = true;
|
||||
this.input.wrap($(this.settings.tpl.wrap));
|
||||
this.wrapper = this.input.parent();
|
||||
|
||||
var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input);
|
||||
$(this.settings.tpl.errorLine).appendTo(messageWrapper);
|
||||
|
||||
if (this.isTouchDevice() === true) {
|
||||
this.wrapper.addClass('touch-fallback');
|
||||
}
|
||||
|
||||
if (this.input.attr('disabled')) {
|
||||
this.isDisabled = true;
|
||||
this.wrapper.addClass('disabled');
|
||||
}
|
||||
|
||||
if (this.settings.showLoader === true) {
|
||||
this.loader = $(this.settings.tpl.loader);
|
||||
this.loader.insertBefore(this.input);
|
||||
}
|
||||
|
||||
this.preview = $(this.settings.tpl.preview);
|
||||
this.preview.insertAfter(this.input);
|
||||
|
||||
if (this.isDisabled === false && this.settings.showRemove === true) {
|
||||
this.clearButton = $(this.settings.tpl.clearButton);
|
||||
this.clearButton.insertAfter(this.input);
|
||||
this.clearButton.on('click', this.clearElement);
|
||||
}
|
||||
|
||||
this.filenameWrapper = $(this.settings.tpl.filename);
|
||||
this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
|
||||
|
||||
if (this.settings.showErrors === true) {
|
||||
this.errorsContainer = $(this.settings.tpl.errorsContainer);
|
||||
|
||||
if (this.settings.errorsPosition === 'outside') {
|
||||
this.errorsContainer.insertAfter(this.wrapper);
|
||||
} else {
|
||||
this.errorsContainer.insertBefore(this.input);
|
||||
}
|
||||
}
|
||||
|
||||
var defaultFile = this.settings.defaultFile || '';
|
||||
|
||||
if (defaultFile.trim() !== '') {
|
||||
this.file.name = this.cleanFilename(defaultFile);
|
||||
this.setPreview(this.isImage(), defaultFile);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Read the file using FileReader
|
||||
*
|
||||
* @param {Object} input
|
||||
*/
|
||||
Dropify.prototype.readFile = function(input)
|
||||
{
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
var image = new Image();
|
||||
var file = input.files[0];
|
||||
var srcBase64 = null;
|
||||
var _this = this;
|
||||
var eventFileReady = $.Event("dropify.fileReady");
|
||||
|
||||
this.clearErrors();
|
||||
this.showLoader();
|
||||
this.setFileInformations(file);
|
||||
this.errorsEvent.errors = [];
|
||||
this.checkFileSize();
|
||||
this.isFileExtensionAllowed();
|
||||
|
||||
if (this.isImage() && this.file.size < this.sizeToByte(this.settings.maxFileSizePreview)) {
|
||||
this.input.on('dropify.fileReady', this.onFileReady);
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function(_file) {
|
||||
srcBase64 = _file.target.result;
|
||||
image.src = _file.target.result;
|
||||
image.onload = function() {
|
||||
_this.setFileDimensions(this.width, this.height);
|
||||
_this.validateImage();
|
||||
_this.input.trigger(eventFileReady, [true, srcBase64]);
|
||||
};
|
||||
|
||||
}.bind(this);
|
||||
} else {
|
||||
this.onFileReady(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* On file ready to show
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {Bool} previewable
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.onFileReady = function(event, previewable, src)
|
||||
{
|
||||
this.input.off('dropify.fileReady', this.onFileReady);
|
||||
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
this.setPreview(previewable, src);
|
||||
} else {
|
||||
this.input.trigger(this.errorsEvent, [this]);
|
||||
for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
|
||||
var errorNamespace = this.errorsEvent.errors[i].namespace;
|
||||
var errorKey = errorNamespace.split('.').pop();
|
||||
this.showError(errorKey);
|
||||
}
|
||||
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.addClass('visible');
|
||||
|
||||
var errorsContainer = this.errorsContainer;
|
||||
setTimeout(function(){ errorsContainer.removeClass('visible'); }, this.settings.errorTimeout);
|
||||
}
|
||||
|
||||
this.wrapper.addClass('has-error');
|
||||
this.resetPreview();
|
||||
this.clearElement();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file informations
|
||||
*
|
||||
* @param {File} file
|
||||
*/
|
||||
Dropify.prototype.setFileInformations = function(file)
|
||||
{
|
||||
this.file.object = file;
|
||||
this.file.name = file.name;
|
||||
this.file.size = file.size;
|
||||
this.file.type = file.type;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file dimensions
|
||||
*
|
||||
* @param {Int} width
|
||||
* @param {Int} height
|
||||
*/
|
||||
Dropify.prototype.setFileDimensions = function(width, height)
|
||||
{
|
||||
this.file.width = width;
|
||||
this.file.height = height;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the preview and animate it
|
||||
*
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.setPreview = function(previewable, src)
|
||||
{
|
||||
this.wrapper.removeClass('has-error').addClass('has-preview');
|
||||
this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
|
||||
var render = this.preview.children('.dropify-render');
|
||||
|
||||
this.hideLoader();
|
||||
|
||||
if (previewable === true) {
|
||||
var imgTag = $('<img />').attr('src', src);
|
||||
|
||||
if (this.settings.height) {
|
||||
imgTag.css("max-height", this.settings.height);
|
||||
}
|
||||
|
||||
imgTag.appendTo(render);
|
||||
} else {
|
||||
$('<i />').attr('class', 'dropify-font-file').appendTo(render);
|
||||
$('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
|
||||
}
|
||||
this.preview.fadeIn();
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset the preview
|
||||
*/
|
||||
Dropify.prototype.resetPreview = function()
|
||||
{
|
||||
this.wrapper.removeClass('has-preview');
|
||||
var render = this.preview.children('.dropify-render');
|
||||
render.find('.dropify-extension').remove();
|
||||
render.find('i').remove();
|
||||
render.find('img').remove();
|
||||
this.preview.hide();
|
||||
this.hideLoader();
|
||||
};
|
||||
|
||||
/**
|
||||
* Clean the src and get the filename
|
||||
*
|
||||
* @param {String} src
|
||||
*
|
||||
* @return {String} filename
|
||||
*/
|
||||
Dropify.prototype.cleanFilename = function(src)
|
||||
{
|
||||
var filename = src.split('\\').pop();
|
||||
if (filename == src) {
|
||||
filename = src.split('/').pop();
|
||||
}
|
||||
|
||||
return src !== "" ? filename : '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the element, events are available
|
||||
*/
|
||||
Dropify.prototype.clearElement = function()
|
||||
{
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
var eventBefore = $.Event("dropify.beforeClear");
|
||||
this.input.trigger(eventBefore, [this]);
|
||||
|
||||
if (eventBefore.result !== false) {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
|
||||
this.input.trigger($.Event("dropify.afterClear"), [this]);
|
||||
}
|
||||
} else {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset file informations
|
||||
*/
|
||||
Dropify.prototype.resetFile = function()
|
||||
{
|
||||
this.file.object = null;
|
||||
this.file.name = null;
|
||||
this.file.size = null;
|
||||
this.file.type = null;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the container height
|
||||
*/
|
||||
Dropify.prototype.setContainerSize = function()
|
||||
{
|
||||
if (this.settings.height) {
|
||||
this.wrapper.height(this.settings.height);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if it's touch screen
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isTouchDevice = function()
|
||||
{
|
||||
return (('ontouchstart' in window) ||
|
||||
(navigator.MaxTouchPoints > 0) ||
|
||||
(navigator.msMaxTouchPoints > 0));
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the file type.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getFileType = function()
|
||||
{
|
||||
return this.file.name.split('.').pop().toLowerCase();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file is an image
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isImage = function()
|
||||
{
|
||||
if (this.settings.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file extension is allowed
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isFileExtensionAllowed = function () {
|
||||
|
||||
if (this.settings.allowedFileExtensions.indexOf('*') != "-1" ||
|
||||
this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
this.pushError("fileExtension");
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Translate messages if needed.
|
||||
*/
|
||||
Dropify.prototype.translateMessages = function()
|
||||
{
|
||||
for (var name in this.settings.tpl) {
|
||||
for (var key in this.settings.messages) {
|
||||
this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the limit filesize.
|
||||
*/
|
||||
Dropify.prototype.checkFileSize = function()
|
||||
{
|
||||
if (this.sizeToByte(this.settings.maxFileSize) !== 0 && this.file.size > this.sizeToByte(this.settings.maxFileSize)) {
|
||||
this.pushError("fileSize");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert filesize to byte.
|
||||
*
|
||||
* @return {Int} value
|
||||
*/
|
||||
Dropify.prototype.sizeToByte = function(size)
|
||||
{
|
||||
var value = 0;
|
||||
|
||||
if (size !== 0) {
|
||||
var unit = size.slice(-1).toUpperCase(),
|
||||
kb = 1024,
|
||||
mb = kb * 1024,
|
||||
gb = mb * 1024;
|
||||
|
||||
if (unit === 'K') {
|
||||
value = parseFloat(size) * kb;
|
||||
} else if (unit === 'M') {
|
||||
value = parseFloat(size) * mb;
|
||||
} else if (unit === 'G') {
|
||||
value = parseFloat(size) * gb;
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validate image dimensions and format
|
||||
*/
|
||||
Dropify.prototype.validateImage = function()
|
||||
{
|
||||
if (this.settings.minWidth !== 0 && this.settings.minWidth >= this.file.width) {
|
||||
this.pushError("minWidth");
|
||||
}
|
||||
|
||||
if (this.settings.maxWidth !== 0 && this.settings.maxWidth <= this.file.width) {
|
||||
this.pushError("maxWidth");
|
||||
}
|
||||
|
||||
if (this.settings.minHeight !== 0 && this.settings.minHeight >= this.file.height) {
|
||||
this.pushError("minHeight");
|
||||
}
|
||||
|
||||
if (this.settings.maxHeight !== 0 && this.settings.maxHeight <= this.file.height) {
|
||||
this.pushError("maxHeight");
|
||||
}
|
||||
|
||||
if (this.settings.allowedFormats.indexOf(this.getImageFormat()) == "-1") {
|
||||
this.pushError("imageFormat");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get image format.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getImageFormat = function()
|
||||
{
|
||||
if (this.file.width == this.file.height) {
|
||||
return "square";
|
||||
}
|
||||
|
||||
if (this.file.width < this.file.height) {
|
||||
return "portrait";
|
||||
}
|
||||
|
||||
if (this.file.width > this.file.height) {
|
||||
return "landscape";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Push error
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.pushError = function(errorKey) {
|
||||
var e = $.Event("dropify.error." + errorKey);
|
||||
this.errorsEvent.errors.push(e);
|
||||
this.input.trigger(e, [this]);
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear errors
|
||||
*/
|
||||
Dropify.prototype.clearErrors = function()
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').html('');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Show error in DOM
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.showError = function(errorKey)
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').append('<li>' + this.getError(errorKey) + '</li>');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get error message
|
||||
*
|
||||
* @return {String} message
|
||||
*/
|
||||
Dropify.prototype.getError = function(errorKey)
|
||||
{
|
||||
var error = this.settings.error[errorKey],
|
||||
value = '';
|
||||
|
||||
if (errorKey === 'fileSize') {
|
||||
value = this.settings.maxFileSize;
|
||||
} else if (errorKey === 'minWidth') {
|
||||
value = this.settings.minWidth;
|
||||
} else if (errorKey === 'maxWidth') {
|
||||
value = this.settings.maxWidth;
|
||||
} else if (errorKey === 'minHeight') {
|
||||
value = this.settings.minHeight;
|
||||
} else if (errorKey === 'maxHeight') {
|
||||
value = this.settings.maxHeight;
|
||||
} else if (errorKey === 'imageFormat') {
|
||||
value = this.settings.allowedFormats.join(', ');
|
||||
} else if (errorKey === 'fileExtension') {
|
||||
value = this.settings.allowedFileExtensions.join(', ');
|
||||
}
|
||||
|
||||
if (value !== '') {
|
||||
return error.replace('{{ value }}', value);
|
||||
}
|
||||
|
||||
return error;
|
||||
};
|
||||
|
||||
/**
|
||||
* Show the loader
|
||||
*/
|
||||
Dropify.prototype.showLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.show();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the loader
|
||||
*/
|
||||
Dropify.prototype.hideLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy dropify
|
||||
*/
|
||||
Dropify.prototype.destroy = function()
|
||||
{
|
||||
this.input.siblings().remove();
|
||||
this.input.unwrap();
|
||||
this.isInit = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Init dropify
|
||||
*/
|
||||
Dropify.prototype.init = function()
|
||||
{
|
||||
this.createElements();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if element is init
|
||||
*/
|
||||
Dropify.prototype.isDropified = function()
|
||||
{
|
||||
return this.isInit;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function(options) {
|
||||
this.each(function() {
|
||||
if (!$.data(this, pluginName)) {
|
||||
$.data(this, pluginName, new Dropify(this, options));
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'dropify';
|
||||
src: url('#{$dropify-font-path}/dropify.eot');
|
||||
src: url('#{$dropify-font-path}/dropify.eot#iefix') format('embedded-opentype'),
|
||||
url('#{$dropify-font-path}/dropify.woff') format('woff'),
|
||||
url('#{$dropify-font-path}/dropify.ttf') format('truetype'),
|
||||
url('#{$dropify-font-path}/dropify.svg#dropify') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="dropify-font-"]:before, [class*=" dropify-font-"]:before, .dropify-font:before {
|
||||
font-family: "dropify";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-left: .2em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.dropify-font-upload:before { content: '\e800'; }
|
||||
.dropify-font-file:before { content: '\e801'; }
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
@import "demo/reset";
|
||||
@import "demo/variables";
|
||||
@import "demo/helpers/mixins";
|
||||
@import "demo/helpers/grid";
|
||||
@import "demo/helpers/shortcuts";
|
||||
@import "demo/grid";
|
||||
@import "demo/typo";
|
||||
|
||||
body {
|
||||
background: $background-color;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
header#header {
|
||||
background: $main-color;
|
||||
color: #FFD270;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: 700;
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
text-align: center;
|
||||
font-size: 70px;
|
||||
line-height: 60px;
|
||||
padding: 50px 30px;
|
||||
margin: 0 0 30px 0;
|
||||
|
||||
h1 {
|
||||
color: #FFD270;
|
||||
font-size: 70px;
|
||||
line-height: 90px;
|
||||
font-weight: 700;
|
||||
|
||||
&::after {
|
||||
background: transparentize(#FFD270, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: transparentize(#FFD270, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
footer#footer {
|
||||
background: #DDD;
|
||||
color: #888;
|
||||
padding: 30px 0;
|
||||
margin-top: 30px;
|
||||
|
||||
a {
|
||||
&, &:visited {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
p.help {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#toggleDropify {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
background: #DDD;
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
transition: background 0.1s linear;
|
||||
|
||||
&:hover {
|
||||
background: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
header#header {
|
||||
padding: 30px 15px;
|
||||
|
||||
h1 {
|
||||
font-size: 44px;
|
||||
line-height: 70px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: $container-max-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
|
||||
.row {
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-bottom: $grid-gutter-width;
|
||||
|
||||
&.no-padding-bottom, &.no-pb {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.col-xs-1 { width: percentage((1 / $grid-columns)); }
|
||||
.col-xs-2 { width: percentage((2 / $grid-columns)); }
|
||||
.col-xs-3 { width: percentage((3 / $grid-columns)); }
|
||||
.col-xs-4 { width: percentage((4 / $grid-columns)); }
|
||||
.col-xs-5 { width: percentage((5 / $grid-columns)); }
|
||||
.col-xs-6 { width: percentage((6 / $grid-columns)); }
|
||||
.col-xs-7 { width: percentage((7 / $grid-columns)); }
|
||||
.col-xs-8 { width: percentage((8 / $grid-columns)); }
|
||||
.col-xs-9 { width: percentage((9 / $grid-columns)); }
|
||||
.col-xs-10 { width: percentage((10/ $grid-columns)); }
|
||||
.col-xs-11 { width: percentage((11/ $grid-columns)); }
|
||||
.col-xs-12 { width: 100%; }
|
||||
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
@include row-sizes('sm');
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
@include row-sizes('md');
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: $screen-lg-desktop) {
|
||||
@include row-sizes('lg');
|
||||
}
|
||||
+527
@@ -0,0 +1,527 @@
|
||||
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
||||
* Known issue: no IE 6 support.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||
* `em` units.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `font-family` inconsistency between `textarea` and other form
|
||||
* elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins handled incorrectly in IE 6/7.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address font sizes and margins set differently in IE 6/7.
|
||||
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
||||
* and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
* Known issue: no IE 6/7 normalization.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 6/7/8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address CSS quotes not supported in IE 6/7.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `quotes` property not supported in Safari 4.
|
||||
*/
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address paddings set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct list images handled incorrectly in IE 7.
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
||||
* 2. Improve image quality when scaled in IE 7.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited in IE 6/7/8/9.
|
||||
* 2. Correct text not wrapping in Firefox 3.
|
||||
* 3. Correct alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font size not being inherited in all browsers.
|
||||
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improve appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to content-box in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 3. Remove excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*,*::before,*::after,*:before,*:after {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@import "normalize";
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
a {
|
||||
&, &:visited {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: $headings-small-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $headings-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 , h4 {
|
||||
margin-top: $headings-margin;
|
||||
margin-bottom: ($headings-margin / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
text-transform: $headings-text-transform;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
padding: 0 0 20px 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: $headings-color;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
margin-bottom: $headings-margin;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-h4;
|
||||
}
|
||||
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
$background-color: #F8F8F8 !default;
|
||||
$base-font-family: "Roboto", "Helvetica Neue", "Helvetica" !default;
|
||||
$base-font-size: 15px !default;
|
||||
$base-line-height: $base-font-size * 1.8 !default;
|
||||
$text-color: #666 !default;
|
||||
$base-margin: 20px !default;
|
||||
$bold-font-weight: 700 !default;
|
||||
|
||||
$main-color: #1C252C !default;
|
||||
|
||||
$headings-font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica" !default;
|
||||
$headings-font-weight: 400 !default;
|
||||
$headings-line-height: 1.4 !default;
|
||||
$headings-letter-spacing: -0.04em !default;
|
||||
$headings-text-transform: uppercase !default;
|
||||
$headings-color: #444 !default;
|
||||
$headings-small-color: lighten($text-color, 30%) !default;
|
||||
$headings-margin: $base-margin !default;
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
|
||||
|
||||
$font-size-h1: 30px !default;
|
||||
$font-size-h2: 26px !default;
|
||||
$font-size-h3: 24px !default;
|
||||
$font-size-h4: 20px !default;
|
||||
|
||||
|
||||
///////////////////////////
|
||||
/// MEDIA QUERIES
|
||||
///////////////////////////
|
||||
$screen-xs: 480px !default;
|
||||
$screen-sm: 768px !default;
|
||||
$screen-md: 992px !default;
|
||||
$screen-lg: 1140px !default;
|
||||
|
||||
$screen-xs-min: $screen-xs !default;
|
||||
$screen-phone: $screen-xs-min !default;
|
||||
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
$screen-tablet: $screen-sm-min !default;
|
||||
|
||||
$screen-md-min: $screen-md !default;
|
||||
$screen-desktop: $screen-md-min !default;
|
||||
|
||||
$screen-lg-min: $screen-lg !default;
|
||||
$screen-lg-desktop: $screen-lg-min !default;
|
||||
|
||||
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||||
$screen-sm-max: ($screen-md-min - 1) !default;
|
||||
$screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
$container-tablet: ((720px + $grid-gutter-width)) !default;
|
||||
$container-desktop: ((940px + $grid-gutter-width)) !default;
|
||||
$container-lg-desktop: ((1140px + $grid-gutter-width)) !default;
|
||||
|
||||
$container-max-width: $screen-lg !default;
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
@mixin row-sizes($preffix) {
|
||||
|
||||
@for $i from 1 through $grid-columns - 1 {
|
||||
// Float
|
||||
.col-#{ $preffix }-#{ $i } { float: left; }
|
||||
|
||||
// Size
|
||||
.col-#{ $preffix }-#{ $i } { width: percentage(($i / $grid-columns)); }
|
||||
|
||||
// Push
|
||||
.col-#{ $preffix }-push-#{ $i } { left: percentage(($i / $grid-columns)); }
|
||||
|
||||
// Pull
|
||||
.col-#{ $preffix }-pull-#{ $i } { right: percentage(($i / $grid-columns)); }
|
||||
|
||||
// Offset
|
||||
.col-#{ $preffix }-offset-#{ $i } { margin-left: percentage(($i / $grid-columns)); }
|
||||
}
|
||||
|
||||
.col-#{ $preffix }-push-0 { left: auto; }
|
||||
.col-#{ $preffix }-pull-0 { right: auto; }
|
||||
.col-#{ $preffix }-offset-0 { margin-left: 0; }
|
||||
.col-#{ $preffix }-12 { width: 100%; }
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@mixin clearfix() {
|
||||
*zoom: 1;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-text {
|
||||
font: #{0/0} a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.strong, .bold {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: $base-line-height;
|
||||
margin-bottom: $base-line-height;
|
||||
border: 0;
|
||||
border-top: 1px solid #CCC;
|
||||
|
||||
&.big {
|
||||
border-top: 2px solid #DDD;
|
||||
margin-top: $base-line-height*2;
|
||||
margin-bottom: $base-line-height*2;
|
||||
}
|
||||
}
|
||||
|
||||
+474
@@ -0,0 +1,474 @@
|
||||
$dropify-width: 100% !default;
|
||||
$dropify-height: 200px !default;
|
||||
$dropify-font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial" !default;
|
||||
$dropify-font-size: 14px !default;
|
||||
$dropify-line-height: 22px !default;
|
||||
$dropify-text-color: #777 !default;
|
||||
$dropify-icon-color: #CCC !default;
|
||||
$dropify-background: #FFF !default;
|
||||
$dropify-border-size: 2px !default;
|
||||
$dropify-border-color: #E5E5E5 !default;
|
||||
$dropify-infos-background: transparentize(#000, 0.3) !default;
|
||||
$dropify-infos-color: #FFF !default;
|
||||
$dropify-clear-color: #FFF !default;
|
||||
$dropify-error-color: #F34141 !default;
|
||||
$dropify-stripes: #F6F6F6 !default;
|
||||
$dropify-loader-size: 20px !default;
|
||||
$dropify-loader-border: 1px !default;
|
||||
$dropify-loader-fill: #CCC !default;
|
||||
$dropify-loader-trace: #777 !default;
|
||||
$dropify-font-path: "../fonts" !default;
|
||||
|
||||
@import "dropify-font";
|
||||
|
||||
.dropify-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: $dropify-width;
|
||||
max-width: 100%;
|
||||
height: $dropify-height;
|
||||
padding: 5px 10px;
|
||||
font-family: $dropify-font-family;
|
||||
font-size: $dropify-font-size;
|
||||
line-height: $dropify-line-height;
|
||||
color: $dropify-text-color;
|
||||
background-color: $dropify-background;
|
||||
background-image: none;
|
||||
text-align: center;
|
||||
border: $dropify-border-size solid $dropify-border-color;
|
||||
transition: border-color 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
background-size: 30px 30px;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
$dropify-stripes 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
$dropify-stripes 50%,
|
||||
$dropify-stripes 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
animation: stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
&.has-preview {
|
||||
.dropify-clear {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
border-color: $dropify-error-color;
|
||||
|
||||
.dropify-message .dropify-error, {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropify-errors-container {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.dropify-message {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.dropify-infos-message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.dropify-message {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
span.file-icon {
|
||||
@extend .dropify-font;
|
||||
@extend .dropify-font-upload;
|
||||
font-size: 50px;
|
||||
color: $dropify-icon-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0 0 0;
|
||||
|
||||
&.dropify-error {
|
||||
color: $dropify-error-color;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-clear {
|
||||
display: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 7;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: 2px solid $dropify-clear-color;
|
||||
text-transform: uppercase;
|
||||
font-family: $dropify-font-family;
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
font-weight: bold;
|
||||
color: $dropify-clear-color;
|
||||
transition: all 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($dropify-clear-color, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-preview {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: $dropify-background;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
|
||||
.dropify-render {
|
||||
img {
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-color: $dropify-background;
|
||||
transition: border-color 0.15s linear;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 70px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.dropify-extension {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
font-size: 13px;
|
||||
width: 42px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-infos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: $dropify-infos-background;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s linear;
|
||||
|
||||
.dropify-infos-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -40%);
|
||||
backface-visibility: hidden;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $dropify-infos-color;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-weight: bold;
|
||||
|
||||
&.dropify-infos-message {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
background: $dropify-infos-color;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropify-clear {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dropify-preview {
|
||||
.dropify-infos {
|
||||
opacity: 1;
|
||||
|
||||
.dropify-infos-inner {
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.touch-fallback {
|
||||
height: auto !important;
|
||||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.dropify-preview {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
.dropify-render {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.dropify-font-file {
|
||||
position: relative;
|
||||
transform: translate(0, 0);
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&::before {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-infos {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
|
||||
.dropify-infos-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
transform: translate(0, 0);
|
||||
padding: 5px 90px 5px 0;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $dropify-text-color;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
|
||||
&.dropify-filename {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.dropify-infos-message {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-message {
|
||||
transform: translate(0, 0);
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.dropify-clear {
|
||||
top: auto;
|
||||
bottom: 23px;
|
||||
opacity: 1;
|
||||
border-color: transparentize($dropify-text-color, 0.3);
|
||||
color: $dropify-text-color;
|
||||
}
|
||||
|
||||
&.has-preview {
|
||||
.dropify-message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropify-preview {
|
||||
.dropify-infos {
|
||||
.dropify-infos-inner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-loader {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
z-index: 9;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: $dropify-loader-size;
|
||||
height: $dropify-loader-size;
|
||||
animation: rotate 0.6s linear infinite;
|
||||
border-radius: 100%;
|
||||
border-top: $dropify-loader-border solid $dropify-loader-fill;
|
||||
border-bottom: $dropify-loader-border solid $dropify-loader-trace;
|
||||
border-left: $dropify-loader-border solid $dropify-loader-fill;
|
||||
border-right: $dropify-loader-border solid $dropify-loader-trace;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-errors-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: transparentize($dropify-error-color, 0.2);
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s linear 0.15s,opacity 0.15s linear;
|
||||
|
||||
ul {
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
li {
|
||||
margin-left: 20px;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .dropify-errors-container {
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
|
||||
li {
|
||||
margin-left: 20px;
|
||||
color: $dropify-error-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stripes {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 60px 30px; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotateZ(-360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user