summaryrefslogtreecommitdiff
path: root/_sass/misc
diff options
context:
space:
mode:
Diffstat (limited to '_sass/misc')
-rw-r--r--_sass/misc/theme-toggle.scss79
1 files changed, 79 insertions, 0 deletions
diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss
new file mode 100644
index 0000000..492eb0c
--- /dev/null
+++ b/_sass/misc/theme-toggle.scss
@@ -0,0 +1,79 @@
+.theme-toggle {
+ position: relative;
+ width: 102px;
+ margin-top: 10px;
+ margin-right: 60px;
+ margin-left: auto;
+ transition: 0.1s all ease-in-out;
+
+ label, .toggle {
+ border-radius: 100px;
+ }
+
+ label {
+ display: block;
+ background-color: rgba(120,120,120,.15);
+ cursor: pointer;
+ }
+
+ .toggle {
+ position: absolute;
+ width: 50%;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: 0 2px 15px rgba(0,0,0,.15);
+ transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ }
+
+ .names {
+ font-size: 1em;
+ font-weight: bolder;
+ width: 76%;
+ margin-left: 12%;
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ user-select: none;
+ }
+
+ .dark {
+ opacity: .5;
+ }
+
+ p {
+ color: #acacac;
+ margin-bottom: 0;
+ line-height: 24px;
+ }
+
+ [type="checkbox"] {
+ display: none;
+ }
+
+ /* Toggle */
+ [type="checkbox"]:checked ~ label .toggle {
+ transform: translateX(100%);
+ background-color: #34323D;
+ }
+
+ [type="checkbox"]:checked ~ label .dark{
+ opacity: 1;
+ }
+
+ [type="checkbox"]:checked ~ label .light{
+ opacity: .5;
+ }
+
+ @include media-query(1024px) {
+ margin-right: 35px;
+ }
+
+ @include media-query($on-palm) {
+ width: 94px;
+ margin-right: 20px;
+
+ .names {
+ font-size: .85em;
+ }
+ }
+}