shipshapecode/ember-3d-folding-panel

View on GitHub
addon/components/close-button/styles.scss

Summary

Maintainability
Test Coverage
& {
  /* 'X' close icon */
  display: inline-block;
  height: 44px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 10px;
  text-indent: 100%;
  top: 10px;
  transition: opacity .2s 0s;
  white-space: nowrap;
  width: 44px;
  z-index: 1;

  &:hover {
    cursor: pointer;
  }

  &:after,
  &:before {
    /* lines of 'X' icon */
    backface-visibility: hidden;
    content: '';
    height: 3px;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: opacity .2s;
    width: 32px;
  }

  &:after {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }

  &:before {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  }
}