Skip to content

Commit 79325b9

Browse files
geekjuicegeekjuice
committed
Merge pull request #82 from HubSpot/compass-free
Remove Compass/Ruby dependencies
2 parents 27e0ed2 + f1dd41c commit 79325b9

20 files changed

+110
-144
lines changed

‎bower.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"name": "tether",
3-
"version": "0.7.1",
3+
"version": "0.7.2",
44
"main": "tether.js",
55
"homepage": "https://github.hubspot.com/tether",
66
"authors": [
77
"Zack Bloom <[email protected]>",
88
"Adam Schwartz <[email protected]>"
99
],
10-
"description": "Tether elements together",
10+
"description": "A client-side library to make absolutely positioned elements attach to elements in the page efficiently.",
1111
"keywords": [
1212
"javascript"
1313
],

‎css/tether-theme-arrows-dark.css‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
2-
-webkit-box-sizing: border-box;
3-
-moz-box-sizing: border-box;
42
box-sizing: border-box; }
53

64
.tether-element {
@@ -13,15 +11,11 @@
1311
max-width: 100%;
1412
max-height: 100%; }
1513
.tether-element.tether-theme-arrows-dark .tether-content {
16-
-webkit-border-radius: 5px;
17-
-moz-border-radius: 5px;
18-
-ms-border-radius: 5px;
19-
-o-border-radius: 5px;
2014
border-radius: 5px;
2115
position: relative;
2216
font-family: inherit;
23-
background: black;
24-
color: white;
17+
background: #000;
18+
color: #fff;
2519
padding: 1em;
2620
font-size: 1.1em;
2721
line-height: 1.5em; }
@@ -40,73 +34,73 @@
4034
top: 100%;
4135
left: 50%;
4236
margin-left: -16px;
43-
border-top-color: black; }
37+
border-top-color: #000; }
4438
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content {
4539
margin-top: 16px; }
4640
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content:before {
4741
bottom: 100%;
4842
left: 50%;
4943
margin-left: -16px;
50-
border-bottom-color: black; }
44+
border-bottom-color: #000; }
5145
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content {
5246
margin-right: 16px; }
5347
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
5448
left: 100%;
5549
top: 50%;
5650
margin-top: -16px;
57-
border-left-color: black; }
51+
border-left-color: #000; }
5852
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content {
5953
margin-left: 16px; }
6054
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
6155
right: 100%;
6256
top: 50%;
6357
margin-top: -16px;
64-
border-right-color: black; }
58+
border-right-color: #000; }
6559
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
6660
margin-top: 16px; }
6761
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
6862
bottom: 100%;
6963
left: 16px;
70-
border-bottom-color: black; }
64+
border-bottom-color: #000; }
7165
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
7266
margin-top: 16px; }
7367
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
7468
bottom: 100%;
7569
right: 16px;
76-
border-bottom-color: black; }
70+
border-bottom-color: #000; }
7771
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
7872
margin-bottom: 16px; }
7973
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
8074
top: 100%;
8175
left: 16px;
82-
border-top-color: black; }
76+
border-top-color: #000; }
8377
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
8478
margin-bottom: 16px; }
8579
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
8680
top: 100%;
8781
right: 16px;
88-
border-top-color: black; }
82+
border-top-color: #000; }
8983
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
9084
margin-right: 16px; }
9185
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
9286
top: 16px;
9387
left: 100%;
94-
border-left-color: black; }
88+
border-left-color: #000; }
9589
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
9690
margin-left: 16px; }
9791
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
9892
top: 16px;
9993
right: 100%;
100-
border-right-color: black; }
94+
border-right-color: #000; }
10195
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
10296
margin-right: 16px; }
10397
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
10498
bottom: 16px;
10599
left: 100%;
106-
border-left-color: black; }
100+
border-left-color: #000; }
107101
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
108102
margin-left: 16px; }
109103
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
110104
bottom: 16px;
111105
right: 100%;
112-
border-right-color: black; }
106+
border-right-color: #000; }

‎css/tether-theme-arrows.css‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
2-
-webkit-box-sizing: border-box;
3-
-moz-box-sizing: border-box;
42
box-sizing: border-box; }
53

