pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1114 from dod-ccpo/app-settings-styling_part-2

Browse Source 
App settings styling - environments table
This commit is contained in:
leigh-mil
2019-10-16 18:10:09 -04:00
committed by GitHub
parent 15f9fb8353 e94e7c68cb
commit 1c79f1dfc9
14 changed files with 191 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
styles/components/_accordion_table.scss
View File

@@ -1,25 +1,17 @@
.float-right {
float: right;
}
.accordion-table {
.usa-alert {
margin: $gap * 2;
margin-bottom: 0;
}
ul {
padding-left: 0;
}
margin: 0;
&__head {
padding: $gap ($gap * 2);
font-size: $small-font-size;
font-weight: 700;
color: $color-gray;
background-color: $color-gray-lightest;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
li {
list-style-type: none;
margin: 0;
border-bottom: 1px solid $color-gray-lighter;
}
}
thead th {
@@ -37,36 +29,9 @@
}
}
.new-env {
margin-top: 5rem;
padding: 0 5rem;
}
&__items {
margin: 0;
li {
font-weight: $font-bold;
border-bottom: 1px solid $color-gray-lightest;
margin: 0;
list-style-type: none;
.icon-link--large {
padding-top: $gap * 0.5;
padding-bottom: $gap * 0.5;
}
ul {
margin-top: 0;
margin-bottom: 0;
background-color: $color-gray-lightest;
li {
border-bottom: 1px solid $color-gray-lighter;
}
}
}
th,
td,
tr {
@@ -79,8 +44,15 @@
}
&__item {
border-bottom: 1px solid $color-gray-lightest;
padding: $gap 0;
&:first-child {
padding-top: 0;
}
&-content {
padding: ($gap * 2);
font-weight: $font-bold;
.usa-input {
margin: 0;
@@ -90,36 +62,9 @@
}
}
#name {
max-width: none;
border-color: black;
}
.usa-alert {
margin: 2.5rem 0;
}
select {
border: none;
font-weight: $font-normal;
}
}
&__action-group {
padding: 1rem 3.2rem;
background-color: $color-gray-lightest;
text-align: right;
button,
a {
margin: 0;
font-size: $small-font-size;
}
.icon-link {
padding-top: 0.5rem;
float: none;
}
}
&__toggler {
@@ -151,38 +96,17 @@
}
}
&__expanded {
font-size: $small-font-size;
font-weight: $font-normal;
background-color: $color-gray-lightest;
padding: ($gap * 2) ($gap * 4);
&-toggle-content {
margin-top: $gap;
.col--grow {
&__expanded {
font-size: $small-font-size;
font-weight: $font-normal;
}
background-color: $color-gray-lightest;
padding: $gap;
th,
td {
.icon-link {
font-weight: $font-normal;
font-size: $base-font-size;
}
border-bottom: 1px dashed $color-white;
}
&_first {
float: left;
}
&-role {
.icon-link {
padding: 0;
vertical-align: text-top;
.icon {
margin: 0 0 0 0.25rem;
}
&:last-child {
border-bottom: none;
}
}
}
@@ -210,11 +134,3 @@
}
}
}
#application-environments {
.row {
& > .col:first-child {
flex-grow: 5;
}
}
}

16
styles/components/_empty_state.scss
View File

@@ -1,30 +1,18 @@
.empty-state {
text-align: center;
padding: 6rem ($gap * 2) 0;
padding: 5rem ($gap * 2) 2rem;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
@include media($medium-screen) {
padding: 8rem ($gap * 4) 0;
}
> .icon {
@include icon-size(50);
@include icon-color($color-gray-light);
}
&__message {
@include h2;
line-height: 1.2;
max-width: 15em;
color: $color-gray;
@include media($large-screen) {
@include h1;
}
font-weight: $font-bold;
}
&__sub-message {

62
styles/components/_portfolio_layout.scss
View File

@@ -140,16 +140,19 @@
.panel {
@include shadow-panel;
padding-bottom: $gap * 3;
}
a.add-new-button {
display: inherit;
margin-left: auto;
margin-right: auto;
max-width: 50%;
margin-top: 3rem;
}
.member-list {
.panel {
@include shadow-panel;
padding-bottom: 0;
}
.responsive-table-wrapper {
padding-bottom: $gap * 3;
margin-bottom: 0;
}
@@ -158,14 +161,6 @@
margin-top: 0;
}
a.create-member {
display: inherit;
margin-left: auto;
margin-right: auto;
max-width: 50%;
margin-top: 3rem;
}
input.usa-button.usa-button-primary {
width: 9rem;
height: 4rem;
@@ -228,6 +223,16 @@
}
}
#add-new-env {
padding: $gap * 2;
.new-env {
width: 50%;
max-width: 30em;
padding-top: $gap * 4;
}
}
.application-content {
margin-top: $gap * 4;
@@ -244,6 +249,7 @@
.panel {
@include shadow-panel;
padding-bottom: 2rem;
}
.application-list-item {
@@ -270,32 +276,26 @@
margin-top: $gap * 3;
}
.accordion-table__item-content.form-row {
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
}
li.accordion-table__item__expanded {
height: auto;
}
.environment-list__item {
position: relative;
height: 7rem;
}
span.accordion-table__item__toggler.icon-link {
a.application-list-item__environment__csp_link {
font-size: $small-font-size;
font-weight: $font-normal;
position: absolute;
left: -$gap * 1.25;
bottom: 0;
.icon {
@include icon-color($color-blue);
}
}
a.application-list-item__environment__csp_link.icon-link {
font-size: $small-font-size;
span.accordion-table__item__toggler {
font-weight: $font-normal;
&.environment-list__item__members {
float: unset;
font-size: $small-font-size;
}
}
}

13
styles/elements/_labels.scss
View File

@@ -4,7 +4,8 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
*/
.label {
.label,
.usa-label {
@include h5;
display: inline-block;
@@ -15,7 +16,7 @@
vertical-align: middle;
margin: 0 $gap;
padding: 0 $gap;
border-radius: $gap / 2;
border-radius: $gap / 3;
white-space: nowrap;
&--info {
@@ -37,4 +38,12 @@
&--purple {
background-color: $color-purple;
}
&--below {
margin-left: 0;
}
.icon {
@include icon-color($color-white) @include icon-size(12) margin: 0;
}
}

5
styles/elements/_panels.scss
View File

@@ -61,11 +61,6 @@
&__content {
margin: ($gap * 2) 0;
padding: 0 ($gap * 2);
@include media($medium-screen) {
margin: ($gap * 4) 0;
padding: 0 ($gap * 4);
}
}
&__body {