mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-10 18:03:01 +00:00
style: add css themes vars
This commit is contained in:
parent
77aea1bfba
commit
398f069745
@ -50,7 +50,6 @@ sidebar_position: 9
|
|||||||
- `--color-text-dark`: 文字颜色(dark)
|
- `--color-text-dark`: 文字颜色(dark)
|
||||||
- `--color-text-light`: 文字颜色(light)
|
- `--color-text-light`: 文字颜色(light)
|
||||||
- `--color-text-reverse`: 反色情况下,文字颜色
|
- `--color-text-reverse`: 反色情况下,文字颜色
|
||||||
- `--color-text-regular`: 文字颜色(regular)
|
|
||||||
- `--color-text-disabled`: 禁用态文字颜色
|
- `--color-text-disabled`: 禁用态文字颜色
|
||||||
|
|
||||||
#### 字段和边框颜色
|
#### 字段和边框颜色
|
||||||
@ -109,10 +108,20 @@ sidebar_position: 9
|
|||||||
#### 其他变量
|
#### 其他变量
|
||||||
|
|
||||||
- `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
|
- `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
|
||||||
|
- `--top-area-height`: 顶部区域的高度
|
||||||
- `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
|
- `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
|
||||||
- `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
|
- `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
|
||||||
- `--workspace-left-area-width`: 应用级 leftArea width
|
- `--workspace-left-area-width`: 应用级 leftArea width
|
||||||
- `--left-area-width`: leftArea width
|
- `--left-area-width`: leftArea width
|
||||||
|
- `--simulator-top-distance`: simulator 距离容器顶部的距离
|
||||||
|
- `--simulator-bottom-distance`: simulator 距离容器底部的距离
|
||||||
|
- `--simulator-left-distance`: simulator 距离容器左边的距离
|
||||||
|
- `--simulator-right-distance`: simulator 距离容器右边的距离
|
||||||
|
- `--toolbar-padding`: toolbar 的 padding
|
||||||
|
- `--toolbar-height`: toolbar 的高度
|
||||||
|
- `--pane-title-height`: 面板标题高度
|
||||||
|
- `--pane-title-font-size`: 面板标题字体大小
|
||||||
|
- `--pane-title-padding`: 面板标题边距
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -73,10 +73,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-device-default {
|
&-device-default {
|
||||||
top: 16px;
|
top: var(--simulator-top-distance, 16px);
|
||||||
right: 16px;
|
right: var(--simulator-right-distance, 16px);
|
||||||
bottom: 16px;
|
bottom: var(--simulator-bottom-distance, 16px);
|
||||||
left: 16px;
|
left: var(--simulator-left-distance, 16px);
|
||||||
width: auto;
|
width: auto;
|
||||||
box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125));
|
box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -27,7 +27,6 @@
|
|||||||
--color-text-dark: darken(@dark-alpha-3, 10%);
|
--color-text-dark: darken(@dark-alpha-3, 10%);
|
||||||
--color-text-light: lighten(@dark-alpha-3, 10%);
|
--color-text-light: lighten(@dark-alpha-3, 10%);
|
||||||
--color-text-reverse: @white-alpha-2;
|
--color-text-reverse: @white-alpha-2;
|
||||||
--color-text-regular: @normal-alpha-2;
|
|
||||||
--color-text-disabled: @gray-light;
|
--color-text-disabled: @gray-light;
|
||||||
|
|
||||||
--color-field-label: @dark-alpha-4;
|
--color-field-label: @dark-alpha-4;
|
||||||
@ -87,4 +86,5 @@
|
|||||||
--color-function-error-light: lighten(@brand-danger, 10%);
|
--color-function-error-light: lighten(@brand-danger, 10%);
|
||||||
--color-function-purple: rgb(144, 94, 190);
|
--color-function-purple: rgb(144, 94, 190);
|
||||||
--color-function-brown: #7b605b;
|
--color-function-brown: #7b605b;
|
||||||
|
--color-text-regular: @normal-alpha-2;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -66,16 +66,16 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .lc-panel-title {
|
> .lc-panel-title {
|
||||||
height: 48px;
|
height: var(--pane-title-height, 48px);
|
||||||
font-size: 16px;
|
font-size: var(--pane-title-font-size, 16px);
|
||||||
padding: 0 15px;
|
padding: var(--pane-title-padding, 0 15px);
|
||||||
color: var(--color-title, #0f1726);
|
color: var(--color-title, #0f1726);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lc-panel-body {
|
.lc-panel-body {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 48px;
|
top: var(--pane-title-height, 48px);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -234,7 +234,7 @@ body {
|
|||||||
.lc-pane-icon-close {
|
.lc-pane-icon-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
top: 14px;
|
top: calc(var(--pane-title-height, 48px) / 2 - 10px);
|
||||||
height: auto;
|
height: auto;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
.next-icon {
|
.next-icon {
|
||||||
@ -247,7 +247,7 @@ body {
|
|||||||
.lc-pane-icon-float {
|
.lc-pane-icon-float {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 38px;
|
right: 38px;
|
||||||
top: 14px;
|
top: calc(var(--pane-title-height, 48px) / 2 - 10px);
|
||||||
height: auto;
|
height: auto;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
svg {
|
svg {
|
||||||
@ -367,7 +367,7 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
height: var(--toolbar-height);
|
height: var(--toolbar-height);
|
||||||
background-color: var(--color-toolbar-background, var(--color-pane-background));
|
background-color: var(--color-toolbar-background, var(--color-pane-background));
|
||||||
padding: 8px 16px;
|
padding: var(--toolbar-padding, 8px 16px);
|
||||||
.lc-toolbar-center {
|
.lc-toolbar-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -457,7 +457,7 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
height: var(--toolbar-height);
|
height: var(--toolbar-height);
|
||||||
background-color: var(--color-toolbar-background, var(--color-pane-background));
|
background-color: var(--color-toolbar-background, var(--color-pane-background));
|
||||||
padding: 8px 16px;
|
padding: var(--toolbar-padding, 8px 16px);
|
||||||
.lc-toolbar-center {
|
.lc-toolbar-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@ -15,6 +15,11 @@ export interface IPublicTypeWidgetBaseConfig {
|
|||||||
props?: Record<string, any>;
|
props?: Record<string, any>;
|
||||||
content?: any;
|
content?: any;
|
||||||
contentProps?: Record<string, any>;
|
contentProps?: Record<string, any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 优先级,值越小,优先级越高,优先级高的会排在前面
|
||||||
|
*/
|
||||||
|
index?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IPublicTypePanelDockConfig extends IPublicTypeWidgetBaseConfig {
|
export interface IPublicTypePanelDockConfig extends IPublicTypeWidgetBaseConfig {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user