Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

refactor(console, experience): solve sass deprecations (#6356)

Browse source
This commit is contained in:
Gao Sun 2024-07-29 10:03:50 +08:00 • committed by GitHub
parent 05bd16272f
commit 1b67934b1d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 36 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/console/src/components/CreateConnectorForm/Skeleton/index.module.scss
View file

@ -7,23 +7,23 @@
} }
.logo { .logo {
@include _.shimmering-animation;
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 8px; border-radius: 8px;
@include _.shimmering-animation;
} }
.name { .name {
@include _.shimmering-animation;
width: 50px; width: 50px;
height: 16px; height: 16px;
margin-bottom: _.unit(1); margin-bottom: _.unit(1);
@include _.shimmering-animation;
} }
.description { .description {
@include _.shimmering-animation;
height: 14px; height: 14px;
margin-bottom: _.unit(0.5); margin-bottom: _.unit(0.5);
@include _.shimmering-animation;
&.shortDescription { &.shortDescription {
width: 50%; width: 50%;

8
packages/console/src/components/DetailsPage/Skeleton/index.module.scss
View file

@ -18,11 +18,11 @@
background-color: var(--color-layer-1); background-color: var(--color-layer-1);
.icon { .icon {
@include _.shimmering-animation;
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 12px; border-radius: 12px;
margin-right: _.unit(6); margin-right: _.unit(6);
@include _.shimmering-animation;
} }
.wrapper { .wrapper {
@ -30,23 +30,23 @@
flex-direction: column; flex-direction: column;
.title { .title {
@include _.shimmering-animation;
width: 113px; width: 113px;
height: 28px; height: 28px;
@include _.shimmering-animation;
} }
.tags { .tags {
@include _.shimmering-animation;
width: 453px; width: 453px;
height: 20px; height: 20px;
margin-top: _.unit(3); margin-top: _.unit(3);
@include _.shimmering-animation;
} }
} }
.button { .button {
@include _.shimmering-animation;
width: 158px; width: 158px;
height: 44px; height: 44px;
@include _.shimmering-animation;
} }
} }

4
packages/console/src/components/FormCard/Skeleton/index.module.scss
View file

@ -1,15 +1,15 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.title { .title {
@include _.shimmering-animation;
height: 16px; height: 16px;
width: 80px; width: 80px;
@include _.shimmering-animation;
} }
.text { .text {
@include _.shimmering-animation;
width: 100%; width: 100%;
height: 10px; height: 10px;
@include _.shimmering-animation;
} }
.text + .text { .text + .text {

6
packages/console/src/components/Guide/StepsSkeleton/index.module.scss
View file

@ -11,11 +11,11 @@
margin: 0 auto; margin: 0 auto;
.index { .index {
@include _.shimmering-animation;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
margin-right: _.unit(4); margin-right: _.unit(4);
@include _.shimmering-animation;
} }
.wrapper { .wrapper {
@ -24,16 +24,16 @@
flex-direction: column; flex-direction: column;
.title { .title {
@include _.shimmering-animation;
width: 140px; width: 140px;
height: 24px; height: 24px;
@include _.shimmering-animation;
} }
.subtitle { .subtitle {
@include _.shimmering-animation;
width: 400px; width: 400px;
height: 20px; height: 20px;
margin-top: _.unit(1); margin-top: _.unit(1);
@include _.shimmering-animation;
} }
} }
} }

4
packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
View file

@ -8,17 +8,17 @@
border-radius: 8px; border-radius: 8px;
.image { .image {
@include _.shimmering-animation;
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-right: _.unit(2); margin-right: _.unit(2);
border-radius: 6px; border-radius: 6px;
@include _.shimmering-animation;
} }
.name { .name {
@include _.shimmering-animation;
width: 85px; width: 85px;
height: 20px; height: 20px;
color: var(--color-text); color: var(--color-text);
@include _.shimmering-animation;
} }
} }

2
packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss
View file

@ -8,7 +8,7 @@
} }
.skeleton { .skeleton {
@include _.shimmering-animation;
width: 248px; width: 248px;
height: 100%; height: 100%;
@include _.shimmering-animation;
} }

2
packages/console/src/ds-components/FormField/Skeleton.module.scss
View file

