1
0
mirror of https://github.com/processwire/processwire.git synced 2025-08-16 03:34:33 +02:00

Update Repeaters to add these features: 1) Support for repeater depth per @jlahijani, 2) Add new repeater item "clone" feature, 3) Add support for max items, 4) Add double-click trash icon to "delete all" feature. This commit also adds the Vex library for nicer looking Javascript alert and confirm boxes, which we use to confirm "clone" and "delete all" operations in repeaters, and will use elsewhere.

This commit is contained in:
Ryan Cramer
2016-12-07 11:24:49 -05:00
parent 423fbe6f57
commit e2f9597c5a
53 changed files with 7235 additions and 173 deletions

View File

@@ -62,6 +62,22 @@ abstract class AdminTheme extends WireData implements Module {
*/ */
protected $bodyClasses = array(); protected $bodyClasses = array();
/**
* Extra markup regions
*
* @var array
*
*/
protected $extraMarkup = array(
'head' => '',
'notices' => '',
'body' => '',
'masthead' => '',
'content' => '',
'footer' => '',
'sidebar' => '', // sidebar not used in all admin themes
);
/** /**
* URLs to place in link prerender tags * URLs to place in link prerender tags
* *
@@ -161,15 +177,7 @@ abstract class AdminTheme extends WireData implements Module {
* *
*/ */
public function ___getExtraMarkup() { public function ___getExtraMarkup() {
$parts = array( $parts = $this->extraMarkup;
'head' => '',
'notices' => '',
'body' => '',
'masthead' => '',
'content' => '',
'footer' => '',
'sidebar' => '', // sidebar not used in all admin themes
);
$isLoggedin = $this->wire('user')->isLoggedin(); $isLoggedin = $this->wire('user')->isLoggedin();
if($isLoggedin && $this->wire('modules')->isInstalled('InputfieldCKEditor') if($isLoggedin && $this->wire('modules')->isInstalled('InputfieldCKEditor')
&& $this->wire('process') instanceof WirePageEditor) { && $this->wire('process') instanceof WirePageEditor) {
@@ -186,11 +194,38 @@ abstract class AdminTheme extends WireData implements Module {
} }
return $parts; return $parts;
} }
/**
* Add extra markup to a region in the admin theme
*
* @param string $name
* @param string $value
*
*/
public function addExtraMarkup($name, $value) {
if(!empty($this->extraMarkup[$name])) {
$this->extraMarkup[$name] .= "\n$value";
} else {
$this->extraMarkup[$name] = $value;
}
}
/**
* Add a <body> class to the admin theme
*
* @param string $className
*
*/
public function addBodyClass($className) { public function addBodyClass($className) {
$this->bodyClasses[$className] = $className; $this->bodyClasses[$className] = $className;
} }
/**
* Get the body[class] attribute string
*
* @return string
*
*/
public function getBodyClass() { public function getBodyClass() {
return trim(implode(' ', $this->bodyClasses)); return trim(implode(' ', $this->bodyClasses));
} }
@@ -244,6 +279,8 @@ abstract class AdminTheme extends WireData implements Module {
/** /**
* Set a pre-render URL or get currently pre-render URL(s) * Set a pre-render URL or get currently pre-render URL(s)
* *
* #pw-internal
*
* @param string $url * @param string $url
* @return array * @return array
* *

View File

@@ -36,6 +36,9 @@ function __($text, $textdomain = null, $context = '') {
$textdomain = $traces[1]['file']; $textdomain = $traces[1]['file'];
} }
if(is_null($textdomain)) $textdomain = 'site'; if(is_null($textdomain)) $textdomain = 'site';
} else if($textdomain === 'common') {
// common translation
$textdomain = 'wire/modules/LanguageSupport/LanguageTranslator.php';
} }
$value = htmlspecialchars($language->translator()->getTranslation($textdomain, $text, $context), ENT_QUOTES, 'UTF-8'); $value = htmlspecialchars($language->translator()->getTranslation($textdomain, $text, $context), ENT_QUOTES, 'UTF-8');
if($value === "=") { if($value === "=") {

View File

@@ -34,7 +34,7 @@
* @method bool|int delete($class) * @method bool|int delete($class)
* @method bool uninstall($class) * @method bool uninstall($class)
* @method bool saveModuleConfigData($className, array $configData) Alias of saveConfig() method #pw-internal * @method bool saveModuleConfigData($className, array $configData) Alias of saveConfig() method #pw-internal
* @method bool saveConfig($class, array $data) * @method bool saveConfig($class, $data, $value = null)
* @method InputfieldWrapper|null getModuleConfigInputfields($moduleName, InputfieldWrapper $form = null) #pw-internal * @method InputfieldWrapper|null getModuleConfigInputfields($moduleName, InputfieldWrapper $form = null) #pw-internal
* @method void moduleVersionChanged(Module $module, $fromVersion, $toVersion) #pw-internal * @method void moduleVersionChanged(Module $module, $fromVersion, $toVersion) #pw-internal
* *

View File

@@ -1062,23 +1062,27 @@ class PagesEditor extends Wire {
if(is_string($options)) $options = Selectors::keyValueStringToArray($options); if(is_string($options)) $options = Selectors::keyValueStringToArray($options);
if(!isset($options['recursionLevel'])) $options['recursionLevel'] = 0; // recursion level if(!isset($options['recursionLevel'])) $options['recursionLevel'] = 0; // recursion level
// if parent is not changing, we have to modify name now if(isset($options['set']) && isset($options['set']['name'])) {
if(is_null($parent)) { $name = $options['set']['name'];
$parent = $page->parent;
$n = 1;
$name = $page->name . '-' . $n;
} else { } else {
$name = $page->name; // if parent is not changing, we have to modify name now
$n = 0; if(is_null($parent) || $parent->id == $page->parent->id) {
} $parent = $page->parent;
$n = 1;
$name = $page->name . '-' . $n;
} else {
$name = $page->name;
$n = 0;
}
// make sure that we have a unique name // make sure that we have a unique name
while(count($parent->children("name=$name, include=all"))) {
while(count($parent->children("name=$name, include=all"))) { $name = $page->name;
$name = $page->name; $nStr = "-" . (++$n);
$nStr = "-" . (++$n); if(strlen($name) + strlen($nStr) > Pages::nameMaxLength) $name = substr($name, 0, Pages::nameMaxLength - strlen($nStr));
if(strlen($name) + strlen($nStr) > Pages::nameMaxLength) $name = substr($name, 0, Pages::nameMaxLength - strlen($nStr)); $name .= $nStr;
$name .= $nStr; }
} }
// Ensure all data is loaded for the page // Ensure all data is loaded for the page
@@ -1144,7 +1148,7 @@ class PagesEditor extends Wire {
$page->filesManager->copyFiles($copy->filesManager->path()); $page->filesManager->copyFiles($copy->filesManager->path());
} }
// if there are children, then recurisvely clone them too // if there are children, then recursively clone them too
if($page->numChildren && $recursive) { if($page->numChildren && $recursive) {
$start = 0; $start = 0;
$limit = 200; $limit = 200;

View File

@@ -468,7 +468,7 @@ class FieldtypeRepeater extends Fieldtype implements ConfigurableModule {
* @return string * @return string
* *
*/ */
protected function getUniqueRepeaterPageName() { public function getUniqueRepeaterPageName() {
static $cnt = 0; static $cnt = 0;
return str_replace('.', '-', microtime(true)) . '-' . (++$cnt); return str_replace('.', '-', microtime(true)) . '-' . (++$cnt);
} }
@@ -496,7 +496,8 @@ class FieldtypeRepeater extends Fieldtype implements ConfigurableModule {
$inputfield = $this->wire('modules')->get($this->getInputfieldClass()); $inputfield = $this->wire('modules')->get($this->getInputfieldClass());
$inputfield->set('page', $page); $inputfield->set('page', $page);
$inputfield->set('field', $field); $inputfield->set('field', $field);
$inputfield->set('repeaterMaxItems', $field->get('repeaterMaxItems')); $inputfield->set('repeaterMaxItems', (int) $field->get('repeaterMaxItems'));
$inputfield->set('repeaterDepth', (int) $field->get('repeaterDepth'));
$inputfield->set('repeaterReadyItems', 0); // ready items deprecated $inputfield->set('repeaterReadyItems', 0); // ready items deprecated
$pageArray = $page->getUnformatted($field->name); $pageArray = $page->getUnformatted($field->name);
@@ -533,6 +534,7 @@ class FieldtypeRepeater extends Fieldtype implements ConfigurableModule {
if($item->hasStatus(Page::statusUnpublished) if($item->hasStatus(Page::statusUnpublished)
&& $item->hasStatus(Page::statusHidden) && $item->hasStatus(Page::statusHidden)
&& $item->id && $item->id
&& substr($item->name, -1) !== 'c' // cloned item
&& !in_array($item->id, $notIDs)) { && !in_array($item->id, $notIDs)) {
// existing/unused ready item that we will reuse // existing/unused ready item that we will reuse
$readyPage = $item; $readyPage = $item;
@@ -638,7 +640,7 @@ class FieldtypeRepeater extends Fieldtype implements ConfigurableModule {
// load the repeater pages // load the repeater pages
$a = $this->wire('pages')->find($selector); $a = $this->wire('pages')->find($selector);
$class = $this->getPageArrayClass(true); $class = $this->getPageArrayClass();
$pageArray = $this->wire(new $class($page, $field)); $pageArray = $this->wire(new $class($page, $field));
$pageArray->import($a); $pageArray->import($a);
$pageArray->resetTrackChanges(true); $pageArray->resetTrackChanges(true);
@@ -667,6 +669,8 @@ class FieldtypeRepeater extends Fieldtype implements ConfigurableModule {
// if $value isn't a PageArray, then abort // if $value isn't a PageArray, then abort
if(!$value instanceof PageArray) return array(); if(!$value instanceof PageArray) return array();
/** @var PageArray $value */
$count = 0; $count = 0;
$ids = array(); $ids = array();
@@ -957,8 +961,10 @@ class FieldtypeRepeater extends Fieldtype implements ConfigurableModule {
* *
*/ */
public function ___formatValue(Page $page, Field $field, $value) { public function ___formatValue(Page $page, Field $field, $value) {
$maxItems = (int) $field->get('repeaterMaxItems');
if(!$value instanceof PageArray) return $this->getBlankValue($page, $field); if(!$value instanceof PageArray) $value = $this->getBlankValue($page, $field);
/* TBA /* TBA
if($field->repeaterMaxItems == 1) { if($field->repeaterMaxItems == 1) {
@@ -969,29 +975,19 @@ class FieldtypeRepeater extends Fieldtype implements ConfigurableModule {
// used as a clone if a formatted version of $value is different from non-formatted // used as a clone if a formatted version of $value is different from non-formatted
$formatted = null; $formatted = null;
$cnt = 0;
// remove unpublished and ready items that shouldn't be here // remove unpublished and ready items that shouldn't be here
foreach($value as $p) { foreach($value as $p) {
$cnt++;
/* if($p->isHidden() || $p->isUnpublished() || ($maxItems && $cnt > $maxItems)) {
if($p->status < Page::statusHidden) continue;
$remove = false;
if($p->isHidden()) {
// hidden pages (assumed to be a ready page) should never be included when page is being viewed (outputFormatting)
$remove = true;
} else if($p->isUnpublished() && !$page->isUnpublished()) {
// unpublished items may only be included if the page is also unpublished (and presumably being previewed)
$remove = true;
}
if($remove) {
*/
if($p->isHidden() || $p->isUnpublished()) {
if(is_null($formatted)) $formatted = clone $value; if(is_null($formatted)) $formatted = clone $value;
/** @var Page $formatted */
$trackChanges = $formatted->trackChanges(); $trackChanges = $formatted->trackChanges();
$formatted->setTrackChanges(false); $formatted->setTrackChanges(false);
$formatted->remove($p); $formatted->remove($p);
$formatted->setTrackChanges($trackChanges); $formatted->setTrackChanges($trackChanges);
$cnt--;
} }
} }

View File

@@ -6,13 +6,15 @@
.Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader .toggle-icon { .Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader .toggle-icon {
line-height: 1em; line-height: 1em;
margin-right: 0.5em; } margin-right: 0.5em; }
.Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterToggle, .Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterTrash { .Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterClone, .Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterToggle, .Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterTrash {
cursor: pointer; cursor: pointer;
float: right; } float: right; }
.Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterTrash { .Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterTrash {
padding-right: 3px; } padding-right: 3px; }
.Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterToggle { .Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterToggle {
margin-right: 1em; } margin-right: 1em; }
.Inputfields .InputfieldRepeater .InputfieldRepeaterItem > .InputfieldHeader > .InputfieldRepeaterClone {
margin-right: 1em; }
.Inputfields .InputfieldRepeater .InputfieldRepeaterItem:not(.InputfieldRepeaterDeletePending).InputfieldStateCollapsed > .InputfieldHeader { .Inputfields .InputfieldRepeater .InputfieldRepeaterItem:not(.InputfieldRepeaterDeletePending).InputfieldStateCollapsed > .InputfieldHeader {
opacity: 0.90; } opacity: 0.90; }
.Inputfields .InputfieldRepeater .InputfieldRepeaterItem:not(.InputfieldRepeaterDeletePending).InputfieldStateCollapsed > .InputfieldHeader:hover { .Inputfields .InputfieldRepeater .InputfieldRepeaterItem:not(.InputfieldRepeaterDeletePending).InputfieldStateCollapsed > .InputfieldHeader:hover {

View File

@@ -8,7 +8,14 @@
* *
*/ */
var InputfieldRepeaterDepthSize = 50;
/**
* Delete click event (single item)
*
*/
function InputfieldRepeaterDeleteClick(e) { function InputfieldRepeaterDeleteClick(e) {
var $parent = $(this).parent('label').parent('li'); var $parent = $(this).parent('label').parent('li');
if($parent.is('.InputfieldRepeaterNewItem')) { if($parent.is('.InputfieldRepeaterNewItem')) {
@@ -33,9 +40,52 @@ function InputfieldRepeaterDeleteClick(e) {
$parent.addClass('InputfieldRepeaterDeletePending'); $parent.addClass('InputfieldRepeaterDeletePending');
} }
} }
InputfieldRepeaterCheckMax($parent.closest('.InputfieldRepeater'));
e.stopPropagation(); e.stopPropagation();
} }
/**
* Delete double-click event (multi-item)
*
*/
function InputfieldRepeaterDeleteDblClick(e) {
var $li = $(this).closest('li');
var undelete = $li.hasClass('InputfieldRepeaterDeletePending');
function selectAll() {
$li.parent().children('li').each(function() {
var $item = $(this);
var $trashLink = $item.children('.InputfieldHeader').children('.InputfieldRepeaterTrash');
if($item.hasClass('InputfieldRepeaterDeletePending')) {
if(undelete) $trashLink.click();
} else {
if(!undelete) $trashLink.click();
}
});
}
if(undelete) {
selectAll();
} else {
ProcessWire.confirm(ProcessWire.config.InputfieldRepeater.labels.removeAll, selectAll);
}
}
function InputfieldRepeaterCloneClick(e) {
var $item = $(this).closest('.InputfieldRepeaterItem');
ProcessWire.confirm(ProcessWire.config.InputfieldRepeater.labels.clone, function() {
var itemID = $item.attr('data-page');
var $addLink = $item.closest('.InputfieldRepeater').children('.InputfieldContent')
.children('.InputfieldRepeaterAddItem').find('.InputfieldRepeaterAddLink:eq(0)');
$addLink.attr('data-clone', itemID).click();
$('html, body').animate({ scrollTop: $addLink.offset().top - 100}, 250, 'swing');
});
return false;
}
/** /**
* Event handler for the "publish" toggle in the header of each repeater item * Event handler for the "publish" toggle in the header of each repeater item
* *
@@ -74,19 +124,46 @@ function InputfieldRepeaterItemOpenReady(e) {
* *
*/ */
function InputfieldRepeaterUpdateState($item) { function InputfieldRepeaterUpdateState($item) {
if($item.closest('.InputfieldRepeaterRememberOpen').length) {
if(!$item.closest('.InputfieldRepeaterRememberOpen').length) return; var val = '';
$(".InputfieldRepeaterItem:not(.InputfieldStateCollapsed)").each(function() {
var val = ''; var id = parseInt($(this).attr('data-page'));
if(id > 0) {
$(".InputfieldRepeaterItem:not(.InputfieldStateCollapsed)").each(function() { val += id + '|';
var id = parseInt($(this).attr('data-page')); }
if(id > 0) { });
val += id + '|'; $.cookie('repeaters_open', val);
}
}
function InputfieldRepeaterCheckMax($inputfield) {
if(!$inputfield.hasClass('InputfieldRepeaterMax')) return;
var max = parseInt($inputfield.attr('data-max'));
if(max <= 0) return;
var $content = $inputfield.children('.InputfieldContent');
var num = $content.children('.Inputfields').children('li:not(.InputfieldRepeaterDeletePending)').length;
var $addItem = $content.children('.InputfieldRepeaterAddItem');
if(num > max) {
$addItem.hide();
} else if(!$addItem.is(":visible")) {
$addItem.show();
}
}
function InputfieldRepeaterCheckDepths($inputfield) {
$inputfield.find('.InputfieldRepeaterDepth').each(function() {
var $depth = $(this);
var depth = $depth.val();
var $item = $depth.closest('.InputfieldRepeaterItem');
var currentLeft = $item.css('margin-left');
if(currentLeft == 'auto') currentLeft = 0;
currentLeft = parseInt(currentLeft);
var targetLeft = depth * InputfieldRepeaterDepthSize;
if(targetLeft != currentLeft) {
$item.css('margin-left', targetLeft + 'px');
$item.data('lastLeft', targetLeft);
} }
}); });
$.cookie('repeaters_open', val);
} }
/** /**
@@ -184,10 +261,12 @@ function InputfieldRepeaterInit($this) {
if($this.hasClass('InputfieldRepeaterItem')) { if($this.hasClass('InputfieldRepeaterItem')) {
// single repeater item // single repeater item
var $inputfields = $this; var $inputfields = $this;
var $inputfieldRepeater = $this.closest('.InputfieldRepeater');
var isItem = true; var isItem = true;
} else { } else {
// enter repeater // enter repeater
var $inputfields = $this.find('.Inputfields:eq(0)'); var $inputfields = $this.find('.Inputfields:eq(0)');
var $inputfieldRepeater = $this;
var isItem = false; var isItem = false;
} }
@@ -196,13 +275,16 @@ function InputfieldRepeaterInit($this) {
$inputfields.addClass('InputfieldRepeaterInit'); $inputfields.addClass('InputfieldRepeaterInit');
var renderValueMode = $inputfields.closest('.InputfieldRenderValueMode').length > 0; var renderValueMode = $inputfields.closest('.InputfieldRenderValueMode').length > 0;
var $delete = $("<i class='fa fa-trash InputfieldRepeaterTrash'></i>").css('display', 'block'); var $clone = $("<i class='fa fa-copy InputfieldRepeaterClone'></i>").css('display', 'block');
var $delete = $("<i class='fa fa-trash InputfieldRepeaterTrash'></i>");
var $toggle = $("<i class='fa InputfieldRepeaterToggle' data-on='fa-toggle-on' data-off='fa-toggle-off'></i>"); var $toggle = $("<i class='fa InputfieldRepeaterToggle' data-on='fa-toggle-on' data-off='fa-toggle-off'></i>");
var cfg = ProcessWire.config.InputfieldRepeater; var cfg = ProcessWire.config.InputfieldRepeater;
var allowClone = !$inputfieldRepeater.hasClass('InputfieldRepeaterNoAjaxAdd');
if(cfg) { if(cfg) {
$toggle.attr('title', cfg.labels.toggle); $toggle.attr('title', cfg.labels.toggle);
$delete.attr('title', cfg.labels.remove); $delete.attr('title', cfg.labels.remove);
$clone.attr('title', cfg.labels.clone);
} }
$("input.InputfieldRepeaterDelete", $this).parents('.InputfieldCheckbox').hide(); $("input.InputfieldRepeaterDelete", $this).parents('.InputfieldCheckbox').hide();
@@ -221,6 +303,7 @@ function InputfieldRepeaterInit($this) {
$t.addClass('ui-state-default InputfieldRepeaterHeaderInit'); $t.addClass('ui-state-default InputfieldRepeaterHeaderInit');
$t.prepend("<i class='fa fa-fw " + icon + " InputfieldRepeaterDrag'></i>") $t.prepend("<i class='fa fa-fw " + icon + " InputfieldRepeaterDrag'></i>")
if(!renderValueMode) { if(!renderValueMode) {
if(allowClone) $t.prepend($clone.clone(true));
$t.prepend($toggle.clone(true).addClass($t.parent().hasClass('InputfieldRepeaterOff') ? 'fa-toggle-off' : 'fa-toggle-on')); $t.prepend($toggle.clone(true).addClass($t.parent().hasClass('InputfieldRepeaterOff') ? 'fa-toggle-off' : 'fa-toggle-on'));
$t.prepend($delete.clone(true)); $t.prepend($delete.clone(true));
} }
@@ -255,9 +338,8 @@ function InputfieldRepeaterInit($this) {
$inputfields = $this.closest('.InputfieldRepeater').find('.Inputfields:eq(0)'); $inputfields = $this.closest('.InputfieldRepeater').find('.Inputfields:eq(0)');
} }
$inputfields.sortable({ var sortableOptions = {
items: '> li:not(.InputfieldRepeaterNewItem)', items: '> li:not(.InputfieldRepeaterNewItem)',
axis: 'y',
handle: '.InputfieldRepeaterDrag', handle: '.InputfieldRepeaterDrag',
start: function(e, ui) { start: function(e, ui) {
ui.item.find('.InputfieldHeader').addClass("ui-state-highlight"); ui.item.find('.InputfieldHeader').addClass("ui-state-highlight");
@@ -275,7 +357,9 @@ function InputfieldRepeaterInit($this) {
tinyMCE.execCommand('mceRemoveControl', false, $(this).attr('id')); tinyMCE.execCommand('mceRemoveControl', false, $(this).attr('id'));
}); });
}, },
stop: function(e, ui) { stop: function(e, ui) {
ui.item.find('.InputfieldHeader').removeClass("ui-state-highlight"); ui.item.find('.InputfieldHeader').removeClass("ui-state-highlight");
$(this).children().each(function(n) { $(this).children().each(function(n) {
$(this).find('.InputfieldRepeaterSort').slice(0,1).attr('value', n); $(this).find('.InputfieldRepeaterSort').slice(0,1).attr('value', n);
@@ -291,8 +375,47 @@ function InputfieldRepeaterInit($this) {
tinyMCE.execCommand('mceAddControl', false, $(this).attr('id')); tinyMCE.execCommand('mceAddControl', false, $(this).attr('id'));
}); });
} }
}); };
var maxDepth = parseInt($inputfieldRepeater.attr('data-depth'));
if(maxDepth > 0) {
InputfieldRepeaterCheckDepths($inputfieldRepeater);
sortableOptions.grid = [ InputfieldRepeaterDepthSize, 1 ];
sortableOptions.beforeStop = function(event, ui) {
var lastLeft = ui.item.data('lastLeft');
if(!lastLeft) lastLeft = 0;
var left = lastLeft + ui.position.left;
left -= InputfieldRepeaterDepthSize / 2;
if(left > 10 && left < InputfieldRepeaterDepthSize) left = InputfieldRepeaterDepthSize;
var depth = Math.round(left / InputfieldRepeaterDepthSize);
if(depth < 1) depth = 0;
if(depth > maxDepth) depth = maxDepth;
if(depth) {
ui.item.css('margin-left', (depth * InputfieldRepeaterDepthSize) + 'px');
} else {
ui.item.css('margin-left', 0);
}
ui.item.find('.InputfieldRepeaterDepth').val(depth);
ui.item.data('lastLeft', left);
ui.item.children('.InputfieldHeader').removeClass('ui-state-error');
};
sortableOptions.sort = function(event, ui) {
var lastLeft = ui.item.data('lastLeft');
if(!lastLeft) lastLeft = 0;
var left = lastLeft + ui.position.left;
var $header = ui.item.children('.InputfieldHeader');
if(left > (InputfieldRepeaterDepthSize * maxDepth) + (InputfieldRepeaterDepthSize / 2)) {
// beyond max depth allowed
$header.addClass('ui-state-error');
} else if($header.hasClass('ui-state-error')) {
$header.removeClass('ui-state-error');
}
};
} else {
sortableOptions.axis = 'y';
}
$inputfields.sortable(sortableOptions);
var $addLinks = $(".InputfieldRepeaterAddLink:not(.InputfieldRepeaterAddLinkInit)", $this); var $addLinks = $(".InputfieldRepeaterAddLink:not(.InputfieldRepeaterAddLinkInit)", $this);
$addLinks.addClass('InputfieldRepeaterAddLinkInit'); $addLinks.addClass('InputfieldRepeaterAddLinkInit');
@@ -302,20 +425,31 @@ function InputfieldRepeaterInit($this) {
var $inputfields = $(this).parent('p').prev('ul.Inputfields'); var $inputfields = $(this).parent('p').prev('ul.Inputfields');
var $numAddInput = $(this).parent().children('input'); var $numAddInput = $(this).parent().children('input');
var newItemTotal = 0; // for noAjaxAdd mode var newItemTotal = 0; // for noAjaxAdd mode
var useAjax = $addLink.attr('data-noajax').length == 0;
var cloneID = $addLink.attr('data-clone');
function addRepeaterItem($addItem) { function addRepeaterItem($addItem) {
// make sure it has a unique ID // make sure it has a unique ID
var id = $addItem.attr('id') + '_'; var id = $addItem.attr('id') + '_';
while($('#' + id).size() > 0) id += '_'; while($('#' + id).length > 0) id += '_';
$addItem.attr('id', id); $addItem.attr('id', id);
$inputfields.append($addItem); $inputfields.append($addItem);
$addItem.css('display', 'block'); $addItem.css('display', 'block');
//$addItem.find('.InputfieldRepeaterTrash').click(InputfieldRepeaterDeleteClick); //$addItem.find('.InputfieldRepeaterTrash').click(InputfieldRepeaterDeleteClick);
InputfieldRepeaterAdjustLabel($addItem, true); InputfieldRepeaterAdjustLabel($addItem, true);
/*
$nestedItems = $addItem.find('.InputfieldRepeater').find('.InputfieldRepeaterItem');
if($nestedItems.length) {
$nestedItems.each(function() {
InputfieldRepeaterAdjustLabel($(this));
});
}
*/
$addLink.trigger('repeateradd', [ $addItem ]); $addLink.trigger('repeateradd', [ $addItem ]);
} }
var useAjax = $addLink.attr('data-noajax').length == 0; if(typeof cloneID == "undefined" || !cloneID) cloneID = null;
if(cloneID) $addLink.removeAttr('data-clone');
if(!useAjax) { if(!useAjax) {
var $newItem = $inputfields.children('.InputfieldRepeaterNewItem'); // for noAjaxAdd mode, non-editable new item var $newItem = $inputfields.children('.InputfieldRepeaterNewItem'); // for noAjaxAdd mode, non-editable new item
@@ -325,31 +459,42 @@ function InputfieldRepeaterInit($this) {
var $addItem = $newItem.clone(true) var $addItem = $newItem.clone(true)
addRepeaterItem($addItem); addRepeaterItem($addItem);
$numAddInput.attr('value', newItemTotal); $numAddInput.attr('value', newItemTotal);
InputfieldRepeaterCheckMax($inputfieldRepeater);
} }
} else { } else {
// get addItem from ajax // get addItem from ajax
var pageID = $addLink.closest('.InputfieldRepeater').attr('data-page'); // $("#Inputfield_id").val(); var pageID = $addLink.closest('.InputfieldRepeater').attr('data-page'); // $("#Inputfield_id").val();
var fieldName = $addLink.closest('.InputfieldRepeater').attr('id').replace('wrap_Inputfield_', ''); var fieldName = $addLink.closest('.InputfieldRepeater').attr('id').replace('wrap_Inputfield_', '');
var ajaxURL = ProcessWire.config.InputfieldRepeater.editorUrl + '?id=' + pageID + '&field=' + fieldName + '&repeater_add=' + $addLink.attr('data-type') + '&repeater_not=';
var $spinner = $addLink.parent().find('.InputfieldRepeaterSpinner'); var $spinner = $addLink.parent().find('.InputfieldRepeaterSpinner');
var ajaxURL = ProcessWire.config.InputfieldRepeater.editorUrl + '?id=' + pageID + '&field=' + fieldName;
$spinner.removeClass($spinner.attr('data-off')).addClass($spinner.attr('data-on')); $spinner.removeClass($spinner.attr('data-off')).addClass($spinner.attr('data-on'));
if(cloneID) {
ajaxURL += '&repeater_clone=' + cloneID;
} else {
ajaxURL += '&repeater_add=' + $addLink.attr('data-type');
}
// determine which page IDs we don't accept for new items (because we already have them rendered) // determine which page IDs we don't accept for new items (because we already have them rendered)
$inputfields.find('.InputfieldRepeaterUnpublished').each(function() { var $unpublishedItems = $inputfields.find('.InputfieldRepeaterUnpublished');
ajaxURL += $(this).attr('data-page') + ','; if($unpublishedItems.length) {
}); ajaxURL += '&repeater_not=';
$unpublishedItems.each(function() {
ajaxURL += $(this).attr('data-page') + ',';
});
}
$.get(ajaxURL, function(data) { $.get(ajaxURL, function(data) {
//console.log(data);
$spinner.removeClass($spinner.attr('data-on')).addClass($spinner.attr('data-off')); $spinner.removeClass($spinner.attr('data-on')).addClass($spinner.attr('data-off'));
var $addItem = $(data).find(".InputfieldRepeaterItem.InputfieldRepeaterUnpublished"); var $addItem = $(data).find(".InputfieldRepeaterItemRequested");
if(!$addItem.length) { if(!$addItem.length) {
// error // error
// console.log("Can't find item: .InputfieldRepeaterItem.InputfieldRepeaterUnpublished"); // console.log("Can't find item: .InputfieldRepeaterItem.InputfieldRepeaterUnpublished");
return; return;
} }
//console.log($addItem);
addRepeaterItem($addItem); addRepeaterItem($addItem);
$addItem.wrap("<div />"); // wrap for inputfields.js $target $addItem.wrap("<div />"); // wrap for inputfields.js $target
InputfieldsInit($addItem.parent()); InputfieldsInit($addItem.parent());
@@ -360,8 +505,15 @@ function InputfieldRepeaterInit($this) {
$addItem.find('.InputfieldRepeaterSort').val($inputfields.children().length); $addItem.find('.InputfieldRepeaterSort').val($inputfields.children().length);
$('html, body').animate({ $('html, body').animate({
scrollTop: $addItem.offset().top scrollTop: $addItem.offset().top
}, 500); }, 500, 'swing');
InputfieldRepeaterUpdateState($addItem); InputfieldRepeaterUpdateState($addItem);
InputfieldRepeaterCheckMax($inputfieldRepeater);
$nestedRepeaters = $addItem.find('.InputfieldRepeater');
if($nestedRepeaters.length) {
$nestedRepeaters.each(function() {
InputfieldRepeaterInit($(this));
});
}
}); });
} }
@@ -369,13 +521,17 @@ function InputfieldRepeaterInit($this) {
}); });
//$(".InputfieldRepeaterUnpublished").children('.InputfieldHeader').addClass('ui-priority-secondary'); //$(".InputfieldRepeaterUnpublished").children('.InputfieldHeader').addClass('ui-priority-secondary');
if($inputfieldRepeater.hasClass('InputfieldRepeaterMax')) InputfieldRepeaterCheckMax($inputfieldRepeater);
} }
$(document).ready(function() { $(document).ready(function() {
$(".InputfieldRepeater").each(function() { $(".InputfieldRepeater").each(function() {
InputfieldRepeaterInit($(this)); InputfieldRepeaterInit($(this));
}); });
$(document).on('reloaded', '.InputfieldRepeater', function(event, source) { $(document).on('reloaded', '.InputfieldRepeater', function(event, source) {
if(typeof source != "undefined") { if(typeof source != "undefined") {
if(source == 'InputfieldRepeaterItemEdit' || source == 'InputfieldRepeaterItemAdd') { if(source == 'InputfieldRepeaterItemEdit' || source == 'InputfieldRepeaterItemAdd') {
@@ -387,11 +543,14 @@ $(document).ready(function() {
} }
InputfieldRepeaterInit($(this)); InputfieldRepeaterInit($(this));
}); });
$(document).on('click', '.InputfieldRepeaterTrash', InputfieldRepeaterDeleteClick);
$(document).on('click', '.InputfieldRepeaterToggle', InputfieldRepeaterToggleClick); $(document)
$(document).on('opened', '.InputfieldRepeaterItem', InputfieldRepeaterItemOpened); .on('click', '.InputfieldRepeaterTrash', InputfieldRepeaterDeleteClick)
$(document).on('closed', '.InputfieldRepeaterItem', InputfieldRepeaterItemClosed); .on('dblclick', '.InputfieldRepeaterTrash', InputfieldRepeaterDeleteDblClick)
$(document).on('openReady', '.InputfieldRepeaterItem', InputfieldRepeaterItemOpenReady); .on('click', '.InputfieldRepeaterClone', InputfieldRepeaterCloneClick)
.on('click', '.InputfieldRepeaterToggle', InputfieldRepeaterToggleClick)
.on('opened', '.InputfieldRepeaterItem', InputfieldRepeaterItemOpened)
.on('closed', '.InputfieldRepeaterItem', InputfieldRepeaterItemClosed)
.on('openReady', '.InputfieldRepeaterItem', InputfieldRepeaterItemOpenReady);
}); });

File diff suppressed because one or more lines are too long

View File

@@ -9,6 +9,7 @@
* https://processwire.com * https://processwire.com
* *
* @property int $repeaterMaxItems * @property int $repeaterMaxItems
* @property int $repeaterDepth
* *
* @method string renderRepeaterLabel($label, $cnt, Page $page) * @method string renderRepeaterLabel($label, $cnt, Page $page)
* *
@@ -86,6 +87,7 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
parent::__construct(); parent::__construct();
// these are part of the Fieldtype's config, and automatically set from it // these are part of the Fieldtype's config, and automatically set from it
$this->set('repeaterMaxItems', 0); $this->set('repeaterMaxItems', 0);
$this->set('repeaterDepth', 0);
} }
/** /**
@@ -112,7 +114,8 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
static $allowRender = null; static $allowRender = null;
if(is_null($allowRender)) { if(is_null($allowRender)) {
$allowRender = true; $allowRender = true;
if($this->wire('input')->get('repeater_edit')) { $repeaterEditID = (int) $this->wire('input')->get('repeater_edit');
if($repeaterEditID && $repeaterEditID == $page->id) {
$allowRender = false; $allowRender = false;
} else if(count($_POST) && !$this->wire('config')->ajax) { } else if(count($_POST) && !$this->wire('config')->ajax) {
$allowRender = false; $allowRender = false;
@@ -257,7 +260,7 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
/** @var InputfieldWrapper $form */ /** @var InputfieldWrapper $form */
$form = $this->wire(new InputfieldWrapper()); $form = $this->wire(new InputfieldWrapper());
$form->name = 'repeater_form_' . $this->name . ($itemID ? "_$itemID" : ""); $form->name = 'repeater_form_' . $this->name . ($itemID ? "_$itemID" : "");
$this->wrapAttr('data-page', $this->page->id);
/** @var PageArray $value */ /** @var PageArray $value */
$value = $this->attr('value'); $value = $this->attr('value');
@@ -277,17 +280,19 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
$repeaterCollapse = (int) $this->field->get('repeaterCollapse'); $repeaterCollapse = (int) $this->field->get('repeaterCollapse');
$cnt = 0; $cnt = 0;
$numVisible = 0;
// create field for each repeater iteration // create field for each repeater iteration
foreach($value as $key => $page) { foreach($value as $key => $page) {
if($itemID && $page->id != $itemID) continue; if($itemID && $page->id != $itemID) continue;
/** @var Page $page */ /** @var RepeaterPage $page */
$isUnpublished = $page->isUnpublished(); $isUnpublished = $page->isUnpublished();
$isHidden = $page->isHidden(); $isHidden = $page->isHidden();
$isOn = $page->hasStatus(Page::statusOn); $isOn = $page->hasStatus(Page::statusOn);
$isReadyItem = $isHidden && $isUnpublished; $isReadyItem = $isHidden && $isUnpublished;
$isOpen = in_array($page->id, $openIDs); $isClone = $page->get('_repeater_clone');
$isOpen = in_array($page->id, $openIDs) || $isClone;
// get the inputfields for the repeater page // get the inputfields for the repeater page
if(is_null($loadInputsForIDs) || in_array($page->id, $loadInputsForIDs) || $isOpen) { if(is_null($loadInputsForIDs) || in_array($page->id, $loadInputsForIDs) || $isOpen) {
@@ -312,6 +317,17 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
$sort->class = 'InputfieldRepeaterSort'; $sort->class = 'InputfieldRepeaterSort';
$sort->label = $this->_('Sort'); $sort->label = $this->_('Sort');
$sort->attr('value', $cnt); $sort->attr('value', $cnt);
if($this->repeaterDepth > 0) {
$depth = $this->wire('modules')->get('InputfieldHidden');
$depth->attr('id+name', "depth_repeater{$page->id}");
$depth->class = 'InputfieldRepeaterDepth';
$depth->label = $this->_('Depth');
$depthValue = $page->getDepth();
$depth->attr('value', $depthValue);
} else {
$depth = null;
}
$loaded = $this->wire('modules')->get('InputfieldHidden'); $loaded = $this->wire('modules')->get('InputfieldHidden');
$loaded->attr('id+name', "loaded_repeater{$page->id}"); $loaded->attr('id+name', "loaded_repeater{$page->id}");
@@ -324,9 +340,14 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
$wrap->name = "repeater_item_{$page->id}"; $wrap->name = "repeater_item_{$page->id}";
$wrap->wrapAttr('data-page', $page->id); $wrap->wrapAttr('data-page', $page->id);
$wrap->wrapAttr('data-type', $this->getRepeaterItemType($page)); $wrap->wrapAttr('data-type', $this->getRepeaterItemType($page));
//$wrap->wrapAttr('data-editorPage', $this->page->id);
//$wrap->wrapAttr('data-parentPage', $page->parent->id);
$wrap->wrapAttr('data-editUrl', $page->editUrl()); // if needed by any Inputfields within like InputfieldFile/InputfieldImage $wrap->wrapAttr('data-editUrl', $page->editUrl()); // if needed by any Inputfields within like InputfieldFile/InputfieldImage
$wrap->set('useDependencies', false); $wrap->set('useDependencies', false);
if($isClone) $wrap->addClass('InputfieldRepeaterItemClone');
if($itemID) $wrap->addClass('InputfieldRepeaterItemRequested');
if($isOpen) { if($isOpen) {
$wrap->collapsed = Inputfield::collapsedNo; $wrap->collapsed = Inputfield::collapsedNo;
} else if($repeaterCollapse == FieldtypeRepeater::collapseExisting && !$page->get('_repeater_new') && !$isHidden) { } else if($repeaterCollapse == FieldtypeRepeater::collapseExisting && !$page->get('_repeater_new') && !$isHidden) {
@@ -365,19 +386,35 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
$wrap->add($inputfields); $wrap->add($inputfields);
$wrap->prepend($delete); $wrap->prepend($delete);
$wrap->prepend($sort); $wrap->prepend($sort);
if($depth) $wrap->prepend($depth);
$wrap->prepend($loaded); $wrap->prepend($loaded);
if(!$isReadyItem) $form->add($wrap); if(!$isReadyItem) {
$form->add($wrap);
$numVisible++;
}
$this->labels[$page->id] = $wrap->getSetting('label'); $this->labels[$page->id] = $wrap->getSetting('label');
if($itemID) break;
} }
// create a new/blank item to be used as a template for any new items added // create a new/blank item to be used as a template for any new items added
$wrap = $this->wire('modules')->get('InputfieldFieldset'); if(!$itemID) {
$wrap->label = $this->renderRepeaterLabel($label, ++$cnt, new NullPage()); $wrap = $this->wire('modules')->get('InputfieldFieldset');
$wrap->class = 'InputfieldRepeaterItem InputfieldRepeaterNewItem'; $wrap->label = $this->renderRepeaterLabel($label, ++$cnt, new NullPage());
$wrap->collapsed = Inputfield::collapsedNo; $wrap->class = 'InputfieldRepeaterItem InputfieldRepeaterNewItem';
$form->add($wrap); $wrap->collapsed = Inputfield::collapsedNo;
$form->add($wrap);
}
// max items warning
if($this->repeaterMaxItems && $numVisible > $this->repeaterMaxItems) {
$this->prependMarkup .=
"<p class='ui-state-error-text'>" .
sprintf($this->_('Warning: only the first %d item(s) will be used.'), $this->repeaterMaxItems) .
"</p>";
}
// cache // cache
$this->form = $form; $this->form = $form;
@@ -403,23 +440,52 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
/** /**
* Render a new item for ajax after 'add new' link clicked * Render a new item for ajax after 'add new' link clicked
* *
* @param int $cloneItemID
* @return string * @return string
* *
*/ */
public function renderAjaxNewItem() { public function renderAjaxNewItem($cloneItemID = 0) {
/** @var PageArray $value */ /** @var PageArray $value */
$value = $this->attr('value'); $value = $this->attr('value');
$notIDs = $this->wire('sanitizer')->intArray(explode(',', trim($this->wire('input')->get('repeater_not'), ','))); $clonePage = null;
$readyPage = $this->getNextReadyPage($notIDs); $readyPage = null;
$readyPage->removeStatus(Page::statusHidden);
if($cloneItemID) {
foreach($value as $item) {
if($item->id == $cloneItemID) {
$clonePage = $item;
break;
}
}
}
// ensure editing page doesn't get saved (just in case) since we're removing all items if($clonePage && $clonePage->id) {
$this->page->addStatus(Page::statusCorrupted); /** @var FieldtypeRepeater $fieldtype */
$fieldtype = $this->field->type;
$value->add($readyPage); $readyPage = $this->wire('pages')->clone($clonePage, null, true,
array('set' => array(
return $this->buildForm($readyPage->id)->render(); 'name' => $fieldtype->getUniqueRepeaterPageName() . 'c', // trailing "c" indicates clone
'sort' => count($value)+1,
'status' => $clonePage->status | Page::statusUnpublished
)
)
);
$readyPage->set('_repeater_clone', $clonePage->id);
} else if(!$cloneItemID) {
$notIDs = $this->wire('sanitizer')->intArray(explode(',', trim($this->wire('input')->get('repeater_not'), ',')));
$readyPage = $this->getNextReadyPage($notIDs);
$readyPage->removeStatus(Page::statusHidden);
}
if($readyPage) {
// ensure editing page doesn't get saved (just in case) since we're removing all items
$this->page->addStatus(Page::statusCorrupted);
$value->add($readyPage);
return $this->buildForm($readyPage->id)->render();
} else {
return '';
}
} }
/** /**
@@ -450,8 +516,37 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
* *
*/ */
public function renderReady(Inputfield $parent = null, $renderValueMode = false) { public function renderReady(Inputfield $parent = null, $renderValueMode = false) {
$this->wire('modules')->get('JqueryCore')->use('cookie'); $this->wire('modules')->get('JqueryCore')->use('cookie');
$this->preloadInputfieldAssets(); $this->wire('modules')->get('JqueryUI')->use('vex');
$this->preloadInputfieldAssets();
if($this->field->get('repeaterLoading') == FieldtypeRepeater::loadingOff) {
$this->addClass('InputfieldRepeaterNoAjaxAdd', 'wrapClass');
}
if($this->repeaterMaxItems > 0) {
$this->addClass('InputfieldRepeaterMax', 'wrapClass');
}
if($this->repeaterDepth > 0) {
$this->addClass('InputfieldRepeaterDepth', 'wrapClass');
}
$this->wrapAttr('data-page', $this->page->id);
$this->wrapAttr('data-max', (int) $this->repeaterMaxItems);
$this->wrapAttr('data-depth', (int) $this->repeaterDepth);
list($editorUrl, $queryString) = explode('?', $this->page->editUrl());
if($queryString) {}
$this->wire('config')->js('InputfieldRepeater', array(
'editorUrl' => $editorUrl,
'labels' => array(
'remove' => $this->_x('Delete this item', 'repeater-item-action'),
'removeAll' => $this->_x('Delete all items?', 'repeater-item-action'),
'toggle' => $this->_x('Toggle published/unpublished', 'repeater-item-action'),
'clone' => $this->_x('Clone this item?', 'repeater-item-action')
)
));
return parent::renderReady($parent, $renderValueMode); return parent::renderReady($parent, $renderValueMode);
} }
@@ -491,7 +586,10 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
if($ajax && $input->get('field') == $this->attr('name')) { if($ajax && $input->get('field') == $this->attr('name')) {
$repeaterAdd = $input->get('repeater_add'); $repeaterAdd = $input->get('repeater_add');
$repeaterEdit = (int) $input->get('repeater_edit'); $repeaterEdit = (int) $input->get('repeater_edit');
if($repeaterAdd !== null && !$noAjaxAdd) { $repeaterClone = (int) $input->get('repeater_clone');
if($repeaterClone) {
return $this->renderValueMode ? '' : $this->renderAjaxNewItem($repeaterClone);
} else if($repeaterAdd !== null && !$noAjaxAdd) {
return $this->renderValueMode ? '' : $this->renderAjaxNewItem(); return $this->renderValueMode ? '' : $this->renderAjaxNewItem();
} else if($repeaterEdit) { } else if($repeaterEdit) {
if($this->renderValueMode) { if($this->renderValueMode) {
@@ -508,17 +606,7 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
$collapse = $this->field->get('repeaterCollapse'); $collapse = $this->field->get('repeaterCollapse');
$forIDs = null; $forIDs = null;
if($loading == FieldtypeRepeater::loadingAll && $collapse != FieldtypeRepeater::collapseNone) $forIDs = array(); if($loading == FieldtypeRepeater::loadingAll && $collapse != FieldtypeRepeater::collapseNone) $forIDs = array();
list($editorUrl, $queryString) = explode('?', $this->page->editUrl());
if($queryString) {}
$this->wire('config')->js('InputfieldRepeater', array(
'editorUrl' => $editorUrl,
'labels' => array(
'remove' => $this->_x('Delete this item', 'repeater-item-action'),
'toggle' => $this->_x('Toggle published/unpublished', 'repeater-item-action')
)
));
return $this->buildForm(0, $forIDs)->render() . $out; return $this->buildForm(0, $forIDs)->render() . $out;
} }
@@ -569,7 +657,7 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
// existing items // existing items
foreach($value as $key => $page) { foreach($value as $key => $page) {
/** @var Page $page */ /** @var RepeaterPage $page */
$pageIDs[] = $page->id; $pageIDs[] = $page->id;
$isHidden = $page->isHidden(); $isHidden = $page->isHidden();
@@ -579,6 +667,7 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
$deleteName = "delete_repeater{$page->id}"; $deleteName = "delete_repeater{$page->id}";
$sortName = "sort_repeater{$page->id}"; $sortName = "sort_repeater{$page->id}";
$publishName = "publish_repeater{$page->id}"; $publishName = "publish_repeater{$page->id}";
$depthName = "depth_repeater{$page->id}";
if($input->$deleteName == $page->id) { if($input->$deleteName == $page->id) {
$value->remove($page); $value->remove($page);
@@ -596,6 +685,14 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
$sortChanged = true; $sortChanged = true;
} }
if($this->repeaterDepth > 0) {
$depth = (int) $input->$depthName;
if($page->getDepth() != $depth) {
$page->setDepth($depth);
$numChanges++;
}
}
/** @var InputfieldWrapper $wrapper */ /** @var InputfieldWrapper $wrapper */
$wrapper = $this->wrappers[$page->id]; $wrapper = $this->wrappers[$page->id];
$wrapper->resetTrackChanges(true); $wrapper->resetTrackChanges(true);
@@ -640,7 +737,7 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
for($n = 0; $n < $numNewItems; $n++) { for($n = 0; $n < $numNewItems; $n++) {
$page = $this->getNextReadyPage($pageIDs); $page = $this->getNextReadyPage($pageIDs);
$page->removeStatus(Page::statusHidden); $page->removeStatus(Page::statusHidden);
$page->sort = count($value); $page->sort = count($value)+1;
$value->add($page); $value->add($page);
$numChanges++; $numChanges++;
} }
@@ -722,7 +819,7 @@ class InputfieldRepeater extends Inputfield implements InputfieldItemList {
* *
* @param string $key * @param string $key
* @param mixed $value * @param mixed $value
* @return $this * @return Inputfield|InputfieldRepeater
* *
*/ */
public function set($key, $value) { public function set($key, $value) {

View File

@@ -14,6 +14,7 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
& > .InputfieldRepeaterClone,
& > .InputfieldRepeaterToggle, & > .InputfieldRepeaterToggle,
& > .InputfieldRepeaterTrash { & > .InputfieldRepeaterTrash {
cursor: pointer; cursor: pointer;
@@ -25,6 +26,9 @@
& > .InputfieldRepeaterToggle { & > .InputfieldRepeaterToggle {
margin-right: 1em; margin-right: 1em;
} }
& > .InputfieldRepeaterClone {
margin-right: 1em;
}
} }
.InputfieldRepeaterItem:not(.InputfieldRepeaterDeletePending) { .InputfieldRepeaterItem:not(.InputfieldRepeaterDeletePending) {

View File

@@ -20,13 +20,21 @@ class RepeaterPage extends Page {
* Field instance that contains this repeater item * Field instance that contains this repeater item
* *
*/ */
protected $forField = null; protected $forField = null;
/**
* Depth of this item
*
* @var int|null
*
*/
protected $depth = null;
/** /**
* Set the page that owns this repeater item * Set the page that owns this repeater item
* *
* @param Page $forPage * @param Page $forPage
* @return this * @return $this
* *
*/ */
public function setForPage(Page $forPage) { public function setForPage(Page $forPage) {
@@ -55,7 +63,10 @@ class RepeaterPage extends Page {
// but if this repeater was loaded from somewhere else, that won't // but if this repeater was loaded from somewhere else, that won't
// have happened, so we have to determine it from it's location // have happened, so we have to determine it from it's location
$parentName = $this->parent()->name;
/** @var Page $parent */
$parent = $this->parent();
$parentName = $parent->name;
$prefix = FieldtypeRepeater::repeaterPageNamePrefix; // for-page- $prefix = FieldtypeRepeater::repeaterPageNamePrefix; // for-page-
if(strpos($parentName, $prefix) === 0) { if(strpos($parentName, $prefix) === 0) {
@@ -74,7 +85,7 @@ class RepeaterPage extends Page {
* Set the field that owns this repeater item * Set the field that owns this repeater item
* *
* @param Field $forField * @param Field $forField
* @return this * @return $this
* *
*/ */
public function setForField(Field $forField) { public function setForField(Field $forField) {
@@ -91,7 +102,8 @@ class RepeaterPage extends Page {
public function getForField() { public function getForField() {
if(!is_null($this->forField)) return $this->forField; if(!is_null($this->forField)) return $this->forField;
$grandparentName = $this->parent()->parent()->name; $grandparent = $this->parent()->parent();
$grandparentName = $grandparent->name;
$prefix = FieldtypeRepeater::fieldPageNamePrefix; // for-field- $prefix = FieldtypeRepeater::fieldPageNamePrefix; // for-field-
if(strpos($grandparentName, $prefix) === 0) { if(strpos($grandparentName, $prefix) === 0) {
@@ -102,6 +114,31 @@ class RepeaterPage extends Page {
return $this->forField; return $this->forField;
} }
public function get($key) {
$value = parent::get($key);
if($key === 'depth' && is_null($value)) {
$value = $this->getDepth();
}
return $value;
}
public function getDepth() {
if(is_null($this->depth)) {
$this->depth = 0;
$name = $this->name;
while($name[$this->depth] === '-') $this->depth++;
}
return $this->depth;
}
public function setDepth($depth) {
$name = $this->name;
$_name = $name;
$name = ltrim($name, '-');
if($depth > 0) $name = str_repeat('-', $depth) . $name;
if($name !== $_name) $this->name = $name;
}
/** /**
* Is this page public? * Is this page public?

View File

@@ -53,6 +53,7 @@ class FieldtypeRepeaterConfigHelper extends Wire {
$this->message($this->_('Please add fields to this repeater from the "details" tab.')); $this->message($this->_('Please add fields to this repeater from the "details" tab.'));
} }
/** @var InputfieldHidden $f */
$f = $this->modules->get('InputfieldHidden'); $f = $this->modules->get('InputfieldHidden');
$f->attr('name', 'template_id'); $f->attr('name', 'template_id');
$f->label = 'Repeater Template ID'; $f->label = 'Repeater Template ID';
@@ -80,6 +81,7 @@ class FieldtypeRepeaterConfigHelper extends Wire {
$select->setAsmSelectOption('hideDeleted', false); $select->setAsmSelectOption('hideDeleted', false);
foreach($template->fieldgroup as $f) { foreach($template->fieldgroup as $f) {
/** @var Field $f */
$f = $template->fieldgroup->getField($f->id, true); // get in context $f = $template->fieldgroup->getField($f->id, true); // get in context
$columnWidth = (int) $f->get('columnWidth'); $columnWidth = (int) $f->get('columnWidth');
@@ -146,6 +148,7 @@ class FieldtypeRepeaterConfigHelper extends Wire {
// ------------------------------------------------- // -------------------------------------------------
/** @var InputfieldRadios $f */
$f = $this->wire('modules')->get('InputfieldRadios'); $f = $this->wire('modules')->get('InputfieldRadios');
$f->attr('name', 'repeaterCollapse'); $f->attr('name', 'repeaterCollapse');
$f->label = $this->_('Repeater item visibility in editor'); $f->label = $this->_('Repeater item visibility in editor');
@@ -191,8 +194,37 @@ class FieldtypeRepeaterConfigHelper extends Wire {
$inputfields->add($f); $inputfields->add($f);
// ------------------------------------------------- // -------------------------------------------------
$value = (int) $field->get('repeaterMaxItems');
$f = $this->wire('modules')->get('InputfieldInteger');
$f->attr('name', 'repeaterMaxItems');
$f->attr('value', $value > 0 ? $value : '');
$f->label = $this->_('Maximum number of items');
$f->collapsed = Inputfield::collapsedBlank;
$f->description = $this->_('If you need to limit the number of items allowed, enter the limit here (0=no limit).');
$f->icon = 'hand-stop-o';
$inputfields->add($f);
// -------------------------------------------------
$value = (int) $field->get('repeaterDepth');
$f = $this->wire('modules')->get('InputfieldInteger');
$f->attr('name', 'repeaterDepth');
$f->attr('value', $value > 0 ? $value : '');
$f->label = $this->_('Item depth');
$f->collapsed = Inputfield::collapsedBlank;
$f->description = $this->_('To support items with depth, enter the max allowed depth, or leave blank to disable.');
$f->description .= ' ' . $this->_('When editing a repeater, you can change item depth by clicking the repeater item drag arrows and dragging the item right or left.');
$f->notes = $this->_('Depths are zero-based, meaning a depth of 3 allows depths 0, 1, 2 and 3.');
$f->notes .= ' ' . $this->_('Depth can be accessed from a repeater page item via `$item->depth`.');
$f->icon = 'indent';
$inputfields->add($f);
$numOldReady = $this->field->type->countOldReadyPages($field); // -------------------------------------------------
/** @var FieldtypeRepeater $fieldtype */
$fieldtype = $this->field->type;
$numOldReady = $fieldtype->countOldReadyPages($field);
if($numOldReady) { if($numOldReady) {
// @todo: should we just do this automatically? // @todo: should we just do this automatically?
$f = $this->wire('modules')->get('InputfieldCheckbox'); $f = $this->wire('modules')->get('InputfieldCheckbox');
@@ -206,42 +238,6 @@ class FieldtypeRepeaterConfigHelper extends Wire {
// ------------------------------------------------- // -------------------------------------------------
/*
$f = $this->wire('modules')->get('InputfieldCheckbox');
$f->attr('name', 'noAjaxAdd');
$f->label = $this->_('Disable AJAX for adding items in editor');
$f->description = $this->_('By default, clicking the "Add Item" link will load the new repeater item via AJAX, which provides a more seamless experience. But some fields may not be compatible with this. Check this box to disable AJAX for adding items.'); // Description for noAjaxAdd option
$f->icon = 'frown-o';
$f->columnWidth = 50;
if($field->get('noAjaxAdd')) {
$f->attr('checked', 'checked');
} else {
$f->collapsed = Inputfield::collapsedYes;
}
$inputfields->add($f);
*/
// -------------------------------------------------
/*
if(is_null($field->repeaterReadyItems)) $field->repeaterReadyItems = self::defaultRepeaterReadyItems;
if($field->noAjaxAdd) $field->repeaterReadyItems = 0;
$input = $this->wire('modules')->get('InputfieldInteger');
$input->attr('id+name', 'repeaterReadyItems');
$input->attr('value', (int) abs($field->repeaterReadyItems));
$input->label = $this->_('Ready-To-Edit New Repeater Items') . " ({$field->repeaterReadyItems})";
$input->description = $this->_('The number of ready-to-edit (unpublished) items per page to keep rendered for use as new items.');
$input->notes =
$this->_('If set to 0, new items will only be created as needed. This is the most efficient setting.') . " \n" .
$this->_('If set to 1 or above, that many new items will be ready to edit as soon as you click "add item". This makes for faster additions.');
$input->collapsed = Inputfield::collapsedYes;
$input->showIf = 'noAjaxAdd=1';
$inputfields->add($input);
*/
// -------------------------------------------------
/** TBA /** TBA
if(is_null($field->repeaterMaxItems)) $field->repeaterMaxItems = self::defaultRepeaterMaxItems; if(is_null($field->repeaterMaxItems)) $field->repeaterMaxItems = self::defaultRepeaterMaxItems;
$input = wire('modules')->get('InputfieldInteger'); $input = wire('modules')->get('InputfieldInteger');
@@ -303,7 +299,9 @@ class FieldtypeRepeaterConfigHelper extends Wire {
$fieldgroup->save(); $fieldgroup->save();
if($this->wire('input')->post('_deleteOldReady')) { if($this->wire('input')->post('_deleteOldReady')) {
$cnt = $this->field->type->countOldReadyPages($field, true); /** @var FieldtypeRepeater $fieldtype */
$fieldtype = $this->field->type;
$cnt = $fieldtype->countOldReadyPages($field, true);
$this->message(sprintf($this->_('Deleted %d old/unused repeater item(s)'), $cnt)); $this->message(sprintf($this->_('Deleted %d old/unused repeater item(s)'), $cnt));
} }

View File

@@ -546,7 +546,7 @@ function InputfieldImage($) {
var $button = $(this); var $button = $(this);
var $list = $button.closest('.gridImages'); var $list = $button.closest('.gridImages');
if(!$list.hasClass('gridImagesAlerted')) { if(!$list.hasClass('gridImagesAlerted')) {
alert(ProcessWire.config.InputfieldImage.labels.changes); ProcessWire.alert(ProcessWire.config.InputfieldImage.labels.changes);
$list.addClass('gridImagesAlerted'); $list.addClass('gridImagesAlerted');
} }
setTimeout(function() { setTimeout(function() {

File diff suppressed because one or more lines are too long

View File

@@ -29,7 +29,26 @@ class JqueryUI extends ModuleJS {
public function ___use($name) { public function ___use($name) {
if($name == 'panel') { if($name == 'panel') {
// also add stylesheet when panel component requested // also add stylesheet when panel component requested
$this->config->styles->add($this->config->urls->JqueryUI . "panel.css"); $this->config->styles->add($this->config->urls('JqueryUI') . "panel.css");
} else if($name == 'vex') {
// custom loader for vex
static $vexLoaded = false;
if(!$vexLoaded) {
$vexLoaded = true;
$url = $this->config->urls('JqueryUI') . 'vex/';
$this->config->styles->add($url . 'css/vex.css');
$this->config->styles->add($url . 'styles/vex-theme-default.css');
$this->config->scripts->add($url . 'scripts/vex.combined.min.js');
$adminTheme = $this->wire('adminTheme');
if($adminTheme) $adminTheme->addExtraMarkup('head',
"<script>" .
"vex.defaultOptions.className='vex-theme-default';" .
"vex.dialog.buttons.YES.text='" . __('Ok', 'common') . "';" . // Yes/Ok button text for Confirm dialog
"vex.dialog.buttons.NO.text='" . __('Cancel', 'common') . "';" . // No/Cancel button text for Confirm dialog
"</script>"
);
}
return $this;
} }
return parent::___use($name); return parent::___use($name);
} }

View File

@@ -0,0 +1,8 @@
Copyright (c) 2013 HubSpot, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,24 @@
## vex
### [Demo](http://github.hubspot.com/vex/docs/welcome/) &nbsp;&nbsp; [Documentation](http://github.hubspot.com/vex/)
vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because it's tiny (`5.5kb` minified and gzipped), has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.
![](https://raw.github.com/HubSpot/vex/master/docs/vex.gif)
### Features
- Drop-in replacement for `alert`, `confirm`, and `prompt`
- Easily configurable animations which are smooth as butter
- Lightweight with no external dependencies
- Looks and behaves great on mobile devices
- Open multiple dialogs at once and close them individually or all at once
- Built in CSS spinner for asynchronous dialogs (TODO)
- UMD support
### Documentation
- [Getting started](/docs/intro.md)
- [API Docs](/docs/api/1-Basic.md)
- [Plugins](/docs/api/4-Plugins.md)
[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

View File

@@ -0,0 +1,437 @@
@keyframes vex-slideup {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 0; }
2% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-webkit-keyframes vex-slideup {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 0; }
2% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-moz-keyframes vex-slideup {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 0; }
2% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-ms-keyframes vex-slideup {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 0; }
2% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-o-keyframes vex-slideup {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 0; }
2% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@keyframes vex-slidedown {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px); } }
@-webkit-keyframes vex-slidedown {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px); } }
@-moz-keyframes vex-slidedown {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px); } }
@-ms-keyframes vex-slidedown {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px); } }
@-o-keyframes vex-slidedown {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(800px);
-webkit-transform: translateY(800px);
-moz-transform: translateY(800px);
-ms-transform: translateY(800px);
-o-transform: translateY(800px); } }
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-bottom-right-corner {
top: auto;
bottom: 0;
right: 0;
overflow: visible; }
.vex.vex-theme-bottom-right-corner .vex-overlay {
display: none; }
.vex.vex-theme-bottom-right-corner.vex-closing .vex-content {
animation: vex-slidedown 0.5s;
-webkit-animation: vex-slidedown 0.5s;
-moz-animation: vex-slidedown 0.5s;
-ms-animation: vex-slidedown 0.5s;
-o-animation: vex-slidedown 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-bottom-right-corner .vex-content {
animation: vex-slideup 0.5s;
-webkit-animation: vex-slideup 0.5s;
-moz-animation: vex-slideup 0.5s;
-ms-animation: vex-slideup 0.5s;
-o-animation: vex-slideup 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-bottom-right-corner .vex-content {
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
font-family: "Helvetica Neue", sans-serif;
background: #f0f0f0;
color: #444;
padding: 1em;
max-width: 100%;
width: 450px;
font-size: 1.1em;
line-height: 1.5em;
position: fixed;
bottom: 0;
right: 0;
left: auto; }
.vex.vex-theme-bottom-right-corner .vex-content h1, .vex.vex-theme-bottom-right-corner .vex-content h2, .vex.vex-theme-bottom-right-corner .vex-content h3, .vex.vex-theme-bottom-right-corner .vex-content h4, .vex.vex-theme-bottom-right-corner .vex-content h5, .vex.vex-theme-bottom-right-corner .vex-content h6, .vex.vex-theme-bottom-right-corner .vex-content p, .vex.vex-theme-bottom-right-corner .vex-content ul, .vex.vex-theme-bottom-right-corner .vex-content li {
color: inherit; }
.vex.vex-theme-bottom-right-corner .vex-close {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-bottom-right-corner .vex-close:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
content: "\00D7";
font-size: 26px;
font-weight: normal;
line-height: 31px;
height: 30px;
width: 30px;
text-align: center;
top: 3px;
right: 3px;
color: #bbb;
background: transparent; }
.vex.vex-theme-bottom-right-corner .vex-close:hover:before, .vex.vex-theme-bottom-right-corner .vex-close:active:before {
color: #777;
background: #e0e0e0; }
.vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-message {
margin-bottom: .5em; }
.vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
width: 100%;
padding: .25em .67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 .25em; }
.vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #8dbdf1;
-webkit-box-shadow: inset 0 0 0 2px #8dbdf1;
box-shadow: inset 0 0 0 2px #8dbdf1;
outline: none; }
.vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-bottom-right-corner .vex-dialog-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0;
float: right;
margin: 0 0 0 .5em;
font-family: inherit;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .8em;
line-height: 1em;
padding: .75em 2em; }
.vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-bottom-right-corner .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-bottom-right-corner .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-dialog-button-primary {
background: #3288e6;
color: #fff; }
.vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777; }
.vex-loading-spinner.vex-theme-bottom-right-corner {
-moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f0f0f0;
border: .2em solid transparent;
border-top-color: #bbb;
top: -1.1em;
bottom: auto; }
body.vex-open {
overflow: initial; }

View File

@@ -0,0 +1,368 @@
@keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-webkit-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-moz-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-ms-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-o-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-webkit-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-moz-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-ms-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-o-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-default {
padding-top: 160px;
padding-bottom: 160px; }
.vex.vex-theme-default.vex-closing .vex-content {
animation: vex-flyout 0.5s;
-webkit-animation: vex-flyout 0.5s;
-moz-animation: vex-flyout 0.5s;
-ms-animation: vex-flyout 0.5s;
-o-animation: vex-flyout 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-default .vex-content {
animation: vex-flyin 0.5s;
-webkit-animation: vex-flyin 0.5s;
-moz-animation: vex-flyin 0.5s;
-ms-animation: vex-flyin 0.5s;
-o-animation: vex-flyin 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-default .vex-content {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-family: "Helvetica Neue", sans-serif;
background: #f0f0f0;
color: #444;
padding: 1em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 450px;
font-size: 1.1em;
line-height: 1.5em; }
.vex.vex-theme-default .vex-content h1, .vex.vex-theme-default .vex-content h2, .vex.vex-theme-default .vex-content h3, .vex.vex-theme-default .vex-content h4, .vex.vex-theme-default .vex-content h5, .vex.vex-theme-default .vex-content h6, .vex.vex-theme-default .vex-content p, .vex.vex-theme-default .vex-content ul, .vex.vex-theme-default .vex-content li {
color: inherit; }
.vex.vex-theme-default .vex-close {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-default .vex-close:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
content: "\00D7";
font-size: 26px;
font-weight: normal;
line-height: 31px;
height: 30px;
width: 30px;
text-align: center;
top: 3px;
right: 3px;
color: #bbb;
background: transparent; }
.vex.vex-theme-default .vex-close:hover:before, .vex.vex-theme-default .vex-close:active:before {
color: #777;
background: #e0e0e0; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-message {
margin-bottom: .5em; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
width: 100%;
padding: .25em .67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 .25em; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #8dbdf1;
-webkit-box-shadow: inset 0 0 0 2px #8dbdf1;
box-shadow: inset 0 0 0 2px #8dbdf1;
outline: none; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-default .vex-dialog-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0;
float: right;
margin: 0 0 0 .5em;
font-family: inherit;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .8em;
line-height: 1em;
padding: .75em 2em; }
.vex.vex-theme-default .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-default .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-default .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
background: #3288e6;
color: #fff; }
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777; }
.vex-loading-spinner.vex-theme-default {
-moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f0f0f0;
border: .2em solid transparent;
border-top-color: #bbb;
top: -1.1em;
bottom: auto; }

View File

@@ -0,0 +1,325 @@
@keyframes vex-flipin-horizontal {
0% {
opacity: 0;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg); }
100% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); } }
@-webkit-keyframes vex-flipin-horizontal {
0% {
opacity: 0;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg); }
100% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); } }
@-moz-keyframes vex-flipin-horizontal {
0% {
opacity: 0;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg); }
100% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); } }
@-ms-keyframes vex-flipin-horizontal {
0% {
opacity: 0;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg); }
100% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); } }
@-o-keyframes vex-flipin-horizontal {
0% {
opacity: 0;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg); }
100% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); } }
@keyframes vex-flipout-horizontal {
0% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); }
100% {
opacity: 0;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg); } }
@-webkit-keyframes vex-flipout-horizontal {
0% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); }
100% {
opacity: 0;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg); } }
@-moz-keyframes vex-flipout-horizontal {
0% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); }
100% {
opacity: 0;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg); } }
@-ms-keyframes vex-flipout-horizontal {
0% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); }
100% {
opacity: 0;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg); } }
@-o-keyframes vex-flipout-horizontal {
0% {
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg); }
100% {
opacity: 0;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg); } }
.vex.vex-theme-flat-attack {
-moz-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
-moz-perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
perspective-origin: 50% 150px;
padding-top: 100px;
padding-bottom: 100px;
font-size: 1.5em; }
.vex.vex-theme-flat-attack.vex-closing .vex-content {
animation: vex-flipout-horizontal 0.5s;
-webkit-animation: vex-flipout-horizontal 0.5s;
-moz-animation: vex-flipout-horizontal 0.5s;
-ms-animation: vex-flipout-horizontal 0.5s;
-o-animation: vex-flipout-horizontal 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-flat-attack .vex-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
animation: vex-flipin-horizontal 0.5s;
-webkit-animation: vex-flipin-horizontal 0.5s;
-moz-animation: vex-flipin-horizontal 0.5s;
-ms-animation: vex-flipin-horizontal 0.5s;
-o-animation: vex-flipin-horizontal 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-flat-attack .vex-content {
font-family: "Helvetica Neue", sans-serif;
font-weight: 200;
background: #fff;
color: #444;
padding: 2em 2em 3em 2em;
line-height: 1.5em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 600px; }
.vex.vex-theme-flat-attack .vex-content h1, .vex.vex-theme-flat-attack .vex-content h2, .vex.vex-theme-flat-attack .vex-content h3, .vex.vex-theme-flat-attack .vex-content h4, .vex.vex-theme-flat-attack .vex-content h5, .vex.vex-theme-flat-attack .vex-content h6, .vex.vex-theme-flat-attack .vex-content p, .vex.vex-theme-flat-attack .vex-content ul, .vex.vex-theme-flat-attack .vex-content li {
color: inherit; }
.vex.vex-theme-flat-attack .vex-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-flat-attack .vex-close:before {
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
line-height: 1px;
padding-top: .5em;
display: block;
font-size: 2em;
text-indent: 1px;
overflow: hidden;
height: 1.25em;
width: 1.25em;
text-align: center;
top: 0;
right: 0;
color: #fff;
background: #666; }
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-message {
margin-bottom: .5em; }
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input {
margin-bottom: .5em; }
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #f0f0f0;
width: 100%;
padding: .25em .67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 .25em; }
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #666;
-webkit-box-shadow: inset 0 0 0 2px #666;
box-shadow: inset 0 0 0 2px #666;
outline: none; }
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons {
*zoom: 1;
padding-top: 1em;
margin-bottom: -3em;
margin-left: -2em;
margin-right: -2em; }
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-flat-attack .vex-dialog-button {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border: 0;
margin: 0;
float: right;
padding: .5em 1em;
font-size: 1.13em;
text-transform: uppercase;
font-weight: 200;
letter-spacing: .1em;
line-height: 1em;
font-family: inherit; }
.vex.vex-theme-flat-attack .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-flat-attack .vex-dialog-button:focus {
outline: none; }
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary {
background: #666;
color: #fff; }
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary:focus {
-moz-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.2); }
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary {
background: #fff;
color: #ccc; }
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:focus {
-moz-box-shadow: inset 0 3px #aaa;
-webkit-box-shadow: inset 0 3px #aaa;
box-shadow: inset 0 3px #aaa;
background: #eee;
color: #777; }
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:hover, .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:active {
color: #777; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-close:before {
background: #ff7ea7; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #ff7ea7;
-webkit-box-shadow: inset 0 0 0 2px #ff7ea7;
box-shadow: inset 0 0 0 2px #ff7ea7; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
background: #ff7ea7; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-close:before {
background: #ce4a55; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #ce4a55;
-webkit-box-shadow: inset 0 0 0 2px #ce4a55;
box-shadow: inset 0 0 0 2px #ce4a55; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
background: #ce4a55; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-close:before {
background: #34b989; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #34b989;
-webkit-box-shadow: inset 0 0 0 2px #34b989;
box-shadow: inset 0 0 0 2px #34b989; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
background: #34b989; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-close:before {
background: #477FA5; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #477FA5;
-webkit-box-shadow: inset 0 0 0 2px #477FA5;
box-shadow: inset 0 0 0 2px #477FA5; }
.vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
background: #477FA5; }
.vex-loading-spinner.vex-theme-flat-attack {
height: 4em;
width: 4em; }

View File

@@ -0,0 +1,373 @@
@keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-webkit-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-moz-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-ms-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-o-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-webkit-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-moz-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-ms-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-o-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-os {
padding-top: 160px;
padding-bottom: 160px; }
.vex.vex-theme-os.vex-closing .vex-content {
animation: vex-flyout 0.5s;
-webkit-animation: vex-flyout 0.5s;
-moz-animation: vex-flyout 0.5s;
-ms-animation: vex-flyout 0.5s;
-o-animation: vex-flyout 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-os .vex-content {
animation: vex-flyin 0.5s;
-webkit-animation: vex-flyin 0.5s;
-moz-animation: vex-flyin 0.5s;
-ms-animation: vex-flyin 0.5s;
-o-animation: vex-flyin 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-os .vex-content {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08);
font-family: "Helvetica Neue", sans-serif;
border-top: 20px solid #bbb;
background: #f0f0f0;
color: #444;
padding: 1em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 450px;
font-size: 1.1em;
line-height: 1.5em; }
.vex.vex-theme-os .vex-content h1, .vex.vex-theme-os .vex-content h2, .vex.vex-theme-os .vex-content h3, .vex.vex-theme-os .vex-content h4, .vex.vex-theme-os .vex-content h5, .vex.vex-theme-os .vex-content h6, .vex.vex-theme-os .vex-content p, .vex.vex-theme-os .vex-content ul, .vex.vex-theme-os .vex-content li {
color: inherit; }
.vex.vex-theme-os .vex-close {
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-os .vex-close:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
content: "\00D7";
font-size: 26px;
font-weight: normal;
line-height: 31px;
height: 30px;
width: 30px;
text-align: center;
top: 3px;
right: 3px;
color: #bbb;
background: transparent; }
.vex.vex-theme-os .vex-close:hover:before, .vex.vex-theme-os .vex-close:active:before {
color: #777;
background: #e0e0e0; }
.vex.vex-theme-os .vex-dialog-form .vex-dialog-message {
margin-bottom: .5em; }
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
width: 100%;
padding: .25em .67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 .25em; }
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 1px #3288e6;
-webkit-box-shadow: inset 0 0 0 1px #3288e6;
box-shadow: inset 0 0 0 1px #3288e6;
outline: none; }
.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-os .vex-dialog-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0;
float: right;
margin: 0 0 0 .5em;
font-family: inherit;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .8em;
line-height: 1em;
padding: .75em 2em; }
.vex.vex-theme-os .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-os .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-os .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-primary {
background: #3288e6;
color: #fff; }
.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777; }
.vex-loading-spinner.vex-theme-os {
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.2);
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: rgba(255, 255, 255, 0.2);
width: 0;
height: 0;
border: 1.2em solid #bbb;
border-top-color: #f0f0f0;
border-bottom-color: #f0f0f0; }

View File

@@ -0,0 +1,173 @@
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-plain {
padding-top: 160px;
padding-bottom: 160px; }
.vex.vex-theme-plain .vex-content {
font-family: "Helvetica Neue", sans-serif;
background: #fff;
color: #444;
padding: 1em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 450px;
font-size: 1.1em;
line-height: 1.5em; }
.vex.vex-theme-plain .vex-content h1, .vex.vex-theme-plain .vex-content h2, .vex.vex-theme-plain .vex-content h3, .vex.vex-theme-plain .vex-content h4, .vex.vex-theme-plain .vex-content h5, .vex.vex-theme-plain .vex-content h6, .vex.vex-theme-plain .vex-content p, .vex.vex-theme-plain .vex-content ul, .vex.vex-theme-plain .vex-content li {
color: inherit; }
.vex.vex-theme-plain .vex-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-plain .vex-close:before {
position: absolute;
content: "\00D7";
font-size: 26px;
font-weight: normal;
line-height: 31px;
height: 30px;
width: 30px;
text-align: center;
top: 3px;
right: 3px;
color: #bbb;
background: transparent; }
.vex.vex-theme-plain .vex-close:hover:before, .vex.vex-theme-plain .vex-close:active:before {
color: #777;
background: #e0e0e0; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-message {
margin-bottom: .5em; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"] {
background: #f0f0f0;
width: 100%;
padding: .25em .67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 .25em; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
outline: none; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-plain .vex-dialog-button {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border: 0;
float: right;
margin: 0 0 0 .5em;
font-family: inherit;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .8em;
line-height: 1em;
padding: .75em 2em; }
.vex.vex-theme-plain .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-plain .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-plain .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary {
background: #3288e6;
color: #fff; }
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777; }
.vex-loading-spinner.vex-theme-plain {
height: 2.5em;
width: 2.5em; }

View File

@@ -0,0 +1,432 @@
@keyframes vex-dropin {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 0; }
2% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-webkit-keyframes vex-dropin {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 0; }
2% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-moz-keyframes vex-dropin {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 0; }
2% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-ms-keyframes vex-dropin {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 0; }
2% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@-o-keyframes vex-dropin {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0; }
1% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 0; }
2% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px);
opacity: 1; }
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1; } }
@keyframes vex-dropout {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px); } }
@-webkit-keyframes vex-dropout {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px); } }
@-moz-keyframes vex-dropout {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px); } }
@-ms-keyframes vex-dropout {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px); } }
@-o-keyframes vex-dropout {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
transform: translateY(-800px);
-webkit-transform: translateY(-800px);
-moz-transform: translateY(-800px);
-ms-transform: translateY(-800px);
-o-transform: translateY(-800px); } }
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-top.vex-closing .vex-content {
animation: vex-dropout 0.5s;
-webkit-animation: vex-dropout 0.5s;
-moz-animation: vex-dropout 0.5s;
-ms-animation: vex-dropout 0.5s;
-o-animation: vex-dropout 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-top .vex-content {
animation: vex-dropin 0.5s;
-webkit-animation: vex-dropin 0.5s;
-moz-animation: vex-dropin 0.5s;
-ms-animation: vex-dropin 0.5s;
-o-animation: vex-dropin 0.5s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-top .vex-content {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
font-family: "Helvetica Neue", sans-serif;
background: #f0f0f0;
color: #444;
padding: 1em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 450px;
font-size: 1.1em;
line-height: 1.5em; }
.vex.vex-theme-top .vex-content h1, .vex.vex-theme-top .vex-content h2, .vex.vex-theme-top .vex-content h3, .vex.vex-theme-top .vex-content h4, .vex.vex-theme-top .vex-content h5, .vex.vex-theme-top .vex-content h6, .vex.vex-theme-top .vex-content p, .vex.vex-theme-top .vex-content ul, .vex.vex-theme-top .vex-content li {
color: inherit; }
.vex.vex-theme-top .vex-close {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-top .vex-close:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
content: "\00D7";
font-size: 26px;
font-weight: normal;
line-height: 31px;
height: 30px;
width: 30px;
text-align: center;
top: 3px;
right: 3px;
color: #bbb;
background: transparent; }
.vex.vex-theme-top .vex-close:hover:before, .vex.vex-theme-top .vex-close:active:before {
color: #777;
background: #e0e0e0; }
.vex.vex-theme-top .vex-dialog-form .vex-dialog-message {
margin-bottom: .5em; }
.vex.vex-theme-top .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-top .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
width: 100%;
padding: .25em .67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 .25em; }
.vex.vex-theme-top .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #8dbdf1;
-webkit-box-shadow: inset 0 0 0 2px #8dbdf1;
box-shadow: inset 0 0 0 2px #8dbdf1;
outline: none; }
.vex.vex-theme-top .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-top .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-top .vex-dialog-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0;
float: right;
margin: 0 0 0 .5em;
font-family: inherit;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .8em;
line-height: 1em;
padding: .75em 2em; }
.vex.vex-theme-top .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-top .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-top .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-top .vex-dialog-button.vex-dialog-button-primary {
background: #3288e6;
color: #fff; }
.vex.vex-theme-top .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777; }
.vex-loading-spinner.vex-theme-top {
-moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f0f0f0;
border: .2em solid transparent;
border-top-color: #bbb;
top: -1.1em;
bottom: auto; }

