mumuki-styles 1.16.2 → 1.17.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 8895fba6fca0267ef8101b5a35e77f3fef2e49a9
-  data.tar.gz: 8153cb208d85ab08d34d1c02a7114e800b95aa9e
+SHA256:
+  metadata.gz: bf4d40df028bbd2a6f34627fd471b812c57b3cc5fee1c4610254dc4e04dcbaec
+  data.tar.gz: 23346ebf50b6e05b9397f48e3b1c346c9d72af269b770227bc071cc5dcbb3bd4
 SHA512:
-  metadata.gz: 3e93d28bc6ff9515ef458ea3af2515241c6421c704ce5f3f9e2d89850ac42f29a481897c6d2dda458f573f8cb15f7f4061bd56ce3a1f5824a0dfd865309a9e40
-  data.tar.gz: 0ed4e0fc1d7006f7faa6ab2892b242439c11d299456cce92aec557a6de2e5b94ffa5bd3136bc235363ff8ee4ff2a8ce3b3c6a8dd914023982300799e7d24de24
+  metadata.gz: 5a96af0aaf151e25f16b9f9d2b208a05d976e086e002b956ab72cde19f3ed866882e06aa26aa67ed895b349df6e5c5183bdcf544b4de6d49e2dd59d59ebc9962
+  data.tar.gz: 147f90bab71a53497046ba6f623538ee9ec998d4640eba466f898d73728d88db55a3d8dee78d7dea3fe42d1655b234eba5a4c80adb524aad5b6b02d5ee7c8531

data/README.md

@@ -1,284 +1,38 @@
-# mumuki-styles
+# Mumuki Styles
 
