examples/react-widgets/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charSet="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Redux Form - React Widgets Example</title>
    <link
      href="https://unpkg.com/redux-form-website-template/dist/bundle.css"
      media="screen, projection"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
      media="screen, projection"
      rel="stylesheet"
      type="text/css"
    />
    <meta itemprop="name" content="Redux Form" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Redux Form" />
    <meta property="og:site_name" content="Redux Form" />
    <meta
      property="og:description"
      content="The best way to manage your form state in Redux."
    />
    <meta property="og:image" content="logo.png" />
    <meta property="twitter:site" content="@erikras" />
    <meta property="twitter:creator" content="@erikras" />
    <script
      type="text/javascript"
      src="https://unpkg.com/react/umd/react.development.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/react-dom/umd/react-dom.development.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/redux/dist/redux.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/react-redux/dist/react-redux.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/redux-form/dist/redux-form.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/redux-form-website-template"
    ></script>
    <style>
      /*
      Tweaking some CSS for
      getting it work with react-widgets
    */
      form ul li:first-child {
        text-align: left;
      }

      form ul li {
        padding: 0;
        background-image: none;
        display: inline-block;
      }

      form ul li:first-child > span {
        display: inline;
        color: inherit;
        font-weight: normal;
      }

      form ul li:first-child > span:before {
        content: '';
      }

      form > div > div {
        border: none;
      }

      form > div > div > * {
        height: 50px;
      }

      form > div > div > span:before {
        display: none;
      }

      form .rw-list {
        border: none;
      }

      form .rw-popup-container {
        border: none;
      }

      form > div .rw-select > button.rw-btn-calendar {
        border: none;
        background-image: none;
        padding: 0;
        font-size: 1em;
        width: 0;
      }
      form > div .rw-datetimepicker .rw-btn {
        line-height: 0.5em;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <style type="text/css" scoped>
        .loader {
          margin: 10% auto;
          font-size: 10px;
          position: relative;
          text-indent: -9999em;
          border-top: 1.1em solid rgba(100, 100, 100, 0.2);
          border-right: 1.1em solid rgba(100, 100, 100, 0.2);
          border-bottom: 1.1em solid rgba(100, 100, 100, 0.2);
          border-left: 1.1em solid grey;
          -webkit-transform: translateZ(0);
          -ms-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-animation: load8 1.1s infinite linear;
          animation: load8 1.1s infinite linear;
        }

        .loader,
        .loader:after {
          border-radius: 50%;
          width: 10em;
          height: 10em;
        }

        @-webkit-keyframes load8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }

        @keyframes load8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
      </style>

      <div class="loader">Loading...</div>
    </div>
    <script type="text/javascript" src="dist/bundle.js"></script>
    <script>
      ;(function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r
        ;(i[r] =
          i[r] ||
          function() {
            ;(i[r].q = i[r].q || []).push(arguments)
          }),
          (i[r].l = 1 * new Date())
        ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
        a.async = 1
        a.src = g
        m.parentNode.insertBefore(a, m)
      })(
        window,
        document,
        'script',
        '//www.google-analytics.com/analytics.js',
        'ga'
      )
      ga('create', 'UA-69298417-1', 'auto')
      ga('send', 'pageview')
    </script>
  </body>
</html>