From a154cca32e63cdb5c2ed7c3f9ae25ef33ac90d7b Mon Sep 17 00:00:00 2001 From: Il Harper Date: Sun, 1 Aug 2021 02:29:13 +0800 Subject: [PATCH 01/14] feat(theme-default): add transition variables --- .../src/client/styles/back-to-top.css | 2 +- .../plugin-pwa-popup/src/client/styles/pwa-popup.css | 2 +- .../plugin-search/src/client/styles/search.css | 2 +- .../theme-default/src/client/styles/badge.scss | 4 +--- .../src/client/styles/custom-container.scss | 5 +---- .../theme-default/src/client/styles/home.scss | 4 ++-- .../theme-default/src/client/styles/layout.scss | 5 ++--- .../theme-default/src/client/styles/normalize.scss | 6 +++--- .../theme-default/src/client/styles/sidebar.scss | 2 +- .../theme-default/src/client/styles/transitions.scss | 4 ++-- .../theme-default/src/client/styles/vars.scss | 11 +++++++++++ 11 files changed, 26 insertions(+), 21 deletions(-) diff --git a/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css b/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css index b60c68ccd9..26fba6d0dc 100644 --- a/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css +++ b/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css @@ -22,7 +22,7 @@ .back-to-top-enter-active, .back-to-top-leave-active { - transition: opacity 0.3s; + transition: var(--t-opacity); } .back-to-top-enter-from, diff --git a/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css b/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css index e0ee14bfa2..70979ed69b 100644 --- a/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css +++ b/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css @@ -26,7 +26,7 @@ .pwa-popup-enter-active, .pwa-popup-leave-active { - transition: opacity 0.3s, transform 0.3s; + transition: var(--t-opacity), var(--t-transform); } .pwa-popup-enter-from, diff --git a/packages/@vuepress/plugin-search/src/client/styles/search.css b/packages/@vuepress/plugin-search/src/client/styles/search.css index cdfb330162..43ee459d9d 100644 --- a/packages/@vuepress/plugin-search/src/client/styles/search.css +++ b/packages/@vuepress/plugin-search/src/client/styles/search.css @@ -16,7 +16,7 @@ line-height: 2rem; padding: 0 0.5rem 0 2rem; outline: none; - transition: all ease 0.3s; + transition: var(--t-all); background: var(--search-bg-color) url('search.svg') 0.6rem 0.5rem no-repeat; background-size: 1rem; } diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss index 01fa9c4a47..ca5e460f4f 100644 --- a/packages/@vuepress/theme-default/src/client/styles/badge.scss +++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss @@ -7,9 +7,7 @@ padding: 0 6px; color: var(--c-bg); vertical-align: top; - transition: - background-color ease 0.3s, - color ease 0.3s; + transition: var(--t-color-all); &.tip { background-color: var(--c-badge-tip); diff --git a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss index 65c9d02312..594fff5dbb 100644 --- a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss +++ b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss @@ -1,8 +1,5 @@ .custom-container { - transition: - background-color ease 0.3s, - border-color ease 0.3s, - color ease 0.3s; + transition: var(--t-color-all); .custom-container-title { font-weight: 600; diff --git a/packages/@vuepress/theme-default/src/client/styles/home.scss b/packages/@vuepress/theme-default/src/client/styles/home.scss index 6dbb142a47..c27502b3b3 100644 --- a/packages/@vuepress/theme-default/src/client/styles/home.scss +++ b/packages/@vuepress/theme-default/src/client/styles/home.scss @@ -40,7 +40,7 @@ border-width: 2px; border-style: solid; border-radius: 4px; - transition: background-color 0.1s ease; + transition: var(--t-color-all); box-sizing: border-box; &:not(:first-child) { @@ -103,7 +103,7 @@ border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-lighter); - transition: border-top-color 0.3s ease; + transition: var(--t-color-all); } } diff --git a/packages/@vuepress/theme-default/src/client/styles/layout.scss b/packages/@vuepress/theme-default/src/client/styles/layout.scss index 91047916cd..ddf56434a0 100644 --- a/packages/@vuepress/theme-default/src/client/styles/layout.scss +++ b/packages/@vuepress/theme-default/src/client/styles/layout.scss @@ -16,7 +16,7 @@ box-sizing: border-box; border-bottom: 1px solid var(--c-border); background-color: var(--c-bg-navbar); - transition: background-color ease 0.3s, border-bottom-color ease 0.3s; + transition: var(--t-color-all); } .sidebar { @@ -34,8 +34,7 @@ scrollbar-width: thin; scrollbar-color: var(--c-brand) var(--c-border); background-color: var(--c-bg-sidebar); - transition: transform ease 0.3s, background-color ease 0.3s, - border-right-color ease 0.3s; + transition: var(--t-transform), var(--t-color-all); &::-webkit-scrollbar { width: 7px; } diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index 3961ed8c2e..0c497ee089 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -3,7 +3,7 @@ body { padding: 0; margin: 0; background-color: var(--c-bg); - transition: background-color ease 0.3s; + transition: var(--t-background-color); } html.dark { @@ -48,7 +48,7 @@ code { background-color: var(--c-bg-light); border-radius: 3px; overflow-wrap: break-word; - transition: background-color ease 0.3s, color ease 0.3s; + transition: var(--t-color-all); } blockquote { @@ -94,7 +94,7 @@ h2 { font-size: 1.65rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--c-border); - transition: border-bottom-color 0.3s ease; + transition: var(--t-color-all); } h3 { diff --git a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss index 7aa1e99b71..d1e381c687 100644 --- a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss +++ b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss @@ -14,7 +14,7 @@ .navbar-links { display: none; border-bottom: 1px solid var(--c-border); - transition: border-bottom-color ease 0.3s; + transition: var(--t-color-all); padding: 0.5rem 0 0.75rem 0; a { diff --git a/packages/@vuepress/theme-default/src/client/styles/transitions.scss b/packages/@vuepress/theme-default/src/client/styles/transitions.scss index fda626741b..ccb49909a8 100644 --- a/packages/@vuepress/theme-default/src/client/styles/transitions.scss +++ b/packages/@vuepress/theme-default/src/client/styles/transitions.scss @@ -1,9 +1,9 @@ .fade-slide-y-enter-active { - transition: all 0.3s ease; + transition: all var(--t-duration) ease; } .fade-slide-y-leave-active { - transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); + transition: all var(--t-duration) cubic-bezier(1, 0.5, 0.8, 1); } .fade-slide-y-enter-from, diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index 2339797cb9..7492996c09 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -65,6 +65,17 @@ --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82); --content-width: 740px; --homepage-width: 960px; + + // transition vars + --t-duration: 0.3s; + --t-all: all var(--t-duration); + --t-opacity: opacity var(--t-duration); + --t-color: color var(--t-duration); + --t-border-color: border-color var(--t-duration); + --t-background-color: background-color var(--t-duration); + --t-color-all: var(--t-color), var(--t-border-color), + var(--t-background-color); + --t-transform: transform var(--t-duration); } // plugin-back-to-top From 76ae9ee1fec70ecab16ec18c871be7176fa5b18d Mon Sep 17 00:00:00 2001 From: Il Harper Date: Sun, 1 Aug 2021 02:45:51 +0800 Subject: [PATCH 02/14] fix(theme-default): transition bugfix --- packages/@vuepress/theme-default/src/client/styles/badge.scss | 2 +- .../@vuepress/theme-default/src/client/styles/normalize.scss | 2 +- packages/@vuepress/theme-default/src/client/styles/page.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss index ca5e460f4f..771c2436da 100644 --- a/packages/@vuepress/theme-default/src/client/styles/badge.scss +++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss @@ -7,7 +7,7 @@ padding: 0 6px; color: var(--c-bg); vertical-align: top; - transition: var(--t-color-all); + transition: var(--t-color), var(--t-background-color); &.tip { background-color: var(--c-badge-tip); diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index 0c497ee089..865e91a625 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -94,7 +94,7 @@ h2 { font-size: 1.65rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--c-border); - transition: var(--t-color-all); + transition: var(--t-border-color); } h3 { diff --git a/packages/@vuepress/theme-default/src/client/styles/page.scss b/packages/@vuepress/theme-default/src/client/styles/page.scss index 1b202623f1..cdcc3872ba 100644 --- a/packages/@vuepress/theme-default/src/client/styles/page.scss +++ b/packages/@vuepress/theme-default/src/client/styles/page.scss @@ -59,7 +59,7 @@ min-height: 2rem; margin-top: 0; border-top: 1px solid var(--c-border); - transition: border-top ease 0.3s; + transition: var(--t-border-color); padding-top: 1rem; overflow: auto; } From b340f27aa963c1b9bd7d0ab5438db68bf77195fb Mon Sep 17 00:00:00 2001 From: Il Harper Date: Sun, 1 Aug 2021 02:53:03 +0800 Subject: [PATCH 03/14] fix(theme-default): revert `--t` vars in other plugins --- .../plugin-back-to-top/src/client/styles/back-to-top.css | 2 +- .../@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css | 2 +- packages/@vuepress/plugin-search/src/client/styles/search.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css b/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css index 26fba6d0dc..b60c68ccd9 100644 --- a/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css +++ b/packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css @@ -22,7 +22,7 @@ .back-to-top-enter-active, .back-to-top-leave-active { - transition: var(--t-opacity); + transition: opacity 0.3s; } .back-to-top-enter-from, diff --git a/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css b/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css index 70979ed69b..e0ee14bfa2 100644 --- a/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css +++ b/packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css @@ -26,7 +26,7 @@ .pwa-popup-enter-active, .pwa-popup-leave-active { - transition: var(--t-opacity), var(--t-transform); + transition: opacity 0.3s, transform 0.3s; } .pwa-popup-enter-from, diff --git a/packages/@vuepress/plugin-search/src/client/styles/search.css b/packages/@vuepress/plugin-search/src/client/styles/search.css index 43ee459d9d..cdfb330162 100644 --- a/packages/@vuepress/plugin-search/src/client/styles/search.css +++ b/packages/@vuepress/plugin-search/src/client/styles/search.css @@ -16,7 +16,7 @@ line-height: 2rem; padding: 0 0.5rem 0 2rem; outline: none; - transition: var(--t-all); + transition: all ease 0.3s; background: var(--search-bg-color) url('search.svg') 0.6rem 0.5rem no-repeat; background-size: 1rem; } From e65ee54a83ca09433ea0c4ac432826b3532ab276 Mon Sep 17 00:00:00 2001 From: Il Harper Date: Sun, 1 Aug 2021 03:03:41 +0800 Subject: [PATCH 04/14] feat(theme-default): color transitions refactor --- .../@vuepress/theme-default/src/client/styles/home.scss | 6 +++--- .../@vuepress/theme-default/src/client/styles/layout.scss | 5 +++-- .../theme-default/src/client/styles/normalize.scss | 2 +- .../@vuepress/theme-default/src/client/styles/sidebar.scss | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/home.scss b/packages/@vuepress/theme-default/src/client/styles/home.scss index c27502b3b3..0f1579324e 100644 --- a/packages/@vuepress/theme-default/src/client/styles/home.scss +++ b/packages/@vuepress/theme-default/src/client/styles/home.scss @@ -40,7 +40,7 @@ border-width: 2px; border-style: solid; border-radius: 4px; - transition: var(--t-color-all); + transition: var(--t-background-color); box-sizing: border-box; &:not(:first-child) { @@ -70,7 +70,7 @@ .features { border-top: 1px solid var(--c-border); - transition: border-top ease 0.3s; + transition: var(--t-border-color); padding: 1.2rem 0; margin-top: 2.5rem; display: flex; @@ -103,7 +103,7 @@ border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-lighter); - transition: var(--t-color-all); + transition: var(--t-border-color); } } diff --git a/packages/@vuepress/theme-default/src/client/styles/layout.scss b/packages/@vuepress/theme-default/src/client/styles/layout.scss index ddf56434a0..1379a6bc19 100644 --- a/packages/@vuepress/theme-default/src/client/styles/layout.scss +++ b/packages/@vuepress/theme-default/src/client/styles/layout.scss @@ -16,7 +16,7 @@ box-sizing: border-box; border-bottom: 1px solid var(--c-border); background-color: var(--c-bg-navbar); - transition: var(--t-color-all); + transition: var(--t-background-color), var(--t-border-color); } .sidebar { @@ -34,7 +34,8 @@ scrollbar-width: thin; scrollbar-color: var(--c-brand) var(--c-border); background-color: var(--c-bg-sidebar); - transition: var(--t-transform), var(--t-color-all); + transition: var(--t-transform), var(--t-background-color), + var(--t-border-color); &::-webkit-scrollbar { width: 7px; } diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index 865e91a625..2e55d6e0c4 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -48,7 +48,7 @@ code { background-color: var(--c-bg-light); border-radius: 3px; overflow-wrap: break-word; - transition: var(--t-color-all); + transition: var(--t-background-color), var(--t-color); } blockquote { diff --git a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss index d1e381c687..c815b4f260 100644 --- a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss +++ b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss @@ -14,7 +14,7 @@ .navbar-links { display: none; border-bottom: 1px solid var(--c-border); - transition: var(--t-color-all); + transition: var(--t-border-color); padding: 0.5rem 0 0.75rem 0; a { From 6664edd7111cd48ba4ae657c935f4ca3d071c9a0 Mon Sep 17 00:00:00 2001 From: Il Harper Date: Sun, 1 Aug 2021 03:05:48 +0800 Subject: [PATCH 05/14] feat(theme-default): add `--t-duration-slide` --- .../theme-default/src/client/styles/transitions.scss | 4 ++-- packages/@vuepress/theme-default/src/client/styles/vars.scss | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/transitions.scss b/packages/@vuepress/theme-default/src/client/styles/transitions.scss index ccb49909a8..e8b22d1604 100644 --- a/packages/@vuepress/theme-default/src/client/styles/transitions.scss +++ b/packages/@vuepress/theme-default/src/client/styles/transitions.scss @@ -1,9 +1,9 @@ .fade-slide-y-enter-active { - transition: all var(--t-duration) ease; + transition: all var(--t-duration-slide) ease; } .fade-slide-y-leave-active { - transition: all var(--t-duration) cubic-bezier(1, 0.5, 0.8, 1); + transition: all var(--t-duration-slide) cubic-bezier(1, 0.5, 0.8, 1); } .fade-slide-y-enter-from, diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index 7492996c09..9fd705b005 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -68,6 +68,7 @@ // transition vars --t-duration: 0.3s; + --t-duration-slide: 0.3s; --t-all: all var(--t-duration); --t-opacity: opacity var(--t-duration); --t-color: color var(--t-duration); From 74ff30470f4631ccc0f199f4ad688c62a653cb2b Mon Sep 17 00:00:00 2001 From: Il Harper Date: Tue, 3 Aug 2021 15:26:39 +0800 Subject: [PATCH 06/14] feat(theme-default): add --t-timing-function --- .../theme-default/src/client/styles/vars.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index 9fd705b005..49cec349da 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -69,14 +69,16 @@ // transition vars --t-duration: 0.3s; --t-duration-slide: 0.3s; - --t-all: all var(--t-duration); - --t-opacity: opacity var(--t-duration); - --t-color: color var(--t-duration); - --t-border-color: border-color var(--t-duration); - --t-background-color: background-color var(--t-duration); + --t-timing-function: ease; + --t-all: all var(--t-duration) var(--t-timing-function); + --t-opacity: opacity var(--t-duration) var(--t-timing-function); + --t-color: color var(--t-duration) var(--t-timing-function); + --t-border-color: border-color var(--t-duration) var(--t-timing-function); + --t-background-color: background-color var(--t-duration) + var(--t-timing-function); --t-color-all: var(--t-color), var(--t-border-color), var(--t-background-color); - --t-transform: transform var(--t-duration); + --t-transform: transform var(--t-duration) var(--t-timing-function); } // plugin-back-to-top From 9c8bf001bb542dda61abfb5ebf6c01dc43ba563f Mon Sep 17 00:00:00 2001 From: Il Harper Date: Mon, 9 Aug 2021 17:31:44 +0800 Subject: [PATCH 07/14] feat(theme-default): remove --t-duration-slide --- .../theme-default/src/client/styles/transitions.scss | 4 ++-- packages/@vuepress/theme-default/src/client/styles/vars.scss | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/transitions.scss b/packages/@vuepress/theme-default/src/client/styles/transitions.scss index e8b22d1604..fda626741b 100644 --- a/packages/@vuepress/theme-default/src/client/styles/transitions.scss +++ b/packages/@vuepress/theme-default/src/client/styles/transitions.scss @@ -1,9 +1,9 @@ .fade-slide-y-enter-active { - transition: all var(--t-duration-slide) ease; + transition: all 0.3s ease; } .fade-slide-y-leave-active { - transition: all var(--t-duration-slide) cubic-bezier(1, 0.5, 0.8, 1); + transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); } .fade-slide-y-enter-from, diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index 49cec349da..0500bec4ee 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -68,7 +68,6 @@ // transition vars --t-duration: 0.3s; - --t-duration-slide: 0.3s; --t-timing-function: ease; --t-all: all var(--t-duration) var(--t-timing-function); --t-opacity: opacity var(--t-duration) var(--t-timing-function); From 822d84593a2bf76a70932cb7eb024eccbc4adde5 Mon Sep 17 00:00:00 2001 From: Il Harper Date: Mon, 9 Aug 2021 17:40:42 +0800 Subject: [PATCH 08/14] feat(theme-default): use `--t-options` --- .../theme-default/src/client/styles/vars.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index 0500bec4ee..a3e16bd134 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -67,17 +67,15 @@ --homepage-width: 960px; // transition vars - --t-duration: 0.3s; - --t-timing-function: ease; - --t-all: all var(--t-duration) var(--t-timing-function); - --t-opacity: opacity var(--t-duration) var(--t-timing-function); - --t-color: color var(--t-duration) var(--t-timing-function); - --t-border-color: border-color var(--t-duration) var(--t-timing-function); - --t-background-color: background-color var(--t-duration) - var(--t-timing-function); + --t-options: 0.3s ease; + --t-all: all var(--t-options); + --t-opacity: opacity var(--t-options); + --t-color: color var(--t-options); + --t-border-color: border-color var(--t-options); + --t-background-color: background-color var(--t-options); --t-color-all: var(--t-color), var(--t-border-color), var(--t-background-color); - --t-transform: transform var(--t-duration) var(--t-timing-function); + --t-transform: transform var(--t-options); } // plugin-back-to-top From 10fe60ff8bcf665931553732a1d76df5cd33f024 Mon Sep 17 00:00:00 2001 From: Il Harper Date: Tue, 10 Aug 2021 00:11:11 +0800 Subject: [PATCH 09/14] feat(theme-default): `--t` variable name update --- .../theme-default/src/client/styles/badge.scss | 2 +- .../theme-default/src/client/styles/home.scss | 6 +++--- .../theme-default/src/client/styles/layout.scss | 6 +++--- .../src/client/styles/normalize.scss | 6 +++--- .../theme-default/src/client/styles/page.scss | 2 +- .../theme-default/src/client/styles/sidebar.scss | 2 +- .../theme-default/src/client/styles/vars.scss | 16 ++++++++-------- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss index 771c2436da..61faa47ef8 100644 --- a/packages/@vuepress/theme-default/src/client/styles/badge.scss +++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss @@ -7,7 +7,7 @@ padding: 0 6px; color: var(--c-bg); vertical-align: top; - transition: var(--t-color), var(--t-background-color); + transition: var(--t-p-color), var(--t-p-background-color); &.tip { background-color: var(--c-badge-tip); diff --git a/packages/@vuepress/theme-default/src/client/styles/home.scss b/packages/@vuepress/theme-default/src/client/styles/home.scss index 0f1579324e..c9d2d71071 100644 --- a/packages/@vuepress/theme-default/src/client/styles/home.scss +++ b/packages/@vuepress/theme-default/src/client/styles/home.scss @@ -40,7 +40,7 @@ border-width: 2px; border-style: solid; border-radius: 4px; - transition: var(--t-background-color); + transition: var(--t-p-background-color); box-sizing: border-box; &:not(:first-child) { @@ -70,7 +70,7 @@ .features { border-top: 1px solid var(--c-border); - transition: var(--t-border-color); + transition: var(--t-p-border-color); padding: 1.2rem 0; margin-top: 2.5rem; display: flex; @@ -103,7 +103,7 @@ border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-lighter); - transition: var(--t-border-color); + transition: var(--t-p-border-color); } } diff --git a/packages/@vuepress/theme-default/src/client/styles/layout.scss b/packages/@vuepress/theme-default/src/client/styles/layout.scss index 1379a6bc19..7e5aafe986 100644 --- a/packages/@vuepress/theme-default/src/client/styles/layout.scss +++ b/packages/@vuepress/theme-default/src/client/styles/layout.scss @@ -16,7 +16,7 @@ box-sizing: border-box; border-bottom: 1px solid var(--c-border); background-color: var(--c-bg-navbar); - transition: var(--t-background-color), var(--t-border-color); + transition: var(--t-p-background-color), var(--t-p-border-color); } .sidebar { @@ -34,8 +34,8 @@ scrollbar-width: thin; scrollbar-color: var(--c-brand) var(--c-border); background-color: var(--c-bg-sidebar); - transition: var(--t-transform), var(--t-background-color), - var(--t-border-color); + transition: var(--t-p-transform), var(--t-p-background-color), + var(--t-p-border-color); &::-webkit-scrollbar { width: 7px; } diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index 2e55d6e0c4..9c0f5e8b98 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -3,7 +3,7 @@ body { padding: 0; margin: 0; background-color: var(--c-bg); - transition: var(--t-background-color); + transition: var(--t-p-background-color); } html.dark { @@ -48,7 +48,7 @@ code { background-color: var(--c-bg-light); border-radius: 3px; overflow-wrap: break-word; - transition: var(--t-background-color), var(--t-color); + transition: var(--t-p-background-color), var(--t-p-color); } blockquote { @@ -94,7 +94,7 @@ h2 { font-size: 1.65rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--c-border); - transition: var(--t-border-color); + transition: var(--t-p-border-color); } h3 { diff --git a/packages/@vuepress/theme-default/src/client/styles/page.scss b/packages/@vuepress/theme-default/src/client/styles/page.scss index cdcc3872ba..7e8b77fb53 100644 --- a/packages/@vuepress/theme-default/src/client/styles/page.scss +++ b/packages/@vuepress/theme-default/src/client/styles/page.scss @@ -59,7 +59,7 @@ min-height: 2rem; margin-top: 0; border-top: 1px solid var(--c-border); - transition: var(--t-border-color); + transition: var(--t-p-border-color); padding-top: 1rem; overflow: auto; } diff --git a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss index c815b4f260..a0f2916846 100644 --- a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss +++ b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss @@ -14,7 +14,7 @@ .navbar-links { display: none; border-bottom: 1px solid var(--c-border); - transition: var(--t-border-color); + transition: var(--t-p-border-color); padding: 0.5rem 0 0.75rem 0; a { diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index a3e16bd134..82ba601eaf 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -68,14 +68,14 @@ // transition vars --t-options: 0.3s ease; - --t-all: all var(--t-options); - --t-opacity: opacity var(--t-options); - --t-color: color var(--t-options); - --t-border-color: border-color var(--t-options); - --t-background-color: background-color var(--t-options); - --t-color-all: var(--t-color), var(--t-border-color), - var(--t-background-color); - --t-transform: transform var(--t-options); + --t-p-all: all var(--t-options); + --t-p-opacity: opacity var(--t-options); + --t-p-transform: transform var(--t-options); + --t-p-color: color var(--t-options); + --t-p-border-color: border-color var(--t-options); + --t-p-background-color: background-color var(--t-options); + --t-color-all: var(--t-p-color), var(--t-p-border-color), + var(--t-p-background-color); } // plugin-back-to-top From 3906192c91663c8088b217ebaf7449f4647bf6c9 Mon Sep 17 00:00:00 2001 From: Il Harper Date: Wed, 11 Aug 2021 03:50:28 +0800 Subject: [PATCH 10/14] feat(theme-default): provide only `t-p-options` for user --- .../theme-default/src/client/styles/_variables.scss | 7 +++++++ .../theme-default/src/client/styles/badge.scss | 4 +++- .../src/client/styles/custom-container.scss | 4 +++- .../theme-default/src/client/styles/home.scss | 6 +++--- .../theme-default/src/client/styles/layout.scss | 5 ++--- .../theme-default/src/client/styles/normalize.scss | 8 +++++--- .../theme-default/src/client/styles/page.scss | 2 +- .../theme-default/src/client/styles/sidebar.scss | 2 +- .../theme-default/src/client/styles/vars.scss | 11 ++--------- 9 files changed, 27 insertions(+), 22 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/_variables.scss b/packages/@vuepress/theme-default/src/client/styles/_variables.scss index e335053251..5b9102db0f 100644 --- a/packages/@vuepress/theme-default/src/client/styles/_variables.scss +++ b/packages/@vuepress/theme-default/src/client/styles/_variables.scss @@ -5,6 +5,13 @@ $MQNarrow: 959px !default; $MQMobile: 719px !default; $MQMobileNarrow: 419px !default; +// transitions +$TTransform: transform var(--t-transform-options); +$TColor: color var(--t-color-options); +$TBorderColor: border-color var(--t-color-options); +$TBackgroundColor: background-color var(--t-color-options); +$TAllColor: $TColor, $TBorderColor, $TBackgroundColor; + // code languages $codeLang: 'c' 'cpp' 'cs' 'css' 'dart' 'docker' 'fs' 'go' 'html' 'java' 'js' 'json' 'kt' 'less' 'makefile' 'md' 'php' 'py' 'rb' 'rs' 'sass' 'scss' 'sh' diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss index 61faa47ef8..653e1ea74e 100644 --- a/packages/@vuepress/theme-default/src/client/styles/badge.scss +++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss @@ -1,3 +1,5 @@ +@import '_variables'; + .badge { display: inline-block; font-size: 14px; @@ -7,7 +9,7 @@ padding: 0 6px; color: var(--c-bg); vertical-align: top; - transition: var(--t-p-color), var(--t-p-background-color); + transition: $TColor, $TBackgroundColor; &.tip { background-color: var(--c-badge-tip); diff --git a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss index 594fff5dbb..43f2930a38 100644 --- a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss +++ b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss @@ -1,5 +1,7 @@ +@import '_variables'; + .custom-container { - transition: var(--t-color-all); + transition: $TAllColor; .custom-container-title { font-weight: 600; diff --git a/packages/@vuepress/theme-default/src/client/styles/home.scss b/packages/@vuepress/theme-default/src/client/styles/home.scss index c9d2d71071..b851b8c375 100644 --- a/packages/@vuepress/theme-default/src/client/styles/home.scss +++ b/packages/@vuepress/theme-default/src/client/styles/home.scss @@ -40,7 +40,7 @@ border-width: 2px; border-style: solid; border-radius: 4px; - transition: var(--t-p-background-color); + transition: $TBackgroundColor; box-sizing: border-box; &:not(:first-child) { @@ -70,7 +70,7 @@ .features { border-top: 1px solid var(--c-border); - transition: var(--t-p-border-color); + transition: $TBorderColor; padding: 1.2rem 0; margin-top: 2.5rem; display: flex; @@ -103,7 +103,7 @@ border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-lighter); - transition: var(--t-p-border-color); + transition: $TBorderColor; } } diff --git a/packages/@vuepress/theme-default/src/client/styles/layout.scss b/packages/@vuepress/theme-default/src/client/styles/layout.scss index 7e5aafe986..f3cbdffe6d 100644 --- a/packages/@vuepress/theme-default/src/client/styles/layout.scss +++ b/packages/@vuepress/theme-default/src/client/styles/layout.scss @@ -16,7 +16,7 @@ box-sizing: border-box; border-bottom: 1px solid var(--c-border); background-color: var(--c-bg-navbar); - transition: var(--t-p-background-color), var(--t-p-border-color); + transition: $TBackgroundColor, $TBorderColor; } .sidebar { @@ -34,8 +34,7 @@ scrollbar-width: thin; scrollbar-color: var(--c-brand) var(--c-border); background-color: var(--c-bg-sidebar); - transition: var(--t-p-transform), var(--t-p-background-color), - var(--t-p-border-color); + transition: $TTransform, $TBackgroundColor, $TBorderColor; &::-webkit-scrollbar { width: 7px; } diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index 9c0f5e8b98..19b89bf3d5 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -1,9 +1,11 @@ +@import '_variables'; + html, body { padding: 0; margin: 0; background-color: var(--c-bg); - transition: var(--t-p-background-color); + transition: $TBackgroundColor; } html.dark { @@ -48,7 +50,7 @@ code { background-color: var(--c-bg-light); border-radius: 3px; overflow-wrap: break-word; - transition: var(--t-p-background-color), var(--t-p-color); + transition: $TBackgroundColor, $TColor; } blockquote { @@ -94,7 +96,7 @@ h2 { font-size: 1.65rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--c-border); - transition: var(--t-p-border-color); + transition: $TBorderColor; } h3 { diff --git a/packages/@vuepress/theme-default/src/client/styles/page.scss b/packages/@vuepress/theme-default/src/client/styles/page.scss index 7e8b77fb53..60fb9d9151 100644 --- a/packages/@vuepress/theme-default/src/client/styles/page.scss +++ b/packages/@vuepress/theme-default/src/client/styles/page.scss @@ -59,7 +59,7 @@ min-height: 2rem; margin-top: 0; border-top: 1px solid var(--c-border); - transition: var(--t-p-border-color); + transition: $TBorderColor; padding-top: 1rem; overflow: auto; } diff --git a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss index a0f2916846..d62b994716 100644 --- a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss +++ b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss @@ -14,7 +14,7 @@ .navbar-links { display: none; border-bottom: 1px solid var(--c-border); - transition: var(--t-p-border-color); + transition: $TBorderColor; padding: 0.5rem 0 0.75rem 0; a { diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index 82ba601eaf..a5a45e4f5b 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -67,15 +67,8 @@ --homepage-width: 960px; // transition vars - --t-options: 0.3s ease; - --t-p-all: all var(--t-options); - --t-p-opacity: opacity var(--t-options); - --t-p-transform: transform var(--t-options); - --t-p-color: color var(--t-options); - --t-p-border-color: border-color var(--t-options); - --t-p-background-color: background-color var(--t-options); - --t-color-all: var(--t-p-color), var(--t-p-border-color), - var(--t-p-background-color); + --t-transform-options: 0.3s ease; + --t-color-options: 0.3s ease; } // plugin-back-to-top From 29082058d6eeaec718fe512c05f969516229d2d0 Mon Sep 17 00:00:00 2001 From: Il Harper Date: Wed, 11 Aug 2021 18:05:29 +0800 Subject: [PATCH 11/14] feat(theme-default): remove scss variables --- .../theme-default/src/client/styles/_variables.scss | 7 ------- .../@vuepress/theme-default/src/client/styles/badge.scss | 3 ++- .../theme-default/src/client/styles/custom-container.scss | 3 ++- .../@vuepress/theme-default/src/client/styles/home.scss | 6 +++--- .../@vuepress/theme-default/src/client/styles/layout.scss | 6 ++++-- .../theme-default/src/client/styles/normalize.scss | 7 ++++--- .../@vuepress/theme-default/src/client/styles/page.scss | 2 +- .../@vuepress/theme-default/src/client/styles/sidebar.scss | 2 +- 8 files changed, 17 insertions(+), 19 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/_variables.scss b/packages/@vuepress/theme-default/src/client/styles/_variables.scss index 5b9102db0f..e335053251 100644 --- a/packages/@vuepress/theme-default/src/client/styles/_variables.scss +++ b/packages/@vuepress/theme-default/src/client/styles/_variables.scss @@ -5,13 +5,6 @@ $MQNarrow: 959px !default; $MQMobile: 719px !default; $MQMobileNarrow: 419px !default; -// transitions -$TTransform: transform var(--t-transform-options); -$TColor: color var(--t-color-options); -$TBorderColor: border-color var(--t-color-options); -$TBackgroundColor: background-color var(--t-color-options); -$TAllColor: $TColor, $TBorderColor, $TBackgroundColor; - // code languages $codeLang: 'c' 'cpp' 'cs' 'css' 'dart' 'docker' 'fs' 'go' 'html' 'java' 'js' 'json' 'kt' 'less' 'makefile' 'md' 'php' 'py' 'rb' 'rs' 'sass' 'scss' 'sh' diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss index 653e1ea74e..cebedd006d 100644 --- a/packages/@vuepress/theme-default/src/client/styles/badge.scss +++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss @@ -9,7 +9,8 @@ padding: 0 6px; color: var(--c-bg); vertical-align: top; - transition: $TColor, $TBackgroundColor; + transition: color var(--t-color-options), + background-color var(--t-color-options); &.tip { background-color: var(--c-badge-tip); diff --git a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss index 43f2930a38..913d70587b 100644 --- a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss +++ b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss @@ -1,7 +1,8 @@ @import '_variables'; .custom-container { - transition: $TAllColor; + transition: color var(--t-color-options), border-color var(--t-color-options), + background-color var(--t-color-options); .custom-container-title { font-weight: 600; diff --git a/packages/@vuepress/theme-default/src/client/styles/home.scss b/packages/@vuepress/theme-default/src/client/styles/home.scss index b851b8c375..3056f4b896 100644 --- a/packages/@vuepress/theme-default/src/client/styles/home.scss +++ b/packages/@vuepress/theme-default/src/client/styles/home.scss @@ -40,7 +40,7 @@ border-width: 2px; border-style: solid; border-radius: 4px; - transition: $TBackgroundColor; + transition: background-color var(--t-color-options); box-sizing: border-box; &:not(:first-child) { @@ -70,7 +70,7 @@ .features { border-top: 1px solid var(--c-border); - transition: $TBorderColor; + transition: border-color var(--t-color-options); padding: 1.2rem 0; margin-top: 2.5rem; display: flex; @@ -103,7 +103,7 @@ border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-lighter); - transition: $TBorderColor; + transition: border-color var(--t-color-options); } } diff --git a/packages/@vuepress/theme-default/src/client/styles/layout.scss b/packages/@vuepress/theme-default/src/client/styles/layout.scss index f3cbdffe6d..c494a36726 100644 --- a/packages/@vuepress/theme-default/src/client/styles/layout.scss +++ b/packages/@vuepress/theme-default/src/client/styles/layout.scss @@ -16,7 +16,8 @@ box-sizing: border-box; border-bottom: 1px solid var(--c-border); background-color: var(--c-bg-navbar); - transition: $TBackgroundColor, $TBorderColor; + transition: background-color var(--t-color-options), + border-color var(--t-color-options); } .sidebar { @@ -34,7 +35,8 @@ scrollbar-width: thin; scrollbar-color: var(--c-brand) var(--c-border); background-color: var(--c-bg-sidebar); - transition: $TTransform, $TBackgroundColor, $TBorderColor; + transition: transform var(--t-transform-options), + background-color var(--t-color-options), border-color var(--t-color-options); &::-webkit-scrollbar { width: 7px; } diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index 19b89bf3d5..46baee7bac 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -5,7 +5,7 @@ body { padding: 0; margin: 0; background-color: var(--c-bg); - transition: $TBackgroundColor; + transition: background-color var(--t-color-options); } html.dark { @@ -50,7 +50,8 @@ code { background-color: var(--c-bg-light); border-radius: 3px; overflow-wrap: break-word; - transition: $TBackgroundColor, $TColor; + transition: background-color var(--t-color-options), + color var(--t-color-options); } blockquote { @@ -96,7 +97,7 @@ h2 { font-size: 1.65rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--c-border); - transition: $TBorderColor; + transition: border-color var(--t-color-options); } h3 { diff --git a/packages/@vuepress/theme-default/src/client/styles/page.scss b/packages/@vuepress/theme-default/src/client/styles/page.scss index 60fb9d9151..e48390d38a 100644 --- a/packages/@vuepress/theme-default/src/client/styles/page.scss +++ b/packages/@vuepress/theme-default/src/client/styles/page.scss @@ -59,7 +59,7 @@ min-height: 2rem; margin-top: 0; border-top: 1px solid var(--c-border); - transition: $TBorderColor; + transition: border-color var(--t-color-options); padding-top: 1rem; overflow: auto; } diff --git a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss index d62b994716..a8a43711f6 100644 --- a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss +++ b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss @@ -14,7 +14,7 @@ .navbar-links { display: none; border-bottom: 1px solid var(--c-border); - transition: $TBorderColor; + transition: border-color var(--t-color-options); padding: 0.5rem 0 0.75rem 0; a { From 368cb08debca28aced008bbcdc04abde8a8c3f98 Mon Sep 17 00:00:00 2001 From: Il Harper Date: Thu, 12 Aug 2021 08:22:36 +0800 Subject: [PATCH 12/14] feat(theme-default): remove unused imports --- packages/@vuepress/theme-default/src/client/styles/badge.scss | 2 -- .../theme-default/src/client/styles/custom-container.scss | 2 -- .../@vuepress/theme-default/src/client/styles/normalize.scss | 2 -- 3 files changed, 6 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss index cebedd006d..10c43615f3 100644 --- a/packages/@vuepress/theme-default/src/client/styles/badge.scss +++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss @@ -1,5 +1,3 @@ -@import '_variables'; - .badge { display: inline-block; font-size: 14px; diff --git a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss index 913d70587b..a9928c45ee 100644 --- a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss +++ b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss @@ -1,5 +1,3 @@ -@import '_variables'; - .custom-container { transition: color var(--t-color-options), border-color var(--t-color-options), background-color var(--t-color-options); diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index 46baee7bac..f4c616dd1b 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -1,5 +1,3 @@ -@import '_variables'; - html, body { padding: 0; From a68ed2225bb361cb618adb4c75a83e967779a256 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Sat, 14 Aug 2021 00:50:47 +0800 Subject: [PATCH 13/14] chore: tweaks --- .../@vuepress/theme-default/src/client/styles/badge.scss | 3 +-- .../theme-default/src/client/styles/custom-container.scss | 4 ++-- .../@vuepress/theme-default/src/client/styles/home.scss | 6 +++--- .../@vuepress/theme-default/src/client/styles/layout.scss | 7 +++---- .../theme-default/src/client/styles/normalize.scss | 7 +++---- .../@vuepress/theme-default/src/client/styles/page.scss | 2 +- .../@vuepress/theme-default/src/client/styles/sidebar.scss | 2 +- .../@vuepress/theme-default/src/client/styles/vars.scss | 4 ++-- 8 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss index 10c43615f3..69c790d61a 100644 --- a/packages/@vuepress/theme-default/src/client/styles/badge.scss +++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss @@ -7,8 +7,7 @@ padding: 0 6px; color: var(--c-bg); vertical-align: top; - transition: color var(--t-color-options), - background-color var(--t-color-options); + transition: color var(--t-color), background-color var(--t-color); &.tip { background-color: var(--c-badge-tip); diff --git a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss index a9928c45ee..7f6e4bcf5e 100644 --- a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss +++ b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss @@ -1,6 +1,6 @@ .custom-container { - transition: color var(--t-color-options), border-color var(--t-color-options), - background-color var(--t-color-options); + transition: color var(--t-color), border-color var(--t-color), + background-color var(--t-color); .custom-container-title { font-weight: 600; diff --git a/packages/@vuepress/theme-default/src/client/styles/home.scss b/packages/@vuepress/theme-default/src/client/styles/home.scss index 3056f4b896..b2411a1ee1 100644 --- a/packages/@vuepress/theme-default/src/client/styles/home.scss +++ b/packages/@vuepress/theme-default/src/client/styles/home.scss @@ -40,7 +40,7 @@ border-width: 2px; border-style: solid; border-radius: 4px; - transition: background-color var(--t-color-options); + transition: background-color var(--t-color); box-sizing: border-box; &:not(:first-child) { @@ -70,7 +70,7 @@ .features { border-top: 1px solid var(--c-border); - transition: border-color var(--t-color-options); + transition: border-color var(--t-color); padding: 1.2rem 0; margin-top: 2.5rem; display: flex; @@ -103,7 +103,7 @@ border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-lighter); - transition: border-color var(--t-color-options); + transition: border-color var(--t-color); } } diff --git a/packages/@vuepress/theme-default/src/client/styles/layout.scss b/packages/@vuepress/theme-default/src/client/styles/layout.scss index c494a36726..0b91abafc1 100644 --- a/packages/@vuepress/theme-default/src/client/styles/layout.scss +++ b/packages/@vuepress/theme-default/src/client/styles/layout.scss @@ -16,8 +16,7 @@ box-sizing: border-box; border-bottom: 1px solid var(--c-border); background-color: var(--c-bg-navbar); - transition: background-color var(--t-color-options), - border-color var(--t-color-options); + transition: background-color var(--t-color), border-color var(--t-color); } .sidebar { @@ -35,8 +34,8 @@ scrollbar-width: thin; scrollbar-color: var(--c-brand) var(--c-border); background-color: var(--c-bg-sidebar); - transition: transform var(--t-transform-options), - background-color var(--t-color-options), border-color var(--t-color-options); + transition: transform var(--t-transform), background-color var(--t-color), + border-color var(--t-color); &::-webkit-scrollbar { width: 7px; } diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss index f4c616dd1b..56181ce8cc 100644 --- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss +++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss @@ -3,7 +3,7 @@ body { padding: 0; margin: 0; background-color: var(--c-bg); - transition: background-color var(--t-color-options); + transition: background-color var(--t-color); } html.dark { @@ -48,8 +48,7 @@ code { background-color: var(--c-bg-light); border-radius: 3px; overflow-wrap: break-word; - transition: background-color var(--t-color-options), - color var(--t-color-options); + transition: background-color var(--t-color), color var(--t-color); } blockquote { @@ -95,7 +94,7 @@ h2 { font-size: 1.65rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--c-border); - transition: border-color var(--t-color-options); + transition: border-color var(--t-color); } h3 { diff --git a/packages/@vuepress/theme-default/src/client/styles/page.scss b/packages/@vuepress/theme-default/src/client/styles/page.scss index e48390d38a..50bd588a07 100644 --- a/packages/@vuepress/theme-default/src/client/styles/page.scss +++ b/packages/@vuepress/theme-default/src/client/styles/page.scss @@ -59,7 +59,7 @@ min-height: 2rem; margin-top: 0; border-top: 1px solid var(--c-border); - transition: border-color var(--t-color-options); + transition: border-color var(--t-color); padding-top: 1rem; overflow: auto; } diff --git a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss index a8a43711f6..6140569f05 100644 --- a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss +++ b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss @@ -14,7 +14,7 @@ .navbar-links { display: none; border-bottom: 1px solid var(--c-border); - transition: border-color var(--t-color-options); + transition: border-color var(--t-color); padding: 0.5rem 0 0.75rem 0; a { diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index a5a45e4f5b..e8f2c3a13b 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -67,8 +67,8 @@ --homepage-width: 960px; // transition vars - --t-transform-options: 0.3s ease; - --t-color-options: 0.3s ease; + --t-color: 0.3s ease; + --t-transform: 0.3s ease; } // plugin-back-to-top From 3fe910d2bd9c5b1a669850d960b61c0979ea0246 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Sat, 14 Aug 2021 00:55:58 +0800 Subject: [PATCH 14/14] chore: tweaks --- .../@vuepress/theme-default/src/client/styles/vars.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss index e8f2c3a13b..856f1722ce 100644 --- a/packages/@vuepress/theme-default/src/client/styles/vars.scss +++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss @@ -46,6 +46,10 @@ --c-badge-warning: var(--c-warning); --c-badge-danger: var(--c-danger); + // transition vars + --t-color: 0.3s ease; + --t-transform: 0.3s ease; + // code blocks vars --code-bg-color: #282c34; --code-hl-bg-color: rgba(0, 0, 0, 0.66); @@ -65,10 +69,6 @@ --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82); --content-width: 740px; --homepage-width: 960px; - - // transition vars - --t-color: 0.3s ease; - --t-transform: 0.3s ease; } // plugin-back-to-top