View File

@@ -0,0 +1,174 @@
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-wireframe {
padding-top: 160px;
padding-bottom: 160px; }
.vex.vex-theme-wireframe .vex-overlay {
background: rgba(255, 255, 255, 0.4); }
.vex.vex-theme-wireframe .vex-content {
font-family: "Helvetica Neue", sans-serif;
background: #fff;
color: #000;
border: 2px solid #000;
padding: 2em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 400px;
font-size: 1.1em;
line-height: 1.5em; }
.vex.vex-theme-wireframe .vex-content h1, .vex.vex-theme-wireframe .vex-content h2, .vex.vex-theme-wireframe .vex-content h3, .vex.vex-theme-wireframe .vex-content h4, .vex.vex-theme-wireframe .vex-content h5, .vex.vex-theme-wireframe .vex-content h6, .vex.vex-theme-wireframe .vex-content p, .vex.vex-theme-wireframe .vex-content ul, .vex.vex-theme-wireframe .vex-content li {
color: inherit; }
.vex.vex-theme-wireframe .vex-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-wireframe .vex-close:before {
position: absolute;
content: "\00D7";
font-size: 40px;
font-weight: normal;
line-height: 80px;
height: 80px;
width: 80px;
text-align: center;
top: 3px;
right: 3px;
color: #000; }
.vex.vex-theme-wireframe .vex-close:hover:before, .vex.vex-theme-wireframe .vex-close:active:before {
color: #000; }
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-message {
margin-bottom: .5em; }
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="week"] {
background: #fff;
width: 100%;
padding: .25em .67em;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 .25em;
border: 2px solid #000; }
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
border-style: dashed;
outline: none; }
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-wireframe .vex-dialog-button {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border: 0;
float: right;
margin: 0 0 0 .5em;
font-family: inherit;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .8em;
line-height: 1em;
padding: .75em 2em; }
.vex.vex-theme-wireframe .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-wireframe .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-wireframe .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary {
background: #000;
color: #fff;
border: 2px solid transparent; }
.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-secondary {
background: #fff;
color: #000;
border: 2px solid #000; }
.vex-loading-spinner.vex-theme-wireframe {
height: 2.5em;
width: 2.5em; }

View File

@@ -0,0 +1,231 @@
@keyframes vex-fadein {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-webkit-keyframes vex-fadein {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes vex-fadein {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-ms-keyframes vex-fadein {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-o-keyframes vex-fadein {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes vex-fadeout {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-webkit-keyframes vex-fadeout {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-moz-keyframes vex-fadeout {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-ms-keyframes vex-fadeout {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-o-keyframes vex-fadeout {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes vex-rotation {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg); }
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg); } }
@-webkit-keyframes vex-rotation {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg); }
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg); } }
@-moz-keyframes vex-rotation {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg); }
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg); } }
@-ms-keyframes vex-rotation {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg); }
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg); } }
@-o-keyframes vex-rotation {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg); }
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg); } }
.vex, .vex *, .vex *:before, .vex *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.vex {
position: fixed;
overflow: auto;
-webkit-overflow-scrolling: touch;
z-index: 1111;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.vex-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll; }
.vex-overlay {
background: #000;
filter: alpha(opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
.vex-overlay {
animation: vex-fadein 0.5s;
-webkit-animation: vex-fadein 0.5s;
-moz-animation: vex-fadein 0.5s;
-ms-animation: vex-fadein 0.5s;
-o-animation: vex-fadein 0.5s;
-webkit-backface-visibility: hidden;
position: fixed;
background: rgba(0, 0, 0, 0.4);
top: 0;
right: 0;
bottom: 0;
left: 0; }
.vex.vex-closing .vex-overlay {
animation: vex-fadeout 0.5s;
-webkit-animation: vex-fadeout 0.5s;
-moz-animation: vex-fadeout 0.5s;
-ms-animation: vex-fadeout 0.5s;
-o-animation: vex-fadeout 0.5s;
-webkit-backface-visibility: hidden; }
.vex-content {
animation: vex-fadein 0.5s;
-webkit-animation: vex-fadein 0.5s;
-moz-animation: vex-fadein 0.5s;
-ms-animation: vex-fadein 0.5s;
-o-animation: vex-fadein 0.5s;
-webkit-backface-visibility: hidden;
background: #fff; }
.vex.vex-closing .vex-content {
animation: vex-fadeout 0.5s;
-webkit-animation: vex-fadeout 0.5s;
-moz-animation: vex-fadeout 0.5s;
-ms-animation: vex-fadeout 0.5s;
-o-animation: vex-fadeout 0.5s;
-webkit-backface-visibility: hidden; }
.vex-close:before {
font-family: Arial, sans-serif;
content: "\00D7"; }
.vex-dialog-form {
margin: 0; }
.vex-dialog-button {
text-rendering: optimizeLegibility;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent; }
.vex-loading-spinner {
animation: vex-rotation 0.7s linear infinite;
-webkit-animation: vex-rotation 0.7s linear infinite;
-moz-animation: vex-rotation 0.7s linear infinite;
-ms-animation: vex-rotation 0.7s linear infinite;
-o-animation: vex-rotation 0.7s linear infinite;
-webkit-backface-visibility: hidden;
-moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
position: fixed;
z-index: 1112;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 2em;
width: 2em;
background: #fff; }
body.vex-open {
overflow: hidden; }

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,740 @@
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vex = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/*
* classList.js: Cross-browser full element.classList implementation.
* 2014-07-23
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*global self, document, DOMException */
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
/* Copied from MDN:
* https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
*/
if ("document" in window.self) {
// Full polyfill for browsers with no classList support
// Including IE < Edge missing SVGElement.classList
if (!("classList" in document.createElement("_"))
|| document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))) {
(function (view) {
"use strict";
if (!('Element' in view)) return;
var
classListProp = "classList"
, protoProp = "prototype"
, elemCtrProto = view.Element[protoProp]
, objCtr = Object
, strTrim = String[protoProp].trim || function () {
return this.replace(/^\s+|\s+$/g, "");
}
, arrIndexOf = Array[protoProp].indexOf || function (item) {
var
i = 0
, len = this.length
;
for (; i < len; i++) {
if (i in this && this[i] === item) {
return i;
}
}
return -1;
}
// Vendors: please allow content code to instantiate DOMExceptions
, DOMEx = function (type, message) {
this.name = type;
this.code = DOMException[type];
this.message = message;
}
, checkTokenAndGetIndex = function (classList, token) {
if (token === "") {
throw new DOMEx(
"SYNTAX_ERR"
, "An invalid or illegal string was specified"
);
}
if (/\s/.test(token)) {
throw new DOMEx(
"INVALID_CHARACTER_ERR"
, "String contains an invalid character"
);
}
return arrIndexOf.call(classList, token);
}
, ClassList = function (elem) {
var
trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
, i = 0
, len = classes.length
;
for (; i < len; i++) {
this.push(classes[i]);
}
this._updateClassName = function () {
elem.setAttribute("class", this.toString());
};
}
, classListProto = ClassList[protoProp] = []
, classListGetter = function () {
return new ClassList(this);
}
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
return this[i] || null;
};
classListProto.contains = function (token) {
token += "";
return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function () {
var
tokens = arguments
, i = 0
, l = tokens.length
, token
, updated = false
;
do {
token = tokens[i] + "";
if (checkTokenAndGetIndex(this, token) === -1) {
this.push(token);
updated = true;
}
}
while (++i < l);
if (updated) {
this._updateClassName();
}
};
classListProto.remove = function () {
var
tokens = arguments
, i = 0
, l = tokens.length
, token
, updated = false
, index
;
do {
token = tokens[i] + "";
index = checkTokenAndGetIndex(this, token);
while (index !== -1) {
this.splice(index, 1);
updated = true;
index = checkTokenAndGetIndex(this, token);
}
}
while (++i < l);
if (updated) {
this._updateClassName();
}
};
classListProto.toggle = function (token, force) {
token += "";
var
result = this.contains(token)
, method = result ?
force !== true && "remove"
:
force !== false && "add"
;
if (method) {
this[method](token);
}
if (force === true || force === false) {
return force;
} else {
return !result;
}
};
classListProto.toString = function () {
return this.join(" ");
};
if (objCtr.defineProperty) {
var classListPropDesc = {
get: classListGetter
, enumerable: true
, configurable: true
};
try {
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
} catch (ex) { // IE 8 doesn't support enumerable:true
if (ex.number === -0x7FF5EC54) {
classListPropDesc.enumerable = false;
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
}
} else if (objCtr[protoProp].__defineGetter__) {
elemCtrProto.__defineGetter__(classListProp, classListGetter);
}
}(window.self));
} else {
// There is full or partial native classList support, so just check if we need
// to normalize the add/remove and toggle APIs.
(function () {
"use strict";
var testElement = document.createElement("_");
testElement.classList.add("c1", "c2");
// Polyfill for IE 10/11 and Firefox <26, where classList.add and
// classList.remove exist but support only one argument at a time.
if (!testElement.classList.contains("c2")) {
var createMethod = function(method) {
var original = DOMTokenList.prototype[method];
DOMTokenList.prototype[method] = function(token) {
var i, len = arguments.length;
for (i = 0; i < len; i++) {
token = arguments[i];
original.call(this, token);
}
};
};
createMethod('add');
createMethod('remove');
}
testElement.classList.toggle("c3", false);
// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
// support the second argument.
if (testElement.classList.contains("c3")) {
var _toggle = DOMTokenList.prototype.toggle;
DOMTokenList.prototype.toggle = function(token, force) {
if (1 in arguments && !this.contains(token) === !force) {
return force;
} else {
return _toggle.call(this, token);
}
};
}
testElement = null;
}());
}
}
},{}],2:[function(require,module,exports){
/**
* Expose `parse`.
*/
module.exports = parse;
/**
* Tests for browser support.
*/
var innerHTMLBug = false;
var bugTestDiv;
if (typeof document !== 'undefined') {
bugTestDiv = document.createElement('div');
// Setup
bugTestDiv.innerHTML = ' <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
// Make sure that link elements get serialized correctly by innerHTML
// This requires a wrapper element in IE
innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
bugTestDiv = undefined;
}
/**
* Wrap map from jquery.
*/
var map = {
legend: [1, '<fieldset>', '</fieldset>'],
tr: [2, '<table><tbody>', '</tbody></table>'],
col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
// for script/link/style tags to work in IE6-8, you have to wrap
// in a div with a non-whitespace character in front, ha!
_default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
};
map.td =
map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
map.option =
map.optgroup = [1, '<select multiple="multiple">', '</select>'];
map.thead =
map.tbody =
map.colgroup =
map.caption =
map.tfoot = [1, '<table>', '</table>'];
map.polyline =
map.ellipse =
map.polygon =
map.circle =
map.text =
map.line =
map.path =
map.rect =
map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
/**
* Parse `html` and return a DOM Node instance, which could be a TextNode,
* HTML DOM Node of some kind (<div> for example), or a DocumentFragment
* instance, depending on the contents of the `html` string.
*
* @param {String} html - HTML string to "domify"
* @param {Document} doc - The `document` instance to create the Node for
* @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
* @api private
*/
function parse(html, doc) {
if ('string' != typeof html) throw new TypeError('String expected');
// default to the global `document` object
if (!doc) doc = document;
// tag name
var m = /<([\w:]+)/.exec(html);
if (!m) return doc.createTextNode(html);
html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
var tag = m[1];
// body support
if (tag == 'body') {
var el = doc.createElement('html');
el.innerHTML = html;
return el.removeChild(el.lastChild);
}
// wrap map
var wrap = map[tag] || map._default;
var depth = wrap[0];
var prefix = wrap[1];
var suffix = wrap[2];
var el = doc.createElement('div');
el.innerHTML = prefix + html + suffix;
while (depth--) el = el.lastChild;
// one element
if (el.firstChild == el.lastChild) {
return el.removeChild(el.firstChild);
}
// several elements
var fragment = doc.createDocumentFragment();
while (el.firstChild) {
fragment.appendChild(el.removeChild(el.firstChild));
}
return fragment;
}
},{}],3:[function(require,module,exports){
/**
* Code refactored from Mozilla Developer Network:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
*/
'use strict';
function assign(target, firstSource) {
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
function polyfill() {
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: assign
});
}
}
module.exports = {
assign: assign,
polyfill: polyfill
};
},{}],4:[function(require,module,exports){
// classList polyfill for old browsers
require('classlist-polyfill')
// Object.assign polyfill
require('es6-object-assign').polyfill()
// String to DOM function
var domify = require('domify')
// Use the DOM's HTML parsing to escape any dangerous strings
var escapeHtml = function escapeHtml (str) {
if (typeof str !== 'undefined') {
var div = document.createElement('div')
div.appendChild(document.createTextNode(str))
return div.innerHTML
} else {
return ''
}
}
// Utility function to add space-delimited class strings to a DOM element's classList
var addClasses = function addClasses (el, classStr) {
if (typeof classStr !== 'string' || classStr.length === 0) {
return
}
var classes = classStr.split(' ')
for (var i = 0; i < classes.length; i++) {
var className = classes[i]
if (className.length) {
el.classList.add(className)
}
}
}
// Detect CSS Animation End Support
// https://github.com/limonte/sweetalert2/blob/99bd539f85e15ac170f69d35001d12e092ef0054/src/utils/dom.js#L194
var animationEndEvent = (function detectAnimationEndEvent () {
var el = document.createElement('div')
var eventNames = {
'WebkitAnimation': 'webkitAnimationEnd',
'MozAnimation': 'animationend',
'OAnimation': 'oanimationend',
'msAnimation': 'MSAnimationEnd',
'animation': 'animationend'
}
for (var i in eventNames) {
if (el.style[i] !== undefined) {
return eventNames[i]
}
}
return false
})()
// vex base CSS classes
var baseClassNames = {
vex: 'vex',
content: 'vex-content',
overlay: 'vex-overlay',
close: 'vex-close',
closing: 'vex-closing',
open: 'vex-open'
}
// Private lookup table of all open vex objects, keyed by id
var vexes = {}
var globalId = 1
// Private boolean to assist the escapeButtonCloses option
var isEscapeActive = false
// vex itself is an object that exposes a simple API to open and close vex objects in various ways
var vex = {
open: function open (opts) {
// Check for usage of deprecated options, and log a warning
var warnDeprecated = function warnDeprecated (prop) {
console.warn('The "' + prop + '" property is deprecated in vex 3. Use CSS classes and the appropriate "ClassName" options, instead.')
console.warn('See http://github.hubspot.com/vex/api/advanced/#options')
}
if (opts.css) {
warnDeprecated('css')
}
if (opts.overlayCSS) {
warnDeprecated('overlayCSS')
}
if (opts.contentCSS) {
warnDeprecated('contentCSS')
}
if (opts.closeCSS) {
warnDeprecated('closeCSS')
}
// The dialog instance
var vexInstance = {}
// Set id
vexInstance.id = globalId++
// Store internally
vexes[vexInstance.id] = vexInstance
// Set state
vexInstance.isOpen = true
// Close function on the vex instance
// This is how all API functions should close individual vexes
vexInstance.close = function instanceClose () {
// Check state
if (!this.isOpen) {
return true
}
var options = this.options
// escapeButtonCloses is checked first
if (isEscapeActive && !options.escapeButtonCloses) {
return false
}
// Allow the user to validate any info or abort the close with the beforeClose callback
var shouldClose = (function shouldClose () {
// Call before close callback
if (options.beforeClose) {
return options.beforeClose.call(this)
}
// Otherwise indicate that it's ok to continue with close
return true
}.bind(this)())
// If beforeClose() fails, abort the close
if (shouldClose === false) {
return false
}
// Update state
this.isOpen = false
// Detect if the content el has any CSS animations defined
var style = window.getComputedStyle(this.contentEl)
function hasAnimationPre (prefix) {
return style.getPropertyValue(prefix + 'animation-name') !== 'none' && style.getPropertyValue(prefix + 'animation-duration') !== '0s'
}
var hasAnimation = hasAnimationPre('') || hasAnimationPre('-webkit-') || hasAnimationPre('-moz-') || hasAnimationPre('-o-')
// Define the function that will actually close the instance
var close = function close () {
if (!this.rootEl.parentNode) {
return
}
// Run once
this.rootEl.removeEventListener(animationEndEvent, close)
// Remove from lookup table (prevent memory leaks)
delete vexes[this.id]
// Remove the dialog from the DOM
this.rootEl.parentNode.removeChild(this.rootEl)
// Call after close callback
if (options.afterClose) {
options.afterClose.call(this)
}
// Remove styling from the body, if no more vexes are open
if (Object.keys(vexes).length === 0) {
document.body.classList.remove(baseClassNames.open)
}
}.bind(this)
// Close the vex
if (animationEndEvent && hasAnimation) {
// Setup the end event listener, to remove the el from the DOM
this.rootEl.addEventListener(animationEndEvent, close)
// Add the closing class to the dialog, showing the close animation
this.rootEl.classList.add(baseClassNames.closing)
} else {
close()
}
return true
}
// Allow strings as content
if (typeof opts === 'string') {
opts = {
content: opts
}
}
// `content` is unsafe internally, so translate
// safe default: HTML-escape the content before passing it through
if (opts.unsafeContent && !opts.content) {
opts.content = opts.unsafeContent
} else if (opts.content) {
opts.content = escapeHtml(opts.content)
}
// Store options on instance for future reference
var options = vexInstance.options = Object.assign({}, vex.defaultOptions, opts)
// vex root
var rootEl = vexInstance.rootEl = document.createElement('div')
rootEl.classList.add(baseClassNames.vex)
addClasses(rootEl, options.className)
// Overlay
var overlayEl = vexInstance.overlayEl = document.createElement('div')
overlayEl.classList.add(baseClassNames.overlay)
addClasses(overlayEl, options.overlayClassName)
if (options.overlayClosesOnClick) {
overlayEl.addEventListener('click', function overlayClickListener (e) {
if (e.target === overlayEl) {
vexInstance.close()
}
})
}
rootEl.appendChild(overlayEl)
// Content
var contentEl = vexInstance.contentEl = document.createElement('div')
contentEl.classList.add(baseClassNames.content)
addClasses(contentEl, options.contentClassName)
contentEl.appendChild(options.content instanceof window.Node ? options.content : domify(options.content))
rootEl.appendChild(contentEl)
// Close button
if (options.showCloseButton) {
var closeEl = vexInstance.closeEl = document.createElement('div')
closeEl.classList.add(baseClassNames.close)
addClasses(closeEl, options.closeClassName)
closeEl.addEventListener('click', vexInstance.close.bind(vexInstance))
contentEl.appendChild(closeEl)
}
// Add to DOM
document.querySelector(options.appendLocation).appendChild(rootEl)
// Call after open callback
if (options.afterOpen) {
options.afterOpen.call(vexInstance)
}
// Apply styling to the body
document.body.classList.add(baseClassNames.open)
// Return the created vex instance
return vexInstance
},
// A top-level vex.close function to close dialogs by reference or id
close: function close (vexOrId) {
var id
if (vexOrId.id) {
id = vexOrId.id
} else if (typeof vexOrId === 'string') {
id = vexOrId
} else {
throw new TypeError('close requires a vex object or id string')
}
if (!vexes[id]) {
return false
}
return vexes[id].close()
},
// Close the most recently created/opened vex
closeTop: function closeTop () {
var ids = Object.keys(vexes)
if (!ids.length) {
return false
}
return vexes[ids[ids.length - 1]].close()
},
// Close every vex!
closeAll: function closeAll () {
for (var id in vexes) {
this.close(id)
}
return true
},
// A getter for the internal lookup table
getAll: function getAll () {
return vexes
},
// A getter for the internal lookup table
getById: function getById (id) {
return vexes[id]
}
}
// Close top vex on escape
window.addEventListener('keyup', function vexKeyupListener (e) {
if (e.keyCode === 27) {
isEscapeActive = true
vex.closeTop()
isEscapeActive = false
}
})
// Close all vexes on history pop state (useful in single page apps)
window.addEventListener('popstate', vex.closeAll)
vex.defaultOptions = {
content: '',
showCloseButton: true,
escapeButtonCloses: true,
overlayClosesOnClick: true,
appendLocation: 'body',
className: '',
overlayClassName: '',
contentClassName: '',
closeClassName: ''
}
// TODO Loading symbols?
// Include escapeHtml function on the library object
Object.defineProperty(vex, '_escapeHtml', {
configurable: false,
enumerable: false,
writable: false,
value: escapeHtml
})
// Plugin system!
vex.registerPlugin = function registerPlugin (pluginFn, name) {
var plugin = pluginFn(vex)
var pluginName = name || plugin.name
if (vex[pluginName]) {
throw new Error('Plugin ' + name + ' is already registered.')
}
vex[pluginName] = plugin
}
module.exports = vex
},{"classlist-polyfill":1,"domify":2,"es6-object-assign":3}]},{},[4])(4)
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,139 @@
@import mixins
// Overlay/content animations
=keyframes-vex-fadein
+vex-keyframes("vex-fadein")
0%
opacity: 0
100%
opacity: 1
=keyframes-vex-fadeout
+vex-keyframes("vex-fadeout")
0%
opacity: 1
100%
opacity: 0
// Content animations
=keyframes-vex-flyin
+vex-keyframes("vex-flyin")
0%
opacity: 0
+vex-transform(translateY(-40px))
100%
opacity: 1
+vex-transform(translateY(0))
=keyframes-vex-flyout
+vex-keyframes("vex-flyout")
0%
opacity: 1
+vex-transform(translateY(0))
100%
opacity: 0
+vex-transform(translateY(-40px))
=keyframes-vex-dropin
+vex-keyframes("vex-dropin")
// We start at 0 first and, while hidden
// move to -800px, where the animation
// really begins. This was necessary because
// otherwise, when starting the animation
// at -800px, the browser scrolls up 800px
// to try to display this object positioned
// above the page.
// https://github.com/HubSpot/vex/issues/21
0%
+vex-transform(translateY(0))
opacity: 0
1%
+vex-transform(translateY(-800px))
opacity: 0
// Real animation begins here
2%
+vex-transform(translateY(-800px))
opacity: 1
100%
+vex-transform(translateY(0))
opacity: 1
=keyframes-vex-dropout
+vex-keyframes("vex-dropout")
0%
+vex-transform(translateY(0))
100%
+vex-transform(translateY(-800px))
=keyframes-vex-slideup
+vex-keyframes("vex-slideup")
// We start at 0 first and, while hidden
// move to -800px, where the animation
// really begins. This was necessary because
// otherwise, when starting the animation
// at -800px, the browser scrolls up 800px
// to try to display this object positioned
// above the page.
// https://github.com/HubSpot/vex/issues/21
0%
+vex-transform(translateY(0))
opacity: 0
1%
+vex-transform(translateY(800px))
opacity: 0
// Real animation begins here
2%
+vex-transform(translateY(800px))
opacity: 1
100%
+vex-transform(translateY(0))
opacity: 1
=keyframes-vex-slidedown
+vex-keyframes("vex-slidedown")
0%
+vex-transform(translateY(0))
100%
+vex-transform(translateY(800px))
=keyframes-vex-flipin-horizontal
+vex-keyframes("vex-flipin-horizontal")
0%
opacity: 0
+vex-transform(rotateY(-90deg))
100%
opacity: 1
+vex-transform(rotateY(0deg))
=keyframes-vex-flipout-horizontal
+vex-keyframes("vex-flipout-horizontal")
0%
opacity: 1
+vex-transform(rotateY(0deg))
100%
opacity: 0
+vex-transform(rotateY(90deg))
// Spinner animations
=keyframes-vex-rotation
+vex-keyframes("vex-rotation")
0%
+vex-transform(rotate(0deg))
100%
+vex-transform(rotate(359deg))
// Button animations
=keyframes-vex-pulse
+vex-keyframes("vex-pulse")
0%
+box-shadow(inset 0 0 0 300px transparent)
70%
+box-shadow(inset 0 0 0 300px rgba(255, 255, 255, .25))
100%
+box-shadow(inset 0 0 0 300px transparent)

