Skip to content

Commit

Permalink
style: add style varibles and update some styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@liujuping
liujuping committed Oct 7, 2023
1 parent e3e5123 commit 6f6b73b
Show file tree
Hide file tree
Showing 17 changed files with 81 additions and 297 deletions.
57 changes: 8 additions & 49 deletions packages/designer/src/builtin-simulator/bem-tools/borders.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
& > &-status {
margin-left: 5px;
color: #3c3c3c;
color: var(--color-text, #3c3c3c);
transform: translateY(-100%);
font-weight: lighter;
}
Expand Down Expand Up @@ -46,7 +46,7 @@
opacity: 1;
max-height: 100%;
overflow: hidden;
color: white;
color: var(--color-icon-reverse, white);
&:hover {
background: var(--color-brand-light, #006cff);
}
Expand All @@ -56,8 +56,8 @@
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #197aff;
background: #fff;
border: 1px solid var(--color-brand, #197aff);
background: var(--color-block-background-normal, #fff);
pointer-events: auto;
z-index: 2;
}
Expand All @@ -73,19 +73,16 @@
&:after {
content: "";
display: block;
border: 1px solid #197aff;
background: #fff;
// background: #738397;
border: 1px solid var(--color-brand, #197aff);
background: var(--color-block-background-normal, #fff);
border-radius: 2px;
// animation: flashing 1.5s infinite linear;
}

&.e,
&.w {
cursor: ew-resize;
&:after {
width: 4px;
// height: calc(100% - 20px);
min-height: 50%;
}
}
Expand All @@ -94,62 +91,24 @@
&.s {
cursor: ns-resize;
&:after {
// width: calc(100% - 20px);
min-width: 50%;
height: 4px;
}
}
}

// &&-hovering {
&&-detecting {
z-index: 1;
border-style: dashed;
background: rgba(0,121,242,.04);

&.x-loop {
border-color: rgba(138, 93, 226, 0.8);
background: rgba(138, 93, 226, 0.04);

>.@{scope}-title {
color: rgba(138, 93, 226, 1.0);
}
}

&.x-condition {
border-color: rgba(255, 99, 8, 0.8);
background: rgba(255, 99, 8, 0.04);
>.@{scope}-title {
color: rgb(255, 99, 8);
}
}
background: var(--color-block-background-light, rgba(0,121,242,.04));
}

&&-selecting {
z-index: 2;
border-width: 2px;

&.x-loop {
border-color: rgba(147, 112, 219, 1.0);
background: rgba(147, 112, 219, 0.04);

>@{scope}-title {
color: rgba(147, 112, 219, 1.0);
}
&.highlight {
background: transparent;
}
}

&.x-condition {
border-color: rgb(255, 99, 8);
>@{scope}-title {
color: rgb(255, 99, 8);
}
}

&.dragging {
background: rgba(182, 178, 178, 0.8);
background: var(--color-layer-mask-background, rgba(182, 178, 178, 0.8));
border: none;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/designer/src/builtin-simulator/bem-tools/insertion.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@
}

&.invalid {
background-color: red;
background-color: var(--color-function-error, red);
}
}
6 changes: 3 additions & 3 deletions packages/designer/src/builtin-simulator/host.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
max-height: calc(100% - 32px);
max-width: calc(100% - 32px);
transform: translateX(-50%);
box-shadow: 0 2px 10px 0 rgba(31,56,88,.15);
box-shadow: 0 2px 10px 0 var(--color-block-background-shallow, rgba(31,56,88,.15));
}

&-device-iphonex { // 增加默认的小程序的壳
Expand All @@ -44,7 +44,7 @@
background: url(https://img.alicdn.com/tfs/TB1b4DHilFR4u4jSZFPXXanzFXa-750-1574.png) no-repeat top;
background-size: 375px 812px;
border-radius: 44px;
box-shadow: rgba(0, 0, 0, 0.1) 0 36px 42px;
box-shadow: var(--color-block-background-shallow, rgba(0, 0, 0, 0.1)) 0 36px 42px;
.@{scope}-canvas-viewport {
width: auto;
top: 50px;
Expand Down Expand Up @@ -78,7 +78,7 @@
bottom: 16px;
left: 16px;
width: auto;
box-shadow: 0 1px 4px 0 rgba(31, 50, 88, 0.125);
box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125));
}

&-content {
Expand Down
2 changes: 1 addition & 1 deletion packages/designer/src/builtin-simulator/node-selector/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
margin-top: 2px;
&-content {
padding-left: 6px;
background: #78869a;
background: var(--color-layer-tooltip-background, #78869a);
display: inline-flex;
border-radius: 3px;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions packages/designer/src/designer/drag-ghost/ghost.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
flex-direction: column;
align-items: center;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 6px grey;
background-color: var(--color-block-background-deep-dark, rgba(0, 0, 0, 0.4));
box-shadow: 0 0 6px var(--color-block-background-shallow, grey);
transform: translate(-10%, -50%);
.lc-ghost {
.lc-ghost-title {
Expand Down
8 changes: 4 additions & 4 deletions packages/designer/src/less-variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,19 +99,19 @@
@brand-link-hover: #2e76a6;

// F1-1-7 A10
@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
// F1-1-8 A6
@brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
// F2-1-2 A80
@brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
// F2-1-7 A10
@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
// F3-1-2 A80
@brand-success-alpha-2: rgba(102, 188, 92, 0.8);
// F3-1-7 A10
@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
// F4-1-7 A10
@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
@brand-link-alpha-7: rgba(102, 188, 92, 0.1);

// 文本色
@text-primary-color: @dark-alpha-3;
Expand Down
12 changes: 6 additions & 6 deletions packages/editor-core/src/widgets/tip/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
opacity: 0;
border-radius: 3px;
padding: 6px 8px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
text-shadow: 0 -1px var(--color-field-label, rgba(0, 0, 0, 0.3));
font-size: var(--font-size-text);
line-height: 14px;
max-width: 200px;
Expand All @@ -178,19 +178,19 @@
height: 8px;
&:after {
border: 6px solid transparent;
border-top-color: rgba(0, 0, 0, 0.7);
border-top-color: var(--color-layer-tooltip-background, rgba(0, 0, 0, 0.7));
}
}
&.lc-theme-black {
background: rgba(0, 0, 0, 0.7);
background: var(--color-icon-pane, rgba(0, 0, 0, 0.7));
.lc-arrow:after {
border-top-color: rgba(0, 0, 0, 0.7);
border-top-color: var(--color-layer-tooltip-background, rgba(0, 0, 0, 0.7));
}
}
&.lc-theme-green {
background: #57a672;
background: var(--color-function-success-dark, #57a672);
.lc-arrow:after {
border-top-color: #57a672;
border-top-color: var(--color-function-success-dark, #57a672);
}
}
&.lc-visible {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-core/src/widgets/title/title.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
cursor: help;
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: rgba(31, 56, 88, .3);
text-decoration-color: var(--color-text-light, rgba(31, 56, 88, .3));
}
line-height: initial !important;
word-break: break-all;
Expand Down
34 changes: 0 additions & 34 deletions packages/editor-skeleton/src/components/field/fields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,40 +203,6 @@ export class Field extends Component<FieldProps> {
*/
function createValueState(/* valueState?: number, onClear?: (e: React.MouseEvent) => void */) {
return null;

/*
let tip: any = null;
let className = 'lc-valuestate';
let icon: any = null;
if (valueState) {
if (valueState < 0) {
// multiple value 橘黄色点： tip：多种值，点击清除
tip = intlNode('Multiple Value, Click to Clear');
className += ' valuestate-multiple';
icon = <IconClear size={6} />;
} else if (valueState === 10) {
// isset orangered tip: 必填项
tip = intlNode('Required');
className += ' valuestate-required';
onClear = undefined;
} else if (valueState > 0) {
// isset 蓝点 tip: 已设置值，点击清除
tip = intlNode('Setted Value, Click to Clear');
className += ' valuestate-isset';
icon = <IconClear size={6} />;
}
} else {
onClear = undefined;
// unset 占位空间
}
return (
<i className={className} onClick={onClear}>
{icon}
{tip && <Tip>{tip}</Tip>}
</i>
);
*/
}

export interface PopupFieldProps extends FieldProps {
Expand Down
Loading

0 comments on commit 6f6b73b

Please sign in to comment.