beyond_canvas 0.19.2.pre → 0.23.0.pre

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

@@ -1,17 +1,93 @@
+%link_disabled {
+  @include color-darken($link-disabled-color, 10%);
+
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+%link {
+  line-height: 1.2;
+}
+
+@mixin external($color) {
+  background-image: url('data:image/svg+xml;utf8,\
+    <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>');
+
+  background-position-x: right;
+  background-position-y: center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  padding-right: 18px;
+
+  @include recolor($color, 1);
+
+  &:hover {
+    @include recolor(darken($color, 10%), 1);
+
+    transition: $main-transition;
+  }
+}
+
 .link {
-  &__icon {
-    margin-right: 10px;
+  &__icon--left,
+  &__icon--right {
+    @include size(14px);
+  }
+
+  &__icon--left {
+    margin-right: 6px;
+  }
+
+  &__icon--right {
+    margin-left: 6px;
   }
 
   &--primary {
-    @include color-darken($link-primary-color, 10%);
+    color: var(--primaryLink-color);
+
+    @extend %link;
+
+    &:hover {
+      color: var(--primaryLink-hover-color);
+    }
+
+    &[target="_blank"] {
+      @include external($link-primary-color)
+    }
   }
 
   &--secondary {
-    @include color-darken($link-secondary-color, 10%);
+    color: var(--defaultLink-color);
+
+    @extend %link;
+
+    &:hover {
+      color: var(--defaultLink-hover-color);
+    }
+
+    &[target="_blank"] {
+      @include external($link-secondary-color)
+    }
   }
 
   &--danger {
     @include color-darken($link-danger-color, 10%);
+
+    @extend %link;
+
+    &[target="_blank"] {
+      @include external($link-secondary-color)
+    }
+  }
+
+  &--primary,
+  &--secondary,
+  &--danger {
+    &:disabled,
+    &[disabled] {
+      @extend %link_disabled;
+    }
   }
 }

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

@@ -6,10 +6,10 @@
 }
 
 .body--public {
-  background-color: $main-background-public;
+  background-color: var(--workspace-background);
 
   .main-wrapper {
-    @include margin(32px auto);
+    @include margin(32px auto 100px);
 
     max-width: 531px;
     width: 94%;
@@ -24,7 +24,7 @@
 }
 
 .body--application {
-  background-color: $main-background-application;
+  background-color: var(--workspace-background);
 
   .main-wrapper {
     @include margin(25px auto 100px auto);

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

@@ -30,13 +30,26 @@
     display: inherit;
   }
 
+  &__icon {
+    @include size(14px);
+
+    margin-right: 6px;
+    fill: $menu-item-color;
+  }
+
   &__item {
     @include margin(0 15px);
     line-height: 1;
     color: $menu-item-color;
+    display: flex;
+    align-items: center;
 
     &:hover {
       color: $menu-item-hover-color;
+
+      .menu__icon {
+        fill: $menu-item-hover-color;
+      }
     }
 
     &--active {

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

@@ -1,35 +1,65 @@
 .modal {
+  @include position(fixed, 0 0 0 0);
 
-  &__background {
+  align-items: center;
+  background-color: var(--modal-overlay-background);
+  content: '';
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+  z-index: 99999;
+  visibility: hidden;
+
+  &__dialog {
     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;
-    }
+    max-width: $modal-width;
+    margin: 25px;
   }
 
-  &__headline {
+  &__content {
+    @include padding(var(--modal-container-padding));
+
+    background: var(--notification-background);
+    border-radius: var(--notification-borderRadius);
+    box-shadow: var(--notification-boxShadow);
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  &__header {
     margin-bottom: 30px;
+  }
+
+  &__title {
     font-size: 24px;
     font-weight: normal;
     line-height: 1.2;
-    color: rgb(62, 62, 62);
+    color: var(--notification-text);
   }
 
   &__close {
-    @include position(absolute, $modal-padding $modal-padding null null);
+    // SEE: https://newbedev.com/change-svg-fill-color-in-before-or-after-css
+    @include position(absolute, 20px 20px null null);
+    @include prefixer(mask, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174L21.03-.046l-9.09 9.179L2.764.045l-2.81 2.81L9.14 11.96.045 21.144l2.81 2.81 9.112-9.192 9.18 9.1z"></path></svg>'), ('webkit'));
+    @include prefixer(mask-size, cover, ('webkit'));
     @include size(14px);
 
+    background-color: var(--modal-closeButton-icon);
+    content: '';
     cursor: pointer;
-    fill: $modal-close-icon-color;
+    display: inline-block;
+
+    &:hover {
+      background-color: var(--modal-closeButton-icon-hover);
+    }
+  }
+
+  &__body {
+    @extend %scrollbox;
+  }
+
+  &__footer {
+    margin-top: 35px;
   }
 }

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

@@ -1,38 +1,38 @@
 .notice {
-  border-radius: $notice-border-radius;
+  border-radius: var(--notification-borderRadius);
   border: 1px solid;
   box-sizing: border-box;
   display: flex;
 
   &--success {
-    border-color: $notice-success-background;
+    border-color: var(--notification-success);
 
     .notice__icon {
-      background-color: $notice-success-background;
+      background-color: var(--notification-success);
     }
   }
 
   &--info {
-    border-color: $notice-info-background;
+    border-color: var(--notification-info);
 
     .notice__icon {
-      background-color: $notice-info-background;
+      background-color: var(--notification-info);
     }
   }
 
   &--warning {
-    border-color: $notice-warning-background;
+    border-color: var(--notification-warning);
 
     .notice__icon {
-      background-color: $notice-warning-background;
+      background-color: var(--notification-warning);
     }
   }
 
   &--error {
-    border-color: $notice-error-background;
+    border-color: var(--notification-danger);
 
     .notice__icon {
-      background-color: $notice-error-background;
+      background-color: var(--notification-danger);
     }
   }
 
@@ -44,15 +44,14 @@
     > svg {
       @include size(18px);
 
-      fill: $white;
+      fill: var(--notification-background);
     }
   }
 
   &__content {
     @include padding(8px 14px);
 
-    color: $notice-color;
-    display: flex;
-    align-items: center;
+    color: var(--notification-text);
+    display: block;
   }
 }

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

@@ -1,6 +1,7 @@
-.scrollbox {
+%scrollbox {
   max-height: 65vh;
   overflow: auto;
+  padding-right: 20px;
   width: 100%;
 
   -ms-overflow-style: none;
@@ -28,8 +29,8 @@
 
   /* Opera doesn’t support this in the shorthand */
   background-attachment: local, local, scroll, scroll;
+}
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
+.scrollbox {
+  @extend %scrollbox;
 }

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

@@ -0,0 +1,70 @@
+.beyond-canvas {
+
+  .select2-dropdown--above {
+    border-top: 1px solid var(--inputField-border-focus) !important;
+  }
+
+  .select2-container--default .select2-selection--multiple {
+    border: 1px solid var(--inputField-border);
+    border-radius: 3px;
+  }
+
+  .select2-container--default.select2-container--focus .select2-selection--multiple{
+    border: 1px solid var(--inputField-border-focus);
+  }
+
+  .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
+  .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-color: var(--inputField-border-focus);
+  }
+
+  .select2-container--default.select2-container--disabled .select2-selection--multiple {
+    background-color: var(--inputField-background-disabled);
+    pointer-events: none;
+  }
+
+  .select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--smartInputField-suggestion-active);
+    color: var(--workspace-text);
+  }
+
+  .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: var(--smartInputField-value-background);
+    color: var(--smartInputField-value-text);
+    font-weight: bold;
+    font-size: 11px;
+    border-radius: var(--smartInputField-value-borderRadius);
+    border: none;
+    padding: 3px 7px 4px;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+
+  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    margin-left: 8px;
+    color: var(--smartInputField-value-icon);
+    font-size: 18px;
+    line-height: 0;
+
+    &:hover {
+      color: var(--smartInputField-value-icon-hover);
+    }
+  }
+
+  .select2-dropdown{
+    border: 1px solid var(--inputField-border-focus);
+    border-top: none;
+    z-index: 9999999;
+  }
+
+  .select2-results__option {
+    font-weight: 700;
+  }
+
+  .select2-results__option[aria-selected=true] {
+    display: none;
+  }
+}

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

@@ -0,0 +1,28 @@
+.status {
+  @include padding(4px 6px);
+  font-size: 12px;
+  border-radius: 3px;
+  line-height: 1.2;
+  font-weight: 500;
+
+  &--good {
+    background-color: var(--active-status-background);
+    color: var(--active-status-text);
+  }
+
+  &--warning {
+    background-color: var(--todo-status-background);
+    color: var(--todo-status-text);
+  }
+
+  &--danger {
+    background-color: var(--danger-status-background);
+    color: var(--danger-status-text);
+  }
+
+  &--neutral {
+    background-color: var(--outline-status-background);
+    border: 1px solid var(--outline-status-border);
+    color: var(--outline-status-text);
+  }
+}

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

@@ -0,0 +1,67 @@
+.step-list {
+
+  &__container {
+    background-color: var(--stepList-background);
+    padding: 25px;
+  }
+
+  &__title {
+    color: var(--stepList-headline);
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    margin-top: 0;
+  }
+
+  &__items {
+    width: 100%;
+    margin-left: -2px;
+
+    tr:last-child td {
+      padding-bottom: 0;
+
+      &::after {
+        height: 0;
+      }
+    }
+
+    td {
+      vertical-align: top;
+      padding-bottom: 20px;
+      position: relative;
+    }
+  }
+
+  &__bubble-column {
+    width: 35px;
+    text-align: center;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      left: 10px;
+      width: 2px;
+      height: 100%;
+      background-color: var(--stepList-bubble-line);
+    }
+  }
+
+  &__bubble {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: var(--stepList-bubble-background);
+    color: var(--stepList-bubble-text);
+    line-height: 19px;
+    font-size: 11px;
+    font-weight: bold;
+  }
+
+  &__headline {
+    font-weight: bold;
+    line-height: 1.2;
+    margin-bottom: 5px;
+    color: var(--stepList-headline);
+  }
+
+}