@cldemo/ui-kit 1.0.11 → 1.0.12

package/buildLibs/styles/Web/ClDropdownPopup.css

@@ -0,0 +1,323 @@
+.panel-dropdownlayer {
+  position: relative;
+  color: #314659;
+  font-size: 14px;
+}
+
+.dropdownLayer-dropdown {
+  background-color: white;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  z-index: 4000;
+}
+
+.dropdownLayer-dropdown-opacity0 {
+  opacity: 0;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-open {
+  overflow-x: hidden;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-down {
+  border-top-width: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  overflow-y: hidden;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-up {
+  border-bottom-width: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-arrow-left {
+  left: 0;
+  right: auto;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-arrow-right {
+  left: auto;
+  right: 0;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-down.dropdownLayer-dropdown-arrow-center {
+  left: 0;
+  right: auto;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-up.dropdownLayer-dropdown-arrow-center {
+  left: 0;
+  right: auto;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-arrow-top {
+  top: 0;
+  bottom: auto;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-left.dropdownLayer-dropdown-arrow-center {
+  top: 0;
+  bottom: auto;
+}
+
+.dropdownLayer-dropdown.dropdownLayer-dropdown-right.dropdownLayer-dropdown-arrow-center {
+  top: 0;
+  bottom: auto;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown {
+  border-radius: 4px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-down {
+  border-top-width: 1px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-up {
+  border-bottom-width: 1px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown {
+  overflow: visible;
+}
+
+/* arrow */
+.dropdownLayer-dropdown > .arrow {
+  display: none;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown > .arrow {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 9px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown > .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 8px;
+  margin-left: -8px;
+  content: ' ';
+}
+
+/* direction=left/right 的水平定位仅适用于面板上下弹出（down/up）；
+   left/right 弹出时箭头贴面板左/右边缘指向触发文本，由面板方向规则控制 */
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-down.dropdownLayer-dropdown-arrow-left
+  > .arrow,
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-up.dropdownLayer-dropdown-arrow-left
+  > .arrow {
+  left: 5px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-down.dropdownLayer-dropdown-arrow-right
+  > .arrow,
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-up.dropdownLayer-dropdown-arrow-right
+  > .arrow {
+  right: 5px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-arrow-center.dropdownLayer-dropdown-down
+  > .arrow {
+  left: 5px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-arrow-center.dropdownLayer-dropdown-up
+  > .arrow {
+  left: 5px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-arrow-top > .arrow {
+  top: 2px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-arrow-bottom > .arrow {
+  bottom: 2px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-up > .arrow {
+  border-bottom-width: 0;
+  bottom: -9px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-up > .arrow:after {
+  border-top-color: #ffffff;
+  border-bottom-width: 0;
+  bottom: 2px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-down > .arrow {
+  border-top-width: 0;
+  top: -9px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-down > .arrow:after {
+  border-bottom-color: #ffffff;
+  border-top-width: 0;
+  top: 2px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-left > .arrow {
+  border-right-width: 0;
+  right: -9px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-left > .arrow:after {
+  border-left-color: #ffffff;
+  border-right-width: 0;
+  right: 2px;
+  top: -8px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-right > .arrow {
+  border-left-width: 0;
+  left: -9px;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown.dropdownLayer-dropdown-right > .arrow:after {
+  border-right-color: #ffffff;
+  border-left-width: 0;
+  left: 10px;
+  bottom: -8px;
+}
+
+/* keyframes */
+@keyframes zoomInTop {
+  from {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomInTop {
+  animation-name: zoomInTop;
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+  transform-origin: center top;
+  animation-timing-function: ease-in;
+}
+
+.dropdownLayer-dropdown-up.zoomInTop {
+  transform-origin: center bottom;
+}
+
+@keyframes zoomOutTop {
+  from {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+.zoomOutTop {
+  animation-name: zoomOutTop;
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+  transform-origin: center top;
+  animation-timing-function: ease-in;
+}
+
+.dropdownLayer-dropdown-up.zoomOutTop {
+  transform-origin: center bottom !important;
+}
+
+/* 无动画关闭：传为 transitionLeave 时面板瞬消，不播缩放/淡出 */
+.dropdownLayer-close-no-anim {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ---- Popup theme ---- */
+.dropdownLayer-theme-popup {
+  display: inline-block;
+}
+
+.dropdownLayer-theme-popup .dropdownLayer-text {
+  cursor: pointer;
+}
+
+.dropdownLayer-theme-popup.dropdownLayer-disabled .dropdownLayer-text {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown {
+  border-color: #e4e7ec;
+  border-radius: 4px;
+  width: auto;
+  cursor: default;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-up > .arrow {
+  border-top-color: #e4e7ec;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-down > .arrow {
+  border-bottom-color: #e4e7ec;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-left > .arrow {
+  border-left-color: #e4e7ec;
+}
+
+.dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-right > .arrow {
+  border-right-color: #e4e7ec;
+}
+.panel-dropdownpopup {
+  position: relative;
+}
+/* fadeIn/fadeOut 动画自包含（0m 规则：复制自 animate.css）——组件默认过渡类依赖，避免外部库未加载导致动画失效 */
+.animated {
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+.fadeIn {
+  animation-name: fadeIn;
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+.fadeOut {
+  animation-name: fadeOut;
+}
+.dropdownPopup-dropdown.dropdownLayer-dropdown {
+  overflow: visible;
+}
+