MyCrypto/common/sass/mixins.scss

@import "./variables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";

@mixin bg-gradient {
  background: $ether-navy;
  background: linear-gradient(149deg, #132a45, #143a56, #21a4ce, #19b4ad);
}

@mixin reset-button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin mono {
  font-family: $font-family-monospace;
  font-weight: normal;
  letter-spacing: .02em;
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Alpha agreement, noscript, bad browser, etc.
@mixin cover-message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: $brand-info;
  z-index: $zindex-top;

  &-content {
    max-width: 580px;
    padding: 20px;
    margin: 0 auto;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(#000, 0.12);
    overflow: auto;

    h2 {
      font-size: 40px;
      margin-bottom: 20px;
    }

    p {
      font-size: 20px;
      margin-bottom: 15px;

      a {
        color: #fff;
        text-decoration: underline;
      }
    }
  }
}

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: $size / 2;

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  }
}

@mixin show-tooltip-on-hover {
  &:hover .Tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) translateY(-8px);
    transition-delay: 400ms, 400ms, 300ms;
  }
}