TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-12 02:54:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(login): improve and streamline identity provider styles (#5456)

Browse Source 
* fix: login idp styles

* rem dead code
This commit is contained in:
Max Peintner 2023-07-07 13:17:08 +02:00 committed by GitHub
parent 9fed1a7a5b
commit 699fc86d1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 118 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
internal/api/ui/login/static/resources/images/idp/ms.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 343 B

120
internal/api/ui/login/static/resources/themes/scss/styles/identity_provider/identity_provider_base.scss
View File

@ -1,68 +1,78 @@
$lgn-idp-margin: .5rem 0; $lgn-idp-margin: 0.5rem 0;
$lgn-idp-padding: 0 1px; $lgn-idp-padding: 0 1px;
$lgn-idp-provider-name-line-height: 36px; $lgn-idp-provider-name-line-height: 36px;
$lgn-idp-border-radius: .5rem; $lgn-idp-border-radius: 0.5rem;
$googlelogosource: '../../../images/idp/google';
$githublogosource: '../../../images/idp/github';
$gitlablogosource: '../../../images/idp/gitlab';
@mixin lgn-idp-base { @mixin lgn-idp-base {
display: block; display: block;
margin: $lgn-idp-margin; margin: $lgn-idp-margin;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
padding: $lgn-idp-padding; padding: $lgn-idp-padding;
border-radius: $lgn-idp-border-radius; border-radius: $lgn-idp-border-radius;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
transition: border-color 0.2s ease-in-out;
span.logo {
height: 46px;
width: 46px;
}
span.provider-name {
line-height: $lgn-idp-provider-name-line-height;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&.google {
span.logo { span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: var(--google-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
} }
}
span.provider-name { &.github {
line-height: $lgn-idp-provider-name-line-height; span.logo {
position: absolute; height: 46px;
left: 50%; width: 46px;
transform: translateX(-50%); background-image: var(--github-image-src);
} background-size: 25px;
background-position: center;
&.google { background-repeat: no-repeat;
span.logo { border-radius: 5px;
height: 46px;
width: 46px;
background-image: url($googlelogosource + '.png');
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
} }
}
&.github { &.gitlab {
span.logo { span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url($githublogosource + '.png'); background-image: var(--gitlab-image-src);
background-size: 25px; background-size: 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 5px; border-radius: 5px;
}
} }
}
&.gitlab { &.azure {
span.logo { span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url($gitlablogosource + '.png'); background-image: var(--azure-image-src);
background-size: 100%; background-size: 25px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 5px; border-radius: 5px;
}
} }
}
} }

19
internal/api/ui/login/static/resources/themes/scss/styles/identity_provider/identity_provider_theme.scss
View File

@ -10,26 +10,11 @@
color: var(--zitadel-color-text-500); color: var(--zitadel-color-text-500);
&:hover { &:hover {
@include lgn-idp-elevation(1); border-color: var(--zitadel-color-input-border-hover);
} }
&:not([disabled]):active { &:not([disabled]):active {
@include lgn-idp-elevation(2); border-color: var(--zitadel-color-input-border-active);
}
&.google {
color: var(--zitadel-color-google-text);
background-color: var(--zitadel-color-google-background);
}
&.github {
color: var(--zitadel-color-github-text);
background-color: var(--zitadel-color-github-background);
}
&.gitlab {
color: var(--zitadel-color-gitlab-text);
background-color: var(--zitadel-color-gitlab-background);
} }
} }

10
internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
View File

@ -120,6 +120,11 @@
--zitadel-color-qr: var(--zitadel-color-black); --zitadel-color-qr: var(--zitadel-color-black);
--zitadel-color-qr-background: var(--zitadel-color-white); --zitadel-color-qr-background: var(--zitadel-color-white);
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
} }
.lgn-dark-theme { .lgn-dark-theme {
@ -222,4 +227,9 @@
--zitadel-color-github-background: #ffffff; --zitadel-color-github-background: #ffffff;
--zitadel-color-gitlab-text: #8b8d8d; --zitadel-color-gitlab-text: #8b8d8d;
--zitadel-color-gitlab-background: #ffffff; --zitadel-color-gitlab-background: #ffffff;
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github-white.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
} }

56
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
View File