@ -1,9 +1,9 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.field { .field {
@include _.shimmering-animation;
width: 100%; width: 100%;
height: 44px; height: 44px;
@include _.shimmering-animation;
} }
.field + .field { .field + .field {

8
packages/console/src/ds-components/Table/Skeleton/index.module.scss
View file

@ -1,9 +1,9 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.rect { .rect {
@include _.shimmering-animation;
height: 26px; height: 26px;
max-width: 344px; max-width: 344px;
@include _.shimmering-animation;
} }
.row { .row {
@ -12,26 +12,26 @@
align-items: center; align-items: center;
.avatar { .avatar {
@include _.shimmering-animation;
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: _.unit(4); margin-right: _.unit(4);
border-radius: 12px; border-radius: 12px;
flex-shrink: 0; flex-shrink: 0;
@include _.shimmering-animation;
} }
.content { .content {
width: 100%; width: 100%;
.title { .title {
@include _.shimmering-animation;
height: 12px; height: 12px;
@include _.shimmering-animation;
} }
.subTitle { .subTitle {
@include _.shimmering-animation;
height: 8px; height: 8px;
margin-top: _.unit(2); margin-top: _.unit(2);
@include _.shimmering-animation;
} }
} }
} }

4
packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss
View file

@ -8,15 +8,15 @@
} }
.title { .title {
@include _.shimmering-animation;
width: 80px; width: 80px;
height: 16px; height: 16px;
@include _.shimmering-animation;
} }
.field { .field {
@include _.shimmering-animation;
width: 100%; width: 100%;
height: 44px; height: 44px;
@include _.shimmering-animation;
} }
&:not(:first-child) { &:not(:first-child) {

2
packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss
View file

@ -115,8 +115,8 @@
border: 1px solid var(--color-divider); border: 1px solid var(--color-divider);
.bone { .bone {
@include _.shimmering-animation;
border-radius: 8px; border-radius: 8px;
@include _.shimmering-animation;
} }
.title { .title {

5
packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss
View file

@ -21,9 +21,9 @@
} }
.blockShimmer { .blockShimmer {
@include _.shimmering-animation;
border-radius: 8px; border-radius: 8px;
flex: 1; flex: 1;
@include _.shimmering-animation;
} }
.card:not(:last-child) { .card:not(:last-child) {
@ -32,10 +32,10 @@
.textShimmer { .textShimmer {
@include _.shimmering-animation;
width: 100%; width: 100%;
height: _.unit(6); height: _.unit(6);
border-radius: 8px; border-radius: 8px;
@include _.shimmering-animation;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
@ -49,4 +49,3 @@
height: _.unit(8); height: _.unit(8);
} }
} }

6
packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss
View file

@ -1,14 +1,14 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.title { .title {
@include _.shimmering-animation;
height: 24px; height: 24px;
margin-bottom: _.unit(6); margin-bottom: _.unit(6);
@include _.shimmering-animation;
} }
.number { .number {
@include _.shimmering-animation;
height: 32px; height: 32px;
@include _.shimmering-animation;
} }
.blocks { .blocks {
@ -30,9 +30,9 @@
} }
.curve { .curve {
@include _.shimmering-animation;
margin: _.unit(10) 0 _.unit(6); margin: _.unit(10) 0 _.unit(6);
height: 168px; height: 168px;
@include _.shimmering-animation;
} }
.activeBlocks { .activeBlocks {

2
packages/console/src/pages/GetStarted/ProtectedAppCreationForm/index.module.scss
View file

@ -71,8 +71,8 @@
border: 1px solid var(--color-divider); border: 1px solid var(--color-divider);
.bone { .bone {
@include _.shimmering-animation;
border-radius: 8px; border-radius: 8px;
@include _.shimmering-animation;
} }
.columnWrapper { .columnWrapper {

6
packages/console/src/pages/Profile/components/Skeleton/index.module.scss
View file

@ -30,25 +30,25 @@
} }
.title { .title {
@include _.shimmering-animation;
width: 200px; width: 200px;
height: 20px; height: 20px;
@include _.shimmering-animation;
} }
.card { .card {
flex-grow: 1; flex-grow: 1;
.label { .label {
@include _.shimmering-animation;
width: 250px; width: 250px;
height: 16px; height: 16px;
margin-bottom: _.unit(2); margin-bottom: _.unit(2);
@include _.shimmering-animation;
} }
.item { .item {
@include _.shimmering-animation;
width: 350px; width: 350px;
height: 20px; height: 20px;
@include _.shimmering-animation;
} }
.table { .table {

4
packages/console/src/pages/SignInExperience/Skeleton/index.module.scss
View file

@ -18,15 +18,15 @@
} }
.title { .title {
@include _.shimmering-animation;
width: 80px; width: 80px;
height: 16px; height: 16px;
@include _.shimmering-animation;
} }
.field { .field {
@include _.shimmering-animation;
width: 100%; width: 100%;
height: 44px; height: 44px;
@include _.shimmering-animation;
} }
&:not(:first-child) { &:not(:first-child) {

2
packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.module.scss
View file

@ -32,7 +32,7 @@
} }
.bone { .bone {
@include _.shimmering-animation;
height: 26px; height: 26px;
max-width: 344px; max-width: 344px;
@include _.shimmering-animation;
} }

2
packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss
View file

@ -4,6 +4,7 @@
border-radius: _.unit(2); border-radius: _.unit(2);
padding: _.unit(2.5) _.unit(2); padding: _.unit(2.5) _.unit(2);
cursor: pointer; cursor: pointer;
@include _.flex-row;
.icon { .icon {
width: 20px; width: 20px;
@ -28,5 +29,4 @@
color: var(--color-brand-default); color: var(--color-brand-default);
} }
} }
@include _.flex-row;
} }