javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-08-26 04:27:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(theme-chalk): dark mode details (#7460)

Browse Source
This commit is contained in:
云游君
2022-05-03 14:02:56 +08:00
committed by GitHub
parent f0c0ed8b14
commit 8a4bf644ad
16 changed files with 68 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/.vitepress/vitepress/components/home/home-cards.vue
View File

@ -85,6 +85,11 @@ const homeLang = computed(() => homeLocale[lang.value])
transition: all 0.3s ease-in-out;
bottom: 0;
&:hover {
box-shadow: 0px 12px 32px 4px rgba(237, 239, 245, 0.24),
0px 8px 20px rgba(237, 239, 245, 0.48);
}
img {
margin: 48px auto;
}
@ -147,4 +152,15 @@ const homeLang = computed(() => homeLocale[lang.value])
}
}
}
.dark {
.home-page {
.card {
&:hover {
box-shadow: 0px 12px 32px 4px rgba(9, 11, 16, 0.24),
0px 8px 20px rgba(9, 11, 16, 0.48);
}
}
}
}
</style>

3
docs/examples/carousel/arrows.vue
View File

@ -1,7 +1,7 @@
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
<h3 text="2xl" justify="center">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
@ -9,7 +9,6 @@
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;

13
docs/examples/carousel/basic.vue
View File

@ -1,28 +1,31 @@
<template>
<div class="block">
<div class="block text-center">
<span class="demonstration"
>Switch when indicator is hovered (default)</span
>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
<h3 class="small justify-center" text="2xl">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<div class="block text-center" m="t-4">
<span class="demonstration">Switch when indicator is clicked</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
<h3 class="small justify-center" text="2xl">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style scoped>
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;

3
docs/examples/carousel/card.vue
View File

@ -1,7 +1,7 @@
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
<h3 text="2xl" justify="center">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
@ -9,7 +9,6 @@
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;

5
docs/examples/carousel/indicator.vue
View File

@ -1,19 +1,18 @@
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
<h3 text="2xl" justify="center">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style scoped>
.el-carousel__item h3 {
display: flex;
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {

3
docs/examples/carousel/vertical.vue
View File

@ -1,7 +1,7 @@
<template>
<el-carousel height="200px" direction="vertical" :autoplay="false">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
<h3 text="2xl" justify="center">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
@ -9,7 +9,6 @@
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;

9
docs/examples/config-provider/button.vue
View File

@ -1,13 +1,14 @@
<template>
<div>
<el-config-provider :button="config">
<el-button>中文</el-button>
</el-config-provider>
<div>
<div m="b-2">
<el-checkbox v-model="config.autoInsertSpace"
>autoInsertSpace</el-checkbox
>
</div>
<el-config-provider :button="config">
<el-button>中文</el-button>
</el-config-provider>
</div>
</template>

4
docs/examples/config-provider/message.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<el-config-provider :message="config">
<el-button @click="open">open</el-button>
<el-button @click="open">OPEN</el-button>
</el-config-provider>
</div>
</template>
@ -13,6 +13,6 @@ const config = reactive({
max: 3,
})
const open = () => {
ElMessage('this is a message.')
ElMessage('This is a message.')
}
</script>

5
docs/examples/config-provider/usage.vue
View File

@ -1,11 +1,10 @@
<template>
<div>
<el-button m="b-2" @click="toggle"> Switch Lang </el-button>
<br />
<el-config-provider :locale="locale2">
<el-color-picker :model-value="''" style="vertical-align: middle" />
</el-config-provider>
<el-button style="margin-left: 8px; vertical-align: middle" @click="toggle">
Switch Lang
</el-button>
</div>
</template>

2
docs/examples/popconfirm/customize.vue
View File

@ -3,7 +3,7 @@
confirm-button-text="OK"
cancel-button-text="No, Thanks"
:icon="InfoFilled"
icon-color="red"
icon-color="#626AEF"
title="Are you sure to delete this?"
>
<template #reference>

2
docs/examples/popconfirm/trigger-event.vue
View File

@ -3,7 +3,7 @@
confirm-button-text="Yes"
cancel-button-text="No"
:icon="InfoFilled"
icon-color="red"
icon-color="#626AEF"
title="Are you sure to delete this?"
@confirm="confirmEvent"
@cancel="cancelEvent"

10
docs/examples/table/expandable-row.vue
View File

@ -2,10 +2,12 @@
<el-table :data="tableData" style="width: 100%">
<el-table-column type="expand">
<template #default="props">
<p>State: {{ props.row.state }}</p>
<p>City: {{ props.row.city }}</p>
<p>Address: {{ props.row.address }}</p>
<p>Zip: {{ props.row.zip }}</p>
<div m="4">
<p m="t-0 b-2">State: {{ props.row.state }}</p>
<p m="t-0 b-2">City: {{ props.row.city }}</p>
<p m="t-0 b-2">Address: {{ props.row.address }}</p>
<p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
</div>
</template>
</el-table-column>
<el-table-column label="Date" prop="date" />

2
docs/examples/tree-select/slots.vue
View File

@ -23,7 +23,7 @@ const renderContent = (h, { data }) => {
'span',
{
style: {
color: 'orange',
color: '#626AEF',
},
},
data.label

4
packages/theme-chalk/src/common/var.scss
View File

@ -924,7 +924,7 @@ $dropdown: map.merge(
(
'menu-box-shadow': getCssVar('box-shadow-light'),
'menuItem-hover-fill': getCssVar('color-primary-light-9'),
'menuItem-hover-color': getCssVar('color-primary-light-3'),
'menuItem-hover-color': getCssVar('color-primary'),
'menu-index': 10,
),
$dropdown
@ -992,7 +992,7 @@ $menu: map.merge(
(
'active-color': getCssVar('color-primary'),
'text-color': getCssVar('text-color-primary'),
'hover-text-color': getCssVar('text-color-primary'),
'hover-text-color': getCssVar('color-primary'),
'bg-color': getCssVar('fill-color', 'blank'),
'hover-bg-color': getCssVar('color-primary-light-9'),
'item-height': 56px,

13
packages/theme-chalk/src/dark/var.scss
View File

@ -2,7 +2,7 @@
@use 'sass:math';
@use '../common/var.scss' as common;
@use '../mixins/mixins.scss' as *;
@use '../color/index.scss' as *;
$colors: () !default;
@ -139,6 +139,7 @@ $fill-color: map.merge(
// mix to hex to avoid overlay issues
@each $key, $val in $fill-color {
@if ($key != 'blank') {
$fill-color: map.merge(
$fill-color,
(
@ -146,6 +147,7 @@ $fill-color: map.merge(
)
) !global;
}
}
// text
$text-color-base: #f0f5ff;
@ -160,6 +162,15 @@ $text-color: map.merge(
),
$text-color
);
// mix to hex to avoid overlay issues
@each $key, $val in $text-color {
$text-color: map.merge(
$text-color,
(
$key: mix-overlay-color($val, map.get($bg-color, '')),
)
) !global;
}
// mask
$mask-color: () !default;

2
packages/theme-chalk/src/option-item.scss
View File

@ -24,7 +24,7 @@
cursor: not-allowed;
&:hover {
background-color: getCssVar('color-white');
background-color: getCssVar('bg-color');
}
}