css fixes

This commit is contained in:
Rachid Mrad 2024-08-23 23:31:23 -04:00
parent 778ad4de6f
commit 875dc1d467
No known key found for this signature in database
3 changed files with 24 additions and 25 deletions

View file

@ -369,7 +369,7 @@ input.admin-confirm-button {
// This block resolves some of the issues we're seeing on buttons due to css
// conflicts between DJ and USWDS
a.button,
.usa-button {
.usa-button--dja {
display: inline-block;
padding: 10px 15px;
font-size: 14px;
@ -380,17 +380,17 @@ a.button,
}
.button svg,
.button span,
.usa-button svg,
.usa-button span {
.usa-button--dja svg,
.usa-button--dja span {
vertical-align: middle;
}
.usa-button:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary) {
.usa-button--dja:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary) {
background: var(--button-bg);
}
.usa-button span {
.usa-button--dja span {
font-size: 14px;
}
.usa-button:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary):hover {
.usa-button--dja:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary):hover {
background: var(--button-hover-bg);
}
a.button:active, a.button:focus {
@ -399,6 +399,12 @@ a.button:active, a.button:focus {
.usa-modal {
font-family: inherit;
}
// Targets the DJA buttom with a nested icon
button .usa-icon,
.button .usa-icon,
.button--clipboard .usa-icon {
vertical-align: middle;
}
.module--custom {
a {
@ -491,13 +497,6 @@ address.dja-address-contact-list {
color: var(--link-fg);
}
// Targets the DJA buttom with a nested icon
button .usa-icon,
.button .usa-icon,
.button--clipboard .usa-icon {
vertical-align: middle;
}
.errors span.select2-selection {
border: 1px solid var(--error-fg) !important;
}

View file

@ -29,28 +29,28 @@
<div class="padding-top-2 padding-x-2">
<ul class="usa-button-group wrapped-button-group">
<li class="usa-button-group__item">
<a href="{% url 'export_data_type' %}" class="usa-button text-no-wrap" role="button">
<a href="{% url 'export_data_type' %}" class="usa-button usa-button--dja text-no-wrap" role="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">All domain metadata</span>
</a>
</li>
<li class="usa-button-group__item">
<a href="{% url 'export_data_full' %}" class="usa-button text-no-wrap" role="button">
<a href="{% url 'export_data_full' %}" class="usa-button usa-button--dja text-no-wrap" role="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">Current full</span>
</a>
</li>
<li class="usa-button-group__item">
<a href="{% url 'export_data_federal' %}" class="usa-button text-no-wrap" role="button">
<a href="{% url 'export_data_federal' %}" class="usa-button usa-button--dja text-no-wrap" role="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">Current federal</span>
</a>
</li>
<li class="usa-button-group__item">
<a href="{% url 'export_data_domain_requests_full' %}" class="usa-button text-no-wrap" role="button">
<a href="{% url 'export_data_domain_requests_full' %}" class="usa-button usa-button--dja text-no-wrap" role="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">All domain requests metadata</span>
@ -84,35 +84,35 @@
</div>
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button class="usa-button exportLink" data-export-url="{% url 'export_domains_growth' %}" type="button">
<button class="usa-button usa-button--dja exportLink" data-export-url="{% url 'export_domains_growth' %}" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">Domain growth</span>
</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button exportLink" data-export-url="{% url 'export_requests_growth' %}" type="button">
<button class="usa-button usa-button--dja exportLink" data-export-url="{% url 'export_requests_growth' %}" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">Request growth</span>
</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button exportLink" data-export-url="{% url 'export_managed_domains' %}" type="button">
<button class="usa-button usa-button--dja exportLink" data-export-url="{% url 'export_managed_domains' %}" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">Managed domains</span>
</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button exportLink" data-export-url="{% url 'export_unmanaged_domains' %}" type="button">
<button class="usa-button usa-button--dja exportLink" data-export-url="{% url 'export_unmanaged_domains' %}" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg><span class="margin-left-05">Unmanaged domains</span>
</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button exportLink usa-button--secondary" data-export-url="{% url 'analytics' %}" type="button">
<button class="usa-button usa-button--dja exportLink usa-button--secondary" data-export-url="{% url 'analytics' %}" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#assessment"></use>
</svg><span class="margin-left-05">Update charts</span>

View file

@ -48,12 +48,12 @@
</option>
{% endfor %}
</select>
<input type="submit" value="Preview" class="usa-button">
<input type="submit" value="Preview" class="usa-button usa-button--dja">
</form>
</div>
<div class="desktop:flex-align-center">
{% if selected_user %}
<a class="usa-button" href="#transfer-and-delete" aria-controls="transfer-and-delete" data-open-modal>
<a class="usa-button usa-button--dja" href="#transfer-and-delete" aria-controls="transfer-and-delete" data-open-modal>
Transfer and delete old user
</a>
{% endif %}
@ -197,7 +197,7 @@
<form method="POST" action="{% url 'transfer_user' current_user.pk %}">
{% csrf_token %}
<input type="hidden" name="selected_user" value="{{ selected_user.pk }}">
<input type="submit" class="usa-button" value="Transfer and delete old user">
<input type="submit" class="usa-button usa-button--dja" value="Transfer and delete old user">
</form>
</li>
{% endif %}