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

bootstrap styling

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-01 14:38:15 +01:00
parent b323a1ebe4
commit b3c6a9e252
2 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
template/index.html
View File

@ -91,9 +91,8 @@
</div> </div>
</div> </div>
</div> </div>
<b-modal id="settings-modal" hide-footer lazy header-class="settings-header"> <b-modal id="settings-modal" hide-header hide-footer lazy>
<template v-slot:modal-header="{ close }"> <ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
<ul class="nav nav-tabs card-header-tabs mx-0 px-3">
<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'">New Feed</a>
</li> </li>
@ -104,7 +103,6 @@
<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'">Import/Export</a>
</li> </li>
</ul> </ul>
</template>
<div v-if="settings=='create'"> <div v-if="settings=='create'">
<label for="feed-url">URL</label> <label for="feed-url">URL</label>
<input id="feed-url" type="text" class="form-control"> <input id="feed-url" type="text" class="form-control">

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

@ -1,3 +1,7 @@
:root {
--color-primary: #007bff;
}
[v-cloak] { [v-cloak] {
display: none !important; display: none !important;
} }
@ -10,9 +14,18 @@ body {
transition: none; transition: none;
} }
select.form-control {
-webkit-appearance: none;
}
select.form-control:not([multiple]):not([size]) {
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.6rem .6rem;
padding-right: 1.2rem;
}
.form-control:focus { .form-control:focus {
border-color: #80bdff !important; border-color: var(--color-primary);
box-shadow: inset 0 0 0 2px #80bdff !important; box-shadow: 0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2);
} }
.btn:focus { .btn:focus {
@ -67,7 +80,7 @@ body {
} }
.feed-item:active, .nav-select input:checked + .menu-item { .feed-item:active, .nav-select input:checked + .menu-item {
background-color: #007bff; background-color: var(--color-primary);
color: white; color: white;
} }
@ -88,8 +101,7 @@ body {
padding-right: 0; padding-right: 0;
} }
.settings-dropdown .dropdown-menu { .dropdown-menu {
width: 200px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.07);
} }
@ -106,10 +118,27 @@ body {
color: #dc3545!important; color: #dc3545!important;
} }
.settings-header {
padding: .75rem 0 !important;
}
.modal-backdrop { .modal-backdrop {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
} }
.nav-tabs .nav-link {
padding: .5rem 0;
}
.nav-tabs .nav-item + .nav-item {
margin-left: 1rem;
}
.nav-tabs .nav-link {
border: 0;
border-bottom: 3px solid transparent;
color: inherit;
}
.nav-tabs .nav-link.active {
color: inherit;
border-radius: 0 !important;
border-color: var(--color-primary);
background-color: transparent;
}