This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

更新UI风格为圆角实心风格

old
宇天 2021-01-27 20:52:23 +08:00
parent ba0e3d78eb
commit 646da06db1
16 changed files with 206 additions and 305 deletions

View File

@ -16,11 +16,11 @@ const BUILD_DATE = new Date().format()
const BASE_SCSS = ` const BASE_SCSS = `
@mixin focus1(){ @mixin focus1(){
box-shadow: 0 0 2px #88f7df; box-shadow: 0 0 3px var(--color-blue-1);
} }
@mixin focus2(){ @mixin focus2(){
box-shadow: 0 0 2px #f3be4d; box-shadow: 0 0 3px var(--color-orange-1);
} }
* { * {

View File

@ -39,25 +39,25 @@
} }
} }
:host([color='red']) { :host([type='danger']) {
background: #ff5061; background: #ff5061;
} }
:host([color='teal']) { :host([type='primary']) {
background: #3fc2a7; background: #3fc2a7;
} }
:host([color='purple']) { :host([color='purple']) {
background: #ac61ce; background: #ac61ce;
} }
:host([color='green']) { :host([type='success']) {
background: #58d68d; background: #58d68d;
} }
:host([color='orange']) { :host([color='orange']) {
background: #ffb618; background: #ffb618;
} }
:host([color='dark']) { :host([type='inverse']) {
background: #62778d; background: #62778d;
} }
:host([color='blue']) { :host([type='info']) {
background: #66b1ff; background: #66b1ff;
} }

View File

