TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-26 07:27:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): apply private labeling settings (#2059)

Browse Source 
* fetch org design an calc palette

* distinct theme deriv

* calculate self theme

* background palette, fix styles

* component fixes, warn color

* warn color

* stylelint config, set warn color

* lint

* fallback theme

* lint

* granted, owned proejct grid

* dynamic privacy policy, fix home layout, dismissables, info-section

* lint

* apply theme from settings

* enable cache

* fix: add primary tint
This commit is contained in:
Max Peintner
2021-07-28 14:59:52 +02:00
committed by GitHub
parent fb06aed238
commit 7d3c768d8b
47 changed files with 963 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
console/src/styles/input.scss
View File

@@ -3,9 +3,6 @@
@mixin input-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat.get-color-from-palette($primary, A900);
$secondary-dark: mat.get-color-from-palette($primary, A800);
$inv-color: mat.get-color-from-palette($primary, A600);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-light-color: mat.get-color-from-palette($primary, 200);
$warn: map-get($theme, warn);
@@ -28,37 +25,38 @@
font-size: 1rem;
border: none;
border: 1px solid if($is-dark-theme, #403e3e, #00000040);
background-color:if($is-dark-theme, #00000020, #fafafa50);
background-color: if($is-dark-theme, #00000020, #fafafa50);
border-radius: 4px;
height: 40px;
padding: 10px;
transition: border-color .2s ease-in-out;
transition: border-color .2s ease-in-out, background-color .3s cubic-bezier(.645, .045, .355, 1),
color .3s cubic-bezier(.645, .045, .355, 1);
width: 100%;
color: mat.get-color-from-palette($foreground, text);
margin-bottom: 2px;
&:hover {
border-color: if($is-dark-theme,#aeafb1, #1a1b1b);
border-color: if($is-dark-theme, #aeafb1, #1a1b1b);
}
&:active,
&:focus {
border-color: $primary-color;
border-color: $primary-color;
}
&.ng-touched {
&.ng-invalid {
border-color: $warn-color;
}
&.ng-invalid {
border-color: $warn-color;
}
}
&[disabled] {
border-color: if($is-dark-theme,#36373850,#cccdce50);
color: if($is-dark-theme, #ffffff80 ,#00000061);
border-color: if($is-dark-theme, #36373850, #cccdce50);
color: if($is-dark-theme, #ffffff80, #00000061);
&::placeholder {
color: if($is-dark-theme, #ffffff80 ,#00000061);
}
&::placeholder {
color: if($is-dark-theme, #ffffff80, #00000061);
}
}
}
@@ -70,7 +68,7 @@
.mat-paginator {
.mat-select {
background-color: inherit;
background-color: inherit;
}
}
}

35
console/src/styles/sidenav-list.scss
View File

@@ -3,36 +3,49 @@
@mixin sidenav-list-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$primary-dark: mat.get-color-from-palette($primary, A900);
$foreground: map-get($theme, foreground);
$sec-dark: mat.get-color-from-palette($primary, A800);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
/* stylelint-enable */
.meta {
box-shadow: inset 1px 0 if($is-dark-theme, #303131, #e3e8ee);
box-shadow: inset 1px 0 map-get($foreground, divider);
}
.sidenav {
box-shadow: inset -1px 0 if($is-dark-theme, #303131, #e3e8ee);
box-shadow: inset -1px 0 map-get($foreground, divider);
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
}
.nav-item {
color: mat.get-color-from-palette($foreground, text) !important;
transition: all .2s ease;
i {
opacity: .6;
}
&:hover {
background-color: if($is-dark-theme, $sec-dark, rgb(84 105 212 / 6%));
// font-weight: 600;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
i {
opacity: 1;
}
}
&.active {
color: $primary-color !important;
background-color: if($is-dark-theme, rgba($color: $primary-color, $alpha: .1), rgb(84 105 212 / 6%)) !important;
// background-color: if($is-dark-theme, rgba($color: $primary-color, $alpha: .1), rgb(84 105 212 / 6%)) !important;
i {
opacity: 1;
}
}
.c_label {
@@ -45,7 +58,7 @@
.mat-menu-content,
.mat-menu-panel {
background-color: $primary-dark;
background-color: $back;
border-radius: .5rem;
@include mat.elevation(5);
@@ -57,8 +70,7 @@
}
.root-header {
box-shadow: inset 0 -1px #e3e8ee;
background-color: $primary-dark !important;
background-color: $back !important;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
.slash {
@@ -66,7 +78,6 @@
}
.org-button {
border: 1px solid if($is-dark-theme, #303131, #e3e8ee);
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
}
}
@@ -118,11 +129,11 @@
.divider {
.span {
border-color: if($is-dark-theme, #303131, #e3e8ee);
border-color: map-get($foreground, divider);
}
.line {
background-color: if($is-dark-theme, #303131, #e3e8ee);
background-color: map-get($foreground, divider);
}
}
}

10
console/src/styles/table.scss
View File

@@ -3,14 +3,10 @@
@mixin table-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
$warn-color: mat.get-color-from-palette($warn, 500);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-dark: mat.get-color-from-palette($primary, A900);
$secondary-dark: mat.get-color-from-palette($primary, A800);
$inv-color: mat.get-color-from-palette($primary, A600);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
.mat-table,
.mat-paginator {
@@ -58,7 +54,7 @@
&:hover {
td {
background: if($is-dark-theme, #292a2b, #f4f4f4); // rgba($inv-color, .05);
background: map-get($background, hover);
}
}
}