compass-ratchet 1.0.1

data/stylesheets/compass-ratchet/_buttons.scss

@@ -0,0 +1,124 @@
+@import "compass-ratchet/shared";
+
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+
+/* General button styles
+-------------------------------------------------- */
+
+[class*="button"] {
+  position: relative;
+  display: inline-block;
+  padding: 4px 12px;
+  margin: 0;
+  font-weight: bold;
+  line-height: 18px;
+  color: #333;
+  text-align: center;
+  @include text-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
+  vertical-align: top;
+  cursor: pointer;
+  background-color: #f8f8f8;
+  @include background(linear-gradient(top, #f8f8f8, #d4d4d4));
+  border: 1px solid rgba(0, 0, 0, .3);
+  @include border-radius(3px);
+  @include box-shadow(inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05));
+}
+
+/* Active */
+[class*="button"]:active {
+  padding-top: 5px;
+  padding-bottom: 3px;
+  color: #333;
+  background-color: #ccc;
+  background-image: none;
+  @include box-shadow(inset 0 3px 3px rgba(0, 0, 0, .2));
+}
+
+/* Button modifiers
+-------------------------------------------------- */
+
+/* Overriding styles for buttons with modifiers  */
+.button-main,
+.button-positive,
+.button-negative {
+  color: #fff;
+  @include text-shadow(0 -1px 0 rgba(0, 0, 0, .3));
+}
+
+/* Main button */
+.button-main {
+  background-color: #1eafe7;
+  @include background(linear-gradient(top, #1eafe7, #1a97c8));
+  border: 1px solid #117aaa;
+}
+
+/* Positive button  */
+.button-positive {
+  background-color: #34ba15;
+  @include background(linear-gradient(top, #34ba15, #2da012));
+  border: 1px solid #278f0f;
+}
+
+/* Negative button  */
+.button-negative {
+  background-color: #e71e1e;
+  @include background(linear-gradient(top, #e71e1e, #c71a1a));
+  border: 1px solid #b51a1a;
+}
+
+/* Active state for buttons with modifiers */
+.button-main:active,
+.button-positive:active,
+.button-negative:active {
+  color: #fff;
+}
+.button-main:active {
+  background-color: #0876b1;
+}
+.button-positive:active {
+  background-color: #298f11;
+}
+.button-negative:active {
+  background-color: #b21a1a;
+}
+
+/* Block level buttons (full width buttons) */
+.button-block {
+  display: block;
+  padding: 11px 0 13px;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+/* Active state for block level buttons */
+.button-block:active {
+  padding: 12px 0;
+}
+
+/* Counts in buttons
+-------------------------------------------------- */
+
+/* Generic styles for all counts within buttons */
+[class*="button"] [class*="count"] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin-right: -4px;
+  margin-left: 4px;
+  @include text-shadow(none);
+  background-color: rgba(0, 0, 0, .2);
+  @include box-shadow(inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff);
+}
+
+/* Position counts within block level buttons
+   Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
+   stays at true center of button */
+.button-block [class*="count"] {
+  position: absolute;
+  right: 0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-right: 10px;
+}

data/stylesheets/compass-ratchet/_chevrons.scss

@@ -0,0 +1,32 @@
+@import "compass-ratchet/shared";
+
+@import "compass/css3/transform";
+
+/* Chevrons
+-------------------------------------------------- */
+
+.chevron {
+  display: block;
+  height: 20px;
+}
+
+/* Base styles for both 1/2's of the chevron */
+.chevron:before,
+.chevron:after {
+  position: relative;
+  display: block;
+  width: 12px;
+  height: 4px;
+  background-color: #999;
+  content: '';
+}
+
+/* Position and rotate respective 1/2's of the chevron */
+.chevron:before {
+  top: 5px;
+  @include rotate(45deg);
+}
+.chevron:after {
+  top: 7px;
+  @include rotate(-45deg);
+}

data/stylesheets/compass-ratchet/_counts.scss

@@ -0,0 +1,42 @@
+/* General count styles
+-------------------------------------------------- */
+
+[class*="count"] {
+  display: inline-block;
+  padding: 4px 9px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 13px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, .3);
+  @include border-radius(100px);
+}
+
+/* Count modifiers
+-------------------------------------------------- */
+
+/* Overriding styles for counts with modifiers  */
+.count-main,
+.count-positive,
+.count-negative {
+  color: #fff;
+  @include text-shadow(0 -1px 0 rgba(0, 0, 0, .3));
+}
+
+/* Main count  */
+.count-main {
+  background-color: #1eafe7;
+  @include background(linear-gradient(top, #1eafe7, #1a97c8));
+}
+
+/* Positive count  */
+.count-positive {
+  background-color: #34ba15;
+  @include background(linear-gradient(top, #34ba15, #2da012));
+}
+
+/* Negative count  */
+.count-negative {
+  background-color: #e71e1e;
+  @include background(linear-gradient(top, #e71e1e, #c71a1a));
+}

data/stylesheets/compass-ratchet/_forms.scss

@@ -0,0 +1,126 @@
+@import "compass-ratchet/shared";
+
+@import "compass/css3/appearance";
+@import "compass/css3/box-shadow";
+@import "compass/css3/box-sizing";
+@import "compass/css3/images";
+
+/* Forms
+-------------------------------------------------- */
+
+/* Force form elements to inherit font styles */
+input,
+textarea,
+button,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  width: 100%;
+  height: 40px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, .2);
+  @include border-radius(3px);
+  @include box-shadow(0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1));
+  @include appearance(none);
+  @include box-sizing(border-box);
+}
+
+/* Fully round search input */
+input[type=search] {
+  height: 34px;
+  font-size: 14px;
+  @include border-radius(30px);
+}
+
+/* Allow text area's height to grow larger than a normal input */
+textarea {
+  height: auto;
+}
+
+/* Style select button to look like part of the Ratchet's style */
+select {
+  height: auto;
+  font-size: 14px;
+  background-color: #f8f8f8;
+  @include background(linear-gradient(top, #f8f8f8, #d4d4d4));
+  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .1));
+}
+
+
+/* Input groups (cluster multiple inputs together into a single group)
+-------------------------------------------------- */
+
+/* Reset from initial form setup styles */
+.input-group {
+  width: auto;
+  height: auto;
+  padding: 0;
+}
+
+/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
+.input-group input {
+  margin-bottom: 0;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
+  @include border-radius(0);
+  @include box-shadow(none);
+}
+
+/* Remove bottom border on last input to avoid double bottom border */
+.input-group input:last-child {
+  border-bottom-width: 0;
+}
+
+/* Input groups with labels
+-------------------------------------------------- */
+
+/* To use labels with input groups, wrap a label and an input in an .input-row */
+.input-row {
+  overflow: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
+}
+
+/* Remove bottom border on last input-row to avoid double bottom border */
+.input-row:last-child {
+  border-bottom-width: 0;
+}
+
+/* Labels get floated left with a set percentage width */
+.input-row label {
+  float: left;
+  width: 25%;
+  padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
+  font-weight: bold;
+}
+
+/* Actual inputs float to right of labels and also have a set percentage */
+.input-row label + input {
+  float: right;
+  width: 65%;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-bottom: 0;
+}

data/stylesheets/compass-ratchet/_lists.scss

@@ -0,0 +1,122 @@
+@import "compass-ratchet/shared";
+
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+@import "compass/css3/box-sizing";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+
+/* Lists
+-------------------------------------------------- */
+
+/* Remove usual bullet styles from list */
+.list {
+  margin-bottom: 10px;
+  list-style: none;
+  background-color: #fff;
+}
+
+/* Pad each list item and add dividers */
+.list li {
+  position: relative;
+  padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+}
+
+/* Give top border to first list items */
+.list li:first-child {
+  border-top: 1px solid rgba(0, 0, 0, .1);
+}
+
+/* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
+.list li > a:not([class*="button"]) {
+  position: relative;
+  display: block;
+  padding: inherit;
+  margin: -20px -60px -20px -10px;
+  color: inherit;
+}
+
+/* Inset list
+-------------------------------------------------- */
+
+.list.inset {
+  width: auto;
+  margin-right: 10px;
+  margin-left: 10px;
+  border: 1px solid rgba(0, 0, 0, .1);
+  @include border-radius(6px);
+  @include box-sizing(border-box);
+}
+
+/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
+.list.inset li:first-child {
+  border-top-width: 0;
+}
+.list.inset li:last-child {
+  border-bottom-width: 0;
+}
+
+
+/* List dividers
+-------------------------------------------------- */
+
+.list .list-divider {
+  position: relative;
+  top: -1px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  @include text-shadow(0 1px 0 rgba(255, 255, 255, .5));
+  background-color: #f8f8f8;
+  @include background(linear-gradient(top, #f8f8f8, #eee));
+  border-top: 1px solid rgba(0, 0, 0, .1);
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  @include box-shadow(inset 0 1px 1px rgba(255, 255, 255, .4));
+}
+
+/* Rounding first divider on inset lists and remove border on the top */
+.list.inset .list-divider:first-child {
+  top: 0;
+  border-top-width: 0;
+  @include border-radius(6px 6px 0 0);
+}
+
+/* Rounding last divider on inset lists */
+.list.inset .list-divider:last-child {
+  @include border-radius(0 0 6px 6px);
+}
+
+/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
+-------------------------------------------------- */
+.list .chevron,
+.list [class*="button"],
+.list [class*="count"],
+.list .toggle {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+}
+
+ /* Position chevrons/counts vertically centered on the right in list items */
+.list .chevron,
+.list [class*="count"] {
+  margin-top: -10px; /* Half height of chevron */
+}
+
+/* Push count over if there's a sibling chevron */
+.list .chevron + [class*="count"] {
+  right: 30px;
+}
+
+/* Position buttons vertically centered on the right in list items */
+.list [class*="button"] {
+  left: auto;
+  margin-top: -14px; /* Half height of button */
+}
+
+.list .toggle {
+  margin-top: -15px; /* Half height of toggle */
+}