Cosmetics
cagataycivici
parent
c710c6c528
commit
079bdf1c28
|
|
@ -7,7 +7,7 @@
|
|||
--surface-e:#ffffff;
|
||||
--surface-f:#ffffff;
|
||||
--text-color:#212529;
|
||||
--text-color-secondary:$shade600;
|
||||
--text-color-secondary:#6c757d;
|
||||
--primary-color:#007bff;
|
||||
--primary-color-text:#ffffff;
|
||||
--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
--surface-e:#ffffff;
|
||||
--surface-f:#ffffff;
|
||||
--text-color:#212529;
|
||||
--text-color-secondary:$shade600;
|
||||
--text-color-secondary:#6c757d;
|
||||
--primary-color:#883cae;
|
||||
--primary-color-text:#ffffff;
|
||||
--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
--surface-e:#ffffff;
|
||||
--surface-f:#ffffff;
|
||||
--text-color:#495057;
|
||||
--text-color-secondary:$shade600;
|
||||
--text-color-secondary:#6c757d;
|
||||
--primary-color:#2196F3;
|
||||
--primary-color-text:#ffffff;
|
||||
--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
--surface-e:#ffffff;
|
||||
--surface-f:#ffffff;
|
||||
--text-color:#495057;
|
||||
--text-color-secondary:$shade600;
|
||||
--text-color-secondary:#6c757d;
|
||||
--primary-color:#4CAF50;
|
||||
--primary-color-text:#ffffff;
|
||||
--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
--surface-e:#ffffff;
|
||||
--surface-f:#ffffff;
|
||||
--text-color:#495057;
|
||||
--text-color-secondary:$shade600;
|
||||
--text-color-secondary:#6c757d;
|
||||
--primary-color:#FFC107;
|
||||
--primary-color-text:#212529;
|
||||
--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
--surface-e:#ffffff;
|
||||
--surface-f:#ffffff;
|
||||
--text-color:#495057;
|
||||
--text-color-secondary:$shade600;
|
||||
--text-color-secondary:#6c757d;
|
||||
--primary-color:#9C27B0;
|
||||
--primary-color-text:#ffffff;
|
||||
--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
|
|
|
|||
|
|
@ -7,17 +7,15 @@
|
|||
width: 550px;
|
||||
z-index: 998;
|
||||
height: 100%;
|
||||
transition: transform .3s;
|
||||
transform: translate3d(550px,0,0);
|
||||
transition: transform .4s cubic-bezier(.05,.74,.2,.99);
|
||||
transform: translateX(100%);
|
||||
backface-visibility: hidden;
|
||||
|
||||
&.layout-config-active {
|
||||
transform: translate3d(0,0,0);
|
||||
transform: translateX(0);
|
||||
|
||||
.layout-config-content-wrapper {
|
||||
.layout-config-button {
|
||||
opacity: .9;
|
||||
|
||||
i {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
|
@ -114,7 +112,7 @@
|
|||
i {
|
||||
color: var(--primary-color-text);
|
||||
line-height: inherit;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -107,8 +107,7 @@
|
|||
border: 0 none;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
transition: background-color .2s;
|
||||
font-weight: 500;
|
||||
transition: border-bottom-color .2s;
|
||||
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
|
|
@ -125,12 +124,13 @@
|
|||
&.p-highlight a,
|
||||
&.p-highlight:hover a {
|
||||
background: transparent;
|
||||
color: $linkColor;
|
||||
color: var(--primary-color);
|
||||
border-bottom: 1px solid $linkColor;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover a {
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
color: var(--text-color);
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@ p {
|
|||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
/* Home Component*/
|
||||
.home {
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
background-color: var(--surface-a);
|
||||
|
|
@ -39,13 +37,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
.introduction-title {
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
.introduction-subtitle {
|
||||
font-weight: 700;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 0;
|
||||
|
|
@ -63,7 +61,7 @@
|
|||
.features {
|
||||
background-color: var(--surface-b);
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
padding: 2rem;
|
||||
|
||||
.p-col-12 {
|
||||
padding: 1rem;
|
||||
|
|
@ -76,15 +74,12 @@
|
|||
border-radius: 3px;
|
||||
|
||||
.feature-card-detail {
|
||||
padding: 0 16px 16px 16px;
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:24px;
|
||||
color: var(--text-color);
|
||||
padding: 30px 0 12px 0;
|
||||
margin: 0;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -92,22 +87,9 @@
|
|||
}
|
||||
|
||||
.feature-name {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&.features-tagline {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,13 +97,7 @@
|
|||
background-color: #34495E;
|
||||
color: #EAECEE;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
padding: 2rem;
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
|
|
@ -129,74 +105,43 @@
|
|||
}
|
||||
|
||||
.p-grid > div {
|
||||
padding: 2em .5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
|
||||
> a {
|
||||
font-weight: bold;
|
||||
}
|
||||
padding: 2rem .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.templates {
|
||||
background-color: var(--surface-b);
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
|
||||
h3 {
|
||||
font-size:24px;
|
||||
color: var(--text-color);
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.primevue-designer {
|
||||
background-color: var(--surface-a);
|
||||
color: var(--text-color);
|
||||
padding: 30px;
|
||||
|
||||
h3 {
|
||||
margin: 10px 0 20px 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.prosupport {
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
background-color: var(--surface-b);
|
||||
padding: 30px;
|
||||
padding: 2rem;
|
||||
color: var(--text-color);
|
||||
|
||||
p {
|
||||
line-height: 22px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
border-right: 1px solid var(--surface-d);
|
||||
user-select: none;
|
||||
padding: 1rem;
|
||||
transition: transform .4s cubic-bezier(.05,.74,.2,.99);
|
||||
|
||||
.layout-menu {
|
||||
.menu-category {
|
||||
|
|
|
|||
|
|
@ -15,15 +15,15 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layout-topbar {
|
||||
height: 111px;
|
||||
height: 110px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
.menu-button {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
.topbar-menu {
|
||||
background-color: var(--surface-a);
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
border-top: 1px solid var(--surface-d);
|
||||
|
||||
|
|
@ -48,13 +48,13 @@
|
|||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 25%;
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
> a {
|
||||
padding-bottom: 0;
|
||||
height: 40px;
|
||||
line-height: 36px;
|
||||
line-height: 38px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
|
|
@ -67,19 +67,18 @@
|
|||
|
||||
.layout-sidebar {
|
||||
top: 0;
|
||||
left: -300px;
|
||||
z-index: 999;
|
||||
height: 100%;
|
||||
transition: left .3s;
|
||||
transform: translateX(-100%);
|
||||
|
||||
&.active {
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
margin-left: 0;
|
||||
padding-top: 111px;
|
||||
padding-top: 110px;
|
||||
|
||||
.content-section {
|
||||
&.introduction {
|
||||
|
|
@ -94,19 +93,19 @@
|
|||
|
||||
.layout-mask {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.layout-mask-active {
|
||||
z-index: 998;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition: background-color .5s;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-mask-active {
|
||||
z-index: 998;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition: background-color .5s;
|
||||
}
|
||||
|
||||
.home {
|
||||
.introduction > div {
|
||||
width: 100%;
|
||||
|
|
@ -125,14 +124,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.layout-content .content-section.content-submenu ul li {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.layout-config {
|
||||
height: 100%;
|
||||
transform: translate3d(100%,0,0);
|
||||
|
||||
.layout-config-button {
|
||||
left: auto;
|
||||
right: -52px;
|
||||
|
|
@ -140,7 +132,6 @@
|
|||
|
||||
&.layout-config-active {
|
||||
width: 100%;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -152,9 +143,11 @@
|
|||
@media screen and (max-width: 640px) {
|
||||
.layout-wrapper.layout-news-active {
|
||||
.topbar-menu {
|
||||
> li.topbar-submenu {
|
||||
> ul {
|
||||
top: 180px;
|
||||
> li {
|
||||
&.topbar-submenu {
|
||||
> ul {
|
||||
top: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
<img alt="Gold Sponsor" src="../assets/images/home/vue-gold.png" />
|
||||
<span>Vue.js Gold Sponsor</span>
|
||||
</span>
|
||||
<h1>The Ultimate UI Component Library</h1>
|
||||
<h2>for Vue</h2>
|
||||
<div class="introduction-title">The Ultimate UI Component Library</div>
|
||||
<div class="introduction-subtitle">for Vue</div>
|
||||
|
||||
<router-link to="/setup" class="action-button">GET STARTED</router-link>
|
||||
<img alt="devices" class="introduction-devices" src="../assets/images/home/intro-devices.png" />
|
||||
|
|
@ -14,14 +14,14 @@
|
|||
|
||||
<div class="features">
|
||||
<h4>Features</h4>
|
||||
<p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
|
||||
<p>Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="feature-card">
|
||||
<img alt="components" src="../assets/images/home/vue-components.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">60+ COMPONENTS</span>
|
||||
<div class="feature-name">60+ COMPONENTS</div>
|
||||
<p>The ultimate set of UI Components to assist you with 60+ impressive Vue Components.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="feature-card">
|
||||
<img alt="opensource" src="../assets/images/home/vue-opensource.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">OPEN SOURCE</span>
|
||||
<div class="feature-name">OPEN SOURCE</div>
|
||||
<p>The complete UI Suite is free to based on the MIT license and the source code is available at GitHub.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
<div class="feature-card">
|
||||
<img alt="themes" src="../assets/images/home/vue-themes.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">THEMES</span>
|
||||
<p>Build on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
|
||||
<div class="feature-name">THEMES</div>
|
||||
<p>Build on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<div class="feature-card">
|
||||
<img alt="templates" src="../assets/images/home/vue-templates.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">TEMPLATES</span>
|
||||
<div class="feature-name">TEMPLATES</div>
|
||||
<p>Fascinating Vue-CLI application templates designed by professional designers and crafted by Vue Experts.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div class="feature-card">
|
||||
<img alt="accesibility" src="../assets/images/home/vue-accesibility.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">ACCESSIBILITY</span>
|
||||
<div class="feature-name">ACCESSIBILITY</div>
|
||||
<p>UI Components for everyone with full support for Web Content Accessibility Guidelines (WCAG).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<div class="feature-card">
|
||||
<img alt="pro" src="../assets/images/home/vue-pro.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">PRO SUPPORT</span>
|
||||
<div class="feature-name">PRO SUPPORT</div>
|
||||
<p>Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
<div class="feature-card">
|
||||
<img alt="productivity" src="../assets/images/home/vue-productivity.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">PRODUCTIVITY</span>
|
||||
<div class="feature-name">PRODUCTIVITY</div>
|
||||
<p>Boost your productivity by achieving more in less time and accomplish amazing results.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<div class="feature-card">
|
||||
<img alt="community" src="../assets/images/home/vue-community.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">COMMUNITY</span>
|
||||
<div class="feature-name">COMMUNITY</div>
|
||||
<p>Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<div class="feature-card">
|
||||
<img alt="mobile" src="../assets/images/home/vue-mobile.png" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">MOBILE</span>
|
||||
<div class="feature-name">MOBILE</div>
|
||||
<p>First class support for responsive design led by touch optimized elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,14 +180,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="primevue-designer">
|
||||
<h4>PrimeVue Designer API</h4>
|
||||
<h4>Theme Designer</h4>
|
||||
<p>PrimeVue is a design-agnostic library and the theming system is based on the Theme Designer, the official tool to create themes for the components. Designer includes a SASS enabled infrastructure that has over 500 customizable variables, a live editor
|
||||
and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p>
|
||||
|
||||
<p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the live editor.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
|
||||
<p>PrimeVue is a design-agnostic library and the theming system is based on the Theme Designer, the official tool to create themes for the components. Designer includes a SASS enabled infrastructure that has over 500 customizable variables, a live editor
|
||||
and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p>
|
||||
|
||||
<p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the live editor.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue