Komorebi/Moku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding Transition

Browse Source
This commit is contained in:
MangoPig 2025-12-30 02:01:37 +00:00
parent 752f6eab9a
commit 76898c1fe3
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Frontend/src/routes/auth/login/login.module.scss
View File

@ -5,6 +5,7 @@
h1 { h1 {
@include text-largest; @include text-largest;
font-weight: 200;
margin-bottom: 2rem; margin-bottom: 2rem;
@include respond(tablet) { @include respond(tablet) {
@ -25,6 +26,8 @@
gap: 1.5rem; gap: 1.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@include base-transition;
@include respond(tablet) { @include respond(tablet) {
margin: 2rem; margin: 2rem;
} }
@ -75,6 +78,8 @@
} }
.federatedLogin { .federatedLogin {
@include base-transition;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
display: flex; display: flex;
@ -89,6 +94,7 @@
position: relative; position: relative;
&::after { &::after {
@include base-transition;
content: attr(data-label); content: attr(data-label);
position: absolute; position: absolute;
top: 0; top: 0;
@ -111,6 +117,7 @@
.federatedBtn { .federatedBtn {
@include button-base; @include button-base;
@include base-transition;
flex: 1; flex: 1;
background-color: var(--bg-1); background-color: var(--bg-1);

4
Frontend/src/styles/_mixins.scss
View File

@ -109,3 +109,7 @@ $desktop: 1440px;
padding: 10px 20px 10px 15px; padding: 10px 20px 10px 15px;
} }
} }
@mixin base-transition {
transition: all var(--transition-speed) var(--transition-ease);
}

16
Frontend/src/styles/theme.scss
View File

@ -4,12 +4,12 @@
--transition-speed: 0.5s; --transition-speed: 0.5s;
--transition-ease: ease-in-out; --transition-ease: ease-in-out;
--gray-50: hsl(40 25% 85%); --gray-50: hsl(40 25% 90%);
--gray-100: hsl(40 23% 80%); --gray-100: hsl(40 23% 87%);
--gray-200: hsl(40 20% 77%); --gray-200: hsl(40 20% 83%);
--gray-300: hsl(40 20% 70%); --gray-300: hsl(40 20% 77%);
--gray-400: hsl(40 10% 50%); --gray-400: hsl(40 10% 75%);
--gray-500: hsl(40 5% 40%); --gray-500: hsl(40 5% 60%);
--gray-600: hsl(40 5% 30%); --gray-600: hsl(40 5% 30%);
--gray-700: hsl(40 5% 25%); --gray-700: hsl(40 5% 25%);
--gray-800: hsl(40 5% 20%); --gray-800: hsl(40 5% 20%);
@ -64,8 +64,8 @@
[data-color-scheme="dark"] { [data-color-scheme="dark"] {
// Background and Text Colors // Background and Text Colors
--bg: var(--gray-900); --bg: var(--gray-900);
--text: var(--gray-50); --text: var(--gray-300);
--text-muted: var(--gray-400); --text-muted: var(--gray-500);
// Accent // Accent
--primary: var(--brown-700); --primary: var(--brown-700);