beyond_canvas 0.13.1.pre → 0.14.0.pre

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

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/{_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