PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

refactor(scss): replace `#{$var}` with `$var` 

This change stops forward compatibility with `jekyll-sass-converter-2.x`
This commit is contained in:
Cotes Chung 2023-09-22 03:27:20 +08:00
parent ca39e15a78
commit 8417927264
No known key found for this signature in database
GPG Key ID: 0D9E54843167A808
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
_sass/addon/commons.scss
View File

@ -693,7 +693,6 @@ mjx-container {
/* --- sidebar layout --- */ /* --- sidebar layout --- */
$sidebar-display: 'sidebar-display'; $sidebar-display: 'sidebar-display';
$btn-gap: 0.8rem; // for the bottom icons
$btn-border-width: 3px; $btn-border-width: 3px;
$btn-mb: 0.5rem; $btn-mb: 0.5rem;
@ -862,7 +861,7 @@ $btn-mb: 0.5rem;
@extend %clickable-transition; @extend %clickable-transition;
&:not(:last-child) { &:not(:last-child) {
margin-right: $btn-gap; margin-right: $sb-btn-gap;
} }
} }
@ -881,7 +880,7 @@ $btn-mb: 0.5rem;
.icon-border { .icon-border {
@extend %no-cursor; @extend %no-cursor;
@include ml-mr(calc(($btn-gap - $btn-border-width) / 2)); @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
background-color: var(--sidebar-btn-color); background-color: var(--sidebar-btn-color);
content: ''; content: '';
@ -1301,7 +1300,7 @@ search {
} }
#main-wrapper { #main-wrapper {
transform: translateX(#{$sidebar-width}); transform: translateX($sidebar-width);
} }
#back-to-top { #back-to-top {
@ -1312,8 +1311,8 @@ search {
#sidebar { #sidebar {
@include slide; @include slide;
transform: translateX(-#{$sidebar-width}); /* hide */ transform: translateX(-$sidebar-width); /* hide */
-webkit-transform: translateX(-#{$sidebar-width}); -webkit-transform: translateX(-$sidebar-width);
} }
#main-wrapper { #main-wrapper {
@ -1488,7 +1487,7 @@ search {
@media all and (min-width: 1400px) { @media all and (min-width: 1400px) {
#back-to-top { #back-to-top {
right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem); right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
} }
} }
@ -1505,7 +1504,7 @@ search {
search { search {
margin-right: calc( margin-right: calc(
#{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem $main-content-max-width / 4 - $search-max-width - 0.75rem
); );
} }
@ -1522,15 +1521,13 @@ search {
#back-to-top { #back-to-top {
right: calc( right: calc(
(100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
); );
} }
#sidebar { #sidebar {
width: $sidebar-width-large; width: $sidebar-width-large;
$icon-gap: 1rem; // for the bottom icons
.profile-wrapper { .profile-wrapper {
margin-top: 3.5rem; margin-top: 3.5rem;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@ -1548,11 +1545,11 @@ search {
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
a:not(:last-child) { a:not(:last-child) {
margin-right: $icon-gap; margin-right: $sb-btn-gap-lg;
} }
.icon-border { .icon-border {
@include ml-mr(calc(($icon-gap - $btn-border-width) / 2)); @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
} }
} }
} }

2
_sass/addon/variables.scss
View File

@ -6,6 +6,8 @@
$sidebar-width: 260px !default; /* the basic width */ $sidebar-width: 260px !default; /* the basic width */
$sidebar-width-large: 300px !default; /* screen width: >= 1650px */ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
$sb-btn-gap: 0.8rem !default;
$sb-btn-gap-lg: 1rem !default;
/* other framework sizes */ /* other framework sizes */