asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Change mode-toggle icon

Browse source
This commit is contained in:
Cotes Chung 2020-12-05 01:40:01 +08:00
parent 1172f1646d
commit 13aca77275
2 changed files with 12 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
_includes/mode-toggle.html
View file

@ -7,8 +7,7 @@
MIT License MIT License
--> -->
<i class="mode-toggle fas fa-sun" dark-mode-invisible></i> <i class="mode-toggle fas fa-adjust"></i>
<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
<script type="text/javascript"> <script type="text/javascript">

23
assets/css/_addon/main.scss
View file

@ -12,23 +12,18 @@
@import "_colors/light-typography"; @import "_colors/light-typography";
@import "_colors/dark-typography"; @import "_colors/dark-typography";
@mixin set-visible($light-display, $dark-display) {
[light-mode-invisible] {
display: $light-display;
}
[dark-mode-invisible] {
display: $dark-display;
}
}
@mixin mode-toggle($dark-mode: false) { @mixin mode-toggle($dark-mode: false) {
@if $dark-mode { @if $dark-mode {
@include set-visible(inline-block, none);
@include dark-scheme; @include dark-scheme;
.mode-toggle {
transform: rotate(180deg);
}
} @else { } @else {
@include set-visible(none, inline-block);
@include light-scheme; @include light-scheme;
.mode-toggle {
transform: rotate(360deg);
}
} }
} }
@ -191,12 +186,16 @@ $sidebar-display: "sidebar-display";
#mode-toggle-wrapper { #mode-toggle-wrapper {
i { i {
@include sidebar-links; @include sidebar-links;
margin-right: 0; margin: 0;
font-size: 1.05rem; font-size: 1.05rem;
text-align: center; text-align: center;
position: relative; position: relative;
bottom: 1px; bottom: 1px;
} }
.mode-toggle {
transition: all .5s !important;
}
} }
.icon-border { .icon-border {