| | |
| | | /** 下拉菜单模块 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; |
| | | } |
| | | /** 下拉菜单模块 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;
|
| | | }
|