Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/base/basic-var.less
Original file line number Diff line number Diff line change
Expand Up @@ -92,5 +92,6 @@
--ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/
--ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/
--ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/
--ti-mobile-common-bg-color-disabled: #e8e8e8; /* 背景_禁用*/
--ti-mobile-common-bg-color-dark-gray: var(--ti-mobile-base-color-bg-1); /* 背景_深灰*/
}
47 changes: 23 additions & 24 deletions src/button/index.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
export default {
'tiny-mobile-button-height': '44px',
'tiny-mobile-button-font-size': '16px',
'tiny-mobile-button-color': '#fff',
'tiny-mobile-button-disabled-color': '#ddd',
'tiny-mobile-button-default-color': '#666',
'tiny-mobile-button-default-border-color': '#ccc',
'tiny-mobile-button-default-bgcolor': '#fff',
'tiny-mobile-button-primary-color': '#039be5',
'tiny-mobile-button-success-color': '#52c41a',
'tiny-mobile-button-warning-color': '#faad14',
'tiny-mobile-button-danger-color': '#f04b3d',
'tiny-mobile-button-info-color': '#333',
'tiny-mobile-button-medium-height': '36px',
'tiny-mobile-button-medium-font-size': '14px',
'tiny-mobile-button-small-height': '30px',
'tiny-mobile-button-small-font-size': '14px',
'tiny-mobile-button-mini-height': '24px',
'tiny-mobile-button-mini-font-size': '12px',
'tiny-mobile-button-radius': '2px',
'tiny-mobile-button-text-color': '#1890ff',
'tiny-mobile-button-text-hover-color': '#40a9ff',
'tiny-mobile-button-text-active-color': '#096dd9',
'tiny-mobile-button-text-disabled-color': '#999'
}
"tiny-mobile-button-height": "42px",
"tiny-mobile-button-font-size-default": "16px",
"tiny-mobile-button-text-color-white": "#fff",
"tiny-mobile-button-text-color-disabled": "#dbdbdb",
"tiny-mobile-button-text-color-default": "#191919",
"tiny-mobile-button-border-color": "#dbdbdb",
"tiny-mobile-button-bg-color-default": "#fff",
"tiny-mobile-button-bg-color-primary": "#1e8aff",
"tiny-mobile-button-bg-color-success": "#1ebe40",
"tiny-mobile-button-bg-color-warning": "#fccd32",
"tiny-mobile-button-bg-color-danger": "#eb5454",
"tiny-mobile-button-bg-color-disabled": "#e8e8e8",
"tiny-mobile-button-bg-color-info": "#333",
"tiny-mobile-button-height-medium": "36px",
"tiny-mobile-button-font-size-medium": "14px",
"tiny-mobile-button-height-small": "28px",
"tiny-mobile-button-font-size-small": "12px",
"tiny-mobile-button-height-mini": "22px",
"tiny-mobile-button-font-size-mini": "10px",
"tiny-mobile-button-text-color": "#4a79fe",
"tiny-mobile-button-text-color-hover": "#6e94fe",
"tiny-mobile-button-text-color-active": "#4a79fe",
};
136 changes: 72 additions & 64 deletions src/button/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
position: relative;
margin: 0;
padding: 0;
height: var(--ti-mobile-button-height, 44px);
line-height: var(--ti-mobile-button-height, 44px);
font-size: var(--ti-mobile-button-font-size, 16px);
height: var(--ti-mobile-button-height);
line-height: var(--ti-mobile-button-height);
font-size: var(--ti-mobile-button-font-size-default);
-webkit-text-size-adjust: 100%;
border-width: 1px;
border-style: solid;
border-image: initial;
border-radius: var(--ti-mobile-button-radius, 2px);
border-radius: 2px;
padding: 0 16px;
transition: border 0.3s ease 0s, color 0.3s ease 0s, background 0.3s ease 0s;
cursor: pointer;
Expand Down Expand Up @@ -72,31 +72,27 @@
&.is-disabled:active,
&.is-disabled.is-active {
cursor: not-allowed;
.button-color(
var(--ti-mobile-button-color, #fff),
var(--ti-mobile-button-disabled-color, #ddd),
var(--ti-mobile-button-disabled-color, #ddd)
);
.button-color(var(--ti-mobile-button-text-color-disabled),
var(--ti-mobile-button-bg-color-disabled),
var(--ti-mobile-button-bg-color-disabled));
}

.is-icon {
fill: var(--ti-mobile-button-color, #fff);
font-size: var(--ti-mobile-button-font-size, 16px);
fill: var(--ti-mobile-button-text-color-white);
font-size: var(--ti-mobile-button-font-size-default);
}

&--default {
.button-color(
var(--ti-mobile-button-default-color, #666),
var(--ti-mobile-button-default-border-color, #ccc),
var(--ti-mobile-button-default-bgcolor, #fff)
);
.button-color(var(--ti-mobile-button-text-color-default),
var(--ti-mobile-button-border-color),
var(--ti-mobile-button-bg-color-default));

.is-icon {
fill: var(--ti-mobile-button-default-color, #666);
fill: var(--ti-mobile-button-text-color-default);
}

&.is-disabled .is-icon {
fill: var(--ti-mobile-button-color, #fff);
fill: var(--ti-mobile-button-text-color-white);
}
}

Expand All @@ -107,101 +103,113 @@
}

&--primary {
.button-type(
var(--ti-mobile-button-color, #fff),
var(--ti-mobile-button-primary-color, #039be5)
);
.button-type(var(--ti-mobile-button-text-color-white),
var(--ti-mobile-button-bg-color-primary));

&.is-plain {
.button-plain(var(--ti-mobile-button-primary-color, #039be5));
.button-plain(var(--ti-mobile-button-bg-color-primary));
}
}

&--success {
.button-type(
var(--ti-mobile-button-color, #fff),
var(--ti-mobile-button-success-color, #52c41a)
);
.button-type(var(--ti-mobile-button-text-color-white),
var(--ti-mobile-button-bg-color-success));

&.is-plain {
.button-plain(var(--ti-mobile-button-success-color, #52c41a));
.button-plain(var(--ti-mobile-button-bg-color-success));
}
}

&--warning {
.button-type(
var(--ti-mobile-button-color, #fff),
var(--ti-mobile-button-warning-color, #faad14)
);
.button-type(var(--ti-mobile-button-text-color-white),
var(--ti-mobile-button-bg-color-warning));

&.is-plain {
.button-plain(var(--ti-mobile-button-warning-color, #faad14));
.button-plain(var(--ti-mobile-button-bg-color-warning));
}
}

&--danger {
.button-type(
var(--ti-mobile-button-color, #fff),
var(--ti-mobile-button-danger-color, #f04b3d)
);
.button-type(var(--ti-mobile-button-text-color-white),
var(--ti-mobile-button-bg-color-danger));

&.is-plain {
.button-plain(var(--ti-mobile-button-danger-color, #f04b3d));
.button-plain(var(--ti-mobile-button-bg-color-danger));
}
}

&--info {
.button-type(
var(--ti-mobile-button-color, #fff),
var(--ti-mobile-button-info-color, #333)
);
.button-type(var(--ti-mobile-button-text-color-white),
var(--ti-mobile-button-bg-color-info));

&.is-plain {
.button-plain(var(--ti-mobile-button-info-color, #333));
.button-plain(var(--ti-mobile-button-bg-color-info));
}
}

&--text {
.button-text(
var(--ti-mobile-button-text-color, #1890ff),
var(--ti-mobile-button-text-hover-color, #40a9ff),
var(--ti-mobile-button-text-active-color, #096dd9),
var(--ti-mobile-button-text-disabled-color, #999)
);
.button-text(var(--ti-mobile-button-text-color),
var(--ti-mobile-button-text-color-hover),
var(--ti-mobile-button-text-color-active),
var(--ti-mobile-button-text-color-disabled));
}

&--secondary {
.button-type(var(--ti-mobile-button-text-color-default),
var(--ti-mobile-button-bg-color-secondary));

&.is-plain {
.button-plain(var(--ti-mobile-button-bg-color-secondary));
}
}

&--default {
.button-color(var(--ti-mobile-button-text-color-default),
var(--ti-mobile-button-text-color-disabled),
var(--ti-mobile-button-text-color-white));

&.is-disabled {
.button-color(var(--ti-mobile-button-text-color-disabled),
var(--ti-mobile-button-text-color-disabled),
var(--ti-mobile-button-bg-color-white));
}
}

&--large {
width: 100%;
padding: 0 20px;
}

&--medium {
.button-size(
var(--ti-mobile-button-medium-height, 36px),
var(--ti-mobile-button-medium-font-size, 14px)
);
padding: 0 16px;
line-height: 36px;

.button-size(var(--ti-mobile-button-height-medium),
var(--ti-mobile-button-font-size-medium,));
}

&--small {
.button-size(
var(--ti-mobile-button-small-height, 30px),
var(--ti-mobile-button-small-font-size, 14px)
);
padding: 0 12px;
line-height: 28px;

.button-size(var(--ti-mobile-button-height-small),
var(--ti-mobile-button-font-size-small));
}

&--mini {
.button-size(
var(--ti-mobile-button-mini-height, 24px),
var(--ti-mobile-button-mini-font-size, 12px)
);
padding: 0 8px;
line-height: 22px;

.button-size(var(--ti-mobile-button-height-mini),
var(--ti-mobile-button-font-size-mini));
}

&.is-loading {
position: relative;
pointer-events: none;

svg {
fill: var(--ti-mobile-button-color, #fff);
font-size: var(--ti-mobile-button-font-size, 16px);
fill: var(--ti-mobile-button-text-color-white);
font-size: var(--ti-mobile-button-font-size-default);
}
}

Expand Down
45 changes: 22 additions & 23 deletions src/button/vars.less
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
:root {
--ti-mobile-button-height: 44px;
--ti-mobile-button-font-size: 16px;
--ti-mobile-button-color: var(--ti-mobile-base-color-light, #fff);
--ti-mobile-button-disabled-color: #ddd;
--ti-mobile-button-default-color: var(--ti-mobile-base-color-secondary, #666);
--ti-mobile-button-default-border-color: #ccc;
--ti-mobile-button-default-bgcolor: var(--ti-mobile-base-color-light, #fff);
--ti-mobile-button-primary-color: #039be5;
--ti-mobile-button-success-color: #52c41a;
--ti-mobile-button-warning-color: #faad14;
--ti-mobile-button-danger-color: #f04b3d;
--ti-mobile-button-info-color: var(--ti-mobile-base-color-info-normal, #333);
--ti-mobile-button-medium-height: var(--ti-mobile-base-size-height-small, 36px);
--ti-mobile-button-medium-font-size: 14px;
--ti-mobile-button-small-height: var(--ti-mobile-base-size-height-minor, 30px);
--ti-mobile-button-small-font-size: 14px;
--ti-mobile-button-mini-height: var(--ti-mobile-base-size-height-mini, 24px);
--ti-mobile-button-mini-font-size: var(--ti-mobile-base-font-size, 12px);
--ti-mobile-button-radius: var(--ti-mobile-base-radius-medium, 2px);
--ti-mobile-button-text-color: var(--ti-mobile-base-color-primary-normal, #1890ff);
--ti-mobile-button-text-hover-color: var(--ti-mobile-base-color-primary-hover, #40a9ff);
--ti-mobile-button-text-active-color: var(--ti-mobile-base-color-primary-active, #096dd9);
--ti-mobile-button-text-disabled-color: var(--ti-mobile-base-color-placeholder, #999);
--ti-mobile-button-height: 42px;
--ti-mobile-button-font-size-default: 16px;
--ti-mobile-button-text-color-white: var(--ti-mobile-common-color-text-white, #fff);
--ti-mobile-button-text-color-disabled: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb);
--ti-mobile-button-text-color-default: var(--ti-mobile-common-color-text-primary, #191919);
--ti-mobile-button-border-color: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb);
--ti-mobile-button-bg-color-default: var(--ti-mobile-common-bg-color-white, #fff);
--ti-mobile-button-bg-color-primary: var(--ti-mobile-common-color-error-figure-3, #1e8aff);
--ti-mobile-button-bg-color-success: var(--ti-mobile-common-color-warning-figure-3, #1ebe40);
--ti-mobile-button-bg-color-warning: var(--ti-mobile-common-color-error-figure-2, #fccd32);
--ti-mobile-button-bg-color-danger: var(--ti-mobile-common-color-error-figure-1, #eb5454);
--ti-mobile-button-bg-color-disabled: var(--ti-mobile-common-bg-color-disabled, #e8e8e8);
--ti-mobile-button-bg-color-info: #333;
--ti-mobile-button-height-medium: 36px;
--ti-mobile-button-font-size-medium: 14px;
--ti-mobile-button-height-small: 28px;
--ti-mobile-button-font-size-small: 12px;
--ti-mobile-button-height-mini: 22px;
--ti-mobile-button-font-size-mini: 10px;
--ti-mobile-button-text-color: var(--ti-mobile-common-color-link-highlight, #4a79fe);
--ti-mobile-button-text-color-hover: #6e94fe;
--ti-mobile-button-text-color-active: var(--ti-mobile-common-color-link-highlight, #4a79fe);
}