zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-03 16:32:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

checkbox styling

Browse source
This commit is contained in:
Rachid Mrad 2024-03-28 12:38:15 -04:00
parent f200ba465c
commit 74ad6699a7
No known key found for this signature in database
2 changed files with 29 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/registrar/assets/sass/_theme/_admin.scss
View file

@ -42,6 +42,7 @@ html[data-theme="light"] {
--error-fg: #{$theme-color-error};
--message-success-bg: #{$theme-color-success-lighter};
--checkbox-green: #{$theme-color-success-light};
// $theme-color-warning-lighter - yellow-5
--message-warning-bg: #faf3d1;
--message-error-bg: #{$theme-color-error-lighter};
@ -93,6 +94,7 @@ html[data-theme="light"] {
--error-fg: #e35f5f;
--message-success-bg: #006b1b;
--checkbox-green: #006b1b;
--message-warning-bg: #583305;
--message-error-bg: #570808;
@ -352,13 +354,19 @@ input.admin-confirm-button {
}
.choice-filter {
position: relative;
padding-left: 20px;
svg {
top: 4px;
}
}
.choice-filter--checked {
background-image: url("/public/img/sprite.svg#check");
svg:nth-child(1) {
background: var(--checkbox-green);
fill: var(--checkbox-green);
}
svg:nth-child(2) {
color: var(--body-loud-color);
}
}
.choice-filter--unchecked {
background-image: url("/public/img/sprite.svg#check_box_outline_blank");
}

18
src/registrar/templates/django/admin/multiple_choice_list_filter.html
View file

@ -1,4 +1,7 @@
{% load i18n %}
{% load static field_helpers url_helpers %}
<h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</h3>
<ul class="mulitple-choice">
{% for choice in choices %}
@ -12,10 +15,21 @@
{% if not choice.reset %}
<li{% if choice.selected %} class="selected"{% endif %}>
{% if choice.selected and choice.exclude_query_string %}
<a class="choice-filter choice-filter--checked" href="{{ choice.exclude_query_string|iriencode }}">{{ choice.display }}</a>
<a class="choice-filter choice-filter--checked" href="{{ choice.exclude_query_string|iriencode }}">{{ choice.display }}
<svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#check_box_outline_blank"></use>
</svg>
<svg class="usa-icon position-absolute z-100 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#check"></use>
</svg>
</a>
{% endif %}
{% if not choice.selected and choice.include_query_string %}
<a class="choice-filter choice-filter--unchecked" href="{{ choice.include_query_string|iriencode }}">{{ choice.display }}</a>
<a class="choice-filter" href="{{ choice.include_query_string|iriencode }}">{{ choice.display }}
<svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#check_box_outline_blank"></use>
</svg>
</a>
{% endif %}
</li>
{% endif %}