beyond_canvas 0.13.0.pre → 0.15.2.pre

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);
+  }
+}

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

@@ -0,0 +1,31 @@
+.table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 15px;
+    text-align: left;
+  }
+
+  thead {
+    tr {
+      font-weight: 700;
+
+      &:first-child {
+        background-color: $table-header-background;
+      }
+
+      &:nth-child(2) {
+        border-bottom: 2px solid $table-border-color;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      &:not(:last-child) {
+        border-bottom: 1px solid $table-border-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.text {
+  &__align {
+    &--center {
+      text-align: center;
+    }
+  }
+}

data/app/assets/stylesheets/beyond_canvas/mailer.scss

@@ -0,0 +1,5 @@
+@import "bourbon";
+
+@import "settings/variables";
+
+@import "components/markdown";

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

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

data/app/assets/stylesheets/beyond_canvas/settings/{_reset_css.sass → _reset_css.scss}

@@ -6,39 +6,47 @@ a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
-dl, dt, dd, // ol, ul, li,
+dl, dt, dd,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
-time, mark, audio, video
-  border: 0
-  font: inherit
-  margin: 0
-  padding: 0
-  vertical-align: baseline
+time, mark, audio, video {
+  border: 0;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
 
 article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section
-  display: block
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
 
-body
-  line-height: 1
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  margin: 0;
 
-ol, ul
-  margin: 0
   // list-style: none
+}
 
-blockquote, q
-  quotes: none
+blockquote, q {
+  quotes: none;
+}
 
 blockquote::before, blockquote::after,
-q::before, q::after
-  content: none
-
-table
-  border-collapse: collapse
-  border-spacing: 0
+q::before, q::after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 
 // sass-lint:enable single-line-per-selector, force-pseudo-nesting

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

@@ -0,0 +1,67 @@
+// sass-lint:disable single-line-per-selector, no-vendor-prefixes
+
+html {
+  font-size: 62.5%;
+}
+
+body, #{$all-text-inputs}, #{$all-buttons}, select {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: unquote($main-font-family);
+  font-size: $main-font-size;
+  font-weight: normal;
+}
+
+body, #{$all-text-inputs}, select {
+  color: $main-color;
+}
+
+body, #{$all-text-inputs} {
+  line-height: $main-line-height;
+}
+
+select {
+  line-height: initial;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $headline-color;
+  font-weight: bold;
+  line-height: $headline-line-height;
+}
+
+h1 {
+  font-size: 56px;
+}
+
+h2 {
+  font-size: 40px;
+}
+
+h3 {
+  font-size: 32px;
+}
+
+h4 {
+  font-size: 24px;
+}
+
+h5 {
+  font-size: 16px;
+}
+
+p {
+  font-size: $main-font-size;
+}
+
+a {
+  color: $main-color;
+  outline: none;
+  text-decoration: none;
+}
+
+strong {
+  font-weight: bold;
+}
+
+// sass-lint:enable single-line-per-selector, no-vendor-prefixes

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

@@ -0,0 +1,171 @@
+// ************************************************************
+// Colors
+// ************************************************************
+
+$white: rgb(255, 255, 255) !global;
+$black: rgb(0, 0, 0) !global;
+$palette-primary: rgb(78, 183, 168) !default;
+$palette-secondary: rgb(28, 53, 69) !default;
+$palette-cancel: rgb(153, 153, 153) !default;
+$palette-danger: rgb(218, 60, 60) !default;
+
+// ************************************************************
+// General styles
+// ************************************************************
+
+$main-background: rgb(233, 232, 220) !default;
+$main-transition: 0.125s ease-in !global;
+
+// ************************************************************
+// Typography
+// ************************************************************
+
+$main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif' !global;
+$main-color: rgb(62, 62, 62) !default;
+$main-line-height: 1.5 !global;
+$main-font-size: 14px !global;
+
+// ************************************************************
+// Headlines
+// ************************************************************
+
+$headline-color: rgb(122, 118, 76) !default;
+$headline-line-height: 1 !global;
+
+// ************************************************************
+// Links
+// ************************************************************
+
+$link-primary-color: darken($palette-primary, 10%) !default;
+$link-secondary-color: darken($palette-cancel, 10%) !default;
+$link-danger-color: darken($palette-danger, 10%) !default;
+
+// ************************************************************
+// Buttons
+// ************************************************************
+
+$button-primary-background: $palette-primary !default;
+$button-primary-color: $white !default;
+
+$button-secondary-background: $palette-cancel !default;
+$button-secondary-color: $white !default;
+
+$button-danger-background: $palette-danger !default;
+$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;
+
+// ************************************************************
+// Cards
+// ************************************************************
+
+$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-separator-color: rgb(222, 222, 222) !default;
+$card-separator-spacing: 50px !global;
+$card-title-color: rgb(247, 133, 96) !default;
+
+// ************************************************************
+// Containers
+// ************************************************************
+
+$container-spacing: 30px !global;
+
+// ************************************************************
+// Labels
+// ************************************************************
+
+$label-color: rgb(128, 128, 128) !default;
+
+// ************************************************************
+// Inputs
+// ************************************************************
+
+$input-border-color: rgb(217, 216, 195) !default;
+$input-border-color-focus: $palette-primary !default;
+$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;
+
+// ************************************************************
+// Radiobuttons
+// ************************************************************
+
+$radio-checked-color: #97C344 !default;
+$radio-checked-background: #ffffff !default;
+$radio-unchecked-color: #C2BF9D !default;
+$radio-unchecked-background: #ffffff !default;
+
+// ************************************************************
+// Hints
+// ************************************************************
+
+$hint-color: rgb(158, 158, 158) !default;
+
+// ************************************************************
+// Logo
+// ************************************************************
+
+$logo-margin-top-public: 0 !default;
+$logo-margin-bottom-public: 34px !default;
+
+// ************************************************************
+// Flash
+// ************************************************************
+
+$flash-success: rgb(123, 170, 81) !default;
+$flash-notice: rgb(123, 170, 81) !default;
+$flash-info: rgb(153, 153, 153) !default;
+$flash-warning: rgb(243, 181, 71) !default;
+$flash-error: rgb(218, 60, 60) !default;
+$flash-border-radius: 4px !default;
+$flash-box-shadow: 0 1px 2px 0 rgba($black, 0.2) !default;
+$flash-color: rgb(128, 128, 128) !default;
+
+// ************************************************************
+// Tables
+// ************************************************************
+
+$table-header-background: rgb(243, 242, 236) !default;
+$table-border-color: rgb(233, 232, 220) !default;
+
+// ************************************************************
+// Comments
+// ************************************************************
+
+$comment-background: rgb(246, 246, 243) !default;
+$comment-color: rgb(170, 169, 156) !default;
+
+// ************************************************************
+// Notices
+// ************************************************************
+
+$notice-success-background: rgb(123, 170, 81) !default;
+$notice-notice-background: rgb(123, 170, 81) !default;
+$notice-info-background: rgb(153, 153, 153) !default;
+$notice-warning-background: rgb(243, 181, 71) !default;
+$notice-error-background: rgb(218, 60, 60) !default;
+$notice-border-radius: 4px !default;
+$notice-color: rgb(153, 153, 153) !default;
+
+// ************************************************************
+// Markdown
+// ************************************************************
+
+$markdown-table-head-background: #f6f8fa;
+$markdown-table-border-color: #dfe2e5;
+$markdown-blockquote-font-color: #6a737d;
+$markdown-blockquote-border-color: #dfe2e5;
+$markdown-hr-background: #e1e4e8;