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

Migrated Landing

pull/5507/head
Cagatay Civici 2024-03-28 17:11:57 +03:00
parent c25b2e0559
commit 90ba486108
14 changed files with 83 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,7 @@
} }
.layout-news-close { .layout-news-close {
color:var(--primary-inverse-color);
line-height: 1.5; line-height: 1.5;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;

30
assets/styles/layout/landing/_blocks.scss
View File

@ -3,8 +3,6 @@
box-sizing: content-box; box-sizing: content-box;
} }
background: var(--home-blocks-bg);
.prime-blocks { .prime-blocks {
transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg); transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
margin: -12rem 0; margin: -12rem 0;
@ -23,10 +21,10 @@
} }
.prime-block { .prime-block {
background: var(--home-blocks-block-bg); background: var(--ground-surface);
box-shadow:var(--home-blocks-block-shadow); box-shadow:var(--home-blocks-block-shadow);
border-left: var(--home-blocks-border-left); border-left: 5px solid var(--border-color);
border-bottom: var(--home-blocks-border-bottom); border-bottom: 7px solid var(--border-color);
border-radius: 10px; border-radius: 10px;
height: 300px; height: 300px;
width: 600px; width: 600px;
@ -53,7 +51,7 @@
right:0; right:0;
bottom: 0; bottom: 0;
border-radius: 6px; border-radius: 6px;
border: var(--home-blocks-border) border: 1px solid var(--border-color);
} }
.block-sidebar, .block-sidebar,
@ -68,7 +66,7 @@
.block-content { .block-content {
.block-main { .block-main {
border: var(--home-blocks-main-border); border: 1px solid var(--border-color);
border-radius: 13px; border-radius: 13px;
background: var(--home-blocks-main-bg); background: var(--home-blocks-main-bg);
} }
@ -118,12 +116,12 @@
} }
&.block-item-active { &.block-item-active {
box-shadow: var(--home-blocks-active-shadow); box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, .1);
border-radius: 6px; border-radius: 6px;
border-top: var(--home-blocks-active-border-top); border-top: 1px solid var(--border-color);
border-right: var(--home-blocks-active-border-right); border-right: 1px solid var(--border-color);
border-bottom: var(--home-blocks-active-border-bottom); border-bottom: 4px solid var(--border-color);
border-left: var(--home-blocks-active-border-left); border-left: 4px solid var(--border-color);
position: relative; position: relative;
z-index: 5; z-index: 5;
animation: block-animation 1500ms ease-in-out alternate infinite; animation: block-animation 1500ms ease-in-out alternate infinite;
@ -159,10 +157,10 @@
border-radius: 10px; border-radius: 10px;
&.bar-highlight { &.bar-highlight {
background: var(--home-highlight-color); background: var(--primary-color);
&:before { &:before {
background: var(--home-highlight-fore-color) !important ; background: var(--primary-inverse-color) !important ;
} }
} }
@ -201,7 +199,7 @@
} }
&.circle-highlight { &.circle-highlight {
background: var(--home-highlight-color); background: var(--primary-color);
} }
} }
} }
@ -217,6 +215,6 @@
@keyframes block-animation { @keyframes block-animation {
to { to {
transform: translateY(-10px) translateX(10px) scale(1.02); transform: translateY(-10px) translateX(10px) scale(1.02);
box-shadow: var(--home-blocks-animation-shadow); box-shadow: 0px 30px 50px 10px rgba(0, 0, 0, .2);
} }
} }

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