View File

@@ -0,0 +1,100 @@
=vex-keyframes($name)
@keyframes #{$name}
@content
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@-o-keyframes #{$name}
@content
=vex-animation($animation)
animation: $animation
-webkit-animation: $animation
-moz-animation: $animation
-ms-animation: $animation
-o-animation: $animation
-webkit-backface-visibility: hidden
=vex-transform($transform)
transform: $transform
-webkit-transform: $transform
-moz-transform: $transform
-ms-transform: $transform
-o-transform: $transform
=vex-preserve-3d
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
transform-style: preserve-3d
// copied from Compass (https://github.com/Compass/compass) on the 21st of January 2015:
$prefix-context: null
$current-prefix: null
$critical-usage-threshold: 0.01 !default
$default-has-layout-approach: zoom !default
$has-layout-support-threshold: $critical-usage-threshold !default
// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/_support.scss
=box-sizing($box-model)
-moz-box-sizing: $box-model
-webkit-box-sizing: $box-model
box-sizing: $box-model
// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_box-shadow.scss
=box-shadow($shadow...)
-moz-box-shadow: $shadow
-webkit-box-shadow: $shadow
box-shadow: $shadow
// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_border-radius.scss
=border-radius($radius)
-moz-border-radius: $radius
-webkit-border-radius: $radius
border-radius: $radius
// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_transform.scss
=perspective($p)
-moz-perspective: $p
-webkit-perspective: $p
perspective: $p
// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_transform.scss
=perspective-origin($origin: 50%)
-moz-perspective-origin: $origin
-webkit-perspective-origin: $origin
perspective-origin: $origin
// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/_support.scss
=appearance($appearance)
$appearance: unquote($appearance)
-moz-appearance: $appearance
-webkit-appearance: $appearance
=has-layout($approach: $default-has-layout-approach)
@if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold)
@if $approach == zoom
+has-layout-zoom
@else if $approach == block
+has-layout-block
@else
@warn "Unknown has-layout approach: #{$approach}"
+has-layout-zoom
=has-layout-zoom
@if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold)
*zoom: 1
=pie-clearfix
&:after
content: ""
display: table
clear: both
+has-layout
// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/_support.scss
@function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: $critical-usage-threshold)
@return true

