beyond_canvas 0.13.1.pre → 0.15.3.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b251444a9c8422914b644276a9092df58d0678f2b26afacf1460b2a9505ad833
-  data.tar.gz: c7fe8d4689dca6b5c23a967619e59f72a615e1a42f908b5fda345a7e0b8d4c72
+  metadata.gz: 3c99bc0b145e7d7bf5e4bfa4c34bc419905684a3042c6c271c9c18841a154f95
+  data.tar.gz: 881dcf747b8a6c24abc2412286b127dfd92f538bbd59fe190877cc7ffb384b31
 SHA512:
-  metadata.gz: 31ed5d0a6dbce63e91ccfbc240e4bbb2a3b835bebe2f1735b9a3e4491b7e87cec02e7bbd03809838494a2dcdf66879f1ca17f60a4feb05431e695475e0b9776b
-  data.tar.gz: 2a9e47666a44a7d4c8782c9a6f9bca1b15d68a271302ef765155106d8039c95d855e4cff7095584f4c1dc827c2424dddd7fae7deec4befb28ba3be7950c1d937
+  metadata.gz: 26a751147067f809f2a9b7cb52835a0125cf1426eb9873b5e67534d515f1c05080640dcbeb6ec4cf099e026dd3d8d207c2a7714aab26d7d33d6c2b9954b6b233
+  data.tar.gz: c070ae8eee82ea3679ed8e1703fc6151b3404dfe8f8cd4e35b89a7bb004d58e17706e5aff7553533a82c10f5dad5d180737c5022b544a78d169f7e75397f2a1f

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +1 @@
+<svg 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>

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

@@ -0,0 +1 @@
+<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-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>

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

@@ -0,0 +1 @@
+<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"/></svg>

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

@@ -0,0 +1 @@
+<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"/></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.25 7c0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25 1.25.56 1.25 1.25zm10.75 5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-2 0c0-5.514-4.486-10-10-10s-10 4.486-10 10 4.486 10 10 10 10-4.486 10-10zm-13-2v2h2v6h2v-8h-4z"/></svg>

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

@@ -0,0 +1 @@
+<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-12zm-1 6h2v8h-2v-8zm1 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="18" height="18" viewBox="0 0 24 24"><path fill="#97C344" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6zm0-15.9c-3.4 0-6.3 2.8-6.3 6.3s2.8 6.2 6.3 6.2 6.2-2.8 6.2-6.2-2.8-6.3-6.2-6.3z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="18" height="18" viewBox="0 0 24 24"><path fill="#c2bf9d" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path></svg>

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

@@ -0,0 +1,255 @@
+/*!
+ * 
+ *    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_self
+ *   
+ */
+(function(e, a) { for(var i in a) e[i] = a[i]; }(window, /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showSpinner", function() { return showSpinner; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hideSpinner", function() { return hideSpinner; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "disableActionElements", function() { return disableActionElements; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "enableActionElements", function() { return enableActionElements; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "closeAlert", function() { return closeAlert; });
+var SPINNER_ANIMATION_TIMEOUT = 125;
+function showSpinner(button) {
+  // Adjust the width of the button
+  button.width(button.width() + $('.spinner').outerWidth(true)); // Show the spinner
+
+  setTimeout(function () {
+    button.find('.spinner').css('display', 'flex');
+  }, SPINNER_ANIMATION_TIMEOUT);
+}
+function hideSpinner() {
+  $('button[class^="button"]').each(function (_, button) {
+    setTimeout(function () {
+      // Hide the spinner
+      $(button).find('.spinner').hide(); // Adjust the width of the button
+
+      $(button).width($(button).data('oldWidth'));
+    }, SPINNER_ANIMATION_TIMEOUT);
+  });
+}
+function disableActionElements() {
+  $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function (_, button) {
+    $(button).addClass('actions--disabled');
+  });
+}
+function enableActionElements() {
+  $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function (_, button) {
+    $(button).removeClass('actions--disabled');
+  });
+}
+function closeAlert() {
+  $('.flash').removeClass('flash--shown').delay(700).queue(function () {
+    $(this).remove();
+  });
+}
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(3);
+module.exports = __webpack_require__(0);
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+(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 (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);
+      }); // Firefox bug fix
+
+      $input.on('focus', function () {
+        $input.addClass('has-focus');
+      }).on('blur', function () {
+        $input.removeClass('has-focus');
+      });
+    });
+  };
+
+  $(document).on('ready page:load turbolinks:load', onDOMReady);
+})(jQuery);
+
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXTERNAL MODULE: ./app/javascript/beyond_canvas/initializers/functions.js
+var functions = __webpack_require__(0);
+
+// CONCATENATED MODULE: ./app/javascript/beyond_canvas/initializers/buttons.js
+
+
+(function ($) {
+  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);
+      input.bind('invalid', function (e) {
+        if ($(input).is(':hidden')) {
+          e.preventDefault();
+        }
+
+        Object(functions["hideSpinner"])();
+        Object(functions["enableActionElements"])();
+      });
+    });
+    $('button[class^="button"]').each(function () {
+      var button = $(this); // Add width attribute and save old width
+
+      button.width(button.width());
+      button.data('oldWidth', button.width()); // Add the spinner
+
+      button.prepend("\n        <div class=\"spinner\">\n          <div class=\"bounce1\"></div>\n          <div class=\"bounce2\"></div>\n          <div class=\"bounce3\"></div>\n        </div>"); // Bind ajax:success and ajax:error to the form the button belongs to
+
+      button.closest('form').on('ajax:success', function () {
+        Object(functions["hideSpinner"])();
+        Object(functions["enableActionElements"])();
+      }).on('ajax:error', function () {
+        Object(functions["hideSpinner"])();
+        Object(functions["enableActionElements"])();
+      });
+    });
+  };
+
+  $(document).on('click', '[class^="button"]', function () {
+    Object(functions["disableActionElements"])();
+    Object(functions["showSpinner"])($(this));
+  });
+  $(document).on('ready page:load turbolinks:load', onDOMReady);
+})(jQuery);
+// CONCATENATED MODULE: ./app/javascript/beyond_canvas/initializers/flash.js
+
+
+(function ($) {
+  var onDOMReady = function onDOMReady() {
+    $('.flash').each(function () {
+      $(this).css('right', -$(this).width() + 'px');
+    });
+    setTimeout(function () {
+      $('.flash').addClass('flash--shown');
+    }, 100);
+  };
+
+  $(document).on('click', '.flash', function () {
+    Object(functions["closeAlert"])();
+  });
+  $(document).on('ready page:load turbolinks:load', onDOMReady);
+})(jQuery);
+// EXTERNAL MODULE: ./app/javascript/beyond_canvas/initializers/inputs.js
+var initializers_inputs = __webpack_require__(2);
+
+// CONCATENATED MODULE: ./app/javascript/beyond_canvas/base.js
+
+
+
+
+/***/ })
+/******/ ])));

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

