rails_admin_content_builder 1.0.4 → 1.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 08dbceab826bfbc8a3b8999691cb31ff290844cb
-  data.tar.gz: 7f49c1ab99d574403295a9cae17e0ea3500977e7
+  metadata.gz: 23829c9a4ba68dd9d6a5acaeb476aa4425ea4a73
+  data.tar.gz: baffc9d84ef4f27711101aa7e4e3f320656d9fe1
 SHA512:
-  metadata.gz: fd9ee5c8f53f075e6ed2fb08f98ddcdb2882a3d9d46e552ca5990568759c33ecfe2370aab5d6dbbeaae3d0dac28a3477ed4e281046cf00f7d8390c9af45e6317
-  data.tar.gz: 54abe1bdc19700b174bdaaa112bc202ac7bf6fed66af1b14d46941f9941ff3dca6629f18226d067eccfd3da6d021e508dfca9b0e3cfcc885ed8682356d151b85
+  metadata.gz: 6828e3af7a5db268bb9791fa31e2ec73293097cc764031a4081d838be01710bab2a3c8f6ebcbf54c17fcff7a1e7090bb3a72c1adacf7675ee87aada52bef0f46
+  data.tar.gz: aa22d5561a6991ab7ce30ca08e96df207168d050badecb0d808ccf9eb29e7e91cbc56042b0f8e5931b44d8755e025edf1c24a3586d8b944bbd55b02adfa8a9a2

data/.coveralls.yml

@@ -0,0 +1 @@
+repo_token: 33B2gHdbHj3Q3bR56oOsqCrbuhCRmNFKj

data/.gitignore

@@ -2,9 +2,9 @@
 /.yardoc
 /Gemfile.lock
 /_yardoc/
-/coverage/
 /doc/
 /pkg/
+/coverage/
 /spec/reports/
 /tmp/
 /.idea/*

data/.rubocop.yml

@@ -0,0 +1,10 @@
+AllCops:
+  Exclude:
+    - 'spec/dummy/**/*'
+    - 'vendor/bundle/**/*'
+
+Style/FrozenStringLiteralComment:
+  Enabled: false
+
+Documentation:
+  Enabled: false

data/Gemfile

@@ -7,6 +7,7 @@ group :development, :test do
   gem 'friendly_id'
   gem 'rails_admin'
   gem 'fuubar'
-  gem 'codeclimate-test-reporter'
+  gem 'coveralls', require: false
+  gem 'rubocop'
   gem 'simplecov', require: false
 end