View File

@@ -0,0 +1,138 @@
@import mixins
@import keyframes
+keyframes-vex-slideup
+keyframes-vex-slidedown
+keyframes-vex-pulse
$blue: #3288e6
.vex.vex-theme-bottom-right-corner
top: auto
bottom: 0
right: 0
overflow: visible
.vex-overlay
display: none
&.vex-closing .vex-content
+vex-animation(vex-slidedown .5s)
.vex-content
+vex-animation(vex-slideup .5s)
.vex-content
+border-radius(5px 0 0 0)
font-family: "Helvetica Neue", sans-serif
background: #f0f0f0
color: #444
padding: 1em
max-width: 100%
width: 450px
font-size: 1.1em
line-height: 1.5em
position: fixed
bottom: 0
right: 0
left: auto
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
+border-radius(5px)
position: absolute
top: 0
right: 0
cursor: pointer
&:before
+border-radius(3px)
position: absolute
content: "\00D7"
font-size: 26px
font-weight: normal
line-height: 31px
height: 30px
width: 30px
text-align: center
top: 3px
right: 3px
color: #bbb
background: transparent
&:hover:before, &:active:before
color: #777
background: #e0e0e0
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: 1em
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
+border-radius(3px)
background: #fff
width: 100%
padding: .25em .67em
border: 0
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
&:focus
+box-shadow(inset 0 0 0 2px lighten($blue, 20%))
outline: none
.vex-dialog-buttons
+pie-clearfix()
.vex-dialog-button
+border-radius(3px)
border: 0
float: right
margin: 0 0 0 .5em
font-family: inherit
text-transform: uppercase
letter-spacing: .1em
font-size: .8em
line-height: 1em
padding: .75em 2em
&.vex-last
margin-left: 0
&:focus
+vex-animation(vex-pulse 1.1s infinite)
outline: none
// vex-pulse uses -webkit-filter which
// doesn't play so nice in mobile webkit
@media (max-width: 568px)
+vex-animation(none)
&.vex-dialog-button-primary
background: $blue
color: #fff
&.vex-dialog-button-secondary
background: #e0e0e0
color: #777
.vex-loading-spinner.vex-theme-bottom-right-corner
+box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3))
+border-radius(100%)
background: #f0f0f0
border: .2em solid transparent
border-top-color: #bbb
top: -1.1em
bottom: auto
body.vex-open
overflow: initial

