mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-29 18:57:36 +08:00
some style updates (#7603)
* some style updates * fix a datepicker typo
This commit is contained in:
parent
af46f968ab
commit
7d55d47b67
@ -142,15 +142,15 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkAll: true,
|
||||
checkAll: false,
|
||||
checkedCities: ['Shanghai', 'Beijing'],
|
||||
cities: cityOptions,
|
||||
isIndeterminate: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckAllChange(event) {
|
||||
this.checkedCities = event.target.checked ? cityOptions : [];
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? cityOptions : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
|
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
.bg-border-base {
|
||||
background-color: #d8dce6;
|
||||
background-color: #d8dce5;
|
||||
}
|
||||
.bg-border-light {
|
||||
background-color: #dfe4ed;
|
||||
@ -119,7 +119,7 @@ Neutral colors are for text, background and border colors. You can use different
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE6</div></div>
|
||||
<div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
|
||||
<div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
|
||||
<div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
|
||||
<div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
|
||||
|
@ -55,7 +55,7 @@
|
||||
},
|
||||
createStateFilter(queryString) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
@ -436,7 +436,7 @@ You can get some recommended tips based on the current input.
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
@ -520,7 +520,7 @@ Customize how suggestions are displayed.
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
@ -593,7 +593,7 @@ Search data from server-side.
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
|
@ -140,15 +140,15 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkAll: true,
|
||||
checkAll: false,
|
||||
checkedCities: ['上海', '北京'],
|
||||
cities: cityOptions,
|
||||
isIndeterminate: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckAllChange(event) {
|
||||
this.checkedCities = event.target.checked ? cityOptions : [];
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? cityOptions : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
|
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
.bg-border-base {
|
||||
background-color: #d8dce6;
|
||||
background-color: #d8dce5;
|
||||
}
|
||||
.bg-border-light {
|
||||
background-color: #dfe4ed;
|
||||
@ -120,7 +120,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE6</div></div>
|
||||
<div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE5</div></div>
|
||||
<div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div>
|
||||
<div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
|
||||
<div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</div></div>
|
||||
|
@ -96,7 +96,7 @@
|
||||
},
|
||||
createStateFilter(queryString) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
@ -465,7 +465,7 @@ export default {
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => {
|
||||
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
@ -594,7 +594,7 @@ export default {
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => {
|
||||
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
@ -749,7 +749,7 @@ export default {
|
||||
},
|
||||
createStateFilter(queryString) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
|
@ -349,7 +349,7 @@
|
||||
},
|
||||
|
||||
handleLeave() {
|
||||
this.$emit('dodestory');
|
||||
this.$emit('dodestroy');
|
||||
document.body.removeEventListener('keydown', this.handleKeydown);
|
||||
},
|
||||
|
||||
|
@ -158,6 +158,7 @@
|
||||
}
|
||||
@include when(round) {
|
||||
border-radius: 20px;
|
||||
padding: 12px 23px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -58,7 +58,7 @@ $--background-color-base: #f5f7fa;
|
||||
-------------------------- */
|
||||
$--border-width-base: 1px;
|
||||
$--border-style-base: solid;
|
||||
$--border-color-base: #d8dce6 !default;
|
||||
$--border-color-base: #d8dce5 !default;
|
||||
$--border-color-light: #dfe4ed !default;
|
||||
$--border-color-lighter: #e6ebf5 !default;
|
||||
$--border-color-extra-light: #edf2fc !default;
|
||||
@ -121,8 +121,8 @@ $--checkbox-input-border: $--border-base;
|
||||
$--checkbox-input-border-color: $--border-color-base;
|
||||
$--checkbox-icon-color: $--color-white;
|
||||
|
||||
$--checkbox-disabled-input-border-color: $--disabled-border-base;
|
||||
$--checkbox-disabled-input-fill: $--disabled-fill-base;
|
||||
$--checkbox-disabled-input-border-color: $--border-color-base;
|
||||
$--checkbox-disabled-input-fill: #edf2fc;
|
||||
$--checkbox-disabled-icon-color: $--color-text-placeholder;
|
||||
|
||||
$--checkbox-disabled-checked-input-fill: $--border-color-extra-light;
|
||||
@ -138,8 +138,8 @@ $--checkbox-input-border-color-hover: $--color-primary;
|
||||
|
||||
$--checkbox-bordered-padding: 9px 20px 9px 10px;
|
||||
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px;
|
||||
$--checkbox-bordered-small-padding: 4px 20px 6px 10px;
|
||||
$--checkbox-bordered-mini-padding: 2px 20px 4px 10px;
|
||||
$--checkbox-bordered-small-padding: 3px 15px 7px 10px;
|
||||
$--checkbox-bordered-mini-padding: 1px 15px 5px 10px;
|
||||
$--checkbox-bordered-medium-input-height: 14px;
|
||||
$--checkbox-bordered-medium-input-width: 14px;
|
||||
$--checkbox-bordered-small-input-height: 12px;
|
||||
@ -184,8 +184,8 @@ $--radio-input-border-color-hover: $--color-primary;
|
||||
|
||||
$--radio-bordered-padding: 10px 20px 10px 10px;
|
||||
$--radio-bordered-medium-padding: 8px 20px 8px 10px;
|
||||
$--radio-bordered-small-padding: 6px 20px 6px 10px;
|
||||
$--radio-bordered-mini-padding: 4px 20px 4px 10px;
|
||||
$--radio-bordered-small-padding: 6px 15px 6px 10px;
|
||||
$--radio-bordered-mini-padding: 4px 15px 4px 10px;
|
||||
$--radio-bordered-medium-input-height: 14px;
|
||||
$--radio-bordered-medium-input-width: 14px;
|
||||
$--radio-bordered-small-input-height: 12px;
|
||||
@ -271,10 +271,11 @@ $--msgbox-danger-color: $--color-danger;
|
||||
-------------------------- */
|
||||
$--message-shadow: $--box-shadow-base;
|
||||
$--message-min-width: 380px;
|
||||
$--message-background-color: #edf2fc;
|
||||
$--message-padding: 15px 15px 15px 20px;
|
||||
$--message-content-color: $--color-text-regular;
|
||||
$--message-close-color: $--color-text-placeholder;
|
||||
$--message-close-size: 14px;
|
||||
$--message-close-size: 16px;
|
||||
$--message-close-hover-color: $--color-text-secondary;
|
||||
|
||||
$--message-success-color: $--color-success;
|
||||
@ -390,12 +391,12 @@ $--button-font-size: 14px;
|
||||
$--button-font-weight: $--font-weight-primary;
|
||||
$--button-border-radius: $--border-radius-base;
|
||||
$--button-padding-vertical: 12px;
|
||||
$--button-padding-horizontal: 18px;
|
||||
$--button-padding-horizontal: 20px;
|
||||
|
||||
$--button-medium-font-size: 14px;
|
||||
$--button-medium-border-radius: $--border-radius-base;
|
||||
$--button-medium-padding-vertical: 10px;
|
||||
$--button-medium-padding-horizontal: 18px;
|
||||
$--button-medium-padding-horizontal: 20px;
|
||||
|
||||
$--button-small-font-size: 12px;
|
||||
$--button-small-border-radius: #{$--border-radius-base - 1};
|
||||
@ -411,9 +412,9 @@ $--button-default-color: $--color-text-regular;
|
||||
$--button-default-fill: $--color-white;
|
||||
$--button-default-border: $--border-color-base;
|
||||
|
||||
$--button-disabled-color: $--color-text-secondary;
|
||||
$--button-disabled-color: $--color-text-placeholder;
|
||||
$--button-disabled-fill: $--color-white;
|
||||
$--button-disabled-border: $--border-color-base;
|
||||
$--button-disabled-border: $--border-color-lighter;
|
||||
|
||||
$--button-primary-border: $--color-primary;
|
||||
$--button-primary-color: $--color-white;
|
||||
|
@ -170,6 +170,7 @@
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
& * {
|
||||
vertical-align: middle;
|
||||
@ -244,6 +245,7 @@
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -12,7 +12,7 @@
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
background-color: $--color-info-lighter;
|
||||
background-color: $--message-background-color;
|
||||
transition: opacity 0.3s, transform .4s;
|
||||
overflow: hidden;
|
||||
padding: $--message-padding;
|
||||
|
@ -116,6 +116,7 @@
|
||||
box-sizing: border-box;
|
||||
border-color: transparent;
|
||||
margin: 3px 0 3px 6px;
|
||||
background-color: #f0f2f5;
|
||||
|
||||
&__close.el-icon-close {
|
||||
background-color: $--color-text-placeholder;
|
||||
|
3
types/breadcrumb-item.d.ts
vendored
3
types/breadcrumb-item.d.ts
vendored
@ -1,10 +1,9 @@
|
||||
import { Route } from 'vue-router'
|
||||
import { ElementUIComponent } from './component'
|
||||
|
||||
/** Breadcrumb Item Component */
|
||||
export declare class ElBreadcrumbItem extends ElementUIComponent {
|
||||
/** Target route of the link, same as to of vue-router */
|
||||
to: string | Route
|
||||
to: string | object
|
||||
|
||||
/** If true, the navigation will not leave a history record */
|
||||
replace: boolean
|
||||
|
2
types/cascader.d.ts
vendored
2
types/cascader.d.ts
vendored
@ -53,5 +53,5 @@ export declare class ElCascader extends ElementUIComponent {
|
||||
size: ElementUIComponentSize
|
||||
|
||||
/** Hook function before filtering with the value to be filtered as its parameter */
|
||||
beforeFilter: (value: string) => boolean | Promise
|
||||
beforeFilter: (value: string) => boolean | Promise<any>
|
||||
}
|
||||
|
3
types/menu-item.d.ts
vendored
3
types/menu-item.d.ts
vendored
@ -1,4 +1,3 @@
|
||||
import { Route } from 'vue-router'
|
||||
import { ElementUIComponent } from './component'
|
||||
|
||||
/** Menu Item Component */
|
||||
@ -7,5 +6,5 @@ export declare class ElMenuItem extends ElementUIComponent {
|
||||
index: string
|
||||
|
||||
/** Vue Router object */
|
||||
route: Route
|
||||
route: object
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user