beyond_canvas 0.19.2.pre → 0.23.0.pre

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

@@ -1,65 +1,73 @@
 %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;
+  border-radius: var(--button-borderRadius);
+  border-width: 0;
   cursor: pointer;
   display: inline-flex;
-  font-weight: $button-font-weight;
+  font-weight: 700;
   justify-content: flex-end;
   line-height: 1;
   outline: none;
+  padding: var(--button-horizontal-padding) 12px;
   transition: $main-transition;
+  white-space: nowrap;
 }
 
-@mixin button-solid($background, $color) {
-  @include background-color-darken($background, 10%);
+%button_disabled {
+  border-color: var(--button-disabled-background);
+  background-color: var(--button-disabled-background);
+  pointer-events: none;
+  color: var(--button-disabled-text);
+  text-shadow: var(--button-disabled-textShadow);
+  border-bottom-color: #aaaaaa;
+}
 
-  color: $color;
+@mixin button-border-bottom($border-bottom-color) {
+  border-bottom: var(--button-borderBottom-width) solid var(#{$border-bottom-color});
+}
 
-  .spinner {
-    display: none;
+@mixin button-solid($background, $background-hover, $color) {
+  @include spinner($color);
 
-    > div {
-      background-color: $color;
-    }
-  }
+  background-color: var(#{$background});
+  color: var(#{$color});
 
   &:hover {
-    border-color: darken($background, 10%);
+    background-color: var(#{$background-hover});
   }
 }
 
-@mixin button-transparent($background) {
-  background-color: transparent;
-  border-color: $background;
-  color: $background;
+@mixin button-transparent($background, $background-hover, $color) {
+  @include spinner($color);
+
+  background-color: var(#{$background});
+  color: var(#{$color});
+  padding: calc(var(--button-horizontal-padding) - var(--button-outline-border-width)) 12px var(--button-horizontal-padding);
+  border: var(--button-outline-border-width) solid var(--button-outline-border-color);
+
+  &:hover {
+    background-color: var(#{$background-hover});
+  }
+}
 
+@mixin spinner($background) {
   .spinner {
     display: none;
 
     > div {
-      background-color: $background;
+      background-color: var(#{$background});
     }
   }
-
-  &:hover {
-    background-color: lighten($background, 40%);
-  }
 }
 
-@mixin button-border($background) {
-  border-color: $background;
+input[type=file][disabled] ~ .button__transparent--primary {
+  @extend %button_disabled;
+}
 
-  @if $button-box-shadow == true {
-    border-bottom-width: 2px;
-    border-bottom-color: darken($background, 10%);
+[class^='button__'] {
+  &:disabled,
+  &[disabled] {
+    @extend %button_disabled;
   }
 }
 
@@ -68,22 +76,22 @@
     &--primary {
       @extend %button;
 
-      @include button-solid($button-primary-background, $button-primary-color);
-      @include button-border($button-primary-background);
+      @include button-solid(--button-primary-background, --button-primary-background-hover, --button-text);
+      @include button-border-bottom(--button-primary-borderBottom-color);
     }
 
     &--secondary {
       @extend %button;
 
-      @include button-solid($button-secondary-background, $button-secondary-color);
-      @include button-border($button-secondary-background);
+      @include button-solid(--button-default-background, --button-default-background-hover, --button-text);
+      @include button-border-bottom(--button-default-borderBottom-color);
     }
 
     &--danger {
       @extend %button;
 
-      @include button-solid($button-danger-background, $button-danger-color);
-      @include button-border($button-danger-background);
+      @include button-solid(--button-danger-background, --button-danger-background-hover, --button-text);
+      @include button-border-bottom(--button-danger-borderBottom-color);
     }
   }
 
@@ -91,22 +99,8 @@
     &--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);
+      @include button-transparent(--button-outline-background, --button-outline-background-hover, --button-outline-text);
+      @include button-border-bottom(--button-primary-borderBottom-color);
     }
   }
 }

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

@@ -1,10 +1,20 @@
+%card {
+  background: var(--card-background);
+  border-radius: var(--card-borderRadius);
+  box-shadow: var(--card-shadow);
+}
+
+%card_padding {
+  @include padding(var(--card-padding));
+
+  box-sizing: border-box;
+}
+
 .card {
-  background: $white;
-  border-radius: $card-border-radius;
-  box-shadow: $card-box-shadow;
+  @extend %card;
 
   &:not(:last-child) {
-    margin-bottom: $card-margin;
+    margin-bottom: 30px;
   }
 
   &--relative {
@@ -12,22 +22,20 @@
   }
 
   &--padding {
-    @include padding($card-padding);
-
-    box-sizing: border-box;
+    @extend %card_padding;
   }
 
   &__separator {
-    @include margin($card-separator-spacing null);
+    @include margin(35px null);
 
-    border-bottom: 1px solid $card-separator-color;
-    left: -#{$card-padding};
+    border-bottom: var(--card-divider-border);
+    left: calc(-1 * var(--card-padding));
     position: relative;
-    width: calc(100% + 2 * #{$card-padding});
+    width: calc(100% + 2 * #{var(--card-padding)});
   }
 
   &__headline {
-    color: $card-title-color;
+    color: var(--card-headline);
     font-size: 20px;
     margin-bottom: 20px;
   }

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

@@ -0,0 +1,33 @@
+.collapse {
+
+  &:not(:last-child) {
+    margin-bottom: 24px;
+  }
+
+  &__content {
+    display: none;
+  }
+
+  &__button {
+    color: var(--primary-color);
+    font-weight: 700;
+    cursor: pointer;
+    display: block;
+    line-height: 1;
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__icon {
+    @include size(10px);
+
+    fill: var(--primary-color);
+    margin-right: 2px;
+
+    &--open {
+      transform: rotate(90deg);
+    }
+  }
+}

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

@@ -1,13 +1,13 @@
 .flash {
   @include position(fixed, 70px null null null);
 
-  background-color: $white;
-  border-radius: $flash-border-radius;
-  box-shadow: $flash-box-shadow;
+  background-color: var(--notification-background);
+  border-radius: var(--notification-borderRadius);
+  box-shadow: var(--notification-boxShadow);
   display: flex;
   overflow: hidden;
   transition: 0.7s linear;
-  z-index: 9999;
+  z-index: 999999;
 
   &--shown {
     // sass-lint:disable no-important
@@ -24,24 +24,25 @@
     > svg {
       @include size(18px);
 
-      fill: $white;
+      fill: var(--notification-background);
     }
 
     &--success,
     &--notice {
-      background-color: $flash-success;
+      background-color: var(--notification-success);
     }
 
     &--info {
-      background-color: $flash-info;
+      background-color: var(--notification-info);
     }
 
     &--warning {
-      background-color: $flash-warning;
+      background-color: var(--notification-warning);
     }
 
-    &--error {
-      background-color: $flash-error;
+    &--error,
+    &--alert {
+      background-color: var(--notification-danger);
     }
   }
 
@@ -49,7 +50,7 @@
     @include padding(10px 15px);
 
     box-sizing: border-box;
-    color: $flash-color;
+    color: var(--notification-text);
   }
 
   &__close {
@@ -60,7 +61,7 @@
     > svg {
       @include size(8px);
 
-      fill: $flash-color;
+      fill: var(--notification-text);
     }
   }
 }

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

@@ -1,5 +1,5 @@
 %form__actions {
-  overflow: auto;
+  overflow: hidden;
 }
 
 .form {
@@ -7,7 +7,7 @@
   &__actions {
     width: 100%;
 
-    &:not(:last-child) {
+    &:not(:last-of-type) {
       margin-bottom: 30px;
     }
   }

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

@@ -2,13 +2,20 @@ $controls: checkbox, radio;
 
 #{$all-text-inputs},
 select {
-  background-color: $white;
-  border: 1px solid $input-border-color;
-  border-radius: 3px;
+  background-color: var(--inputField-background);
+  border: 1px solid var(--inputField-border);
+  border-radius: var(--inputField-borderRadius);
   box-sizing: border-box;
+  order: 2;
   outline: none;
   padding: 6px 8px;
   width: 100%;
+
+  &:disabled {
+    background-color: var(--inputField-background-disabled) !important;
+    color: var(--inputField-text-disabled);
+    opacity: 1;
+  }
 }
 
 #{$all-text-inputs} {
@@ -17,7 +24,7 @@ select {
 
 #{$all-text-inputs-focus},
 select:focus {
-  border-color: $input-border-color-focus;
+  border-color: var(--inputField-border-focus);
 }
 
 select {
@@ -37,70 +44,208 @@ textarea {
 #{$all-text-inputs},
 select {
   &.input__error {
-    border-left: 2px solid $input-errors-color;
+    border-left: 2px solid var(--formGroup-validation-error);
 
     &:focus {
-      border: 1px solid $input-border-color-focus;
+      border: 1px solid var(--inputField-border-focus);
     }
   }
 }
 
 .input {
   &__label {
-    color: $label-color;
+    color: var(--formGroup-label);
     display: block;
     font-size: 13px;
     font-weight: bold;
+
+    &--disabled {
+      color: var(--check-disabled-text);
+    }
   }
 
   &__hint {
-    color: $hint-color;
+    color: var(--inputField-hint-text);
     font-size: 13px;
     margin-top: 1px;
   }
 
+  &__pre,
+  &__post {
+    background-color: var(--inputField-background-disabled);
+    border: 1px solid var(--inputField-border);
+    box-sizing: border-box;
+    color: var(--inputField-text-disabled);
+    line-height: 1;
+    outline: none;
+    padding: 6px 8px;
+  }
+
+  &__pre {
+    border-bottom-left-radius: var(--inputField-borderRadius);
+    border-top-left-radius: var(--inputField-borderRadius);
+    border-right: 0;
+    order: 1;
+
+    ~ input,
+    ~ select {
+      @include border-left-radius(0);
+    }
+  }
+
+  &__post {
+    border-bottom-right-radius: var(--inputField-borderRadius);
+    border-top-right-radius: var(--inputField-borderRadius);
+    border-left: 0;
+    order: 10;
+
+    ~ input,
+    ~ select {
+      @include border-right-radius(0);
+    }
+  }
+
   @each $control in $controls {
 
     &__#{$control} {
-      display: flex;
-      align-items: center;
-
-      .input__#{$control}__control {
-        @if $control == checkbox {
-          @include size(16px);
-        } @else if $control == radio {
-          @include size(18px);
-        }
 
+      &__control {
         cursor: pointer;
-        margin-right: 7px;
       }
 
-      input[type=#{$control}] + .input__#{$control}__control {
-        @if $control == checkbox {
-          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $checkbox-unchecked-background, '#', '%23')};' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $checkbox-unchecked-color, '#', '%23')}' d='M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z'%3E%3C/path%3E%3C/svg%3E%0A");
-        } @else if $control == radio {
-          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $radio-unchecked-background, '#', '%23')};' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $radio-unchecked-color, '#', '%23')}' 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'%3E%3C/path%3E%3C/svg%3E");
+      &--unchecked {
+        background: #fff;
+
+        path {
+          fill: var(--uncheck-color);
         }
       }
 
-      input[type=#{$control}]:checked + .input__#{$control}__control {
-        @if $control == checkbox {
-          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $checkbox-checked-background, '#', '%23')};' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $checkbox-checked-color, '#', '%23')}' 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'%3E%3C/path%3E%3C/svg%3E%0A");
-        } @else if $control == radio {
-          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $radio-checked-background, '#', '%23')};' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $radio-checked-color, '#', '%23')}' 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'%3E%3C/path%3E%3C/svg%3E");
+      &--checked {
+        background: #fff;
+
+        path {
+          fill: var(--check-color);
         }
       }
 
-      + div .input__label {
-        line-height: 1;
+      &:not(:checked) + .input__#{$control}__control .input__#{$control}--unchecked,
+      &:checked + .input__#{$control}__control .input__#{$control}--checked {
+        display: block !important;
+      }
+
+      &:disabled {
+        ~ div .input__label,
+        ~ div .input__hint {
+          cursor: default;
+          color: var(--check-disabled-text);
+        }
+
+        + .input__#{$control}__control .input__#{$control}--unchecked,
+        + .input__#{$control}__control .input__#{$control}--checked {
+          cursor: default;
+
+          path {
+            fill: var(--check-disabled-icon);
+          }
+        }
+      }
+
+      ~ div .input__label {
+        padding-left: 7px;
       }
 
-      + div .input__hint {
+      ~ div .input__hint {
+        padding-left: 7px;
+        padding-top: 4px;
+      }
+
+      ~ div .input__label,
+      ~ div .input__hint {
         line-height: 1;
-        margin-top: 4px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__toggle {
+
+    &:checked + .input__toggle__control svg path:nth-of-type(1),
+    &:not(:checked) + .input__toggle__control svg path:nth-of-type(2) {
+      opacity: 1;
+    }
+
+    &:checked + .input__toggle__control svg path {
+      transform: translateX(19.6px);
+    }
+
+    &:disabled {
+      + .input__toggle__control {
+        cursor: default;
+
+        svg {
+
+          rect {
+            fill: var(--inputField-background-disabled);
+          }
+
+          path {
+            fill: var(--check-disabled-icon);
+          }
+        }
+      }
+
+      ~ div .input__label,
+      ~ div .input__hint {
+        cursor: default;
+        color: var(--check-disabled-text);
+      }
+    }
+
+    &__control {
+      cursor: pointer;
+      width: 47px;
+      height: 26px;
+
+      svg {
+        width: 47px;
+        height: 26px;
+
+        rect {
+          stroke: var(--flipSwitch-border);
+          fill: transparent;
+        }
+
+        path {
+          transition: 0.3s;
+          opacity: 0;
+
+          &:nth-of-type(1) {
+            fill: var(--flipSwitch-checked-background);
+          }
+
+          &:nth-of-type(2) {
+            fill: var(--flipSwitch-unchecked-background);
+          }
+        }
       }
     }
+
+    ~ div .input__label {
+      color: var(--flipSwitch-label);
+    }
+
+    ~ div .input__hint {
+      color: var(--flipSwitch-text);
+      padding-top: 4px;
+    }
+
+    ~ div .input__label,
+    ~ div .input__hint {
+      padding-left: 10px;
+      line-height: 1;
+      cursor: pointer;
+    }
   }
 
   &__file {
@@ -133,16 +278,19 @@ label.input__error {
   @include padding(5px 7px);
   @include position(absolute, calc(100% + 8px) null null 0);
 
-  background-color: $input-errors-color;
-  border-radius: 3px;
-  color: $white;
+  background-color: var(--formGroup-validation-error);
+  border-radius: var(--formGroup-validation-borderRadius);
+  color: var(--formGroup-validation-text);
   font-size: 13px;
   z-index: 1;
 
   &::before {
     @include position(absolute, null null 100% 8px);
-    @include triangle("up", 12px, 6px, $input-errors-color);
-
-    content: "";
+    border-style: solid;
+    height: 0;
+    width: 0;
+    border-color: transparent transparent var(--formGroup-validation-error);
+    border-width: 0 6px 6px;
+    content: '';
   }
 }