Improve userbar styles

This commit is contained in:
Alex Gleason 2016-03-18 19:50:10 -04:00 committed by Matt Westcott
parent 8f4518e2a5
commit 33441f1ff7
2 changed files with 15 additions and 4 deletions

View file

@ -100,7 +100,9 @@ $positions: (
}
.#{$namespace}-userbar-trigger {
display: block;
display: flex;
align-items: center;
justify-content: center;
width: $size-home-button;
height: $size-home-button;
margin: 0 !important;
@ -114,17 +116,24 @@ $positions: (
transition: all 0.2s ease-in-out;
font-size: 16px;
text-decoration: none !important;
position: relative;
.#{$namespace}-userbar.touch.is-active &,
.#{$namespace}-userbar.no-touch &:hover {
box-shadow: $box-shadow-props, 0 3px 15px 0 rgba(107, 214, 230, .95);
}
.#{$namespace}-userbar-help-text {
position: absolute;
top: 100%;
left: 0;
}
&.#{$namespace}-icon:before {
transition: color .2s ease;
font-size: 32px;
margin: .4em .15em .4em .375em;
display: block;
width: auto;
margin: 0;
}
}

View file

@ -4,7 +4,9 @@
<div class="wagtail-userbar wagtail-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar>
<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>
<div class="wagtail-icon wagtail-icon-wagtail wagtail-userbar-trigger" data-wagtail-userbar-trigger>
<span class="wagtail-userbar-help-text">{% trans 'Go to Wagtail admin interface' %}</span>
</div>
<div class='wagtail-userbar-items'>
{% for item in items %}
{{ item|safe }}