Cosmetics
onursenture
parent
dd2f16814a
commit
6fae571b95
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.1 KiB |
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin shadow($value) {
|
||||
@mixin shadow($value...) {
|
||||
-webkit-box-shadow: $value;
|
||||
-moz-box-shadow: $value;
|
||||
box-shadow: $value;
|
||||
|
|
@ -69,7 +69,7 @@ body {
|
|||
}
|
||||
|
||||
.layout-topbar {
|
||||
background-color: #20272a;
|
||||
background-color: #ffffff;
|
||||
display: block;
|
||||
padding: 0;
|
||||
height: 70px;
|
||||
|
|
@ -133,7 +133,7 @@ body {
|
|||
|
||||
> a {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
color: #484848;
|
||||
min-width: 120px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
|
|
@ -144,7 +144,7 @@ body {
|
|||
@include transition(background-color .2s);
|
||||
|
||||
&:hover {
|
||||
background-color: #363c3f;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -277,29 +277,34 @@ body {
|
|||
position: fixed;
|
||||
left: 0;
|
||||
top: 70px;
|
||||
height: 100%;
|
||||
height: calc(100% - 70px);
|
||||
background-color: #ffffff;
|
||||
overflow: auto;
|
||||
width: 300px;
|
||||
width: 280px;
|
||||
@include shadow(0 0 2px rgba(0,0,0,0.25));
|
||||
|
||||
.layout-menu {
|
||||
padding-bottom: 150px;
|
||||
|
||||
> span {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: block;
|
||||
padding: 15px 0px 0px 20px;
|
||||
padding: 0px 0px 0px 20px;
|
||||
margin-bottom: 12px;
|
||||
border-top: solid 1px #e3e9ea;
|
||||
color: #484848;
|
||||
background-color: #f4f4f4;
|
||||
color: #767676;
|
||||
font-weight: 700;
|
||||
user-select: none;
|
||||
transition: background-color .2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: -2px 0px 0px 30px;
|
||||
font-size: 14px;
|
||||
margin: 0px 0px 0px 8px;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -320,9 +325,10 @@ body {
|
|||
> div {
|
||||
background-color: #ffffff;
|
||||
padding: 0 15px 15px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
|
|
@ -344,7 +350,8 @@ body {
|
|||
}
|
||||
|
||||
&.router-link-active {
|
||||
color: #007ad9;
|
||||
color: #526F89;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.menuitem-badge {
|
||||
|
|
@ -382,7 +389,7 @@ body {
|
|||
}
|
||||
|
||||
.layout-content {
|
||||
margin-left: 300px;
|
||||
margin-left: 280px;
|
||||
padding-top: 70px;
|
||||
|
||||
.content-section {
|
||||
|
|
@ -400,9 +407,10 @@ body {
|
|||
|
||||
&.introduction {
|
||||
color: #ffffff;
|
||||
@include background-gradient-left2right(#0061ad,#4ca1e4);
|
||||
@include background-gradient-left2right(#455C71,#526F89);
|
||||
|
||||
.feature-intro {
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
margin: 0 0 20px 0;
|
||||
|
|
@ -457,7 +465,7 @@ body {
|
|||
}
|
||||
|
||||
&.content-submenu {
|
||||
background-color: #20272a;
|
||||
background-color: #f4f4f4;
|
||||
padding: 15px 30px;
|
||||
@include clearfix();
|
||||
|
||||
|
|
@ -473,7 +481,7 @@ body {
|
|||
padding: .25em;
|
||||
|
||||
a {
|
||||
color: #cac6c6;
|
||||
color: #484848;
|
||||
display: block;
|
||||
width: 90%;
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -482,8 +490,9 @@ body {
|
|||
@include transition(border-color .1s);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #ffffff;
|
||||
color: #ffffff;
|
||||
border: 1px solid #adadad;
|
||||
color: #363636;
|
||||
background-color: #ececec
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -725,14 +734,14 @@ body {
|
|||
.home-button {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background-color: #007ad9;
|
||||
color: #ffffff !important;
|
||||
background-color: #455C71;
|
||||
padding: 10px 24px 9px 24px;
|
||||
border-radius: 3px;
|
||||
@include transition(background-color .2s);
|
||||
|
||||
&:hover {
|
||||
background-color: #116fbf;
|
||||
background-color: #708EA5;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -760,6 +769,13 @@ body {
|
|||
margin-top: 0;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
a {
|
||||
color: #526F89;
|
||||
|
||||
&:hover {
|
||||
color: #638FB7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Introduction */
|
||||
.introduction {
|
||||
|
|
@ -795,6 +811,17 @@ body {
|
|||
text-align: center;
|
||||
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 {
|
||||
font-size:24px;
|
||||
color: #484848;
|
||||
|
|
@ -803,7 +830,7 @@ body {
|
|||
}
|
||||
|
||||
img {
|
||||
width: 57px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature-name {
|
||||
|
|
|
|||
|
|
@ -16,44 +16,76 @@
|
|||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="component" src="../assets/images/home/icon-component.svg" />
|
||||
<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>
|
||||
<div class="feature-card">
|
||||
<img alt="component" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="opensource" src="../assets/images/home/icon-opensource.svg" />
|
||||
<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>
|
||||
<div class="feature-card">
|
||||
<img alt="opensource" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="themes" src="../assets/images/home/icon-themes.svg" />
|
||||
<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>
|
||||
<div class="feature-card">
|
||||
<img alt="themes" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="community" src="../assets/images/home/icon-community.svg" />
|
||||
<span class="feature-name">COMMUNITY</span>
|
||||
<p>Join PrimeVue community to become a part of an active, vibrant and growing open source foundation.</p>
|
||||
<div class="feature-card">
|
||||
<img alt="community" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">COMMUNITY</span>
|
||||
<p>Join PrimeVue community to become a part of an active, vibrant and growing open source foundation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="productive" src="../assets/images/home/icon-productive.svg" />
|
||||
<span class="feature-name">PRODUCTIVITY</span>
|
||||
<p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
|
||||
<div class="feature-card">
|
||||
<img alt="productive" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">PRODUCTIVITY</span>
|
||||
<p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="mobile" src="../assets/images/home/icon-mobile.svg" />
|
||||
<span class="feature-name">MOBILE</span>
|
||||
<p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
|
||||
<div class="feature-card">
|
||||
<img alt="mobile" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">MOBILE</span>
|
||||
<p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="templates" src="../assets/images/home/icon-templates.svg" />
|
||||
<span class="feature-name">TEMPLATES</span>
|
||||
<p>Professionally designed highly customizable Vue application templates to get started in no time.</p>
|
||||
<div class="feature-card">
|
||||
<img alt="templates" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">TEMPLATES</span>
|
||||
<p>Professionally designed highly customizable Vue application templates to get started in no time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img alt="templates" src="../assets/images/home/icon-sigma.svg" />
|
||||
<span class="feature-name">ACCESSIBILITY</span>
|
||||
<p>Fully accessible and in complaince with Section 508 standards.</p>
|
||||
<div class="feature-card">
|
||||
<img alt="templates" src="https://placehold.it/400x150" />
|
||||
<div class="feature-card-detail">
|
||||
<span class="feature-name">ACCESSIBILITY</span>
|
||||
<p>Fully accessible and in complaince with Section 508 standards.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue