nextcloud/passman
1
1
Fork 0
mirror of https://github.com/nextcloud/passman.git synced 2025-10-09 21:16:18 +08:00
Code Issues Projects Releases Packages Wiki Activity

unify menu button hover design

Browse source 
Signed-off-by: binsky <timo@binsky.org>
This commit is contained in:
binsky 2021-08-17 13:47:33 +02:00
parent 96a0687c8a
commit f739a8e5a5
4 changed files with 42 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
css/app.css
View file

@ -1064,7 +1064,6 @@
width: inherit !important; width: inherit !important;
border-right: 1px solid #eee; } border-right: 1px solid #eee; }
.nav-trashbin a { .nav-trashbin a {
background-color: #fff !important;
opacity: 1 !important; opacity: 1 !important;
z-index: 140; } z-index: 140; }
.nav-trashbin a.active { .nav-trashbin a.active {
@ -1072,8 +1071,21 @@
.nav-trashbin a .fa { .nav-trashbin a .fa {
margin-right: 15px; } margin-right: 15px; }
#app-navigation .collapsible:hover .app-navigation-entry-bullet { #app-navigation {
/* Custom bullet icon */ }
#app-navigation .collapsible:hover .app-navigation-entry-bullet {
background: var(--color-primary) !important; } background: var(--color-primary) !important; }
#app-navigation .app-navigation-entry-bullet-with-hover {
position: absolute;
display: block;
margin: 16px;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background 100ms ease-in-out;
z-index: 101; }
#app-navigation a .selected { #app-navigation a .selected {
opacity: 1 !important; opacity: 1 !important;

2
css/app.css.map
View file

File diff suppressed because one or more lines are too long

29
sass/menu.scss
View file

@ -55,7 +55,7 @@
//border-left: 3px solid #0082c9; //border-left: 3px solid #0082c9;
background-image: var(--icon-delete-e9322d); background-image: var(--icon-delete-e9322d);
} }
background-color: #fff !important; //background-color: #fff !important;
opacity: 1 !important; opacity: 1 !important;
z-index: 140; z-index: 140;
//padding: 0 20px; //padding: 0 20px;
@ -70,6 +70,19 @@
.collapsible:hover .app-navigation-entry-bullet{ .collapsible:hover .app-navigation-entry-bullet{
background: var(--color-primary) !important; background: var(--color-primary) !important;
} }
/* Custom bullet icon */
.app-navigation-entry-bullet-with-hover {
position: absolute;
display: block;
margin: 16px;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background 100ms ease-in-out;
z-index: 101;
}
} }
@ -82,7 +95,7 @@
} }
} }
li{ li {
.app-navigation-entry-bullet-color { .app-navigation-entry-bullet-color {
background-color: var(--color-primary); background-color: var(--color-primary);
} }
@ -99,22 +112,22 @@
background-color: #4db728; background-color: #4db728;
} }
.highlight-selected{ .highlight-selected {
background-color: var(--color-primary); background-color: var(--color-primary);
} }
.autocomplete{ .autocomplete {
position: relative; position: relative;
} }
a.taginput{ a.taginput {
opacity: 1; opacity: 1;
} }
a{ a {
overflow: visible; overflow: visible;
tags-input{ tags-input {
opacity: 1.0; opacity: 1.0;
li{ li {
width: auto !important; width: auto !important;
} }
} }

6
templates/main.php
View file

@ -155,15 +155,15 @@ style('passman', 'app');
</ul> </ul>
</li> </li>
<li> <li>
<div class="app-navigation-entry-bullet bullet-color-red"></div> <div class="app-navigation-entry-bullet-with-hover bullet-color-red"></div>
<a ng-class="{selected: clickedNavigationItem=='strength_low'}" ng-click="filterCredentialBySpecial('strength_low')">{{ 'navigation.strength.bad' | translate }}</a> <a ng-class="{selected: clickedNavigationItem=='strength_low'}" ng-click="filterCredentialBySpecial('strength_low')">{{ 'navigation.strength.bad' | translate }}</a>
</li> </li>
<li> <li>
<div class="app-navigation-entry-bullet bullet-color-yellow"></div> <div class="app-navigation-entry-bullet-with-hover bullet-color-yellow"></div>
<a ng-class="{selected: clickedNavigationItem=='strength_medium'}" ng-click="filterCredentialBySpecial('strength_medium')">{{ 'navigation.strength.medium' | translate }}</a> <a ng-class="{selected: clickedNavigationItem=='strength_medium'}" ng-click="filterCredentialBySpecial('strength_medium')">{{ 'navigation.strength.medium' | translate }}</a>
</li> </li>
<li> <li>
<div class="app-navigation-entry-bullet bullet-color-green"></div> <div class="app-navigation-entry-bullet-with-hover bullet-color-green"></div>
<a ng-class="{selected: clickedNavigationItem=='strength_good'}" ng-click="filterCredentialBySpecial('strength_good')">{{ 'navigation.strength.good' | translate }}</a> <a ng-class="{selected: clickedNavigationItem=='strength_good'}" ng-click="filterCredentialBySpecial('strength_good')">{{ 'navigation.strength.good' | translate }}</a>
</li> </li>
<li> <li>