64
.tether-element {
@@ -13,26 +11,18 @@
1311
max-width: 100%;
1412
max-height: 100%; }
1513
.tether-element.tether-theme-arrows .tether-content {
16-
-webkit-border-radius: 5px;
17-
-moz-border-radius: 5px;
18-
-ms-border-radius: 5px;
19-
-o-border-radius: 5px;
2014
border-radius: 5px;
2115
position: relative;
2216
font-family: inherit;
23-
background: white;
17+
background: #fff;
2418
color: inherit;
2519
padding: 1em;
2620
font-size: 1.1em;
2721
line-height: 1.5em;
2822
-webkit-transform: translateZ(0);
29-
-moz-transform: translateZ(0);
30-
-ms-transform: translateZ(0);
31-
-o-transform: translateZ(0);
32-
transform: translateZ(0);
23+
transform: translateZ(0);
3324
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
34-
-moz-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
35-
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
25+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
3626
.tether-element.tether-theme-arrows .tether-content:before {
3727
content: "";
3828
display: block;
@@ -48,73 +38,73 @@
4838
top: 100%;
4939
left: 50%;
5040
margin-left: -16px;
51-
border-top-color: white; }
41+
border-top-color: #fff; }
5242
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content {
5343
margin-top: 16px; }
5444
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content:before {
5545
bottom: 100%;
5646
left: 50%;
5747
margin-left: -16px;
58-
border-bottom-color: white; }
48+
border-bottom-color: #fff; }
5949
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content {
6050
margin-right: 16px; }
6151
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
6252
left: 100%;
6353
top: 50%;
6454
margin-top: -16px;
65-
border-left-color: white; }
55+
border-left-color: #fff; }
6656
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content {
6757
margin-left: 16px; }
6858
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
6959
right: 100%;
7060
top: 50%;
7161
margin-top: -16px;
72-
border-right-color: white; }
62+
border-right-color: #fff; }
7363
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
7464
margin-top: 16px; }
7565
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
7666
bottom: 100%;
7767
left: 16px;
78-
border-bottom-color: white; }
68+
border-bottom-color: #fff; }
7969
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
8070
margin-top: 16px; }
8171
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
8272
bottom: 100%;
8373
right: 16px;
84-
border-bottom-color: white; }
74+
border-bottom-color: #fff; }
8575
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
8676
margin-bottom: 16px; }
8777
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
8878
top: 100%;
8979
left: 16px;
90-
border-top-color: white; }
80+
border-top-color: #fff; }
9181
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
9282
margin-bottom: 16px; }
9383
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
9484
top: 100%;
9585
right: 16px;
96-
border-top-color: white; }
86+
border-top-color: #fff; }
9787
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
9888
margin-right: 16px; }
9989
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
10090
top: 16px;
10191
left: 100%;
102-
border-left-color: white; }
92+
border-left-color: #fff; }
10393
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
10494
margin-left: 16px; }
10595
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
10696
top: 16px;
10797
right: 100%;
108-
border-right-color: white; }
98+
border-right-color: #fff; }
10999
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
110100
margin-right: 16px; }
111101
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
112102
bottom: 16px;
113103
left: 100%;
114-
border-left-color: white; }
104+
border-left-color: #fff; }
115105
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
116106
margin-left: 16px; }
117107
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
118108
bottom: 16px;
119109
right: 100%;
120-
border-right-color: white; }
110+
border-right-color: #fff; }

‎css/tether-theme-basic.css‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
2-
-webkit-box-sizing: border-box;
3-
-moz-box-sizing: border-box;
42
box-sizing: border-box; }
53

64
.tether-element {
@@ -13,16 +11,10 @@
1311
max-width: 100%;
1412
max-height: 100%; }
1513
.tether-element.tether-theme-basic .tether-content {
16-
-webkit-border-radius: 5px;
17-
-moz-border-radius: 5px;
18-
-ms-border-radius: 5px;
19-
-o-border-radius: 5px;
2014
border-radius: 5px;
21-
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
22-
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
2315
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
2416
font-family: inherit;
25-
background: white;
17+
background: #fff;
2618
color: inherit;
2719
padding: 1em;
2820
font-size: 1.1em;

‎css/tether.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
2-
-webkit-box-sizing: border-box;
3-
-moz-box-sizing: border-box;
42
box-sizing: border-box; }
53

64
.tether-element {

‎docs/css/intro.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
@charset "UTF-8";
22
*, *:after, *:before {
3-
-moz-box-sizing: border-box;
4-
-webkit-box-sizing: border-box;
53
box-sizing: border-box; }
64

75
body {
@@ -65,7 +63,8 @@ output {
6563
font-variant: small-caps;
6664
color: #777;
6765
opacity: 1;
68-
transition: opacity 0.2s; }
66+
-webkit-transition: opacity 0.2s;
67+
transition: opacity 0.2s; }
6968
output.scrolled:after {
7069
opacity: 0; }
7170
output[deactivated], output[activated] {
@@ -169,6 +168,7 @@ span.attachment-mark:after, span.tether-marker-dot:after {
169168
[data-example^="optimizer"].lang-javascript {
170169
/* This should just be a `code` selector, but sass doesn't allow that with & */
171170
min-height: 220px; }
171+
172172
[data-example^="optimizer"].tether-element:before {
173173
margin-top: 26px;
174174
display: block;
@@ -178,6 +178,7 @@ span.attachment-mark:after, span.tether-marker-dot:after {
178178
font-size: 15px;
179179
padding: 4px;
180180
color: #666; }
181+
181182
[data-example^="optimizer"] .scroll-box .tether-element:before {
182183
content: "I'm in my scroll parent!"; }
183184

‎docs/sass/intro.sass‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
@import compass/css3
2-
31
$scrollableArea: 2000px
42
$exampleWidth: 400px
53
$exampleHeight: 180px
64

5+
@mixin inline-block
6+
display: inline-block
7+
vertical-align: middle
8+
*vertical-align: auto
9+
*zoom: 1
10+
*display: inline
11+
712
*, *:after, *:before
8-
+box-sizing(border-box)
13+
box-sizing: border-box
914

1015
body
1116
position: relative
@@ -225,4 +230,4 @@ span.attachment-mark
225230
img
226231
display: block
227232
max-width: 100%
228-
width: 100px
233+
width: 100px

‎docs/welcome/css/browser-demo.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ html, body {
55

66
.tether.tether-theme-arrows-dark .tether-content {
77
-webkit-filter: none;
8-
filter: none;
8+
filter: none;
99
background: #000; }
1010
.tether.tether-theme-arrows-dark .tether-content ul {
1111
color: #fff;
@@ -23,8 +23,6 @@ html, body {
2323
bottom: 0;
2424
right: 0; }
2525
.browser-demo *, .browser-demo *:after, .browser-demo *:before {
26-
-moz-box-sizing: border-box;
27-
-webkit-box-sizing: border-box;
2826
box-sizing: border-box; }
2927
.browser-demo .top {
3028
position: absolute;

0 commit comments

Comments
 (0)