mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(theme-chalk): overlay/mask/box-shadow css vars (#6848)

Browse Source
This commit is contained in:
云游君 2022-03-27 23:23:14 +08:00 committed by GitHub
parent f8003bc3e7
commit 19a4e2d7ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 98 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/vitepress/components/navbar/vp-translation.vue
View File

@ -48,7 +48,7 @@ const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
}
@at-root .translation-popup.el-popper {
box-shadow: var(--el-box-shadow-base);
box-shadow: var(--el-box-shadow);
.language {
cursor: pointer;

2
docs/.vitepress/vitepress/styles/code.scss
View File

@ -166,7 +166,7 @@ div[class*='language-'].line-numbers-mode {
bottom: 0;
left: 0;
z-index: 3;
border-right: 1px solid rgba(0, 0, 0, 0.5);
border-right: 1px solid var(--el-overlay-color-lighter);
padding: 1.25rem 0;
width: 3.5rem;
text-align: center;

2
docs/examples/backtop/basic.vue
View File

@ -1,4 +1,4 @@
<template>
Scroll down to see the bottom-right button.
<el-backtop />
<el-backtop :right="100" :bottom="100" />
</template>

2
docs/examples/backtop/custom.vue
View File

@ -6,7 +6,7 @@
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
box-shadow: var(--el-box-shadow-lighter);
text-align: center;
line-height: 40px;
color: #1989fa;

61
docs/examples/border/shadow.vue
View File

@ -1,15 +1,28 @@
<template>
<div>
<template v-for="(shadow, i) in shadowGroup" :key="i">
<div class="flex justify-between items-center flex-wrap">
<div
v-for="(shadow, i) in shadowGroup"
:key="i"
class="flex flex-col justify-center items-center"
m="auto"
w="46"
>
<div
class="demo-shadow"
:style="{ boxShadow: `var(--el-box-shadow-${shadow.type})` }"
class="inline-flex"
h="30"
w="30"
m="2"
:style="{
boxShadow: `var(${getCssVarName(shadow.type)})`,
}"
/>
<span class="demo-shadow-text"
>{{ shadow.name }}
<code>box-shadow: {{ getValue(shadow.type) }}</code></span
>
</template>
<span p="y-4" class="demo-shadow-text" text="sm">
{{ shadow.name }}
</span>
<code text="xs">
{{ getCssVarName(shadow.type) }}
</code>
</div>
</div>
</template>
@ -19,29 +32,23 @@ import { ref } from 'vue'
const shadowGroup = ref([
{
name: 'Basic Shadow',
type: 'base',
type: '',
},
{
name: 'Light Shadow',
type: 'light',
},
{
name: 'Lighter Shadow',
type: 'lighter',
},
{
name: 'Dark Shadow',
type: 'dark',
},
])
const getValue = (type: string) => {
const getCssVarValue = (prefix, type) =>
getComputedStyle(document.documentElement).getPropertyValue(
`--el-${prefix}-${type}`
)
return getCssVarValue('box-shadow', type)
const getCssVarName = (type: string) => {
return `--el-box-shadow${type ? '-' : ''}${type}`
}
</script>
<style scoped>
.demo-shadow {
height: 100px;
width: 50%;
}
.demo-shadow-text {
line-height: 50px;
color: var(--el-text-color-regular);
font-size: 14px;
}
</style>

15
packages/components/backtop/src/backtop.vue
View File

@ -2,10 +2,7 @@
<transition :name="`${ns.namespace.value}-fade-in`">
<div
v-if="visible"
:style="{
right: styleRight,
bottom: styleBottom,
}"
:style="backTopStyle"
:class="ns.b()"
@click.stop="handleClick"
>
@ -39,8 +36,11 @@ const ns = useNamespace('backtop')
const el = shallowRef<HTMLElement>()
const container = shallowRef<Document | HTMLElement>()
const visible = ref(false)
const styleBottom = computed(() => `${props.bottom}px`)
const styleRight = computed(() => `${props.right}px`)
const backTopStyle = computed(() => ({
right: `${props.right}px`,
bottom: `${props.bottom}px`,
}))
const scrollToTop = () => {
if (!el.value) return
@ -69,6 +69,9 @@ const handleClick = (event: MouseEvent) => {
const handleScrollThrottled = useThrottleFn(handleScroll, 300)
onMounted(() => {
container.value = document
el.value = document.documentElement
if (props.target) {
el.value = document.querySelector<HTMLElement>(props.target) ?? undefined
if (!el.value) {

8
packages/theme-chalk/src/backtop.scss
View File

@ -6,21 +6,21 @@
@include set-component-css-var('backtop', $backtop);
position: fixed;
background-color: var(--el-backtop-bg-color);
background-color: getCssVar('backtop', 'bg-color');
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--el-backtop-text-color);
color: getCssVar('backtop', 'text-color');
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
box-shadow: getCssVar('box-shadow', 'lighter');
cursor: pointer;
z-index: 5;
&:hover {
background-color: var(--el-backtop-hover-bg-color);
background-color: getCssVar('backtop', 'hover-bg-color');
}
@include e(icon) {

2
packages/theme-chalk/src/button.scss
View File

@ -134,7 +134,7 @@ $button-icon-span-gap: map.merge(
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
background-color: getCssVar('mask-color', 'extra-light');
}
}
@include when(round) {

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

@ -174,11 +174,21 @@ $border-radius: map.merge(
$box-shadow: () !default;
$box-shadow: map.merge(
(
'base': (
0 2px 4px rgba(0, 0, 0, 0.12),
0 0 6px rgba(0, 0, 0, 0.04),
'': (
0px 12px 32px 4px rgba(0, 0, 0, 0.04),
0px 8px 20px rgba(0, 0, 0, 0.08),
),
'light': (
0px 0px 12px rgba(0, 0, 0, 0.12),
),
'lighter': (
0px 0px 6px rgba(0, 0, 0, 0.12),
),
'dark': (
0px 16px 48px 16px rgba(0, 0, 0, 0.08),
0px 12px 32px rgba(0, 0, 0, 0.12),
0px 8px 16px -8px rgba(0, 0, 0, 0.16),
),
'light': 0 2px 12px 0 rgba(0, 0, 0, 0.1),
),
$box-shadow
);
@ -239,6 +249,27 @@ $common-component-size: map.merge(
$common-component-size
);
// overlay
$overlay-color: () !default;
$overlay-color: map.merge(
(
'': rgba(0, 0, 0, 0.8),
'light': rgba(0, 0, 0, 0.7),
'lighter': rgba(0, 0, 0, 0.5),
),
$overlay-color
);
// mask
$mask-color: () !default;
$mask-color: map.merge(
(
'': rgba(255, 255, 255, 0.9),
'extra-light': rgba(255, 255, 255, 0.3),
),
$mask-color
);
// Components
// ---
// Checkbox
@ -716,7 +747,7 @@ $dialog: map.merge(
'width': 50%,
'margin-top': 15vh,
'bg-color': getCssVar('color-white'),
'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
'box-shadow': getCssVar('box-shadow'),
'title-font-size': getCssVar('font-size-large'),
'content-font-size': 14px,
'font-line-height': getCssVar('font-line-height-primary'),
@ -738,7 +769,7 @@ $table: map.merge(
'row-hover-bg-color': getCssVar('fill-color', 'light'),
'current-row-bg-color': getCssVar('color-primary-light-9'),
'header-bg-color': getCssVar('fill-color', 'blank'),
'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
'fixed-box-shadow': getCssVar('box-shadow', 'light'),
'bg-color': getCssVar('fill-color', 'blank'),
'tr-bg-color': getCssVar('fill-color', 'blank'),
'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),

3
packages/theme-chalk/src/drawer.scss
View File

@ -14,8 +14,7 @@ $directions: rtl, ltr, ttb, btt;
background-color: var(--el-drawer-bg-color);
display: flex;
flex-direction: column;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
box-shadow: getCssVar('box-shadow', 'dark');
overflow: hidden;
transition: all var(--el-transition-duration);

2
packages/theme-chalk/src/dropdown.scss
View File

@ -108,7 +108,7 @@ $dropdown-divider-width: 1px !default;
top: $gap;
bottom: $gap;
left: 0;
background: rgba(0, 0, 0, 0.5);
background: getCssVar('overlay-color', 'lighter');
}
&.#{$namespace}-button::before {

2
packages/theme-chalk/src/loading.scss
View File

@ -21,7 +21,7 @@
@include b(loading-mask) {
position: absolute;
z-index: 2000;
background-color: rgba(255, 255, 255, 0.9);
background-color: getCssVar('mask-color');
margin: 0;
top: 0;
right: 0;

2
packages/theme-chalk/src/overlay.scss
View File

@ -12,6 +12,6 @@
left: 0;
z-index: 2000;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: getCssVar('overlay-color', 'lighter');
overflow: auto;
}

1
packages/theme-chalk/src/tabs.scss
View File

@ -225,7 +225,6 @@
@include m(border-card) {
background: $color-white;
border: 1px solid getCssVar('border-color');
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
> .#{$namespace}-tabs__content {
padding: 15px;

5
packages/theme-chalk/src/upload.scss
View File

@ -372,7 +372,7 @@
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.5);
background-color: getCssVar('overlay-color', 'lighter');
transition: opacity var(--el-transition-duration);
span {
@ -518,7 +518,6 @@
background: var(--el-color-success);
text-align: center;
transform: rotate(45deg);
box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
i {
font-size: 12px;
@ -553,7 +552,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, 0.72);
background-color: getCssVar('overlay-color', 'light');
text-align: center;
.btn {

3
packages/theme-chalk/src/var.scss
View File

@ -56,6 +56,9 @@
@include set-component-css-var('disabled', $disabled);
// z-index --el-index-#{$type}
@include set-component-css-var('index', $z-index);
// overlay & mask
@include set-component-css-var('overlay-color', $overlay-color);
@include set-component-css-var('mask-color', $mask-color);
// Border
@include set-css-var-value('border-width', $border-width);