Merge pull request #79 from HubSpot/lb-addTargetdClasses-option

introduce addTargetClasses option

Author: lincolndbryant

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "tether",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "main": "tether.js",
   "homepage": "https://github.hubspot.com/tether",
   "authors": [

coffee/abutment.coffee

@@ -34,7 +34,8 @@
       addClasses.push "#{ @getClass('abutted') }-#{ side }"
 
     defer =>
-      updateClasses @target, addClasses, allClasses
+      unless @options.addTargetClasses is false
+        updateClasses @target, addClasses, allClasses
       updateClasses @element, addClasses, allClasses
 
     true

coffee/constraint.coffee

@@ -254,7 +254,8 @@ getBoundingRect = (tether, to) ->
         @updateAttachClasses eAttachment, tAttachment
 
     defer =>
-      updateClasses @target, addClasses, allClasses
+      unless @options.addTargetClasses is false
+        updateClasses @target, addClasses, allClasses
       updateClasses @element, addClasses, allClasses
 
     {top, left}

coffee/tether.coffee

@@ -173,7 +173,8 @@ class _Tether
         @[key] = document.querySelector @[key]
 
     addClass @element, @getClass 'element'
-    addClass @target, @getClass 'target'
+    unless @options.addTargetClasses is false
+      addClass @target, @getClass 'target'
 
     if not @options.attachment
       throw new Error "Tether Error: You must provide an attachment"
@@ -285,7 +286,8 @@ class _Tether
     @_cache[k]
 
   enable: (position=true) ->
-    addClass @target, @getClass 'enabled'
+    unless @options.addTargetClasses is false
+      addClass @target, @getClass 'enabled'
     addClass @element, @getClass 'enabled'
     @enabled = true
 
@@ -334,7 +336,8 @@ class _Tether
       return unless @_addAttachClasses?
 
       updateClasses @element, @_addAttachClasses, all
-      updateClasses @target, @_addAttachClasses, all
+      unless @options.addTargetClasses is false
+        updateClasses @target, @_addAttachClasses, all
 
       @_addAttachClasses = undefined
 

docs/css/intro.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 *, *:after, *:before {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box; }
 
 body {
@@ -10,21 +10,21 @@ body {
 .yellow-box {
   width: 100px;
   height: 100px;
-  background-color: #ffee88;
+  background-color: #fe8;
   pointer-events: none; }
 
 .green-box {
   margin-top: 65px;
   margin-left: 100px;
   width: 200px;
   height: 50px;
-  background-color: #44ee99; }
+  background-color: #4e9; }
   .no-green .green-box {
     display: none; }
 
 .scroll-box {
   height: 150px;
-  border: 10px solid #eeeeee;
+  border: 10px solid #eee;
   background: #fbfbfb;
   overflow: auto;
   position: relative; }
@@ -40,7 +40,7 @@ pre.pre-with-output {
   float: left; }
   pre.pre-with-output code mark {
     background: #b8daff;
-    color: black; }
+    color: #000; }
 
 p, h2, h3 {
   clear: both; }
@@ -63,7 +63,7 @@ output {
     text-align: center;
     font-size: 16px;
     font-variant: small-caps;
-    color: #777777;
+    color: #777;
     opacity: 1;
     transition: opacity 0.2s; }
   output.scrolled:after {
@@ -80,8 +80,8 @@ output {
       bottom: 0;
       opacity: 1;
       content: "Click To Show";
-      background-color: #aaaaaa;
-      border-left: 10px solid #eeeeee;
+      background-color: #AAA;
+      border-left: 10px solid #EEE;
       color: white;
       font-size: 24px;
       font-variant: normal;
@@ -177,7 +177,7 @@ span.attachment-mark:after, span.tether-marker-dot:after {
   line-height: 1.2;
   font-size: 15px;
   padding: 4px;
-  color: #666666; }
+  color: #666; }
 [data-example^="optimizer"] .scroll-box .tether-element:before {
   content: "I'm in my scroll parent!"; }
 
@@ -193,21 +193,19 @@ span.attachment-mark:after, span.tether-marker-dot:after {
 .projects-paragraph {
   text-align: center; }
   .projects-paragraph a {
-    display: -moz-inline-stack;
     display: inline-block;
     vertical-align: middle;
     *vertical-align: auto;
-    zoom: 1;
+    *zoom: 1;
     *display: inline;
     text-align: center;
     margin-right: 30px;
     color: inherit; }
     .projects-paragraph a span {
-      display: -moz-inline-stack;
       display: inline-block;
       vertical-align: middle;
       *vertical-align: auto;
-      zoom: 1;
+      *zoom: 1;
       *display: inline;
       margin-bottom: 20px;
       font-size: 20px;

docs/welcome/css/browser-demo.css

@@ -5,17 +5,16 @@ html, body {
 
 .tether.tether-theme-arrows-dark .tether-content {
   -webkit-filter: none;
-  -moz-filter: none;
   filter: none;
-  background: black; }
+  background: #000; }
   .tether.tether-theme-arrows-dark .tether-content ul {
-    color: white;
+    color: #fff;
     list-style: none;
     padding: 0;
     margin: 0; }
 
 .tether.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
-  border-right-color: black; }
+  border-right-color: #000; }
 
 .browser-demo {
   position: absolute;
@@ -24,8 +23,8 @@ html, body {
   bottom: 0;
   right: 0; }
   .browser-demo *, .browser-demo *:after, .browser-demo *:before {
-    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     box-sizing: border-box; }
   .browser-demo .top {
     position: absolute;
@@ -51,7 +50,7 @@ html, body {
         cursor: pointer; }
         .browser-demo .bottom .left .item:hover, .browser-demo .bottom .left .item.tether-open {
           background: rgba(0, 0, 0, 0.1);
-          border-bottom: 1px solid rgba(0, 0, 0, 0); }
+          border-bottom: 1px solid transparent; }
         .browser-demo .bottom .left .item:last-child {
           border-bottom: 0; }
     .browser-demo .bottom .right {
@@ -61,22 +60,20 @@ html, body {
       height: 100%;
       padding: 20px; }
   .browser-demo .title {
-    display: -moz-inline-stack;
     display: inline-block;
     vertical-align: middle;
     *vertical-align: auto;
-    zoom: 1;
+    *zoom: 1;
     *display: inline;
     background: rgba(0, 0, 0, 0.1);
     width: 150px;
     height: 15px;
     margin-bottom: 20px; }
   .browser-demo .word {
-    display: -moz-inline-stack;
     display: inline-block;
     vertical-align: middle;
     *vertical-align: auto;
-    zoom: 1;
+    *zoom: 1;
     *display: inline;
     background: rgba(0, 0, 0, 0.1);
     width: 50px;