amazeui/less/ui.popover.less

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

// Name:            Popover
//
// Description:     Define style for Popover Plugin
//
// Component:       `.am-popover`
//
// Sub-objects:     `.am-popover-inner`
//                  `.am-popover-caret`
//                  `.am-tab-panel`
//
// Modifiers:       `.am-popover-top`
//                  `.am-popover-bottom`
//                  `.am-popover-left`
//                  `.am-popover-right`
//
// States:          `.am-active`
//
// Uses:            Nav
//                  Animation
//
// =============================================================================

@popover-bg: @gray-dark;
@popover-border: @popover-bg;
@popover-color: @white;
@popover-border-radius: @global-radius;
@popover-duration: 300ms;
@popover-font-size: @global-font-size;
@popover-sm-font-size: @font-size-sm;
@popover-lg-font-size: @font-size-lg;


/* ==========================================================================
   Component: Popover Plugin
 ============================================================================ */

.@{ns}popover {
  position: absolute;
  top: 0;
  left: 0;
  //width: 240px;
  margin: 0;
  border-radius: @popover-border-radius;
  background: @popover-bg;
  color: @popover-color;
  border: 1px solid @popover-border;
  display: none;
  font-size: @popover-font-size;
  z-index: @z-index-popover;
  opacity: 0;
  transition: opacity @popover-duration;
  .hook-popover;

  &.@{ns}active {
    display: block !important;
    opacity: 1;
  }
}

.@{ns}popover-inner {
  position: relative;
  background: @popover-bg;
  padding: 8px;
  z-index: 110;
  // .scrollable();
  .hook-popover-inner;
}

.@{ns}popover-caret {
  position: absolute;
  top: 0;
  z-index: 100;
  .caret-up(8px, @popover-bg);
  overflow: hidden;
  .hook-popover-caret;

  .@{ns}popover-top & {
    top: auto;
    bottom: -8px;
    transform: rotate(180deg);
  }

  .@{ns}popover-bottom & {
    top: -8px;
  }

  .@{ns}popover-top &,
  .@{ns}popover-bottom & {
    left: 50%;
    margin-left: -8px;
  }

  .@{ns}popover-left & {
    top: auto;
    left: auto;
    right: -12px;
    transform: rotate(90deg);
  }

  .@{ns}popover-right & {
    right: auto;
    left: -12px;
    transform: rotate(-90deg);
  }

  .@{ns}popover-left &,
  .@{ns}popover-right & {
    top: 50%;
    margin-top: -4px;
  }
}


// Modifiers
// =============================================================================

.@{ns}popover-sm {
  font-size: @popover-sm-font-size;

  .@{ns}popover-inner {
    padding: 5px;
  }
}

.@{ns}popover-lg {
  font-size: @popover-lg-font-size;
}

.popover-color-variant(@bg-color: @global-primary) {
  border-color: @bg-color;
  .@{ns}popover-inner {
    background: @bg-color;
  }

  .@{ns}popover-caret {
    border-bottom-color: @bg-color;
  }
};

.@{ns}popover-primary {
  .popover-color-variant(@global-primary);
}

.@{ns}popover-secondary {
  .popover-color-variant(@global-secondary);
}

.@{ns}popover-success {
  .popover-color-variant(@global-success);
}

.@{ns}popover-warning {
  .popover-color-variant(@global-warning);
}

.@{ns}popover-danger {
  .popover-color-variant(@global-danger);
}


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

.hook-popover() {}
.hook-popover-inner() {}
.hook-popover-caret() {}