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

Demo cosmetics

pull/12/head
cagataycivici 2019-05-25 23:56:12 +03:00
parent ee4492d910
commit e469d2065c
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppTopBar.vue
View File

@ -13,7 +13,7 @@
<transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave"> <transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
<ul v-if="themesMenuVisible"> <ul v-if="themesMenuVisible">
<li class="topbar-submenu-header">THEMING</li> <li class="topbar-submenu-header">THEMING</li>
<li><router-link to="/icons" @click.native="hideThemesMenu()"><i className="pi pi-fw pi-search"/><span>Icons</span></router-link></li> <li><router-link to="/icons" @click.native="hideThemesMenu()"><i class="pi pi-fw pi-search"/><span>Icons</span></router-link></li>
<li class="topbar-submenu-header">FREE THEMES</li> <li class="topbar-submenu-header">FREE THEMES</li>
<li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li> <li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
<li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li> <li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>

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

@ -40,7 +40,7 @@
border-top-right-radius: $val; border-top-right-radius: $val;
} }
$focusBorderColor:#aeb6be; $focusBorderColor:#8dcdff;
body { body {
margin: 0px; margin: 0px;
@ -109,28 +109,29 @@ body {
.topbar-menu { .topbar-menu {
list-style-type: none; list-style-type: none;
float: right; float: right;
margin: 25px 60px 0 0; margin: 0 60px 0 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
> li { > li {
display: inline-block; display: inline-block;
height: 70px;
line-height: 70px;
> a { > a {
text-decoration: none; text-decoration: none;
color: #34495e; color: #484848;
min-width: 120px; min-width: 120px;
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
padding-bottom: 8px;
border-bottom: 4px solid transparent;
user-select: none; user-select: none;
line-height: inherit;
cursor: pointer; cursor: pointer;
@include transition(border-color .2s); @include transition(background-color .2s);
&:hover { &:hover {
border-bottom-color: #41b883; background-color: #eeeeee;
} }
&:focus { &:focus {
@ -146,7 +147,7 @@ body {
> ul { > ul {
position: absolute; position: absolute;
top: 45px; top: 70px;
left: -75px; left: -75px;
width: 250px; width: 250px;
max-height: 300px; max-height: 300px;
@ -156,21 +157,26 @@ body {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
overflow: auto; overflow: auto;
list-style-type: none; list-style-type: none;
padding: 15px 0; padding: 4px 0;
margin: 0; margin: 0;
border-radius: 3px; border-radius: 3px;
> li.topbar-submenu-header { > li {
padding: 6px 12px; margin: 2px 0;
font-weight: bold; line-height: 1;
text-align: left;
color: #ffffff; &.topbar-submenu-header {
background-color: #484848; padding: 6px 12px;
font-weight: bold;
text-align: left;
color: #ffffff;
background-color: #484848;
}
} }
a { a {
text-decoration: none; text-decoration: none;
color: #404C51; color: #484848;
padding: 6px 12px; padding: 6px 12px;
display: block; display: block;
user-select: none; user-select: none;
@ -333,7 +339,7 @@ body {
border-radius: 4px; border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
font-size: 14px; font-size: 14px;
color: #494c52; color: #484848;
transition: background-color .2s; transition: background-color .2s;
&:hover { &:hover {