@ -1,6 +1,6 @@
.landing-features { .landing-features {
.box { .box {
box-shadow: var(--home-features-card-shadow); box-shadow: var(--home-card-shadow);
} }
.features-container{ .features-container{
max-width: 1250px !important; max-width: 1250px !important;

11
assets/styles/layout/landing/_getstarted.scss
View File

@ -1,11 +0,0 @@
.landing-getstarted {
.download-icon {
color: var(--home-highlight-color);
}
.download-box {
span {
color: var(--home-primary-text-color);
}
}
}

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

@ -6,7 +6,6 @@ $landingBreakpointXL: 1199px;
@import './_main'; @import './_main';
@import './_hero'; @import './_hero';
@import './_users'; @import './_users';
@import './_getstarted';
@import './_themes'; @import './_themes';
@import './_blocks'; @import './_blocks';
@import './_templates'; @import './_templates';

40
assets/styles/layout/landing/_main.scss
View File

@ -1,12 +1,12 @@
.landing { .landing {
background-color: var(--home-bg);
scroll-behavior: smooth; scroll-behavior: smooth;
padding-top: 4rem; padding-top: 4rem;
background-color: var(--ground-background);
.box { .box {
border: 1px solid var(--home-border-color); border: 1px solid var(--border-color);
border-radius: 10px; border-radius: 10px;
background-color: var(--home-box-bg); background-color: var(--card-background);
position: relative; position: relative;
z-index: 0; z-index: 0;
@ -59,32 +59,32 @@
transition: background-color .2s, border-color .2s; transition: background-color .2s, border-color .2s;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--home-linkbox-text-color); color: var(--text-color);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: var(--home-linkbox-border); border: 1px solid var(--border-color);
background-color: var(--home-linkbox-bg); background-color: var(--card-background);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
@include focus-visible(); @include focus-visible();
&:hover { &:hover {
background: var(--home-linkbox-hover-bg); background: var(--hover-background);
} }
&.active { &.active {
background: var(--home-highlight-color); background: var(--primary-color);
color: var(--home-highlight-fore-color); color: var(--primary-inverse-color);
&:hover { &:hover {
background: var(--home-highlight-darker-color); background: var(--primary-hover-color);
} }
} }
} }
.section-header { .section-header {
font-size: 2rem; font-size: 2rem;
color: var(--home-primary-text-color); color: var(--text-color);
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
padding: 0 2rem; padding: 0 2rem;
@ -92,7 +92,7 @@
.section-detail { .section-detail {
text-align: center; text-align: center;
color: var(--home-secondary-text-color); color: var(--text-secondary-color);
font-weight: 500; font-weight: 500;
font-size: 1.25rem; font-size: 1.25rem;
margin: 1.5rem 0 0 0; margin: 1.5rem 0 0 0;
@ -100,7 +100,7 @@
} }
.section-divider { .section-divider {
border: 1px solid var(--home-border-color); border: 1px solid var(--border-color);
height: 1px; height: 1px;
border-bottom: 0 none; border-bottom: 0 none;
overflow: hidden; overflow: hidden;
@ -112,11 +112,11 @@
} }
.text-secondary { .text-secondary {
color: var(--home-secondary-text-color); color: var(--text-secondary-color);
} }
.hover\:surface-hover:hover { .hover\:surface-hover:hover {
background-color: var(--surface-hover); background-color: var(--hover-background);
} }
.landing-footer-container { .landing-footer-container {
@ -127,14 +127,13 @@
.animated-text { .animated-text {
position: relative; position: relative;
color: var(--home-text-color);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: var(--border-radius); border-radius: var(--rounded-base);
display: inline-block; display: inline-block;
width: 14.45rem; width: 14.45rem;
&::before { &::before {
border-radius: var(--border-radius); border-radius: var(--rounded-base);
animation: color-animation 2s linear infinite; animation: color-animation 2s linear infinite;
background-size: auto auto; background-size: auto auto;
background-clip: border-box; background-clip: border-box;
@ -144,7 +143,7 @@
height: 1.5rem; height: 1.5rem;
position: absolute; position: absolute;
z-index: 0; z-index: 0;
background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%); background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
filter: blur(24px); filter: blur(24px);
opacity: 0.6; opacity: 0.6;
} }
@ -152,13 +151,12 @@
> span { > span {
position: relative; position: relative;
z-index: 3; z-index: 3;
background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%); background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
animation: color-animation 2s linear infinite; animation: color-animation 2s linear infinite;
background-size: auto auto; background-size: auto auto;
background-clip: border-box; background-clip: border-box;
background-size: 200% auto; background-size: 200% auto;
background-clip: text; background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }

19
assets/styles/layout/landing/_templates.scss
View File

@ -1,6 +1,5 @@
.landing-templates { .landing-templates {
overflow: hidden; overflow: hidden;
background: var(--home-templates-bg);
.templates { .templates {
transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg); transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
@ -14,8 +13,8 @@
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
box-shadow: var(--home-templates-block-shadow); box-shadow: var(--home-templates-block-shadow);
border-left: var(--home-templates-block-border-left); border-left: 5px solid var(--border-color);
border-bottom: var(--home-templates-block-border-bottom); border-bottom: 7px solid var(--border-color);
position: relative; position: relative;
z-index: 1; z-index: 1;
transition: 1.5s; transition: 1.5s;
@ -80,17 +79,17 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: scale(0.4); transform: scale(0.4);
background: var(--home-templates-btn-bg); background: var(--card-background);
border-radius: 30px; border-radius: 30px;
padding: 8px 10px; padding: 8px 10px;
color: var(--home-templates-btn-text-color); color: var(--text-color);
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
box-shadow: var(--home-templates-btn-shadow); box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
border-top: var(--home-templates-btn-border-top); border-top: 1px solid var(--border-color);
border-right: var(--home-templates-btn-border-right); border-right: 1px solid var(--border-color);
border-left: var(--home-templates-btn-border-left); border-left: 3px solid var(--border-color);
border-bottom: var(--home-templates-btn-border-bottom); border-bottom: 4px solid var(--border-color);
} }
&.border-none { &.border-none {

5
assets/styles/layout/landing/_users.scss
View File

@ -1,10 +1,11 @@
.landing-users { .landing-users {
.fade-right { .fade-right {
background: linear-gradient(to left, var(--home-bg), transparent); background: linear-gradient(to left, var(--ground-background), transparent);
} }
.fade-left { .fade-left {
background: linear-gradient(to right, var(--home-bg), transparent); background: linear-gradient(to right, var(--ground-background), transparent);
} }
.section-detail { .section-detail {
max-width: 1250px !important; max-width: 1250px !important;
margin-left: auto !important; margin-left: auto !important;

63
assets/styles/layout/variables/landing/_dark.scss
View File

@ -1,53 +1,18 @@
.landing.layout-dark { :root[class="p-dark"] {
--home-highlight-color:#34d399; --home-box-ring-color: color-mix(in srgb, var(--primary-color), transparent 70%);
--home-highlight-darker-color:#6ee7b7;
--home-highlight-fore-color:#020617;
--home-bg:#09090b;
--home-border-color:#27272a;
--home-primary-text-color:#ffffff;
--home-secondary-text-color:#a1a1aa;
--home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25); --home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
--home-box-bg:#18181b;
--home-linkbox-bg:rgba(255, 255, 255, .05);
--home-linkbox-border:1px solid rgba(255, 255, 255, .1);
--home-linkbox-text-color:#ffffff;
--home-linkbox-hover-bg:rgba(255, 255, 255, .1);
--home-blocks-bg:transparent;
--home-blocks-block-bg:#09090b;
--home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
--home-blocks-border-left:5px solid #27272a;
--home-blocks-border-bottom:7px solid #27272a;
--home-blocks-border:1px solid #27272a;
--home-blocks-sidebar-bg:#18181b;
--home-blocks-list-bg:#27272a;
--home-blocks-main-bg:#09090b;
--home-blocks-main-border:1px solid #27272a;
--home-blocks-item-bg:#18181b;
--home-blocks-image-bg:#27272a;
--home-blocks-text-color:#52525b;
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, 0.25);
--home-blocks-active-border-top:1px solid #27272a;
--home-blocks-active-border-right:1px solid #27272a;
--home-blocks-active-border-bottom:6px solid #27272a;
--home-blocks-active-border-left:4px solid #27272a;
--home-blocks-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25);
--home-blocks-tablebar-bg:#3f3f46;
--home-blocks-bar-bg:#3f3f46;
--home-blocks-bar-button-bg:#3f3f46;
--home-blocks-circle-bg:#27272a;
--home-templates-bg:transparent;
--home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25); --home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25);
--home-templates-block-border-left:5px solid #27272a;
--home-templates-block-border-bottom:7px solid #27272a;
--home-templates-line:rgba(255,255,255,.1); --home-templates-line:rgba(255,255,255,.1);
--home-templates-block-hover-bg:rgba(255,255,255,.1); --home-templates-block-hover-bg:var(--p-mask-background);
--home-templates-btn-bg:#18181b; --home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
--home-templates-btn-text-color:#ffffff; --home-blocks-sidebar-bg:var(--p-surface-900);
--home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.25); --home-blocks-list-bg:var(--p-surface-800);
--home-templates-btn-border-top:1px solid #27272a; --home-blocks-main-bg:var(--p-surface-950);
--home-templates-btn-border-right:1px solid #27272a; --home-blocks-item-bg:var(--p-surface-900);
--home-templates-btn-border-bottom:4px solid #27272a; --home-blocks-image-bg:var(--p-surface-800);
--home-templates-btn-border-left:3px solid #27272a; --home-blocks-text-color:var(--p-surface-600);
--home-features-card-shadow: none; --home-blocks-tablebar-bg:var(--p-surface-700);
--home-box-ring-color: rgba(52, 211, 153, .3); --home-blocks-bar-bg:var(--p-surface-700);
--home-blocks-bar-button-bg:var(--p-surface-700);
--home-blocks-circle-bg:var(--p-surface-800);
} }

63
assets/styles/layout/variables/landing/_light.scss
View File

@ -1,53 +1,18 @@
.landing.layout-light { :root {
--home-highlight-color:#10b981; --home-box-ring-color: var(--p-primary-200);
--home-highlight-darker-color:#059669;
--home-highlight-fore-color:#ffffff;
--home-bg:#f8fafc;
--home-border-color:#e2e8f0;
--home-primary-text-color:#334155;
--home-secondary-text-color:#64748b;
--home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01); --home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
--home-box-bg:#ffffff;
--home-linkbox-bg:#ffffff;
--home-linkbox-border:1px solid #e2e8f0;
--home-linkbox-text-color:#334155;
--home-linkbox-hover-bg:#f1f5f9;
--home-blocks-bg:transparent;
--home-blocks-block-bg:#ffffff;
--home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
--home-blocks-border-left:5px solid #e2e8f0;
--home-blocks-border-bottom:7px solid #e2e8f0;
--home-blocks-border:1px solid #e2e8f0;
--home-blocks-sidebar-bg:#f1f5f9;
--home-blocks-list-bg:#f8fafc;
--home-blocks-main-bg:#ffffff;
--home-blocks-main-border:1px solid #e2e8f0;
--home-blocks-item-bg:#f1f5f9;
--home-blocks-image-bg:#e2e8f0;
--home-blocks-text-color:#cbd5e1;
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
--home-blocks-active-border-top:1px solid rgba(0,0,0,.07);
--home-blocks-active-border-right:1px solid rgba(0,0,0,.07);
--home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07);
--home-blocks-active-border-left:4px solid rgba(0,0,0,.07);
--home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
--home-blocks-tablebar-bg:#cbd5e1;
--home-blocks-bar-bg:#cbd5e1;
--home-blocks-bar-button-bg:#ffffff;
--home-blocks-circle-bg:#cbd5e1;
--home-templates-bg:transparent;
--home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1); --home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1);
--home-templates-block-border-left:5px solid #d1d5db;
--home-templates-block-border-bottom:7px solid #d1d5db;
--home-templates-line:rgba(0,0,0,.1); --home-templates-line:rgba(0,0,0,.1);
--home-templates-block-hover-bg:rgba(0, 0, 0, 0.2); --home-templates-block-hover-bg:var(--p-mask-background);
--home-templates-btn-bg:rgba(0, 0, 0, 0.5); --home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
--home-templates-btn-text-color:#ffffff; --home-blocks-sidebar-bg:var(--p-surface-100);
--home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.5); --home-blocks-list-bg:var(--p-surface-50);
--home-templates-btn-border-top:1px solid rgba(0,0,0,.1); --home-blocks-main-bg:var(--p-surface-0);
--home-templates-btn-border-right:1px solid rgba(0,0,0,.1); --home-blocks-item-bg:var(--p-surface-100);
--home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1); --home-blocks-image-bg:var(--p-surface-200);
--home-templates-btn-border-left:3px solid rgba(0,0,0,.1); --home-blocks-text-color:var(--p-surface-300);
--home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01); --home-blocks-tablebar-bg:var(--p-surface-300);
--home-box-ring-color: var(--primary-200); --home-blocks-bar-bg:var(--p-surface-300);
--home-blocks-bar-button-bg:var(--p-surface-0);
--home-blocks-circle-bg:var(--p-surface-300);
} }

1
assets/styles/layout/variables/main/_dark.scss
View File

@ -2,6 +2,7 @@
--primary-text-color:var(--p-primary-400); --primary-text-color:var(--p-primary-400);
--primary-color: var(--p-primary-color); --primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color); --primary-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-0); --text-color: var(--p-surface-0);
--text-secondary-color: var(--p-surface-400); --text-secondary-color: var(--p-surface-400);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%); --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);

