framework7/components/popover/popover-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  .popover {
    transform: none;
    transition-property: opacity;
  }
  .popover-angle {
    width: 26px;
    height: 26px;
    position: absolute;
    left: -26px;
    top: 0;
    z-index: 100;
    overflow: hidden;
    &:after {
      content: '';
      background: var(--f7-popover-bg-color);
      width: 26px;
      height: 26px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 3px;
      transform: rotate(45deg);
    }
    &.on-left {
      left: -26px;
      &:after {
        left: 19px;
        top: 0;
      }
    }
    &.on-right {
      left: 100%;
      &:after {
        left: -19px;
        top: 0;
      }
    }
    &.on-top {
      left: 0;
      top: -26px;
      &:after {
        left: 0;
        top: 19px;
      }
    }
    &.on-bottom {
      left: 0;
      top: 100%;
      &:after {
        left: 0;
        top: -19px;
      }
    }
  }
}