style: refactor keep-container

This commit is contained in:
XPoet 2021-01-21 18:23:22 +08:00
parent 89aba08e34
commit ae780fb0a8
13 changed files with 23 additions and 24 deletions

View File

@ -89,7 +89,7 @@ a {
text-decoration: none;
color: var(--default-text-color);
i {
i, span {
color: var(--default-text-color);
}
@ -97,7 +97,7 @@ a {
text-decoration: none !important;
color: var(--primary-color);
i {
i, span {
color: var(--primary-color);
}
}
@ -140,7 +140,7 @@ button {
padding: 8px 16px;
background: var(--background-color);
hover-style(1.08, 1.08);
hover-style(true, 1.06, 1.06);
&:hover {
color: var(--background-color);

View File

@ -1,12 +1,12 @@
$keep-container-border-radius = 5px;
hover-style(scaleX, scaleY) {
hover-style(isTransform, scaleX, scaleY) {
box-shadow: 2px 2px 6px var(--shadow-color);
transition-t("transform", "0", "0.2", "linear");
&:hover {
if (hexo-config('style.hover.scale')) {
transform: scaleX(scaleX) scaleY(scaleY);
if (hexo-config('style.hover.scale') && isTransform) {
transform: scaleX(scaleX) scaleY(scaleX);
}
if (hexo-config('style.hover.shadow')) {
@ -16,7 +16,7 @@ hover-style(scaleX, scaleY) {
}
keep-container(scaleX, scaleY, padding, marginBottomValue) {
keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
padding: padding;
border-radius: $keep-container-border-radius;
box-sizing: border-box;
@ -35,13 +35,14 @@ keep-container(scaleX, scaleY, padding, marginBottomValue) {
}
hover-style(scaleX, scaleY);
hover-style(isTransform, scaleX, scaleY);
+keep-tablet() {
padding: padding * 0.8;
border-radius: $keep-container-border-radius * 0.8;
}
+keep-mobile() {
padding: padding * 0.6;
border-radius: $keep-container-border-radius * 0.6;

View File

@ -5,7 +5,7 @@ $friend-link-item-border-radius = 6px;
.empty-page-container {
keep-container(1.005, 1.01, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px);
.empty-page-content {
color: var(--default-text-color);
@ -63,7 +63,6 @@ $friend-link-item-border-radius = 6px;
&:hover {
box-shadow: 1px 1px 6px var(--shadow-color);
}
.radius {

View File

@ -12,8 +12,7 @@ $menu-bar-line-height = 2.5px;
background: var(--background-color);
padding-top: $scroll-progress-bar-height;
hover-style(1.02, 1.02);
hover-style(false, 0, 0);
.header-content {
position: relative;

View File

@ -31,13 +31,14 @@ $li-margin-bottom = 12px;
}
}
hover-style(1.1, 1.1);
&:last-child {
margin-bottom: 0;
}
hover-style(true, 1.06, 1.06);
&.page-aside-toggle {
display: none;

View File

@ -1,6 +1,6 @@
.tagcloud-container {
keep-container(1.005, 1.01, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px);
.tagcloud-content {

View File

@ -1,5 +1,5 @@
.archive-container {
keep-container(1.005, 1.01, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px);
}

View File

@ -5,7 +5,7 @@ $article-title-font-size = 1.6rem;
.article-content-container {
keep-container(1.008, 1.002, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px);
.article-title {
color: var(--second-text-color);
@ -116,7 +116,7 @@ $article-title-font-size = 1.6rem;
height: 100%;
box-sizing: border-box;
keep-container(1.08, 1.08, 10px, 0);
keep-container(true, 1.05, 1.05, 10px, 0);
a {
position: relative;
@ -175,7 +175,6 @@ $article-title-font-size = 1.6rem;
.post-nav-title-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

View File

@ -2,7 +2,7 @@ $category-name-font-size = 1.6rem;
.category-container {
keep-container(1.02, 1.02, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px);
.category-name {
color: var(--second-text-color);

View File

@ -1,13 +1,13 @@
.category-list-container {
keep-container(1.005, 1.01, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px);
.category-list-content {
.all-category-list {
li.all-category-list-item {
font-size: 1rem;
margin-bottom: 15px;
&:last-child {

View File

@ -7,7 +7,7 @@
.home-article-item {
position: relative;
keep-container(1.02, 1.02, 28px, 38px);
keep-container(true, 1.02, 1.02, 28px, 38px);
.top-icon {
position: absolute;

View File

@ -132,7 +132,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
box-sizing: border-box;
background: var(--background-color);
hover-style(1.02, 1.02);
hover-style(false, 0, 0);
transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear");

View File

@ -2,7 +2,7 @@ $tag-name-font-size = 1.6rem;
.tag-container {
keep-container(1.02, 1.02, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px);
.tag-name {
color: var(--second-text-color);