<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/giTo/pen/XgdwPg?depth=everything&order=popularity&page=47&q=react&show_forks=false" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Comfortaa:400,300");
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script><script src='https://unpkg.com/react-router-dom/umd/react-router-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/2.0.1/styled-components.min.js'></script>
<script >'use strict';
var _templateObject = _taggedTemplateLiteralLoose(['\n :root {\n --basic-font-size: calc(0.9rem + (1.3 - 0.9) * ((100vw - 18.75em) / (75 - 18.75)));\n --line-height: 1.4;\n --vertical-rhytm: calc(var(--basic-font-size)*var(--line-height));\n }\n html {\n font-size: var(--basic-font-size);\n font-family: \'Comfortaa\', sans-serif;\n font-kerning: normal;\n text-rendering: geometricPrecision;\n }\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }'], ['\n :root {\n --basic-font-size: calc(0.9rem + (1.3 - 0.9) * ((100vw - 18.75em) / (75 - 18.75)));\n --line-height: 1.4;\n --vertical-rhytm: calc(var(--basic-font-size)*var(--line-height));\n }\n html {\n font-size: var(--basic-font-size);\n font-family: \'Comfortaa\', sans-serif;\n font-kerning: normal;\n text-rendering: geometricPrecision;\n }\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }']),
_templateObject2 = _taggedTemplateLiteralLoose(['\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }'], ['\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }']),
_templateObject3 = _taggedTemplateLiteralLoose(['\n from {\n transform: scale(0.3);\n }\n to {\n transform: scale(1);\n }'], ['\n from {\n transform: scale(0.3);\n }\n to {\n transform: scale(1);\n }']),
_templateObject4 = _taggedTemplateLiteralLoose(['\n width: 100vw;\n min-height: 100vh;\n background-image: linear-gradient(35deg, #C8FDFC 55%, #F88AD4);\n animation: ', ' 1s ease-out;\n display: flex;\n justify-content: center;\n align-items: center;\n'], ['\n width: 100vw;\n min-height: 100vh;\n background-image: linear-gradient(35deg, #C8FDFC 55%, #F88AD4);\n animation: ', ' 1s ease-out;\n display: flex;\n justify-content: center;\n align-items: center;\n']),
_templateObject5 = _taggedTemplateLiteralLoose(['\n width: 100%;\n font-size: 5.61em;\n font-weight: 300;\n @media(max-width: 550px) {\n font-size: 2.986em\n}'], ['\n width: 100%;\n font-size: 5.61em;\n font-weight: 300;\n @media(max-width: 550px) {\n font-size: 2.986em\n}']),
_templateObject6 = _taggedTemplateLiteralLoose(['\n display: flex\n flex-wrap: wrap;\n animation: ', ' 0.5s linear,\n ', ' 0.5s linear;\n'], ['\n display: flex\n flex-wrap: wrap;\n animation: ', ' 0.5s linear,\n ', ' 0.5s linear;\n']),
_templateObject7 = _taggedTemplateLiteralLoose(['\n padding-left: 10px; \n list-style: none;\n'], ['\n padding-left: 10px; \n list-style: none;\n']),
_templateObject8 = _taggedTemplateLiteralLoose(['\n color: black;\n opacity: 0.65;\n text-decoration: none;\n font-weight: 300;\n transition: opacity 0.22s ease-out;\n &:hover {\n opacity: 1;\n }\n &.', ' {\n color: #F88AD4;\n opacity: 0.55;\n }'], ['\n color: black;\n opacity: 0.65;\n text-decoration: none;\n font-weight: 300;\n transition: opacity 0.22s ease-out;\n &:hover {\n opacity: 1;\n }\n &.', ' {\n color: #F88AD4;\n opacity: 0.55;\n }']);
function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
var injectGlobal = styled.injectGlobal;
var keyframes = styled.keyframes;
var styled = styled.default;
var _ReactRouterDOM = ReactRouterDOM;
var HashRouter = _ReactRouterDOM.HashRouter;
var NavLink = _ReactRouterDOM.NavLink;
var Route = _ReactRouterDOM.Route;
//global styles
injectGlobal(_templateObject);
//animations
var show = keyframes(_templateObject2);
var scale = keyframes(_templateObject3);
// styled components
var ColorWrapper = styled.div(_templateObject4, show);
var Title = styled.h1(_templateObject5);
var Header = styled.header(_templateObject6, scale, show);
var List = styled.ul(_templateObject7);
// styled active Link
var activeClassName = 'is-active';
var StyledLink = styled(NavLink).attrs({
activeClassName: activeClassName
})(_templateObject8, activeClassName);
var LinkList = function LinkList() {
return React.createElement(
List,
null,
React.createElement(
'li',
null,
React.createElement(
StyledLink,
{ exact: true, to: '/', activeClassName: activeClassName },
'Home'
)
),
React.createElement(
'li',
null,
React.createElement(
StyledLink,
{ to: '/route-one', activeClassName: activeClassName },
'Route One'
)
),
React.createElement(
'li',
null,
React.createElement(
StyledLink,
{ to: '/route-two', activeClassName: activeClassName },
'Route Two'
)
),
React.createElement(
'li',
null,
React.createElement(
StyledLink,
{ to: '/route-three', activeClassName: activeClassName },
'Route Three'
)
)
);
};
var Home = function Home() {
return React.createElement(
Header,
null,
React.createElement(
Title,
null,
'React Router'
),
React.createElement(LinkList, null)
);
};
// function for proper formatting of Rout's title string
var format = function format(str) {
var replacement = { '/': '', '-': ' ' };
return str.replace(/\/|-/g, function (m) {
return replacement[m];
}).replace(/\b./g, function (m) {
return m.toUpperCase();
});
};
var Rout = function Rout(_ref) {
var match = _ref.match;
return React.createElement(
Header,
null,
React.createElement(
Title,
null,
format(match.path)
),
React.createElement(LinkList, null)
);
};
var App = function App() {
return React.createElement(
HashRouter,
null,
React.createElement(
ColorWrapper,
null,
React.createElement(Route, { exact: true, path: '/', component: Home }),
React.createElement(Route, { path: '/route-one', component: Rout }),
React.createElement(Route, { path: '/route-two', component: Rout }),
React.createElement(Route, { path: '/route-three', component: Rout })
)
);
};
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
//# sourceURL=pen.js
</script>
</body></html>
