mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-26 12:07:35 +00:00
feat(console): integrate frontend (#95)
* feat: console frontend * chore(dependabot): cycle and npm * chore: rename citadel to zitadel, remove generated files * chore: delete go files * chore(frontend): ci steps * chore: remove docker and envoy files * chore: remove docker file * chore: working dir * chore: run proto build * add console start * chore: restructure folders * chore: remove gui build * statikFs * generate proto for console * add statik import * import * chore: try statik * chore: path * chore: path * chore: script in root * chore: order build steps * chore: go get * chore: folder traversal * chore: non empty test file * chore: gitignore * chore: gitignore * chore: statik path * chore: switch to failing FE build * fix: build * fix: project-grant-test * fix: rm test * add statik.go * go mod tidy * chore: place test, seperate test from build * chore: lint all the world * chore: ci the world instead * chore: tune docker * chore: undo container test * chore: fix run * chore: docker build * chore: test docker build * chore: go build flags * finaly * fix caos_local * go mod Co-authored-by: Livio Amstutz <livio.a@gmail.com> Co-authored-by: Max Peintner <max@caos.ch>
This commit is contained in:
41
console/src/styles/card.scss
Normal file
41
console/src/styles/card.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin card-theme($theme) {
|
||||
$accent: map-get($theme, accent);
|
||||
$background: map-get($theme, background);
|
||||
$background-color: mat-color($background, card);
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
$border-color: mat-color($primary, A700);
|
||||
$border-selected-color: mat-color($primary, A600);
|
||||
|
||||
.card {
|
||||
background-color: $primary-dark;
|
||||
border: 1px solid $border-color;
|
||||
box-sizing: border-box;
|
||||
border-radius: .5rem;
|
||||
|
||||
.selection-icon {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
color: $border-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: #ffffff25;
|
||||
border: 1px solid $border-selected-color;
|
||||
.text-part {
|
||||
.icons {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-icon {
|
||||
color: $border-selected-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
10
console/src/styles/changes.scss
Normal file
10
console/src/styles/changes.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin changes-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$secondary-dark: mat-color($primary, A800);
|
||||
|
||||
.change-item-back {
|
||||
background-color: $secondary-dark;
|
||||
}
|
||||
}
|
32
console/src/styles/morph-card.scss
Normal file
32
console/src/styles/morph-card.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin morph-card-theme($theme) {
|
||||
$accent: map-get($theme, accent);
|
||||
$background: map-get($theme, background);
|
||||
$background-color: mat-color($background, card);
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$secondary-dark: mat-color($primary, A800);
|
||||
$accent: map-get($theme, accent);
|
||||
$accent-color: mat-color($accent, 500);
|
||||
|
||||
.morph-card {
|
||||
cursor: pointer;
|
||||
animation: all .2s;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin: 1rem;
|
||||
border-radius: 16px;
|
||||
background: $primary-dark;
|
||||
box-shadow: 5px 5px 20px rgba($color: black, $alpha: 0.5), -5px -5px 20px rgba($color: $secondary-dark, $alpha: 1);
|
||||
|
||||
&.add {
|
||||
background: $accent-color;
|
||||
box-shadow: 5px 5px 20px rgba($color: black, $alpha: 0.5), -5px -5px 20px rgba($color: $secondary-dark, $alpha: 1);
|
||||
}
|
||||
|
||||
// &:hover {
|
||||
// @include mat-elevation(5);
|
||||
// }
|
||||
}
|
||||
}
|
50
console/src/styles/sidenav-list.scss
Normal file
50
console/src/styles/sidenav-list.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin sidenav-list-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
|
||||
.mat-menu-item {
|
||||
&.show-all {
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
color: mat-color($primary, A700);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background-color: #00000020;
|
||||
border-top-right-radius: 1.5rem;
|
||||
border-bottom-right-radius: 1.5rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary-color !important;
|
||||
background-color: rgba($color: $primary-color, $alpha: 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-content, .mat-menu-panel {
|
||||
background-color: $primary-dark;
|
||||
border-radius: .5rem;
|
||||
@include mat-elevation(5);
|
||||
|
||||
.active {
|
||||
color: $primary-color !important;
|
||||
background-color: rgba($color: $primary-color, $alpha: 0.1) !important;
|
||||
|
||||
mat-icon {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.root-header {
|
||||
@include mat-elevation(3);
|
||||
background: $primary-dark !important;
|
||||
}
|
||||
}
|
26
console/src/styles/table.scss
Normal file
26
console/src/styles/table.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin table-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$secondary-dark: mat-color($primary, A800);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.mat-table,
|
||||
mat-paginator {
|
||||
background-color: $secondary-dark !important;
|
||||
|
||||
&.background-style {
|
||||
background-color: $primary-dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-label {
|
||||
font-size: 12px;
|
||||
border-radius: 1rem;
|
||||
color: mat-color($foreground, text);
|
||||
white-space: nowrap;
|
||||
background-color: #81868a;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user