beyond_canvas 0.22.0.pre → 0.23.0.pre

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

@@ -9,18 +9,21 @@
   }
 
   &__button {
-    color: $palette-primary;
+    color: var(--primary-color);
     font-weight: 700;
     cursor: pointer;
-    display: table;
+    display: block;
     line-height: 1;
     margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__icon {
     @include size(10px);
 
-    fill: $palette-primary;
+    fill: var(--primary-color);
     margin-right: 2px;
 
     &--open {

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,25 +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,
     &--alert {
-      background-color: $flash-error;
+      background-color: var(--notification-danger);
     }
   }
 
@@ -50,7 +50,7 @@
     @include padding(10px 15px);
 
     box-sizing: border-box;
-    color: $flash-color;
+    color: var(--notification-text);
   }
 
   &__close {
@@ -61,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,17 +2,18 @@ $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: $input-disabled-background !important;
-    color: $input-disabled-color;
+    background-color: var(--inputField-background-disabled) !important;
+    color: var(--inputField-text-disabled);
     opacity: 1;
   }
 }
@@ -23,7 +24,7 @@ select {
 
 #{$all-text-inputs-focus},
 select:focus {
-  border-color: $input-border-color-focus;
+  border-color: var(--inputField-border-focus);
 }
 
 select {
@@ -43,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__hint {
+      ~ div .input__label {
+        padding-left: 7px;
+      }
+
+      ~ 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 {
@@ -139,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: '';
   }
 }