beyond_canvas 0.12.0.pre → 0.15.1.pre

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

@@ -0,0 +1,43 @@
+%form__actions {
+  align-items: center;
+  display: flex;
+}
+
+.form {
+  &__row,
+  &__actions {
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__actions {
+    &--spaced {
+      @extend %form__actions;
+
+      justify-content: space-between;
+    }
+
+    &--left {
+      @extend %form__actions;
+
+      justify-content: flex-start;
+
+      *:not(:last-child) {
+        margin-right: 30px;
+      }
+    }
+
+    &--right {
+      @extend %form__actions;
+
+      justify-content: flex-end;
+
+      *:not(:first-child) {
+        margin-left: 30px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,143 @@
+$controls: checkbox, radio;
+
+#{$all-text-inputs},
+select {
+  background-color: $white;
+  border: 1px solid $input-border-color;
+  border-radius: 3px;
+  box-sizing: border-box;
+  outline: none;
+  padding: 6px 8px;
+  width: 100%;
+}
+
+#{$all-text-inputs} {
+  line-height: 1;
+}
+
+#{$all-text-inputs-focus},
+select:focus {
+  border-color: $input-border-color-focus;
+}
+
+select {
+  @include prefixer(appearance, none, ("webkit", "moz"));
+
+  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, $input-border-color, $input-border-color);
+  background-position: calc(100% - 19px) calc(1em + -1px), calc(100% - 15px) calc(1em + -1px), calc(100% - 2.5em) 0.5em;
+  background-size: 4px 4px, 4px 4px, 0 0;
+  background-repeat: no-repeat;
+}
+
+#{$all-text-inputs},
+select {
+  &.input__error {
+    border-left: 2px solid $input-errors-color;
+
+    &:focus {
+      border: 1px solid $input-border-color-focus;
+    }
+  }
+}
+
+.input {
+  &__label {
+    color: $label-color;
+    display: block;
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  &__hint {
+    color: $hint-color;
+    font-size: 13px;
+    margin-top: 1px;
+  }
+
+  @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);
+        }
+
+        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");
+        }
+      }
+
+      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");
+        }
+      }
+
+      + div .input__label {
+        line-height: 1;
+      }
+
+      + div .input__hint {
+        line-height: 1;
+        margin-top: 4px;
+      }
+    }
+  }
+
+  &__file {
+    display: flex;
+    align-items: center;
+
+    &__control {
+      display: inline-block;
+    }
+
+    &__text {
+      display: flex;
+      margin-left: 20px;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 200px;
+    }
+
+    &__icon {
+      color: $main-color;
+      width: 14px;
+      margin-right: 5px;
+    }
+  }
+}
+
+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;
+  font-size: 13px;
+  z-index: 1;
+
+  &::before {
+    @include position(absolute, null null 100% 8px);
+    @include triangle("up", 12px, 6px, $input-errors-color);
+
+    content: "";
+  }
+}

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

@@ -0,0 +1,7 @@
+.body--public {
+  .select--locale {
+    @include position(absolute, 40px 40px null null);
+
+    width: 200px;
+  }
+}

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

@@ -0,0 +1,17 @@
+.link {
+  &__icon {
+    margin-right: 10px;
+  }
+
+  &--primary {
+    @include color-darken($link-primary-color, 10%);
+  }
+
+  &--secondary {
+    @include color-darken($link-secondary-color, 10%);
+  }
+
+  &--danger {
+    @include color-darken($link-danger-color, 10%);
+  }
+}

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

@@ -0,0 +1,39 @@
+%body {
+  background-color: $main-background;
+}
+
+.body--public {
+  @extend %body;
+
+  .main-wrapper {
+    @include margin(32px auto);
+
+    max-width: 531px;
+    width: 94%;
+
+    .logo {
+      @include margin($logo-margin-top-public auto $logo-margin-bottom-public);
+
+      display: block;
+      width: 238px;
+    }
+  }
+}
+
+.body--single-page {
+  @extend %body;
+
+  .main-wrapper {
+    @include margin(32px auto);
+
+    max-width: 876px;
+    width: 94%;
+
+    .logo {
+      @include margin($logo-margin-top-public auto $logo-margin-bottom-public);
+
+      display: block;
+      width: 238px;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+.margin {
+  &--top {
+    margin-top: 30px;
+  }
+
+  &--bottom {
+    margin-bottom: 30px;
+  }
+}

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

@@ -0,0 +1,74 @@
+.markdown {
+  > :first-child {
+    margin-top: 0 !important;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  > *:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
+  h1, h2, h3, h4 {
+    margin-top: 24px;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+  }
+
+  h3 {
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  ul,
+  ol {
+    padding-left: 2em;
+
+    ul {
+      margin-bottom: 0;
+    }
+  }
+
+  table {
+    thead {
+      background-color: $markdown-table-head-background;
+      font-weight: 700;
+    }
+
+    thead,
+    tbody {
+      tr {
+        th,
+        td {
+          border: 1px solid $markdown-table-border-color;
+          padding: 0.4em 0.8em;
+        }
+      }
+    }
+  }
+
+  blockquote {
+    border-left: 0.25em solid $markdown-blockquote-border-color;
+    color: $markdown-blockquote-font-color;
+    padding: 0 1em;
+  }
+
+  hr {
+    background-color: $markdown-hr-background;
+    border: 0;
+    height: 4px;
+    margin: 24px 0 !important;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,58 @@
+.notice {
+  border-radius: $notice-border-radius;
+  border: 1px solid;
+  box-sizing: border-box;
+  display: flex;
+
+  &--success {
+    border-color: $notice-success-background;
+
+    .notice__icon {
+      background-color: $notice-success-background;
+    }
+  }
+
+  &--info {
+    border-color: $notice-info-background;
+
+    .notice__icon {
+      background-color: $notice-info-background;
+    }
+  }
+
+  &--warning {
+    border-color: $notice-warning-background;
+
+    .notice__icon {
+      background-color: $notice-warning-background;
+    }
+  }
+
+  &--error {
+    border-color: $notice-error-background;
+
+    .notice__icon {
+      background-color: $notice-error-background;
+    }
+  }
+
+  &__icon {
+    @include padding(10px 8px);
+
+    display: flex;
+
+    > svg {
+      @include size(18px);
+
+      fill: $white;
+    }
+  }
+
+  &__content {
+    @include padding(8px 14px);
+
+    color: $notice-color;
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,3 @@
+.relative {
+  position: relative;
+}

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

@@ -0,0 +1,48 @@
+.spinner {
+  display: flex;
+  margin-right: 12px;
+  width: 24px;
+  text-align: center;
+
+  > div {
+    margin: 0 !important;
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+  }
+
+  40% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}