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

Run scss formatter

Browse Source
This commit is contained in:
George Drummond
2019-05-01 12:44:46 -04:00
parent fc862b4f5b
commit 21d2b5dba3
44 changed files with 519 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
styles/elements/_accordions.scss
View File

@@ -2,7 +2,8 @@
position: relative;
.triangle-up {
$triangle-size: ($gap * 1.5);
$triangle-size: $gap * 1.5;
position: absolute;
width: 0;
height: 0;
@@ -17,11 +18,11 @@
.accordion {
@include block-list;
box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5);
box-shadow: 0 4px 10px 0 rgba(193, 193, 193, 0.5);
margin-bottom: 6 * $gap;
.icon-link {
margin: -$gap 0;
margin: (-$gap) 0;
}
.icon-link,
@@ -33,15 +34,15 @@
&:last-child {
margin-right: -$gap;
}
}
}
.accordion__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);
box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
&.row {
background: $color-white;
@@ -50,7 +51,9 @@
.accordion__title {
@include block-list__title;
color: $color-blue;
@include h3;
&.icon-link {
@@ -63,6 +66,7 @@
.accordion__description {
@include block-list__description;
font-style: italic;
font-size: $small-font-size;
color: $color-gray;
@@ -86,14 +90,14 @@
background-color: $color-cool-blue-light;
color: $color-white;
border-radius: 2px;
padding: $gap / 2 $gap;
padding: ($gap / 2) $gap;
margin-left: $gap;
}
.separator {
border: 1px solid $color-gray-medium;
opacity: 0.75;
margin: 0 .5 * $gap;
margin: 0 (0.5 * $gap);
}
}
@@ -113,6 +117,7 @@
width: 100%;
}
> label {
@include block-list-selectable-label;
}
@@ -131,14 +136,14 @@
@include ie-only {
dl {
width: 100%;
padding-left: $gap*4;
padding-left: $gap * 4;
}
}
}
}
.accordion__footer {
@include block-list__footer;
border-top: 0;
}

21
styles/elements/_block_lists.scss
View File

@@ -1,6 +1,7 @@
@mixin block-list {
@include panel-margin;
@include shadow-panel;
padding: 0;
ul, dl {
@@ -13,11 +14,12 @@
@mixin block-list-header {
@include panel-base;
@include panel-theme-default;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: $color-gray-lightest;
padding: $gap 3 * $gap;
padding: $gap (3 * $gap);
color: $color-gray;
.icon-tooltip {
@@ -27,6 +29,7 @@
&--grow {
display: inline-block;
width: 100%;
p {
margin-bottom: 0;
}
@@ -35,17 +38,19 @@
@mixin block-list__title {
@include h4;
margin: 0;
line-height: 3rem;
}
@mixin block-list__description {
margin-top: $gap*2;
margin-top: $gap * 2;
}
@mixin block-list__footer {
@include panel-base;
@include panel-theme-default;
padding: $gap * 2;
display: flex;
flex-direction: row-reverse;
@@ -60,6 +65,7 @@
@mixin block-list-item {
@include panel-base;
margin: 0;
padding: $gap * 2;
border-top: 0;
@@ -79,6 +85,7 @@
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
&::before {
flex-shrink: 0;
margin-right: 0;
@@ -90,12 +97,11 @@
}
}
.block-list {
@include block-list;
.icon-link {
margin: -$gap 0;
margin: (-$gap) 0;
}
.icon-link,
@@ -107,7 +113,6 @@
&:last-child {
margin-right: -$gap;
}
}
}
@@ -135,6 +140,7 @@
width: 100%;
}
> label {
@include block-list-selectable-label;
}
@@ -151,17 +157,16 @@
}
@include ie-only {
dl {
width: 100%;
padding-left: $gap*4;
padding-left: $gap * 4;
}
}
}
}
.block-list__footer {
@include block-list__footer;
border-top: 0;
}

1
styles/elements/_buttons.scss
View File

@@ -31,4 +31,3 @@ button,
box-shadow: inset 0 0 0 1px $color-red-darkest;
}
}

2
styles/elements/_diff.scss
View File

