Skip to content
This repository
Browse code

CSS3 PIE module. Needs docs.

  • Loading branch information...
commit d66b440eeb2c89f9c70b74190229901e65b661f1 1 parent 009f4ce
Chris Eppstein authored November 18, 2010
7  examples/compass/headers.txt
... ...
@@ -0,0 +1,7 @@
  1
+HTTP/1.1 200 OK
  2
+Connection: close
  3
+Date: Thu, 18 Nov 2010 17:15:33 GMT
  4
+Last-Modified: Thu, 18 Nov 2010 01:45:54 GMT
  5
+Content-Type: text/x-component
  6
+Content-Length: 28280
  7
+
BIN  examples/compass/images/border2.png
BIN  examples/compass/images/icon-chrome.png
BIN  examples/compass/images/icon-firefox.png
BIN  examples/compass/images/icon-ie.png
BIN  examples/compass/images/icon-opera.png
BIN  examples/compass/images/icon-safari.png
73  examples/compass/pie.html.haml
... ...
@@ -0,0 +1,73 @@
  1
+!!! 5
  2
+%html
  3
+  %head
  4
+    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "content-type"}/
  5
+    %title Basic CSS3 Demos
  6
+    %link{:charset => "utf-8", :href => "stylesheets/pie.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
  7
+  %body
  8
+    .section
  9
+      %h2 border-radius
  10
+      #test1.test Cherry
  11
+      %code
  12
+        %strong
  13
+          border-radius: 1em;   /* Standard */
  14
+          \-moz-border-radius: 1em;   /* Gecko */
  15
+          \-webkit-border-radius: 1em;   /* WebKit */
  16
+    .section
  17
+      %h2 box-shadow
  18
+      #test2.test Apple
  19
+      %code
  20
+        border-radius: 1em;
  21
+        \-moz-border-radius: 1em;
  22
+        \-webkit-border-radius: 1em;
  23
+        %strong
  24
+          box-shadow: #999 0 .25em .5em;
  25
+          \-webkit-box-shadow: #999 0 .25em .5em;
  26
+          \-moz-box-shadow: #999 0 .25em .5em;
  27
+    .section
  28
+      %h2 linear-gradient
  29
+      #test3.test Blueberry
  30
+      %code
  31
+        border-radius: 1em;
  32
+        \-moz-border-radius: 1em;
  33
+        \-webkit-border-radius: 1em;
  34
+        box-shadow: #999 0 .25em .5em;
  35
+        \-webkit-box-shadow: #999 0 .25em .5em;
  36
+        \-moz-box-shadow: #999 0 .25em .5em;
  37
+        %strong
  38
+          background: #9CF;   /* Fallback */
  39
+          background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
  40
+          background: -moz-linear-gradient(#9CF, #03C);
  41
+          background: linear-gradient(#9CF, #03C);
  42
+    .section
  43
+      %h2 multiple background images
  44
+      #test4.test Rhubarb
  45
+      %code
  46
+        border-radius: 1em;
  47
+        \-moz-border-radius: 1em;
  48
+        \-webkit-border-radius: 1em;
  49
+        box-shadow: #999 0 .25em .5em;
  50
+        \-webkit-box-shadow: #999 0 .25em .5em;
  51
+        \-moz-box-shadow: #999 0 .25em .5em;
  52
+        %strong
  53
+          background: url(icon-ie.png) no-repeat 50% 0 #FFF;   /* Fallback */
  54
+          background: url(icon-ie.png) no-repeat 50% 0,
  55
+          url(icon-firefox.png) no-repeat 0 0,
  56
+          url(icon-chrome.png) no-repeat 100% 0,
  57
+          url(icon-safari.png) no-repeat 0 100%,
  58
+          url(icon-opera.png) no-repeat 100% 100% #FFF;
  59
+    .section
  60
+      %h2 border-image
  61
+      #test5.test Pumpkin
  62
+      %code
  63
+        border-radius: 1em;
  64
+        \-moz-border-radius: 1em;
  65
+        \-webkit-border-radius: 1em;
  66
+        box-shadow: #999 0 .25em .5em;
  67
+        \-webkit-box-shadow: #999 0 .25em .5em;
  68
+        \-moz-box-shadow: #999 0 .25em .5em;
  69
+        %strong
  70
+          border-image: url(border2.png) 15 fill stretch;
  71
+          \-moz-border-image: url(border2.png) 15 stretch;
  72
+          \-webkit-border-image: url(border2.png) 15 stretch;
  73
+          border: 15px solid transparent;
110  examples/compass/src/pie.scss
... ...
@@ -0,0 +1,110 @@
  1
+// this file demonstrates how to use the CSS PIE extension for
  2
+// legacy versions of Internet Explorer. In many cases, PIE will allow
  3
+// you to style in CSS things that you'd have to do using image chops otherwise.
  4
+//
  5
+// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
  6
+@import "compass/pie";
  7
+@import "compass/css3/version-2";
  8
+
  9
+$pie-behavior: url("/stylesheets/PIE.htc");
  10
+
  11
+// It is suggested that you use Sass's @extend directive to apply the PIE
  12
+// behavior to your elements. Setting this variable will tell the `pie` mixin
  13
+// to extend. Or you can just extend the base class yourself.
  14
+$pie-base-class: pie-element;
  15
+
  16
+// There are two approaches to creating PIE elements
  17
+// The default approach is to make the element position: relative.
  18
+.pie-element {
  19
+  // relative is the default, so passing relative
  20
+  // is redundant, but we do it here for clarity.
  21
+  @include pie-element(relative);
  22
+}
  23
+
  24
+html, body {
  25
+    margin: 0;
  26
+    padding: 0;
  27
+    font-family: sans-serif;
  28
+    font-size: 16px;
  29
+    background: #EEE;
  30
+}
  31
+
  32
+.section {
  33
+    border: 1px solid #CCC;
  34
+    padding: 1em 2em 2em;
  35
+    margin: 3em;
  36
+    background: #FFF;
  37
+}
  38
+
  39
+.section h2 {
  40
+    border: 1px solid #CCC;
  41
+    position: relative;
  42
+    left: -3em;
  43
+    top: -2em;
  44
+    background: #FFF;
  45
+    font-size: 1em;
  46
+    padding: .25em 1em;
  47
+    margin: 0;
  48
+}
  49
+
  50
+.section code {
  51
+    display: block;
  52
+    white-space: pre;
  53
+    margin-left: 250px;
  54
+    min-height: 100px;
  55
+    color: #999;
  56
+    overflow: auto;
  57
+}
  58
+.section code strong {
  59
+    color: #000;
  60
+}
  61
+
  62
+.test {
  63
+    width: 200px;
  64
+    height: 100px;
  65
+    line-height: 100px;
  66
+    text-align: center;
  67
+    border: 2px solid;
  68
+    background: #FFF;
  69
+    float: left;
  70
+    @include pie;
  71
+}
  72
+
  73
+#test1 {
  74
+    border-color: #c00;
  75
+    @include border-radius(1em);
  76
+}
  77
+
  78
+#test2 {
  79
+    border-color: #090;
  80
+    @include border-radius(1em);
  81
+    @include box-shadow(#999 0 .25em .5em);
  82
+}
  83
+
  84
+#test3 {
  85
+    border-color: #00c;
  86
+    @include border-radius(1em);
  87
+    @include box-shadow(#999 0 .25em .5em);
  88
+    @include background(linear-gradient(#9CF, #03C));
  89
+}
  90
+
  91
+#test4 {
  92
+    border-color: #F99;
  93
+    @include border-radius(1em);
  94
+    @include box-shadow(#999 0 .25em .5em);
  95
+    background: #FFF image-url("icon-ie.png") no-repeat 50% 0;
  96
+    @include background(
  97
+      image-url("icon-ie.png") no-repeat 50% 0,
  98
+      image-url("icon-firefox.png") no-repeat 0 0,
  99
+      image-url("icon-chrome.png") no-repeat 100% 0,
  100
+      image-url("icon-safari.png") no-repeat 0 100%,
  101
+      image-url("icon-opera.png") no-repeat 100% 100% #FFF
  102
+    );
  103
+}
  104
+
  105
+#test5 {
  106
+    @include border-image(image-url("border2.png") 15 stretch);
  107
+    border: 15px solid transparent;
  108
+    width: 180px;
  109
+}
  110
+
53  frameworks/compass/stylesheets/compass/_pie.scss
... ...
@@ -0,0 +1,53 @@
  1
+$experimental-support-for-pie: true;
  2
+
  3
+$pie-base-class: false !default;
  4
+// The default approach to using PIE.
  5
+// Can be one of:
  6
+//
  7
+// * relative
  8
+// * z-index
  9
+$pie-default-approach: relative !default;
  10
+
  11
+// The location of your PIE behavior file
  12
+// This should be root-relative to your web server
  13
+// relative assets don't work.
  14
+$pie-behavior: stylesheet-url("PIE.htc") !default;
  15
+
  16
+// When using the z-index approach, the
  17
+// first ancestor of the PIE element at
  18
+// or before the container's opaque background
  19
+// should have a z-index set as well to ensure
  20
+// propert z-index stacking.
  21
+@mixin pie-container($z-index: 0) {
  22
+  z-index: $z-index;
  23
+}
  24
+
  25
+// PIE elements must have this behavior attached to them.
  26
+// IE is broken -- it doesn't think of behavior urls as
  27
+// relative to the stylesheet. It considers them relative
  28
+// to the webpage. As a result, you cannot reliably use
  29
+// compass's relative_assets with PIE.
  30
+@mixin pie-element(
  31
+  $approach: $pie-default-approach,
  32
+  $z-index: if($approach == z-index, 0),
  33
+  $behavior : $pie-behavior 
  34
+) {
  35
+  behavior: $behavior;
  36
+  @if $approach == relative {
  37
+    position: relative;
  38
+  }
  39
+  @else if $approach == z-index {
  40
+    z-index: $z-index;
  41
+  }
  42
+}
  43
+
  44
+// a smart mixin that knows to extend or include pie-element according
  45
+// to your stylesheet's configuration variables.
  46
+@mixin pie($base-class: $pie-base-class) {
  47
+  @if $base-class {
  48
+    @extend .#{$base-class};
  49
+  }
  50
+  @else {
  51
+    @include pie-element;
  52
+  }
  53
+}
2  frameworks/compass/stylesheets/compass/_support.scss
@@ -27,3 +27,5 @@ $experimental-support-for-khtml     : true !default;
27 27
 // Setting this to true might add significant size to your
28 28
 // generated stylesheets.
29 29
 $experimental-support-for-svg     : false !default;
  30
+// Support for CSS PIE in experimental css3 properties.
  31
+$experimental-support-for-pie     : false !default;
4  frameworks/compass/stylesheets/compass/css3/_images.scss
@@ -18,7 +18,8 @@
18 18
   @if $experimental-support-for-svg     and prefixed(-svg,    $images) { background-image:    -svg($images); }
19 19
   @if $experimental-support-for-webkit  and prefixed(-webkit, $images) { background-image: -webkit($images); }
20 20
   @if $experimental-support-for-mozilla and prefixed(-moz,    $images) { background-image:    -moz($images); }
21  
-                                                                         background-image:         $images;
  21
+  @if $experimental-support-for-pie     and (prefixed(-pie,    $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
  22
+                                                                         background-image:         $images ;
22 23
 }
23 24
 
24 25
 @mixin background(
@@ -39,6 +40,7 @@
39 40
   @if $experimental-support-for-svg     and prefixed(-svg,    $backgrounds) {       background:    -svg($backgrounds); }
40 41
   @if $experimental-support-for-webkit  and prefixed(-webkit, $backgrounds) {       background: -webkit($backgrounds); }
41 42
   @if $experimental-support-for-mozilla and prefixed(-moz,    $backgrounds) {       background:    -moz($backgrounds); }
  43
+  @if $experimental-support-for-pie     and (prefixed(-pie,   $backgrounds) or -compass-list-size($backgrounds) > 1) {  -pie-background:    -pie($backgrounds); }
42 44
                                                                                     background:         $backgrounds;
43 45
 }
44 46
 
12  frameworks/compass/templates/pie/LICENSE
... ...
@@ -0,0 +1,12 @@
  1
+Copyright 2010 Jason Johnston
  2
+
  3
+CSS3 PIE is licensed under the terms of the Apache License Version 2.0, or
  4
+alternatively under the terms of the General Public License (GPL) Version 2.
  5
+You may use PIE according to either of these licenses as is most appropriate
  6
+for your project on a case-by-case basis.
  7
+
  8
+The terms of each license can be found in the main directory of the PIE source
  9
+repository:
  10
+
  11
+Apache License: http://github.com/lojjic/PIE/blob/master/LICENSE-APACHE2.txt
  12
+GPL2 License: http://github.com/lojjic/PIE/blob/master/LICENSE-GPL2.txt
13  frameworks/compass/templates/pie/LICENSE-APACHE2.txt
... ...
@@ -0,0 +1,13 @@
  1
+Copyright 2010 Jason Johnston
  2
+
  3
+Licensed under the Apache License, Version 2.0 (the "License");
  4
+you may not use this file except in compliance with the License.
  5
+You may obtain a copy of the License at
  6
+
  7
+http://www.apache.org/licenses/LICENSE-2.0
  8
+
  9
+Unless required by applicable law or agreed to in writing, software
  10
+distributed under the License is distributed on an "AS IS" BASIS,
  11
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12
+See the License for the specific language governing permissions and
  13
+limitations under the License.
278  frameworks/compass/templates/pie/LICENSE-GPL2.txt
... ...
@@ -0,0 +1,278 @@
  1
+        GNU GENERAL PUBLIC LICENSE
  2
+           Version 2, June 1991
  3
+
  4
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.
  5
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  6
+ Everyone is permitted to copy and distribute verbatim copies
  7
+ of this license document, but changing it is not allowed.
  8
+
  9
+          Preamble
  10
+
  11
+  The licenses for most software are designed to take away your
  12
+freedom to share and change it. By contrast, the GNU General Public
  13
+License is intended to guarantee your freedom to share and change free
  14
+software--to make sure the software is free for all its users. This
  15
+General Public License applies to most of the Free Software
  16
+Foundation's software and to any other program whose authors commit to
  17
+using it. (Some other Free Software Foundation software is covered by
  18
+the GNU Lesser General Public License instead.) You can apply it to
  19
+your programs, too.
  20
+
  21
+  When we speak of free software, we are referring to freedom, not
  22
+price. Our General Public Licenses are designed to make sure that you
  23
+have the freedom to distribute copies of free software (and charge for
  24
+this service if you wish), that you receive source code or can get it
  25
+if you want it, that you can change the software or use pieces of it
  26
+in new free programs; and that you know you can do these things.
  27
+
  28
+  To protect your rights, we need to make restrictions that forbid
  29
+anyone to deny you these rights or to ask you to surrender the rights.
  30
+These restrictions translate to certain responsibilities for you if you
  31
+distribute copies of the software, or if you modify it.
  32
+
  33
+  For example, if you distribute copies of such a program, whether
  34
+gratis or for a fee, you must give the recipients all the rights that
  35
+you have. You must make sure that they, too, receive or can get the
  36
+source code. And you must show them these terms so they know their
  37
+rights.
  38
+
  39
+  We protect your rights with two steps: (1) copyright the software, and
  40
+(2) offer you this license which gives you legal permission to copy,
  41
+distribute and/or modify the software.
  42
+
  43
+  Also, for each author's protection and ours, we want to make certain
  44
+that everyone understands that there is no warranty for this free
  45
+software. If the software is modified by someone else and passed on, we
  46
+want its recipients to know that what they have is not the original, so
  47
+that any problems introduced by others will not reflect on the original
  48
+authors' reputations.
  49
+
  50
+  Finally, any free program is threatened constantly by software
  51
+patents. We wish to avoid the danger that redistributors of a free
  52
+program will individually obtain patent licenses, in effect making the
  53
+program proprietary. To prevent this, we have made it clear that any
  54
+patent must be licensed for everyone's free use or not licensed at all.
  55
+
  56
+  The precise terms and conditions for copying, distribution and
  57
+modification follow.
  58
+
  59
+        GNU GENERAL PUBLIC LICENSE
  60
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
  61
+
  62
+  0. This License applies to any program or other work which contains
  63
+a notice placed by the copyright holder saying it may be distributed
  64
+under the terms of this General Public License. The "Program", below,
  65
+refers to any such program or work, and a "work based on the Program"
  66
+means either the Program or any derivative work under copyright law:
  67
+that is to say, a work containing the Program or a portion of it,
  68
+either verbatim or with modifications and/or translated into another
  69
+language. (Hereinafter, translation is included without limitation in
  70
+the term "modification".) Each licensee is addressed as "you".
  71
+
  72
+Activities other than copying, distribution and modification are not
  73
+covered by this License; they are outside its scope. The act of
  74
+running the Program is not restricted, and the output from the Program
  75
+is covered only if its contents constitute a work based on the
  76
+Program (independent of having been made by running the Program).
  77
+Whether that is true depends on what the Program does.
  78
+
  79
+  1. You may copy and distribute verbatim copies of the Program's
  80
+source code as you receive it, in any medium, provided that you
  81
+conspicuously and appropriately publish on each copy an appropriate
  82
+copyright notice and disclaimer of warranty; keep intact all the
  83
+notices that refer to this License and to the absence of any warranty;
  84
+and give any other recipients of the Program a copy of this License
  85
+along with the Program.
  86
+
  87
+You may charge a fee for the physical act of transferring a copy, and
  88
+you may at your option offer warranty protection in exchange for a fee.
  89
+
  90
+  2. You may modify your copy or copies of the Program or any portion
  91
+of it, thus forming a work based on the Program, and copy and
  92
+distribute such modifications or work under the terms of Section 1
  93
+above, provided that you also meet all of these conditions:
  94
+
  95
+    a) You must cause the modified files to carry prominent notices
  96
+    stating that you changed the files and the date of any change.
  97
+
  98
+    b) You must cause any work that you distribute or publish, that in
  99
+    whole or in part contains or is derived from the Program or any
  100
+    part thereof, to be licensed as a whole at no charge to all third
  101
+    parties under the terms of this License.
  102
+
  103
+    c) If the modified program normally reads commands interactively
  104
+    when run, you must cause it, when started running for such
  105
+    interactive use in the most ordinary way, to print or display an
  106
+    announcement including an appropriate copyright notice and a
  107
+    notice that there is no warranty (or else, saying that you provide
  108
+    a warranty) and that users may redistribute the program under
  109
+    these conditions, and telling the user how to view a copy of this
  110
+    License. (Exception: if the Program itself is interactive but
  111
+    does not normally print such an announcement, your work based on
  112
+    the Program is not required to print an announcement.)
  113
+
  114
+These requirements apply to the modified work as a whole. If
  115
+identifiable sections of that work are not derived from the Program,
  116
+and can be reasonably considered independent and separate works in
  117
+themselves, then this License, and its terms, do not apply to those
  118
+sections when you distribute them as separate works. But when you
  119
+distribute the same sections as part of a whole which is a work based
  120
+on the Program, the distribution of the whole must be on the terms of
  121
+this License, whose permissions for other licensees extend to the
  122
+entire whole, and thus to each and every part regardless of who wrote it.
  123
+
  124
+Thus, it is not the intent of this section to claim rights or contest
  125
+your rights to work written entirely by you; rather, the intent is to
  126
+exercise the right to control the distribution of derivative or
  127
+collective works based on the Program.
  128
+
  129
+In addition, mere aggregation of another work not based on the Program
  130
+with the Program (or with a work based on the Program) on a volume of
  131
+a storage or distribution medium does not bring the other work under
  132
+the scope of this License.
  133
+
  134
+  3. You may copy and distribute the Program (or a work based on it,
  135
+under Section 2) in object code or executable form under the terms of
  136
+Sections 1 and 2 above provided that you also do one of the following:
  137
+
  138
+    a) Accompany it with the complete corresponding machine-readable
  139