@ -104,6 +104,10 @@
--zitadel-color-gitlab-background: #ffffff; --zitadel-color-gitlab-background: #ffffff;
--zitadel-color-qr: var(--zitadel-color-black); --zitadel-color-qr: var(--zitadel-color-black);
--zitadel-color-qr-background: var(--zitadel-color-white); --zitadel-color-qr-background: var(--zitadel-color-white);
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
} }
.lgn-dark-theme { .lgn-dark-theme {
@ -192,6 +196,10 @@
--zitadel-color-github-background: #ffffff; --zitadel-color-github-background: #ffffff;
--zitadel-color-gitlab-text: #8b8d8d; --zitadel-color-gitlab-text: #8b8d8d;
--zitadel-color-gitlab-background: #ffffff; --zitadel-color-gitlab-background: #ffffff;
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github-white.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
} }
body { body {
@ -547,6 +555,7 @@ a.sub-formfield-link {
border-radius: 0.5rem; border-radius: 0.5rem;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
transition: border-color 0.2s ease-in-out;
} }
.lgn-idp span.logo { .lgn-idp span.logo {
height: 46px; height: 46px;
@ -561,7 +570,7 @@ a.sub-formfield-link {
.lgn-idp.google span.logo { .lgn-idp.google span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url("../../../images/idp/google.png"); background-image: var(--google-image-src);
background-size: 25px; background-size: 25px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -570,7 +579,7 @@ a.sub-formfield-link {
.lgn-idp.github span.logo { .lgn-idp.github span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url("../../../images/idp/github.png"); background-image: var(--github-image-src);
background-size: 25px; background-size: 25px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -579,12 +588,21 @@ a.sub-formfield-link {
.lgn-idp.gitlab span.logo { .lgn-idp.gitlab span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url("../../../images/idp/gitlab.png"); background-image: var(--gitlab-image-src);
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 5px; border-radius: 5px;
} }
.lgn-idp.azure span.logo {
height: 46px;
width: 46px;
background-image: var(--azure-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
.lgn-error { .lgn-error {
display: flex; display: flex;
@ -1540,6 +1558,7 @@ a.sub-formfield-link {
border-radius: 0.5rem; border-radius: 0.5rem;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
transition: border-color 0.2s ease-in-out;
} }
.lgn-idp span.logo { .lgn-idp span.logo {
height: 46px; height: 46px;
@ -1554,7 +1573,7 @@ a.sub-formfield-link {
.lgn-idp.google span.logo { .lgn-idp.google span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url("../../../images/idp/google.png"); background-image: var(--google-image-src);
background-size: 25px; background-size: 25px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1563,7 +1582,7 @@ a.sub-formfield-link {
.lgn-idp.github span.logo { .lgn-idp.github span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url("../../../images/idp/github.png"); background-image: var(--github-image-src);
background-size: 25px; background-size: 25px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1572,12 +1591,21 @@ a.sub-formfield-link {
.lgn-idp.gitlab span.logo { .lgn-idp.gitlab span.logo {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-image: url("../../../images/idp/gitlab.png"); background-image: var(--gitlab-image-src);
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 5px; border-radius: 5px;
} }
.lgn-idp.azure span.logo {
height: 46px;
width: 46px;
background-image: var(--azure-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
.lgn-error { .lgn-error {
display: flex; display: flex;
@ -3082,22 +3110,10 @@ ul li i.lgn-valid {
color: var(--zitadel-color-text-500); color: var(--zitadel-color-text-500);
} }
.lgn-idp:hover { .lgn-idp:hover {
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); border-color: var(--zitadel-color-input-border-hover);
} }
.lgn-idp:not([disabled]):active { .lgn-idp:not([disabled]):active {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); border-color: var(--zitadel-color-input-border-active);
}
.lgn-idp.google {
color: var(--zitadel-color-google-text);
background-color: var(--zitadel-color-google-background);
}
.lgn-idp.github {
color: var(--zitadel-color-github-text);
background-color: var(--zitadel-color-github-background);
}
.lgn-idp.gitlab {
color: var(--zitadel-color-gitlab-text);
background-color: var(--zitadel-color-gitlab-background);
} }
.lgn-idp-providers .lgn-idp-desc { .lgn-idp-providers .lgn-idp-desc {

2
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
View File

File diff suppressed because one or more lines are too long

5
internal/domain/idp.go
View File

@ -48,12 +48,13 @@ func (t IDPType) GetCSSClass() string {
case IDPTypeGitLab, case IDPTypeGitLab,
IDPTypeGitLabSelfHosted: IDPTypeGitLabSelfHosted:
return "gitlab" return "gitlab"
case IDPTypeAzureAD:
return "azure"
case IDPTypeUnspecified, case IDPTypeUnspecified,
IDPTypeOIDC, IDPTypeOIDC,
IDPTypeJWT, IDPTypeJWT,
IDPTypeOAuth, IDPTypeOAuth,
IDPTypeLDAP, IDPTypeLDAP:
IDPTypeAzureAD:
fallthrough fallthrough
default: default:
return "" return ""