diff --git a/src/assets/images/home/icon-pro.svg b/src/assets/images/home/icon-pro.svg index e6e14ac06..55285db0e 100644 --- a/src/assets/images/home/icon-pro.svg +++ b/src/assets/images/home/icon-pro.svg @@ -1 +1,67 @@ - \ No newline at end of file + + + + icon-pro.ff46cf3c + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss index 800bd8dce..04f2eddf6 100644 --- a/src/assets/styles/app/_config.scss +++ b/src/assets/styles/app/_config.scss @@ -9,7 +9,6 @@ height: calc(100% - 70px); transition: transform .3s; transform: translate3d(550px,0,0); - background-color: #ffffff; backface-visibility: hidden; &.layout-config-active { @@ -36,9 +35,9 @@ width: 52px; height: 52px; line-height: 52px; - background-color: #41b883; + background-color: var(--primary-color); text-align: center; - color: #fafafa; + color: var(--primary-color-text); top: 200px; left: -51px; z-index: -1; @@ -58,16 +57,11 @@ transform: rotate(0deg); transition: transform 1s; } - - &:hover { - background-color: #3aa476; - } } } a { - color: #1976D2; - transition: color .2s; + color: $linkColor; font-weight: 500; } @@ -85,18 +79,18 @@ right: 20px; top: 20px; z-index: 999; - background-color: #41b783; + background-color: var(--primary-color); border-radius: 50%; - transition: background-color .2s, box-shadow .2s; + transition: background-color .2s, box-shadow .2s, transform .2s; i { - color: #ffffff; + color: var(--primary-color-text); line-height: inherit; font-size: 16px; } &:hover { - background-color: #3aa476; + transform: scale(1.1); } &:focus { @@ -126,8 +120,8 @@ .free-themes { padding: 2em; - color: #495057; - background-color: #ffffff; + color: var(--text-color); + background-color: var(--layer-0); img { width: 50px; @@ -186,10 +180,11 @@ img { width: 100%; - } - - a { - color: #2196F3; + transition: box-shadow .2s, transform .2s; + + &:hover { + transform: scale(1.1); + } } } } \ No newline at end of file diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss index f290e8f06..e178fa2f0 100644 --- a/src/assets/styles/app/_content.scss +++ b/src/assets/styles/app/_content.scss @@ -65,10 +65,10 @@ } a { + background-color: var(--primary-color-text); + color: var(--primary-color); border-radius: 3px; - background-color: var(--layer-0); padding: 2px 4px; - color: var(--text-color); } } } @@ -80,7 +80,8 @@ h3 { font-weight: 500; margin: 2rem 0 1rem 0; - font-size: 1.286rem; + font-size: 1.5rem; + color: var(--text-color); &:first-child, &.first { @@ -111,10 +112,16 @@ margin-top: 1.5rem; margin-bottom: 0; font-size: 1.5rem; - font-weight: 600; + font-weight: 500; color: var(--text-color); } + a { + text-decoration: none; + color: $linkColor; + font-weight: 500; + } + p { font-size: 1rem; line-height: 1.5; @@ -128,8 +135,8 @@ } i:not([class~="pi"]) { - background-color: var(--layer-0); - color: var(--primary-color); + background-color: var(--primary-color); + color: var(--primary-color-text); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-style: normal; font-size: 14px; @@ -154,8 +161,8 @@ border: 0 none; top: 1px; - a { - color: var(-text-color-secondary); + a, a:visited { + color: var(--text-color-secondary); text-shadow: none; height: inherit; background-color: transparent; @@ -163,6 +170,7 @@ border-bottom: 1px solid transparent; margin-bottom: -1px; transition: background-color .2s; + font-weight: 500; &:focus { outline: 0 none; @@ -174,8 +182,8 @@ &.p-highlight a, &.p-highlight:hover a { background: transparent; - color: var(--primary-color); - border-bottom: 1px solid var(--primary-color); + color: $linkColor; + border-bottom: 1px solid $linkColor; } &:not(.p-highlight):not(.p-disabled):hover a { @@ -188,42 +196,20 @@ background: transparent; border: 0 none; - a { - background-color: var(--primary-color); - color: var(--primary-color-text); - border-radius: 3px; - padding: 2px 4px; - } - .btn-viewsource { display: inline-block; padding: .5rem 1rem; } + + a { + text-decoration: none; + color: $linkColor; + font-weight: 500; + } } } } - &.support { - .support-image { - background-color: var(--text-color-secondary); - padding: 2rem; - color: var(--layer-0); - text-align: left; - - .p-md-6:last-child { - text-align: right; - } - - h3, p { - color: var(--layer-0); - } - } - - li { - line-height: 1.5; - } - } - .doc-table { border-collapse: collapse; width: 100%; diff --git a/src/assets/styles/app/_core.scss b/src/assets/styles/app/_core.scss index c6741e7b0..53c145cf6 100644 --- a/src/assets/styles/app/_core.scss +++ b/src/assets/styles/app/_core.scss @@ -10,6 +10,7 @@ } } +$linkColor: #2196f3; $focusBorderColor:#BBDEFB; html { @@ -41,7 +42,6 @@ input[type="number"] { a { text-decoration: none; - color: #1976D2; } .layout-mask { @@ -144,4 +144,19 @@ pre[class*="language-"] code { .p-toast.p-toast-topright, .p-toast.p-toast-topleft { top: 100px; +} + +.action-button { + font-weight: bold; + text-align: center; + color: #ffffff !important; + background-color: #455C71; + padding: 10px 24px 9px 24px; + border-radius: 3px; + transition: background-color .2s; + + &:hover { + background-color: #708EA5; + color: #ffffff; + } } \ No newline at end of file diff --git a/src/assets/styles/app/_designer.scss b/src/assets/styles/app/_designer.scss index 500e64101..703db9cd4 100644 --- a/src/assets/styles/app/_designer.scss +++ b/src/assets/styles/app/_designer.scss @@ -1,15 +1 @@ /* DESIGNER */ -.primevue-designer { - background-color: #ffffff; - padding: 30px; - h3 { - margin: 10px 0 20px 0; - display: block; - text-align: center; - font-size: 24px; - } - img { - width: 100%; - margin-bottom: 30px; - } -} \ No newline at end of file diff --git a/src/assets/styles/app/_footer.scss b/src/assets/styles/app/_footer.scss index 1d5258445..cfde3e6bd 100644 --- a/src/assets/styles/app/_footer.scss +++ b/src/assets/styles/app/_footer.scss @@ -2,7 +2,7 @@ font-size: 14px; a { - color: #495057; + color: var(--text-color); font-weight: 600; } } \ No newline at end of file diff --git a/src/assets/styles/app/_home.scss b/src/assets/styles/app/_home.scss index 998348fe1..ded90c9ae 100644 --- a/src/assets/styles/app/_home.scss +++ b/src/assets/styles/app/_home.scss @@ -1,63 +1,33 @@ /* Home Component*/ .home { p { - line-height: 22px; + line-height: 1.5; margin-top: 0; - margin-bottom: 2em; + margin-bottom: 2rem; } + a { - color: #2E86C1; + color: var(--primary-color); font-weight: 500; transition: color .2s; } - .home-button { - font-weight: bold; - text-align: center; - color: #ffffff !important; - background-color: #455C71; - padding: 10px 24px 9px 24px; - border-radius: 3px; - transition: background-color .2s; - - &:hover { - background-color: #708EA5; - color: #ffffff; - } - } - - .home-button2 { - font-weight: bold; - text-align: center; - color: #8C6816 !important; - background-color: #FFCB54; - padding: 10px 24px 9px 24px; - border-radius: 3px; - transition: background-color .2s; - display: inline-block; - - &:hover { - background-color: #E5AF36; - color: #8C6816 !important; - } - } - - /* Introduction */ .introduction { - background-color: #1976d2; + background-color: var(--layer-0); background: url('./assets/images/home/primevue-introduction.jpg'); background-repeat: no-repeat; background-size: cover; padding: 115px 30px 135px 50px; + color: #455C71; h1 { - font-weight: normal; + font-weight: 400; margin-bottom: 5px; font-size: 24px; } h2 { - font-weight: bold; + font-weight: 700; margin-bottom: 40px; margin-top: 0; font-size: 24px; @@ -88,17 +58,16 @@ } } - /* Features */ .features { - background-color: #f9f9f9; + background-color: var(--layer-1); text-align: center; padding: 0 30px 30px 30px; .feature-card { - background-color: #ffffff; + background-color: var(--layer-0); box-shadow: 0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03); height: 100%; - border-radius: 4px; + border-radius: 3px; .feature-card-detail { padding: 0 16px 16px 16px; @@ -107,7 +76,7 @@ h3 { font-size:24px; - color: #495057; + color: var(--text-color); padding: 30px 0 12px 0; margin: 0; } @@ -128,27 +97,17 @@ margin-bottom: 2em; &.features-tagline { - color: #495057; + color: var(--text-color); margin-bottom: 0; margin-top: -5px; margin-bottom: 2em; } - - &.features-description { - color: #495057; - text-align: left; - } - - > a { - font-weight: bold; - } } } - /* Who Uses */ .whouses { - background-color: #495057; - color: #ffffff; + background-color: #34495E; + color: #eAECEE; text-align: center; padding: 30px; @@ -177,14 +136,14 @@ } .templates { - background-color: #f5f7f8; + background-color: var(--layer-1); text-align: center; padding: 30px; - border-bottom: 1px solid #c4c5c6; + border-bottom: 1px solid var(--layer-2); h3 { font-size:24px; - color: #495057; + color: var(--text-color); margin-top: 0; margin-bottom: 12px; } @@ -203,11 +162,29 @@ } } - /* PRO */ - .prosupport { - border-bottom: 1px solid #dcdedf; - background-color: #f5f7f8; + .primevue-designer { + background-color: var(--layer-0); + color: var(--text-color); padding: 30px; + + h3 { + margin: 10px 0 20px 0; + display: block; + text-align: center; + font-size: 24px; + } + + img { + width: 100%; + margin-bottom: 30px; + } + } + + .prosupport { + border-bottom: 1px solid var(--layer-0); + background-color: var(--layer-1); + padding: 30px; + color: var(--text-color); p { line-height: 22px; @@ -225,233 +202,10 @@ .p-md-6:last-child { text-align: center; } - } -}/* Home Component*/ -.home { - p { - line-height: 22px; - margin-top: 0; - margin-bottom: 2em; - } - a { - color: #2E86C1; - font-weight: 500; - transition: color .2s; - } - .home-button { - font-weight: bold; - text-align: center; - color: #ffffff !important; - background-color: #455C71; - padding: 10px 24px 9px 24px; - border-radius: 3px; - transition: background-color .2s; - - &:hover { - background-color: #708EA5; - color: #ffffff; - } - } - - .home-button2 { - font-weight: bold; - text-align: center; - color: #8C6816 !important; - background-color: #FFCB54; - padding: 10px 24px 9px 24px; - border-radius: 3px; - transition: background-color .2s; - display: inline-block; - - &:hover { - background-color: #E5AF36; - color: #8C6816 !important; - } - } - - /* Introduction */ - .introduction { - background-color: #1976d2; - background: url('./assets/images/home/primevue-introduction.jpg'); - background-repeat: no-repeat; - background-size: cover; - padding: 115px 30px 135px 50px; - - h1 { - font-weight: normal; - margin-bottom: 5px; - font-size: 24px; - } - - h2 { - font-weight: bold; - margin-bottom: 40px; - margin-top: 0; - font-size: 24px; - } - - > div { - padding: 100px 100px 0 100px; - height: 200px; - } - - .introduction-promo { + .action-button { display: inline-block; - margin-left: -50px; - margin-bottom: 20px; - padding: 10px 50px 10px 175px; - font-size: 1.5em; - background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%); - position: relative; - color: #ffffff; - font-weight: 700; - - img { - position: absolute; - height: 75px; - left: 50px; - top: -12px; - } - } - } - - /* Features */ - .features { - background-color: #f9f9f9; - text-align: center; - padding: 0 30px 30px 30px; - - .feature-card { - background-color: #ffffff; - box-shadow: 0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03); - height: 100%; - border-radius: 4px; - - .feature-card-detail { - padding: 0 16px 16px 16px; - } - } - - h3 { - font-size:24px; - color: #495057; - padding: 30px 0 12px 0; - margin: 0; - } - - img { - width: 100%; - } - - .feature-name { - display: block; - font-weight: bold; - font-size: 16px; - margin-top: 1em; - } - - p { - margin-top: 1em; - margin-bottom: 2em; - - &.features-tagline { - color: #495057; - margin-bottom: 0; - margin-top: -5px; - margin-bottom: 2em; - } - - &.features-description { - color: #495057; - text-align: left; - } - - > a { - font-weight: bold; - } - } - } - - /* Who Uses */ - .whouses { - background-color: #495057; - color: #ffffff; - text-align: center; - padding: 30px; - - h3 { - font-size: 24px; - margin-top: 0; - margin-bottom: 12px; - } - - img { - height: 30px; - width: 100%; - } - - .p-grid > div { - padding: 2em .5em; - } - - p { - margin-bottom: 30px; - - > a { - font-weight: bold; - } - } - } - - .templates { - background-color: #f5f7f8; - text-align: center; - padding: 30px; - border-bottom: 1px solid #c4c5c6; - - h3 { - font-size:24px; - color: #495057; - margin-top: 0; - margin-bottom: 12px; - } - - h4 { - font-size: 16px; - font-weight: 700; - } - - img { - width: 100%; - } - - a { - font-weight: bold; - } - } - - /* PRO */ - .prosupport { - border-bottom: 1px solid #dcdedf; - background-color: #f5f7f8; - padding: 30px; - - p { - line-height: 22px; - margin-bottom: 1em; - } - - h3 { - font-size: 24px; - } - - img { - margin-top: 10px; - } - - .p-md-6:last-child { - text-align: center; + margin-top: 1rem; } } } \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue index 7fbd00399..76a55ddeb 100755 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -6,7 +6,7 @@

