Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

Merge pull request #2375 from logto-io/simeng-log-4528-web-notification-shadow-style-iteration

Browse source 
style(ui): update notification style
This commit is contained in:
simeng-li 2022-11-10 13:58:40 +08:00 committed by GitHub
commit 37d070e9ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/ui/src/components/Notification/index.module.scss
View file

@ -22,7 +22,7 @@
} }
&.info { &.info {
background: var(--color-neutral-variant-80); background: var(--color-neutral-variant-90);
.icon { .icon {
color: var(--color-neutral-variant-60); color: var(--color-neutral-variant-60);
@ -42,5 +42,14 @@
:global(body.desktop) { :global(body.desktop) {
.notification { .notification {
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--color-shadow-1);
&.alert {
border: _.border(var(--color-alert-70));
}
&.info {
border: _.border(var(--color-neutral-variant-80));
}
} }
} }

2
packages/ui/src/components/Toast/index.module.scss
View file

@ -44,6 +44,6 @@
:global(body.desktop) { :global(body.desktop) {
.toast { .toast {
padding: _.unit(3) _.unit(4); padding: _.unit(3) _.unit(4);
box-shadow: var(--color-shadow); box-shadow: var(--color-shadow-2);
} }
} }

2
packages/ui/src/containers/AppContent/index.module.scss
View file

@ -83,6 +83,6 @@ body {
padding: _.unit(6); padding: _.unit(6);
border-radius: 16px; border-radius: 16px;
background: var(--color-bg-float); background: var(--color-bg-float);
box-shadow: var(--color-shadow); box-shadow: var(--color-shadow-2);
} }
} }

6
packages/ui/src/scss/_colors.scss
View file

@ -6,7 +6,8 @@
--color-static-white: #fff; --color-static-white: #fff;
--color-static-black: #000; --color-static-black: #000;
--color-static-dark-type-primary: #f7f8f8; // For loading icon use --color-static-dark-type-primary: #f7f8f8; // For loading icon use
--color-shadow: 0 4px 8px rgba(0, 0, 0, 2%); --color-shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
--color-shadow-2: 0 4px 8px rgba(0, 0, 0, 2%);
} }
@mixin light { @mixin light {
@ -21,7 +22,8 @@
--color-neutral-100: #fff; --color-neutral-100: #fff;
--color-neutral-variant-60: #928f9a; --color-neutral-variant-60: #928f9a;
--color-neutral-variant-80: #e5e1ec; --color-neutral-variant-80: #c9c5d0;
--color-neutral-variant-90: #e5e1ec;
--color-danger-30: #930006; --color-danger-30: #930006;
--color-danger-40: #ba1b1b; --color-danger-40: #ba1b1b;