Merge pull request #549 from mwiencek/rm-rcss

Remove RCSS

package.json

@@ -46,7 +46,6 @@
     "querystring": "0.2.0",
     "raven": "2.0.0",
     "raven-js": "3.17.0",
-    "rcss": "0.1.5",
     "react": "https://github.com/mwiencek/react-packages/raw/master/react.tgz",
     "react-dom": "https://github.com/mwiencek/react-packages/raw/master/react-dom.tgz",
     "redux": "3.6.0",

root/static/scripts/edit/components/Tooltip.js

@@ -9,71 +9,8 @@
 
 const React = require('react');
 const ReactDOM = require('react-dom');
-const RCSS = require('rcss');
 const PropTypes = React.PropTypes;
 
-var colors = {
-  grayLight: '#aaa',
-  basicBorderColor: '#ccc',
-  white: '#fff'
-};
-
-var infoTipContainer = RCSS.registerClass({
-  position: 'absolute',
-  top: '-12px',
-  left: '22px',
-  zIndex: '1000'
-});
-
-var triangleBeforeAfter = {
-  borderBottom: '9px solid transparent',
-  borderTop: '9px solid transparent',
-  content: ' ',
-  height: '0',
-  position: 'absolute',
-  top: '0',
-  width: '0'
-};
-
-var infoTipTriangle = RCSS.registerClass({
-  height: '10px',
-  left: '0',
-  position: 'absolute',
-  top: '8px',
-  width: '0',
-  zIndex: '1',
-
-  ':before': RCSS.cascade(triangleBeforeAfter, {
-    borderRight: '9px solid #bbb',
-    right: '0',
-  }),
-
-  ':after': RCSS.cascade(triangleBeforeAfter, {
-    borderRight: `9px solid ${colors.white}`,
-    right: '-1px'
-  })
-});
-
-var basicBorder = {
-  border: `1px solid ${colors.basicBorderColor}`
-};
-
-var verticalShadow = RCSS.cascade(
-  basicBorder,
-  { boxShadow: `0 1px 3px ${colors.basicBorderColor}` },
-  { borderBottom: `1px solid ${colors.grayLight}` }
-);
-
-var infoTipContentContainer = RCSS.registerClass(
-  RCSS.cascade(verticalShadow, {
-    background: colors.white,
-    padding: '5px 10px',
-    width: '240px'
-  })
-);
-
-RCSS.injectAll();
-
 class Tooltip extends React.Component {
   componentDidMount() {
     $(ReactDOM.findDOMNode(this)).find('a').attr('target', '_blank');
@@ -82,11 +19,11 @@ class Tooltip extends React.Component {
   render() {
     var hoverCallback = this.props.hoverCallback;
     return (
-      <div className={infoTipContainer.className}
+      <div className="tooltip-container"
            onMouseEnter={() => hoverCallback(true)}
            onMouseLeave={() => hoverCallback(false)}>
-        <div className={infoTipTriangle.className} />
-        <div className={infoTipContentContainer.className} dangerouslySetInnerHTML={{__html: this.props.html}} />
+        <div className="tooltip-triangle" />
+        <div className="tooltip-content" dangerouslySetInnerHTML={{__html: this.props.html}} />
       </div>
     );
   }

root/static/styles/common.less

@@ -7,6 +7,7 @@
 @import "layout.less";
 @import "release-editor.less";
 @import "relationship-editor.less";
+@import "tooltip.less";
 @import "widgets.less";
 @import "multiselect.less";
 @import "extra/homepage.less";

root/static/styles/tooltip.less

@@ -0,0 +1,47 @@
+@import "colors.less";
+
+.tooltip-container {
+    position: absolute;
+    top: -12px;
+    left: 22px;
+    z-index: 1000;
+
+    .tooltip-triangle-mixin {
+        border-bottom: 9px solid transparent;
+        border-top: 9px solid transparent;
+        content: " ";
+        height: 0;
+        position: absolute;
+        top: 0;
+        width: 0;
+    }
+
+    .tooltip-triangle {
+        height: 10px;
+        left: 0;
+        position: absolute;
+        top: 8px;
+        width: 0;
+        z-index: 1;
+
+        &:before {
+            .tooltip-triangle-mixin;
+            border-right: 9px solid @medium-border;
+            right: 0;
+        }
+
+        &:after {
+            .tooltip-triangle-mixin;
+            border-right: 9px solid @text-white;
+            right: -1px;
+        }
+    }
+
+    .tooltip-content {
+        background: @text-white;
+        border: 1px solid @medium-border;
+        box-shadow: 0 2px 5px @medium-border;
+        padding: 5px 10px;
+        width: 240px;
+    }
+}