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

primeblocks added topbar

pull/1968/head
Tuğçe Küçükoğlu 2022-01-10 16:15:19 +03:00 committed by Tuğçe Küçükoğlu
parent 4702bbeb24
commit e8bea56d09
3 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -2,10 +2,9 @@
<div class="layout-wrapper" :class="containerClass"> <div class="layout-wrapper" :class="containerClass">
<div class="layout-news" v-if="newsActive"> <div class="layout-news" v-if="newsActive">
<div class="layout-news-container" @click="redirect"> <div class="layout-news-container" @click="redirect">
<img class="layout-news-logo p-ml-2" src="./assets/images/topbar-newyear-logo.svg"> <img class="layout-news-logo p-ml-2" src="./assets/images/topbar-primeblocks-device.png">
<h3 class="layout-news-header p-px-2">UP TO 50% DISCOUNT AT PRIMESTORE</h3>
<a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button"> <a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
VISIT SITE Read More
</a> </a>
<a tabindex="0" class="layout-news-close" @click="hideNews"> <a tabindex="0" class="layout-news-close" @click="hideNews">
<i class="pi pi-times"></i> <i class="pi pi-times"></i>

24
src/assets/styles/app/_news.scss
View File

@ -4,8 +4,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 250px; margin-left: 250px;
background-image: url('./assets/images/topbar-newyear-bg.png'), linear-gradient(180deg, #D2000B 0%, #9B0008 100%); background-image: linear-gradient(197.37deg, rgba(0, 120, 227, 0.07) -0.38%, rgba(165, 72, 181, 0) 101.89%), linear-gradient(115.93deg, rgba(62, 136, 246, 0.15) 4.86%, rgba(62, 180, 246, 0.0495) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.05) 0%, rgba(62, 158, 246, 0.013) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, rgba(163, 171, 217, 0.1) 19.83%, rgba(163, 171, 217, 0) 97.33%);
background-blend-mode: multiply; background-color: white;
.layout-news-container { .layout-news-container {
width: 100%; width: 100%;
@ -26,16 +26,14 @@
} }
img.layout-news-logo { img.layout-news-logo {
position: absolute; height: 70px;
left: 250px;
} }
.layout-news-button { .layout-news-button {
background: linear-gradient(180deg, #D8000A 0%, rgba(251, 0, 1, 0.4) 89.06%, rgba(255, 0, 0, 0) 100%); border: 2px solid #283738;
border-radius: 5px; color: #283738;
color: #ffffff; font-size: 15px;
font-size: 14px; padding: 0.3em 0.5em;
padding: 0.5em 0.75em;
font-weight: 700; font-weight: 700;
border-radius: 3px; border-radius: 3px;
flex-shrink: 0; flex-shrink: 0;
@ -45,7 +43,7 @@
z-index: 1; z-index: 1;
&:hover { &:hover {
background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%); background-color: rgba(0, 0, 0, 0.25);
} }
} }
} }
@ -56,7 +54,7 @@
position: absolute; position: absolute;
z-index: 2; z-index: 2;
right: 28px; right: 28px;
background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%); background-color: rgba(0,0,0,.3);
filter: drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.17)); filter: drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.17));
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
@ -64,9 +62,5 @@
align-items: center; align-items: center;
width: 34px; width: 34px;
height: 34px; height: 34px;
&:hover {
background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%);
}
} }
} }

3
src/assets/styles/app/_responsive.scss
View File

@ -2,8 +2,7 @@
.layout-wrapper { .layout-wrapper {
.layout-news { .layout-news {
margin-left: 250px; margin-left: 250px;
.layout-news-button, .layout-news-button {
.layout-news-logo {
display: none; display: none;
} }
} }