gabdlr/agenda-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: additional slot for action btn

Browse Source
This commit is contained in:
Gabriel De Los Rios
2025-12-22 22:30:46 -03:00
parent ed3d749ba4
commit 361fd6ce57
2 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/main-header/main-header.html
View File

@@ -1,8 +1,11 @@
<div class="bar-container">
<div class="bar-container__elements">
<div class="bar-container__action-button bar-container__action-button--left">
<ng-content select="[slot='action-button']"></ng-content>
<ng-content select="[slot='action-button-left']"></ng-content>
</div>
<h1 class="bar-container__title">{{title()|titlecase}}</h1>
<div class="bar-container__action-button bar-container__action-button--right">
<ng-content select="[slot='action-button-right']"></ng-content>
</div>
</div>
</div>

26
src/app/components/main-header/main-header.scss
View File

@@ -1,7 +1,7 @@
.bar-container {
background-color: var(--primaryDark);
width: 100%;
&__elements {
position: relative;
display: flex;
@@ -13,6 +13,7 @@
&__title {
display: flex;
justify-content: center;
font-size: 1.3em;
}
&__action-button {
@@ -20,9 +21,30 @@
flex-direction: column;
height: 100%;
justify-content: center;
&--left {
&--left,
&--right {
position: absolute;
}
&--left {
margin-left: 8px;
}
&--right {
margin-right: 8px;
right: 0;
}
}
@media screen and (min-width: 480px) {
&__title {
font-size: 2em;
}
&__action-button {
&--left {
margin-left: 0;
}
&--right {
margin-right: 0;
}
}
}
}