Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

style(ui): container style adjustment (#814)

Browse source 
* style(ui): container style adjustment

container style adjustment

* fix(ui): cr fix

cr fix
This commit is contained in:
simeng-li 2022-05-15 10:37:12 +08:00 committed by GitHub
parent f30994ef5c
commit 4e2e8990bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 78 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@
top: 50%;
transform: translateY(-50%);
color: --color-text;
font: var(--font-caption);
font: var(--font-body-bold);
@include _.flex-row;
cursor: pointer;
}

13
packages/ui/src/containers/PasscodeValidation/index.module.scss
View file

@ -21,10 +21,21 @@
.message {
font: var(--font-caption);
color: var(--color-text);
> span {
color: var(--color-primary);
}
}
}
:global(body.mobile) {
.message {
color: var(--color-text);
}
}
:global(body.desktop) {
.message {
color: var(--color-caption);
}
}

48
packages/ui/src/containers/SignInMethodsLink/index.module.scss
View file

@ -1,6 +1,20 @@
@use '@/scss/underscore' as _;
@mixin link-split {
&::after {
content: '';
width: 1px;
height: 12px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: var(--color-primary);
opacity: 60%;
}
}
.textLink {
text-align: center;
@ -17,16 +31,7 @@
padding: 0 _.unit(4);
position: relative;
&::after {
content: '';
width: 1px;
height: 12px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: var(--color-primary);
}
@include link-split;
&:first-child {
padding-left: 0;
@ -41,3 +46,26 @@
}
}
}
:global(body.desktop) {
.methodsLinkList {
.signInMethodLink {
padding: 0 _.unit(5);
position: relative;
@include link-split;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
&::after {
content: none;
}
}
}
}
}

13
packages/ui/src/containers/SocialCreateAccount/index.module.scss
View file

@ -11,7 +11,6 @@
.desc {
@include _.text-hint;
margin-bottom: _.unit(2);
text-align: left;
&:not(:first-child) {
@ -19,3 +18,15 @@
}
}
:global(body.mobile) {
.desc {
margin-bottom: _.unit(2);
}
}
:global(body.desktop) {
.desc {
margin-bottom: _.unit(4);
}
}

5
packages/ui/src/pages/ErrorPage/index.module.scss
View file

@ -10,8 +10,13 @@
@include _.full-width;
}
.title {
text-align: center;
}
.message {
@include _.text-hint;
text-align: center;
}
}

18
packages/ui/src/scss/_desktop.scss
View file

@ -12,10 +12,12 @@ $font-family: -apple-system,
@mixin colors-light-theme {
--color-surface: #ecebf6;
--color-base: #fff;
// legacy bellow
--color-text: #191c1d;
--color-icon: #747778;
--color-caption: #747778;
--color-icon: #747778;
// legacy bellow
--color-outline: #78767f;
--color-border: #e0e3e3;
--color-disabled: #c4c7c7;
@ -30,10 +32,11 @@ $font-family: -apple-system,
@mixin colors-dark-theme {
--color-surface: #25272b;
--color-base: #2a2c32;
// legacy bellow
--color-text: #f7f8f8;
--color-icon: #a9acac;
--color-caption: #a9acac;
--color-icon: #a9acac;
// legacy bellow
--color-outline: #928f9a;
--color-border: #444748;
--color-disabled: #5c5f60;
@ -54,10 +57,9 @@ $font-family: -apple-system,
--font-title: 600 32px/40px #{$font-family};
--font-title-medium: 600 28px/36px #{$font-family};
--font-title-small: 600 24px/32px #{$font-family};
--font-body-bold: 500 16px/20px #{$font-family};
--font-body: 400 16px/20px #{$font-family};
--font-body-small: 500 14px/18px #{$font-family};
--font-caption: 500 14px/20px #{$font-family};
--font-body-bold: 500 14px/20px #{$font-family};
--font-body: 400 14px/20px #{$font-family};
--font-caption: 400 14px/20px #{$font-family};
}
@mixin layout {

1
packages/ui/src/scss/_mobile.scss
View file

@ -52,7 +52,6 @@ $font-family: -apple-system,
--font-title: 600 32px/40px #{$font-family};
--font-body-bold: 500 16px/20px #{$font-family};
--font-body: 400 16px/20px #{$font-family};
--font-body-small: 500 14px/18px #{$font-family};
--font-caption: 400 14px/18px #{$font-family};
}