mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-11 00:18:32 +00:00
feat: run on a single port (#3163)
* start v2 * start * run * some cleanup * remove v2 pkg again * simplify * webauthn * remove unused config * fix login path in Dockerfile * fix asset_generator.go * health handler * fix grpc web * refactor * merge * build new main.go * run new main.go * update logging pkg * fix error msg * update logging * cleanup * cleanup * go mod tidy * change localDevMode * fix customEndpoints * update logging * comments * change local flag to external configs * fix location generated go code * fix Co-authored-by: fforootd <florian@caos.ch>
This commit is contained in:
Livio Amstutz
@@ -0,0 +1,12 @@
|
||||
// themes and colors
|
||||
@import 'styles/theming/all';
|
||||
@import 'styles/color/all_color';
|
||||
@import 'styles/typography/typography';
|
||||
|
||||
// layouts
|
||||
@import 'styles/container/container';
|
||||
@import 'styles/register/register';
|
||||
@import 'styles/header/header';
|
||||
|
||||
// animations
|
||||
@import 'styles/animations';
|
||||
22
internal/api/ui/login/static/resources/themes/scss/main.scss
Normal file
22
internal/api/ui/login/static/resources/themes/scss/main.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
body {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
||||
.lgn-grow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.waiting * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.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,18 @@
|
||||
@import 'a';
|
||||
|
||||
@mixin lgn-a-theme() {
|
||||
|
||||
@include lgn-a-color();
|
||||
|
||||
}
|
||||
|
||||
@mixin lgn-a-color() {
|
||||
a {
|
||||
color: var(--zitadel-color-primary);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--zitadel-color-primary-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
$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;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.lgn-names {
|
||||
display: block;
|
||||
margin: .5rem;
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
|
||||
.lgn-displayname{
|
||||
font-size: 16px;
|
||||
margin: .5rem 0;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@import 'account_selection';
|
||||
|
||||
@mixin lgn-account-selection-theme() {
|
||||
|
||||
@include lgn-account-selection-color();
|
||||
|
||||
}
|
||||
|
||||
@mixin lgn-account-selection-color() {
|
||||
|
||||
.lgn-account-selection{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 -1px var(--zitadel-color-footer-line);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--zitadel-color-account-selector-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--zitadel-color-account-selector-active);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--zitadel-color-account-selector-active);
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
color: var(--zitadel-color-label);
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
color: var(--zitadel-color-label);
|
||||
|
||||
&.i0 {
|
||||
color: #85d996;
|
||||
}
|
||||
|
||||
&.i1 {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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,25 @@
|
||||
$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;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lgn-avatar .avatar-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@import 'avatar';
|
||||
@import "../elevation/elevation";
|
||||
|
||||
@mixin lgn-avatar-theme() {
|
||||
@include lgn-avatar-color();
|
||||
}
|
||||
|
||||
@mixin lgn-avatar-color() {
|
||||
.lgn-avatar:not(.transparent) {
|
||||
@include _lgn-avatar-theme-property("background-color", false);
|
||||
@include lgn-avatar-elevation(2);
|
||||
}
|
||||
|
||||
.lgn-avatar .initials{
|
||||
@include _lgn-avatar-theme-property("color", true);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-avatar-theme-property($property, $contrast) {
|
||||
$color: if($contrast, var(--zitadel-color-primary-contrast), var(--zitadel-color-primary));
|
||||
|
||||
&.lgn-primary {
|
||||
#{$property}: $color;
|
||||
}
|
||||
&.lgn-accent {
|
||||
#{$property}: $color;
|
||||
}
|
||||
&.lgn-warn {
|
||||
#{$property}: $color;
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
$btn-color: if($property == "color", var(--zitadel-color-button-disabled), var(--itadel-color-button-disabled-background));
|
||||
#{$property}: $btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-avatar-elevation($zValue, $opacity: $lgn-elevation-opacity) {
|
||||
@include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@import 'button_base';
|
||||
|
||||
.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: 40px !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,183 @@
|
||||
@import "../theming/theming";
|
||||
@import "button";
|
||||
@import "../elevation/elevation";
|
||||
|
||||
@mixin lgn-button-theme() {
|
||||
@include lgn-button-color();
|
||||
}
|
||||
|
||||
@mixin lgn-button-color() {
|
||||
.lgn-button,
|
||||
.lgn-stroked-button,
|
||||
.lgn-icon-button {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
|
||||
@include _lgn-button-theme-color(false);
|
||||
}
|
||||
|
||||
.lgn-button:focus,
|
||||
.lgn-stroked-button:focus,
|
||||
.lgn-raised-button:focus {
|
||||
@include lgn-button-elevation(8);
|
||||
background: var(--zitadel-color-background);
|
||||
}
|
||||
|
||||
.lgn-stroked-button:not([disabled]) {
|
||||
border-color: var(--zitadel-color-divider);
|
||||
}
|
||||
|
||||
.lgn-button {
|
||||
@include _lgn-button-theme-color(false);
|
||||
&:hover {
|
||||
background-color: rgba(var(--zitadel-color-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba(var(--zitadel-color-primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(var(--zitadel-color-primary-rgb), 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
color: var(--zitadel-color-text);
|
||||
background-color: var(--zitadel-color-raised-button-background);
|
||||
|
||||
@include _lgn-button-theme-color(true);
|
||||
@include _lgn-button-theme-background-color();
|
||||
|
||||
&:active {
|
||||
background-color: rgba(var(--zitadel-color-primary-rgb), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-button,
|
||||
.lgn-stroked-button {
|
||||
@include lgn-button-elevation(0);
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
@include lgn-button-elevation(2);
|
||||
|
||||
&:not([disabled]):active {
|
||||
@include lgn-button-elevation(8);
|
||||
}
|
||||
|
||||
// &:focus {
|
||||
// @include lgn-b-elevation(8, $config);
|
||||
// }
|
||||
|
||||
&[disabled] {
|
||||
@include lgn-button-elevation(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-color() {
|
||||
&.lgn-primary {
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-accent {
|
||||
color: var(--zitadel-color-secondary);
|
||||
}
|
||||
&.lgn-warn {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
color: var(--zitadel-color-button-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-background-color() {
|
||||
&.lgn-primary {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-accent {
|
||||
background-color: var(--zitadel-color-secondary);
|
||||
}
|
||||
&.lgn-warn {
|
||||
background-color: var(--zitadel-color-warn);
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
background-color: var(--zitadel-color-button-disabled-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-color($contrast) {
|
||||
$color: if($contrast, var(--zitadel-color-primary-contrast), var(--zitadel-color-primary));
|
||||
|
||||
&.lgn-primary {
|
||||
color: $color;
|
||||
}
|
||||
&.lgn-accent {
|
||||
color: $color;
|
||||
}
|
||||
&.lgn-warn {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
color: var(--zitadel-color-button-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-background-color() {
|
||||
|
||||
&.lgn-primary {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-accent {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-warn {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
background-color: var(--zitadel-color-button-disabled-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-focus-overlay-color() {
|
||||
|
||||
&.lgn-primary:focus {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&.lgn-accent:focus {
|
||||
background-color: var(--zitadel-color-secondary);
|
||||
}
|
||||
|
||||
&.lgn-warn:focus {
|
||||
background-color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-button-elevation($zValue, $opacity: $lgn-elevation-opacity) {
|
||||
@include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'checkbox_base';
|
||||
|
||||
.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,45 @@
|
||||
@import '../theming/theming';
|
||||
@import 'checkbox';
|
||||
|
||||
@mixin lgn-checkbox-theme() {
|
||||
@include lgn-checkbox-color();
|
||||
}
|
||||
|
||||
@mixin lgn-checkbox-color() {
|
||||
|
||||
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 var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Checked
|
||||
input[type='checkbox']:checked + label {
|
||||
&:before {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
border-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import '../theming/all';
|
||||
@import '../theming/theming';
|
||||
|
||||
// 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,125 @@
|
||||
$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: -75px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.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,20 @@
|
||||
@import 'container';
|
||||
|
||||
@mixin lgn-container-theme() {
|
||||
@include lgn-container-color();
|
||||
}
|
||||
|
||||
@mixin lgn-container-color() {
|
||||
|
||||
.lgn-error {
|
||||
.lgn-error-message {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-login-profile {
|
||||
.lgn-names {
|
||||
border-color: var(--zitadel-color-divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
@mixin lgn-core($typography-config: null) {
|
||||
@include zitadel-lgn-typography($typography-config);
|
||||
}
|
||||
|
||||
@mixin lgn-core-color() {
|
||||
|
||||
// Wrapper element that provides the theme background
|
||||
.lgn-app-background#{if(&, ', &.lgn-app-background', '')} {
|
||||
background-color: var(--zitadel-color-background);
|
||||
color: var(--zitadel-color-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() {
|
||||
@include lgn-core-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,13 @@
|
||||
.lgn-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
i {
|
||||
margin-right: .5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#wa-error {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import 'error';
|
||||
|
||||
@mixin lgn-error-theme() {
|
||||
@include lgn-error-color();
|
||||
}
|
||||
|
||||
@mixin lgn-error-color() {
|
||||
|
||||
.lgn-error {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
$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;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.watermark {
|
||||
display: flex;
|
||||
|
||||
.powered {
|
||||
font-size: 12px;
|
||||
margin: auto 2px;
|
||||
}
|
||||
|
||||
.lgn-logo-watermark {
|
||||
height: 40px;
|
||||
min-width: 125px;
|
||||
margin: auto 2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@import 'footer';
|
||||
|
||||
@mixin lgn-footer-theme() {
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'mat-button') {
|
||||
|
||||
@include lgn-footer-color();
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin lgn-footer-color() {
|
||||
|
||||
footer {
|
||||
background-color: var(--zitadel-color-background);
|
||||
border-top: 1px solid var(--zitadel-color-footer-line);
|
||||
|
||||
a {
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
.lgn-logo-watermark {
|
||||
background: var(--zitadel-logo-powered-by) no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
$lgn-header-padding: 0;
|
||||
$lgn-header-margin: auto;
|
||||
|
||||
.lgn-header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: $lgn-header-margin;
|
||||
padding: $lgn-header-padding;
|
||||
max-width: 250px;
|
||||
min-height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.lgn-logo {
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 250px;
|
||||
max-height: 150px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import 'header';
|
||||
|
||||
@mixin lgn-header-theme() {
|
||||
@include lgn-header-color();
|
||||
}
|
||||
|
||||
@mixin lgn-header-color() {
|
||||
.lgn-logo {
|
||||
background-position: auto;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'identity_provider_base';
|
||||
|
||||
.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,27 @@
|
||||
@import 'identity_provider';
|
||||
|
||||
@mixin lgn-idp-theme() {
|
||||
@include lgn-idp-color();
|
||||
}
|
||||
|
||||
@mixin lgn-idp-color() {
|
||||
|
||||
.lgn-idp {
|
||||
border-color: var(--zitadel-color-divider);
|
||||
|
||||
@include lgn-idp-elevation(1);
|
||||
|
||||
&:not([disabled]):active {
|
||||
@include lgn-idp-elevation(8);
|
||||
}
|
||||
|
||||
&.google {
|
||||
color: var(--zitadel-color-google-text);
|
||||
background-color: var(--zitadel-color-google-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-idp-elevation($zValue, $opacity: $lgn-elevation-opacity) {
|
||||
@include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@import 'input_base';
|
||||
|
||||
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,43 @@
|
||||
@import '../theming/theming';
|
||||
@import 'input';
|
||||
|
||||
@mixin lgn-input-theme() {
|
||||
@include lgn-input-color();
|
||||
}
|
||||
|
||||
@mixin lgn-input-color() {
|
||||
|
||||
.lgn-input:not([disabled]),
|
||||
select:not([disabled]), .lgn-select:not([disabled]) {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
.lgn-input,
|
||||
select, .lgn-select {
|
||||
color: var(--zitadel-color-text);
|
||||
background-color: var(--zitadel-color-input-background);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--zitadel-color-input-border-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
// overwrite if state is warn
|
||||
&[color='warn'] {
|
||||
border-color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-input::placeholder,
|
||||
select::placeholder,
|
||||
.lgn-select::placeholder {
|
||||
color: var(--zitadel-color-input-placeholder);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'label_base';
|
||||
|
||||
.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,15 @@
|
||||
@import '../theming/theming';
|
||||
@import 'label';
|
||||
|
||||
@mixin lgn-label-theme() {
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'lgn-label') {
|
||||
@include lgn-label-color();
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin lgn-label-color() {
|
||||
|
||||
.lgn-label {
|
||||
color: var(--zitadel-color-label);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'list_base';
|
||||
|
||||
.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,24 @@
|
||||
@import '../theming/theming';
|
||||
@import 'list';
|
||||
|
||||
@mixin lgn-list-theme() {
|
||||
@include lgn-list-color();
|
||||
}
|
||||
|
||||
@mixin lgn-list-color() {
|
||||
.lgn-list, ul {
|
||||
li::before {
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
li i {
|
||||
&.lgn-warn {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
|
||||
&.lgn-valid {
|
||||
color: #85d996;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'progress_bar_base';
|
||||
|
||||
.lgn-progress-bar {
|
||||
@include lgn-progress-bar-base;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@mixin lgn-progress-bar-base {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import '../theming/theming';
|
||||
@import 'progress_bar';
|
||||
|
||||
@mixin lgn-progress-bar-theme() {
|
||||
@include lgn-progress-bar-color();
|
||||
}
|
||||
|
||||
@mixin lgn-progress-bar-color() {
|
||||
.lgn-progress-bar {
|
||||
border-color: var(--zitadel-color-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,22 @@
|
||||
@import 'qrcode';
|
||||
|
||||
@mixin lgn-qrcode-theme() {
|
||||
@include lgn-qrcode-color();
|
||||
}
|
||||
|
||||
@mixin lgn-qrcode-color() {
|
||||
|
||||
.lgn-qrcode {
|
||||
svg {
|
||||
background: var(--zitadel-color-qr-background);
|
||||
}
|
||||
|
||||
svg rect.color {
|
||||
fill: var(--zitadel-color-qr);
|
||||
}
|
||||
|
||||
svg rect.bg-color {
|
||||
fill: var(--zitadel-color-qr-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'radio_base';
|
||||
|
||||
.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,51 @@
|
||||
@import '../theming/theming';
|
||||
@import 'radio';
|
||||
|
||||
@mixin lgn-radio-theme() {
|
||||
@include lgn-radio-color();
|
||||
}
|
||||
|
||||
@mixin lgn-radio-color() {
|
||||
label {
|
||||
&::before {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--zitadel-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
opacity: 0;
|
||||
|
||||
&:checked + label::before {
|
||||
border-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&:focus + label {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ label::before {
|
||||
border-color: var(--zitadel-color-button-disabled-background);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label::before {
|
||||
color: var(--zitadel-color-button-selected-background);
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
background: var(--zitadel-color-button-disabled-selected-background);
|
||||
}
|
||||
}
|
||||
|
||||
&: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';
|
||||
|
||||
.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,12 @@
|
||||
@import '../theming/theming';
|
||||
@import 'select';
|
||||
|
||||
@mixin lgn-select-theme() {
|
||||
@include lgn-select-color();
|
||||
}
|
||||
|
||||
@mixin lgn-select-color() {
|
||||
.lgn-select, select {
|
||||
background-image: var(--zitadel-icon-select);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import 'success_label_base';
|
||||
|
||||
.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,16 @@
|
||||
@import '../theming/theming';
|
||||
@import 'success_label';
|
||||
|
||||
@mixin lgn-success-label-theme() {
|
||||
@include lgn-success-label-color();
|
||||
}
|
||||
|
||||
@mixin lgn-success-label-color() {
|
||||
|
||||
.lgn-success-label {
|
||||
color: var(--zitadel-color-success);
|
||||
background-color: var(--zitadel-color-success-background);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@import '../core/core';
|
||||
@import '../footer/footer_theme';
|
||||
@import '../header/header_theme';
|
||||
@import '../button/button_theme';
|
||||
@import '../input/input_theme';
|
||||
@import '../label/label_theme';
|
||||
@import '../radio/radio_theme';
|
||||
@import '../a/a_theme';
|
||||
@import '../identity_provider/identity_provider_theme';
|
||||
@import '../error/error_theme';
|
||||
@import '../qrcode/qrcode_theme';
|
||||
@import '../container/container_theme';
|
||||
@import '../account_selection/account_selection_theme';
|
||||
@import '../avatar/avatar_theme';
|
||||
@import '../checkbox/checkbox_theme';
|
||||
@import '../select/select_theme';
|
||||
@import '../list/list_theme';
|
||||
@import '../typography/typography';
|
||||
@import '../success_label/success_label_theme';
|
||||
@import 'theming';
|
||||
|
||||
@mixin zitadel-lgn-theme() {
|
||||
@include lgn-core-theme();
|
||||
@include lgn-header-theme();
|
||||
@include lgn-button-theme();
|
||||
@include lgn-input-theme();
|
||||
@include lgn-radio-theme();
|
||||
@include lgn-checkbox-theme();
|
||||
@include lgn-label-theme();
|
||||
@include lgn-footer-theme();
|
||||
@include lgn-a-theme();
|
||||
@include lgn-error-theme();
|
||||
@include lgn-qrcode-theme();
|
||||
@include lgn-container-theme();
|
||||
@include lgn-account-selection-theme();
|
||||
@include lgn-avatar-theme();
|
||||
@include lgn-select-theme();
|
||||
@include lgn-list-theme();
|
||||
@include lgn-idp-theme();
|
||||
@include lgn-success-label-theme();
|
||||
}
|
||||
@@ -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');
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@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;
|
||||
}
|
||||
@@ -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,226 @@
|
||||
@import 'faces/ailerons_font_faces';
|
||||
@import 'faces/lato_font_faces';
|
||||
@import 'faces/roboto_font_faces';
|
||||
@import 'faces/raleway_font_faces';
|
||||
@import 'faces/pt_sans_font_faces';
|
||||
|
||||
@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: var(--zitadel-font-family) + ", -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} serif;
|
||||
font-family: $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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
:root {
|
||||
--zitadel-color-primary: var(--zitadel-color-primary-500);
|
||||
--zitadel-color-background: var(--zitadel-color-background-500);
|
||||
--zitadel-color-secondary: var(--zitadel-color-secondary-500);
|
||||
--zitadel-color-warn: var(--zitadel-color-warn-500);
|
||||
--zitadel-color-text: var(--zitadel-color-text-500);
|
||||
|
||||
--zitadel-color-primary-50: #eaedfa;
|
||||
--zitadel-color-primary-100: #ccd2f2;
|
||||
--zitadel-color-primary-200: #aab4ea;
|
||||
--zitadel-color-primary-300: #8796e1;
|
||||
--zitadel-color-primary-400: #6e80da;
|
||||
--zitadel-color-primary-500: #5469d4;
|
||||
--zitadel-color-primary-600: #4d61cf;
|
||||
--zitadel-color-primary-700: #4356c9;
|
||||
--zitadel-color-primary-800: #3a4cc3;
|
||||
--zitadel-color-primary-900: #293bb9;
|
||||
--zitadel-color-primary-rgb: rgb(84, 105, 212);
|
||||
--zitadel-color-primary-contrast: var(--zitadel-color-white);
|
||||
|
||||
--zitadel-color-secondary-50: #eaedfa;
|
||||
--zitadel-color-secondary-100: #ccd2f2;
|
||||
--zitadel-color-secondary-200: #aab4ea;
|
||||
--zitadel-color-secondary-300: #8796e1;
|
||||
--zitadel-color-secondary-400: #6e80da;
|
||||
--zitadel-color-secondary-500: #5469d4;
|
||||
--zitadel-color-secondary-600: #4d61cf;
|
||||
--zitadel-color-secondary-700: #4356c9;
|
||||
--zitadel-color-secondary-800: #3a4cc3;
|
||||
--zitadel-color-secondary-900: #293bb9;
|
||||
--zitadel-color-secondary-contrast: var(--zitadel-color-white);
|
||||
|
||||
--zitadel-color-warn-50: #F9E7EB;
|
||||
--zitadel-color-warn-100: #F0C4CC;
|
||||
--zitadel-color-warn-200: #E69DAB;
|
||||
--zitadel-color-warn-300: #DC7689;
|
||||
--zitadel-color-warn-400: #D5586F;
|
||||
--zitadel-color-warn-500: #CD3B56;
|
||||
--zitadel-color-warn-600: #C8354F;
|
||||
--zitadel-color-warn-700: #C12D45;
|
||||
--zitadel-color-warn-800: #BA263C;
|
||||
--zitadel-color-warn-900: #AE192B;
|
||||
|
||||
--zitadel-font-family: 'Lato';
|
||||
|
||||
--zitadel-color-background-50: rgb(255, 255, 255);
|
||||
--zitadel-color-background-100: rgb(255, 255, 255);
|
||||
--zitadel-color-background-200: rgb(255, 255, 255);
|
||||
--zitadel-color-background-300: rgb(255, 255, 255);
|
||||
--zitadel-color-background-400: rgb(255, 255, 255);
|
||||
--zitadel-color-background-500: rgb(250, 250, 250);
|
||||
--zitadel-color-background-600: rgb(222, 222, 222);
|
||||
--zitadel-color-background-700: rgb(195, 195, 194);
|
||||
--zitadel-color-background-800: rgb(168, 168, 168);
|
||||
--zitadel-color-background-900: rgb(142, 142, 142);
|
||||
--zitadel-color-background-contrast: rgb(0, 0, 0);
|
||||
|
||||
--zitadel-color-footer-line: #e3e8ee;
|
||||
|
||||
--zitadel-color-input-background: #fafafa50;
|
||||
--zitadel-color-input-border: #00000040;
|
||||
--zitadel-color-input-border-hover: #1a1b1b;
|
||||
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
|
||||
|
||||
--zitadel-color-font-50: rgb(0, 0, 0);
|
||||
--zitadel-color-font-100: rgb(0, 0, 0);
|
||||
--zitadel-color-font-200: rgb(0, 0, 0);
|
||||
--zitadel-color-font-300: rgb(0, 0, 0);
|
||||
--zitadel-color-font-400: rgb(0, 0, 0);
|
||||
--zitadel-color-font-500: rgb(0, 0, 0);
|
||||
--zitadel-color-font-600: rgb(0, 0, 0);
|
||||
--zitadel-color-font-700: rgb(0, 0, 0);
|
||||
--zitadel-color-font-800: rgb(0, 0, 0);
|
||||
--zitadel-color-font-900: rgb(0, 0, 0);
|
||||
--zitadel-color-font-contrast: rgb(255, 255, 255);
|
||||
--zitadel-color-label: var(--zitadel-color-grey-600);
|
||||
|
||||
|
||||
--zitadel-color-account-selector-hover: rgba(0, 0, 0, 0.02);
|
||||
--zitadel-color-account-selector-active: rgba(0, 0, 0, 0.05);
|
||||
|
||||
--zitadel-color-success: #0e6245;
|
||||
--zitadel-color-success-background: #cbf4c9;
|
||||
|
||||
--zitadel-color-divider: rgba(0, 0, 0, 0.12);
|
||||
|
||||
--zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
|
||||
--zitadel-color-button-disabled-background: rgba(0, 0, 0, 0.12);
|
||||
--zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
|
||||
--zitadel-color-button-disabled-selected-background: var(--zitadel-color-grey-800);
|
||||
--zitadel-color-raised-button-background: var(--zitadel-color-white);
|
||||
|
||||
|
||||
--zitadel-color-white: #ffffff;
|
||||
--zitadel-color-black: #000000;
|
||||
--zitadel-color-grey-50: #fafafa;
|
||||
--zitadel-color-grey-100: #f5f5f5;
|
||||
--zitadel-color-grey-200: #eeeeee;
|
||||
--zitadel-color-grey-300: #e0e0e0;
|
||||
--zitadel-color-grey-400: #bdbdbd;
|
||||
--zitadel-color-grey-500: #9e9e9e;
|
||||
--zitadel-color-grey-600: #757575;
|
||||
--zitadel-color-grey-700: #616161;
|
||||
--zitadel-color-grey-800: #424242;
|
||||
--zitadel-color-grey-900: #212121;
|
||||
|
||||
--zitadel-icon-select: url('../select_arrow_light.svg');
|
||||
--zitadel-logo-powered-by: url('../logo-dark.svg');
|
||||
|
||||
--zitadel-color-google-text: #8b8d8d;
|
||||
--zitadel-color-google-background: #ffffff;
|
||||
|
||||
--zitadel-color-qr: var(--zitadel-color-black);
|
||||
--zitadel-color-qr-background: var(--zitadel-color-white);
|
||||
}
|
||||
|
||||
.lgn-dark-theme {
|
||||
--zitadel-color-primary-50: #ffffff;
|
||||
--zitadel-color-primary-100: #dde6f3;
|
||||
--zitadel-color-primary-200: #b4c9e4;
|
||||
--zitadel-color-primary-300: #7fa3d1;
|
||||
--zitadel-color-primary-400: #6992c9;
|
||||
--zitadel-color-primary-500: #5282c1;
|
||||
--zitadel-color-primary-600: #4072b4;
|
||||
--zitadel-color-primary-700: #38649d;
|
||||
--zitadel-color-primary-800: #305687;
|
||||
--zitadel-color-primary-900: #284770;
|
||||
|
||||
--zitadel-color-secondary-50: #ffffff;
|
||||
--zitadel-color-secondary-100: #dde6f3;
|
||||
--zitadel-color-secondary-200: #b4c9e4;
|
||||
--zitadel-color-secondary-300: #7fa3d1;
|
||||
--zitadel-color-secondary-400: #6992c9;
|
||||
--zitadel-color-secondary-500: #5282c1;
|
||||
--zitadel-color-secondary-600: #4072b4;
|
||||
--zitadel-color-secondary-700: #38649d;
|
||||
--zitadel-color-secondary-800: #305687;
|
||||
--zitadel-color-secondary-900: #284770;
|
||||
|
||||
--zitadel-color-warn-50: #FFE7EB;
|
||||
--zitadel-color-warn-100: #FFC4CE;
|
||||
--zitadel-color-warn-200: #FF9DAD;
|
||||
--zitadel-color-warn-300: #FF768C;
|
||||
--zitadel-color-warn-400: #FF5874;
|
||||
--zitadel-color-warn-500: #ff3b5b;
|
||||
--zitadel-color-warn-600: #FF3553;
|
||||
--zitadel-color-warn-700: #FF2D49;
|
||||
--zitadel-color-warn-800: #FF2640;
|
||||
--zitadel-color-warn-900: #FF192F;
|
||||
|
||||
--zitadel-font-family: 'Lato';
|
||||
|
||||
--zitadel-color-background-50: rgb(60, 60, 60);
|
||||
--zitadel-color-background-100: rgb(55, 55, 55);
|
||||
--zitadel-color-background-200: rgb(49, 49, 49);
|
||||
--zitadel-color-background-300: rgb(44, 44, 44);
|
||||
--zitadel-color-background-400: rgb(36, 36, 36);
|
||||
--zitadel-color-background-500: rgb(33, 33, 33);
|
||||
--zitadel-color-background-600: rgb(30, 30, 30);
|
||||
--zitadel-color-background-700: rgb(28, 28, 28);
|
||||
--zitadel-color-background-800: rgb(25, 25, 25);
|
||||
--zitadel-color-background-900: rgb(23, 23, 23);
|
||||
--zitadel-color-background-contrast: rgb(255, 255, 255);
|
||||
|
||||
--zitadel-color-footer-line: #303131;
|
||||
|
||||
--zitadel-color-input-background: rgba(0, 0, 0, 0.2);
|
||||
--zitadel-color-input-border: #403e3e;
|
||||
--zitadel-color-input-border-hover: #aeafb1;
|
||||
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
|
||||
|
||||
--zitadel-color-text-50: rgb(255, 255, 255);
|
||||
--zitadel-color-text-100: rgb(255, 255, 255);
|
||||
--zitadel-color-text-200: rgb(255, 255, 255);
|
||||
--zitadel-color-text-300: rgb(255, 255, 255);
|
||||
--zitadel-color-text-400: rgb(255, 255, 255);
|
||||
--zitadel-color-text-500: rgb(255, 255, 255);
|
||||
--zitadel-color-text-600: rgb(221, 222, 223);
|
||||
--zitadel-color-text-700: rgb(194, 195, 195);
|
||||
--zitadel-color-text-800: rgb(167, 168, 169);
|
||||
--zitadel-color-text-900: rgb(141, 142, 143);
|
||||
--zitadel-color-text-contrast: rgb(0, 0, 0);
|
||||
--zitadel-color-label: var(--zitadel-color-grey-600);
|
||||
|
||||
--zitadel-color-account-selector-hover: rgba(255, 255, 255, 0.02);
|
||||
--zitadel-color-account-selector-active: rgba(255, 255, 255, 0.05);
|
||||
|
||||
|
||||
--zitadel-color-success: #cbf4c9;
|
||||
--zitadel-color-success-background: #4f566b;
|
||||
|
||||
--zitadel-color-divider: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
|
||||
--zitadel-color-button-disabled-background: rgba(255, 255, 255, 0.12);
|
||||
--zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
|
||||
--zitadel-color-button-disabled-selected-background: var(--zitadel-color-grey-800);
|
||||
--zitadel-color-raised-button-background: var(--zitadel-color-grey-800);
|
||||
|
||||
|
||||
/*--zitadel-color-label: var(--zitadel-color-grey-600); same */
|
||||
--zitadel-icon-select: url('../select_arrow_dark.svg');
|
||||
--zitadel-logo-powered-by: url('../logo-light.svg');
|
||||
|
||||
|
||||
--zitadel-color-google-text: #8b8d8d;
|
||||
--zitadel-color-google-background: #ffffff;
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
@import 'main';
|
||||
@import 'bundle';
|
||||
|
||||
|
||||
// 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-light-warn: (
|
||||
50: #F9E8EB,
|
||||
100: #F0C5CC,
|
||||
200: #E69EAB,
|
||||
300: #DC7789,
|
||||
400: #D55A6F,
|
||||
500: #CD3D56,
|
||||
600: #C8374F,
|
||||
700: #C12F45,
|
||||
800: #BA273C,
|
||||
900: #AE1A2B,
|
||||
A100: #FFE4E6,
|
||||
A200: #FFB1B9,
|
||||
A400: #FF7E8B,
|
||||
A700: #FF6474,
|
||||
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-dark-warn: (
|
||||
50: #FFE7EB,
|
||||
100: #FFC4CE,
|
||||
200: #FF9DAD,
|
||||
300: #FF768C,
|
||||
400: #FF5874,
|
||||
500: #FF3B5B,
|
||||
600: #FF3553,
|
||||
700: #FF2D49,
|
||||
800: #FF2640,
|
||||
900: #FF192F,
|
||||
A100: #FFFFFF,
|
||||
A200: #FFFDFD,
|
||||
A400: #FFCACE,
|
||||
A700: #FFB1B7,
|
||||
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-light-warn);
|
||||
|
||||
$dark-primary: lgn-palette($lgn-alternative-dark-brand);
|
||||
$dark-accent: lgn-palette($lgn-alternative-dark-brand);
|
||||
$dark-warn: lgn-palette($lgn-alternative-dark-warn);
|
||||
|
||||
$light-theme: lgn-light-theme($light-primary, $light-accent, $light-warn);
|
||||
$dark-theme: lgn-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
|
||||
// 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);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@import 'styles/vars';
|
||||
@import 'main';
|
||||
@import 'bundle';
|
||||
|
||||
// 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);
|
||||
|
||||
// Include all theme styles for the components.
|
||||
@include zitadel-lgn-theme();
|
||||
|
||||
//.lgn-dark-theme {
|
||||
// @include zitadel-lgn-theme($dark-theme);
|
||||
//}
|
||||
|
||||
//.lgn-light-theme {
|
||||
// @include zitadel-lgn-theme($light-theme);
|
||||
//}
|
||||
@@ -0,0 +1,13 @@
|
||||
:root {
|
||||
--primary-color: #222324;
|
||||
--secondary-color: #ffffff;
|
||||
--warn-color: #ffffff;
|
||||
--primary-color-dark: #222324;
|
||||
--secondary-color-dark: #ffffff;
|
||||
--warn-color-dark: #ffffff;
|
||||
--logo-url: 'logo-light.svg';
|
||||
--logo-url-dark: 'logo-dark.svg';
|
||||
--icon-url: 'logo-light.svg';
|
||||
--icon-url-dark: 'logo-dark.svg';
|
||||
--font-url: '';
|
||||
}
|
||||
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.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 929 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 361 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 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