amazeui/less/ui.component.less

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

// Name:            JS Plugins helpers
//
// Description:     JS Components helper classes
//
// =============================================================================


/* ==========================================================================
   Component: JS Plugins helpers
 ============================================================================ */

// -----------------------------------------------------------------------------
// helpers
// -----------------------------------------------------------------------------

.@{ns}fade {
  opacity: 0;
  transition: opacity .2s linear;
  &.@{ns}in {
    opacity: 1;
  }
}

.@{ns}collapsed {
}

.@{ns}collapse {
  display: none;

  &.@{ns}in {
    display: block;
  }
}

// change code style for sass converter
tr.@{ns}collapse.@{ns}in {
  display: table-row;
}

tbody.@{ns}collapse.@{ns}in {
  display: table-row-group;
}


.@{ns}collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}


// -----------------------------------------------------------------------------
// Sticky plugin
// -----------------------------------------------------------------------------

.@{ns}sticky {
  position: fixed !important;
  z-index: @z-index-sticky;
  transform-origin: 0 0; // Needed for scale animation
}

[data-am-sticky][class*="@{ns}animation-"] {
  animation-duration: .2s;
}


// -----------------------------------------------------------------------------
// Dimmer plugin
// -----------------------------------------------------------------------------

// hide scroll bar when dimmer active
.@{ns}dimmer-active {
 overflow: hidden;
}

.@{ns}dimmer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  z-index: @z-index-dimmer;
  opacity: 0;
  // transition: opacity .15s;

  &.@{ns}active {
    opacity: 1;
  }
}


// -----------------------------------------------------------------------------
// Collapse plugin
// -----------------------------------------------------------------------------

[data-am-collapse] {
  cursor: pointer;
}