florian/Codiki
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add icon button style.

Browse Source
This commit is contained in:
Florian THIERRY
2024-10-22 08:17:07 +02:00
committed by Florian THIERRY
parent 1a00d0cd19
commit 295f977a21
14 changed files with 51 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/header/header.component.html
+3 -2
View File
@@ -1,6 +1,7 @@
<div class="left">
<button type="button"
(click)="sideMenu.open()"
class="cod-btn icon"
matTooltip="Click to show side menu"
matRipple
i18n-matTooltip>
@@ -18,8 +19,8 @@
<div class="right">
@if (isAuthenticated) {
<button mat-button
class="button"
<button type="button"
class="cod-btn icon"
[matMenuTriggerFor]="authenticatedUserMenu"
matRipple>
<mat-icon>more_vert</mat-icon>
frontend/src/app/components/header/header.component.scss
+4 -58
View File
@@ -26,25 +26,6 @@ $headerHeight: 3.5em;
padding: 0 1em;
z-index: 2;
button {
background-color: #3f51b5;
color: white;
border: none;
border-radius: 10em;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
$buttonSize: 2.5em;
width: $buttonSize;
height: $buttonSize;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
}
a {
display: flex;
flex-direction: row;
@@ -120,45 +101,10 @@ $headerHeight: 3.5em;
top: 0;
right: 0;
z-index: 2;
a {
display: flex;
justify-content: center;
align-items: center;
min-width: 5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0 .8em;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
mat-icon {
margin: 0;
}
margin-right: .5em;
a, button {
margin: .5em;
}
}
}