@domoinc/domo-select
Version:
DomoSelect - Domo Widget
681 lines (587 loc) • 40.7 kB
JavaScript
/*! Copyright 2016 Domo Inc. */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("d3"), require("d3.chart"), require("@domoinc/base-widget"));
else if(typeof define === 'function' && define.amd)
define(["d3", "d3.chart", "base-widget"], factory);
else if(typeof exports === 'object')
exports["Button"] = factory(require("d3"), require("d3.chart"), require("@domoinc/base-widget"));
else
root["Button"] = factory(root["d3"], root["d3.chart"], root["BaseWidget"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var d3 = __webpack_require__(1);
var d3Chart = __webpack_require__(2);
var BaseWidget = __webpack_require__(3);
__webpack_require__(4);
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// Button:
// Domo UI widget for buttons.
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
module.exports = BaseWidget.extend('Button', {
//**********************************************************************************
// Initialization
//**********************************************************************************
initialize: function() {
"use strict";
var _Chart = this;
var button = _Chart._layerGroup;
var buttonContent;
this.transform = function(data) {
var validData = _Chart.validateData(data);
validateInitialIndex(validData);
if (validData.length) {
if (_Chart.c('staticValue')) {
_Chart.c('textElement')
.text(_Chart.c('staticValue'));
} else {
_Chart.c('textElement')
.text(_Chart.a('Label')(validData[_Chart.c('selectedIndex')]));
}
button.datum(validData[_Chart.c('selectedIndex')]);
}
updateConfigs();
return validData;
};
//----------------------------------------------------------------------------------
// Config
//----------------------------------------------------------------------------------
this._newConfig = {
centerText: {
description: 'Centers the button text',
type: 'boolean',
value: false,
},
chartName: {
description: 'Name of chart for Reporting.',
type: 'string',
value: 'Button'
},
disabled: {
description: 'Property Description',
type: 'boolean',
value: false,
},
height: {
description: 'Buttons Height',
type: 'string',
value: 'auto',
},
leftIconElement: {
description: 'Div element for the left icon',
type: 'd3 selection',
value: null,
},
margin: {
description: 'Property Description',
type: 'string',
value: '0px 0px 0px 0px',
},
orientation: {
description: 'Determines if the botton is vertical or horizontal',
type: 'string',
value: 'horizontal',
},
rightIconElement: {
description: 'Div element for the right icon',
type: 'd3 selection',
value: null,
},
showChevron: {
description: 'Determines if the chevron should be visible',
type: 'boolean',
value: true,
},
size: {
description: 'Determines the size of the theme',
type: 'string',
value: 'sz-sm',
},
textElement: {
description: 'Div element containing the button text',
type: 'd3 selection',
value: null,
},
theme: {
description: 'Determines the theme of the theme',
type: 'string',
value: 'thm-light-grey',
},
width: {
description: 'Buttons Width',
type: 'string',
value: '250px',
},
selectedIndex: {
description: 'Selected Index to get the label from',
type: 'number',
value: 0
},
staticValue: {
// name: 'Static Value',
description: 'Sets a static default value on the select',
type: 'string',
value: null
},
};
// Update config object from base chart.
this.mergeConfig(_Chart._newConfig);
//----------------------------------------------------------------------------------
// Data Definition:
//----------------------------------------------------------------------------------
_Chart._newDataDefinition = {
'Label': {
type: 'string',
validate: function(d) { return this.accessor(d) !== undefined; },
accessor: function(line) { return (line && line[0] !== undefined) ? String(line[0]) : undefined; },
}
};
// Update data defs object from base chart.
this.mergeDataDefinition(_Chart._newDataDefinition);
//----------------------------------------------------------------------------------
// Interface - This is where you document your events. The chart's .on()' and
// '.trigger()' methods will go here.
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// Static - Anything that is defined here will never change
//----------------------------------------------------------------------------------
button.attr('class', 'da-btn ' + _Chart.c('size') + ' ' + _Chart.c('theme'))
.attr('tabindex', 1)
.on("click", function(d) {
_Chart.trigger('dispatch:click', d);
})
.on('focusout', function() {
_Chart.trigger('dispatch:focusout');
})
.on('blur', function() {
_Chart.trigger('dispatch:blur');
});
buttonContent = button.append('div')
.attr('class', 'btn-content');
_Chart.c('leftIconElement', buttonContent.append("div")
.attr('class', 'btn-icon-left')
);
_Chart.c('textElement', buttonContent.append("div")
.attr('class', 'btn-text truncate')
.text('')
);
_Chart.c('rightIconElement', buttonContent.append("div")
.attr('class', 'btn-icon-right')
)
_Chart.c('rightIconElement')
.append('div')
.attr('class', 'chevron hidden')
.append('svg')
.attr('viewBox', '0 0 7.4 5')
.append('path')
.attr('d', 'm 3.2 5 l -3.2 -3.36 l 0.64 -0.64 l 2.56 2.64 l 2.56 -2.64 l 0.64 0.64 l -3.2 3.36 l 0 0 Z')
//----------------------------------------------------------------------------------
// Helper Functions
//----------------------------------------------------------------------------------
function removeClassbyPrefix(c, p) {
var r = new RegExp(p + '-\\w+(-\\w+)*');
return c.replace(r, '');
}
/**
* ensure the initial index is within the range of the data length
*/
function validateInitialIndex(validData) {
if (_Chart.c('selectedIndex') < 0) {
_Chart.c('selectedIndex', 0);
return;
} else if (_Chart.c('selectedIndex') > validData.length - 1) {
_Chart.c('selectedIndex', validData.length - 1);
return;
}
return;
}
function updateConfigs() {
button.select('.btn-text').classed('center', _Chart.c('centerText')); //centerText
button.classed('disabled', _Chart.c('disabled')); //disabled
button.style('height', _Chart.c('height')); //height
button.style('margin', _Chart.c('margin')); //margin
button.classed('rotate', _Chart.c('orientation') === 'vertical'); //orientation
//showChevron
button.select('.btn-text').style('width', '95%'); // this measurement will need to be recalculated if left or right icons edited
button.select('.btn-icon-right')
.style('width', '0%')
.style('position', 'absolute')
// .style('right', '15px')
.style('right', function() {
if (_Chart.c('size') === 'sz-sm') {
return '15px';
} else if (_Chart.c('size') === 'sz-md') {
return '17px';
} else if (_Chart.c('size') === 'sz-lg') {
return '19px';
}
})
button.select('.chevron').classed('hidden', !_Chart.c('showChevron'));
//size
var classesSize = removeClassbyPrefix(button.attr('class'), 'sz');
classesSize += ' ' + _Chart.c('size');
button.attr('class', classesSize);
//theme (color)
var classesTheme = removeClassbyPrefix(button.attr('class'), 'thm');
classesTheme += ' ' + _Chart.c('theme');
button.attr('class', classesTheme);
button.style('width', (parseInt(_Chart.c('width')) - 2) + 'px'); //width
}
}
});
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(5);
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(7)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!./../../node_modules/css-loader/index.js!./da-button.css", function() {
var newContent = require("!!./../../node_modules/css-loader/index.js!./da-button.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(6)();
// imports
// module
exports.push([module.id, ".da-btn {\n display: inline-block;\n margin-bottom: 0;\n font-weight: normal;\n text-align: left;\n vertical-align: middle;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n background-image: none;\n border: 1px solid transparent;\n white-space: nowrap;\n position: relative;\n display: block;\n border-radius: 3px;\n font-size: 10px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n .da-btn:focus, .da-btn.focus, .da-btn:active:focus, .da-btn:active.focus, .da-btn.active:focus, .da-btn.active.focus {\n outline: none;\n outline: thin dotted;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: -2px; }\n .da-btn:hover, .da-btn:focus, .da-btn.focus {\n outline: none;\n text-decoration: none; }\n .da-btn:active, .da-btn.active {\n outline: none;\n background-image: none; }\n .da-btn.disabled, .da-btn[disabled], fieldset[disabled] .da-btn {\n cursor: not-allowed;\n pointer-events: none;\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .da-btn.rotate {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg); }\n .da-btn .btn-content div {\n display: inline-block; }\n .da-btn .btn-content .truncate {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; }\n .da-btn .btn-content .btn-icon-left {\n float: left; }\n .da-btn .btn-content .btn-text {\n width: 100%;\n float: left; }\n .da-btn .btn-content .btn-text.center {\n text-align: center; }\n .da-btn .btn-content .btn-icon-right {\n float: right; }\n .da-btn .btn-content .btn-icon-right .chevron {\n padding: 0px 0px; }\n .da-btn .btn-content .btn-icon-right .chevron svg {\n width: 100%;\n height: 100%;\n max-height: 10px; }\n .da-btn .hidden {\n display: none !important; }\n\n.thm-clear {\n color: #54585A;\n background-color: transparent;\n border-color: transparent; }\n .thm-clear:hover, .thm-clear:focus, .thm-clear.focus, .open > .thm-clear.dropdown-toggle {\n color: #54585A;\n background-color: transparent;\n border-color: transparent; }\n .thm-clear:hover path, .thm-clear:focus path, .thm-clear.focus path, .open > .thm-clear.dropdown-toggle path {\n fill: #54585A; }\n .thm-clear:active, .thm-clear.active, .open > .thm-clear.dropdown-toggle {\n color: #54585A;\n background-color: transparent;\n border-color: transparent;\n background-image: none; }\n .thm-clear:active path, .thm-clear.active path, .open > .thm-clear.dropdown-toggle path {\n fill: #54585A; }\n .thm-clear.disabled, .thm-clear.disabled:hover, .thm-clear.disabled:focus, .thm-clear.disabled.focus, .thm-clear.disabled:active, .thm-clear.disabled.active, .thm-clear[disabled], .thm-clear[disabled]:hover, .thm-clear[disabled]:focus, .thm-clear[disabled].focus, .thm-clear[disabled]:active, .thm-clear[disabled].active, fieldset[disabled] .thm-clear, fieldset[disabled] .thm-clear:hover, fieldset[disabled] .thm-clear:focus, fieldset[disabled] .thm-clear.focus, fieldset[disabled] .thm-clear:active, fieldset[disabled] .thm-clear.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-clear path {\n fill: #54585A; }\n\n.thm-light-grey {\n color: #54585A;\n background-color: #D8D8D9;\n border-color: #D8D8D9; }\n .thm-light-grey:hover, .thm-light-grey:focus, .thm-light-grey.focus, .open > .thm-light-grey.dropdown-toggle {\n color: #54585A;\n background-color: #cbcbcc;\n border-color: #cbcbcc; }\n .thm-light-grey:hover path, .thm-light-grey:focus path, .thm-light-grey.focus path, .open > .thm-light-grey.dropdown-toggle path {\n fill: #54585A; }\n .thm-light-grey:active, .thm-light-grey.active, .open > .thm-light-grey.dropdown-toggle {\n color: #54585A;\n background-color: #bebec0;\n border-color: #bebec0;\n background-image: none; }\n .thm-light-grey:active path, .thm-light-grey.active path, .open > .thm-light-grey.dropdown-toggle path {\n fill: #54585A; }\n .thm-light-grey.disabled, .thm-light-grey.disabled:hover, .thm-light-grey.disabled:focus, .thm-light-grey.disabled.focus, .thm-light-grey.disabled:active, .thm-light-grey.disabled.active, .thm-light-grey[disabled], .thm-light-grey[disabled]:hover, .thm-light-grey[disabled]:focus, .thm-light-grey[disabled].focus, .thm-light-grey[disabled]:active, .thm-light-grey[disabled].active, fieldset[disabled] .thm-light-grey, fieldset[disabled] .thm-light-grey:hover, fieldset[disabled] .thm-light-grey:focus, fieldset[disabled] .thm-light-grey.focus, fieldset[disabled] .thm-light-grey:active, fieldset[disabled] .thm-light-grey.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-light-grey path {\n fill: #54585A; }\n\n.thm-light-grey-invert {\n color: #54585A;\n background-color: #FFFFFF;\n border-color: #D8D8D9; }\n .thm-light-grey-invert:hover, .thm-light-grey-invert:focus, .thm-light-grey-invert.focus, .open > .thm-light-grey-invert.dropdown-toggle {\n color: #54585A;\n background-color: rgba(216, 216, 217, 0.2); }\n .thm-light-grey-invert:hover path, .thm-light-grey-invert:focus path, .thm-light-grey-invert.focus path, .open > .thm-light-grey-invert.dropdown-toggle path {\n fill: #54585A; }\n .thm-light-grey-invert:active, .thm-light-grey-invert.active, .open > .thm-light-grey-invert.dropdown-toggle {\n color: #54585A;\n background-color: #bebec0;\n border-color: #bebec0;\n background-image: none; }\n .thm-light-grey-invert:active path, .thm-light-grey-invert.active path, .open > .thm-light-grey-invert.dropdown-toggle path {\n fill: #54585A; }\n .thm-light-grey-invert.disabled, .thm-light-grey-invert.disabled:hover, .thm-light-grey-invert.disabled:focus, .thm-light-grey-invert.disabled.focus, .thm-light-grey-invert.disabled:active, .thm-light-grey-invert.disabled.active, .thm-light-grey-invert[disabled], .thm-light-grey-invert[disabled]:hover, .thm-light-grey-invert[disabled]:focus, .thm-light-grey-invert[disabled].focus, .thm-light-grey-invert[disabled]:active, .thm-light-grey-invert[disabled].active, fieldset[disabled] .thm-light-grey-invert, fieldset[disabled] .thm-light-grey-invert:hover, fieldset[disabled] .thm-light-grey-invert:focus, fieldset[disabled] .thm-light-grey-invert.focus, fieldset[disabled] .thm-light-grey-invert:active, fieldset[disabled] .thm-light-grey-invert.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-light-grey-invert path {\n fill: #54585A; }\n\n.thm-none {\n color: #54585A;\n background-color: #FFFFFF;\n border-color: #FFFFFF; }\n .thm-none:hover, .thm-none:focus, .thm-none.focus, .open > .thm-none.dropdown-toggle {\n color: #54585A;\n background-color: #f2f2f2;\n border-color: #f2f2f2; }\n .thm-none:hover path, .thm-none:focus path, .thm-none.focus path, .open > .thm-none.dropdown-toggle path {\n fill: #54585A; }\n .thm-none:active, .thm-none.active, .open > .thm-none.dropdown-toggle {\n color: #54585A;\n background-color: #e6e6e6;\n border-color: #e6e6e6;\n background-image: none; }\n .thm-none:active path, .thm-none.active path, .open > .thm-none.dropdown-toggle path {\n fill: #54585A; }\n .thm-none.disabled, .thm-none.disabled:hover, .thm-none.disabled:focus, .thm-none.disabled.focus, .thm-none.disabled:active, .thm-none.disabled.active, .thm-none[disabled], .thm-none[disabled]:hover, .thm-none[disabled]:focus, .thm-none[disabled].focus, .thm-none[disabled]:active, .thm-none[disabled].active, fieldset[disabled] .thm-none, fieldset[disabled] .thm-none:hover, fieldset[disabled] .thm-none:focus, fieldset[disabled] .thm-none.focus, fieldset[disabled] .thm-none:active, fieldset[disabled] .thm-none.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-none path {\n fill: #54585A; }\n\n.thm-dark-grey {\n color: #FFFFFF;\n background-color: #7B8184;\n border-color: #7B8184; }\n .thm-dark-grey:hover, .thm-dark-grey:focus, .thm-dark-grey.focus, .open > .thm-dark-grey.dropdown-toggle {\n color: #FFFFFF;\n background-color: #6f7477;\n border-color: #6f7477; }\n .thm-dark-grey:hover path, .thm-dark-grey:focus path, .thm-dark-grey.focus path, .open > .thm-dark-grey.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-dark-grey:active, .thm-dark-grey.active, .open > .thm-dark-grey.dropdown-toggle {\n color: #FFFFFF;\n background-color: #62676a;\n border-color: #62676a;\n background-image: none; }\n .thm-dark-grey:active path, .thm-dark-grey.active path, .open > .thm-dark-grey.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-dark-grey.disabled, .thm-dark-grey.disabled:hover, .thm-dark-grey.disabled:focus, .thm-dark-grey.disabled.focus, .thm-dark-grey.disabled:active, .thm-dark-grey.disabled.active, .thm-dark-grey[disabled], .thm-dark-grey[disabled]:hover, .thm-dark-grey[disabled]:focus, .thm-dark-grey[disabled].focus, .thm-dark-grey[disabled]:active, .thm-dark-grey[disabled].active, fieldset[disabled] .thm-dark-grey, fieldset[disabled] .thm-dark-grey:hover, fieldset[disabled] .thm-dark-grey:focus, fieldset[disabled] .thm-dark-grey.focus, fieldset[disabled] .thm-dark-grey:active, fieldset[disabled] .thm-dark-grey.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-dark-grey path {\n fill: #FFFFFF; }\n\n.thm-orange {\n color: #FFFFFF;\n background-color: #FC9927;\n border-color: #FC9927; }\n .thm-orange:hover, .thm-orange:focus, .thm-orange.focus, .open > .thm-orange.dropdown-toggle {\n color: #FFFFFF;\n background-color: #fc8d0e;\n border-color: #fc8d0e; }\n .thm-orange:hover path, .thm-orange:focus path, .thm-orange.focus path, .open > .thm-orange.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-orange:active, .thm-orange.active, .open > .thm-orange.dropdown-toggle {\n color: #FFFFFF;\n background-color: #ed8003;\n border-color: #ed8003;\n background-image: none; }\n .thm-orange:active path, .thm-orange.active path, .open > .thm-orange.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-orange.disabled, .thm-orange.disabled:hover, .thm-orange.disabled:focus, .thm-orange.disabled.focus, .thm-orange.disabled:active, .thm-orange.disabled.active, .thm-orange[disabled], .thm-orange[disabled]:hover, .thm-orange[disabled]:focus, .thm-orange[disabled].focus, .thm-orange[disabled]:active, .thm-orange[disabled].active, fieldset[disabled] .thm-orange, fieldset[disabled] .thm-orange:hover, fieldset[disabled] .thm-orange:focus, fieldset[disabled] .thm-orange.focus, fieldset[disabled] .thm-orange:active, fieldset[disabled] .thm-orange.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-orange path {\n fill: #FFFFFF; }\n\n.thm-orange-invert {\n color: #FC9927;\n background-color: #FFFFFF;\n border-color: #FC9927; }\n .thm-orange-invert:hover, .thm-orange-invert:focus, .thm-orange-invert.focus, .open > .thm-orange-invert.dropdown-toggle {\n color: #FC9927;\n background-color: rgba(252, 153, 39, 0.2); }\n .thm-orange-invert:hover path, .thm-orange-invert:focus path, .thm-orange-invert.focus path, .open > .thm-orange-invert.dropdown-toggle path {\n fill: #FC9927; }\n .thm-orange-invert:active, .thm-orange-invert.active, .open > .thm-orange-invert.dropdown-toggle {\n color: #FFFFFF;\n background-color: #ed8003;\n border-color: #ed8003;\n background-image: none; }\n .thm-orange-invert:active path, .thm-orange-invert.active path, .open > .thm-orange-invert.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-orange-invert.disabled, .thm-orange-invert.disabled:hover, .thm-orange-invert.disabled:focus, .thm-orange-invert.disabled.focus, .thm-orange-invert.disabled:active, .thm-orange-invert.disabled.active, .thm-orange-invert[disabled], .thm-orange-invert[disabled]:hover, .thm-orange-invert[disabled]:focus, .thm-orange-invert[disabled].focus, .thm-orange-invert[disabled]:active, .thm-orange-invert[disabled].active, fieldset[disabled] .thm-orange-invert, fieldset[disabled] .thm-orange-invert:hover, fieldset[disabled] .thm-orange-invert:focus, fieldset[disabled] .thm-orange-invert.focus, fieldset[disabled] .thm-orange-invert:active, fieldset[disabled] .thm-orange-invert.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-orange-invert path {\n fill: #FC9927; }\n\n.thm-red {\n color: #FFFFFF;\n background-color: #E4584F;\n border-color: #E4584F; }\n .thm-red:hover, .thm-red:focus, .thm-red.focus, .open > .thm-red.dropdown-toggle {\n color: #FFFFFF;\n background-color: #e14339;\n border-color: #e14339; }\n .thm-red:hover path, .thm-red:focus path, .thm-red.focus path, .open > .thm-red.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-red:active, .thm-red.active, .open > .thm-red.dropdown-toggle {\n color: #FFFFFF;\n background-color: #dd2e23;\n border-color: #dd2e23;\n background-image: none; }\n .thm-red:active path, .thm-red.active path, .open > .thm-red.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-red.disabled, .thm-red.disabled:hover, .thm-red.disabled:focus, .thm-red.disabled.focus, .thm-red.disabled:active, .thm-red.disabled.active, .thm-red[disabled], .thm-red[disabled]:hover, .thm-red[disabled]:focus, .thm-red[disabled].focus, .thm-red[disabled]:active, .thm-red[disabled].active, fieldset[disabled] .thm-red, fieldset[disabled] .thm-red:hover, fieldset[disabled] .thm-red:focus, fieldset[disabled] .thm-red.focus, fieldset[disabled] .thm-red:active, fieldset[disabled] .thm-red.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-red path {\n fill: #FFFFFF; }\n\n.thm-red-invert {\n color: #E4584F;\n background-color: #FFFFFF;\n border-color: #E4584F; }\n .thm-red-invert:hover, .thm-red-invert:focus, .thm-red-invert.focus, .open > .thm-red-invert.dropdown-toggle {\n color: #E4584F;\n background-color: rgba(228, 88, 79, 0.2); }\n .thm-red-invert:hover path, .thm-red-invert:focus path, .thm-red-invert.focus path, .open > .thm-red-invert.dropdown-toggle path {\n fill: #E4584F; }\n .thm-red-invert:active, .thm-red-invert.active, .open > .thm-red-invert.dropdown-toggle {\n color: #FFFFFF;\n background-color: #dd2e23;\n border-color: #dd2e23;\n background-image: none; }\n .thm-red-invert:active path, .thm-red-invert.active path, .open > .thm-red-invert.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-red-invert.disabled, .thm-red-invert.disabled:hover, .thm-red-invert.disabled:focus, .thm-red-invert.disabled.focus, .thm-red-invert.disabled:active, .thm-red-invert.disabled.active, .thm-red-invert[disabled], .thm-red-invert[disabled]:hover, .thm-red-invert[disabled]:focus, .thm-red-invert[disabled].focus, .thm-red-invert[disabled]:active, .thm-red-invert[disabled].active, fieldset[disabled] .thm-red-invert, fieldset[disabled] .thm-red-invert:hover, fieldset[disabled] .thm-red-invert:focus, fieldset[disabled] .thm-red-invert.focus, fieldset[disabled] .thm-red-invert:active, fieldset[disabled] .thm-red-invert.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-red-invert path {\n fill: #E4584F; }\n\n.thm-green {\n color: #FFFFFF;\n background-color: #80C25D;\n border-color: #80C25D; }\n .thm-green:hover, .thm-green:focus, .thm-green.focus, .open > .thm-green.dropdown-toggle {\n color: #FFFFFF;\n background-color: #71bb4a;\n border-color: #71bb4a; }\n .thm-green:hover path, .thm-green:focus path, .thm-green.focus path, .open > .thm-green.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-green:active, .thm-green.active, .open > .thm-green.dropdown-toggle {\n color: #FFFFFF;\n background-color: #66ab41;\n border-color: #66ab41;\n background-image: none; }\n .thm-green:active path, .thm-green.active path, .open > .thm-green.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-green.disabled, .thm-green.disabled:hover, .thm-green.disabled:focus, .thm-green.disabled.focus, .thm-green.disabled:active, .thm-green.disabled.active, .thm-green[disabled], .thm-green[disabled]:hover, .thm-green[disabled]:focus, .thm-green[disabled].focus, .thm-green[disabled]:active, .thm-green[disabled].active, fieldset[disabled] .thm-green, fieldset[disabled] .thm-green:hover, fieldset[disabled] .thm-green:focus, fieldset[disabled] .thm-green.focus, fieldset[disabled] .thm-green:active, fieldset[disabled] .thm-green.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-green path {\n fill: #FFFFFF; }\n\n.thm-green-invert {\n color: #80C25D;\n background-color: #FFFFFF;\n border-color: #80C25D; }\n .thm-green-invert:hover, .thm-green-invert:focus, .thm-green-invert.focus, .open > .thm-green-invert.dropdown-toggle {\n color: #80C25D;\n background-color: rgba(128, 194, 93, 0.2); }\n .thm-green-invert:hover path, .thm-green-invert:focus path, .thm-green-invert.focus path, .open > .thm-green-invert.dropdown-toggle path {\n fill: #80C25D; }\n .thm-green-invert:active, .thm-green-invert.active, .open > .thm-green-invert.dropdown-toggle {\n color: #FFFFFF;\n background-color: #66ab41;\n border-color: #66ab41;\n background-image: none; }\n .thm-green-invert:active path, .thm-green-invert.active path, .open > .thm-green-invert.dropdown-toggle path {\n fill: #FFFFFF; }\n .thm-green-invert.disabled, .thm-green-invert.disabled:hover, .thm-green-invert.disabled:focus, .thm-green-invert.disabled.focus, .thm-green-invert.disabled:active, .thm-green-invert.disabled.active, .thm-green-invert[disabled], .thm-green-invert[disabled]:hover, .thm-green-invert[disabled]:focus, .thm-green-invert[disabled].focus, .thm-green-invert[disabled]:active, .thm-green-invert[disabled].active, fieldset[disabled] .thm-green-invert, fieldset[disabled] .thm-green-invert:hover, fieldset[disabled] .thm-green-invert:focus, fieldset[disabled] .thm-green-invert.focus, fieldset[disabled] .thm-green-invert:active, fieldset[disabled] .thm-green-invert.active {\n opacity: 0.6;\n filter: alpha(opacity=60); }\n .thm-green-invert path {\n fill: #80C25D; }\n\n.sz-lg {\n font-size: 14px; }\n .sz-lg .btn-content {\n padding: 13px 0px 13px 10px;\n display: inline-block;\n width: 94%; }\n .sz-lg .chevron {\n width: 14px; }\n\n.sz-md {\n font-size: 12px; }\n .sz-md .btn-content {\n padding: 10px 0px 10px 10px;\n display: inline-block;\n width: 94%; }\n .sz-md .chevron {\n width: 12px; }\n\n.sz-sm {\n font-size: 10px; }\n .sz-sm .btn-content {\n padding: 7px 0px 7px 10px;\n display: inline-block;\n width: 94%; }\n .sz-sm .btn-content .chevron {\n width: 10px; }\n\n/*.btn-clear {\n $fontColor: #54585A;\n $iconColor: #54585A;\n $borderColor: transparent;\n $backgroundColor: transparent;\n $hoverBorderColor: transparent;\n $hoverBackgroundColor: transparent;\n $activeFontColor: #54585A;\n $activeBorderColor: #CECECF;\n $activeBackgroundColor: #CECECF;\n}*/\n/*.btn-light-grey-invert {\n$fontColor: #54585A;\n$iconColor: #54585A;\n$borderColor: #D8D8D9;\n$backgroundColor: #FFFFFF;\n$hoverBorderColor: #D8D8D9;\n$hoverBackgroundColor: #F4F4F5;\n$activeFontColor: #54585A;\n$activeBorderColor: #CECECF;\n$activeBackgroundColor: #CECECF;\n}*/\n/*.btn-none {\n$fontColor: #54585A;\n$iconColor: #54585A;\n$borderColor: #FFFFFF;\n$backgroundColor: #FFFFFF;\n$hoverBorderColor: #D8D8D9;\n$hoverBackgroundColor: #F4F4F5;\n$activeFontColor: #54585A;\n$activeBorderColor: #CECECF;\n$activeBackgroundColor: #CECECF;\n}*/\n", ""]);
// exports
/***/ },
/* 6 */
/***/ function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for(var i = 0; i < this.length; i++) {
var item = this[i];
if(item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isOldIE = memoize(function() {
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0,
styleElementsInsertedAtTop = [];
module.exports = function(list, options) {
if(false) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
// By default, add <style> tags to the bottom of <head>.
if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
}
function addStylesToDom(styles, options) {
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(list) {
var styles = [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
styles.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
return styles;
}
function insertStyleElement(options, styleElement) {
var head = getHeadElement();
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
if (options.insertAt === "top") {
if(!lastStyleElementInsertedAtTop) {
head.insertBefore(styleElement, head.firstChild);
} else if(lastStyleElementInsertedAtTop.nextSibling) {
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
} else {
head.appendChild(styleElement);
}
styleElementsInsertedAtTop.push(styleElement);
} else if (options.insertAt === "bottom") {
head.appendChild(styleElement);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
}
}
function removeStyleElement(styleElement) {
styleElement.parentNode.removeChild(styleElement);
var idx = styleElementsInsertedAtTop.indexOf(styleElement);
if(idx >= 0) {
styleElementsInsertedAtTop.splice(idx, 1);
}
}
function createStyleElement(options) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
insertStyleElement(options, styleElement);
return styleElement;
}
function createLinkElement(options) {
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
insertStyleElement(options, linkElement);
return linkElement;
}
function addStyle(obj, options) {
var styleElement, update, remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement(options));
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else if(obj.sourceMap &&
typeof URL === "function" &&
typeof URL.createObjectURL === "function" &&
typeof URL.revokeObjectURL === "function" &&
typeof Blob === "function" &&
typeof btoa === "function") {
styleElement = createLinkElement(options);
update = updateLink.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
if(styleElement.href)
URL.revokeObjectURL(styleElement.href);
};
} else {
styleElement = createStyleElement(options);
update = applyToTag.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
};
}
update(obj);
return function updateStyle(newObj) {
if(newObj) {
if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
return;
update(obj = newObj);
} else {
remove();
}
};
}
var replaceText = (function () {
var textStore = [];
return function (index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
})();
function applyToSingletonTag(styleElement, index, remove, obj) {
var css = remove ? "" : obj.css;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = styleElement.childNodes;
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index]);
} else {
styleElement.appendChild(cssNode);
}
}
}
function applyToTag(styleElement, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;
if(media) {
styleElement.setAttribute("media", media)
}
if(styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while(styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}
styleElement.appendChild(document.createTextNode(css));
}
}
function updateLink(linkElement, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;
if(sourceMap) {
// http://stackoverflow.com/a/26603875
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}
var blob = new Blob([css], { type: "text/css" });
var oldSrc = linkElement.href;
linkElement.href = URL.createObjectURL(blob);
if(oldSrc)
URL.revokeObjectURL(oldSrc);
}
/***/ }
/******/ ])
});
;