更新UI风格为圆角实心风格
parent
ba0e3d78eb
commit
646da06db1
|
|
@ -16,11 +16,11 @@ const BUILD_DATE = new Date().format()
|
|||
|
||||
const BASE_SCSS = `
|
||||
@mixin focus1(){
|
||||
box-shadow: 0 0 2px #88f7df;
|
||||
box-shadow: 0 0 3px var(--color-blue-1);
|
||||
}
|
||||
|
||||
@mixin focus2(){
|
||||
box-shadow: 0 0 2px #f3be4d;
|
||||
box-shadow: 0 0 3px var(--color-orange-1);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -39,25 +39,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
:host([color='red']) {
|
||||
:host([type='danger']) {
|
||||
background: #ff5061;
|
||||
}
|
||||
:host([color='teal']) {
|
||||
:host([type='primary']) {
|
||||
background: #3fc2a7;
|
||||
}
|
||||
:host([color='purple']) {
|
||||
background: #ac61ce;
|
||||
}
|
||||
:host([color='green']) {
|
||||
:host([type='success']) {
|
||||
background: #58d68d;
|
||||
}
|
||||
:host([color='orange']) {
|
||||
background: #ffb618;
|
||||
}
|
||||
:host([color='dark']) {
|
||||
:host([type='inverse']) {
|
||||
background: #62778d;
|
||||
}
|
||||
:host([color='blue']) {
|
||||
:host([type='info']) {
|
||||
background: #66b1ff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,13 +33,13 @@
|
|||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
:host([color='dark']) .dot {
|
||||
:host([type='inverse']) .dot {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
:host([color='green']) .dot {
|
||||
:host([type='success']) .dot {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
:host([color='blue']) .dot {
|
||||
:host([type='info']) .dot {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
:host([color='orange']) .dot {
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
:host([color='purple']) .dot {
|
||||
background: var(--color-purple-1);
|
||||
}
|
||||
:host([color='teal']) .dot {
|
||||
:host([type='primary']) .dot {
|
||||
background: var(--color-teal-1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,30 +44,35 @@ code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
|
|||
|
||||
|
||||
:root {
|
||||
/* primary */
|
||||
--color-teal-1: #4db6ac;
|
||||
--color-teal-2: #26a69a;
|
||||
--color-teal-3: #009688;
|
||||
/* sucess */
|
||||
--color-green-1: #81c784;
|
||||
--color-green-2: #66bb6a;
|
||||
--color-green-3: #4caf50;
|
||||
--color-purple-1: #9575cd;
|
||||
--color-purple-2: #9575cd;
|
||||
--color-purple-3: #673ab7;
|
||||
/* info */
|
||||
--color-blue-1: #64b5f6;
|
||||
--color-blue-2: #42a5f5;
|
||||
--color-blue-3: #2196f3;
|
||||
/* danger */
|
||||
--color-red-1: #ff5061;
|
||||
--color-red-2: #eb3b48;
|
||||
--color-red-3: #ce3742;
|
||||
/* warning */
|
||||
--color-orange-1: #ffb618;
|
||||
--color-orange-2: #f39c12;
|
||||
--color-orange-3: #e67e22;
|
||||
/* default1 */
|
||||
--color-plain-1: #f2f5fc;
|
||||
--color-plain-2: #e8ebf4;
|
||||
--color-plain-3: #dae1e9;
|
||||
--color-grey-1: #bdbdbd;
|
||||
--color-grey-2: #9e9e9e;
|
||||
--color-grey-3: #757575;
|
||||
/* default2 */
|
||||
--color-grey-1: #cacfd2;
|
||||
--color-grey-2: #bdc3c7;
|
||||
--color-grey-3: #a1a6a9;
|
||||
/* inverse */
|
||||
--color-dark-1: #62778d;
|
||||
--color-dark-2: #526273;
|
||||
--color-dark-3: #425064;
|
||||
|
|
|
|||
|
|
@ -8,14 +8,15 @@
|
|||
<style lang="scss">
|
||||
:host {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
min-width: 64px;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
color: var(--color-dark-2);
|
||||
color: var(--color-dark-1);
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
button {
|
||||
|
|
@ -24,26 +25,19 @@
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
padding: 0 10px;
|
||||
padding: var(--padding, 0 14px);
|
||||
margin: auto;
|
||||
line-height: 0;
|
||||
border: 1px solid var(--color-plain-3);
|
||||
line-height: 1;
|
||||
border: 0;
|
||||
border-radius: inherit;
|
||||
white-space: nowrap;
|
||||
background: #fff;
|
||||
background: var(--color-plain-2);
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
cursor: inherit;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--color-grey-1);
|
||||
}
|
||||
transition: background 0.2s linear;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: none;
|
||||
|
|
@ -51,30 +45,30 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
--size: 18px;
|
||||
--size: var(--icon-size, 18px);
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:host([size='large']) {
|
||||
min-width: 120px;
|
||||
height: 42px;
|
||||
font-size: 16px;
|
||||
min-width: 212px;
|
||||
height: 52px;
|
||||
font-size: 18px;
|
||||
|
||||
.icon {
|
||||
--size: 20px;
|
||||
--size: 26px;
|
||||
}
|
||||
}
|
||||
:host([size='large'][circle]) {
|
||||
min-width: 62px;
|
||||
height: 62px;
|
||||
min-width: 52px;
|
||||
height: 52px;
|
||||
|
||||
button {
|
||||
padding: 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
:host([size='medium']) {
|
||||
min-width: 90px;
|
||||
min-width: 128px;
|
||||
height: 36px;
|
||||
|
||||
button {
|
||||
|
|
@ -84,10 +78,9 @@
|
|||
:host([size='medium'][circle]) {
|
||||
min-width: 36px;
|
||||
}
|
||||
:host([size='mini']),
|
||||
:host([text]) {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
:host([size='mini']) {
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
font-size: 12px;
|
||||
|
||||
button {
|
||||
|
|
@ -99,25 +92,11 @@
|
|||
}
|
||||
}
|
||||
:host([size='mini'][circle]) {
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
:host([text]) {
|
||||
height: 18px;
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
min-width: 26px;
|
||||
}
|
||||
|
||||
:host([round]) {
|
||||
border-radius: 21px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
:host([circle]) {
|
||||
min-width: 32px;
|
||||
|
|
@ -128,35 +107,48 @@
|
|||
.icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:host([loading]),
|
||||
:host([disabled]) {
|
||||
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);
|
||||
slot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:host([color]) {
|
||||
:host([type]) {
|
||||
color: #fff;
|
||||
}
|
||||
:host([link]) {
|
||||
min-width: auto;
|
||||
height: auto;
|
||||
font-size: 14px;
|
||||
color: var(--color-plain-3);
|
||||
|
||||
button {
|
||||
border-color: transparent;
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
:host([type='danger'][link]) button {
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
:host([type='danger']:not([disabled]):not([loading]):not([link])) button {
|
||||
&:hover {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
|
|
@ -165,24 +157,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
:host([color='red'][text]) button {
|
||||
background: transparent;
|
||||
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 {
|
||||
// -------------
|
||||
:host([type='info']:not([link])) button {
|
||||
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 {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
|
|
@ -191,23 +173,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
:host([color='blue'][text]) button {
|
||||
background: transparent;
|
||||
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 {
|
||||
// --------
|
||||
:host([type='sucess']:not([link])) button {
|
||||
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 {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
|
|
@ -215,23 +188,15 @@
|
|||
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);
|
||||
}
|
||||
:host([type='primary'][link]) button {
|
||||
color: var(--color-teal-2);
|
||||
}
|
||||
:host([type='primary']:not([disabled]):not([loading]):not([link])) button {
|
||||
&:hover {
|
||||
background: var(--color-teal-1);
|
||||
}
|
||||
|
|
@ -239,23 +204,15 @@
|
|||
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);
|
||||
}
|
||||
:host([type='warning'][link]) button {
|
||||
color: var(--color-orange-2);
|
||||
}
|
||||
:host([type='warning']:not([disabled]):not([loading]):not([link])) button {
|
||||
&:hover {
|
||||
background: var(--color-orange-1);
|
||||
}
|
||||
|
|
@ -263,23 +220,15 @@
|
|||
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);
|
||||
}
|
||||
:host([type='inverse'][link]) button {
|
||||
color: var(--color-dark-2);
|
||||
}
|
||||
:host([type='inverse']:not([disabled]):not([loading]):not([link])) button {
|
||||
&:hover {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
|
|
@ -287,47 +236,15 @@
|
|||
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);
|
||||
&: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 {
|
||||
// -------
|
||||
:host([type='default']:not([link])) button {
|
||||
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 {
|
||||
background: var(--color-grey-1);
|
||||
}
|
||||
|
|
@ -335,47 +252,26 @@
|
|||
background: var(--color-grey-3);
|
||||
}
|
||||
}
|
||||
:host([color='grey'][text]) button {
|
||||
background: transparent;
|
||||
color: var(--color-grey-2);
|
||||
&:hover {
|
||||
color: var(--color-grey-1);
|
||||
}
|
||||
&:active {
|
||||
color: var(--color-grey-3);
|
||||
}
|
||||
}
|
||||
:host([color='grey'][loading]) button,
|
||||
:host([color='grey'][disabled]) button {
|
||||
background: var(--color-grey-1);
|
||||
|
||||
:host([loading]),
|
||||
:host([disabled]) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
:host([no-border]) {
|
||||
:host([link][loading]),
|
||||
:host([link][disabled]) {
|
||||
button {
|
||||
border-color: transparent;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
:host([text][loading]),
|
||||
:host([text][disabled]) {
|
||||
button {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host(:focus-within) {
|
||||
:host(:focus-within:not([link]):not([disabled]):not([loading])) {
|
||||
@include focus1;
|
||||
}
|
||||
:host(:focus-within[disabled]),
|
||||
:host(:focus-within[loading]) {
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -398,7 +294,7 @@ export default class Button {
|
|||
|
||||
// 圆形按钮不允许文字
|
||||
if (this.hasAttribute('circle')) {
|
||||
this.textContent = ''
|
||||
// this.textContent = ''
|
||||
}
|
||||
|
||||
this.__BTN__ = this.root.children[1]
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 5px;
|
||||
line-height: 0;
|
||||
line-height: 1;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
:host([color='red']) label.checked {
|
||||
:host([type='danger']) label.checked {
|
||||
color: var(--color-red-1);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
border-color: var(--color-dark-1);
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ li {
|
|||
width: auto;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
line-height: 0;
|
||||
line-height: 1;
|
||||
background: var(--bg-color, --color-plain-1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--color-plain-3);
|
||||
border-radius: inherit;
|
||||
|
|
|
|||
|
|
@ -35,15 +35,15 @@
|
|||
height: 6px;
|
||||
}
|
||||
|
||||
:host([color='red']) label span {
|
||||
:host([type='danger']) label span {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
|
||||
:host([color='blue']) label span {
|
||||
:host([type='info']) label span {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
|
||||
:host([color='green']) label span {
|
||||
:host([type='success']) label span {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
background: var(--color-orange-1);
|
||||
}
|
||||
|
||||
:host([color='dark']) label span {
|
||||
:host([type='inverse']) label span {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
:host([color='red']) label.checked {
|
||||
:host([type='danger']) label.checked {
|
||||
color: var(--color-red-1);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
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);
|
||||
.dot {
|
||||
border-color: var(--color-dark-1);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
min-width: 64px;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 0;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--color-plain-3);
|
||||
border-radius: inherit;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
line-height: 1;
|
||||
cursor: inherit;
|
||||
|
||||
wc-icon {
|
||||
|
|
@ -54,19 +54,19 @@ label {
|
|||
--size: 20px;
|
||||
}
|
||||
|
||||
:host([color='red']) label span {
|
||||
:host([type='danger']) label span {
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
:host([color='teal']) label span {
|
||||
:host([type='primary']) label span {
|
||||
color: var(--color-teal-1);
|
||||
}
|
||||
:host([color='green']) label span {
|
||||
:host([type='success']) label span {
|
||||
color: var(--color-green-1);
|
||||
}
|
||||
:host([color='grey']) label span {
|
||||
:host([type='default']) label span {
|
||||
color: var(--color-grey-1);
|
||||
}
|
||||
:host([color='blue']) label span {
|
||||
:host([type='info']) label span {
|
||||
color: var(--color-blue-1);
|
||||
}
|
||||
:host([color='purple']) label span {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
// vertical-align: middle;
|
||||
line-height: 0;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
label {
|
||||
|
|
@ -82,19 +82,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
:host([color='red']) label.checked {
|
||||
:host([type='danger']) label.checked {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
|
||||
:host([color='blue']) label.checked {
|
||||
:host([type='info']) label.checked {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
|
||||
:host([color='green']) label.checked {
|
||||
:host([type='success']) label.checked {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
|
||||
:host([color='teal']) label.checked {
|
||||
:host([type='primary']) label.checked {
|
||||
background: var(--color-teal-1);
|
||||
}
|
||||
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
background: var(--color-orange-1);
|
||||
}
|
||||
|
||||
:host([color='dark']) label.checked {
|
||||
:host([type='inverse']) label.checked {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
width: var(--size, 32px);
|
||||
height: var(--size, 32px);
|
||||
color: inherit;
|
||||
}
|
||||
:host(:not([is])) {
|
||||
|
|
@ -12,9 +14,6 @@
|
|||
}
|
||||
.icon {
|
||||
display: block;
|
||||
width: var(--size, 32px);
|
||||
height: var(--size, 32px);
|
||||
margin: var(--pad, auto);
|
||||
fill: currentColor;
|
||||
|
||||
&.load {
|
||||
|
|
@ -28,30 +27,30 @@
|
|||
}
|
||||
|
||||
:host([size='large']) .icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
:host([size='medium']) .icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
:host([size='mini']) .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
:host([color='red']) {
|
||||
:host([type='danger']) {
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
|
||||
:host([color='blue']) {
|
||||
:host([type='info']) {
|
||||
color: var(--color-blue-1);
|
||||
}
|
||||
|
||||
:host([color='green']) {
|
||||
:host([type='success']) {
|
||||
color: var(--color-green-1);
|
||||
}
|
||||
|
||||
:host([color='teal']) {
|
||||
:host([type='primary']) {
|
||||
color: var(--color-teal-1);
|
||||
}
|
||||
|
||||
|
|
@ -59,15 +58,11 @@
|
|||
color: var(--color-orange-1);
|
||||
}
|
||||
|
||||
:host([color='dark']) {
|
||||
:host([type='inverse']) {
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
|
||||
:host([color='purple']) {
|
||||
color: var(--color-purple-1);
|
||||
}
|
||||
|
||||
:host([color='grey']) {
|
||||
:host([type='default']) {
|
||||
color: var(--color-grey-1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
<template>
|
||||
<div class="layout">
|
||||
<button data-page="1" class="home">|<</button>
|
||||
<button data-page="prev" class="prev"><</button>
|
||||
<wc-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>
|
||||
<button data-page="next" class="next">></button>
|
||||
<button data-page="end" class="end">>|</button>
|
||||
<wc-button data-page="next" class="next" icon="right"></wc-button>
|
||||
<wc-button data-page="end" class="end" icon="dbl-right"></wc-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -17,24 +22,22 @@
|
|||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
.layout {
|
||||
.layout,
|
||||
.pager {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.layout {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
button {
|
||||
wc-button {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
// height: 32px;
|
||||
--padding: 0;
|
||||
margin: 0 3px;
|
||||
background: var(--color-plain-1);
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
--icon-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-plain-2);
|
||||
|
|
@ -58,19 +61,19 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
:host([color='red']) button[curr] {
|
||||
:host([type='danger']) button[curr] {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
|
||||
:host([color='blue']) button[curr] {
|
||||
:host([type='info']) button[curr] {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
|
||||
:host([color='green']) button[curr] {
|
||||
:host([type='success']) button[curr] {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
|
||||
:host([color='teal']) button[curr] {
|
||||
:host([type='primary']) button[curr] {
|
||||
background: var(--color-teal-1);
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +81,7 @@
|
|||
background: var(--color-orange-1);
|
||||
}
|
||||
|
||||
:host([color='dark']) button[curr] {
|
||||
:host([type='inverse']) button[curr] {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -89,6 +92,7 @@
|
|||
|
||||
<script>
|
||||
import $ from '../utils'
|
||||
import '../form/button'
|
||||
|
||||
// 计算页码
|
||||
function calculate(curr, total, simple) {
|
||||
|
|
@ -129,6 +133,7 @@ function calculate(curr, total, simple) {
|
|||
|
||||
return arr
|
||||
}
|
||||
//
|
||||
export default class Pager {
|
||||
props = {
|
||||
layout: 'home, prev, next, end',
|
||||
|
|
@ -156,9 +161,9 @@ export default class Pager {
|
|||
this.__PAGE__.innerHTML = list
|
||||
.map(
|
||||
it =>
|
||||
`<button ${curr === it.to ? 'curr' : ''} data-page="${it.to}">${
|
||||
it.txt
|
||||
}</button>`
|
||||
`<wc-button ${curr === it.to ? 'color="teal"' : ''} data-page="${
|
||||
it.to
|
||||
}">${it.txt}</wc-button>`
|
||||
)
|
||||
.join('')
|
||||
}
|
||||
|
|
@ -170,7 +175,7 @@ export default class Pager {
|
|||
this.update()
|
||||
|
||||
$.bind(this.__LAYOUT__, 'click', ev => {
|
||||
if (ev.target.tagName === 'BUTTON') {
|
||||
if (ev.target.tagName === 'WC-BUTTON') {
|
||||
var { curr, totalpage } = this.props
|
||||
var page = ev.target.dataset.page
|
||||
var num = +page
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
:host([color='red']) {
|
||||
:host([type='danger']) {
|
||||
.slider-box .slider {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
|
|
@ -70,12 +70,12 @@
|
|||
background: var(--color-orange-1);
|
||||
}
|
||||
}
|
||||
:host([color='green']) {
|
||||
:host([type='success']) {
|
||||
.slider-box .slider {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
}
|
||||
:host([color='blue']) {
|
||||
:host([type='info']) {
|
||||
.slider-box .slider {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
|
|
@ -85,12 +85,12 @@
|
|||
background: var(--color-purple-1);
|
||||
}
|
||||
}
|
||||
:host([color='grey']) {
|
||||
:host([type='default']) {
|
||||
.slider-box .slider {
|
||||
background: var(--color-grey-1);
|
||||
}
|
||||
}
|
||||
:host([color='dark']) {
|
||||
:host([type='inverse']) {
|
||||
.slider-box .slider {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue