compass-ui 0.0.3

data/demos/sass/_base.scss

@@ -0,0 +1,5 @@
+// @import "normalize";
+@import "compass/reset";
+@import "blueprint/grid";
+@import "demo";
+

data/demos/sass/_demo.scss

@@ -0,0 +1,124 @@
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+
+$test-blue: #049CDB;
+$test-blue-dark: #0064CD;
+$test-red: #9D261D;
+$test-orange: #F89406;
+$test-green: #46A546;
+
+body{ 
+  font: 62.5% Arial, Helvetica, sans-serif;
+  margin: 20px 0;
+}
+
+
+#container {
+  @include container;
+
+  #header, #footer {
+    @include column(24, true);
+    background-color: $test-blue-dark;
+    @include background-image(linear-gradient($test-blue, $test-blue-dark));
+    @include border-radius(5px);
+    color: white;
+    margin-bottom: 10px;
+    
+    h1 {
+      font-size: 2.0em;
+      color: white;
+      margin: 6px;
+      padding: 10px 0;
+    }
+    
+  }
+
+  // a {
+  //   color: $test-blue-dark;
+  //   &:hover {
+  //     color: $test-blue;
+  //   }
+  // }
+
+  #content {
+    @include column(18);
+    padding-top: 10px;
+  }
+
+  #sidebar {
+    @include column(6, true);
+
+    a {
+      display: block;
+      margin: 5px 0;
+      text-decoration: none;
+    }
+
+    p, div {
+      font-size: 1.5em;
+      padding: 0.9em 0.7em;
+    }
+    // #toggle-css {
+    //   font-size: 1.5em;
+    //   padding: 0.9em 0.7em;
+    // }
+  }
+}
+
+.demoHeaders { 
+  margin-top: 2em; 
+  margin-bottom: 1em;
+}
+ul#icons { 
+  margin: 0; 
+  padding: 0;}
+ul#icons li { 
+  margin: 2px; 
+  position: relative; 
+  padding: 4px 0; 
+  cursor: pointer; 
+  float: left; 
+  list-style: none; }
+ul#icons span.ui-icon { 
+  float: left; 
+  margin: 0 4px; }
+.columnbox { 
+  width: 500px; }
+#eq span { 
+  height: 120px; 
+  float: left; 
+  margin: 15px; }
+#countries { width: 300px; }
+
+h1 {
+  font-size: 2.0em;
+  font-weight: bold;
+  color: $test-blue-dark;
+}
+h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+h2#showing {
+  @include border-radius(5px);
+  // @include background-image(linear-gradient($test-blue, $test-blue-dark));
+  // @include background-image(linear-gradient(lighten($test-orange, 20%), $test-orange));
+  background-color: $test-green;
+  @include background-image(linear-gradient(lighten($test-green, 20%), $test-green));
+  color: darken($test-green, 18%);
+  padding: 0.9em;
+  span {
+    color: white;
+  }
+}
+
+p {
+  font-size: 1.3em;
+  padding: 5px 0;
+}
+
+strong {
+  font-weight: bold;
+}
+

data/demos/sass/_normalize.scss

