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

Cosmetics

pull/132/head
onursenture 2019-12-18 15:32:40 +03:00
parent dd2f16814a
commit 6fae571b95
3 changed files with 106 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/primevue-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

73
src/assets/styles/app.scss
View File

@ -25,7 +25,7 @@
} }
} }
@mixin shadow($value) { @mixin shadow($value...) {
-webkit-box-shadow: $value; -webkit-box-shadow: $value;
-moz-box-shadow: $value; -moz-box-shadow: $value;
box-shadow: $value; box-shadow: $value;
@ -69,7 +69,7 @@ body {
} }
.layout-topbar { .layout-topbar {
background-color: #20272a; background-color: #ffffff;
display: block; display: block;
padding: 0; padding: 0;
height: 70px; height: 70px;
@ -133,7 +133,7 @@ body {
> a { > a {
text-decoration: none; text-decoration: none;
color: #ffffff; color: #484848;
min-width: 120px; min-width: 120px;
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
@ -144,7 +144,7 @@ body {
@include transition(background-color .2s); @include transition(background-color .2s);
&:hover { &:hover {
background-color: #363c3f; background-color: #eeeeee;
} }
&:focus { &:focus {
@ -277,29 +277,34 @@ body {
position: fixed; position: fixed;
left: 0; left: 0;
top: 70px; top: 70px;
height: 100%; height: calc(100% - 70px);
background-color: #ffffff; background-color: #ffffff;
overflow: auto; overflow: auto;
width: 300px; width: 280px;
@include shadow(0 0 2px rgba(0,0,0,0.25)); @include shadow(0 0 2px rgba(0,0,0,0.25));
.layout-menu { .layout-menu {
padding-bottom: 150px;
> span { > span {
width: 100%; width: 100%;
height: 50px; height: 50px;
display: block; display: block;
padding: 15px 0px 0px 20px; padding: 0px 0px 0px 20px;
margin-bottom: 12px;
border-top: solid 1px #e3e9ea; border-top: solid 1px #e3e9ea;
color: #484848; background-color: #f4f4f4;
color: #767676;
font-weight: 700;
user-select: none; user-select: none;
transition: background-color .2s; transition: background-color .2s;
display: flex;
align-items: center;
span { span {
font-size: 16px; font-size: 14px;
margin: -2px 0px 0px 30px; margin: 0px 0px 0px 8px;
display: block; display: block;
text-transform: uppercase;
} }
img { img {
@ -320,9 +325,10 @@ body {
> div { > div {
background-color: #ffffff; background-color: #ffffff;
padding: 0 15px 15px 15px; padding: 0 15px 15px 15px;
display: flex;
flex-direction: column;
a { a {
width: 50%;
display: inline-block; display: inline-block;
padding: 6px; padding: 6px;
cursor: pointer; cursor: pointer;
@ -344,7 +350,8 @@ body {
} }
&.router-link-active { &.router-link-active {
color: #007ad9; color: #526F89;
font-weight: 700;
} }
.menuitem-badge { .menuitem-badge {
@ -382,7 +389,7 @@ body {
} }
.layout-content { .layout-content {
margin-left: 300px; margin-left: 280px;
padding-top: 70px; padding-top: 70px;
.content-section { .content-section {
@ -400,9 +407,10 @@ body {
&.introduction { &.introduction {
color: #ffffff; color: #ffffff;
@include background-gradient-left2right(#0061ad,#4ca1e4); @include background-gradient-left2right(#455C71,#526F89);
.feature-intro { .feature-intro {
h1 { h1 {
font-size: 28px; font-size: 28px;
margin: 0 0 20px 0; margin: 0 0 20px 0;
@ -457,7 +465,7 @@ body {
} }
&.content-submenu { &.content-submenu {
background-color: #20272a; background-color: #f4f4f4;
padding: 15px 30px; padding: 15px 30px;
@include clearfix(); @include clearfix();
@ -473,7 +481,7 @@ body {
padding: .25em; padding: .25em;
a { a {
color: #cac6c6; color: #484848;
display: block; display: block;
width: 90%; width: 90%;
border: 1px solid transparent; border: 1px solid transparent;
@ -482,8 +490,9 @@ body {
@include transition(border-color .1s); @include transition(border-color .1s);
&:hover { &:hover {
border: 1px solid #ffffff; border: 1px solid #adadad;
color: #ffffff; color: #363636;
background-color: #ececec
} }
&:focus { &:focus {
@ -725,14 +734,14 @@ body {
.home-button { .home-button {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff !important;
background-color: #007ad9; background-color: #455C71;
padding: 10px 24px 9px 24px; padding: 10px 24px 9px 24px;
border-radius: 3px; border-radius: 3px;
@include transition(background-color .2s); @include transition(background-color .2s);
&:hover { &:hover {
background-color: #116fbf; background-color: #708EA5;
color: #ffffff; color: #ffffff;
} }
} }
@ -760,6 +769,13 @@ body {
margin-top: 0; margin-top: 0;
margin-bottom: 2em; margin-bottom: 2em;
} }
a {
color: #526F89;
&:hover {
color: #638FB7;
}
}
/* Introduction */ /* Introduction */
.introduction { .introduction {
@ -795,6 +811,17 @@ body {
text-align: center; text-align: center;
padding: 0 30px 30px 30px; padding: 0 30px 30px 30px;
.feature-card {
background-color: #ffffff;
@include 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 { h3 {
font-size:24px; font-size:24px;
color: #484848; color: #484848;
@ -803,7 +830,7 @@ body {
} }
img { img {
width: 57px; width: 100%;
} }
.feature-name { .feature-name {

48
src/views/Home.vue
View File

@ -16,47 +16,79 @@
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="component" src="../assets/images/home/icon-component.svg" /> <div class="feature-card">
<img alt="component" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">50+ COMPONENTS</span> <span class="feature-name">50+ COMPONENTS</span>
<p>The most complete set of native widgets featuring 50+ easy to use components for all your UI requirements.</p> <p>The most complete set of native widgets featuring 50+ easy to use components for all your UI requirements.</p>
</div> </div>
</div>
</div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="opensource" src="../assets/images/home/icon-opensource.svg" /> <div class="feature-card">
<img alt="opensource" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">OPEN SOURCE</span> <span class="feature-name">OPEN SOURCE</span>
<p>Hosted at <a href="https://github.com/primefaces/primevue">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p> <p>Hosted at <a href="https://github.com/primefaces/primevue">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p>
</div> </div>
</div>
</div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="themes" src="../assets/images/home/icon-themes.svg" /> <div class="feature-card">
<img alt="themes" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">THEMES</span> <span class="feature-name">THEMES</span>
<p>Don’t get tied up in just one look&feel. Choose from a variety of options including material and flat design.</p> <p>Don’t get tied up in just one look&feel. Choose from a variety of options including material and flat design.</p>
</div> </div>
</div>
</div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="community" src="../assets/images/home/icon-community.svg" /> <div class="feature-card">
<img alt="community" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">COMMUNITY</span> <span class="feature-name">COMMUNITY</span>
<p>Join PrimeVue community to become a part of an active, vibrant and growing open source foundation.</p> <p>Join PrimeVue community to become a part of an active, vibrant and growing open source foundation.</p>
</div> </div>
</div>
</div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="productive" src="../assets/images/home/icon-productive.svg" /> <div class="feature-card">
<img alt="productive" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">PRODUCTIVITY</span> <span class="feature-name">PRODUCTIVITY</span>
<p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p> <p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
</div> </div>
</div>
</div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="mobile" src="../assets/images/home/icon-mobile.svg" /> <div class="feature-card">
<img alt="mobile" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">MOBILE</span> <span class="feature-name">MOBILE</span>
<p>Enhanced mobile user experience with touch optimized responsive design elements.</p> <p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
</div> </div>
</div>
</div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="templates" src="../assets/images/home/icon-templates.svg" /> <div class="feature-card">
<img alt="templates" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">TEMPLATES</span> <span class="feature-name">TEMPLATES</span>
<p>Professionally designed highly customizable Vue application templates to get started in no time.</p> <p>Professionally designed highly customizable Vue application templates to get started in no time.</p>
</div> </div>
</div>
</div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img alt="templates" src="../assets/images/home/icon-sigma.svg" /> <div class="feature-card">
<img alt="templates" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">ACCESSIBILITY</span> <span class="feature-name">ACCESSIBILITY</span>
<p>Fully accessible and in complaince with Section 508 standards.</p> <p>Fully accessible and in complaince with Section 508 standards.</p>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="whouses"> <div class="whouses">
<h3>Key Users</h3> <h3>Key Users</h3>