vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

active tab styles, bottom border on list to not go full width like iOS

This commit is contained in:
Kyle Spearrin 2016-09-10 23:30:08 -04:00
parent 0a3a7427ba
commit 37865c0531
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/popup/app/global/tabs.html
View File

@ -1,9 +1,9 @@
<div ui-view></div>
<div class="tabs" ng-controller="tabsController">
<ul>
<li class="active"><a ui-sref="tabs.current"><i class="fa fa-star fa-2x"></i> Current</a></li>
<li><a ui-sref="tabs.vault"><i class="fa fa-lock fa-2x"></i> My Vault</a></li>
<li><a ui-sref="tabs.tools"><i class="fa fa-wrench fa-2x"></i> Tools</a></li>
<li><a ui-sref="tabs.settings"><i class="fa fa-cogs fa-2x"></i> Settings</a></li>
<li ng-class="{active: $state.includes('tabs.current')}"><a ui-sref="tabs.current"><i class="fa fa-star fa-2x"></i> Current</a></li>
<li ng-class="{active: $state.includes('tabs.vault')}"><a ui-sref="tabs.vault"><i class="fa fa-lock fa-2x"></i> My Vault</a></li>
<li ng-class="{active: $state.includes('tabs.tools')}"><a ui-sref="tabs.tools"><i class="fa fa-wrench fa-2x"></i> Tools</a></li>
<li ng-class="{active: $state.includes('tabs.settings')}"><a ui-sref="tabs.settings"><i class="fa fa-cogs fa-2x"></i> Settings</a></li>
</ul>
</div>

4
src/popup/app/global/tabsController.js
View File

@ -1,6 +1,6 @@
angular
.module('bit.global')
.controller('tabsController', function ($scope) {
.controller('tabsController', function ($scope, $state) {
$scope.$state = $state;
});

15
src/popup/less/components.less
View File

@ -105,7 +105,7 @@
text-overflow: ellipsis;
&:hover {
background-color: rgba(255, 255, 255, 0.8);
background-color: @list-item-hover;
}
i {
@ -171,7 +171,18 @@
overflow: hidden;
text-overflow: ellipsis;
color: @text-color;
border-bottom: 1px solid @border-color;
position: relative;
z-index: 1;
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: 97%;
border-bottom: 1px solid @border-color;
}
&:last-child {
border: none;