css: Add theme switcher scss sources.0.0.3

3 files changed, 73 insertions, 2 deletions

diff --git a/Makefile.am b/Makefile.am
index 13b9aea..763625f 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -76,7 +76,7 @@ AM_SCM_LOG_DRIVER_FLAGS = --brief=yes
 
 PICO_SCSS = $(wildcard assets/pico/scss/*.scss)
 
-assets/css/mumi.css: assets/mumi.scss $(PICO_SCSS)
+assets/css/mumi.css: assets/mumi.scss assets/_theme-switcher.scss $(PICO_SCSS)
 	$(SASSC) $< $@
 
 nobase_dist_assets_DATA = \
diff --git a/assets/_theme-switcher.scss b/assets/_theme-switcher.scss
new file mode 100644
index 0000000..bcc59d2
--- /dev/null
+++ b/assets/_theme-switcher.scss
@@ -0,0 +1,71 @@
+/**
+ * Docs: Theme switcher
+ */
+
+.switcher {
+  position: fixed;
+  right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));
+  bottom: var(--spacing);
+  width: auto;
+  margin-bottom: 0;
+  padding: 0.75rem;
+  border-radius: 2rem;
+  box-shadow: var(--card-box-shadow);
+  line-height: 1;
+  text-align: right;
+
+  &::after {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border: 0.15rem solid currentColor;
+    border-radius: 50%;
+    background: linear-gradient(
+      to right,
+      currentColor 0%,
+      currentColor 50%,
+      transparent 50%
+    );
+    content: "";
+    vertical-align: bottom;
+    transition: transform var(--transition);
+  }
+
+  i {
+    display: inline-block;
+    max-width: 0;
+    padding: 0;
+    overflow: hidden;
+    font-style: normal;
+    font-size: 0.875rem;
+    white-space: nowrap;
+  }
+
+  &:hover,
+  &:focus {
+    max-width: 100%;
+    transition: background-color var(--transition),
+      border-color var(--transition), color var(--transition),
+      box-shadow var(--transition);
+  }
+
+  &:hover {
+    &::after {
+      transform: rotate(180deg);
+    }
+
+    i {
+      max-width: 100%;
+      padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
+      transition: max-width var(--transition), padding var(--transition);
+    }
+  }
+
+  &:focus {
+    box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
+  }
+
+  @media (min-width: map-get($breakpoints, "sm")) {
+    right: calc(var(--spacing) + var(--scrollbar-width, 0px));
+  }
+}
diff --git a/assets/mumi.scss b/assets/mumi.scss
index 11bb706..963ebd8 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -7,7 +7,7 @@ $commit_header: #005cc5;
 
 // Import full Pico source code
 @import "pico/scss/pico";
-@import "pico/docs/scss/components/_theme-switcher.scss";
+@import "_theme-switcher.scss";
 
 :root {
     --spacing: .5em;