mirror of
https://github.com/django/django.git
synced 2024-12-22 00:55:44 +00:00
Fixed #35791 -- Updated icon button dimensions to 24x24 pixels.
This is to meet the WCAG 2.5.8 minimum size requirement. Co-authored-by: Eva Nanyonga <evewish@gmail.com>
This commit is contained in:
Tainara Palmeira
Sarah Boyce
parent
15ca75449b
commit
86661f2449
@ -84,8 +84,8 @@ html[data-theme="dark"] {
|
||||
|
||||
.theme-toggle svg {
|
||||
vertical-align: middle;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -277,28 +277,6 @@ input[type="submit"], button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.selector ul.selector-chooser {
|
||||
width: 26px;
|
||||
height: 52px;
|
||||
padding: 2px 0;
|
||||
border-radius: 20px;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.selector-add, .selector-remove {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 20px auto;
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.selector-remove {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
.selector-chooseall, .selector-clearall {
|
||||
align-self: center;
|
||||
}
|
||||
@ -321,8 +299,6 @@ input[type="submit"], button {
|
||||
}
|
||||
|
||||
.stacked ul.selector-chooser {
|
||||
width: 52px;
|
||||
height: 26px;
|
||||
padding: 0 2px;
|
||||
transform: none;
|
||||
}
|
||||
@ -331,42 +307,6 @@ input[type="submit"], button {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.stacked .selector-add, .stacked .selector-remove {
|
||||
background-size: 20px auto;
|
||||
}
|
||||
|
||||
.stacked .selector-add {
|
||||
background-position: 0 -40px;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add {
|
||||
background-position: 0 -40px;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -140px;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
|
||||
.stacked .selector-remove {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
|
||||
.help-tooltip, .selector .help-icon {
|
||||
display: none;
|
||||
}
|
||||
@ -680,9 +620,9 @@ input[type="submit"], button {
|
||||
}
|
||||
|
||||
.selector ul.selector-chooser {
|
||||
display: block;
|
||||
width: 52px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
padding: 0 2px;
|
||||
transform: none;
|
||||
}
|
||||
@ -696,15 +636,15 @@ input[type="submit"], button {
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -20px;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background-position: 0 -40px;
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -60px;
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
|
||||
/* Inlines */
|
||||
|
||||
@ -52,22 +52,6 @@
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .selector-add {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .selector-remove {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -140px;
|
||||
}
|
||||
}
|
||||
|
||||
/* MOBILE */
|
||||
@ -97,14 +81,14 @@
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -20px;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .selector-add {
|
||||
background-position: 0 -40px;
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -60px;
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,19 +220,21 @@ fieldset .fieldBox {
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -64px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -80px;
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -144px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -112px;
|
||||
background-position: 0 -168px;
|
||||
}
|
||||
|
||||
.selector-chooseall {
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
|
||||
.selector ul.selector-chooser {
|
||||
align-self: center;
|
||||
width: 22px;
|
||||
width: 30px;
|
||||
background-color: var(--selected-bg);
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
@ -123,8 +123,8 @@
|
||||
}
|
||||
|
||||
.selector-add, .selector-remove {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
text-indent: -3000px;
|
||||
overflow: hidden;
|
||||
@ -142,19 +142,21 @@
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -144px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -112px;
|
||||
background-position: 0 -168px;
|
||||
}
|
||||
|
||||
.selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 -64px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -80px;
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.selector-chooseall, .selector-clearall {
|
||||
@ -230,8 +232,9 @@
|
||||
}
|
||||
|
||||
.stacked ul.selector-chooser {
|
||||
height: 22px;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
width: 64px;
|
||||
margin: 0 0 10px 40%;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
@ -248,22 +251,24 @@
|
||||
}
|
||||
|
||||
.stacked .selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -32px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -48px no-repeat;
|
||||
background-size: 24px auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add {
|
||||
background-position: 0 -32px;
|
||||
background-position: 0 -48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
|
||||
background-position: 0 -48px;
|
||||
background-position: 0 -72px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stacked .selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 0 no-repeat;
|
||||
background-size: 24px auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -273,7 +278,7 @@
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
|
||||
background-position: 0 -16px;
|
||||
background-position: 0 -24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -329,28 +334,30 @@ table p.datetime {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.datetimeshortcuts .clock-icon {
|
||||
background: url(../img/icon-clock.svg) 0 0 no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.datetimeshortcuts a:focus .clock-icon,
|
||||
.datetimeshortcuts a:hover .clock-icon {
|
||||
background-position: 0 -16px;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.datetimeshortcuts .date-icon {
|
||||
background: url(../img/icon-calendar.svg) 0 0 no-repeat;
|
||||
background-size: 24px auto;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.datetimeshortcuts a:focus .date-icon,
|
||||
.datetimeshortcuts a:hover .date-icon {
|
||||
background-position: 0 -16px;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.timezonewarning {
|
||||
@ -569,9 +576,10 @@ ul.timelist, .timelist li {
|
||||
float: right;
|
||||
text-indent: -9999px;
|
||||
background: url(../img/inline-delete.svg) 0 0 no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border: 0px none;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.inline-deletelink:focus, .inline-deletelink:hover {
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#999999" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 560 B After Width: | Height: | Size: 537 B |
@ -115,9 +115,9 @@
|
||||
|
||||
<!-- SVGs -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="base-svgs">
|
||||
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-auto"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></symbol>
|
||||
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-moon"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol>
|
||||
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-sun"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol>
|
||||
<symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-auto"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></symbol>
|
||||
<symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-moon"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol>
|
||||
<symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-sun"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol>
|
||||
</svg>
|
||||
<!-- END SVGs -->
|
||||
{% block extrabody %}{% endblock extrabody %}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
data-href-template="{{ change_related_template_url }}?{{ url_params }}"
|
||||
data-popup="yes"
|
||||
title="{% blocktranslate %}Change selected {{ model }}{% endblocktranslate %}">
|
||||
<img src="{% static 'admin/img/icon-changelink.svg' %}" alt="" width="20" height="20">
|
||||
<img src="{% static 'admin/img/icon-changelink.svg' %}" alt="" width="24" height="24">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if can_add_related %}
|
||||
@ -17,7 +17,7 @@
|
||||
data-popup="yes"
|
||||
href="{{ add_related_url }}?{{ url_params }}"
|
||||
title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
|
||||
<img src="{% static 'admin/img/icon-addlink.svg' %}" alt="" width="20" height="20">
|
||||
<img src="{% static 'admin/img/icon-addlink.svg' %}" alt="" width="24" height="24">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if can_delete_related %}
|
||||
@ -25,14 +25,14 @@
|
||||
data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
|
||||
data-popup="yes"
|
||||
title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
|
||||
<img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="" width="20" height="20">
|
||||
<img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="" width="24" height="24">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if can_view_related %}
|
||||
<a class="related-widget-wrapper-link view-related" id="view_id_{{ name }}"
|
||||
data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}"
|
||||
title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}">
|
||||
<img src="{% static 'admin/img/icon-viewlink.svg' %}" alt="" width="20" height="20">
|
||||
<img src="{% static 'admin/img/icon-viewlink.svg' %}" alt="" width="24" height="24">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
@ -36,8 +36,8 @@ class SeleniumTests(AdminSeleniumTestCase):
|
||||
By.XPATH, f'//*[@id="{link_id}"]/img'
|
||||
)
|
||||
self.assertEqual(link_image.get_attribute("alt"), "")
|
||||
self.assertEqual(link_image.get_attribute("width"), "20")
|
||||
self.assertEqual(link_image.get_attribute("height"), "20")
|
||||
self.assertEqual(link_image.get_attribute("width"), "24")
|
||||
self.assertEqual(link_image.get_attribute("height"), "24")
|
||||
|
||||
def test_related_object_lookup_link_initial_state(self):
|
||||
from selenium.webdriver.common.by import By
|
||||
|
||||
@ -959,7 +959,7 @@ class RelatedFieldWidgetWrapperTests(SimpleTestCase):
|
||||
<a class="related-widget-wrapper-link add-related" id="add_id_stream"
|
||||
data-popup="yes" title="Add another release event"
|
||||
href="/admin_widgets/releaseevent/add/?_to_field=album&_popup=1">
|
||||
<img src="/static/admin/img/icon-addlink.svg" alt="" width="20" height="20">
|
||||
<img src="/static/admin/img/icon-addlink.svg" alt="" width="24" height="24">
|
||||
</a>
|
||||
</div>
|
||||
"""
|
||||
|
||||
Loading…
Reference in New Issue
Block a user