@ -33,13 +33,13 @@
padding: 2px 4px; padding: 2px 4px;
} }
} }
:host([color='dark']) .dot { :host([type='inverse']) .dot {
background: var(--color-dark-1); background: var(--color-dark-1);
} }
:host([color='green']) .dot { :host([type='success']) .dot {
background: var(--color-green-1); background: var(--color-green-1);
} }
:host([color='blue']) .dot { :host([type='info']) .dot {
background: var(--color-blue-1); background: var(--color-blue-1);
} }
:host([color='orange']) .dot { :host([color='orange']) .dot {
@ -48,7 +48,7 @@
:host([color='purple']) .dot { :host([color='purple']) .dot {
background: var(--color-purple-1); background: var(--color-purple-1);
} }
:host([color='teal']) .dot { :host([type='primary']) .dot {
background: var(--color-teal-1); background: var(--color-teal-1);
} }
</style> </style>

View File

@ -44,30 +44,35 @@ code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
:root { :root {
/* primary */
--color-teal-1: #4db6ac; --color-teal-1: #4db6ac;
--color-teal-2: #26a69a; --color-teal-2: #26a69a;
--color-teal-3: #009688; --color-teal-3: #009688;
/* sucess */
--color-green-1: #81c784; --color-green-1: #81c784;
--color-green-2: #66bb6a; --color-green-2: #66bb6a;
--color-green-3: #4caf50; --color-green-3: #4caf50;
--color-purple-1: #9575cd; /* info */
--color-purple-2: #9575cd;
--color-purple-3: #673ab7;
--color-blue-1: #64b5f6; --color-blue-1: #64b5f6;
--color-blue-2: #42a5f5; --color-blue-2: #42a5f5;
--color-blue-3: #2196f3; --color-blue-3: #2196f3;
/* danger */
--color-red-1: #ff5061; --color-red-1: #ff5061;
--color-red-2: #eb3b48; --color-red-2: #eb3b48;
--color-red-3: #ce3742; --color-red-3: #ce3742;
/* warning */
--color-orange-1: #ffb618; --color-orange-1: #ffb618;
--color-orange-2: #f39c12; --color-orange-2: #f39c12;
--color-orange-3: #e67e22; --color-orange-3: #e67e22;
/* default1 */
--color-plain-1: #f2f5fc; --color-plain-1: #f2f5fc;
--color-plain-2: #e8ebf4; --color-plain-2: #e8ebf4;
--color-plain-3: #dae1e9; --color-plain-3: #dae1e9;
--color-grey-1: #bdbdbd; /* default2 */
--color-grey-2: #9e9e9e; --color-grey-1: #cacfd2;
--color-grey-3: #757575; --color-grey-2: #bdc3c7;
--color-grey-3: #a1a6a9;
/* inverse */
--color-dark-1: #62778d; --color-dark-1: #62778d;
--color-dark-2: #526273; --color-dark-2: #526273;
--color-dark-3: #425064; --color-dark-3: #425064;

View File

@ -8,14 +8,15 @@
<style lang="scss"> <style lang="scss">
:host { :host {
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-flex;
min-width: 64px; min-width: 64px;
height: 32px; height: 32px;
border-radius: 2px; border-radius: 6px;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: var(--color-dark-2); color: var(--color-dark-1);
font-size: 14px; font-size: 14px;
vertical-align: middle;
cursor: pointer; cursor: pointer;
button { button {
@ -24,26 +25,19 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: inherit; height: inherit;
padding: 0 10px; padding: var(--padding, 0 14px);
margin: auto; margin: auto;
line-height: 0; line-height: 1;
border: 1px solid var(--color-plain-3); border: 0;
border-radius: inherit; border-radius: inherit;
white-space: nowrap; white-space: nowrap;
background: #fff; background: var(--color-plain-2);
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
outline: none; outline: none;
color: inherit; color: inherit;
cursor: inherit; cursor: inherit;
transition: background 0.2s linear;
&:hover {
background: var(--color-plain-1);
}
&:active {
border-color: var(--color-grey-1);
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: none; border: none;
@ -51,30 +45,30 @@
} }
.icon { .icon {
--size: 18px; --size: var(--icon-size, 18px);
margin-right: 3px; margin-right: 3px;
} }
} }
:host([size='large']) { :host([size='large']) {
min-width: 120px; min-width: 212px;
height: 42px; height: 52px;
font-size: 16px; font-size: 18px;
.icon { .icon {
--size: 20px; --size: 26px;
} }
} }
:host([size='large'][circle]) { :host([size='large'][circle]) {
min-width: 62px; min-width: 52px;
height: 62px; height: 52px;
button { button {
padding: 0 20px; padding: 0;
} }
} }
:host([size='medium']) { :host([size='medium']) {
min-width: 90px; min-width: 128px;
height: 36px; height: 36px;
button { button {
@ -84,10 +78,9 @@
:host([size='medium'][circle]) { :host([size='medium'][circle]) {
min-width: 36px; min-width: 36px;
} }
:host([size='mini']), :host([size='mini']) {
:host([text]) { min-width: 26px;
min-width: 24px; height: 26px;
height: 24px;
font-size: 12px; font-size: 12px;
button { button {
@ -99,25 +92,11 @@
} }
} }
:host([size='mini'][circle]) { :host([size='mini'][circle]) {
min-width: 24px; min-width: 26px;
}
:host([text]) {
height: 18px;
button {
padding: 0;
border: 0;
&:hover {
background: none;
text-decoration: underline;
}
}
} }
:host([round]) { :host([round]) {
border-radius: 21px; border-radius: 26px;
} }
:host([circle]) { :host([circle]) {
min-width: 32px; min-width: 32px;
@ -128,35 +107,48 @@
.icon { .icon {
margin-right: 0; margin-right: 0;
} }
}
:host([loading]), slot {
:host([disabled]) { display: none;
cursor: not-allowed;
color: var(--color-grey-1);
opacity: 0.6;
.icon {
color: var(--color-grey-1);
}
button {
background: #fff;
border-color: var(--color-plain-3);
} }
} }
:host([color]) { :host([type]) {
color: #fff;
button {
border-color: transparent;
}
.icon {
color: #fff; color: #fff;
} }
:host([link]) {
min-width: auto;
height: auto;
font-size: 14px;
color: var(--color-plain-3);
button {
padding: 0;
background: none;
&:hover {
text-decoration: underline;
}
}
} }
:host([color='red']) button { :host(:not([disabled]):not([loading]):not([link])) button {
&:hover {
background: var(--color-plain-1);
}
&:active {
background: var(--color-plain-3);
}
}
// -------------
:host([type='danger']:not([link])) button {
background: var(--color-red-2); background: var(--color-red-2);
}
:host([type='danger'][link]) button {
color: var(--color-red-1);
}
:host([type='danger']:not([disabled]):not([loading]):not([link])) button {
&:hover { &:hover {
background: var(--color-red-1); background: var(--color-red-1);
} }
@ -165,24 +157,14 @@
} }
} }
:host([color='red'][text]) button { // -------------
background: transparent; :host([type='info']:not([link])) button {
color: var(--color-red-2);
&:hover {
color: var(--color-red-1);
}
&:active {
color: var(--color-red-3);
}
}
:host([color='red'][loading]) button,
:host([color='red'][disabled]) button {
background: var(--color-red-1);
}
:host([color='blue']) button {
background: var(--color-blue-2); background: var(--color-blue-2);
}
:host([type='info'][link]) button {
color: var(--color-blue-2);
}
:host([type='info']:not([disabled]):not([loading]):not([link])) button {
&:hover { &:hover {
background: var(--color-blue-1); background: var(--color-blue-1);
} }
@ -191,23 +173,14 @@
} }
} }
:host([color='blue'][text]) button { // --------
background: transparent; :host([type='sucess']:not([link])) button {
color: var(--color-blue-2);
&:hover {
color: var(--color-blue-1);
}
&:active {
color: var(--color-blue-3);
}
}
:host([color='blue'][loading]) button,
:host([color='blue'][disabled]) button {
background: var(--color-blue-1);
}
:host([color='green']) button {
background: var(--color-green-2); background: var(--color-green-2);
}
:host([type='success'][link]) button {
color: var(--color-green-2);
}
:host([type='sucess']:not([disabled]):not([loading]):not([link])) button {
&:hover { &:hover {
background: var(--color-green-1); background: var(--color-green-1);
} }
@ -215,23 +188,15 @@
background: var(--color-green-3); background: var(--color-green-3);
} }
} }
:host([color='green'][text]) button {
background: transparent;
color: var(--color-green-2);
&:hover {
color: var(--color-green-1);
}
&:active {
color: var(--color-green-3);
}
}
:host([color='green'][loading]) button,
:host([color='green'][disabled]) button {
background: var(--color-green-1);
}
:host([color='teal']) button { // ---------
:host([type='primary']:not([link])) button {
background: var(--color-teal-2); background: var(--color-teal-2);
}
:host([type='primary'][link]) button {
color: var(--color-teal-2);
}
:host([type='primary']:not([disabled]):not([loading]):not([link])) button {
&:hover { &:hover {
background: var(--color-teal-1); background: var(--color-teal-1);
} }
@ -239,23 +204,15 @@
background: var(--color-teal-3); background: var(--color-teal-3);
} }
} }
:host([color='teal'][text]) button {
background: transparent;
color: var(--color-teal-2);
&:hover {
color: var(--color-teal-1);
}
&:active {
color: var(--color-teal-3);
}
}
:host([color='teal'][loading]) button,
:host([color='teal'][disabled]) button {
background: var(--color-teal-1);
}
:host([color='orange']) button { // ----------
:host([type='warning']:not([link])) button {
background: var(--color-orange-2); background: var(--color-orange-2);
}
:host([type='warning'][link]) button {
color: var(--color-orange-2);
}
:host([type='warning']:not([disabled]):not([loading]):not([link])) button {
&:hover { &:hover {
background: var(--color-orange-1); background: var(--color-orange-1);
} }
@ -263,23 +220,15 @@
background: var(--color-orange-3); background: var(--color-orange-3);
} }
} }
:host([color='orange'][text]) button {
background: transparent;
color: var(--color-orange-2);
&:hover {
color: var(--color-orange-1);
}
&:active {
color: var(--color-orange-3);
}
}
:host([color='orange'][loading]) button,
:host([color='orange'][disabled]) button {
background: var(--color-orange-1);
}
:host([color='dark']) button { // -------
:host([type='inverse']:not([link])) button {
background: var(--color-dark-2); background: var(--color-dark-2);
}
:host([type='inverse'][link]) button {
color: var(--color-dark-2);
}
:host([type='inverse']:not([disabled]):not([loading]):not([link])) button {
&:hover { &:hover {
background: var(--color-dark-1); background: var(--color-dark-1);
} }
@ -287,47 +236,15 @@
background: var(--color-dark-3); background: var(--color-dark-3);
} }
} }
:host([color='dark'][text]) button {
background: transparent;
color: var(--color-dark-2);
&:hover {
color: var(--color-dark-1);
}
&:active {
color: var(--color-dark-3);
}
}
:host([color='dark'][loading]) button,
:host([color='dark'][disabled]) button {
background: var(--color-dark-1);
}
:host([color='purple']) button { // -------
background: var(--color-purple-2); :host([type='default']:not([link])) button {
&:hover {
background: var(--color-purple-1);
}
&:active {
background: var(--color-purple-3);
}
}
:host([color='purple'][text]) button {
background: transparent;
color: var(--color-purple-2);
&:hover {
color: var(--color-purple-1);
}
&:active {
color: var(--color-purple-3);
}
}
:host([color='purple'][loading]) button,
:host([color='purple'][disabled]) button {
background: var(--color-purple-1);
}
:host([color='grey']) button {
background: var(--color-grey-2); background: var(--color-grey-2);
}
:host([type='default'][link]) button {
color: var(--color-grey-2);
}
:host([type='default']:not([disabled]):not([loading]):not([link])) button {
&:hover { &:hover {
background: var(--color-grey-1); background: var(--color-grey-1);
} }
@ -335,47 +252,26 @@
background: var(--color-grey-3); background: var(--color-grey-3);
} }
} }
:host([color='grey'][text]) button {
background: transparent; :host([loading]),
color: var(--color-grey-2); :host([disabled]) {
&:hover { cursor: not-allowed;
color: var(--color-grey-1); opacity: 0.6;
}
&:active {
color: var(--color-grey-3);
}
}
:host([color='grey'][loading]) button,
:host([color='grey'][disabled]) button {
background: var(--color-grey-1);
} }
:host([no-border]) { :host([link][loading]),
:host([link][disabled]) {
button { button {
border-color: transparent;
background: inherit;
}
}
:host([text][loading]),
:host([text][disabled]) {
button {
&,
&:hover, &:hover,
&:active { &:active {
text-decoration: none; text-decoration: none;
background: transparent;
} }
} }
} }
:host(:focus-within) { :host(:focus-within:not([link]):not([disabled]):not([loading])) {
@include focus1; @include focus1;
} }
:host(:focus-within[disabled]),
:host(:focus-within[loading]) {
box-shadow: none;
}
</style> </style>
<script> <script>
@ -398,7 +294,7 @@ export default class Button {
// 圆形按钮不允许文字 // 圆形按钮不允许文字
if (this.hasAttribute('circle')) { if (this.hasAttribute('circle')) {
this.textContent = '' // this.textContent = ''
} }
this.__BTN__ = this.root.children[1] this.__BTN__ = this.root.children[1]

View File

@ -18,7 +18,7 @@
min-width: 32px; min-width: 32px;
height: 32px; height: 32px;
padding: 0 5px; padding: 0 5px;
line-height: 0; line-height: 1;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
@ -69,7 +69,7 @@
} }
} }
:host([color='red']) label.checked { :host([type='danger']) label.checked {
color: var(--color-red-1); color: var(--color-red-1);
.dot { .dot {
border-color: var(--color-red-1); border-color: var(--color-red-1);
@ -79,7 +79,7 @@
} }
} }
:host([color='blue']) label.checked { :host([type='info']) label.checked {
color: var(--color-blue-1); color: var(--color-blue-1);
.dot { .dot {
border-color: var(--color-blue-1); border-color: var(--color-blue-1);
@ -89,7 +89,7 @@
} }
} }
:host([color='green']) label.checked { :host([type='success']) label.checked {
color: var(--color-green-1); color: var(--color-green-1);
.dot { .dot {
border-color: var(--color-green-1); border-color: var(--color-green-1);
@ -99,7 +99,7 @@
} }
} }
:host([color='teal']) label.checked { :host([type='primary']) label.checked {
color: var(--color-teal-1); color: var(--color-teal-1);
.dot { .dot {
border-color: var(--color-teal-1); border-color: var(--color-teal-1);
@ -119,7 +119,7 @@
} }
} }
:host([color='dark']) label.checked { :host([type='inverse']) label.checked {
color: var(--color-dark-1); color: var(--color-dark-1);
.dot { .dot {
border-color: var(--color-dark-1); border-color: var(--color-dark-1);

View File

@ -74,7 +74,7 @@ li {
width: auto; width: auto;
height: 30px; height: 30px;
padding: 0 10px; padding: 0 10px;
line-height: 0; line-height: 1;
background: var(--bg-color, --color-plain-1); background: var(--bg-color, --color-plain-1);
white-space: nowrap; white-space: nowrap;
} }

View File

@ -25,7 +25,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
line-height: 0; line-height: 1;
font-size: 14px; font-size: 14px;
border: 1px solid var(--color-plain-3); border: 1px solid var(--color-plain-3);
border-radius: inherit; border-radius: inherit;

View File

@ -35,15 +35,15 @@
height: 6px; height: 6px;
} }
:host([color='red']) label span { :host([type='danger']) label span {
background: var(--color-red-1); background: var(--color-red-1);
} }
:host([color='blue']) label span { :host([type='info']) label span {
background: var(--color-blue-1); background: var(--color-blue-1);
} }
:host([color='green']) label span { :host([type='success']) label span {
background: var(--color-green-1); background: var(--color-green-1);
} }
@ -51,7 +51,7 @@
background: var(--color-orange-1); background: var(--color-orange-1);
} }
:host([color='dark']) label span { :host([type='inverse']) label span {
background: var(--color-dark-1); background: var(--color-dark-1);
} }

