Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-03-16 22:10:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor logo SVG partials and update bg colour

Browse source
This commit is contained in:
Simon Evans 2020-01-24 11:29:53 +00:00 committed by Thibaud Colas
parent e0672d60b3
commit 9aaed8db4c
6 changed files with 34 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
client/scss/components/_logo.scss
View file

@ -17,10 +17,8 @@
&:hover {
color: $color-white;
}
}
@include media-breakpoint-down(xs) {
.logo {
@include media-breakpoint-down(xs) {
padding: 0 1.2em;
margin: 0.9em 0;
height: 28px;
@ -28,74 +26,52 @@
display: flex;
align-items: center;
}
}
// Desktop styling (override mobile styling):
@include media-breakpoint-up(sm) {
.logo {
margin: 1em auto;
// Desktop styling (override mobile styling):
@include media-breakpoint-up(sm) {
margin: 2em auto;
text-align: center;
}
}
.wagtail-logo-container__mobile {
position: relative;
.wagtail-logo,
.wagtail-logo-container__background {
float: left;
}
.wagtail-logo,
.wagtail-logo-container-inner {
width: 20px;
}
margin-right: 10px;
background-color: #555;
border-radius: 50%;
padding: 5px 7.5px;
.wagtail-logo {
float: left;
width: 20px;
border: 0;
margin-right: 1em;
}
.wagtail-logo-container__background {
width: 28px;
margin-right: 5px;
}
.wagtail-logo-container-inner {
height: 20px;
margin-left: 4px;
margin-top: 3px;
position: absolute;
}
&:hover {
color: $color-white;
width: 20px;
height: 25px;
}
}
.wagtail-logo-container__desktop {
position: relative;
width: 80px;
height: 80px;
width: 100px;
height: 100px;
background-color: #555;
border-radius: 50%;
margin: 0 auto;
.wagtail-logo-container__background {
position: absolute;
top: -3px;
left: 0;
.page404__bg & {
background-color: transparent;
}
.wagtail-logo-container-inner {
width: 45px;
height: 75px;
width: 52px;
height: 100px;
margin: auto;
position: relative;
}
}
.wagtail-logo-container-inner,
.wagtail-logo-container__desktop.animated-logo-container {
display: block;
transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
.wagtail-logo {
display: block;
@ -104,7 +80,7 @@
width: 100%;
height: 100%;
position: absolute;
transition: inherit;
transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
&.wagtail-logo__eye--open {
// stylelint-disable-next-line declaration-no-important

3
wagtail/admin/static_src/wagtailadmin/images/logo-background.svg
View file

@ -1,3 +0,0 @@
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="Oval" fill="#007D7E" cx="40" cy="40" r="40"></circle>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 221 B

4
wagtail/admin/templates/wagtailadmin/404.html
View file

@ -14,7 +14,9 @@
<div class="page404__bg">
<div class="page404__wrapper">
{% block branding_logo %}
{% include "wagtailadmin/shared/animated_logo.html" %}
<div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
{% include "wagtailadmin/shared/animated_logo.html" %}
</div>
{% endblock %}
<div class="page404__text-container">

7
wagtail/admin/templates/wagtailadmin/base.html
View file

@ -8,14 +8,17 @@
{% block branding_logo %}
{# Mobile-only logo: #}
<div class="wagtail-logo-container__mobile u-hidden@sm">
<img class="wagtail-logo-container__background" src="{% versioned_static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
<div class="wagtail-logo-container-inner">
<img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
</div>
</div>
{# Desktop logo (animated): #}
{% include "wagtailadmin/shared/animated_logo_background.html" %}
<div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
<div class="wagtail-logo-container-inner">
{% include "wagtailadmin/shared/animated_logo.html" %}
</div>
</div>
{% endblock %}
<span class="u-hidden@sm">{% trans "Dashboard" %}</span>
</a>

10
wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
View file

@ -1,8 +1,6 @@
{% load wagtailadmin_tags %}
<div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
<img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
<img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
</div>
<img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
<img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />

11
wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html
View file

@ -1,11 +0,0 @@
{% load wagtailadmin_tags static %}
<div class="wagtail-logo-container__desktop u-hidden@xs">
<img class="wagtail-logo wagtail-logo-container__background" src="{% static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
<div class="wagtail-logo-container-inner animated-logo-container">
<img class="wagtail-logo wagtail-logo__body" src="{% static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
<img class="wagtail-logo wagtail-logo__tail" src="{% static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--open" src="{% static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
<img class="wagtail-logo wagtail-logo__eye--closed" src="{% static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
</div>
</div>