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

CSS refactor on showcase

pull/388/head
cagataycivici 2020-07-04 10:28:27 +03:00
parent 711a2120df
commit 44403f2a95
5 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppTopBar.vue
View File

@ -57,7 +57,7 @@
<li><a @click="changeTheme($event, 'nova-accent')"><img src="demo/images/themes/nova-accent.png" alt="Nova Accent" /><span>Nova Accent</span></a></li> <li><a @click="changeTheme($event, 'nova-accent')"><img src="demo/images/themes/nova-accent.png" alt="Nova Accent" /><span>Nova Accent</span></a></li>
<li><a @click="changeTheme($event, 'nova-vue')"><img src="demo/images/themes/nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li> <li><a @click="changeTheme($event, 'nova-vue')"><img src="demo/images/themes/nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
<li><a @click="changeTheme($event, 'luna-amber', true)"><img src="demo/images/themes/luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li> <li><a @click="changeTheme($event, 'luna-amber', true)"><img src="demo/images/themes/luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
<li><a @click="changeTheme($event, 'luna-blue', true)"><img src="demo/images/themes/una-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li> <li><a @click="changeTheme($event, 'luna-blue', true)"><img src="demo/images/themes/luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
<li><a @click="changeTheme($event, 'luna-green', true)"><img src="demo/images/themes/luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li> <li><a @click="changeTheme($event, 'luna-green', true)"><img src="demo/images/themes/luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
<li><a @click="changeTheme($event, 'luna-pink', true)"><img src="demo/images/themes/luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li> <li><a @click="changeTheme($event, 'luna-pink', true)"><img src="demo/images/themes/luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
<li><a @click="changeTheme($event, 'rhea')"><img src="demo/images/themes/rhea.png" alt="Rhea" /><span>Rhea</span></a></li> <li><a @click="changeTheme($event, 'rhea')"><img src="demo/images/themes/rhea.png" alt="Rhea" /><span>Rhea</span></a></li>

2
src/assets/styles/app/_content.scss
View File

@ -192,7 +192,7 @@
.card-header { .card-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: between; justify-content: space-between;
} }
} }
} }

2
src/assets/styles/app/_footer.scss
View File

@ -1,5 +1,5 @@
.layout-footer { .layout-footer {
font-size: 14px; font-size: 1rem;
background-color: var(--surface-a); background-color: var(--surface-a);
a { a {

18
src/assets/styles/app/_topbar.scss
View File

@ -41,7 +41,7 @@
&:focus { &:focus {
outline: 0 none; outline: 0 none;
transition: box-shadow .2s; transition: box-shadow .2s;
box-shadow: 0 0 0 0.2em $focusBorderColor; box-shadow: 0 0 0 0.2rem $focusBorderColor;
} }
} }
@ -77,13 +77,13 @@
color: var(--text-color); color: var(--text-color);
min-width: 120px; min-width: 120px;
font-size: 16px; font-size: 16px;
display: inline-block; display: block;
text-align: center; text-align: center;
user-select: none; user-select: none;
line-height: 68px; line-height: 68px;
cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
transition: border-bottom-color .3s; transition: border-bottom-color .2s;
cursor: pointer;
&:hover, &:focus { &:hover, &:focus {
border-bottom-color: var(--primary-color); border-bottom-color: var(--primary-color);
@ -128,7 +128,6 @@
text-transform: uppercase; text-transform: uppercase;
&:first-child { &:first-child {
border-top: 0 none;
padding-top: 1rem; padding-top: 1rem;
} }
} }
@ -138,30 +137,27 @@
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--text-color);
padding: .5rem; padding: .5rem;
display: block; display: flex;
align-items: center;
user-select: none; user-select: none;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--surface-c); background-color: var(--surface-c);
cursor: pointer;
} }
span { span {
margin-left: .5rem; margin-left: .5rem;
vertical-align: middle;
} }
i { i {
vertical-align: middle; font-size: 18px;
color: var(--text-color-secondary); color: var(--text-color-secondary);
vertical-align: middle;
} }
img { img {
width: 32px; width: 32px;
vertical-align: middle;
margin-right: .5rem; margin-right: .5rem;
} }
} }

2
src/views/Home.vue
View File

@ -14,7 +14,7 @@
<div class="features"> <div class="features">
<h4>Features</h4> <h4>Features</h4>
<p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p> <p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4">