JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

refactor(editor): scss中使用use替换import

Browse Source
This commit is contained in:
roymondchen 2024-12-13 16:39:55 +08:00
parent cf104e64aa
commit 6cf20cee34
14 changed files with 120 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/editor/src/theme/common/var.scss
View File

@ -1,14 +1,14 @@
$--theme-color: #2882e0;
$theme-color: #2882e0;
$--font-color: #313a40;
$--border-color: #d9dbdd;
$--hover-color: #f3f5f9;
$font-color: #313a40;
$border-color: #d9dbdd;
$hover-color: #f3f5f9;
$--nav-height: 35px;
$--nav-color: #313a40;
$--nav--background-color: #ffffff;
$nav-height: 35px;
$nav-color: #313a40;
$nav--background-color: #ffffff;
$--sidebar-heder-background-color: $--theme-color;
$--sidebar-content-background-color: #ffffff;
$sidebar-heder-background-color: $theme-color;
$sidebar-content-background-color: #ffffff;
$--page-bar-height: 32px;
$page-bar-height: 32px;

16
packages/editor/src/theme/component-list-panel.scss
View File

@ -1,20 +1,22 @@
@use "common/var" as *;
.ui-component-panel {
&.tmagic-design-collapse {
border-top: 0 !important;
margin-top: 48px;
background-color: $--sidebar-content-background-color;
background-color: $sidebar-content-background-color;
.tmagic-design-collapse-item {
> div:first-of-type {
border-bottom: 1px solid $--border-color;
border-bottom: 1px solid $border-color;
margin-bottom: 10px;
}
}
.el-collapse-item__header,
.t-collapse-panel__header {
background: $--sidebar-content-background-color;
color: $--font-color;
background: $sidebar-content-background-color;
color: $font-color;
height: 25px;
line-height: 25px;
padding-left: 10px;
@ -28,7 +30,7 @@
.el-collapse-item__wrap,
.t-collapse-panel__body {
background: $--sidebar-content-background-color;
background: $sidebar-content-background-color;
border-bottom: 0;
.el-collapse-item__content,
@ -44,7 +46,7 @@
text-overflow: ellipsis;
margin: 5px 10px;
box-sizing: border-box;
color: $--font-color;
color: $font-color;
flex-direction: column;
width: 42px;
cursor: pointer;
@ -57,7 +59,7 @@
line-height: 40px;
border-radius: 5px;
color: #909090;
border: 1px solid $--border-color;
border: 1px solid $border-color;
display: flex;
justify-content: space-evenly;
align-items: center;

12
packages/editor/src/theme/content-menu.scss
View File

@ -1,3 +1,5 @@
@use "common/var" as *;
.magic-editor-content-menu {
position: fixed;
font-size: 12px;
@ -29,7 +31,7 @@
.el-button--text,
i {
color: $--font-color;
color: $font-color;
}
.magic-editor-icon {
@ -46,20 +48,20 @@
&.button {
&:hover {
background-color: $--hover-color;
background-color: $hover-color;
.tmagic-design-button,
.tmagic-design-button:active,
.tmagic-design-button:focus {
color: $--font-color;
color: $font-color;
}
&.menu-item i {
color: $--font-color;
color: $font-color;
}
}
&.active {
background-color: $--theme-color;
background-color: $theme-color;
.tmagic-design-button,
.tmagic-design-button:active,
.tmagic-design-button:focus {

4
packages/editor/src/theme/data-source.scss
View File

@ -1,3 +1,5 @@
@use "common/var" as *;
.data-source-list-panel {
.list-container {
.list-item {
@ -25,7 +27,7 @@
padding: 5px 14px;
&:hover {
background-color: $--hover-color;
background-color: $hover-color;
}
}
}

6
packages/editor/src/theme/floating-box.scss
View File

@ -1,8 +1,10 @@
@use "common/var" as *;
.m-editor-float-box {
position: absolute;
background-color: #fff;
z-index: 100;
border: 1px solid $--border-color;
border: 1px solid $border-color;
display: flex;
flex-direction: column;
max-height: 100%;
@ -17,7 +19,7 @@
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $--border-color;
border-bottom: 1px solid $border-color;
}
.m-editor-float-box-body {

12
packages/editor/src/theme/framework.scss
View File

@ -1,10 +1,12 @@
@use "common/var" as *;
.m-editor {
display: flex;
flex-direction: column;
width: 100%;
&-content {
height: calc(100% - #{$--nav-height});
height: calc(100% - #{$nav-height});
}
&-framework-center {
@ -14,7 +16,7 @@
}
&-framework-left {
background-color: $--sidebar-content-background-color;
background-color: $sidebar-content-background-color;
}
&-framework-center .el-scrollbar__view {
@ -32,7 +34,7 @@
justify-content: center;
align-items: center;
flex-direction: column;
height: calc(100% - #{$--page-bar-height});
height: calc(100% - #{$page-bar-height});
}
&-content {
@ -61,8 +63,8 @@
}
&:hover {
border-color: $--theme-color;
color: $--theme-color;
border-color: $theme-color;
color: $theme-color;
}
}
}

9
packages/editor/src/theme/index.scss
View File

@ -1,8 +1,7 @@
@import "@tmagic/design/src/theme/index.scss";
@import "@tmagic/table/src/theme/index.scss";
@import "@tmagic/form/src/theme/index.scss";
@import "./common/var.scss";
@import "./theme.scss";
@use "@tmagic/design/src/theme/index.scss" as tMagicDesign;
@use "@tmagic/table/src/theme/index.scss" as tMagicTable;
@use "@tmagic/form/src/theme/index.scss" as tMagicForm;
@use "./theme.scss";
.fade-enter-active,
.fade-leave-active {

4
packages/editor/src/theme/layer-panel.scss
View File

@ -1,5 +1,7 @@
@use "common/var" as *;
.m-editor-layer-panel {
background: $--sidebar-content-background-color;
background: $sidebar-content-background-color;
.m-editor-tree {
padding-top: 48px;

12
packages/editor/src/theme/nav-menu.scss
View File

@ -1,3 +1,5 @@
@use "common/var" as *;
.m-editor-nav-menu {
display: flex;
z-index: 5;
@ -5,13 +7,13 @@
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
background-color: $--nav--background-color;
background-color: $nav--background-color;
font-size: 19.2px;
color: $--nav-color;
color: $nav-color;
font-weight: 400;
box-sizing: border-box;
margin: 0px;
flex: 0 0 $--nav-height;
flex: 0 0 $nav-height;
border-bottom: 1px solid #d8dee8;
> div {
@ -54,7 +56,7 @@
}
.is-text > i {
color: $--font-color;
color: $font-color;
}
.icon {
@ -66,7 +68,7 @@
}
.menu-item-text {
color: $--nav-color;
color: $nav-color;
}
&.rule {

32
packages/editor/src/theme/page-bar.scss
View File

@ -1,3 +1,5 @@
@use "common/var" as *;
.m-editor-page-bar-tabs {
position: fixed;
bottom: 0;
@ -9,24 +11,24 @@
.m-editor-page-list-item {
display: flex;
width: 100%;
height: $--page-bar-height;
line-height: $--page-bar-height;
color: $--font-color;
height: $page-bar-height;
line-height: $page-bar-height;
color: $font-color;
z-index: 2;
overflow: hidden;
&:hover {
background-color: $--hover-color;
background-color: $hover-color;
}
}
.m-editor-page-bar {
display: flex;
width: 100%;
height: $--page-bar-height;
line-height: $--page-bar-height;
color: $--font-color;
height: $page-bar-height;
line-height: $page-bar-height;
color: $font-color;
background-color: #f3f3f3;
border-top: 1px solid $--border-color;
border-top: 1px solid $border-color;
z-index: 2;
overflow: hidden;
@ -38,7 +40,7 @@
&-item {
padding: 0 10px;
cursor: pointer;
border-right: 1px solid $--border-color;
border-right: 1px solid $border-color;
display: flex;
justify-items: center;
align-items: center;
@ -60,7 +62,7 @@
.icon-active {
font-weight: bold;
color: $--theme-color;
color: $theme-color;
}
}
@ -96,16 +98,16 @@
padding: 5px 14px;
.tmagic-design-button {
color: $--font-color;
color: $font-color;
}
&:hover {
background-color: $--hover-color;
background-color: $hover-color;
}
&.active {
.tmagic-design-button {
color: $--theme-color;
color: $theme-color;
}
}
}
@ -113,8 +115,8 @@
.m-editor-page-bar-search-panel {
position: absolute;
bottom: $--page-bar-height;
border: 1px solid $--border-color;
bottom: $page-bar-height;
border: 1px solid $border-color;
padding: 6px 10px;
width: 100%;
box-sizing: border-box;

6
packages/editor/src/theme/sidebar.scss
View File

@ -1,9 +1,11 @@
@use "common/var" as *;
.m-editor-sidebar {
display: flex;
height: 100%;
.m-editor-sidebar-header {
background: $--sidebar-heder-background-color;
background: $sidebar-heder-background-color;
height: 100%;
width: 40px;
@ -16,7 +18,7 @@
cursor: pointer;
&.is-active {
background: $--sidebar-content-background-color;
background: $sidebar-content-background-color;
i {
color: #353140;

4
packages/editor/src/theme/stage.scss
View File

@ -1,7 +1,9 @@
@use "common/var" as *;
.m-editor-stage {
position: relative;
width: 100%;
height: calc(100% - #{$--page-bar-height});
height: calc(100% - #{$page-bar-height});
overflow: hidden;
display: flex;
justify-content: center;

56
packages/editor/src/theme/theme.scss
View File

@ -1,28 +1,28 @@
@import "./search-input.scss";
@import "./nav-menu.scss";
@import "./framework.scss";
@import "./sidebar.scss";
@import "./layer-panel.scss";
@import "./component-list-panel.scss";
@import "./resizer.scss";
@import "./workspace.scss";
@import "./page-bar.scss";
@import "./props-panel.scss";
@import "./content-menu.scss";
@import "./stage.scss";
@import "./code-editor.scss";
@import "./icon.scss";
@import "./code-block.scss";
@import "./event.scss";
@import "./layout.scss";
@import "./breadcrumb.scss";
@import "./data-source.scss";
@import "./data-source-fields.scss";
@import "./data-source-methods.scss";
@import "./data-source-input.scss";
@import "./key-value.scss";
@import "./tree.scss";
@import "./floating-box.scss";
@import "./page-fragment-select.scss";
@import "./data-source-field.scss";
@import "./data-source-field-select.scss";
@use "./search-input.scss";
@use "./nav-menu.scss";
@use "./framework.scss";
@use "./sidebar.scss";
@use "./layer-panel.scss";
@use "./component-list-panel.scss";
@use "./resizer.scss";
@use "./workspace.scss";
@use "./page-bar.scss";
@use "./props-panel.scss";
@use "./content-menu.scss";
@use "./stage.scss";
@use "./code-editor.scss";
@use "./icon.scss";
@use "./code-block.scss";
@use "./event.scss";
@use "./layout.scss";
@use "./breadcrumb.scss";
@use "./data-source.scss";
@use "./data-source-fields.scss";
@use "./data-source-methods.scss";
@use "./data-source-input.scss";
@use "./key-value.scss";
@use "./tree.scss";
@use "./floating-box.scss";
@use "./page-fragment-select.scss";
@use "./data-source-field.scss";
@use "./data-source-field-select.scss";

26
packages/editor/src/theme/tree.scss
View File

@ -1,6 +1,8 @@
@use "common/var" as *;
.m-editor-tree {
$--node-height: 22px;
color: $--font-color;
$node-height: 22px;
color: $font-color;
font-size: 13px;
.m-editor-tree-node {
@ -12,31 +14,31 @@
align-items: center;
&:hover {
background-color: $--hover-color;
color: $--font-color;
background-color: $hover-color;
color: $font-color;
}
&.selected {
background-color: $--theme-color;
color: $--hover-color;
background-color: $theme-color;
color: $hover-color;
}
&.drag-inner {
.tree-node-content {
background-color: rgba($color: $--theme-color, $alpha: 0.5);
color: $--hover-color;
background-color: rgba($color: $theme-color, $alpha: 0.5);
color: $hover-color;
}
}
&.drag-before {
.tree-node-content {
border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
border-top-color: rgba($color: $theme-color, $alpha: 0.5);
}
}
&.drag-after {
.tree-node-content {
border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
border-bottom-color: rgba($color: $theme-color, $alpha: 0.5);
}
}
@ -50,11 +52,11 @@
display: flex;
flex: 1;
justify-content: space-between;
height: $--node-height;
height: $node-height;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
.tree-node-label {
line-height: $--node-height;
line-height: $node-height;
flex: 1;
width: 100px;
overflow: hidden;