added more defensive CSS to the userbar

wagtail/wagtailadmin/static_src/wagtailadmin/js/userbar.js

@@ -3,7 +3,7 @@
 document.addEventListener('DOMContentLoaded', function userBar(e) {
     var userbar = document.querySelector('[data-wagtail-userbar]');
     var trigger = userbar.querySelector('[data-wagtail-userbar-trigger]');
-    var list = userbar.querySelector('ul');
+    var list = userbar.querySelector('.wagtail-userbar-items');
     var className = 'is-active';
     var hasTouch = 'ontouchstart' in window;
     var clickEvent = hasTouch ? 'touchstart' : 'click';

wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss

@@ -86,10 +86,11 @@ $positions: (
     all: initial;
 }
 
+
 .#{$namespace}-userbar {
     position: fixed;
     z-index: 9999;
-    font-size: initial;
+    font-size: initial !important;
     line-height: initial;
     margin: 0;
     padding: 0;
@@ -100,16 +101,20 @@ $positions: (
 }
 
     .#{$namespace}-userbar-trigger {
+        display: block;
         width: $size-home-button;
         height: $size-home-button;
+        margin: 0 !important;
         overflow: hidden;
         background-color: $color-white;
         border-radius: 50%;
         color: $color-black;
-        padding: 0;
+        padding: 0 !important;
         cursor: pointer;
         box-shadow: $box-shadow-props, 0 1px 10px 0 rgba(107, 214, 230, .7);
         transition: all 0.2s ease-in-out;
+        font-size: 16px;
+        text-decoration: none !important;
 
         .#{$namespace}-userbar.touch.is-active &,
         .#{$namespace}-userbar.no-touch &:hover {
@@ -125,6 +130,7 @@ $positions: (
     }
 
     .#{$namespace}-userbar-items {
+        display: block;
         list-style: none;
         position: absolute;
         margin: 0;
@@ -134,6 +140,7 @@ $positions: (
         font-size: 14px;
         box-sizing: border-box;
         padding-left: 0;
+        text-decoration: none;
 
         .#{$namespace}-userbar.is-active & {
             visibility: visible;
@@ -162,42 +169,52 @@ $positions: (
     .#{$namespace}-userbar-nav {
         background: transparent !important;
         padding: 0;
-        margin: 0;
-
-        li {
-            background-color: $color-grey-1;
-            opacity: 0;
-            overflow: hidden;
-            transition-duration: .125s;
-            transition-timing-function: cubic-bezier(.55, 0, .1, 1);
-
-            &:first-child {
-                border-top-left-radius: $userbar-radius;
-                border-top-right-radius: $userbar-radius;
-            }
-
-            &:last-child {
-                border-bottom-right-radius: $userbar-radius;
-                border-bottom-left-radius: $userbar-radius;
-            }
-
-            + li {
-                border-top: 1px solid darken($color-grey-1, 3%);
-            }
-        }
+        margin: 0 !important;
+        display: block !important;
 
         .#{$namespace}-action {
 
             background: transparent;
         }
+    }
 
 
 
-        li a,
-        li .#{$namespace}-action {
+    .#{$namespace}-userbar__item {
+        margin: 0;
+        background-color: $color-grey-1;
+        opacity: 0;
+        overflow: hidden;
+        transition-duration: .125s;
+        transition-timing-function: cubic-bezier(.55, 0, .1, 1);
+        font-family: 'Open Sans', sans-serif;
+        font-size: 16px !important;
+        text-decoration: none !important;
+
+        &:first-child {
+            border-top-left-radius: $userbar-radius;
+            border-top-right-radius: $userbar-radius;
+        }
+
+        &:last-child {
+            border-bottom-right-radius: $userbar-radius;
+            border-bottom-left-radius: $userbar-radius;
+        }
+
+        & + & {
+            border-top: 1px solid darken($color-grey-1, 3%);
+        }
+
+
+        a,
+        .#{$namespace}-action {
             color: #aaa;
             display: block;
-            text-decoration: none;
+            text-decoration: none !important;
+            transform: none !important;
+            transition: none !important;
+            margin: 0 !important;
+            font-size: 14px !important;
 
             &:hover,
             &:focus {
@@ -207,7 +224,7 @@ $positions: (
             }
         }
 
-        li .#{$namespace}-icon {
+        .#{$namespace}-icon {
             position: relative;
 
             &:before {
@@ -218,17 +235,14 @@ $positions: (
             }
         }
 
-        li a,
-        li input {
-            font-size: 14px;
+        a,
+        input {
+            font-size: 14px !important;
             text-align: left;
             padding: 0.8rem 1.7rem 0.8rem 3.5rem;
         }
 
-        li input {
-            // -webkit-appearance: none;
-            // appearance: none;
-            // margin: 0;
+        input {
             border: 0;
             background: none;
             width: 100%;
@@ -236,6 +250,8 @@ $positions: (
     }
 
 
+
+
 // =============================================================================
 // Userbar positional classes (tl, tr, bl, br)
 // =============================================================================
@@ -255,7 +271,7 @@ $positions: (
             padding-#{$vertical}: $width-arrow * 2;
         }
 
-        .#{$namespace}-userbar-nav li {
+        .#{$namespace}-userbar-nav .#{$namespace}-userbar__item {
             // Yes, we could use an @else, but there's a bug in scss-lint.
             @if $vertical == 'bottom' {
                 transform: translateY(1rem);
@@ -279,7 +295,7 @@ $positions: (
             }
         }
 
-        &.is-active li {
+        &.is-active .#{$namespace}-userbar__item {
             @for $i from 1 through $max-items {
 
                 @if $vertical == 'bottom' {
@@ -305,7 +321,7 @@ $positions: (
 
 // Active state for the list items comes last.
 
-.#{$namespace}-userbar.is-active li {
-    transform: translateY(0);
-    opacity: 1;
+.#{$namespace}-userbar.is-active .#{$namespace}-userbar__item {
+    transform: translateY(0) !important;
+    opacity: 1 !important;
 }

wagtail/wagtailadmin/templates/wagtailadmin/userbar/base.html

@@ -5,11 +5,11 @@
         <link rel="stylesheet" href="{% static 'wagtailadmin/css/userbar.css' %}" type="text/css" />
         <div class="wagtail-userbar-nav">
             <div class="wagtail-icon wagtail-icon-wagtail wagtail-userbar-trigger" data-wagtail-userbar-trigger>{% trans 'Go to Wagtail admin interface' %}</div>
-            <ul class='wagtail-userbar-items'>
+            <div class='wagtail-userbar-items'>
                 {% for item in items %}
                     {{ item|safe }}
                 {% endfor %}
-            </ul>
+            </div>
         </div>
         <script src="{% static 'wagtailadmin/js/userbar.js' %}"></script>
     </div>

wagtail/wagtailadmin/templates/wagtailadmin/userbar/item_base.html

@@ -1 +1 @@
-<li class="{% block item_classes %}{% endblock %}">{% block item_content %}{% endblock %}</li>
+<div class="wagtail-userbar__item {% block item_classes %}{% endblock %}">{% block item_content %}{% endblock %}</div>