utils.styl

.clearfix {
  clearfix();
}

// UI components
// ----------------------------------------
popover-bg-color = alpha(#000, .7);

// "Popover" component
[data-popover] {
  position: relative;
}

[data-popover]::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: $z-index1;
  font-family: sans-serif, Arial;
  font-size: $font-size-base;
  font-weight: normal;
  font-style: normal;
  white-space: nowrap;
  color: #fff;
  background-color: popover-bg-color;
  opacity: 0;
  text-shadow: none;
  transition-property: opacity, transform;
  transform: translate(-50%, -70%);
  pointer-events: none;
  transition-ease();
}

[data-popover]::before {
  content: attr(data-popover);
  border-radius: 4px;
  padding: .2rem .6rem;
}

@media (min-width: $md-width) {
  [data-popover-pos='up']:hover::before {
    opacity: 1;
    transform: translate(-50%, -120%);
  }
}

// "Alert" component
.stun-message {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: $z-index2;
  transform: translateX(-50%);
}

.stun-alert {
  position: relative;
  border-radius: 3px;
  padding: 8px 12px;
  font-size: $font-size-base + 2px;
  line-height: 1rem;
  color: $black-light;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);

  &-success {
    color: $alert-success-color;

    & ~ i {
      color: $alert-success-color;
    }
  }

  &-info {
    color: $alert-info-color;

    & ~ i {
      color: $alert-info-color;
    }
  }

  &-warning {
    color: $alert-warning-color;

    & ~ i {
      color: $alert-warning-color;
    }
  }

  &-error {
    color: $alert-error-color;

    & ~ i {
      color: $alert-error-color;
    }
  }

  &-description {
    margin-left: .5rem;
  }
}

// Animation class
// ----------------------------------------
.anime-close {
  &::before,
  &::after {
    transition-property: transform;
    transform: rotate(-45deg);
    transition-ease();
  }

  &::after {
    transform: rotate(-135deg);
  }

  &:hover {
    &::before,
    &::after {
      transform: rotate(0);
    }
  }
}