lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Update tab bar styles

This commit is contained in:
Samuel Elliott 2018-02-17 02:15:43 +00:00
parent 36a2fb1ec5
commit 5938e39d99
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
3 changed files with 48 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/styles/partials/generic/tabs.scss
View File

@ -1,39 +1,51 @@
.bd-tabheader {
.bd-tabbar {
flex: 0 0 auto;
margin-right: -15px;
display: flex;
.bd-button {
background: transparent;
border-bottom: 2px solid rgba(114, 118, 126, 0.3);
cursor: pointer;
margin-right: 15px;
padding: 15px 0;
color: #87909c;
font-size: 14px;
font-weight: 500;
transition: color 0.2s ease;
flex: 0 0;
display: flex;
h3 {
-webkit-user-select: none;
user-select: none;
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
flex-grow: 1;
flex: 0 0;
}
.bd-material-button {
width: 30px;
height: 30px;
width: 16px;
height: 16px;
flex: 0 0;
margin-left: 4px;
cursor: pointer;
.material-design-icon,
.bd-material-design-icon {
display: flex;
align-items: center;
fill: #fff;
fill: #87909c;
transition: fill 0.2s ease;
svg {
width: 24px;
height: 24px;
width: 16px;
height: 16px;
}
}
&:hover {
background: #2d2f34;
background-color: transparent;
.bd-material-design-icon {
fill: #fff;
}
}
}
@ -41,6 +53,15 @@
&.bd-active {
background: transparent;
border-bottom: 2px solid $colbdblue;
color: #fff;
.bd-material-design-icon {
fill: #fff;
}
}
&.bd-active {
cursor: default;
}
}
}

14
client/src/ui/components/bd/PluginsView.vue
View File

@ -11,18 +11,14 @@
<template>
<SettingsWrapper headertext="Plugins">
<div class="bd-flex bd-flex-col bd-pluginsView">
<div class="bd-flex bd-tabheader">
<div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
<div class="bd-tabbar">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div class="bd-material-button" @click="refreshLocal">
<MiRefresh />
</div>
<div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
</div>
<div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button">
<MiRefresh />
</div>
<div class="bd-material-button"><MiRefresh /></div>
</div>
</div>
<div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">

14
client/src/ui/components/bd/ThemesView.vue
View File

@ -11,18 +11,14 @@
<template>
<SettingsWrapper headertext="Themes">
<div class="bd-flex bd-flex-col bd-themesView">
<div class="bd-flex bd-tabheader">
<div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
<div class="bd-tabbar">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div class="bd-material-button" @click="refreshLocal">
<MiRefresh />
</div>
<div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
</div>
<div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button">
<MiRefresh />
</div>
<div class="bd-material-button"><MiRefresh /></div>
</div>
</div>
<div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-themes-container bd-local-themes">