diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/_theme-switcher.scss | 71 | ||||
-rw-r--r-- | assets/mumi.scss | 2 |
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; |