vdesign-ui 0.2.20 → 0.3.0

package/dist/components/popover/style.less

@@ -1,346 +1,346 @@
-@prefix: ~"vd-popover";
-
-// == 默认的 vue-popover 样式
-.vd-popper {
-  width: auto;
-  background-color: #fafafa;
-  color: #212121;
-  text-align: center;
-  padding: 2px;
-  display: inline-block;
-  border-radius: 3px;
-  position: absolute;
-  font-size: 14px;
-  font-weight: normal;
-  border: 1px #ebebeb solid;
-  z-index: 20000;
-  box-shadow: rgb(58, 58, 58) 0 0 6px 0;
-}
-
-.vd-popper .vd-popper__arrow {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-  margin: 5px;
-}
-
-.vd-popper[x-placement^="top"] {
-  margin-bottom: 5px;
-}
-
-.vd-popper[x-placement^="top"] .vd-popper__arrow {
-  border-width: 5px 5px 0 5px;
-  border-color: #fafafa transparent transparent transparent;
-  bottom: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.vd-popper[x-placement^="bottom"] {
-  margin-top: 5px;
-}
-
-.vd-popper[x-placement^="bottom"] .vd-popper__arrow {
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent #fafafa transparent;
-  top: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.vd-popper[x-placement^="right"] {
-  margin-left: 5px;
-}
-
-.vd-popper[x-placement^="right"] .vd-popper__arrow {
-  border-width: 5px 5px 5px 0;
-  border-color: transparent #fafafa transparent transparent;
-  left: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.vd-popper[x-placement^="left"] {
-  margin-right: 5px;
-}
-
-.vd-popper[x-placement^="left"] .vd-popper__arrow {
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent #fafafa;
-  right: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-
-// ===
-
-.@{prefix} {
-
-  // 覆盖部分默认的样式
-  .vd-popper {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    white-space: nowrap;
-    padding-inline-start: var(--spacing-popover-primary-padding_left);
-    padding-inline-end: var(--spacing-popover-primary-padding_right);
-    height: var(--height-popover-primary);
-    font-size: var(--en-single-f-c-r-fontSize);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-    color: var(--color-popover-primary-text);
-    background-color: var(--color-popover-primary-bg);
-    border-radius: var(--radius-popover-primary);
-    border: none;
-    box-shadow: none;
-    animation: vd-ani-popper 0.2s linear forwards;
-}
-
-  &-icon {
-
-    &.vd-iconfont {
-      color: inherit;
-      outline: none;
-      border: none;
-      background: none;
-      font-size: var(--icon-popover-primary);
-      margin-inline-end: var(--spacing-popover-primary-margin_y);
-    }
-  }
-
-  &-close {
-
-    &.vd-iconfont {
-      color: var(--color-popover-primary-text);
-      outline: none;
-      border: none;
-      background: none;
-      font-size: var(--icon-popover-primary);
-      margin-inline-start: var(--spacing-popover-primary-margin_y);
-    }
-
-    &--hot {
-      position: absolute;
-      inset-inline-end: 0;
-      height: var(--height-popover-primary);
-      width: calc(var(--height-popover-primary) * 1.2);
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-  }
-
-  .vd-popper__arrow {
-    display: block;
-    background-color: var(--color-popover-primary-bg);
-    width: 12px;
-    height: 12px;
-    // border-radius: 4px;
-    transform: rotate(45deg);
-    z-index: -1;
-  }
-
-  // 设置一个 popper 的外边距
-  .vd-popper[x-placement^="top"] {
-    margin-bottom: calc(var(--icon-popover-primary) * .5) !important;
-  }
-
-  .vd-popper[x-placement^="bottom"] {
-    margin-top: calc(var(--icon-popover-primary) * .5) !important;
-  }
-
-  .vd-popper[x-placement^="left"] {
-    margin-right: calc(var(--icon-popover-primary) * .5) !important;
-  }
-
-  .vd-popper[x-placement^="right"] {
-    margin-left: calc(var(--icon-popover-primary) * .5) !important;
-  }
-
-  // 覆盖原有的默认三角形背景色样式
-  .vd-popper[x-placement^="top"] .vd-popper__arrow {
-    bottom: -4px;
-    border-color: var(--color-popover-primary-bg) transparent transparent transparent;
-  }
-
-  .vd-popper[x-placement^="bottom"] .vd-popper__arrow {
-    top: -4px;
-    border-color: transparent transparent var(--color-popover-primary-bg) transparent;
-    // transform: rotate(180deg);
-  }
-
-  .vd-popper[x-placement^="right"] .vd-popper__arrow {
-    border-color: transparent var(--color-popover-primary-bg) transparent transparent;
-    // transform: rotate(90deg);
-    left: -4px;
-  }
-
-  .vd-popper[x-placement^="left"] .vd-popper__arrow {
-    border-color: transparent transparent transparent var(--color-popover-primary-bg);
-    // transform: rotate(-90deg);
-    right: -4px;
-  }
-
-  // 加上过渡效果
-  .vd-popover-fade-enter,
-  .vd-popover-fade-leave-to {
-    opacity: 0;
-  }
-
-  .vd-popover-fade-enter-active,
-  .vd-popover-fade-leave-active {
-    transition: opacity 0.3s;
-  }
-
-  // secondary 模式样式
-  .vd-popover-secondary {
-    font-size: var(--en-single-f-b-r-fontSize);
-    font-weight: var(--en-single-f-b-r-fontWeight);
-    padding-inline-start: var(--spacing-popover-secondary-padding_left);
-    padding-inline-end: var(--spacing-popover-secondary-padding_right);
-    height: var(--height-popover-secondary);
-    color: var(--color-popover-secondary-text);
-    background-color: var(--color-popover-secondary-bg);
-    border-radius: var(--radius-popover-secondary);    
-
-    &[x-placement^="top"] .vd-popper__arrow {
-      border-color: var(--color-popover-secondary-bg) transparent transparent transparent;
-    }
-
-    &[x-placement^="bottom"] .vd-popper__arrow {
-      border-color: transparent transparent var(--color-popover-secondary-bg) transparent;
-    }
-
-    &[x-placement^="right"] .vd-popper__arrow {
-      border-color: transparent var(--color-popover-secondary-bg) transparent transparent;
-    }
-
-    &[x-placement^="left"] .vd-popper__arrow {
-      border-color: transparent transparent transparent var(--color-popover-secondary-bg);
-    }
-
-    .vd-popover-icon {
-
-      &.vd-iconfont {
-        margin-block-end: -2px;
-        color: inherit;
-        outline: none;
-        border: none;
-        background: none;
-        font-size: var(--icon-popover-secondary);
-        margin-inline-end: var(--spacing-popover-secondary-margin_y);
-        margin-block-start: -1px;
-      }
-    }
-
-    .vd-popover-close {
-
-      &.vd-iconfont {
-        margin-block-end: -2px;
-        color: var(--color-popover-secondary-text);
-        outline: none;
-        border: none;
-        background: none;
-        font-size: var(--icon-popover-secondary);
-        margin-inline-start: var(--spacing-popover-secondary-margin_y);
-        margin-block-start: -1px;
-      }
-
-      &--hot {
-        position: absolute;
-        inset-inline-end: 0;
-        height: var(--height-popover-secondary);
-        width: calc(var(--height-popover-secondary) * 1.2);
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
-    }
-
-    .vd-popper__arrow {
-      background-color: var(--color-popover-secondary-bg);
-    }
-  }
-
-  // custom 模式样式
-  .vd-popover-custom {
-    font-size: var(--en-single-f-c-r-fontSize);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-    padding-inline-start: var(--spacing-popover-custom-padding_left);
-    padding-inline-end: var(--spacing-popover-custom-padding_right);
-    height: var(--height-popover-custom);
-    color: var(--color-popover-custom-text);
-    background-color: var(--color-popover-custom-bg);
-    border-radius: var(--radius-popover-custom);    
-
-    &[x-placement^="top"] .vd-popper__arrow {
-      border-color: var(--color-popover-custom-bg) transparent transparent transparent;
-    }
-
-    &[x-placement^="bottom"] .vd-popper__arrow {
-      border-color: transparent transparent var(--color-popover-custom-bg) transparent;
-    }
-
-    &[x-placement^="right"] .vd-popper__arrow {
-      border-color: transparent var(--color-popover-custom-bg) transparent transparent;
-    }
-
-    &[x-placement^="left"] .vd-popper__arrow {
-      border-color: transparent transparent transparent var(--color-popover-custom-bg);
-    }
-
-    .vd-popover-icon {
-
-      &.vd-iconfont {
-        color: inherit;
-        outline: none;
-        border: none;
-        background: none;
-        font-size: var(--icon-popover-custom);
-        margin-inline-end: var(--spacing-popover-custom-margin_y);
-      }
-    }
-
-    .vd-popover-close {
-
-      &.vd-iconfont {
-        color: var(--color-popover-custom-text);
-        outline: none;
-        border: none;
-        background: none;
-        font-size: var(--icon-popover-custom);
-        margin-inline-start: var(--spacing-popover-custom-margin_y);
-      }
-
-      &--hot {
-        position: absolute;
-        inset-inline-end: 0;
-        height: var(--height-popover-custom);
-        width: calc(var(--height-popover-custom) * 1.2);
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
-    }
-
-    .vd-popper__arrow {
-      background-color: var(--color-popover-custom-bg);
-    }
-  }
-}
-
-@keyframes vd-ani-popper {
-  0% {
-    opacity: 0;
-    transform: scale(.5);
-  }
-
-  80% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+@prefix: ~"vd-popover";
+
+// == 默认的 vue-popover 样式
+.vd-popper {
+  width: auto;
+  background-color: #fafafa;
+  color: #212121;
+  text-align: center;
+  padding: 2px;
+  display: inline-block;
+  border-radius: 3px;
+  position: absolute;
+  font-size: 14px;
+  font-weight: normal;
+  border: 1px #ebebeb solid;
+  z-index: 20000;
+  box-shadow: rgb(58, 58, 58) 0 0 6px 0;
+}
+
+.vd-popper .vd-popper__arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+}
+
+.vd-popper[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.vd-popper[x-placement^="top"] .vd-popper__arrow {
+  border-width: 5px 5px 0 5px;
+  border-color: #fafafa transparent transparent transparent;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.vd-popper[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.vd-popper[x-placement^="bottom"] .vd-popper__arrow {
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #fafafa transparent;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.vd-popper[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.vd-popper[x-placement^="right"] .vd-popper__arrow {
+  border-width: 5px 5px 5px 0;
+  border-color: transparent #fafafa transparent transparent;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.vd-popper[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.vd-popper[x-placement^="left"] .vd-popper__arrow {
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent #fafafa;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// ===
+
+.@{prefix} {
+
+  // 覆盖部分默认的样式
+  .vd-popper {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+    padding-inline-start: var(--spacing-popover-primary-padding_left);
+    padding-inline-end: var(--spacing-popover-primary-padding_right);
+    height: var(--height-popover-primary);
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+    color: var(--color-popover-primary-text);
+    background-color: var(--color-popover-primary-bg);
+    border-radius: var(--radius-popover-primary);
+    border: none;
+    box-shadow: none;
+    animation: vd-ani-popper 0.2s linear forwards;
+}
+
+  &-icon {
+
+    &.vd-iconfont {
+      color: inherit;
+      outline: none;
+      border: none;
+      background: none;
+      font-size: var(--icon-popover-primary);
+      margin-inline-end: var(--spacing-popover-primary-margin_y);
+    }
+  }
+
+  &-close {
+
+    &.vd-iconfont {
+      color: var(--color-popover-primary-text);
+      outline: none;
+      border: none;
+      background: none;
+      font-size: var(--icon-popover-primary);
+      margin-inline-start: var(--spacing-popover-primary-margin_y);
+    }
+
+    &--hot {
+      position: absolute;
+      inset-inline-end: 0;
+      height: var(--height-popover-primary);
+      width: calc(var(--height-popover-primary) * 1.2);
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .vd-popper__arrow {
+    display: block;
+    background-color: var(--color-popover-primary-bg);
+    width: 12px;
+    height: 12px;
+    // border-radius: 4px;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  // 设置一个 popper 的外边距
+  .vd-popper[x-placement^="top"] {
+    margin-bottom: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  .vd-popper[x-placement^="bottom"] {
+    margin-top: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  .vd-popper[x-placement^="left"] {
+    margin-right: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  .vd-popper[x-placement^="right"] {
+    margin-left: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  // 覆盖原有的默认三角形背景色样式
+  .vd-popper[x-placement^="top"] .vd-popper__arrow {
+    bottom: -4px;
+    border-color: var(--color-popover-primary-bg) transparent transparent transparent;
+  }
+
+  .vd-popper[x-placement^="bottom"] .vd-popper__arrow {
+    top: -4px;
+    border-color: transparent transparent var(--color-popover-primary-bg) transparent;
+    // transform: rotate(180deg);
+  }
+
+  .vd-popper[x-placement^="right"] .vd-popper__arrow {
+    border-color: transparent var(--color-popover-primary-bg) transparent transparent;
+    // transform: rotate(90deg);
+    left: -4px;
+  }
+
+  .vd-popper[x-placement^="left"] .vd-popper__arrow {
+    border-color: transparent transparent transparent var(--color-popover-primary-bg);
+    // transform: rotate(-90deg);
+    right: -4px;
+  }
+
+  // 加上过渡效果
+  .vd-popover-fade-enter,
+  .vd-popover-fade-leave-to {
+    opacity: 0;
+  }
+
+  .vd-popover-fade-enter-active,
+  .vd-popover-fade-leave-active {
+    transition: opacity 0.3s;
+  }
+
+  // secondary 模式样式
+  .vd-popover-secondary {
+    font-size: var(--en-single-f-b-r-fontSize);
+    font-weight: var(--en-single-f-b-r-fontWeight);
+    padding-inline-start: var(--spacing-popover-secondary-padding_left);
+    padding-inline-end: var(--spacing-popover-secondary-padding_right);
+    height: var(--height-popover-secondary);
+    color: var(--color-popover-secondary-text);
+    background-color: var(--color-popover-secondary-bg);
+    border-radius: var(--radius-popover-secondary);    
+
+    &[x-placement^="top"] .vd-popper__arrow {
+      border-color: var(--color-popover-secondary-bg) transparent transparent transparent;
+    }
+
+    &[x-placement^="bottom"] .vd-popper__arrow {
+      border-color: transparent transparent var(--color-popover-secondary-bg) transparent;
+    }
+
+    &[x-placement^="right"] .vd-popper__arrow {
+      border-color: transparent var(--color-popover-secondary-bg) transparent transparent;
+    }
+
+    &[x-placement^="left"] .vd-popper__arrow {
+      border-color: transparent transparent transparent var(--color-popover-secondary-bg);
+    }
+
+    .vd-popover-icon {
+
+      &.vd-iconfont {
+        margin-block-end: -2px;
+        color: inherit;
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-secondary);
+        margin-inline-end: var(--spacing-popover-secondary-margin_y);
+        margin-block-start: -1px;
+      }
+    }
+
+    .vd-popover-close {
+
+      &.vd-iconfont {
+        margin-block-end: -2px;
+        color: var(--color-popover-secondary-text);
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-secondary);
+        margin-inline-start: var(--spacing-popover-secondary-margin_y);
+        margin-block-start: -1px;
+      }
+
+      &--hot {
+        position: absolute;
+        inset-inline-end: 0;
+        height: var(--height-popover-secondary);
+        width: calc(var(--height-popover-secondary) * 1.2);
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+    }
+
+    .vd-popper__arrow {
+      background-color: var(--color-popover-secondary-bg);
+    }
+  }
+
+  // custom 模式样式
+  .vd-popover-custom {
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+    padding-inline-start: var(--spacing-popover-custom-padding_left);
+    padding-inline-end: var(--spacing-popover-custom-padding_right);
+    height: var(--height-popover-custom);
+    color: var(--color-popover-custom-text);
+    background-color: var(--color-popover-custom-bg);
+    border-radius: var(--radius-popover-custom);    
+
+    &[x-placement^="top"] .vd-popper__arrow {
+      border-color: var(--color-popover-custom-bg) transparent transparent transparent;
+    }
+
+    &[x-placement^="bottom"] .vd-popper__arrow {
+      border-color: transparent transparent var(--color-popover-custom-bg) transparent;
+    }
+
+    &[x-placement^="right"] .vd-popper__arrow {
+      border-color: transparent var(--color-popover-custom-bg) transparent transparent;
+    }
+
+    &[x-placement^="left"] .vd-popper__arrow {
+      border-color: transparent transparent transparent var(--color-popover-custom-bg);
+    }
+
+    .vd-popover-icon {
+
+      &.vd-iconfont {
+        color: inherit;
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-custom);
+        margin-inline-end: var(--spacing-popover-custom-margin_y);
+      }
+    }
+
+    .vd-popover-close {
+
+      &.vd-iconfont {
+        color: var(--color-popover-custom-text);
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-custom);
+        margin-inline-start: var(--spacing-popover-custom-margin_y);
+      }
+
+      &--hot {
+        position: absolute;
+        inset-inline-end: 0;
+        height: var(--height-popover-custom);
+        width: calc(var(--height-popover-custom) * 1.2);
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+    }
+
+    .vd-popper__arrow {
+      background-color: var(--color-popover-custom-bg);
+    }
+  }
+}
+
+@keyframes vd-ani-popper {
+  0% {
+    opacity: 0;
+    transform: scale(.5);
+  }
+
+  80% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}