+    source code, which must be distributed under the terms of Sections
  140
+    1 and 2 above on a medium customarily used for software interchange; or,
  141
+
  142
+    b) Accompany it with a written offer, valid for at least three
  143
+    years, to give any third party, for a charge no more than your
  144
+    cost of physically performing source distribution, a complete
  145
+    machine-readable copy of the corresponding source code, to be
  146
+    distributed under the terms of Sections 1 and 2 above on a medium
  147
+    customarily used for software interchange; or,
  148
+
  149
+    c) Accompany it with the information you received as to the offer
  150
+    to distribute corresponding source code. (This alternative is
  151
+    allowed only for noncommercial distribution and only if you
  152
+    received the program in object code or executable form with such
  153
+    an offer, in accord with Subsection b above.)
  154
+
  155
+The source code for a work means the preferred form of the work for
  156
+making modifications to it. For an executable work, complete source
  157
+code means all the source code for all modules it contains, plus any
  158
+associated interface definition files, plus the scripts used to
  159
+control compilation and installation of the executable. However, as a
  160
+special exception, the source code distributed need not include
  161
+anything that is normally distributed (in either source or binary
  162
+form) with the major components (compiler, kernel, and so on) of the
  163
+operating system on which the executable runs, unless that component
  164
+itself accompanies the executable.
  165