@@ -0,0 +1,387 @@
+/* =============================================================================
+   normalize.css
+   2011-07-06T20:20 UTC
+   //github.com/jonathantneal/normalize.css
+
+   Normalize.css is a customisable CSS file that makes browsers render all
+   elements more consistently and in line with modern standards. We researched
+   the differences between default browser styles in order to precisely target
+   only the styles that need normalizing.
+
+   How comment documentation is written:
+   Comments: (anchor) (type of change) (summary of issue) in (affected browsers)
+   Url: (url related to above comment)
+
+   To be concise, comments are restricted to a length of 77 characters or less.
+
+   What 'types of change' mean:
+   Addresses: Changes involving downgrades for greater cross-browser consistency
+   Corrects: Bug fixes and corrections to unexpected visual quirks
+   Improves: Improvements based on popular usage and html5 recommendation
+   ========================================================================== */
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * Corrects block display not defined in IE6/7/8/9 & FF3
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+	display: block;
+}
+
+/*
+ * 1. Improves visual focus of mouse in all browsers
+ * 2. Corrects text resizing oddly when font size is set using ems in IE6/7
+ *    http://clagnut.com/blog/348/#c790
+ * 3. Corrects page centering in all browsers regardless of content height
+ * 4. Improves visual appearance of containers during a delegated click in mSaf
+ *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
+ * 5. Corrects text resizing oddly after orientation change in all handhelds
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+
+html {
+	cursor: default; /* 1 */
+	font-size: 100%; /* 2 */
+	overflow-y: scroll; /* 3 */
+	-webkit-tap-highlight-color: transparent; /* 4 */
+	-ms-text-size-adjust: 100%; /* 5 */
+	-webkit-text-size-adjust: 100%; /* 5 */
+}
+
+/* 
+ * 1. Addresses text resizing limitations in IE6/7
+ *    Improves text sizing inconsistency in all browsers
+ *    Known issue: text sizing unnecessary for 'form'
+ * 2. Improves margins set oddly in IE6/7 FF3/4 S5 C10
+ */
+
+body,
+form,
+input,
+button,
+select, 
+textarea {
+	font-size: 100%; /* 1 */
+	margin: 0; /* 2 */
+}
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Improves appearance when active or hovered in all browsers
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
+
+a,
+a:active,
+a:hover {
+	outline: none;
+}
+
+/*
+ * Addresses outline set oddly in C10
+ */
+
+a:focus {
+	outline: thin dotted;
+}
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Corrects styling not present in IE6/7/8/9 S5 C10
+ */
+
+abbr {
+	_border-bottom: expression(this.title ? '1px dotted' : 'none');
+}
+
+abbr[title] {
+	border-bottom: 1px dotted;
+}
+
+/*
+ * Corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10
+*/
+
+b, 
+strong { 
+	font-weight: bold; 
+}
+
+/*
+ * Corrects styling not present in S5 C10
+ */
+
+dfn {
+	font-style: italic;
+}
+
+/*
+ * Corrects styling not present in IE6/7/8/9
+ */
+
+mark {
+	background: #FF0;
+	color: #000;
+}
+
+/*
+ * Corrects font family displayed oddly in IE6 S5 C10
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+pre,
+code,
+kbd,
+samp {
+	font-family: monospace, monospace;
+	_font-family: 'courier new', monospace;
+	font-size: 1em;
+}
+
+/*
+ * 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 quote property not supported in S4
+ */
+
+q:before,
+q:after {
+	content: '';
+	content: none;
+}
+
+/*
+ * Improves appearance in all browsers
+ */
+
+small,
+sub,
+sup {
+	font-size: 75%;
+}
+
+/*
+ * Improves appearance in all browsers
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Improves appearance of navigation-specific lists
+ */
+
+nav ul {
+	list-style: none;
+}
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * Corrects display not defined in IE6/7/8/9 & FF3
+ */
+
+audio[controls],
+canvas,
+video {
+	display: inline-block;
+	*display: inline;
+}
+
+audio {
+	display: none;
+	_display: expression(this.controls ? 'inline' : 'none');
+	*zoom: 1;
+}
+
+audio[controls] {
+	display: inline-block;
+}
+
+/*
+ * 1. Improves readability when inside 'a' in all browsers
+ * 2. Improves visual appearance 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;
+}
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+	*margin-left: -7px;
+}
+
+/*
+ * Improves appearance in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+	-webkit-appearance: none;
+	border-radius: 0;
+	vertical-align: baseline;
+	*vertical-align: middle;
+}
+
+/*
+ * 1. Corrects FF3/4 setting it using !important in the UA stylesheet
+ * 2. Corrects spacing displayed oddly in IE6/7
+ * 3. Corrects inability to style clickable 'input' types in iOS
+ */
+
+button,
+input {
+	line-height: normal; /* 1 */
+	_overflow: expression(this.type == 'button|reset|submit' ? 'visible' : ''); /* 2 */
+}
+
+/* 3 */
+
+button,
+input[type="button"], 
+input[type="reset"], 
+input[type="submit"] {
+	overflow: visible;
+}
+
+/*
+ * Addresses box sizing forced to border-box in IE6/7
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+	box-sizing: border-box;
+}
+
+/*
+ * Addresses sizing set oddly to searchfield in S5 iOS C10
+ * Known issue: -moz included to future-proof
+ */
+
+input[type="search"] {
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+/*
+ * Addresses inner padding displayed oddly in S5 C10 on OSX
+ */
+
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Corrects appearance displayed oddly in FF3/4
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+/*
+ * 1. Corrects scrollbar displayed oddly in IE6/7/8/9
+ * 2. Improves readability and alignment in all browsers
+ */
+
+textarea {
+	overflow: auto; /* 1 */
+	vertical-align: top; /* 2 */
+}
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+/* 
+ * Improves visual appearance in all browsers
+ */
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+