CSS refactor on showcase
parent
711a2120df
commit
44403f2a95
|
@ -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>
|
||||
|
|
|
@ -192,7 +192,7 @@
|
|||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
.layout-footer {
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
background-color: var(--surface-a);
|
||||
|
||||
a {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue