summaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/_theme-switcher.scss71
-rw-r--r--assets/mumi.scss2
2 files changed, 72 insertions, 1 deletions
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;