@import (reference) "~ui/styles/variables";

@truncate1: fade(@truncate-color, 0%);
@truncate2: fade(@truncate-color, 1%);
@truncate3: fade(@truncate-color, 99%);
@truncate4: fade(@truncate-color, 100%);

.truncate-by-height {
  position: relative;
  overflow: hidden;

  &:before {
    content: " ";
    width: 100%;
    height: 15px; // copied into index.html!
    position: absolute;
    left: 0;

    // FF3.6+
    background: -moz-linear-gradient(top,  @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);

    // Chrome,Safari4+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @truncate1), color-stop(1%, @truncate2), color-stop(99%, @truncate3), color-stop(100%, @truncate4));

    // Chrome10+,Safari5.1+
    background: -webkit-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);

    // Opera 11.10+
    background: -o-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);

    // IE10+
    background: -ms-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);

    // W3C
    background: linear-gradient(to bottom, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
  }
}