@@ -1,6 +1,6 @@
[class*='diff--'] {
border-left-style: solid;
border-left-width: ($gap / 2);
border-left-width: $gap / 2;
padding-left: $gap / 2;
margin: ($gap / 2) 0;

1
styles/elements/_graphs.scss
View File

@@ -6,6 +6,7 @@ meter {
&::-webkit-meter-bar {
background: $color-gray-lightest;
}
&::-webkit-meter-optimum-value,
&::-webkit-meter-suboptimum-value,
&::-webkit-meter-even-less-good-value {

4
styles/elements/_icon_link.scss
View File

@@ -14,6 +14,7 @@
@mixin icon-link {
@include icon-link-color($color-primary);
@include h5;
display: inline-flex;
flex-direction: row;
align-items: center;
@@ -27,6 +28,7 @@
.icon {
@include icon-color($color-primary);
@include icon-size(16);
margin-right: $gap;
&--help {
@@ -43,6 +45,7 @@
@mixin icon-link-large {
@include h4;
font-weight: $font-normal;
}
@@ -57,6 +60,7 @@
.icon-link {
@include icon-link;
@include icon-link-color($color-primary);
text-decoration: underline;
&.icon-link--vertical {

4
styles/elements/_icons.scss
View File

@@ -4,6 +4,7 @@
> svg {
width: 100%;
height: 100%;
* {
transition: fill $hover-transition-time;
}
@@ -11,7 +12,8 @@
}
@mixin icon-size($size) {
$icon-size: $size * .1rem;
$icon-size: $size * 0.1rem;
width: $icon-size;
height: $icon-size;
margin: $icon-size / 4;

55
styles/elements/_inputs.scss
View File

@@ -14,15 +14,15 @@
$border-width: 1px;
$state-color: $color-blue;
@if $state == 'error' {
@if $state == "error" {
$border-width: 2px;
$state-color: $color-red;
} @else if $state == 'warning' {
}
@else if $state == "warning" {
$border-width: 2px;
$state-color: $color-gold;
} @else if $state == 'success' {
}
@else if $state == "success" {
$border-width: 2px;
$state-color: $color-green;
}
@@ -65,11 +65,14 @@
margin: ($gap * 4) 0;
}
label {
padding: 0 0 $gap/2 0;
padding: 0 0 ($gap / 2) 0;
margin: 0;
@include h4;
@include line-max;
position: relative;
clear: both;
@@ -83,7 +86,6 @@
margin-top: 1.4rem;
margin-left: $gap;
}
}
.usa-input__title {
@@ -95,7 +97,7 @@
}
.icon-tooltip {
padding: 0 $gap/2;
padding: 0 ($gap / 2);
cursor: default;
margin: 0 0 0 ($gap / 2);
}
@@ -103,17 +105,19 @@
.usa-input__help {
@include h5;
font-weight: normal;
@include line-max;
.icon-link {
padding: 0 $gap/2;
padding: 0 ($gap / 2);
}
}
.usa-input__coming-soon {
@include h5;
font-weight: normal;
@include line-max;
@@ -126,6 +130,7 @@
select,
.selector__button {
@include line-max;
margin: 0;
box-sizing: border-box;
resize: none;
@@ -140,6 +145,7 @@
border-color: $color-blue !important;
color: $color-blue-darker;
box-shadow: inset 0 0 0 1px $color-blue;
&::placeholder {
color: $color-blue;
}
@@ -150,9 +156,11 @@
color: grey;
}
.usa-input__choices { // checkbox & radio sets
.usa-input__choices {
// checkbox & radio sets
legend {
padding: 0 0 $gap 0;
@include h4;
.icon {
@@ -163,7 +171,6 @@
label {
font-weight: $font-bold;
}
}
select {
@@ -181,8 +188,10 @@
[type='radio'] + label,
[type='checkbox'] + label {
margin: 0;
&:hover {
color: $color-blue;
&:before {
box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue;
}
@@ -210,11 +219,11 @@
.usa-input__message {
@include h5;
display: inline-block;
}
&--validation {
&--anything,
&--portfolioName,
&--requiredField,
@@ -222,6 +231,7 @@
input {
max-width: 30em;
}
.icon-validation {
left: 30em;
}
@@ -231,6 +241,7 @@
textarea {
max-width: 30em;
}
.icon-validation {
left: 30em;
}
@@ -244,6 +255,7 @@
input {
max-width: 16em;
}
.icon-validation {
left: 16em;
}
@@ -255,6 +267,7 @@
input {
max-width: 10em;
}
.icon-validation {
left: 10em;
}
@@ -264,6 +277,7 @@
input {
max-width: 18em;
}
.icon-validation {
left: 18em;
}
@@ -279,26 +293,26 @@
.icon-validation {
left: auto;
right: - $gap * 4;
right: -$gap * 4;
}
}
@include input-state('default');
@include input-state("default");
&.usa-input--error {
@include input-state('error');
@include input-state("error");
}
&.usa-input--warning {
@include input-state('warning');
@include input-state("warning");
}
&.usa-input--success {
@include input-state('success');
@include input-state("success");
}
[type='file'] {
height: auto
height: auto;
}
}
@@ -337,7 +351,6 @@ select {
button {
min-height: 4.4rem;
}
}
.phone-input {
@@ -345,7 +358,7 @@ select {
flex-direction: row;
.phone-input__phone {
margin-right: ($gap * 4);
margin-right: $gap * 4;
.usa-input {
input, label, .usa-input__message {
@@ -359,7 +372,7 @@ select {
}
.phone-input__extension {
margin-left: ($gap * 4);
margin-left: $gap * 4;
.usa-input {
input, label {

6
styles/elements/_kpi.scss
View File

@@ -1,9 +1,9 @@
.kpi {
margin-bottom: $gap;
margin-bottom: $gap;
.kpi__item {
@include panel-base;
text-align: center;
margin: $gap;
padding: $gap * 2;
@@ -19,7 +19,7 @@
.kpi__item__value {
@include h1;
padding-bottom: $gap / 2;
}
}

1
styles/elements/_labels.scss
View File

@@ -6,6 +6,7 @@
.label {
@include h5;
display: inline-block;
height: 2.4rem;
line-height: 2.4rem;

8
styles/elements/_menu.scss
View File

@@ -6,10 +6,11 @@
max-height: 80vh;
overflow-y: auto;
padding-bottom: $gap * 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
.menu__heading {
@include h5;
margin: 0;
padding: ($gap * 3) ($gap * 2) $gap;
}
@@ -23,15 +24,17 @@
> a {
@include h5;
font-weight: normal;
text-decoration: none;
display: block;
color: $color-white;
padding: ($gap * .75) ($gap * 2);
padding: ($gap * 0.75) ($gap * 2);
.icon {
@include icon-color($color-white);
@include icon-size(10);
margin-left: $gap;
}
@@ -44,6 +47,7 @@
.menu__message {
@include h5;
font-weight: normal;
font-style: italic;
padding: 0 ($gap * 2);

18
styles/elements/_panels.scss
View File

@@ -3,7 +3,7 @@
* A generic block container
*/
@mixin panel-base {
@mixin panel-base {
background-color: $color-white;
border-top-width: 1px;
border-bottom-width: 1px;
@@ -33,13 +33,12 @@
@include grid-row;
.col {
margin: 0 $site-margins-mobile * 2;
margin: 0 ($site-margins-mobile * 2);
@include media($medium-screen) {
margin: 0 $site-margins * 2;
margin: 0 ($site-margins * 2);
}
}
}
@mixin panel-actions {
@@ -47,7 +46,7 @@
}
@mixin shadow-panel {
padding: $gap /2 0;
padding: ($gap / 2) 0;
box-shadow: $box-shadow;
border-top: none;
border-bottom: none;
@@ -80,8 +79,9 @@
padding: $gap * 4;
}
&--tight {
padding: $gap*2;
padding: $gap * 2;
}
&--divider {
@@ -98,7 +98,7 @@
}
.icon-tooltip {
margin-left: $gap*2;
margin-left: $gap * 2;
}
&--grow {
@@ -115,12 +115,10 @@
hr {
border: 0;
border-bottom: 1px dashed $color-gray-light;
margin: ($gap * 4) ($site-margins*-4);
margin: ($gap * 4) ($site-margins * -4);
}
}
.panel__actions {
@include panel-actions;
}

24
styles/elements/_sidenav.scss
View File

@@ -14,12 +14,14 @@
@include media($large-screen) {
margin: 0px;
}
width: 25rem;
width: 25rem;
box-shadow: $box-shadow;
.sidenav__title {
@include sidenav__header;
font-size: $h3-font-size;
text-transform: uppercase;
width: 50%;
@@ -29,6 +31,7 @@
.sidenav__toggle {
@include sidenav__header;
font-size: $small-font-size;
line-height: 2.8rem;
float: right;
@@ -41,7 +44,7 @@
ul {
&.sidenav__list--padded {
margin: 4 * $gap 0;
margin: (4 * $gap) 0;
}
list-style: none;
@@ -51,7 +54,6 @@
margin: 0;
display: block;
}
}
.sidenav__divider--small {
@@ -78,7 +80,7 @@
text-overflow: ellipsis;
.sidenav__link-icon {
margin-left: - ($gap * .5);
margin-left: -($gap * 0.5);
}
&.sidenav__link--disabled {
@@ -89,15 +91,16 @@
&.sidenav__link--add {
color: $color-blue;
font-size: $small-font-size;
.icon {
@include icon-color($color-blue);
@include icon-size(14);
}
}
&.sidenav__link--active {
@include h4;
color: $color-primary;
background-color: $color-aqua-lightest;
box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
@@ -107,8 +110,10 @@
}
position: relative;
.sidenav__link-active_indicator .icon {
@include icon-color($color-primary);
position: absolute;
right: 0;
}
@@ -126,6 +131,7 @@
&--active {
@include h5;
color: $color-white;
background-color: $color-primary;
box-shadow: none;
@@ -139,20 +145,21 @@
}
+ ul {
li {
.sidenav__link {
@include h5;
padding: $gap * .75;
padding: $gap * 0.75;
padding-left: 4.5rem;
border: 0;
font-weight: normal;
.sidenav__link-icon {
@include icon-size(12);
flex-shrink: 0;
margin-right: 1.5rem;
margin-left: -3rem
margin-left: -3rem;
}
.sidenav__link-label {
@@ -169,7 +176,6 @@
.sidenav__link-icon {
@include icon-style-active;
}
}
}
}

10
styles/elements/_tables.scss
View File

@@ -6,12 +6,14 @@
table {
@include panel-margin;
min-width: 100%;
@include ie-only {
border-collapse: separate;
}
th, td {
&.table-cell--align-right {
text-align: right;
@@ -44,6 +46,7 @@ table {
position: inherit;
margin-right: -16px;
width: 16px;
.icon {
height: 14px;
width: 16px;
@@ -58,6 +61,7 @@ table {
th,
td {
@include block-list-item;
display: table-cell;
white-space: nowrap;
border-bottom-style: dashed;
@@ -81,6 +85,7 @@ table {
tr {
th, td {
@include block-list-header;
display: table-cell;
white-space: nowrap;
}
@@ -100,11 +105,13 @@ table {
.responsive-table-wrapper {
overflow-x: auto;
@include panel-margin;
.responsive-table-wrapper__header {
@include panel-base;
@include panel-theme-default;
border-top: none;
border-bottom: 0;
display: flex;
@@ -116,6 +123,7 @@ table {
.responsive-table-wrapper__title {
@include h4;
font-size: $lead-font-size;
flex: 2;
}
@@ -141,7 +149,7 @@ table {
table {
max-width: 100%;
table-layout:fixed;
table-layout: fixed;
th, td {
white-space: normal;

11
styles/elements/_tooltip.scss
View File

@@ -2,7 +2,7 @@
display: block;
z-index: 10000;
max-width: $text-max-width;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
.tooltip-inner {
background-color: $color-aqua-lightest;
@@ -16,7 +16,7 @@
position: absolute;
background-color: $color-aqua-lightest;
z-index: 1;
box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
}
&[x-placement^="top"] {
@@ -26,7 +26,7 @@
bottom: -5px;
left: calc(50% - 5px);
transform: rotate(-45deg);
box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
}
}
@@ -37,7 +37,7 @@
top: -5px;
left: calc(50% - 5px);
transform: rotate(135deg);
box-shadow: -2px 2px 2px -2px rgba(0,0,0,0.25);
box-shadow: -2px 2px 2px -2px rgba(0, 0, 0, 0.25);
}
}
@@ -68,7 +68,7 @@
background: $color;
color: black;
padding: 24px;
box-shadow: 0 5px 30px rgba(black, .1);
box-shadow: 0 5px 30px rgba(black, 0.1);
}
.popover-arrow {
@@ -89,7 +89,6 @@
}
}
.icon-tooltip {
@include icon-link;

40
styles/elements/_typography.scss
View File

@@ -4,13 +4,14 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
*/
* {
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p {
margin: 0 0 ($gap * 2) 0;
@include line-max;
&.centered {
@@ -31,23 +32,35 @@ h1, h2, h3, h4, h5, h6 {
+ .subtitle, * {
margin-top: 0;
}
}
.h1 { @include h1; }
.h2 { @include h2; }
.h3 { @include h3; }
.h4 { @include h4; }
.h5 { @include h5; }
.h6 { @include h6; }
.h1 {
@include h1;
}
.h2 {
@include h2;
}
.h3 {
@include h3;
}
.h4 {
@include h4;
}
.h5 {
@include h5;
}
.h6 {
@include h6;
}
a,
a:hover {
transition:
background 0.2s,
border 0.2s,
box-shadow 0.2s,
color 0.2s;
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
}
a:visited {
@@ -59,6 +72,7 @@ dl {
display: inline;
font-weight: bold;
}
dd {
-webkit-margin-start: 0;
margin-inline-start: 0;