View File

@ -107,7 +107,7 @@
} }
} }
:host([color='red']) label.checked { :host([type='danger']) label.checked {
color: var(--color-red-1); color: var(--color-red-1);
.dot { .dot {
border-color: var(--color-red-1); border-color: var(--color-red-1);
@ -117,7 +117,7 @@
} }
} }
:host([color='blue']) label.checked { :host([type='info']) label.checked {
color: var(--color-blue-1); color: var(--color-blue-1);
.dot { .dot {
border-color: var(--color-blue-1); border-color: var(--color-blue-1);
@ -127,7 +127,7 @@
} }
} }
:host([color='green']) label.checked { :host([type='success']) label.checked {
color: var(--color-green-1); color: var(--color-green-1);
.dot { .dot {
border-color: var(--color-green-1); border-color: var(--color-green-1);
@ -137,7 +137,7 @@
} }
} }
:host([color='teal']) label.checked { :host([type='primary']) label.checked {
color: var(--color-teal-1); color: var(--color-teal-1);
.dot { .dot {
border-color: var(--color-teal-1); border-color: var(--color-teal-1);
@ -157,7 +157,7 @@
} }
} }
:host([color='dark']) label.checked { :host([type='inverse']) label.checked {
color: var(--color-dark-1); color: var(--color-dark-1);
.dot { .dot {
border-color: var(--color-dark-1); border-color: var(--color-dark-1);

View File

@ -28,7 +28,7 @@
min-width: 64px; min-width: 64px;
width: 100%; width: 100%;
height: 32px; height: 32px;
line-height: 0; line-height: 1;
font-size: 14px; font-size: 14px;
border: 1px solid var(--color-plain-3); border: 1px solid var(--color-plain-3);
border-radius: inherit; border-radius: inherit;

View File

@ -24,7 +24,7 @@
label { label {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 0; line-height: 1;
cursor: inherit; cursor: inherit;
wc-icon { wc-icon {
@ -54,19 +54,19 @@ label {
--size: 20px; --size: 20px;
} }
:host([color='red']) label span { :host([type='danger']) label span {
color: var(--color-red-1); color: var(--color-red-1);
} }
:host([color='teal']) label span { :host([type='primary']) label span {
color: var(--color-teal-1); color: var(--color-teal-1);
} }
:host([color='green']) label span { :host([type='success']) label span {
color: var(--color-green-1); color: var(--color-green-1);
} }
:host([color='grey']) label span { :host([type='default']) label span {
color: var(--color-grey-1); color: var(--color-grey-1);
} }
:host([color='blue']) label span { :host([type='info']) label span {
color: var(--color-blue-1); color: var(--color-blue-1);
} }
:host([color='purple']) label span { :host([color='purple']) label span {

View File

@ -16,7 +16,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// vertical-align: middle; // vertical-align: middle;
line-height: 0; line-height: 1;
white-space: nowrap; white-space: nowrap;
} }
label { label {
@ -82,19 +82,19 @@
} }
} }
:host([color='red']) label.checked { :host([type='danger']) label.checked {
background: var(--color-red-1); background: var(--color-red-1);
} }
:host([color='blue']) label.checked { :host([type='info']) label.checked {
background: var(--color-blue-1); background: var(--color-blue-1);
} }
:host([color='green']) label.checked { :host([type='success']) label.checked {
background: var(--color-green-1); background: var(--color-green-1);
} }
:host([color='teal']) label.checked { :host([type='primary']) label.checked {
background: var(--color-teal-1); background: var(--color-teal-1);
} }
@ -102,7 +102,7 @@
background: var(--color-orange-1); background: var(--color-orange-1);
} }
:host([color='dark']) label.checked { :host([type='inverse']) label.checked {
background: var(--color-dark-1); background: var(--color-dark-1);
} }

View File

@ -4,7 +4,9 @@
<style lang="scss"> <style lang="scss">
:host { :host {
display: inline-block; display: inline-flex;
width: var(--size, 32px);
height: var(--size, 32px);
color: inherit; color: inherit;
} }
:host(:not([is])) { :host(:not([is])) {
@ -12,9 +14,6 @@
} }
.icon { .icon {
display: block; display: block;
width: var(--size, 32px);
height: var(--size, 32px);
margin: var(--pad, auto);
fill: currentColor; fill: currentColor;
&.load { &.load {
@ -28,30 +27,30 @@
} }
:host([size='large']) .icon { :host([size='large']) .icon {
width: 42px; width: 52px;
height: 42px; height: 52px;
} }
:host([size='medium']) .icon { :host([size='medium']) .icon {
width: 38px; width: 36px;
height: 38px; height: 36px;
} }
:host([size='mini']) .icon { :host([size='mini']) .icon {
width: 20px; width: 26px;
height: 20px; height: 26px;
} }
:host([color='red']) { :host([type='danger']) {
color: var(--color-red-1); color: var(--color-red-1);
} }
:host([color='blue']) { :host([type='info']) {
color: var(--color-blue-1); color: var(--color-blue-1);
} }
:host([color='green']) { :host([type='success']) {
color: var(--color-green-1); color: var(--color-green-1);
} }
:host([color='teal']) { :host([type='primary']) {
color: var(--color-teal-1); color: var(--color-teal-1);
} }
@ -59,15 +58,11 @@
color: var(--color-orange-1); color: var(--color-orange-1);
} }
:host([color='dark']) { :host([type='inverse']) {
color: var(--color-dark-1); color: var(--color-dark-1);
} }
:host([color='purple']) { :host([type='default']) {
color: var(--color-purple-1);
}
:host([color='grey']) {
color: var(--color-grey-1); color: var(--color-grey-1);
} }

View File

@ -1,10 +1,15 @@
<template> <template>
<div class="layout"> <div class="layout">
<button data-page="1" class="home">|<</button> <wc-button
<button data-page="prev" class="prev"><</button> color="plain"
data-page="1"
class="home"
icon="dbl-left"
></wc-button>
<wc-button data-page="prev" class="prev" icon="left"></wc-button>
<div class="pager"></div> <div class="pager"></div>
<button data-page="next" class="next">></button> <wc-button data-page="next" class="next" icon="right"></wc-button>
<button data-page="end" class="end">>|</button> <wc-button data-page="end" class="end" icon="dbl-right"></wc-button>
</div> </div>
</template> </template>
@ -17,24 +22,22 @@
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
.layout { .layout,
.pager {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
.layout {
margin: 10px auto; margin: 10px auto;
} }
button { wc-button {
min-width: 32px; min-width: 32px;
height: 32px; // height: 32px;
padding: 0 8px; --padding: 0;
margin: 0 3px; margin: 0 3px;
background: var(--color-plain-1); --icon-size: 14px;
border: 0;
border-radius: 2px;
outline: none;
font-size: inherit;
color: inherit;
&:hover { &:hover {
background: var(--color-plain-2); background: var(--color-plain-2);
@ -58,19 +61,19 @@
border-radius: 50%; border-radius: 50%;
} }
:host([color='red']) button[curr] { :host([type='danger']) button[curr] {
background: var(--color-red-1); background: var(--color-red-1);
} }
:host([color='blue']) button[curr] { :host([type='info']) button[curr] {
background: var(--color-blue-1); background: var(--color-blue-1);
} }
:host([color='green']) button[curr] { :host([type='success']) button[curr] {
background: var(--color-green-1); background: var(--color-green-1);
} }
:host([color='teal']) button[curr] { :host([type='primary']) button[curr] {
background: var(--color-teal-1); background: var(--color-teal-1);
} }
@ -78,7 +81,7 @@
background: var(--color-orange-1); background: var(--color-orange-1);
} }
:host([color='dark']) button[curr] { :host([type='inverse']) button[curr] {
background: var(--color-dark-1); background: var(--color-dark-1);
} }
@ -89,6 +92,7 @@
<script> <script>
import $ from '../utils' import $ from '../utils'
import '../form/button'
// 计算页码 // 计算页码
function calculate(curr, total, simple) { function calculate(curr, total, simple) {
@ -129,6 +133,7 @@ function calculate(curr, total, simple) {
return arr return arr
} }
//
export default class Pager { export default class Pager {
props = { props = {
layout: 'home, prev, next, end', layout: 'home, prev, next, end',
@ -156,9 +161,9 @@ export default class Pager {
this.__PAGE__.innerHTML = list this.__PAGE__.innerHTML = list
.map( .map(
it => it =>
`<button ${curr === it.to ? 'curr' : ''} data-page="${it.to}">${ `<wc-button ${curr === it.to ? 'color="teal"' : ''} data-page="${
it.txt it.to
}</button>` }">${it.txt}</wc-button>`
) )
.join('') .join('')
} }
@ -170,7 +175,7 @@ export default class Pager {
this.update() this.update()
$.bind(this.__LAYOUT__, 'click', ev => { $.bind(this.__LAYOUT__, 'click', ev => {
if (ev.target.tagName === 'BUTTON') { if (ev.target.tagName === 'WC-BUTTON') {
var { curr, totalpage } = this.props var { curr, totalpage } = this.props
var page = ev.target.dataset.page var page = ev.target.dataset.page
var num = +page var num = +page

View File

@ -60,7 +60,7 @@
} }
} }
:host([color='red']) { :host([type='danger']) {
.slider-box .slider { .slider-box .slider {
background: var(--color-red-1); background: var(--color-red-1);
} }
@ -70,12 +70,12 @@
background: var(--color-orange-1); background: var(--color-orange-1);
} }
} }
:host([color='green']) { :host([type='success']) {
.slider-box .slider { .slider-box .slider {
background: var(--color-green-1); background: var(--color-green-1);
} }
} }
:host([color='blue']) { :host([type='info']) {
.slider-box .slider { .slider-box .slider {
background: var(--color-blue-1); background: var(--color-blue-1);
} }
@ -85,12 +85,12 @@
background: var(--color-purple-1); background: var(--color-purple-1);
} }
} }
:host([color='grey']) { :host([type='default']) {
.slider-box .slider { .slider-box .slider {
background: var(--color-grey-1); background: var(--color-grey-1);
} }
} }
:host([color='dark']) { :host([type='inverse']) {
.slider-box .slider { .slider-box .slider {
background: var(--color-dark-1); background: var(--color-dark-1);
} }