sb-styleguide 0.0.1 → 0.0.2

data/vendor/assets/stylesheets/styleguide/base/_labels.css.scss

@@ -0,0 +1,42 @@
+//
+// Labels
+// $author Ad Taylor
+//
+@import "compass/css3";
+
+
+// ==========================================================================
+// Default alert
+// ==========================================================================
+.label {
+  display: inline-block;
+  @include ie7-inline-block;
+  padding: -1px+ms(0)/4 ms(0)/2 1px+ms(0)/4 ;
+  margin-bottom: 0; // For input.btn
+  @include ie7-restore-left-whitespace;
+
+  @include border-radius( ms(0)/4 );
+
+  background-color: mono(2);
+
+  color: $white;
+  @extend small;
+  line-height: 1;
+  text-align: center;
+  letter-spacing: 1px;
+  vertical-align: middle;
+
+  /* Label colors */
+  &.orange {
+    background-color: orange();
+  }
+
+  &.blue {
+    background-color: blue();
+ }
+
+  &.green {
+    background-color: green();
+ }
+
+}

data/vendor/assets/stylesheets/styleguide/base/_lists.css.scss

@@ -0,0 +1,52 @@
+//
+// Lists
+// $author Ad Taylor
+//
+
+// ==========================================================================
+// Action list - hoz
+// ==========================================================================
+
+.action-list {
+  @include clearfix();
+  padding: 0;
+
+  & > li {
+    display: inline-block;
+    margin-right: $column-gutter/4;
+    *display: inline;
+    *zoom: 1;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+  }
+  
+  .divider {
+    border-left: 1px solid mono(2);
+    height: $base-line-height-px/2;
+  }
+}
+
+
+// ==========================================================================
+// Action list Collapse state
+// ==========================================================================
+
+@mixin test {
+$gridSize: length($grids);
+$lastMQ: nth( nth($grids, $gridSize), 4);
+
+@media ( $lastMQ ) {
+
+  .action-list.collapse {
+    & > li {
+      display: block;
+    }
+  }
+
+}
+}
+
+@include test();

data/vendor/assets/stylesheets/styleguide/base/_reset.css.scss

