help_kit 0.0.1

data/app/assets/stylesheets/help_kit/base/_tables.scss

@@ -0,0 +1,24 @@
+table {
+  border-collapse: collapse;
+  margin: ($base-spacing / 2) 0;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  border-bottom: 1px solid darken($base-border-color, 15);
+  font-weight: bold;
+  padding: ($base-spacing / 2) 0;
+  text-align: left;
+}
+
+td {
+  border-bottom: $base-border;
+  padding: ($base-spacing / 2) 0;
+}
+
+tr,
+td,
+th {
+  vertical-align: middle;
+}

data/app/assets/stylesheets/help_kit/base/_typography.scss

@@ -0,0 +1,105 @@
+body {
+  -webkit-font-smoothing: antialiased;
+  padding: 0px;
+  margin: 0px;
+  background-color: #fff;
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+}
+body.minimal {
+  background: #f9f9f9;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $header-font-family;
+  line-height: $header-line-height;
+  margin: 0;
+  font-weight: 300;
+  margin-bottom: 8px;
+  text-rendering: optimizeLegibility; // Fix the character spacing for headings
+}
+
+h1 {
+  font-size: $h1-font-size;
+}
+
+h2 {
+  font-size: $h2-font-size;
+  font-weight: normal;
+}
+
+h3 {
+  font-size: $h3-font-size;
+}
+
+h4 {
+  font-size: $h4-font-size;
+}
+
+h5 {
+  font-size: $h5-font-size;
+}
+
+h6 {
+  font-size: $h6-font-size;
+}
+
+p {
+  margin: 0 0 ($base-spacing / 2);
+}
+
+a {
+  @include transition(color 0.1s linear);
+  color: $base-link-color;
+  text-decoration: none;
+
+  &:hover {
+    color: $hover-link-color;
+  }
+
+  &:active, &:focus {
+    color: $hover-link-color;
+    outline: none;
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  margin: $base-spacing 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}
+
+blockquote {
+  border-left: 2px solid $base-border-color;
+  color: lighten($base-font-color, 15);
+  margin: $base-spacing 0;
+  padding-left: $base-spacing / 2;
+}
+
+cite {
+  color: lighten($base-font-color, 25);
+  font-style: italic;
+
+  &:before {
+    content: "\2014 \00A0";
+  }
+}
+p.subtitle {
+  font-weight: 300;
+  font-size: 1.1em;
+}

data/app/assets/stylesheets/help_kit/base/_variables.scss

@@ -0,0 +1,66 @@
+// Typography
+$sans-serif: $helvetica;
+$serif: $georgia;
+$base-font-family: $sans-serif;
+$header-font-family: 'Open Sans', $sans-serif;
+
+// Font Sizes
+$base-font-size: 1em;
+$h1-font-size: $base-font-size * 2.25;
+$h2-font-size: $base-font-size * 1.3;
+$h3-font-size: $base-font-size * 1.75;
+$h4-font-size: $base-font-size * 1.5;
+$h5-font-size: $base-font-size * 1.25;
+$h6-font-size: $base-font-size;
+
+// Line height
+$base-line-height: 1.5;
+$header-line-height: 1.25;
+
+// Other Sizes
+$base-border-radius: 3px;
+$base-spacing: $base-line-height * 1em;
+$base-z-index: 0;
+
+// Colors
+$blue: #477DCA;
+$dark-gray: #333;
+$medium-gray: #999;
+$light-gray: #DDD;
+$light-red: #FBE3E4;
+$light-yellow: #FFF6BF;
+$light-green: #E6EFC2;
+$red: rgb(197, 57, 41);
+
+// Background Color
+$base-background-color: white;
+
+// Font Colors
+$base-font-color: $dark-gray;
+$base-accent-color: $blue;
+
+// Link Colors
+$base-link-color: $base-accent-color;
+$hover-link-color: darken($base-accent-color, 15);
+$base-button-color: $base-link-color;
+$hover-button-color: $hover-link-color;
+
+// Flash Colors
+$alert-color: $light-yellow;
+$error-color: $light-red;
+$notice-color: lighten($base-accent-color, 40);
+$success-color: $light-green;
+
+// Border color
+$base-border-color: $light-gray;
+$base-border: 1px solid $base-border-color;
+
+// Forms
+$form-border-color: $base-border-color;
+$form-border-color-hover: darken($base-border-color, 10);
+$form-border-color-focus: $base-accent-color;
+$form-border-radius: $base-border-radius;
+$form-box-shadow: inset 0 1px 3px rgba(black,0.06);
+$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
+$form-font-size: 0.8em;
+$form-font-family: $base-font-family;

data/app/assets/stylesheets/help_kit/base/extends/_button.scss

@@ -0,0 +1,22 @@
+%button {
+  -webkit-font-smoothing: antialiased;
+  background-color: $base-button-color;
+  border-radius: $base-border-radius;
+  color: white;
+  display: inline-block;
+  font-size: $base-font-size;
+  font-weight: bold;
+  line-height: 1;
+  padding: 0.75em 1em;
+  text-decoration: none;
+
+  &:hover {
+    background-color: $hover-button-color;
+    color: white;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

data/app/assets/stylesheets/help_kit/base/extends/_clearfix.scss

@@ -0,0 +1,3 @@
+%clearfix {
+  @include clearfix;
+}

data/app/assets/stylesheets/help_kit/base/extends/_errors.scss

@@ -0,0 +1,11 @@
+%error {
+  color: darken($error-color, 60);
+}
+
+%warning {
+  color: darken($alert-color, 60);
+}
+
+%notice {
+  color: darken($notice-color, 60);
+}

data/app/assets/stylesheets/help_kit/base/extends/_flashes.scss

@@ -0,0 +1,38 @@
+@mixin flash($color) {
+  background: $color;
+  color: darken($color, 60);
+
+  a {
+    color: darken($color, 70);
+
+    &:hover {
+      color: darken($color, 90);
+    }
+  }
+}
+
+%flash-base {
+  font-weight: bold;
+  margin-bottom: $base-spacing / 2;
+  padding: $base-spacing / 2;
+}
+
+%flash-alert {
+  @extend %flash-base;
+  @include flash($alert-color);
+}
+
+%flash-error {
+  @extend %flash-base;
+  @include flash($error-color);
+}
+
+%flash-notice {
+  @extend %flash-base;
+  @include flash($notice-color);
+}
+
+%flash-success {
+  @extend %flash-base;
+  @include flash($success-color);
+}

data/app/assets/stylesheets/help_kit/base/extends/_hide-text.scss

@@ -0,0 +1,3 @@
+%hide-text {
+  @include hide-text;
+}

data/app/assets/stylesheets/help_kit/editor.scss

@@ -0,0 +1,127 @@
+@import url(//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic);
+$line-height: 28px;
+$active-line-color: #EBECF2;
+#editor.article-editor {
+  position: absolute;
+  bottom: 0;
+  top: 132px;
+  left: 0;
+  right: 0;
+}
+#editor.category-editor {
+  width: 100%;
+  height: 400px;
+}
+#editor {
+  width: 100%;
+  font-size: 14px;
+  font-family: 'Ubuntu Mono';
+  line-height: $line-height;
+  margin: 0;
+  .ace_line {
+    color: #444;
+    height: $line-height;
+    line-height: $line-height;
+  }
+  .ace_print-margin {
+    background: transparent;
+
+  }
+  .ace_heading {
+    font-weight: 700;
+    color: #161616;
+    &.ace_1 {
+      color: #ccc;
+    }
+  }
+  .ace_function {
+    color: rgb(60, 76, 114);
+    font-weight: 600;
+  }
+  .ace_selection {
+    background: rgb(181, 213, 255);
+  }
+  .ace_active-line, .ace_gutter-active-line {
+    background: $active-line-color;
+    border-bottom: 2px solid darken($active-line-color,10);
+  }
+  .ace_list {
+    font-style: italic;
+  }
+  .ace_string {
+    color: $base-accent-color;
+    font-weight: bold;
+  }
+
+  .ace_markup {
+    color: #ccc;
+  }
+
+  .ace_strong {
+    font-weight: 600;
+    color: #444;
+  }
+  .ace_emphasis {
+    font-style: italic;
+    color: #444;
+    font-weight: normal;
+  }
+}
+
+.article-details-modal {
+  @include pad;
+  border-radius: 5px;
+  display: none;
+  position: absolute;
+  left: calc(50% - 300px);
+  top: 300px;
+  width: 600px;
+  z-index: 999;
+  background: rgba(255,255,255,0.9);
+  border: 1px solid $base-border-color;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+  h2 {
+    margin-bottom: 20px;
+  }
+  button {
+    padding: 8px 12px;
+  }
+  .input {
+    margin-bottom: 0px;
+    margin-top: 10px;
+  }
+  textarea {
+    background: white;
+    border: 1px solid $base-border-color;
+    padding: 5px;
+    resize:none;
+    margin-bottom: 0px;
+
+    &:focus {
+      border: 1px solid darken($base-border-color, 10);
+    }
+  }
+  .form-actions {
+    margin-bottom: 0px;
+    border: none;
+    margin-top: 0px;
+    padding-top: 0px;
+  }
+}
+.article-title {
+  @include transition(all, 0.5s);
+  width: 100%;
+  padding: 4px 15px;
+  font-family: 'Ubuntu Mono';
+  font-size: 24px;
+  color: #454545;
+  border: none;
+  border-bottom: 2px solid #ddd;
+  &:hover {
+    border-bottom: 2px solid #444;
+  }
+  &:focus {
+    outline: none;
+    border-bottom: 2px solid $base-accent-color;
+  }
+}

data/app/assets/stylesheets/help_kit/footer.scss

@@ -0,0 +1,7 @@
+.site-footer {
+  margin: auto auto;
+  margin-top: 20px;
+  text-align: center;
+  color: #aaa;
+  font-size: 0.8em;
+}

data/app/assets/stylesheets/help_kit/grid-list.scss

@@ -0,0 +1,8 @@
+.grid-list {
+  @include outer-container;
+  @include row(block);
+  .grid-item {
+    @include span-columns(2);
+    @include omega(6);
+  }
+}

data/app/assets/stylesheets/help_kit/header.scss

@@ -0,0 +1,134 @@
+.action-header {
+  @include clearfix;
+  margin-top: 10px;
+  padding: 0px 5px;
+  font-size: 0.9em;
+  line-height: 0.9em;
+  .left {
+    float: left;
+  }
+  .right {
+    float: right;
+    text-align: right;
+  }
+  a {
+    @include transition(all, 0.5s);
+    color: #aaa;
+    margin-right: 25px;
+    i {
+      color: #888;
+    }
+    &:hover {
+      color: #333;
+      i {
+        color: #121212;
+      }
+    }
+  }
+}
+
+$nav-height: 60px;
+.header {
+  font-family: 'Open Sans';
+  .nav {
+    @include clearfix;
+    height: $nav-height;
+    @include linear-gradient(#444,#161616);
+    padding-left: 30px;
+    a,.brand {
+      line-height: $nav-height;
+    }
+    .brand {
+      float: left;
+      color: #fff;
+      font-size: 24px;
+      font-weight: 300;
+      i {
+        margin-right: 15px;
+      }
+      strong {
+        font-weight: 700;
+      }
+    }
+    .right {
+      float: right;
+      padding-right: 20px;
+      a {
+        color: #888;
+        font-size: 1.2em;
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+$search-height: 35px;
+#article-search {
+  @include transition(all, 0.5s);
+  @include clearfix;
+  margin-top: ($nav-height / 2) - ($search-height / 2);
+  .input-container {
+    float:left;
+    width: 0px;
+    background: #454545;
+    input.search-input {
+      width: 100%;
+      opacity: 0;
+      background: #454545;
+      color: #f5f5f5;
+      border: none;
+      padding: 0px 8px;
+      height: $search-height;
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+  .button-container {
+    float: right;
+    button {
+      @include transition(all, 0.5s);
+      height: $search-height;
+      background: transparent;
+      width: $golden * $search-height;
+      border: none;
+      color: #aaa;
+      font-size: 1.2em;
+      cursor: pointer;
+      &:hover {
+        color: #fff;
+        background: #454545;
+      }
+    }
+  }
+  &.active {
+    .input-container {
+    }
+    .button-container {
+      button {
+        background: #454545;
+      }
+    }
+  }
+}
+
+
+.submenu {
+  background: #f9f9f9;
+  border-bottom: 1px solid $base-border-color;
+  font-size: 0.8em;
+  text-align: right;
+  padding: 0px 20px;
+  height: 35px;
+  line-height: 35px;
+  a {
+    color: #888;
+    padding: 0px 10px;
+    height: 35px;
+    line-height: 35px;
+    &:hover {
+      color: #444;
+    }
+  }
+}

data/app/assets/stylesheets/help_kit/landing.scss

@@ -0,0 +1,68 @@
+.search {
+  @include clearfix;
+  width: 480px;
+  margin: auto;
+  margin-bottom: 20px;
+  input {
+    float:left;
+    @include border-left-radius(5px);
+    border: 1px solid $base-border-color;
+    width: 400px;
+    padding: 0px 8px;
+    height: 35px;
+    box-shadow: none;
+    &:hover, &:active {
+      -webkit-appearance:none;
+      outline: 0;
+      box-shadow: none;
+      border: 1px solid $base-border-color;
+    }
+  }
+  button {
+    @include border-right-radius(5px);
+    border: 1px solid #161616;
+    background: #161616;
+    color: white;
+    float: left;
+    height: 35px;
+    width: 35px * $golden;
+    border: none;
+    font-size: 1.2em;
+    cursor: pointer;
+  }
+}
+p {
+  font-size: 0.8em;
+}
+.articles {
+  @include outer-container;
+  .section {
+    @include span-columns(6);
+  }
+}
+.categories {
+  font-size: 0.8em;
+  .category {
+    margin-top: 10px;
+    a {
+      color: #454545;
+      line-height: 1;
+      font-weight: 500;
+      &:hover {
+        color: $base-accent-color;
+      }
+    }
+  }
+  .sub-category {
+    line-height: 1em;
+    a {
+      font-size: 0.8em;
+      color: #999;
+      line-height: 1;
+      font-weight: 400;
+      &:hover {
+        color: #121212;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/help_kit/letters.scss

@@ -0,0 +1,31 @@
+.letter {
+  background: #fff;
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
+  margin: 26px auto 0;
+  max-width: 800px;
+  min-height: 300px;
+  padding: 24px;
+  position: relative;
+  width: 80%;
+}
+.letter:before, .letter:after {
+  content: "";
+  height: 98%;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+.letter:before {
+  background: #fafafa;
+  box-shadow: 0 0 8px rgba(0,0,0,0.2);
+  left: -5px;
+  top: 4px;
+  transform: rotate(-2.5deg);
+}
+.letter:after {
+  background: #f6f6f6;
+  box-shadow: 0 0 3px rgba(0,0,0,0.2);
+  right: -3px;
+  top: 1px;
+  transform: rotate(1.4deg);
+  }

data/app/assets/stylesheets/help_kit/page-container.scss

@@ -0,0 +1,13 @@
+.page-container {
+  @include pad;
+  @include clearfix;
+  background: #fff;
+  box-shadow: 1px 1px 1px darken($base-background-color, 15);
+  border: 1px solid #eee;
+  border-bottom: 1px solid #ccc;
+}
+
+.center-container {
+  @include outer-container;
+  @include pad;
+}

data/app/assets/stylesheets/help_kit/panel.scss

@@ -0,0 +1,10 @@
+.panel {
+  &.pad {
+    @include pad;
+  }
+  margin-top: 10px;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+  overflow: hidden;
+}

data/app/assets/stylesheets/help_kit/select-style.scss

@@ -0,0 +1,11 @@
+.select2-container {
+  border: none;
+  .select2-choice {
+    background-image: none;
+    background-color: white;
+    .select2-arrow {
+      background: white;
+      border:none;
+    }
+  }
+}