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; $font-color: #313a40;
$--border-color: #d9dbdd; $border-color: #d9dbdd;
$--hover-color: #f3f5f9; $hover-color: #f3f5f9;
$--nav-height: 35px; $nav-height: 35px;
$--nav-color: #313a40; $nav-color: #313a40;
$--nav--background-color: #ffffff; $nav--background-color: #ffffff;
$--sidebar-heder-background-color: $--theme-color; $sidebar-heder-background-color: $theme-color;
$--sidebar-content-background-color: #ffffff; $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 { .ui-component-panel {
&.tmagic-design-collapse { &.tmagic-design-collapse {
border-top: 0 !important; border-top: 0 !important;
margin-top: 48px; margin-top: 48px;
background-color: $--sidebar-content-background-color; background-color: $sidebar-content-background-color;
.tmagic-design-collapse-item { .tmagic-design-collapse-item {
> div:first-of-type { > div:first-of-type {
border-bottom: 1px solid $--border-color; border-bottom: 1px solid $border-color;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.el-collapse-item__header, .el-collapse-item__header,
.t-collapse-panel__header { .t-collapse-panel__header {
background: $--sidebar-content-background-color; background: $sidebar-content-background-color;
color: $--font-color; color: $font-color;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
padding-left: 10px; padding-left: 10px;
@ -28,7 +30,7 @@
.el-collapse-item__wrap, .el-collapse-item__wrap,
.t-collapse-panel__body { .t-collapse-panel__body {
background: $--sidebar-content-background-color; background: $sidebar-content-background-color;
border-bottom: 0; border-bottom: 0;
.el-collapse-item__content, .el-collapse-item__content,
@ -44,7 +46,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 5px 10px; margin: 5px 10px;
box-sizing: border-box; box-sizing: border-box;
color: $--font-color; color: $font-color;
flex-direction: column; flex-direction: column;
width: 42px; width: 42px;
cursor: pointer; cursor: pointer;
@ -57,7 +59,7 @@
line-height: 40px; line-height: 40px;
border-radius: 5px; border-radius: 5px;
color: #909090; color: #909090;
border: 1px solid $--border-color; border: 1px solid $border-color;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; 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 { .magic-editor-content-menu {
position: fixed; position: fixed;
font-size: 12px; font-size: 12px;
@ -29,7 +31,7 @@
.el-button--text, .el-button--text,
i { i {
color: $--font-color; color: $font-color;
} }
.magic-editor-icon { .magic-editor-icon {
@ -46,20 +48,20 @@
&.button { &.button {
&:hover { &:hover {
background-color: $--hover-color; background-color: $hover-color;
.tmagic-design-button, .tmagic-design-button,
.tmagic-design-button:active, .tmagic-design-button:active,
.tmagic-design-button:focus { .tmagic-design-button:focus {
color: $--font-color; color: $font-color;
} }
&.menu-item i { &.menu-item i {
color: $--font-color; color: $font-color;
} }
} }
&.active { &.active {
background-color: $--theme-color; background-color: $theme-color;
.tmagic-design-button, .tmagic-design-button,
.tmagic-design-button:active, .tmagic-design-button:active,
.tmagic-design-button:focus { .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 { .data-source-list-panel {
.list-container { .list-container {
.list-item { .list-item {
@ -25,7 +27,7 @@
padding: 5px 14px; padding: 5px 14px;
&:hover { &: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 { .m-editor-float-box {
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
z-index: 100; z-index: 100;
border: 1px solid $--border-color; border: 1px solid $border-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 100%; max-height: 100%;
@ -17,7 +19,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid $--border-color; border-bottom: 1px solid $border-color;
} }
.m-editor-float-box-body { .m-editor-float-box-body {

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

@ -1,10 +1,12 @@
@use "common/var" as *;
.m-editor { .m-editor {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
&-content { &-content {
height: calc(100% - #{$--nav-height}); height: calc(100% - #{$nav-height});
} }
&-framework-center { &-framework-center {
@ -14,7 +16,7 @@
} }
&-framework-left { &-framework-left {
background-color: $--sidebar-content-background-color; background-color: $sidebar-content-background-color;
} }
&-framework-center .el-scrollbar__view { &-framework-center .el-scrollbar__view {
@ -32,7 +34,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
height: calc(100% - #{$--page-bar-height}); height: calc(100% - #{$page-bar-height});
} }
&-content { &-content {
@ -61,8 +63,8 @@
} }
&:hover { &:hover {
border-color: $--theme-color; border-color: $theme-color;
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"; @use "@tmagic/design/src/theme/index.scss" as tMagicDesign;
@import "@tmagic/table/src/theme/index.scss"; @use "@tmagic/table/src/theme/index.scss" as tMagicTable;
@import "@tmagic/form/src/theme/index.scss"; @use "@tmagic/form/src/theme/index.scss" as tMagicForm;
@import "./common/var.scss"; @use "./theme.scss";
@import "./theme.scss";
.fade-enter-active, .fade-enter-active,
.fade-leave-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 { .m-editor-layer-panel {
background: $--sidebar-content-background-color; background: $sidebar-content-background-color;
.m-editor-tree { .m-editor-tree {
padding-top: 48px; 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 { .m-editor-nav-menu {
display: flex; display: flex;
z-index: 5; z-index: 5;
@ -5,13 +7,13 @@
justify-content: space-between; justify-content: space-between;
-webkit-box-align: center; -webkit-box-align: center;
align-items: center; align-items: center;
background-color: $--nav--background-color; background-color: $nav--background-color;
font-size: 19.2px; font-size: 19.2px;
color: $--nav-color; color: $nav-color;
font-weight: 400; font-weight: 400;
box-sizing: border-box; box-sizing: border-box;
margin: 0px; margin: 0px;
flex: 0 0 $--nav-height; flex: 0 0 $nav-height;
border-bottom: 1px solid #d8dee8; border-bottom: 1px solid #d8dee8;
> div { > div {
@ -54,7 +56,7 @@
} }
.is-text > i { .is-text > i {
color: $--font-color; color: $font-color;
} }
.icon { .icon {
@ -66,7 +68,7 @@
} }
.menu-item-text { .menu-item-text {
color: $--nav-color; color: $nav-color;
} }
&.rule { &.rule {

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

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

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

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

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

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

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

@ -1,28 +1,28 @@
@import "./search-input.scss"; @use "./search-input.scss";
@import "./nav-menu.scss"; @use "./nav-menu.scss";
@import "./framework.scss"; @use "./framework.scss";
@import "./sidebar.scss"; @use "./sidebar.scss";
@import "./layer-panel.scss"; @use "./layer-panel.scss";
@import "./component-list-panel.scss"; @use "./component-list-panel.scss";
@import "./resizer.scss"; @use "./resizer.scss";
@import "./workspace.scss"; @use "./workspace.scss";
@import "./page-bar.scss"; @use "./page-bar.scss";
@import "./props-panel.scss"; @use "./props-panel.scss";
@import "./content-menu.scss"; @use "./content-menu.scss";
@import "./stage.scss"; @use "./stage.scss";
@import "./code-editor.scss"; @use "./code-editor.scss";
@import "./icon.scss"; @use "./icon.scss";
@import "./code-block.scss"; @use "./code-block.scss";
@import "./event.scss"; @use "./event.scss";
@import "./layout.scss"; @use "./layout.scss";
@import "./breadcrumb.scss"; @use "./breadcrumb.scss";
@import "./data-source.scss"; @use "./data-source.scss";
@import "./data-source-fields.scss"; @use "./data-source-fields.scss";
@import "./data-source-methods.scss"; @use "./data-source-methods.scss";
@import "./data-source-input.scss"; @use "./data-source-input.scss";
@import "./key-value.scss"; @use "./key-value.scss";
@import "./tree.scss"; @use "./tree.scss";
@import "./floating-box.scss"; @use "./floating-box.scss";
@import "./page-fragment-select.scss"; @use "./page-fragment-select.scss";
@import "./data-source-field.scss"; @use "./data-source-field.scss";
@import "./data-source-field-select.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 { .m-editor-tree {
$--node-height: 22px; $node-height: 22px;
color: $--font-color; color: $font-color;
font-size: 13px; font-size: 13px;
.m-editor-tree-node { .m-editor-tree-node {
@ -12,31 +14,31 @@
align-items: center; align-items: center;
&:hover { &:hover {
background-color: $--hover-color; background-color: $hover-color;
color: $--font-color; color: $font-color;
} }
&.selected { &.selected {
background-color: $--theme-color; background-color: $theme-color;
color: $--hover-color; color: $hover-color;
} }
&.drag-inner { &.drag-inner {
.tree-node-content { .tree-node-content {
background-color: rgba($color: $--theme-color, $alpha: 0.5); background-color: rgba($color: $theme-color, $alpha: 0.5);
color: $--hover-color; color: $hover-color;
} }
} }
&.drag-before { &.drag-before {
.tree-node-content { .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 { &.drag-after {
.tree-node-content { .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; display: flex;
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
height: $--node-height; height: $node-height;
border-top: 2px solid transparent; border-top: 2px solid transparent;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
.tree-node-label { .tree-node-label {
line-height: $--node-height; line-height: $node-height;
flex: 1; flex: 1;
width: 100px; width: 100px;
overflow: hidden; overflow: hidden;