Skip to content

feat(theme-default): add css variables for transition #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
meteorlxy merged 14 commits into from
Aug 13, 2021
Merged

feat(theme-default): add css variables for transition #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a154cca
feat(theme-default): add transition variables
ilharp Jul 31, 2021
76ae9ee
fix(theme-default): transition bugfix
ilharp Jul 31, 2021
b340f27
fix(theme-default): revert `--t` vars in other plugins
ilharp Jul 31, 2021
e65ee54
feat(theme-default): color transitions refactor
ilharp Jul 31, 2021
6664edd
feat(theme-default): add `--t-duration-slide`
ilharp Jul 31, 2021
74ff304
feat(theme-default): add --t-timing-function
ilharp Aug 3, 2021
9c8bf00
feat(theme-default): remove --t-duration-slide
ilharp Aug 9, 2021
822d845
feat(theme-default): use `--t-options`
ilharp Aug 9, 2021
10fe60f
feat(theme-default): `--t` variable name update
ilharp Aug 9, 2021
3906192
feat(theme-default): provide only `t-p-options` for user
ilharp Aug 10, 2021
2908205
feat(theme-default): remove scss variables
ilharp Aug 11, 2021
368cb08
feat(theme-default): remove unused imports
ilharp Aug 12, 2021
a68ed22
chore: tweaks
meteorlxy Aug 13, 2021
3fe910d
chore: tweaks
meteorlxy Aug 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/@vuepress/theme-default/src/client/styles/badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: color var(--t-color), background-color var(--t-color);

&.tip {
background-color: var(--c-badge-tip);
Expand Down
6 changes: 2 additions & 4 deletions packages/@vuepress/theme-default/src/client/styles/custom-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.custom-container {
transition:
background-color ease 0.3s,
border-color ease 0.3s,
color ease 0.3s;
transition: color var(--t-color), border-color var(--t-color),
background-color var(--t-color);

.custom-container-title {
font-weight: 600;
Expand Down
6 changes: 3 additions & 3 deletions packages/@vuepress/theme-default/src/client/styles/home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
border-width: 2px;
border-style: solid;
border-radius: 4px;
transition: background-color 0.1s ease;
transition: background-color var(--t-color);
box-sizing: border-box;

&:not(:first-child) {
Expand Down Expand Up @@ -70,7 +70,7 @@

.features {
border-top: 1px solid var(--c-border);
transition: border-top ease 0.3s;
transition: border-color var(--t-color);
padding: 1.2rem 0;
margin-top: 2.5rem;
display: flex;
Expand Down Expand Up @@ -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: border-color var(--t-color);
}
}

Expand Down
6 changes: 3 additions & 3 deletions packages/@vuepress/theme-default/src/client/styles/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: background-color var(--t-color), border-color var(--t-color);
}

.sidebar {
Expand All @@ -34,8 +34,8 @@
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: transform var(--t-transform), background-color var(--t-color),
border-color var(--t-color);
&::-webkit-scrollbar {
width: 7px;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/@vuepress/theme-default/src/client/styles/normalize.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ body {
padding: 0;
margin: 0;
background-color: var(--c-bg);
transition: background-color ease 0.3s;
transition: background-color var(--t-color);
}

html.dark {
Expand Down Expand Up @@ -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: background-color var(--t-color), color var(--t-color);
}

blockquote {
Expand Down Expand Up @@ -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: border-color var(--t-color);
}

h3 {
Expand Down
2 changes: 1 addition & 1 deletion packages/@vuepress/theme-default/src/client/styles/page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
min-height: 2rem;
margin-top: 0;
border-top: 1px solid var(--c-border);
transition: border-top ease 0.3s;
transition: border-color var(--t-color);
padding-top: 1rem;
overflow: auto;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/@vuepress/theme-default/src/client/styles/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
.navbar-links {
display: none;
border-bottom: 1px solid var(--c-border);
transition: border-bottom-color ease 0.3s;
transition: border-color var(--t-color);
padding: 0.5rem 0 0.75rem 0;

a {
Expand Down
4 changes: 4 additions & 0 deletions packages/@vuepress/theme-default/src/client/styles/vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down