View File

@@ -0,0 +1,354 @@
@charset "UTF-8";
@keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-webkit-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-moz-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-ms-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@-o-keyframes vex-flyin {
0% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); }
100% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); } }
@keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-webkit-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-moz-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-ms-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@-o-keyframes vex-flyout {
0% {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px); } }
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-default {
padding-top: 160px;
padding-bottom: 160px; }
.vex.vex-theme-default.vex-closing .vex-content {
animation: vex-flyout 0.25s;
-webkit-animation: vex-flyout 0.25s;
-moz-animation: vex-flyout 0.25s;
-ms-animation: vex-flyout 0.25s;
-o-animation: vex-flyout 0.25s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-default .vex-content {
animation: vex-flyin 0.25s;
-webkit-animation: vex-flyin 0.25s;
-moz-animation: vex-flyin 0.25s;
-ms-animation: vex-flyin 0.25s;
-o-animation: vex-flyin 0.25s;
-webkit-backface-visibility: hidden; }
.vex.vex-theme-default .vex-content {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #f0f0f0;
color: #444;
padding: 1em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 450px;
font-size: 1.1em;
line-height: 1.5em; }
.vex.vex-theme-default .vex-content h1, .vex.vex-theme-default .vex-content h2, .vex.vex-theme-default .vex-content h3, .vex.vex-theme-default .vex-content h4, .vex.vex-theme-default .vex-content h5, .vex.vex-theme-default .vex-content h6, .vex.vex-theme-default .vex-content p, .vex.vex-theme-default .vex-content ul, .vex.vex-theme-default .vex-content li {
color: inherit; }
.vex.vex-theme-default .vex-close {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-default .vex-close:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
content: "×";
font-size: 26px;
font-weight: normal;
line-height: 31px;
height: 30px;
width: 30px;
text-align: center;
top: 3px;
right: 3px;
color: #bbb;
background: transparent; }
.vex.vex-theme-default .vex-close:hover:before, .vex.vex-theme-default .vex-close:active:before {
color: #777;
background: #e0e0e0; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-message {
margin-bottom: 0.5em; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
width: 100%;
padding: 0.25em 0.67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 0.25em; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #c6f240;
-webkit-box-shadow: inset 0 0 0 2px #c6f240;
box-shadow: inset 0 0 0 2px #c6f240;
outline: none; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-default .vex-dialog-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0;
float: right;
margin: 0 0 0 0.5em;
font-family: inherit;
font-size: 0.8em;
line-height: 1em;
padding: 0.75em 2em; }
.vex.vex-theme-default .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-default .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-default .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
background: #93BF0D;
font-weight: bold;
color: #fff; }
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777; }
.vex-loading-spinner.vex-theme-default {
-moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f0f0f0;
border: 0.2em solid transparent;
border-top-color: #bbb;
top: -1.1em;
bottom: auto; }
/*# sourceMappingURL=vex-theme-default.css.map */

