susy 2.0.0.alpha.1 → 2.0.0.alpha.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. data/lib/susy.rb +0 -1
  2. data/sass/_susy.scss +3 -54
  3. data/sass/susy/_core.scss +6 -0
  4. data/sass/susy/_helpers.scss +5 -13
  5. data/sass/susy/_math.scss +5 -2
  6. data/sass/susy/_settings.scss +52 -0
  7. data/sass/susy/api/_float.scss +6 -71
  8. data/sass/susy/api/_shared.scss +7 -0
  9. data/sass/susy/api/float/_container.scss +12 -0
  10. data/sass/susy/api/float/_end.scss +21 -0
  11. data/sass/susy/api/float/_isolate.scss +14 -0
  12. data/sass/susy/api/float/_span.scss +23 -0
  13. data/sass/susy/api/shared/_container.scss +22 -0
  14. data/sass/susy/api/shared/_grid-background.scss +20 -0
  15. data/sass/susy/api/shared/_margins.scss +15 -0
  16. data/sass/susy/api/shared/_padding.scss +15 -0
  17. data/sass/susy/helpers/_direction.scss +28 -0
  18. data/sass/susy/helpers/_nth.scss +15 -0
  19. data/sass/susy/helpers/_sass-lists.scss +45 -26
  20. data/sass/susy/language/_shared.scss +6 -0
  21. data/sass/susy/language/_susy.scss +16 -0
  22. data/sass/susy/language/_susy1.scss +9 -0
  23. data/sass/susy/language/shared/_context.scss +35 -0
  24. data/sass/susy/language/shared/_settings.scss +216 -0
  25. data/sass/susy/language/susy/_background.scss +132 -0
  26. data/sass/susy/language/susy/_container.scss +100 -0
  27. data/sass/susy/language/susy/_functions.scss +58 -0
  28. data/sass/susy/language/susy/_gallery.scss +94 -0
  29. data/sass/susy/language/susy/_isolate.scss +51 -0
  30. data/sass/susy/language/susy/_math.scss +153 -0
  31. data/sass/susy/language/susy/_rows.scss +78 -0
  32. data/sass/susy/language/susy/_span.scss +204 -0
  33. data/sass/susy/language/susy1/_settings.scss +60 -0
  34. data/sass/susy/math/_columns.scss +79 -55
  35. data/sass/susy/math/_container.scss +45 -0
  36. data/sass/susy/math/_location.scss +47 -0
  37. data/templates/project/README.md +36 -11
  38. data/templates/project/_base.scss +1 -1
  39. data/templates/project/manifest.rb +0 -3
  40. data/templates/project/screen.scss +1 -1
  41. metadata +33 -45
  42. data/sass/README.md +0 -33
  43. data/sass/susy/_api.scss +0 -39
  44. data/sass/susy/_grids.scss +0 -2
  45. data/sass/susy/_gutters.scss +0 -2
  46. data/sass/susy/_language.scss +0 -3
  47. data/sass/susy/api/_isolation.scss +0 -16
  48. data/sass/susy/grids/_add.scss +0 -10
  49. data/sass/susy/grids/_find.scss +0 -10
  50. data/sass/susy/gutters/_add.scss +0 -10
  51. data/sass/susy/gutters/_find.scss +0 -10
  52. data/sass/susy/helpers/_background-grid.scss +0 -65
  53. data/sass/susy/helpers/_box-sizing.scss +0 -25
  54. data/sass/susy/helpers/_clearfix.scss +0 -51
  55. data/sass/susy/helpers/_columns.scss +0 -15
  56. data/sass/susy/helpers/_find.scss +0 -63
  57. data/sass/susy/helpers/_span-shared.scss +0 -9
  58. data/sass/susy/language/_parse-add.scss +0 -19
  59. data/sass/susy/language/_parse-list.scss +0 -53
  60. data/sass/susy/language/_span.scss +0 -20
  61. data/sass/susy/math/_context.scss +0 -3
  62. data/sass/susy/math/_gutters.scss +0 -11
  63. data/templates/box-sizing/behaviors/box-sizing/boxsizing.htc +0 -399
  64. data/templates/box-sizing/behaviors/box-sizing/boxsizing.php +0 -23
  65. data/templates/box-sizing/manifest.rb +0 -4
  66. data/templates/project/behaviors/box-sizing/boxsizing.htc +0 -399
  67. data/templates/project/behaviors/box-sizing/boxsizing.php +0 -23
