TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-12 03:57:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup styles

Browse Source
This commit is contained in:
Max Peintner
2025-07-16 11:10:51 +02:00
parent 42a5c5af44
commit ed74963258
6 changed files with 114 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
console/src/app/modules/new-header/header-button/header-button.component.html
View File

@@ -2,5 +2,5 @@
<ng-content></ng-content>
</span>
<button class="header-button" matRipple [matRippleUnbounded]="false">
<ng-icon size="1.2rem" name="heroChevronUpDown"></ng-icon>
<ng-icon size="1.3rem" name="heroChevronUpDown"></ng-icon>
</button>

41
console/src/app/modules/new-header/header-button/header-button.component.scss
View File

@@ -3,27 +3,52 @@
flex-direction: row;
align-items: center;
justify-content: stretch;
gap: 0.5rem;
gap: 0rem;
padding-right: 0;
height: 32px;
max-height: 32px;
cursor: pointer;
}
.header-text {
font-size: 1.1rem;
}
@mixin header-button-theme($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
.header-button {
height: 36px;
box-sizing: border-box;
display: flex;
align-items: center;
border: 0;
background: transparent;
border-radius: 4px;
padding: 0;
height: 100%;
border-radius: 6px;
padding: 0 0.5rem;
cursor: pointer;
color: map-get($foreground, text);
&:hover {
background-color: if($is-dark-theme, #ffffff10, #00000010);
}
}
.header-text {
height: 36px;
box-sizing: border-box;
display: flex;
align-items: center;
border: none;
color: map-get($foreground, text);
border-radius: 6px;
position: relative;
font-size: 14px;
padding: 0 0.75rem;
text-align: left;
background-color: transparent;
cursor: pointer;
transition: all ease 0.2s;
&:hover {
background-color: if($is-dark-theme, #ffffff10, #00000010);
}
}
}

1
console/src/app/modules/new-header/new-header.component.html
View File

@@ -1,5 +1,4 @@
<div class="new-header-wrapper">
<span *ngIf="!isHandset()" routerLink="/" class="new-header-title">CONSOLE</span>
<ng-container *ngIf="myInstanceQuery.data()?.instance as instance">
<ng-container *ngTemplateOutlet="slash"></ng-container>
<cnsl-header-button

49
console/src/app/modules/new-header/new-header.component.scss
View File

@@ -1,20 +1,35 @@
.new-header-wrapper {
padding-left: 5px;
padding-right: 5px;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
@mixin new-header-theme($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
.new-header-title {
font-weight: 900;
letter-spacing: 3px;
font-size: 0.8rem;
}
.new-header-wrapper {
padding-left: 5px;
padding-right: 5px;
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
}
.new-header-breadcrumb {
color: inherit;
text-decoration: inherit;
font-size: 1.1rem;
.new-header-breadcrumb {
height: 36px;
box-sizing: border-box;
display: flex;
align-items: center;
border-radius: 6px;
padding: 0 0.5rem;
border: none;
color: map-get($foreground, text);
position: relative;
font-size: 14px;
text-align: left;
background-color: transparent;
cursor: pointer;
transition: all ease 0.2s;
text-decoration: none;
&:hover {
background-color: if($is-dark-theme, #ffffff10, #00000010);
}
}
}

2
console/src/component-themes.scss
View File

@@ -81,6 +81,7 @@
@import 'src/app/modules/new-header/organization-selector/organization-selector.component.scss';
@import 'src/app/modules/new-header/instance-selector/instance-selector.component.scss';
@import 'src/app/modules/new-header/header-dropdown/header-dropdown.component.scss';
@import 'src/app/modules/new-header/new-header.component.scss';
@import 'src/app/modules/new-header/header-button/header-button.component.scss';
@mixin component-themes($theme) {
@@ -166,5 +167,6 @@
@include organization-selector-theme($theme);
@include instance-selector-theme($theme);
@include header-dropdown-theme($theme);
@include new-header-theme($theme);
@include header-button-theme($theme);
}