style(css): Drop LESS dependency (#537)

Brocfile.js

@@ -2,10 +2,10 @@
 
 var broccoli = require('broccoli');
 var Watcher = require('broccoli-sane-watcher');
+var Funnel = require('broccoli-funnel');
 var builder = require('broccoli-multi-builder');
 var mergeTrees = require('broccoli-merge-trees');
 var testTreeBuilder = require('broccoli-test-builder');
-var styles = require('./broccoli/styles');
 var jquery = require('./broccoli/jquery');
 var injectLiveReload = require('broccoli-inject-livereload');
 var LiveReload = require('tiny-lr');
@@ -16,6 +16,11 @@ var vendoredModules = [
   {name: 'mobiledoc-html-renderer'},
   {name: 'mobiledoc-text-renderer'}
 ];
+
+var cssFiles = new Funnel('src/css', {
+  destDir: 'css'
+});
+
 var packageName = require('./package.json').name;
 
 var buildOptions = {
@@ -58,7 +63,7 @@ module.exports = mergeTrees([
   replaceVersion(builder.build('amd', buildOptions)),
   replaceVersion(builder.build('global', buildOptions)),
   replaceVersion(builder.build('commonjs', buildOptions)),
-  styles(),
+  cssFiles,
   injectLiveReload(testTree),
   demoTree()
 ]);

package.json

@@ -46,7 +46,6 @@
     "broccoli-cli": "^1.0.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-inject-livereload": "^0.2.0",
-    "broccoli-less-single": "^0.6.2",
     "broccoli-merge-trees": "^1.0.0",
     "broccoli-multi-builder": "^0.2.8",
     "broccoli-sane-watcher": "^1.1.4",

src/css/mobiledoc-kit.css

@@ -0,0 +1,130 @@
+/**
+ * Editor
+ */
+
+.__mobiledoc-editor {
+  font-family: 'Lora', Georgia, serif;
+  margin: 1em 0;
+  color: #454545;
+  font-size: 1.2em;
+  line-height: 1.6em;
+  position: relative;
+  min-height: 1em;
+}
+
+.__mobiledoc-editor:focus {
+  outline: none;
+}
+
+.__mobiledoc-editor > * {
+  position: relative;
+}
+
+.__mobiledoc-editor.__has-no-content:after {
+  content: attr(data-placeholder);
+  color: #bbb;
+  cursor: text;
+  position: absolute;
+  top: 0;
+}
+
+.__mobiledoc-editor a {
+  color: #0b8bff;
+  white-space: nowrap;
+}
+
+.__mobiledoc-editor h1,
+.__mobiledoc-editor h2,
+.__mobiledoc-editor h3,
+.__mobiledoc-editor h4,
+.__mobiledoc-editor h5,
+.__mobiledoc-editor h6 {
+  font-family: 'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.__mobiledoc-editor blockquote {
+  border-left: 4px solid #0b8bff;
+  margin: 1em 0 1em -1.2em;
+  padding-left: 1.05em;
+  color: #a0a0a0;
+}
+
+.__mobiledoc-editor img {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.__mobiledoc-editor div,
+.__mobiledoc-editor iframe {
+  max-width: 100%;
+}
+
+/**
+ * Cards
+ */
+
+.__mobiledoc-card {
+  display: inline-block;
+}
+
+/**
+ * Tooltips
+ */
+
+@-webkit-keyframes fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@keyframes fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.__mobiledoc-tooltip {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.7em;
+  white-space: nowrap;
+  position: absolute;
+  background-color: rgba(43,43,43,0.9);
+  border-radius: 3px;
+  line-height: 1em;
+  padding: 0.7em 0.9em;
+  color: #FFF;
+  -webkit-animation: fade-in 0.2s;
+          animation: fade-in 0.2s;
+}
+
+.__mobiledoc-tooltip:before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
+  border-bottom: 0.4em solid rgba(43,43,43,0.9);
+  top: -0.4em;
+  margin-left: -0.4em;
+}
+
+/* help keeps mouseover state when moving from link to tooltip */
+.__mobiledoc-tooltip:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -0.4em;
+  height: 0.4em;
+}
+
+.__mobiledoc-tooltip a {
+  color: #FFF;
+  text-decoration: none;
+}
+
+.__mobiledoc-tooltip a:hover {
+  text-decoration: underline;
+}