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

Add Apollo

pull/132/head
cagataycivici 2019-12-24 11:45:43 +03:00
parent 8a2eeea46c
commit 5a108fad68
6 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/AppConfigurator.vue
View File

@ -98,6 +98,11 @@
<img alt="Avalon" src="./assets/images/layouts/avalon.jpg">
</a>
</div>
<div class="p-col-12">
<a href="https://www.primefaces.org/layouts/apollo-vue">
<img alt="Apollo" src="./assets/images/layouts/apollo.jpg">
</a>
</div>
</div>
</div>

1
src/AppTopBar.vue
View File

@ -39,6 +39,7 @@
<li><a href="https://www.primefaces.org/sapphire-vue"><img src="./assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a></li>
<li><a href="https://www.primefaces.org/avalon-vue"><img src="./assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a></li>
<li><a href="https://www.primefaces.org/babylon-vue"><img src="./assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a></li>
<li><a href="https://www.primefaces.org/apollo-vue"><img src="./assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a></li>
</ul>
</transition>
</li>

BIN
src/assets/images/layouts/apollo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
src/assets/images/layouts/themeswitcher-apollo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

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

@ -293,6 +293,12 @@ body {
background: -webkit-linear-gradient(to bottom, #563D7C, #966BD8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #563D7C, #966BD8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.theme-badge.darkmode {
background-color: #141d26;
background: -webkit-linear-gradient(to bottom, #141d26, #5a6067); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #141d26, #5a6067); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
}
}
@ -745,12 +751,14 @@ body {
width: 550px;
z-index: 996;
height: calc(100% - 70px);
@include transition(transform .2s);
transform: translateX(550px);
@include transition(transform .3s);
transform: translate3d(550px,0,0);
background-color: #ffffff;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
&.layout-config-active {
transform: translateX(0);
transform: translate3d(0,0,0);
.layout-config-content {
.layout-config-button {
@ -914,7 +922,7 @@ body {
.layout-config {
top: 110px;
height: calc(100% - 110px);
transform: translateX(100%);
transform: translate3d(100%,0,0);
.layout-config-button {
left: auto;
@ -923,7 +931,7 @@ body {
&.layout-config-active {
width: 100%;
transform: translateX(0);
transform: translate3d(0,0,0);
}
}
}
@ -1238,7 +1246,7 @@ body {
top: 70px;
left: -300px;
z-index: 999;
@include transition(left .2s);
@include transition(left .3s);
&.active {
left: 0;

11
src/views/Home.vue
View File

@ -124,21 +124,26 @@
<p>Powered by <a href="https://cli.vuejs.org">Vue-CLI</a>, create awesome applications in no time using the premium templates of PrimeVue and impress your users.</p>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="p-col-12 p-md-6">
<a href="https://www.primefaces.org/layouts/sapphire-vue">
<img alt="Sapphire" src="../assets/images/layouts/sapphire.jpg">
</a>
</div>
<div class="p-col-12 p-md-4">
<div class="p-col-12 p-md-6">
<a href="https://www.primefaces.org/layouts/babylon-vue">
<img alt="Babylon" src="../assets/images/layouts/babylon.jpg">
</a>
</div>
<div class="p-col-12 p-md-4">
<div class="p-col-12 p-md-6">
<a href="https://www.primefaces.org/layouts/avalon-vue">
<img alt="Avalon" src="../assets/images/layouts/avalon.jpg">
</a>
</div>
<div class="p-col-12 p-md-6">
<a href="https://www.primefaces.org/layouts/apollo-vue">
<img alt="Apollo" src="../assets/images/layouts/apollo.jpg">
</a>
</div>
</div>
</div>
<div class="templates">