add chevron to sort buttons and styling

This commit is contained in:
Jiiks 2018-12-04 23:15:16 +02:00
parent 63874c8b4e
commit fa5be193ad
2 changed files with 16 additions and 4 deletions

View File

@ -33,7 +33,9 @@
} }
.bd-searchSort { .bd-searchSort {
span { margin-top: 10px;
> span {
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -43,6 +45,7 @@
} }
.bd-sort { .bd-sort {
display: flex;
color: $coldimwhite; color: $coldimwhite;
font-size: 12px; font-size: 12px;
padding: 3px; padding: 3px;
@ -57,6 +60,14 @@
&.bd-active { &.bd-active {
color: $colbdgreen; color: $colbdgreen;
} }
.bd-materialDesignIcon {
fill: $colbdgreen;
}
svg {
height: 14px;
}
} }
} }
} }

View File

@ -41,7 +41,7 @@
<div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length"> <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
<div class="bd-searchSort bd-flex bd-flexGrow"> <div class="bd-searchSort bd-flex bd-flexGrow">
<span class="bd-flexGrow">Sort by:</span> <span class="bd-flexGrow">Sort by:</span>
<div class="bd-sort">Name</div> <div class="bd-sort bd-active">Name<MiChevronDown size="18"/></div>
<div class="bd-sort">Updated</div> <div class="bd-sort">Updated</div>
<div class="bd-sort">Installs</div> <div class="bd-sort">Installs</div>
<div class="bd-sort">Users</div> <div class="bd-sort">Users</div>
@ -64,7 +64,7 @@
import { ThemeManager, BdWebApi } from 'modules'; import { ThemeManager, BdWebApi } from 'modules';
import { Modals } from 'ui'; import { Modals } from 'ui';
import { ClientLogger as Logger } from 'common'; import { ClientLogger as Logger } from 'common';
import { MiRefresh, ScrollerWrap } from '../common'; import { MiRefresh, ScrollerWrap, MiChevronDown } from '../common';
import SettingsWrapper from './SettingsWrapper.vue'; import SettingsWrapper from './SettingsWrapper.vue';
import ThemeCard from './ThemeCard.vue'; import ThemeCard from './ThemeCard.vue';
import RemoteCard from './RemoteCard.vue'; import RemoteCard from './RemoteCard.vue';
@ -89,7 +89,8 @@
}, },
components: { components: {
SettingsWrapper, ThemeCard, RemoteCard, SettingsWrapper, ThemeCard, RemoteCard,
MiRefresh, ScrollerWrap, MiRefresh, MiChevronDown,
ScrollerWrap,
RefreshBtn RefreshBtn
}, },
methods: { methods: {