diff options
| author | Haishan <[email protected]> | 2019-11-17 17:31:59 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2019-11-17 17:31:59 +0800 |
| commit | c28ff93b67a3da5cbff0d2ffeddfc16fd1dd3438 (patch) | |
| tree | 0c3d6fd0964ffcb00078e4fda52ecd03e39b4dce /src/components/SideBar.module.css | |
| parent | 0df74757914123d55b2a627efc7bda62fc9fd458 (diff) | |
refactor: improve UI for small screens
Diffstat (limited to 'src/components/SideBar.module.css')
| -rw-r--r-- | src/components/SideBar.module.css | 17 |
1 files changed, 16 insertions, 1 deletions
diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css index 25726d3..167ca2f 100644 --- a/src/components/SideBar.module.css +++ b/src/components/SideBar.module.css @@ -52,7 +52,10 @@ display: flex; align-items: center; - padding: 8px 20px; + padding: 6px 16px; + @media (--breakpoint-not-small) { + padding: 8px 20px; + } @media (max-width: 768px) { flex-direction: column; @@ -60,6 +63,13 @@ svg { color: var(--color-icon); + width: 22px; + height: 22px; + + @media (--breakpoint-not-small) { + width: 24px; + height: 24px; + } } } @@ -74,10 +84,15 @@ .label { padding-left: 14px; + font-size: 0.75em; @media (max-width: 768px) { padding-left: 0; padding-top: 5px; } + + @media (--breakpoint-not-small) { + font-size: 1em; + } } .themeSwitchContainer { |