beyond_canvas 0.19.2.pre → 0.23.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e521c2269619436efc6e760472ab605213b315b3f14462661a65db7a615a93c
-  data.tar.gz: 146a2408feda96383da8def8d2647abd8b003e5dcef55a7b439325c4b1f38832
+  metadata.gz: b1de2d82164f7101979a0becd0510d4ba32071d9033b6a52fa7994c89884c0c7
+  data.tar.gz: 9d78929e71b97c887814da55ae64722be0ac5aa6f835167c9516df056ad99f4b
 SHA512:
-  metadata.gz: 34478929f6d039be913f94e7f9ce74544d0481534a8f3e25649ed4daed4f9f677e4b028835263f65e97066f76104b13aa92d8dd7d5ed520425de88d08f6e0df2
-  data.tar.gz: e434787b9ff264aa0a661b5c2d35fcb311ba199bdfec9408965a57e32118941ab0fb3d1564b2de5c02d297b7711695091a432663a4aad1d5f9f65e0d0931ce6b
+  metadata.gz: abeafe5140b724a90a4c156d909dc4c2a06d9a5e757be3ff4a4e1d92c36454181fe584776bceb84fbdd4149cb9483e7494325a21e606dd0a5cc5bbb06ac57051
+  data.tar.gz: e738177bf4e47df314ab879242279aa28edb2b128d08a4789936bab37d5a049dc769d57acfe21c1f3ccdc3165a3ef744ef2e99cf1cf717e9a283a81362c43427

data/README.md

