by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update deps

Browse Source
This commit is contained in:
vben
2024-05-28 23:38:36 +08:00
parent f2644dbbc5
commit 11a36ef03f
32 changed files with 327 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/@vben-core/shared/design-tokens/src/dark/index.scss
View File

@@ -3,7 +3,7 @@
/* --color-background: 240 6% 18%; */
// --color-body: 220deg 13.04% 8%;
--color-body: 220deg 13.04% 8%;
// --color-body: hsl(240deg 11% 4%);
--color-background: 220deg 13.04% 8%;
/* --color-background: 219 42% 11%; */
@@ -76,20 +76,4 @@
/* 基本圆角大小 */
--radius-base: 0.5rem;
/* ======================================== */
/* =============component & UI============= */
/* ======================================== */
/* --color-login-background: 219 42% 11%; */
/* 图标颜色 */
/* authentication */
--color-authentication-from: hsl(240deg 11% 6%);
--color-authentication-to: hsl(240deg 11% 6%);
color-scheme: dark;
}

12
packages/@vben-core/shared/design-tokens/src/default/index.scss
View File

@@ -1,13 +1,9 @@
/* https://gavin-yyc.github.io/colorconvert/ */
:root {
--font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
/* 基础背景颜色颜色 */
/* --color-background: 210deg 25% 96.86%; */
--color-body: 210deg 25% 96.86%;
// --color-main: 210deg 25% 96.86%;
--color-background: 0 0 100%;
// --color-darken-background: 220deg 13.04% 8%;
@@ -86,8 +82,6 @@
/* ======================================== */
/* --color-login-background: 0 0 100%; */
/* menu */
--color-menu-dark: 225deg 12% 13%;
--color-menu-dark-darken: 223deg 11% 10%;
@@ -96,8 +90,4 @@
--color-menu: 0deg 0% 100%;
--color-menu-darken: 0deg 0% 95%;
// --color-menu-opened: 0deg 0% 100%;
/* authentication */
--color-authentication-from: hsl(231deg 61% 44%);
--color-authentication-to: hsl(218deg 70% 42%);
}

23
packages/@vben-core/shared/design/src/scss/common/base.scss
View File

@@ -10,29 +10,26 @@ html {
*,
::after,
::before {
@apply border-border;
box-sizing: border-box;
border-color: hsl(var(--color-border));
border-style: solid;
border-width: 0;
}
body.invert {
filter: invert(100%);
body.invert-mode {
@apply invert;
}
body.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
body.grayscale-mode {
@apply grayscale;
}
html {
font-size: var(--font-size-base);
@apply text-foreground bg-background;
// font-size: 62.5%;
font-variation-settings: normal;
color: hsl(var(--color-foreground));
background-color: hsl(var(--color-background));
text-size-adjust: 100%;
font-synthesis-weight: none;
scroll-behavior: smooth;
@@ -73,7 +70,7 @@ html.dark::view-transition-new(root) {
input::placeholder,
textarea::placeholder {
color: hsl(var(--color-input-placeholder)) !important;
// color: hsl(var(--color-input-placeholder)) !important;
opacity: 1;
}

51
packages/@vben-core/shared/design/src/scss/common/entry.scss
View File

@@ -1,51 +0,0 @@
$max-child: 5;
@for $i from 1 through $max-child {
* > .enter-x:nth-child(#{$i}) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(#{$i}) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(#{$i}),
* > .-enter-x:nth-child(#{$i}) {
// z-index: 10 - $i;
opacity: 0;
animation: enter-x-animation 0.3s ease-in-out 0.2s;
animation-delay: 0.1s * $i;
animation-fill-mode: forwards;
}
* > .enter-y:nth-child(#{$i}) {
transform: translateY(50px);
}
* > .-enter-y:nth-child(#{$i}) {
transform: translateY(-50px);
}
* > .enter-y:nth-child(#{$i}),
* > .-enter-y:nth-child(#{$i}) {
// z-index: 10 - $i;
opacity: 0;
animation: enter-y-animation 0.3s ease-in-out 0.2s;
animation-delay: 0.1s * $i;
animation-fill-mode: forwards;
}
}
@keyframes enter-x-animation {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes enter-y-animation {
to {
opacity: 1;
transform: translateY(0);
}
}

4
packages/@vben-core/shared/design/src/scss/index.scss
View File

@@ -1,8 +1,4 @@
/** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
/** 元素进入动画 */
@import './common/entry';
@import './common/base';
@import './transition';
@import './nprogress';

78
packages/@vben-core/shared/design/src/scss/nprogress.scss
View File

@@ -1,78 +0,0 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
position: fixed;
top: 0;
left: 0;
z-index: 1031;
width: 100%;
height: 2px;
background: hsl(var(--color-primary));
}
/* Fancy blur effect */
#nprogress .peg {
position: absolute;
right: 0;
display: block;
width: 100px;
height: 100%;
box-shadow:
0 0 10px hsl(var(--color-primary)),
0 0 5px hsl(var(--color-primary));
opacity: 1;
transform: rotate(3deg) translate(0, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
position: fixed;
top: 15px;
right: 15px;
z-index: 1031;
display: block;
}
#nprogress .spinner-icon {
box-sizing: border-box;
width: 18px;
height: 18px;
border: solid 2px transparent;
border-top-color: hsl(var(--color-primary));
border-left-color: hsl(var(--color-primary));
border-radius: 50%;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
position: relative;
overflow: hidden;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

12
packages/@vben-core/shared/design/src/tailwind.css
View File

@@ -1,21 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply font-sans;
}
}
@layer components {
.flex-center {
@apply flex items-center justify-center;
}
.flex-col-center {
@apply flex flex-col items-center justify-center;
}
.outline-box {
@apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
@layer components {
.outline-box {
&:after {
@apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[''];
}