+
  166
+If distribution of executable or object code is made by offering
  167
+access to copy from a designated place, then offering equivalent
  168
+access to copy the source code from the same place counts as
  169
+distribution of the source code, even though third parties are not
  170
+compelled to copy the source along with the object code.
  171
+
  172
+  4. You may not copy, modify, sublicense, or distribute the Program
  173
+except as expressly provided under this License. Any attempt
  174
+otherwise to copy, modify, sublicense or distribute the Program is
  175
+void, and will automatically terminate your rights under this License.
  176
+However, parties who have received copies, or rights, from you under
  177
+this License will not have their licenses terminated so long as such
  178
+parties remain in full compliance.
  179
+
  180
+  5. You are not required to accept this License, since you have not
  181
+signed it. However, nothing else grants you permission to modify or
  182
+distribute the Program or its derivative works. These actions are
  183
+prohibited by law if you do not accept this License. Therefore, by
  184
+modifying or distributing the Program (or any work based on the
  185
+Program), you indicate your acceptance of this License to do so, and
  186
+all its terms and conditions for copying, distributing or modifying
  187
+the Program or works based on it.
  188
+
  189
+  6. Each time you redistribute the Program (or any work based on the
  190
+Program), the recipient automatically receives a license from the
  191
+original licensor to copy, distribute or modify the Program subject to
  192
+these terms and conditions. You may not impose any further
  193
+restrictions on the recipients' exercise of the rights granted herein.
  194
+You are not responsible for enforcing compliance by third parties to
  195
+this License.
  196
+
  197
+  7. If, as a consequence of a court judgment or allegation of patent
  198
+infringement or for any other reason (not limited to patent issues),
  199
+conditions are imposed on you (whether by court order, agreement or
  200
+otherwise) that contradict the conditions of this License, they do not
  201
+excuse you from the conditions of this License. If you cannot
  202
+distribute so as to satisfy simultaneously your obligations under this
  203
+License and any other pertinent obligations, then as a consequence you
  204
+may not distribute the Program at all. For example, if a patent
  205
+license would not permit royalty-free redistribution of the Program by
  206
+all those who receive copies directly or indirectly through you, then
  207
+the only way you could satisfy both it and this License would be to
  208
+refrain entirely from distribution of the Program.
  209
+
  210
+If any portion of this section is held invalid or unenforceable under
  211
+any particular circumstance, the balance of the section is intended to
  212
+apply and the section as a whole is intended to apply in other
  213
+circumstances.
  214
+
  215
+It is not the purpose of this section to induce you to infringe any
  216
+patents or other property right claims or to contest validity of any
  217
+such claims; this section has the sole purpose of protecting the
  218
+integrity of the free software distribution system, which is
  219
+implemented by public license practices. Many people have made
  220
+generous contributions to the wide range of software distributed
  221
+through that system in reliance on consistent application of that
  222
+system; it is up to the author/donor to decide if he or she is willing
  223
+to distribute software through any other system and a licensee cannot
  224
+impose that choice.
  225
+
  226
+This section is intended to make thoroughly clear what is believed to
  227
+be a consequence of the rest of this License.
  228
+
  229
+  8. If the distribution and/or use of the Program is restricted in
  230
+certain countries either by patents or by copyrighted interfaces, the
  231
+original copyright holder who places the Program under this License
  232
+may add an explicit geographical distribution limitation excluding
  233
+those countries, so that distribution is permitted only in or among
  234
+countries not thus excluded. In such case, this License incorporates
  235
+the limitation as if written in the body of this License.
  236
+
  237
+  9. The Free Software Foundation may publish revised and/or new versions
  238
+of the General Public License from time to time. Such new versions will
  239
+be similar in spirit to the present version, but may differ in detail to
  240
+address new problems or concerns.
  241
+
  242
+Each version is given a distinguishing version number. If the Program
  243
+specifies a version number of this License which applies to it and "any
  244
+later version", you have the option of following the terms and conditions
  245
+either of that version or of any later version published by the Free
  246
+Software Foundation. If the Program does not specify a version number of
  247
+this License, you may choose any version ever published by the Free Software
  248
+Foundation.
  249
+
  250
+  10. If you wish to incorporate parts of the Program into other free
  251
+programs whose distribution conditions are different, write to the author
  252
+to ask for permission. For software which is copyrighted by the Free
  253
+Software Foundation, write to the Free Software Foundation; we sometimes
  254
+make exceptions for this. Our decision will be guided by the two goals
  255
+of preserving the free status of all derivatives of our free software and
  256
+of promoting the sharing and reuse of software generally.
  257
+
  258
+          NO WARRANTY
  259
+
  260
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
  261
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
  262
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
  263
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
  264
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  265
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
  266
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
  267
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
  268
+REPAIR OR CORRECTION.
  269
+
  270
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
  271
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
  272
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
  273
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
  274
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
  275
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
  276
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
  277
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
  278
+POSSIBILITY OF SUCH DAMAGES.
77  frameworks/compass/templates/pie/PIE.htc
... ...
@@ -0,0 +1,77 @@
  1
+<!--
  2
+PIE: CSS3 rendering for IE
  3
+Version 1.0beta2
  4
+http://css3pie.com
  5
+Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
  6
+-->
  7
+<PUBLIC:COMPONENT lightWeight="true">
  8
+    <PUBLIC:ATTACH EVENT="onresize" FOR="element" ONEVENT="update()" />
  9
+    <PUBLIC:ATTACH EVENT="onresize" FOR="window" ONEVENT="update()" />
  10
+    <PUBLIC:ATTACH EVENT="onmove" FOR="element" ONEVENT="update()" />
  11
+    <PUBLIC:ATTACH EVENT="onpropertychange" FOR="element" ONEVENT="propChanged()" />
  12
+    <PUBLIC:ATTACH EVENT="onmouseenter" FOR="element" ONEVENT="mouseEntered()" />
  13
+    <PUBLIC:ATTACH EVENT="onmouseleave" FOR="element" ONEVENT="mouseLeft()" />
  14
+    <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="update()" />
  15
+    <PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="update()" />
  16
+    <PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
  17
+
  18
+    <script type="text/javascript">
  19
+function i(){return function(){}}var D=window.PIE;
  20
