Showcase UI refactor
parent
55fa2af5b0
commit
f44158fca3
|
@ -3,8 +3,6 @@
|
||||||
<div class="layout-news" v-if="newsActive">
|
<div class="layout-news" v-if="newsActive">
|
||||||
<div class="layout-news-container">
|
<div class="layout-news-container">
|
||||||
<img class="layouts-news-mockup-image" src="./assets/images/topbar-ultima-device.png">
|
<img class="layouts-news-mockup-image" src="./assets/images/topbar-ultima-device.png">
|
||||||
<span class="layout-news-details">
|
|
||||||
</span>
|
|
||||||
<a href="https://www.primefaces.org/layouts/ultima-vue" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
|
<a href="https://www.primefaces.org/layouts/ultima-vue" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
|
||||||
LEARN MORE<i class="pi pi-angle-right"></i>
|
LEARN MORE<i class="pi pi-angle-right"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.layout-news {
|
.layout-news {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-left: 250px;
|
||||||
background-image: linear-gradient(to left, #1565c0, #0D47A1);
|
background-image: linear-gradient(to left, #1565c0, #0D47A1);
|
||||||
|
|
||||||
.layout-news-container {
|
.layout-news-container {
|
||||||
|
@ -16,26 +16,6 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
||||||
.layout-news-details {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
.rate {
|
|
||||||
color: #f2b837;
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0 .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.helper-text {
|
|
||||||
background-color: #f2b837;
|
|
||||||
color: #212121;
|
|
||||||
padding: 0 0.2rem;
|
|
||||||
margin-right: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img.layouts-news-mockup-image {
|
img.layouts-news-mockup-image {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
|
@ -52,7 +32,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
transition: background-color 0.15s;
|
transition: background-color 0.15s;
|
||||||
margin-left: 2em;
|
margin-left: -1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
|
|
|
@ -1,28 +1,17 @@
|
||||||
|
|
||||||
@media screen and (max-width: 960px) {
|
@media screen and (max-width: 960px) {
|
||||||
.layout-wrapper.layout-news-active {
|
.layout-wrapper {
|
||||||
.layout-content {
|
.layout-news {
|
||||||
padding-top: 180px;
|
margin-left: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.layout-sidebar {
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-news-button {
|
.layout-news-button {
|
||||||
opacity: 0;
|
display: none;
|
||||||
position: absolute;
|
}
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-topbar {
|
.layout-topbar {
|
||||||
|
margin-left: 0;
|
||||||
height: 110px;
|
height: 110px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -72,10 +61,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-sidebar {
|
.layout-sidebar {
|
||||||
top: 0;
|
|
||||||
z-index: 999;
|
|
||||||
height: 100%;
|
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
@ -84,7 +71,6 @@
|
||||||
|
|
||||||
.layout-content {
|
.layout-content {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-top: 110px;
|
|
||||||
|
|
||||||
.content-section {
|
.content-section {
|
||||||
&.introduction {
|
&.introduction {
|
||||||
|
|
|
@ -2,13 +2,12 @@
|
||||||
background-color: var(--surface-a);
|
background-color: var(--surface-a);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
width: 100%;
|
|
||||||
box-shadow: 0 0 4px rgba(0,0,0,0.25);
|
box-shadow: 0 0 4px rgba(0,0,0,0.25);
|
||||||
border-bottom: 1px solid var(--surface-d);
|
border-bottom: 1px solid var(--surface-d);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 35px;
|
padding: 0 35px;
|
||||||
padding-left: 285px;
|
margin-left: 250px;
|
||||||
|
|
||||||
.menu-button {
|
.menu-button {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -89,6 +88,7 @@
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
width: 275px;
|
width: 275px;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
background-color: var(--surface-f);
|
background-color: var(--surface-f);
|
||||||
|
|
Loading…
Reference in New Issue