TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-10 05:22:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): horizontal toggle for users, projects, improve UI/UX (#4047)

Browse Source 
* fix(console): horizontal toggle for users, projects

* improve input contrast

* toggles, profile UI fix

* lint

* fix safari styles

* fix button placement redirects

* style lint

Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-07-29 11:14:45 +02:00
committed by GitHub
parent 9ed972f308
commit 5b284f8c9b
22 changed files with 358 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
console/src/styles.scss
View File

@@ -446,9 +446,18 @@ $custom-typography: mat.define-typography-config(
}
}
.mat-button-toggle-button {
.mat-button-toggle-group-appearance-standard {
border-color: map-get($foreground, divider);
}
.mat-button-toggle {
background-color: mat.get-color-from-palette($background, cards);
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&.mat-button-toggle-checked {
background-color: #00000010;
}
}
.main-container,
@@ -509,9 +518,18 @@ $custom-typography: mat.define-typography-config(
}
}
.mat-button-toggle-button {
.mat-button-toggle-group-appearance-standard {
border-color: map-get($foreground, divider);
}
.mat-button-toggle {
background-color: mat.get-color-from-palette($background, cards);
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&.mat-button-toggle-checked {
background-color: mat.get-color-from-palette($background, background);
}
}
.main-container,
@@ -601,3 +619,15 @@ i {
.mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin {
margin-right: 0.5rem !important;
}
.mat-button-toggle-button {
display: flex;
height: 36px;
line-height: 36px !important;
align-items: center;
font-size: 14px !important;
}
.mat-button-toggle-label-content {
line-height: 36px;
}