1
assets/styles/layout/variables/main/_light.scss
View File

@ -2,6 +2,7 @@
--primary-text-color:var(--p-primary-600); --primary-text-color:var(--p-primary-600);
--primary-color: var(--p-primary-color); --primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color); --primary-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-700); --text-color: var(--p-surface-700);
--text-secondary-color: var(--p-surface-500); --text-secondary-color: var(--p-surface-500);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png); --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);

7
layouts/default.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme"> <div :class="containerClass" :data-p-theme="$appState.theme">
<AppNews /> <AppNews />
<AppTopBar @menubutton-click="onMenuButtonClick" /> <AppTopBar @menubutton-click="onMenuButtonClick" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div> <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
@ -71,11 +71,10 @@ export default {
computed: { computed: {
containerClass() { containerClass() {
return [ return [
'layout-wrapper',
{ {
'layout-news-active': this.$appState.newsActive, 'layout-news-active': this.$appState.newsActive,
'p-ripple-disabled': this.$appState.ripple === false, 'p-ripple-disabled': this.$appState.ripple === false
'layout-dark': this.$appState.darkTheme,
'layout-light': !this.$appState.darkTheme
} }
]; ];
} }

6
pages/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="landingClass"> <div :class="containerClass">
<AppNews /> <AppNews />
<AppTopBar :showMenuButton="false" /> <AppTopBar :showMenuButton="false" />
<HeroSection /> <HeroSection />
@ -47,8 +47,8 @@ export default {
} }
}, },
computed: { computed: {
landingClass() { containerClass() {
return ['landing', { 'layout-dark': this.$appState?.darkTheme, 'layout-light': !this.$appState?.darkTheme, 'layout-news-active': this.$appState?.newsActive }]; return ['landing', { 'layout-news-active': this.$appState?.newsActive, 'p-ripple-disabled': this.$appState.ripple === false }];
} }
}, },
components: { components: {