mumuki-styles 1.13.1 → 1.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d53ec6c296f82ffcbcf5e8b852247f6dc24dde60
-  data.tar.gz: 4271981b4eeec5a044b995627dee0bbeee4b418c
+  metadata.gz: c78a16aab5f73e7228d2913d2a3fc74df693929d
+  data.tar.gz: f0b13effa905aec8b6dccb960b1667591e981341
 SHA512:
-  metadata.gz: 32f9ca8c080e22d5e7a3f17c6f612e87ec5aa78551aa9feed83bbab3b83a82f428df5cb6f99d4a9e95870bb209c09404e511ff5935daadef041526e005e166a0
-  data.tar.gz: 545c2203f2fd8a646bca38b36d5a2aa8cc055d2ef023bf114c5d2402e0f4dfbae9177aedc6a506c70b422d4a8e91e6b5433486f88451f6bba59be26e5dc33f73
+  metadata.gz: 9d4f6a26f4df6afd1b67bdc29baa5236be69393022906c10ac61e7a15aa42e53bafcff40b4e56c2635c9546d1f8645f8ae74447467deb9a111a0e744b84e14c8
+  data.tar.gz: 4c77855b665fb366940a1367b4413159a2808a8d68adde3e18b52746b90eb02ab080d1cac225b3cb75630463cc2c6ace0de38981adb67c2c0ebcab371ae78207

data/README.md

@@ -90,6 +90,83 @@
 
 With jQuery you can use function `$('.mu-file-browser').renderFileBrowser()`;
 
+```html
+<div
+  class='mu-erd'
+  data-entities='[
+    {
+      "name": "Entity_1",
+      "columns": [
+        {
+          "name": "ent1_id",
+          "type": "Integer",
+          "pk": true
+        },
+        {
+          "name": "ent2_id",
+          "type": "Integer",
+          "pk": true,
+          "fk": {
+            "to": { "entity": "Entity_2", "column": "ent2_id" },
+            "type": "one_to_one"
+          }
+        },
+        {
+          "name": "ent1_description",
+          "type": "Varchar"
+        }
+      ]
+    },
+    {
+      "name": "Entity_2",
+      "columns": [
+        {
+          "name": "ent2_id",
+          "type": "Integer",
+          "pk": true
+        }
+      ]
+    },
+    {
+      "name": "Entity_3",
+      "columns": [
+        {
+          "name": "ent3_id",
+          "type": "Integer",
+          "pk": true
+        },
+        {
+          "name": "ent2_id",
+          "type": "Integer",
+          "pk": true,
+          "fk": {
+            "to": { "entity": "Entity_2", "column": "ent2_id" },
+            "type": "many_to_one"
+          }
+        },
+        {
+          "name": "ent1_description",
+          "type": "Varchar"
+        }
+      ]
+    }
+  ]'>
+</div>
+```
+
+#### mu-erd attributes
+* `data-entities`: (`Array<Object>`) Every entity object of the array should have:
+  * `name`: (`String`) Entity name.
+  * `columns`: (`Array<Object>`) Every column object of the array should have:
+    * `name`: (`String`) Column field,
+    * `type`: (`String`) Column type (Char, Number, Integer, Varchar),
+    * `pk`: (`Boolean` - Optional) True if column es PK or part of one,
+    * `fk`: (`Object` - Optional) with properties:
+      * `to`: (`Object`) { entity: (Foreign entity), column: (Foreign column name) }
+      * `type`: (`String`) one\_to\_one | one\_to\_many | many\_to\_one | many\_to\_many
+
+With jQuery you can use function `$('.mu-erd').renderERD()`;
+
 
 ## Installing
 

data/app/assets/javascripts/mumuki-styles.js

@@ -12597,7 +12597,6 @@ if (typeof jQuery === 'undefined') {
 
 }(jQuery);
 
