ratchet_design 0.1.0

data/app/assets/stylesheets/ratchet/base/_list.scss

@@ -0,0 +1,114 @@
+/* ========================================================================== *
+ * b. List module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utility
+ * ------------------------------------- */
+
+// Remove styling from unordered lists
+@mixin unstyle($reset-padding: on) {
+  list-style: none;
+
+  li {
+    text-indent: 0;
+    @if $reset-padding == on {
+      padding-left: 0;
+    }
+  }
+}
+
+// Unstyle list
+%unstyle {
+  @include unstyle;
+}
+
+// Style
+%list-style {
+  padding-top: 9px;
+  margin-bottom: 21px;
+  list-style-position: inside;
+
+  // Horizontal alignment
+  li {
+    text-indent: -20px;
+    padding-left: 20px;
+  }
+}
+
+/* ===================================== *
+ * ii. Unordered
+ * ------------------------------------- */
+
+ul {
+  @extend %list-style;
+  list-style-type: disc;
+
+  // Bare unordered list vertical rhythm
+  li > &,
+  dd > & {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+// Nested unordered lists
+ul ul {
+  list-style-type: circle;
+}
+
+ul ul ul {
+  list-style-type: square;
+}
+
+/* ===================================== *
+ * iii. Ordered
+ * ------------------------------------- */
+
+// Ordered lists
+ol {
+  @extend %list-style;
+  counter-reset: item;
+  list-style-type: none;
+
+  // Bare unordered list vertical rhythm
+  li > &,
+  dd > & {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+
+  > li:before {
+    content: counter(item) '.';
+    counter-increment: item;
+    font-size: 13px;
+    line-height: 0;
+    font-weight: 700;
+    margin-right: 8px;
+  }
+}
+
+// Nested ordered lists
+ol ol > li:before {
+  content: counter(item, upper-alpha) '.';
+}
+
+ol ol ol > li:before {
+  content: counter(item, upper-roman) '.';
+}
+
+/* ===================================== *
+ * iv. Definition
+ * ------------------------------------- */
+
+// Definition term
+dt {
+  font-weight: 700;
+  padding-top: 10px;
+  margin-bottom: -1px;
+}
+
+// Definition
+dd {
+  margin-bottom: 21px;
+}

data/app/assets/stylesheets/ratchet/base/_media.scss

@@ -0,0 +1,41 @@
+/* ========================================================================== *
+ * d. Media module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utility
+ * ------------------------------------- */
+
+// Fluid Embeds
+@mixin embed {
+  width: 100%;
+  // height: calc(9 / 16 * #{$content-width});
+
+  // @media (max-width: $content-width + $content-padding * 2) {
+  //   height: calc(9 / 16 * 100vw - #{$content-padding});
+  // }
+}
+
+// Image caption mixin
+@mixin figcaption {
+  font-size: 14px;
+  color: $nobel;
+  @include rhythm(11px, 4px);
+}
+
+// Extendable image caption placeholder
+%figcaption {
+  @include figcaption;
+}
+
+/* ===================================== *
+ * ii. Common
+ * ------------------------------------- */
+
+// Media
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  vertical-align: top;
+}

data/app/assets/stylesheets/ratchet/base/_table.scss

@@ -0,0 +1,81 @@
+/* ========================================================================== *
+ * f. Table module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utility
+ * ------------------------------------- */
+
+// Bordered cells
+@mixin bordered() {
+  tbody {
+    tr {
+      border-right: 1px solid #d1d1d1;
+    }
+
+    td {
+      box-shadow: 1px 1px $alto inset;
+    }
+  }
+}
+
+// Striped rows
+@mixin striped() {
+  tbody tr:nth-child(2n+1) {
+    background: lighten($iron, 5);
+  }
+}
+
+// Equal-width columns
+@mixin stretched() {
+  table-layout: fixed;
+  width: 100%;
+}
+
+// With key column
+@mixin keyed() {
+  tbody tr > :first-child {
+    font-weight: 700;
+    color: $shark;
+    white-space: nowrap;
+  }
+}
+
+/* ===================================== *
+ * ii. Common
+ * ------------------------------------- */
+
+table {
+  font-size: 15px;
+  vertical-align: top;
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-bottom: vr(1); // 15px
+
+  tbody tr {
+    background: $white;
+  }
+}
+
+th,
+td {
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  padding: 9px 10px 6px 10px;
+}
+
+td {
+  padding: 8px 10px 7px 10px;
+  box-shadow: 0 1px $alto inset;
+}
+
+caption {
+  display: none;
+}
+
+tfoot th {
+  box-shadow: 0 1px $alto inset;
+}

data/app/assets/stylesheets/ratchet/base/_text.scss

@@ -0,0 +1,411 @@
+/* ========================================================================== *
+ * a. Text module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utility
+ * ------------------------------------- */
+
+// Create an underlined link with cleared descenders
+@mixin inline-link($default-color: $capecod, $active-color: $cerulean, $background: $white) {
+  background: linear-gradient(to bottom, transparent 50%, $active-color 50%) 0 91% / 2px 2px repeat-x;
+  transition: color $duration;
+  text-shadow:
+    .03em    0em $background,
+   -.03em    0em $background,
+      0em  .03em $background,
+      0em -.03em $background,
+    .06em -.06em $background,
+   -.06em -.06em $background,
+    .06em    0em $background,
+   -.06em    0em $background,
+    .09em    0em $background,
+   -.09em    0em $background,
+    .12em    0em $background,
+   -.12em    0em $background,
+    .15em    0em $background,
+   -.15em    0em $background;
+
+  // Default link color
+  &,
+  &:visited {
+    color: $default-color;
+  }
+
+  // Active link color
+  &:hover,
+  &:focus,
+  &:active {
+    color: $active-color;
+  }
+}
+
+/* ===================================== *
+ * ii. Common
+ * ------------------------------------- */
+
+body,
+input,
+select,
+button,
+textarea {
+  font-family: $base-font;
+}
+
+/* ===================================== *
+ * iii. Heading
+ * ------------------------------------- */
+
+// 1.15 modular scale - http://www.modularscale.com/?18&px&1.15&web&text
+h1 {
+  font-size: 42px;
+  line-height: 60px;
+  padding-top: 3px;
+  margin-bottom: 12px;
+}
+
+h2 {
+  font-size: 36px;
+  line-height: 45px;
+  padding-top: 13px;
+  margin-bottom: 17px;
+}
+
+h3 {
+  font-size: 31px;
+  line-height: 45px;
+  padding-top: 14px;
+  margin-bottom: 16px;
+}
+
+h4 {
+  font-size: 27px;
+  line-height: 45px;
+  padding-top: 15px;
+  margin-bottom: 15px;
+}
+
+h5 {
+  font-size: 24px;
+  line-height: 30px;
+  padding-top: 8px;
+  margin-bottom: 22px;
+}
+
+h6 {
+  font-size: 21px;
+  line-height: 30px;
+  padding-top: 9px;
+  margin-bottom: 21px;
+}
+
+/* ===================================== *
+ * iv. Paragraph
+ * ------------------------------------- */
+
+p {
+  padding-top: 9px;
+  margin-bottom: 21px;
+}
+
+// Inline article links
+article p a {
+  @include inline-link;
+}
+
+/* ===================================== *
+ * v. Blockquote
+ * ------------------------------------- */
+
+// Blockquotes
+blockquote {
+  font-size: 28px;
+  color: $nobel;
+  line-height: vr(3); // 45px
+  border-top: 14px solid transparent;
+  margin-bottom: 31px;
+  padding-left: 30px;
+
+  p {
+    padding-top: 0;
+    margin-bottom: 0;
+
+    &:first-of-type {
+      text-indent: -.325em;
+    }
+
+    &:first-of-type:before {
+      content: '“';
+    }
+
+    &:last-of-type:after {
+      content: '”';
+    }
+  }
+
+  p + p {
+    padding-top: vr(2); // 30px
+  }
+
+  cite {
+    display: block;
+    font-size: 16px;
+    font-style: normal;
+    padding-top: 26px;
+    padding-bottom: 4px;
+    line-height: vr(2); // 30px
+    font-weight: 700;
+
+    a {
+      @include inline-link($capecod, $cerulean);
+    }
+  }
+}
+
+/* ===================================== *
+ * vi. Inline
+ * ------------------------------------- */
+
+// Bare inline text elements
+:not(p):not(li):not(dd):not(blockquote):not(small):not(strong) > {
+  small {
+    display: inline-block;
+    line-height: vr(2); // 30px
+    padding-top: 11px;
+    margin-bottom: 19px;
+  }
+
+  b,
+  strong {
+    display: inline-block;
+    line-height: vr(2); // 30px
+    padding-top: 10px;
+    margin-bottom: 5px;
+  }
+}
+
+// Small text
+small {
+  font-size: 14px;
+  line-height: 0;
+}
+
+// Lone children of paragraphs
+p > small:first-child:last-child {
+  display: inline-block;
+  line-height: vr(2); // 30px
+  padding-top: 2px;
+  margin-bottom: -2px;
+}
+
+// Bold text
+b,
+strong {
+  line-height: 0;
+  font-weight: 700;
+}
+
+// Subscripts & superscripts
+sub,
+sup {
+  vertical-align: baseline;
+  position: relative;
+  line-height: 0;
+  font-size: 75%;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+// Highlighted marks
+mark {
+  background: lighten($cerulean, 45);
+}
+
+// Definitions & Abbreviations
+dfn[title],
+abbr[title] {
+  position: relative;
+  cursor: help;
+  font-style: normal;
+  border-bottom: 1px dashed $nobel;
+
+  &:after,
+  &:before {
+    position: absolute;
+    opacity: 0;
+    z-index: -1;
+    transition: $duration;
+  }
+
+  &:after {
+    content: attr(title);
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    color: $white;
+    font-size: 14px;
+    text-align: center;
+    white-space: nowrap;
+    padding: 2px 10px;
+    border-radius: $radius;
+    background: $shark;
+  }
+
+  &:before {
+    content: '';
+    left: calc(50% - 5px);
+    top: 100%;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 5px 6px 5px;
+    border-color: transparent transparent $shark transparent;
+  }
+
+  &:hover:after,
+  &:hover:before {
+    opacity: 1;
+    z-index: 2;
+  }
+}
+
+// Links
+a,
+button {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+a,
+a:hover,
+a:focus,
+a:active,
+a:visited,
+button {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+/* ===================================== *
+ * vii. Horizontal rule
+ * ------------------------------------- */
+
+hr {
+  border: 0;
+  padding-top: vr(2); // 30px
+  margin-bottom: vr(3); // 45px
+  box-shadow: 0 1px $alto;
+  height: vr(1); // 15px
+  line-height: vr(1); // 15px
+}
+
+hr.stars {
+  color: $nobel;
+  box-shadow: none;
+  text-align: center;
+
+  &:before {
+    content: '***';
+    font-size: 30px;
+    letter-spacing: 20px;
+    padding-left: 20px;
+  }
+}
+
+/* ===================================== *
+ * viii. Preformatted text
+ * ------------------------------------- */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: $mono-font;
+  letter-spacing: -.015em;
+  word-spacing: -.015em;
+  color: $aluminum;
+  direction: ltr;
+  text-align: left;
+  tab-size: 2;
+  hyphens: none;
+  tab-size: 2;
+  hyphens: none;
+}
+
+pre {
+  font-size: .9375rem; // 15.5px
+  overflow: auto;
+  @include rhythm(26px, 23px, on);
+  border-radius: $radius;
+  background: $alabaster;
+  box-shadow: 0 0 0 1px $iron inset;
+}
+
+:not(pre) > code,
+:not(pre) > kbd,
+:not(pre) > samp {
+  font-size: .9375rem; // 15.5px
+  line-height: 0;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  border-radius: $radius;
+  padding: 4px 6px;
+  background: $alabaster;
+  box-shadow: 0 0 0 1px $iron inset;
+}
+
+/* ===================================== *
+ * xi. Syntax highlighting
+ * ------------------------------------- */
+
+pre[class*=language-],
+code[class*=language-] {
+  color: $aluminum;
+}
+
+.cm-s-default {
+  .cm-keyword                { color: $bahama;    }
+  .cm-atom                   { color: $lightning; }
+  .cm-number                 { color: $rose;      }
+  .cm-def                    { color: $lima;      }
+  .cm-variable               { color: $flush;     }
+  .cm-variable-2             { color: $orchid;    }
+  .cm-variable-3             { color: $flush;     }
+  .cm-property               { color: $cerulean;  }
+  .cm-operator               { color: $nobel;     }
+  .cm-comment                { color: $nobel;     }
+  .cm-string                 { color: $cerulean;  }
+  .cm-string-2               { color: $lima;      }
+  .cm-meta                   { color: $nobel;     }
+  .cm-error                  { color: $punch;     }
+  .cm-qualifier              { color: $nobel;     }
+  .cm-builtin                { color: $bahama;    }
+  .cm-bracket                { color: $nobel;     }
+  .cm-tag                    { color: $bahama;    }
+  .cm-attribute              { color: $nobel;     }
+  .cm-header                 { color: $cerulean;  }
+  .cm-quote                  { color: $lima;      }
+  .cm-hr                     { color: $nobel;     }
+  .cm-link                   { color: $orchid;    }
+  .cm-qualifier.cm-attribute { color: $flush;     }
+  .cm-error                  { color: $punch;     }
+}
+
+.static-code {
+  .cm-variable               { color: $lima;      }
+}
+
+.cm-negative                 { color: $rose;      }
+.cm-positive                 { color: $lima;      }
+.cm-header,
+.cm-strong                   {                    }
+.cm-em                       {                    }
+.cm-link                     {                    }
+.cm-invalidchar              { color: $punch;     }