mirror of https://github.com/ElemeFE/element
Carbon: doc's scroll & primary color (#7299)
* Carbon: sidenav & table & changelog * Carbon: doc style update * Carbon: fix header's bg * Carbon: use el-scrollbar * Carbon: gogogo * Carbon: doc fix scroll bug * Carbon: update in resize * the same as lastone * Carbon: fix nav fadepull/7303/head
Black Wayne
杨奕
parent
78b791c0f1
commit
bf76a7d941
|
|
@ -7,15 +7,19 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
|
||||
@when component {
|
||||
overflow-y: hidden;
|
||||
|
||||
.main-cnt {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
.headerWrapper {
|
||||
|
|
@ -36,7 +40,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: #1989FA;
|
||||
color: #409EFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#666">
|
||||
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
|
||||
<path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
|
@ -41,10 +41,10 @@
|
|||
transition: .3s;
|
||||
|
||||
&:hover {
|
||||
color: #1989fa;
|
||||
color: #409EFF;
|
||||
|
||||
& i {
|
||||
color: #1989fa;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
&.acive {
|
||||
font-weight: normal;
|
||||
opacity: 1;
|
||||
color: #1989fa;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
|
||||
@when active {
|
||||
span, i {
|
||||
color: #1989FA;
|
||||
color: #409EFF;
|
||||
}
|
||||
i {
|
||||
transform: rotateZ(180deg) translateY(2px) scale(.6);
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
|
||||
&:hover {
|
||||
span, i {
|
||||
color: #1989FA;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="headerWrapper"
|
||||
:class="{ 'is-hidden': !visible }">
|
||||
:class="{ 'is-hidden': !visible && !isComponentPage }">
|
||||
<header class="header"
|
||||
ref="header"
|
||||
:style="headerStyle"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
font-weight: bold;
|
||||
|
||||
&.active {
|
||||
color: #1989FA;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #1989FA;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ Checkbox with button styles.
|
|||
| min | minimum number of checkbox checked | number | — | — |
|
||||
| max | maximum number of checkbox checked | number | — | — |
|
||||
|text-color | font color when button is active | string | — | #ffffff |
|
||||
|fill | border and background color when button is active | string | — | #1989fa |
|
||||
|fill | border and background color when button is active | string | — | #409EFF |
|
||||
|
||||
### Checkbox-group Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#1989fa',
|
||||
color1: '#409EFF',
|
||||
color2: null,
|
||||
color3: 'rgba(19, 206, 102, 0.8)',
|
||||
color4: '#20a0ff'
|
||||
|
|
@ -61,7 +61,7 @@ ColorPicker is a color selector supporting multiple color formats.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#1989fa',
|
||||
color1: '#409EFF',
|
||||
color2: null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
}
|
||||
.bg-blue {
|
||||
background-color: #1989fa;
|
||||
background-color: #409EFF;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
|
|
@ -81,7 +81,7 @@ The main color of Element is bright and friendly blue.
|
|||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
|
||||
<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@ Vertical NavMenu could be collapsed.
|
|||
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
|
||||
| background-color | background color of Menu (hex format) | string | — | #ffffff |
|
||||
| text-color | text color of Menu (hex format) | string | — | #2d2f33 |
|
||||
| active-text-color | text color of currently active menu item (hex format) | string | — | #1989fa |
|
||||
| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF |
|
||||
| theme | theme color | string | light/dark | light |
|
||||
| default-active | index of currently active menu | string | — | — |
|
||||
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — |
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ name | native 'name' attribute | string | — | —
|
|||
size | the size of radio buttons or bordered radios | string | medium / small / mini | —
|
||||
disabled | whether the nesting radios are disabled | boolean | — | false
|
||||
text-color | font color when button is active | string | — | #ffffff |
|
||||
fill | border and background color when button is active | string | — | #1989fa |
|
||||
fill | border and background color when button is active | string | — | #409EFF |
|
||||
|
||||
### Radio-group Events
|
||||
|
||||
|
|
|
|||
|
|
@ -307,7 +307,7 @@
|
|||
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
|
||||
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
|
||||
| text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff |
|
||||
| fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #1989fa |
|
||||
| fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #409EFF |
|
||||
|
||||
### Checkbox-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#1989fa',
|
||||
color1: '#409EFF',
|
||||
color2: null,
|
||||
color3: 'rgba(19, 206, 102, 0.8)',
|
||||
color4: '#20a0ff'
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#1989fa',
|
||||
color1: '#409EFF',
|
||||
color2: null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
}
|
||||
.bg-blue {
|
||||
background-color: #1989fa;
|
||||
background-color: #409EFF;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
|
|
@ -82,7 +82,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
|
|||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
|
||||
<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@
|
|||
| collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false |
|
||||
| background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff |
|
||||
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #2d2f33 |
|
||||
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #1989fa |
|
||||
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF |
|
||||
| default-active | 当前激活菜单的 index | string | — | — |
|
||||
| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
|
||||
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@
|
|||
| size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
|
||||
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #1989fa |
|
||||
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |
|
||||
|
||||
### Radio-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
<style>
|
||||
.page-component__scroll {
|
||||
height: calc(100% - 80px);
|
||||
margin-top: 80px;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-component {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
|
@ -6,27 +15,30 @@
|
|||
&.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.page-component__nav {
|
||||
width: 240px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
padding-top: 80px;
|
||||
margin-top: 80px;
|
||||
transition: padding-top .3s;
|
||||
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-extended {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.side-nav {
|
||||
height: 100%;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-right: 0;
|
||||
|
||||
|
||||
& > ul {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
|
@ -35,10 +47,12 @@
|
|||
.page-component__content {
|
||||
padding-left: 270px;
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
padding-top: 130px;
|
||||
padding-top: 50px;
|
||||
|
||||
> {
|
||||
h3 {
|
||||
margin: 55px 0 20px;
|
||||
|
|
@ -87,6 +101,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-component-up {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
|
|
@ -99,7 +114,7 @@
|
|||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
||||
|
||||
i {
|
||||
color: #1989fa;
|
||||
color: #409EFF;
|
||||
display: block;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
|
@ -118,12 +133,11 @@
|
|||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-scrollbar class="page-component__scroll" ref="componentScrollBar">
|
||||
<div class="page-container page-component">
|
||||
<div
|
||||
class="page-component__nav"
|
||||
:class="{ 'is-extended': !showHeader }">
|
||||
<el-scrollbar class="page-component__nav">
|
||||
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="page-component__content">
|
||||
<router-view class="content"></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
|
|
@ -140,6 +154,7 @@
|
|||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<script>
|
||||
import bus from '../../bus';
|
||||
|
|
@ -154,9 +169,20 @@
|
|||
hover: false,
|
||||
showBackToTop: false,
|
||||
scrollTop: 0,
|
||||
showHeader: true
|
||||
showHeader: true,
|
||||
componentScrollBar: null,
|
||||
componentScrollBoxElement: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
// 触发伪滚动条更新
|
||||
this.componentScrollBox.scrollTop = 0;
|
||||
this.$nextTick(() => {
|
||||
this.componentScrollBar.update();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toTop() {
|
||||
this.hover = false;
|
||||
|
|
@ -187,11 +213,13 @@
|
|||
});
|
||||
},
|
||||
mounted() {
|
||||
this.componentScrollBar = this.$refs.componentScrollBar;
|
||||
this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
|
||||
this.throttledScrollHandler = throttle(300, this.handleScroll);
|
||||
document.addEventListener('scroll', this.throttledScrollHandler);
|
||||
this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('scroll', this.throttledScrollHandler);
|
||||
this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,31 +12,31 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
|
|||
$--color-white: #fff;
|
||||
$--color-black: #000;
|
||||
|
||||
$--color-primary: #1989fa;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); // #3095fb#
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); // #47a1fb#
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); // #5eadfc#
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); // #75b8fc#
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); // #8cc4fd#
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); // #a3d0fd#
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); // #badcfe#
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); // #d1e7fe#
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); // #e8f3ff#
|
||||
$--color-primary: #69B3FF;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%);
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%);
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%);
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%);
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%);
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%);
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%);
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%);
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%);
|
||||
|
||||
$--color-success: #67c23a;
|
||||
$--color-warning: #eb9e05;
|
||||
$--color-danger: #fa5555;
|
||||
$--color-info: #878d99;
|
||||
|
||||
$--color-success-light: mix($--color-white, $--color-success, 80%); // #e1f3d8#
|
||||
$--color-warning-light: mix($--color-white, $--color-warning, 80%); // #fbeccd#
|
||||
$--color-danger-light: mix($--color-white, $--color-danger, 80%); // #fedddd#
|
||||
$--color-info-light: mix($--color-white, $--color-info, 80%); // #e7e8eb#
|
||||
$--color-success-light: mix($--color-white, $--color-success, 80%);
|
||||
$--color-warning-light: mix($--color-white, $--color-warning, 80%);
|
||||
$--color-danger-light: mix($--color-white, $--color-danger, 80%);
|
||||
$--color-info-light: mix($--color-white, $--color-info, 80%);
|
||||
|
||||
$--color-success-lighter: mix($--color-white, $--color-success, 90%); // #f0f9ec#
|
||||
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%); // #fdf5e6#
|
||||
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%); // #ffeeee#
|
||||
$--color-info-lighter: mix($--color-white, $--color-info, 90%); // #f3f4f5#
|
||||
$--color-success-lighter: mix($--color-white, $--color-success, 90%);
|
||||
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%);
|
||||
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%);
|
||||
$--color-info-lighter: mix($--color-white, $--color-info, 90%);
|
||||
|
||||
$--color-text-primary: #2d2f33;
|
||||
$--color-text-regular: #5a5e66;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
font-size: $--font-size-base;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@include scroll-bar;
|
||||
|
||||
@include e(inner) {
|
||||
-webkit-appearance: none;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
&::-webkit-scrollbar {
|
||||
z-index: 11;
|
||||
width: 6px;
|
||||
background: black;
|
||||
|
||||
&:horizontal {
|
||||
height: 6px;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.el-scrollbar__bar {
|
||||
> .el-scrollbar__bar {
|
||||
opacity: 1;
|
||||
transition: opacity 340ms ease-out;
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
@include e(wrap) {
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
|
||||
@include m(hidden-default) {
|
||||
&::-webkit-scrollbar {
|
||||
|
|
|
|||
Loading…
Reference in New Issue