lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: override style scheme

This commit is contained in:
FairyEver 2021-11-11 23:07:26 +08:00
parent 213cb2452f
commit 877766c85f
9 changed files with 1000 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
d2/components/d2/admin/layout/header-aside/index.vue
View File

@ -5,7 +5,7 @@
</d2-scroll>
</div>
<d2-flex :class="`${classname}__header`" :style="headerStyle" dir="left" box="justify">
<d2-flex class="header__column header__column--border header__column--border-right">
<d2-flex class="header__column">
<d2-flex class="header__button header__button--icon" tag="button" center>
<d2-icon name="icon-park-outline:menu-unfold-one"/>
</d2-flex>
@ -13,7 +13,7 @@
<div class="header__column">
<d2-admin-layout-header-aside-menu-header/>
</div>
<d2-flex class="header__column header__column--border header__column--border-left" dir="right">
<d2-flex class="header__column" dir="right">
<d2-flex class="header__button header__button--text" tag="button" center>
<span class="mr-2">Hello Admin</span>
<a-avatar src="https://p3-passport.byteacctimg.com/img/user-avatar/e7130f55d45d06a8106c9dbd0e3f0c18~300x300.image"/>

4
d2/style/themes/default/index.scss
View File

@ -1,6 +1,4 @@
@import './src/base/var.scss';
@import './src/layout/header-aside.scss';
@import './src/layout/header-aside/index.scss';
@import './src/component/flex.scss';
@import './src/component/icon.scss';

127
d2/style/themes/default/src/layout/header-aside.scss
View File

@ -1,127 +0,0 @@
$classname: '#{$namespace}-layout-header-aside';
@function --key ($name) {
@return --d2-admin-layout-header-aside-#{$name};
}
@function --var ($name) {
@return var(#{--key($name)});
}
:root {
#{--key('font-size')}: 14px;
#{--key('header-height')}: 46px;
}
html, body, #app {
height: 100%;
width: 100%;
}
body.#{$classname} {
#app {
position: relative;
}
// When the menu exceeds the screen height
// Display it as the maximum screen height
.ant-menu-vertical,
.ant-menu-vertical-left,
.ant-menu-vertical-right {
&.ant-menu-sub {
max-height: 100vh;
}
}
}
.#{$classname}__body {
position: absolute;
>.body__scroll {
@apply w-full h-full;
}
}
.#{$classname}__header {
@apply box-content absolute top-0 right-0 border-b border-gray-200 cursor-pointer select-none;
height: --var('header-height');
>.header__column {
&.header__column--border {
@apply border-gray-200;
&.header__column--border-right {
@apply border-r;
}
&.header__column--border-left {
@apply border-l;
}
}
>.header__button {
@apply transition-colors bg-transparent;
font-size: --var('font-size');
&.header__button--icon {
min-width: --var('header-height');
}
&.header__button--text {
line-height: --var('header-height');
padding: 0 calc((#{--var('header-height')} - #{--var('font-size')}) / 2);
}
&:hover {
@apply bg-gray-100;
}
&:active {
@apply bg-gray-200;
}
}
>.ant-menu-horizontal {
@apply border-b-0;
>.ant-menu-item:hover::after,
>.ant-menu-submenu:hover::after,
>.ant-menu-item-active::after,
>.ant-menu-submenu-active::after,
>.ant-menu-item-open::after,
>.ant-menu-submenu-open::after,
>.ant-menu-item-selected::after,
>.ant-menu-submenu-selected::after {
border-bottom-color: transparent;
}
}
}
}
.#{$classname}__aside {
@apply box-content absolute top-0 bottom-0 left-0 bg-gray-100 border-r border-gray-200 cursor-pointer select-none;
>.aside__header {
@apply box-content bg-white border-b border-gray-200;
min-height: --var('header-height');
}
>.aside__body {
@apply bg-white;
>.aside__scroll {
@apply w-full h-full;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
@apply border-r-0;
}
.ant-menu-vertical-right {
@apply border-l-0;
}
.ant-menu-inline {
.ant-menu-item,
.ant-menu-submenu-title {
width: 100%;
}
}
.ant-menu-vertical,
.ant-menu-vertical-left,
.ant-menu-vertical-right,
.ant-menu-inline {
.ant-menu-item::after {
border-right-color: transparent;
}
}
}
>.aside__footer {
@apply box-content bg-white border-t border-gray-200;
min-height: --var('header-height');
}
}

