react-burgers-classname
Version:
fork of: [https://react-burgers.netlify.com/](https://react-burgers.netlify.com/) with added support for own className
81 lines (54 loc) • 6.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _style = require('styled-jsx/style');
var _style2 = _interopRequireDefault(_style);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _base = require('../base');
var _base2 = _interopRequireDefault(_base);
var _defaultProps = require('../default-props');
var _defaultProps2 = _interopRequireDefault(_defaultProps);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var PerspectiveXReverse = function (_React$Component) {
(0, _inherits3.default)(PerspectiveXReverse, _React$Component);
function PerspectiveXReverse() {
(0, _classCallCheck3.default)(this, PerspectiveXReverse);
return (0, _possibleConstructorReturn3.default)(this, (PerspectiveXReverse.__proto__ || Object.getPrototypeOf(PerspectiveXReverse)).apply(this, arguments));
}
(0, _createClass3.default)(PerspectiveXReverse, [{
key: 'render',
value: function render() {
var _props = this.props,
width = _props.width,
lineHeight = _props.lineHeight,
lineSpacing = _props.lineSpacing;
var offset = lineHeight + lineSpacing;
return _react2.default.createElement(
_base2.default,
(0, _extends3.default)({ typeClassName: 'BurgerPerspectiveXReverse' }, this.props),
_react2.default.createElement(_style2.default, {
styleId: '125601623',
css: '.BurgerPerspectiveXReverse .BurgerBox{-webkit-perspective:' + width * 2 + 'px;-moz-perspective:' + width * 2 + 'px;-ms-perspective:' + width * 2 + 'px;perspective:' + width * 2 + 'px;}.BurgerPerspectiveXReverse .BurgerInner{-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.645,0.045,0.355,1), background-color 0s 0.1s cubic-bezier(0.645,0.045,0.355,1);-webkit-transition:transform 0.15s cubic-bezier(0.645,0.045,0.355,1), background-color 0s 0.1s cubic-bezier(0.645,0.045,0.355,1);transition:transform 0.15s cubic-bezier(0.645,0.045,0.355,1), background-color 0s 0.1s cubic-bezier(0.645,0.045,0.355,1);}.BurgerPerspectiveXReverse .BurgerInner:before,.BurgerPerspectiveXReverse .BurgerInner:after{-webkit-transition:-webkit-transform 0s 0.1s cubic-bezier(0.645,0.045,0.355,1);-webkit-transition:transform 0s 0.1s cubic-bezier(0.645,0.045,0.355,1);transition:transform 0s 0.1s cubic-bezier(0.645,0.045,0.355,1);}.BurgerPerspectiveXReverse.BurgerActive .BurgerInner{background-color:transparent;-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);}.BurgerPerspectiveXReverse.BurgerActive .BurgerInner:before{-webkit-transform:translate3d(0,' + offset + 'px,0) rotate(45deg);-ms-transform:translate3d(0,' + offset + 'px,0) rotate(45deg);transform:translate3d(0,' + offset + 'px,0) rotate(45deg);}.BurgerPerspectiveXReverse.BurgerActive .BurgerInner:after{-webkit-transform:translate3d(0,' + offset * -1 + 'px,0) rotate(-45deg);-ms-transform:translate3d(0,' + offset * -1 + 'px,0) rotate(-45deg);transform:translate3d(0,' + offset * -1 + 'px,0) rotate(-45deg);}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy90eXBlcy9wZXJzcGVjdGl2ZS14LXJldmVyc2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXVCLEFBR21ELEFBSXNCLEFBSUUsQUFHckMsQUFJOEMsQUFHQyw2QkFOakQsNkZBQzVCLG1FQVpELHdCQVFDLGVBT0MsR0FHQSw0SkFkRiIsImZpbGUiOiIuLi8uLi9zcmMvdHlwZXMvcGVyc3BlY3RpdmUteC1yZXZlcnNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgQmFzZSBmcm9tICcuLi9iYXNlJ1xuaW1wb3J0IGRlZmF1bHRQcm9wcyBmcm9tICcuLi9kZWZhdWx0LXByb3BzJ1xuXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBQZXJzcGVjdGl2ZVhSZXZlcnNlIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcblx0cmVuZGVyKCkge1xuXHRcdGxldCB7XG5cdFx0XHR3aWR0aCxcblx0XHRcdGxpbmVIZWlnaHQsXG5cdFx0XHRsaW5lU3BhY2luZyxcblx0XHR9ID0gdGhpcy5wcm9wc1xuXHRcdGxldCBvZmZzZXQgPSBsaW5lSGVpZ2h0ICsgbGluZVNwYWNpbmdcblx0XHRyZXR1cm4gKFxuXHRcdFx0PEJhc2UgdHlwZUNsYXNzTmFtZT0nQnVyZ2VyUGVyc3BlY3RpdmVYUmV2ZXJzZScgey4uLnRoaXMucHJvcHN9PlxuXHRcdFx0XHQ8c3R5bGUganN4IGdsb2JhbD57YFxuXHRcdFx0XHRcdC5CdXJnZXJQZXJzcGVjdGl2ZVhSZXZlcnNle1xuXHRcdFx0XHRcdFx0LkJ1cmdlckJveHtcblx0XHRcdFx0XHRcdFx0cGVyc3BlY3RpdmU6ICR7d2lkdGggKiAyfXB4O1xuXHRcdFx0XHRcdFx0fVxuXG5cdFx0XHRcdFx0XHQuQnVyZ2VySW5uZXJ7XG5cdFx0XHRcdFx0XHRcdHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjE1cyBjdWJpYy1iZXppZXIoMC42NDUsIDAuMDQ1LCAwLjM1NSwgMSksXG5cdFx0XHRcdFx0XHRcdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvciAwcyAwLjFzIGN1YmljLWJlemllcigwLjY0NSwgMC4wNDUsIDAuMzU1LCAxKTtcblxuXHRcdFx0XHRcdFx0XHQmOmJlZm9yZSxcblx0XHRcdFx0XHRcdFx0JjphZnRlciB7XG5cdFx0XHRcdFx0XHRcdFx0dHJhbnNpdGlvbjogdHJhbnNmb3JtIDBzIDAuMXMgY3ViaWMtYmV6aWVyKDAuNjQ1LCAwLjA0NSwgMC4zNTUsIDEpO1xuXHRcdFx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0XHR9XG5cblx0XHRcdFx0XHRcdCYuQnVyZ2VyQWN0aXZle1xuXHRcdFx0XHRcdFx0XHQuQnVyZ2VySW5uZXIge1xuXHRcdFx0XHRcdFx0XHRcdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHRcdFx0XHRcdFx0XHRcdHRyYW5zZm9ybTogcm90YXRlWSgtMTgwZGVnKTtcblxuXHRcdFx0XHRcdFx0XHRcdCY6YmVmb3JlIHtcblx0XHRcdFx0XHRcdFx0XHRcdHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgJHtvZmZzZXR9cHgsIDApIHJvdGF0ZSg0NWRlZyk7XG5cdFx0XHRcdFx0XHRcdFx0fVxuXHRcdFx0XHRcdFx0XHRcdCY6YWZ0ZXIge1xuXHRcdFx0XHRcdFx0XHRcdFx0dHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAke29mZnNldCAqIC0xfXB4LCAwKSByb3RhdGUoLTQ1ZGVnKTtcblx0XHRcdFx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHR9XG5cdFx0XHRcdGB9PC9zdHlsZT5cblx0XHRcdDwvQmFzZT5cblx0XHQpXG5cdH1cbn1cblxuUGVyc3BlY3RpdmVYUmV2ZXJzZS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHMiXX0= */\n/*@ sourceURL=../../src/types/perspective-x-reverse.js */',
dynamic: [width * 2, offset, offset * -1]
})
);
}
}]);
return PerspectiveXReverse;
}(_react2.default.Component);
exports.default = PerspectiveXReverse;
PerspectiveXReverse.defaultProps = _defaultProps2.default;
module.exports = exports['default'];
//# sourceMappingURL=perspective-x-reverse.js.map