compass-borderbox 0.1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +99 -0
- data/lib/borderbox.rb +3 -0
- data/stylesheets/_borderbox.scss +12 -0
- data/stylesheets/box-sizing/_border-box.scss +114 -0
- metadata +104 -0
data/README.md
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
Borderbox for Compass
|
|
2
|
+
====================
|
|
3
|
+
|
|
4
|
+
Use box-sizing: border-box; with impunity. Borderbox outputs equivalent CSS for IE6 & 7
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Installation
|
|
8
|
+
============
|
|
9
|
+
|
|
10
|
+
From the command line:
|
|
11
|
+
|
|
12
|
+
gem install compass-borderbox
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
Usage
|
|
16
|
+
============
|
|
17
|
+
|
|
18
|
+
Add to a project:
|
|
19
|
+
|
|
20
|
+
require "borderbox"
|
|
21
|
+
|
|
22
|
+
And then import the mixins to your base SASS/SCSS file:
|
|
23
|
+
|
|
24
|
+
@import "borderbox";
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
Mixin
|
|
28
|
+
============
|
|
29
|
+
|
|
30
|
+
#### borderbox($width [$height], $padding, [$border]);
|
|
31
|
+
|
|
32
|
+
Sets box-sizing-compliant values, as well as legacy values for < IE 8
|
|
33
|
+
|
|
34
|
+
@include borderbox(200px, 10px 0);
|
|
35
|
+
|
|
36
|
+
@include borderbox(200px 100px, 10px 5px 0, 4px solid black);
|
|
37
|
+
|
|
38
|
+
@include borderbox(200px, 10px, 3px 0 3px 5px);
|
|
39
|
+
|
|
40
|
+
Compiles to:
|
|
41
|
+
|
|
42
|
+
-moz-box-sizing: border-box;
|
|
43
|
+
-webkit-box-sizing: border-box;
|
|
44
|
+
-ms-box-sizing: border-box;
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
padding: 10px 0;
|
|
47
|
+
width: 200px;
|
|
48
|
+
*width: 200px;
|
|
49
|
+
|
|
50
|
+
-moz-box-sizing: border-box;
|
|
51
|
+
-webkit-box-sizing: border-box;
|
|
52
|
+
-ms-box-sizing: border-box;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
padding: 10px 5px 0;
|
|
55
|
+
border: 4px solid black;
|
|
56
|
+
width: 200px;
|
|
57
|
+
*width: 182px;
|
|
58
|
+
height: 100px;
|
|
59
|
+
*height: 82px;
|
|
60
|
+
|
|
61
|
+
-moz-box-sizing: border-box;
|
|
62
|
+
-webkit-box-sizing: border-box;
|
|
63
|
+
-ms-box-sizing: border-box;
|
|
64
|
+
box-sizing: border-box;
|
|
65
|
+
padding: 10px;
|
|
66
|
+
border-width: 3px 0 3px 5px;
|
|
67
|
+
width: 200px;
|
|
68
|
+
*width: 175px;
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
Global Variables
|
|
72
|
+
============
|
|
73
|
+
|
|
74
|
+
$global-border-box: false !default;
|
|
75
|
+
|
|
76
|
+
Set to true if you prefer declaring a global box-sizing prop (Note: you should do this. Otherwise you must constantly check to see if box-sizing is enabled for a property).
|
|
77
|
+
|
|
78
|
+
Override in your base SASS/SCSS file:
|
|
79
|
+
|
|
80
|
+
$global-border-box: true;
|
|
81
|
+
|
|
82
|
+
Then, add a global CSS rule:
|
|
83
|
+
|
|
84
|
+
* {
|
|
85
|
+
@include box-sizing(border-box);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
Afterwards your compiled code will be much more compact:
|
|
89
|
+
|
|
90
|
+
@include borderbox(200px 100px, 10px 5px 0, 4px solid black);
|
|
91
|
+
|
|
92
|
+
Compiles to:
|
|
93
|
+
|
|
94
|
+
padding: 10px 5px 0;
|
|
95
|
+
border: 4px solid black;
|
|
96
|
+
width: 200px;
|
|
97
|
+
*width: 182px;
|
|
98
|
+
height: 100px;
|
|
99
|
+
*height: 82px;
|
data/lib/borderbox.rb
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// Borderbox ------------------------------------------------------------
|
|
2
|
+
|
|
3
|
+
// Use box-sizing: border-box; with impunity
|
|
4
|
+
// Borderbox outputs equivalent CSS in <IE8
|
|
5
|
+
|
|
6
|
+
// Defaults ------------------------------------------------------------------
|
|
7
|
+
|
|
8
|
+
// Set a global border-box property (default is false)
|
|
9
|
+
$global-border-box: false !default;
|
|
10
|
+
|
|
11
|
+
// Import --------------------------------------------------------------------
|
|
12
|
+
@import "box-sizing/border-box";
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
// Borderbox mixin
|
|
2
|
+
// Use box-sizing: border-box; with impunity
|
|
3
|
+
// Borderbox outputs equivalent CSS in <IE8
|
|
4
|
+
|
|
5
|
+
// Set to true if you prefer declaring a global box-sizing prop.
|
|
6
|
+
//
|
|
7
|
+
// Ex:
|
|
8
|
+
// $global-border-box: true;
|
|
9
|
+
//
|
|
10
|
+
// * {
|
|
11
|
+
// @include box-sizing(border-box);
|
|
12
|
+
// }
|
|
13
|
+
$global-border-box: false !default;
|
|
14
|
+
|
|
15
|
+
@mixin borderbox($dimensions, $padding, $border: false) {
|
|
16
|
+
@if not $global-border-box {
|
|
17
|
+
@include box-sizing(border-box);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Extract width/height values
|
|
21
|
+
$width: nth($dimensions, 1);
|
|
22
|
+
$height: false;
|
|
23
|
+
|
|
24
|
+
@if length($dimensions) == 2 {
|
|
25
|
+
$height: nth($dimensions, 2);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Extract border values
|
|
29
|
+
$use-border-shorthand: false;
|
|
30
|
+
$border-width: false;
|
|
31
|
+
|
|
32
|
+
@each $unit in $border {
|
|
33
|
+
@if type-of($unit) == number {
|
|
34
|
+
@if $border-width {
|
|
35
|
+
$border-width: append($border-width, $unit);
|
|
36
|
+
} @else {
|
|
37
|
+
$border-width: $unit;
|
|
38
|
+
}
|
|
39
|
+
} @else {
|
|
40
|
+
$use-border-shorthand: true;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Extract padding values
|
|
45
|
+
padding: $padding;
|
|
46
|
+
|
|
47
|
+
$padding-length: length($padding);
|
|
48
|
+
$padding-y: 0;
|
|
49
|
+
$padding-x: 0;
|
|
50
|
+
|
|
51
|
+
$border-length: length($border-width);
|
|
52
|
+
$border-y: 0;
|
|
53
|
+
$border-x: 0;
|
|
54
|
+
|
|
55
|
+
@if $padding-length == 4 {
|
|
56
|
+
$padding-y: nth($padding, 1) + nth($padding, 3);
|
|
57
|
+
$padding-x: nth($padding, 2) + nth($padding, 4);
|
|
58
|
+
} @else if $padding-length == 3 {
|
|
59
|
+
$padding-y: nth($padding, 1) + nth($padding, 3);
|
|
60
|
+
$padding-x: nth($padding, 2) * 2;
|
|
61
|
+
} @else if $padding-length == 2 {
|
|
62
|
+
$padding-y: nth($padding, 1) * 2;
|
|
63
|
+
$padding-x: nth($padding, 2) * 2;
|
|
64
|
+
} @else if $padding-length == 1 {
|
|
65
|
+
$padding-y: $padding * 2;
|
|
66
|
+
$padding-x: $padding * 2;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@if $border {
|
|
70
|
+
@if $use-border-shorthand {
|
|
71
|
+
border: $border;
|
|
72
|
+
} @else {
|
|
73
|
+
border-width: $border-width;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@if $border-length == 4 {
|
|
77
|
+
$border-y: nth($border-width, 1) + nth($border-width, 3);
|
|
78
|
+
$border-x: nth($border-width, 2) + nth($border-width, 4);
|
|
79
|
+
} @else if $border-length == 3 {
|
|
80
|
+
$border-y: nth($border-width, 1) + nth($border-width, 3);
|
|
81
|
+
$border-x: nth($border-width, 2) * 2;
|
|
82
|
+
} @else if $border-length == 2 {
|
|
83
|
+
$border-y: nth($border-width, 1) * 2;
|
|
84
|
+
$border-x: nth($border-width, 2) * 2;
|
|
85
|
+
} @else if $border-length == 1 {
|
|
86
|
+
$border-y: $border-width * 2;
|
|
87
|
+
$border-x: $border-width * 2;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Set width value
|
|
92
|
+
@if $width {
|
|
93
|
+
@if $width == auto {
|
|
94
|
+
width: $width;
|
|
95
|
+
} @else {
|
|
96
|
+
width: $width;
|
|
97
|
+
@if $legacy-support-for-ie {
|
|
98
|
+
*width: $width - $padding-x - $border-x;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// Set height value
|
|
104
|
+
@if $height {
|
|
105
|
+
@if $height == auto {
|
|
106
|
+
height: $height;
|
|
107
|
+
} @else {
|
|
108
|
+
height: $height;
|
|
109
|
+
@if $legacy-support-for-ie {
|
|
110
|
+
*height: $height - $padding-y - $border-y;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
metadata
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-borderbox
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
hash: 71
|
|
5
|
+
prerelease:
|
|
6
|
+
segments:
|
|
7
|
+
- 0
|
|
8
|
+
- 1
|
|
9
|
+
- 0
|
|
10
|
+
- 0
|
|
11
|
+
version: 0.1.0.0
|
|
12
|
+
platform: ruby
|
|
13
|
+
authors:
|
|
14
|
+
- Richard Herrera
|
|
15
|
+
autorequire:
|
|
16
|
+
bindir: bin
|
|
17
|
+
cert_chain: []
|
|
18
|
+
|
|
19
|
+
date: 2011-04-11 00:00:00 -07:00
|
|
20
|
+
default_executable:
|
|
21
|
+
dependencies:
|
|
22
|
+
- !ruby/object:Gem::Dependency
|
|
23
|
+
name: sass
|
|
24
|
+
prerelease: false
|
|
25
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
|
26
|
+
none: false
|
|
27
|
+
requirements:
|
|
28
|
+
- - ">="
|
|
29
|
+
- !ruby/object:Gem::Version
|
|
30
|
+
hash: -1851332218
|
|
31
|
+
segments:
|
|
32
|
+
- 3
|
|
33
|
+
- 1
|
|
34
|
+
- 0
|
|
35
|
+
- alpha
|
|
36
|
+
version: 3.1.0.alpha
|
|
37
|
+
type: :runtime
|
|
38
|
+
version_requirements: *id001
|
|
39
|
+
- !ruby/object:Gem::Dependency
|
|
40
|
+
name: compass
|
|
41
|
+
prerelease: false
|
|
42
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
|
43
|
+
none: false
|
|
44
|
+
requirements:
|
|
45
|
+
- - ">="
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
hash: 62196225
|
|
48
|
+
segments:
|
|
49
|
+
- 0
|
|
50
|
+
- 11
|
|
51
|
+
- beta
|
|
52
|
+
- 5
|
|
53
|
+
version: 0.11.beta.5
|
|
54
|
+
type: :runtime
|
|
55
|
+
version_requirements: *id002
|
|
56
|
+
description: "Use box-sizing: border-box; with impunity. Borderbox outputs equivalent CSS for IE6 & 7"
|
|
57
|
+
email: rich@doctyper.com
|
|
58
|
+
executables: []
|
|
59
|
+
|
|
60
|
+
extensions: []
|
|
61
|
+
|
|
62
|
+
extra_rdoc_files: []
|
|
63
|
+
|
|
64
|
+
files:
|
|
65
|
+
- README.md
|
|
66
|
+
- lib/borderbox.rb
|
|
67
|
+
- stylesheets/_borderbox.scss
|
|
68
|
+
- stylesheets/box-sizing/_border-box.scss
|
|
69
|
+
has_rdoc: true
|
|
70
|
+
homepage: http://doctyper.com/
|
|
71
|
+
licenses: []
|
|
72
|
+
|
|
73
|
+
post_install_message:
|
|
74
|
+
rdoc_options: []
|
|
75
|
+
|
|
76
|
+
require_paths:
|
|
77
|
+
- lib
|
|
78
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
79
|
+
none: false
|
|
80
|
+
requirements:
|
|
81
|
+
- - ">="
|
|
82
|
+
- !ruby/object:Gem::Version
|
|
83
|
+
hash: 3
|
|
84
|
+
segments:
|
|
85
|
+
- 0
|
|
86
|
+
version: "0"
|
|
87
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
88
|
+
none: false
|
|
89
|
+
requirements:
|
|
90
|
+
- - ">="
|
|
91
|
+
- !ruby/object:Gem::Version
|
|
92
|
+
hash: 3
|
|
93
|
+
segments:
|
|
94
|
+
- 0
|
|
95
|
+
version: "0"
|
|
96
|
+
requirements: []
|
|
97
|
+
|
|
98
|
+
rubyforge_project:
|
|
99
|
+
rubygems_version: 1.6.0
|
|
100
|
+
signing_key:
|
|
101
|
+
specification_version: 3
|
|
102
|
+
summary: Use the CSS3 box-sizing property with legacy support for IE
|
|
103
|
+
test_files: []
|
|
104
|
+
|