/** 下拉菜单模块 date:2020-05-04 License By http://easyweb.vip */ .dropdown-no-scroll { overflow: hidden; } .dropdown-fix-parent { z-index: auto !important; } /** 遮罩层 */ .dropdown-menu-shade { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9998; background-color: rgba(0, 0, 0, .1); } .dropdown-menu-shade.no-shade { background-color: transparent; } /** 夜间主题 */ .dropdown-menu-nav.dark, .dropdown-menu-nav.dark .dropdown-menu-nav-child { background: #32363F; border-color: #484e58; } .dropdown-menu-nav.dark > li > a, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li > a { color: #a1a8b8; } .dropdown-menu-nav.dark > li > a:hover, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li > a:hover { background-color: #272b34; } .dropdown-menu-nav.dark > li.disabled > a, .dropdown-menu-nav > li.disabled > a:hover, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li.disabled > a, .dropdown-menu-nav .dropdown-menu-nav-child > li.disabled > a:hover { color: #7a8191; } .dropdown-menu-nav.dark > hr, .dropdown-menu-nav.dark .dropdown-menu-nav-child > hr { background-color: #484e58; } .dropdown-menu-nav.dark > li.title, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li.title { color: #868b9a; } .dropdown-menu-nav.dark .dropdown-anchor { border-color: #484e58; } .dropdown-menu-nav.dark .dropdown-anchor::after { border-color: #32363F; } /** 白色主题 */ .dropdown-menu { position: relative; display: inline-block; vertical-align: bottom; } .dropdown-menu-nav, .dropdown-menu-nav .dropdown-menu-nav-child { position: absolute; padding: 5px 0; margin: 0; overflow: visible; min-width: 110px; background: #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); border: 1px solid #e4e4e4; line-height: initial; text-align: left; z-index: 9999; } .dropdown-menu .dropdown-menu-nav { display: none; } .dropdown-menu.dropdown-open .dropdown-menu-nav { display: block; } .dropdown-menu-nav.fixed { position: fixed; } .dropdown-menu-nav > li, .dropdown-menu-nav-child > li { padding: 0; margin: 0; line-height: 18px; user-select: none; list-style: none; position: relative; } .dropdown-menu-nav > li > a, .dropdown-menu-nav-child > li > a { display: block; color: #555; font-size: 14px; padding: 10px 15px; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; } .dropdown-menu-nav > li > a:hover, .dropdown-menu-nav-child > li > a:hover { background-color: #eeeeee; } .dropdown-menu-nav > li .layui-icon, .dropdown-menu-nav-child > li .layui-icon { font-size: 14px; margin-right: 5px; } .dropdown-menu-nav > hr, .dropdown-menu-nav-child > hr { height: 1px; margin: 3px 0; background-color: #e6e6e6; } /** 禁用样式 */ .dropdown-menu-nav > li.disabled, .dropdown-menu-nav-child > li.disabled { cursor: not-allowed; } .dropdown-menu-nav > li.disabled > a, .dropdown-menu-nav > li.disabled > a:hover, .dropdown-menu-nav-child > li.disabled > a, .dropdown-menu-nav-child > li.disabled > a:hover { color: #999; cursor: not-allowed; pointer-events: none; background-color: transparent; } /** 标题样式 */ .dropdown-menu-nav > li.title, .dropdown-menu-nav-child > li.title { color: #999; font-size: 12px; padding: 3px 15px; } /* nav子菜单 */ .dropdown-menu-nav .dropdown-menu-nav-child { left: 100%; top: 0; display: none; } .dropdown-menu-nav .show-left .dropdown-menu-nav-child { left: auto; right: 100%; } .dropdown-menu-nav > li.active > .dropdown-menu-nav-child, .dropdown-menu-nav-child > li.active > .dropdown-menu-nav-child { display: block; } .dropdown-menu-nav > li.have-more:after, .dropdown-menu-nav-child > li.have-more:after { content: "\e602"; font-family: layui-icon !important; font-size: 14px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: 4px; color: #666; top: 50%; margin-top: -8px; } /** 小箭头 */ .dropdown-menu-nav .dropdown-anchor, .dropdown-menu-nav .dropdown-anchor:after { border: 8px solid #e4e4e4; position: absolute; display: inline-block; } .dropdown-menu-nav .dropdown-anchor:after { content: ''; border: 7px solid #fff; } /** 下左位置 */ .dropdown-menu-nav.dropdown-bottom-left { top: 100%; } .dropdown-menu-nav.dropdown-bottom-left { margin-top: 8px; } .dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor:after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; top: -16px; } .dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor:after { top: -6px; left: -7px; } .dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor { left: 12px; } /** 下右位置 */ .dropdown-menu-nav.dropdown-bottom-right { right: 0; } .dropdown-menu-nav.dropdown-bottom-right { margin-top: 8px; } .dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor:after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; top: -16px; } .dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor:after { top: -6px; left: -7px; } .dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor { right: 12px; } /** 下中位置 */ .dropdown-menu-nav.dropdown-bottom-center { left: 50%; /*transform: translateX(-50%);*/ } .dropdown-menu-nav.dropdown-bottom-center { margin-top: 8px; } .dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor:after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; top: -16px; } .dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor:after { top: -6px; left: -7px; } .dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor { left: calc(50% - 8px); } /** 上左位置 */ .dropdown-menu-nav.dropdown-top-left { bottom: 100%; } .dropdown-menu-nav.dropdown-top-left { margin-bottom: 8px; } .dropdown-menu-nav.dropdown-top-left .dropdown-anchor, .dropdown-menu-nav.dropdown-top-left .dropdown-anchor:after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; bottom: -16px; } .dropdown-menu-nav.dropdown-top-left .dropdown-anchor:after { top: -8px; left: -7px; bottom: auto; } .dropdown-menu-nav.dropdown-top-left .dropdown-anchor { left: 12px; } /** 上右位置 */ .dropdown-menu-nav.dropdown-top-right { bottom: 100%; right: 0; } .dropdown-menu-nav.dropdown-top-right { margin-bottom: 8px; } .dropdown-menu-nav.dropdown-top-right .dropdown-anchor, .dropdown-menu-nav.dropdown-top-right .dropdown-anchor:after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; bottom: -16px; } .dropdown-menu-nav.dropdown-top-right .dropdown-anchor:after { top: -8px; left: -7px; bottom: auto; } .dropdown-menu-nav.dropdown-top-right .dropdown-anchor { right: 12px; } /** 上中位置 */ .dropdown-menu-nav.dropdown-top-center { bottom: 100%; left: 50%; /*transform: translateX(-50%);*/ } .dropdown-menu-nav.dropdown-top-center { margin-bottom: 8px; } .dropdown-menu-nav.dropdown-top-center .dropdown-anchor, .dropdown-menu-nav.dropdown-top-center .dropdown-anchor:after { border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; bottom: -16px; } .dropdown-menu-nav.dropdown-top-center .dropdown-anchor:after { top: -8px; left: -7px; bottom: auto; } .dropdown-menu-nav.dropdown-top-center .dropdown-anchor { left: calc(50% - 8px); } /** 左上位置 */ .dropdown-menu-nav.dropdown-left-top { right: 100%; bottom: 0; } .dropdown-menu-nav.dropdown-left-top { margin-right: 8px; } .dropdown-menu-nav.dropdown-left-top .dropdown-anchor, .dropdown-menu-nav.dropdown-left-top .dropdown-anchor:after { border-bottom-color: transparent; border-right-color: transparent; border-top-color: transparent; right: -16px; } .dropdown-menu-nav.dropdown-left-top .dropdown-anchor:after { top: -7px; left: -8px; right: auto; } .dropdown-menu-nav.dropdown-left-top .dropdown-anchor { bottom: 12px; } /** 左下位置 */ .dropdown-menu-nav.dropdown-left-bottom { right: 100%; top: 0; } .dropdown-menu-nav.dropdown-left-bottom { margin-right: 8px; } .dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor, .dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor:after { border-bottom-color: transparent; border-right-color: transparent; border-top-color: transparent; right: -16px; } .dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor:after { top: -7px; left: -8px; right: auto; } .dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor { top: 12px; } /** 左中位置 */ .dropdown-menu-nav.dropdown-left-center { right: 100%; top: 50%; /*transform: translateY(-50%);*/ } .dropdown-menu-nav.dropdown-left-center { margin-right: 8px; } .dropdown-menu-nav.dropdown-left-center .dropdown-anchor, .dropdown-menu-nav.dropdown-left-center .dropdown-anchor:after { border-bottom-color: transparent; border-right-color: transparent; border-top-color: transparent; right: -16px; } .dropdown-menu-nav.dropdown-left-center .dropdown-anchor:after { top: -7px; left: -8px; right: auto; } .dropdown-menu-nav.dropdown-left-center .dropdown-anchor { top: calc(50% - 8px); } /** 右上位置 */ .dropdown-menu-nav.dropdown-right-top { left: 100%; bottom: 0; } .dropdown-menu-nav.dropdown-right-top { margin-left: 8px; } .dropdown-menu-nav.dropdown-right-top .dropdown-anchor, .dropdown-menu-nav.dropdown-right-top .dropdown-anchor:after { border-bottom-color: transparent; border-left-color: transparent; border-top-color: transparent; left: -16px; } .dropdown-menu-nav.dropdown-right-top .dropdown-anchor:after { top: -7px; left: -6px; } .dropdown-menu-nav.dropdown-right-top .dropdown-anchor { bottom: 12px; } /** 右下位置 */ .dropdown-menu-nav.dropdown-right-bottom { left: 100%; top: 0; } .dropdown-menu-nav.dropdown-right-bottom { margin-left: 8px; } .dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor, .dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor:after { border-bottom-color: transparent; border-left-color: transparent; border-top-color: transparent; left: -16px; } .dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor:after { top: -7px; left: -6px; } .dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor { top: 12px; } /** 右中位置 */ .dropdown-menu-nav.dropdown-right-center { left: 100%; top: 50%; /*transform: translateY(-50%);*/ } .dropdown-menu-nav.dropdown-right-center { margin-left: 8px; } .dropdown-menu-nav.dropdown-right-center .dropdown-anchor, .dropdown-menu-nav.dropdown-right-center .dropdown-anchor:after { border-bottom-color: transparent; border-left-color: transparent; border-top-color: transparent; left: -16px; } .dropdown-menu-nav.dropdown-right-center .dropdown-anchor:after { top: -7px; left: -6px; } .dropdown-menu-nav.dropdown-right-center .dropdown-anchor { top: calc(50% - 8px); } /** 按钮里面三角形样式 */ .icon-btn .layui-icon-drop { margin-right: 0; font-size: 14px; } .layui-icon-drop:before { content: "\e625"; } .layui-icon-drop.top { transform: rotate(180deg); display: inline-table; } .layui-icon-drop.left { transform: rotate(90deg); display: inline-table; } .layui-icon-drop.right { transform: rotate(-90deg); display: inline-table; } /** 适配btn-container */ .layui-btn-container .dropdown-menu .layui-btn { margin: 0; } .layui-btn-container .dropdown-menu { margin-right: 10px; margin-bottom: 10px; } .dropdown-menu + .dropdown-menu, .layui-btn + .dropdown-menu, .dropdown-menu + .layui-btn { margin-left: 10px; } .layui-btn-container input { font-size: 14px; } /** 气泡确认框 */ .dropdown-popconfirm { color: #555; font-size: 14px; max-width: 230px; min-width: 200px; width: max-content; padding: 15px 15px; box-sizing: border-box; border: none; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); } .dropdown-popconfirm .layui-icon-help, .dropdown-popconfirm .layui-icon-about { font-size: 12px; color: #fff; height: 16px; width: 16px; line-height: 16px; text-align: center; display: inline-block; box-sizing: border-box; background-color: #FF9900; border-radius: 50%; margin: -2px 3px 0 0; overflow: hidden; vertical-align: middle; } .dropdown-popconfirm .layui-icon-about { background-color: #FF0000; position: relative; } .dropdown-popconfirm .layui-icon-about:before { font-size: 28px; position: absolute; left: -6px; top: 0; } .dropdown-popconfirm .dropdown-popconfirm-title > span { display: inline-block; vertical-align: middle; } .dropdown-popconfirm .dropdown-popconfirm-btn { margin-top: 12px; text-align: right; } .dropdown-popconfirm .dropdown-popconfirm-btn .layui-btn { height: 24px; min-width: 45px; line-height: 24px; padding: 0; font-size: 12px; border-radius: 3px; } .dropdown-popconfirm .dropdown-popconfirm-btn .layui-btn[btn-cancel] { color: #333; background: transparent; }