+if(!D){D=window.PIE={T:"-pie-",Ma:"Pie",Ka:"pie_"};if(!window.XMLHttpRequest){D.Yb=true;D.T=D.T.replace(/^-/,"")}D.oa=element.document.documentMode;D.Da=!!D.oa;if(D.oa===8){D.Ca={ya:{},add:function(a){this.ya[a.id||(a.id=""+(new Date).getTime()+Math.random())]=a},remove:function(a){delete this.ya[a.id]},Tb:function(){var a=this.ya,b;for(b in a)a.hasOwnProperty(b)&&a[b]()}};setInterval(function(){D.Ca.Tb()},250)}D.q={ja:function(a){var b=D.Gb;if(!b){b=D.Gb=element.document.createDocumentFragment();
  21
+b.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return b.createElement("css3vml:"+a)},Fa:function(a){var b,c,d,e,f=arguments;b=1;for(c=f.length;b<c;b++){e=f[b];for(d in e)if(e.hasOwnProperty(d))a[d]=e[d]}return a},ib:function(a,b,c){var d=D.Ab||(D.Ab={}),e=d[a],f;if(e)b.call(c,e);else{f=new Image;f.onload=function(){e=d[a]={v:f.width,i:f.height};b.call(c,e);f.onload=null};f.src=a}}};D.g=function(){function a(b){this.F=b}a.prototype={Ga:/(px|em|ex|mm|cm|in|pt|pc|%)$/,Va:function(){var b=
  22
+this.Bb;if(b===undefined)b=this.Bb=parseFloat(this.F);return b},Aa:function(){var b=this.ua;if(!b)b=this.ua=(b=this.F.match(this.Ga))&&b[0]||"px";return b},a:function(b,c){var d=this.Va(),e=this.Aa();switch(e){case "px":return d;case "%":return d*(typeof c==="function"?c():c)/100;case "em":return d*this.Ua(b);case "ex":return d*this.Ua(b)/2;default:return d*a.Ob[e]}},Ua:function(b){var c=b.currentStyle.fontSize,d;if(c.indexOf("px")>0)return parseFloat(c);else{c=this.Fb;if(!c){c=this.Fb=b.document.createElement("length-calc");
  23
+d=c.style;d.width="1em";d.position="absolute";d.top=d.left=-9999}b.appendChild(c);d=c.offsetWidth;b.removeChild(c);return d}}};a.Ob=function(){for(var b=["mm","cm","in","pt","pc"],c={},d=element.parentNode,e=0,f=b.length,j,g,h;e<f;e++){j=b[e];g=element.document.createElement("length-calc");h=g.style;h.position="absolute";h.top=h.left=-9999;h.width="100"+j;d.appendChild(g);c[j]=g.offsetWidth/100;d.removeChild(g)}return c}();a.Oa=new a("0");return a}();D.ra=function(){function a(b){this.C=b}a.prototype=
  24
+{Vb:function(){if(!this.Qa){var b=this.C,c=b.length,d=D.g.Oa,e=new D.g("50%"),f=D.k.Y.V,j={top:1,center:1,bottom:1},g={left:1,center:1,right:1};d=["left",d,"top",d];if(c===1){b.push({type:f,value:"center"});c++}if(c===2){f&(b[0].type|b[1].type)&&b[0].value in j&&b[1].value in g&&b.push(b.shift());if(b[0].type&f)if(b[0].value==="center")d[1]=e;else d[0]=b[0].value;else if(b[0].J())d[1]=new D.g(b[0].value);if(b[1].type&f)if(b[1].value==="center")d[3]=e;else d[2]=b[1].value;else if(b[1].J())d[3]=new D.g(b[1].value)}this.Qa=
  25
+d}return this.Qa},coords:function(b,c,d){var e=this.Vb(),f=e[1].a(b,c);b=e[3].a(b,d);return{x:Math.round(e[0]==="right"?c-f:f),y:Math.round(e[2]==="bottom"?d-b:b)}}};return a}();D.kb=function(){function a(b){this.F=b}a.prototype={Ga:/[a-z]+$/i,Aa:function(){return this.ua||(this.ua=this.F.match(this.Ga)[0].toLowerCase())},Pb:function(){var b=this.zb,c;if(b===undefined){b=this.Aa();c=parseFloat(this.F,10);b=this.zb=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};
  26
+return a}();D.U=function(){function a(b){this.F=b}a.ec=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.prototype={parse:function(){if(!this.ha){var b=this.F,c=b.match(a.ec);if(c){this.ha="rgb("+c[1]+","+c[2]+","+c[3]+")";this.Pa=parseFloat(c[4])}else{this.ha=b;this.Pa=1}}},value:function(b){this.parse();return this.ha==="currentColor"?b.currentStyle.color:this.ha},Ra:function(){this.parse();return this.Pa}};return a}();D.k=function(){function a(c){this.ka=c;
  27
+this.ch=0;this.C=[];this.ea=0}var b=a.Y={fa:1,Ja:2,S:4,ub:8,La:16,V:32,n:64,W:128,X:256,ga:512,wb:1024,URL:2048};a.Na=function(c,d){this.type=c;this.value=d};a.Na.prototype={Ea:function(){return this.type&b.n||this.type&b.W&&this.value==="0"},J:function(){return this.Ea()||this.type&b.ga}};a.prototype={mc:/\s/,$b:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,Ya:/^\-?[_a-z][\w-]*/i,hc:/^("([^"]*)"|'([^']*)')/,Wb:/^#([\da-f]{6}|[\da-f]{3})/i,kc:{px:b.n,em:b.n,ex:b.n,
  28
+mm:b.n,cm:b.n,"in":b.n,pt:b.n,pc:b.n,deg:b.fa,rad:b.fa,grad:b.fa},Lb:{aqua:1,black:1,blue:1,fuchsia:1,gray:1,green:1,lime:1,maroon:1,navy:1,olive:1,purple:1,red:1,silver:1,teal:1,white:1,yellow:1,currentColor:1},Kb:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function d(n,p){n=new a.Na(n,p);if(!c){k.C.push(n);k.ea++}return n}function e(){k.ea++;return null}var f,j,g,h,k=this;if(this.ea<this.C.length)return this.C[this.ea++];for(;this.mc.test(this.ka.charAt(this.ch));)this.ch++;if(this.ch>=this.ka.length)return e();
  29
+j=this.ch;f=this.ka.substring(this.ch);g=f.charAt(0);switch(g){case "#":if(h=f.match(this.Wb)){this.ch+=h[0].length;return d(b.S,h[0])}break;case '"':case "'":if(h=f.match(this.hc)){this.ch+=h[0].length;return d(b.wb,h[2]||h[3]||"")}break;case "/":case ",":this.ch++;return d(b.X,g);case "u":if(h=f.match(this.url)){this.ch+=h[0].length;return d(b.URL,h[2]||h[3]||h[4]||"")}}if(h=f.match(this.$b)){g=h[0];this.ch+=g.length;if(f.charAt(g.length)==="%"){this.ch++;return d(b.ga,g+"%")}if(h=f.substring(g.length).match(this.Ya)){g+=
  30
+h[0];this.ch+=h[0].length;return d(this.kc[h[0].toLowerCase()]||b.ub,g)}return d(b.W,g)}if(h=f.match(this.Ya)){g=h[0];this.ch+=g.length;if(g.toLowerCase()in this.Lb)return d(b.S,g);if(f.charAt(g.length)==="("){this.ch++;if(g.toLowerCase()in this.Kb){f=function(n){return n&&n.type&b.W};h=function(n){return n&&n.type&(b.W|b.ga)};var o=function(n,p){return n&&n.value===p},m=function(){return k.next(1)};if((g.charAt(0)==="r"?h(m()):f(m()))&&o(m(),",")&&h(m())&&o(m(),",")&&h(m())&&(g==="rgb"||g==="hsa"||
  31
+o(m(),",")&&f(m()))&&o(m(),")"))return d(b.S,this.ka.substring(j,this.ch));return e()}return d(b.La,g+"(")}return d(b.V,g)}this.ch++;return d(b.Ja,g)},m:function(){return this.C[this.ea-- -2]},all:function(){for(;this.next(););return this.C},R:function(c,d){for(var e=[],f,j;f=this.next();){if(c(f)){j=true;this.m();break}e.push(f)}return d&&!j?null:e}};return a}();D.w={M:function(a){function b(c){this.element=c}D.q.Fa(b.prototype,D.w,a);return b},f:function(){if(this.j())this.Eb=this.N(this.yb=this.ba());
  32
+return this.Eb},ba:function(){var a=this.element,b=a.style;a=a.currentStyle;var c=this.aa,d=this.da,e=this.Cb||(this.Cb=D.T+c),f=this.Db||(this.Db=D.Ma+d.charAt(0).toUpperCase()+d.substring(1));return b[f]||a.getAttribute(e)||b[d]||a.getAttribute(c)},d:function(){return!!this.f()},j:function(){return this.yb!==this.ba()}};D.mb=D.w.M({aa:D.T+"background",da:D.Ma+"Background",Ib:{scroll:1,fixed:1,local:1},qa:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},ac:{"padding-box":1,"border-box":1,"content-box":1},
  33
+Jb:{"padding-box":1,"border-box":1},dc:{top:1,right:1,bottom:1,left:1,center:1},fc:{contain:1,cover:1},N:function(a){function b(q){return q.J()||q.type&h&&q.value in n}function c(q){return q.J()&&new D.g(q.value)||q.value==="auto"&&"auto"}var d=this.element.currentStyle,e,f,j=D.k.Y,g=j.X,h=j.V,k=j.S,o,m,n=this.dc,p,t,r=null;if(this.za()){a=new D.k(a);r={images:[]};for(f={};e=a.next();){o=e.type;m=e.value;if(!f.type&&o&j.La&&m==="linear-gradient("){p={P:[],type:"linear-gradient"};for(t={};e=a.next();){o=
  34
+e.type;m=e.value;if(o&j.Ja&&m===")"){t.color&&p.P.push(t);p.P.length>1&&D.q.Fa(f,p);break}if(o&k){if(p.wa||p.Ba){e=a.m();if(e.type!==g)break;a.next()}t={color:new D.U(m)};e=a.next();if(e.J())t.Za=new D.g(e.value);else a.m()}else if(o&j.fa&&!p.wa&&!t.color&&!p.P.length)p.wa=new D.kb(e.value);else if(b(e)&&!p.Ba&&!t.color&&!p.P.length){a.m();p.Ba=new D.ra(a.R(function(q){return!b(q)},false))}else if(o&g&&m===","){if(t.color){p.P.push(t);t={}}}else break}}else if(!f.type&&o&j.URL){f.url=m;f.type="image"}else if(b(e)&&
  35
+!f.size){a.m();f.position=new D.ra(a.R(function(q){return!b(q)},false))}else if(o&h)if(m in this.qa)f.repeat=m;else if(m in this.ac){f.origin=m;if(m in this.Jb)f.clip=m}else{if(m in this.Ib)f.rc=m}else if(o&k&&!r.color)r.color=new D.U(m);else if(o&g)if(m==="/"){e=a.next();o=e.type;m=e.value;if(o&h&&m in this.fc)f.size=m;else if(m=c(e))f.size={v:m,i:c(a.next())||a.m()&&m}}else{if(m===","&&f.type){r.images.push(f);f={}}}else return null}f.type&&r.images.push(f)}else this.gb(function(){var q=d.backgroundPositionX,
  36
+w=d.backgroundPositionY,l=d.backgroundImage,u=d.backgroundColor;r={};if(u!=="transparent")r.color=new D.U(u);if(l!=="none")r.images=[{type:"image",url:(new D.k(l)).next().value,repeat:d.backgroundRepeat,position:new D.ra((new D.k(q+" "+w)).all())}]});return r},gb:function(a){var b=this.element.runtimeStyle,c=b.backgroundImage,d=b.backgroundColor;b.backgroundImage=b.backgroundColor="";a=a.call(this);b.backgroundImage=c;b.backgroundColor=d;return a},ba:function(){var a=this.element.currentStyle;return this.za()||
  37
+this.gb(function(){return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})},za:function(){var a=this.element;return a.style[this.da]||a.currentStyle.getAttribute(this.aa)},d:function(){return this.za()&&!!this.f()}});D.qb=D.w.M({bb:["Top","Right","Bottom","Left"],Zb:{uc:"1px",sc:"3px",tc:"5px"},N:function(){var a={},b={},c={},d=false,e=true,f=true,j=true;this.hb(function(){for(var g=this.element.currentStyle,h=0,k,o,m,n,p,t,r;h<4;h++){m=
  38
+this.bb[h];r=m.charAt(0).toLowerCase();k=b[r]=g["border"+m+"Style"];o=g["border"+m+"Color"];m=g["border"+m+"Width"];if(h>0){if(k!==n)f=false;if(o!==p)e=false;if(m!==t)j=false}n=k;p=o;t=m;c[r]=new D.U(o);m=a[r]=new D.g(b[r]==="none"?"0":this.Zb[m]||m);if(m.a(this.element)>0)d=true}});return d?{fb:a,ic:b,Mb:c,nc:j,Nb:e,jc:f}:null},ba:function(){var a=this.element.currentStyle,b;this.hb(function(){b=a.borderWidth+"|"+a.borderStyle+"|"+a.borderColor});return b},hb:function(a){var b=this.element.runtimeStyle,
  39
+c=b.borderWidth,d=b.borderStyle,e=b.borderColor;b.borderWidth=b.borderStyle=b.borderColor="";a=a.call(this);b.borderWidth=c;b.borderStyle=d;b.borderColor=e;return a}});(function(){D.sa=D.w.M({aa:"border-radius",da:"borderRadius",N:function(b){var c=null,d,e,f,j,g=false;if(b){e=new D.k(b);var h=function(){for(var k=[],o;(f=e.next())&&f.J();){j=new D.g(f.value);o=j.Va();if(o<0)return null;if(o>0)g=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:
  40
+null};if(b=h()){if(f){if(f.type&D.k.Y.X&&f.value==="/")d=h()}else d=b;if(g&&b&&d)c={x:b,y:d}}}return c}});var a=D.g.Oa;a={tl:a,tr:a,br:a,bl:a};D.sa.jb={x:a,y:a}})();D.ob=D.w.M({aa:"border-image",da:"borderImage",qa:{stretch:1,round:1,repeat:1,space:1},N:function(a){var b=null,c,d,e,f,j,g,h=0,k,o=D.k.Y,m=o.V,n=o.W,p=o.n,t=o.ga;if(a){c=new D.k(a);b={};for(var r=function(l){return l&&l.type&o.X&&l.value==="/"},q=function(l){return l&&l.type&m&&l.value==="fill"},w=function(){f=c.R(function(l){return!(l.type&
  41
+(n|t))});if(q(c.next())&&!b.fill)b.fill=true;else c.m();if(r(c.next())){h++;j=c.R(function(){return!(d.type&(n|t|p))&&!(d.type&m&&d.value==="auto")});if(r(c.next())){h++;g=c.R(function(){return!(d.type&(n|p))})}}else c.m()};d=c.next();){a=d.type;e=d.value;if(a&(n|t)&&!f){c.m();w()}else if(q(d)&&!b.fill){b.fill=true;w()}else if(a&m&&this.qa[e]&&!b.repeat){b.repeat={i:e};if(d=c.next())if(d.type&m&&this.qa[d.value])b.repeat.Ha=d.value;else c.m()}else if(a&o.URL&&!b.src)b.src=e;else return null}if(!b.src||
  42
+!f||f.length<1||f.length>4||j&&j.length>4||h===1&&j.length<1||g&&g.length>4||h===2&&g.length<1)return null;if(!b.repeat)b.repeat={i:"stretch"};if(!b.repeat.Ha)b.repeat.Ha=b.repeat.i;a=function(l,u){return{Q:u(l[0]),O:u(l[1]||l[0]),H:u(l[2]||l[0]),K:u(l[3]||l[1]||l[0])}};b.slice=a(f,function(l){return new D.g(l.type&n?l.value+"px":l.value)});b.width=j&&j.length>0?a(j,function(l){return l.type&(p|t)?new D.g(l.value):l.value}):(k=this.element.currentStyle)&&{Q:new D.g(k.borderTopWidth),O:new D.g(k.borderRightWidth),
  43
+H:new D.g(k.borderBottomWidth),K:new D.g(k.borderLeftWidth)};b.ca=a(g||[0],function(l){return l.type&p?new D.g(l.value):l.value})}return b}});D.tb=D.w.M({aa:"box-shadow",da:"boxShadow",N:function(a){var b,c=D.g,d=D.k.Y,e;if(a){e=new D.k(a);b={ca:[],pa:[]};for(a=function(){for(var f,j,g,h,k,o;f=e.next();){g=f.value;j=f.type;if(j&d.X&&g===",")break;else if(f.Ea()&&!k){e.m();k=e.R(function(m){return!m.Ea()})}else if(j&d.S&&!h)h=g;else if(j&d.V&&g==="inset"&&!o)o=true;else return false}f=k&&k.length;
  44
+if(f>1&&f<5){(o?b.pa:b.ca).push({oc:new c(k[0].value),qc:new c(k[1].value),blur:new c(k[2]?k[2].value:"0"),gc:new c(k[3]?k[3].value:"0"),color:new D.U(h||"currentColor")});return true}return false};a(););}return b&&(b.pa.length||b.ca.length)?b:null}});D.xb=D.w.M({ba:function(){var a=this.element.currentStyle;return a.visibility+"|"+a.display},N:function(){var a=this.element,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,d;b.visibility="";d=a.visibility;b.visibility=c;return{lc:d!=="hidden",
  45
+Qb:a.display!=="none"}},d:function(){return false}});D.p={L:function(a){function b(c,d,e){this.element=c;this.e=d;this.parent=e}D.q.Fa(b.prototype,D.p,a);return b},B:function(){return false},D:i(),cb:i(),u:i(),va:function(a,b){this.ab(a);for(var c=this.Z||(this.Z=[]),d=a+1,e=c.length,f;d<e;d++)if(f=c[d])break;c[a]=b;this.o().insertBefore(b,f||null)},ma:function(a){var b=this.Z;return b&&b[a]||null},ab:function(a){var b=this.ma(a),c=this.G;if(b&&c){c.removeChild(b);this.Z[a]=null}},na:function(a,b,
  46
+c,d){var e=this.ta||(this.ta={}),f=e[a];if(!f){f=e[a]=D.q.ja("shape");if(b)f.appendChild(f[b]=D.q.ja(b));if(d){c=this.ma(d);if(!c){this.va(d,this.element.document.createElement("group"+d));c=this.ma(d)}}c.appendChild(f);a=f.style;a.position="absolute";a.left=a.top=0;a.behavior="url(#default#VML)"}return f},xa:function(a){var b=this.ta,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},Wa:function(a){var b=this.element,c=b.offsetWidth,d=b.offsetHeight,e,f,j,g,h,k,o;e=a.x.tl.a(b,c);
  47
+f=a.y.tl.a(b,d);j=a.x.tr.a(b,c);g=a.y.tr.a(b,d);h=a.x.br.a(b,c);k=a.y.br.a(b,d);o=a.x.bl.a(b,c);a=a.y.bl.a(b,d);c=Math.min(c/(e+j),d/(g+k),c/(o+h),d/(f+a));if(c<1){e*=c;f*=c;j*=c;g*=c;h*=c;k*=c;o*=c;a*=c}return{x:{tl:e,tr:j,br:h,bl:o},y:{tl:f,tr:g,br:k,bl:a}}},la:function(a,b,c){b=b||1;var d,e,f=this.element;e=f.offsetWidth*b;f=f.offsetHeight*b;var j=this.e.s,g=Math.floor,h=Math.ceil,k=a?a.Q*b:0,o=a?a.O*b:0,m=a?a.H*b:0;a=a?a.K*b:0;var n,p,t,r,q;if(c||j.d()){d=this.Wa(c||j.f());c=d.x.tl*b;j=d.y.tl*
  48
+b;n=d.x.tr*b;p=d.y.tr*b;t=d.x.br*b;r=d.y.br*b;q=d.x.bl*b;b=d.y.bl*b;e="m"+g(a)+","+g(j)+"qy"+g(c)+","+g(k)+"l"+h(e-n)+","+g(k)+"qx"+h(e-o)+","+g(p)+"l"+h(e-o)+","+h(f-r)+"qy"+h(e-t)+","+h(f-m)+"l"+g(q)+","+h(f-m)+"qx"+g(a)+","+h(f-b)+" x e"}else e="m"+g(a)+","+g(k)+"l"+h(e-o)+","+g(k)+"l"+h(e-o)+","+h(f-m)+"l"+g(a)+","+h(f-m)+"xe";return e},o:function(){var a=this.parent.ma(this.zIndex),b;if(!a){a=this.element.document.createElement(this.ia);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.va(this.zIndex,
  49
+a)}return a},h:function(){this.parent.ab(this.zIndex);delete this.ta;delete this.Z}};D.vb=D.p.L({d:function(){var a=this.e;for(var b in a)if(a.hasOwnProperty(b)&&a[b].d())return true;return false},B:function(){return this.e.eb.j()},cb:function(){if(this.d()){var a=this.element,b=a,c,d,e=this.o().style,f=0;c=0;do b=b.offsetParent;while(b&&b.currentStyle.position==="static");c=a.getBoundingClientRect();if(b){d=b.getBoundingClientRect();b=b.currentStyle;f=c.left-d.left-(parseFloat(b.borderLeftWidth)||
  50
+0);c=c.top-d.top-(parseFloat(b.borderTopWidth)||0)}else{b=a.document.documentElement;f=c.left+b.scrollLeft-b.clientLeft;c=c.top+b.scrollTop-b.clientTop}e.left=f;e.top=c;e.zIndex=a.currentStyle.position==="static"?-1:a.currentStyle.zIndex}},u:i(),db:function(){var a=this.e.eb.f();this.o().style.display=a.lc&&a.Qb?"":"none"},D:function(){this.d()?this.db():this.h()},o:function(){var a=this.G,b,c;if(!a){b=this.element;a=this.G=b.document.createElement("css3-container");c=a.style;c.position=b.currentStyle.position===
  51
+"fixed"?"fixed":"absolute";this.db();b.parentNode.insertBefore(a,b)}return a},h:function(){var a=this.G;a&&a.parentNode&&a.parentNode.removeChild(a);delete this.G;delete this.Z}});D.lb=D.p.L({zIndex:2,ia:"background",B:function(){var a=this.e;return a.I.j()||a.s.j()},d:function(){var a=this.e,b=this.element;return b.offsetWidth&&b.offsetHeight&&(a.z.d()||a.s.d()||a.I.d()||a.A.d()&&a.A.f().pa)},u:function(){this.d()&&this.Sa()},D:function(){this.h();this.d()&&this.Sa()},Sa:function(){this.Rb();this.Sb()},
  52
+Rb:function(){var a=this.e.I.f(),b=this.element,c=a&&a.color&&a.color.value(b),d,e,f;if(c&&c!=="transparent"){this.Xa();d=this.na("bgColor","fill",this.o(),1);e=b.offsetWidth;b=b.offsetHeight;d.stroked=false;d.coordsize=e*2+","+b*2;d.coordorigin="1,1";d.path=this.la(null,2);f=d.style;f.width=e;f.height=b;d.fill.color=c;a=a.color.Ra();if(a<1)d.fill.opacity=a}else this.xa("bgColor")},Sb:function(){var a=this.e.I.f();a=a&&a.images;var b,c,d,e,f,j;if(a){this.Xa();b=this.element;d=b.offsetWidth;e=b.offsetHeight;
  53
+for(j=a.length;j--;){b=a[j];c=this.na("bgImage"+j,"fill",this.o(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=d*2+","+e*2;c.coordorigin="1,1";c.path=this.la(0,2);f=c.style;f.width=d;f.height=e;if(b.type==="linear-gradient")this.Hb(c,b);else{c.fill.src=b.url;this.cc(c,j)}}}for(j=a?a.length:0;this.xa("bgImage"+j++););},cc:function(a,b){D.q.ib(a.fill.src,function(c){var d=a.fill,e=this.element,f=e.offsetWidth,j=e.offsetHeight,g=this.e,h=g.$.f(),k=h&&h.fb;h=k?k.t.a(e):0;var o=
  54
+k?k.r.a(e):0,m=k?k.b.a(e):0;k=k?k.l.a(e):0;g=g.I.f().images[b];e=g.position?g.position.coords(e,f-c.v-k-o,j-c.i-h-m):{x:0,y:0};g=g.repeat;m=o=0;var n=f+1,p=j+1,t=D.Da?0:1;k=e.x+k+0.5;h=e.y+h+0.5;d.position=k/f+","+h/j;if(g&&g!=="repeat"){if(g==="repeat-x"||g==="no-repeat"){o=h+1;p=h+c.i+t}if(g==="repeat-y"||g==="no-repeat"){m=k+1;n=k+c.v+t}a.style.clip="rect("+o+"px,"+n+"px,"+p+"px,"+m+"px)"}},this)},Hb:function(a,b){function c(x,y,v,C,G){if(v===0||v===180)return[C,y];else if(v===90||v===270)return[x,
  55
+G];else{v=Math.tan(-v*m/180);x=v*x-y;y=-1/v;C=y*C-G;G=y-v;return[(C-x)/G,(v*C-y*x)/G]}}function d(){q=h>=90&&h<270?j:0;w=h<180?g:0;l=j-q;u=g-w}function e(x,y){var v=y[0]-x[0];x=y[1]-x[1];return Math.abs(v===0?x:x===0?v:Math.sqrt(v*v+x*x))}var f=this.element,j=f.offsetWidth,g=f.offsetHeight;a=a.fill;var h=b.wa,k=b.Ba;b=b.P;var o=b.length,m=Math.PI,n,p,t,r,q,w,l,u,s,z,B,A;if(k){k=k.coords(f,j,g);n=k.x;p=k.y}if(h){h=h.Pb();if(h<0)h+=360;h%=360;d();if(!k){n=q;p=w}k=c(n,p,h,l,u);t=k[0];r=k[1]}else if(k){t=
  56
+j-n;r=g-p}else{n=p=t=0;r=g}k=t-n;s=r-p;if(h===undefined){h=-Math.atan2(s,k)/m*180;if(h<0)h+=360;h%=360;d()}k=Math.atan2(k*j/g,s)/m*180;k+=180;k%=360;z=e([n,p],[t,r]);t=e([q,w],c(q,w,h,l,u));r=[];p=e([n,p],c(n,p,h,q,w))/t*100;n=[];for(s=0;s<o;s++)n.push(b[s].Za?b[s].Za.a(f,z):s===0?0:s===o-1?z:null);for(s=1;s<o;s++){if(n[s]===null){B=n[s-1];z=s;do A=n[++z];while(A===null);n[s]=B+(A-B)/(z-s+1)}n[s]=Math.max(n[s],n[s-1])}for(s=0;s<o;s++)r.push(p+n[s]/t*100+"% "+b[s].color.value(f));a.angle=k;a.type=
  57
+"gradient";a.method="sigma";a.color=b[0].color.value(f);a.color2=b[o-1].color.value(f);a.colors.value=r.join(",")},Xa:function(){var a=this.element.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},h:function(){D.p.h.call(this);var a=this.element.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});D.pb=D.p.L({zIndex:4,ia:"border",B:function(){var a=this.e;return a.$.j()||a.s.j()},d:function(){var a=this.e;return a.z.d()||a.s.d()||a.I.d()},u:function(){this.d()&&
  58
+this.Ta()},D:function(){this.h();this.d()&&this.Ta()},Ta:function(){var a=this.element,b=a.offsetWidth,c=a.offsetHeight,d,e,f,j,g,h;if(this.e.$.f()){this.Xb();f=this.Ub(2);g=0;for(h=f.length;g<h;g++){j=f[g];d=this.na("borderPiece"+g,j.stroke?"stroke":"fill",this.o());d.coordsize=b*2+","+c*2;d.coordorigin="1,1";d.path=j.path;e=d.style;e.width=b;e.height=c;d.filled=!!j.fill;d.stroked=!!j.stroke;if(j.stroke){d=d.stroke;d.weight=j.Ia+"px";d.color=j.color.value(a);d.dashstyle=j.stroke==="dashed"?"2 2":
  59
+j.stroke==="dotted"?"1 1":"solid";d.linestyle=j.stroke==="double"&&j.Ia>2?"ThinThin":"Single"}else d.fill.color=j.fill.value(a)}for(;this.xa("borderPiece"+g++););}},Xb:function(){var a=this.element,b=a.currentStyle,c=a.runtimeStyle,d=a.tagName,e;if(d==="BUTTON"||d==="INPUT"&&a.type in{submit:1,button:1,reset:1}){c.borderWidth="";a=this.e.$.bb;for(e=a.length;e--;){d=a[e];c["padding"+d]="";c["padding"+d]=parseInt(b["padding"+d])+parseInt(b["border"+d+"Width"])+(!D.Da&&e%2?1:0)}c.borderWidth=0}else if(D.Yb){if(a.childNodes.length!==
  60
+1||a.firstChild.tagName!=="ie6-mask"){b=a.document.createElement("ie6-mask");d=b.style;d.visibility="visible";for(d.zoom=1;d=a.firstChild;)b.appendChild(d);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},Ub:function(a){var b=this.element,c,d,e=this.e.$,f=[],j,g,h,k,o,m,n,p;if(e.d()){e=e.f();m=e.fb;n=e.ic;p=e.Mb;if(e.nc&&e.jc&&e.Nb){e=m.t.a(b);h=e/2;f.push({path:this.la({Q:h,O:h,H:h,K:h},a),stroke:n.t,color:p.t,Ia:e})}else{a=a||1;c=b.offsetWidth;d=b.offsetHeight;e=m.t.a(b);
  61
+h=m.r.a(b);k=m.b.a(b);b=m.l.a(b);var t={t:e,r:h,b:k,l:b};b=this.e.s;if(b.d())o=this.Wa(b.f());j=Math.floor;g=Math.ceil;var r=function(l,u){return o?o[l][u]:0},q=function(l,u,s,z,B,A){var x=r("x",l),y=r("y",l),v=l.charAt(1)==="r";l=l.charAt(0)==="b";return x>0&&y>0?(A?"al":"ae")+(v?g(c-x):j(x))*a+","+(l?g(d-y):j(y))*a+","+(j(x)-u)*a+","+(j(y)-s)*a+","+z*65535+","+2949075*(B?1:-1):(A?"m":"l")+(v?c-u:u)*a+","+(l?d-s:s)*a},w=function(l,u,s,z){var B=l==="t"?j(r("x","tl"))*a+","+g(u)*a:l==="r"?g(c-u)*a+
  62
+","+j(r("y","tr"))*a:l==="b"?g(c-r("x","br"))*a+","+j(d-u)*a:j(u)*a+","+g(d-r("y","bl"))*a;l=l==="t"?g(c-r("x","tr"))*a+","+g(u)*a:l==="r"?g(c-u)*a+","+g(d-r("y","br"))*a:l==="b"?j(r("x","bl"))*a+","+j(d-u)*a:j(u)*a+","+j(r("y","tl"))*a;return s?(z?"m"+l:"")+"l"+B:(z?"m"+B:"")+"l"+l};b=function(l,u,s,z,B,A){var x=l==="l"||l==="r",y=t[l],v,C;if(y>0&&n[l]!=="none"){v=t[x?l:u];u=t[x?u:l];C=t[x?l:s];s=t[x?s:l];if(n[l]==="dashed"||n[l]==="dotted"){f.push({path:q(z,v,u,A+45,0,1)+q(z,0,0,A,1,0),fill:p[l]});
  63
+f.push({path:w(l,y/2,0,1),stroke:n[l],Ia:y,color:p[l]});f.push({path:q(B,C,s,A,0,1)+q(B,0,0,A-45,1,0),fill:p[l]})}else f.push({path:q(z,v,u,A+45,0,1)+w(l,y,0,0)+q(B,C,s,A,0,0)+(n[l]==="double"&&y>2?q(B,C-j(C/3),s-j(s/3),A-45,1,0)+w(l,g(y/3*2),1,0)+q(z,v-j(v/3),u-j(u/3),A,1,0)+"x "+q(z,j(v/3),j(u/3),A+45,0,1)+w(l,j(y/3),1,0)+q(B,j(C/3),j(s/3),A,0,0):"")+q(B,0,0,A-45,1,0)+w(l,0,1,0)+q(z,0,0,A,1,0),fill:p[l]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l",
  64
+"b","t","bl","tl",-180)}}return f},h:function(){D.p.h.call(this);this.element.runtimeStyle.borderColor=""}});D.nb=D.p.L({zIndex:5,bc:["t","tr","r","br","b","bl","l","tl","c"],B:function(){var a=this.e;return a.z.j()||a.z.j()},d:function(){return this.e.z.d()},u:function(){if(this.d()){var a=this.e.z.f();this.o();var b=this.element,c=this.$a;D.q.ib(a.src,function(d){function e(q,w,l,u,s){q=c[q].style;q.width=w;q.height=l;q.left=u;q.top=s}function f(q,w,l){for(var u=0,s=q.length;u<s;u++)c[q[u]].imagedata[w]=
  65
+l}var j=b.offsetWidth,g=b.offsetHeight,h=a.width,k=h.Q.a(b),o=h.O.a(b),m=h.H.a(b);h=h.K.a(b);var n=a.slice,p=n.Q.a(b),t=n.O.a(b),r=n.H.a(b);n=n.K.a(b);e("tl",h,k,0,0);e("t",j-h-o,k,h,0);e("tr",o,k,j-o,0);e("r",o,g-k-m,j-o,k);e("br",o,m,j-o,g-m);e("b",j-h-o,m,h,g-m);e("bl",h,m,0,g-m);e("l",h,g-k-m,0,k);e("c",j-h-o,g-k-m,h,k);f(["tl","t","tr"],"cropBottom",(d.i-p)/d.i);f(["tl","l","bl"],"cropRight",(d.v-n)/d.v);f(["bl","b","br"],"cropTop",(d.i-r)/d.i);f(["tr","r","br"],"cropLeft",(d.v-t)/d.v);if(a.repeat.Ha===
  66
+"stretch"){f(["l","r","c"],"cropTop",p/d.i);f(["l","r","c"],"cropBottom",r/d.i)}if(a.repeat.i==="stretch"){f(["t","b","c"],"cropLeft",n/d.v);f(["t","b","c"],"cropRight",t/d.v)}c.c.style.display=a.fill?"":"none"},this)}else this.h()},D:function(){this.h();this.d()&&this.u()},o:function(){var a=this.G,b,c,d,e=this.bc,f=e.length;if(!a){a=this.G=this.element.document.createElement("border-image");b=a.style;b.position="absolute";this.$a={};for(d=0;d<f;d++){c=this.$a[e[d]]=D.q.ja("rect");c.appendChild(D.q.ja("imagedata"));
  67
+b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.e.z.f().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.va(this.zIndex,a)}return a}});D.sb=D.p.L({zIndex:1,ia:"outset-box-shadow",B:function(){var a=this.e;return a.A.j()||a.s.j()},d:function(){var a=this.e.A;return a.d()&&a.f().ca[0]},u:function(){if(this.d()){var a=this,b=this.element,c=this.o(),d=this.e,e=d.A.f().ca;d=d.s.f();for(var f=e.length,j=f,g,h=b.offsetWidth,k=b.offsetHeight,
  68
+o=D.Da?1:0,m=["tl","tr","br","bl"],n,p,t,r,q,w,l,u,s,z,B,A,x,y=function(v,C,G,O,P,Q,R){v=a.na("shadow"+v+C,"fill",c,f-v);C=v.style;var I=v.fill;C.left=G;C.top=O;v.coordsize=h*2+","+k*2;v.coordorigin="1,1";v.stroked=false;v.filled=true;I.color=P.value(b);if(Q){I.type="gradienttitle";I.color2=I.color;I.opacity=0}v.path=R;C.width=h;C.height=k;return v};j--;){p=e[j];r=p.oc.a(b);q=p.qc.a(b);g=p.gc.a(b);w=p.blur.a(b);p=p.color;l=-g-w;if(!d&&w)d=D.sa.jb;l=this.la({Q:l,O:l,H:l,K:l},2,d);if(w){u=(g+w)*2+h;
  69
+s=(g+w)*2+k;z=w*2/u;B=w*2/s;if(w-g>h/2||w-g>k/2)for(g=4;g--;){n=m[g];A=n.charAt(0)==="b";x=n.charAt(1)==="r";n=y(j,n,r,q,p,w,l);t=n.fill;t.focusposition=(x?1-z:z)+","+(A?1-B:B);t.focussize="0,0";n.style.clip="rect("+((A?s/2:0)+o)+"px,"+(x?u:u/2)+"px,"+(A?s:s/2)+"px,"+((x?u/2:0)+o)+"px)"}else{n=y(j,"",r,q,p,w,l);t=n.fill;t.focusposition=z+","+B;t.focussize=1-z*2+","+(1-B*2)}}else{n=y(j,"",r,q,p,w,l);r=p.Ra();if(r<1)n.fill.opacity=r}}}else this.h()},D:function(){this.h();this.u()}});D.rb=D.p.L({zIndex:3,
  70
+ia:"inset-box-shadow",B:function(){var a=this.e;return a.A.j()||a.s.j()},d:function(){var a=this.e.A;return a.d()&&a.f().pa[0]},u:i(),D:i()})}var E,F,H,J,K,L,M;function update(){init();var a=element.getBoundingClientRect(),b=a.left,c=a.top,d=a.right-b;a=a.bottom-c;var e,f;if(b!==H||c!==J){e=0;for(f=K.length;e<f;e++)K[e].cb();H=b;J=c}if(d!==E||a!==F){e=0;for(f=K.length;e<f;e++)K[e].u();E=d;F=a}}
  71
+function propChanged(){init();var a,b,c=[];a=0;for(b=K.length;a<b;a++)K[a].B()&&c.push(K[a]);a=0;for(b=c.length;a<b;a++)c[a].D()}function mouseEntered(){event.srcElement.className+=" "+D.Ka+"hover";setTimeout(propChanged,0)}function mouseLeft(){var a=event.srcElement;a.className=a.className.replace(new RegExp("\\b"+D.Ka+"hover\\b","g"),"");setTimeout(propChanged,0)}function N(){var a=event.propertyName;if(a==="className"||a==="id")propChanged()}
  72
+function cleanup(){var a,b;if(K){a=0;for(b=K.length;a<b;a++)K[a].h();K=null}L=null;if(M){a=0;for(b=M.length;a<b;a++){M[a].detachEvent("onpropertychange",N);M[a].detachEvent("onmouseenter",mouseEntered);M[a].detachEvent("onmouseleave",mouseLeft)}M=null}D.oa===8&&D.Ca.remove(update)}
  73
+function init(){if(!K){var a=element;a.runtimeStyle.zoom=1;L={I:new D.mb(a),$:new D.qb(a),z:new D.ob(a),s:new D.sa(a),A:new D.tb(a),eb:new D.xb(a)};var b=new D.vb(a,L);K=[b,new D.sb(a,L,b),new D.lb(a,L,b),new D.rb(a,L,b),new D.pb(a,L,b),new D.nb(a,L,b)];var c=element;if(a=c.currentStyle.getAttribute(D.T+"watch-ancestors")){M=[];a=parseInt(a,10);b=0;for(c=c.parentNode;c&&(a==="NaN"||b++<a);){M.push(c);c.attachEvent("onpropertychange",N);c.attachEvent("onmouseenter",mouseEntered);c.attachEvent("onmouseleave",
  74
+mouseLeft);c=c.parentNode}}D.oa===8&&D.Ca.add(update)}}element.readyState==="complete"&&update();
  75
+    </script>
  76
+
  77
+</PUBLIC:COMPONENT>
39  frameworks/compass/templates/pie/manifest.rb
... ...
@@ -0,0 +1,39 @@
  1
+description "Plugin for cross-browser ellipsis truncated text."
  2
+
  3
+file 'PIE.htc', :like => :css
  4
+stylesheet 'pie.scss'
  5
+
  6
+help %Q{
  7
+CSS PIE is a javascript library that progressively enhances
  8
+Internet Explorer to render many modern CSS capabilities
  9
+wherever possible. To install:
  10
+
  11
+  compass install compass/pie
  12
+
  13
+This will install an example stylesheet and a PIE.htc behavior file
  14
+that must be loaded into your pages for IE.
  15
+This file must be delivered with the following mime-type:
  16
+
  17
+  Content-Type: text/x-component
  18
+
  19
+For more information see:
  20
+  http://css3pie.com/
  21
+
  22
+CSS PIE is written by and copyright to: Jason Johnston
  23
+
  24
+Compass is using css3pie version 1.0-beta2. It can be upgraded by downloading
  25
+a newer behavior file and replacing the one that comes with compass.
  26
+}
  27
+
  28
+welcome_message %Q{
  29
+The PIE.htc file must be delivered with the following mime-type:
  30
+
  31
+  Content-Type: text/x-component
  32
+
  33
+Please ensure that your webserver is properly configured.
  34
+
  35
+Unfornately, due to the suckiness of IE, PIE does not work with relative assets.
  36
+
  37
+For more information see:
  38
+  http://css3pie.com/
  39
+}
62  frameworks/compass/templates/pie/pie.scss
... ...
@@ -0,0 +1,62 @@
  1
+// this file demonstrates how to use the CSS PIE extension for
  2
+// legacy versions of Internet Explorer. In many cases, PIE will allow
  3
+// you to style in CSS things that you'd have to do using image chops otherwise.
  4
+//
  5
+// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
  6
+@import "compass/pie";
  7
+@import "compass/css3";
  8
+
  9
+// It is suggested that you use Sass's @extend directive to apply the PIE
  10
+// behavior to your elements. Setting this variable will tell the `pie` mixin
  11
+// to extend. Or you can just extend the base class yourself.
  12
+$pie-base-class: pie-element;
  13
+
  14
+// There are two approaches to creating PIE elements
  15
+// The default approach is to make the element position: relative.
  16
+.pie-element {
  17
+  // relative is the default, so passing relative
  18
+  // is redundant, but we do it here for clarity.
  19
+  @include pie-element(relative);
  20
+}
  21
+
  22
+.bordered {
  23
+  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element. 
  24
+  @include border-radius(5px);
  25
+}
  26
+
  27
+.gradient {
  28
+  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
  29
+  @include background(linear-gradient(#f00, #00f));
  30
+}
  31
+
  32
+
  33
+// But sometimes this messes up your positioning
  34
+// So you can also use z-indexing. In this case
  35
+// an ancestor element before or having the first
  36
+// opaque background should be marked as a pie-container
  37
+// which gives it a z-index of 0 (actually any z-index
  38
+// can be provided to the pie-container mixin).
  39
+// And then the pie element itself should be given
  40
+// a z-index of -1.
  41
+.pie-container {
  42
+  @include pie-container;
  43
+}
  44
+
  45
+.z-pie-element {
  46
+  // this will get a z-index of 0, you can pass a z-index value if you want
  47
+  @include pie-element(z-index);
  48
+}
  49
+
  50
+.widget {
  51
+  @extend .pie-container; // This will
  52
+  h3 {
  53
+    @include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
  54
+  }
  55
+}
  56
+
  57
+
  58
+// Lastly, you can just include the pie-element mixin directly if you need to do a one-off:
  59
+.has-gradient {
  60
+  @include pie-element(relative);
  61
+  @include background(linear-gradient(#f00, #00f));
  62
+}
11  lib/compass/sass_extensions/functions/gradient_support.rb
@@ -88,6 +88,10 @@ def to_svg
88 88
       # XXX Add shape support if possible
89 89
       radial_svg_gradient(color_stops, position_and_angle || Sass::Script::String.new("center center"))
90 90
     end
  91
+    def to_pie
  92
+      Compass::Logger.new.record(:warning, "PIE does not support radial-gradient.")
  93
+      Sass::Script::String.new("-pie-radial-gradient(unsupported)")
  94
+    end
91 95
   end
92 96
 
93 97
   class LinearGradient < Sass::Script::Literal
@@ -121,6 +125,11 @@ def to_moz
121 125
     def to_svg
122 126
       linear_svg_gradient(color_stops, position_and_angle || Sass::Script::String.new("top"))
123 127
     end
  128
+    def to_pie
  129
+      # PIE just uses the standard rep, but the property is prefixed so
  130
+      # the presence of this attribute helps flag when to render a special rule.
  131
+      to_s 
  132
+    end
124 133
   end
125 134
 
126 135
   module Functions
@@ -355,7 +364,7 @@ def _compass_slice(list, start_index, end_index = nil)
355 364
       list.class.new *list.values[start_index..end_index]
356 365
     end
357 366
 
358  
-    %w(webkit moz o ms svg).each do |prefix|
  367
+    %w(webkit moz o ms svg pie).each do |prefix|
359 368
       class_eval <<-RUBY, __FILE__, __LINE__ + 1
360 369
         def _#{prefix}(*args)
361 370
           List.new(*args.map! do |a|
24  test/fixtures/stylesheets/compass/css/pie.css
... ...
@@ -0,0 +1,24 @@
  1
+.pie-element, .bordered, .gradient {
  2
+  behavior: url('/tmp/PIE.htc');
  3
+  position: relative; }
  4
+
  5
+.bordered {
  6
+  -moz-border-radius: 5px;
  7
+  -webkit-border-radius: 5px;
  8
+  -o-border-radius: 5px;
  9
+  -ms-border-radius: 5px;
  10
+  -khtml-border-radius: 5px;
  11
+  border-radius: 5px; }
  12
+
  13
+.gradient {
  14
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #0000ff));
  15
+  background: -moz-linear-gradient(#ff0000 0%, #0000ff 100%);
  16
+  -pie-background: linear-gradient(#ff0000 0%, #0000ff 100%);
  17
+  background: linear-gradient(#ff0000 0%, #0000ff 100%); }
  18
+
  19
+.pie-container, .widget {
  20
+  z-index: 0; }
  21
+
  22
+.z-pie-element, .widget h3 {
  23
+  behavior: url('/tmp/PIE.htc');
  24
+  z-index: 0; }
47  test/fixtures/stylesheets/compass/sass/pie.scss
... ...
@@ -0,0 +1,47 @@
  1
+@import "compass/pie";
  2
+@import "compass/css3";
  3
+
  4
+
  5
+// There are two approaches to creating PIE elements
  6
+// The default approach is to make the element position: relative.
  7
+$pie-base-class: pie-element;
  8
+.pie-element {
  9
+  // relative is the default, so passing relative
  10
+  // is redundant, but we do it here for clarity.
  11
+  @include pie-element(relative);
  12
+}
  13
+
  14
+.bordered {
  15
+  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element. 
  16
+  @include border-radius(5px);
  17
+}
  18
+
  19
+.gradient {
  20
+  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
  21
+  @include background(linear-gradient(#f00, #00f));
  22
+}
  23
+
  24
+
  25
+// But sometimes this messes up your positioning
  26
+// So you can also use z-indexing. In this case
  27
+// an ancestor element before or having the first
  28
+// opaque background should be marked as a pie-container
  29
+// which gives it a z-index of 0 (actually any z-index
  30
+// can be provided to the pie-container mixin).
  31
+// And then the pie element itself should be given
  32
+// a z-index of -1.
  33
+.pie-container {
  34
+  @include pie-container;
  35
+}
  36
+
  37
+.z-pie-element {
  38
+  // this will get a z-index of 0, you can pass a z-index value if you want
  39
+  @include pie-element(z-index);
  40
+}
  41
+
  42
+.widget {
  43
+  @extend .pie-container; // This will
  44
+  h3 {
  45
+    @include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
  46
+  }
  47
+}

0 notes on commit d66b440

Please sign in to comment.
Something went wrong with that request. Please try again.