UNPKG

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
'use strict'; 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 PerspectiveYReverse = function (_React$Component) { (0, _inherits3.default)(PerspectiveYReverse, _React$Component); function PerspectiveYReverse() { (0, _classCallCheck3.default)(this, PerspectiveYReverse); return (0, _possibleConstructorReturn3.default)(this, (PerspectiveYReverse.__proto__ || Object.getPrototypeOf(PerspectiveYReverse)).apply(this, arguments)); } (0, _createClass3.default)(PerspectiveYReverse, [{ 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: 'BurgerPerspectiveYReverse' }, this.props), _react2.default.createElement(_style2.default, { styleId: '1026865609', css: '.BurgerPerspectiveYReverse .BurgerBox{-webkit-perspective:' + width * 2 + 'px;-moz-perspective:' + width * 2 + 'px;-ms-perspective:' + width * 2 + 'px;perspective:' + width * 2 + 'px;}.BurgerPerspectiveYReverse .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);}.BurgerPerspectiveYReverse .BurgerInner:before,.BurgerPerspectiveYReverse .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);}.BurgerPerspectiveYReverse.BurgerActive .BurgerInner{background-color:transparent;-webkit-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);}.BurgerPerspectiveYReverse.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);}.BurgerPerspectiveYReverse.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy90eXBlcy9wZXJzcGVjdGl2ZS15LXJldmVyc2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXVCLEFBR21ELEFBSXNCLEFBSUUsQUFHckMsQUFJOEMsQUFHQyw2QkFObEQsMEZBQzNCLHNFQVpELHdCQVFDLGVBT0MsR0FHQSw0SkFkRiIsImZpbGUiOiIuLi8uLi9zcmMvdHlwZXMvcGVyc3BlY3RpdmUteS1yZXZlcnNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgQmFzZSBmcm9tICcuLi9iYXNlJ1xuaW1wb3J0IGRlZmF1bHRQcm9wcyBmcm9tICcuLi9kZWZhdWx0LXByb3BzJ1xuXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBQZXJzcGVjdGl2ZVlSZXZlcnNlIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50e1xuXHRyZW5kZXIoKSB7XG5cdFx0bGV0IHtcblx0XHRcdHdpZHRoLFxuXHRcdFx0bGluZUhlaWdodCxcblx0XHRcdGxpbmVTcGFjaW5nLFxuXHRcdH0gPSB0aGlzLnByb3BzXG5cdFx0bGV0IG9mZnNldCA9IGxpbmVIZWlnaHQgKyBsaW5lU3BhY2luZ1xuXHRcdHJldHVybiAoXG5cdFx0XHQ8QmFzZSB0eXBlQ2xhc3NOYW1lPSdCdXJnZXJQZXJzcGVjdGl2ZVlSZXZlcnNlJyB7Li4udGhpcy5wcm9wc30+XG5cdFx0XHRcdDxzdHlsZSBqc3ggZ2xvYmFsPntgXG5cdFx0XHRcdFx0LkJ1cmdlclBlcnNwZWN0aXZlWVJldmVyc2V7XG5cdFx0XHRcdFx0XHQuQnVyZ2VyQm94IHtcblx0XHRcdFx0XHRcdFx0cGVyc3BlY3RpdmU6ICR7d2lkdGggKiAyfXB4O1xuXHRcdFx0XHRcdFx0fVxuXG5cdFx0XHRcdFx0XHQuQnVyZ2VySW5uZXIge1xuXHRcdFx0XHRcdFx0XHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4xNXMgY3ViaWMtYmV6aWVyKDAuNjQ1LCAwLjA0NSwgMC4zNTUsIDEpLFxuXHRcdFx0XHRcdFx0XHRcdFx0XHRcdGJhY2tncm91bmQtY29sb3IgMHMgMC4xcyBjdWJpYy1iZXppZXIoMC42NDUsIDAuMDQ1LCAwLjM1NSwgMSk7XG5cblx0XHRcdFx0XHRcdFx0JjpiZWZvcmUsXG5cdFx0XHRcdFx0XHRcdCY6YWZ0ZXIge1xuXHRcdFx0XHRcdFx0XHRcdHRyYW5zaXRpb246IHRyYW5zZm9ybSAwcyAwLjFzIGN1YmljLWJlemllcigwLjY0NSwgMC4wNDUsIDAuMzU1LCAxKTtcblx0XHRcdFx0XHRcdFx0fVxuXHRcdFx0XHRcdFx0fVxuXG5cdFx0XHRcdFx0XHQmLkJ1cmdlckFjdGl2ZSB7XG5cdFx0XHRcdFx0XHRcdC5CdXJnZXJJbm5lciB7XG5cdFx0XHRcdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdFx0XHRcdFx0XHRcdFx0dHJhbnNmb3JtOiByb3RhdGVYKDE4MGRlZyk7XG5cblx0XHRcdFx0XHRcdFx0XHQmOmJlZm9yZSB7XG5cdFx0XHRcdFx0XHRcdFx0XHR0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsICR7b2Zmc2V0fXB4LCAwKSByb3RhdGUoNDVkZWcpO1xuXHRcdFx0XHRcdFx0XHRcdH1cblxuXHRcdFx0XHRcdFx0XHRcdCY6YWZ0ZXIge1xuXHRcdFx0XHRcdFx0XHRcdFx0dHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAke29mZnNldCAqIC0xfXB4LCAwKSByb3RhdGUoLTQ1ZGVnKTtcblx0XHRcdFx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHR9XG5cdFx0XHRcdGB9PC9zdHlsZT5cblx0XHRcdDwvQmFzZT5cblx0XHQpXG5cdH1cbn1cblxuUGVyc3BlY3RpdmVZUmV2ZXJzZS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHMiXX0= */\n/*@ sourceURL=../../src/types/perspective-y-reverse.js */', dynamic: [width * 2, offset, offset * -1] }) ); } }]); return PerspectiveYReverse; }(_react2.default.Component); exports.default = PerspectiveYReverse; PerspectiveYReverse.defaultProps = _defaultProps2.default; module.exports = exports['default']; //# sourceMappingURL=perspective-y-reverse.js.map