mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-07 23:42:04 +00:00
feat(login): new palette based styles (#1149)
* chore(deps-dev): bump rollup from 2.33.2 to 2.34.0 in /site (#1040) Bumps [rollup](https://github.com/rollup/rollup) from 2.33.2 to 2.34.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.33.2...v2.34.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump svelte-i18n from 3.2.5 to 3.3.0 in /site (#1039) Bumps [svelte-i18n](https://github.com/kaisermann/svelte-i18n) from 3.2.5 to 3.3.0. - [Release notes](https://github.com/kaisermann/svelte-i18n/releases) - [Changelog](https://github.com/kaisermann/svelte-i18n/blob/main/CHANGELOG.md) - [Commits](https://github.com/kaisermann/svelte-i18n/compare/v3.2.5...v3.3.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-url from 5.0.1 to 6.0.0 in /site (#1038) Bumps [@rollup/plugin-url](https://github.com/rollup/plugins) from 5.0.1 to 6.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/url-v5.0.1...url-v6.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump svelte from 3.29.7 to 3.30.1 in /site (#1037) Bumps [svelte](https://github.com/sveltejs/svelte) from 3.29.7 to 3.30.1. - [Release notes](https://github.com/sveltejs/svelte/releases) - [Changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) - [Commits](https://github.com/sveltejs/svelte/compare/v3.29.7...v3.30.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump marked from 1.2.4 to 1.2.5 in /site (#1036) Bumps [marked](https://github.com/markedjs/marked) from 1.2.4 to 1.2.5. - [Release notes](https://github.com/markedjs/marked/releases) - [Changelog](https://github.com/markedjs/marked/blob/master/release.config.js) - [Commits](https://github.com/markedjs/marked/compare/v1.2.4...v1.2.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/core from 7.12.3 to 7.12.9 in /site (#1035) Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.12.3 to 7.12.9. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.9/packages/babel-core) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump rollup-plugin-svelte from 6.1.1 to 7.0.0 in /site (#1034) Bumps [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) from 6.1.1 to 7.0.0. - [Release notes](https://github.com/sveltejs/rollup-plugin-svelte/releases) - [Changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) - [Commits](https://github.com/sveltejs/rollup-plugin-svelte/compare/v6.1.1...v7.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-commonjs in /site (#1033) Bumps [@rollup/plugin-commonjs](https://github.com/rollup/plugins) from 15.1.0 to 17.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/commonjs-v15.1.0...commonjs-v17.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-node-resolve in /site (#1032) Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins) from 10.0.0 to 11.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/node-resolve-v10.0.0...commonjs-v11.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/preset-env from 7.12.1 to 7.12.7 in /site (#1031) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.12.1 to 7.12.7. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.7/packages/babel-preset-env) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * go * bundle files, lgn-color, legacy theme * remove old references * light dark context, button styles, zitadel brand * button theme, edit templates * typography theme mixins * input styles, container, extend light dark palette * footer, palette, container * container, label, assets, header * action container, input, typography label, adapt button theme * a and footer styles, adapt palette * user log profile, resourcetempurl * postinstall againnn * wrochage * rm local grpc * button elevation, helper for components * radio * radio button mixins, bundle * qr code styles, secret clipboard, icon pack * stroked buttons, icon buttons, header action, typography * fix password policy styles * account selection * account selection, lgn avatar * mocks * template fixes, animations scss * checkbox, register temp * checkbox appr * fix checkbox, remove input interference * select theme * avatar script, user selection, password policy validation fix * fix formfield state for register and change pwd * footer, main style, qr code fix, mfa type fix, account sel, checkbox * fotter tos, user select * reverse buttons for intial submit action * theme script, themed error messages, header img source * content wrapper, i18n, mobile * emptyline * idp mixins, fix unstyled html * register container * register layout, list themes, policy theme, register org * massive asset cleanup * fix source path, add missing icon, fix complexity refs, prefix * remove material icons, unused assets, fix icon font * move icon pack * avatar, contrast theme, error fix * zitadel css map * revert go mod * fix mfa verify actions * add idp styles * fix google colors, idp styles * fix: bugs * fix register options, google * fix script, mobile layout * precompile font selection * go mod tidy * assets and cleanup * input suffix, fix alignment, actions, add progress bar themes * progress bar mixins, layout fixes * remove test from loginname * cleanup comments, scripts * clear comments * fix external back button * fix mfa alignment * fix actions layout, on dom change listener for suffix * free tier change, success label * fix: button font line-height * remove tabindex * remove comment * remove comment * Update internal/ui/login/handler/password_handler.go Co-authored-by: Livio Amstutz <livio.a@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Maximilian Peintner <csaq7175@uibk.ac.at> Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner
@@ -1,513 +0,0 @@
|
||||
@font-face {
|
||||
font-family: Aileron;
|
||||
src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../../../fonts/material/MaterialIcons-Regular.eot);
|
||||
/* For IE6-8 */
|
||||
src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
font-family: Lato;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 0 100px 0;
|
||||
}
|
||||
body.waiting * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
font-weight: 300;
|
||||
background-color: #282828;
|
||||
color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-family: Aileron;
|
||||
font-weight: 300;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
font-family: Aileron;
|
||||
font-weight: 300;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 8px;
|
||||
}
|
||||
header .logo {
|
||||
background-image: url("../logo-dark.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 80px;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content form {
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #760038;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
a:hover {
|
||||
color: #f60075;
|
||||
}
|
||||
a.tos-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background-color: #282828;
|
||||
color: #760038;
|
||||
border: 1px solid #760038;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
button:hover, .button:hover {
|
||||
background-color: #f60075;
|
||||
color: #282828;
|
||||
border: 1px solid #f60075;
|
||||
}
|
||||
button.primary, .button.primary {
|
||||
background-color: #760038;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
button.primary:hover, .button.primary:hover {
|
||||
background-color: #f60075;
|
||||
}
|
||||
button:disabled, .button:disabled {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button:disabled:hover, .button:disabled:hover {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button.google, .button.google {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 1px;
|
||||
color: #FFFFFF;
|
||||
background-color: #4285F4;
|
||||
}
|
||||
button.google span.logo, .button.google span.logo {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-color: #FFFFFF;
|
||||
background-image: url("../../../images/idp/google.png");
|
||||
background-size: 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button.google span.provider-name, .button.google span.provider-name {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
input:not([type=radio]), select {
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
height: 50px;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 5px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("../../../images/icon-user-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-profile .profile-image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.login-profile .names {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.login-profile .names div:first-of-type {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.login-profile .names div:nth-of-type(2) {
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
form .field {
|
||||
display: grid;
|
||||
padding: 10px 0;
|
||||
}
|
||||
form .field.radio-button {
|
||||
display: flex;
|
||||
}
|
||||
form .field.radio-button input[type=radio] {
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.radio-button label {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
padding: 3px 0 0 15px;
|
||||
width: 100%;
|
||||
}
|
||||
form .field.check-box {
|
||||
display: flex;
|
||||
}
|
||||
form .field.check-box input[type=checkbox] {
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.check-box label {
|
||||
height: 16px;
|
||||
text-transform: inherit;
|
||||
display: inline-block;
|
||||
padding: 2px 0 0 15px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
form label {
|
||||
color: #898989;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
form label span.optional {
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
}
|
||||
form .actions {
|
||||
padding: 20px 0;
|
||||
}
|
||||
form .actions .right {
|
||||
float: right;
|
||||
}
|
||||
form .actions button, form .actions a {
|
||||
margin: 10px 0;
|
||||
}
|
||||
form button.clean {
|
||||
border: none;
|
||||
height: auto;
|
||||
color: white;
|
||||
text-align: left;
|
||||
text-transform: unset;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
form button.clean:hover {
|
||||
border: none;
|
||||
background-color: #252525;
|
||||
}
|
||||
form button.clean * {
|
||||
font-weight: 300;
|
||||
}
|
||||
form .user-selection-list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
form button.user-selection .sessionstate {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
border-color: #999999;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-0 {
|
||||
background-color: #138D00;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-1 {
|
||||
background-color: #BC372E;
|
||||
}
|
||||
form button.user-selection > div {
|
||||
position: relative;
|
||||
}
|
||||
form button.user-selection > div.names {
|
||||
margin: 0 15px;
|
||||
}
|
||||
form button.user-selection > div.names .displayname {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form button.user-selection > div.names .loginname {
|
||||
color: #898989;
|
||||
}
|
||||
form button.user-selection:disabled {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
form button.user-selection:disabled .profile-image {
|
||||
opacity: 0.3;
|
||||
}
|
||||
form button.user-selection:disabled .sessionstate {
|
||||
background-color: #282828;
|
||||
}
|
||||
form button.user-selection:disabled .names .displayname, form button.user-selection:disabled .names .loginname {
|
||||
font-style: italic;
|
||||
color: #444444;
|
||||
}
|
||||
.user-selection + form button.other-user {
|
||||
margin-top: 80px;
|
||||
}
|
||||
form button.other-user .other-user-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark-hover@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user > div:nth-of-type(2) {
|
||||
margin: 15px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form ul#passwordcomplexity {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
form ul#passwordcomplexity li {
|
||||
flex: 1 0 50%;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
form ul#passwordcomplexity li i {
|
||||
height: 26px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
color: #0DF279;
|
||||
}
|
||||
form ul#passwordcomplexity li.invalid i {
|
||||
color: #F20D6B;
|
||||
}
|
||||
form #loginname {
|
||||
display: flex;
|
||||
}
|
||||
form #loginname .loginname-suffix {
|
||||
padding-left: 5px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
#copy-secret {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
text-align: center;
|
||||
}
|
||||
#qrcode svg rect.color {
|
||||
fill: white;
|
||||
}
|
||||
#qrcode svg rect.bg-color {
|
||||
fill: #282828;
|
||||
}
|
||||
|
||||
#secret .copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-image: url("../gradientdeco-full.svg");
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for IE. */
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid #F20D6B;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wa-error {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=dark.css.map */
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCMW;EDLX;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA,kBCLc;EDMd,OCLQ;EDMR;EACA;EACA;;;AAMJ;EACI,OCfQ;EDgBR,aCtBS;EDuBT;EACA,WE7BS;EF8BT;;;AAGJ;EACI,OCvBQ;EDwBR,aC9BS;ED+BT;EACA,WEpCU;;;AFuCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC3DW;ED4DX;EACA;;AAEA;EACI,OC/DY;;ADkEhB;EACI;;;AAIR;EACI,kBC3Ec;ED4Ed,OC1EW;ED2EX;EACA;EACA;EACA;EACA,QE5FU;EF6FV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCxFY;EDyFZ,OC5FU;ED6FV;;AAGJ;EACI,kBC/FO;EDgGP,OCjGI;EDkGJ;;AACA;EACI,kBClGQ;;ADsGhB;EACI,kBE5FW;EF6FX;;AAEA;EACI,kBEhGO;EFiGP;;AAIR;EACI;EACA;EACA;EACA;EACA,OEpGa;EFqGb,kBEpGmB;;AFsGnB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAOZ;EACI,kBElImB;EFmInB,OCjJQ;EDkJR,QE9JU;EF+JV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EACA;EE9JN;;AACA;EFwJE;IEvJA;IACA;;;AF+JA;EElKF;;AACA;EFiKE;IEhKA;IACA;;;;AFsKA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WE5LE;EF6LF;;AAGJ;EACI;EACA;EACA;EACA,OE/KC;;;AFqLT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OCpOA;;ADwOR;EACI,OE7NK;EF8NL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCnQI;EDoQJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBE7PW;;AFgQf;EACI;;AAIR;EACI;;AAMA;EACI;EACA;EACA;EACA;EACA,cElRO;EFmRP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OE9SP;;AFmTL;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI,kBC1UE;;AD8UF;EACI;EACA;;AAOZ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EE7VV;;AACA;EFwVM;IEvVJ;IACA;;;AF+VQ;EACI;EACA;EEpWd;;AACA;EFiWU;IEhWR;IACA;;;AFsWI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OE3WN;;AFgXE;EACI,OElXL;;AFuXP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MC9ZI;;ADiaR;EACI,MCnaU;;;ADwad;EACI;EACA;;;AAIR;EAEQ;EAEJ;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OElcO;;;AFqcX;EACI;;;AAGJ;EACI","file":"dark.css"}
|
||||
@@ -1,654 +0,0 @@
|
||||
@font-face {
|
||||
font-family: Aileron;
|
||||
src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../../../fonts/material/MaterialIcons-Regular.eot);
|
||||
/* For IE6-8 */
|
||||
src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
font-family: Lato;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 0 100px 0;
|
||||
}
|
||||
body.waiting * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
font-weight: 300;
|
||||
background-color: #282828;
|
||||
color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-family: Aileron;
|
||||
font-weight: 300;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
font-family: Aileron;
|
||||
font-weight: 300;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 8px;
|
||||
}
|
||||
header .logo {
|
||||
background-image: url("../logo-dark.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 80px;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content form {
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #760038;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
a:hover {
|
||||
color: #f60075;
|
||||
}
|
||||
a.tos-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background-color: #282828;
|
||||
color: #760038;
|
||||
border: 1px solid #760038;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
button:hover, .button:hover {
|
||||
background-color: #f60075;
|
||||
color: #282828;
|
||||
border: 1px solid #f60075;
|
||||
}
|
||||
button.primary, .button.primary {
|
||||
background-color: #760038;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
button.primary:hover, .button.primary:hover {
|
||||
background-color: #f60075;
|
||||
}
|
||||
button:disabled, .button:disabled {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button:disabled:hover, .button:disabled:hover {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button.google, .button.google {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 1px;
|
||||
color: #FFFFFF;
|
||||
background-color: #4285F4;
|
||||
}
|
||||
button.google span.logo, .button.google span.logo {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-color: #FFFFFF;
|
||||
background-image: url("../../../images/idp/google.png");
|
||||
background-size: 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button.google span.provider-name, .button.google span.provider-name {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
input:not([type=radio]), select {
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
height: 50px;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 5px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("../../../images/icon-user-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-profile .profile-image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.login-profile .names {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.login-profile .names div:first-of-type {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.login-profile .names div:nth-of-type(2) {
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
form .field {
|
||||
display: grid;
|
||||
padding: 10px 0;
|
||||
}
|
||||
form .field.radio-button {
|
||||
display: flex;
|
||||
}
|
||||
form .field.radio-button input[type=radio] {
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.radio-button label {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
padding: 3px 0 0 15px;
|
||||
width: 100%;
|
||||
}
|
||||
form .field.check-box {
|
||||
display: flex;
|
||||
}
|
||||
form .field.check-box input[type=checkbox] {
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.check-box label {
|
||||
height: 16px;
|
||||
text-transform: inherit;
|
||||
display: inline-block;
|
||||
padding: 2px 0 0 15px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
form label {
|
||||
color: #898989;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
form label span.optional {
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
}
|
||||
form .actions {
|
||||
padding: 20px 0;
|
||||
}
|
||||
form .actions .right {
|
||||
float: right;
|
||||
}
|
||||
form .actions button, form .actions a {
|
||||
margin: 10px 0;
|
||||
}
|
||||
form button.clean {
|
||||
border: none;
|
||||
height: auto;
|
||||
color: white;
|
||||
text-align: left;
|
||||
text-transform: unset;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
form button.clean:hover {
|
||||
border: none;
|
||||
background-color: #252525;
|
||||
}
|
||||
form button.clean * {
|
||||
font-weight: 300;
|
||||
}
|
||||
form .user-selection-list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
form button.user-selection .sessionstate {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
border-color: #999999;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-0 {
|
||||
background-color: #138D00;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-1 {
|
||||
background-color: #BC372E;
|
||||
}
|
||||
form button.user-selection > div {
|
||||
position: relative;
|
||||
}
|
||||
form button.user-selection > div.names {
|
||||
margin: 0 15px;
|
||||
}
|
||||
form button.user-selection > div.names .displayname {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form button.user-selection > div.names .loginname {
|
||||
color: #898989;
|
||||
}
|
||||
form button.user-selection:disabled {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
form button.user-selection:disabled .profile-image {
|
||||
opacity: 0.3;
|
||||
}
|
||||
form button.user-selection:disabled .sessionstate {
|
||||
background-color: #282828;
|
||||
}
|
||||
form button.user-selection:disabled .names .displayname, form button.user-selection:disabled .names .loginname {
|
||||
font-style: italic;
|
||||
color: #444444;
|
||||
}
|
||||
.user-selection + form button.other-user {
|
||||
margin-top: 80px;
|
||||
}
|
||||
form button.other-user .other-user-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark-hover@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user > div:nth-of-type(2) {
|
||||
margin: 15px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form ul#passwordcomplexity {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
form ul#passwordcomplexity li {
|
||||
flex: 1 0 50%;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
form ul#passwordcomplexity li i {
|
||||
height: 26px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
color: #0DF279;
|
||||
}
|
||||
form ul#passwordcomplexity li.invalid i {
|
||||
color: #F20D6B;
|
||||
}
|
||||
form #loginname {
|
||||
display: flex;
|
||||
}
|
||||
form #loginname .loginname-suffix {
|
||||
padding-left: 5px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
#copy-secret {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
text-align: center;
|
||||
}
|
||||
#qrcode svg rect.color {
|
||||
fill: white;
|
||||
}
|
||||
#qrcode svg rect.bg-color {
|
||||
fill: #282828;
|
||||
}
|
||||
|
||||
#secret .copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-image: url("../gradientdeco-full.svg");
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for IE. */
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid #F20D6B;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wa-error {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: white;
|
||||
color: #282828;
|
||||
}
|
||||
html header .logo {
|
||||
background-image: url("../logo-light.png");
|
||||
}
|
||||
html h1, html h2 {
|
||||
color: #282828;
|
||||
}
|
||||
html button, html .button {
|
||||
background-color: white;
|
||||
color: #760038;
|
||||
border: 1px solid #760038;
|
||||
}
|
||||
html button:hover, html .button:hover {
|
||||
background-color: #f60075;
|
||||
border: 1px solid #f60075;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
html button.primary, html .button.primary {
|
||||
background-color: #760038;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: 0px 10px 30px #760038;
|
||||
}
|
||||
html button.primary:hover, html .button.primary:hover {
|
||||
background-color: #f60075;
|
||||
}
|
||||
html button:disabled, html .button:disabled {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
html button:disabled:hover, html .button:disabled:hover {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
html button.clean, html .button.clean {
|
||||
color: #282828;
|
||||
}
|
||||
html button.clean:hover, html .button.clean:hover {
|
||||
border: none;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html button.user-selection .profile-image, html .button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.user-selection .profile-image, html .button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
html button.user-selection:hover, html .button.user-selection:hover {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html button.user-selection:hover .profile-image, html .button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.user-selection:hover .profile-image, html .button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
html button.other-user .other-user-image, html .button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.other-user .other-user-image, html .button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
html button.other-user:hover .other-user-image, html .button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.other-user:hover .other-user-image, html .button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light-hover@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
html button.google, html .button.google {
|
||||
color: #8b8d8d;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html button.google span.logo, html .button.google span.logo {
|
||||
background-image: url("../../../images/idp/google.png");
|
||||
}
|
||||
html input:not([type=radio]), html select {
|
||||
background-color: #FFFFFF;
|
||||
color: #282828;
|
||||
}
|
||||
html #qrcode svg rect.color {
|
||||
fill: #282828;
|
||||
}
|
||||
html #qrcode svg rect.bg-color {
|
||||
fill: white;
|
||||
}
|
||||
html footer {
|
||||
background-image: url("../gradientdeco-full.svg");
|
||||
}
|
||||
|
||||
form .field.check-box label {
|
||||
color: #282828;
|
||||
}
|
||||
form ul#passwordcomplexity li i {
|
||||
color: #50CA3D;
|
||||
}
|
||||
form ul#passwordcomplexity li.invalid i {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
.login-profile .profile-image, form button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.login-profile .profile-image, form button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
.login-profile:hover .profile-image, form button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.login-profile:hover .profile-image, form button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid #F20D6B;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=light.css.map */
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCMW;EDLX;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA,kBCLc;EDMd,OCLQ;EDMR;EACA;EACA;;;AAMJ;EACI,OCfQ;EDgBR,aCtBS;EDuBT;EACA,WE7BS;EF8BT;;;AAGJ;EACI,OCvBQ;EDwBR,aC9BS;ED+BT;EACA,WEpCU;;;AFuCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC3DW;ED4DX;EACA;;AAEA;EACI,OC/DY;;ADkEhB;EACI;;;AAIR;EACI,kBC3Ec;ED4Ed,OC1EW;ED2EX;EACA;EACA;EACA;EACA,QE5FU;EF6FV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCxFY;EDyFZ,OC5FU;ED6FV;;AAGJ;EACI,kBC/FO;EDgGP,OCjGI;EDkGJ;;AACA;EACI,kBClGQ;;ADsGhB;EACI,kBE5FW;EF6FX;;AAEA;EACI,kBEhGO;EFiGP;;AAIR;EACI;EACA;EACA;EACA;EACA,OEpGa;EFqGb,kBEpGmB;;AFsGnB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAOZ;EACI,kBElImB;EFmInB,OCjJQ;EDkJR,QE9JU;EF+JV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EACA;EE9JN;;AACA;EFwJE;IEvJA;IACA;;;AF+JA;EElKF;;AACA;EFiKE;IEhKA;IACA;;;;AFsKA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WE5LE;EF6LF;;AAGJ;EACI;EACA;EACA;EACA,OE/KC;;;AFqLT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OCpOA;;ADwOR;EACI,OE7NK;EF8NL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCnQI;EDoQJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBE7PW;;AFgQf;EACI;;AAIR;EACI;;AAMA;EACI;EACA;EACA;EACA;EACA,cElRO;EFmRP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OE9SP;;AFmTL;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI,kBC1UE;;AD8UF;EACI;EACA;;AAOZ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EE7VV;;AACA;EFwVM;IEvVJ;IACA;;;AF+VQ;EACI;EACA;EEpWd;;AACA;EFiWU;IEhWR;IACA;;;AFsWI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OE3WN;;AFgXE;EACI,OElXL;;AFuXP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MC9ZI;;ADiaR;EACI,MCnaU;;;ADwad;EACI;EACA;;;AAIR;EAEQ;EAEJ;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OElcO;;;AFqcX;EACI;;;AAGJ;EACI;;;AG/eJ;EACI,kBFeQ;EEdR,OFac;;AERd;EACI;;AAGJ;EACI,OFGU;;AEAd;EACI;EACA;EACA;;AAEA;EACI,kBFIa;EEHb;EACA,ODyBgB;;ACtBpB;EACI,kBFVG;EEWH,ODoBgB;ECnBhB;EACA;;AACA;EACI,kBFdI;;AEkBZ;EACI,kBDRO;ECSP;;AAEA;EACI,kBDZG;ECaH;;AAIR;EACI,OFhCM;;AEkCN;EACI;EACA,kBDHY;;ACQhB;EDxCV;;AACA;ECuCU;IDtCR;IACA;;;ACyCQ;EACI,kBDbY;;ACeZ;ED/Cd;;AACA;EC8Cc;ID7CZ;IACA;;;ACmDQ;EDtDV;;AACA;ECqDU;IDpDR;IACA;;;ACwDY;ED3Dd;;AACA;EC0Dc;IDzDZ;IACA;;;AC8DI;EACI,OD7Bc;EC8Bd,kBD7BoB;;AC+BpB;EACI;;AAKZ;EACI,kBD5CoB;EC6CpB,OF9EU;;AEkFV;EACI,MFnFM;;AEsFV;EACI,MFtFA;;AE0FR;EAEQ;;;AAMR;EACI,OFpGU;;AEwGb;EACI,ODhEM;;ACoEN;EACI,ODtEG;;;AC8EZ;EDrHF;;AACA;ECoHE;IDnHA;IACA;;;ACsHA;EDzHF;;AACA;ECwHE;IDvHA;IACA;;;;AC2HJ;EACI;;;AAGJ;EACI,OD5FY","file":"light.css"}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 361 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
12
internal/ui/login/static/resources/themes/scss/bundle.scss
Normal file
12
internal/ui/login/static/resources/themes/scss/bundle.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// themes and colors
|
||||
@import './styles/theming/all.scss';
|
||||
@import './styles/color/all_color.scss';
|
||||
@import './styles/typography/typography.scss';
|
||||
|
||||
// layouts
|
||||
@import './styles/container/container.scss';
|
||||
@import './styles/register/register.scss';
|
||||
@import './styles/header/header.scss';
|
||||
|
||||
// animations
|
||||
@import './styles/animations.scss';
|
||||
@@ -1,3 +0,0 @@
|
||||
@import "../variables";
|
||||
@import "variables";
|
||||
@import "../main";
|
||||
@@ -1,4 +0,0 @@
|
||||
@import "../variables";
|
||||
@import "variables";
|
||||
@import "../main";
|
||||
@import "../light";
|
||||
@@ -1,27 +0,0 @@
|
||||
$logoImgDark: "../logo-dark.png";
|
||||
$logoImgLight: "../logo-light.png";
|
||||
|
||||
$footerimgDark: "../gradientdeco-full.svg";
|
||||
$footerimgLight: "../gradientdeco-full.svg";
|
||||
|
||||
$bodyImgDark: "";
|
||||
$bodyImgLight: "";
|
||||
|
||||
// ----- FONTS ------------
|
||||
$standardFont: Lato;
|
||||
$headerFont: Aileron;
|
||||
|
||||
// ----- COLORS ------------
|
||||
|
||||
// ------ DARK-THEME -------
|
||||
$backgroundColor: #282828;
|
||||
$fontColor: white;
|
||||
$primaryColor: #760038;
|
||||
$primaryColorHover: lighten($primaryColor, 25%);
|
||||
|
||||
|
||||
// ------ LIGHT-THEME -------
|
||||
$backgroundColorLight: $fontColor;
|
||||
$fontColorLight: $backgroundColor;
|
||||
$primaryColorLight: $primaryColor;
|
||||
$primaryColorHoverLight: lighten($primaryColorLight, 25%);
|
||||
@@ -1,150 +0,0 @@
|
||||
// ---- LIGHT-THEME-------
|
||||
html {
|
||||
background-color: $backgroundColorLight;
|
||||
color: $fontColorLight;
|
||||
@if($bodyImgLight != "") {
|
||||
background-image: url($bodyImgLight);
|
||||
}
|
||||
|
||||
header .logo {
|
||||
background-image: url($logoImgLight);
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: $fontColorLight;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background-color: $backgroundColorLight;
|
||||
color: $primaryColorLight;
|
||||
border: 1px solid $primaryColorLight;
|
||||
|
||||
&:hover {
|
||||
background-color: $primaryColorHoverLight;
|
||||
border: 1px solid $primaryColorHoverLight;
|
||||
color: $buttonBackgroundColorHoverLight
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: $primaryColor;
|
||||
color: $buttonBackgroundColorHoverLight;
|
||||
border: none;
|
||||
box-shadow: 0px 10px 30px $primaryColor;
|
||||
&:hover {
|
||||
background-color: $primaryColorHover;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $inputBorderColor;
|
||||
border: 1px solid $inputBorderColor;
|
||||
|
||||
&:hover {
|
||||
background-color: $inputBorderColor;
|
||||
border: 1px solid $inputBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.clean {
|
||||
color: $fontColorLight;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background-color: $buttonBackgroundColorHoverLight;
|
||||
}
|
||||
}
|
||||
|
||||
&.user-selection {
|
||||
.profile-image {
|
||||
@include retina-background-image($profileImgLight, "png", false, 80px, 80px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $buttonBackgroundColorHoverLight;
|
||||
|
||||
.profile-image {
|
||||
@include retina-background-image($profileImgLight, "png", true, 80px, 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.other-user {
|
||||
.other-user-image {
|
||||
@include retina-background-image($otherUserImgLight, "png", false, 80px, 60px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.other-user-image {
|
||||
@include retina-background-image($otherUserImgLight, "png", true, 80px, 60px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.google {
|
||||
color: $idpGoogleFontColorLight;
|
||||
background-color: $idpGoogleBackgroundColorLight;
|
||||
|
||||
span.logo {
|
||||
background-image: url($idpGoogleImg + '.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type='radio']), select {
|
||||
background-color: $inputBackgroundColorLight;
|
||||
color: $fontColorLight;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
svg rect.color {
|
||||
fill: $fontColorLight;
|
||||
}
|
||||
|
||||
svg rect.bg-color {
|
||||
fill: $backgroundColorLight;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@if($footerimgLight != "") {
|
||||
background-image: url($footerimgLight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.field.check-box label {
|
||||
color: $fontColorLight;
|
||||
}
|
||||
|
||||
ul#passwordcomplexity li {
|
||||
i {
|
||||
color: $okColorLight;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
i {
|
||||
color: $nokColorLight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
%profile-image {
|
||||
.profile-image {
|
||||
@include retina-background-image($profileImgLight, "png", false, 80px, 80px);
|
||||
}
|
||||
|
||||
&:hover .profile-image {
|
||||
@include retina-background-image($profileImgLight, "png", true, 80px, 80px);
|
||||
}
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid $nokColorLight;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $nokColorLight;
|
||||
}
|
||||
@@ -1,498 +1,22 @@
|
||||
@import "fonts";
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
font-family: $standardFont;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 0 100px 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
||||
.lgn-grow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.waiting * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
font-weight: 300;
|
||||
background-color: $backgroundColor;
|
||||
color: $fontColor;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
background-size: contain;
|
||||
@if($bodyImgDark != "") {
|
||||
background-image: url($bodyImgDark);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $fontColor;
|
||||
font-family: $headerFont;
|
||||
font-weight: 300;
|
||||
font-size: $headerSize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $fontColor;
|
||||
font-family: $headerFont;
|
||||
font-weight: 300;
|
||||
font-size: $header2Size;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 8px;
|
||||
|
||||
.logo {
|
||||
background-image: url($logoImgDark);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 80px;
|
||||
margin: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content form {
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primaryColor;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: $primaryColorHover;
|
||||
}
|
||||
|
||||
&.tos-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background-color: $backgroundColor;
|
||||
color: $primaryColor;
|
||||
border: 1px solid $primaryColor;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: $inputHeight;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
padding: 1px 6px;
|
||||
|
||||
&:hover {
|
||||
background-color: $primaryColorHover;
|
||||
color: $backgroundColor;
|
||||
border: 1px solid $primaryColorHover;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: $primaryColor;
|
||||
color: $fontColor;
|
||||
border: none;
|
||||
&:hover {
|
||||
background-color: $primaryColorHover;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $inputBorderColor;
|
||||
border: 1px solid $inputBorderColor;
|
||||
|
||||
&:hover {
|
||||
background-color: $inputBorderColor;
|
||||
border: 1px solid $inputBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.google {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 1px;
|
||||
color: $idpGoogleFontColor;
|
||||
background-color: $idpGoogleBackgroundColor;
|
||||
|
||||
span.logo {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-color: #FFFFFF;
|
||||
background-image: url($idpGoogleImg + '.png');
|
||||
background-size: 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
span.provider-name {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
input:not([type='radio']), select {
|
||||
background-color: $inputBackgroundColor;
|
||||
color: $fontColor;
|
||||
height: $inputHeight;
|
||||
border: 1px solid $inputBorderColor;
|
||||
border-radius: 5px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
%profile-image {
|
||||
.profile-image {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
@include retina-background-image($profileImgDark, "png", false, 80px, 80px);
|
||||
}
|
||||
|
||||
&:hover .profile-image {
|
||||
@include retina-background-image($profileImgDark, "png", true, 80px, 80px);
|
||||
}
|
||||
}
|
||||
|
||||
.login-profile {
|
||||
@extend %profile-image;
|
||||
.profile-image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.names {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
|
||||
div:first-of-type {
|
||||
font-size: $header3Size;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
div:nth-of-type(2) {
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
color: $labelColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.field {
|
||||
display: grid;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.field.radio-button {
|
||||
display: flex;
|
||||
|
||||
input[type='radio'] {
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& label {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
padding: 3px 0 0 15px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.field.check-box {
|
||||
display: flex;
|
||||
|
||||
input[type='checkbox'] {
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& label {
|
||||
height: 16px;
|
||||
text-transform: inherit;
|
||||
display: inline-block;
|
||||
padding: 2px 0 0 15px;
|
||||
width: 100%;
|
||||
color: $fontColor;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $labelColor;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 3px;
|
||||
|
||||
span.optional {
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 20px 0;
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
button, a {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
button.clean {
|
||||
border: none;
|
||||
height: auto;
|
||||
color: $fontColor;
|
||||
text-align: left;
|
||||
text-transform: unset;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background-color: $buttonBackgroundColorHover;
|
||||
}
|
||||
|
||||
* {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.user-selection-list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
button.user-selection {
|
||||
@extend %profile-image;
|
||||
|
||||
.sessionstate {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
border-color: $inputBorderColor;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
|
||||
&.sessionstate-0 {
|
||||
background-color: #138D00;
|
||||
}
|
||||
|
||||
&.sessionstate-1 {
|
||||
background-color: #BC372E;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
|
||||
&.names {
|
||||
margin: 0 15px;
|
||||
|
||||
.displayname {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.loginname {
|
||||
color: $labelColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
|
||||
.profile-image {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.sessionstate {
|
||||
background-color: $backgroundColor;
|
||||
}
|
||||
|
||||
.names {
|
||||
.displayname, .loginname {
|
||||
font-style: italic;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.other-user {
|
||||
.user-selection+&{
|
||||
margin-top: 80px;
|
||||
}
|
||||
.other-user-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@include retina-background-image($otherUserImgDark, "png", false, 80px, 60px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.other-user-image {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@include retina-background-image($otherUserImgDark, "png", true, 80px, 60px);
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-of-type(2) {
|
||||
margin: 15px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul#passwordcomplexity {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
li {
|
||||
flex: 1 0 50%;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
|
||||
i {
|
||||
height: 26px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
color: $okColor;
|
||||
}
|
||||
}
|
||||
|
||||
li.invalid {
|
||||
i {
|
||||
color: $nokColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#loginname {
|
||||
display: flex;
|
||||
.loginname-suffix {
|
||||
padding-left: 5px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#copy-secret {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
text-align: center;
|
||||
|
||||
svg rect.color {
|
||||
fill: $fontColor;
|
||||
}
|
||||
|
||||
svg rect.bg-color {
|
||||
fill: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
#secret {
|
||||
.copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@if($footerimgDark != "") {
|
||||
background-image: url($footerimgDark);
|
||||
}
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid $nokColor;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $nokColor;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#wa-error {
|
||||
margin-top: 20px;
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin: 2px 0;
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@import './a.scss';
|
||||
|
||||
@mixin lgn-a-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-a-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-a-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
a {
|
||||
color: lgn-color($primary, default);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lgn-color($primary, 400);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
$lgn-container-max-width: 380px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-container-margin: 0px auto 50px auto;
|
||||
|
||||
.lgn-account-selection{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
.left {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.lgn-names {
|
||||
display: block;
|
||||
margin: .5rem;
|
||||
text-align: start;
|
||||
|
||||
.lgn-displayname{
|
||||
font-size: 16px;
|
||||
margin: .5rem 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@import './account_selection.scss';
|
||||
|
||||
@mixin lgn-account-selection-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-account-selection-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-account-selection-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
$primary: map-get($config, primary);
|
||||
$foreground: map-get($config, foreground);
|
||||
$background: map-get($config, background);
|
||||
|
||||
.lgn-account-selection{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 -1px lgn-color($foreground, footer-line);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
$primary: map-get($config, primary);
|
||||
background-color: lgn-color($background, account-selector-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: lgn-color($background, account-selector-active);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lgn-color($background, account-selector-active);
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
color: lgn-color($foreground, label);
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
color: lgn-color($foreground, label);
|
||||
|
||||
&.i0 {
|
||||
color: #85d996;
|
||||
}
|
||||
|
||||
&.i1 {
|
||||
$warn: map-get($config, warn);
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@keyframes shake {
|
||||
10%, 90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%, 50%, 70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%, 60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
[shake] {
|
||||
animation: shake .8s cubic-bezier(.36,.07,.19,.97) both;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
$lgn-container-max-width: 380px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-avatar-size: 32px;
|
||||
|
||||
.lgn-avatar {
|
||||
height: $lgn-avatar-size;
|
||||
width: $lgn-avatar-size;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: .05em;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
@import './avatar.scss';
|
||||
@import "../elevation/elevation.scss";
|
||||
|
||||
@mixin lgn-avatar-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-avatar-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-avatar-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
.lgn-avatar:not(.transparent) {
|
||||
@include _lgn-avatar-theme-property($config, "background-color", default);
|
||||
@include lgn-button-elevation(2, $config);
|
||||
}
|
||||
|
||||
.lgn-avatar .initials{
|
||||
@include _lgn-avatar-theme-property($config, "color", default-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-avatar-theme-property($theme, $property, $hue) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
&.lgn-primary {
|
||||
#{$property}: lgn-color($primary, $hue);
|
||||
}
|
||||
&.lgn-accent {
|
||||
#{$property}: lgn-color($accent, $hue);
|
||||
}
|
||||
&.lgn-warn {
|
||||
#{$property}: lgn-color($warn, $hue);
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
$palette: if($property == "color", $foreground, $background);
|
||||
#{$property}: lgn-color($palette, disabled-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-avatar-elevation($zValue, $config, $opacity: $lgn-elevation-opacity) {
|
||||
$foreground: map-get($config, foreground);
|
||||
$elevation-color: map-get($foreground, elevation);
|
||||
$elevation-color-or-default: if(
|
||||
$elevation-color == null,
|
||||
$lgn-elevation-color,
|
||||
$elevation-color
|
||||
);
|
||||
|
||||
@include lgn-elevation($zValue, $elevation-color-or-default, $opacity);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@import './button_base.scss';
|
||||
|
||||
.lgn-button, .lgn-stroked-button, .lgn-icon-button {
|
||||
@include lgn-button-base;
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
@include lgn-raised-button;
|
||||
}
|
||||
|
||||
.lgn-icon-button {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
width: $lgn-icon-button-size;
|
||||
height: $lgn-icon-button-size;
|
||||
flex-shrink: 0;
|
||||
line-height: $lgn-icon-button-size;
|
||||
border-radius: $lgn-icon-button-border-radius;
|
||||
|
||||
i, .mat-icon {
|
||||
line-height: $lgn-icon-button-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-stroked-button {
|
||||
border: $lgn-stroked-button-border-width solid currentColor;
|
||||
padding: $lgn-stroked-button-padding;
|
||||
line-height: $lgn-stroked-button-line-height;
|
||||
}
|
||||
|
||||
.lgn-button:focus {
|
||||
pointer-events: none;
|
||||
transition: $lgn-button-focus-transition;
|
||||
}
|
||||
|
||||
.lgn-button, .lgn-stroked-button, .lgn-raised-button {
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
$lgn-button-padding: 0 16px !default;
|
||||
$lgn-button-min-width: 64px !default;
|
||||
$lgn-button-margin: 0 !default;
|
||||
$lgn-button-line-height: 36px !default;
|
||||
$lgn-button-border-radius: 6px !default;
|
||||
$lgn-button-focus-transition: opacity 200ms cubic-bezier(0.35, 0, 0.25, 1),
|
||||
background-color 200ms cubic-bezier(0.35, 0, 0.25, 1) !default;
|
||||
|
||||
// Stroked button padding is 1px less horizontally than default or raised lgn button
|
||||
// button's padding.
|
||||
$lgn-stroked-button-line-height: $lgn-button-line-height - 2;
|
||||
$lgn-stroked-button-padding: 0 15px;
|
||||
$lgn-stroked-button-border-width: 1px;
|
||||
|
||||
$lgn-icon-button-size: 40px !default;
|
||||
$lgn-icon-button-border-radius: 50% !default;
|
||||
$lgn-icon-button-line-height: 24px !default;
|
||||
|
||||
// adds base styles to all button types.
|
||||
@mixin lgn-button-base {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
// Make anchors (a href) render like buttons.
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
|
||||
// Sizing.
|
||||
margin: $lgn-button-margin;
|
||||
min-width: $lgn-button-min-width;
|
||||
line-height: $lgn-button-line-height;
|
||||
padding: $lgn-button-padding;
|
||||
border-radius: $lgn-button-border-radius;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Applies styles to buttons with backgrounds: raised
|
||||
@mixin lgn-raised-button {
|
||||
@include lgn-button-base;
|
||||
|
||||
// Force hardware acceleration.
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
@import "../theming/theming.scss";
|
||||
@import "./button.scss";
|
||||
@import "../elevation/elevation.scss";
|
||||
|
||||
@mixin lgn-button-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-button-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-button-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$accent: map-get($config, accent);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-button,
|
||||
.lgn-stroked-button,
|
||||
.lgn-icon-button {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
|
||||
@include _lgn-button-theme-property($config, "color", text);
|
||||
}
|
||||
|
||||
.lgn-button:focus,
|
||||
.lgn-stroked-button:focus,
|
||||
.lgn-raised-button:focus {
|
||||
@include lgn-button-elevation(8, $config);
|
||||
background: map-get($background, base);
|
||||
}
|
||||
|
||||
.lgn-stroked-button:not([disabled]) {
|
||||
border-color: lgn-color($foreground, divider);
|
||||
}
|
||||
|
||||
.lgn-button {
|
||||
@include _lgn-button-theme-property($config, "color", text);
|
||||
&:hover {
|
||||
$primary: map-get($config, primary);
|
||||
background-color: rgba(lgn-color($primary, 500), 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba(lgn-color($primary, 500), 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(lgn-color($primary, 500), 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
color: lgn-color($foreground, text);
|
||||
background-color: lgn-color($background, raised-button);
|
||||
|
||||
@include _lgn-button-theme-property($config, "color", default-contrast);
|
||||
@include _lgn-button-theme-property($config, "background-color", default);
|
||||
|
||||
&:active {
|
||||
background-color: rgba(lgn-color($primary, 500), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-button,
|
||||
.lgn-stroked-button {
|
||||
@include lgn-button-elevation(0, $config);
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
@include lgn-button-elevation(2, $config);
|
||||
|
||||
&:not([disabled]):active {
|
||||
@include lgn-button-elevation(8, $config);
|
||||
}
|
||||
|
||||
// &:focus {
|
||||
// @include lgn-b-elevation(8, $config);
|
||||
// }
|
||||
|
||||
&[disabled] {
|
||||
@include lgn-button-elevation(0, $config);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-property($theme, $property, $hue) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
&.lgn-primary {
|
||||
#{$property}: lgn-color($primary, $hue);
|
||||
}
|
||||
&.lgn-accent {
|
||||
#{$property}: lgn-color($accent, $hue);
|
||||
}
|
||||
&.lgn-warn {
|
||||
#{$property}: lgn-color($warn, $hue);
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
$palette: if($property == "color", $foreground, $background);
|
||||
#{$property}: lgn-color($palette, disabled-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-focus-overlay-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$accent: map-get($config, accent);
|
||||
$warn: map-get($config, warn);
|
||||
|
||||
&.lgn-primary:focus {
|
||||
background-color: lgn-color($primary);
|
||||
}
|
||||
|
||||
&.lgn-accent:focus {
|
||||
background-color: lgn-color($accent);
|
||||
}
|
||||
|
||||
&.lgn-warn:focus {
|
||||
background-color: lgn-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-button-elevation($zValue, $config, $opacity: $lgn-elevation-opacity) {
|
||||
$foreground: map-get($config, foreground);
|
||||
$elevation-color: map-get($foreground, elevation);
|
||||
$elevation-color-or-default: if(
|
||||
$elevation-color == null,
|
||||
$lgn-elevation-color,
|
||||
$elevation-color
|
||||
);
|
||||
|
||||
@include lgn-elevation($zValue, $elevation-color-or-default, $opacity);
|
||||
}
|
||||
|
||||
@mixin lgn-button-typography($config-or-theme) {
|
||||
$config: lgn-get-typography-config($config-or-theme);
|
||||
.lgn-button, .lgn-raised-button, .lgn-icon-button, .lgn-stroked-button {
|
||||
font: {
|
||||
family: lgn-font-family($config, button);
|
||||
size: lgn-font-size($config, button);
|
||||
weight: lgn-font-weight($config, button);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './checkbox_base.scss';
|
||||
|
||||
.lgn-checkbox {
|
||||
@include lgn-checkbox-base;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
$lgn-checkbox-font-size: 14px !default;
|
||||
|
||||
@mixin lgn-checkbox-base {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 0 10px;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
line-height: 24px;
|
||||
box-sizing: inherit;
|
||||
|
||||
input[type='checkbox'] {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
// Unchecked
|
||||
label {
|
||||
display: block;
|
||||
padding: 0 0 0 30px;
|
||||
cursor: pointer;
|
||||
box-sizing: inherit;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
line-height: 28px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
transition: all .28s cubic-bezier(.4, 0, .2, 1);
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
transform: rotate(45deg);
|
||||
transition: border-color .28s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './checkbox.scss';
|
||||
|
||||
@mixin lgn-checkbox-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-checkbox-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-checkbox-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
input[type='checkbox'] {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// Unchecked
|
||||
.lgn-checkbox label {
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
border: 2px solid lgn-color($foreground, input-border);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Checked
|
||||
input[type='checkbox']:checked + label {
|
||||
&:before {
|
||||
background-color: lgn-color($primary, default);
|
||||
border-color: lgn-color($primary, default);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import '../theming/all.scss';
|
||||
@import '../theming/theming.scss';
|
||||
|
||||
// Includes all of the color styles.
|
||||
@mixin zitadel-lgn-color($config-or-theme) {
|
||||
// In case a theme object has been passed instead of a configuration for
|
||||
// the color system, extract the color config from the theme object.
|
||||
$config: if(lgn-private-is-theme-object($config-or-theme),
|
||||
lgn-get-color-config($config-or-theme), $config-or-theme);
|
||||
|
||||
@if $config == null {
|
||||
@error 'No color configuration specified.';
|
||||
}
|
||||
|
||||
// includes all themes with given color
|
||||
@include zitadel-lgn-theme((
|
||||
color: $config,
|
||||
));
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
$lgn-container-max-width: 400px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-container-margin: 0 auto 0 auto;
|
||||
$lgn-container-top-offset: 100px;
|
||||
$lgn-container-bottom-margin: 50px;
|
||||
|
||||
.lgn-max-width-wrapper {
|
||||
max-width: $lgn-container-max-width;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: $lgn-container-bottom-margin;
|
||||
display: block;
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
margin-top: $lgn-container-top-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative; // used to position a button element relative to the left upper corner of the content wrapper
|
||||
display: block;
|
||||
margin: $lgn-container-margin;
|
||||
padding: $lgn-container-padding;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.lgn-head {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 0;
|
||||
margin-top: 1rem;
|
||||
|
||||
// this is used to reverse the submit button order.
|
||||
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
|
||||
&.lgn-reverse-order {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
// this is used to reverse the submit button order.
|
||||
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
|
||||
&.lgn-reverse-order {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-login-profile {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.lgn-profile-image {
|
||||
display: block;
|
||||
margin: .5rem;
|
||||
}
|
||||
.lgn-names {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 50vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.lgn-displayname{
|
||||
margin: .5rem 1rem;
|
||||
}
|
||||
.lgn-loginname{
|
||||
p {
|
||||
margin: .5rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-left-action {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.lgn-register-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lgn-mfa-other {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@import './container.scss';
|
||||
|
||||
@mixin lgn-container-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-container-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-container-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
.lgn-error {
|
||||
.lgn-error-message {
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-login-profile {
|
||||
.lgn-names {
|
||||
$foreground: map-get($config, foreground);
|
||||
border-color: lgn-color($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
@mixin lgn-core($typography-config: null) {
|
||||
@include zitadel-lgn-typography($typography-config);
|
||||
}
|
||||
|
||||
@mixin lgn-core-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
|
||||
// Wrapper element that provides the theme background
|
||||
.lgn-app-background#{if(&, ', &.lgn-app-background', '')} {
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
background-color: lgn-color($background, background);
|
||||
color: lgn-color($foreground, text);
|
||||
}
|
||||
|
||||
// Marker that is used to determine whether the user has added a theme to their page.
|
||||
@at-root {
|
||||
.lgn-theme-loaded-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin that renders all of the core styles that depend on the theme.
|
||||
@mixin lgn-core-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
@if $color != null {
|
||||
@include lgn-core-color($color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
@function _get-umbra-map($color, $opacity) {
|
||||
$shadow-color: if(
|
||||
type-of($color) == color,
|
||||
rgba($color, $opacity * 0.2),
|
||||
$color
|
||||
);
|
||||
|
||||
@return (
|
||||
0: "0px 0px 0px 0px #{$shadow-color}",
|
||||
1: "0px 2px 1px -1px #{$shadow-color}",
|
||||
2: "0px 3px 1px -2px #{$shadow-color}",
|
||||
3: "0px 3px 3px -2px #{$shadow-color}",
|
||||
4: "0px 2px 4px -1px #{$shadow-color}",
|
||||
5: "0px 3px 5px -1px #{$shadow-color}",
|
||||
6: "0px 3px 5px -1px #{$shadow-color}",
|
||||
7: "0px 4px 5px -2px #{$shadow-color}",
|
||||
8: "0px 5px 5px -3px #{$shadow-color}",
|
||||
9: "0px 5px 6px -3px #{$shadow-color}",
|
||||
10: "0px 6px 6px -3px #{$shadow-color}",
|
||||
11: "0px 6px 7px -4px #{$shadow-color}",
|
||||
12: "0px 7px 8px -4px #{$shadow-color}",
|
||||
13: "0px 7px 8px -4px #{$shadow-color}",
|
||||
14: "0px 7px 9px -4px #{$shadow-color}",
|
||||
15: "0px 8px 9px -5px #{$shadow-color}",
|
||||
16: "0px 8px 10px -5px #{$shadow-color}",
|
||||
17: "0px 8px 11px -5px #{$shadow-color}",
|
||||
18: "0px 9px 11px -5px #{$shadow-color}",
|
||||
19: "0px 9px 12px -6px #{$shadow-color}",
|
||||
20: "0px 10px 13px -6px #{$shadow-color}",
|
||||
21: "0px 10px 13px -6px #{$shadow-color}",
|
||||
22: "0px 10px 14px -6px #{$shadow-color}",
|
||||
23: "0px 11px 14px -7px #{$shadow-color}",
|
||||
24: "0px 11px 15px -7px #{$shadow-color}"
|
||||
);
|
||||
}
|
||||
|
||||
@function _get-penumbra-map($color, $opacity) {
|
||||
$shadow-color: if(
|
||||
type-of($color) == color,
|
||||
rgba($color, $opacity * 0.14),
|
||||
$color
|
||||
);
|
||||
|
||||
@return (
|
||||
0: "0px 0px 0px 0px #{$shadow-color}",
|
||||
1: "0px 1px 1px 0px #{$shadow-color}",
|
||||
2: "0px 2px 2px 0px #{$shadow-color}",
|
||||
3: "0px 3px 4px 0px #{$shadow-color}",
|
||||
4: "0px 4px 5px 0px #{$shadow-color}",
|
||||
5: "0px 5px 8px 0px #{$shadow-color}",
|
||||
6: "0px 6px 10px 0px #{$shadow-color}",
|
||||
7: "0px 7px 10px 1px #{$shadow-color}",
|
||||
8: "0px 8px 10px 1px #{$shadow-color}",
|
||||
9: "0px 9px 12px 1px #{$shadow-color}",
|
||||
10: "0px 10px 14px 1px #{$shadow-color}",
|
||||
11: "0px 11px 15px 1px #{$shadow-color}",
|
||||
12: "0px 12px 17px 2px #{$shadow-color}",
|
||||
13: "0px 13px 19px 2px #{$shadow-color}",
|
||||
14: "0px 14px 21px 2px #{$shadow-color}",
|
||||
15: "0px 15px 22px 2px #{$shadow-color}",
|
||||
16: "0px 16px 24px 2px #{$shadow-color}",
|
||||
17: "0px 17px 26px 2px #{$shadow-color}",
|
||||
18: "0px 18px 28px 2px #{$shadow-color}",
|
||||
19: "0px 19px 29px 2px #{$shadow-color}",
|
||||
20: "0px 20px 31px 3px #{$shadow-color}",
|
||||
21: "0px 21px 33px 3px #{$shadow-color}",
|
||||
22: "0px 22px 35px 3px #{$shadow-color}",
|
||||
23: "0px 23px 36px 3px #{$shadow-color}",
|
||||
24: "0px 24px 38px 3px #{$shadow-color}"
|
||||
);
|
||||
}
|
||||
|
||||
@function _get-ambient-map($color, $opacity) {
|
||||
$shadow-color: if(
|
||||
type-of($color) == color,
|
||||
rgba($color, $opacity * 0.12),
|
||||
$color
|
||||
);
|
||||
|
||||
@return (
|
||||
0: "0px 0px 0px 0px #{$shadow-color}",
|
||||
1: "0px 1px 3px 0px #{$shadow-color}",
|
||||
2: "0px 1px 5px 0px #{$shadow-color}",
|
||||
3: "0px 1px 8px 0px #{$shadow-color}",
|
||||
4: "0px 1px 10px 0px #{$shadow-color}",
|
||||
5: "0px 1px 14px 0px #{$shadow-color}",
|
||||
6: "0px 1px 18px 0px #{$shadow-color}",
|
||||
7: "0px 2px 16px 1px #{$shadow-color}",
|
||||
8: "0px 3px 14px 2px #{$shadow-color}",
|
||||
9: "0px 3px 16px 2px #{$shadow-color}",
|
||||
10: "0px 4px 18px 3px #{$shadow-color}",
|
||||
11: "0px 4px 20px 3px #{$shadow-color}",
|
||||
12: "0px 5px 22px 4px #{$shadow-color}",
|
||||
13: "0px 5px 24px 4px #{$shadow-color}",
|
||||
14: "0px 5px 26px 4px #{$shadow-color}",
|
||||
15: "0px 6px 28px 5px #{$shadow-color}",
|
||||
16: "0px 6px 30px 5px #{$shadow-color}",
|
||||
17: "0px 6px 32px 5px #{$shadow-color}",
|
||||
18: "0px 7px 34px 6px #{$shadow-color}",
|
||||
19: "0px 7px 36px 6px #{$shadow-color}",
|
||||
20: "0px 8px 38px 7px #{$shadow-color}",
|
||||
21: "0px 8px 40px 7px #{$shadow-color}",
|
||||
22: "0px 8px 42px 7px #{$shadow-color}",
|
||||
23: "0px 9px 44px 8px #{$shadow-color}",
|
||||
24: "0px 9px 46px 8px #{$shadow-color}"
|
||||
);
|
||||
}
|
||||
|
||||
$lgn-elevation-transition-duration: 280ms !default;
|
||||
$lgn-elevation-transition-timing-function: cubic-bezier(
|
||||
0.4,
|
||||
0,
|
||||
0.2,
|
||||
1
|
||||
) !default;
|
||||
$lgn-elevation-color: black !default;
|
||||
|
||||
// scaling value for elevation shadows.
|
||||
$lgn-elevation-opacity: 1 !default;
|
||||
|
||||
// Applies the correct css rules to an element to give it the elevation specified by $zValue.
|
||||
// The $zValue must be between 0 and 24.
|
||||
@mixin lgn-elevation(
|
||||
$zValue,
|
||||
$color: $lgn-elevation-color,
|
||||
$opacity: $lgn-elevation-opacity
|
||||
) {
|
||||
@if type-of($zValue) != number or not unitless($zValue) {
|
||||
@error '$zValue must be a unitless number';
|
||||
}
|
||||
@if $zValue < 0 or $zValue > 24 {
|
||||
@error '$zValue must be between 0 and 24';
|
||||
}
|
||||
|
||||
box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
|
||||
#{map-get(_get-penumbra-map($color, $opacity), $zValue)},
|
||||
#{map-get(_get-ambient-map($color, $opacity), $zValue)};
|
||||
}
|
||||
|
||||
// Returns a string that can be used as the value for a transition property for elevation.
|
||||
// Calling this function directly is useful in situations where a component needs to transition
|
||||
// more than one property.
|
||||
//
|
||||
// .foo {
|
||||
// transition: lgn-elevation-transition-property-value(), opacity 100ms ease;
|
||||
// }
|
||||
@function lgn-elevation-transition-property-value(
|
||||
$duration: $lgn-elevation-transition-duration,
|
||||
$easing: $lgn-elevation-transition-timing-function
|
||||
) {
|
||||
@return box-shadow #{$duration} #{$easing};
|
||||
}
|
||||
|
||||
// Applies the correct css rules needed to have an element transition between elevations.
|
||||
// This mixin should be applied to elements whose elevation values will change depending on their
|
||||
// context (e.g. when active or disabled).
|
||||
//
|
||||
// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
|
||||
// be used in the same way by clients.
|
||||
@mixin lgn-elevation-transition(
|
||||
$duration: $lgn-elevation-transition-duration,
|
||||
$easing: $lgn-elevation-transition-timing-function
|
||||
) {
|
||||
transition: lgn-elevation-transition-property-value($duration, $easing);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.lgn-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
i {
|
||||
margin-right: .5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import './error.scss';
|
||||
|
||||
@mixin lgn-error-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-error-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-error-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
|
||||
.lgn-error {
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
$container-max-width: 350px;
|
||||
$footer-height: 50px;
|
||||
$footer-padding: 0 1rem;
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #00000020;
|
||||
min-height: $footer-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $footer-padding;
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import './footer.scss';
|
||||
|
||||
@mixin lgn-footer-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'mat-button') {
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-footer-color($color);
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin lgn-footer-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
footer {
|
||||
background-color: lgn-color($background, footer);
|
||||
border-top: 1px solid lgn-color($foreground, footer-line);
|
||||
|
||||
a {
|
||||
color: lgn-color($background, footer-links);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
$lgn-header-padding: 0;
|
||||
$lgn-header-margin: 1rem auto .5rem auto;
|
||||
|
||||
.lgn-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: $lgn-header-margin;
|
||||
padding: $lgn-header-padding;
|
||||
width: 100%;
|
||||
|
||||
.lgn-logo {
|
||||
height: 43px;
|
||||
width: 160px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import './header.scss';
|
||||
|
||||
@mixin lgn-header-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-header-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-header-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
|
||||
.lgn-logo {
|
||||
background: _lgn-get-logo-src($config);
|
||||
background-position: auto;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@function _lgn-get-logo-src($config) {
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
@return if($is-dark-theme, url('../logo-light.svg') no-repeat, url('../logo-dark.svg') no-repeat);
|
||||
// @return if($is-dark-theme, url('../'+attr(sourcelight))/*url('../logo-light.svg')*/ no-repeat, url('../'+attr(sourcedark))/*url('../logo-dark.svg')*/ no-repeat);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './identity_provider_base.scss';
|
||||
|
||||
.lgn-idp {
|
||||
@include lgn-idp-base;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
$lgn-idp-margin: .5rem 0;
|
||||
$lgn-idp-padding: 0 1px;
|
||||
$lgn-idp-provider-name-line-height: 36px;
|
||||
$lgn-idp-border-radius: .5rem;
|
||||
$googlelogosource: '../../../images/idp/google';
|
||||
|
||||
@mixin lgn-idp-base {
|
||||
display: block;
|
||||
margin: $lgn-idp-margin;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: $lgn-idp-padding;
|
||||
border-radius: $lgn-idp-border-radius;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
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 {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-image: url($googlelogosource + '.png');
|
||||
background-size: 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@import './identity_provider.scss';
|
||||
|
||||
@mixin lgn-idp-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-idp-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-idp-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-idp {
|
||||
border-color: lgn-color($foreground, divider);
|
||||
|
||||
@include lgn-idp-elevation(1, $config);
|
||||
|
||||
&:not([disabled]):active {
|
||||
@include lgn-idp-elevation(8, $config);
|
||||
}
|
||||
|
||||
&.google {
|
||||
color: lgn-color($foreground, google-text);
|
||||
background-color: lgn-color($background, google);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-idp-elevation($zValue, $config, $opacity: $lgn-elevation-opacity) {
|
||||
$foreground: map-get($config, foreground);
|
||||
$elevation-color: map-get($foreground, elevation);
|
||||
$elevation-color-or-default: if(
|
||||
$elevation-color == null,
|
||||
$lgn-elevation-color,
|
||||
$elevation-color
|
||||
);
|
||||
|
||||
@include lgn-elevation($zValue, $elevation-color-or-default, $opacity);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@import './input_base.scss';
|
||||
|
||||
input:not([type=radio]):not([type=checkbox]),
|
||||
.lgn-input {
|
||||
@include lgn-input-base;
|
||||
}
|
||||
|
||||
// use seme base styling for select as input
|
||||
select, .lgn-select {
|
||||
@include lgn-input-base;
|
||||
}
|
||||
|
||||
.lgn-suffix-wrapper {
|
||||
position: relative;
|
||||
|
||||
[lgnSuffix] {
|
||||
position: absolute;
|
||||
right: .5rem;
|
||||
top: 9px;
|
||||
height: inherit;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
$lgn-input-padding-start: 10px !default;
|
||||
$lgn-input-padding: 10px !default;
|
||||
$lgn-input-margin: 0 0 2px 0 !default;
|
||||
$lgn-input-line-height: 40px !default;
|
||||
$lgn-input-border-radius: 4px !default;
|
||||
$lgn-input-border-width: 1px !default;
|
||||
$lgn-input-placeholder-font-size: 14px !default;
|
||||
|
||||
@mixin lgn-input-base {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding-inline-start: $lgn-input-padding-start;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
cursor: text;
|
||||
border-radius: $lgn-input-border-radius;
|
||||
transform: all .2 linear;
|
||||
font-size: 1rem;
|
||||
border-style: solid;
|
||||
border-width: $lgn-input-border-width;
|
||||
height: $lgn-input-line-height;
|
||||
padding: $lgn-input-padding;
|
||||
transition: border-color .2s ease-in-out;
|
||||
width: 100%;
|
||||
margin: $lgn-input-margin;
|
||||
|
||||
&::placeholder {
|
||||
font-size: $lgn-input-placeholder-font-size;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './input.scss';
|
||||
|
||||
@mixin lgn-input-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-input-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-input-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-input:not([disabled]),
|
||||
select:not([disabled]), .lgn-select:not([disabled]) {
|
||||
border-color: lgn-color($foreground, input-border);
|
||||
}
|
||||
|
||||
.lgn-input,
|
||||
select, .lgn-select {
|
||||
color: lgn-color($foreground, text);
|
||||
background-color: lgn-color($background, input);
|
||||
|
||||
&:hover {
|
||||
border-color: lgn-color($foreground, input-border-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include _lgn-input-theme-property($config, 'border-color', default);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include _lgn-input-theme-property($config, 'border-color', default);
|
||||
}
|
||||
|
||||
// overwrite if state is warn
|
||||
&[color='warn'] {
|
||||
border-color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-input::placeholder,
|
||||
select::placeholder,
|
||||
.lgn-select::placeholder {
|
||||
color: lgn-color($foreground, input-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-input-theme-property($theme, $property, $hue) {
|
||||
$primary: map-get($theme, primary);
|
||||
#{$property}: lgn-color($primary, $hue);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './label_base.scss';
|
||||
|
||||
.lgn-label {
|
||||
@include lgn-label-base;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
$lgn-label-font-size: 12px !default;
|
||||
$lgn-label-margin: 0 0 2px 0;
|
||||
$lgn-label-font-weight: 400;
|
||||
|
||||
@mixin lgn-label-base {
|
||||
display: block;
|
||||
font-size: $lgn-label-font-size;
|
||||
transition: color .2s ease;
|
||||
margin: $lgn-label-margin;
|
||||
font-weight: $lgn-label-font-weight;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './label.scss';
|
||||
|
||||
@mixin lgn-label-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'lgn-label') {
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-label-color($color);
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin lgn-label-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-label {
|
||||
color: lgn-color($foreground, label);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './list_base.scss';
|
||||
|
||||
.lgn-list, ul {
|
||||
@include lgn-list-base;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@mixin lgn-list-base {
|
||||
&.lgn-policy {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 4px 0;
|
||||
font-style: italic;
|
||||
|
||||
i {
|
||||
margin: 0 .5rem;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.lgn-no-dots) {
|
||||
li::before {
|
||||
content: "\2022";
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-left: -20px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.lgn-no-dots {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './list.scss';
|
||||
|
||||
@mixin lgn-list-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-list-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-list-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
.lgn-list, ul {
|
||||
li::before {
|
||||
color: lgn-color($primary, default);
|
||||
}
|
||||
|
||||
li i {
|
||||
&.lgn-warn {
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
|
||||
&.lgn-valid {
|
||||
color: #85d996;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import './progress_bar_base.scss';
|
||||
|
||||
.lgn-progress-bar {
|
||||
@include lgn-progress-bar-base;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@mixin lgn-progress-bar-base {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './progress_bar.scss';
|
||||
|
||||
@mixin lgn-progress-bar-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-progress-bar-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-progress-bar-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-progress-bar {
|
||||
border-color: lgn-color($foreground, input-border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.lgn-qrcode {
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin: 1rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
svg {
|
||||
margin: auto;
|
||||
display: block;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@import './qrcode.scss';
|
||||
|
||||
@mixin lgn-qrcode-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-qrcode-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-qrcode-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-qrcode {
|
||||
svg {
|
||||
background: lgn-color($background, qrcode);
|
||||
}
|
||||
|
||||
svg rect.color {
|
||||
fill: lgn-color($foreground, qrcode);
|
||||
}
|
||||
|
||||
svg rect.bg-color {
|
||||
fill: lgn-color($background, qrcode);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './radio_base.scss';
|
||||
|
||||
.lgn-radio {
|
||||
@include lgn-radio-base;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
$lgn-radio-font-size: 14px !default;
|
||||
$lgn-radio-margin: 0 0 10px;
|
||||
$lgn-radio-font-weight: 400;
|
||||
$lgn-radio-size: 20px;
|
||||
$lgn-radio-checked-size: 10px;
|
||||
$lgn-radio-ripple-size: 15px;
|
||||
$lgn-radio-label-padding: 0 0 0 ($lgn-radio-size + 10px);
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 15px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-radio-base {
|
||||
outline: none;
|
||||
margin: 16px 0;
|
||||
display: inline-block;
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
height: $lgn-radio-size;
|
||||
position: relative;
|
||||
padding: $lgn-radio-label-padding;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
padding-top: 2px;
|
||||
outline: none;
|
||||
font-size: $lgn-radio-font-size;
|
||||
line-height: 16px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
transition: all .3s ease;
|
||||
transition-property: transform, border-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: $lgn-radio-size;
|
||||
height: $lgn-radio-size;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2;
|
||||
left: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2;
|
||||
width: $lgn-radio-checked-size;
|
||||
height: $lgn-radio-checked-size;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
outline: none;
|
||||
|
||||
&:checked + label::before {
|
||||
animation: ripple .2s linear forwards;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&:focus + label {
|
||||
opacity: 1;
|
||||
// outline-width: 2px;
|
||||
// outline-style: solid;
|
||||
// outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ label {
|
||||
cursor: not-allowed;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './radio.scss';
|
||||
|
||||
@mixin lgn-radio-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-radio-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-radio-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
label {
|
||||
&::before {
|
||||
border-color: lgn-color($foreground, radio-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: lgn-color($primary, default);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
opacity: 0;
|
||||
|
||||
&:checked + label::before {
|
||||
border-color: lgn-color($primary, default);
|
||||
}
|
||||
|
||||
&:focus + label {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ label::before {
|
||||
border-color: lgn-color($background, disabled-button);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label::before {
|
||||
color: lgn-color($background, disabled-selected-button);;
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
background: lgn-color($background, disabled-selected-button);;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
$column-gap: .5rem;
|
||||
|
||||
.lgn-register {
|
||||
.double-col {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -.5rem;
|
||||
|
||||
.lgn-field {
|
||||
margin: 0 $column-gap;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-field {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './select_base.scss';
|
||||
|
||||
.lgn-select, select {
|
||||
@include lgn-select-base;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@mixin lgn-select-base {
|
||||
// background-image: url(select_arrow.svg);
|
||||
// background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 50%;
|
||||
color: white;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './select.scss';
|
||||
|
||||
@mixin lgn-select-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-select-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-select-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
.lgn-select, select {
|
||||
background-image: svg-icon($is-dark-theme);
|
||||
}
|
||||
}
|
||||
|
||||
@function svg-icon($darktheme) {
|
||||
// @return url('../select_arrow_dark.svg');
|
||||
@return if($darktheme, url('../select_arrow_dark.svg'),url('../select_arrow_light.svg'));
|
||||
// @return url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 448" enable-background="new 0 0 256 448"><path class="arrow" d="M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z"/></svg>');
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import './success_label_base.scss';
|
||||
|
||||
.lgn-success-label {
|
||||
color: #0e6245;
|
||||
background: #cbf4c9;
|
||||
border-radius: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
$lgn-success-label-padding: .5rem;
|
||||
$lgn-success-label-border-radius: .5rem;
|
||||
|
||||
|
||||
@mixin lgn-success-label-base {
|
||||
border-radius: $lgn-success-label-border-radius;
|
||||
padding: $lgn-success-label-padding;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './success_label.scss';
|
||||
|
||||
@mixin lgn-success-label-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-success-label-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-success-label-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
|
||||
.lgn-success-label {
|
||||
color: if($is-dark-theme, #cbf4c9, #0e6245);
|
||||
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@import '../core/core.scss';
|
||||
@import '../footer/footer_theme.scss';
|
||||
@import '../header/header_theme.scss';
|
||||
@import '../button/button_theme.scss';
|
||||
@import '../input/input_theme.scss';
|
||||
@import '../label/label_theme.scss';
|
||||
@import '../radio/radio_theme.scss';
|
||||
@import '../a/a_theme.scss';
|
||||
@import '../identity_provider/identity_provider_theme.scss';
|
||||
@import '../error/error_theme.scss';
|
||||
@import '../qrcode/qrcode_theme.scss';
|
||||
@import '../container/container_theme.scss';
|
||||
@import '../account_selection/account_selection_theme.scss';
|
||||
@import '../avatar/avatar_theme.scss';
|
||||
@import '../checkbox/checkbox_theme.scss';
|
||||
@import '../select/select_theme.scss';
|
||||
@import '../list/list_theme.scss';
|
||||
@import '../typography/typography.scss';
|
||||
@import '../success_label/success_label_theme.scss';
|
||||
@import './theming';
|
||||
|
||||
@mixin zitadel-lgn-theme($theme-or-color-config) {
|
||||
@include lgn-core-theme($theme-or-color-config);
|
||||
@include lgn-header-theme($theme-or-color-config);
|
||||
@include lgn-button-theme($theme-or-color-config);
|
||||
@include lgn-input-theme($theme-or-color-config);
|
||||
@include lgn-radio-theme($theme-or-color-config);
|
||||
@include lgn-checkbox-theme($theme-or-color-config);
|
||||
@include lgn-label-theme($theme-or-color-config);
|
||||
@include lgn-footer-theme($theme-or-color-config);
|
||||
@include lgn-a-theme($theme-or-color-config);
|
||||
@include lgn-error-theme($theme-or-color-config);
|
||||
@include lgn-qrcode-theme($theme-or-color-config);
|
||||
@include lgn-container-theme($theme-or-color-config);
|
||||
@include lgn-account-selection-theme($theme-or-color-config);
|
||||
@include lgn-avatar-theme($theme-or-color-config);
|
||||
@include lgn-select-theme($theme-or-color-config);
|
||||
@include lgn-list-theme($theme-or-color-config);
|
||||
@include lgn-idp-theme($theme-or-color-config);
|
||||
@include lgn-success-label-theme($theme-or-color-config);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
$dark-primary-text: rgba(black, 0.87);
|
||||
$dark-secondary-text: rgba(black, 0.54);
|
||||
$dark-disabled-text: rgba(black, 0.38);
|
||||
$dark-dividers: rgba(black, 0.12);
|
||||
$dark-focused: rgba(black, 0.12);
|
||||
$dark-input-border: #403e3e;
|
||||
$dark-input-border-hover: #aeafb1;
|
||||
|
||||
$light-primary-text: white;
|
||||
$light-secondary-text: rgba(white, 0.7);
|
||||
$light-disabled-text: rgba(white, 0.5);
|
||||
$light-dividers: rgba(white, 0.12);
|
||||
$light-focused: rgba(white, 0.12);
|
||||
$light-input-border: #00000040;
|
||||
$light-input-border-hover: #1a1b1b;
|
||||
|
||||
$lgn-dark-brand: (
|
||||
50: #fff,
|
||||
100: #dde6f3,
|
||||
200: #b4c9e4,
|
||||
300: #7fa3d1,
|
||||
400: #6992c9,
|
||||
500: #5282c1,
|
||||
600: #4072b4,
|
||||
700: #38649d,
|
||||
800: #305687,
|
||||
900: #284770,
|
||||
A100: #fff,
|
||||
A200: #dde6f3,
|
||||
A300: #6992c9,
|
||||
A400: #38649d,
|
||||
A500: #666,
|
||||
A600: #fff,
|
||||
A700: #8795a1,
|
||||
A800: #2d2e30,
|
||||
A900: #212224,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-light-brand: (
|
||||
50: #eaedfa,
|
||||
100: #ccd2f2,
|
||||
200: #aab4ea,
|
||||
300: #8796e1,
|
||||
400: #6e80da,
|
||||
500: #5469d4,
|
||||
600: #4d61cf,
|
||||
700: #4356c9,
|
||||
800: #3a4cc3,
|
||||
900: #293bb9,
|
||||
A100: #f9faff,
|
||||
A200: #c6ccff,
|
||||
A300: #939fff,
|
||||
A400: #7a88ff,
|
||||
A500: #333,
|
||||
A600: #000,
|
||||
A700: #8795a1,
|
||||
A800: white,
|
||||
A900: #fafafa,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
// skip accent color for first gen theming
|
||||
// $lgn-accent-color: (
|
||||
// 50: #ebf4f2,
|
||||
// 100: #cce3de,
|
||||
// 200: #abd1c9,
|
||||
// 300: #89bfb3,
|
||||
// 400: #6fb1a2,
|
||||
// 500: #56a392,
|
||||
// 600: #4f9b8a,
|
||||
// 700: #45917f,
|
||||
// 800: #3c8875,
|
||||
// 900: #2b7763,
|
||||
// A100: #beffed,
|
||||
// A200: #8bffde,
|
||||
// A400: #58ffd0,
|
||||
// A700: #3effc9,
|
||||
// contrast: (
|
||||
// 50: $dark-primary-text,
|
||||
// 100: $dark-primary-text,
|
||||
// 200: $dark-primary-text,
|
||||
// 300: $dark-primary-text,
|
||||
// 400: $dark-primary-text,
|
||||
// 500: $light-primary-text,
|
||||
// 600: $light-primary-text,
|
||||
// 700: $light-primary-text,
|
||||
// 800: $light-primary-text,
|
||||
// 900: $light-primary-text,
|
||||
// A100: $dark-primary-text,
|
||||
// A200: $light-primary-text,
|
||||
// A400: $light-primary-text,
|
||||
// A700: $light-primary-text,
|
||||
// )
|
||||
// );
|
||||
|
||||
$lgn-warn: (
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
200: #ef9a9a,
|
||||
300: #e57373,
|
||||
400: #ef5350,
|
||||
500: #f44336,
|
||||
600: #e53935,
|
||||
700: #d32f2f,
|
||||
800: #c62828,
|
||||
900: #b71c1c,
|
||||
A100: #ff8a80,
|
||||
A200: #ff5252,
|
||||
A400: #ff1744,
|
||||
A700: #d50000,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-grey: (
|
||||
50: #fafafa,
|
||||
100: #f5f5f5,
|
||||
200: #eeeeee,
|
||||
300: #e0e0e0,
|
||||
400: #bdbdbd,
|
||||
500: #9e9e9e,
|
||||
600: #757575,
|
||||
700: #616161,
|
||||
800: #424242,
|
||||
900: #212121,
|
||||
A100: #ffffff,
|
||||
A200: #eeeeee,
|
||||
A400: #bdbdbd,
|
||||
A700: #616161,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-light-theme-background: (
|
||||
background: map-get($lgn-grey, 50),
|
||||
hover: rgba(black, 0.04),
|
||||
disabled-button: rgba(black, 0.12),
|
||||
raised-button: white,
|
||||
focused-button: $dark-focused,
|
||||
selected-button: map-get($lgn-grey, 300),
|
||||
selected-disabled-button: map-get($lgn-grey, 400),
|
||||
tooltip: map-get($lgn-grey, 700),
|
||||
input: #fafafa50,
|
||||
footer: #fafafa,
|
||||
qrcode: #fafafa, // use black ground on white background because inverted qrcode colors are not allowed
|
||||
account-selector-hover: rgba(black, 0.02),
|
||||
account-selector-active: rgba(black, 0.05),
|
||||
google: #ffffff,
|
||||
);
|
||||
|
||||
$lgn-dark-theme-background: (
|
||||
background: #212224,
|
||||
hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
|
||||
disabled-button: rgba(white, 0.12),
|
||||
raised-button: map-get($lgn-grey, 800),
|
||||
focused-button: $light-focused,
|
||||
selected-button: map-get($lgn-grey, 900),
|
||||
selected-disabled-button: map-get($lgn-grey, 800),
|
||||
tooltip: map-get($lgn-grey, 700),
|
||||
input: rgba(black, .2),
|
||||
footer: #212224,
|
||||
qrcode: white, // needs white background to recognize borders,
|
||||
account-selector-hover: rgba(white, 0.02),
|
||||
account-selector-active: rgba(white, 0.05),
|
||||
google: #ffffff,
|
||||
);
|
||||
|
||||
$lgn-light-theme-foreground: (
|
||||
footer-links: map-get($lgn-light-brand, 500),
|
||||
footer-line: #e3e8ee,
|
||||
base: black,
|
||||
input-border: $light-input-border,
|
||||
radio-border: $light-input-border,
|
||||
input-border-hover: $light-input-border-hover,
|
||||
input-placeholder: map-get($lgn-grey, 600),
|
||||
label: map-get($lgn-grey, 600),//#697386
|
||||
divider: $dark-dividers,
|
||||
disabled: $dark-disabled-text,
|
||||
disabled-button: rgba(black, 0.26),
|
||||
elevation: black,
|
||||
secondary-text: $dark-secondary-text,
|
||||
icon: rgba(black, 0.54),
|
||||
text: rgba(black, 0.87),
|
||||
qrcode: black,
|
||||
google-text: #8b8d8d,
|
||||
);
|
||||
|
||||
$lgn-dark-theme-foreground: (
|
||||
footer-links: map-get($lgn-grey, 500),
|
||||
footer-line: #303131,
|
||||
base: white,
|
||||
input-border: $dark-input-border,
|
||||
radio-border: $dark-input-border,
|
||||
input-border-hover: $dark-input-border-hover,
|
||||
input-placeholder: map-get($lgn-grey, 600),
|
||||
label: map-get($lgn-grey, 600),// #8795a1,
|
||||
divider: $light-dividers,
|
||||
disabled: $light-disabled-text,
|
||||
disabled-button: rgba(white, 0.3),
|
||||
elevation: black,
|
||||
secondary-text: $light-secondary-text,
|
||||
icon: white,
|
||||
text: white,
|
||||
qrcode: black,
|
||||
google-text: #8b8d8d,
|
||||
);
|
||||
@@ -0,0 +1,217 @@
|
||||
@import 'palette';
|
||||
|
||||
// For a given hue in a palette, return the contrast color from the map of contrast palettes.
|
||||
// @param $color-map
|
||||
// @param $hue
|
||||
@function lgn-contrast($palette, $hue) {
|
||||
@return map-get(map-get($palette, contrast), $hue);
|
||||
}
|
||||
|
||||
// add contrast colors to the palette to display text on buttons or the user avatar
|
||||
@function lgn-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
|
||||
$result: map-merge($base-palette, (
|
||||
default: map-get($base-palette, $default),
|
||||
lighter: map-get($base-palette, $lighter),
|
||||
darker: map-get($base-palette, $darker),
|
||||
text: map-get($base-palette, $text),
|
||||
|
||||
default-contrast: lgn-contrast($base-palette, $default),
|
||||
lighter-contrast: lgn-contrast($base-palette, $lighter),
|
||||
darker-contrast: lgn-contrast($base-palette, $darker)
|
||||
));
|
||||
|
||||
// For each hue in the palette, add a "-contrast" color to the map.
|
||||
@each $hue, $color in $base-palette {
|
||||
$result: map-merge($result, (
|
||||
'#{$hue}-contrast': lgn-contrast($base-palette, $hue)
|
||||
));
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
@function _lgn-create-light-color-config($primary, $accent, $warn: null) {
|
||||
@return (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: if($warn != null, $warn, lgn-palette($lgn-warn)),
|
||||
is-dark: false,
|
||||
foreground: $lgn-light-theme-foreground,
|
||||
background: $lgn-light-theme-background,
|
||||
);
|
||||
}
|
||||
|
||||
@function _lgn-create-dark-color-config($primary, $accent, $warn: null) {
|
||||
@return (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: if($warn != null, $warn, lgn-palette($lgn-warn)),
|
||||
is-dark: true,
|
||||
foreground: $lgn-dark-theme-foreground,
|
||||
background: $lgn-dark-theme-background,
|
||||
);
|
||||
}
|
||||
|
||||
@function lgn-light-theme($primary, $accent: null, $warn: lgn-palette($lgn-warn)) {
|
||||
@if $accent != null {
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme((
|
||||
_is-legacy-theme: true,
|
||||
color: _lgn-create-light-color-config($primary, $accent, $warn),
|
||||
)));
|
||||
}
|
||||
|
||||
$result: $primary;
|
||||
@if map-get($primary, color) {
|
||||
$color-settings: map-get($primary, color);
|
||||
$primary: map-get($color-settings, primary);
|
||||
$accent: map-get($color-settings, accent);
|
||||
$warn: map-get($color-settings, warn);
|
||||
$result: map-merge($result, (color: _lgn-create-light-color-config($primary, $accent, $warn)));
|
||||
}
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme($result));
|
||||
}
|
||||
|
||||
@function lgn-dark-theme($primary, $accent: null, $warn: lgn-palette($lgn-warn)) {
|
||||
@if $accent != null {
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme((
|
||||
_is-legacy-theme: true,
|
||||
color: _lgn-create-dark-color-config($primary, $accent, $warn),
|
||||
)));
|
||||
}
|
||||
|
||||
$result: $primary;
|
||||
@if map-get($primary, color) {
|
||||
$color-settings: map-get($primary, color);
|
||||
$primary: map-get($color-settings, primary);
|
||||
$accent: map-get($color-settings, accent);
|
||||
$warn: map-get($color-settings, warn);
|
||||
$result: map-merge($result, (color: _lgn-create-dark-color-config($primary, $accent, $warn)));
|
||||
}
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme($result));
|
||||
}
|
||||
|
||||
/// Gets the color configuration from the given theme or configuration.
|
||||
@function lgn-get-color-config($theme, $default: null) {
|
||||
// If a configuration has been passed, return the config directly.
|
||||
@if not lgn-private-is-theme-object($theme) {
|
||||
@return $theme;
|
||||
}
|
||||
@if lgn-private-is-legacy-constructed-theme($theme) {
|
||||
@return $theme;
|
||||
}
|
||||
@if map-has-key($theme, color) {
|
||||
@return map-get($theme, color);
|
||||
}
|
||||
@return $default;
|
||||
}
|
||||
|
||||
@function lgn-private-create-backwards-compatibility-theme($theme) {
|
||||
@if not map-get($theme, color) {
|
||||
@return $theme;
|
||||
}
|
||||
$color: map-get($theme, color);
|
||||
@return map-merge($theme, $color);
|
||||
}
|
||||
|
||||
// Checks whether the given value resolves to a theme object. Theme objects are always
|
||||
// of type `map` and can optionally only specify `color`, `density` or `typography`.
|
||||
@function lgn-private-is-theme-object($value) {
|
||||
@return type-of($value) == 'map' and (
|
||||
map-has-key($value, color) or
|
||||
map-has-key($value, density) or
|
||||
map-has-key($value, typography) or
|
||||
length($value) == 0
|
||||
);
|
||||
}
|
||||
|
||||
// Gets the theme from the given value that is either already a theme, or a color configuration.
|
||||
// This handles the legacy case where developers pass a color configuration directly to the
|
||||
// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed
|
||||
// the color configuration directly to the theme mixins. This can be still the case if developers
|
||||
// construct a theme manually and pass it to a theme. We support this for backwards compatibility.
|
||||
// TODO(devversion): remove this in the future. Constructing themes manually is rare,
|
||||
// and the code can be easily updated to the new API.
|
||||
@function lgn-private-legacy-get-theme($theme-or-color-config) {
|
||||
@if lgn-private-is-theme-object($theme-or-color-config) {
|
||||
@return $theme-or-color-config;
|
||||
}
|
||||
@return lgn-private-create-backwards-compatibility-theme((
|
||||
_is-legacy-theme: true,
|
||||
color: $theme-or-color-config
|
||||
));
|
||||
}
|
||||
|
||||
// Note that the `$theme.primary` key does usually not exist since the color configuration
|
||||
// is stored in `$theme.color` which contains a property for `primary`. This method copies
|
||||
// the map from `$theme.color` to `$theme` for backwards compatibility.
|
||||
@function lgn-private-create-backwards-compatibility-theme($theme) {
|
||||
@if not map-get($theme, color) {
|
||||
@return $theme;
|
||||
}
|
||||
$color: map-get($theme, color);
|
||||
@return map-merge($theme, $color);
|
||||
}
|
||||
|
||||
// Validates the specified theme by ensuring that the optional color config defines
|
||||
// a primary, accent and warn palette. Returns the theme if no failures were found.
|
||||
@function _lgn-validate-theme($theme) {
|
||||
@if map-get($theme, color) {
|
||||
$color: map-get($theme, color);
|
||||
@if not map-get($color, primary) {
|
||||
@error 'Theme does not define a valid "primary" palette.';
|
||||
}
|
||||
@else if not map-get($color, accent) {
|
||||
@error 'Theme does not define a valid "accent" palette.';
|
||||
}
|
||||
@else if not map-get($color, warn) {
|
||||
@error 'Theme does not define a valid "warn" palette.';
|
||||
}
|
||||
}
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
// Checks whether a given value corresponds to a legacy constructed theme.
|
||||
@function lgn-private-is-legacy-constructed-theme($value) {
|
||||
@return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
|
||||
}
|
||||
|
||||
// Gets a color from a theme palette (the output of mat-palette).
|
||||
// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
|
||||
// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
|
||||
//
|
||||
// @param $color-map The theme palette (output of mat-palette).
|
||||
// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
|
||||
// be treated as opacity.
|
||||
// @param $opacity The alpha channel value for the color.
|
||||
@function lgn-color($palette, $hue: default, $opacity: null) {
|
||||
// If hueKey is a number between zero and one, then it actually contains an
|
||||
// opacity value, so recall this function with the default hue and that given opacity.
|
||||
@if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
|
||||
@return lgn-color($palette, default, $hue);
|
||||
}
|
||||
|
||||
$color: map-get($palette, $hue);
|
||||
|
||||
@if (type-of($color) != color) {
|
||||
// If the $color resolved to something different from a color (e.g. a CSS variable),
|
||||
// we can't apply the opacity anyway so we return the value as is, otherwise Sass can
|
||||
// throw an error or output something invalid.
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@return rgba($color, if($opacity == null, opacity($color), $opacity));
|
||||
}
|
||||
|
||||
/// Gets the typography configuration from the given theme or configuration.
|
||||
@function lgn-get-typography-config($theme-or-config, $default: null) {
|
||||
// If a configuration has been passed, return the config directly.
|
||||
@if not lgn-private-is-theme-object($theme-or-config) {
|
||||
@return $theme-or-config;
|
||||
}
|
||||
// In case a theme has been passed, extract the configuration if present,
|
||||
// or fall back to the default typography config.
|
||||
@if (map-has-key($theme-or-config, typography)) {
|
||||
@return map-get($theme-or-config, typography);
|
||||
}
|
||||
@return $default;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@font-face {
|
||||
font-family: Aileron;
|
||||
src: url(../../../fonts/ailerons/ailerons.otf ) format('opentype');
|
||||
}
|
||||
@@ -1,10 +1,3 @@
|
||||
//Aileron
|
||||
@font-face {
|
||||
font-family: Aileron;
|
||||
src: url(../../../fonts/ailerons/ailerons.otf ) format('opentype');
|
||||
}
|
||||
|
||||
//Lato
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Thin.ttf ) format('truetype');
|
||||
@@ -68,17 +61,4 @@
|
||||
src: url(../../../fonts/lato/Lato-BlackItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
//Material Icons
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../../../fonts/material/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(../../../fonts/material/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(../../../fonts/material/MaterialIcons-Regular.woff) format('woff'),
|
||||
url(../../../fonts/material/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-Bold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-BoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-Italic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-Regular.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Black.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-BlackItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Bold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-BoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraBold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraBoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraLight.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraLightItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Light.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-LightItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Medium.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-MediumItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Regular.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Italic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-SemiBold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-SemiBoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Thin.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ThinItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Black.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-BlackItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Bold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-BoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Regular.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Italic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Light.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-LightItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Medium.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-MediumItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Thin.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-ThinItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
@import './faces/ailerons_font_faces.scss';
|
||||
@import './faces/lato_font_faces.scss';
|
||||
@import './faces/roboto_font_faces.scss';
|
||||
@import './faces/raleway_font_faces.scss';
|
||||
@import './faces/pt_sans_font_faces.scss';
|
||||
|
||||
@mixin zitadel-lgn-typography($config-or-theme: null) {
|
||||
$config: if(lgn-private-is-theme-object($config-or-theme),
|
||||
lgn-get-typography-config($config-or-theme), $config-or-theme);
|
||||
|
||||
@if not $config {
|
||||
$config: lgn-typography-config();
|
||||
}
|
||||
|
||||
@include lgn-base-typography($config);
|
||||
}
|
||||
|
||||
@function lgn-typography-config(
|
||||
$font-family: 'Lato, -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
$display-4: lgn-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
|
||||
$display-3: lgn-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
|
||||
$display-2: lgn-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
|
||||
$display-1: lgn-typography-level(34px, 40px, 400),
|
||||
$headline: lgn-typography-level(24px, 32px, 400),
|
||||
$title: lgn-typography-level(20px, 32px, 500),
|
||||
$subheading-2: lgn-typography-level(16px, 28px, 400),
|
||||
$subheading-1: lgn-typography-level(15px, 24px, 400),
|
||||
$body-2: lgn-typography-level(14px, 24px, 500),
|
||||
$body-1: lgn-typography-level(14px, 20px, 400),
|
||||
$caption-1: lgn-typography-level(12px, 20px, 400),
|
||||
$button: lgn-typography-level(14px, 36px, 500),
|
||||
$input: lgn-typography-level(inherit, 1.125, 400),
|
||||
) {
|
||||
$config: (
|
||||
display-4: $display-4,
|
||||
display-3: $display-3,
|
||||
display-2: $display-2,
|
||||
display-1: $display-1,
|
||||
headline: $headline,
|
||||
title: $title,
|
||||
subheading-2: $subheading-2,
|
||||
subheading-1: $subheading-1,
|
||||
body-2: $body-2,
|
||||
body-1: $body-1,
|
||||
caption-1: $caption-1,
|
||||
button: $button,
|
||||
input: $input,
|
||||
);
|
||||
|
||||
// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
|
||||
@each $key, $level in $config {
|
||||
@if map-get($level, font-family) == null {
|
||||
$new-level: map-merge($level, (font-family: $font-family));
|
||||
$config: map-merge($config, ($key: $new-level));
|
||||
}
|
||||
}
|
||||
|
||||
// Add the base font family to the config.
|
||||
@return map-merge($config, (font-family: $font-family));
|
||||
}
|
||||
|
||||
@function lgn-typography-level(
|
||||
$font-size,
|
||||
$line-height: $font-size,
|
||||
$font-weight: 400,
|
||||
$font-family: null,
|
||||
$letter-spacing: normal) {
|
||||
|
||||
@return (
|
||||
font-size: $font-size,
|
||||
line-height: $line-height,
|
||||
font-weight: $font-weight,
|
||||
font-family: $font-family,
|
||||
letter-spacing: $letter-spacing
|
||||
);
|
||||
}
|
||||
|
||||
// Converts a typography level into CSS styles.
|
||||
@mixin lgn-typography-level-to-styles($config, $level) {
|
||||
$font-size: lgn-font-size($config, $level);
|
||||
$font-weight: lgn-font-weight($config, $level);
|
||||
$line-height: lgn-line-height($config, $level);
|
||||
$font-family: lgn-font-family($config, $level);
|
||||
|
||||
@include lgn-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
|
||||
letter-spacing: lgn-letter-spacing($config, $level);
|
||||
}
|
||||
|
||||
// Utility for fetching a nested value from a typography config.
|
||||
@function _lgn-get-type-value($config, $level, $name) {
|
||||
@return map-get(map-get($config, $level), $name);
|
||||
}
|
||||
|
||||
// Gets the font size for a level inside a typography config.
|
||||
@function lgn-font-size($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, font-size);
|
||||
}
|
||||
|
||||
// Gets the line height for a level inside a typography config.
|
||||
@function lgn-line-height($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, line-height);
|
||||
}
|
||||
|
||||
// Gets the font weight for a level inside a typography config.
|
||||
@function lgn-font-weight($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, font-weight);
|
||||
}
|
||||
|
||||
// Gets the letter spacing for a level inside a typography config.
|
||||
@function lgn-letter-spacing($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, letter-spacing);
|
||||
}
|
||||
|
||||
@function lgn-font-family($config, $level: null) {
|
||||
$font-family: map-get($config, font-family);
|
||||
|
||||
@if $level != null {
|
||||
$font-family: _lgn-get-type-value($config, $level, font-family);
|
||||
}
|
||||
|
||||
// Guard against unquoting non-string values, because it's deprecated.
|
||||
@return if(type-of($font-family) == string, unquote($font-family), $font-family);
|
||||
}
|
||||
|
||||
// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
|
||||
// the individual properties if a value that isn't allowed in the shorthand is passed in.
|
||||
@mixin lgn-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
|
||||
// If any of the values are set to `inherit`, we can't use the shorthand
|
||||
// so we fall back to passing in the individual properties.
|
||||
@if ($font-size == inherit or
|
||||
$font-weight == inherit or
|
||||
$line-height == inherit or
|
||||
$font-family == inherit or
|
||||
$font-size == null or
|
||||
$font-weight == null or
|
||||
$line-height == null or
|
||||
$font-family == null) {
|
||||
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
line-height: $line-height;
|
||||
font-family: $font-family;
|
||||
}
|
||||
@else {
|
||||
// Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
|
||||
// that we need to use interpolation for `font-size/line-height` in order to prevent
|
||||
// Sass from dividing the two values.
|
||||
font: $font-weight #{$font-size}/#{$line-height} $font-family;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-base-typography($config, $selector: '.lgn-typography') {
|
||||
h1, .lgn-headline, #{$selector} h1 {
|
||||
@include lgn-typography-level-to-styles($config, headline);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
h2, .lgn-title, #{$selector} h2 {
|
||||
@include lgn-typography-level-to-styles($config, title);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
h3, .lgn-subheading-2, #{$selector} h3 {
|
||||
@include lgn-typography-level-to-styles($config, subheading-2);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
h4, .lgn-subheading-1, #{$selector} h4 {
|
||||
@include lgn-typography-level-to-styles($config, subheading-1);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.lgn-body-strong, .lgn-body-2 {
|
||||
@include lgn-typography-level-to-styles($config, body-2);
|
||||
}
|
||||
|
||||
p, .lgn-body, .lgn-body-1, #{$selector} {
|
||||
@include lgn-typography-level-to-styles($config, body-1);
|
||||
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
button, .lgn-button, .lgn-raised-button, .lgn-stroked-button {
|
||||
@include lgn-typography-level-to-styles($config, button);
|
||||
}
|
||||
|
||||
span {
|
||||
@include lgn-typography-level-to-styles($config, body-1);
|
||||
}
|
||||
|
||||
a, .lgn-a {
|
||||
@include lgn-typography-level-to-styles($config, body-1);
|
||||
}
|
||||
|
||||
small .lgn-small, .lgn-caption {
|
||||
@include lgn-typography-level-to-styles($config, caption-1);
|
||||
}
|
||||
|
||||
label, .lgn-label, #{$selector} .lgn-label, #{$selector} label {
|
||||
@include lgn-typography-level-to-styles($config, caption-1);
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
|
||||
.lgn-display-4, #{$selector} .lgn-display-4 {
|
||||
@include lgn-typography-level-to-styles($config, display-4);
|
||||
margin: 0 0 56px;
|
||||
}
|
||||
|
||||
.lgn-display-3, #{$selector} .lgn-display-3 {
|
||||
@include lgn-typography-level-to-styles($config, display-3);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
|
||||
.lgn-display-2, #{$selector} .lgn-display-2 {
|
||||
@include lgn-typography-level-to-styles($config, display-2);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
|
||||
.lgn-display-1, #{$selector} .lgn-display-1 {
|
||||
@include lgn-typography-level-to-styles($config, display-1);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
// ----- FONTS ------------
|
||||
$standardFont: Lato;
|
||||
$headerFont: Lato;
|
||||
|
||||
// ----- LAYOUT ------------
|
||||
$inputHeight: 50px;
|
||||
$headerSize: 40px;
|
||||
$header2Size: 30px;
|
||||
$header3Size: 26px;
|
||||
$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
|
||||
|
||||
@mixin retina-background-image($file, $type, $hover, $width, $height) {
|
||||
$hovername: '';
|
||||
@if $hover {
|
||||
$hovername: '-hover';
|
||||
}
|
||||
$filename :$file + $hovername;
|
||||
background-image: url($filename + '.' + $type);
|
||||
@media #{$retina} {
|
||||
background-image: url($filename + '@2x.' + $type);
|
||||
background-size: $width $height;
|
||||
}
|
||||
}
|
||||
|
||||
// ----- DARK-THEME --------
|
||||
$backgroundColor: #282828;
|
||||
$fontColor: #BBBBC8;
|
||||
$primaryColor: #3574C6;
|
||||
$primaryColorHover: lighten($primaryColor, 10%);
|
||||
$labelColor: #898989;
|
||||
$inputBorderColor: #999999;
|
||||
$inputBackgroundColor: #252525;
|
||||
$buttonBackgroundColorHover: $inputBackgroundColor;
|
||||
$profileImgDark: "../../../images/icon-user-dark";
|
||||
$otherUserImgDark: "../../../images/icon-newuser-dark";
|
||||
$idpGoogleImg: "../../../images/idp/google";
|
||||
$idpGoogleFontColor: #FFFFFF;
|
||||
$idpGoogleBackgroundColor: #4285F4;
|
||||
$nokColor: #F20D6B;
|
||||
$okColor: #0DF279;
|
||||
$errorColor: red;
|
||||
|
||||
|
||||
|
||||
// ----- LIGHT-THEME --------
|
||||
$backgroundColorLight: #f5f5f5;
|
||||
$fontColorLight: $backgroundColor;
|
||||
$primaryColorLight: $primaryColor;
|
||||
$primaryColorHoverLight: lighten($primaryColorLight, 10%);
|
||||
$inputBackgroundColorLight: #FFFFFF;
|
||||
$buttonBackgroundColorHoverLight: $inputBackgroundColorLight;
|
||||
$profileImgLight: "../../../images/icon-user-light";
|
||||
$otherUserImgLight: "../../../images/icon-newuser-light";
|
||||
$idpGoogleImgLight: "../../../images/idp/google";
|
||||
$idpGoogleFontColorLight: #8b8d8d;
|
||||
$idpGoogleBackgroundColorLight: #FFFFFF;
|
||||
$nokColorLight: #F20D6B;
|
||||
$okColorLight: #50CA3D;
|
||||
@@ -0,0 +1,142 @@
|
||||
// This file is meant to show off a possible starting point for an organisation whitelabeling
|
||||
|
||||
@import './styles/theming/all';
|
||||
|
||||
// Include non-theme styles for core. -> mainly background of the login
|
||||
|
||||
$custom-typography:
|
||||
lgn-typography-config(
|
||||
$font-family: 'Raleway'
|
||||
);
|
||||
|
||||
@include lgn-core($custom-typography);
|
||||
$light-text: white;
|
||||
$dark-text: black;
|
||||
|
||||
$lgn-alternative-dark-brand: (
|
||||
50: #ffffff,
|
||||
100: #ffffff,
|
||||
200: #ffffff,
|
||||
300: #ffffff,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #ffffff,
|
||||
A200: #ffffff,
|
||||
A400: #ffffff,
|
||||
A700: #ffffff,
|
||||
contrast: (
|
||||
50: $light-text,
|
||||
100: $light-text,
|
||||
200: $light-text,
|
||||
300: $light-text,
|
||||
400: $light-text,
|
||||
500: $dark-text,
|
||||
600: $dark-text,
|
||||
700: $dark-text,
|
||||
800: $dark-text,
|
||||
900: $dark-text,
|
||||
A100: $light-text,
|
||||
A200: $dark-text,
|
||||
A400: $dark-text,
|
||||
A700: $dark-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-alternative-light-brand: (
|
||||
50: #e0e0e0,
|
||||
100: #b3b3b3,
|
||||
200: #808080,
|
||||
300: #4d4d4d,
|
||||
400: #262626,
|
||||
500: #000000,
|
||||
600: #000000,
|
||||
700: #000000,
|
||||
800: #000000,
|
||||
900: #000000,
|
||||
A100: #a6a6a6,
|
||||
A200: #8c8c8c,
|
||||
A400: #737373,
|
||||
A700: #666666,
|
||||
contrast: (
|
||||
50: $dark-text,
|
||||
100: $dark-text,
|
||||
200: $dark-text,
|
||||
300: $dark-text,
|
||||
400: $dark-text,
|
||||
500: $light-text,
|
||||
600: $light-text,
|
||||
700: $light-text,
|
||||
800: $light-text,
|
||||
900: $light-text,
|
||||
A100: $dark-text,
|
||||
A200: $light-text,
|
||||
A400: $light-text,
|
||||
A700: $light-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-alternative-warn: (
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
200: #ef9a9a,
|
||||
300: #e57373,
|
||||
400: #ef5350,
|
||||
500: #f44336,
|
||||
600: #e53935,
|
||||
700: #d32f2f,
|
||||
800: #c62828,
|
||||
900: #b71c1c,
|
||||
A100: #ff8a80,
|
||||
A200: #ff5252,
|
||||
A400: #ff1744,
|
||||
A700: #d50000,
|
||||
contrast: (
|
||||
50: $dark-text,
|
||||
100: $dark-text,
|
||||
200: $dark-text,
|
||||
300: $dark-text,
|
||||
400: $dark-text,
|
||||
500: $light-text,
|
||||
600: $light-text,
|
||||
700: $light-text,
|
||||
800: $light-text,
|
||||
900: $light-text,
|
||||
A100: $dark-text,
|
||||
A200: $light-text,
|
||||
A400: $light-text,
|
||||
A700: $light-text,
|
||||
)
|
||||
);
|
||||
|
||||
$light-primary: lgn-palette($lgn-alternative-light-brand);
|
||||
$light-accent: lgn-palette($lgn-alternative-light-brand);
|
||||
$light-warn: lgn-palette($lgn-alternative-warn);
|
||||
|
||||
$dark-primary: lgn-palette($lgn-alternative-dark-brand);
|
||||
$dark-accent: lgn-palette($lgn-alternative-dark-brand);
|
||||
$dark-warn: lgn-palette($lgn-alternative-warn);
|
||||
|
||||
$light-theme: lgn-light-theme($light-primary, $light-accent, $light-warn);
|
||||
$dark-theme: lgn-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
|
||||
$light-theme: lgn-light-theme((
|
||||
color: (
|
||||
primary: $light-primary,
|
||||
accent: $light-accent,
|
||||
)
|
||||
));
|
||||
|
||||
// Include all theme styles for the components.
|
||||
@include zitadel-lgn-theme($dark-theme);
|
||||
|
||||
.lgn-dark-theme {
|
||||
@include zitadel-lgn-theme($dark-theme);
|
||||
}
|
||||
|
||||
.lgn-light-theme {
|
||||
@include zitadel-lgn-theme($light-theme);
|
||||
}
|
||||
33
internal/ui/login/static/resources/themes/scss/zitadel.scss
Normal file
33
internal/ui/login/static/resources/themes/scss/zitadel.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@import './styles/theming/all';
|
||||
|
||||
// Include non-theme styles for core. -> mainly background of the login
|
||||
@include lgn-core();
|
||||
|
||||
$light-primary: lgn-palette($lgn-light-brand);
|
||||
$light-accent: lgn-palette($lgn-light-brand);
|
||||
$light-warn: lgn-palette($lgn-warn);
|
||||
|
||||
$dark-primary: lgn-palette($lgn-dark-brand);
|
||||
$dark-accent: lgn-palette($lgn-dark-brand);
|
||||
$dark-warn: lgn-palette($lgn-warn);
|
||||
|
||||
$light-theme: lgn-light-theme($light-primary, $light-accent, $light-warn);
|
||||
$dark-theme: lgn-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
|
||||
$light-theme: lgn-light-theme((
|
||||
color: (
|
||||
primary: $light-primary,
|
||||
accent: $light-accent,
|
||||
)
|
||||
));
|
||||
|
||||
// Include all theme styles for the components.
|
||||
@include zitadel-lgn-theme($dark-theme);
|
||||
|
||||
.lgn-dark-theme {
|
||||
@include zitadel-lgn-theme($dark-theme);
|
||||
}
|
||||
|
||||
.lgn-light-theme {
|
||||
@include zitadel-lgn-theme($light-theme);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@import "../variables";
|
||||
@import "variables";
|
||||
@import "../main";
|
||||
@@ -1,4 +0,0 @@
|
||||
@import "../variables";
|
||||
@import "variables";
|
||||
@import "../main";
|
||||
@import "../light";
|
||||
@@ -1,8 +0,0 @@
|
||||
$logoImgDark: "../logo-dark.png";
|
||||
$logoImgLight: "../logo-light.png";
|
||||
|
||||
$footerimgDark: "";
|
||||
$footerimgLight: "";
|
||||
|
||||
$bodyImgDark: "../flavor-spikes01-wide.png";
|
||||
$bodyImgLight: "../flavor-spikes01-wide.png";
|
||||
2119
internal/ui/login/static/resources/themes/zitadel/css/bundle.css
Normal file
2119
internal/ui/login/static/resources/themes/zitadel/css/bundle.css
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,513 +0,0 @@
|
||||
@font-face {
|
||||
font-family: Aileron;
|
||||
src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../../../fonts/material/MaterialIcons-Regular.eot);
|
||||
/* For IE6-8 */
|
||||
src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
font-family: Lato;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 0 100px 0;
|
||||
}
|
||||
body.waiting * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
font-weight: 300;
|
||||
background-color: #282828;
|
||||
color: #BBBBC8;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
background-size: contain;
|
||||
background-image: url("../flavor-spikes01-wide.png");
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #BBBBC8;
|
||||
font-family: Lato;
|
||||
font-weight: 300;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #BBBBC8;
|
||||
font-family: Lato;
|
||||
font-weight: 300;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 8px;
|
||||
}
|
||||
header .logo {
|
||||
background-image: url("../logo-dark.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 80px;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content form {
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3574C6;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
a:hover {
|
||||
color: #5b8fd3;
|
||||
}
|
||||
a.tos-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background-color: #282828;
|
||||
color: #3574C6;
|
||||
border: 1px solid #3574C6;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
button:hover, .button:hover {
|
||||
background-color: #5b8fd3;
|
||||
color: #282828;
|
||||
border: 1px solid #5b8fd3;
|
||||
}
|
||||
button.primary, .button.primary {
|
||||
background-color: #3574C6;
|
||||
color: #BBBBC8;
|
||||
border: none;
|
||||
}
|
||||
button.primary:hover, .button.primary:hover {
|
||||
background-color: #5b8fd3;
|
||||
}
|
||||
button:disabled, .button:disabled {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button:disabled:hover, .button:disabled:hover {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button.google, .button.google {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 1px;
|
||||
color: #FFFFFF;
|
||||
background-color: #4285F4;
|
||||
}
|
||||
button.google span.logo, .button.google span.logo {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-color: #FFFFFF;
|
||||
background-image: url("../../../images/idp/google.png");
|
||||
background-size: 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button.google span.provider-name, .button.google span.provider-name {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
input:not([type=radio]), select {
|
||||
background-color: #252525;
|
||||
color: #BBBBC8;
|
||||
height: 50px;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 5px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("../../../images/icon-user-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-profile .profile-image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.login-profile .names {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.login-profile .names div:first-of-type {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.login-profile .names div:nth-of-type(2) {
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
form .field {
|
||||
display: grid;
|
||||
padding: 10px 0;
|
||||
}
|
||||
form .field.radio-button {
|
||||
display: flex;
|
||||
}
|
||||
form .field.radio-button input[type=radio] {
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.radio-button label {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
padding: 3px 0 0 15px;
|
||||
width: 100%;
|
||||
}
|
||||
form .field.check-box {
|
||||
display: flex;
|
||||
}
|
||||
form .field.check-box input[type=checkbox] {
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.check-box label {
|
||||
height: 16px;
|
||||
text-transform: inherit;
|
||||
display: inline-block;
|
||||
padding: 2px 0 0 15px;
|
||||
width: 100%;
|
||||
color: #BBBBC8;
|
||||
}
|
||||
form label {
|
||||
color: #898989;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
form label span.optional {
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
}
|
||||
form .actions {
|
||||
padding: 20px 0;
|
||||
}
|
||||
form .actions .right {
|
||||
float: right;
|
||||
}
|
||||
form .actions button, form .actions a {
|
||||
margin: 10px 0;
|
||||
}
|
||||
form button.clean {
|
||||
border: none;
|
||||
height: auto;
|
||||
color: #BBBBC8;
|
||||
text-align: left;
|
||||
text-transform: unset;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
form button.clean:hover {
|
||||
border: none;
|
||||
background-color: #252525;
|
||||
}
|
||||
form button.clean * {
|
||||
font-weight: 300;
|
||||
}
|
||||
form .user-selection-list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
form button.user-selection .sessionstate {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
border-color: #999999;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-0 {
|
||||
background-color: #138D00;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-1 {
|
||||
background-color: #BC372E;
|
||||
}
|
||||
form button.user-selection > div {
|
||||
position: relative;
|
||||
}
|
||||
form button.user-selection > div.names {
|
||||
margin: 0 15px;
|
||||
}
|
||||
form button.user-selection > div.names .displayname {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form button.user-selection > div.names .loginname {
|
||||
color: #898989;
|
||||
}
|
||||
form button.user-selection:disabled {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
form button.user-selection:disabled .profile-image {
|
||||
opacity: 0.3;
|
||||
}
|
||||
form button.user-selection:disabled .sessionstate {
|
||||
background-color: #282828;
|
||||
}
|
||||
form button.user-selection:disabled .names .displayname, form button.user-selection:disabled .names .loginname {
|
||||
font-style: italic;
|
||||
color: #444444;
|
||||
}
|
||||
.user-selection + form button.other-user {
|
||||
margin-top: 80px;
|
||||
}
|
||||
form button.other-user .other-user-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark-hover@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user > div:nth-of-type(2) {
|
||||
margin: 15px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form ul#passwordcomplexity {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
form ul#passwordcomplexity li {
|
||||
flex: 1 0 50%;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
form ul#passwordcomplexity li i {
|
||||
height: 26px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
color: #0DF279;
|
||||
}
|
||||
form ul#passwordcomplexity li.invalid i {
|
||||
color: #F20D6B;
|
||||
}
|
||||
form #loginname {
|
||||
display: flex;
|
||||
}
|
||||
form #loginname .loginname-suffix {
|
||||
padding-left: 5px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
#copy-secret {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
text-align: center;
|
||||
}
|
||||
#qrcode svg rect.color {
|
||||
fill: #BBBBC8;
|
||||
}
|
||||
#qrcode svg rect.bg-color {
|
||||
fill: #282828;
|
||||
}
|
||||
|
||||
#secret .copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for IE. */
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid #F20D6B;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wa-error {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=dark.css.map */
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA,kBCIc;EDHd,OCIQ;EDHR;EACA;EACA;EAEI;;;AAIR;EACI,OCNQ;EDOR,aC/BS;EDgCT;EACA,WC7BS;ED8BT;;;AAGJ;EACI,OCdQ;EDeR,aCvCS;EDwCT;EACA,WCpCU;;;ADuCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OClDW;EDmDX;EACA;;AAEA;EACI,OCtDY;;ADyDhB;EACI;;;AAIR;EACI,kBClEc;EDmEd,OCjEW;EDkEX;EACA;EACA;EACA;EACA,QC5FU;ED6FV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBC/EY;EDgFZ,OCnFU;EDoFV;;AAGJ;EACI,kBCtFO;EDuFP,OCxFI;EDyFJ;;AACA;EACI,kBCzFQ;;AD6FhB;EACI,kBC5FW;ED6FX;;AAEA;EACI,kBChGO;EDiGP;;AAIR;EACI;EACA;EACA;EACA;EACA,OCpGa;EDqGb,kBCpGmB;;ADsGnB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAOZ;EACI,kBClImB;EDmInB,OCxIQ;EDyIR,QC9JU;ED+JV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EACA;EC9JN;;AACA;EDwJE;ICvJA;IACA;;;AD+JA;EClKF;;AACA;EDiKE;IChKA;IACA;;;;ADsKA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WC5LE;ED6LF;;AAGJ;EACI;EACA;EACA;EACA,OC/KC;;;ADqLT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OC3NA;;AD+NR;EACI,OC7NK;ED8NL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC1PI;ED2PJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBC7PW;;ADgQf;EACI;;AAIR;EACI;;AAMA;EACI;EACA;EACA;EACA;EACA,cClRO;EDmRP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OC9SP;;ADmTL;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI,kBCjUE;;ADqUF;EACI;EACA;;AAOZ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EC7VV;;AACA;EDwVM;ICvVJ;IACA;;;AD+VQ;EACI;EACA;ECpWd;;AACA;EDiWU;IChWR;IACA;;;ADsWI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OC3WN;;ADgXE;EACI,OClXL;;ADuXP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MCrZI;;ADwZR;EACI,MC1ZU;;;AD+Zd;EACI;EACA;;;AAIR;EAII;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OClcO;;;ADqcX;EACI;;;AAGJ;EACI","file":"dark.css"}
|
||||
@@ -1,651 +0,0 @@
|
||||
@font-face {
|
||||
font-family: Aileron;
|
||||
src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../../../fonts/material/MaterialIcons-Regular.eot);
|
||||
/* For IE6-8 */
|
||||
src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
font-family: Lato;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 0 100px 0;
|
||||
}
|
||||
body.waiting * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
font-weight: 300;
|
||||
background-color: #282828;
|
||||
color: #BBBBC8;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
background-size: contain;
|
||||
background-image: url("../flavor-spikes01-wide.png");
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #BBBBC8;
|
||||
font-family: Lato;
|
||||
font-weight: 300;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #BBBBC8;
|
||||
font-family: Lato;
|
||||
font-weight: 300;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 8px;
|
||||
}
|
||||
header .logo {
|
||||
background-image: url("../logo-dark.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 80px;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content form {
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3574C6;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
a:hover {
|
||||
color: #5b8fd3;
|
||||
}
|
||||
a.tos-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
background-color: #282828;
|
||||
color: #3574C6;
|
||||
border: 1px solid #3574C6;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
button:hover, .button:hover {
|
||||
background-color: #5b8fd3;
|
||||
color: #282828;
|
||||
border: 1px solid #5b8fd3;
|
||||
}
|
||||
button.primary, .button.primary {
|
||||
background-color: #3574C6;
|
||||
color: #BBBBC8;
|
||||
border: none;
|
||||
}
|
||||
button.primary:hover, .button.primary:hover {
|
||||
background-color: #5b8fd3;
|
||||
}
|
||||
button:disabled, .button:disabled {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button:disabled:hover, .button:disabled:hover {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
button.google, .button.google {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 1px;
|
||||
color: #FFFFFF;
|
||||
background-color: #4285F4;
|
||||
}
|
||||
button.google span.logo, .button.google span.logo {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-color: #FFFFFF;
|
||||
background-image: url("../../../images/idp/google.png");
|
||||
background-size: 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button.google span.provider-name, .button.google span.provider-name {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
input:not([type=radio]), select {
|
||||
background-color: #252525;
|
||||
color: #BBBBC8;
|
||||
height: 50px;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 5px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("../../../images/icon-user-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection .profile-image, .login-profile .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.user-selection:hover .profile-image, .login-profile:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-dark-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-profile .profile-image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.login-profile .names {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.login-profile .names div:first-of-type {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.login-profile .names div:nth-of-type(2) {
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
form .field {
|
||||
display: grid;
|
||||
padding: 10px 0;
|
||||
}
|
||||
form .field.radio-button {
|
||||
display: flex;
|
||||
}
|
||||
form .field.radio-button input[type=radio] {
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.radio-button label {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
padding: 3px 0 0 15px;
|
||||
width: 100%;
|
||||
}
|
||||
form .field.check-box {
|
||||
display: flex;
|
||||
}
|
||||
form .field.check-box input[type=checkbox] {
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form .field.check-box label {
|
||||
height: 16px;
|
||||
text-transform: inherit;
|
||||
display: inline-block;
|
||||
padding: 2px 0 0 15px;
|
||||
width: 100%;
|
||||
color: #BBBBC8;
|
||||
}
|
||||
form label {
|
||||
color: #898989;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
form label span.optional {
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
}
|
||||
form .actions {
|
||||
padding: 20px 0;
|
||||
}
|
||||
form .actions .right {
|
||||
float: right;
|
||||
}
|
||||
form .actions button, form .actions a {
|
||||
margin: 10px 0;
|
||||
}
|
||||
form button.clean {
|
||||
border: none;
|
||||
height: auto;
|
||||
color: #BBBBC8;
|
||||
text-align: left;
|
||||
text-transform: unset;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
form button.clean:hover {
|
||||
border: none;
|
||||
background-color: #252525;
|
||||
}
|
||||
form button.clean * {
|
||||
font-weight: 300;
|
||||
}
|
||||
form .user-selection-list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
form button.user-selection .sessionstate {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
border-color: #999999;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-0 {
|
||||
background-color: #138D00;
|
||||
}
|
||||
form button.user-selection .sessionstate.sessionstate-1 {
|
||||
background-color: #BC372E;
|
||||
}
|
||||
form button.user-selection > div {
|
||||
position: relative;
|
||||
}
|
||||
form button.user-selection > div.names {
|
||||
margin: 0 15px;
|
||||
}
|
||||
form button.user-selection > div.names .displayname {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form button.user-selection > div.names .loginname {
|
||||
color: #898989;
|
||||
}
|
||||
form button.user-selection:disabled {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
form button.user-selection:disabled .profile-image {
|
||||
opacity: 0.3;
|
||||
}
|
||||
form button.user-selection:disabled .sessionstate {
|
||||
background-color: #282828;
|
||||
}
|
||||
form button.user-selection:disabled .names .displayname, form button.user-selection:disabled .names .loginname {
|
||||
font-style: italic;
|
||||
color: #444444;
|
||||
}
|
||||
.user-selection + form button.other-user {
|
||||
margin-top: 80px;
|
||||
}
|
||||
form button.other-user .other-user-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url("../../../images/icon-newuser-dark-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
form button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-dark-hover@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
form button.other-user > div:nth-of-type(2) {
|
||||
margin: 15px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
form ul#passwordcomplexity {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
form ul#passwordcomplexity li {
|
||||
flex: 1 0 50%;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
form ul#passwordcomplexity li i {
|
||||
height: 26px;
|
||||
padding-right: 10px;
|
||||
vertical-align: middle;
|
||||
color: #0DF279;
|
||||
}
|
||||
form ul#passwordcomplexity li.invalid i {
|
||||
color: #F20D6B;
|
||||
}
|
||||
form #loginname {
|
||||
display: flex;
|
||||
}
|
||||
form #loginname .loginname-suffix {
|
||||
padding-left: 5px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
#copy-secret {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
text-align: center;
|
||||
}
|
||||
#qrcode svg rect.color {
|
||||
fill: #BBBBC8;
|
||||
}
|
||||
#qrcode svg rect.bg-color {
|
||||
fill: #282828;
|
||||
}
|
||||
|
||||
#secret .copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for IE. */
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid #F20D6B;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wa-error {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #f5f5f5;
|
||||
color: #282828;
|
||||
background-image: url("../flavor-spikes01-wide.png");
|
||||
}
|
||||
html header .logo {
|
||||
background-image: url("../logo-light.png");
|
||||
}
|
||||
html h1, html h2 {
|
||||
color: #282828;
|
||||
}
|
||||
html button, html .button {
|
||||
background-color: #f5f5f5;
|
||||
color: #3574C6;
|
||||
border: 1px solid #3574C6;
|
||||
}
|
||||
html button:hover, html .button:hover {
|
||||
background-color: #5b8fd3;
|
||||
border: 1px solid #5b8fd3;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
html button.primary, html .button.primary {
|
||||
background-color: #3574C6;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: 0px 10px 30px #3574C6;
|
||||
}
|
||||
html button.primary:hover, html .button.primary:hover {
|
||||
background-color: #5b8fd3;
|
||||
}
|
||||
html button:disabled, html .button:disabled {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
html button:disabled:hover, html .button:disabled:hover {
|
||||
background-color: #999999;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
html button.clean, html .button.clean {
|
||||
color: #282828;
|
||||
}
|
||||
html button.clean:hover, html .button.clean:hover {
|
||||
border: none;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html button.user-selection .profile-image, html .button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.user-selection .profile-image, html .button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
html button.user-selection:hover, html .button.user-selection:hover {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html button.user-selection:hover .profile-image, html .button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.user-selection:hover .profile-image, html .button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
html button.other-user .other-user-image, html .button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.other-user .other-user-image, html .button.other-user .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
html button.other-user:hover .other-user-image, html .button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
html button.other-user:hover .other-user-image, html .button.other-user:hover .other-user-image {
|
||||
background-image: url("../../../images/icon-newuser-light-hover@2x.png");
|
||||
background-size: 80px 60px;
|
||||
}
|
||||
}
|
||||
html button.google, html .button.google {
|
||||
color: #8b8d8d;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html button.google span.logo, html .button.google span.logo {
|
||||
background-image: url("../../../images/idp/google.png");
|
||||
}
|
||||
html input:not([type=radio]), html select {
|
||||
background-color: #FFFFFF;
|
||||
color: #282828;
|
||||
}
|
||||
html #qrcode svg rect.color {
|
||||
fill: #282828;
|
||||
}
|
||||
html #qrcode svg rect.bg-color {
|
||||
fill: #f5f5f5;
|
||||
}
|
||||
form .field.check-box label {
|
||||
color: #282828;
|
||||
}
|
||||
form ul#passwordcomplexity li i {
|
||||
color: #50CA3D;
|
||||
}
|
||||
form ul#passwordcomplexity li.invalid i {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
.login-profile .profile-image, form button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.login-profile .profile-image, form button.user-selection .profile-image {
|
||||
background-image: url("../../../images/icon-user-light@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
.login-profile:hover .profile-image, form button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover.png");
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.login-profile:hover .profile-image, form button.user-selection:hover .profile-image {
|
||||
background-image: url("../../../images/icon-user-light-hover@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.free-tier {
|
||||
border: 2px solid #F20D6B;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #F20D6B;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=light.css.map */
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA,kBCIc;EDHd,OCIQ;EDHR;EACA;EACA;EAEI;;;AAIR;EACI,OCNQ;EDOR,aC/BS;EDgCT;EACA,WC7BS;ED8BT;;;AAGJ;EACI,OCdQ;EDeR,aCvCS;EDwCT;EACA,WCpCU;;;ADuCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OClDW;EDmDX;EACA;;AAEA;EACI,OCtDY;;ADyDhB;EACI;;;AAIR;EACI,kBClEc;EDmEd,OCjEW;EDkEX;EACA;EACA;EACA;EACA,QC5FU;ED6FV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBC/EY;EDgFZ,OCnFU;EDoFV;;AAGJ;EACI,kBCtFO;EDuFP,OCxFI;EDyFJ;;AACA;EACI,kBCzFQ;;AD6FhB;EACI,kBC5FW;ED6FX;;AAEA;EACI,kBChGO;EDiGP;;AAIR;EACI;EACA;EACA;EACA;EACA,OCpGa;EDqGb,kBCpGmB;;ADsGnB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAOZ;EACI,kBClImB;EDmInB,OCxIQ;EDyIR,QC9JU;ED+JV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EACA;EC9JN;;AACA;EDwJE;ICvJA;IACA;;;AD+JA;EClKF;;AACA;EDiKE;IChKA;IACA;;;;ADsKA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WC5LE;ED6LF;;AAGJ;EACI;EACA;EACA;EACA,OC/KC;;;ADqLT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OC3NA;;AD+NR;EACI,OC7NK;ED8NL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC1PI;ED2PJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBC7PW;;ADgQf;EACI;;AAIR;EACI;;AAMA;EACI;EACA;EACA;EACA;EACA,cClRO;EDmRP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OC9SP;;ADmTL;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI,kBCjUE;;ADqUF;EACI;EACA;;AAOZ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EC7VV;;AACA;EDwVM;ICvVJ;IACA;;;AD+VQ;EACI;EACA;ECpWd;;AACA;EDiWU;IChWR;IACA;;;ADsWI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OC3WN;;ADgXE;EACI,OClXL;;ADuXP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MCrZI;;ADwZR;EACI,MC1ZU;;;AD+Zd;EACI;EACA;;;AAIR;EAII;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OClcO;;;ADqcX;EACI;;;AAGJ;EACI;;;AE/eJ;EACI,kBD2CmB;EC1CnB,ODsBc;ECpBV;;AAGJ;EACI;;AAGJ;EACI,ODYU;;ACTd;EACI,kBD4Be;EC3Bf,ODSO;ECRP;;AAEA;EACI,kBD0Ba;ECzBb;EACA,ODyBgB;;ACtBpB;EACI,kBDDG;ECEH,ODoBgB;ECnBhB;EACA;;AACA;EACI,kBDLI;;ACSZ;EACI,kBDRO;ECSP;;AAEA;EACI,kBDZG;ECaH;;AAIR;EACI,ODvBM;;ACyBN;EACI;EACA,kBDHY;;ACQhB;EDxCV;;AACA;ECuCU;IDtCR;IACA;;;ACyCQ;EACI,kBDbY;;ACeZ;ED/Cd;;AACA;EC8Cc;ID7CZ;IACA;;;ACmDQ;EDtDV;;AACA;ECqDU;IDpDR;IACA;;;ACwDY;ED3Dd;;AACA;EC0Dc;IDzDZ;IACA;;;AC8DI;EACI,OD7Bc;EC8Bd,kBD7BoB;;AC+BpB;EACI;;AAKZ;EACI,kBD5CoB;EC6CpB,ODrEU;;ACyEV;EACI,MD1EM;;AC6EV;EACI,MD1DW;;ACsEnB;EACI,OD3FU;;AC+Fb;EACI,ODhEM;;ACoEN;EACI,ODtEG;;;AC8EZ;EDrHF;;AACA;ECoHE;IDnHA;IACA;;;ACsHA;EDzHF;;AACA;ECwHE;IDvHA;IACA;;;;AC2HJ;EACI;;;AAGJ;EACI,OD5FY","file":"light.css"}
|
||||
@@ -0,0 +1,22 @@
|
||||
body {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
body .lgn-grow {
|
||||
flex: 1;
|
||||
}
|
||||
body.waiting * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAIR;EACI;;;AAGJ;EACI","file":"main.css"}
|
||||
1913
internal/ui/login/static/resources/themes/zitadel/css/zitadel.css
Normal file
1913
internal/ui/login/static/resources/themes/zitadel/css/zitadel.css
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.3 KiB |
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 448" enable-background="new 0 0 256 448"><path fill="#ffffffaa" d="M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 448" enable-background="new 0 0 256 448"><path fill="#a6a6a6" d="M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 383 B |
Reference in New Issue
Block a user