@@ -0,0 +1,258 @@
+//
+// normalize.css - Global resets to level out browser handling or default elements
+// MIT License | git.io/normalize
+// @author Nicolas Gallagher and Jonathan Neal
+//
+
+@import "compass/css3/box-sizing";
+
+// ==========================================================================
+// HTML5 display definitions
+// ==========================================================================
+
+// Corrects `block` display not defined in IE6/7/8/9 & FF3.
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+// Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+// Prevents modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS5 devices.
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+// Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
+// Known issue: no IE6 support.
+
+[hidden] {
+    display: none;
+}
+
+// Set default box model
+@if $setBoxSizing {
+  * {
+    @include box-sizing(border-box);
+    *behavior: url(/boxsizing.htc);
+  }
+}
+
+// ==========================================================================
+// Lists
+// ========================================================================== 
+
+// Addresses margins set differently in IE6/7.
+
+dl,
+menu,
+ol,
+ul {
+    margin: 0 0 ms(0);
+}
+
+dd {
+    margin: 0 0 0 ms(1);
+}
+
+// Addresses paddings set differently in IE6/7.
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 $column-gutter*2;
+}
+
+// Corrects list images handled incorrectly in IE7.
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+// ==========================================================================
+// Embedded content
+// ========================================================================== 
+
+//
+// 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
+// 2. Improves image quality when scaled in IE7.
+//    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+
+img {
+    border: 0; // 1 
+    -ms-interpolation-mode: bicubic; // 2 
+}
+
+// Corrects overflow displayed oddly in IE9.
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+// ==========================================================================
+// Figures
+// ========================================================================== 
+
+// Addresses margin not present in IE6/7/8/9, S5, O11.
+
+figure {
+    margin: 0;
+}
+
+// ==========================================================================
+// Forms
+// ========================================================================== 
+
+// Corrects margin displayed oddly in IE6/7.
+
+form {
+    margin: 0;
+}
+
+// Define consistent border, margin, and padding.
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+// 1. Corrects color not being inherited in IE6/7/8/9.
+// 2. Corrects text not wrapping in FF3.
+// 3. Corrects alignment displayed oddly in IE6/7.
+
+legend {
+    border: 0; // 1 
+    padding: 0;
+    white-space: normal; // 2 
+    *margin-left: -7px; // 3 
+}
+
+// 1. Corrects font size not being inherited in all browsers.
+// 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
+// 3. Improves appearance and consistency in all browsers
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; // 1 
+    margin: 0; // 2 
+    vertical-align: baseline; // 3 
+    *vertical-align: middle; // 3 
+}
+
+//
+// Addresses FF3/4 setting `line-height` on `input` using `!important` in the
+// UA stylesheet
+
+button,
+input {
+    line-height: normal;
+}
+
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Corrects inability to style clickable `input` types in iOS.
+// 3. Improves usability and consistency of cursor style between image-type
+//    `input` and others.
+// 4. Removes inner spacing in IE7 without affecting normal text inputs.
+//    Known issue: inner spacing remains in IE6.
+
+button,
+html input[type="button"], // 1 
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; // 2 
+    cursor: pointer; // 3 
+    *overflow: visible;  // 4 
+}
+
+// Re-set default cursor for disabled elements.
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+// 1. Addresses box sizing set to content-box in IE8/9.
+// 2. Removes excess padding in IE8/9.
+// 3. Removes excess padding in IE7.
+//    Known issue: excess padding remains in IE6.
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; // 1 
+    padding: 0; // 2 
+    *height: 13px; // 3 
+    *width: 13px; // 3 
+}
+
+
+// 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
+// 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
+//    to future-proof).
+
+input[type="search"] {
+    -webkit-appearance: textfield; // 1 
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; // 2 
+    box-sizing: content-box;
+}
+
+// Removes inner padding and search cancel button in S5, Chrome on OS X.
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+// Removes inner padding and border in FF3+.
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+// 1. Removes default vertical scrollbar in IE6/7/8/9.
+// 2. Improves readability and alignment in all browsers.
+
+textarea {
+    overflow: auto; // 1
+    vertical-align: top; // 2
+}
+
+// ==========================================================================
+// Tables
+// ========================================================================== 
+
+// Remove most spacing between table cells.
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

data/vendor/assets/stylesheets/styleguide/base/_type.css.scss

