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

Merge pull request #792 from dod-ccpo/style-updates

Browse Source 
Style updates
This commit is contained in:
dandds
2019-05-01 11:44:24 -04:00
committed by GitHub
parent 77aaf301c2 035d24f55d
commit e709de1d49
16 changed files with 118 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
styles/components/_accordion_table.scss
View File

@@ -19,9 +19,9 @@
.accordion-table__head {
padding: $gap $gap*2;
font-size: $small-font-size;
font-weight: 700;
color: $color-gray;
text-transform: uppercase;
background-color: $color-gray-lightest;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
@@ -107,6 +107,11 @@
}
.accordion-table__item__expanded {
font-size: $small-font-size;
font-weight: $font-normal;
background-color: $color-gray-lightest;
padding: $gap*2 $gap*4;
th, td {
.icon-link {
font-weight: $font-normal;
@@ -118,12 +123,7 @@
.accordion-table__item__expanded_first {
float: left;
font-weight: bold;
}
font-size: $small-font-size;
background-color: $color-gray-lightest;
padding: $gap*2.5 $gap*7 $gap*5 $gap*7;
}
}
}
@@ -131,8 +131,6 @@
#application-members {
.accordion-table {
.accordion-table__head {
font-size: $small-font-size;
padding-left: $gap*3;
}
.accordion-table__item-content, .accordion-table__head {
@@ -152,5 +150,9 @@
flex-grow: 1;
flex-basis: 0;
}
.accordion-table__item__toggler {
text-align: right;
}
}
}

5
styles/components/_alerts.scss
View File

@@ -4,6 +4,11 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
*/
.usa-alert-heading {
line-height: 2.4rem;
margin-bottom: $gap;
}
@mixin alert {
padding: $gap * 2;
border-left-width: $gap / 2;

26
styles/components/_portfolio_layout.scss
View File

@@ -16,7 +16,7 @@
.portfolio-breadcrumbs {
margin-bottom: $gap * 2;
color: $color-gray-medium;
color: $color-gray-dark;
font-size: $h5-font-size;
.icon-link {
@@ -34,10 +34,10 @@
.portfolio-breadcrumbs__home {
&.icon-link--disabled {
color: $color-gray-medium;
color: $color-gray-dark;
opacity: 1;
.icon {
@include icon-color($color-gray-medium);
@include icon-color($color-gray-dark);
}
}
}
@@ -97,6 +97,7 @@
font-size: $small-font-size;
.icon-link {
padding: 0.8rem 1.2rem;
&.active {
color: $color-gray;
.icon {
@@ -152,8 +153,6 @@
color: $color-gray-dark;
padding: $gap 0;
text-transform: uppercase;
opacity: 0.54;
font-size: $small-font-size;
font-weight: bold;
margin-bottom: 3 * $gap;
}
@@ -228,10 +227,6 @@
}
}
.green {
color: $color-green;
}
.name {
font-weight: bold;
@@ -337,6 +332,16 @@
}
}
}
textarea {
max-height: 9rem;
max-width: none;
}
.panel__footer {
padding-bottom: 0;
padding-top: 0;
}
}
.activity-log {
@@ -378,8 +383,8 @@
}
.application-list-item {
box-shadow: $box-shadow;
border-radius: 5px;
box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);
margin-bottom: 6 * $gap;
.col {
@@ -467,7 +472,6 @@
}
table {
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
thead {
th:first-child {
padding-left: 3 * $gap;

8
styles/core/_util.scss
View File

@@ -46,3 +46,11 @@
@content;
}
}
.green {
color: $color-green;
}
.user-permission {
font-weight: $font-normal;
}

4
styles/core/_variables.scss
View File

@@ -113,7 +113,7 @@ $color-focus: $color-gray-light;
$color-visited: $color-purple;
$color-overlay: rgba(#000, 0.5);
$color-shadow: rgba(#000, 0.3);
$color-shadow: rgba(208, 219, 231, 0.5);
$color-transparent: rgba(#000, 0);
// Mobile First Breakpoints
@@ -154,7 +154,7 @@ $label-border-radius: 2px;
$checkbox-border-radius: 2px;
$border-radius: 3px;
$button-border-radius: 5px;
$box-shadow: 0 0 2px $color-shadow;
$box-shadow: 0px 2px 5px 0px $color-shadow;
$focus-outline: 2px dotted $color-gray-light;
$focus-spacing: 3px;
$nav-width: 300px; // previously 951px;

21
styles/elements/_accordions.scss
View File

@@ -1,3 +1,19 @@
.triangle-box {
position: relative;
.triangle-up {
$triangle-size: ($gap * 1.5);
position: absolute;
width: 0;
height: 0;
border-left: $triangle-size solid transparent;
border-right: $triangle-size solid transparent;
border-bottom: $triangle-size solid $color-blue-light;
bottom: -4px;
right: 50%;
}
}
.accordion {
@include block-list;
@@ -54,11 +70,16 @@
.accordion__actions {
margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex;
flex-direction: row;
.icon-link {
font-size: $small-font-size;
svg {
width: 1rem;
}
}
.counter {

4
styles/elements/_action_group.scss
View File

@@ -11,10 +11,10 @@
.usa-button,
a {
margin: 0 0 0 ($gap * 2);
margin: 0 0 0 $gap;
@include media($medium-screen) {
margin: 0 0 0 ($gap * 4);
margin: 0 0 0 ($gap * 2);
}
}

3
styles/elements/_block_lists.scss
View File

@@ -13,12 +13,11 @@
@mixin block-list-header {
@include panel-base;
@include panel-theme-default;
padding: $gap * 2;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: $color-gray-lightest;
padding: $gap 2 * $gap;
padding: $gap 3 * $gap;
color: $color-gray;
.icon-tooltip {

9
styles/elements/_panels.scss
View File

@@ -22,10 +22,10 @@
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: $site-margins-mobile * 2;
margin-bottom: $site-margins-mobile * 6;
@include media($medium-screen) {
margin-bottom: $site-margins * 2;
margin-bottom: $site-margins * 8;
}
}
@@ -47,8 +47,8 @@
}
@mixin shadow-panel {
padding: $gap / 2 0;
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
padding: $gap /2 0;
box-shadow: $box-shadow;
border-top: none;
border-bottom: none;
}
@@ -57,6 +57,7 @@
@include panel-base;
@include panel-theme-default;
@include panel-margin;
@include shadow-panel;
.panel__content {
margin: ($gap * 2) 0;

6
styles/elements/_sidenav.scss
View File

@@ -1,6 +1,5 @@
@mixin sidenav__header {
padding: $gap ($gap * 2);
font-size: $small-font-size;
font-weight: bold;
}
@@ -17,10 +16,11 @@
}
width: 25rem;
box-shadow: 0 6px 18px 0 rgba(48,58,65,0.15);
box-shadow: $box-shadow;
.sidenav__title {
@include sidenav__header;
font-size: $h3-font-size;
text-transform: uppercase;
width: 50%;
color: $color-gray-dark;
@@ -29,6 +29,8 @@
.sidenav__toggle {
@include sidenav__header;
font-size: $small-font-size;
line-height: 2.8rem;
float: right;
color: $color-blue-darker;

1
styles/sections/_application_list.scss
View File

@@ -3,6 +3,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
padding: ($gap * 1.5) ($gap * 3);
.usa-input {
margin: 0;