React CSS Helpers

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div className="mui--text-left">text-left</div>
        <div className="mui--text-right">text-right</div>
        <div className="mui--text-center">text-center</div>
        <div className="mui--text-justify">text-justify</div>
        <div className="mui--text-nowrap">text-nowrap</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <table width="100%">
        <tbody>
          <tr style={{height: '50px'}}>
            <td className="mui--align-top">align-top</td>
            <td className="mui--align-middle">align-middle</td>
            <td className="mui--align-bottom">align-bottom</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <span className="mui--no-transition"></span>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        {/* Same height as <Appbar> without other styles */}
        <div className="mui--appbar-height" style={{border: "1px solid #aaa"}}></div>
        <br />

        {/* Only sets the minimum height */}
        <div className="mui--appbar-height" style={{border: "1px solid #aaa"}}></div>
        <br />

        {/* Vertically center text in appbar */}
        <div className="mui--appbar-height mui--appbar-line-height" style={{border: "1px solid #aaa"}}>
          Vertically centered
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <span className="mui-caret"></span>
        <span className="mui-caret mui-caret--up"></span>
        <span className="mui-caret mui-caret--right"></span>
        <span className="mui-caret mui-caret--left"></span>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div className="mui--z5">z5</div>
        <br />
        <div className="mui--z4">z4</div>
        <br />
        <div className="mui--z3">z3</div>
        <br />
        <div className="mui--z2">z2</div>
        <br />
        <div className="mui--z1">z1</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div>
          <span className="mui--pull-left">pull-left</span>
          <span className="mui--pull-right">pull-right</span>
          <div className="mui--clearfix"></div>
        </div>
        <div>
          <span className="mui--pull-right">pull-right</span>
          <span className="mui--pull-left">pull-left</span>
          <div className="mui--clearfix"></div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <ul className="mui-list--unstyled">
          <li>list-unstyled 1</li>
          <li>list-unstyled 2</li>
        </ul>
        <ul className="mui-list--inline">
          <li>list-inline 1</li>
          <li>list-inline 2</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <table className="mui-table">
        <thead>
          <tr>
            <th></th>
            <th>xs</th>
            <th>sm (≥ 544px)</th>
            <th>md (≥ 768px)</th>
            <th>lg (≥ 992px)</th>
            <th>xl (≥ 1200px)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>visible-*</code></td>
            <td>
              <div className="mui--visible-xs-block">&#10003;</div>
              <div>
                <div className="mui--visible-xs-inline">&#10003;</div>
                <div className="mui--visible-xs-inline-block">&#10003;</div>
              </div>
            </td>
            <td>
              <div className="mui--visible-sm-block">&#10003;</div>
              <div>
                <div className="mui--visible-sm-inline">&#10003;</div>
                <div className="mui--visible-sm-inline-block">&#10003;</div>
              </div>
            </td>
            <td>
              <div className="mui--visible-md-block">&#10003;</div>
              <div>
                <div className="mui--visible-md-inline">&#10003;</div>
                <div className="mui--visible-md-inline-block">&#10003;</div>
              </div>
            </td>
            <td>
              <div className="mui--visible-lg-block">&#10003;</div>
              <div>
                <div className="mui--visible-lg-inline">&#10003;</div>
                <div className="mui--visible-lg-inline-block">&#10003;</div>
              </div>
            </td>
            <td>
              <div className="mui--visible-xl-block">&#10003;</div>
              <div>
                <div className="mui--visible-xl-inline">&#10003;</div>
                <div className="mui--visible-xl-inline-block">&#10003;</div>
              </div>
            </td>
          </tr>
          <tr>
            <td><code>hidden-*</code></td>
            <td><div className="mui--hidden-xs">&#10003;</div></td>
            <td><div className="mui--hidden-sm">&#10003;</div></td>
            <td><div className="mui--hidden-md">&#10003;</div></td>
            <td><div className="mui--hidden-lg">&#10003;</div></td>
            <td><div className="mui--hidden-xl">&#10003;</div></td>
          </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div className="mui--text-dark">dark</div>
        <div className="mui--text-dark-secondary">dark-secondary</div>
        <div className="mui--text-dark-hint">dark-hint</div>
        <br />
        <div style={{backgroundColor: '#444'}}>
          <div className="mui--text-light">light</div>
          <div className="mui--text-light-secondary">light-secondary</div>
          <div className="mui--text-light-hint">light-hint</div>
        </div>
        <br />
        <div className="mui--text-accent">accent</div>
        <div className="mui--text-accent-secondary">accent-secondary</div>
        <div className="mui--text-accent-hint">accent-hint</div>
        <br />
        <div className="mui--text-black">black</div>
        <div className="mui--text-white" style={{backgroundColor: '#444'}}>white</div>
        <div className="mui--text-danger">danger</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    let style = {height: '10px'};

    return (
      <div>
        <div className="mui--bg-primary" style={style}></div>
        <div className="mui--bg-primary-dark" style={style}></div>
        <div className="mui--bg-primary-light" style={style}></div>
        <br />
        <div className="mui--bg-accent" style={style}></div>
        <div className="mui--bg-accent-dark" style={style}></div>
        <div className="mui--bg-accent-light" style={style}></div>
        <br />
        <div className="mui--bg-danger" style={style}></div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div className="mui--no-user-select">
        This text is not selectable
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));