mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-01 23:42:17 +02:00
checkbox styling
This commit is contained in:
parent
f200ba465c
commit
74ad6699a7
2 changed files with 29 additions and 7 deletions
|
@ -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");
|
||||
}
|
|
@ -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 %}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue