layout and CSS for the back to manage domains button

This commit is contained in:
Rachid Mrad 2023-12-04 15:28:31 -05:00
parent f5edd64c92
commit b0d95be7a2
No known key found for this signature in database
GPG key ID: EF38E4CEC4A8F3CF
5 changed files with 32 additions and 20 deletions

View file

@ -37,10 +37,6 @@ body {
@include typeset('sans', 'xl', 2);
color: color('primary-darker');
}
.usa-nav__primary {
margin-top: units(1);
}
.section--outlined {
background-color: color('white');

View file

@ -7,6 +7,17 @@ a[href$="todo"]::after {
content: " [link TBD]";
font-style: italic;
}
a.manage_domain_back {
// Slight vertical and horizontal alignment fixes
position: relative;
top: -2px;
left: -5px;
font-weight: bold;
&:visited {
color: color('primary');
}
}
a.breadcrumb__back {
display:flex;

View file

@ -0,0 +1,9 @@
@use "uswds-core" as *;
.usa-nav__primary {
margin-top: units(1);
}
.usa-logo-group {
flex: 1 1 0%;
}

View file

@ -9,6 +9,7 @@
/*--------------------------------------------------
--- Custom Styles ---------------------------------*/
@forward "base";
@forward "nav-primary";
@forward "typography";
@forward "buttons";
@forward "forms";

View file

@ -144,23 +144,18 @@
<header class="usa-header usa-header-basic">
<div class="usa-nav-container">
<div class="usa-navbar">
{% block logo %}
<div class="usa-logo" id="extended-logo">
<strong class="usa-logo__text" >
<a href="{% url 'home' %}"> .gov </a>
</strong>
</div>
<a href="{% url 'home' %}" class="breadcrumb__back">
<strong class="display-flex">
<div class="usa-logo-group">
{% block logo %}
<div class="usa-logo display-inline-block" id="extended-logo">
<strong class="usa-logo__text" >
<a href="{% url 'home' %}"> .gov </a>
</strong>
</div>
{% endblock %}
<a class="margin-left-3 manage_domain_back" href="{% url 'home' %}">
Manage your domains
</strong>
</a>
{% endblock %}
</a>
</div>
<button type="button" class="usa-menu-btn">Menu</button>
</div>
{% block usa_nav %}