-
 (function (window, document) {
   'use strict';
 
@@ -12622,146 +12621,352 @@ if (typeof jQuery === 'undefined') {
     }
   }
 
-  mumuki.load(function () {
+})(window, document);
+
+
+mumuki.load(function () {
 
-    var descriptorType = {
-      file: {
-        open: function (state, filename) {
-          if (state.onFileOpen) {
-            var onFileOpen = eval(state.onFileOpen);
-            if (typeof onFileOpen === 'function') {
-              onFileOpen(filename, lastFolder(state)[filename]);
-            } else {
-              throw new Error('"data-on-file-open" should be a function');
-            }
+  var descriptorType = {
+    file: {
+      open: function (state, filename) {
+        if (state.onFileOpen) {
+          var onFileOpen = eval(state.onFileOpen);
+          if (typeof onFileOpen === 'function') {
+            onFileOpen(filename, lastFolder(state)[filename]);
+          } else {
+            throw new Error('"data-on-file-open" should be a function');
           }
         }
-      },
-      folder: {
-        open: function (state, foldername) {
-          if (state.canBrowse) {
-            var folder = lastFolder(state)[foldername];
-            state.breadcrumb.push({name: foldername, files: folder});
-            createExplorerFrom(state, folder);
-          }
+      }
+    },
+    folder: {
+      open: function (state, foldername) {
+        if (state.canBrowse) {
+          var folder = lastFolder(state)[foldername];
+          state.breadcrumb.push({name: foldername, files: folder});
+          createExplorerFrom(state, folder);
         }
       }
     }
+  }
 
-    function back(state) {
-      if (state.breadcrumb.length > 1) {
-        state.breadcrumb.pop();
-        createExplorerFrom(state, lastFolder(state));
-      }
+  function back(state) {
+    if (state.breadcrumb.length > 1) {
+      state.breadcrumb.pop();
+      createExplorerFrom(state, lastFolder(state));
     }
+  }
 
-    function getPath(state) {
-      return state.breadcrumb
-        .map(function (it) {
-          return it.name;
-        })
-        .join('/') || '/';
-    }
+  function getPath(state) {
+    return state.breadcrumb
+      .map(function (it) {
+        return it.name;
+      })
+      .join('/') || '/';
+  }
 
-    function lastFolder(state) {
-      return state.breadcrumb[state.breadcrumb.length - 1].files;
-    }
+  function lastFolder(state) {
+    return state.breadcrumb[state.breadcrumb.length - 1].files;
+  }
 
-    function sortByTypeAndName(obj, key1, key2) {
-      if (typeof obj[key1] === typeof obj[key2]) {
-        return key1.localeCompare(key2);
-      } else if (obj[key1] instanceof Object && obj[key2] instanceof String) {
-        return 1;
-      } else {
-        return -1;
-      }
+  function sortByTypeAndName(obj, key1, key2) {
+    if (typeof obj[key1] === typeof obj[key2]) {
+      return key1.localeCompare(key2);
+    } else if (obj[key1] instanceof Object && obj[key2] instanceof String) {
+      return 1;
+    } else {
+      return -1;
     }
+  }
 
-    function sortedFilesKeys(files) {
-      return Object.keys(files || {}).sort(function (a, b) {
-        return sortByTypeAndName(files, a, b);
-      });
-    }
+  function sortedFilesKeys(files) {
+    return Object.keys(files || {}).sort(function (a, b) {
+      return sortByTypeAndName(files, a, b);
+    });
+  }
 
-    function getListItem(files, key, state) {
-      return $([
-        '<li>',
-        '  <i class="' + fileBrowserClassType(files[key]) + '"></i>',
-        '  <span>' + key + '</span>',
-        '</li>'].join(''))
-      .click(function () {
-        descriptorType[fileBrowserClassType(files[key])].open(state, key);
-      });
-    }
+  function getListItem(files, key, state) {
+    return $([
+      '<li>',
+      '  <i class="' + fileBrowserClassType(files[key]) + '"></i>',
+      '  <span>' + key + '</span>',
+      '</li>'].join(''))
+    .click(function () {
+      descriptorType[fileBrowserClassType(files[key])].open(state, key);
+    });
+  }
 
-    function fileBrowserClassType(file) {
-      return file instanceof Object ? 'folder' : 'file';
-    }
+  function fileBrowserClassType(file) {
+    return file instanceof Object ? 'folder' : 'file';
+  }
 
-    function appendFiles($ul, files, state) {
-      sortedFilesKeys(files).forEach(function (key) {
-        $ul.append(getListItem(files, key, state));
-      });
-    }
+  function appendFiles($ul, files, state) {
+    sortedFilesKeys(files).forEach(function (key) {
+      $ul.append(getListItem(files, key, state));
+    });
+  }
 
-    function createExplorerFrom(state, files) {
-      state.container.empty();
-      var $ul = $('<ul></ul>');
-      appendFiles($ul, files, state);
-      state.container.append($ul);
-      state.header.find('.mu-file-browser-path').val(getPath(state));
-    }
+  function createExplorerFrom(state, files) {
+    state.container.empty();
+    var $ul = $('<ul></ul>');
+    appendFiles($ul, files, state);
+    state.container.append($ul);
+    state.header.find('.mu-file-browser-path').val(getPath(state));
+  }
 
-    function getExplorerHeader(canBrowse) {
-      return $([
-        '<header>',
-           canBrowse ? '<i class="fa fa-fw fa-arrow-left"></i>' : '',
-        '  <input class="mu-file-browser-path" type="text" readonly>',
-        '</header>'
-      ].join(''))
-    }
+  function getExplorerHeader(canBrowse) {
+    return $([
+      '<header>',
+          canBrowse ? '<i class="fa fa-fw fa-arrow-left"></i>' : '',
+      '  <input class="mu-file-browser-path" type="text" readonly>',
+      '</header>'
+    ].join(''))
+  }
 
-    $.fn.renderFileBrowser = function () {
-      var self = this;
-      self.empty();
-      self.each(function (i) {
-        var $explorer = $(self[i]);
-        var files = $explorer.data('file');
-        var canBrowse = $explorer.data('can-browse');
-        var onFileOpen = $explorer.data('on-file-open');
+  $.fn.renderFileBrowser = function () {
+    var self = this;
+    self.empty();
+    self.each(function (i) {
+      var $explorer = $(self[i]);
+      var files = $explorer.data('file');
+      var canBrowse = $explorer.data('can-browse');
+      var onFileOpen = $explorer.data('on-file-open');
 
-        var $header = getExplorerHeader(canBrowse);
-        var $main = $('<main></main>');
+      var $header = getExplorerHeader(canBrowse);
+      var $main = $('<main></main>');
 
-        var ROOT_FOLDER_NAME = '/home/mumuki';
+      var ROOT_FOLDER_NAME = '/home/mumuki';
 
 
-        if (files instanceof Object) {
-          var state = {
-            container: $main,
-            header: $header,
-            canBrowse: !!canBrowse,
-            onFileOpen: onFileOpen,
-            breadcrumb: [{name: ROOT_FOLDER_NAME, files: files}]
-          };
+      if (files instanceof Object) {
+        var state = {
+          container: $main,
+          header: $header,
+          canBrowse: !!canBrowse,
+          onFileOpen: onFileOpen,
+          breadcrumb: [{name: ROOT_FOLDER_NAME, files: files}]
+        };
 
-          $explorer.append($header);
-          $explorer.append($main);
+        $explorer.append($header);
+        $explorer.append($main);
 
-          $header.find('i').click(function () {
-            back(state)
-          });
+        $header.find('i').click(function () {
+          back(state)
+        });
 
-          createExplorerFrom(state, files);
+        createExplorerFrom(state, files);
 
-        }
-      });
-      return self;
+      }
+    });
+    return self;
+  }
+
+  $('.mu-file-browser').renderFileBrowser();
+
+});
+
+mumuki.load(function () {
+
+  var C = 10;
+  var BORDER = 4;
+
+  var availableDirections = {
+    up: function ($entity, $column) {
+      var x1 = $entity.from.position().left + $entity.from.width() + BORDER;
+      var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
+      var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
+      var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
+      return { x1: x1, x2: x2, y1: y1, y2: y2, mi: Math.max(x1, x2) + C * 2, dx1: C, dx2: C };
+    },
+    down: function ($entity, $column) {
+      var x1 = $entity.from.position().left + $entity.from.width() + BORDER;
+      var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
+      var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
+      var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
+      return { x1: x1, x2: x2, y1: y1, y2: y2, mi: Math.max(x1, x2) + C * 2, dx1: C, dx2: C };
+    },
+    left: function ($entity, $column) {
+      var x1 = $entity.from.position().left;
+      var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
+      var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
+      var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
+      return { x1: x1, x2: x2, y1: y1, y2: y2, mi: (x1 + x2) / 2, dx1: -C, dx2: C };
+    },
+    right: function ($entity, $column) {
+      var x1 = $entity.from.position().left + $entity.from.width() + BORDER;
+      var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
+      var x2 = $entity.to.position().left;
+      var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
+      return { x1: x1, x2: x2, y1: y1, y2: y2, mi: (x1 + x2) / 2, dx1: C, dx2: -C };
+    },
+    up_left: function ($entity, $column) {
+      var x1 = $entity.from.position().left;
+      var y1 = $column.from.position().top + $column.from.height() / 2 + 5;
+      var x2 = $entity.to.position().left + $entity.to.width() + BORDER;
+      var y2 = $column.to.position().top + $column.to.height() / 2 + 5;
+      return { x1: x1, x2: x2, y1: y1, y2: y2, mi: (x1 + x2) / 2, dx1: -C, dx2: C };
+    },
+    up_right: function ($entity, $column) {
+      return;
+    },
+    down_left: function ($entity, $column) {
+      return;
+    },
+    down_right: function ($entity, $column) {
+      return;
+    },
+  }
+
+  var connectors = {
+    one_to_one: function (points) {
+      return [
+        svgLine(points.x1 + points.dx1, points.x1 + points.dx1, points.y1 - C, points.y1 + C), // | from
+        svgLine(points.x2 + points.dx2, points.x2 + points.dx2, points.y2 - C, points.y2 + C), // | to
+      ].join('');
+    },
+    many_to_one: function (points) {
+      return [
+        svgLine(points.x1, points.x1 + points.dx1, points.y1 - C, points.y1),  //                 \ from  many
+        svgLine(points.x1, points.x1 + points.dx1, points.y1 + C, points.y1),  //                 / from  many
+        svgLine(points.x2 + points.dx2, points.x2 + points.dx2, points.y2 - C, points.y2 + C), // | to one
+      ].join('');
+    },
+    one_to_many: function (points) {
+      return [
+        svgLine(points.x1 + points.dx1, points.x1 + points.dx1, points.y1 - C, points.y1 + C),  // | from one
+        svgLine(points.x2, points.x2 + points.dx2, points.y2 - C, points.y2),  //                  \ to  many
+        svgLine(points.x2, points.x2 + points.dx2, points.y2 + C, points.y2),  //                  / to  many
+      ].join('');
+    },
+    many_to_many: function (points) {
+      return [
+        svgLine(points.x1, points.x1 + points.dx1, points.y1 - C, points.y1),  //                  \ from  many
+        svgLine(points.x1, points.x1 + points.dx1, points.y1 + C, points.y1),  //                  / from  many
+        svgLine(points.x2, points.x2 + points.dx2, points.y2 - C, points.y2),  //                  \ to  many
+        svgLine(points.x2, points.x2 + points.dx2, points.y2 + C, points.y2),  //                  / to  many
+      ].join('');
     }
+  }
+
+  function entityID(entity) {
+    return 'mu-erd-' + entity.toLowerCase().replace(/[_]/g, '-');
+  }
+
+  function columnID(entity, column) {
+    return entityID(entity) + '-' + column.toLowerCase().replace(/[_]/g, '-');
+  }
 
-    $('.mu-file-browser').renderFileBrowser();
+  function keyIconFor(column, field) {
+    return !!column[field] ? '<i class="fa fa-fw fa-key mu-erd-' + field + '"></i>' : '';
+  }
 
+  function generateEntityColumns(entity) {
+    var columns = entity.columns || [];
+    var html = '';
+    columns.forEach(function (column) {
+      html += [
+        '<li id="', columnID(entity.name, column.name), '" class="mu-erd-entity-column">',
+        '  <span class="mu-erd-entity-column-name">',
+              keyIconFor(column, 'pk'),
+              keyIconFor(column, 'fk'),
+              '<span>', column.name, '</span>',
+        '  </span>',
+        '  <span class="mu-erd-entity-column-type">', column.type, '</span>',
+        '</li>'
+      ].join('');
+    })
+    return html;
+  }
+
+  function appendEntities($diagram, entities) {
+    entities.forEach(function (entity) {
+      var $entity = $([
+        '<div id="', entityID(entity.name), '" class="mu-erd-entity">',
+        '  <div class="mu-erd-entity-name">',
+              entity.name,
+        '  </div>',
+        '  <ul class="mu-erd-entity-columns">',
+              generateEntityColumns(entity),
+        '  </ul>',
+        '</div>',
+      ].join(''));
+      $diagram.append($entity);
+    });
+  }
+
+  function drawColumnFK(entity, column) {
+    return drawFK(entity, column, column.fk);
+  }
+
+  function getDirection($entityFrom, $entityTo) {
+    var direction = ''
+    direction += $entityFrom.position().top > ($entityTo.position().top + $entityTo.height()) ? 'down' : '';
+    direction += $entityTo.position().top > ($entityFrom.position().top + $entityFrom.height()) ? 'up' : '';
+    direction += ' ';
+    direction += $entityFrom.position().left > ($entityTo.position().left + $entityTo.width()) ? 'left' : '';
+    direction += $entityTo.position().left > ($entityFrom.position().left + $entityFrom.width()) ? 'right' : '';
+    direction = direction.trim();
+    return direction.replace(' ', '_');
+  }
+
+  function drawFK(entity, column, fk) {
+    if (!fk) return '';
+    var $entity = {
+      from: $('#' + entityID(entity.name)),
+      to: $('#' + entityID(fk.to.entity))
+    }
+    var $column = {
+      from: $('#' + columnID(entity.name, column.name)),
+      to: $('#' + columnID(fk.to.entity, fk.to.column))
+    }
+    var direction = getDirection($entity.from, $entity.to);
+    var points = getPointsFrom(direction, $entity, $column);
+    return [
+      svgLine(points.x1, points.mi, points.y1, points.y1),
+      svgLine(points.mi, points.mi, points.y1, points.y2),
+      svgLine(points.mi, points.x2, points.y2, points.y2),
+    ].join('') + connectors[fk.type](points);
+  }
+
+  function getPointsFrom(direction, $entity, $column) {
+    return availableDirections[direction]($entity, $column);
+  }
+
+  function drawConnectorLines(entity) {
+    var columns = entity.columns || [];
+    return columns.map(drawColumnFK.bind(this, entity)).join('');
+  }
+
+  function getSVGFor(entity) {
+    return ['<svg>', drawConnectorLines(entity), '</svg>'].join('');
+  }
+
+  function appendConnectors($diagram, entities) {
+    entities.forEach(function (entity) {
+      var $svg = $(getSVGFor(entity));
+      $diagram.append($svg);
+    });
+  }
+
+  function svgLine(x1, x2, y1 , y2) {
+    return ['<line x1="', x1, '" x2="', x2, '" y1="', y1, '" y2="', y2, '" stroke="black" stroke-width="1"/>'].join('');
+  }
+
+  $.fn.renderERD = function () {
+    var self = this;
+    self.each(function (i) {
+      var $diagram = $(self[i]);
+      var entities = $diagram.data('entities');
+      appendEntities($diagram, entities);
+      appendConnectors($diagram, entities);
+    });
+    return self;
+  }
+
+  window.addEventListener('resize', function () {
+    $('.mu-erd').empty().renderERD();
   });
 
-})(window, document);
+  $('.mu-erd').renderERD();
 
+});

data/app/assets/stylesheets/_mu-erd.scss

@@ -0,0 +1,71 @@
+$mu-erd-border: 2px solid $mu-color-dark-separator;
+
+.mu-erd {
+  position: relative;
+  width: 100%;
+  padding: 15px;
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  svg {
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+}
+
+.mu-erd-entity {
+  z-index: 1;
+  margin: 20px 0;
+  width: 250px;
+  min-width: 250px;
+  border: $mu-erd-border;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+}
+
+.mu-erd-entity-name {
+  padding: 5px 10px;
+  list-style: none;
+  text-align: center;
+  border-bottom: $mu-erd-border;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  background-color: $mu-color-separator;
+  margin: 0;
+}
+
+.mu-erd-entity-columns {
+  list-style: none;
+  padding: 5px 10px;
+  margin: 0;
+  background-color: white;
+  .mu-erd-entity-column {
+    display: flex;
+    padding: 5px 0;
+    flex-flow: row;
+    justify-content: space-between;
+    border-bottom: 1px dashed $mu-color-dark-separator;
+    &:last-child {
+      border-bottom: none;
+    }
+    .mu-erd-entity-column-name {
+      text-align: left;
+      span {
+        margin-left: 5px;
+      }
+      .mu-erd-pk { color: rgb(196, 173, 44) }
+      .mu-erd-fk { color: rgb(184, 184, 184) }
+      .mu-erd-pk,
+      .mu-erd-fk {
+        font-size: 75%;
+      };
+    }
+    .mu-erd-entity-column-type {
+      text-align: right;
+    }
+  }
+}

data/app/assets/stylesheets/mumuki-styles.css

@@ -9442,6 +9442,67 @@ pre code {
     display: block;
     margin: 2em; }
 
+.mu-erd {
+  position: relative;
+  width: 100%;
+  padding: 15px;
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center; }
+  .mu-erd svg {
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute; }
+
+.mu-erd-entity {
+  z-index: 1;
+  margin: 20px 0;
+  width: 250px;
+  min-width: 250px;
+  border: 2px solid #cfd9db;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px; }
+
+.mu-erd-entity-name {
+  padding: 5px 10px;
+  list-style: none;
+  text-align: center;
+  border-bottom: 2px solid #cfd9db;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  background-color: #ecf0f1;
+  margin: 0; }
+
+.mu-erd-entity-columns {
+  list-style: none;
+  padding: 5px 10px;
+  margin: 0;
+  background-color: white; }
+  .mu-erd-entity-columns .mu-erd-entity-column {
+    display: flex;
+    padding: 5px 0;
+    flex-flow: row;
+    justify-content: space-between;
+    border-bottom: 1px dashed #cfd9db; }
+    .mu-erd-entity-columns .mu-erd-entity-column:last-child {
+      border-bottom: none; }
+    .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name {
+      text-align: left; }
+      .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name span {
+        margin-left: 5px; }
+      .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-pk {
+        color: #c4ad2c; }
+      .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-fk {
+        color: #b8b8b8; }
+      .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-pk,
+      .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-name .mu-erd-fk {
+        font-size: 75%; }
+    .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-type {
+      text-align: right; }
+
 .mu-file-browser {
   width: 100%;
   position: relative; }

data/app/assets/stylesheets/mumuki-styles.scss

@@ -8,4 +8,5 @@
 @import 'navbar';
 @import 'styles';
 @import 'browser';
+@import 'mu-erd';
 @import 'mu-file-browser';

data/lib/mumuki/styles/version.rb

@@ -1,5 +1,5 @@
 module Mumuki
   module Styles
-    VERSION = "1.13.1"
+    VERSION = "1.14.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mumuki-styles
 version: !ruby/object:Gem::Version
-  version: 1.13.1
+  version: 1.14.0
 platform: ruby
 authors:
 - Federico Scarpa
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-14 00:00:00.000000000 Z
+date: 2017-12-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -94,6 +94,7 @@ files:
 - app/assets/stylesheets/_hovers.scss
 - app/assets/stylesheets/_mixines.scss
 - app/assets/stylesheets/_modules.scss
+- app/assets/stylesheets/_mu-erd.scss
 - app/assets/stylesheets/_mu-file-browser.scss
 - app/assets/stylesheets/_navbar.scss
 - app/assets/stylesheets/_styles.scss