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

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-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-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-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>

View File

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

View File

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

View File

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

View File

@ -14,7 +14,7 @@
<div class="features">
<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-col-12 p-md-4">