@@ -0,0 +1,28 @@
+@import "bourbon";
+
+@import "settings/breakpoints";
+@import "settings/variables";
+@import "settings/reset_css";
+@import "settings/typography";
+
+@import "utilities/functions";
+@import "utilities/mixins";
+
+@import "components/actions";
+@import "components/buttons";
+@import "components/cards";
+@import "components/comments";
+@import "components/containers";
+@import "components/flash";
+@import "components/forms";
+@import "components/inputs";
+@import "components/layouts";
+@import "components/links";
+@import "components/main";
+@import "components/margins";
+@import "components/markdown";
+@import "components/notices";
+@import "components/relative";
+@import "components/tables";
+@import "components/spinner";
+@import "components/texts";

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

@@ -0,0 +1,6 @@
+.actions {
+  &--disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,112 @@
+%button {
+  @include padding($button-padding);
+
+  @if $button-box-shadow != true {
+    padding-top: 7px;
+  }
+
+  align-items: center;
+  border-radius: $button-border-radius;
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  display: flex;
+  font-weight: $button-font-weight;
+  justify-content: flex-end;
+  line-height: 1;
+  outline: none;
+  transition: $main-transition;
+}
+
+@mixin button-solid($background, $color) {
+  @include background-color-darken($background, 10%);
+
+  color: $color;
+
+  .spinner {
+    display: none;
+
+    > div {
+      background-color: $color;
+    }
+  }
+
+  &:hover {
+    border-color: darken($background, 10%);
+  }
+}
+
+@mixin button-transparent($background) {
+  background-color: transparent;
+  border-color: $background;
+  color: $background;
+
+  .spinner {
+    display: none;
+
+    > div {
+      background-color: $background;
+    }
+  }
+
+  &:hover {
+    background-color: lighten($background, 40%);
+  }
+}
+
+@mixin button-border($background) {
+  border-color: $background;
+
+  @if $button-box-shadow == true {
+    border-bottom-width: 2px;
+    border-bottom-color: darken($background, 10%);
+  }
+}
+
+.button {
+  &__solid {
+    &--primary {
+      @extend %button;
+
+      @include button-solid($button-primary-background, $button-primary-color);
+      @include button-border($button-primary-background);
+    }
+
+    &--secondary {
+      @extend %button;
+
+      @include button-solid($button-secondary-background, $button-secondary-color);
+      @include button-border($button-secondary-background);
+    }
+
+    &--danger {
+      @extend %button;
+
+      @include button-solid($button-danger-background, $button-danger-color);
+      @include button-border($button-danger-background);
+    }
+  }
+
+  &__transparent {
+    &--primary {
+      @extend %button;
+
+      @include button-transparent($button-primary-background);
+      @include button-border($button-primary-background);
+    }
+
+    &--secondary {
+      @extend %button;
+
+      @include button-transparent($button-secondary-background);
+      @include button-border($button-secondary-background);
+    }
+
+    &--danger {
+      @extend %button;
+
+      @include button-transparent($button-danger-background);
+      @include button-border($button-danger-background);
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+.card {
+  background: $white;
+  border-radius: $card-border-radius;
+  box-shadow: $card-box-shadow;
+
+  &:not(:last-child) {
+    margin-bottom: $card-margin;
+  }
+
+  &--relative {
+    position: relative;
+  }
+
+  &--padding {
+    @include padding($card-padding);
+
+    box-sizing: border-box;
+  }
+
+  &__separator {
+    @include margin($card-separator-spacing null);
+
+    border-bottom: 1px solid $card-separator-color;
+    left: -#{$card-padding};
+    position: relative;
+    width: calc(100% + 2 * #{$card-padding});
+  }
+
+  &__headline {
+    color: $card-title-color;
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+}