data/README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/luizpicolo/rails_admin_content_builder.svg?branch=master)](https://travis-ci.org/luizpicolo/rails_admin_content_builder)
 [![Code Climate](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder/badges/gpa.svg)](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder)
-[![Test Coverage](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder/badges/coverage.svg)](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder/coverage)
+[![Coverage Status](https://coveralls.io/repos/github/luizpicolo/rails_admin_content_builder/badge.svg?branch=master)](https://coveralls.io/github/luizpicolo/rails_admin_content_builder?branch=master)
 [![Issue Count](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder/badges/issue_count.svg)](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder)
 
 Easy way for create contents using [rails_admin](https://github.com/sferik/rails_admin)
@@ -97,6 +97,11 @@ In your show content view
 </article>
 ```
 
+## Run tests
+
+bundle exec rake
+rspec
+
 ## Attributes and Methods
 
 ```ruby
@@ -112,6 +117,12 @@ In your show content view
 content_sanitized : Text
 content_builder_images : Object
 ```
+## Run tests
+
+```ruby
+bundle exec rake
+rspec
+```
 
 # Demonstration
 

data/Rakefile

@@ -1,21 +1,21 @@
 #!/usr/bin/env rake
 begin
- require 'bundler/setup'
+  require 'bundler/setup'
 rescue LoadError
- puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
 
-APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+APP_RAKEFILE = File.expand_path('../spec/dummy/Rakefile', __FILE__)
 load 'rails/tasks/engine.rake'
 
 Bundler::GemHelper.install_tasks
 
-Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each {|f| load f }
+Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each { |f| load f }
 
 require 'rspec/core'
 require 'rspec/core/rake_task'
 
-desc "Run all specs in spec directory (excluding plugin specs)"
-RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
+desc 'Run all specs in spec directory (excluding plugin specs)'
+RSpec::Core::RakeTask.new(spec: 'app:db:test:prepare')
 
-task :default => :spec
+task default: :spec

data/app/assets/javascripts/rails_admin/content_builder.js.erb

@@ -26,7 +26,7 @@ $(document).on('rails_admin.dom_ready', function() {
 
 // when click on delete button
 $(document).on('click', '.cb-tools__btn--delete', function() {
-  var resp = confirm('<%= I18n.t('ad$(min.actions.news_admin.delete_block')%>');
+  var resp = confirm('<%= I18n.t('admin.actions.content_builder.delete_block')%>');
 
   if(resp) {
     $($(this).attr('href')).remove();
@@ -45,7 +45,7 @@ $(document).on('click', '.cb-tools__btn--upload', function() {
 
 // when click on youtube buttons
 $(document).on('click', '.cb-tools__btn--youtube', function() {
-  var resp = prompt('Cole a url do YouTube', '');
+  var resp = prompt('<%= I18n.t('admin.actions.content_builder.url')%>', '');
   resp = youtubeParser(resp);
 
   if(resp) {
@@ -73,7 +73,7 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     element += '</div>';
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem.</p>';
     element += '</div>';
 
     element += '</div>';
@@ -98,11 +98,13 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     element += '<a class="cb-tools__btn cb-tools__btn--upload fa fa-camera" href="#'+ id + '"></a>';
     element += '</div>';
     element += '</div>';
-    element += '<figcaption class="cb-figcaption cb-text">Descrição da imagem</figcaption>';
+    element += '<figcaption class="cb-figcaption cb-text">';
+    element += '<%= I18n.t('admin.actions.content_builder.image_description')%>';
+    element += '</figcaption>';
     element += '</figure>';
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem.</p>';
     element += '</div>';
 
     element += '</div>';
@@ -128,12 +130,14 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     element += '<a class="cb-tools__btn cb-tools__btn--upload fa fa-camera" href="#'+ id + '"></a>';
     element += '</div>';
     element += '</div>';
-    element += '<figcaption class="cb-figcaption cb-text">Descrição da imagem</figcaption>';
+    element += '<figcaption class="cb-figcaption cb-text">';
+    element += '<%= I18n.t('admin.actions.content_builder.image_description')%>';
+    element += '</figcaption>';
     element += '</figure>';
 
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem.</p>';
     element += '</div>';
 
     element += '</div>';
@@ -159,7 +163,9 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     element += '<a class="cb-tools__btn cb-tools__btn--upload fa fa-camera" href="#'+ id + '"></a>';
     element += '</div>';
     element += '</div>';
-    element += '<figcaption class="cb-figcaption cb-text">Descrição da imagem</figcaption>';
+    element += '<figcaption class="cb-figcaption cb-text">';
+    element += '<%= I18n.t('admin.actions.content_builder.image_description')%>';
+    element += '</figcaption>';
     element += '</figure>';
 
     element += '</div>';
@@ -202,12 +208,12 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     element += '</div>';
 
     element += '<blockquote class="cb-blockquote cb-blockquote--left">';
-    element += '<div class="cb-blockquote__text cb-text"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p></div>';
+    element += '<div class="cb-blockquote__text cb-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis</p></div>';
     element += '<footer class="cb-blockquote__footer cb-text">Lorem Ipsum</footer>';
     element += '</blockquote>';
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem.</p>';
     element += '</div>';
 
     element += '</div>';
@@ -226,12 +232,12 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     element += '</div>';
 
     element += '<blockquote class="cb-blockquote cb-blockquote--right">';
-    element += '<div class="cb-blockquote__text cb-text"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p></div>';
+    element += '<div class="cb-blockquote__text cb-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis</p></div>';
     element += '<footer class="cb-blockquote__footer cb-text">Lorem Ipsum</footer>';
     element += '</blockquote>';
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem..</p>';
     element += '</div>';
 
     element += '</div>';
@@ -250,12 +256,12 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     element += '</div>';
 
     element += '<blockquote class="cb-blockquote">';
-    element += '<div class="cb-blockquote__text cb-text"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p></div>';
+    element += '<div class="cb-blockquote__text cb-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis</p></div>';
     element += '<footer class="cb-blockquote__footer cb-text">Lorem Ipsum</footer>';
     element += '</blockquote>';
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem..</p>';
     element += '</div>';
 
     element += '</div>';
@@ -276,12 +282,12 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
 
     element += '<aside class="cb-relational cb-relational--left">'
     element += '<h2 class="cb-relational__title">Saiba mais</h2>';
-    element += '<input class="cb-search" type="text" name="search" placeholder="Buscar notícia">';
+    element += '<input class="cb-search" type="text" name="search" placeholder="<%= I18n.t('admin.actions.content_builder.search_content')%>">';
     element += '<ol class="cb-relational__list"></ol>';
     element += '</aside>';
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem..</p>';
     element += '</div>';
 
     element += '</div>';
@@ -304,12 +310,12 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
 
     element += '<aside class="cb-relational cb-relational--right">'
     element += '<h2 class="cb-relational__title">Saiba mais</h2>';
-    element += '<input class="cb-search" type="text" name="search" placeholder="Buscar notícia">';
+    element += '<input class="cb-search" type="text" name="search" placeholder="<%= I18n.t('admin.actions.content_builder.search_content')%>">';
     element += '<ol class="cb-relational__list"></ol>';
     element += '</aside>';
 
     element += '<div class="cb-text">';
-    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis congue pharetra. Proin quis commodo odio. Fusce a sapien massa. Praesent ultrices dolor at risus porttitor, nec semper orci ornare. Nullam nisi eros, pellentesque et suscipit ac, ultrices eget lorem. Donec ipsum tellus, aliquet vitae metus ut, tempus viverra lorem.</p>';
     element += '</div>';
 
     element += '</div>';
@@ -351,6 +357,7 @@ function addEventToInputFile(id) {
 
 // upload file via ajax
 function fileSelectAndUpload(evt) {
+  console.log(evt);
   var file = evt.target.files[0];
 
   if(file) {
@@ -453,7 +460,7 @@ function youtubeParser(url) {
   if(match && match[7].length == 11) {
     return b = match[7];
   } else {
-    alert('Ops! Você não informou uma url válida.');
+    alert('<%= I18n.t('admin.actions.content_builder.invalid_url')%>');
   }
 };
 
@@ -476,7 +483,7 @@ function autocomplete(id) {
       $("#" + id + ' ol').append(element);
       activeMediumEditor();
       activeSortable();
-      
+
       return false;
     }
   }).autocomplete("instance")._renderItem = function(ul, item) {

data/app/assets/stylesheets/rails_admin/content_builder.scss

@@ -3,27 +3,24 @@
 
 .cb-snippet {
   position: fixed;
-  z-index: 100;
-  top: 50px;
-  bottom: 110px;
+  z-index: 400;
+  bottom: 54px;
+  left: 0;
   right: 0;
 
-  width: 150px;
-
-  padding: 20px;
-
+  width: 100%;
+  height: 100px;
+  padding: 10px 0;
   background: #f8f8f8;
-  border-left: solid 1px rgba(0,0,0,.1);
-
-  overflow: hidden;
+  border-top: solid 1px rgba(0,0,0,.1);
   overflow-y: scroll;
 }
 
 .cb-snippet__btn {
-  margin-bottom: 20px;
-
-  display: block;
-  background: #fff;
+  box-sizing: border-box;
+  float: left;
+  width: 25%;
+  padding: 10px;
 
   text-align: center;
   text-decoration: none;
@@ -37,9 +34,8 @@
 }
 
 .cb-snippet__caption {
-  display: block;
+  display: none;
   padding: 5px;
-  border-top: solid 2px rgba(0,0,0,.05);
 
   color: rgba(0,0,0,.6);
   font-size: 10px;
@@ -49,43 +45,50 @@
   width: 100%;
 }
 
-
 .cb-controls {
   position: fixed;
-  z-index: 100;
+  z-index: 400;
   bottom: 0;
   right: 0;
 
-  width: 150px;
+  width: 100%;
 
-  padding: 20px;
+  padding: 10px;
 
   background: #f8f8f8;
   border-top: solid 1px rgba(0,0,0,.1);
   border-left: solid 1px rgba(0,0,0,.1);
-}
 
+  .btn-block {
+    margin-top: 0;
+    width: auto !important;
+  }
+
+  .btn-right {
+    float: right;
+  }
+
+  .btn-left {
+    float: left;
+  }
+}
 
 .cb-tools {
-  position: absolute;
-  z-index: 300;
-  top: 0;
-  left: -40px;
+  margin-bottom: 10px;
 
   border-radius: .4rem;
   background: darken(#fff, 7%);
-
   overflow: hidden;
+
+  text-align: right;
 }
 
 .cb-tools--center {
+  position: absolute;
+  z-index: 300;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
-
-  .cb-tools__btn {
-    display: inline-block;
-  }
 }
 
 .cb-tools--disabled {
@@ -93,7 +96,7 @@
 }
 
 .cb-tools__btn {
-  display: block;
+  display: inline-block;
 
   font-size: 12px;
   text-align: center;
@@ -108,6 +111,10 @@
   }
 }
 
+.cb-tools__btn--delete {
+  float: left;
+}
+
 .cb-tools__btn--small {
   font-size: 9px;
   padding: 8px;
@@ -124,7 +131,7 @@
 
 .cb-container {
   box-sizing: border-box;
-  padding: 0 220px 0 40px;
+  padding: 0 0 300px 0;
 }
 
 .cb-content {
@@ -162,25 +169,13 @@
 
 .cb-figure {
   position: relative;
-  margin: 0 0 15px;
+  margin: 0 0 20px;
 
   img {
     width: 100%;
   }
 }
 
-.cb-figure--left {
-  float: left;
-  width: 50%;
-  margin: 0 30px 20px 0;
-}
-
-.cb-figure--right {
-  float: right;
-  width: 50%;
-  margin: 0 0 20px 30px;
-}
-
 .cb-figure--center {
   margin: 0 0 20px;
 }
@@ -204,7 +199,6 @@
   }
 }
 
-
 .cb-video {
   position: relative;
   height: 0;
@@ -224,35 +218,22 @@
   margin-bottom: 30px;
 }
 
-
 .cb-blockquote {
   position: relative;
   margin: 0 0 20px;
 
-  padding: 32px 0 0 32px;
+  padding: 25px 0 0 25px;
   border: 0;
 }
 
-.cb-blockquote--left {
-  float: left;
-  width: 50%;
-  margin: 0 30px 20px 0;
-}
-
-.cb-blockquote--right {
-  float: right;
-  width: 50%;
-  margin: 0 0 20px 30px;
-}
-
 .cb-blockquote__text {
-  margin: 0 0 16px;
+  margin: 0 0 8px;
 
   line-height: 1.4;
 
   color: rgba(0,0,0,.6);
   font-family: sans-serif;
-  font-size: 22px;
+  font-size: 18px;
 
   &:before {
     content: "\“";
@@ -265,7 +246,7 @@
     line-height: 1;
 
     color: rgba(0,0,0,.2);
-    font-size: 80px;
+    font-size: 70px;
   }
 }
 
@@ -277,7 +258,7 @@
 
   color: rgba(0,0,0,.6);
   font-family: sans-serif;
-  font-size: 16px;
+  font-size: 14px;
 
   &:before {
     content: "\2014 \00A0";
@@ -295,28 +276,13 @@
   padding-top: 5px;
 }
 
-.cb-relational--left {
-  float: left;
-  margin: 0 30px 25px 0;
-
-  width: 50%;
-}
-
-.cb-relational--right {
-  float: right;
-  margin: 0 0 25px 30px;
-
-  width: 50%;
-}
-
 .cb-relational__title {
   margin: 0 0 15px;
 
-  line-height: 1;
   padding-top: 8px;
   border-top: solid 4px rgba(0,0,0,.1);
 
-  color: rgba(0,0,0,.3);
+  color: rgba(0,0,0,.6) !important;
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
@@ -392,7 +358,6 @@
   }
 }
 
-
 .ui-sortable-placeholder {
   margin: 20px 0;
   height: 80px;
@@ -400,3 +365,131 @@
   background: rgba(0,0,0,.05);
   border: dashed 2px rgba(0,0,0,.05);
 }
+
+@media screen and (min-width: 460px) {
+  .cb-snippet__caption {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .cb-snippet {
+    top: 50px;
+    right: 0;
+    bottom: 112px;
+    left: auto;
+
+    width: 150px;
+    height: auto;
+    padding: 20px;
+    border: 0;
+    border-left: solid 1px rgba(0,0,0,.1);
+
+    -webkit-transform: translateX(0%);
+    -moz-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  .cb-snippet__btn {
+    margin-bottom: 20px;
+
+    display: block;
+    width: 100%;
+    padding: 0;
+  }
+
+  .cb-controls {
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    right: 0;
+
+    width: 150px;
+
+    padding: 20px;
+
+    background: #f8f8f8;
+    border-top: solid 1px rgba(0,0,0,.1);
+    border-left: solid 1px rgba(0,0,0,.1);
+
+    .btn-block {
+      width: 100% !important;
+    }
+
+    .btn-block + .btn-block {
+      margin-top: 5px;
+    }
+
+    .btn-left,
+    .btn-right {
+      float: none;
+    }
+  }
+
+  .cb-container {
+    box-sizing: border-box;
+    padding: 30px 160px 100px 40px;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .cb-tools {
+    position: absolute;
+    z-index: 300;
+    top: 0;
+    left: -40px;
+  }
+
+  .cb-tools__btn {
+    display: block;
+  }
+
+  .cb-tools--center {
+    position: absolute;
+    z-index: 300;
+    top: 50%;
+    left: 50%;
+
+    .cb-tools__btn {
+      display: inline-block;
+    }
+  }
+
+  .cb-figure--left {
+    float: left;
+    width: 50%;
+    margin: 0 30px 20px 0;
+  }
+
+  .cb-figure--right {
+    float: right;
+    width: 50%;
+    margin: 0 0 20px 30px;
+  }
+
+  .cb-blockquote--left {
+    float: left;
+    width: 50%;
+    margin: 0 30px 20px 0;
+  }
+
+  .cb-blockquote--right {
+    float: right;
+    width: 50%;
+    margin: 0 0 20px 30px;
+  }
+
+  .cb-relational--left {
+    float: left;
+    margin: 0 30px 25px 0;
+
+    width: 50%;
+  }
+
+  .cb-relational--right {
+    float: right;
+    margin: 0 0 25px 30px;
+
+    width: 50%;
+  }
+}