Nenhuma Descrição

menu.css 18KB

    /* BEM support Func -------------------------- */ /* Element Chalk Variables */ /* Transition -------------------------- */ /* Colors -------------------------- */ /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ /* Link -------------------------- */ /* Background -------------------------- */ /* Border -------------------------- */ /* Box-shadow -------------------------- */ /* Fill -------------------------- */ /* Font -------------------------- */ /* Size -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* Message Box -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ /* Element Chalk Variables */ /* Transition -------------------------- */ /* Colors -------------------------- */ /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ /* Link -------------------------- */ /* Background -------------------------- */ /* Border -------------------------- */ /* Box-shadow -------------------------- */ /* Fill -------------------------- */ /* Font -------------------------- */ /* Size -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* Message Box -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Break-point --------------------------*/ /* Element Chalk Variables */ /* Transition -------------------------- */ /* Colors -------------------------- */ /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ /* Link -------------------------- */ /* Background -------------------------- */ /* Border -------------------------- */ /* Box-shadow -------------------------- */ /* Fill -------------------------- */ /* Font -------------------------- */ /* Size -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* Message Box -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Break-point --------------------------*/ .fade-in-linear-enter-active, .fade-in-linear-leave-active { -webkit-transition: opacity 200ms linear; transition: opacity 200ms linear; } .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active { opacity: 0; } .el-fade-in-linear-enter-active, .el-fade-in-linear-leave-active { -webkit-transition: opacity 200ms linear; transition: opacity 200ms linear; } .el-fade-in-linear-enter, .el-fade-in-linear-leave, .el-fade-in-linear-leave-active { opacity: 0; } .el-fade-in-enter-active, .el-fade-in-leave-active { -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } .el-fade-in-enter, .el-fade-in-leave-active { opacity: 0; } .el-zoom-in-center-enter-active, .el-zoom-in-center-leave-active { -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } .el-zoom-in-center-enter, .el-zoom-in-center-leave-active { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } .el-zoom-in-top-enter-active, .el-zoom-in-top-leave-active { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform-origin: center top; transform-origin: center top; } .el-zoom-in-top-enter, .el-zoom-in-top-leave-active { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } .el-zoom-in-bottom-enter-active, .el-zoom-in-bottom-leave-active { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } .el-zoom-in-bottom-enter, .el-zoom-in-bottom-leave-active { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } .el-zoom-in-left-enter-active, .el-zoom-in-left-leave-active { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform-origin: top left; transform-origin: top left; } .el-zoom-in-left-enter, .el-zoom-in-left-leave-active { opacity: 0; -webkit-transform: scale(0.45, 0.45); transform: scale(0.45, 0.45); } .collapse-transition { -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; } .horizontal-collapse-transition { -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; } .el-list-enter-active, .el-list-leave-active { -webkit-transition: all 1s; transition: all 1s; } .el-list-enter, .el-list-leave-active { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .el-opacity-transition { -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); } .el-menu { border-right: solid 1px #e6e6e6; list-style: none; position: relative; margin: 0; padding-left: 0; background-color: #fff; } .el-menu::before, .el-menu::after { display: table; content: ""; } .el-menu::after { clear: both; } .el-menu.el-menu--horizontal { border-bottom: solid 1px #e6e6e6; } .el-menu--horizontal { border-right: none; } .el-menu--horizontal > .el-menu-item { float: left; height: 60px; line-height: 60px; margin: 0; border-bottom: 2px solid transparent; color: #909399; } .el-menu--horizontal > .el-menu-item a, .el-menu--horizontal > .el-menu-item a:hover { color: inherit; } .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus { background-color: #fff; } .el-menu--horizontal > .el-submenu { float: left; } .el-menu--horizontal > .el-submenu:focus, .el-menu--horizontal > .el-submenu:hover { outline: none; } .el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title { color: #303133; } .el-menu--horizontal > .el-submenu.is-active .el-submenu__title { border-bottom: 2px solid #00837e; color: #303133; } .el-menu--horizontal > .el-submenu .el-submenu__title { height: 60px; line-height: 60px; border-bottom: 2px solid transparent; color: #909399; } .el-menu--horizontal > .el-submenu .el-submenu__title:hover { background-color: #fff; } .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow { position: static; vertical-align: middle; margin-left: 8px; margin-top: -3px; } .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title { background-color: #fff; float: none; height: 36px; line-height: 36px; padding: 0 10px; color: #909399; } .el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title { color: #303133; } .el-menu--horizontal .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal .el-menu-item:not(.is-disabled):focus { outline: none; color: #303133; } .el-menu--horizontal > .el-menu-item.is-active { border-bottom: 2px solid #00837e; color: #303133; } .el-menu--collapse { width: 64px; } .el-menu--collapse > .el-menu-item [class^="el-icon-"], .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] { margin: 0; vertical-align: middle; width: 24px; text-align: center; } .el-menu--collapse > .el-menu-item .el-submenu__icon-arrow, .el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow { display: none; } .el-menu--collapse > .el-menu-item span, .el-menu--collapse > .el-submenu > .el-submenu__title span { height: 0; width: 0; overflow: hidden; visibility: hidden; display: inline-block; } .el-menu--collapse > .el-menu-item.is-active i { color: inherit; } .el-menu--collapse .el-menu .el-submenu { min-width: 200px; } .el-menu--collapse .el-submenu { position: relative; } .el-menu--collapse .el-submenu .el-menu { position: absolute; margin-left: 5px; top: 0; left: 100%; z-index: 10; border: 1px solid #e4e7ed; border-radius: 2px; -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow { -webkit-transform: none; transform: none; } .el-menu--popup { z-index: 100; min-width: 200px; border: none; padding: 5px 0; border-radius: 2px; -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .el-menu--popup-bottom-start { margin-top: 5px; } .el-menu--popup-right-start { margin-left: 5px; margin-right: 5px; } .el-menu-item { height: 56px; line-height: 56px; font-size: 14px; color: #303133; padding: 0 20px; list-style: none; cursor: pointer; position: relative; -webkit-transition: border-color .3s, background-color .3s, color .3s; transition: border-color .3s, background-color .3s, color .3s; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; } .el-menu-item * { vertical-align: middle; } .el-menu-item i { color: #909399; } .el-menu-item:hover, .el-menu-item:focus { outline: none; background-color: #e6f3f2; } .el-menu-item.is-disabled { opacity: 0.25; cursor: not-allowed; background: none !important; } .el-menu-item [class^="el-icon-"] { margin-right: 5px; width: 24px; text-align: center; font-size: 18px; vertical-align: middle; } .el-menu-item.is-active { color: #00837e; } .el-menu-item.is-active i { color: inherit; } .el-submenu { list-style: none; margin: 0; padding-left: 0; } .el-submenu__title { height: 56px; line-height: 56px; font-size: 14px; color: #303133; padding: 0 20px; list-style: none; cursor: pointer; position: relative; -webkit-transition: border-color .3s, background-color .3s, color .3s; transition: border-color .3s, background-color .3s, color .3s; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; } .el-submenu__title * { vertical-align: middle; } .el-submenu__title i { color: #909399; } .el-submenu__title:hover, .el-submenu__title:focus { outline: none; background-color: #e6f3f2; } .el-submenu__title.is-disabled { opacity: 0.25; cursor: not-allowed; background: none !important; } .el-submenu__title:hover { background-color: #e6f3f2; } .el-submenu .el-menu { border: none; } .el-submenu .el-menu-item { height: 50px; line-height: 50px; padding: 0 45px; min-width: 200px; } .el-submenu__icon-arrow { position: absolute; top: 50%; right: 20px; margin-top: -7px; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; font-size: 12px; } .el-submenu.is-active .el-submenu__title { border-bottom-color: #00837e; } .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow { -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .el-submenu.is-disabled .el-submenu__title, .el-submenu.is-disabled .el-menu-item { opacity: 0.25; cursor: not-allowed; background: none !important; } .el-submenu [class^="el-icon-"] { vertical-align: middle; margin-right: 5px; width: 24px; text-align: center; font-size: 18px; } .el-menu-item-group > ul { padding: 0; } .el-menu-item-group__title { padding: 7px 0 7px 20px; line-height: normal; font-size: 12px; color: #909399; } .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { -webkit-transition: .2s; transition: .2s; opacity: 0; }