@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
74 lines (73 loc) • 2.7 kB
JavaScript
;
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var aphrodite_1 = require("aphrodite");
exports.defaultCardStyle = {
card: {
backgroundColor: '#3c3c3c',
color: '#ececec',
padding: '10px',
margin: '1em',
borderRadius: '2px'
},
levelOne: {
boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)'
},
levelTwo: {
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)'
},
levelThree: {
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)'
},
levelFour: {
boxShadow: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)'
},
levelFive: {
boxShadow: '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)'
}
};
var CardLevel;
(function (CardLevel) {
CardLevel[CardLevel["One"] = 0] = "One";
CardLevel[CardLevel["Two"] = 1] = "Two";
CardLevel[CardLevel["Three"] = 2] = "Three";
CardLevel[CardLevel["Four"] = 3] = "Four";
CardLevel[CardLevel["Five"] = 4] = "Five";
})(CardLevel = exports.CardLevel || (exports.CardLevel = {}));
exports.Card = function (props) {
var ss = aphrodite_1.StyleSheet.create(exports.defaultCardStyle);
var custom = aphrodite_1.StyleSheet.create(props.styles || {});
var level = props.level || CardLevel.One;
var levelCSS = ss.levelOne;
var customLevelCSS = custom.levelOne;
switch (level) {
case CardLevel.Two:
levelCSS = ss.levelTwo;
customLevelCSS = custom.levelTwo;
break;
case CardLevel.Three:
levelCSS = ss.levelThree;
customLevelCSS = custom.levelThree;
break;
case CardLevel.Four:
levelCSS = ss.levelFour;
customLevelCSS = custom.levelFour;
break;
case CardLevel.Five:
levelCSS = ss.levelFive;
customLevelCSS = custom.levelFive;
break;
}
return React.createElement("div", { className: aphrodite_1.css(ss.card, levelCSS, custom.card, customLevelCSS) }, props.children);
};
exports.default = exports.Card;