3
d2/style/themes/default/src/layout/header-aside/index.scss Normal file
View File

@ -0,0 +1,3 @@
@import './src/var.scss';
@import './src/style.scss';
@import './src/rewrite/ant-menu.scss';

903
d2/style/themes/default/src/layout/header-aside/src/rewrite/ant-menu.scss Normal file
View File

@ -0,0 +1,903 @@
@include inLayoutHeaderAside {
.ant-menu-item-danger.ant-menu-item {
color: #ff4d4f;
}
.ant-menu-item-danger.ant-menu-item:hover,
.ant-menu-item-danger.ant-menu-item-active {
color: #ff4d4f;
}
.ant-menu-item-danger.ant-menu-item:active {
background: #fff1f0;
}
.ant-menu-item-danger.ant-menu-item-selected {
color: #ff4d4f;
}
.ant-menu-item-danger.ant-menu-item-selected > a,
.ant-menu-item-danger.ant-menu-item-selected > a:hover {
color: #ff4d4f;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {
background-color: #fff1f0;
}
.ant-menu-inline .ant-menu-item-danger.ant-menu-item::after {
border-right-color: #ff4d4f;
}
.ant-menu-dark .ant-menu-item-danger.ant-menu-item,
.ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover,
.ant-menu-dark .ant-menu-item-danger.ant-menu-item > a {
color: #ff4d4f;
}
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {
color: #fff;
background-color: #ff4d4f;
}
.ant-menu {
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
line-height: 1.5715;
font-feature-settings: 'tnum';
margin-bottom: 0;
padding-left: 0;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
line-height: 0;
text-align: left;
list-style: none;
background: #fff;
outline: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
}
.ant-menu::before,
.ant-menu::after {
display: table;
content: '';
}
.ant-menu::after {
clear: both;
}
.ant-menu.ant-menu-root:focus-visible {
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.ant-menu ul,
.ant-menu ol {
margin: 0;
padding: 0;
list-style: none;
}
.ant-menu-overflow {
display: flex;
}
.ant-menu-overflow-item {
flex: none;
}
.ant-menu-hidden,
.ant-menu-submenu-hidden {
display: none;
}
.ant-menu-item-group-title {
height: 1.5715;
padding: 8px 16px;
color: rgba(0, 0, 0, 0.45);
font-size: 14px;
line-height: 1.5715;
transition: all 0.3s;
}
.ant-menu-horizontal .ant-menu-submenu {
transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-menu-submenu,
.ant-menu-submenu-inline {
transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-menu-submenu-selected {
color: #1890ff;
}
.ant-menu-item:active,
.ant-menu-submenu-title:active {
background: #e6f7ff;
}
.ant-menu-submenu .ant-menu-sub {
cursor: initial;
transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-menu-item a {
color: rgba(0, 0, 0, 0.85);
}
.ant-menu-item a:hover {
color: #1890ff;
}
.ant-menu-item a::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
content: '';
}
.ant-menu-item > .ant-badge a {
color: rgba(0, 0, 0, 0.85);
}
.ant-menu-item > .ant-badge a:hover {
color: #1890ff;
}
.ant-menu-item-divider {
height: 1px;
overflow: hidden;
line-height: 0;
background-color: #f0f0f0;
}
.ant-menu-horizontal .ant-menu-item,
.ant-menu-horizontal .ant-menu-submenu {
margin-top: -1px;
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover {
background-color: transparent;
}
.ant-menu-item-selected {
color: #1890ff;
}
.ant-menu-item-selected a,
.ant-menu-item-selected a:hover {
color: #1890ff;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: #e6f7ff;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
border-right: 1px solid #f0f0f0;
}
.ant-menu-vertical-right {
border-left: 1px solid #f0f0f0;
}
.ant-menu-vertical.ant-menu-sub,
.ant-menu-vertical-left.ant-menu-sub,
.ant-menu-vertical-right.ant-menu-sub {
min-width: 160px;
max-height: 100vh; // changed
padding: 0;
overflow: hidden;
border-right: 0;
}
.ant-menu-vertical.ant-menu-sub:not([class*='-active']),
.ant-menu-vertical-left.ant-menu-sub:not([class*='-active']),
.ant-menu-vertical-right.ant-menu-sub:not([class*='-active']) {
overflow-x: hidden;
overflow-y: auto;
}
.ant-menu-vertical.ant-menu-sub .ant-menu-item,
.ant-menu-vertical-left.ant-menu-sub .ant-menu-item,
.ant-menu-vertical-right.ant-menu-sub .ant-menu-item {
left: 0;
margin-left: 0;
border-right: 0;
}
.ant-menu-vertical.ant-menu-sub .ant-menu-item::after,
.ant-menu-vertical-left.ant-menu-sub .ant-menu-item::after,
.ant-menu-vertical-right.ant-menu-sub .ant-menu-item::after {
border-right: 0;
}
.ant-menu-vertical.ant-menu-sub > .ant-menu-item,
.ant-menu-vertical-left.ant-menu-sub > .ant-menu-item,
.ant-menu-vertical-right.ant-menu-sub > .ant-menu-item,
.ant-menu-vertical.ant-menu-sub > .ant-menu-submenu,
.ant-menu-vertical-left.ant-menu-sub > .ant-menu-submenu,
.ant-menu-vertical-right.ant-menu-sub > .ant-menu-submenu {
transform-origin: 0 0;
}
.ant-menu-horizontal.ant-menu-sub {
min-width: 114px;
}
.ant-menu-horizontal .ant-menu-item,
.ant-menu-horizontal .ant-menu-submenu-title {
transition: border-color 0.3s, background 0.3s;
}
.ant-menu-item,
.ant-menu-submenu-title {
position: relative;
display: block;
margin: 0;
padding: 0 20px;
white-space: nowrap;
cursor: pointer;
transition: border-color 0.3s, background 0.3s, padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-menu-item .ant-menu-item-icon,
.ant-menu-submenu-title .ant-menu-item-icon,
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
min-width: 14px;
font-size: 14px;
transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s;
}
.ant-menu-item .ant-menu-item-icon + span,
.ant-menu-submenu-title .ant-menu-item-icon + span,
.ant-menu-item .anticon + span,
.ant-menu-submenu-title .anticon + span {
margin-left: 10px;
opacity: 1;
transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
}
.ant-menu-item .ant-menu-item-icon.svg,
.ant-menu-submenu-title .ant-menu-item-icon.svg {
vertical-align: -0.125em;
}
.ant-menu-item.ant-menu-item-only-child > .anticon,
.ant-menu-submenu-title.ant-menu-item-only-child > .anticon,
.ant-menu-item.ant-menu-item-only-child > .ant-menu-item-icon,
.ant-menu-submenu-title.ant-menu-item-only-child > .ant-menu-item-icon {
margin-right: 0;
}
.ant-menu-item:focus-visible,
.ant-menu-submenu-title:focus-visible {
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.ant-menu > .ant-menu-item-divider {
height: 1px;
margin: 1px 0;
padding: 0;
overflow: hidden;
line-height: 0;
background-color: #f0f0f0;
}
.ant-menu-submenu-popup {
position: absolute;
z-index: 1050;
background: transparent;
border-radius: 2px;
box-shadow: none;
transform-origin: 0 0;
}
.ant-menu-submenu-popup::before {
position: absolute;
top: -7px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0.0001;
content: ' ';
}
.ant-menu-submenu-placement-rightTop::before {
top: 0;
left: -7px;
}
.ant-menu-submenu > .ant-menu {
background-color: #fff;
border-radius: 2px;
}
.ant-menu-submenu > .ant-menu-submenu-title::after {
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-menu-submenu-popup > .ant-menu {
background-color: #fff;
}
.ant-menu-submenu-expand-icon,
.ant-menu-submenu-arrow {
position: absolute;
top: 50%;
right: 16px;
width: 10px;
color: rgba(0, 0, 0, 0.85);
transform: translateY(-50%);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-menu-submenu-arrow::before,
.ant-menu-submenu-arrow::after {
position: absolute;
width: 6px;
height: 1.5px;
background-color: currentColor;
border-radius: 2px;
transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
content: '';
}
.ant-menu-submenu-arrow::before {
transform: rotate(45deg) translateY(-2.5px);
}
.ant-menu-submenu-arrow::after {
transform: rotate(-45deg) translateY(2.5px);
}
.ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon,
.ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
color: #1890ff;
}
.ant-menu-inline-collapsed .ant-menu-submenu-arrow::before,
.ant-menu-submenu-inline .ant-menu-submenu-arrow::before {
transform: rotate(-45deg) translateX(2.5px);
}
.ant-menu-inline-collapsed .ant-menu-submenu-arrow::after,
.ant-menu-submenu-inline .ant-menu-submenu-arrow::after {
transform: rotate(45deg) translateX(-2.5px);
}
.ant-menu-submenu-horizontal .ant-menu-submenu-arrow {
display: none;
}
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
transform: translateY(-2px);
}
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after {
transform: rotate(-45deg) translateX(-2.5px);
}
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before {
transform: rotate(45deg) translateX(2.5px);
}
.ant-menu-vertical .ant-menu-submenu-selected,
.ant-menu-vertical-left .ant-menu-submenu-selected,
.ant-menu-vertical-right .ant-menu-submenu-selected {
color: #1890ff;
}
.ant-menu-horizontal {
line-height: 46px;
border: 0;
border-bottom: 1px solid #f0f0f0;
box-shadow: none;
}
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu {
margin-top: -1px;
margin-bottom: 0;
padding: 0 20px;
}
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected {
color: #1890ff;
}
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
border-bottom: 2px solid #1890ff;
}
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
position: relative;
top: 1px;
display: inline-block;
vertical-align: bottom;
}
.ant-menu-horizontal > .ant-menu-item::after,
.ant-menu-horizontal > .ant-menu-submenu::after {
position: absolute;
right: 20px;
bottom: 0;
left: 20px;
border-bottom: 2px solid transparent;
transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
content: '';
}
.ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
padding: 0;
}
.ant-menu-horizontal > .ant-menu-item a {
color: rgba(0, 0, 0, 0.85);
}
.ant-menu-horizontal > .ant-menu-item a:hover {
color: #1890ff;
}
.ant-menu-horizontal > .ant-menu-item a::before {
bottom: -2px;
}
.ant-menu-horizontal > .ant-menu-item-selected a {
color: #1890ff;
}
.ant-menu-horizontal::after {
display: block;
clear: both;
height: 0;
content: '\20';
}
.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-inline .ant-menu-item {
position: relative;
}
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border-right: 3px solid #1890ff;
transform: scaleY(0.0001);
opacity: 0;
transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
content: '';
}
.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-inline .ant-menu-item,
.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-submenu-title {
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0 16px;
overflow: hidden;
line-height: 40px;
text-overflow: ellipsis;
}
.ant-menu-vertical .ant-menu-submenu,
.ant-menu-vertical-left .ant-menu-submenu,
.ant-menu-vertical-right .ant-menu-submenu,
.ant-menu-inline .ant-menu-submenu {
padding-bottom: 0.02px;
}
.ant-menu-vertical .ant-menu-item:not(:last-child),
.ant-menu-vertical-left .ant-menu-item:not(:last-child),
.ant-menu-vertical-right .ant-menu-item:not(:last-child),
.ant-menu-inline .ant-menu-item:not(:last-child) {
margin-bottom: 8px;
}
.ant-menu-vertical > .ant-menu-item,
.ant-menu-vertical-left > .ant-menu-item,
.ant-menu-vertical-right > .ant-menu-item,
.ant-menu-inline > .ant-menu-item,
.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
height: 40px;
line-height: 40px;
}
.ant-menu-vertical .ant-menu-item-group-list .ant-menu-submenu-title,
.ant-menu-vertical .ant-menu-submenu-title {
padding-right: 34px;
}
.ant-menu-inline {
width: 100%;
}
.ant-menu-inline .ant-menu-selected::after,
.ant-menu-inline .ant-menu-item-selected::after {
transform: scaleY(1);
opacity: 1;
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title {
width: calc(100% + 1px);
}
.ant-menu-inline .ant-menu-item-group-list .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-submenu-title {
padding-right: 34px;
}
.ant-menu-inline.ant-menu-root .ant-menu-item,
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
display: flex;
align-items: center;
transition: border-color 0.3s, background 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ant-menu-inline.ant-menu-root .ant-menu-item > .ant-menu-title-content,
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title > .ant-menu-title-content {
flex: auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ant-menu-inline.ant-menu-root .ant-menu-item > *,
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title > * {
flex: none;
}
.ant-menu.ant-menu-inline-collapsed {
width: 80px;
}
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
left: 0;
padding: 0 calc(50% - 16px / 2);
text-overflow: clip;
}
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item .ant-menu-submenu-arrow,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .ant-menu-submenu-arrow,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow {
opacity: 0;
}
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item .ant-menu-item-icon,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .ant-menu-item-icon,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-item-icon,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-item-icon,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item .anticon,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .anticon,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon {
margin: 0;
font-size: 16px;
line-height: 40px;
}
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item .ant-menu-item-icon + span,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .ant-menu-item-icon + span,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-item-icon + span,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-item-icon + span,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item .anticon + span,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon + span,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span,
.ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
display: inline-block;
opacity: 0;
}
.ant-menu.ant-menu-inline-collapsed .ant-menu-item-icon,
.ant-menu.ant-menu-inline-collapsed .anticon {
display: inline-block;
}
.ant-menu.ant-menu-inline-collapsed-tooltip {
pointer-events: none;
}
.ant-menu.ant-menu-inline-collapsed-tooltip .ant-menu-item-icon,
.ant-menu.ant-menu-inline-collapsed-tooltip .anticon {
display: none;
}
.ant-menu.ant-menu-inline-collapsed-tooltip a {
color: rgba(255, 255, 255, 0.85);
}
.ant-menu.ant-menu-inline-collapsed .ant-menu-item-group-title {
padding-right: 4px;
padding-left: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ant-menu-item-group-list {
margin: 0;
padding: 0;
}
.ant-menu-item-group-list .ant-menu-item,
.ant-menu-item-group-list .ant-menu-submenu-title {
padding: 0 16px 0 28px;
}
.ant-menu-root.ant-menu-vertical,
.ant-menu-root.ant-menu-vertical-left,
.ant-menu-root.ant-menu-vertical-right,
.ant-menu-root.ant-menu-inline {
box-shadow: none;
}
.ant-menu-root.ant-menu-inline-collapsed .ant-menu-item > .ant-menu-inline-collapsed-noicon,
.ant-menu-root.ant-menu-inline-collapsed .ant-menu-submenu .ant-menu-submenu-title > .ant-menu-inline-collapsed-noicon {
font-size: 16px;
text-align: center;
}
.ant-menu-sub.ant-menu-inline {
padding: 0;
background: #fafafa;
border: 0;
border-radius: 0;
box-shadow: none;
}
.ant-menu-sub.ant-menu-inline > .ant-menu-item,
.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
height: 40px;
line-height: 40px;
list-style-position: inside;
list-style-type: disc;
}
.ant-menu-sub.ant-menu-inline .ant-menu-item-group-title {
padding-left: 32px;
}
.ant-menu-item-disabled,
.ant-menu-submenu-disabled {
color: rgba(0, 0, 0, 0.25) !important;
background: none;
cursor: not-allowed;
}
.ant-menu-item-disabled::after,
.ant-menu-submenu-disabled::after {
border-color: transparent !important;
}
.ant-menu-item-disabled a,
.ant-menu-submenu-disabled a {
color: rgba(0, 0, 0, 0.25) !important;
pointer-events: none;
}
.ant-menu-item-disabled > .ant-menu-submenu-title,
.ant-menu-submenu-disabled > .ant-menu-submenu-title {
color: rgba(0, 0, 0, 0.25) !important;
cursor: not-allowed;
}
.ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after {
background: rgba(0, 0, 0, 0.25) !important;
}
.ant-layout-header .ant-menu {
line-height: inherit;
}
.ant-menu-light .ant-menu-item:hover,
.ant-menu-light .ant-menu-item-active,
.ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-light .ant-menu-submenu-active,
.ant-menu-light .ant-menu-submenu-title:hover {
color: #1890ff;
}
.ant-menu.ant-menu-dark,
.ant-menu-dark .ant-menu-sub,
.ant-menu.ant-menu-dark .ant-menu-sub {
color: rgba(255, 255, 255, 0.65);
background: #001529;
}
.ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow {
opacity: 0.45;
transition: all 0.3s;
}
.ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
background: #fff;
}
.ant-menu-dark.ant-menu-submenu-popup {
background: transparent;
}
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
background: #000c17;
}
.ant-menu-dark.ant-menu-horizontal {
border-bottom: 0;
}
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item,
.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
top: 0;
margin-top: 0;
padding: 0 20px;
border-color: #001529;
border-bottom: 0;
}
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
background-color: #1890ff;
}
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item > a::before {
bottom: 0;
}
.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item > a,
.ant-menu-dark .ant-menu-item > span > a {
color: rgba(255, 255, 255, 0.65);
}
.ant-menu-dark.ant-menu-inline,
.ant-menu-dark.ant-menu-vertical,
.ant-menu-dark.ant-menu-vertical-left,
.ant-menu-dark.ant-menu-vertical-right {
border-right: 0;
}
.ant-menu-dark.ant-menu-inline .ant-menu-item,
.ant-menu-dark.ant-menu-vertical .ant-menu-item,
.ant-menu-dark.ant-menu-vertical-left .ant-menu-item,
.ant-menu-dark.ant-menu-vertical-right .ant-menu-item {
left: 0;
margin-left: 0;
border-right: 0;
}
.ant-menu-dark.ant-menu-inline .ant-menu-item::after,
.ant-menu-dark.ant-menu-vertical .ant-menu-item::after,
.ant-menu-dark.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-dark.ant-menu-vertical-right .ant-menu-item::after {
border-right: 0;
}
.ant-menu-dark.ant-menu-inline .ant-menu-item,
.ant-menu-dark.ant-menu-inline .ant-menu-submenu-title {
width: 100%;
}
.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-item-active,
.ant-menu-dark .ant-menu-submenu-active,
.ant-menu-dark .ant-menu-submenu-open,
.ant-menu-dark .ant-menu-submenu-selected,
.ant-menu-dark .ant-menu-submenu-title:hover {
color: #fff;
background-color: transparent;
}
.ant-menu-dark .ant-menu-item:hover > a,
.ant-menu-dark .ant-menu-item-active > a,
.ant-menu-dark .ant-menu-submenu-active > a,
.ant-menu-dark .ant-menu-submenu-open > a,
.ant-menu-dark .ant-menu-submenu-selected > a,
.ant-menu-dark .ant-menu-submenu-title:hover > a,
.ant-menu-dark .ant-menu-item:hover > span > a,
.ant-menu-dark .ant-menu-item-active > span > a,
.ant-menu-dark .ant-menu-submenu-active > span > a,
.ant-menu-dark .ant-menu-submenu-open > span > a,
.ant-menu-dark .ant-menu-submenu-selected > span > a,
.ant-menu-dark .ant-menu-submenu-title:hover > span > a {
color: #fff;
}
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
opacity: 1;
}
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before {
background: #fff;
}
.ant-menu-dark .ant-menu-item:hover {
background-color: transparent;
}
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: #1890ff;
}
.ant-menu-dark .ant-menu-item-selected {
color: #fff;
border-right: 0;
}
.ant-menu-dark .ant-menu-item-selected::after {
border-right: 0;
}
.ant-menu-dark .ant-menu-item-selected > a,
.ant-menu-dark .ant-menu-item-selected > span > a,
.ant-menu-dark .ant-menu-item-selected > a:hover,
.ant-menu-dark .ant-menu-item-selected > span > a:hover {
color: #fff;
}
.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon,
.ant-menu-dark .ant-menu-item-selected .anticon {
color: #fff;
}
.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon + span,
.ant-menu-dark .ant-menu-item-selected .anticon + span {
color: #fff;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
background-color: #1890ff;
}
.ant-menu-dark .ant-menu-item-disabled,
.ant-menu-dark .ant-menu-submenu-disabled,
.ant-menu-dark .ant-menu-item-disabled > a,
.ant-menu-dark .ant-menu-submenu-disabled > a,
.ant-menu-dark .ant-menu-item-disabled > span > a,
.ant-menu-dark .ant-menu-submenu-disabled > span > a {
color: rgba(255, 255, 255, 0.35) !important;
opacity: 0.8;
}
.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title,
.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title {
color: rgba(255, 255, 255, 0.35) !important;
}
.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after {
background: rgba(255, 255, 255, 0.35) !important;
}
.ant-menu.ant-menu-rtl {
direction: rtl;
text-align: right;
}
.ant-menu-rtl .ant-menu-item-group-title {
text-align: right;
}
.ant-menu-rtl.ant-menu-inline,
.ant-menu-rtl.ant-menu-vertical {
border-right: none;
border-left: 1px solid #f0f0f0;
}
.ant-menu-rtl.ant-menu-dark.ant-menu-inline,
.ant-menu-rtl.ant-menu-dark.ant-menu-vertical {
border-left: none;
}
.ant-menu-rtl.ant-menu-vertical.ant-menu-sub > .ant-menu-item,
.ant-menu-rtl.ant-menu-vertical-left.ant-menu-sub > .ant-menu-item,
.ant-menu-rtl.ant-menu-vertical-right.ant-menu-sub > .ant-menu-item,
.ant-menu-rtl.ant-menu-vertical.ant-menu-sub > .ant-menu-submenu,
.ant-menu-rtl.ant-menu-vertical-left.ant-menu-sub > .ant-menu-submenu,
.ant-menu-rtl.ant-menu-vertical-right.ant-menu-sub > .ant-menu-submenu {
transform-origin: top right;
}
.ant-menu-rtl .ant-menu-item .ant-menu-item-icon,
.ant-menu-rtl .ant-menu-submenu-title .ant-menu-item-icon,
.ant-menu-rtl .ant-menu-item .anticon,
.ant-menu-rtl .ant-menu-submenu-title .anticon {
margin-right: auto;
margin-left: 10px;
}
.ant-menu-rtl .ant-menu-item.ant-menu-item-only-child > .ant-menu-item-icon,
.ant-menu-rtl .ant-menu-submenu-title.ant-menu-item-only-child > .ant-menu-item-icon,
.ant-menu-rtl .ant-menu-item.ant-menu-item-only-child > .anticon,
.ant-menu-rtl .ant-menu-submenu-title.ant-menu-item-only-child > .anticon {
margin-left: 0;
}
.ant-menu-submenu-rtl.ant-menu-submenu-popup {
transform-origin: 100% 0;
}
.ant-menu-rtl .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu-rtl .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu-rtl .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu-rtl .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
right: auto;
left: 16px;
}
.ant-menu-rtl .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-rtl .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-rtl .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
transform: rotate(-45deg) translateY(-2px);
}
.ant-menu-rtl .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-rtl .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-rtl .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
transform: rotate(45deg) translateY(2px);
}
.ant-menu-rtl.ant-menu-vertical .ant-menu-item::after,
.ant-menu-rtl.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-rtl.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-rtl.ant-menu-inline .ant-menu-item::after {
right: auto;
left: 0;
}
.ant-menu-rtl.ant-menu-vertical .ant-menu-item,
.ant-menu-rtl.ant-menu-vertical-left .ant-menu-item,
.ant-menu-rtl.ant-menu-vertical-right .ant-menu-item,
.ant-menu-rtl.ant-menu-inline .ant-menu-item,
.ant-menu-rtl.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-rtl.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-rtl.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-rtl.ant-menu-inline .ant-menu-submenu-title {
text-align: right;
}
.ant-menu-rtl.ant-menu-inline .ant-menu-submenu-title {
padding-right: 0;
padding-left: 34px;
}
.ant-menu-rtl.ant-menu-vertical .ant-menu-submenu-title {
padding-right: 16px;
padding-left: 34px;
}
.ant-menu-rtl.ant-menu-inline-collapsed.ant-menu-vertical .ant-menu-submenu-title {
padding: 0 calc(50% - 16px / 2);
}
.ant-menu-rtl .ant-menu-item-group-list .ant-menu-item,
.ant-menu-rtl .ant-menu-item-group-list .ant-menu-submenu-title {
padding: 0 28px 0 16px;
}
.ant-menu-sub.ant-menu-inline {
border: 0;
}
.ant-menu-rtl.ant-menu-sub.ant-menu-inline .ant-menu-item-group-title {
padding-right: 32px;
padding-left: 0;
}
}

