Remove flex data attributes from components

components/autocomplete/index.jsx

@@ -172,7 +172,7 @@ export default React.createClass({
   renderSelected () {
     if (this.props.multiple) {
       return (
-        <ul data-flex='horizontal wrap' onClick={this.handleUnselect}>
+        <ul className={style.values} onClick={this.handleUnselect}>
           {[...this.state.values].map(([key, value]) => {
             return (<li className={style.value} key={key} id={key}>{value}</li>);
           })}

components/autocomplete/style.scss

@@ -21,6 +21,11 @@
   transition: color $animation-duration $animation-curve-default;
 }
 
+.values {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .value {
   display: inline-block;
   padding: $autocomplete-value-padding;

components/card/index.jsx

@@ -70,17 +70,16 @@ export default React.createClass({
   },
 
   render () {
-    let className = `${style.root} ${this.props.className}`;
+    let className = style.root;
     if (this.props.type) className += ` ${style[this.props.type]}`;
     if (this.props.onClick) className += ` ${style.touch}`;
     if (this.props.image || this.props.color) className += ` ${style.contrast}`;
     if (this.props.color) className += ` ${style.color}`;
     if (this.state.loading) className += ` ${style.loading}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
       <div
-        data-react-toolbox='card'
-        data-flex='vertical grow'
         data-react-toolbox='card'
         className={className}
         onMouseDown={this.handleMouseDown}

components/link/index.jsx

@@ -31,7 +31,6 @@ export default React.createClass({
       <a
         {...this.props}
         data-react-toolbox='link'
-        data-flex='horizontal center'
         href={this.props.route}
         className={className}
       >

components/link/style.scss

@@ -7,6 +7,11 @@
 
 .root {
   position: relative;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
   transition: opacity $animation-duration $animation-curve-default;
   &:not(.active) {

components/tabs/style.scss

@@ -3,9 +3,13 @@
 
 .root {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .navigation {
+  display: flex;
+  flex-direction: row;
   box-shadow: inset 0 -1px $tab-navigation-border-color;
 }
 
@@ -45,6 +49,8 @@
 }
 
 .tab {
+  display: flex;
+  flex-direction: column;
   padding: $tab-label-v-padding $tab-label-h-padding;
   &:not(.active) {
     display: none;

components/tabs/tab.jsx

@@ -39,7 +39,6 @@ export default React.createClass({
       <section
         data-react-toolbox='tab'
         className={className}
-        data-flex='vertical'
         tabIndex={this.props.tabIndex}
       >
         { this.props.children }

components/tabs/tabs.jsx

@@ -91,8 +91,8 @@ export default React.createClass({
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div data-react-toolbox='tabs' ref='tabs' className={className} data-flex='vertical'>
-        <nav className={style.navigation} ref='navigation' data-flex='horizontal'>
+      <div data-react-toolbox='tabs' ref='tabs' className={className}>
+        <nav className={style.navigation} ref='navigation'>
           { this.renderLabels(labels) }
         </nav>
         <span className={style.pointer} style={this.state.pointer} />