wip bsky client for the web & android
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(ui): prettier toggle switch

vi 51e33b22 f587b827

+43 -14
+43 -14
src/components/UI/ToggleSwitch.vue
··· 29 29 </div> 30 30 </template> 31 31 32 - <style scoped> 32 + <style scoped lang="scss"> 33 + @use '@/assets/variables' as *; 34 + 33 35 .toggle-wrapper { 34 36 display: flex; 35 37 align-items: center; 36 38 justify-content: space-between; 37 - gap: 1rem; 39 + gap: 0.75rem; 38 40 cursor: pointer; 39 41 } 40 42 ··· 44 46 } 45 47 46 48 .toggle-track { 47 - width: 3.25rem; 49 + display: inline-flex; 50 + width: 3rem; 48 51 height: 1.75rem; 49 52 background-color: hsl(var(--surface1)); 50 - border-radius: 99px; 53 + border-radius: 1rem; 51 54 border: none; 52 55 position: relative; 53 56 cursor: pointer; 54 57 flex-shrink: 0; 55 58 56 59 box-sizing: unset; 57 - border: 1px solid hsl(var(--surface2)); 60 + 61 + transition-timing-function: $ease-spring; 62 + transition-duration: 0.3s; 63 + outline-width: 4px; 64 + outline-offset: -1px; 65 + 66 + &:active, 67 + &:focus-visible { 68 + .toggle-thumb { 69 + transform: translateX(0.1rem); 70 + background-color: hsl(var(--base) / 0.8); 71 + } 72 + } 73 + 74 + &:focus-visible { 75 + outline-color: hsl(var(--accent)); 76 + outline-offset: -1px; 77 + } 58 78 59 79 &.is-checked { 60 - background-color: hsl(var(--accent)); 80 + background-color: hsla(var(--accent) / 0.8); 61 81 62 82 .toggle-thumb { 63 - transform: translateX(1.5rem); 83 + transform: translateX(1.25rem); 64 84 background-color: hsl(var(--base)); 65 85 } 66 - } 67 86 68 - &:focus-visible { 87 + &:active, 88 + &:focus-visible { 89 + .toggle-thumb { 90 + background-color: hsl(var(--base) / 0.8); 91 + transform: translateX(1.1rem); 92 + } 93 + } 69 94 } 70 95 } 71 96 72 97 .toggle-thumb { 73 98 position: absolute; 74 - top: 0.125rem; 75 - left: 0.125rem; 76 - width: 1.5rem; 77 - height: 1.5rem; 78 - background-color: hsl(var(--text)); 99 + top: 0.2rem; 100 + left: 0.2rem; 101 + width: 1.35rem; 102 + height: 1.35rem; 103 + background: hsl(var(--base)); 79 104 border-radius: 50%; 105 + box-shadow: 0 1px 3px hsla(var(--crust) / 0.2); 106 + 107 + transition-timing-function: $ease-spring; 108 + transition-duration: 0.3s; 80 109 } 81 110 </style>