bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

调整规范

master
yutent 2023-08-03 15:47:02 +08:00
parent 1915f69485
commit 1e9264c452
25 changed files with 72 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/avatar/index.js
View File

@ -84,7 +84,7 @@ class Avatar extends Component {
width: map.get($v, 'h');
height: map.get($v, 'h');
font-size: map.get($v, 'f');
--size: #{map.get($v, 'h') - 8px};
--wc-icon-size: #{map.get($v, 'h') - 8px};
}
}
`

2
src/code/index.js
View File

@ -80,7 +80,7 @@ class Code extends Component {
}
.act {
--size: 18px;
--wc-icon-size: 18px;
margin: 0 6px;
color: var(--color-grey-2);
cursor: pointer;

2
src/collapse/index.js
View File

@ -95,7 +95,7 @@ class CollapseItem extends Component {
wc-icon {
margin: 0 8px;
--size: 12px;
--wc-icon-size: 12px;
color: #636465;
transform: rotate(0);
transition: transform 0.2s ease-in-out;

2
src/drawer/index.js
View File

@ -84,7 +84,7 @@ class Drawer extends Component {
user-select: none;
wc-icon {
--size: 16px;
--wc-icon-size: 16px;
margin-right: 8px;
color: var(--color-grey-3);
cursor: pointer;

2
src/dropdown/index.js
View File

@ -38,7 +38,7 @@ class Dropdown extends Component {
padding: 0 8px;
.arrow {
--size: 12px;
--wc-icon-size: 12px;
margin-left: 6px;
transform: rotate(-90deg);
}

6
src/form/button.js
View File

@ -51,7 +51,7 @@ class Button extends Component {
width: 100%;
min-width: 1px;
height: inherit;
padding: var(--button-padding, 0 4px);
padding: var(--wc-button-padding, 0 4px);
line-height: 1;
border: 1px solid transparent;
border-radius: inherit;
@ -71,7 +71,7 @@ class Button extends Component {
.icon {
margin-right: 4px;
--size: var(--icon-size, 14px);
--wc-icon-size: var(--wc-button-icon-size, 14px);
}
}
:host(:focus-within) {
@ -121,7 +121,7 @@ class Button extends Component {
font-size: map.get($v, 'f');
.icon {
--size: var(--icon-size, #{map.get($v, 'f')});
--wc-icon-size: var(--wc-button-icon-size, #{map.get($v, 'f')});
}
}
:host([size='#{$s}'][circle]) {

12
src/form/input.js
View File

@ -105,7 +105,7 @@ class Input extends Component {
}
/* ----- */
.close {
--size: 18px;
--wc-icon-size: 18px;
margin: 0 8px 0 4px;
padding: 4px;
border-radius: 50%;
@ -118,7 +118,7 @@ class Input extends Component {
}
}
.icon {
--size: 16px;
--wc-icon-size: 16px;
margin: 0 8px 0 4px;
color: var(--color-grey-2);
}
@ -192,7 +192,7 @@ class Input extends Component {
}
.icon {
--size: 24px;
--wc-icon-size: 24px;
margin: 0 20px 0 4px;
}
}
@ -231,7 +231,7 @@ class Input extends Component {
font-size: 12px;
}
.icon {
--size: 14px;
--wc-icon-size: 14px;
}
.prepend,
.append {
@ -311,11 +311,11 @@ class Input extends Component {
font-size: map.get($v, 'f');
}
.icon {
--size: #{map.get($v, 'f')};
--wc-icon-size: #{map.get($v, 'f')};
}
@if $s == 'xxxl' {
.icon {
--size: 22px;
--wc-icon-size: 22px;
margin: 0 12px 0 4px;
}
}

2
src/form/number.js
View File

@ -141,7 +141,7 @@ class WcNumber extends Component {
font-size: map.get($v, 'f');
.icon {
--size: #{map.get($v, 'f')};
--wc-icon-size: #{map.get($v, 'f')};
}
}
:host([size='#{$s}'][circle]) {

6
src/form/passwd.js
View File

@ -78,7 +78,7 @@ class Passwd extends Component {
css`
.label {
.icon {
--size: 16px;
--wc-icon-size: 16px;
margin: 0 8px 0 4px;
color: var(--color-grey-2);
cursor: pointer;
@ -120,7 +120,7 @@ class Passwd extends Component {
@if $s == 'xxl' {
.icon {
--size: 18px;
--wc-icon-size: 18px;
}
}
@ -129,7 +129,7 @@ class Passwd extends Component {
padding: 0 6px 0 10px;
}
.icon {
--size: 22px;
--wc-icon-size: 22px;
margin: 0 12px 0 4px;
}
}

2
src/form/select.js
View File

@ -25,7 +25,7 @@ class Select extends Component {
static styles = css`
.icon {
margin-right: 10px;
--size: 14px;
--wc-icon-size: 14px;
line-height: 100%;
transform: rotate(90deg);
transition: transform 0.2s ease-in-out;

4
src/form/star.js
View File

@ -22,7 +22,7 @@ class Star extends Component {
:host {
display: flex;
font-size: 14px;
--size: 32px;
--wc-icon-size: 32px;
cursor: pointer;
user-select: none;
}
@ -83,7 +83,7 @@ class Star extends Component {
@loop $s, $v in $sizes {
:host([size='#{$s}']) {
--size: #{map.get($v, 'h')};
--wc-icon-size: #{map.get($v, 'h')};
font-size: map.get($v, 'f');
}
}

4
src/icon/index.js
View File

@ -29,8 +29,8 @@ class Icon extends Component {
static styles = css`
:host {
display: inline-flex;
width: var(--size, 32px);
height: var(--size, 32px);
width: var(--wc-icon-size, 32px);
height: var(--wc-icon-size, 32px);
}
:host(:not([name])) {
display: none;

4
src/image-preview/index.js
View File

@ -66,7 +66,7 @@ class ImagePreview extends Component {
background-color: #606266;
border-color: #fff;
border-radius: 50%;
--size: 22px;
--wc-icon-size: 22px;
}
.left,
.right {
@ -98,7 +98,7 @@ class ImagePreview extends Component {
color: #e5e5e5;
border-radius: 22px;
transform: translateX(-50%);
--size: 22px;
--wc-icon-size: 22px;
wc-icon {
cursor: pointer;
}

4
src/layer/index.js
View File

@ -106,7 +106,7 @@ class Layer extends Component {
color: var(--color-dark-2);
wc-icon {
--size: 14px;
--wc-icon-size: 14px;
&:hover {
color: var(--color-red-1);
@ -139,7 +139,7 @@ class Layer extends Component {
border-radius: 3px;
font-weight: normal;
text-indent: 8px;
--size: 16px;
--wc-icon-size: 16px;
color: var(--color-dark-1);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

2
src/notify/index.js
View File

@ -108,7 +108,7 @@ class Notify extends Component {
line-height: 2;
wc-icon {
--size: 14px;
--wc-icon-size: 14px;
cursor: pointer;
}
}

4
src/option/index.js
View File

@ -64,7 +64,7 @@ class OptionGroup extends Component {
color: var(--color-grey-2);
.ico {
--size: 12px;
--wc-icon-size: 12px;
}
}
@ -133,7 +133,7 @@ class Option extends Component {
color: var(--color-dark-1);
.ico {
--size: 12px;
--wc-icon-size: 12px;
color: var(--color-grey-2);
}
.name {

2
src/popconfirm/index.js
View File

@ -99,7 +99,7 @@ class Popconfirm extends Component {
white-space: nowrap;
wc-icon {
margin-right: 5px;
--size: 14px;
--wc-icon-size: 14px;
}
}

2
src/result/index.js
View File

@ -39,7 +39,7 @@ class Result extends Component {
}
}
:host([type='error']) .icon {
--size: 24px;
--wc-icon-size: 24px;
background: #f56c6c;
}
:host([type='info']) .icon {

2
src/sandbox/index.js
View File

@ -70,7 +70,7 @@ class Sandbox extends Component {
border-right: 1px solid var(--color-plain-3);
border-bottom: 1px solid var(--color-plain-3);
background: var(--color-plain-1);
--size: 16px;
--wc-icon-size: 16px;
cursor: pointer;
&:hover:not([disabled]),

4
src/steps/index.js
View File

@ -122,11 +122,11 @@ class Step extends Component {
height: 26px;
border: 1px solid var(--color-grey-1);
border-radius: 50%;
--size: 14px;
--wc-icon-size: 14px;
&.custom {
border: 0;
--size: 26px;
--wc-icon-size: 26px;
}
}
.group {

2
src/swipe/index.js
View File

@ -131,7 +131,7 @@ class Swipe extends Component {
background-color: #606266;
border-color: #fff;
border-radius: 50%;
--size: 12px;
--wc-icon-size: 12px;
transition: opacity ease-in-out 0.2s;
&:hover {
opacity: 1 !important;

2
src/tabs/index.js
View File

@ -65,7 +65,7 @@ class Tabs extends Component {
max-width: 120px;
margin: 0 16px;
padding: 0 6px;
--size: 16px;
--wc-icon-size: 16px;
cursor: pointer;
[slot='label'] {

2
src/tag/index.js
View File

@ -100,7 +100,7 @@ class Tag extends Component {
line-height: calc(map.get($v, 'h') - 2px);
}
.close-btn {
--size: 10px;
--wc-icon-size: 10px;
transform: scale(map.get($v, 's'));
}
}

2
src/timeline/index.js
View File

@ -109,7 +109,7 @@ class Item extends Component {
border-radius: 50%;
background: var(--color-grey-1);
color: #fff;
--size: 14px;
--wc-icon-size: 14px;
}
.group {
flex: 1;

32
开发规范.md
View File

@ -23,3 +23,35 @@
4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑
> 统一为增加 `lazy="1000"` 属性实现
5. 暗色主题
各组件, 需要适配暗色主题。
```css
@media (prefers-color-scheme: dark) {
// ...
}
```
6. 组件的额外自定义样式, 尽量使用css变量来做穿透
各组件的穿透样式变量名, 需要带命名空间
```css
// 外部定义
...
--wc-button-border-color: #f30;
...
// 内部实现
button {
...
border: 1px solid var(--wc-button-border-color, var(--color-plain-1));
// or
border: 1px solid var(--wc-button-border-color, #f2f5fc);
...
}
```