framework7/components/popover/popover.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Popover === */
@import './popover-vars.less';
.popover-backdrop {
  &-unique {
    z-index: 13500;
  }
}

.popover {
  width: var(--f7-popover-width);
  z-index: 13500;
  margin: 0;
  top: 0;
  opacity: 0;
  left: 0;
  position: absolute;
  display: none;
  background-color: var(--f7-popover-bg-color);
  border-radius: var(--f7-popover-border-radius);
  will-change: transform, opacity;
  --f7-safe-area-top: 0px;
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
  --f7-safe-area-bottom: 0px;
  .list {
    margin: 0;
    ul {
      background: none;
    }
    &:first-child ul {
      .hairline-remove(top);
    }
    &:last-child ul {
      .hairline-remove(bottom);
    }
    &:first-child {
      ul {
        border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
      }
      li:first-child,
      li:first-child a,
      li:first-child > label {
        border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
      }
    }
    &:last-child {
      ul {
        border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
      }
      li:last-child,
      li:last-child a,
      li:last-child > label {
        border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
      }
    }
    &:first-child:last-child {
      li:first-child:last-child,
      li:first-child:last-child a,
      li:first-child:last-child > label,
      ul {
        border-radius: var(--f7-popover-border-radius);
      }
    }
    + .list {
      margin-top: var(--f7-list-margin-vertical);
    }
  }
  &.modal-in {
    opacity: 1;
  }
  &.not-animated {
    transition-duration: 0ms;
  }
}
.popover,
.popover-backdrop {
  transition-timing-function: var(--f7-popover-transition-timing-function);
}
.popover-inner {
  .scrollable();
}
.popover-from-actions {
  .item-link i.icon {
    width: var(--f7-popover-actions-icon-size);
    height: var(--f7-popover-actions-icon-size);
    font-size: var(--f7-popover-actions-icon-size);
  }
}
.ios .popover-from-actions-strong {
  font-weight: 600;
}
.md .popover-from-actions-strong {
  font-weight: 500;
}
.popover-from-actions-label {
  line-height: 1.3;
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--f7-actions-label-padding);
  color: var(--f7-popover-actions-label-text-color);
  font-size: var(--f7-actions-label-font-size);
  justify-content: var(--f7-actions-label-justify-content);
  .hairline(bottom, var(--f7-list-item-border-color));
  &:last-child {
    .hairline-remove(bottom);
  }
  .md & {
    justify-content: center;
  }
}

.popover-on-top {
  transform-origin: center bottom;
}
.popover-on-top.popover-on-right {
  transform-origin: left bottom;
}
.popover-on-top.popover-on-left {
  transform-origin: right bottom;
}
.popover-on-middle {
  transform-origin: center center;
}
.popover-on-middle.popover-on-right {
  transform-origin: left center;
}
.popover-on-middle.popover-on-left {
  transform-origin: right center;
}
.popover-on-bottom {
  transform-origin: center top;
}
.popover-on-bottom.popover-on-right {
  transform-origin: left top;
}
.popover-on-bottom.popover-on-left {
  transform-origin: right top;
}

.if-ios-theme({
  @import './popover-ios.less';
});
.if-md-theme({
  @import './popover-md.less';
});