yun-ui/packages/style/stylesheets/popup.less

Mobile UI Components Library for Vue.js by yunzhijia.

@import "var";

//垂直居中
.middleCenter {
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform-origin: 50% 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform-origin: 50% 50%;
  -ms-transform: translate(-50%, -50%);
}

.@{uiName} {
  &-popup {
    .resetUl();
    position: fixed;
    width: @popupWidth;
    max-height: 80%;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: @popupRadius;
    background-color: #ffffff;
    z-index: @zIndexNormal+2;
    .middleCenter;
    .@{uiName}-tab-item:active{
        background-color: #F3F6F7;
    }
  }
  &-popup-title {
    text-align: center;
    font-size: @popupTitleFontSize;
    line-height: @popupTitleLineHeight;
  }
  &-popup-content,
  &-popup-input,
  &-popup-button,
  &-popup-list {
    padding: 0 @popupItemPadding @popupItemPadding;
  }
  &-popup-button{
    padding-bottom: 0;
  }
  &-popup-button &-button {
    margin-bottom: @popupItemPadding;
  }
  &-popup-input {
    input, textarea {
      display: block;
      width: 100%;
      border: none;
      outline: none;
      font-size: @popupItemFontSize;
    }
    input {
      height: @popupItemInputHeight;
      padding: @popupItemPadding/2 0;
    }
    textarea {
      height: @popupItemTextareaHeight;
      resize: none;
    }
  }
  &-popup-cover {
    height: @popupCoverHeight;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-popup-list {
    color: @secondaryFontColor;
    ul {
      li {
        font-size:@popupListItemFontSize;
        position: relative;
        padding-left: @popupItemPadding;
        padding-bottom: @popupListPadding;
        &:before {
          content: '';
          position: absolute;
          top: 5px;
          display: block;
          width: 5px;
          height: 5px;
          margin-left: -12px;
          border-radius: 100%;
          background: #EAEFF3;
        }
      }
    }
  }
}