unify menu button hover design

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

View file

@ -1064,7 +1064,6 @@
width: inherit !important;
border-right: 1px solid #eee; }
.nav-trashbin a {
background-color: #fff !important;
opacity: 1 !important;
z-index: 140; }
.nav-trashbin a.active {
@ -1072,8 +1071,21 @@
.nav-trashbin a .fa {
margin-right: 15px; }
#app-navigation .collapsible:hover .app-navigation-entry-bullet {
background: var(--color-primary) !important; }
#app-navigation {
/* Custom bullet icon */ }
#app-navigation .collapsible:hover .app-navigation-entry-bullet {
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 {
opacity: 1 !important;

File diff suppressed because one or more lines are too long

View file

@ -55,7 +55,7 @@
//border-left: 3px solid #0082c9;
background-image: var(--icon-delete-e9322d);
}
background-color: #fff !important;
//background-color: #fff !important;
opacity: 1 !important;
z-index: 140;
//padding: 0 20px;
@ -70,6 +70,19 @@
.collapsible:hover .app-navigation-entry-bullet{
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 {
background-color: var(--color-primary);
}
@ -99,22 +112,22 @@
background-color: #4db728;
}
.highlight-selected{
background-color: var(--color-primary);
.highlight-selected {
background-color: var(--color-primary);
}
.autocomplete{
.autocomplete {
position: relative;
}
a.taginput{
a.taginput {
opacity: 1;
}
a{
a {
overflow: visible;
tags-input{
tags-input {
opacity: 1.0;
li{
li {
width: auto !important;
}
}
@ -129,4 +142,4 @@
//source https://material.io/tools/icons/?icon=restore&style=baseline
.icon-expired{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/></svg>");
}
}

View file

@ -155,15 +155,15 @@ style('passman', 'app');
</ul>
</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>
</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>
</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>
</li>
<li>