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

CSS refactor

Browse Source 
accordion_table.scss refactor

audit_log.scss refactor

budget_chart.scss refactor

delete checklist.scss

dod_login_notice.scss refactor

empty_state.scss refactor

footer.scss refactor

forms.scss refactor

global_navigation.scss refactor

delete member_edit.scss

modal.scss refactor

refactor portfolio_layout

delete search_bar.scss

selector.scss refactor

sticky_cta.scss refactor

refactor topbar.scss

refactor accordions.scss

refactor action_group.scss

refactor block_list.scss

refactor card.scss

refactor icon css

refactor inputs.scss

refactor labels.scss

refactor panel.scss

sidename.scss

tables.scss

refactor uploader.scss

application list and edit refactor

home.scss refactor

login.scss styles

reports.scss refactor

task_order.scss refactor
This commit is contained in:
mk-dds
2019-07-16 16:44:53 -04:00
committed by leigh-mil
parent c5ec2c296f
commit 5f99ceee5f
39 changed files with 703 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
styles/elements/_accordions.scss
View File

@@ -35,54 +35,100 @@
margin-right: -$gap;
}
}
}
.accordion__header {
@include block-list-header;
&__header {
@include block-list-header;
border-top: 3px solid $color-blue;
border-bottom: none;
box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
border-top: 3px solid $color-blue;
border-bottom: none;
box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
&.row {
background: $color-white;
&.row {
background: $color-white;
}
}
}
.accordion__title {
@include block-list__title;
&__title {
@include block-list__title;
color: $color-blue;
color: $color-blue;
@include h3;
@include h3;
&.icon-link {
margin: 0;
display: block;
padding: 0 $gap;
text-decoration: none;
&.icon-link {
margin: 0;
display: block;
padding: 0 $gap;
text-decoration: none;
}
}
}
.accordion__description {
@include block-list__description;
&__description {
@include block-list__description;
font-style: italic;
font-size: $small-font-size;
color: $color-gray;
}
.accordion__actions {
margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex;
flex-direction: row;
.icon-link {
font-style: italic;
font-size: $small-font-size;
color: $color-gray;
}
svg {
width: 1rem;
&__actions {
margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex;
flex-direction: row;
.icon-link {
font-size: $small-font-size;
svg {
width: 1rem;
}
}
&__footer {
@include block-list__footer;
border-top: 0;
}
}
&__item {
@include block-list-item;
opacity: 0.75;
background-color: $color-blue-light;
border-bottom: 1px solid rgba($color-gray-light, 0.5);
&--selectable {
> div {
display: flex;
flex-direction: row-reverse;
@include ie-only {
width: 100%;
}
> label {
@include block-list-selectable-label;
}
}
> label {
@include block-list-selectable-label;
}
input:checked {
+ label {
color: $color-primary;
}
}
@include ie-only {
dl {
width: 100%;
padding-left: $gap * 4;
}
}
}
}
@@ -100,49 +146,3 @@
margin: 0 (0.5 * $gap);
}
}
.accordion__item {
@include block-list-item;
opacity: 0.75;
background-color: $color-blue-light;
border-bottom: 1px solid rgba($color-gray-light, 0.5);
&.accordion__item--selectable {
> div {
display: flex;
flex-direction: row-reverse;
@include ie-only {
width: 100%;
}
> label {
@include block-list-selectable-label;
}
}
> label {
@include block-list-selectable-label;
}
input:checked {
+ label {
color: $color-primary;
}
}
@include ie-only {
dl {
width: 100%;
padding-left: $gap * 4;
}
}
}
}
.accordion__footer {
@include block-list__footer;
border-top: 0;
}

8
styles/elements/_action_group.scss
View File

@@ -22,8 +22,10 @@
margin-bottom: $gap * 3;
}
.action-group__action--left {
margin-left: 0;
margin-right: auto;
&__action {
&--left {
margin-left: 0 !important;
margin-right: auto !important;
}
}
}

70
styles/elements/_block_lists.scss
View File

@@ -115,58 +115,58 @@
margin-right: -$gap;
}
}
}
.block-list__header {
@include block-list-header;
}
&__header {
@include block-list-header;
}
.block-list__title {
@include block-list__title;
}
&__title {
@include block-list__title;
}
.block-list__description {
@include block-list__description;
}
&__description {
@include block-list__description;
}
.block-list__item {
@include block-list-item;
&__item {
@include block-list-item;
&.block-list__item--selectable {
> div {
display: flex;
flex-direction: row-reverse;
&--selectable {
> div {
display: flex;
flex-direction: row-reverse;
@include ie-only {
width: 100%;
@include ie-only {
width: 100%;
}
> label {
@include block-list-selectable-label;
}
}
> label {
@include block-list-selectable-label;
}
}
> label {
@include block-list-selectable-label;
}
input:checked {
+ label {
color: $color-primary;
input:checked {
+ label {
color: $color-primary;
}
}
}
@include ie-only {
dl {
width: 100%;
padding-left: $gap * 4;
@include ie-only {
dl {
width: 100%;
padding-left: $gap * 4;
}
}
}
}
}
.block-list__footer {
@include block-list__footer;
&__footer {
@include block-list__footer;
border-top: 0;
border-top: 0;
}
}

10
styles/elements/_card.scss
View File

@@ -4,28 +4,26 @@
padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3);
margin-bottom: 20px;
.card__status {
&__status {
display: flex;
align-items: baseline;
justify-content: space-around;
height: 55px;
align-items: center;
.card__status-spacer {
&-spacer {
flex-grow: 10;
}
}
.card__header h3 {
&__header h3 {
margin-top: 0;
}
.card__body {
&__body {
font-size: $small-font-size;
}
}
.card {
.label {
margin-left: 0;
}

36
styles/elements/_diff.scss
View File

@@ -1,36 +0,0 @@
[class*="diff--"] {
border-left-style: solid;
border-left-width: $gap / 2;
padding-left: $gap / 2;
margin: ($gap / 2) 0;
&::before {
font-weight: bold;
padding-right: $gap;
display: inline-block;
width: 1.8rem;
text-align: center;
}
}
.diff--removed {
background-color: $color-red-lightest;
border-left-color: $color-red-dark;
text-decoration: line-through;
text-decoration-color: $color-overlay;
&::before {
content: "-";
color: $color-red-dark;
}
}
.diff--added {
background-color: $color-aqua-lightest;
border-left-color: $color-aqua-dark;
&::before {
content: "+";
color: $color-aqua-dark;
}
}

16
styles/elements/_icon_link.scss
View File

@@ -66,31 +66,33 @@
text-decoration: underline;
&.icon-link--vertical {
&--vertical {
@include icon-link-vertical;
}
&.icon-link--large {
&--large {
@include icon-link-large;
}
&.icon-link--danger {
&--danger {
@include icon-link-color($color-red, $color-red-lightest);
}
&.icon-link--default {
&--default {
@include icon-link-color($color-black-light, $color-gray-lightest);
}
&.icon-link--download {
&--download {
@include icon-link-color($color-black);
font-weight: $font-normal;
padding-left: 0;
.icon {
@include icon-color($color-green);
}
}
&.icon-link--disabled {
&--disabled {
opacity: 0.3;
text-decoration: none;
pointer-events: none;
@@ -101,7 +103,7 @@
}
}
&.icon-link--left {
&--left {
padding-left: 0;
}
}

20
styles/elements/_icons.scss
View File

@@ -49,40 +49,40 @@
@include icon-size(16);
@include icon-style-default;
&.icon--tiny {
&--tiny {
@include icon-size(10);
}
&.icon--large {
&--large {
@include icon-size(24);
}
&.icon--remove,
&.icon--red {
&--remove,
&--red {
@include icon-color($color-red);
}
&.icon--green {
&--green {
@include icon-color($color-green);
}
&.icon--gray {
&--gray {
@include icon-color($color-gray);
}
&.icon--blue {
&--blue {
@include icon-color($color-blue-darker);
}
&.icon--medium {
&--medium {
@include icon-size(12);
}
&.icon--gold {
&--gold {
@include icon-color($color-gold-dark);
}
&.icon--circle {
&--circle {
svg {
border-radius: 100%;
border-style: solid;

14
styles/elements/_inputs.scss
View File

@@ -85,7 +85,7 @@
}
}
.usa-input__title {
&__title {
display: flex;
align-items: center;
@@ -100,7 +100,7 @@
}
}
.usa-input__help {
&__help {
@include h5;
font-weight: normal;
@@ -112,7 +112,7 @@
}
}
.usa-input__coming-soon {
&__coming-soon {
@include h5;
font-weight: normal;
@@ -153,7 +153,7 @@
color: grey;
}
.usa-input__choices {
&__choices {
// checkbox & radio sets
legend {
padding: 0 0 ($gap / 2) 0;
@@ -210,7 +210,7 @@
}
}
.usa-input__message {
&__message {
@include h5;
display: inline-block;
@@ -354,7 +354,7 @@ select {
display: flex;
flex-direction: row;
.phone-input__phone {
&__phone {
margin-right: $gap * 4;
.usa-input {
@@ -370,7 +370,7 @@ select {
}
}
.phone-input__extension {
&__extension {
margin-left: $gap * 4;
.usa-input {

25
styles/elements/_kpi.scss
View File

@@ -1,25 +0,0 @@
.kpi {
margin-bottom: $gap;
.kpi__item {
@include panel-base;
text-align: center;
margin: $gap;
padding: $gap * 2;
&:first-child {
margin-left: -$gap;
}
&:last-child {
margin-right: -$gap;
}
}
.kpi__item__value {
@include h1;
padding-bottom: $gap / 2;
}
}

10
styles/elements/_labels.scss
View File

@@ -18,23 +18,23 @@
border-radius: $gap / 2;
white-space: nowrap;
&.label--info {
&--info {
background-color: $color-primary;
}
&.label--warning {
&--warning {
background-color: $color-gold;
}
&.label--error {
&--error {
background-color: $color-red;
}
&.label--success {
&--success {
background-color: $color-green;
}
&.label--purple {
&--purple {
background-color: $color-purple;
}
}

60
styles/elements/_menu.scss
View File

@@ -1,60 +0,0 @@
.menu {
background-color: $color-blue-darkest;
color: $color-white;
position: absolute;
min-width: 30rem;
max-height: 80vh;
overflow-y: auto;
padding-bottom: $gap * 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
.menu__heading {
@include h5;
margin: 0;
padding: ($gap * 3) ($gap * 2) $gap;
}
.menu__list {
margin: 0;
padding: 0;
> .menu__list__item {
margin: 0;
> a {
@include h5;
font-weight: normal;
text-decoration: none;
display: block;
color: $color-white;
padding: ($gap * 0.75) ($gap * 2);
.icon {
@include icon-color($color-white);
@include icon-size(10);
margin-left: $gap;
}
&:hover {
background-color: $color-blue-darker;
}
}
}
}
.menu__message {
@include h5;
font-weight: normal;
font-style: italic;
padding: 0 ($gap * 2);
}
.menu__button {
margin: ($gap * 2) ($gap * 2) 0;
white-space: nowrap;
}
}

16
styles/elements/_panels.scss
View File

@@ -58,7 +58,7 @@
@include panel-margin;
@include shadow-panel;
.panel__content {
&__content {
margin: ($gap * 2) 0;
padding: 0 ($gap * 2);
@@ -68,11 +68,11 @@
}
}
.panel__body {
&__body {
margin-right: $gap * 2;
}
.panel__heading {
&__heading {
padding: $gap * 2;
@include media($medium-screen) {
@@ -112,17 +112,17 @@
}
}
.panel__footer {
&__footer {
padding: 3 * $gap;
}
&__actions {
@include panel-actions;
}
hr {
border: 0;
border-bottom: 1px dashed $color-gray-light;
margin: ($gap * 4) ($site-margins * -4);
}
}
.panel__actions {
@include panel-actions;
}

24
styles/elements/_sidenav.scss
View File

@@ -5,6 +5,7 @@
.sidenav-container {
position: relative;
box-shadow: $box-shadow;
.global-navigation.sidenav {
height: 100%;
@@ -16,9 +17,8 @@
}
width: 25rem;
box-shadow: $box-shadow;
.sidenav__title {
&__title {
@include sidenav__header;
font-size: $h3-font-size;
@@ -28,7 +28,7 @@
opacity: 0.54;
}
.sidenav__toggle {
&__toggle {
@include sidenav__header;
font-size: $small-font-size;
@@ -55,7 +55,7 @@
}
}
.sidenav__divider--small {
&__divider--small {
display: block;
width: 4 * $gap;
border: 1px solid #d6d7d9;
@@ -63,13 +63,13 @@
margin-bottom: $gap;
}
.sidenav__text {
&__text {
margin: 2 * $gap;
color: $color-gray;
font-style: italic;
}
.sidenav__link {
&__link {
display: block;
padding: $gap ($gap * 2);
color: $color-black;
@@ -78,16 +78,16 @@
overflow: hidden;
text-overflow: ellipsis;
.sidenav__link-icon {
&-icon {
margin-left: -($gap * 0.5);
}
&.sidenav__link--disabled {
&--disabled {
color: $color-shadow;
pointer-events: none;
}
&.sidenav__link--add {
&--add {
color: $color-blue;
font-size: $small-font-size;
@@ -97,7 +97,7 @@
}
}
&.sidenav__link--active {
&--active {
@include h4;
color: $color-primary;
@@ -110,7 +110,7 @@
position: relative;
.sidenav__link-active_indicator .icon {
&_indicator .icon {
@include icon-color($color-primary);
position: absolute;
@@ -179,7 +179,7 @@
}
}
.sidenav--minimized {
&--minimized {
@extend .sidenav;
width: 10rem;

38
styles/elements/_tables.scss
View File

@@ -15,27 +15,29 @@ table.atat-table {
th,
td {
&.table-cell--align-right {
text-align: right;
}
&.table-cell {
&--align-right {
text-align: right;
}
&.table-cell--align-center {
text-align: center;
}
&--align-center {
text-align: center;
}
&.table-cell--shrink {
width: 1%;
}
&--shrink {
width: 1%;
}
&.table-cell--expand {
width: 100%;
}
&--expand {
width: 100%;
}
&.table-cell--hide-small {
display: none;
&--hide-small {
display: none;
@include media($medium-screen) {
display: table-cell;
@include media($medium-screen) {
display: table-cell;
}
}
}
}
@@ -109,7 +111,7 @@ table.atat-table {
@include panel-margin;
.responsive-table-wrapper__header {
&__header {
@include panel-base;
@include panel-theme-default;
@@ -122,7 +124,7 @@ table.atat-table {
align-items: center;
padding: $gap * 2;
.responsive-table-wrapper__title {
&__title {
@include h4;
font-size: $lead-font-size;

4
styles/elements/_uploader.scss
View File

@@ -38,14 +38,14 @@
}
}
.uploaded-file__name {
&__name {
vertical-align: middle;
margin-left: 0.5rem;
font-weight: $font-bold;
text-decoration: underline;
}
.uploaded-file__remove {
&__remove {
vertical-align: middle;
margin-left: 2rem;
font-size: $small-font-size;