compass 0.12.4 → 1.0.0

data/examples/compass/pie.html.haml

@@ -1,73 +0,0 @@
-!!! 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

@@ -1,37 +0,0 @@
-!!!
-%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

@@ -1,18 +0,0 @@
-@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;  }

data/examples/compass/src/compass.scss

@@ -1,46 +0,0 @@
-@mixin compass($s) {
-  position: relative;
-  width: 4 * $s;
-  height: 4 * $s;
-  font-size: 24px;
-  font-family: "Academy Engraved LET", "Papyrus";
-  .n, .s, .e, .w {
-    position: absolute;
-    width: $s;
-    height: $s;
-    text-align: center;
-    vertical-align: middle; }
-  .w {
-    left: 0px; }
-  .n.w, .s.w {
-    left: 0.5 * $s; }
-  .n, .s {
-    left: 1.5 * $s; }
-  .n.e, .s.e {
-    left: 2.5 * $s; }
-  .e {
-    left: 3 * $s; }
-  .n {
-    top: 0px; }
-  .n.w, .n.e {
-    top: 0.5 * $s; }
-  .w, .e {
-    top: 1.5 * $s; }
-  .s.w, .s.e {
-    top: 2.5 * $s; }
-  .s {
-    top: 3 * $s; } }
-
-.compass {
-  margin: 1em auto;
-  @include compass(4em);
-  .n, .s, .e, .w {
-    p {
-      margin: {
-        top: 1.5em;
-        bottom: 1.5em; }; } }
-  .n.w, .s.w, .n.e, .s.e {
-    p {
-      margin: {
-        top: 1em;
-        bottom: 1em; }; } } }

data/examples/compass/src/pie.scss

@@ -1,110 +0,0 @@
-// this file demonstrates how to use the CSS PIE extension for
-// legacy versions of Internet Explorer. In many cases, PIE will allow
-// you to style in CSS things that you'd have to do using image chops otherwise.
-//
-// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
-@import "compass/css3";
-@import "compass/css3/pie";
-
-$pie-behavior: url("/stylesheets/PIE.htc");
-
-// It is suggested that you use Sass's @extend directive to apply the PIE
-// behavior to your elements. Setting this variable will tell the `pie` mixin
-// to extend. Or you can just extend the base class yourself.
-$pie-base-class: pie-element;
-
-// There are two approaches to creating PIE elements
-// The default approach is to make the element position: relative.
-.pie-element {
-  // relative is the default, so passing relative
-  // is redundant, but we do it here for clarity.
-  @include pie-element(relative);
-}
-
-html, body {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-    font-size: 16px;
-    background: #EEE;
-}
-
-.section {
-    border: 1px solid #CCC;
-    padding: 1em 2em 2em;
-    margin: 3em;
-    background: #FFF;
-}
-
-.section h2 {
-    border: 1px solid #CCC;
-    position: relative;
-    left: -3em;
-    top: -2em;
-    background: #FFF;
-    font-size: 1em;
-    padding: .25em 1em;
-    margin: 0;
-}
-
-.section code {
-    display: block;
-    white-space: pre;
-    margin-left: 250px;
-    min-height: 100px;
-    color: #999;
-    overflow: auto;
-}
-.section code strong {
-    color: #000;
-}
-
-.test {
-    width: 200px;
-    height: 100px;
-    line-height: 100px;
-    text-align: center;
-    border: 2px solid;
-    background: #FFF;
-    float: left;
-    @include pie;
-}
-
-#test1 {
-    border-color: #c00;
-    @include border-radius(1em);
-}
-
-#test2 {
-    border-color: #090;
-    @include border-radius(1em);
-    @include box-shadow(#999 0 .25em .5em);
-}
-
-#test3 {
-    border-color: #00c;
-    @include border-radius(1em);
-    @include box-shadow(#999 0 .25em .5em);
-    @include background(linear-gradient(#9CF, #03C));
-}
-
-#test4 {
-    border-color: #F99;
-    @include border-radius(1em);
-    @include box-shadow(#999 0 .25em .5em);
-    background: #FFF image-url("icon-ie.png") no-repeat 50% 0;
-    @include background(
-      image-url("icon-ie.png") no-repeat 50% 0,
-      image-url("icon-firefox.png") no-repeat 0 0,
-      image-url("icon-chrome.png") no-repeat 100% 0,
-      image-url("icon-safari.png") no-repeat 0 100%,
-      image-url("icon-opera.png") no-repeat 100% 100% #FFF
-    );
-}
-
-#test5 {
-    @include border-image(image-url("border2.png") 15 stretch);
-    border: 15px solid transparent;
-    width: 180px;
-}
-