compass_ae_sencha 1.0.0

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/grid/s.css

@@ -0,0 +1,531 @@
+html {
+  padding: 1em;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
+  background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: linear-gradient(#dddddd, #ffffff) no-repeat;
+}
+
+h1 {
+  font-size: 2em;
+  margin-bottom: 1em;
+}
+
+h2 {
+  font-size: 1.4em;
+  margin-bottom: .6em;
+}
+
+.doc {
+  background: #fff;
+  border: #ddd;
+  padding: 1em;
+  color: #aaa;
+  margin: 1em;
+  font-style: italic;
+}
+.doc a {
+  color: #999;
+}
+
+/**
+ * Responsive grid
+ * 
+ * @link http://foundation.zurb.com/docs/grid.php
+ *
+ * @author Zurb http://www.zurb.com/ Original concept
+ * @author David Kaneda http://www.davidkaneda.com/ Further abstraction
+ */
+.clearfix:before, .row:before, .clearfix:after, .row:after {
+  content: "";
+  display: table;
+}
+.clearfix:after, .row:after {
+  clear: both;
+}
+
+img {
+  -ms-interpolation-mode: bicubic;
+}
+
+#map_canvas img, .map_canvas img {
+  max-width: none !important;
+}
+
+img, object, embed {
+  max-width: 100%;
+  height: auto;
+}
+
+.column, .columns-1, .phone-1, .columns-2, .phone-2, .columns-3, .phone-3, .columns-4, .phone-4, .columns-5, .phone-5, .columns-6, .phone-6, .columns-7, .phone-7, .columns-8, .phone-8, .columns-9, .phone-9, .columns-10, .phone-10, .columns-11, .phone-11, .columns-12, .phone-12 {
+  margin-left: 4.4%;
+  float: left;
+  min-height: 1px;
+  position: relative;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.column:first-child, .columns-1:first-child, .phone-1:first-child, .columns-2:first-child, .phone-2:first-child, .columns-3:first-child, .phone-3:first-child, .columns-4:first-child, .phone-4:first-child, .columns-5:first-child, .phone-5:first-child, .columns-6:first-child, .phone-6:first-child, .columns-7:first-child, .phone-7:first-child, .columns-8:first-child, .phone-8:first-child, .columns-9:first-child, .phone-9:first-child, .columns-10:first-child, .phone-10:first-child, .columns-11:first-child, .phone-11:first-child, .columns-12:first-child, .phone-12:first-child {
+  margin-left: 0;
+}
+
+.grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
+  display: block;
+  overflow: hidden;
+  list-style-type: none;
+  padding: 0;
+}
+.grid > li, .grid-1 > li, .grid-2 > li, .grid-3 > li, .grid-4 > li, .grid-5 > li, .grid-6 > li, .grid-7 > li, .grid-8 > li, .grid-9 > li, .grid-10 > li, .grid-11 > li, .grid-12 > li {
+  float: left;
+  background-color: rgba(153, 153, 153, 0.3);
+}
+
+.row {
+  width: 100%;
+  max-width: 960px;
+  min-width: 600px;
+  margin: 0 auto;
+}
+.row .row {
+  min-width: 0;
+}
+
+.columns-1 {
+  width: 4.3%;
+}
+
+.offset-by-1 {
+  margin-left: 13.1%;
+}
+.offset-by-1:first-child {
+  margin-left: 8.7%;
+}
+
+.push-1 {
+  left: 8.7%;
+}
+
+.pull-1 {
+  right: 8.7%;
+}
+
+.grid-1 {
+  margin-left: 0%;
+}
+.grid-1 > li {
+  margin-left: 0%;
+  width: 100%;
+}
+.grid-1 > li:nth-child(1n+1) {
+  clear: left;
+}
+
+.columns-2 {
+  width: 13%;
+}
+
+.offset-by-2 {
+  margin-left: 21.8%;
+}
+.offset-by-2:first-child {
+  margin-left: 17.4%;
+}
+
+.push-2 {
+  left: 17.4%;
+}
+
+.pull-2 {
+  right: 17.4%;
+}
+
+.grid-2 {
+  margin-left: -2.2%;
+}
+.grid-2 > li {
+  margin-left: 2.2%;
+  width: 47.8%;
+}
+.grid-2 > li:nth-child(2n+1) {
+  clear: left;
+}
+
+.columns-3 {
+  width: 21.7%;
+}
+
+.offset-by-3 {
+  margin-left: 30.5%;
+}
+.offset-by-3:first-child {
+  margin-left: 26.1%;
+}
+
+.push-3 {
+  left: 26.1%;
+}
+
+.pull-3 {
+  right: 26.1%;
+}
+
+.grid-3 {
+  margin-left: -2.933%;
+}
+.grid-3 > li {
+  margin-left: 2.933%;
+  width: 30.4%;
+}
+.grid-3 > li:nth-child(3n+1) {
+  clear: left;
+}
+
+.columns-4 {
+  width: 30.4%;
+}
+
+.offset-by-4 {
+  margin-left: 39.2%;
+}
+.offset-by-4:first-child {
+  margin-left: 34.8%;
+}
+
+.push-4 {
+  left: 34.8%;
+}
+
+.pull-4 {
+  right: 34.8%;
+}
+
+.grid-4 {
+  margin-left: -3.3%;
+}
+.grid-4 > li {
+  margin-left: 3.3%;
+  width: 21.7%;
+}
+.grid-4 > li:nth-child(4n+1) {
+  clear: left;
+}
+
+.columns-5 {
+  width: 39.1%;
+}
+
+.offset-by-5 {
+  margin-left: 47.9%;
+}
+.offset-by-5:first-child {
+  margin-left: 43.5%;
+}
+
+.push-5 {
+  left: 43.5%;
+}
+
+.pull-5 {
+  right: 43.5%;
+}
+
+.grid-5 {
+  margin-left: -3.52%;
+}
+.grid-5 > li {
+  margin-left: 3.52%;
+  width: 16.48%;
+}
+.grid-5 > li:nth-child(5n+1) {
+  clear: left;
+}
+
+.columns-6 {
+  width: 47.8%;
+}
+
+.offset-by-6 {
+  margin-left: 56.6%;
+}
+.offset-by-6:first-child {
+  margin-left: 52.2%;
+}
+
+.push-6 {
+  left: 52.2%;
+}
+
+.pull-6 {
+  right: 52.2%;
+}
+
+.grid-6 {
+  margin-left: -3.667%;
+}
+.grid-6 > li {
+  margin-left: 3.667%;
+  width: 13%;
+}
+.grid-6 > li:nth-child(6n+1) {
+  clear: left;
+}
+
+.columns-7 {
+  width: 56.5%;
+}
+
+.offset-by-7 {
+  margin-left: 65.3%;
+}
+.offset-by-7:first-child {
+  margin-left: 60.9%;
+}
+
+.push-7 {
+  left: 60.9%;
+}
+
+.pull-7 {
+  right: 60.9%;
+}
+
+.grid-7 {
+  margin-left: -3.771%;
+}
+.grid-7 > li {
+  margin-left: 3.771%;
+  width: 10.514%;
+}
+.grid-7 > li:nth-child(7n+1) {
+  clear: left;
+}
+
+.columns-8 {
+  width: 65.2%;
+}
+
+.offset-by-8 {
+  margin-left: 74%;
+}
+.offset-by-8:first-child {
+  margin-left: 69.6%;
+}
+
+.push-8 {
+  left: 69.6%;
+}
+
+.pull-8 {
+  right: 69.6%;
+}
+
+.grid-8 {
+  margin-left: -3.85%;
+}
+.grid-8 > li {
+  margin-left: 3.85%;
+  width: 8.65%;
+}
+.grid-8 > li:nth-child(8n+1) {
+  clear: left;
+}
+
+.columns-9 {
+  width: 73.9%;
+}
+
+.offset-by-9 {
+  margin-left: 82.7%;
+}
+.offset-by-9:first-child {
+  margin-left: 78.3%;
+}
+
+.push-9 {
+  left: 78.3%;
+}
+
+.pull-9 {
+  right: 78.3%;
+}
+
+.grid-9 {
+  margin-left: -3.911%;
+}
+.grid-9 > li {
+  margin-left: 3.911%;
+  width: 7.2%;
+}
+.grid-9 > li:nth-child(9n+1) {
+  clear: left;
+}
+
+.columns-10 {
+  width: 82.6%;
+}
+
+.offset-by-10 {
+  margin-left: 91.4%;
+}
+.offset-by-10:first-child {
+  margin-left: 87%;
+}
+
+.push-10 {
+  left: 87%;
+}
+
+.pull-10 {
+  right: 87%;
+}
+
+.grid-10 {
+  margin-left: -3.96%;
+}
+.grid-10 > li {
+  margin-left: 3.96%;
+  width: 6.04%;
+}
+.grid-10 > li:nth-child(10n+1) {
+  clear: left;
+}
+
+.columns-11 {
+  width: 91.3%;
+}
+
+.offset-by-11 {
+  margin-left: 100.1%;
+}
+.offset-by-11:first-child {
+  margin-left: 95.7%;
+}
+
+.push-11 {
+  left: 95.7%;
+}
+
+.pull-11 {
+  right: 95.7%;
+}
+
+.grid-11 {
+  margin-left: -4%;
+}
+.grid-11 > li {
+  margin-left: 4%;
+  width: 5.091%;
+}
+.grid-11 > li:nth-child(11n+1) {
+  clear: left;
+}
+
+.columns-12 {
+  width: 100%;
+}
+
+.push-12 {
+  left: 104.4%;
+}
+
+.pull-12 {
+  right: 104.4%;
+}
+
+.grid-12 {
+  margin-left: -4.033%;
+}
+.grid-12 > li {
+  margin-left: 4.033%;
+  width: 4.3%;
+}
+.grid-12 > li:nth-child(12n+1) {
+  clear: left;
+}
+
+.row .centered {
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media only screen and (max-width: 767px) {
+  .grid.mobile, .mobile.grid-1, .mobile.grid-2, .mobile.grid-3, .mobile.grid-4, .mobile.grid-5, .mobile.grid-6, .mobile.grid-7, .mobile.grid-8, .mobile.grid-9, .mobile.grid-10, .mobile.grid-11, .mobile.grid-12 {
+    margin-left: 0%;
+  }
+  .grid.mobile > li, .mobile.grid-1 > li, .mobile.grid-2 > li, .mobile.grid-3 > li, .mobile.grid-4 > li, .mobile.grid-5 > li, .mobile.grid-6 > li, .mobile.grid-7 > li, .mobile.grid-8 > li, .mobile.grid-9 > li, .mobile.grid-10 > li, .mobile.grid-11 > li, .mobile.grid-12 > li {
+    float: none;
+    width: 100%;
+    margin-left: 0%;
+  }
+
+  .row {
+    width: 100%;
+    min-width: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .row .row .column, .row .row .columns-1, .row .row .phone-1, .row .row .columns-2, .row .row .phone-2, .row .row .columns-3, .row .row .phone-3, .row .row .columns-4, .row .row .phone-4, .row .row .columns-5, .row .row .phone-5, .row .row .columns-6, .row .row .phone-6, .row .row .columns-7, .row .row .phone-7, .row .row .columns-8, .row .row .phone-8, .row .row .columns-9, .row .row .phone-9, .row .row .columns-10, .row .row .phone-10, .row .row .columns-11, .row .row .phone-11, .row .row .columns-12, .row .row .phone-12 {
+    padding: 0;
+  }
+
+  .column, .columns-1, .phone-1, .columns-2, .phone-2, .columns-3, .phone-3, .columns-4, .phone-4, .columns-5, .phone-5, .columns-6, .phone-6, .columns-7, .phone-7, .columns-8, .phone-8, .columns-9, .phone-9, .columns-10, .phone-10, .columns-11, .phone-11, .columns-12, .phone-12 {
+    width: auto;
+    float: none;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .no-margin-left, .offset-by-1, .offset-by-1:first-child, .offset-by-2, .offset-by-2:first-child, .offset-by-3, .offset-by-3:first-child, .offset-by-4, .offset-by-4:first-child, .offset-by-5, .offset-by-5:first-child, .offset-by-6, .offset-by-6:first-child, .offset-by-7, .offset-by-7:first-child, .offset-by-8, .offset-by-8:first-child, .offset-by-9, .offset-by-9:first-child, .offset-by-10, .offset-by-10:first-child, .offset-by-11, .offset-by-11:first-child, .offset-by-12, .offset-by-12:first-child {
+    margin-left: 0;
+  }
+
+  .no-left, .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {
+    left: none;
+  }
+
+  .no-right, .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {
+    right: none;
+  }
+
+  .phone-1 {
+    float: left;
+    margin-left: 4.4%;
+    width: 21.7%;
+  }
+
+  .phone-2 {
+    float: left;
+    margin-left: 4.4%;
+    width: 47.8%;
+  }
+
+  .phone-3 {
+    float: left;
+    margin-left: 4.4%;
+    width: 73.9%;
+  }
+
+  .phone-4 {
+    float: left;
+    margin-left: 4.4%;
+    width: 100%;
+  }
+}
+.row {
+  background-color: rgba(255, 0, 0, 0.3);
+}
+
+.grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
+  background-color: rgba(0, 128, 0, 0.3);
+}
+
+.column, .columns-1, .phone-1, .columns-2, .phone-2, .columns-3, .phone-3, .columns-4, .phone-4, .columns-5, .phone-5, .columns-6, .phone-6, .columns-7, .phone-7, .columns-8, .phone-8, .columns-9, .phone-9, .columns-10, .phone-10, .columns-11, .phone-11, .columns-12, .phone-12, .grid > li, .grid-1 > li, .grid-2 > li, .grid-3 > li, .grid-4 > li, .grid-5 > li, .grid-6 > li, .grid-7 > li, .grid-8 > li, .grid-9 > li, .grid-10 > li, .grid-11 > li, .grid-12 > li {
+  background-color: rgba(0, 0, 255, 0.3);
+  margin-bottom: 2px;
+  white-space: nowrap;
+}

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/grid/s.scss

@@ -0,0 +1,18 @@
+@import "tests";
+
+@import "recipes/layout/grid";
+
+// Simply to highlight some classes
+
+.row {
+    background-color: rgba(red, .3);
+}
+
+.grid {
+    background-color: rgba(green, .3);
+}
+.column, .grid > li {
+    background-color: rgba(blue, .3);
+    margin-bottom: 2px;
+    white-space: nowrap;
+}

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/index.html

@@ -0,0 +1,6 @@
+<!doctype html>
+<h1>Tests for <a href="../">recipes</a>/layout</h1>
+
+<ul>
+    <li><a href="vertical-align">vertical-align</a></li>
+</ul>

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/vertical-align/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<link rel="stylesheet" href="s.css" />
+<div class="v-align-container">
+    <div class="v-align-content-container">
+        <div class="v-align-content">
+            <h1>Tests for <a href="../../">recipes</a>/<a href="../">layout</a>/vertical-align</h1>
+            <p class="doc">Original trick <a href="http://css-tricks.com/snippets/css/center-div-with-dynamic-height/">by Chris Coyier</a>
+        </div>
+    </div>
+</div>

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/vertical-align/s.css

@@ -0,0 +1,85 @@
+html {
+  padding: 1em;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
+  background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
+  background: linear-gradient(#dddddd, #ffffff) no-repeat;
+}
+
+h1 {
+  font-size: 2em;
+  margin-bottom: 1em;
+}
+
+h2 {
+  font-size: 1.4em;
+  margin-bottom: .6em;
+}
+
+.doc {
+  background: #fff;
+  border: #ddd;
+  padding: 1em;
+  color: #aaa;
+  margin: 1em;
+  font-style: italic;
+}
+.doc a {
+  color: #999;
+}
+
+/**
+ * Vertical alignement for page
+ * Inspired by http://css-tricks.com/snippets/css/center-div-with-dynamic-height/
+ * 
+ * Usage:
+ * 
+ * SCSS
+ * @include vertical-align-requirement;
+ * .v-align-container { @include vertical-align-container }
+ * .v-align-content-container { @include vertical-align-content-container }
+ * .v-align-content { @include vertical-align-content }
+ * 
+ * HTML
+ * <body>
+ *     <div class="v-align-container">
+ *         <div class="v-align-content-container">
+ *             <div class="v-align-content">
+ *             Your content !
+ *             </div>
+ *         </div> 
+ *     </div>
+ * </body>
+ *
+ * @thanks Chris Coyier @chriscoyier
+ * @autor Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.v-align-container {
+  display: table;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  height: 100%;
+  *position: relative;
+}
+
+.v-align-content-container {
+  display: table-cell;
+  vertical-align: middle;
+  *position: absolute;
+  *top: 50%;
+}
+
+.v-align-content {
+  *position: relative;
+  *top: -50%;
+}

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/vertical-align/s.scss

@@ -0,0 +1,20 @@
+@import "tests";
+
+@import "recipes/layout/vertical-align";
+
+@include vertical-align-requirement;
+
+.v-align-container
+{
+    @include vertical-align-container;
+}
+
+    .v-align-content-container
+    {
+        @include vertical-align-content-container;
+    }
+
+        .v-align-content
+        {
+            @include vertical-align-content;
+        }

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/media-queries/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<link rel="stylesheet" href="s.css" />
+<h1>Tests for <a href="../">recipes</a>/media-queries</h1>
+
+<p class="doc">Resize this window</p>
+        
+<div class="big">I'm big</div>
+
+<div class="medium">I'm medium</div>
+<div class="medium-only">I'm medium-only</div>
+
+<div class="small">I'm small</div>
+<div class="small-only">I'm small-only</div>
+
+<div class="tiny">I'm tiny</div>

data/public/stylesheets/sencha_touch/resources/themes/vendor/compass-recipes/tests/recipes/media-queries/s.scssx

@@ -0,0 +1,15 @@
+@import "tests";
+
+@import "recipes/media-queries";
+
+div
+{
+    display: none;
+}
+
+.big { @include media-big { display: block }}
+.medium { @include media-medium { display: block }}
+.medium-only { @include media-medium-only { display: block }}
+.small { @include media-small { display: block }}
+.small-only { @include media-small-only { display: block }}
+.tiny { @include media-tiny { display: block }}