Cosmetics on dark theme
parent
6553127034
commit
c5ceda1a61
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 22 KiB |
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -2,7 +2,7 @@
|
|||
font-size: 14px;
|
||||
|
||||
a {
|
||||
color: #495057;
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -6,7 +6,7 @@
|
|||
<h1>The Ultimate UI Component Library</h1>
|
||||
<h2>for Vue</h2>
|
||||
|
||||
<router-link to="/setup" class="home-button">GET STARTED</router-link>
|
||||
<router-link to="/setup" class="action-button">GET STARTED</router-link>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
|
@ -117,7 +117,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="templates">
|
||||
|
||||
<h3>Premium Application Templates</h3>
|
||||
<p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p>
|
||||
|
||||
|
@ -195,7 +194,7 @@
|
|||
<h3>PrimeVue PRO Support</h3>
|
||||
<p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p>
|
||||
<p>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.</p>
|
||||
<a class="home-button2" href="mailto:contact@primetek.com.tr">
|
||||
<a class="action-button" href="mailto:contact@primetek.com.tr">
|
||||
Get a Quote
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -3,33 +3,29 @@
|
|||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Support</h1>
|
||||
<span>Professional support for the open source innovation</span>
|
||||
<p>Professional support for the open source innovation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section support documentation">
|
||||
<div class="content-section documentation">
|
||||
<h3 style="margin-top:0">Community Support</h3>
|
||||
<p><a href="https://forum.primefaces.org/viewforum.php?f=110">Forum</a> 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.</p>
|
||||
|
||||
<h3>Enterprise Support</h3>
|
||||
<p>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.</p>
|
||||
<div class="support-image">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<h3>PrimeVue PRO Support</h3>
|
||||
<p>With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.</p>
|
||||
<a class="home-button2" href="mailto:primevue@primetek.com.tr">GET A QUOTE</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<img alt="PRO" src="../../assets/images/home/icon-pro-white.svg" />
|
||||
</div>
|
||||
<h3>PrimeVue PRO Support</h3>
|
||||
<div class="pro-section p-grid p-nogutter">
|
||||
<div class="pro-section-text p-col-12 p-md-8">
|
||||
<p>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.</p>
|
||||
<a class="action-button" href="mailto:primevue@primetek.com.tr">GET A QUOTE</a>
|
||||
</div>
|
||||
|
||||
<div class="pro-section-image p-col-12 p-md-4">
|
||||
<img alt="PRO" src="../../assets/images/home/icon-pro.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3>Standard PRO Services</h3>
|
||||
<ul>
|
||||
<li>Access to pro.primefaces.org</li>
|
||||
|
@ -60,4 +56,31 @@
|
|||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .pro-section {
|
||||
display: flex;
|
||||
margin-top: .75rem;
|
||||
|
||||
.pro-section-text {
|
||||
flex: 1 1 auto;
|
||||
padding: 0rem 1rem 0 0;
|
||||
|
||||
.action-button {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-section-image {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
</style>
|
|
@ -38,7 +38,7 @@
|
|||
<p>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.</p>
|
||||
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
html {
|
||||
font-size: 16px;
|
||||
|
@ -65,7 +65,7 @@ html {
|
|||
.p-panel-titlebar {
|
||||
background: #212121;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</CodeHighlight>
|
||||
|
|
Loading…
Reference in New Issue