commit f21bf74ac624811733fda786667f16002cf04f79
author Akron <nils@diewald-online.de> Wed May 19 13:30:38 2021 +0200
committer Leo Repp <Leo-Aus-Berlin@korap.ids-mannheim.de> Wed Jun 30 13:04:18 2021 +0200
tree 0d0215176c3b53440c8f9576c853cadbbc7a8a94
parent 56904d256e8a7bbc42c5b74af6962a7926bedce3

Separate prefix styles from non-item styles in menus

Change-Id: I98255ac8a2e173c1d1c3fef3806fa490526b54cb

dev/js/spec/menuSpec.js

diff --git a/dev/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
index c24a75b..664a5b9 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -476,7 +476,6 @@
         expect(menu.element().getElementsByTagName("li")[5]).toBe(undefined);
       });
 
-
       it('should be nextable', function () {
         var menu = KorAP.HintMenu.create("cnx/", list);
         menu._firstActive = true;
@@ -1498,6 +1497,7 @@
       it('should be initializable', function () {
         var p = prefixClass.create();
         expect(p.element().classList.contains('pref')).toBeTruthy();
+        expect(p.element().classList.contains('non-item')).toBeTruthy();
         expect(p.isSet()).not.toBeTruthy();
 
         /*

dev/js/src/menu/prefix.js

diff --git a/dev/js/src/menu/prefix.js b/dev/js/src/menu/prefix.js
index 3930e45..f6c6c76 100644
--- a/dev/js/src/menu/prefix.js
+++ b/dev/js/src/menu/prefix.js
@@ -18,6 +18,7 @@
 
     // Add prefix span
     t._el = document.createElement('span');
+    t._el.classList.add('non-item');
     t._el.classList.add('pref');
     // Connect action
 

dev/scss/base/menu.scss

diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
index 054dabd..2fdd0a1 100644
--- a/dev/scss/base/menu.scss
+++ b/dev/scss/base/menu.scss
@@ -24,7 +24,7 @@
   }
 
   &,
-  > span.pref:not(:empty) {
+  > span.non-item:not(:empty) {
     box-sizing:  border-box;
     text-shadow: none;
     font-weight: normal;
@@ -32,12 +32,12 @@
   }
   
   > li,
-  > span.pref:not(.active) {
+  > span.non-item:not(.active) {
     @include choose-item;
   }
 
   > li,
-  > span.pref:not(:empty) {
+  > span.non-item:not(:empty) {
     @include choose-item;
     box-shadow:  $choose-box-shadow;
     cursor:      pointer;
@@ -158,19 +158,26 @@
   }
 
   > li.active,
-  > span.pref.active {
+  span.non-item.active {
     @include choose-active;
   }
 
   > li:hover,
-  > span.pref:hover {
+  span.non-item:hover {
     @include choose-hover;
   }
 
+  span.non-item {
+    border: {
+      radius: $standard-border-radius;
+      width:  $border-size !important;
+    }
+  }
+  
   /**
    * Default prefix view
    */
-  > span.pref:not(:empty) {
+  span.pref:not(:empty) {
     position:      absolute;
     min-width:     5px;
     font-size:     80%;
@@ -179,10 +186,6 @@
     display:       block;
     margin-bottom: -2.1em;
     padding:       2px 6px;
-    border: {
-      radius: $standard-border-radius;
-      width:  $border-size;
-    }
   }
 }