View File

@@ -0,0 +1,130 @@
@import mixins
@import keyframes
+keyframes-vex-flyin
+keyframes-vex-flyout
+keyframes-vex-pulse
$blue: #3288e6
$green: #93BF0D // RJC
.vex.vex-theme-default
padding-top: 160px
padding-bottom: 160px
&.vex-closing .vex-content
+vex-animation(vex-flyout .25s)
.vex-content
+vex-animation(vex-flyin .25s)
.vex-content
+border-radius(5px)
// font-family: "Helvetica Neue", sans-serif
background: #f0f0f0
color: #444
padding: 1em
position: relative
margin: 0 auto
max-width: 100%
width: 450px
font-size: 1.1em
line-height: 1.5em
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
+border-radius(5px)
position: absolute
top: 0
right: 0
cursor: pointer
&:before
+border-radius(3px)
position: absolute
content: "\00D7"
font-size: 26px
font-weight: normal
line-height: 31px
height: 30px
width: 30px
text-align: center
top: 3px
right: 3px
color: #bbb
background: transparent
&:hover:before, &:active:before
color: #777
background: #e0e0e0
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: 1em
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
+border-radius(3px)
background: #fff
width: 100%
padding: .25em .67em
border: 0
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
&:focus
+box-shadow(inset 0 0 0 2px lighten($green, 20%)) // RJC
outline: none
.vex-dialog-buttons
+pie-clearfix()
.vex-dialog-button
+border-radius(3px)
border: 0
float: right
margin: 0 0 0 .5em
font-family: inherit
// text-transform: uppercase
// letter-spacing: .1em
font-size: .8em
line-height: 1em
padding: .75em 2em
&.vex-last
margin-left: 0
&:focus
+vex-animation(vex-pulse 1.1s infinite)
outline: none
// vex-pulse uses -webkit-filter which
// doesn't play so nice in mobile webkit
@media (max-width: 568px)
+vex-animation(none)
&.vex-dialog-button-primary
background: $green // RJC
font-weight: bold
color: #fff
&.vex-dialog-button-secondary
background: #e0e0e0
color: #777
.vex-loading-spinner.vex-theme-default
+box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3))
+border-radius(100%)
background: #f0f0f0
border: .2em solid transparent
border-top-color: #bbb
top: -1.1em
bottom: auto