@@ -1,65 +0,0 @@
1
- @import "compass/css3/images";
2
-
3
- @mixin background-grid($columns: false, $gutter: false, $color: rgba(#69aedb, .5)) {
4
-
5
- $background-length: length($grids);
6
-
7
- @if not ($columns) {
8
- @for $i from 1 through $background-length {
9
- @if $i == 1 {
10
- @include background-build($columns, $gutter, $color);
11
- }
12
- @else {
13
- $mq: nth(nth($grids, $i), 2);
14
-
15
- $grid: nth(nth($grids, $i), 1);
16
- @include breakpoint($mq) {
17
- @include background-build($grid, $gutter, $color);
18
- }
19
- }
20
- }
21
- }
22
- }
23
-
24
- @mixin background-build($columns, $gutter, $color) {
25
- $columns: find-grid($columns);
26
- $gutter: find-gutter($gutter);
27
-
28
- $stops: background-gradient-stops($columns, $gutter, $color);
29
-
30
- @include background(
31
- linear-gradient(
32
- left, $stops
33
- )
34
- );
35
- }
36
-
37
- //////////////////////////////
38
- // Get the stops of the gradient
39
- //////////////////////////////
40
- @function background-gradient-stops($columns, $gutter, $color) {
41
- $bkg: ();
42
- $count: column-count($columns);
43
-
44
- @for $i from 1 through column-count($columns) {
45
- $bkg: join($bkg, background-column-gradient($i, $columns, $gutter, $color), comma);
46
- }
47
-
48
- @return $bkg;
49
- }
50
-
51
- //////////////////////////////
52
- // Get the columns
53
- //////////////////////////////
54
- @function background-column-gradient($location, $columns, $gutter, $color) {
55
-
56
- @if $location == 1 {
57
- @return $color 0%, $color column-span(1, 1, $columns), transparentize($color, 1) column-span(1, 1, $columns);
58
- }
59
- @if $location == column-count($columns) {
60
- @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color 100%;
61
- }
62
- @if $location > 1 {
63
- @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location, 1, $columns), transparentize($color, 1) column-span($location, 1, $columns);
64
- }
65
- }
@@ -1,25 +0,0 @@
1
- @import "compass/css3/shared";
2
-
3
- @mixin box-sizing($bs) {
4
- $bs: unquote($bs);
5
- @include experimental(box-sizing, $bs,
6
- -moz, -webkit, not -o, not -ms, not -khtml, official
7
- );
8
-
9
- @if $bs == 'border-box' {
10
- @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
11
- *behavior: url("../behaviors/box-sizing/boxsizing.php");
12
- }
13
- }
14
- @else {
15
- *behavior: none;
16
- }
17
- }
18
-
19
- %border-box {
20
- @include box-sizing('border-box');
21
- }
22
-
23
- %content-box {
24
- @include box-sizing('content-box');
25
- }
@@ -1,51 +0,0 @@
1
- $legacy-support-for-ie6: false !default;
2
- $legacy-support-for-ie7: false !default;
3
- $legacy-support-for-mozilla: false !default;
4
-
5
- @mixin clearfix {
6
- @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla {
7
- /* for IE 6/7 */
8
- *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
9
- /* non-JS fallback */
10
- *zoom: 1;
11
-
12
- &:before,
13
- &:after {
14
- content: "";
15
- display: table;
16
- }
17
-
18
- &:after {
19
- clear: both;
20
- }
21
- }
22
- @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla {
23
- /* for IE 6/7 */
24
- *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
25
- /* non-JS fallback */
26
- *zoom: 1;
27
-
28
- &:before,
29
- &:after {
30
- content: ".";
31
- display: block;
32
- height: 0;
33
- overflow: hidden;
34
- }
35
-
36
- &:after {
37
- clear: both;
38
- }
39
- }
40
- @else {
41
- &:after {
42
- content: "";
43
- display: table;
44
- clear: both;
45
- }
46
- }
47
- }
48
-
49
- %clearfix {
50
- @include clearfix;
51
- }
@@ -1,15 +0,0 @@
1
- @function end-row($span, $location, $columns) {
2
- $columns: find-grid($columns);
3
-
4
- @if $location == 'last' or $location == 'omega' {
5
- @return true;
6
- }
7
- @else {
8
- @if $location + ($span - 1) == column-count($columns) {
9
- @return true;
10
- }
11
- @else {
12
- @return false;
13
- }
14
- }
15
- }
@@ -1,63 +0,0 @@
1
- //////////////////////////////
2
- // Find Object
3
- //
4
- // Finds relevant object
5
- // From Singularity
6
- // Must be using Breakpoint to work properly
7
- //////////////////////////////
8
- @function find-object($haystack, $user-object: false) {
9
- $length: length($haystack);
10
-
11
- @if $user-object != false {
12
- @return $user-object;
13
- }
14
- @else if $length > 1 {
15
- $query-min: breakpoint-get-context('min-width');
16
- $query-max: breakpoint-get-context('max-width');
17
-
18
- // If we've got a min-width or max-width
19
- @if $query-min or $query-max {
20
- // Reverse the grid so we can step through it
21
- $reverse-haystack: ();
22
- @for $i from 2 through $length {
23
- $reverse-haystack: append($reverse-haystack, nth($haystack, $i), comma);
24
- }
25
- $reverse-haystack: reverse($reverse-haystack);
26
- $rg-length: $length - 1;
27
-
28
- // Grab the largest and smallest MQs
29
- $smallest: nth(nth($haystack, 2), 2);
30
- $largest: nth(nth($reverse-haystack, 1), 2);
31
- $context: $query-min;
32
-
33
- // @if not ($mobile-first) {
34
- // $context: $query-max;
35
- // }
36
-
37
- // If it's smallest than the smallest MQ, use the 1st grid
38
- @if $context < $smallest {
39
- @return nth($haystack, 1);
40
- }
41
- // If it's larger than or equal to the largest MQ, use the last grid
42
- @else if $context >= $largest {
43
- @return nth(nth($reverse-haystack, 1), 1);
44
- }
45
- @else {
46
- // Loop through each MQ. If the MQ is greather than or equal to the the MQ in question, use it!
47
- @for $j from 1 through $rg-length {
48
- $query: nth(nth($reverse-haystack, $j), 2);
49
- @if $context >= $query {
50
- @return nth(nth($reverse-haystack, $j), 1);
51
- }
52
- }
53
- }
54
-
55
- }
56
- @else {
57
- @return nth($haystack, 1);
58
- }
59
- }
60
- @else {
61
- @return nth($haystack, 1);
62
- }
63
- }
@@ -1,9 +0,0 @@
1
- @mixin span-shared {
2
- @if $include-border-box {
3
- @include box-sizing('border-box');
4
- }
5
-
6
- @if $include-clearfix {
7
- @include clearfix;
8
- }
9
- }
@@ -1,19 +0,0 @@
1
- @function parse-add($definition) {
2
- $grid: ();
3
- $mq: false;
4
- $mq-find: false;
5
-
6
- @each $item in $definition {
7
- @if $item != 'at' and $mq-find != true {
8
- $grid: append($grid, $item, 'space');
9
- }
10
- @else if $item == 'at' {
11
- $mq-find: true;
12
- }
13
- @else {
14
- $mq: $item;
15
- }
16
- }
17
-
18
- @return ($grid $mq);
19
- }
@@ -1,53 +0,0 @@
1
- //////////////////////////////
2
- // Parse natural language string
3
- //
4
- // Retrieve values from the natural language string.
5
- // parse-string($var, $list)
6
- // $var : <string>
7
- // - at/span/of or any other keywords.
8
- // - 'span' queries the unprefixed span declaration.
9
- // - 'at' can also query first, last, alpha, and omega.
10
- // $list : <list>
11
- // - A list like this: last 2 of (1 1 2) push 1
12
- //
13
- //////////////////////////////
14
- @function parse-span-list($var, $list) {
15
-
16
- $found: false;
17
-
18
- $grid: ();
19
-
20
- // Loop through list.
21
- @each $item in $list {
22
-
23
- // if 'span' - return the first numeric.
24
- // if keyword was found - return the following item.
25
- @if (type-of($item) == number and $var == span and $found != 'grid') or $found == true {
26
-
27
- // @if $found == true
28
- @return $item;
29
- }
30
-
31
- // Special handling for Grids
32
- @else if $item == $var and $var == 'of' {
33
- $found: 'grid';
34
- }
35
-
36
- @else if $found == 'grid' {
37
- @if type-of($item) == number {
38
- $grid: append($grid, $item, 'space');
39
- }
40
- @else {
41
- @return $grid;
42
- }
43
- }
44
-
45
- // Any keyword - return the following value.
46
- @else if $item == $var {
47
- $found: true;
48
- }
49
- }
50
-
51
- // Wasn't found.
52
- @return false;
53
- }
@@ -1,20 +0,0 @@
1
- //////////////////////////////
2
- // "Natural Language" Parsing
3
- //
4
- // Keywords:
5
- // span: Column Span
6
- // at: Column Location
7
- // of: Context
8
- // gutters: Gutters
9
- // output: Output
10
- //////////////////////////////
11
- @mixin span($input) {
12
- $span: nth($input, 1);
13
-
14
- $location: parse-span-list('at', $input);
15
- $context: parse-span-list('of', $input);
16
- $gutter: parse-span-list('gutters', $input);
17
- $output: parse-span-list('output', $input);
18
-
19
- @include grid-span($span, $location, $context, $gutter, $output)
20
- }
@@ -1,3 +0,0 @@
1
- @function context($primary, $secondary) {
2
- @return ($primary * $secondary) / 100%;;
3
- }
@@ -1,11 +0,0 @@
1
- @function gutter-span($gutter: false, $columns: false) {
2
-
3
- // Find the columns and gutters
4
- $columns: find-grid($columns);
5
- $gutter: find-gutter($gutter);
6
-
7
- // Combine the columns and gutters
8
- $columns-and-gutters: column-sum($columns, $gutter);
9
-
10
- @return (nth($gutter, 1) / $columns-and-gutters) * 100%
11
- }
@@ -1,399 +0,0 @@
1
- /**
2
- * box-sizing Polyfill
3
- *
4
- * A polyfill for box-sizing: border-box for IE6 & IE7.
5
- *
6
- * JScript
7
- *
8
- * This program is free software: you can redistribute it and/or modify
9
- * it under the terms of the GNU Lesser General Public License as published
10
- * by the Free Software Foundation, either version 3 of the License, or
11
- * (at your option) any later version.
12
- *
13
- * This program is distributed in the hope that it will be useful,
14
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
15
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16
- * GNU Lesser General Public License for more details.
17
- *
18
- * See <http://www.gnu.org/licenses/lgpl-3.0.txt>
19
- *
20
- * @category JScript
21
- * @package box-sizing-polyfill
22
- * @author Christian Schepp Schaefer <schaepp@gmx.de> <http://twitter.com/derSchepp>
23
- * @copyright 2012 Christian Schepp Schaefer
24
- * @license http://www.gnu.org/copyleft/lesser.html The GNU LESSER GENERAL PUBLIC LICENSE, Version 3.0
25
- * @link http://github.com/Schepp/box-sizing-polyfill
26
- *
27
- * PREFACE:
28
- *
29
- * This box-sizing polyfill is based on previous work done by Erik Arvidsson,
30
- * which he published in 2002 on http://webfx.eae.net/dhtml/boxsizing/boxsizing.html.
31
- *
32
- * USAGE:
33
- *
34
- * Add the behavior/HTC after every `box-sizing: border-box;` that you assign:
35
- *
36
- * box-sizing: border-box;
37
- * *behavior: url(/scripts/boxsizing.htc);`
38
- *
39
- * Prefix the `behavior` property with a star, like seen above, so it will only be seen by
40
- * IE6 & IE7, not by IE8+ who already implement box-sizing.
41
- *
42
- * The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
43
- * That's why I'd advise you to use absolute paths like in the example.
44
- *
45
- */
46
- <component lightWeight="true">
47
- <attach event="onpropertychange" onevent="checkPropertyChange()" />
48
- <attach event="ondetach" onevent="restore()" />
49
- <attach event="onresize" for="window" onevent="update()" />
50
- <script type="text/javascript">
51
- //<![CDATA[
52
-
53
- var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
54
-
55
- // Shortcut for the document object
56
- var doc = element.document;
57
-
58
- // Buffer for multiple resize events
59
- var resizetimeout = null;
60
-
61
- // Don't apply box-sizing to certain elements
62
- var apply = false;
63
- switch(element.nodeName){
64
- case '#comment':
65
- case 'HTML':
66
- case 'HEAD':
67
- case 'TITLE':
68
- case 'SCRIPT':
69
- case 'STYLE':
70
- case 'LINK':
71
- case 'META':
72
- break;
73
-
74
- default:
75
- apply = true;
76
- break;
77
- }
78
-
79
- /*
80
- * update gets called during resize events, then waits until there are no further resize events, and finally triggers a recalculation
81
- */
82
- function update(){
83
- if(resizetimeout !== null){
84
- window.clearTimeout(resizetimeout);
85
- }
86
- resizetimeout = window.setTimeout(function(){
87
- restore();
88
- init();
89
- resizetimeout = null;
90
- },100);
91
- }
92
-
93
- /*
94
- * restore gets called when the behavior is being detached (see event binding at the top),
95
- * resets everything like it was before applying the behavior
96
- */
97
- function restore(){
98
- if(apply){
99
- element.runtimeStyle.removeAttribute("width");
100
- element.runtimeStyle.removeAttribute("height");
101
- }
102
- }
103
-
104
- /*
105
- * init gets called once at the start and then never again,
106
- * triggers box-sizing calculations and updates width and height
107
- */
108
- function init(){
109
- if(apply){
110
- updateBorderBoxWidth();
111
- updateBorderBoxHeight();
112
- }
113
- }
114
-
115
- /*
116
- * checkPropertyChange gets called as soon as an element property changes
117
- * (see event binding at the top), it then checks if any property influencing its
118
- * dimensions was changed and if yes recalculates width and height
119
- */
120
- function checkPropertyChange(){
121
- if(apply){
122
- var pn = event.propertyName;
123
- if(pn === "style.boxSizing" && element.style.boxSizing === ""){
124
- element.style.removeAttribute("boxSizing");
125
- element.runtimeStyle.removeAttribute("boxSizing");
126
- element.runtimeStyle.removeAttribute("width");
127
- element.runtimeStyle.removeAttribute("height");
128
- }
129
- switch (pn){
130
- case "style.width":
131
- case "style.borderLeftWidth":
132
- case "style.borderLeftStyle":
133
- case "style.borderRightWidth":
134
- case "style.borderRightStyle":
135
- case "style.paddingLeft":
136
- case "style.paddingRight":
137
- updateBorderBoxWidth();
138
- break;
139
-
140
- case "style.height":
141
- case "style.borderTopWidth":
142
- case "style.borderTopStyle":
143
- case "style.borderBottomWidth":
144
- case "style.borderBottomStyle":
145
- case "style.paddingTop":
146
- case "style.paddingBottom":
147
- updateBorderBoxHeight();
148
- break;
149
-
150
- case "className":
151
- case "style.boxSizing":
152
- updateBorderBoxWidth();
153
- updateBorderBoxHeight();
154
- break;
155
- }
156
- }
157
- }
158
-
159
- /*
160
- * Helper function, taken from Dean Edward's IE7 framework,
161
- * added by Schepp on 12.06.2010.
162
- * http://code.google.com/p/ie7-js/
163
- *
164
- * Allows us to convert from relative to pixel-values.
165
- */
166
- function getPixelValue(value){
167
- var PIXEL = /^\d+(px)?$/i;
168
- if (PIXEL.test(value)) return parseInt(value);
169
- var style = element.style.left;
170
- var runtimeStyle = element.runtimeStyle.left;
171
- element.runtimeStyle.left = element.currentStyle.left;
172
- element.style.left = value || 0;
173
- value = parseInt(element.style.pixelLeft);
174
- element.style.left = style;
175
- element.runtimeStyle.left = runtimeStyle;
176
-
177
- return value;
178
- }
179
-
180
- function getPixelWidth(object, value){
181
- // For Pixel Values
182
- var PIXEL = /^\d+(px)?$/i;
183
- if (PIXEL.test(value)) return parseInt(value);
184
-
185
- // For Percentage Values
186
- var PERCENT = /^[\d\.]+%$/i;
187
- if (PERCENT.test(value)){
188
- try{
189
- parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
190
- value = (parseFloat(value) / 100) * parentWidth;
191
- }
192
- catch(e){
193
- value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
194
- }
195
- return parseInt(value);
196
- }
197
-
198
- // For EM Values
199
- var style = object.style.left;
200
- var runtimeStyle = object.runtimeStyle.left;
201
- object.runtimeStyle.left = object.currentStyle.left;
202
- object.style.left = value || 0;
203
- value = parseInt(object.style.pixelLeft);
204
- object.style.left = style;
205
- object.runtimeStyle.left = runtimeStyle;
206
-
207
- return value;
208
- }
209
-
210
- function getPixelHeight(object, value){
211
- // For Pixel Values
212
- var PIXEL = /^\d+(px)?$/i;
213
- if (PIXEL.test(value)) return parseInt(value);
214
-
215
- // For Percentage Values
216
- var PERCENT = /^[\d\.]+%$/i;
217
- if (PERCENT.test(value)){
218
- try{
219
- if(object.parentElement.currentStyle.height != "auto"){
220
- switch(object.parentElement.nodeName){
221
- default:
222
- parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height);
223
- if(parentHeight !== "auto"){
224
- value = (parseFloat(value) / 100) * parentHeight;
225
- }
226
- else {
227
- value = "auto";
228
- }
229
- break;
230
-
231
- case 'HTML':
232
- parentHeight = element.document.documentElement.clientHeight;
233
- if(parentHeight !== "auto"){
234
- value = (parseFloat(value) / 100) * parentHeight;
235
- }
236
- else {
237
- value = "auto";
238
- }
239
- break;
240
- }
241
- if(value !== "auto") value = parseInt(value);
242
- }
243
- else {
244
- value = "auto";
245
- }
246
- }
247
- catch(e){
248
- value = "auto";
249
- }
250
- return value;
251
- }
252
-
253
- // For EM Values
254
- var style = object.style.left;
255
- var runtimeStyle = object.runtimeStyle.left;
256
- object.runtimeStyle.left = object.currentStyle.left;
257
- object.style.left = value || 0;
258
- value = parseInt(object.style.pixelLeft);
259
- object.style.left = style;
260
- object.runtimeStyle.left = runtimeStyle;
261
-
262
- return value;
263
- }
264
-
265
-
266
- /*
267
- * getBorderWidth & friends
268
- * Border width getters
269
- */
270
- function getBorderWidth(sSide){
271
- if(element.currentStyle["border" + sSide + "Style"] == "none"){
272
- return 0;
273
- }
274
- var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
275
- return n || 0;
276
- }
277
- function getBorderLeftWidth() { return getBorderWidth("Left"); }
278
- function getBorderRightWidth() { return getBorderWidth("Right"); }
279
- function getBorderTopWidth() { return getBorderWidth("Top"); }
280
- function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
281
-
282
-
283
- /*
284
- * getPadding & friends
285
- * Padding width getters
286
- */
287
- function getPadding(sSide) {
288
- var n = getPixelValue(element.currentStyle["padding" + sSide]);
289
- return n || 0;
290
- }
291
- function getPaddingLeft() { return getPadding("Left"); }
292
- function getPaddingRight() { return getPadding("Right"); }
293
- function getPaddingTop() { return getPadding("Top"); }
294
- function getPaddingBottom() { return getPadding("Bottom"); }
295
-
296
-
297
-
298
- /*
299
- * getBoxSizing
300
- * Get the box-sizing value for the current element
301
- */
302
- function getBoxSizing(){
303
- var s = element.style;
304
- var cs = element.currentStyle
305
- if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
306
- return s.boxSizing;
307
- }
308
- if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
309
- return s["box-sizing"];
310
- }
311
- if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
312
- return cs.boxSizing;
313
- }
314
- if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
315
- return cs["box-sizing"];
316
- }
317
- return getDocumentBoxSizing();
318
- }
319
-
320
-
321
- /*
322
- * getDocumentBoxSizing
323
- * Get the default document box sizing (check for quirks mode)
324
- */
325
- function getDocumentBoxSizing(){
326
- if(doc.compatMode === null || doc.compatMode === "BackCompat"){
327
- return "border-box";
328
- }
329
- return "content-box"
330
- }
331
-
332
-
333
- /*
334
- * setBorderBoxWidth & friends
335
- * Width and height setters
336
- */
337
- function setBorderBoxWidth(n){
338
- element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
339
- getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
340
- }
341
- function setBorderBoxHeight(n){
342
- element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
343
- getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
344
- }
345
- function setContentBoxWidth(n){
346
- element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
347
- getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
348
- }
349
- function setContentBoxHeight(n){
350
- element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
351
- getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
352
- }
353
-
354
-
355
- /*
356
- * updateBorderBoxWidth & updateBorderBoxHeight
357
- *
358
- */
359
- function updateBorderBoxWidth() {
360
- if(getDocumentBoxSizing() == getBoxSizing()){
361
- return;
362
- }
363
- var csw = element.currentStyle.width;
364
- if(csw != "auto"){
365
- csw = getPixelWidth(element,csw);
366
- if(getBoxSizing() == "border-box"){
367
- setBorderBoxWidth(parseInt(csw));
368
- }
369
- else{
370
- setContentBoxWidth(parseInt(csw));
371
- }
372
- }
373
- }
374
-
375
- function updateBorderBoxHeight() {
376
- if(getDocumentBoxSizing() == getBoxSizing()){
377
- return;
378
- }
379
- var csh = element.currentStyle.height;
380
- if(csh != "auto"){
381
- csh = getPixelHeight(element,csh);
382
- if(csh !== "auto"){
383
- if(getBoxSizing() == "border-box"){
384
- setBorderBoxHeight(parseInt(csh));
385
- }
386
- else{
387
- setContentBoxHeight(parseInt(csh));
388
- }
389
- }
390
- }
391
- }
392
-
393
-
394
- // Run the calculations
395
- init();
396
-
397
- //]]>
398
- </script>
399
- </component>