Skip to content

Commit

Permalink
Showcase cosmetics
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Sep 21, 2023
1 parent 08630dd commit 95524e2
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 72 deletions.
4 changes: 2 additions & 2 deletions src/app/showcase/layout/doc/docsectionnav/app.docsection-nav.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<li *ngFor="let doc of docs; let i = index;" class="navbar-item" [ngClass]="{'active-navbar-item' : activeId === doc.id}">
<ng-container *ngIf="!doc.isInterface">
<div class="navbar-item-content">
<button class="p-link" (click)="onButtonClick(doc)">{{doc.label}}</button>
<button class="px-link" (click)="onButtonClick(doc)">{{doc.label}}</button>
</div>
<ng-container>
<ul *ngIf="doc.children">
<li *ngFor="let child of doc.children; let isFirst = first" class="navbar-item" [ngClass]="{'active-navbar-item': isActiveChildId(isFirst, activeId, child.id, doc.id) }">
<div class="navbar-item-content">
<button class="p-link" (click)="onChildButtonClick(doc, isFirst, child)">
<button class="px-link" (click)="onChildButtonClick(doc, isFirst, child)">
{{ child.label }}
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/layout/menu/app.menuitem.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<button *ngIf="root && item.children" pButton type="button" class="p-link" pStyleClass="@next" enterClass="hidden" enterActiveClass="slidedown" leaveToClass="hidden" leaveActiveClass="slideup">
<button *ngIf="root && item.children" pButton type="button" class="px-link" pStyleClass="@next" enterClass="hidden" enterActiveClass="slidedown" leaveToClass="hidden" leaveActiveClass="slideup">
<div class="menu-icon">
<i [ngClass]="item.icon"></i>
</div>
Expand Down
23 changes: 23 additions & 0 deletions src/assets/showcase/styles/layout/_core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,27 @@ input[type="number"] {
.p-toast.p-toast-top-right,
.p-toast.p-toast-top-left {
top: 7rem;
}

.px-link {
font-size: 1rem;
font-family: var(--font-family);
border-radius: var(--border-radius);
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}

.px-link:focus-visible {
outline: 0 none;
outline-offset: 0;
box-shadow: var(--focus-ring);
}

.px-link:disabled {
cursor: default;
}
29 changes: 18 additions & 11 deletions src/assets/showcase/styles/layout/_doc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@
padding: 1rem 0;
min-width: 12rem;
text-align: center;
color: var(--text-color-secondary);
color: var(--surface-700);
font-size: 1.125rem;
letter-spacing: 2px;
cursor: pointer;
margin: 0;
transition: all 0.3s;
transition: all 0.2s;
border-bottom: 1px solid transparent;
border-top-right-radius: var(--border-round);
border-top-left-radius: var(--border-round);

&:hover {
border-bottom-color: var(--text-color);
border-bottom-color: var(--surface-500);
}

&:focus {
Expand Down Expand Up @@ -60,8 +60,8 @@
margin-bottom: 2rem;

p {
font-size: 1.25rem;
color: var(--surface-800);
font-size: 1.125rem;
color: var(--surface-900);
}
}

Expand Down Expand Up @@ -92,7 +92,7 @@
.doc-section-description {
> p {
font-size: 1.125rem;
color: var(--surface-800);
color: var(--surface-900);

i {
border-radius: 6px;
Expand Down Expand Up @@ -153,23 +153,31 @@
.navbar-item-content {
border-left: 1px solid var(--surface-border);
padding-left: .25rem;
transition: all .2s;

&:hover {
border-left-color: var(--surface-500);
}
}
}

.navbar-item {
> .navbar-item-content {
display: flex;

.p-link {
.px-link {
padding: 0.25rem 1rem 0.25rem 1rem;
color: var(--text-color);
color: var(--surface-800);
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
transition: all .2s;

&:hover {
color: var(--primary-color);
.px-link {
color: var(--surface-900);
}
}
}
}
Expand All @@ -178,8 +186,7 @@
> .navbar-item-content {
border-color: var(--primary-color);

.p-link {
font-weight: 700;
.px-link {
color: var(--primary-color);
}
}
Expand Down
129 changes: 71 additions & 58 deletions src/assets/showcase/styles/layout/_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,8 @@
margin: 0;
padding: 0;

li {
margin-bottom: .25rem;
}

> li {
margin-bottom: .25rem;
> button,
> a {
display: flex;
Expand All @@ -41,12 +38,7 @@
padding: .5rem;
color: var(--surface-900);
font-weight: 600;
transition: box-shadow .2s;
border-radius: var(--border-radius);

&:hover {
background-color: var(--surface-hover);
}
transition: all .2s;

.menu-icon {
width: 2rem;
Expand All @@ -57,81 +49,102 @@
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .2s;

i {
color: var(--surface-700);
transition: all .2s;
}
}

.menu-toggle-icon {
color: var(--surface-600);
color: var(--surface-700);
margin-left: auto;
}
}

> div {
> ol {
margin: 0 0 0 1.5rem;
padding: .25rem 0 0 .5rem;
border-left: 1px solid var(--surface-border);

> li {
> ol {
margin-bottom: 1.5rem;
&:hover {
.menu-icon {
i {
color: var(--surface-900);
}
}

.menu-toggle-icon {
color: var(--surface-900);
}
}

&.router-link-active {
color: var(--primary-color);

> .menu-icon {
i {
color: var(--primary-color);
}
}
}
}
}

> div {
ol {
margin: 0 0 0 1.5rem;
padding: .25rem 0;
list-style: none;

a.router-link-active {
background-color: var(--highlight-bg);
color: var(--highlight-text-color);
li {
a {
color: var(--surface-700);
border-left: 1px solid var(--surface-border);
transition: all .2s;
font-weight: 400;
display: flex;
padding: .5rem .5rem .5rem 1rem;
color: var(--surface-700);
transition: all .2s;

&:hover {
background-color: var(--highlight-bg);
color: var(--highlight-text-color);
}
&:focus-visible {
outline: 0 none;
box-shadow: inset var(--focus-ring);
}

> .menu-icon {
i {
color: var(--highlight-text-color);
&:hover {
color: var(--surface-900);
border-left-color: var(--surface-500);
}

&.router-link-active {
color: var(--primary-color);
border-left-color: var(--primary-color);
}
}

ol {
margin: 0;
padding: 0;
}



&:has(.menu-child-category) {
margin-top: 1rem;
}

&:has(.menu-child-category):first-child {
margin-top: 0rem;
}
}
}
}
}

.menu-child-category {
display: flex;
padding: .5rem .5rem .5rem 1rem;
padding: .5rem .5rem .5rem 0;
font-size: .875rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 1px;
color: var(--surface-900);
border-bottom: 1px solid var(--surface-border);
margin-bottom: .25rem;
}

ol {
list-style: none;
margin: 0;
padding: 0;

a {
display: flex;
padding: .5rem .5rem .5rem 1rem;
color: var(--surface-900);
border-radius: var(--border-radius);
transition: box-shadow .2s;

&:focus {
outline: 0 none;
box-shadow: inset var(--focus-ring);
}

&:hover {
background-color: var(--surface-hover);
}
}
}
}
}

1 comment on commit 95524e2

@vercel
Copy link

@vercel vercel bot commented on 95524e2 Sep 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test-primeng-test.vercel.app
primeng-ssr-test.vercel.app
primeng-ssr-test-git-master-primeng-test.vercel.app

Please sign in to comment.