Topbar, Portfolio Header, & Content alignment
This commit is contained in:
parent
8dbb3b32a2
commit
8c0e88c5c4
@ -1,8 +1,6 @@
|
|||||||
.empty-state {
|
.empty-state {
|
||||||
padding: $gap * 3;
|
max-width: $max-panel-width;
|
||||||
max-width: 100%;
|
background-color: #F6F6F7;
|
||||||
background-color: $color-gray-lightest;
|
|
||||||
margin-top: $gap * 5;
|
|
||||||
|
|
||||||
&--white {
|
&--white {
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
@ -18,17 +16,28 @@
|
|||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
padding: 3.2rem 2.4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 $gap * 3;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin-left: -$gap * 3;
|
margin: $gap * 4 0 0;
|
||||||
margin-right: -$gap * 3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: $color-gray-lightest;
|
||||||
|
padding: $gap * 3;
|
||||||
|
|
||||||
a.usa-button {
|
a.usa-button {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
display: inline-block;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -28,6 +28,7 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 $spacing-large;
|
padding: 0 $spacing-large;
|
||||||
|
|
||||||
|
|
||||||
@include media($medium-screen) {
|
@include media($medium-screen) {
|
||||||
top: $usa-banner-height + $topbar-height;
|
top: $usa-banner-height + $topbar-height;
|
||||||
}
|
}
|
||||||
|
@ -5,15 +5,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col.col--grow {
|
.col.col--grow {
|
||||||
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-header {
|
.portfolio-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
margin: $gap * 2 0;
|
||||||
margin: $spacing-medium 0;
|
max-width: $max-panel-width;
|
||||||
max-width: 90rem;
|
|
||||||
@include media($small-screen) {
|
@include media($small-screen) {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
@ -25,6 +26,12 @@
|
|||||||
&__name {
|
&__name {
|
||||||
@include h1;
|
@include h1;
|
||||||
padding-right: $spacing-medium;
|
padding-right: $spacing-medium;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: translateX(0%) translateY(-50%);
|
||||||
|
transform: translateX(0%) translateY(-50%);
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
@ -64,6 +71,7 @@
|
|||||||
&.active {
|
&.active {
|
||||||
color: $color-blue;
|
color: $color-blue;
|
||||||
background-color: $color-gray-lightest;
|
background-color: $color-gray-lightest;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $color-aqua-lightest;
|
background-color: $color-aqua-lightest;
|
||||||
@ -95,17 +103,17 @@
|
|||||||
|
|
||||||
.portfolio-admin {
|
.portfolio-admin {
|
||||||
margin: $spacing-large 0;
|
margin: $spacing-large 0;
|
||||||
max-width: 90rem;
|
max-width: $max-panel-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-content {
|
.portfolio-content {
|
||||||
.panel {
|
.panel {
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
max-width: 90rem;
|
max-width: $max-panel-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
max-width: 90rem;
|
max-width: $max-panel-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.add-new-button {
|
a.add-new-button {
|
||||||
@ -263,6 +271,7 @@
|
|||||||
|
|
||||||
.portfolio-applications {
|
.portfolio-applications {
|
||||||
margin-top: $gap * 5;
|
margin-top: $gap * 5;
|
||||||
|
max-width: $max-panel-width;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
&--title {
|
&--title {
|
||||||
@ -308,7 +317,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-funding {
|
.portfolio-funding {
|
||||||
max-width: 90rem;
|
max-width: $max-panel-width;
|
||||||
margin: $spacing-large 0;
|
margin: $spacing-large 0;
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
@ -378,6 +387,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-reports {
|
.portfolio-reports {
|
||||||
|
max-width: $max-panel-width;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
margin-bottom: 4 * $gap;
|
margin-bottom: 4 * $gap;
|
||||||
|
|
||||||
|
@ -24,9 +24,6 @@
|
|||||||
|
|
||||||
.usa-button {
|
.usa-button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 20rem;
|
|
||||||
height: 3.2rem;
|
|
||||||
font-size: $small-font-size;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -43,6 +40,10 @@
|
|||||||
&-buttons {
|
&-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.action-group {
|
.action-group {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
|
@ -4,14 +4,15 @@
|
|||||||
height: $topbar-height;
|
height: $topbar-height;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: $usa-banner-height;
|
top: $usa-banner-height;
|
||||||
width: 100%;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
&__navigation {
|
&__navigation {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
max-width: 1180px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
|
@ -16,7 +16,7 @@ $footer-height: 5rem;
|
|||||||
$usa-banner-height: 2.8rem;
|
$usa-banner-height: 2.8rem;
|
||||||
$sidenav-expanded-width: 25rem;
|
$sidenav-expanded-width: 25rem;
|
||||||
$sidenav-collapsed-width: 10rem;
|
$sidenav-collapsed-width: 10rem;
|
||||||
$max-panel-width: 80rem;
|
$max-panel-width: 90rem;
|
||||||
$home-pg-icon-width: 6rem;
|
$home-pg-icon-width: 6rem;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -19,10 +19,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin panel-margin {
|
@mixin panel-margin {
|
||||||
margin-top: 0;
|
margin: $spacing-large 0;
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: $site-margins-mobile * 6;
|
|
||||||
|
|
||||||
@include media($medium-screen) {
|
@include media($medium-screen) {
|
||||||
margin-bottom: $site-margins * 8;
|
margin-bottom: $site-margins * 8;
|
||||||
@ -56,9 +53,10 @@
|
|||||||
@include panel-theme-default;
|
@include panel-theme-default;
|
||||||
@include panel-margin;
|
@include panel-margin;
|
||||||
@include shadow-panel;
|
@include shadow-panel;
|
||||||
|
max-width: $max-panel-width;
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
padding: $gap * 2;
|
padding: 3.2rem 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__body {
|
&__body {
|
||||||
@ -66,7 +64,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__heading {
|
&__heading {
|
||||||
padding: $gap * 2;
|
padding: 3.2rem 2.4rem;
|
||||||
|
|
||||||
@include media($medium-screen) {
|
@include media($medium-screen) {
|
||||||
padding: $gap * 4;
|
padding: $gap * 4;
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
.home {
|
.home {
|
||||||
margin: $gap * 3;
|
|
||||||
.sticky-cta {
|
.sticky-cta {
|
||||||
margin: -1.6rem -1.6rem 0 -1.6rem;
|
margin: -1.6rem -1.6rem 0 -1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
margin: 4rem;
|
margin: $spacing-large 0;
|
||||||
max-width: 900px;
|
max-width: $max-panel-width;
|
||||||
|
|
||||||
&--descriptions {
|
&--descriptions {
|
||||||
.col {
|
.col {
|
||||||
@ -29,7 +29,7 @@
|
|||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
|
|
||||||
.home-container {
|
.home-container {
|
||||||
max-width: 90rem;
|
max-width: $max-panel-width;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-bottom: 8rem;
|
margin-bottom: 8rem;
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
{{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
|
{{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
|
||||||
{{ TextInput(portfolio_form.description, paragraph=True) }}
|
{{ TextInput(portfolio_form.description, paragraph=True) }}
|
||||||
<div class='edit-portfolio-name action-group'>
|
<div class='edit-portfolio-name action-group'>
|
||||||
{{ SaveButton(text='Save Changes', additional_classes='usa-button-big') }}
|
{{ SaveButton(text='Save Changes') }}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</base-form>
|
</base-form>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class='col'>
|
<div class='col user-edit'>
|
||||||
|
|
||||||
{% include "fragments/flash.html" %}
|
{% include "fragments/flash.html" %}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user