Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unrelated minor suggestions

See original GitHub issue

Those are not really issues but several (unrelated) minor suggestions.

A - Consider adding a .clearfix class for the classical hack. E.g in Bootstrap:

  .clearfix:before, 
  .clearfix:after {
    content: " "; 
    display: table; 
  }

  .clearfix:after {
    clear: both;
  }

B - You have center-align, left-align, right-align and a vertical-align wrapper. It could be an idea to add a top-valign, bottom-valign and middle-valign in the same vein. E.g.: .middle-valign { vertical-align: middle; }

~~C Your .right and .left classes should be defined using “!important”.~~ ~~This allows them to be used, for e.g., to align a .badge to the left.~~

D - Don’t put the “new” text in your .badge.new… 😃
E - As a possible (full CSS) workaround to the “wave” effect:

  .radial-effect {
    background-image: -webkit-radial-gradient(circle farthest-side, rgba(255, 255, 255, 0.2) 100%, rgba(255, 255, 255, 0) 100%);
    background-image: radial-gradient(circle farthest-side, rgba(255, 255, 255, 0.2) 100%, rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;
    background-size: 0%;
    background-position: 50%;
    transition: background-size 0.3s ease box-shadox: 0.3s;
  }

  .radial-effect.inverted {
    background-image: -webkit-radial-gradient(circle farthest-side, rgba(0, 0, 0, 0.2) 100%, rgba(0, 0, 0, 0) 100%);
    background-image: radial-gradient(circle farthest-side, rgba(0, 0, 0, 0.2) 100%, rgba(0, 0, 0, 0) 100%);
  }

  .radial-effect:hover {
    background-size: 110%;
  }

F - The .materialize-textarea is not properly aligned with classical input fields. I believe one could add a margin-top: -1rem; in it?
G - We already have .divider for an horizontal divider. Consider adding a .vertical-divider? (I don’t know exactly how to do that in a proper way).
H - I like badges. But sometimes, I want circular badges. At the moment, I use this:

  .circle {
      border-radius: 0.7em;
      display: inline-block;
      line-height: 1.4em;
      margin-right: 4px;
      text-align: center;
      width: 1.4em; 
  }

However, I’m not sure this is “Material Design”-compliant 😃

I forgot: I really like MaterializeCSS. Thank you for your job!!