The Ultimate UI Component Library

for Vue

- GET STARTED + GET STARTED
@@ -117,7 +117,6 @@
-

Premium Application Templates

Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.

@@ -195,7 +194,7 @@

PrimeVue PRO Support

No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.

PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.

- + Get a Quote
diff --git a/src/views/support/Support.vue b/src/views/support/Support.vue index f6030bf26..16316302a 100755 --- a/src/views/support/Support.vue +++ b/src/views/support/Support.vue @@ -3,33 +3,29 @@

Support

- Professional support for the open source innovation +

Professional support for the open source innovation

-
+

Community Support

Forum is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeVue PRO support.

-

Enterprise Support

-

PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account, - you no longer need to post your questions in the community forum and your issues to community issue tracker.

-
-
-
-

PrimeVue PRO Support

-

With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.

- GET A QUOTE -
-
- PRO -
+

PrimeVue PRO Support

+
+
+

PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account, + you no longer need to post your questions in the community forum and your issues to community issue tracker. + With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.

+ GET A QUOTE +
+ +
+ PRO
- -

Standard PRO Services

  • Access to pro.primefaces.org
    • @@ -60,4 +56,31 @@

    You can purchase additional hours along with the subscription and also anytime during your subscription period. If your subscription term ends with unused hours, they will be added to your new subscription term in case you extend.

- \ No newline at end of file + + + \ No newline at end of file diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue index fc54ecf4a..549f81e34 100755 --- a/src/views/theming/Theming.vue +++ b/src/views/theming/Theming.vue @@ -38,7 +38,7 @@

PrimeVue utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your document. Code below sets the scale of the components based on 16px. If you reqire bigger or smaller component, you may change this variable and components will resize accordingly.

- + html { font-size: 16px; @@ -65,7 +65,7 @@ html { .p-panel-titlebar { background: #212121; } - + } </style>