amazeui/less/close.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                      Close
//
// Description:               Define style close button
//
// Component:                `.am-close`
//
// Modifiers:                `.am-close-alt`
//                           `.am-close-spin`
//
// Uses:
//
// Used by:
//
// =============================================================================


/* ==========================================================================
   Component: Close
 ============================================================================ */

.@{ns}close {
  display: inline-block;
  text-align: center;
  width: 24px;
  // height: 24px;
  font-size: 20px;
  font-weight: @close-font-weight;
  line-height: 24px;
  color: @close-color;
  text-shadow: @close-text-shadow;
  opacity: .2;
  transition: all .3s;

  &:hover,
  &:focus {
    color: @close-color;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
    outline: none;
  }

  &[class*="@{ns}icon-"] {
    font-size: 16px;
  }

  .hook-close;
}

// Adjust code style for SASS converter

// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.@{ns}close {
  padding: 0;
  cursor: pointer;
  background: transparent; /* Needed for Sarari */
  border: 0;
  -webkit-appearance: none;
}

a.@{ns}close:hover {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}


/* Modifiers
 ============================================================================ */

.@{ns}close-alt {
  border-radius: 50%;
  background: @close-alt-background;
  opacity: 0.7;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); // 0 0 6px rgba(0, 0, 0, 0.3);
  .hook-close-alt;

  /* Hover */
  &:hover,
  &:focus {
    opacity: 1;
  }
}

.@{ns}close-spin {
  &:hover {
    transform: rotate(360deg);
  }
}


// Hooks
// =============================================================================

.hook-close() {}
.hook-close-alt() {}