CSS Modules demo

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>JSPM Demo</title>
  </head>
  <body>
    <main>Loading...</main>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="http://css-modules-compiled.surge.sh/build.min.js"></script>
    <script>
      System.config({
        "map": {
          "css": "npm:jspm-loader-css-modules@0.1.2"
        }
      })
      System.import('~/main')
    </script>
  </body>
</html>

// Import the CSS Module
import styles from "./main.css!"

// Check your browser console as you edit files
// to see what is actually being generated
console.log(styles)


let main = document.querySelector('main')

// Replace the main element with this markup
main.innerHTML = `
  <div class="${styles.h1}">CSS Modules!</div>
  <div class="${styles.examples}">
    <button class="${styles.normal}">Submit</button>
    <button class="${styles.disabled}">Submit</button>
    <button class="${styles.error}">Submit</button>
    <button class="${styles.inProgress}">Processing...</button>
  </div>
  <div class="${styles.p}">
    Check your console to see the JS objects being exported, notice how
    everything has been localised (even the keyframe name!), so we 
    never have to worry about names in the rest of the project.
  </div>
  <div class="${styles.p}">
    Take a look at colours.css, layout.css, typography.css and see if
    this approach might make sense on your projects.
  </div>
  <div class="${styles.p}">
    Then check out the 
    <a href="http://github.com/css-modules/css-modules" target="_blank">
      CSS Modules project
    </a>
    and leave your feedback!
  </div>
`

export default {}

:global(body) {
  margin: 0;
  padding: 1rem;
}

.h1 {
  composes: centered biggest from "./typography.css";
  composes: heading-bottom from "./layout.css";
}

.examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  composes: heading-bottom from "./layout.css";
}

.buttons {
  font-size: 0.8rem;
  padding: 0.5rem 1rem 0.45rem;
  composes: no-bg from "./colors.css";
  border: 1px solid;
  border-radius: 0.25rem;
  min-width: 9em;
  margin: 0.25rem;
}

.normal, .disabled {
  composes: buttons;
  composes: blue on-faint-blue from "./colors.css";
}

.normal {
  cursor: pointer;
}

.disabled {
  opacity: 0.5;
}

.error {
  composes: buttons;
  color: hsla(0, 61%, 51%, 0.5);
}

.inProgress {
  composes: buttons;
  color: hsl(210, 61%, 31%);
  background: linear-gradient(-45deg, hsl(0, 100%, 100%), hsl(0, 100%, 100%) 25%, hsl(221, 100%, 97%) 25%, hsl(221, 100%, 97%) 50%, hsl(0, 100%, 100%) 50%, hsl(0, 100%, 100%) 75%, hsl(221, 100%, 97%) 75%, hsl(221, 100%, 97%));
  animation: shiftBackgroundLeft4rem 2s linear infinite;
  background-size: 8rem 8rem;
  background-position: 0 0;
}

@keyframes shiftBackgroundLeft4rem {
  to {
    background-position: 8rem 0;
  }
}

.p {
  composes: para-bottom from "./layout.css";
  composes: sans lh15 from "./typography.css";
}

.biggest {
  font-size: 3rem;
}

.sans {
  font-family: Avenir Next, Helvetica Neue, sans-serif;
}

.centered {
  text-align: center;
}

.lh15 {
  line-height: 1.5;
}

.no-bg {
  background: none;
}

.blue {
  color: hsl(210, 61%, 31%);
}

.on-faint-blue {
  background-color: hsla(210, 61%, 51%, 0.1);
}

.red {
  
}

.para-bottom {
  margin-bottom: 0.5rem;
}

.heading-bottom {
  margin-bottom: 1.5rem;
}