ice-frontend-react-mobx/src/styles/global.css

ICE Frontend REACT+MobX

@import 'normalize.css/normalize.css';

:root {
  /* media queries */
  @custom-media --phone (max-width: 480px);
  @custom-media --tablet (max-width: 720px);
  @custom-media --sm-screen (max-width: 960px);
  @custom-media --lg-screen (min-width: 961px);

  body {
    background: var(--color-background);
    color: var(--color-text);
    margin: 0;
  }

  ul {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
  }

  [data-react-toolbox="input"] input {
    border-color: var(--border-light);
  }

  button:not([disabled]),
  button:not([disabled]) [data-react-toolbox="font-icon"] { color: var(--color-text) !important; }

  [data-react-toolbox="card"],
  [data-react-toolbox="dialog"] {
    background: var(--color-background);
    color: var(--color-text);
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 { color: var(--color-text); }
  }

  [data-react-toolbox="card"] [data-react-toolbox="avatar"] {
    height: 36px;
    width: 36px;
    line-height: 36px;
    font-size: 1.4rem;
    span {
      line-height: 36px;
    }
  }

  [data-react-toolbox="autocomplete"] {
    background-color: var(--color-background);
  }

  [data-react-toolbox="dropdown"] {
    color: var(--color-grey);
    li:hover {
      color: var(--color-white);
    }
  }

  [data-react-toolbox="menu-item"] {
    *:not([data-react-toolbox="font-icon"]) {
      font-size: 0.9rem;
    }
  }
}