@@ -0,0 +1,306 @@
+//
+// Type Defaults - Using Normalize.css rules as starting point
+// $author Ad Taylor
+
+// ==========================================================================
+// Base
+// ==========================================================================
+
+
+// 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
+//    `em` units.
+// 2. Prevents iOS text size adjust after orientation change, without disabling
+//    user zoom.
+
+
+html {
+  font-size: 100%; // 1
+  -webkit-text-size-adjust: 100%; // 2
+  -ms-text-size-adjust: 100%; // 2
+}
+
+// Addresses `font-family` inconsistency between `textarea` and other form
+// elements.
+
+html,
+button,
+input,
+select,
+textarea {
+  font-family: $base-font-family;
+}
+
+// Addresses margins handled incorrectly in IE6/7.
+
+body {
+  margin: 0;
+  background-color: $body-color;
+  font-size: ms(0);
+  line-height: $base-line-height;
+  color: $body-font-color;
+  -webkit-font-smoothing: antialiased;
+}
+
+// ==========================================================================
+// Links
+// ========================================================================== 
+
+a {
+  border-bottom: 1px dotted $txt-color;
+  text-decoration: none;
+  color: $txt-color;
+}
+
+// Addresses `outline` inconsistency between Chrome and other browsers.
+
+a:focus {
+  outline: thin dotted;
+}
+
+// Improves readability when focused and also mouse hovered in all browsers.
+// people.opera.com/patrickl/experiments/keyboard/test
+
+a:active,
+a.is-active,
+.is-active > a,
+a:hover {
+  border-color: $main-color;
+  outline: 0;
+  color: $main-color;
+}
+
+a.prominent {
+  color: $main-color;
+  text-decoration: none;
+  font-weight: bold;
+
+  &:active,
+  &.is-active,
+  &:hover {
+    border-bottom: 1px dotted $main-color;
+  }
+}
+
+// ==========================================================================
+// Basic Typography
+// ==========================================================================
+
+/* Headings */
+h1, .h1, h2, .h2, h3, .h3,
+h4, .h4, h5, .h5 {
+  margin-bottom: ms(0);
+  margin-top: ms(0);
+  font-family: $header-font-family;
+  font-weight: bold;
+}
+
+h1, .h1 {
+  font-size: ms(5);
+  line-height: 1.34;
+}
+
+h2, .h2 {
+  font-size: ms(4);
+  line-height: 1.19;
+}
+
+h3, .h3 {
+  font-size: ms(3);
+}
+
+h4, .h4{
+  font-size: ms(2);
+}
+
+h5, .h5 {
+  font-size: ms(1);
+}
+
+.h-light {
+  font-weight: normal;
+}
+
+// Addresses styling not present in IE7/8/9, S5, Chrome.
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+// Addresses style set to `bolder` in FF3+, S4/5, Chrome.
+
+
+b,
+strong {
+  font-weight: bold;
+}
+
+blockquote {
+  margin: 1em 40px;
+}
+
+// Addresses styling not present in S5, Chrome.
+
+
+dfn {
+  font-style: italic;
+}
+
+// Addresses styling not present in IE6/7/8/9.
+
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+// Addresses margins set differently in IE6/7.
+
+p,
+pre {
+  margin-bottom: ms(0);
+  margin-top: 0;
+}
+
+
+// Corrects font family set oddly in IE6, S4/5, Chrome.
+// en.wikipedia.org/wiki/User:Davidgothberg/Test59
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+
+code {
+  background-color: transparentize( $main-color, 0.7);
+}
+
+// Improves readability of pre-formatted text in all browsers.
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+// Addresses CSS quotes not supported in IE6/7.
+
+q {
+  quotes: none;
+}
+
+// Addresses `quotes` property not supported in S4.
+
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+small {
+  font-size: 0.785em;
+}
+
+// Prevents `sub` and `sup` affecting `line-height` in all browsers.
+// gist.github.com/413930
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+
+// ==========================================================================
+// Web fonts
+// ==========================================================================
+@import "webfonts/all";
+
+
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+a[href*='twitter.com'], .twitter {
+  color: $twitter-color;
+}
+a[href*='twitter.com'], a.twitter {
+  &:hover, &:focus {
+    color: darken($twitter-color, 10%);
+  }
+}
+
+a[href*='mailto:'], .email {
+  color: $email-color;
+}
+a[href*='mailto:'], a.email {
+  &:hover, &:focus {
+    color: darken($email-color, 10%);
+  }
+}
+
+
+a[href*='facebook.com'], .facebook {
+  color: $facebook-color;
+}
+a[href*='facebook.com'], a.facebook {
+  &:hover, &:focus {
+    color: darken($facebook-color, 10%);
+  }
+}
+
+
+// ==========================================================================
+// Typographic Extensions
+// ==========================================================================
+
+// Standout copy like leading paragraphs
+
+.standout {
+  font-size: ms(1);
+}
+
+// Supporting text
+
+.support {
+  @extend small;
+  margin-bottom: ms(0)/2;
+}
+
+// Secondary text
+
+.secondary {
+  color: mono(2);
+}
+
+// Shout
+
+.shout {
+  font-weight: bold;
+
+  &.small {
+    color: $main-color;
+  }
+
+  &.medium {
+    font-size: ms(1);
+  }
+
+  &.large {
+    font-size: ms(5);
+  }
+}
+