View File

@@ -0,0 +1,165 @@
@import mixins
@import keyframes
+keyframes-vex-flipin-horizontal
+keyframes-vex-flipout-horizontal
$green: #34b989
$pink: #ff7ea7
$red: #ce4a55
$blue: #477FA5
=vex-theme-flat-attack-color($color)
.vex-close:before
background: $color
.vex-dialog-form
.vex-dialog-input
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
&:focus
+box-shadow(inset 0 0 0 2px $color)
.vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary
background: $color
.vex.vex-theme-flat-attack
+perspective(1300px)
+perspective-origin(50% 150px)
padding-top: 100px
padding-bottom: 100px
font-size: 1.5em
&.vex-closing .vex-content
+vex-animation(vex-flipout-horizontal .5s)
.vex-content
+vex-preserve-3d
+vex-animation(vex-flipin-horizontal .5s)
.vex-content
font-family: "Helvetica Neue", sans-serif
font-weight: 200
background: #fff
color: #444
padding: 2em 2em 3em 2em
line-height: 1.5em
position: relative
margin: 0 auto
max-width: 100%
width: 600px
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
position: absolute
top: 0
right: 0
cursor: pointer
&:before
font-family: "Helvetica Neue", sans-serif
font-weight: 100
line-height: 1px
padding-top: .5em
display: block
font-size: 2em
text-indent: 1px
overflow: hidden
height: 1.25em
width: 1.25em
text-align: center
top: 0
right: 0
color: #fff
background: #666
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: .5em
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
+border-radius(3px)
background: #f0f0f0
width: 100%
padding: .25em .67em
border: 0
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
&:focus
+box-shadow(inset 0 0 0 2px #666)
outline: none
.vex-dialog-buttons
+pie-clearfix()
padding-top: 1em
margin-bottom: -3em
margin-left: -2em
margin-right: -2em
.vex-dialog-button
+border-radius(0)
border: 0
margin: 0
float: right
padding: .5em 1em
font-size: 1.13em
text-transform: uppercase
font-weight: 200
letter-spacing: .1em
line-height: 1em
font-family: inherit
&.vex-last
margin-left: 0
&:focus
outline: none
&.vex-dialog-button-primary
background: #666
color: #fff
&:focus
+box-shadow(inset 0 3px rgba(0, 0, 0, .2))
&.vex-dialog-button-secondary
background: #fff
color: #ccc
&:focus
+box-shadow(inset 0 3px #aaa)
background: #eee
color: #777
&:hover, &:active
color: #777
// Theme colors
&.vex-theme-flat-attack-pink
+vex-theme-flat-attack-color($pink)
&.vex-theme-flat-attack-red
+vex-theme-flat-attack-color($red)
&.vex-theme-flat-attack-green
+vex-theme-flat-attack-color($green)
&.vex-theme-flat-attack-blue
+vex-theme-flat-attack-color($blue)
.vex-loading-spinner.vex-theme-flat-attack
height: 4em
width: 4em

View File

@@ -0,0 +1,131 @@
@import mixins
@import keyframes
+keyframes-vex-flyin
+keyframes-vex-flyout
+keyframes-vex-pulse
$blue: #3288e6
.vex.vex-theme-os
padding-top: 160px
padding-bottom: 160px
&.vex-closing .vex-content
+vex-animation(vex-flyout .5s)
.vex-content
+vex-animation(vex-flyin .5s)
.vex-content
+border-radius(5px)
+box-shadow(inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, .08))
font-family: "Helvetica Neue", sans-serif
border-top: 20px solid #bbb
background: #f0f0f0
color: #444
padding: 1em
position: relative
margin: 0 auto
max-width: 100%
width: 450px
font-size: 1.1em
line-height: 1.5em
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
+border-radius(0 5px 0 0)
position: absolute
top: 0
right: 0
cursor: pointer
&:before
+border-radius(3px)
position: absolute
content: "\00D7"
font-size: 26px
font-weight: normal
line-height: 31px
height: 30px
width: 30px
text-align: center
top: 3px
right: 3px
color: #bbb
background: transparent
&:hover:before, &:active:before
color: #777
background: #e0e0e0
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: 1em
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
+border-radius(3px)
background: #fff
width: 100%
padding: .25em .67em
border: 0
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
&:focus
+box-shadow(inset 0 0 0 1px $blue)
outline: none
.vex-dialog-buttons
+pie-clearfix()
.vex-dialog-button
+border-radius(3px)
border: 0
float: right
margin: 0 0 0 .5em
font-family: inherit
text-transform: uppercase
letter-spacing: .1em
font-size: .8em
line-height: 1em
padding: .75em 2em
&.vex-last
margin-left: 0
&:focus
+vex-animation(vex-pulse 1.1s infinite)
outline: none
// vex-pulse uses -webkit-filter which
// doesn't play so nice in mobile webkit
@media (max-width: 568px)
+vex-animation(none)
&.vex-dialog-button-primary
background: $blue
color: #fff
&.vex-dialog-button-secondary
background: #e0e0e0
color: #777
.vex-loading-spinner.vex-theme-os
+box-shadow(0 0 0 1px rgba(0, 0, 0, .2), 0 0 .5em rgba(0, 0, 0, .2))
+border-radius(100%)
background: rgba(255, 255, 255, .2)
width: 0
height: 0
border: 1.2em solid #bbb
border-top-color: #f0f0f0
border-bottom-color: #f0f0f0

View File

@@ -0,0 +1,169 @@
@charset "UTF-8";
@keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-webkit-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-moz-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-ms-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
@-o-keyframes vex-pulse {
0% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; }
70% {
-moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
100% {
-moz-box-shadow: inset 0 0 0 300px transparent;
-webkit-box-shadow: inset 0 0 0 300px transparent;
box-shadow: inset 0 0 0 300px transparent; } }
.vex.vex-theme-plain {
padding-top: 160px;
padding-bottom: 160px; }
.vex.vex-theme-plain .vex-content {
background: #fff;
color: #444;
padding: 1em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 450px;
font-size: 1.1em;
line-height: 1.5em; }
.vex.vex-theme-plain .vex-content h1, .vex.vex-theme-plain .vex-content h2, .vex.vex-theme-plain .vex-content h3, .vex.vex-theme-plain .vex-content h4, .vex.vex-theme-plain .vex-content h5, .vex.vex-theme-plain .vex-content h6, .vex.vex-theme-plain .vex-content p, .vex.vex-theme-plain .vex-content ul, .vex.vex-theme-plain .vex-content li {
color: inherit; }
.vex.vex-theme-plain .vex-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
.vex.vex-theme-plain .vex-close:before {
position: absolute;
content: "×";
font-size: 26px;
font-weight: normal;
line-height: 31px;
height: 30px;
width: 30px;
text-align: center;
top: 3px;
right: 3px;
color: #bbb;
background: transparent; }
.vex.vex-theme-plain .vex-close:hover:before, .vex.vex-theme-plain .vex-close:active:before {
color: #777;
background: #e0e0e0; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-message {
margin-bottom: 0.5em; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"] {
background: #f0f0f0;
width: 100%;
padding: 0.25em 0.67em;
border: 0;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 0.25em; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
outline: none; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons {
*zoom: 1; }
.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both; }
.vex.vex-theme-plain .vex-dialog-button {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border: 0;
float: right;
margin: 0 0 0 0.5em;
font-family: inherit;
letter-spacing: 0.1em;
font-size: 0.8em;
line-height: 1em;
padding: 0.75em 2em; }
.vex.vex-theme-plain .vex-dialog-button.vex-last {
margin-left: 0; }
.vex.vex-theme-plain .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
-moz-animation: vex-pulse 1.1s infinite;
-ms-animation: vex-pulse 1.1s infinite;
-o-animation: vex-pulse 1.1s infinite;
-webkit-backface-visibility: hidden;
outline: none; }
@media (max-width: 568px) {
.vex.vex-theme-plain .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
-webkit-backface-visibility: hidden; } }
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary {
background: #93BF0D;
color: #fff; }
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777; }
.vex-loading-spinner.vex-theme-plain {
height: 2.5em;
width: 2.5em; }
/*# sourceMappingURL=vex-theme-plain.css.map */

View File

@@ -0,0 +1,112 @@
@import mixins
@import keyframes
+keyframes-vex-pulse
$blue: #3288e6
$green: #93BF0D // RJC
.vex.vex-theme-plain
padding-top: 160px
padding-bottom: 160px
.vex-content
// font-family: "Helvetica Neue", sans-serif
background: #fff
color: #444
padding: 1em
position: relative
margin: 0 auto
max-width: 100%
width: 450px
font-size: 1.1em
line-height: 1.5em
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
position: absolute
top: 0
right: 0
cursor: pointer
&:before
position: absolute
content: "\00D7"
font-size: 26px
font-weight: normal
line-height: 31px
height: 30px
width: 30px
text-align: center
top: 3px
right: 3px
color: #bbb
background: transparent
&:hover:before, &:active:before
color: #777
background: #e0e0e0
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: 1em
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
background: #f0f0f0
width: 100%
padding: .25em .67em
border: 0
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
&:focus
+box-shadow(inset 0 0 0 2px rgba(0, 0, 0, .2))
outline: none
.vex-dialog-buttons
+pie-clearfix()
.vex-dialog-button
+border-radius(0)
border: 0
float: right
margin: 0 0 0 .5em
font-family: inherit
// text-transform: uppercase
letter-spacing: .1em
font-size: .8em
line-height: 1em
padding: .75em 2em
&.vex-last
margin-left: 0
&:focus
+vex-animation(vex-pulse 1.1s infinite)
outline: none
// vex-pulse uses -webkit-filter which
// doesn't play so nice in mobile webkit
@media (max-width: 568px)
+vex-animation(none)
&.vex-dialog-button-primary
background: $green // RJC
color: #fff
&.vex-dialog-button-secondary
background: #e0e0e0
color: #777
.vex-loading-spinner.vex-theme-plain
height: 2.5em
width: 2.5em

