vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add glow image

pull/4572/head
Cagatay Civici 2023-10-13 11:20:56 +03:00
parent 9efbcd3f77
commit 0f1d1a673f
8 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
assets/styles/layout/_docsearch.scss
View File

@ -1,11 +1,11 @@
.DocSearch-Button {
border-radius: var(--border-radius);
width: 24rem;
border: 1px solid var(--surface-border);
height: 2rem;
background-color: var(--surface-card);
margin: 0;
transition: border-color .3s;
border: 1px solid transparent;
height: 2.5rem;
padding: 0 .75rem;
padding: 0 .5rem;
&:hover {
border-color: var(--primary-color);
@ -17,8 +17,8 @@
}
.DocSearch-Search-Icon {
width: 1.25rem;
height: 1.25rem;
width: 1rem;
height: 1rem;
}
.DocSearch-Button-Keys {
@ -26,7 +26,7 @@
overflow: hidden;
min-width: auto;
height: 1.5rem;
background: var(--docsearch-key-gradient);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
@ -48,7 +48,7 @@
justify-content: end;
font-size: 0.8rem;
font-weight: 700;
line-height: 13.5px;
line-height: normal;
svg{
height: 14.5px;
}
@ -126,6 +126,12 @@
color: var(--primary-color);
}
.DocSearch-Button-Placeholder {
text-align: center;
display: inline-block;
font-size: .875rem;
}
:root {
--docsearch-searchbox-focus-background: var(--surface-card);
--docsearch-text-color: var(--text-color);
@ -144,19 +150,3 @@
--docsearch-hit-active-color: var(--primary-color-text);
}
.DocSearch-Button-Placeholder {
text-align: center;
display: inline-block;
}
.layout-light {
.DocSearch-Button {
background: #edf0f3;
}
}
.layout-light {
.DocSearch-Dark {
background: var(--surface-100);
}
}

15
assets/styles/layout/_glow.scss Normal file
View File

@ -0,0 +1,15 @@
.landing, .layout-wrapper {
&:before {
top: 0;
width: 100%;
height: 236px;
content: "";
display: block;
z-index: 0;
background-image: var(--glow-image);
position: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
}
}

1
assets/styles/layout/_responsive.scss
View File

@ -30,7 +30,6 @@
}
#docsearch {
margin-left: auto;
margin-right: .5rem;
}

2
assets/styles/layout/_topbar.scss
View File

@ -5,7 +5,7 @@
width: calc(100% - var(--scrollbar-width, 0px));
z-index: 1100;
transition: background-color 1s;
border-bottom: 1px solid var(--surface-border);
border-bottom: 1px solid var(--topbar-border);
&.layout-topbar-sticky {
backdrop-filter: blur(8px);

2
assets/styles/layout/landing/_dark.scss
View File

@ -1,4 +1,6 @@
.layout-dark {
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
--topbar-border: var(--surface-border);
--home-highlight-color:#10b981;
--home-highlight-darker-color:#059669;
--home-highlight-fore-color:#ffffff;

2
assets/styles/layout/landing/_light.scss
View File

@ -1,4 +1,6 @@
.layout-light {
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
--topbar-border: rgba(0,0,0,.05);
--home-highlight-color:#10b981;
--home-highlight-darker-color:#059669;
--home-highlight-fore-color:#ffffff;

1
assets/styles/layout/layout.scss
View File

@ -1,6 +1,7 @@
@charset 'UTF-8';
@import './_core';
@import './_glow';
@import './_topbar';
@import './_sidebar';
@import './_content';

4
layouts/AppTopBar.vue
View File

@ -59,9 +59,11 @@
</svg>
</PrimeVueNuxtLink>
</div>
<div id="docsearch"></div>
<ul class="flex list-none m-0 p-0 gap-2 align-items-center">
<li>
<div id="docsearch"></div>
</li>
<li>
<a
href="https://github.com/primefaces/primevue"