Skip to content

Commit

Permalink
feat(styles): ✨ add css var font-size
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsxiaosi
jsxiaosi committed Nov 1, 2022
1 parent 5879e7b commit e128762
Show file tree
Hide file tree
Showing 17 changed files with 91 additions and 53 deletions.
1 change: 1 addition & 0 deletions src/assets/icons/login_Illustration.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/assets/login/illustration.svg
View file

This file was deleted.

4 changes: 2 additions & 2 deletions src/layouts/pageLayouts/components/AppTabs/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@
box-shadow: 0px 0px 12px rgb(28 29 30 / 8%);
.right-view-item {
padding: 5px 10px;
font-size: 14px;
font-size: var(--font-size-base);
display: flex;
align-items: center;
border-radius: 5px;
Expand All @@ -203,7 +203,7 @@
height: 100%;
text-align: center;
line-height: $tabsPageHeight;
font-size: 16px;
font-size: var(--font-size-medium);
border: 1px solid var(--border-color-light);
.action-item {
height: $tabsPageHeight;
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/pageLayouts/components/Breadcrumb/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
.breadcrumb-icon {
margin-right: 20px;
font-size: 20px;
font-size: var(--font-size-extra-large);
}
.breadcrumb-fold {
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/pageLayouts/components/Navbart/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
.icon {
margin-left: 12px;
font-size: 20px;
font-size: var(--font-size-extra-large);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/layouts/pageLayouts/components/Seting/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
justify-content: space-around;
.sidebar_mode-select {
border: 2px solid var(--mian-color);
border: 2px solid var(--main-color);
}
.sidebar_mode {
Expand All @@ -133,7 +133,7 @@
&:nth-child(1) {
width: 30%;
height: 100%;
background: var(--mian-color);
background: var(--main-color);
}
&:nth-child(2) {
Expand All @@ -153,7 +153,7 @@
&:nth-child(1) {
width: 100%;
height: 30%;
background: var(--mian-color);
background: var(--main-color);
box-shadow: 0 0 1px #888;
}
}
Expand All @@ -173,7 +173,7 @@
right: 0;
width: 100%;
height: 30%;
background: var(--mian-color);
background: var(--main-color);
box-shadow: 0 0 1px #888;
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/styles/element/el-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ $tabsPageHeight: 38px; //面包屑高度 38px

$menuBg: var(--main-bg-color); // 侧边栏背景颜色
$menuHover: var(--sub-color-9); // 焦点背景色
$menuHoverText: var(--mian-color); //焦点文字颜色
$menuHoverText: var(--main-color); //焦点文字颜色
$menuText: var(--text-color-primary); //文字颜色
$menuActiveText: var(--mian-color); //选中的文字颜色
$menuActiveText: var(--main-color); //选中的文字颜色

$menuItemBg: var(--main-bg-color); //二级背景颜色
$menuItemBorderLeft: var(--main-bg-color); //二级未选中的背景颜色
$menuItemText: var(--text-color-primary); //二级文字颜色
$menuItemHover: var(--sub-color-9); //二级焦点背景颜色
$menuItemHoverText: var(--mian-color); //二级焦点文字颜色
$menuItemActiveText: var(--mian-color); //二级选中的背景颜色
$menuItemHoverText: var(--main-color); //二级焦点文字颜色
$menuItemActiveText: var(--main-color); //二级选中的背景颜色
$menuItemActiveBg: var(--sub-color-8); //二级选中背景颜色
$menuItemActiveBorderLeft: var(--mian-color); //二级左描边背景颜色
$menuItemActiveBorderLeft: var(--main-color); //二级左描边背景颜色

$app-main-bg-color: var(--sub-main-bg-content); //app-mian背景颜色
$navBarColor: var(--main-bg-color); //顶部导航栏背景颜色
Expand Down
4 changes: 2 additions & 2 deletions src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ body {
height: 100%;
padding: 0;
margin: 0;
font-size: var(--el-font-size-base);
font-size: var(--font-size-base);
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
sans-serif;
-moz-osx-font-smoothing: grayscale;
Expand Down Expand Up @@ -68,7 +68,7 @@ div:focus {

.title {
display: inline-block;
font-size: 18px;
font-size: var(--font-size-large);
font-weight: 700;
// margin: 10px 0;
}
Expand Down
4 changes: 2 additions & 2 deletions src/styles/intro.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
border: 1px solid var(--text-color-primary);
text-shadow: none;
&:hover {
color: var(--mian-color);
color: var(--main-color);
}
}
}
Expand All @@ -15,7 +15,7 @@
background-color: #{--main-bg-color};
border: 1px solid var(--text-color-primary);
.introjs-skipbutton {
font-size: 14px;
font-size: var(--font-size-base);
}
}

Expand Down
8 changes: 4 additions & 4 deletions src/styles/nprogress.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}

#nprogress .bar {
background: var(--mian-color);
background: var(--main-color);

position: fixed;
z-index: 1031;
Expand All @@ -22,7 +22,7 @@
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px var(--mian-color), 0 0 5px var(--mian-color);
box-shadow: 0 0 10px var(--main-color), 0 0 5px var(--main-color);
opacity: 1;

-webkit-transform: rotate(3deg) translate(0px, -4px);
Expand All @@ -45,8 +45,8 @@
box-sizing: border-box;

border: solid 2px transparent;
border-top-color: var(--mian-color);
border-left-color: var(--mian-color);
border-top-color: var(--main-color);
border-left-color: var(--main-color);
border-radius: 50%;

-webkit-animation: nprogress-spinner 400ms linear infinite;
Expand Down
8 changes: 4 additions & 4 deletions src/styles/sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@

.menu-item-svg {
margin-right: 16px;
font-size: 18px;
font-size: var(--font-size-large);
line-height: 0;
color: $menuItemText;
}
Expand Down Expand Up @@ -146,7 +146,7 @@

.sub-menu-svg {
margin-right: 16px;
font-size: 18px;
font-size: var(--font-size-large);
line-height: 0;
color: $menuText;
}
Expand Down Expand Up @@ -279,7 +279,7 @@

.sub-menu-svg {
margin-right: 10px;
font-size: 18px;
font-size: var(--font-size-large);
line-height: 0;
// color: $menuText;
}
Expand Down Expand Up @@ -309,7 +309,7 @@

.menu-item-svg {
margin-right: 16px;
font-size: 18px;
font-size: var(--font-size-large);
line-height: 0;
color: $menuItemText;
}
Expand Down
16 changes: 13 additions & 3 deletions src/styles/theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/* 根据element 主题统一配色 */
/* 根据element 主题统一配色 不在页面内直接使用element css 变量是为了更好的统一管理*/
:root {
// 统一颜色主题
--color-white: #ffffff;
--mian-color: var(--el-color-primary); //主色
--main-color: var(--el-color-primary); //主色
--sub-color: var(--el-color-primary-light-5); //浅蓝1
--sub-color-8: var(--el-color-primary-light-8); //浅蓝2
--sub-color-9: var(--el-color-primary-light-9); //浅蓝2

// 主题背景颜色
// 背景颜色
--main-bg-color: #ffffff; // 首选背景颜色
--sub-main-bg-content: #f5f6fa; //次选背景颜色

Expand All @@ -16,7 +16,17 @@
--text-color-regular: var(--el-text-color-regular); // 次选文字颜色
--text-color-placeholder: var(--el-text-color-placeholder); //分割线/备注
--text-color-disabled: var(--el-text-color-disabled);

// border-color
--border-color-light: var(--el-border-color-light);

// 文字大小
--font-size-extra-large: var(--el-font-size-extra-large); // 超大号字体
--font-size-large: var(--el-font-size-large); //大号字体
--font-size-medium: var(--el-font-size-medium); // 中等字体
--font-size-base: var(--el-font-size-base); // 基本字体
--font-size-small: var(--el-font-size-small); //小号字体
--font-size-extra-small: var(--el-font-size-extra-small); //超小号字体
}

html.dark {
Expand Down
Loading

0 comments on commit e128762

Please sign in to comment.