View File

@@ -0,0 +1,3 @@
/*# sourceMappingURL=vex-theme-pw.css.map */

View File

@@ -0,0 +1,126 @@
@import mixins
@import keyframes
+keyframes-vex-dropin
+keyframes-vex-dropout
+keyframes-vex-pulse
$blue: #3288e6
.vex.vex-theme-top
&.vex-closing .vex-content
+vex-animation(vex-dropout .5s)
.vex-content
+vex-animation(vex-dropin .5s)
.vex-content
+border-radius(0 0 5px 5px)
font-family: "Helvetica Neue", sans-serif
background: #f0f0f0
color: #444
padding: 1em
position: relative
margin: 0 auto
max-width: 100%
width: 450px
font-size: 1.1em
line-height: 1.5em
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
+border-radius(5px)
position: absolute
top: 0
right: 0
cursor: pointer
&:before
+border-radius(3px)
position: absolute
content: "\00D7"
font-size: 26px
font-weight: normal
line-height: 31px
height: 30px
width: 30px
text-align: center
top: 3px
right: 3px
color: #bbb
background: transparent
&:hover:before, &:active:before
color: #777
background: #e0e0e0
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: 1em
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
+border-radius(3px)
background: #fff
width: 100%
padding: .25em .67em
border: 0
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
&:focus
+box-shadow(inset 0 0 0 2px lighten($blue, 20%))
outline: none
.vex-dialog-buttons
+pie-clearfix()
.vex-dialog-button
+border-radius(3px)
border: 0
float: right
margin: 0 0 0 .5em
font-family: inherit
text-transform: uppercase
letter-spacing: .1em
font-size: .8em
line-height: 1em
padding: .75em 2em
&.vex-last
margin-left: 0
&:focus
+vex-animation(vex-pulse 1.1s infinite)
outline: none
// vex-pulse uses -webkit-filter which
// doesn't play so nice in mobile webkit
@media (max-width: 568px)
+vex-animation(none)
&.vex-dialog-button-primary
background: $blue
color: #fff
&.vex-dialog-button-secondary
background: #e0e0e0
color: #777
.vex-loading-spinner.vex-theme-top
+box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3))
+border-radius(100%)
background: #f0f0f0
border: .2em solid transparent
border-top-color: #bbb
top: -1.1em
bottom: auto

View File

@@ -0,0 +1,113 @@
@import mixins
@import keyframes
+keyframes-vex-pulse
.vex.vex-theme-wireframe
padding-top: 160px
padding-bottom: 160px
.vex-overlay
background: rgba(255, 255, 255, .4)
.vex-content
font-family: "Helvetica Neue", sans-serif
background: #fff
color: #000
border: 2px solid #000
padding: 2em
position: relative
margin: 0 auto
max-width: 100%
width: 400px
font-size: 1.1em
line-height: 1.5em
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
position: absolute
top: 0
right: 0
cursor: pointer
&:before
position: absolute
content: "\00D7"
font-size: 40px
font-weight: normal
line-height: 80px
height: 80px
width: 80px
text-align: center
top: 3px
right: 3px
color: #000
&:hover:before, &:active:before
color: #000
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: 1em
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
background: #fff
width: 100%
padding: .25em .67em
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
border: 2px solid #000
&:focus
border-style: dashed
outline: none
.vex-dialog-buttons
+pie-clearfix()
.vex-dialog-button
+border-radius(0)
border: 0
float: right
margin: 0 0 0 .5em
font-family: inherit
text-transform: uppercase
letter-spacing: .1em
font-size: .8em
line-height: 1em
padding: .75em 2em
&.vex-last
margin-left: 0
&:focus
+vex-animation(vex-pulse 1.1s infinite)
outline: none
// vex-pulse uses -webkit-filter which
// doesn't play so nice in mobile webkit
@media (max-width: 568px)
+vex-animation(none)
&.vex-dialog-button-primary
background: #000
color: #fff
border: 2px solid transparent
&.vex-dialog-button-secondary
background: #fff
color: #000
border: 2px solid #000
.vex-loading-spinner.vex-theme-wireframe
height: 2.5em
width: 2.5em

View File

@@ -0,0 +1,84 @@
@import mixins
@import keyframes
+keyframes-vex-fadein
+keyframes-vex-fadeout
+keyframes-vex-rotation
.vex, .vex *, .vex *:before, .vex *:after
+box-sizing(border-box)
.vex
position: fixed
overflow: auto
-webkit-overflow-scrolling: touch
z-index: 1111
top: 0
right: 0
bottom: 0
left: 0
.vex-scrollbar-measure
position: absolute
top: -9999px
width: 50px
height: 50px
overflow: scroll
// IE
.vex-overlay
background: #000
filter: alpha(opacity=40) /* IE 57 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" /* IE 8 */
.vex-overlay
+vex-animation(vex-fadein .5s)
position: fixed
background: rgba(0, 0, 0, .4)
top: 0
right: 0
bottom: 0
left: 0
.vex.vex-closing &
+vex-animation(vex-fadeout .5s)
.vex-content
+vex-animation(vex-fadein .5s)
background: #fff
.vex.vex-closing &
+vex-animation(vex-fadeout .5s)
.vex-close:before
font-family: Arial, sans-serif
content: "\00D7"
.vex-dialog-form
margin: 0 // Browser reset
.vex-dialog-button
text-rendering: optimizeLegibility
+appearance(none)
cursor: pointer
-webkit-tap-highlight-color: transparent
.vex-loading-spinner
+vex-animation(vex-rotation .7s linear infinite)
+box-shadow(0 0 1em rgba(0, 0, 0, 0.1))
position: fixed
z-index: 1112
margin: auto
top: 0
right: 0
bottom: 0
left: 0
height: 2em
width: 2em
background: #fff
// Prevent background scrolling when vex is open
// https://github.com/HubSpot/vex/issues/18
body.vex-open
overflow: hidden

View File

@@ -610,6 +610,7 @@ class LanguageTranslator extends Wire {
case 'save and exit': case 'save and exit':
case 'save + exit': $v = $this->_('Save + Exit'); break; case 'save + exit': $v = $this->_('Save + Exit'); break;
case 'cancel': $v = $this->_('Cancel'); break; case 'cancel': $v = $this->_('Cancel'); break;
case 'ok': $v = $this->_('Ok'); break;
case 'new': $v = $this->_('New'); break; case 'new': $v = $this->_('New'); break;
case 'add': $v = $this->_('Add'); break; case 'add': $v = $this->_('Add'); break;
case 'add new': $v = $this->_('Add New'); break; case 'add new': $v = $this->_('Add New'); break;

View File

@@ -79,7 +79,7 @@ $(document).ready(function() {
}); });
$checkedItems.effect('highlight', 500); $checkedItems.effect('highlight', 500);
} else { } else {
alert($(this).attr('data-nochecked')); ProcessWire.alert($(this).attr('data-nochecked'));
} }
$(this).val(''); $(this).val('');
}); });

View File

@@ -1 +1 @@
$(document).ready(function(){$("a.CommentTextEdit").click(function(){var d=$("<textarea></textarea>");var c=$(this).closest(".CommentTextEditable");c.parent(".CommentText").removeClass("CommentTextOverflow");d.attr("name",c.attr("id"));$(this).remove();d.val(c.text());c.after(d);c.remove();return false});$(".CommentText").click(function(){$(this).find("a.CommentTextEdit").click();return false});$(".CommentItem").each(function(){var d=$(this);var e=d.find(".CommentItemInfo");var c=e.height()+30;var f=d.find(".CommentText");if(f.height()>c){f.addClass("CommentTextOverflow")}});$("#CommentLimitSelect").change(function(){window.location="./?limit="+parseInt($(this).val())});$("#CommentListSort").change(function(){window.location="./?sort="+$(this).val()});function b(d){var c=d.closest(".CommentItem");if(d.is(":checked")){c.addClass("CommentChecked")}else{c.removeClass("CommentChecked")}}$(".CommentCheckbox").click(function(){b($(this))});$("#CommentCheckAll").click(function(){var c=$(".CommentCheckbox");if($(this).is(":checked")){c.attr("checked","checked")}else{c.removeAttr("checked")}c.each(function(){b($(this))})});$("#CommentActions").change(function(){var d=$(this).val();if(!d.length){return}var c=$(".CommentChecked");if(c.length){c.each(function(){if(d=="reset-upvotes"){$(this).find(".CommentUpvotes > input").val(0).change()}else{if(d=="reset-downvotes"){$(this).find(".CommentDownvotes > input").val(0).change()}else{$(this).find(".CommentStatus > input[value='"+d+"']").click()}}});c.effect("highlight",500)}else{alert($(this).attr("data-nochecked"))}$(this).val("")});$(document).on("change",".CommentItem :input",function(){var c=$(this);if(c.is("[type='checkbox']")){return}$(this).closest(".CommentItem").addClass("CommentItemChanged")});$("#CommentListForm").submit(function(){$(this).addClass("CommentListFormSubmitted")});window.addEventListener("beforeunload",function(d){if($(".CommentListFormSubmitted").length){return}var c=$(".CommentItemChanged");if(c.length==0){return}var f=$("#CommentListForm").attr("data-unsaved");(d||window.event).returnValue=f;return f});var a=$(".WireTabs a.on").css("border-top-color");$("#CommentListHeader").css("border-top-color",a)}); $(document).ready(function(){$("a.CommentTextEdit").click(function(){var d=$("<textarea></textarea>");var c=$(this).closest(".CommentTextEditable");c.parent(".CommentText").removeClass("CommentTextOverflow");d.attr("name",c.attr("id"));$(this).remove();d.val(c.text());c.after(d);c.remove();return false});$(".CommentText").click(function(){$(this).find("a.CommentTextEdit").click();return false});$(".CommentItem").each(function(){var d=$(this);var e=d.find(".CommentItemInfo");var c=e.height()+30;var f=d.find(".CommentText");if(f.height()>c){f.addClass("CommentTextOverflow")}});$("#CommentLimitSelect").change(function(){window.location="./?limit="+parseInt($(this).val())});$("#CommentListSort").change(function(){window.location="./?sort="+$(this).val()});function b(d){var c=d.closest(".CommentItem");if(d.is(":checked")){c.addClass("CommentChecked")}else{c.removeClass("CommentChecked")}}$(".CommentCheckbox").click(function(){b($(this))});$("#CommentCheckAll").click(function(){var c=$(".CommentCheckbox");if($(this).is(":checked")){c.attr("checked","checked")}else{c.removeAttr("checked")}c.each(function(){b($(this))})});$("#CommentActions").change(function(){var d=$(this).val();if(!d.length){return}var c=$(".CommentChecked");if(c.length){c.each(function(){if(d=="reset-upvotes"){$(this).find(".CommentUpvotes > input").val(0).change()}else{if(d=="reset-downvotes"){$(this).find(".CommentDownvotes > input").val(0).change()}else{$(this).find(".CommentStatus > input[value='"+d+"']").click()}}});c.effect("highlight",500)}else{ProcessWire.alert($(this).attr("data-nochecked"))}$(this).val("")});$(document).on("change",".CommentItem :input",function(){var c=$(this);if(c.is("[type='checkbox']")){return}$(this).closest(".CommentItem").addClass("CommentItemChanged")});$("#CommentListForm").submit(function(){$(this).addClass("CommentListFormSubmitted")});window.addEventListener("beforeunload",function(d){if($(".CommentListFormSubmitted").length){return}var c=$(".CommentItemChanged");if(c.length==0){return}var f=$("#CommentListForm").attr("data-unsaved");(d||window.event).returnValue=f;return f});var a=$(".WireTabs a.on").css("border-top-color");$("#CommentListHeader").css("border-top-color",a)});

View File

@@ -471,7 +471,7 @@ $(document).ready(function() {
var processChildren = function(data) { var processChildren = function(data) {
if(data && data.error) { if(data && data.error) {
alert(data.message); ProcessWire.alert(data.message);
$loading.hide(); $loading.hide();
ignoreClicks = false; ignoreClicks = false;
return; return;
@@ -839,7 +839,7 @@ $(document).ready(function() {
} else { } else {
// data.success === false, so display error // data.success === false, so display error
$spinner.remove(); $spinner.remove();
alert(data.message); ProcessWire.alert(data.message);
} }
}); });
return false; return false;
@@ -1160,7 +1160,7 @@ $(document).ready(function() {
}); });
if(data && data.error) { if(data && data.error) {
alert(data.message); ProcessWire.alert(data.message);
} }
// if item moved from one list to another, then update the numChildren counts // if item moved from one list to another, then update the numChildren counts

File diff suppressed because one or more lines are too long

View File

@@ -60,7 +60,7 @@ $(document).ready(function() {
var confirmText = $label.attr('data-confirm'); var confirmText = $label.attr('data-confirm');
if(typeof alertText != "undefined" && alertText.length) { if(typeof alertText != "undefined" && alertText.length) {
alert(alertText); ProcessWire.alert(alertText);
return false; return false;
} else if(typeof confirmText != "undefined" && confirmText.length) { } else if(typeof confirmText != "undefined" && confirmText.length) {
if($checkbox.is(":checked")) { if($checkbox.is(":checked")) {

View File

@@ -1 +1 @@
function ProcessRoleUpdatePermissions(d,b){var a=$("#wrap_Inputfield_permissions");var c=b==null?a.find(".permission > input[type=checkbox]"):b;if(d){c.each(function(){var g=$(this);var f=g.closest("label");var e=g.closest("tr");e.addClass(f.attr("class"))})}c.each(function(){var k=$(this);var f=k.closest("label");var e=k.closest("tr");var i=$("#"+f.attr("data-parent"));var h=f.text();var j=parseInt(f.attr("data-level"));var g=e.nextAll(".parent-"+f.attr("id"));e.addClass(f.attr("id"));if(k.is(":checked")){g=g.filter(".level"+(j+1));d?g.show():g.fadeIn();e.addClass("permission-checked")}else{g.find("input:not(:disabled)").removeAttr("checked");d?g.hide():g.fadeOut();e.removeClass("permission-checked")}})}$(document).ready(function(){var a=$("#Inputfield_permissions_36");if(!a.is(":checked")){a.attr("checked","checked")}ProcessRoleUpdatePermissions(true,null);$("#wrap_Inputfield_permissions").on("click","input[type=checkbox], label.checkbox-disabled",function(f){if($(this).is("label")){var b=$(this);var c=b.children("input")}else{var c=$(this);var b=c.parent()}var g=b.attr("data-alert");var d=b.attr("data-confirm");if(typeof g!="undefined"&&g.length){alert(g);return false}else{if(typeof d!="undefined"&&d.length){if(c.is(":checked")){if(!confirm(d)){return false}}}}if($(this).is("input")){var c=$(this);setTimeout(function(){ProcessRoleUpdatePermissions(false,c)},100)}})}); function ProcessRoleUpdatePermissions(d,b){var a=$("#wrap_Inputfield_permissions");var c=b==null?a.find(".permission > input[type=checkbox]"):b;if(d){c.each(function(){var g=$(this);var f=g.closest("label");var e=g.closest("tr");e.addClass(f.attr("class"))})}c.each(function(){var k=$(this);var f=k.closest("label");var e=k.closest("tr");var i=$("#"+f.attr("data-parent"));var h=f.text();var j=parseInt(f.attr("data-level"));var g=e.nextAll(".parent-"+f.attr("id"));e.addClass(f.attr("id"));if(k.is(":checked")){g=g.filter(".level"+(j+1));d?g.show():g.fadeIn();e.addClass("permission-checked")}else{g.find("input:not(:disabled)").removeAttr("checked");d?g.hide():g.fadeOut();e.removeClass("permission-checked")}})}$(document).ready(function(){var a=$("#Inputfield_permissions_36");if(!a.is(":checked")){a.attr("checked","checked")}ProcessRoleUpdatePermissions(true,null);$("#wrap_Inputfield_permissions").on("click","input[type=checkbox], label.checkbox-disabled",function(f){if($(this).is("label")){var b=$(this);var c=b.children("input")}else{var c=$(this);var b=c.parent()}var g=b.attr("data-alert");var d=b.attr("data-confirm");if(typeof g!="undefined"&&g.length){ProcessWire.alert(g);return false}else{if(typeof d!="undefined"&&d.length){if(c.is(":checked")){if(!confirm(d)){return false}}}}if($(this).is("input")){var c=$(this);setTimeout(function(){ProcessRoleUpdatePermissions(false,c)},100)}})});

View File

@@ -239,7 +239,7 @@ var Notifications = {
if(alerts.length) { if(alerts.length) {
for (var n = 0; n < alerts.length; n++) { for (var n = 0; n < alerts.length; n++) {
alert(alerts[n].title); ProcessWire.alert(alerts[n].title);
} }
} }
}, },

File diff suppressed because one or more lines are too long

View File

@@ -335,4 +335,42 @@ var ProcessWireAdmin = {
}; };
if(typeof ProcessWire != "undefined") {
ProcessWire.confirm = function(message, func) {
if(typeof vex != "undefined") {
vex.dialog.confirm({
message: message,
callback: function(v) {
if(v) func();
}
});
} else {
if(confirm(message)) func();
}
};
ProcessWire.alert = function(message, allowMarkup) {
if(typeof allowMarkup == "undefined") var allowMarkup = false;
if(typeof vex != "undefined") {
if(allowMarkup) {
vex.dialog.alert({unsafeMessage: message});
} else {
vex.dialog.alert(message);
}
} else {
alert(message);
}
};
ProcessWire.prompt = function(message, placeholder, func) {
if(typeof vex == "undefined") {
alert("prompt function requires vex");
return;
}
vex.dialog.prompt({
message: message,
placeholder: placeholder,
callback: func
})
};
}

File diff suppressed because one or more lines are too long