react-animation-presets/lib/components/Button.js

Welcome to the React animation presets project. This project will give an overview of reusable animations used within Oberon projects.

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _templateObject = _taggedTemplateLiteral(['\n    position: relative;\n    cursor: pointer;\n\n    padding: 1rem 2rem;\n    border: 0;\n    border-radius: 3px;\n    color: #fff;\n    background-color: #222;\n    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);\n\n    transition: color 0.3s ease-in-out, transform 0.1s ease-in-out;\n\n    outline: none;\n\n    > span {\n        position: relative;\n        z-index: 1;\n    }\n    \n    &:before {\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        transform-origin: left;\n        transform: scaleX(0);\n        background-color: #fff;\n        transition: transform 0.3s ease-in-out;\n        content: \'\';\n    }\n\n    &:hover {\n        color: #222;\n        &:before {\n            transform: scaleX(1);\n        }\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n'], ['\n    position: relative;\n    cursor: pointer;\n\n    padding: 1rem 2rem;\n    border: 0;\n    border-radius: 3px;\n    color: #fff;\n    background-color: #222;\n    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);\n\n    transition: color 0.3s ease-in-out, transform 0.1s ease-in-out;\n\n    outline: none;\n\n    > span {\n        position: relative;\n        z-index: 1;\n    }\n    \n    &:before {\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        transform-origin: left;\n        transform: scaleX(0);\n        background-color: #fff;\n        transition: transform 0.3s ease-in-out;\n        content: \'\';\n    }\n\n    &:hover {\n        color: #222;\n        &:before {\n            transform: scaleX(1);\n        }\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var ButtonContainer = _styledComponents2.default.button(_templateObject);

var Button = function Button(_ref) {
    var children = _ref.children;
    return _react2.default.createElement(
        ButtonContainer,
        null,
        _react2.default.createElement(
            'span',
            null,
            children
        )
    );
};

exports.default = Button;