beyond_canvas 0.15.3.pre → 0.18.0.pre

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

@@ -0,0 +1,28 @@
+.action_bar {
+  width: 100%;
+  height: $action-bar-height;
+  background-color: $action-bar-background;
+  border-bottom: $action-bar-shadow;
+  padding: 0 25px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+
+  &--menu {
+    top: $menu-height;
+  }
+
+  &--left {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  &--right {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

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

@@ -0,0 +1,29 @@
+.breadcrumbs {
+  font-size: 90%;
+  margin-bottom: 30px;
+
+  .home-icon {
+    width: 12px;
+    height: 12px;
+    fill: $breadcrum-color-current;
+  }
+
+  .arrow-right {
+    width: 8px;
+    height: 8px;
+    margin-left: 7px;
+    margin-right: 7px;
+    fill: $breadcrum-color;
+  }
+}
+
+.breadcrumb {
+  &__item {
+    color: $breadcrum-color-current;
+
+    &--current {
+      color: $breadcrum-color;
+      pointer-events: none;
+    }
+  }
+}

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

@@ -10,7 +10,7 @@
   border-width: 1px;
   border-style: solid;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   font-weight: $button-font-weight;
   justify-content: flex-end;
   line-height: 1;

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

@@ -0,0 +1,10 @@
+.debug_dump {
+  margin: 50px auto 0;
+  background-color: #dedede;
+  max-width: 50%;
+  width: 100%;
+  border: 1px solid #666666;
+  border-radius: 4px;
+  padding: 20px;
+  box-sizing: border-box;
+}

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

@@ -1,6 +1,5 @@
 %form__actions {
-  align-items: center;
-  display: flex;
+  overflow: auto;
 }
 
 .form {
@@ -14,29 +13,27 @@
   }
 
   &__actions {
-    &--spaced {
-      @extend %form__actions;
-
-      justify-content: space-between;
-    }
-
     &--left {
       @extend %form__actions;
 
-      justify-content: flex-start;
+      > * {
+        float: left;
 
-      *:not(:last-child) {
-        margin-right: 30px;
+        &:not(:first-child) {
+          margin-left: 30px;
+        }
       }
     }
 
     &--right {
       @extend %form__actions;
 
-      justify-content: flex-end;
+      > * {
+        float: right;
 
-      *:not(:first-child) {
-        margin-left: 30px;
+        &:not(:first-child) {
+          margin-right: 30px;
+        }
       }
     }
   }

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

@@ -0,0 +1,12 @@
+.grid {
+  &__container {
+    display: grid;
+  gap: 40px;
+  grid-template-columns: repeat(auto-fill, 385px);
+  }
+
+  &__item {
+    border: 1px solid #dfdecc;
+    padding: 20px;
+  }
+}

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

@@ -1,9 +1,12 @@
-%body {
-  background-color: $main-background;
+.main {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: scroll;
 }
 
 .body--public {
-  @extend %body;
+  background-color: $main-background-public;
 
   .main-wrapper {
     @include margin(32px auto);
@@ -20,20 +23,16 @@
   }
 }
 
-.body--single-page {
-  @extend %body;
+.body--application {
+  background-color: $main-background-application;
 
   .main-wrapper {
-    @include margin(32px auto);
+    @include margin(25px auto 100px auto);
 
-    max-width: 876px;
-    width: 94%;
+    width: calc(100% - 50px);
 
-    .logo {
-      @include margin($logo-margin-top-public auto $logo-margin-bottom-public);
-
-      display: block;
-      width: 238px;
+    &--action_bar {
+      margin-top: 12px;
     }
   }
 }

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

@@ -6,4 +6,12 @@
   &--bottom {
     margin-bottom: 30px;
   }
+
+  &--left {
+    margin-left: 30px;
+  }
+
+  &--right {
+    margin-right: 30px;
+  }
 }

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

@@ -0,0 +1,40 @@
+.menu {
+  @include padding(0 15px);
+
+  height: $menu-height;
+  background-color: $menu-background;
+  align-items: center;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+
+  .logo {
+    height: $menu-logo-height;
+  }
+
+  &--center {
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
+  &__item {
+    @include margin(0 15px);
+    color: $menu-item-color;
+
+    &:hover {
+      color: $menu-item-hover-color;
+    }
+
+    &--active {
+      color: $menu-item-selected-color;
+
+      &:hover {
+        color: $menu-item-selected-hover-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+.modal {
+
+  &__background {
+    width: 100%;
+    height: 100%;
+    background-color: $modal-background-color;
+    position: absolute;
+    z-index: 99999;
+    justify-content: center;
+    align-items: center;
+    display: none;
+
+    .card {
+      width: 100%;
+      max-width: $modal-width;
+      margin: 25px;
+    }
+  }
+
+  &__headline {
+    margin-bottom: 30px;
+    font-size: 24px;
+    font-weight: normal;
+    line-height: 1.2;
+    color: rgb(62, 62, 62);
+  }
+
+  &__close {
+    @include position(absolute, $modal-padding $modal-padding null null);
+    @include size(14px);
+
+    cursor: pointer;
+    fill: $modal-close-icon-color;
+  }
+}

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

@@ -0,0 +1,35 @@
+.scrollbox {
+  max-height: 65vh;
+  overflow: auto;
+  width: 100%;
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  background:
+    /* Shadow covers */
+    linear-gradient(white 30%, rgba(255,255,255,0)),
+    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
+
+    /* Shadows */
+    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
+    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+  background:
+    /* Shadow covers */
+    linear-gradient(white 30%, rgba(255,255,255,0)),
+    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
+
+    /* Shadows */
+    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+  /* Opera doesn’t support this in the shorthand */
+  background-attachment: local, local, scroll, scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

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

@@ -0,0 +1,53 @@
+.sidebar {
+  height: 100vh;
+  width: $sidebar-width;
+  min-width: $sidebar-width;
+  background-color: $sidebar-background;
+  position: relative;
+
+  &__header, &__footer {
+    width: 100%;
+  }
+
+  &__header {
+    background-color: $sidebar-header-background;
+    height: 73px;
+    padding-left: 15px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  &__logo {
+    width: 128px;
+    height: 30px;
+    background-color: white;
+  }
+
+  &__item {
+    width: 120px;
+    height: 14px;
+    background-color: $sidebar-item-background;
+    margin: 16px 0 24px 35px;
+
+    &--selected {
+      background-color: $sidebar-item-selected-background;
+    }
+  }
+
+  &__footer {
+    background-color: $sidebar-footer-background;
+    height: 40px;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    background-color: $sidebar-footer-icon-background;
+  }
+}

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

@@ -0,0 +1,7 @@
+.title {
+  margin-bottom: 25px;
+  line-height: 1;
+  font-weight: normal;
+  font-size: 190%;
+  color: $title-color;
+}

data/app/assets/stylesheets/beyond_canvas/settings/_breakpoints.scss

@@ -1,6 +1,6 @@
-$mobile-s:  321px !global;
-$mobile-m:  376px !global;
-$mobile-l:  426px !global;
-$tablet:    769px !global;
-$laptop:   1025px !global;
-$laptop-l: 1441px !global;
+$mobile-s:  321px;
+$mobile-m:  376px;
+$mobile-l:  426px;
+$tablet:    769px;
+$laptop:   1025px;
+$laptop-l: 1441px;

data/app/assets/stylesheets/beyond_canvas/settings/_variables.scss

@@ -2,8 +2,8 @@
 // Colors
 // ************************************************************
 
-$white: rgb(255, 255, 255) !global;
-$black: rgb(0, 0, 0) !global;
+$white: rgb(255, 255, 255);
+$black: rgb(0, 0, 0);
 $palette-primary: rgb(78, 183, 168) !default;
 $palette-secondary: rgb(28, 53, 69) !default;
 $palette-cancel: rgb(153, 153, 153) !default;
@@ -13,24 +13,25 @@ $palette-danger: rgb(218, 60, 60) !default;
 // General styles
 // ************************************************************
 
-$main-background: rgb(233, 232, 220) !default;
-$main-transition: 0.125s ease-in !global;
+$main-background-public: rgb(233, 232, 220) !default;
+$main-background-application: rgb(233, 232, 220) !default;
+$main-transition: 0.125s ease-in;
 
 // ************************************************************
 // Typography
 // ************************************************************
 
-$main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif' !global;
+$main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
 $main-color: rgb(62, 62, 62) !default;
-$main-line-height: 1.5 !global;
-$main-font-size: 14px !global;
+$main-line-height: 1.5;
+$main-font-size: 14px;
 
 // ************************************************************
 // Headlines
 // ************************************************************
 
 $headline-color: rgb(122, 118, 76) !default;
-$headline-line-height: 1 !global;
+$headline-line-height: 1;
 
 // ************************************************************
 // Links
@@ -55,8 +56,8 @@ $button-danger-color: $white !default;
 
 $button-border-radius: 3px !default;
 $button-box-shadow: true !default;
-$button-font-weight: 700 !global;
-$button-padding: 6px 12px 7px !global;
+$button-font-weight: 700;
+$button-padding: 6px 12px 7px;
 
 // ************************************************************
 // Cards
@@ -64,17 +65,17 @@ $button-padding: 6px 12px 7px !global;
 
 $card-border-radius: 3px !default;
 $card-box-shadow: 0 2px 7px rgba($black, 0.2) !default;
-$card-padding: 40px !global;
-$card-margin: 30px !global;
+$card-padding: 40px;
+$card-margin: 30px;
 $card-separator-color: rgb(222, 222, 222) !default;
-$card-separator-spacing: 50px !global;
+$card-separator-spacing: 50px;
 $card-title-color: rgb(247, 133, 96) !default;
 
 // ************************************************************
 // Containers
 // ************************************************************
 
-$container-spacing: 30px !global;
+$container-spacing: 30px;
 
 // ************************************************************
 // Labels
@@ -94,19 +95,19 @@ $input-errors-color: $palette-danger !default;
 // Checkboxes
 // ************************************************************
 
-$checkbox-checked-color: #97C344 !default;
-$checkbox-checked-background: #ffffff !default;
-$checkbox-unchecked-color: #C2BF9D !default;
-$checkbox-unchecked-background: #ffffff !default;
+$checkbox-checked-color: #97C344 !default; // This value MUST be HEX
+$checkbox-checked-background: #ffffff !default; // This value MUST be HEX
+$checkbox-unchecked-color: #C2BF9D !default; // This value MUST be HEX
+$checkbox-unchecked-background: #ffffff !default; // This value MUST be HEX
 
 // ************************************************************
 // Radiobuttons
 // ************************************************************
 
-$radio-checked-color: #97C344 !default;
-$radio-checked-background: #ffffff !default;
-$radio-unchecked-color: #C2BF9D !default;
-$radio-unchecked-background: #ffffff !default;
+$radio-checked-color: #97C344 !default; // This value MUST be HEX
+$radio-checked-background: #ffffff !default; // This value MUST be HEX
+$radio-unchecked-color: #C2BF9D !default; // This value MUST be HEX
+$radio-unchecked-background: #ffffff !default; // This value MUST be HEX
 
 // ************************************************************
 // Hints
@@ -160,6 +161,39 @@ $notice-error-background: rgb(218, 60, 60) !default;
 $notice-border-radius: 4px !default;
 $notice-color: rgb(153, 153, 153) !default;
 
+// ************************************************************
+// Breadcrums
+// ************************************************************
+
+$breadcrum-color: rgb(122, 118, 76) !default;
+$breadcrum-color-current: rgb(61, 149, 137) !default;
+
+// ************************************************************
+// Titles
+// ************************************************************
+
+$title-color: rgb(122, 118, 76) !default;
+
+// ************************************************************
+// Menu
+// ************************************************************
+
+$menu-background: #1c3445 !default;
+$menu-height: 60px !default;
+$menu-logo-height: 30px !default;
+$menu-item-color: #9ab5c6 !default;
+$menu-item-hover-color: lighten($menu-item-color, 13%) !default;
+$menu-item-selected-color: #4eb7a8 !default;
+$menu-item-selected-hover-color: lighten($menu-item-selected-color, 13%) !default;
+
+// ************************************************************
+// Action bar
+// ************************************************************
+
+$action-bar-background: rgb(255, 255, 255) !default;
+$action-bar-shadow: 1px solid rgba(0, 0, 0, 0.2) !default;
+$action-bar-height: 73px !default;
+
 // ************************************************************
 // Markdown
 // ************************************************************
@@ -169,3 +203,24 @@ $markdown-table-border-color: #dfe2e5;
 $markdown-blockquote-font-color: #6a737d;
 $markdown-blockquote-border-color: #dfe2e5;
 $markdown-hr-background: #e1e4e8;
+
+// ************************************************************
+// Sidebar
+// ************************************************************
+
+$sidebar-width: 250px;
+$sidebar-background: #1d3544;
+$sidebar-header-background: #12222c;
+$sidebar-footer-background: #12222c;
+$sidebar-footer-icon-background: #9ab5c5;
+$sidebar-item-background: #9ab5c6;
+$sidebar-item-selected-background: #4eb7a8;
+
+// ************************************************************
+// Modals
+// ************************************************************
+
+$modal-padding: 10px;
+$modal-width: 650px;
+$modal-close-icon-color: #8b8b8b !default;
+$modal-background-color: rgba(0, 0, 0, 0.5) !default;