feat: style
This commit is contained in:
FairyEver
parent
0c6b9a1046
commit
60b11927bd
|
|
@ -33,16 +33,16 @@
|
|||
</d2-flex>
|
||||
</d2-flex>
|
||||
</d2-flex>
|
||||
<d2-flex class="layout__aside" :style="asideStyle" dir="top" box="justify">
|
||||
<d2-flex class="aside__header" center>
|
||||
<d2-flex class="layout__side" :style="sideStyle" dir="top" box="justify">
|
||||
<d2-flex class="side__header" center>
|
||||
Hello World
|
||||
</d2-flex>
|
||||
<d2-flex class="aside__body" block>
|
||||
<d2-scroll class="aside__scroll">
|
||||
<d2-admin-layout-dashboard-menu-aside/>
|
||||
<d2-flex class="side__body" block>
|
||||
<d2-scroll class="side__scroll">
|
||||
<d2-admin-layout-dashboard-menu-side/>
|
||||
</d2-scroll>
|
||||
</d2-flex>
|
||||
<d2-flex class="aside__footer" center>
|
||||
<d2-flex class="side__footer" center>
|
||||
footer
|
||||
</d2-flex>
|
||||
</d2-flex>
|
||||
|
|
@ -72,23 +72,23 @@ export default {
|
|||
} = storeToRefs(d2AdminUserStore)
|
||||
|
||||
const headerHeight = ref(50)
|
||||
const asideWidth = ref(200)
|
||||
const sideWidth = ref(200)
|
||||
|
||||
const { style: bodyStyle } = useCssPosition(headerHeight, 0, 0, asideWidth)
|
||||
const { style: bodyStyle } = useCssPosition(headerHeight, 0, 0, sideWidth)
|
||||
|
||||
const headerStyle = computed(() => ({
|
||||
left: cssUnit(asideWidth)
|
||||
left: cssUnit(sideWidth)
|
||||
}))
|
||||
|
||||
const asideStyle = computed(() => ({
|
||||
width: cssUnit(asideWidth)
|
||||
const sideStyle = computed(() => ({
|
||||
width: cssUnit(sideWidth)
|
||||
}))
|
||||
|
||||
return {
|
||||
classname,
|
||||
bodyStyle,
|
||||
headerStyle,
|
||||
asideStyle,
|
||||
sideStyle,
|
||||
userAvatar,
|
||||
userName
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export const demoComponentMenus = new Menu('组件')
|
|||
|
||||
export const demoLayoutDashboardMenus = new Menu('LayoutDashboard')
|
||||
.icon('icon-park-outline:page')
|
||||
.scope('/dashboard/demo/layout/header-aside')
|
||||
.scope('/dashboard/demo/layout/header-side')
|
||||
.add(new Menu('概览').index())
|
||||
.add(new Menu('基础').url('/base'))
|
||||
.add(new Menu('absolute').url('/absolute'))
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@import './src/var.scss';
|
||||
@import './src/style.scss';
|
||||
@import './src/rewrite/ant-menu.scss';
|
||||
@import './src/menu.scss';
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
// font-feature-settings: 'tnum';
|
||||
// margin-bottom: 0;
|
||||
// padding-left: 0;
|
||||
color: --var('color-text-menu'); // color: rgba(0, 0, 0, 0.85);
|
||||
color: --var('color-text-item'); // color: rgba(0, 0, 0, 0.85);
|
||||
// font-size: 14px;
|
||||
// line-height: 0;
|
||||
// text-align: left;
|
||||
|
|
@ -87,6 +87,11 @@
|
|||
.ant-menu-overflow-item {
|
||||
// flex: none;
|
||||
}
|
||||
// new
|
||||
.ant-menu-overflow-item-rest {
|
||||
// padding: 0;
|
||||
}
|
||||
// new end
|
||||
.ant-menu-hidden,
|
||||
.ant-menu-submenu-hidden {
|
||||
// display: none;
|
||||
|
|
@ -107,25 +112,25 @@
|
|||
// 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: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-item:active,
|
||||
.ant-menu-submenu-title:active {
|
||||
background: --var('color-bg-menu-hover'); // background: #e6f7ff;
|
||||
background: --var('color-bg-item-hover'); // background: #e6f7ff;
|
||||
}
|
||||
.ant-menu-item:hover,
|
||||
.ant-menu-submenu-title:hover {
|
||||
background: --var('color-bg-menu-hover'); // background: #e6f7ff;
|
||||
background: --var('color-bg-item-hover'); // 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: --var('color-text-menu'); // color: rgba(0, 0, 0, 0.85);
|
||||
color: --var('color-text-item'); // color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.ant-menu-item a:hover {
|
||||
color: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-item a::before {
|
||||
// position: absolute;
|
||||
|
|
@ -137,10 +142,10 @@
|
|||
// content: '';
|
||||
}
|
||||
.ant-menu-item > .ant-badge a {
|
||||
color: --var('color-text-menu'); // color: rgba(0, 0, 0, 0.85);
|
||||
color: --var('color-text-item'); // color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.ant-menu-item > .ant-badge a:hover {
|
||||
color: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-item-divider {
|
||||
// height: 1px;
|
||||
|
|
@ -158,14 +163,14 @@
|
|||
// background-color: transparent;
|
||||
}
|
||||
.ant-menu-item-selected {
|
||||
color: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-item-selected a,
|
||||
.ant-menu-item-selected a:hover {
|
||||
color: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: --var('color-bg-menu-selected'); // background-color: #e6f7ff;
|
||||
background-color: --var('color-bg-item-selected'); // background-color: #e6f7ff;
|
||||
}
|
||||
.ant-menu-inline,
|
||||
.ant-menu-vertical,
|
||||
|
|
@ -297,7 +302,7 @@
|
|||
// transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.ant-menu-submenu-popup > .ant-menu {
|
||||
background-color: --var('color-bg-menu-popup'); // background-color: #fff;
|
||||
background-color: --var('color-bg-item-popup'); // background-color: #fff;
|
||||
}
|
||||
.ant-menu-submenu-expand-icon,
|
||||
.ant-menu-submenu-arrow {
|
||||
|
|
@ -305,7 +310,7 @@
|
|||
// top: 50%;
|
||||
// right: 16px;
|
||||
// width: 10px;
|
||||
color: --var('color-text-menu'); // color: rgba(0, 0, 0, 0.85);
|
||||
color: --var('color-text-item'); // color: rgba(0, 0, 0, 0.85);
|
||||
// transform: translateY(-50%);
|
||||
// transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
|
@ -327,7 +332,7 @@
|
|||
}
|
||||
.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: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-inline-collapsed .ant-menu-submenu-arrow::before,
|
||||
.ant-menu-submenu-inline .ant-menu-submenu-arrow::before {
|
||||
|
|
@ -352,7 +357,7 @@
|
|||
.ant-menu-vertical .ant-menu-submenu-selected,
|
||||
.ant-menu-vertical-left .ant-menu-submenu-selected,
|
||||
.ant-menu-vertical-right .ant-menu-submenu-selected {
|
||||
color: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
line-height: --var('header-menu-line-height'); // line-height: 46px;
|
||||
|
|
@ -374,7 +379,7 @@
|
|||
.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: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-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,
|
||||
|
|
@ -386,29 +391,29 @@
|
|||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
|
||||
border-bottom: none; // border-bottom: 2px solid #1890ff;
|
||||
}
|
||||
// ---- new style ----
|
||||
// ---- new ----
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected {
|
||||
background-color: --var('color-bg-menu-selected');
|
||||
background-color: --var('color-bg-item-selected');
|
||||
}
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:not(.ant-menu-item-selected):hover,
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:not(.ant-menu-submenu-selected):hover {
|
||||
background-color: --var('color-bg-menu-hover');
|
||||
background-color: --var('color-bg-item-hover');
|
||||
}
|
||||
// ---- new style end ----
|
||||
// ---- new end ----
|
||||
.ant-menu-horizontal > .ant-menu-item,
|
||||
.ant-menu-horizontal > .ant-menu-submenu {
|
||||
// position: relative;
|
||||
top: 0px; // top: 1px;
|
||||
// display: inline-block;
|
||||
// vertical-align: bottom;
|
||||
// ---- new style ----
|
||||
border-radius: --var('menu-radius');
|
||||
// ---- new ----
|
||||
border-radius: --var('header-menu-radius');
|
||||
margin: --var('header-menu-margin-y') 0;
|
||||
&:not(:last-child) {
|
||||
margin-right: --var('header-menu-margin-x');
|
||||
}
|
||||
// ---- new style end ----
|
||||
// ---- new end ----
|
||||
}
|
||||
.ant-menu-horizontal > .ant-menu-item::after,
|
||||
.ant-menu-horizontal > .ant-menu-submenu::after {
|
||||
|
|
@ -424,16 +429,16 @@
|
|||
// padding: 0;
|
||||
}
|
||||
.ant-menu-horizontal > .ant-menu-item a {
|
||||
color: --var('color-text-menu'); // color: rgba(0, 0, 0, 0.85);
|
||||
color: --var('color-text-item'); // color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.ant-menu-horizontal > .ant-menu-item a:hover {
|
||||
color: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-horizontal > .ant-menu-item a::before {
|
||||
// bottom: -2px;
|
||||
}
|
||||
.ant-menu-horizontal > .ant-menu-item-selected a {
|
||||
color: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu-horizontal::after {
|
||||
// display: block;
|
||||
|
|
@ -470,11 +475,11 @@
|
|||
.ant-menu-vertical-right .ant-menu-submenu-title,
|
||||
.ant-menu-inline .ant-menu-submenu-title {
|
||||
// height: 40px;
|
||||
margin-top: --var('aside-menu-margin-y'); // margin-top: 4px;
|
||||
margin-bottom: --var('aside-menu-margin-y'); // margin-bottom: 4px;
|
||||
margin-right: --var('aside-menu-margin-x'); // new
|
||||
margin-left: --var('aside-menu-margin-x'); // new
|
||||
border-radius: --var('menu-radius'); // new
|
||||
margin-top: --var('side-menu-margin-y'); // margin-top: 4px;
|
||||
margin-bottom: --var('side-menu-margin-y'); // margin-bottom: 4px;
|
||||
margin-right: --var('side-menu-margin-x'); // new
|
||||
margin-left: --var('side-menu-margin-x'); // new
|
||||
border-radius: --var('header-menu-radius'); // new
|
||||
// padding: 0 16px;
|
||||
// overflow: hidden;
|
||||
// line-height: 40px;
|
||||
|
|
@ -490,7 +495,7 @@
|
|||
.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: --var('aside-menu-margin-y'); // margin-bottom: 8px;
|
||||
margin-bottom: --var('side-menu-margin-y'); // margin-bottom: 8px;
|
||||
}
|
||||
.ant-menu-vertical > .ant-menu-item,
|
||||
.ant-menu-vertical-left > .ant-menu-item,
|
||||
|
|
@ -672,7 +677,7 @@
|
|||
.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: --var('color-text-menu-selected'); // color: #1890ff;
|
||||
color: --var('color-text-item-selected'); // color: #1890ff;
|
||||
}
|
||||
.ant-menu.ant-menu-dark,
|
||||
.ant-menu-dark .ant-menu-sub,
|
||||
|
|
@ -712,7 +717,7 @@
|
|||
// border-bottom: 0;
|
||||
}
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
|
||||
background-color: --var('color-text-menu-selected'); // background-color: #1890ff;
|
||||
background-color: --var('color-text-item-selected'); // background-color: #1890ff;
|
||||
}
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item > a::before {
|
||||
// bottom: 0;
|
||||
|
|
@ -796,7 +801,7 @@
|
|||
// background-color: transparent;
|
||||
}
|
||||
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: --var('color-text-menu-selected'); // background-color: #1890ff;
|
||||
background-color: --var('color-text-item-selected'); // background-color: #1890ff;
|
||||
}
|
||||
.ant-menu-dark .ant-menu-item-selected {
|
||||
// color: #fff;
|
||||
|
|
@ -821,7 +826,7 @@
|
|||
}
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected,
|
||||
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
|
||||
background-color: --var('color-text-menu-selected'); // background-color: #1890ff;
|
||||
background-color: --var('color-text-item-selected'); // background-color: #1890ff;
|
||||
}
|
||||
.ant-menu-dark .ant-menu-item-disabled,
|
||||
.ant-menu-dark .ant-menu-submenu-disabled,
|
||||
|
|
@ -20,43 +20,43 @@ html, body, #app {
|
|||
@apply box-content absolute top-0 right-0 cursor-pointer select-none;
|
||||
height: --var('header-height');
|
||||
>.header__button-group {
|
||||
padding: 0 calc(#{--var('header-menu-margin-x')} / 2);
|
||||
padding: 0 calc(#{--var('header-button-margin-x')} / 2);
|
||||
>.header__button {
|
||||
@apply transition-colors bg-transparent;
|
||||
font-size: --var('font-size');
|
||||
height: --var('header-menu-line-height');
|
||||
margin: --var('header-menu-margin-y') calc(#{--var('header-menu-margin-x')} / 2);
|
||||
border-radius: --var('menu-radius');
|
||||
height: --var('header-button-line-height');
|
||||
margin: --var('header-button-margin-y') calc(#{--var('header-button-margin-x')} / 2);
|
||||
border-radius: --var('header-button-radius');
|
||||
&.header__button--icon {
|
||||
min-width: --var('header-menu-line-height');
|
||||
min-width: --var('header-button-line-height');
|
||||
}
|
||||
&.header__button--text {
|
||||
line-height: --var('header-menu-line-height');
|
||||
padding: 0 calc((#{--var('header-menu-line-height')} - #{--var('font-size')}) / 2);
|
||||
line-height: --var('header-button-line-height');
|
||||
padding: 0 calc((#{--var('header-button-line-height')} - #{--var('font-size')}) / 2);
|
||||
}
|
||||
&:hover {
|
||||
background-color: --var('color-bg-menu-hover');
|
||||
background-color: --var('color-bg-item-hover');
|
||||
}
|
||||
&:active {
|
||||
background-color: --var('color-bg-menu-selected');
|
||||
color: --var('color-text-menu-selected');
|
||||
background-color: --var('color-bg-item-selected');
|
||||
color: --var('color-text-item-selected');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout__aside {
|
||||
.layout__side {
|
||||
@apply box-content absolute top-0 bottom-0 left-0 cursor-pointer select-none;
|
||||
>.aside__header {
|
||||
>.side__header {
|
||||
@apply box-content;
|
||||
min-height: --var('header-height');
|
||||
}
|
||||
>.aside__body {
|
||||
>.aside__scroll {
|
||||
>.side__body {
|
||||
>.side__scroll {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
}
|
||||
>.aside__footer {
|
||||
>.side__footer {
|
||||
@apply box-content;
|
||||
min-height: --var('header-height');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,21 +17,29 @@ $classname: '#{$namespace}-layout-dashboard';
|
|||
:root {
|
||||
// color
|
||||
#{--key('color-bg-app')}: #ECF1F6;
|
||||
#{--key('color-bg-menu-hover')}: #F6F8FB;
|
||||
#{--key('color-bg-menu-selected')}: #FFFFFF;
|
||||
#{--key('color-bg-menu-popup')}: #FFFFFF;
|
||||
#{--key('color-text-menu')}: #606266;
|
||||
#{--key('color-text-menu-selected')}: #2F74FF;
|
||||
#{--key('color-border')}: #CFD7E5;
|
||||
#{--key('color-bg-item-hover')}: #F6F8FB;
|
||||
#{--key('color-bg-item-selected')}: #FFFFFF;
|
||||
#{--key('color-bg-item-popup')}: #FFFFFF;
|
||||
#{--key('color-text-item')}: #606266;
|
||||
#{--key('color-text-item-selected')}: #2F74FF;
|
||||
// size
|
||||
#{--key('font-size')}: 14px;
|
||||
#{--key('menu-radius')}: 4px;
|
||||
#{--key('radius')}: 4px;
|
||||
// header
|
||||
#{--key('header-height')}: 50px;
|
||||
#{--key('header-menu-line-height')}: 40px;
|
||||
#{--key('header-line-height')}: 40px;
|
||||
#{--key('header-item-radius')}: --var('radius');
|
||||
// header menu
|
||||
#{--key('header-menu-radius')}: --var('header-item-radius');
|
||||
#{--key('header-menu-line-height')}: --var('header-line-height');
|
||||
#{--key('header-menu-margin-y')}: calc((#{--var('header-height')} - #{--var('header-menu-line-height')}) / 2);
|
||||
#{--key('header-menu-margin-x')}: --var('header-menu-margin-y');
|
||||
// aside
|
||||
#{--key('aside-menu-margin-x')}: --var('header-menu-margin-x');
|
||||
#{--key('aside-menu-margin-y')}: --var('header-menu-margin-y');
|
||||
// header button
|
||||
#{--key('header-button-radius')}: --var('header-item-radius');
|
||||
#{--key('header-button-line-height')}: --var('header-line-height');
|
||||
#{--key('header-button-margin-y')}: calc((#{--var('header-height')} - #{--var('header-button-line-height')}) / 2);
|
||||
#{--key('header-button-margin-x')}: --var('header-button-margin-y');
|
||||
// side
|
||||
#{--key('side-menu-margin-x')}: --var('header-menu-margin-x');
|
||||
#{--key('side-menu-margin-y')}: --var('header-menu-margin-y');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue