james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

tab styling

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-04 16:32:20 +01:00
parent 06e91f0d6c
commit 2ac23591df
5 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
template/index.html
View File

@ -110,13 +110,22 @@
<b-modal id="settings-modal" hide-header hide-footer lazy> <b-modal id="settings-modal" hide-header hide-footer lazy>
<ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top"> <ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a> <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">
<img src="./static/images/plus-square.svg" alt="" class="tab-icon">
New Feed
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a> <a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">
<img src="./static/images/list.svg" alt="" class="tab-icon">
Manage Feeds
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a> <a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">
<img src="./static/images/upload.svg" alt="" class="tab-icon">
Import/Export
</a>
</li> </li>
</ul> </ul>
<div v-if="settings=='create'"> <div v-if="settings=='create'">

1
template/static/images/list.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 482 B

1
template/static/images/plus-square.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 373 B

1
template/static/images/upload.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

9
template/static/stylesheets/app.css
View File

@ -44,6 +44,13 @@ select.form-control:not([multiple]):not([size]) {
margin-right: 7px; margin-right: 7px;
} }
.tab-icon {
width: 1rem;
height: 1rem;
margin-top: -3px;
margin-right: .1rem;
}
.feed-icon { .feed-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -143,7 +150,7 @@ select.form-control:not([multiple]):not([size]) {
} }
.nav-tabs .nav-link.active { .nav-tabs .nav-link.active {
color: inherit; color: var(--color-primary);
border-radius: 0 !important; border-radius: 0 !important;
border-color: var(--color-primary); border-color: var(--color-primary);
background-color: transparent; background-color: transparent;