@@ -3,59 +3,17 @@
 ![Gem Version](https://img.shields.io/gem/v/beyond_canvas?label=gem%20version)
 ![License](https://img.shields.io/github/license/ePages-de/beyond_canvas)
 
-## Installation
-
-1. Add this line to your application's Gemfile:
-
-    ```ruby
-    gem "beyond_canvas"
-    ```
-
-1. Then execute:
-
-    ```bash
-    $ bundle install
-    ```
-
-1. Restart your server and rename `application.css` to `application.scss` or `application.sass` (in case you prefer to use the `sass` syntax):
-
-    ```bash
-    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
-    ```
-
-1. Delete _all_ Sprockets directives in `application.scss` (`require`, `require_tree` and `require_self`) and use Sass’s native `@import` instead ([Here's why?](https://content.pivotal.io/blog/structure-your-sass-files-with-import)).
-
-1. Import Beyond Canvas at the beginning of `application.scss`. Any other styles must be imported after Beyond Canvas to avoid issues:
-
-    ```scss
-    @import 'beyond_canvas'
-    ```
-
-1. Add the following to `application.js`:
-
-    ```js
-    //= require beyond_canvas
-    ```
-
-1. Run the generator:
-
-    ```bash
-    $ rails g beyond_canvas:install
-    ```
-
-    This will generate `config/initializers/beyond_canvas.rb` file, used for general Beyond Canvas configuration. Read [this wiki entry](https://github.com/ePages-de/beyond_canvas/wiki/Initializer) to get more information about the different configuration options.
-
 ## Documentation
 
-TBD
+Please see the [Beyond Canvas wiki](https://github.com/ePages-de/beyond_canvas/wiki) for additional information about the gem and its features.
 
 ## Contributing
 
 Please see [CONTRIBUTING](https://github.com/ePages-de/beyond_canvas/blob/master/CONTRIBUTING.md).
 
-## Changelog
+## Change log
 
-Beyond Canvas's changelog is available [here](https://github.com/ePages-de/beyond_canvas/blob/master/CHANGELOG.md).
+Beyond Canvas's change log is available [here](https://github.com/ePages-de/beyond_canvas/blob/master/CHANGELOG.md).
 
 ## License
 

data/app/assets/images/icons/adblocker.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265 265">
+    <polygon class="surface" points="160.21 93.5 116.18 93.5 85.05 124.63 85.05 168.66 116.18 199.79 132.95 199.79 132.95 259.83 139.95 259.83 139.95 199.79 160.21 199.79 191.34 168.66 191.34 124.63 160.21 93.5"/>
+    <path class="bubbles" d="M68.8,38.6a4.46,4.46,0,0,1-4.4-4.5,4.53,4.53,0,0,1,4.5-4.4,4.45,4.45,0,1,1-.1,8.9ZM130.6,1a2.26,2.26,0,0,0-2.3,2.3,2.3,2.3,0,0,0,4.6,0A2.26,2.26,0,0,0,130.6,1ZM54.8,138.6a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,54.8,138.6Zm56.7-94.4a2.3,2.3,0,1,0-4.6,0,2.2,2.2,0,0,0,2.3,2.3A2.26,2.26,0,0,0,111.5,44.2Zm-39,25.6a2.35,2.35,0,1,0,2.3,2.4A2.23,2.23,0,0,0,72.5,69.8ZM69,105.4a2.3,2.3,0,1,0,2.3,2.3A2.33,2.33,0,0,0,69,105.4ZM30.59,65a2.35,2.35,0,0,0,2.4-2.3,2.23,2.23,0,0,0-2.3-2.4,2.35,2.35,0,1,0-.1,4.7ZM45.2,8a2.35,2.35,0,1,0,2.3,2.4A2.23,2.23,0,0,0,45.2,8Zm-16,92.37a4.45,4.45,0,1,0-4.4-4.5A4.34,4.34,0,0,0,29.2,100.4Zm0,69.5a5.91,5.91,0,0,0-5.9,5.9,5.9,5.9,0,0,0,11.8,0A6,6,0,0,0,29.2,169.9ZM7.7,134.6a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,7.7,134.6ZM114.8,65.42a4.7,4.7,0,1,0,4.7,4.7A4.69,4.69,0,0,0,114.8,65.42ZM239.5,164a5.9,5.9,0,1,0,5.8,5.9A5.83,5.83,0,0,0,239.5,164Zm-14.72-61.17a4.8,4.8,0,0,0-4.8,4.8,4.8,4.8,0,0,0,9.6,0A4.8,4.8,0,0,0,224.78,102.83ZM257.3,74.5a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,257.3,74.5Zm-2.63,49.76a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,254.67,124.26Zm-5.56-92.44a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,249.11,31.82Zm-27,106.58a2.3,2.3,0,1,0,2.3,2.3A2.2,2.2,0,0,0,222.1,138.4ZM158.8,74.5a2.3,2.3,0,1,0,2.3,2.3A2.33,2.33,0,0,0,158.8,74.5Zm52.31-60.73a2.35,2.35,0,1,0,2.3,2.4A2.23,2.23,0,0,0,211.11,13.77ZM165.7,12.1a4.1,4.1,0,1,0,4.1,4.1A4.12,4.12,0,0,0,165.7,12.1Zm-7.6,33a2.33,2.33,0,0,0-2.3-2.3,2.3,2.3,0,1,0,2.3,2.3Zm46,0a4.7,4.7,0,1,0,4.7,4.7A4.69,4.69,0,0,0,204.1,45.1Zm.38,34.58a2.3,2.3,0,1,0,2.3,2.3A2.33,2.33,0,0,0,204.48,79.68Z" transform="translate(0 -1)"/>
+    <path class="outline" d="M144.37,125.34h-7.5V122h-9v6.67h-7.5v14.76h-6.9l-.34,20.28L124,181.85h24.41l3.43-25.75V134.72h-7.5Zm6,10.88V156l-3.25,24.35H124.87l-10.24-17,.32-18.38h5.4v12.35h1.52V130.18h6v22.34h1.5v-29h6v30.21h1.5V126.84h6V156.1h1.5V136.22ZM137.25,263.71V205.82h17.57l31.57-31.57V129.61L154.82,98H110.18L78.61,129.61v44.64l31.57,31.57h17.57v57.89H0v1.5H265v-1.5ZM97.93,191.46,114.7,174.7l-1.06-1.06L96.87,190.4,94.46,188l16.76-16.76-1.06-1.06L93.4,186.92,80.11,173.63v-43.4L110.8,99.54h43.4l13.41,13.4-15.34,15.33,1.06,1.06L168.67,114l2.41,2.42-15.33,15.33,1.06,1.06,15.33-15.33,12.75,12.75v43.4L154.2,204.32H110.8Zm31.32,72.25V205.82h6.5v57.89Z" transform="translate(0 -1)"/>
+</svg>

data/app/assets/images/icons/checkbox_checked.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#97C344" d="M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z"></path></svg>

data/app/assets/images/icons/checkbox_unchecked.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#c2bf9d" d="M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z"></path></svg>

data/app/assets/images/icons/external_link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg>

data/app/assets/images/icons/toggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="44" height="24" rx="12" ry="12"></rect><path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.4-10-10-10zm-.6 13.5l-1.8 1.9-1.8-1.8L6.6 14l1.8-1.8 2.5 2.6 6.9-6.9 1.8 1.8-6.9 6.7z"></path><path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.5-10-10-10zm5.3 13.4l-1.8 1.8-3.4-3.4-3.4 3.4-1.8-1.8 3.4-3.4-3.4-3.4L10 7.7l3.4 3.4 3.4-3.4 1.8 1.8-3.5 3.4 3.5 3.4z"></path></svg>

data/app/assets/images/icons/toggle_checked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.3 2.9 20 20">
+  <path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.4-10-10-10zm-.6 13.5l-1.8 1.9-1.8-1.8L6.6 14l1.8-1.8 2.5 2.6 6.9-6.9 1.8 1.8-6.9 6.7z"/>
+</svg>

data/app/assets/images/icons/toggle_unchecked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.3 2.9 20 20">
+  <path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.5-10-10-10zm5.3 13.4l-1.8 1.8-3.4-3.4-3.4 3.4-1.8-1.8 3.4-3.4-3.4-3.4L10 7.7l3.4 3.4 3.4-3.4 1.8 1.8-3.5 3.4 3.5 3.4z"/>
+</svg>

data/app/assets/javascripts/beyond_canvas/base.js

@@ -2,6 +2,7 @@
  * Warning: This file is auto-generated, do not modify. Instead, make your changes in 'app/javascript/beyond_canvas/' and run `yarn build`
  */
 //= require jquery3
+//= require rails-ujs
 //= require_self
 
 (function(factory) {
@@ -11,7 +12,7 @@
   var SPINNER_ANIMATION_TIMEOUT = 125;
   var BUTTON_SELECTORS = '[class^="button"]';
   (function($) {
-    var onDOMReady = function onDOMReady(e) {
+    var onDOMReady = function onDOMReady() {
       var inputs = $("input, textarea, select").not(":input[type=button], :input[type=submit], :input[type=reset]");
       inputs.each(function() {
         var input = $(this);
@@ -23,39 +24,39 @@
         });
       });
       $(BUTTON_SELECTORS).each(function() {
-        var button = $(this);
-        button.width(button.width());
-        button.data("oldWidth", button.width());
-        if (button.find(".spinner").length == 0) {
-          button.prepend('\n          <div class="spinner">\n            <div class="bounce1"></div>\n            <div class="bounce2"></div>\n            <div class="bounce3"></div>\n          </div>');
-        }
-        button.closest("form").on("ajax:success", function() {
-          $.restoreActionElements();
-        }).on("ajax:error", function() {
-          $.restoreActionElements();
-        });
+        $(this).buildButton();
       });
     };
     $(document).on("confirm:complete", function() {
       $.restoreActionElements();
     });
-    $(document).on("click", BUTTON_SELECTORS, function() {
+    $(document).on("click", BUTTON_SELECTORS, function(e) {
+      var _e$target$attributes$;
+      var button = $(this);
+      if (((_e$target$attributes$ = e.target.attributes.getNamedItem("target")) == null ? void 0 : _e$target$attributes$.value) === "_blank") return;
       $.disableActionElements();
-      $(this).showSpinner();
+      if (!button.hasClass("button--no-spinner")) {
+        $(this).showSpinner();
+      }
     });
     $(document).on("ready page:load turbolinks:load", onDOMReady);
+    $(document).on("beforeunload turbolinks:before-visit", function() {
+      $.restoreActionElements();
+    });
   })(jQuery);
   $.extend({
     restoreActionElements: function restoreActionElements() {
-      $(BUTTON_SELECTORS).each(function(_, button) {
-        setTimeout(function() {
-          $(button).find(".spinner").hide();
-          $(button).width($(button).data("oldWidth"));
-        }, SPINNER_ANIMATION_TIMEOUT);
-      });
-      $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
-        $(this).removeClass("actions--disabled");
-      });
+      setTimeout(function() {
+        $(BUTTON_SELECTORS).each(function(_, button) {
+          setTimeout(function() {
+            $(button).find(".spinner").hide();
+            $(button).width($(button).data("oldWidth"));
+          }, SPINNER_ANIMATION_TIMEOUT);
+        });
+        $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
+          $(this).removeClass("actions--disabled");
+        });
+      }, 100);
     },
     disableActionElements: function disableActionElements() {
       $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
@@ -64,6 +65,23 @@
     }
   });
   $.fn.extend({
+    buildButton: function buildButton() {
+      var button = $(this);
+      if (button.is("[class^=button]")) {
+        if (!button.hasClass("button--no-spinner")) {
+          button.width(button.width());
+          button.data("oldWidth", button.width());
+          if (button.find(".spinner").length == 0) {
+            button.prepend('\n          <div class="spinner">\n            <div class="bounce1"></div>\n            <div class="bounce2"></div>\n            <div class="bounce3"></div>\n          </div>');
+          }
+        }
+        button.closest("form").on("ajax:success", function() {
+          $.restoreActionElements();
+        }).on("ajax:error", function() {
+          $.restoreActionElements();
+        });
+      }
+    },
     showSpinner: function showSpinner() {
       var button = $(this);
       button.width(button.width() + $(".spinner").outerWidth(true));
@@ -72,6 +90,13 @@
       }, SPINNER_ANIMATION_TIMEOUT);
     }
   });
+  (function($) {
+    $(document).on("click", "[data-toggle='collapse']", function(e) {
+      e.preventDefault();
+      $($(this).attr("data-target")).slideToggle();
+      $(this).find(".collapse__icon").toggleClass("collapse__icon--open");
+    });
+  })(jQuery);
   (function($) {
     var onDOMReady = function onDOMReady() {
       $(".flash").each(function() {
@@ -81,23 +106,33 @@
         $(".flash").addClass("flash--shown");
       }, 100);
     };
-    $(document).on("click", ".flash", function() {
-      closeAlert();
+    $(document).on("click", ".flash__close", function() {
+      $.closeAlert();
     });
-    $(document).on("ready page:load turbolinks:load", onDOMReady);
+    $(document).on("ready page:load turbolinks:load bc.flash.shown", onDOMReady);
   })(jQuery);
-  function closeAlert() {
-    $(".flash").removeClass("flash--shown").delay(700).queue(function() {
-      $(this).remove();
-    });
-  }
+  $.extend({
+    showFlash: function showFlash(status, message) {
+      var flash = '\n        <div class="flash">\n          <div class="flash__icon flash__icon--' + status + '">\n            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"></path></svg>\n          </div>\n          <div class="flash__message">\n            ' + message + '\n          </div>\n          <div class="flash__close">\n            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>\n          </div>\n        </div>';
+      $(document).trigger("bc.flash.show");
+      $("#flash").html(flash);
+      $(document).trigger("bc.flash.shown");
+    },
+    closeAlert: function closeAlert() {
+      $(document).trigger("bc.flash.hide");
+      $(".flash").removeClass("flash--shown").delay(700).queue(function() {
+        $(this).remove();
+      });
+      $(document).trigger("bc.flash.hidden");
+    }
+  });
   (function($) {
     var onDOMReady = function onDOMReady() {
       $('input[type="file"]').each(function() {
         var $input = $(this), $label = $(".input__file__text." + $input.attr("id")), labelVal = $label.html();
         $input.on("change", function(e) {
           var fileName = "";
-          if (this.files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "").replace("{count}", this.files.length); else if (e.target.value) fileName = e.target.value.split("\\").pop();
+          if (this.files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "{count} files selected").replace("{count}", this.files.length); else if (e.target.value) fileName = e.target.value.split("\\").pop();
           if (fileName) $label.html('<svg class="input__file__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 2v5h5v15h-16v-20h11zm1-2h-14v24h20v-18l-6-6z"/></svg>' + fileName); else $label.html(labelVal);
         });
         $input.on("focus", function() {
@@ -107,23 +142,51 @@
         });
       });
     };
+    $(document).on("ready page:load turbolinks:load", function() {
+      var observer = new MutationObserver(function() {
+        return onDOMReady();
+      });
+      onDOMReady();
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    });
+  })(jQuery);
+  (function($) {
+    var onDOMReady = function onDOMReady() {
+      $(".modal").each(function() {
+        $(this).hide().css("visibility", "visible");
+      });
+    };
+    $(document).on("click", '[data-toggle="modal"]', function(e) {
+      e.preventDefault();
+      var dataTarget = $(this).attr("data-target");
+      $.restoreActionElements();
+      $(dataTarget).showModal();
+    });
+    $(document).on("click", '[data-dismiss="modal"]', function(e) {
+      e.preventDefault();
+      var dataTarget = $(this).closest(".modal");
+      $.restoreActionElements();
+      $(dataTarget).hideModal();
+    });
     $(document).on("ready page:load turbolinks:load", onDOMReady);
   })(jQuery);
-  $.extend({
-    displayModal: function displayModal(content, options) {
-      if (options === void 0) {
-        options = {};
-      }
-      $("#modal").find("#modal__content").html(content);
-      $("#modal").css("display", "flex");
+  $.fn.extend({
+    showModal: function showModal() {
+      var modal = $(this);
+      modal.trigger("bc.modal.show");
       $.restoreActionElements();
-      $(document).trigger("modal:opened", options["extraEventParameters"]);
+      modal.css("display", "flex");
+      modal.trigger("bc.modal.shown");
     },
-    closeModal: function closeModal() {
-      $("#modal").find("#modal__content").empty();
-      $("#modal").css("display", "none");
+    hideModal: function hideModal() {
+      var modal = $(this);
+      modal.trigger("bc.modal.hide");
       $.restoreActionElements();
-      $(document).trigger("modal:closed");
+      modal.hide();
+      modal.trigger("bc.modal.hidden");
     }
   });
 });

data/app/assets/stylesheets/beyond_canvas/base.scss

@@ -1,37 +1,40 @@
 @import "bourbon";
 
 @import "settings/breakpoints";
-@import "settings/variables";
+@import "settings/constant_variables";
+@import "settings/base_variables";
 @import "settings/reset_css";
 @import "settings/typography";
 
 @import "utilities/functions";
 @import "utilities/mixins";
 
-@import "components/actions";
-@import "components/breadcrumbs";
+@import "components/action_bar"; // Done
+@import "components/actions"; // Done
+@import "components/breadcrumbs"; // Done
 @import "components/buttons";
 @import "components/cards";
-@import "components/comments";
-@import "components/containers";
+@import "components/collapse";
 @import "components/debug";
-@import "components/flash";
-@import "components/forms";
+@import "components/flash"; // Done
+@import "components/forms"; // Done
 @import "components/grids";
 @import "components/inputs";
-@import "components/layouts";
+@import "components/layouts"; // Done
 @import "components/links";
 @import "components/main";
-@import "components/margins";
+@import "components/margins"; // Done
 @import "components/markdown";
-@import "components/action_bar";
-@import "components/modals";
-@import "components/notices";
-@import "components/relative";
+@import "components/menu";
+@import "components/modals"; // Done
+@import "components/notices"; // Done
+@import "components/relative"; // Done
 @import "components/scrollbox";
+@import "components/select2"; // Done
 @import "components/sidebar";
-@import "components/spinner";
-@import "components/menu";
-@import "components/tables";
-@import "components/titles";
-@import "components/texts";
+@import "components/spinner"; // Done
+@import "components/statuses"; // Done
+@import "components/step_list"; // Done
+@import "components/tables"; // Done
+@import "components/texts"; // Done
+@import "components/titles"; // Done

data/app/assets/stylesheets/beyond_canvas/components/_action_bar.scss

@@ -1,8 +1,8 @@
 .action_bar {
   width: 100%;
-  height: $action-bar-height;
-  background-color: $action-bar-background;
-  border-bottom: $action-bar-shadow;
+  height: var(--header-bar-height);
+  background-color: var(--workspace-toolbar-background);
+  border-bottom: var(--workspace-toolbar-border);
   padding: 0 25px;
   box-sizing: border-box;
   display: flex;
@@ -13,16 +13,21 @@
   z-index: 999;
 
   &--menu {
-    top: $menu-height;
+    top: var(--menu-height);
   }
 
-  &--left {
+  &--left,
+  &--right {
     display: flex;
+    align-items: center;
+    min-width: 50%;
+  }
+
+  &--left {
     justify-content: flex-start;
   }
 
   &--right {
-    display: flex;
     justify-content: flex-end;
   }
 }

data/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss

@@ -5,7 +5,7 @@
   .home-icon {
     width: 12px;
     height: 12px;
-    fill: $breadcrum-color-current;
+    fill: var(--breadcrumb-icon);
   }
 
   .arrow-right {
@@ -13,16 +13,20 @@
     height: 8px;
     margin-left: 7px;
     margin-right: 7px;
-    fill: $breadcrum-color;
+    fill: var(--breadcrumb-text);
   }
 }
 
 .breadcrumb {
   &__item {
-    color: $breadcrum-color-current;
+    color: var(--breadcrumb-link);
+
+    &:hover {
+      color: var(--breadcrumb-link-hover);
+    }
 
     &--current {
-      color: $breadcrum-color;
+      color: var(--breadcrumb-text);
       pointer-events: none;
     }
   }