Cagatay Civici
GitHub
commit
dbd2d480ec
19
app.vue
19
app.vue
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<NuxtLayout :name="layout">
|
<NuxtLayout>
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
</NuxtLayout>
|
</NuxtLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -12,23 +12,6 @@ export default {
|
||||||
themeChangeListener: null,
|
themeChangeListener: null,
|
||||||
newsActivate: null,
|
newsActivate: null,
|
||||||
newsService: null,
|
newsService: null,
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
layout: 'custom'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
immediate: true,
|
|
||||||
handler(to) {
|
|
||||||
if (to.name === 'index') {
|
|
||||||
this.layout = 'custom';
|
|
||||||
} else {
|
|
||||||
this.layout = 'default';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.newsActivate = () => {
|
this.newsActivate = () => {
|
||||||
this.$appState.announcement = News;
|
this.$appState.announcement = News;
|
||||||
|
|
|
||||||
|
|
@ -1,411 +1,177 @@
|
||||||
code[class*="language-"],
|
code[class*="language-"],
|
||||||
pre[class*="language-"] {
|
pre[class*="language-"] {
|
||||||
color: black;
|
|
||||||
background: none;
|
background: none;
|
||||||
font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
|
font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
|
||||||
font-size: 1em;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
word-spacing: normal;
|
word-spacing: normal;
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
||||||
-moz-tab-size: 4;
|
-moz-tab-size: 4;
|
||||||
-o-tab-size: 4;
|
-o-tab-size: 4;
|
||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
-webkit-hyphens: none;
|
||||||
-moz-hyphens: none;
|
-moz-hyphens: none;
|
||||||
-ms-hyphens: none;
|
-ms-hyphens: none;
|
||||||
hyphens: none;
|
hyphens: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Code blocks */
|
|
||||||
pre[class*="language-"] {
|
|
||||||
position: relative;
|
|
||||||
margin: .5em 0;
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"] > code {
|
|
||||||
position: relative;
|
|
||||||
border-left: 10px solid #358ccb;
|
|
||||||
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
|
|
||||||
background-color: #fdfdfd;
|
|
||||||
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
|
||||||
background-size: 3em 3em;
|
|
||||||
background-origin: content-box;
|
|
||||||
background-attachment: local;
|
|
||||||
}
|
|
||||||
|
|
||||||
code[class*="language-"] {
|
|
||||||
max-height: inherit;
|
|
||||||
height: inherit;
|
|
||||||
padding: 0 1em;
|
|
||||||
display: block;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Margin bottom to accommodate shadow */
|
|
||||||
:not(pre) > code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
background-color: #fdfdfd;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
:not(pre) > code[class*="language-"] {
|
|
||||||
position: relative;
|
|
||||||
padding: .2em;
|
|
||||||
border-radius: 0.3em;
|
|
||||||
color: #c92c2c;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
display: inline;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]:before,
|
|
||||||
pre[class*="language-"]:after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0.75em;
|
|
||||||
left: 0.18em;
|
|
||||||
width: 40%;
|
|
||||||
height: 20%;
|
|
||||||
max-height: 13em;
|
|
||||||
box-shadow: 0px 13px 8px #979797;
|
|
||||||
-webkit-transform: rotate(-2deg);
|
|
||||||
-moz-transform: rotate(-2deg);
|
|
||||||
-ms-transform: rotate(-2deg);
|
|
||||||
-o-transform: rotate(-2deg);
|
|
||||||
transform: rotate(-2deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]:after {
|
|
||||||
right: 0.75em;
|
|
||||||
left: auto;
|
|
||||||
-webkit-transform: rotate(2deg);
|
|
||||||
-moz-transform: rotate(2deg);
|
|
||||||
-ms-transform: rotate(2deg);
|
|
||||||
-o-transform: rotate(2deg);
|
|
||||||
transform: rotate(2deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment,
|
|
||||||
.token.block-comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata {
|
|
||||||
color: #7D8B99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #5F6364;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.boolean,
|
|
||||||
.token.number,
|
|
||||||
.token.function-name,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol,
|
|
||||||
.token.deleted {
|
|
||||||
color: #c92c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.function,
|
|
||||||
.token.builtin,
|
|
||||||
.token.inserted {
|
|
||||||
color: #2f9c0a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.token.variable {
|
|
||||||
color: #a67f59;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.keyword,
|
|
||||||
.token.class-name {
|
|
||||||
color: #1990b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.regex,
|
|
||||||
.token.important {
|
|
||||||
color: #e90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string {
|
|
||||||
color: #a67f59;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.token.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.entity {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.namespace {
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 767px) {
|
|
||||||
pre[class*="language-"]:before,
|
|
||||||
pre[class*="language-"]:after {
|
|
||||||
bottom: 14px;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Plugin styles: Line Numbers */
|
|
||||||
pre[class*="language-"].line-numbers.line-numbers {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"].line-numbers.line-numbers code {
|
|
||||||
padding-left: 3.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Plugin styles: Line Highlight */
|
|
||||||
pre[class*="language-"][data-line] {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
pre[data-line] code {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 4em;
|
|
||||||
}
|
|
||||||
pre .line-highlight {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar {
|
div.code-toolbar > .toolbar {
|
||||||
position: absolute;
|
display: none;
|
||||||
z-index: 10;
|
|
||||||
top: .3em;
|
|
||||||
right: .2em;
|
|
||||||
transition: opacity 0.3s ease-in-out;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.code-toolbar:hover > .toolbar {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Separate line b/c rules are thrown out if selector is invalid.
|
|
||||||
IE11 and old Edge versions don't support :focus-within. */
|
|
||||||
div.code-toolbar:focus-within > .toolbar {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > button {
|
|
||||||
background: none;
|
|
||||||
border: 0;
|
|
||||||
color: inherit;
|
|
||||||
font: inherit;
|
|
||||||
line-height: normal;
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
-webkit-user-select: none; /* for button */
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > a,
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > button,
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > span {
|
|
||||||
color: #bbb;
|
|
||||||
font-size: .8em;
|
|
||||||
padding: 0 .5em;
|
|
||||||
background: #f5f2f0;
|
|
||||||
background: rgba(224, 224, 224, 0.2);
|
|
||||||
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
|
|
||||||
border-radius: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
|
|
||||||
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-wrapper-dark {
|
|
||||||
pre[class*="language-"] {
|
|
||||||
code {
|
|
||||||
color: var(--text-color) !important;
|
|
||||||
|
|
||||||
.token {
|
|
||||||
&.tag {
|
|
||||||
color: rgb(141,219,140) !important;
|
|
||||||
}
|
|
||||||
&.keyword {
|
|
||||||
color: rgb(244,112,103) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.property {
|
|
||||||
color: rgb(150,208,255) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.attr-name,
|
|
||||||
&.attr-string {
|
|
||||||
color: rgb(108,182,255) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.string {
|
|
||||||
color: var(--text-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.attr-value {
|
|
||||||
color: var(--text-color) !important;
|
|
||||||
|
|
||||||
.punctuation {
|
|
||||||
color: rgb(108,182,255) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.punctuation {
|
|
||||||
color: var(--text-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.operator,
|
|
||||||
&.string {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.function {
|
|
||||||
color: rgb(220,189,251) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.operator {
|
|
||||||
color: rgb(150,208,255) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-wrapper-light {
|
|
||||||
pre[class*="language-"] {
|
|
||||||
code {
|
|
||||||
color: rgb(10,48,105) !important;
|
|
||||||
|
|
||||||
.token {
|
|
||||||
&.tag {
|
|
||||||
color: rgb(17,99,41) !important;
|
|
||||||
}
|
|
||||||
&.keyword {
|
|
||||||
color: rgb(207,34,46) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.property {
|
|
||||||
color: rgb(5,80,174) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.attr-name,
|
|
||||||
&.attr-string {
|
|
||||||
color: rgb(5,80,174) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.string {
|
|
||||||
color: rgb(10,48,105) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.attr-value {
|
|
||||||
color: rgb(10,48,105) !important;
|
|
||||||
|
|
||||||
.punctuation {
|
|
||||||
color: rgb(10,48,105) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.punctuation {
|
|
||||||
color: rgb(5,80,174) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.operator,
|
|
||||||
&.string {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.function {
|
|
||||||
color: rgb(130,80,223) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.operator {
|
|
||||||
color: rgb(5,80,174) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"] {
|
pre[class*="language-"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: transparent !important;
|
background: transparent;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
border-left: 1rem solid transparent !important;
|
border-left: 1rem solid transparent;
|
||||||
box-shadow: none !important;
|
box-shadow: none;
|
||||||
background: var(--surface-card) !important;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--surface-900);
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
max-height: inherit;
|
||||||
|
height: inherit;
|
||||||
|
padding: 0 1rem;
|
||||||
|
display: block;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.block-comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: #bbf7d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #bfdbfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.function-name,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.function,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.token.variable {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword,
|
||||||
|
.token.class-name {
|
||||||
|
color: #bbf7d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important {
|
||||||
|
color: #fde68a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #fde68a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-to-clipboard-button {
|
.copy-to-clipboard-button {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-dark {
|
||||||
|
.doc-section-code-buttons {
|
||||||
|
button {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
transition: background-color .2s, box-shadow .2s;
|
||||||
|
border: 0 none;
|
||||||
|
color: var(--surface-400);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255,255,255,.1);
|
||||||
|
color: var(--surface-500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre[class*="language-"] {
|
||||||
|
code {
|
||||||
|
background: var(--surface-card) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-light {
|
||||||
|
.doc-section-code-buttons {
|
||||||
|
button {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
transition: background-color .2s, box-shadow .2s;
|
||||||
|
border: 0 none;
|
||||||
|
color: var(--surface-400);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255,255,255,.1);
|
||||||
|
color: var(--surface-300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre[class*="language-"] {
|
||||||
|
code {
|
||||||
|
background: var(--surface-700) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,12 +1,29 @@
|
||||||
.layout-content {
|
.layout-content {
|
||||||
margin-left: 250px;
|
padding: 6rem 4rem 0 4rem;
|
||||||
padding-top: 5rem;
|
display: flex;
|
||||||
|
|
||||||
.layout-content-inner {
|
.layout-content-slot {
|
||||||
padding: 2rem 4rem;
|
flex: 1 1 auto;
|
||||||
}
|
width: 1%;
|
||||||
|
}
|
||||||
.card {
|
}
|
||||||
@include card;
|
|
||||||
|
.layout-light {
|
||||||
|
.card {
|
||||||
|
background: var(--surface-card);
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-dark {
|
||||||
|
.card {
|
||||||
|
background: var(--surface-card);
|
||||||
|
border: 0 none;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.25rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
|
@ -55,7 +55,7 @@ h6 {
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 1.5;
|
line-height: 1.75;
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -97,6 +97,6 @@ input[type="number"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-family: inherit;
|
font-family: var(--font-family);
|
||||||
font-feature-settings: inherit;
|
font-feature-settings: var(--font-feature-settings);
|
||||||
}
|
}
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
i {
|
i {
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
font-size: 0.875rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
@ -120,7 +120,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-wrapper-light {
|
.layout-light {
|
||||||
.doc-section-description {
|
.doc-section-description {
|
||||||
> p {
|
> p {
|
||||||
i {
|
i {
|
||||||
|
|
@ -131,7 +131,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-wrapper-dark {
|
.layout-dark {
|
||||||
.doc-section-description {
|
.doc-section-description {
|
||||||
> p {
|
> p {
|
||||||
i {
|
i {
|
||||||
|
|
@ -144,7 +144,7 @@
|
||||||
|
|
||||||
.doc-section-nav {
|
.doc-section-nav {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 7rem;
|
top: 6rem;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 14rem;
|
width: 14rem;
|
||||||
max-height: calc(100vh - 15rem);
|
max-height: calc(100vh - 15rem);
|
||||||
|
|
@ -175,6 +175,7 @@
|
||||||
.px-link {
|
.px-link {
|
||||||
padding: 0.25rem 1rem 0.25rem 1rem;
|
padding: 0.25rem 1rem 0.25rem 1rem;
|
||||||
color: var(--surface-800);
|
color: var(--surface-800);
|
||||||
|
font-weight: 400;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -229,17 +230,13 @@
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-section-code {
|
.doc-section-code {
|
||||||
div {
|
div {
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -247,14 +244,12 @@
|
||||||
|
|
||||||
.doc-tablewrapper {
|
.doc-tablewrapper {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
@include card;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-table {
|
.doc-table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 960px;
|
min-width: 960px;
|
||||||
background-color: var(--surface-card);
|
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
th {
|
th {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
width: 14rem;
|
width: 14rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: border-color .3s;
|
transition: border-color .3s;
|
||||||
height: 3rem;
|
height: 2.5rem;
|
||||||
padding: 0 .75rem;
|
padding: 0 .75rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
@mixin card {
|
|
||||||
background: var(--surface-card);
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
@ -66,21 +66,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.landing-news-active {
|
|
||||||
.landing-header {
|
|
||||||
top: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-news-active {
|
.layout-news-active {
|
||||||
.layout-sidebar,
|
.layout-topbar {
|
||||||
.layout-topbar,
|
|
||||||
.layout-config {
|
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-sidebar,
|
||||||
|
.doc-section-nav {
|
||||||
|
top: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.layout-content {
|
.layout-content {
|
||||||
padding-top: 7rem;
|
padding-top: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-section-label,
|
.doc-section-label,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@media screen and (min-width: 1729px) {
|
@media screen and (min-width: 1729px) {
|
||||||
.layout-content-inner {
|
.layout-content {
|
||||||
max-width: 1478px;
|
max-width: 1478px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
@ -8,97 +8,115 @@
|
||||||
max-width: 1478px;
|
max-width: 1478px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-sidebar {
|
||||||
|
left: 200px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 991px) {
|
@media screen and (max-width: 991px) {
|
||||||
.layout-wrapper {
|
.layout-topbar-inner {
|
||||||
.layout-topbar {
|
padding-left: 2rem;
|
||||||
left: 0;
|
padding-right: 2rem;
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.menu-button {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
#docsearch {
|
.menu-button {
|
||||||
margin-left: auto;
|
display: block;
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.DocSearch-Search-Icon {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button-Placeholder,
|
|
||||||
.DocSearch-Button-Keys {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-sidebar {
|
|
||||||
top: 0;
|
|
||||||
z-index: 1102;
|
|
||||||
height: 100%;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-content {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-mask {
|
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&.layout-mask-active {
|
|
||||||
z-index: 1101;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
transition: background-color .5s;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-section-nav {
|
.layout-topbar-logo-container {
|
||||||
display: none;
|
width: auto;
|
||||||
}
|
|
||||||
|
|
||||||
.doc-tabmenu {
|
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container {
|
#docsearch {
|
||||||
position: relative;
|
margin-left: auto;
|
||||||
width: 100%;
|
margin-right: .5rem;
|
||||||
height: 0;
|
}
|
||||||
padding-bottom: 56.25%;
|
|
||||||
|
|
||||||
iframe {
|
.DocSearch-Button {
|
||||||
position: absolute;
|
width: 2rem;
|
||||||
top: 0;
|
height: 2rem;
|
||||||
left: 0;
|
overflow: hidden;
|
||||||
width: 100%;
|
padding: 0;
|
||||||
height: 100%;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.DocSearch-Search-Icon {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button-Placeholder,
|
||||||
|
.DocSearch-Button-Keys {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-sidebar {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1102;
|
||||||
|
height: 100%;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
background-color: var(--surface-overlay);
|
||||||
|
width: 300px;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-mask {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&.layout-mask-active {
|
||||||
|
z-index: 1101;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
transition: background-color .5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-section-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-tabmenu {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
padding-bottom: 56.25%;
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-content {
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.blocked-scroll {
|
.blocked-scroll {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-right: var(--scrollbar-width);
|
padding-right: var(--scrollbar-width);
|
||||||
|
|
@ -106,32 +124,36 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
@media screen and (max-width: 575px) {
|
||||||
.layout-wrapper {
|
.layout-topbar-inner {
|
||||||
.layout-topbar-inner {
|
padding-left: 1rem;
|
||||||
padding-left: 1rem;
|
padding-right: 1rem;
|
||||||
padding-right: 1rem;
|
|
||||||
|
.layout-topbar-logo {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-content {
|
.layout-topbar-icon {
|
||||||
.layout-content-inner {
|
display: block;
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.layout-footer {
|
.layout-content {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-tabmenu {
|
.layout-footer {
|
||||||
li {
|
padding-left: 1rem;
|
||||||
flex: 1 1 0;
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
.doc-tabmenu {
|
||||||
width: 100%;
|
li {
|
||||||
min-width: auto;
|
flex: 1 1 0;
|
||||||
}
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
min-width: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,16 @@
|
||||||
.layout-sidebar {
|
.layout-sidebar {
|
||||||
position: fixed;
|
position: sticky;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 6rem;
|
||||||
height: 100%;
|
height: calc(100vh - 9rem);
|
||||||
background-color: var(--surface-overlay);
|
|
||||||
width: 250px;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: transform .4s cubic-bezier(.05,.74,.2,.99);
|
transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 1rem 0;
|
padding: 0 0 0 0;
|
||||||
|
flex: 0 0 250px;
|
||||||
|
margin-right: 4rem;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -17,10 +18,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
padding: .5rem 1rem 2rem 1rem;
|
padding: 0;
|
||||||
margin-top: 2rem;
|
margin: -.5rem 0 0 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-menu {
|
.layout-menu {
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: .5rem;
|
padding: .5rem 0;
|
||||||
color: var(--surface-900);
|
color: var(--surface-900);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
|
@ -96,7 +96,7 @@
|
||||||
color: var(--surface-700);
|
color: var(--surface-700);
|
||||||
border-left: 1px solid var(--surface-border);
|
border-left: 1px solid var(--surface-border);
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
font-weight: 400;
|
font-weight: 450;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: .5rem .5rem .5rem 1rem;
|
padding: .5rem .5rem .5rem 1rem;
|
||||||
color: var(--surface-700);
|
color: var(--surface-700);
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1,53 @@
|
||||||
.layout-topbar {
|
.layout-topbar {
|
||||||
padding: 0;
|
|
||||||
height: 5rem;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 250px;
|
left: 0;
|
||||||
width: calc(100% - 250px);
|
width: 100%;
|
||||||
z-index: 1100;
|
z-index: 1100;
|
||||||
transition: background-color 1s;
|
transition: background-color 1s;
|
||||||
|
border-bottom: 1px solid var(--surface-border);
|
||||||
.layout-topbar-inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 4rem;
|
|
||||||
height: 100%;
|
|
||||||
width: calc(100% - var(--scrollbar-width, 0px));
|
|
||||||
}
|
|
||||||
|
|
||||||
&.layout-topbar-sticky {
|
&.layout-topbar-sticky {
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-inner {
|
||||||
|
height: 4rem;
|
||||||
|
padding: 0 4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.layout-topbar-logo-container {
|
||||||
|
width: 250px;
|
||||||
|
margin-right: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-logo {
|
||||||
|
svg {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-icon {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docsearch {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-button {
|
.menu-button {
|
||||||
display: none;
|
display: none;
|
||||||
color: var(--text-color);
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
background-color: var(--surface-card);
|
|
||||||
border: 1px solid var(--surface-border);
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: border-color .3s;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-light {
|
||||||
.layout-wrapper-light {
|
|
||||||
.layout-topbar {
|
.layout-topbar {
|
||||||
&.layout-topbar-sticky {
|
&.layout-topbar-sticky {
|
||||||
background-color: rgba(255,255,255,.7);
|
background-color: rgba(255,255,255,.7);
|
||||||
|
|
@ -52,7 +55,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-wrapper-dark {
|
.layout-dark {
|
||||||
.layout-topbar {
|
.layout-topbar {
|
||||||
&.layout-topbar-sticky {
|
&.layout-topbar-sticky {
|
||||||
background-color: rgba(0,0,0,.3);
|
background-color: rgba(0,0,0,.3);
|
||||||
|
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
.landing-components {
|
|
||||||
.components-main {
|
|
||||||
.components-strip-top {
|
|
||||||
background: var(--home-components-strip-bg);
|
|
||||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-strip-bottom {
|
|
||||||
background: var(--home-components-strip-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
box-shadow: var(--home-card-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datepicker, .p-datepicker-header {
|
|
||||||
background: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1660px) {
|
|
||||||
.components-main-container {
|
|
||||||
width: 1504px !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,62 +1,52 @@
|
||||||
.landing-dark {
|
.layout-dark {
|
||||||
--home-highlight-color:#3B82F6;
|
--home-highlight-color:#10b981;
|
||||||
--home-highlight-darker-color:#3575dd;
|
--home-highlight-darker-color:#059669;
|
||||||
--home-highlight-fore-color:#ffffff;
|
--home-highlight-fore-color:#ffffff;
|
||||||
--home-bg:#030B17;
|
--home-bg:#111827;
|
||||||
--home-intro-bg:linear-gradient(180deg, #061730 0%, #030B17 100%);
|
--home-border-color:#424b57;
|
||||||
--home-border-color:#183E71;
|
|
||||||
--home-primary-text-color:#ffffff;
|
--home-primary-text-color:#ffffff;
|
||||||
--home-secondary-text-color:#B6C4D6;
|
--home-secondary-text-color:rgba(255,255,255,.6);
|
||||||
--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:rgba(11, 33, 63, 0.55);
|
--home-box-bg:#1f2937;
|
||||||
--home-linkbox-bg:rgba(11, 33, 63, 0.55);
|
--home-linkbox-bg:rgba(255, 255, 255, .1);
|
||||||
--home-linkbox-border:1px solid #183E71;
|
--home-linkbox-border:1px solid rgba(255, 255, 255, .2);
|
||||||
--home-linkbox-text-color:#ffffff;
|
--home-linkbox-text-color:#ffffff;
|
||||||
--home-linkbox-hover-bg:rgba(11, 33, 63, 0.9);
|
--home-linkbox-hover-bg:rgba(255, 255, 255, .2);
|
||||||
--home-header-bg:rgba(11, 33, 63, 0.65);
|
--home-blocks-bg:transparent;
|
||||||
--home-menu-link-text-color:#ffffff;
|
--home-blocks-block-bg:#111827;
|
||||||
--home-menu-link-hover-bg:rgba(11, 33, 63, 0.9);
|
|
||||||
--home-herobox-bg:#0B213F;
|
|
||||||
--home-herobox-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
|
|
||||||
--home-herobox-strip-top-bg:linear-gradient(360deg, rgba(3, 11, 23, 0) 0%, rgba(11, 37, 73, 0.913125) 53.83%, rgba(7, 24, 48, 0) 101.32%);
|
|
||||||
--home-herobox-strip-bottom-bg:linear-gradient(90deg, rgba(3, 11, 23, 0) 0%, #0C284E 50%, rgba(3, 11, 23, 0) 100%);
|
|
||||||
--home-herobox-logo-shadow:0px 50px 100px 0px #000000;
|
|
||||||
--home-components-strip-bg:linear-gradient(90deg, rgba(3, 11, 23, 0) 0%, #071934 100%);
|
|
||||||
--home-blocks-bg:linear-gradient(180deg, #040B17 0%, #061B38 58.33%, #030B17 100%);
|
|
||||||
--home-blocks-block-bg:#0B213F8C;
|
|
||||||
--home-blocks-block-shadow:0px 4.787564754486084px 10px 0px #0000001A , 0px 4px 25px rgba(0, 0, 0, 0.288);
|
--home-blocks-block-shadow:0px 4.787564754486084px 10px 0px #0000001A , 0px 4px 25px rgba(0, 0, 0, 0.288);
|
||||||
--home-blocks-border-left:5px solid #0E294D;
|
--home-blocks-border-left:5px solid #424b57;
|
||||||
--home-blocks-border-bottom:7px solid #0E294D;
|
--home-blocks-border-bottom:7px solid #424b57;
|
||||||
--home-blocks-border:1px solid #183E71;
|
--home-blocks-border:1px solid #424b57;
|
||||||
--home-blocks-sidebar-bg:#0D264A;
|
--home-blocks-sidebar-bg:#1f2937;
|
||||||
--home-blocks-list-bg:#0C2242;
|
--home-blocks-list-bg:#28323f;
|
||||||
--home-blocks-main-bg:#0B213F8C;
|
--home-blocks-main-bg:#111827;
|
||||||
--home-blocks-main-border:1px solid #183E71;
|
--home-blocks-main-border:1px solid #424b57;
|
||||||
--home-blocks-item-bg:#0D264A;
|
--home-blocks-item-bg:#1f2937;
|
||||||
--home-blocks-image-bg:#102F5B;
|
--home-blocks-image-bg:#28323f;
|
||||||
--home-blocks-text-color:#133667;
|
--home-blocks-text-color:rgba(255,255,255,.87);
|
||||||
--home-blocks-active-shadow:0px 30px 50px 0px #00000049;
|
--home-blocks-active-shadow:0px 30px 50px 0px #00000049;
|
||||||
--home-blocks-active-border-top:1px solid #183E71;
|
--home-blocks-active-border-top:1px solid #424b57;
|
||||||
--home-blocks-active-border-right:1px solid #183E71;
|
--home-blocks-active-border-right:1px solid #424b57;
|
||||||
--home-blocks-active-border-bottom:6px solid #112d52;
|
--home-blocks-active-border-bottom:6px solid #424b57;
|
||||||
--home-blocks-active-border-left:4px solid #183E71;
|
--home-blocks-active-border-left:4px solid #424b57;
|
||||||
--home-blocks-animation-shadow:0px 30px 50px 20px #00000059;
|
--home-blocks-animation-shadow:0px 30px 50px 20px #00000059;
|
||||||
--home-blocks-tablebar-bg:#194686;
|
--home-blocks-tablebar-bg:#424b57;
|
||||||
--home-blocks-bar-bg:#15386B;
|
--home-blocks-bar-bg:#0D9488;
|
||||||
--home-blocks-bar-button-bg:#0C2E56;
|
--home-blocks-bar-button-bg:#0D9488;
|
||||||
--home-blocks-circle-bg:#15386B;
|
--home-blocks-circle-bg:#0D9488;
|
||||||
--home-templates-bg:linear-gradient(180deg,#040b17 0%,#061b38 58.33%,#030b17 100%);
|
--home-templates-bg:transparent;
|
||||||
--home-templates-block-shadow:0px 4.787564754486084px 10px 0px #0000001a;
|
--home-templates-block-shadow:0px 4.787564754486084px 10px 0px #0000001a;
|
||||||
--home-templates-block-border-left:5px solid rgb(13, 35, 65);
|
--home-templates-block-border-left:5px solid #424b57;
|
||||||
--home-templates-block-border-bottom:7px solid #09182d;
|
--home-templates-block-border-bottom:7px solid #424b57;
|
||||||
--home-templates-line:linear-gradient(rgba(10, 35, 70, 0),#0e3163 50%,rgba(10, 35, 70, 0));
|
--home-templates-line:rgba(255,255,255,.1);
|
||||||
--home-templates-block-hover-bg:rgba(11, 33, 63, 0.699);
|
--home-templates-block-hover-bg:rgba(255,255,255,.09);
|
||||||
--home-templates-btn-bg:rgb(11, 33, 63);
|
--home-templates-btn-bg:#1f2937;
|
||||||
--home-templates-btn-text-color:#ffffff;
|
--home-templates-btn-text-color:#ffffff;
|
||||||
--home-templates-btn-shadow:0px 10px 15px 0px #00000040;
|
--home-templates-btn-shadow:0px 10px 15px 0px #00000040;
|
||||||
--home-templates-btn-border-top:1px solid rgb(13, 40, 78);
|
--home-templates-btn-border-top:1px solid #424b57;
|
||||||
--home-templates-btn-border-right:1px solid rgb(13, 40, 78);
|
--home-templates-btn-border-right:1px solid #424b57;
|
||||||
--home-templates-btn-border-bottom:4px solid rgb(13, 40, 78);
|
--home-templates-btn-border-bottom:4px solid #424b57;
|
||||||
--home-templates-btn-border-left:3px solid rgb(13, 40, 78);
|
--home-templates-btn-border-left:3px solid #424b57;
|
||||||
--home-features-card-shadow: none;
|
--home-features-card-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
.landing-designer {
|
|
||||||
.designer-demo {
|
|
||||||
--dd-primary:#4f8ff7;
|
|
||||||
--dd-primary-darker:#3575dd;
|
|
||||||
--dd-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
||||||
|
|
||||||
.p-component {
|
|
||||||
font-family: var(--dd-font);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider {
|
|
||||||
.p-slider-range {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-handle {
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputtext {
|
|
||||||
&:enabled:hover {
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox {
|
|
||||||
&:not(.p-checkbox-disabled) .p-checkbox-box {
|
|
||||||
&:hover, &.p-focus {
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.p-focus {
|
|
||||||
box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox-box {
|
|
||||||
&.p-highlight {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button {
|
|
||||||
background-color: var(--dd-primary);
|
|
||||||
border-color: var(--dd-primary);
|
|
||||||
|
|
||||||
&.p-button-outlined {
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
.p-button-icon, .p-button-label {
|
|
||||||
color: var(--dd-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:enabled:hover,
|
|
||||||
&:enabled:active {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:enabled:hover,
|
|
||||||
&:enabled:active {
|
|
||||||
background-color: var(--dd-primary-darker);
|
|
||||||
border-color: var(--dd-primary-darker);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox {
|
|
||||||
.p-listbox-list .p-listbox-item.p-highlight {
|
|
||||||
background-color: transparent;
|
|
||||||
box-shadow: inset 0 0 0 0.15rem var(--dd-primary);
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputtext, .p-button, .p-listbox-item, .p-slider {
|
|
||||||
transition: all .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider, .p-checkbox {
|
|
||||||
transition: transform .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.demo-size-small {
|
|
||||||
.p-inputtext, .p-button {
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-item {
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider, .p-checkbox {
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.demo-size-large {
|
|
||||||
.p-inputtext, .p-button {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-item {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider, .p-checkbox {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.formgrid > .field {
|
|
||||||
padding: 1rem 2rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.designer-editor {
|
|
||||||
backdrop-filter: blur(1rem);
|
|
||||||
box-shadow: var(--home-card-shadow);
|
|
||||||
max-width: 1250px !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.designer-controls {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,111 +0,0 @@
|
||||||
.landing-header {
|
|
||||||
background-color: transparent;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
.landing-header-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1250px !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.landing-header-logo {
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.landing-header-sticky {
|
|
||||||
background-color: var(--home-header-bg);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: .5rem 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
transition: background-color .3s;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: var(--home-menu-link-text-color);
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--home-menu-link-hover-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-button {
|
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $landingBreakpointLG) {
|
|
||||||
.landing-header {
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.landing-header-logo {
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.landing-header-active {
|
|
||||||
background-color: var(--home-header-bg);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
left: 100px;
|
|
||||||
top: 100px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
top: 5rem;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-button {
|
|
||||||
i:before {
|
|
||||||
content: "\e90b";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
a {
|
|
||||||
border: 1px solid var(--home-border-color);
|
|
||||||
background-color: var(--home-herobox-bg);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--home-linkbox-text-color);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
text-align: left;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1.5rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
margin-right: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,200 +1,22 @@
|
||||||
.landing-hero {
|
.landing-hero {
|
||||||
flex: 1 1 auto;
|
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
|
||||||
|
background: transparent;
|
||||||
.hero-inner {
|
|
||||||
.hero-box {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 1s;
|
|
||||||
transition-delay: 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
transform: scale(0);
|
|
||||||
opacity: 0;
|
|
||||||
transition: 0.5s;
|
|
||||||
transition-delay: 1.8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
b {
|
|
||||||
color: var(--home-primary-text-color);
|
|
||||||
display: block;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: var(--home-secondary-text-color);
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
background: var(--home-herobox-bg);
|
|
||||||
border: 1px solid var(--home-border-color);
|
|
||||||
box-shadow: 0px 50px 100px var(--home-herobox-shadow);
|
|
||||||
border-radius: 9px;
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 100%;
|
|
||||||
height: 0%;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
transition: height 1s 1.4s, opacity 1s 1.4s, border-color .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
&:before {
|
|
||||||
border-color: var(--home-highlight-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-border-top {
|
|
||||||
opacity: 0;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
width: 380px;
|
|
||||||
height: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
z-index: -1;
|
|
||||||
transition: height 1.5s, opacity 1.5s;
|
|
||||||
transition-delay: 0.6s;
|
|
||||||
border-radius: 9px;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-border-left {
|
|
||||||
border: 1px solid var(--home-border-color);
|
|
||||||
border-right: transparent;
|
|
||||||
width: 0%;
|
|
||||||
border-radius: 9px 0 0 9px;
|
|
||||||
height: 35%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: -3%;
|
|
||||||
z-index: -1;
|
|
||||||
opacity: 0;
|
|
||||||
transition: width 1s, opacity 1s, transform 1s;
|
|
||||||
transition-delay: 1s;
|
|
||||||
transform: translate(108px, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-border-right {
|
|
||||||
border: 1px solid var(--home-border-color);
|
|
||||||
border-left: transparent;
|
|
||||||
width: 0%;
|
|
||||||
border-radius: 0 9px 9px 0;
|
|
||||||
height: 35%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: -3%;
|
|
||||||
z-index: -1;
|
|
||||||
opacity: 0;
|
|
||||||
transition: width 1s, opacity 1s, transform 1s;
|
|
||||||
transition-delay: 1s;
|
|
||||||
transform: translate(-108px, -50%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-bg {
|
.box {
|
||||||
transition-delay: 1.4s;
|
box-shadow: var(--home-card-shadow);
|
||||||
|
|
||||||
.hero-strip-top {
|
|
||||||
transition: 1.6s;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 114px;
|
|
||||||
height: 0%;
|
|
||||||
opacity: 0;
|
|
||||||
background: var(--home-herobox-strip-top-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-strip-left {
|
|
||||||
transition: 1.6s;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 0%;
|
|
||||||
height: 114px;
|
|
||||||
opacity: 0;
|
|
||||||
background: var(--home-herobox-strip-bottom-bg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hero-animation {
|
.p-datepicker, .p-datepicker-header {
|
||||||
.hero-bg {
|
background: transparent;
|
||||||
.hero-strip-top {
|
border-color: transparent;
|
||||||
opacity: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-strip-left {
|
|
||||||
width: 100%;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-inner {
|
|
||||||
.hero-box {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.logo {
|
|
||||||
&::before {
|
|
||||||
box-shadow: var(--home-herobox-logo-shadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
height: 100%;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-border-top {
|
|
||||||
height: 70%;
|
|
||||||
opacity: 1;
|
|
||||||
border-color: var(--home-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-border-left {
|
|
||||||
opacity: 1;
|
|
||||||
width: 19%;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-border-right {
|
|
||||||
opacity: 1;
|
|
||||||
width: 19%;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $landingBreakpointLG) {
|
@media screen and (min-width: 1660px) {
|
||||||
.landing-hero {
|
.landing-hero {
|
||||||
padding: 0 2rem;
|
width: 1504px !important;
|
||||||
|
margin-left: auto !important;
|
||||||
|
margin-right: auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -5,12 +5,10 @@ $landingBreakpointXL: 1199px;
|
||||||
@import './_main';
|
@import './_main';
|
||||||
@import './_light';
|
@import './_light';
|
||||||
@import './_dark';
|
@import './_dark';
|
||||||
@import './_header';
|
|
||||||
@import './_hero';
|
@import './_hero';
|
||||||
|
@import './_users';
|
||||||
@import './_getstarted';
|
@import './_getstarted';
|
||||||
@import './_components';
|
|
||||||
@import './_themes';
|
@import './_themes';
|
||||||
@import './_blocks';
|
@import './_blocks';
|
||||||
@import './_designer';
|
|
||||||
@import './_templates';
|
@import './_templates';
|
||||||
@import './_features';
|
@import './_features';
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,52 @@
|
||||||
.landing-light {
|
.layout-light {
|
||||||
--home-highlight-color:#4f8ff7;
|
--home-highlight-color:#10b981;
|
||||||
--home-highlight-darker-color:#3575dd;
|
--home-highlight-darker-color:#059669;
|
||||||
--home-highlight-fore-color:#ffffff;
|
--home-highlight-fore-color:#ffffff;
|
||||||
--home-bg:#EDF5FF;
|
--home-bg:#F9FAFB;
|
||||||
--home-intro-bg:#EDF5FF;
|
--home-border-color:rgba(0,0,0,.1);
|
||||||
--home-border-color:#C7E0FF;
|
|
||||||
--home-primary-text-color:#191919;
|
--home-primary-text-color:#191919;
|
||||||
--home-secondary-text-color:#73879E;
|
--home-secondary-text-color:#73879E;
|
||||||
--home-card-shadow:0px 30px 50px #D4E0EE;
|
--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), 0px 111px 44px 0px rgba(0, 0, 0, 0.00), 0px 174px 49px 0px rgba(0, 0, 0, 0.00);
|
||||||
--home-box-bg:#ffffff;
|
--home-box-bg:#ffffff;
|
||||||
--home-linkbox-bg:#ffffff;
|
--home-linkbox-bg:#ffffff;
|
||||||
--home-linkbox-border:1px solid #C7E0FF;
|
--home-linkbox-border:1px solid rgba(0,0,0,.1);
|
||||||
--home-linkbox-text-color:#191919;
|
--home-linkbox-text-color:#191919;
|
||||||
--home-linkbox-hover-bg:#e3f0ff;
|
--home-linkbox-hover-bg:#e5e7eb;
|
||||||
--home-header-bg:rgba(255, 255, 255, 0.85);
|
--home-blocks-bg:transparent;
|
||||||
--home-menu-link-text-color:#191919;
|
--home-blocks-block-bg:#ffffff;
|
||||||
--home-menu-link-hover-bg:#e3f0ff;
|
--home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
|
||||||
--home-herobox-bg:#ffffff;
|
--home-blocks-border-left:5px solid rgba(0,0,0,.1);
|
||||||
--home-herobox-shadow:0px 50px 100px rgba(212, 224, 238, 0.25);
|
--home-blocks-border-bottom:7px solid rgba(0,0,0,.1);
|
||||||
--home-herobox-strip-top-bg:linear-gradient(0deg, #EDF5FF 1.9%, #D9EAFF 50.44%, #EDF5FF 100%);
|
--home-blocks-border:1px solid rgba(0,0,0,.1);
|
||||||
--home-herobox-strip-bottom-bg:linear-gradient(90deg, #F2F8FF 0%, #EDF5FF 0.01%, #D9EAFF 50%, #EDF5FF 100%);
|
--home-blocks-sidebar-bg:#f9fafb;
|
||||||
--home-herobox-logo-shadow:00px 50px 100px #BACCE2;
|
--home-blocks-list-bg:#f2f3f3;
|
||||||
--home-components-strip-bg:linear-gradient(90deg, #EDF5FF 0.01%, #D9EAFF 100%);
|
--home-blocks-main-bg:#ffffff;
|
||||||
--home-blocks-bg:linear-gradient(180deg, rgba(237, 245, 255, 0) 0%, #D4E8FE 49.48%, #EDF5FF 100%);
|
--home-blocks-main-border:1px solid rgba(0,0,0,.1);
|
||||||
--home-blocks-block-bg:#FFFFFF8C;
|
--home-blocks-item-bg:#f2f3f3;
|
||||||
--home-blocks-block-shadow:-10px 4px 10px 0px #c5d3e782, -10px 4px 25px #a1c0eb91;
|
--home-blocks-image-bg:#a1e3db;
|
||||||
--home-blocks-border-left:5px solid #D0E5FF;
|
--home-blocks-text-color:#b3b4b5;
|
||||||
--home-blocks-border-bottom:7px solid #D0E5FF;
|
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
|
||||||
--home-blocks-border:1px solid #D0E5FF;
|
--home-blocks-active-border-top:1px solid rgba(0,0,0,.1);
|
||||||
--home-blocks-sidebar-bg:#E4F0FF;
|
--home-blocks-active-border-right:1px solid rgba(0,0,0,.1);
|
||||||
--home-blocks-list-bg:#ECF5FF;
|
--home-blocks-active-border-bottom:6px solid rgba(0,0,0,.1);
|
||||||
--home-blocks-main-bg:none;
|
--home-blocks-active-border-left:4px solid rgba(0,0,0,.1);
|
||||||
--home-blocks-main-border:1px solid #D0E5FF;
|
--home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
|
||||||
--home-blocks-item-bg:#E4F0FF;
|
--home-blocks-tablebar-bg:#a1e3db;
|
||||||
--home-blocks-image-bg:#C1DFFF;
|
--home-blocks-bar-bg:#a1e3db;
|
||||||
--home-blocks-text-color:#C1DFFF;
|
|
||||||
--home-blocks-active-shadow:0px 30px 50px 0px #D9EAFF;
|
|
||||||
--home-blocks-active-border-top:1px solid #D7E9FF;
|
|
||||||
--home-blocks-active-border-right:1px solid #D7E9FF;
|
|
||||||
--home-blocks-active-border-bottom:6px solid #D7E9FF;
|
|
||||||
--home-blocks-active-border-left:4px solid #D7E9FF;
|
|
||||||
--home-blocks-animation-shadow:0px 30px 50px 10px #2E7BBC61;
|
|
||||||
--home-blocks-tablebar-bg:#C1DFFF;
|
|
||||||
--home-blocks-bar-bg:#C1DFFF;
|
|
||||||
--home-blocks-bar-button-bg:#ffffff;
|
--home-blocks-bar-button-bg:#ffffff;
|
||||||
--home-blocks-circle-bg:#C1DFFF;
|
--home-blocks-circle-bg:#a1e3db;
|
||||||
--home-templates-bg:linear-gradient(180deg,#edf5ff 0%,#d4e8fe 49.48%,#edf5ff 100%);
|
--home-templates-bg:transparent;
|
||||||
--home-templates-block-shadow:0px 4.787564754486084px 10px 0px #b9d2f0;
|
--home-templates-block-shadow:0px 4.787564754486084px 10px 0px rgba(0,0,0,.1);
|
||||||
--home-templates-block-border-left:5px solid #e9f3ff;
|
--home-templates-block-border-left:5px solid #edf0f3;
|
||||||
--home-templates-block-border-bottom:7px solid #e9f3ff;
|
--home-templates-block-border-bottom:7px solid#edf0f3;
|
||||||
--home-templates-line:linear-gradient(rgba(10, 35, 70, 0),#89b8f1 50%,rgba(10, 35, 70, 0));
|
--home-templates-line:rgba(0,0,0,.1);
|
||||||
--home-templates-block-hover-bg:rgba(11, 33, 63, 0.699);
|
--home-templates-block-hover-bg:rgba(0, 0, 0, 0.2);
|
||||||
--home-templates-btn-bg:rgb(11, 33, 63);
|
--home-templates-btn-bg:rgba(0, 0, 0, 0.5);
|
||||||
--home-templates-btn-text-color:#ffffff;
|
--home-templates-btn-text-color:#ffffff;
|
||||||
--home-templates-btn-shadow:0px 10px 15px 0px #00000040;
|
--home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.5);
|
||||||
--home-templates-btn-border-top:1px solid rgb(13, 40, 78);
|
--home-templates-btn-border-top:1px solid rgba(0,0,0,.1);
|
||||||
--home-templates-btn-border-right:1px solid rgb(13, 40, 78);
|
--home-templates-btn-border-right:1px solid rgba(0,0,0,.1);
|
||||||
--home-templates-btn-border-bottom:4px solid rgb(13, 40, 78);
|
--home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
|
||||||
--home-templates-btn-border-left:3px solid rgb(13, 40, 78);
|
--home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
|
||||||
--home-features-card-shadow: 0px 50px 100px rgba(212, 224, 238, 0.25);
|
--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), 0px 111px 44px 0px rgba(0, 0, 0, 0.00), 0px 174px 49px 0px rgba(0, 0, 0, 0.00);
|
||||||
}
|
}
|
||||||
|
|
@ -1,14 +1,7 @@
|
||||||
.landing {
|
.landing {
|
||||||
background: var(--home-bg);
|
background: var(--home-bg);
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
|
padding-top: 4rem;
|
||||||
.landing-intro {
|
|
||||||
background: var(--home-intro-bg);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-top: 5rem;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border: 1px solid var(--home-border-color);
|
border: 1px solid var(--home-border-color);
|
||||||
|
|
@ -134,54 +127,4 @@
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(calc(-100% - 3rem));
|
transform: translateX(calc(-100% - 3rem));
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.landing-users {
|
|
||||||
.fade-right {
|
|
||||||
background: linear-gradient(to left, var(--home-bg), transparent);
|
|
||||||
}
|
|
||||||
.fade-left {
|
|
||||||
background: linear-gradient(to right, var(--home-bg), transparent);
|
|
||||||
}
|
|
||||||
.section-detail {
|
|
||||||
max-width: 1250px !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
.users-container {
|
|
||||||
max-width: 1250px !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
|
|
||||||
.marquee-wrapper {
|
|
||||||
user-select: none;
|
|
||||||
gap: 3rem;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.marquee {
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 3rem;
|
|
||||||
min-width: 100%;
|
|
||||||
animation: scroll 30s linear infinite;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
max-width: clamp(10rem, 1rem + 28vmin, 20rem);
|
|
||||||
aspect-ratio: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.marquee-reverse{
|
|
||||||
animation-direction: reverse;
|
|
||||||
animation-delay: calc(30s / -2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
.landing-users {
|
||||||
|
.fade-right {
|
||||||
|
background: linear-gradient(to left, var(--home-bg), transparent);
|
||||||
|
}
|
||||||
|
.fade-left {
|
||||||
|
background: linear-gradient(to right, var(--home-bg), transparent);
|
||||||
|
}
|
||||||
|
.section-detail {
|
||||||
|
max-width: 1250px !important;
|
||||||
|
margin-left: auto !important;
|
||||||
|
margin-right: auto !important;
|
||||||
|
}
|
||||||
|
.users-container {
|
||||||
|
max-width: 1250px !important;
|
||||||
|
margin-left: auto !important;
|
||||||
|
margin-right: auto !important;
|
||||||
|
|
||||||
|
.marquee-wrapper {
|
||||||
|
user-select: none;
|
||||||
|
gap: 3rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.marquee {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 3rem;
|
||||||
|
min-width: 100%;
|
||||||
|
animation: scroll 30s linear infinite;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
max-width: clamp(10rem, 1rem + 28vmin, 20rem);
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.marquee-reverse{
|
||||||
|
animation-direction: reverse;
|
||||||
|
animation-delay: calc(30s / -2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
@charset 'UTF-8';
|
@charset 'UTF-8';
|
||||||
|
|
||||||
@import './_mixins';
|
|
||||||
@import './_core';
|
@import './_core';
|
||||||
@import './_topbar';
|
@import './_topbar';
|
||||||
@import './_sidebar';
|
@import './_sidebar';
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,56 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="!embedded" :class="scrollable ? 'doc-section-code' : 'relative doc-section-code'">
|
<div v-if="!embedded" :class="scrollable ? 'doc-section-code' : 'relative doc-section-code'">
|
||||||
<div
|
<div
|
||||||
class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1"
|
class="flex doc-section-code-buttons align-items-center justify-content-end z-1"
|
||||||
:style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }"
|
:style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }"
|
||||||
style="gap: 0.75rem"
|
style="gap: 0.75rem"
|
||||||
>
|
>
|
||||||
<template v-if="codeMode !== 'basic' && !hideToggleCode">
|
<template v-if="codeMode !== 'basic' && !hideToggleCode">
|
||||||
<Button
|
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
|
||||||
:class="['p-button-rounded p-button-text p-button-plain py-0 px-1 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
|
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
|
||||||
label="Composition API"
|
|
||||||
@click="codeLang = 'composition'"
|
|
||||||
></Button>
|
|
||||||
<Button
|
|
||||||
:class="['p-button-rounded p-button-text p-button-plain py-0 px-1 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'options' }]"
|
|
||||||
label="Options API"
|
|
||||||
@click="codeLang = 'options'"
|
|
||||||
></Button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="!hideToggleCode">
|
<template v-if="!hideToggleCode">
|
||||||
<Button
|
<button
|
||||||
v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }"
|
v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }"
|
||||||
type="button"
|
type="button"
|
||||||
@click="toggleCodeMode('composition')"
|
@click="toggleCodeMode('composition')"
|
||||||
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
||||||
icon="pi pi-code"
|
>
|
||||||
></Button>
|
<i class="pi pi-code"></i>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="!hideToggleCode && code.data">
|
<template v-if="!hideToggleCode && code.data">
|
||||||
<Button
|
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
|
||||||
v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }"
|
<i class="pi pi-database"></i>
|
||||||
type="button"
|
</button>
|
||||||
@click="onToggleData"
|
|
||||||
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
|
||||||
icon="pi pi-database"
|
|
||||||
>
|
|
||||||
</Button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="!hideCodeSandbox">
|
<template v-if="!hideCodeSandbox">
|
||||||
<Button
|
<button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
|
||||||
v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }"
|
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
|
||||||
type="button"
|
<path
|
||||||
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
|
||||||
@click="showCodesandbox"
|
/>
|
||||||
>
|
</svg>
|
||||||
<template #icon="slotProps">
|
</button>
|
||||||
<svg role="img" :class="slotProps.class" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: 'block'">
|
|
||||||
<path
|
|
||||||
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="!hideStackBlitz">
|
<template v-if="!hideStackBlitz">
|
||||||
<Button
|
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
|
||||||
v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }"
|
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
|
||||||
type="button"
|
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
|
||||||
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
</svg>
|
||||||
@click="showStackblitz"
|
</button>
|
||||||
>
|
|
||||||
<template #icon="slotProps">
|
|
||||||
<svg role="img" :class="slotProps.class" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: 'block'">
|
|
||||||
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<Button
|
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
|
||||||
v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }"
|
<i class="pi pi-copy"></i>
|
||||||
type="button"
|
</button>
|
||||||
@click="copyCode"
|
|
||||||
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
|
||||||
icon="pi pi-copy"
|
|
||||||
></Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :style="scrollable ? { 'max-height': '40rem', overflow: 'auto' } : undefined">
|
<div :style="scrollable ? { 'max-height': '40rem' } : undefined">
|
||||||
<template v-if="codeMode === 'basic' && importCode">
|
<template v-if="codeMode === 'basic' && importCode">
|
||||||
<pre v-code.script><code>{{ code.basic }}
|
<pre v-code.script><code>{{ code.basic }}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ const useStackBlitz = (language, code, service, extPages, dependencies, componen
|
||||||
template: 'node',
|
template: 'node',
|
||||||
description: embedded
|
description: embedded
|
||||||
? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
|
? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
|
||||||
: '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
|
: '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
|
||||||
dependencies: stackBlitzParameters.dependencies,
|
dependencies: stackBlitzParameters.dependencies,
|
||||||
files
|
files
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
</p>
|
</p>
|
||||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
|
||||||
<p>Voilà 💚, you now have access to 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.</p>
|
<p>Voilà 💚, you now have access to 80+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<aside class="layout-sidebar" :class="{ active: active }">
|
<aside class="layout-sidebar" :class="{ active: active }">
|
||||||
<PrimeVueNuxtLink to="/" class="logo" aria-label="PrimeVue logo"> <img alt="logo" :src="`https://primefaces.org/cdn/primevue/images/primevue-logo${darkTheme ? '-light' : '-dark'}.svg`" /></PrimeVueNuxtLink>
|
|
||||||
<nav>
|
<nav>
|
||||||
<ol class="layout-menu">
|
<ol class="layout-menu">
|
||||||
<AppMenuItem :menu="menu"></AppMenuItem>
|
<AppMenuItem :menu="menu"></AppMenuItem>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<div :ref="containerRef" class="layout-topbar">
|
<div :ref="containerRef" class="layout-topbar">
|
||||||
<div class="layout-topbar-inner">
|
<div class="layout-topbar-inner">
|
||||||
<button type="button" class="px-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
|
<div class="layout-topbar-logo-container">
|
||||||
<i class="pi pi-bars"></i>
|
<PrimeVueNuxtLink to="/" class="layout-topbar-logo" aria-label="PrimeVue logo">
|
||||||
</button>
|
<svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.062 32C128.438 32 128.656 31.8125 128.75 31.4375L134.031 7.6875C134.125 7.25 133.938 7 133.469 7H130.5C130.125 7 129.906 7.1875 129.812 7.5625L126.5 24.3125L123.219 7.5625C123.125 7.1875 122.906 7 122.531 7H119.562C119.094 7 118.906 7.25 119 7.6875L124.25 31.4375C124.344 31.8125 124.562 32 124.938 32H128.062ZM144.562 32C147.5 32 149.062 30.4375 149.062 27.5V7.625C149.062 7.28125 148.781 7 148.438 7H145.562C145.219 7 144.938 7.28125 144.938 7.625V26.625C144.938 27.4688 144.5 27.875 143.688 27.875H142.062C141.25 27.875 140.812 27.4688 140.812 26.625V7.625C140.812 7.28125 140.531 7 140.188 7H137.188C136.844 7 136.562 7.28125 136.562 7.625V27.5C136.562 30.4375 138.125 32 141.062 32H144.562ZM164.656 31.5C164.656 31.8125 164.531 32 164.156 32H152.656C152.375 32 152.188 31.8125 152.188 31.5V7.5C152.188 7.1875 152.375 7 152.656 7H164.156C164.531 7 164.656 7.1875 164.656 7.5V10.625C164.656 10.9375 164.531 11.1562 164.156 11.1562H156.344V17.4062H162.312C162.625 17.4062 162.812 17.5938 162.812 17.9375V21.0312C162.812 21.375 162.625 21.5625 162.312 21.5625H156.344V27.875H164.156C164.531 27.875 164.656 28.0312 164.656 28.375V31.5Z" fill="var(--primary-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.0938 32C48.4375 32 48.5938 31.8125 48.5938 31.5V23.625H52.3438C55.2812 23.625 56.8438 22.0312 56.8438 19.125V11.5C56.8438 8.5625 55.2812 7 52.3438 7H44.8438C44.5312 7 44.3438 7.1875 44.3438 7.5V31.5C44.3438 31.8125 44.5312 32 44.8438 32H48.0938ZM51.3438 19.5H48.5938V11.125H51.3438C52.1875 11.125 52.5938 11.5625 52.5938 12.375V18.25C52.5938 19.0312 52.1875 19.5 51.3438 19.5ZM63.9062 31.5C63.9062 31.8125 63.7188 32 63.4062 32H60.1562C59.8438 32 59.6562 31.8125 59.6562 31.5V7.5C59.6562 7.1875 59.8438 7 60.1562 7H68C70.9375 7 72.5 8.5625 72.5 11.5V19.125C72.5 21.2188 71.7188 22.5938 70.2188 23.25L72.375 31.4375C72.4688 31.8125 72.2812 32 71.9375 32H68.6875C68.375 32 68.2188 31.8438 68.1562 31.5625L66.0625 23.625H63.9062V31.5ZM67 19.5H63.9062V11.125H67C67.8125 11.125 68.25 11.5625 68.25 12.375V18.25C68.25 19.0625 67.8125 19.5 67 19.5ZM79.875 31.5C79.875 31.8125 79.6875 32 79.375 32H76.125C75.7812 32 75.625 31.8125 75.625 31.5V7.5C75.625 7.1875 75.7812 7 76.125 7H79.375C79.6875 7 79.875 7.1875 79.875 7.5V31.5ZM86.5 32C86.9062 32 87.125 31.7812 87.125 31.375V17.3125H87.3438L90.4375 31.4375C90.5312 31.8125 90.75 32 91.125 32H92.6562C93.0312 32 93.25 31.8125 93.3438 31.4375L96.4375 17.3125H96.6562V31.375C96.6562 31.7812 96.875 32 97.2812 32H100.188C100.594 32 100.812 31.7812 100.812 31.375V7.625C100.812 7.21875 100.594 7 100.188 7H96.0625C95.6875 7 95.4688 7.1875 95.375 7.5625L91.9062 23.125L88.4375 7.5625C88.3438 7.1875 88.125 7 87.75 7H83.625C83.2188 7 83 7.21875 83 7.625V31.375C83 31.7812 83.2188 32 83.625 32H86.5ZM116.406 31.5C116.406 31.8125 116.281 32 115.906 32H104.406C104.125 32 103.938 31.8125 103.938 31.5V7.5C103.938 7.1875 104.125 7 104.406 7H115.906C116.281 7 116.406 7.1875 116.406 7.5V10.625C116.406 10.9375 116.281 11.1562 115.906 11.1562H108.094V17.4062H114.062C114.375 17.4062 114.562 17.5938 114.562 17.9375V21.0312C114.562 21.375 114.375 21.5625 114.062 21.5625H108.094V27.875H115.906C116.281 27.875 116.406 28.0312 116.406 28.375V31.5Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M25.5739 18.0458L22.8661 17.4443L24.9722 20.4519V29.7756L32.193 23.7603V13.5344L28.8835 14.7374L25.5739 18.0458Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M8.72522 18.0458L11.433 17.4443L9.32696 20.4519V29.7756L2.10609 23.7603V13.5344L5.41565 14.7374L8.72522 18.0458Z" fill="var(--primary-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2296 21.0534L12.6365 17.4443L14.1409 18.3466H20.1582L21.6626 17.4443L24.0696 21.0534V34.5878L22.2643 37.2947L20.1582 39.4H14.1409L12.0348 37.2947L10.2296 34.5878V21.0534Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M24.9722 35.4901L28.8835 31.5802V27.6702L24.9722 30.9786V35.4901Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M9.32697 35.4901L5.41566 31.5802V27.6702L9.32697 30.9786V35.4901Z" fill="var(--primary-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0609 0H20.1583V5.7988L21.8141 1.78842L21.0609 0ZM19.5762 7.20849L18.9548 7.51908V0H17.7513V11.6281L19.5762 7.20849ZM17.7513 14.2483L22.3605 3.08549L23.4678 5.7145L19.8574 17.1435H17.7513V14.2483ZM16.5478 11.6718V0H15.3443V7.51908L14.8434 7.26869L16.5478 11.6718ZM14.1409 5.45385V0H13.2383L12.6085 1.49519L14.1409 5.45385ZM12.0497 2.82181L16.5478 14.4419V17.1435H14.7426L10.8313 5.7145L12.0497 2.82181Z" fill="var(--text-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.80522 12.3313L14.7426 17.1435H15.0435L11.1322 5.71452L0 4.81223L1.80522 12.3313ZM32.7948 12.3313L19.8574 17.1435H19.5565L23.167 5.71452L34.6 4.81223L32.7948 12.3313Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M24.0696 4.81221L30.3878 4.21069L26.1757 0H21.9635L24.0696 4.81221Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M10.2295 4.81221L3.91129 4.21069L8.12346 0H12.3356L10.2295 4.81221Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M4.70001 5.20001L11.2 5.70001L15.1 17.15H14.7L10.5 15.6L4.70001 5.20001Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M29.8 5.20001L23.1 5.70001L19.4 17.15L19.9 17.14L23.8 15.7L29.8 5.20001Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M12.1 18.2L12.6 17.4L14.3 18.2H20.3L21.6 17.4L22.2 18.2L17.15 26.8L12.1 18.2Z" fill="var(--text-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)"/>
|
||||||
|
</svg>
|
||||||
|
</PrimeVueNuxtLink>
|
||||||
|
<PrimeVueNuxtLink to="/" class="layout-topbar-icon" aria-label="PrimeVue logo">
|
||||||
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z" fill="var(--text-color)"/>
|
||||||
|
</svg>
|
||||||
|
</PrimeVueNuxtLink>
|
||||||
|
</div>
|
||||||
<div id="docsearch"></div>
|
<div id="docsearch"></div>
|
||||||
|
|
||||||
<ul class="flex list-none m-0 p-0 gap-2 align-items-center">
|
<ul class="flex list-none m-0 p-0 gap-2 align-items-center">
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href="https://github.com/primefaces/primevue"
|
href="https://github.com/primefaces/primevue"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
||||||
>
|
>
|
||||||
<i class="pi pi-github text-700"></i>
|
<i class="pi pi-github text-700"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -23,7 +46,7 @@
|
||||||
href="https://discord.gg/gzKFYnpmCY"
|
href="https://discord.gg/gzKFYnpmCY"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
||||||
>
|
>
|
||||||
<i class="pi pi-discord text-700"></i>
|
<i class="pi pi-discord text-700"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -33,27 +56,31 @@
|
||||||
href="https://github.com/orgs/primefaces/discussions"
|
href="https://github.com/orgs/primefaces/discussions"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
||||||
>
|
>
|
||||||
<i class="pi pi-comments text-700"></i>
|
<i class="pi pi-comments text-700"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li v-if="showConfigurator">
|
||||||
<button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
|
<button type="button" class="p-button flex-shrink-0 flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
|
||||||
<i class="pi pi-palette"></i>
|
<i class="pi pi-palette"></i>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
<li v-if="showDarkSwitch">
|
||||||
|
<button type="button" class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary" @click="toggleDarkMode">
|
||||||
|
<i :class="['pi', {'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme}]"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
<li class="relative">
|
<li class="relative">
|
||||||
<button
|
<button
|
||||||
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
|
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
|
||||||
type="button"
|
type="button"
|
||||||
class="px-link flex align-items-center surface-card h-2rem px-3 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
|
class="px-link flex align-items-center surface-card h-2rem px-3 border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
|
||||||
>
|
>
|
||||||
<span class="text-900"> {{ versions[0].version }}</span>
|
<span class="text-900"> {{ versions[0].version }}</span>
|
||||||
<span class="ml-2 pi pi-angle-down text-600"></span>
|
<span class="ml-2 pi pi-angle-down text-600"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="p-3 surface-overlay hidden absolute right-0 top-auto border-round shadow-2 origin-top w-12rem">
|
<div class="p-3 surface-overlay hidden absolute right-0 top-auto border-round shadow-2 origin-top w-12rem">
|
||||||
<ul class="list-none m-0 p-0">
|
<ul class="list-none m-0 p-0">
|
||||||
<li v-for="version in versions" :key="version.version" role="none">
|
<li v-for="version in versions" :key="version.version" role="none">
|
||||||
|
|
@ -65,6 +92,11 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="menu-button">
|
||||||
|
<button type="button" class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
|
||||||
|
<i class="pi pi-bars"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -75,8 +107,18 @@ import pkg from '@/package.json';
|
||||||
import docsearch from '@docsearch/js';
|
import docsearch from '@docsearch/js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
emits: ['menubutton-click', 'configbutton-click'],
|
emits: ['menubutton-click', 'configbutton-click', 'darkswitch-click'],
|
||||||
outsideClickListener: null,
|
outsideClickListener: null,
|
||||||
|
props: {
|
||||||
|
showConfigurator: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showDarkSwitch: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
versions: [
|
versions: [
|
||||||
|
|
@ -117,6 +159,9 @@ export default {
|
||||||
onMenuButtonClick(event) {
|
onMenuButtonClick(event) {
|
||||||
this.$emit('menubutton-click', event);
|
this.$emit('menubutton-click', event);
|
||||||
},
|
},
|
||||||
|
toggleDarkMode(event) {
|
||||||
|
this.$emit('darkswitch-click', event);
|
||||||
|
},
|
||||||
bindScrollListener() {
|
bindScrollListener() {
|
||||||
if (!this.scrollListener) {
|
if (!this.scrollListener) {
|
||||||
if (this.container) {
|
if (this.container) {
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="layout-wrapper" :class="containerClass">
|
<div class="layout-wrapper" :class="containerClass">
|
||||||
<app-news v-if="$appState.newsActive" />
|
<AppNews v-if="$appState.newsActive" />
|
||||||
<app-topbar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" />
|
<AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" />
|
||||||
<app-menu :active="sidebarActive" />
|
<AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
|
||||||
<app-configurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
|
|
||||||
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
|
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
|
||||||
<div class="layout-content">
|
<div class="layout-content">
|
||||||
<div class="layout-content-inner">
|
<app-menu :active="sidebarActive" />
|
||||||
|
<div class="layout-content-slot">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<app-footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<AppFooter />
|
||||||
<Toast />
|
<Toast />
|
||||||
<Toast position="top-left" group="tl" />
|
<Toast position="top-left" group="tl" />
|
||||||
<Toast position="bottom-left" group="bl" />
|
<Toast position="bottom-left" group="bl" />
|
||||||
|
|
@ -101,18 +101,18 @@ export default {
|
||||||
'layout-news-active': this.$appState.newsActive,
|
'layout-news-active': this.$appState.newsActive,
|
||||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||||
'p-ripple-disabled': this.$primevue.config.ripple === false,
|
'p-ripple-disabled': this.$primevue.config.ripple === false,
|
||||||
'layout-wrapper-dark': this.$appState.darkTheme,
|
'layout-dark': this.$appState.darkTheme,
|
||||||
'layout-wrapper-light': !this.$appState.darkTheme
|
'layout-light': !this.$appState.darkTheme
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
'app-topbar': AppTopBar,
|
AppTopBar,
|
||||||
'app-menu': AppMenu,
|
AppMenu,
|
||||||
'app-footer': AppFooter,
|
AppFooter,
|
||||||
'app-configurator': AppConfigurator,
|
AppConfigurator,
|
||||||
'app-news': AppNews
|
AppNews
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ export default defineNuxtConfig({
|
||||||
{
|
{
|
||||||
id: 'theme-link',
|
id: 'theme-link',
|
||||||
rel: 'stylesheet',
|
rel: 'stylesheet',
|
||||||
href: baseUrl + 'themes/lara-light-blue/theme.css'
|
href: baseUrl + 'themes/lara-light-teal/theme.css'
|
||||||
},
|
},
|
||||||
{ rel: 'icon', href: baseUrl + 'favicon.ico' }
|
{ rel: 'icon', href: baseUrl + 'favicon.ico' }
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="landingClass">
|
<div :class="landingClass">
|
||||||
<Intro @change:theme="onThemeToggle"></Intro>
|
<AppNews v-if="$appState.newsActive" />
|
||||||
|
<AppTopBar :showConfigurator="false" showDarkSwitch @darkswitch-click="onThemeToggle" />
|
||||||
|
<HeroSection />
|
||||||
<UsersSection />
|
<UsersSection />
|
||||||
<ComponentSection />
|
|
||||||
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
||||||
<BlockSection />
|
<BlockSection />
|
||||||
<DesignerSection />
|
|
||||||
<TemplateSection />
|
<TemplateSection />
|
||||||
<FeaturesSection />
|
<FeaturesSection />
|
||||||
<FooterSection />
|
<FooterSection />
|
||||||
|
|
@ -13,18 +13,21 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'custom'
|
||||||
|
});
|
||||||
|
|
||||||
import EventBus from '@/layouts/AppEventBus';
|
import EventBus from '@/layouts/AppEventBus';
|
||||||
|
import AppNews from '@/layouts/AppNews';
|
||||||
|
import AppTopBar from '@/layouts/AppTopBar.vue';
|
||||||
import BlockSection from './landing/BlockSection';
|
import BlockSection from './landing/BlockSection';
|
||||||
import ComponentSection from './landing/ComponentSection';
|
|
||||||
import DesignerSection from './landing/DesignerSection';
|
|
||||||
import FeaturesSection from './landing/FeaturesSection';
|
import FeaturesSection from './landing/FeaturesSection';
|
||||||
import FooterSection from './landing/FooterSection';
|
import FooterSection from './landing/FooterSection';
|
||||||
|
import HeroSection from './landing/HeroSection';
|
||||||
import TemplateSection from './landing/TemplateSection';
|
import TemplateSection from './landing/TemplateSection';
|
||||||
import ThemeSection from './landing/ThemeSection';
|
import ThemeSection from './landing/ThemeSection';
|
||||||
import UsersSection from './landing/UsersSection';
|
import UsersSection from './landing/UsersSection';
|
||||||
|
|
||||||
const Intro = defineAsyncComponent(() => import('./landing/Intro.vue'));
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
theme: {
|
theme: {
|
||||||
|
|
@ -34,7 +37,7 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableTheme: 'lara-light-blue'
|
tableTheme: 'lara-light-teal'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
themeChangeListener: null,
|
themeChangeListener: null,
|
||||||
|
|
@ -49,11 +52,11 @@ export default {
|
||||||
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
|
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
|
||||||
}
|
}
|
||||||
|
|
||||||
this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-blue' : 'lara-light-blue');
|
this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal');
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onThemeToggle() {
|
onThemeToggle() {
|
||||||
const newTheme = this.$appState.darkTheme ? 'lara-light-blue' : 'lara-dark-blue';
|
const newTheme = this.$appState.darkTheme ? 'lara-light-teal' : 'lara-dark-teal';
|
||||||
const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
|
const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
|
||||||
|
|
||||||
EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
|
EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
|
||||||
|
|
@ -87,15 +90,15 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
landingClass() {
|
landingClass() {
|
||||||
return ['landing', { 'landing-dark': this.$appState?.darkTheme, 'landing-light': !this.$appState?.darkTheme, 'landing-news-active': this.$appState?.newsActive }];
|
return ['landing', { 'layout-dark': this.$appState?.darkTheme, 'layout-light': !this.$appState?.darkTheme, 'layout-news-active': this.$appState?.newsActive }];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Intro,
|
AppNews,
|
||||||
ComponentSection,
|
AppTopBar,
|
||||||
|
HeroSection,
|
||||||
ThemeSection,
|
ThemeSection,
|
||||||
BlockSection,
|
BlockSection,
|
||||||
DesignerSection,
|
|
||||||
TemplateSection,
|
TemplateSection,
|
||||||
UsersSection,
|
UsersSection,
|
||||||
FeaturesSection,
|
FeaturesSection,
|
||||||
|
|
|
||||||
|
|
@ -1,243 +0,0 @@
|
||||||
<template>
|
|
||||||
<section class="landing-components py-8">
|
|
||||||
<div class="section-header">Components</div>
|
|
||||||
<p class="section-detail"><span class="font-bold text-900">Over 90</span> Vue UI Components with top-notch quality to help you implement all your UI requirements in style.</p>
|
|
||||||
<div class="components-main relative">
|
|
||||||
<div class="components-main-container flex flex-column xl:flex-row mt-7 gap-5 justify-content-center mx-auto w-full xl:w-auto px-5 lg:px-8">
|
|
||||||
<div class="flex flex-column md:flex-row gap-5 w-full xl:w-auto">
|
|
||||||
<div class="flex flex-column w-full gap-5 xl:mt-8 z-1 lg:w-28rem md:w-30rem">
|
|
||||||
<div class="box p-4">
|
|
||||||
<span class="text-secondary font-medium block mb-3">Balance</span>
|
|
||||||
<div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
|
|
||||||
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
|
|
||||||
<InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
|
|
||||||
</div>
|
|
||||||
<span class="text-secondary font-medium block mt-5 mb-3">Category</span>
|
|
||||||
<div class="flex justify-content-between flex-wrap gap-3">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
|
|
||||||
<label for="category1" class="ml-2 font-medium">Clothing</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
|
|
||||||
<label for="category2" class="ml-2 font-medium">Fitness</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
|
|
||||||
<label for="category3" class="ml-2 font-medium">Electronics</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box p-4">
|
|
||||||
<Chart type="line" :data="chartData" :options="chartOptions" />
|
|
||||||
</div>
|
|
||||||
<div class="box p-4">
|
|
||||||
<TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
|
|
||||||
</div>
|
|
||||||
<div class="box p-4">
|
|
||||||
<ul class="list-none p-0 m-0">
|
|
||||||
<li class="flex align-items-center mb-3">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
|
|
||||||
<span class="font-medium">Darrel Steward</span>
|
|
||||||
<ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
|
|
||||||
<span class="text-secondary font-medium">15%</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex align-items-center mb-3">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
|
|
||||||
<span class="font-medium">Albert Flores</span>
|
|
||||||
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
|
|
||||||
<span class="text-secondary font-medium">85%</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex align-items-center mb-3">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
|
|
||||||
<span class="font-medium">Kathryn Murphy</span>
|
|
||||||
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
|
|
||||||
<span class="text-secondary font-medium">50%</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex align-items-center mb-3">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
|
|
||||||
<span class="font-medium">Cody Fisher</span>
|
|
||||||
<ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
|
|
||||||
<span class="text-secondary font-medium">75%</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex align-items-center mb-3">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
|
|
||||||
<span class="font-medium">Brandon Atkinson</span>
|
|
||||||
<ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
|
|
||||||
<span class="text-secondary font-medium">60%</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column w-full gap-5 justify-content-start xl:w-24rem z-1">
|
|
||||||
<div class="box p-4">
|
|
||||||
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center mb-4">
|
|
||||||
<div class="flex flex-column">
|
|
||||||
<span class="block font-semibold mb-1">Brown Watch</span>
|
|
||||||
<span class="text-secondary text-sm">Premium Quality</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-medium text-xl ml-auto">$12.45</span>
|
|
||||||
</div>
|
|
||||||
<Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
|
|
||||||
</div>
|
|
||||||
<div class="box p-4">
|
|
||||||
<Tree :value="nodes" class="bg-transparent border-none p-0" />
|
|
||||||
</div>
|
|
||||||
<div class="box p-4">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<Chip label="Vue" class="mr-2 font-medium" removable />
|
|
||||||
<span class="font-medium">Typescript</span>
|
|
||||||
<InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
|
|
||||||
</div>
|
|
||||||
<div class="mt-5">
|
|
||||||
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box p-4 block xl:hidden">
|
|
||||||
<div class="flex justify-content-center">
|
|
||||||
<Slider v-model="rangeValues" range class="w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-column gap-5 flex-column md:flex-row xl:flex-column justify-content-between xl:justify-content-start z-1 w-full md:w-auto">
|
|
||||||
<div class="flex flex-column gap-5 xl:mt-5 w-full">
|
|
||||||
<div class="box p-4 hidden xl:block">
|
|
||||||
<div class="flex justify-content-center w-full">
|
|
||||||
<Slider v-model="rangeValues" range class="w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box p-4 w-full">
|
|
||||||
<ul class="list-none p-0 m-0">
|
|
||||||
<li class="flex mb-3">
|
|
||||||
<span class="mr-3">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
|
|
||||||
</span>
|
|
||||||
<div class="flex flex-column">
|
|
||||||
<span class="font-bold mb-2">Amanda Williams</span>
|
|
||||||
<p class="m-0 text-secondary">Webmaster</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="flex">
|
|
||||||
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
|
|
||||||
<i class="pi pi-home text-xl mr-3"></i>
|
|
||||||
<span class="flex flex-column">
|
|
||||||
<span class="font-bold mb-1">Dashboard</span>
|
|
||||||
<span class="m-0 text-secondary">Control Panel</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="flex">
|
|
||||||
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
|
|
||||||
<i class="pi pi-envelope text-xl mr-3"></i>
|
|
||||||
<span class="flex flex-column">
|
|
||||||
<span class="font-bold mb-1">Inbox</span>
|
|
||||||
<span class="m-0 text-secondary">View Messages</span>
|
|
||||||
</span>
|
|
||||||
<Badge value="3" class="ml-auto"></Badge>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="flex">
|
|
||||||
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
|
|
||||||
<i class="pi pi-cog text-xl mr-3"></i>
|
|
||||||
<span class="flex flex-column">
|
|
||||||
<span class="font-bold mb-1">Profile</span>
|
|
||||||
<span class="m-0 text-secondary">Account Settings</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box p-4 md:w-6 xl:w-full">
|
|
||||||
<Calendar v-model="dateValue" :inline="true" :showWeek="true" class="w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="components-strip-top absolute w-full md:w-6 h-8rem top-0 left-0"></div>
|
|
||||||
<div class="components-strip-bottom absolute w-full md:w-6 h-8rem bottom-0 right-0"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { NodeService } from '@/service/NodeService';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value1: 240,
|
|
||||||
value2: 356,
|
|
||||||
category: 'C',
|
|
||||||
chartData: {
|
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Income',
|
|
||||||
data: [40, 59, 40, 50, 56, 40, 70],
|
|
||||||
fill: true,
|
|
||||||
borderColor: '#03C4E8',
|
|
||||||
tension: 0.4,
|
|
||||||
backgroundColor: 'rgba(3, 196, 232, .2)'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
chartOptions: {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
ticks: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
min: 0,
|
|
||||||
max: 100
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
ticks: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pbValue1: 15,
|
|
||||||
pbValue2: 85,
|
|
||||||
pbValue3: 50,
|
|
||||||
pbValue4: 75,
|
|
||||||
pbValue5: 60,
|
|
||||||
activeTabIndex: 0,
|
|
||||||
radioValue: 'C',
|
|
||||||
nodes: null,
|
|
||||||
switchValue: true,
|
|
||||||
selectButtonValue: { name: 'Prime', value: 1 },
|
|
||||||
dateValue: null,
|
|
||||||
rangeValues: [20, 80],
|
|
||||||
items: [
|
|
||||||
{ label: 'Home', icon: 'pi pi-fw pi-home' },
|
|
||||||
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
|
|
||||||
{ label: 'Settings', icon: 'pi pi-fw pi-cog' }
|
|
||||||
],
|
|
||||||
selectButtonOptions: [
|
|
||||||
{ name: 'Prime', value: 1 },
|
|
||||||
{ name: 'Vue', value: 2 },
|
|
||||||
{ name: 'Themes', value: 3 }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setCategory(category) {
|
|
||||||
this.category = category;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,175 +0,0 @@
|
||||||
<template>
|
|
||||||
<section class="landing-designer py-8">
|
|
||||||
<div class="section-header">Theme Designer</div>
|
|
||||||
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
|
|
||||||
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
|
|
||||||
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
|
|
||||||
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
|
|
||||||
<div class="text-center mb-4">
|
|
||||||
<img :src="'https://primefaces.org/cdn/primevue/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
|
|
||||||
</div>
|
|
||||||
<div class="p-fluid">
|
|
||||||
<span class="font-semibold block mb-3">Primary</span>
|
|
||||||
<div>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
|
|
||||||
<button type="button" class="border-circle w-2rem h-2rem px-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="font-semibold block mt-4 mb-3">Font</span>
|
|
||||||
<Dropdown v-model="font" :options="fonts" optionLabel="label" @change="changeFont"></Dropdown>
|
|
||||||
|
|
||||||
<span class="font-semibold block mt-4 mb-3">Size</span>
|
|
||||||
<div class="flex flex-wrap gap-4 align-items-center">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
|
|
||||||
<label for="size-small" class="ml-2 font-medium">Small</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
|
|
||||||
<label for="size-normal" class="ml-2 font-medium">Normal</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="size-large" v-model="size" value="large" name="sizevalue" />
|
|
||||||
<label for="size-large" class="ml-2 font-medium">Large</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="font-semibold block mt-4 mb-3">Input Style</span>
|
|
||||||
<div class="flex align-items-center mb-6">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<RadioButton id="inputStyle1" value="outlined" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
|
|
||||||
<label for="inputStyle1" class="ml-2 font-medium">Outlined</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center ml-4">
|
|
||||||
<RadioButton id="inputStyle2" value="filled" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
|
|
||||||
<label for="inputStyle2" class="ml-2 font-medium">Filled</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="https://designer.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active">
|
|
||||||
<span>View Full Version</span>
|
|
||||||
<i class="pi pi-arrow-right ml-auto"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :ref="editorRef" :class="editorclass" style="border-radius: '10px'">
|
|
||||||
<div class="p-fluid formgrid grid pt-3">
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="username" class="font-semibold mb-3 p-component">Username</label>
|
|
||||||
<InputText id="username" type="text" />
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="email" class="font-semibold mb-3 p-component">Email</label>
|
|
||||||
<InputText id="email" type="text" />
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="price" class="font-semibold mb-3 p-component">Price</label>
|
|
||||||
<div class="p-inputgroup">
|
|
||||||
<span class="p-inputgroup-addon">$</span>
|
|
||||||
<InputNumber id="price" placeholder="Price" />
|
|
||||||
<span class="p-inputgroup-addon">.00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="date" class="font-semibold mb-3 p-component">Date</label>
|
|
||||||
<div class="p-inputgroup">
|
|
||||||
<span class="p-inputgroup-addon">
|
|
||||||
<i class="pi pi-calendar"></i>
|
|
||||||
</span>
|
|
||||||
<InputMask id="date" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<span class="font-semibold mb-2 block mb-3 mt-3 p-component">City</span>
|
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
|
||||||
</div>
|
|
||||||
<div class="field col-12 xl:col-6">
|
|
||||||
<label for="email" class="font-semibold mb-3 mt-3 p-component">Range</label>
|
|
||||||
<Slider v-model="range" range />
|
|
||||||
|
|
||||||
<span class="font-semibold mb-2 block mb-3 mt-5 p-component">Checkboxes</span>
|
|
||||||
<div class="flex flex-column xl:flex-row xl:align-items-center">
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<Checkbox id="cb1" v-model="values" :value="value1" name="cbvalue" />
|
|
||||||
<label for="cb1" class="ml-2 font-medium p-component white-space-nowrap">Option 1</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center mt-3 xl:mt-0 xl:ml-4">
|
|
||||||
<Checkbox id="cb2" v-model="values" :value="value2" name="cbvalue" />
|
|
||||||
<label for="cb2" class="ml-2 font-medium p-component white-space-nowrap">Option 2</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span>
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<Button type="button" label="Save" icon="pi pi-check" class="mr-1"></Button>
|
|
||||||
<Button type="button" label="Clear" icon="pi pi-times" outlined class="ml-1"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
size: 'normal',
|
|
||||||
font: { label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
|
|
||||||
fonts: [
|
|
||||||
{ label: 'Arial', value: 'Arial,Helvetica Neue,Helvetica,sans-serif' },
|
|
||||||
{ label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
|
|
||||||
{ label: 'Trebuchet MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif' },
|
|
||||||
{ label: 'Verdana', value: 'Verdana,Geneva,sans-serif' }
|
|
||||||
],
|
|
||||||
selectedCity: null,
|
|
||||||
cities: [
|
|
||||||
{ name: 'New York', code: 'NY' },
|
|
||||||
{ name: 'Rome', code: 'RM' },
|
|
||||||
{ name: 'London', code: 'LDN' },
|
|
||||||
{ name: 'Paris', code: 'PRS' }
|
|
||||||
],
|
|
||||||
range: [20, 80],
|
|
||||||
value1: 1,
|
|
||||||
value2: 2,
|
|
||||||
values: []
|
|
||||||
};
|
|
||||||
},
|
|
||||||
editor: null,
|
|
||||||
methods: {
|
|
||||||
changeTheme(color, darker) {
|
|
||||||
this.editor.style.setProperty('--dd-primary', color);
|
|
||||||
this.editor.style.setProperty('--dd-primary-darker', darker);
|
|
||||||
},
|
|
||||||
changeFont(event) {
|
|
||||||
this.editor.style.setProperty('--dd-font', event.value.value);
|
|
||||||
this.font = event.value;
|
|
||||||
},
|
|
||||||
onChange(value) {
|
|
||||||
this.$primevue.config.inputStyle = value;
|
|
||||||
},
|
|
||||||
editorRef(el) {
|
|
||||||
this.editor = el;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
editorclass() {
|
|
||||||
return [
|
|
||||||
'designer-demo',
|
|
||||||
{
|
|
||||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
|
||||||
'demo-size-small': this.size === 'small',
|
|
||||||
'demo-size-large': this.size === 'large'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
inputstyle() {
|
|
||||||
return this.$primevue.config.inputStyle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -2,14 +2,22 @@
|
||||||
<section class="landing-features py-8">
|
<section class="landing-features py-8">
|
||||||
<div class="section-header">Features</div>
|
<div class="section-header">Features</div>
|
||||||
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
|
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
|
||||||
<div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
|
<div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt-gray' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }">
|
||||||
<div class="features-container">
|
<div class="features-container">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||||
<div class="box p-4 w-full">
|
<div class="box p-4 w-full">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
|
||||||
<div class="font-semibold mb-3 text-lg">90+ UI Components</div>
|
<div class="font-semibold mb-3 text-lg">80+ UI Components</div>
|
||||||
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
|
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||||
|
<div class="box p-4 w-full">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
|
||||||
|
<div class="font-semibold mb-3 text-lg">Styled or Unstyled</div>
|
||||||
|
<p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems
|
||||||
|
with the CSS library of your choice like TailwindCSS.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||||
|
|
@ -19,13 +27,6 @@
|
||||||
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
|
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
|
||||||
<div class="box p-4 w-full">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
|
|
||||||
<div class="font-semibold mb-3 text-lg">Productivity</div>
|
|
||||||
<p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||||
<div class="box p-4 w-full">
|
<div class="box p-4 w-full">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
|
||||||
|
|
@ -49,9 +50,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||||
<div class="box p-4 w-full">
|
<div class="box p-4 w-full">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
|
||||||
<div class="font-semibold mb-3 text-lg">Themes</div>
|
<div class="font-semibold mb-3 text-lg">Blocks</div>
|
||||||
<p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
|
<p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||||
|
|
|
||||||
|
|
@ -70,18 +70,37 @@
|
||||||
|
|
||||||
<div class="flex flex-wrap justify-content-between py-6 gap-5">
|
<div class="flex flex-wrap justify-content-between py-6 gap-5">
|
||||||
<span>
|
<span>
|
||||||
<img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
|
<svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:120px">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.062 32C128.438 32 128.656 31.8125 128.75 31.4375L134.031 7.6875C134.125 7.25 133.938 7 133.469 7H130.5C130.125 7 129.906 7.1875 129.812 7.5625L126.5 24.3125L123.219 7.5625C123.125 7.1875 122.906 7 122.531 7H119.562C119.094 7 118.906 7.25 119 7.6875L124.25 31.4375C124.344 31.8125 124.562 32 124.938 32H128.062ZM144.562 32C147.5 32 149.062 30.4375 149.062 27.5V7.625C149.062 7.28125 148.781 7 148.438 7H145.562C145.219 7 144.938 7.28125 144.938 7.625V26.625C144.938 27.4688 144.5 27.875 143.688 27.875H142.062C141.25 27.875 140.812 27.4688 140.812 26.625V7.625C140.812 7.28125 140.531 7 140.188 7H137.188C136.844 7 136.562 7.28125 136.562 7.625V27.5C136.562 30.4375 138.125 32 141.062 32H144.562ZM164.656 31.5C164.656 31.8125 164.531 32 164.156 32H152.656C152.375 32 152.188 31.8125 152.188 31.5V7.5C152.188 7.1875 152.375 7 152.656 7H164.156C164.531 7 164.656 7.1875 164.656 7.5V10.625C164.656 10.9375 164.531 11.1562 164.156 11.1562H156.344V17.4062H162.312C162.625 17.4062 162.812 17.5938 162.812 17.9375V21.0312C162.812 21.375 162.625 21.5625 162.312 21.5625H156.344V27.875H164.156C164.531 27.875 164.656 28.0312 164.656 28.375V31.5Z" fill="var(--primary-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.0938 32C48.4375 32 48.5938 31.8125 48.5938 31.5V23.625H52.3438C55.2812 23.625 56.8438 22.0312 56.8438 19.125V11.5C56.8438 8.5625 55.2812 7 52.3438 7H44.8438C44.5312 7 44.3438 7.1875 44.3438 7.5V31.5C44.3438 31.8125 44.5312 32 44.8438 32H48.0938ZM51.3438 19.5H48.5938V11.125H51.3438C52.1875 11.125 52.5938 11.5625 52.5938 12.375V18.25C52.5938 19.0312 52.1875 19.5 51.3438 19.5ZM63.9062 31.5C63.9062 31.8125 63.7188 32 63.4062 32H60.1562C59.8438 32 59.6562 31.8125 59.6562 31.5V7.5C59.6562 7.1875 59.8438 7 60.1562 7H68C70.9375 7 72.5 8.5625 72.5 11.5V19.125C72.5 21.2188 71.7188 22.5938 70.2188 23.25L72.375 31.4375C72.4688 31.8125 72.2812 32 71.9375 32H68.6875C68.375 32 68.2188 31.8438 68.1562 31.5625L66.0625 23.625H63.9062V31.5ZM67 19.5H63.9062V11.125H67C67.8125 11.125 68.25 11.5625 68.25 12.375V18.25C68.25 19.0625 67.8125 19.5 67 19.5ZM79.875 31.5C79.875 31.8125 79.6875 32 79.375 32H76.125C75.7812 32 75.625 31.8125 75.625 31.5V7.5C75.625 7.1875 75.7812 7 76.125 7H79.375C79.6875 7 79.875 7.1875 79.875 7.5V31.5ZM86.5 32C86.9062 32 87.125 31.7812 87.125 31.375V17.3125H87.3438L90.4375 31.4375C90.5312 31.8125 90.75 32 91.125 32H92.6562C93.0312 32 93.25 31.8125 93.3438 31.4375L96.4375 17.3125H96.6562V31.375C96.6562 31.7812 96.875 32 97.2812 32H100.188C100.594 32 100.812 31.7812 100.812 31.375V7.625C100.812 7.21875 100.594 7 100.188 7H96.0625C95.6875 7 95.4688 7.1875 95.375 7.5625L91.9062 23.125L88.4375 7.5625C88.3438 7.1875 88.125 7 87.75 7H83.625C83.2188 7 83 7.21875 83 7.625V31.375C83 31.7812 83.2188 32 83.625 32H86.5ZM116.406 31.5C116.406 31.8125 116.281 32 115.906 32H104.406C104.125 32 103.938 31.8125 103.938 31.5V7.5C103.938 7.1875 104.125 7 104.406 7H115.906C116.281 7 116.406 7.1875 116.406 7.5V10.625C116.406 10.9375 116.281 11.1562 115.906 11.1562H108.094V17.4062H114.062C114.375 17.4062 114.562 17.5938 114.562 17.9375V21.0312C114.562 21.375 114.375 21.5625 114.062 21.5625H108.094V27.875H115.906C116.281 27.875 116.406 28.0312 116.406 28.375V31.5Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M25.5739 18.0458L22.8661 17.4443L24.9722 20.4519V29.7756L32.193 23.7603V13.5344L28.8835 14.7374L25.5739 18.0458Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M8.72522 18.0458L11.433 17.4443L9.32696 20.4519V29.7756L2.10609 23.7603V13.5344L5.41565 14.7374L8.72522 18.0458Z" fill="var(--primary-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2296 21.0534L12.6365 17.4443L14.1409 18.3466H20.1582L21.6626 17.4443L24.0696 21.0534V34.5878L22.2643 37.2947L20.1582 39.4H14.1409L12.0348 37.2947L10.2296 34.5878V21.0534Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M24.9722 35.4901L28.8835 31.5802V27.6702L24.9722 30.9786V35.4901Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M9.32697 35.4901L5.41566 31.5802V27.6702L9.32697 30.9786V35.4901Z" fill="var(--primary-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0609 0H20.1583V5.7988L21.8141 1.78842L21.0609 0ZM19.5762 7.20849L18.9548 7.51908V0H17.7513V11.6281L19.5762 7.20849ZM17.7513 14.2483L22.3605 3.08549L23.4678 5.7145L19.8574 17.1435H17.7513V14.2483ZM16.5478 11.6718V0H15.3443V7.51908L14.8434 7.26869L16.5478 11.6718ZM14.1409 5.45385V0H13.2383L12.6085 1.49519L14.1409 5.45385ZM12.0497 2.82181L16.5478 14.4419V17.1435H14.7426L10.8313 5.7145L12.0497 2.82181Z" fill="var(--text-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.80522 12.3313L14.7426 17.1435H15.0435L11.1322 5.71452L0 4.81223L1.80522 12.3313ZM32.7948 12.3313L19.8574 17.1435H19.5565L23.167 5.71452L34.6 4.81223L32.7948 12.3313Z" fill="var(--primary-color)"/>
|
||||||
|
<path d="M24.0696 4.81221L30.3878 4.21069L26.1757 0H21.9635L24.0696 4.81221Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M10.2295 4.81221L3.91129 4.21069L8.12346 0H12.3356L10.2295 4.81221Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M4.70001 5.20001L11.2 5.70001L15.1 17.15H14.7L10.5 15.6L4.70001 5.20001Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M29.8 5.20001L23.1 5.70001L19.4 17.15L19.9 17.14L23.8 15.7L29.8 5.20001Z" fill="var(--text-color)"/>
|
||||||
|
<path d="M12.1 18.2L12.6 17.4L14.3 18.2H20.3L21.6 17.4L22.2 18.2L17.15 26.8L12.1 18.2Z" fill="var(--text-color)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)"/>
|
||||||
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center gap-2">
|
||||||
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
||||||
<i class="pi pi-twitter"></i>
|
<i class="pi pi-twitter"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
<a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
||||||
<i class="pi pi-github"></i>
|
<i class="pi pi-github"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
||||||
<i class="pi pi-discord"></i>
|
<i class="pi pi-discord"></i>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
||||||
|
<i class="pi pi-comments"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
<template>
|
|
||||||
<section :ref="containerRef" :class="['landing-header px-5 lg:px-8', { 'landing-header-active': menuActive }]">
|
|
||||||
<div class="landing-header-container">
|
|
||||||
<span>
|
|
||||||
<img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex align-items-center">
|
|
||||||
<nav class="scalein origin-top">
|
|
||||||
<ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
|
|
||||||
<li class="mr-0 lg:mr-2">
|
|
||||||
<router-link to="/installation">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
|
|
||||||
<span>Components</span>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li class="mr-0 lg:mr-2">
|
|
||||||
<a href="https://blocks.primevue.org">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue blocks" />
|
|
||||||
<span>Blocks</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="mr-0 lg:mr-2">
|
|
||||||
<a href="https://designer.primevue.org">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue designer" />
|
|
||||||
<span>Designer</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="mr-0 lg:mr-2">
|
|
||||||
<router-link to="/uikit">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/uikit-icon.svg" alt="primevue designer" width="30" />
|
|
||||||
<span>UI Kit</span>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li class="mr-0 lg:mr-2">
|
|
||||||
<a href="https://www.primefaces.org/store/templates.xhtml">
|
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
|
|
||||||
<span>Templates</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
<a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
|
|
||||||
<i class="pi pi-github"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
|
|
||||||
<i class="pi pi-discord"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
|
|
||||||
<i class="pi pi-comments"></i>
|
|
||||||
</a>
|
|
||||||
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
|
|
||||||
<i :class="['pi', { 'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme() }]"></i>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-1 md:ml-2 menu-button" @click="toggleMenuActive">
|
|
||||||
<i class="pi pi-bars"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['theme-toggle'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
menuActive: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
scrollListener: null,
|
|
||||||
container: null,
|
|
||||||
mounted() {
|
|
||||||
this.bindScrollListener();
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
if (this.scrollListener) {
|
|
||||||
this.unbindScrollListener();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
this.checkSticky();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
isDarkTheme() {
|
|
||||||
return this.$appState.darkTheme === true;
|
|
||||||
},
|
|
||||||
toggleTheme() {
|
|
||||||
this.$emit('theme-toggle');
|
|
||||||
},
|
|
||||||
toggleMenuActive() {
|
|
||||||
this.menuActive = !this.menuActive;
|
|
||||||
},
|
|
||||||
bindScrollListener() {
|
|
||||||
if (!this.scrollListener && this.container) {
|
|
||||||
this.scrollListener = () => {
|
|
||||||
this.checkSticky();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', this.scrollListener);
|
|
||||||
},
|
|
||||||
unbindScrollListener() {
|
|
||||||
if (this.scrollListener) {
|
|
||||||
window.removeEventListener('scroll', this.scrollListener);
|
|
||||||
this.scrollListener = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
containerRef(el) {
|
|
||||||
this.container = el;
|
|
||||||
},
|
|
||||||
checkSticky() {
|
|
||||||
if (window.scrollY > 0) this.container.classList.add('landing-header-sticky');
|
|
||||||
else this.container.classList.remove('landing-header-sticky');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,111 +1,195 @@
|
||||||
<template>
|
<template>
|
||||||
<section :class="['landing-hero flex align-items-center flex-column justify-content-center relative', { 'hero-animation': setAnimation }]">
|
<section class="landing-hero py-8 px-5 lg:px-8">
|
||||||
<div class="hero-inner z-2 relative">
|
<div class="flex flex-wrap">
|
||||||
<div class="flex flex-column md:align-items-center md:flex-row">
|
<div class="w-full xl:w-6 flex flex-column justify-content-center lg:px-8 align-items-center xl:align-items-stretch">
|
||||||
<div class="p-2 flex flex-row md:flex-column">
|
<h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')">
|
<p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
<div class="flex flex-column align-items-center">
|
<div>
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
|
<PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4"> Get Started <i class="pi pi-arrow-right ml-3"></i> </PrimeVueNuxtLink>
|
||||||
<div class="name">
|
</div>
|
||||||
<b>Templates</b>
|
</div>
|
||||||
<span>Spectacular Designs</span>
|
<div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
|
||||||
</div>
|
<div class="flex">
|
||||||
</div>
|
<div class="flex flex-column w-6 gap-5 pt-8 pr-3">
|
||||||
</div>
|
<div class="box p-4">
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://designer.primevue.org')">
|
<span class="text-secondary font-medium block mb-3">Balance</span>
|
||||||
<div class="flex flex-column align-items-center">
|
<div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
|
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
|
||||||
<div class="name">
|
<InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
|
||||||
<b>Theme Designer</b>
|
</div>
|
||||||
<span>Create Your Own</span>
|
<span class="text-secondary font-medium block mt-5 mb-3">Category</span>
|
||||||
</div>
|
<div class="flex justify-content-between flex-wrap gap-3">
|
||||||
</div>
|
<div class="flex align-items-center">
|
||||||
</div>
|
<RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
|
||||||
</div>
|
<label for="category1" class="ml-2 font-medium">Clothing</label>
|
||||||
<div class="p-2 flex flex-row md:flex-column">
|
</div>
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')">
|
<div class="flex align-items-center">
|
||||||
<div class="flex flex-column align-items-center">
|
<RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
|
<label for="category2" class="ml-2 font-medium">Fitness</label>
|
||||||
<div class="name">
|
</div>
|
||||||
<b>Open Source</b>
|
<div class="flex align-items-center">
|
||||||
<span>90+ UI Components</span>
|
<RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
|
||||||
</div>
|
<label for="category3" class="ml-2 font-medium">Electronics</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<router-link to="/installation">
|
<span class="text-secondary font-medium block mt-5 mb-3">Order Date</span>
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
|
<Calendar v-model="dateValue" :showWeek="true" class="w-full" />
|
||||||
<div class="hero-box-inner text-center">
|
</div>
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/overview-icon.svg" alt="primevue main" />
|
<div class="box p-4">
|
||||||
<div class="name">
|
<Chart type="line" :data="chartData" :options="chartOptions" />
|
||||||
<b class="font-bold">NEXT-GEN VUE UI</b>
|
</div>
|
||||||
</div>
|
<div class="box p-4">
|
||||||
</div>
|
<div class="flex align-items-center">
|
||||||
</div>
|
<Chip label="Vue" class="mr-2 font-medium" />
|
||||||
</router-link>
|
<span class="font-medium">Typescript</span>
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://primeflex.org')">
|
<InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
|
||||||
<div class="flex flex-column align-items-center">
|
</div>
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg" alt="primevue icons" />
|
<div class="mt-5 flex justify-content-center">
|
||||||
<div class="name">
|
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
|
||||||
<b>CSS Utilities</b>
|
</div>
|
||||||
<span>PrimeFlex CSS</span>
|
<div class="mt-5">
|
||||||
</div>
|
<Slider v-model="rangeValues" range class="w-full" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 flex flex-row md:flex-column">
|
<div class="flex flex-column w-6 gap-5 pl-3">
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://blocks.primevue.org')">
|
<div class="box p-4">
|
||||||
<div class="flex flex-column align-items-center">
|
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
|
||||||
<div class="name">
|
</div>
|
||||||
<b>Prime Blocks</b>
|
<div class="flex align-items-center mb-4">
|
||||||
<span>400+ UI Blocks</span>
|
<div class="flex flex-column">
|
||||||
</div>
|
<span class="block font-semibold mb-1">Brown Watch</span>
|
||||||
</div>
|
<span class="text-secondary text-sm">Premium Quality</span>
|
||||||
</div>
|
</div>
|
||||||
<router-link to="/icons">
|
<span class="font-medium text-xl ml-auto">$12.45</span>
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
|
</div>
|
||||||
<div class="flex flex-column align-items-center">
|
<Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/icons-icon.svg" alt="primevue templates" />
|
</div>
|
||||||
<div class="name">
|
<div class="box p-4 w-full">
|
||||||
<b>Icon Library</b>
|
<ul class="list-none p-0 m-0">
|
||||||
<span>200+ Icons</span>
|
<li class="flex mb-3">
|
||||||
</div>
|
<span class="mr-3">
|
||||||
</div>
|
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
|
||||||
</div>
|
</span>
|
||||||
</router-link>
|
<div class="flex flex-column">
|
||||||
|
<span class="font-bold mb-2">Amanda Williams</span>
|
||||||
|
<p class="m-0 text-secondary">Webmaster</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
|
||||||
|
<i class="pi pi-home text-xl mr-3"></i>
|
||||||
|
<span class="flex flex-column">
|
||||||
|
<span class="font-bold mb-1">Dashboard</span>
|
||||||
|
<span class="m-0 text-secondary">Control Panel</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
|
||||||
|
<i class="pi pi-envelope text-xl mr-3"></i>
|
||||||
|
<span class="flex flex-column">
|
||||||
|
<span class="font-bold mb-1">Inbox</span>
|
||||||
|
<span class="m-0 text-secondary">View Messages</span>
|
||||||
|
</span>
|
||||||
|
<Badge value="3" class="ml-auto"></Badge>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
|
||||||
|
<i class="pi pi-cog text-xl mr-3"></i>
|
||||||
|
<span class="flex flex-column">
|
||||||
|
<span class="font-bold mb-1">Profile</span>
|
||||||
|
<span class="m-0 text-secondary">Account Settings</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="box p-4">
|
||||||
|
<TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-border-top hidden md:block"></div>
|
|
||||||
<div class="hero-border-left hidden md:block"></div>
|
|
||||||
<div class="hero-border-right hidden md:block"></div>
|
|
||||||
</div>
|
|
||||||
<GetStartedSection />
|
|
||||||
<div class="hero-bg absolute top-0 left-0 right-0 bottom-0 z-0">
|
|
||||||
<div class="hero-strip-top"></div>
|
|
||||||
<div class="hero-strip-left"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import GetStartedSection from './GetStartedSection';
|
import { NodeService } from '@/service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
setAnimation: false
|
value1: 240,
|
||||||
|
value2: 356,
|
||||||
|
category: 'C',
|
||||||
|
chartData: {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Income',
|
||||||
|
data: [40, 59, 40, 50, 56, 40, 70],
|
||||||
|
fill: true,
|
||||||
|
borderColor: '#10b981',
|
||||||
|
tension: 0.4,
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, .2)'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
chartOptions: {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
ticks: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
ticks: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pbValue1: 15,
|
||||||
|
pbValue2: 85,
|
||||||
|
pbValue3: 50,
|
||||||
|
pbValue4: 75,
|
||||||
|
pbValue5: 60,
|
||||||
|
activeTabIndex: 0,
|
||||||
|
radioValue: 'C',
|
||||||
|
nodes: null,
|
||||||
|
switchValue: true,
|
||||||
|
selectButtonValue: { name: 'Styled', value: 1 },
|
||||||
|
dateValue: null,
|
||||||
|
rangeValues: [20, 80],
|
||||||
|
items: [
|
||||||
|
{ label: 'Home', icon: 'pi pi-fw pi-home' },
|
||||||
|
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
|
||||||
|
{ label: 'Settings', icon: 'pi pi-fw pi-cog' }
|
||||||
|
],
|
||||||
|
selectButtonOptions: [
|
||||||
|
{ name: 'Styled', value: 1 },
|
||||||
|
{ name: 'Unstyled', value: 2 }
|
||||||
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setAnimation = true;
|
NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
navigateTo(url) {
|
setCategory(category) {
|
||||||
window.location.href = url;
|
this.category = category;
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
GetStartedSection: GetStartedSection
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="landing-intro">
|
|
||||||
<AppNews v-if="$appState.newsActive" />
|
|
||||||
<HeaderSection @theme-toggle="$emit('change:theme')" />
|
|
||||||
<HeroSection />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import AppNews from '@/layouts/AppNews';
|
|
||||||
import HeaderSection from './HeaderSection';
|
|
||||||
import HeroSection from './HeroSection';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
emits: ['change:theme'],
|
|
||||||
components: {
|
|
||||||
HeaderSection,
|
|
||||||
HeroSection,
|
|
||||||
AppNews
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -3,14 +3,14 @@
|
||||||
<div class="section-header">Themes</div>
|
<div class="section-header">Themes</div>
|
||||||
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p>
|
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p>
|
||||||
<div class="flex flex-wrap justify-content-center">
|
<div class="flex flex-wrap justify-content-center">
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
|
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'teal')">PrimeOne</button>
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
|
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
||||||
<a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
|
<a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
|
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
|
||||||
:style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }"
|
:style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt-gray' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }"
|
||||||
>
|
>
|
||||||
<div class="box overflow-hidden z-1 p-5 table-container">
|
<div class="box overflow-hidden z-1 p-5 table-container">
|
||||||
<DataTable
|
<DataTable
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<section class="landing-users py-8 px-3 lg:px-8">
|
<section class="landing-users py-8 px-3 lg:px-8">
|
||||||
<div class="section-header">Who Uses</div>
|
<div class="section-header">Who Uses</div>
|
||||||
<p class="section-detail">
|
<p class="section-detail">
|
||||||
PrimeTek libraries have reached over <span class="font-semibold animated-text relative white-space-nowrap"> <span>110 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
|
PrimeTek libraries have reached over <span class="font-semibold animated-text relative white-space-nowrap"> <span>140 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex justify-content-center align-items-center mt-4">
|
<div class="flex justify-content-center align-items-center mt-4">
|
||||||
<span class="ml-2"> </span>
|
<span class="ml-2"> </span>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
const $appState = {
|
const $appState = {
|
||||||
install: (Vue, options) => {
|
install: (Vue, options) => {
|
||||||
Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-blue', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: true, announcement: {}, storageKey: 'primevue' });
|
Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: true, announcement: {}, storageKey: 'primevue' });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue