compass-rails31 0.12.0.alpha.0.91a748a

data/examples/compass/pie.html.haml

@@ -0,0 +1,73 @@
+!!! 5
+%html
+  %head
+    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "content-type"}/
+    %title Basic CSS3 Demos
+    %link{:charset => "utf-8", :href => "stylesheets/pie.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
+  %body
+    .section
+      %h2 border-radius
+      #test1.test Cherry
+      %code
+        %strong
+          border-radius: 1em;   /* Standard */
+          \-moz-border-radius: 1em;   /* Gecko */
+          \-webkit-border-radius: 1em;   /* WebKit */
+    .section
+      %h2 box-shadow
+      #test2.test Apple
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        %strong
+          box-shadow: #999 0 .25em .5em;
+          \-webkit-box-shadow: #999 0 .25em .5em;
+          \-moz-box-shadow: #999 0 .25em .5em;
+    .section
+      %h2 linear-gradient
+      #test3.test Blueberry
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        box-shadow: #999 0 .25em .5em;
+        \-webkit-box-shadow: #999 0 .25em .5em;
+        \-moz-box-shadow: #999 0 .25em .5em;
+        %strong
+          background: #9CF;   /* Fallback */
+          background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
+          background: -moz-linear-gradient(#9CF, #03C);
+          background: linear-gradient(#9CF, #03C);
+    .section
+      %h2 multiple background images
+      #test4.test Rhubarb
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        box-shadow: #999 0 .25em .5em;
+        \-webkit-box-shadow: #999 0 .25em .5em;
+        \-moz-box-shadow: #999 0 .25em .5em;
+        %strong
+          background: url(icon-ie.png) no-repeat 50% 0 #FFF;   /* Fallback */
+          background: url(icon-ie.png) no-repeat 50% 0,
+          url(icon-firefox.png) no-repeat 0 0,
+          url(icon-chrome.png) no-repeat 100% 0,
+          url(icon-safari.png) no-repeat 0 100%,
+          url(icon-opera.png) no-repeat 100% 100% #FFF;
+    .section
+      %h2 border-image
+      #test5.test Pumpkin
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        box-shadow: #999 0 .25em .5em;
+        \-webkit-box-shadow: #999 0 .25em .5em;
+        \-moz-box-shadow: #999 0 .25em .5em;
+        %strong
+          border-image: url(border2.png) 15 fill stretch;
+          \-moz-border-image: url(border2.png) 15 stretch;
+          \-webkit-border-image: url(border2.png) 15 stretch;
+          border: 15px solid transparent;

data/examples/compass/sprites.html.haml

@@ -0,0 +1,37 @@
+!!!
+%html
+  %head
+    %link{:href => "stylesheets/sprites.css", :rel => "stylesheet", :type => "text/css"}
+  %body
+    %h1 Flags
+    %table#flags
+      %tr
+        %td.us
+        %td.de
+        %td.ca
+      %tr
+        %td.au
+        %td.cn
+        %td.cz
+      %tr
+        %td.nz
+        %td.jp
+        %td.scotland
+      %tr
+        %td.tw
+        %td.rs
+        %td.gb
+    %h1 Emblems
+    %table#emblems
+      %tr
+        %td.favorite
+        %td.important
+        %td.photos
+      %tr
+        %td.readonly
+        %td.symbolic-link
+        %td.system
+      %tr
+        %td.unreadable
+        %td
+        %td

data/examples/compass/src/bp_layout.scss

@@ -0,0 +1,18 @@
+@import "compass/layout/floated";
+
+// It's easy to build a grid with a floated layout
+$gutter: $compass-gutter-width;
+$col-width: 30px;
+$number-of-columns: 24;
+$total-width: $number-of-columns * ($col-width + $gutter) - $gutter ;
+
+@mixin span($n) {
+  width: $n * ($col-width + $gutter) - $gutter;
+}
+
+// Provides a number of base classes.
+@include act-like-blueprint;
+
+#page    { @extend .container; @include span($number-of-columns); }
+#sidebar { @extend .column;    @include span(8);                  }
+#content { @extend .column;    @include span(16); @extend .last;  }