59
d2/style/themes/default/src/layout/header-aside/src/style.scss Normal file
View File

@ -0,0 +1,59 @@
html, body, #app {
height: 100%;
width: 100%;
}
@include inLayoutHeaderAside {
#app {
position: relative;
background-color: --var('background-color');
}
.#{$classname}__body {
position: absolute;
>.body__scroll {
@apply w-full h-full;
}
}
.#{$classname}__header {
@apply box-content absolute top-0 right-0 cursor-pointer select-none;
height: --var('header-height');
>.header__column {
>.header__button {
@apply transition-colors bg-transparent;
font-size: --var('font-size');
&.header__button--icon {
min-width: --var('header-height');
}
&.header__button--text {
line-height: --var('header-height');
padding: 0 calc((#{--var('header-height')} - #{--var('font-size')}) / 2);
}
&:hover {
@apply bg-gray-100;
}
&:active {
@apply bg-gray-200;
}
}
}
}
.#{$classname}__aside {
@apply box-content absolute top-0 bottom-0 left-0 cursor-pointer select-none;
>.aside__header {
@apply box-content;
min-height: --var('header-height');
}
>.aside__body {
>.aside__scroll {
@apply w-full h-full;
}
}
>.aside__footer {
@apply box-content;
min-height: --var('header-height');
}
}
}

31
d2/style/themes/default/src/layout/header-aside/src/var.scss Normal file
View File

@ -0,0 +1,31 @@
$classname: '#{$namespace}-layout-header-aside';
@function --key ($name) {
@return --d2-admin-layout-header-aside-#{$name};
}
@function --var ($name) {
@return var(#{--key($name)});
}
@mixin inLayoutHeaderAside () {
body.#{$classname} {
@content;
}
}
:root {
// background
#{--key('background-color')}: #ECF1F6;
#{--key('background-color-lighten-1')}: #F6F8FB;
#{--key('background-color-lighten-2')}: #FCFCFC;
// text
#{--key('text-color')}: indigo;
#{--key('text-color-darken-1')}: red;
#{--key('text-color-darken-2')}: green;
// border
#{--key('border-color')}: #CFD7E5;
// size
#{--key('font-size')}: 14px;
#{--key('header-height')}: 46px;
}

1
d2/style/utils/index.scss
View File

@ -1 +1,2 @@
@import './var.scss';
@import './bem.scss';

0
d2/style/themes/default/src/base/var.scss → d2/style/utils/var.scss
View File