beyond_canvas 0.12.0.pre → 0.15.1.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a704eb8fc8c4b55d55948f72b6f694d67bac4c4fd668a3542f1c2e0a3826bfdb
-  data.tar.gz: 9521ae434f1eeee686b9f3421a79057cf807ad854f881be29e2d8ccffceab5e1
+  metadata.gz: ef55151b505d03b5e940bbb09fa64b01bf267426fb5d2b20f25a74a0d4226534
+  data.tar.gz: b2430821affb163c1ffda7cf4611bc924e310cb21cb02d7ef461b88de594385c
 SHA512:
-  metadata.gz: bd1726b41d4a3e55a4704660b2056dad15a4ec191b35377bb4275b2396885fa1591dd4402f2ff21b29035ae61a4719d54d137ab509efcd04287a400674616f3a
-  data.tar.gz: fa0bec465852750728d95e985a61797fde9625d38c771fe2a97f367475f8ffbfbeaff17bba23e12c30869b0c3583b6b7fb6f6eba57fe82a47eedf9a9f3aadc90
+  metadata.gz: 6fcaa57a073215b62c451b5d325022384ad1a8c1a77ecefa50caf40481150ed1c43e18cc5e92478f19011b15929db3f5b665124c2438f2bcd78f7d48bda384aa
+  data.tar.gz: d8ab25f70ae9821cb23fab3be6f419f00be764281b02632d4527f0023ae2e711b32e8bbb04d3a322ab6affafc992d3b11b2d0d4a37c1f1e404bcbeea9d623d34

data/README.md

@@ -49,26 +49,7 @@
     $ rails g beyond_canvas:install
     ```
 
-    This will generate `config/initializers/beyond_canvas.rb` file, used for general Beyond Canvas configuration
-
-## Style Customization
-
-Beyond Canvas comes with _out-of-the-box_ styles to make your app look like as a Beyond integrated one. If you want to customize the gem styles, follow these instructions:
-
-1. Run the custom style generator:
-
-    ```bash
-    $ rails g beyond_canvas:custom_styles
-    ```
-
-    This command will generate a file (`app/assets/stylesheets/_beyond_canvas_custom_styles.sass`) that contains all variables you can customize.
-
-1. Import the custom styles **before** Beyond Canvas itself (to override the default styles) on `application.scss`:
-
-    ```scss
-    @import 'beyond_canvas_custom_styles'
-    @import 'beyond_canvas'
-    ```
+    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
 

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,106 @@
+/*
+ * 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(factory) {
+  typeof define === "function" && define.amd ? define([ "jquery" ], factory) : factory();
+})(function() {
+  "use strict";
+  var SPINNER_ANIMATION_TIMEOUT = 125;
+  (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();
+          }
+          $('button[class^="button"]').each(function() {
+            hideSpinner($(this));
+          });
+          enableActionElements();
+        });
+      });
+      $('button[class^="button"]').each(function() {
+        var button = $(this);
+        button.width(button.width());
+        button.data("oldWidth", button.width());
+        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() {
+          hideSpinner(button);
+          enableActionElements();
+        }).on("ajax:error", function() {
+          hideSpinner(button);
+          enableActionElements();
+        });
+      });
+    };
+    $(document).on("click", '[class^="button"]', function() {
+      disableActionElements();
+      showSpinner($(this));
+    });
+    $(document).on("ready page:load turbolinks:load", onDOMReady);
+  })(jQuery);
+  function showSpinner(button) {
+    button.width(button.width() + $(".spinner").outerWidth(true));
+    setTimeout(function() {
+      button.find(".spinner").css("display", "flex");
+    }, SPINNER_ANIMATION_TIMEOUT);
+  }
+  function hideSpinner(button) {
+    setTimeout(function() {
+      button.find(".spinner").hide();
+      button.width(button.data("oldWidth"));
+    }, SPINNER_ANIMATION_TIMEOUT);
+  }
+  function disableActionElements() {
+    $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
+      $(this).addClass("actions--disabled");
+    });
+  }
+  function enableActionElements() {
+    $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
+      $(this).removeClass("actions--disabled");
+    });
+  }
+  (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() {
+      closeAlert();
+    });
+    $(document).on("ready page:load turbolinks:load", onDOMReady);
+  })(jQuery);
+  function closeAlert() {
+    $(".flash").removeClass("flash--shown").delay(700).queue(function() {
+      $(this).remove();
+    });
+  }
+  (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);
+        });
+        $input.on("focus", function() {
+          $input.addClass("has-focus");
+        }).on("blur", function() {
+          $input.removeClass("has-focus");
+        });
+      });
+    };
+    $(document).on("ready page:load turbolinks:load", onDOMReady);
+  })(jQuery);
+});

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;
+  }
+}

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

@@ -0,0 +1,6 @@
+.comment {
+  padding: 20px;
+  box-sizing: border-box;
+  background: $comment-background;
+  color: $comment-color;
+}

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

@@ -0,0 +1,37 @@
+$columns: 2, 3, 4;
+
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  &--center {
+    justify-content: center;
+  }
+
+  &__column {
+
+    @each $column in $columns {
+
+      &--#{$column} {
+        width: 100%;
+
+        @media (min-width: $laptop) {
+          width: calc((100% - (#{$column} - 1) * #{$container-spacing}) / #{$column});
+
+          &:not(:last-child) {
+            margin-right: $container-spacing;
+          }
+        }
+
+        &:not(:last-child) {
+          margin-bottom: $container-spacing;
+
+          @media (min-width: $laptop) {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+.flash {
+  @include position(fixed, 70px null null null);
+
+  background-color: $white;
+  border-radius: $flash-border-radius;
+  box-shadow: $flash-box-shadow;
+  display: flex;
+  overflow: hidden;
+  transition: 0.7s linear;
+  z-index: 9999;
+
+  &--shown {
+    // sass-lint:disable no-important
+    right: 25px !important;
+    // sass-lint:enable no-important
+    transition: 0.4s linear;
+  }
+
+  &__icon {
+    @include padding(11px 8px);
+
+    display: flex;
+
+    > svg {
+      @include size(18px);
+
+      fill: $white;
+    }
+
+    &--success,
+    &--notice {
+      background-color: $flash-success;
+    }
+
+    &--info {
+      background-color: $flash-info;
+    }
+
+    &--warning {
+      background-color: $flash-warning;
+    }
+
+    &--error {
+      background-color: $flash-error;
+    }
+  }
+
+  &__message {
+    @include padding(10px 15px);
+
+    box-sizing: border-box;
+    color: $flash-color;
+  }
+
+  &__close {
+    @include padding(10px 15px);
+
+    cursor: pointer;
+
+    > svg {
+      @include size(8px);
+
+      fill: $flash-color;
+    }
+  }
+}