mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-15 14:03:36 +08:00
refactor: 升级vite至v6版本，升级sass至最新版，重构主题写法，弃用@pureadmin/theme (#1188)
* refactor: 升级`vite`至`v6`版本，升级`sass`至最新版，重构主题写法，删除`@pureadmin/theme`
This commit is contained in:
xiaoming
GitHub
@@ -1,7 +1,8 @@
|
||||
@import "./transition";
|
||||
@import "./element-plus";
|
||||
@import "./sidebar";
|
||||
@import "./dark";
|
||||
@use "theme";
|
||||
@use "transition";
|
||||
@use "element-plus";
|
||||
@use "sidebar";
|
||||
@use "dark";
|
||||
|
||||
/* 自定义全局 CssVar */
|
||||
:root {
|
||||
@@ -13,6 +14,16 @@
|
||||
|
||||
/* switch关闭状态下的color 需要时可取用 */
|
||||
--pure-switch-off-color: #a6a6a6;
|
||||
|
||||
/** 主题色 */
|
||||
--pure-theme-sub-menu-active-text: initial;
|
||||
--pure-theme-menu-bg: none;
|
||||
--pure-theme-menu-hover: none;
|
||||
--pure-theme-sub-menu-bg: transparent;
|
||||
--pure-theme-menu-text: initial;
|
||||
--pure-theme-sidebar-logo: none;
|
||||
--pure-theme-menu-title-hover: initial;
|
||||
--pure-theme-menu-active-before: transparent;
|
||||
}
|
||||
|
||||
/* 灰色模式 */
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
font-size: 0;
|
||||
background: $menuBg;
|
||||
background: var(--pure-theme-menu-bg);
|
||||
border-right: 1px solid var(--pure-border-color);
|
||||
|
||||
/* 展开动画 */
|
||||
@@ -150,11 +150,11 @@
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 50px;
|
||||
color: $menuText;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
|
||||
div,
|
||||
@@ -173,15 +173,15 @@
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: $sideBarWidth !important;
|
||||
font-size: 14px;
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
}
|
||||
|
||||
/* 有子集的激活菜单左侧小竖条 */
|
||||
@@ -218,7 +218,7 @@
|
||||
height: 100%;
|
||||
clear: both;
|
||||
content: "";
|
||||
background-color: $menuActiveBefore;
|
||||
background-color: var(--pure-theme-menu-active-before);
|
||||
transition: all var(--pure-transition-duration) ease-in-out;
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -253,7 +253,7 @@
|
||||
/* vertical 菜单折叠 */
|
||||
.el-menu--vertical {
|
||||
.el-menu--popup {
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
|
||||
.el-menu-item {
|
||||
span {
|
||||
@@ -271,10 +271,10 @@
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -282,23 +282,23 @@
|
||||
.el-menu .el-sub-menu__title {
|
||||
min-width: $sideBarWidth !important;
|
||||
font-size: 14px;
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: $menuText;
|
||||
background-color: $subMenuBg;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: var(--pure-theme-sub-menu-bg);
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
@@ -342,15 +342,15 @@
|
||||
}
|
||||
|
||||
.el-menu--popup {
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
|
||||
a > .is-active.submenu-title-noDropdown {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: $menuText;
|
||||
background-color: $subMenuBg;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: var(--pure-theme-sub-menu-bg);
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
@@ -358,7 +358,7 @@
|
||||
}
|
||||
|
||||
.el-sub-menu__title {
|
||||
color: $menuText;
|
||||
color: var(--pure-theme-menu-text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -366,31 +366,31 @@
|
||||
.el-menu .el-sub-menu__title {
|
||||
min-width: $sideBarWidth !important;
|
||||
font-size: 14px;
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
@@ -415,7 +415,7 @@
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: $menuBg;
|
||||
background: var(--pure-theme-menu-bg);
|
||||
|
||||
.horizontal-header-left {
|
||||
display: flex;
|
||||
@@ -440,7 +440,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -458,7 +458,7 @@
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 340px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
|
||||
/* 搜索 */
|
||||
.search-container,
|
||||
@@ -473,20 +473,20 @@
|
||||
/* 设置 */
|
||||
.set-icon {
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
background: var(--pure-theme-menu-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-badge {
|
||||
height: 48px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
}
|
||||
|
||||
.globalization {
|
||||
width: 40px;
|
||||
height: 48px;
|
||||
padding: 11px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
@@ -497,7 +497,7 @@
|
||||
justify-content: space-around;
|
||||
height: 48px;
|
||||
padding: 10px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
@@ -522,10 +522,10 @@
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
padding-right: var(--el-menu-base-level-padding);
|
||||
color: $menuText;
|
||||
color: var(--pure-theme-menu-text);
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -533,7 +533,7 @@
|
||||
.el-sub-menu__title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: $menuBg;
|
||||
background: var(--pure-theme-menu-bg);
|
||||
|
||||
svg {
|
||||
position: static !important;
|
||||
@@ -542,15 +542,15 @@
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
@@ -596,7 +596,7 @@ body[layout="vertical"] {
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
background: $sidebarLogo;
|
||||
background: var(--pure-theme-sidebar-logo);
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
|
||||
95
src/style/theme.scss
Normal file
95
src/style/theme.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
/* 亮白色 */
|
||||
html[data-theme="light"] {
|
||||
--pure-theme-sub-menu-active-text: #000000d9;
|
||||
--pure-theme-menu-bg: #fff;
|
||||
--pure-theme-menu-hover: #f6f6f6;
|
||||
--pure-theme-sub-menu-bg: #fff;
|
||||
--pure-theme-menu-text: rgb(0 0 0 / 60%);
|
||||
--pure-theme-sidebar-logo: #fff;
|
||||
--pure-theme-menu-title-hover: #000;
|
||||
--pure-theme-menu-active-before: #4091f7;
|
||||
}
|
||||
|
||||
/* 道奇蓝 */
|
||||
html[data-theme="default"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #001529;
|
||||
--pure-theme-menu-hover: rgb(64 145 247 / 15%);
|
||||
--pure-theme-sub-menu-bg: #0f0303;
|
||||
--pure-theme-menu-text: rgb(254 254 254 / 65%);
|
||||
--pure-theme-sidebar-logo: #002140;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #4091f7;
|
||||
}
|
||||
|
||||
/* 深紫罗兰色 */
|
||||
html[data-theme="saucePurple"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #130824;
|
||||
--pure-theme-menu-hover: rgb(105 58 201 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #1f0c38;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #693ac9;
|
||||
}
|
||||
|
||||
/* 深粉色 */
|
||||
html[data-theme="pink"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #28081a;
|
||||
--pure-theme-menu-hover: rgb(216 68 147 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #3f0d29;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #d84493;
|
||||
}
|
||||
|
||||
/* 猩红色 */
|
||||
html[data-theme="dusk"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #2a0608;
|
||||
--pure-theme-menu-hover: rgb(225 60 57 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: rgb(254 254 254 / 65.1%);
|
||||
--pure-theme-sidebar-logo: #42090c;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #e13c39;
|
||||
}
|
||||
|
||||
/* 橙红色 */
|
||||
html[data-theme="volcano"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #2b0e05;
|
||||
--pure-theme-menu-hover: rgb(232 95 51 / 15%);
|
||||
--pure-theme-sub-menu-bg: #0f0603;
|
||||
--pure-theme-menu-text: rgb(254 254 254 / 65%);
|
||||
--pure-theme-sidebar-logo: #441708;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #e85f33;
|
||||
}
|
||||
|
||||
/* 绿宝石 */
|
||||
html[data-theme="mingQing"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #032121;
|
||||
--pure-theme-menu-hover: rgb(89 191 193 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #053434;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #59bfc1;
|
||||
}
|
||||
|
||||
/* 酸橙绿 */
|
||||
html[data-theme="auroraGreen"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #0b1e15;
|
||||
--pure-theme-menu-hover: rgb(96 172 128 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #112f21;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #60ac80;
|
||||
}
|
||||
Reference in New Issue
Block a user