-## Components
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/mumuki/styles`. To experiment with that code, run `bin/console` for an interactive prompt.
 
-### mu-file-browser
+## Installation
 
-![image](https://user-images.githubusercontent.com/1039278/34626522-c15fc584-f23b-11e7-81a4-dd5403a2e6f0.png)
-
-```html
-  <div class="mu-file-browser"
-    data-can-browse="true"
-    data-on-file-open="console.log"
-    data-file='{
-      "foo": {
-        "saraza": {
-          "sultano.rb": "sultano"
-        },
-        "sultano.rb": "sultano",
-        "mengano.js": "mengano"
-      },
-      "bar": {
-        "archivo con un nombre largo.doc": "un doc"
-      },
-      "baz": {
-        "mengano.js": "mengano"
-      },
-      "saraza.txt": "saraza",
-      "sultano.rb": "sultano",
-      "mengano.js": "mengano",
-      "archivo con un nombre largo.doc": "un doc"
-    }'>
-  </div>
-```
-
-#### mu-file-browser attributes
-
-* `data-can-browse`: (Boolean) user can enter into a folder (default `false`).
-* `data-on-file-open`: (Function) receives 2 params, file name and file content. If no function given user can't open files.
-* `data-file`: (Hash) hash `keys` are the names of the resources and hash `values` are theirs contents (sub-hash for a folder and a string for a file).
-
-With jQuery you can manually render this component using `$('.mu-file-browser').renderFileBrowser()`;
-
-
-### mu-erd
-
-![image](https://user-images.githubusercontent.com/1039278/34626539-df245f30-f23b-11e7-9b21-1456c63105c9.png)
-
-```html
-<div class='mu-erd'
-  data-entities='{
-    "Entity_1": {
-      "ent1_id": {
-        "type": "Integer",
-        "pk": true
-      },
-      "ent2_id": {
-        "type": "Integer",
-        "pk": true,
-        "fk": {
-          "to": { "entity": "Entity_2", "column": "ent2_id" },
-          "type": "one_to_one"
-        }
-      },
-      "ent1_description": {
-        "type": "Varchar"
-      }
-    },
-    "Entity_2": {
-      "ent2_id": {
-        "type": "Integer",
-        "pk": true
-      }
-    },
-    "Entity_3": {
-      "ent3_id": {
-        "type": "Integer",
-        "pk": true
-      },
-      "ent2_id": {
-        "type": "Integer",
-        "pk": true,
-        "fk": {
-          "to": { "entity": "Entity_2", "column": "ent2_id" },
-          "type": "many_to_one"
-        }
-      },
-      "ent1_description": {
-        "type": "Varchar"
-      }
-    }
-  }'>
-</div>
-```
-
-#### mu-erd attributes
-
-* `data-entities`: (`Hash<EntityName, EntityColumns>`)
-  * `EntityName`: (`String`).
-  * `EntityColumns`: (`Hash<ColumnName, ColumnMetadata>`)
-    * `ColumnName`: (`String`)
-    * `ColumnMetadata`: (`Hash`)
-      * `type`: (`String`) Column type (Char, Number, Integer, Varchar, etc),
-      * `pk`: (`Boolean` - Optional) True if column es PK or part of one,
-      * `fk`: (`Hash` - 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 manually render this component using `$('.mu-erd').renderERD()`;
-
-### mu-browser
-
-![image](https://user-images.githubusercontent.com/1039278/34626588-1829fbb4-f23c-11e7-89ec-540a23a41240.png)
-
-```html
-  <div class='mu-browser'
-    data-url='https://mi-sitio.mumuki.io'
-    data-title='Mumuki - Aprender a programar'
-    data-favicon='https://mumuki.io/logo-alt.png'
-    data-srcdoc='<p>Hello Mumuki Browser</p>'>
-  </div>
-```
-
-#### mu-browser attributes
-
-* `data-srcdoc`: HTML of the page to show
-* `data-url`: (Optional) URL of the page (default: `https://mumuki.io`)
-* `data-title`: (Optional) Title of the browser's tab (default: `Mumuki`)
-* `data-favicon`: (Optional) Favicon of the brower's tab (default: `https://mumuki.io/logo-alt.png`)
-
-With jQuery you can manually render this component using `$('.mu-browser').renderWebBrowser()`;
-
-
-### mu-sql-table
-
-![image](https://user-images.githubusercontent.com/1039278/34626563-f531ec3e-f23b-11e7-8534-fd6855fea0b1.png)
-
-```html
-  <div class='mu-sql-table'
-    data-name='Personas'
-    data-columns='[{"name": "id_persona", "pk": true}, "Nombre", "Apellido", {"name": "Pareja", "fk": true}]'
-    data-rows='[
-      [1, "Homero", "Simpson", 2],
-      [2, "Marge", "Bouvier", 1],
-      [3, "Moe", "Szyslak", null]
-    ]'>
-  </div>
-```
-
-#### mu-sql-table attributes
-
-* `data-name`: (String) Entity name
-* `data-columns`: (String|Hash):
-  * if `String`: Column name
-  * if `Hash`: you need the next keys
-    * `name`: (String) Column name
-    * `pk`: (Bool) if column is PK or part of one
-    * `fk`: (Bool) if column is FK or part of one
-* `data-rows`: (Array<Array<Value>>)
-
-With jQuery you can manually render this component using `$('.mu-sql-table').renderSqlTable()`;
-
-### mu-sql-table-rendered
-
-![image](https://user-images.githubusercontent.com/1039278/34626563-f531ec3e-f23b-11e7-8534-fd6855fea0b1.png)
-
-```html
-  <div class="mu-sql-table-rendered">
-    <header>Personas</header>
-    <table>
-      <thead>
-        <tr>
-          <th class="mu-sql-table-pk">id_persona</th>
-          <th>Nombre</th>
-          <th>Apellido</th>
-          <th class="mu-sql-table-fk">Pareja</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Homero</td>
-          <td>Simpson</td>
-          <td>2</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>Marge</td>
-          <td>Bouvier</td>
-          <td>1</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Moe</td>
-          <td>Szyslak</td>
-          <td>NULL</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-```
-
-#### mu-sql-table-rendered attributes
-
-You don't need any data attribute - just follow this convention:
-
-* `div` (with `mu-sql-table-rendered` class)
-  * `div > header`
-  * `div > table`
-    * `div > table > thead`
-      * `div > table > thead > tr > th` (th tag can have `mu-sql-table-pk` and/or `mu-sql-table-fk`)
-    * `div > table > tbody`
-      * `div > table > tbody > tr > td`
-
-With jQuery you can manually render this component using `$('.mu-sql-table-rendered').renderPrerenderedSqlTable()`;
-
-
-## Installing
-
-You usually add `mumuki-styles` to an empty project. First you need to add it to your Gemfile:
+Add this line to your application's Gemfile:
 
 ```ruby
 gem 'mumuki-styles'
 ```
 
-or, if you want latest version:
-
-```ruby
-gem 'mumuki-styles', github: 'mumuki/mumuki-styles', branch: 'master'
-```
-
-And then bundle install
-
-### How to use it in with rails-assets?
-
-1. Add the following code into `Gemfile`
-
-  ```ruby
-  gem 'mumuki-styles'
-  ```
-
-1. Install it running
-
-  ```bash
-  bundle install
-  ```
-
-1. Add the following code into `app/assets/javascripts/application.js`
-
-  ```js
-  //= require mumuki-styles
-  ```
+And then execute:
 
-1. Add the following code into `app/assets/stylesheets/application.scss`
+    $ bundle
 
-  ```scss
-  @import "mumuki-styles";
-  ```
-  **Note**: If you do not use SCSS, add `*= require mumuki-styles` to `app/assets/stylesheets/application.css` file
+Or install it yourself as:
 
+    $ gem install mumuki-styles
 
-### How to use it with bower?
+## Usage
 
-1. Run `bower install --save mumuki-styles`
-1. Add the css and js files to `index.html`
+TODO: Write usage instructions here
 
-  ```html
-  <link rel="stylesheet" href="bower_compoments/mumuki-styles/dist/css/mumuki-styles.css">
-  <script src="bower_compoments/mumuki-styles/dist/javascript/mumuki-styles.js"></script>
-  ```
-1. if you are using SCSS, simply import the scss file
+## Development
 
-  ```scss
-  @import "bower_compoments/mumuki-styles/dist/scss/mumuki-styles.scss"
-  ```
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
-## Ruby Version
+## Contributing
 
-`mumuki-styles` works with Ruby 2.3.1
+Bug reports and pull requests are welcome on GitHub at https://github.com/mumuki/mumuki-styles.
 
 
 ## License
 
-This project is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -1,2 +1,24 @@
 require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
 task :default => :spec
+
+namespace :wrapper do
+  desc 'Wrap styles assets into this gem'
+  task wrap: :clean do
+    cp_r '../dist/css', 'app/assets/stylesheets'
+    cp_r '../dist/scss', 'app/assets/stylesheets'
+    mv 'app/assets/stylesheets/scss/vendor', 'app/assets/stylesheets'
+    cp_r '../dist/javascripts', 'app/assets'
+    cp_r '../dist/fonts', 'app/assets'
+  end
+
+  task :clean do
+    rm_rf 'app'
+    mkdir_p 'app/assets/stylesheets'
+    mkdir_p 'app/assets/javascripts'
+    mkdir_p 'app/assets/fonts'
+  end
+end

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

@@ -13195,10 +13195,113 @@ mumuki.load(function () {
 
 });
 
+mumuki.load(function () {
+
+  var language = {
+    es: {
+      copy: 'Copiar',
+      copied: 'Copiado'
+    },
+    en: {
+      copy: 'Copy',
+      copied: 'Copied'
+    },
+    pt: {
+      copy: 'Copiar',
+      copied: 'Copiado'
+    },
+  }
+
+  function getCopiedText() {
+    var lang = (mumuki.locale || navigator.language || navigator.userLanguage || 'en').split('-')[0];
+    return language[lang];
+  }
+
+  function copyToClipboard(text) {
+    var $temp = $("<textarea>");
+    $("body").append($temp);
+    $temp.val(text).select();
+    document.execCommand("copy");
+    $temp.remove();
+  }
+
+  function getEditor() {
+    return mumuki.page && mumuki.page.editors && mumuki.page.editors[0];
+  }
+
+  function hasCodeMirrorEditor() {
+    let editor = getEditor();
+    return editor && editor instanceof window.CodeMirror;
+  }
+
+  function pasteInCodeMirror(text) {
+    var doc = getEditor().getDoc();
+    var cursor = doc.getCursor();
+    doc.replaceRange(text, cursor);
+  }
+
+  function pasteInTextArea(text) {
+    var $editor = $('.mu-paste-target');
+    var cursorPosStart = $editor.prop('selectionStart');
+    var cursorPosEnd = $editor.prop('selectionEnd');
+    var v = $editor.val() || '';
+    var textBefore = v.substring(0,  cursorPosStart);
+    var textAfter  = v.substring(cursorPosEnd, v.length);
+    $editor.val(textBefore + text + textAfter);
+  }
+
+  function pasteInEditor(text) {
+    if (hasCodeMirrorEditor()) {
+      pasteInCodeMirror(text);
+    } else {
+      pasteInTextArea(text);
+    }
+  }
+
+  function changeTextAndColor($clipboard) {
+    var $span = $clipboard.find('span');
+    $clipboard.addClass('clicked');
+    $span.text(getCopiedText().copied);
+    setTimeout(function () {
+      $span.text(getCopiedText().copy);
+      $clipboard.removeClass('clicked')
+    }, 2.5 * 1000);
+  }
+
+  $.fn.renderCopyPaste = function () {
+    var self = this;
+    self.each(function (i) {
+      var $pre = $(self[i]);
+      var $code = $pre.children('code');
+      if ($code.length > 0) {
+        $pre.children('span').remove();
+        var $clipboard = $('<span>', {
+          class: 'mu-clipboard',
+          html: '<i class="fa fa-fw fa-clipboard"></i> <span>' + getCopiedText().copy + '</span>',
+          click: function () {
+            copyToClipboard($code.text());
+            pasteInEditor($code.text());
+            changeTextAndColor($clipboard);
+          }
+        });
+        $pre.append($clipboard);
+      }
+    });
+
+    return self;
+  }
+
+  mumuki.resize(function () {
+    $('pre').renderCopyPaste();
+  });
+
+});
+
 mumuki.load(function () {
 
   $.fn.renderMuComponents = function () {
     this.find('.mu-erd').renderERD();
+    this.find('pre').renderCopyPaste();
     this.find('.mu-browser').renderWebBrowser();
     this.find('.mu-sql-table').renderSqlTable();
     this.find('.mu-file-browser').renderFileBrowser();

data/app/assets/stylesheets/{mumuki-styles.css → css/mumuki-styles.css}

@@ -1058,7 +1058,7 @@ th {
 
 html {
   font-size: 10px;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
 
 body {
   font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -2359,49 +2359,49 @@ input[type="search"] {
   input[type="datetime-local"].form-control,
   input[type="month"].form-control {
     line-height: 54px; }
-  input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control,
-  .input-group-sm > input[type="date"].input-group-addon,
-  .input-group-sm > .input-group-btn > input[type="date"].btn,
+  input[type="date"].input-sm, .input-group-sm > input.form-control[type="date"],
+  .input-group-sm > input.input-group-addon[type="date"],
+  .input-group-sm > .input-group-btn > input.btn[type="date"],
   .input-group-sm input[type="date"],
   input[type="time"].input-sm,
-  .input-group-sm > input[type="time"].form-control,
-  .input-group-sm > input[type="time"].input-group-addon,
-  .input-group-sm > .input-group-btn > input[type="time"].btn,
+  .input-group-sm > input.form-control[type="time"],
+  .input-group-sm > input.input-group-addon[type="time"],
+  .input-group-sm > .input-group-btn > input.btn[type="time"],
   .input-group-sm
   input[type="time"],
   input[type="datetime-local"].input-sm,
-  .input-group-sm > input[type="datetime-local"].form-control,
-  .input-group-sm > input[type="datetime-local"].input-group-addon,
-  .input-group-sm > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-sm > input.form-control[type="datetime-local"],
+  .input-group-sm > input.input-group-addon[type="datetime-local"],
+  .input-group-sm > .input-group-btn > input.btn[type="datetime-local"],
   .input-group-sm
   input[type="datetime-local"],
   input[type="month"].input-sm,
-  .input-group-sm > input[type="month"].form-control,
-  .input-group-sm > input[type="month"].input-group-addon,
-  .input-group-sm > .input-group-btn > input[type="month"].btn,
+  .input-group-sm > input.form-control[type="month"],
+  .input-group-sm > input.input-group-addon[type="month"],
+  .input-group-sm > .input-group-btn > input.btn[type="month"],
   .input-group-sm
   input[type="month"] {
     line-height: 38px; }
-  input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control,
-  .input-group-lg > input[type="date"].input-group-addon,
-  .input-group-lg > .input-group-btn > input[type="date"].btn,
+  input[type="date"].input-lg, .input-group-lg > input.form-control[type="date"],
+  .input-group-lg > input.input-group-addon[type="date"],
+  .input-group-lg > .input-group-btn > input.btn[type="date"],
   .input-group-lg input[type="date"],
   input[type="time"].input-lg,
-  .input-group-lg > input[type="time"].form-control,
-  .input-group-lg > input[type="time"].input-group-addon,
-  .input-group-lg > .input-group-btn > input[type="time"].btn,
+  .input-group-lg > input.form-control[type="time"],
+  .input-group-lg > input.input-group-addon[type="time"],
+  .input-group-lg > .input-group-btn > input.btn[type="time"],
   .input-group-lg
   input[type="time"],
   input[type="datetime-local"].input-lg,
-  .input-group-lg > input[type="datetime-local"].form-control,
-  .input-group-lg > input[type="datetime-local"].input-group-addon,
-  .input-group-lg > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-lg > input.form-control[type="datetime-local"],
+  .input-group-lg > input.input-group-addon[type="datetime-local"],
+  .input-group-lg > .input-group-btn > input.btn[type="datetime-local"],
   .input-group-lg
   input[type="datetime-local"],
   input[type="month"].input-lg,
-  .input-group-lg > input[type="month"].form-control,
-  .input-group-lg > input[type="month"].input-group-addon,
-  .input-group-lg > .input-group-btn > input[type="month"].btn,
+  .input-group-lg > input.form-control[type="month"],
+  .input-group-lg > input.input-group-addon[type="month"],
+  .input-group-lg > .input-group-btn > input.btn[type="month"],
   .input-group-lg
   input[type="month"] {
     line-height: 70px; } }
@@ -2504,9 +2504,9 @@ textarea.input-sm, .input-group-sm > textarea.form-control,
 .input-group-sm > textarea.input-group-addon,
 .input-group-sm > .input-group-btn > textarea.btn,
 select[multiple].input-sm,
-.input-group-sm > select[multiple].form-control,
-.input-group-sm > select[multiple].input-group-addon,
-.input-group-sm > .input-group-btn > select[multiple].btn {
+.input-group-sm > select.form-control[multiple],
+.input-group-sm > select.input-group-addon[multiple],
+.input-group-sm > .input-group-btn > select.btn[multiple] {
   height: auto; }
 
 .form-group-sm .form-control {
@@ -2550,9 +2550,9 @@ textarea.input-lg, .input-group-lg > textarea.form-control,
 .input-group-lg > textarea.input-group-addon,
 .input-group-lg > .input-group-btn > textarea.btn,
 select[multiple].input-lg,
-.input-group-lg > select[multiple].form-control,
-.input-group-lg > select[multiple].input-group-addon,
-.input-group-lg > .input-group-btn > select[multiple].btn {
+.input-group-lg > select.form-control[multiple],
+.input-group-lg > select.input-group-addon[multiple],
+.input-group-lg > .input-group-btn > select.btn[multiple] {
   height: auto; }
 
 .form-group-lg .form-control {
@@ -2594,18 +2594,14 @@ select[multiple].input-lg,
   text-align: center;
   pointer-events: none; }
 
-.input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
-.input-group-lg > .input-group-addon + .form-control-feedback,
-.input-group-lg > .input-group-btn > .btn + .form-control-feedback,
+.input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback, .input-group-lg > .input-group-addon + .form-control-feedback, .input-group-lg > .input-group-btn > .btn + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
   width: 70px;
   height: 70px;
   line-height: 70px; }
 
-.input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
-.input-group-sm > .input-group-addon + .form-control-feedback,
-.input-group-sm > .input-group-btn > .btn + .form-control-feedback,
+.input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback, .input-group-sm > .input-group-addon + .form-control-feedback, .input-group-sm > .input-group-btn > .btn + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
   width: 38px;
@@ -3634,16 +3630,20 @@ tbody.collapse.in {
     margin-right: 0;
     border-radius: 4px; }
   .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
-  .nav-tabs-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:hover,
-  .nav-tabs-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:focus {
+  .nav-tabs-justified > .active > a:hover,
+  .nav-tabs.nav-justified > .active > a:hover,
+  .nav-tabs-justified > .active > a:focus,
+  .nav-tabs.nav-justified > .active > a:focus {
     border: 1px solid #ecf0f1; }
   @media (min-width: 768px) {
     .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
       border-bottom: 1px solid #ecf0f1;
       border-radius: 4px 4px 0 0; }
     .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
-    .nav-tabs-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:hover,
-    .nav-tabs-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:focus {
+    .nav-tabs-justified > .active > a:hover,
+    .nav-tabs.nav-justified > .active > a:hover,
+    .nav-tabs-justified > .active > a:focus,
+    .nav-tabs.nav-justified > .active > a:focus {
       border-bottom-color: #fff; } }
 
 .tab-content > .tab-pane {
@@ -5495,7 +5495,7 @@ button.close {
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  background-color: transparent; }
+  background-color: rgba(0, 0, 0, 0); }
   .carousel-control.left {
     background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
     background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
@@ -5564,7 +5564,7 @@ button.close {
     border-radius: 10px;
     cursor: pointer;
     background-color: #000 \9;
-    background-color: transparent; }
+    background-color: rgba(0, 0, 0, 0); }
   .carousel-indicators .active {
     margin: 0;
     width: 12px;
@@ -6003,9 +6003,7 @@ input {
 .has-success .input-group-addon {
   border-color: #5cb85c; }
 
-.nav .open > a,
-.nav .open > a:hover,
-.nav .open > a:focus {
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
   border-color: transparent; }
 
 .pager a,
@@ -9774,3 +9772,34 @@ pre code {
           .mu-file-browser main ul li:hover span {
             top: 70px;
             height: auto; }
+
+pre {
+  position: relative;
+  border: 2px solid #cfd9db;
+  border-width: 1px; }
+  pre .mu-clipboard {
+    font-size: 85%;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    border-bottom-left-radius: 10px;
+    border-left: 2px solid #cfd9db;
+    border-left-width: 1px;
+    border-bottom: 2px solid #cfd9db;
+    border-bottom-width: 1px;
+    height: 2em;
+    width: 8em;
+    color: #0B465D;
+    top: 0;
+    right: 0;
+    background-color: #cfd9db; }
+    pre .mu-clipboard span {
+      margin-left: 0.25em;
+      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; }
+    pre .mu-clipboard:hover {
+      background-color: #b1c2c6; }
+    pre .mu-clipboard.clicked {
+      font-weight: bold; }

data/app/assets/stylesheets/{_fonts.scss → scss/_fonts.scss}

@@ -1,9 +1,10 @@
 $font-size-base: 17px;
 $line-height-base: 1.8;
 $mu-fonts: (ahahamojimoji, mu-font);
+$mu-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
 body {
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: $mu-font-family;
   font-size: $font-size-base;
   line-height: $line-height-base;
 }

data/app/assets/stylesheets/scss/components/_mu-pre-copy-paste.scss

@@ -0,0 +1,39 @@
+$mu-clipboard-background-color: darken($mu-color-component-title-background, 10%);
+
+pre {
+
+  position: relative;
+  border: $mu-component-border;
+  border-width: 1px;
+
+  .mu-clipboard {
+    font-size: 85%;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    border-bottom-left-radius: 10px;
+    border-left: $mu-component-border;
+    border-left-width: 1px;
+    border-bottom: $mu-component-border;
+    border-bottom-width: 1px;
+    height: 2em;
+    width: 8em;
+    color: $mu-color-primary;
+    top: 0;
+    right: 0;
+    background-color: $mu-clipboard-background-color;
+    span {
+      margin-left: 0.25em;
+      font-family: $mu-font-family;
+    }
+    &:hover {
+      background-color: darken($mu-clipboard-background-color, 10%);
+    }
+    &.clicked {
+      font-weight: bold;
+    }
+  }
+}

data/app/assets/stylesheets/{components → scss/components}/components.scss

@@ -8,3 +8,4 @@ $mu-component-border-radius: 15px;
 @import 'mu-erd';
 @import 'mu-sql-table';
 @import 'mu-file-browser';
+@import 'mu-pre-copy-paste';

data/lib/mumuki/styles.rb

@@ -3,7 +3,12 @@ require "mumuki/styles/version"
 module Mumuki
   module Styles
     class Engine < ::Rails::Engine
-      # Rails -> use app/assets directory.
+    end if defined? ::Rails::Engine
+
+    ASSETS_PATH=File.join(__dir__, '..', '..', 'app', 'assets')
+
+    def self.assets_path_for(asset)
+      File.join ASSETS_PATH, asset
     end
   end
 end

data/lib/mumuki/styles/version.rb

@@ -1,5 +1,5 @@
 module Mumuki
   module Styles
-    VERSION = "1.16.2"
+    VERSION = "1.17.2"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mumuki-styles
 version: !ruby/object:Gem::Version
-  version: 1.16.2
+  version: 1.17.2
 platform: ruby
 authors:
 - Federico Scarpa
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-01-08 00:00:00.000000000 Z
+date: 2018-06-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -38,6 +38,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
 description: 
 email:
 - fedescarpa@gmail.com
@@ -86,33 +100,34 @@ files:
 - app/assets/fonts/fontawesome-webfont.woff
 - app/assets/fonts/fontawesome-webfont.woff2
 - app/assets/javascripts/mumuki-styles.js
-- app/assets/stylesheets/_broken.scss
-- app/assets/stylesheets/_colors.scss
-- app/assets/stylesheets/_fonts.scss
-- app/assets/stylesheets/_footer.scss
-- app/assets/stylesheets/_hovers.scss
-- app/assets/stylesheets/_mixines.scss
-- app/assets/stylesheets/_modules.scss
-- app/assets/stylesheets/_navbar.scss
-- app/assets/stylesheets/_styles.scss
-- app/assets/stylesheets/_vendor.scss
-- app/assets/stylesheets/bootswatch/_bootswatch.scss
-- app/assets/stylesheets/bootswatch/_variables.scss
-- app/assets/stylesheets/components/_browser.scss
-- app/assets/stylesheets/components/_mu-erd.scss
-- app/assets/stylesheets/components/_mu-file-browser.scss
-- app/assets/stylesheets/components/_mu-sql-table.scss
-- app/assets/stylesheets/components/components.scss
-- app/assets/stylesheets/modules/_breadcrumb.scss
-- app/assets/stylesheets/modules/_callout.scss
-- app/assets/stylesheets/modules/_checkbox.scss
-- app/assets/stylesheets/modules/_conversation.scss
-- app/assets/stylesheets/modules/_follow_us.scss
-- app/assets/stylesheets/modules/_highlight.scss
-- app/assets/stylesheets/modules/_new_message.scss
-- app/assets/stylesheets/modules/_notification.scss
-- app/assets/stylesheets/mumuki-styles.css
-- app/assets/stylesheets/mumuki-styles.scss
+- app/assets/stylesheets/css/mumuki-styles.css
+- app/assets/stylesheets/scss/_broken.scss
+- app/assets/stylesheets/scss/_colors.scss
+- app/assets/stylesheets/scss/_fonts.scss
+- app/assets/stylesheets/scss/_footer.scss
+- app/assets/stylesheets/scss/_hovers.scss
+- app/assets/stylesheets/scss/_mixines.scss
+- app/assets/stylesheets/scss/_modules.scss
+- app/assets/stylesheets/scss/_navbar.scss
+- app/assets/stylesheets/scss/_styles.scss
+- app/assets/stylesheets/scss/_vendor.scss
+- app/assets/stylesheets/scss/bootswatch/_bootswatch.scss
+- app/assets/stylesheets/scss/bootswatch/_variables.scss
+- app/assets/stylesheets/scss/components/_browser.scss
+- app/assets/stylesheets/scss/components/_mu-erd.scss
+- app/assets/stylesheets/scss/components/_mu-file-browser.scss
+- app/assets/stylesheets/scss/components/_mu-pre-copy-paste.scss
+- app/assets/stylesheets/scss/components/_mu-sql-table.scss
+- app/assets/stylesheets/scss/components/components.scss
+- app/assets/stylesheets/scss/modules/_breadcrumb.scss
+- app/assets/stylesheets/scss/modules/_callout.scss
+- app/assets/stylesheets/scss/modules/_checkbox.scss
+- app/assets/stylesheets/scss/modules/_conversation.scss
+- app/assets/stylesheets/scss/modules/_follow_us.scss
+- app/assets/stylesheets/scss/modules/_highlight.scss
+- app/assets/stylesheets/scss/modules/_new_message.scss
+- app/assets/stylesheets/scss/modules/_notification.scss
+- app/assets/stylesheets/scss/mumuki-styles.scss
 - app/assets/stylesheets/vendor/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss
 - app/assets/stylesheets/vendor/awesome-bootstrap-checkbox/demo/bootstrap.scss
 - app/assets/stylesheets/vendor/awesome-bootstrap-checkbox/demo/build.scss
@@ -227,7 +242,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.7.7
 signing_key: 
 specification_version: 4
 summary: Mumuki Styles