andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-13 17:35:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: rehauled console (#3525)

Browse Source 
* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
2022-04-28 10:35:02 +00:00
committed by GitHub
co-authored by Livio Amstutz
parent 00f7dbe875
commit 08ae39ae19
668 changed files with 47746 additions and 19117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/styles/table.scss
+66 -27
View File
@@ -1,7 +1,6 @@
@use '@angular/material' as mat;
@mixin table-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
@@ -11,53 +10,72 @@
.mat-table,
.mat-paginator {
background-color: inherit !important;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* stylelint-enable */
.app-label {
font-size: 12px;
border-radius: 1rem;
color: mat.get-color-from-palette($foreground, text);
white-space: nowrap;
background-color: var(--grey);
padding: 3px 1rem;
.table-wrapper {
overflow: auto;
.table,
.paginator {
width: 100%;
}
}
th {
text-transform: uppercase;
letter-spacing: .05em;
letter-spacing: 0.05em;
font-weight: bold;
white-space: nowrap;
&.mat-header-cell {
color: var(--grey);
color: map-get($foreground, text);
font-size: 11px;
font-weight: 400;
font-weight: 500;
}
}
td {
.cnsl-form-field-wrapper {
padding-bottom: 0;
}
.pointer {
cursor: pointer;
}
tr {
&.mat-header-row {
height: 40px;
height: 40px !important;
padding-bottom: 4px;
}
&.highlight {
cursor: pointer;
&:hover {
td {
transition: background 0.1s ease;
background: map-get($background, hover);
}
}
}
.cnsl-table-action {
visibility: hidden;
transition: color 0.2s ease;
&:active,
&:hover,
&:focus,
&:focus-within {
visibility: visible;
}
}
&:hover {
.cnsl-table-action {
visibility: visible;
}
}
}
th,
td {
padding: 0 0.5rem !important;
}
td .mat-checkbox,
@@ -67,12 +85,11 @@
.no-content-row {
background-color: if($is-dark-theme, #00000030, #f4f4f470);
// color: $primary-color;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: flex;
align-items: center;
padding: .5rem;
padding: 0.5rem;
font-size: 14px;
justify-content: center;
}
@@ -80,23 +97,45 @@
.selection {
width: 65px;
max-width: 65px;
padding-right: 1rem !important;
}
.state {
border-radius: 50vw;
padding: 2px .5rem;
letter-spacing: .05em;
padding: 2px 0.5rem;
letter-spacing: 0.05em;
font-size: 12px;
background-color: if($is-dark-theme, #4f566b, #e4e7e4);
white-space: nowrap;
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4);
box-shadow: 0 0 3px #0000001a;
&.active {
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
background-color: if($is-dark-theme, map-get($background, state-active), #cbf4c9);
color: if($is-dark-theme, #cbf4c9, #0e6245);
}
&.inactive {
color: if($is-dark-theme, #ffc1c1, #620e0e);
background-color: if($is-dark-theme, #4f566b, #ffc1c1);
background-color: if($is-dark-theme, map-get($background, state-inactive), #ffc1c1);
}
}
.bg-state {
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4) !important;
&.active {
background-color: if($is-dark-theme, map-get($background, state-active), #cbf4c9) !important;
color: if($is-dark-theme, #cbf4c9, #0e6245) !important;
}
&.inactive {
color: if($is-dark-theme, #ffc1c1, #620e0e) !important;
background-color: if($is-dark-theme, map-get($background, state-inactive), #ffc1c1) !important;
}
}
.color-shadow {
border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
box-shadow: 0 0 3px #0000001a;
}
}