move styles and js to the root directory
This commit is contained in:
Andrew Croce
parent
6d884f9e5b
commit
bf3054908c
6
js/index.js
Normal file
6
js/index.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import classes from '../styles/atat.scss'
|
||||||
|
|
||||||
|
import './thing'
|
||||||
|
|
||||||
|
console.log('hellooooo')
|
||||||
|
|
||||||
7
js/thing.js
Normal file
7
js/thing.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
console.log('hanlo again')
|
||||||
|
window.onload = function() {
|
||||||
|
console.log('boop')
|
||||||
|
const thing = document.querySelector('#hello')
|
||||||
|
thing.innerHTML = 'hanlo friendo'
|
||||||
|
}
|
||||||
|
|
||||||
@ -4,8 +4,8 @@
|
|||||||
"description": "ATST Stateless Services",
|
"description": "ATST Stateless Services",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"watch": "parcel watch static/js/index.js -d static/assets -o index.js --no-autoinstall",
|
"watch": "parcel watch js/index.js -d static/assets -o index.js --no-autoinstall",
|
||||||
"build": "parcel build static/js/index.js -d static/assets -o index.js",
|
"build": "parcel build js/index.js -d static/assets -o index.js",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
|
|||||||
82
styles/README.md
Normal file
82
styles/README.md
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
# Styling AT-ST
|
||||||
|
|
||||||
|
AT-ST's user interface components are based on the (U.S. Web Design System)[https://designsystem.digital.gov/components/]. Please refer there when deciding how to implement a UI feature.
|
||||||
|
|
||||||
|
## CSS Architecture
|
||||||
|
### (Copied from https://github.com/uswds/uswds#css-architecture)
|
||||||
|
## CSS architecture
|
||||||
|
|
||||||
|
* The CSS foundation of this site is built with the **[Sass](https://sass-lang.com)** preprocessor language.
|
||||||
|
* Uses **[Bourbon](http://bourbon.io/)** for its simple and lightweight Sass mixin library, and the **[Neat](http://neat.bourbon.io/)** library for the grid framework. Bourbon and Neat are open-source products from **[thoughtbot](https://thoughtbot.com/)**.
|
||||||
|
* The CSS organization and naming conventions follow **[18F’s CSS Front End Guide](https://frontend.18f.gov/css/)**.
|
||||||
|
* CSS selectors are **prefixed** with `usa` (For example: `.usa-button`). This identifier helps the design system avoid conflicts with other styles on a site which are not part of the U.S. Web Design System.
|
||||||
|
* Uses a **[modified BEM](https://frontend.18f.gov/css/naming/)** approach created by 18F for naming CSS selectors. Objects in CSS are separated by single dashes. Multi-word objects are separated by an underscore (For example: `.usa-button-cool_feature-active`).
|
||||||
|
* Uses **modular CSS** for scalable, modular, and flexible code.
|
||||||
|
* Uses **nesting** when appropriate. Nest minimally with up to two levels of nesting.
|
||||||
|
* Hard-coded magic numbers are avoided and, if necessary, defined in the `core/variables` scss file.
|
||||||
|
* Media queries are built **mobile first**.
|
||||||
|
* **Spacing units** are as much as possible defined as rem or em units so they scale appropriately with text size. Pixels can be used for detail work and should not exceed 5px (For example: 3px borders).
|
||||||
|
|
||||||
|
**For more information, visit:**
|
||||||
|
[18F’s CSS Front End Guide](https://frontend.18f.gov/css/)
|
||||||
|
|
||||||
|
Overrides and Modifications
|
||||||
|
---
|
||||||
|
|
||||||
|
When making modifications to the default USWDS components, please refer to the original source, and make a `.scss` file of the same name. Annotate the top of the file with a reference to the USWDS documentation and source code.
|
||||||
|
|
||||||
|
Row/Column System
|
||||||
|
---
|
||||||
|
|
||||||
|
A simple, flexbox-powered row/column system.
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col'></div>
|
||||||
|
<div class='col'></div>
|
||||||
|
<div class='col'></div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
To make a column expand to fill up all available space relative to its sibling columns:
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col col--grow'></div>
|
||||||
|
<div class='col'></div>
|
||||||
|
<div class='col'></div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
To add uniform padding to rows and columns:
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class='row row--pad'>
|
||||||
|
<div class='col col--pad'></div>
|
||||||
|
<div class='col col--pad'></div>
|
||||||
|
<div class='col col--pad'></div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Layouts and behaviors for specific row/col use cases should be handled on a case by case basis:
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class='row row--pad foo'>
|
||||||
|
<div class='col col--pad foo__bar'></div>
|
||||||
|
<div class='col col--pad'></div>
|
||||||
|
<div class='col col--pad'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
...
|
||||||
|
|
||||||
|
.foo.row {
|
||||||
|
.col {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.foo__bar {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Page templates that inherit from the `base.html` template should render `.col` elements at their top level, with no other wrapping elements.
|
||||||
36
styles/atat.scss
Normal file
36
styles/atat.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
@import 'core/variables';
|
||||||
|
@import 'node_modules/uswds/src/stylesheets/uswds';
|
||||||
|
|
||||||
|
@import 'core/grid';
|
||||||
|
@import 'core/util';
|
||||||
|
|
||||||
|
@import 'elements/typography';
|
||||||
|
@import 'elements/icons';
|
||||||
|
@import 'elements/icon_link';
|
||||||
|
@import 'elements/inputs';
|
||||||
|
@import 'elements/buttons';
|
||||||
|
@import 'elements/panels';
|
||||||
|
@import 'elements/block_lists';
|
||||||
|
@import 'elements/tables';
|
||||||
|
@import 'elements/sidenav';
|
||||||
|
@import 'elements/action_group';
|
||||||
|
@import 'elements/labels';
|
||||||
|
@import 'elements/diff';
|
||||||
|
|
||||||
|
@import 'components/topbar';
|
||||||
|
@import 'components/global_layout';
|
||||||
|
@import 'components/global_navigation';
|
||||||
|
@import 'components/workspace_layout';
|
||||||
|
@import 'components/site_action';
|
||||||
|
@import 'components/empty_state';
|
||||||
|
@import 'components/alerts';
|
||||||
|
@import 'components/modal';
|
||||||
|
@import 'components/footer';
|
||||||
|
@import 'components/progress_menu.scss';
|
||||||
|
@import 'components/search_bar';
|
||||||
|
|
||||||
|
@import 'sections/login';
|
||||||
|
@import 'sections/request_approval';
|
||||||
|
@import 'sections/projects_list';
|
||||||
|
@import 'sections/project_edit';
|
||||||
|
@import 'sections/member_edit';
|
||||||
76
styles/components/_alerts.scss
Normal file
76
styles/components/_alerts.scss
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
/*
|
||||||
|
* Alerts
|
||||||
|
* @see https://designsystem.digital.gov/components/alerts/
|
||||||
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin alert {
|
||||||
|
padding: $gap * 2;
|
||||||
|
border-left-width: $gap / 2;
|
||||||
|
border-left-style: solid;
|
||||||
|
@include panel-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin alert-level($level) {
|
||||||
|
$background-color: $color-aqua-lightest;
|
||||||
|
$border-color: $color-blue;
|
||||||
|
|
||||||
|
@if $level == 'success' {
|
||||||
|
$background-color: $color-green-lightest;
|
||||||
|
$border-color: $color-green;
|
||||||
|
|
||||||
|
} @else if $level == 'warning' {
|
||||||
|
$background-color: $color-gold-lightest;
|
||||||
|
$border-color: $color-gold;
|
||||||
|
|
||||||
|
} @else if $level == 'error' {
|
||||||
|
$background-color: $color-red-lightest;
|
||||||
|
$border-color: $color-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $background-color;
|
||||||
|
border-color: $border-color;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.alert__icon {
|
||||||
|
@include icon-color($border-color);
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: $gap * 2;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert__title {
|
||||||
|
@include h3;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert__content {
|
||||||
|
.alert__message {
|
||||||
|
&:last-child {
|
||||||
|
> *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
@include alert;
|
||||||
|
@include alert-level('info');
|
||||||
|
|
||||||
|
&.alert--success {
|
||||||
|
@include alert-level('success');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert--warning {
|
||||||
|
@include alert-level('warning');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert--error {
|
||||||
|
@include alert-level('error');
|
||||||
|
}
|
||||||
|
}
|
||||||
27
styles/components/_empty_state.scss
Normal file
27
styles/components/_empty_state.scss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 6rem ($gap * 2) 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
padding: 8rem ($gap * 4) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@include icon-size(50);
|
||||||
|
@include icon-color($color-gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@include h2;
|
||||||
|
line-height: 1.2;
|
||||||
|
max-width: 15em;
|
||||||
|
color: $color-gray;
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
@include h1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
6
styles/components/_footer.scss
Normal file
6
styles/components/_footer.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.app-footer {
|
||||||
|
background-color: $color-gray-lightest;
|
||||||
|
border-top: 1px solid $color-gray-lighter;
|
||||||
|
padding-left: $gap*4;
|
||||||
|
padding-bottom: $gap*2;
|
||||||
|
}
|
||||||
36
styles/components/_global_layout.scss
Normal file
36
styles/components/_global_layout.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
body {
|
||||||
|
background-color: $color-gray-lightest;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
> footer {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.modalOpen {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-layout {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.global-navigation {
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-panel-container {
|
||||||
|
margin: $gap;
|
||||||
|
max-width: $site-max-width;
|
||||||
|
overflow-x: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin: $gap * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
styles/components/_global_navigation.scss
Normal file
30
styles/components/_global_navigation.scss
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
.global-navigation {
|
||||||
|
background-color: $color-white;
|
||||||
|
|
||||||
|
.sidenav__link {
|
||||||
|
padding-right: $gap;
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
padding-right: $gap * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav__link-label {
|
||||||
|
@include hide;
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
@include unhide;
|
||||||
|
padding-left: $gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.global-navigation__context--workspace {
|
||||||
|
.sidenav__link {
|
||||||
|
padding-right: $gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav__link-label {
|
||||||
|
@include hide;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
47
styles/components/_modal.scss
Normal file
47
styles/components/_modal.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 3;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: $color-overlay;
|
||||||
|
|
||||||
|
.modal__dialog {
|
||||||
|
padding: $gap;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
padding: $gap * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
padding: $gap * 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal__body {
|
||||||
|
background-color: $color-white;
|
||||||
|
padding: $gap * 2;
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-width: 80rem;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
padding: $gap * 4;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
@include h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
103
styles/components/_progress_menu.scss
Normal file
103
styles/components/_progress_menu.scss
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
.progress-menu {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--three {
|
||||||
|
.progress-menu__item {
|
||||||
|
width: 32%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--four {
|
||||||
|
.progress-menu__item {
|
||||||
|
width: 24%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--five {
|
||||||
|
.progress-menu__item {
|
||||||
|
width: 19%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding: ($gap * 4) ($gap * 2);
|
||||||
|
margin: 0 ($gap * 2);
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.active {
|
||||||
|
color: $color-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&:first-child:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
display: inline-block;
|
||||||
|
height: 1px;
|
||||||
|
content: " ";
|
||||||
|
color: $color-gray-lightest;
|
||||||
|
text-shadow: none;
|
||||||
|
background-color: $color-gray-light;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.1rem;
|
||||||
|
width: 100%;
|
||||||
|
right: 50%;
|
||||||
|
border-right: 2.2rem solid transparent;
|
||||||
|
border-left: 2.2rem solid transparent;
|
||||||
|
background-clip: padding-box;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
border: 1px solid $color-gray;
|
||||||
|
border-radius: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active:before {
|
||||||
|
border: 2px solid $color-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--complete:before {
|
||||||
|
content: url('#{$asset-path}/icons/checkmark.svg');
|
||||||
|
background-color: $color-blue;
|
||||||
|
border: 2px solid $color-blue;
|
||||||
|
font-size: $h6-font-size;
|
||||||
|
padding: 1px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--incomplete:before {
|
||||||
|
border: 2px solid $color-gray-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
72
styles/components/_search_bar.scss
Normal file
72
styles/components/_search_bar.scss
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
.search-bar {
|
||||||
|
@include grid-row;
|
||||||
|
@include panel-base;
|
||||||
|
@include panel-theme-default;
|
||||||
|
@include panel-margin;
|
||||||
|
padding: $gap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.usa-input {
|
||||||
|
margin: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 100%;
|
||||||
|
height: $search-input-height;
|
||||||
|
position: relative;
|
||||||
|
margin-top: $gap;
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-basis: auto;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: $gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
@include hide;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
@include media($medium-screen) {
|
||||||
|
flex-basis: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:800px) and (max-width:900px) {
|
||||||
|
flex-basis: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='search'] {
|
||||||
|
width: auto;
|
||||||
|
height: $search-input-height;
|
||||||
|
width: calc(100% - #{$search-button-width});
|
||||||
|
max-width: none;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: $search-input-height;
|
||||||
|
width: $search-button-width;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: url('#{$asset-path}/icons/search.svg');
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.6rem;
|
||||||
|
height: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
15
styles/components/_site_action.scss
Normal file
15
styles/components/_site_action.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.site-action {
|
||||||
|
border-bottom: 1px solid $color-gray-lightest;
|
||||||
|
display: block;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
color: $color-primary !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
71
styles/components/_topbar.scss
Normal file
71
styles/components/_topbar.scss
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
.topbar {
|
||||||
|
background-color: $color-white;
|
||||||
|
border-bottom: 1px solid $color-black;
|
||||||
|
|
||||||
|
.topbar__navigation {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.topbar__link {
|
||||||
|
color: $color-black;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
height: $topbar-height;
|
||||||
|
padding: 0 ($gap * 2);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
.topbar__link-label {
|
||||||
|
@include h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__link-icon {
|
||||||
|
margin-left: $gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.topbar__link--shield {
|
||||||
|
width: $icon-bar-width;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.topbar__link-icon {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-primary-darker;
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
|
.topbar__link-icon {
|
||||||
|
@include icon-style-inverted;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__context {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&.topbar__context--workspace {
|
||||||
|
background-color: $color-primary;
|
||||||
|
|
||||||
|
.topbar__link {
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
|
.topbar__link-icon {
|
||||||
|
@include icon-style-inverted;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-primary-darker;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
26
styles/components/_workspace_layout.scss
Normal file
26
styles/components/_workspace_layout.scss
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
.workspace-panel-container {
|
||||||
|
@include media($large-screen) {
|
||||||
|
@include grid-row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace-navigation {
|
||||||
|
@include panel-margin;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
li {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
width: 20rem;
|
||||||
|
margin-right: $gap * 2;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
styles/core/_grid.scss
Normal file
45
styles/core/_grid.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
/*
|
||||||
|
* Grid
|
||||||
|
* @see https://designsystem.digital.gov/components/grids/
|
||||||
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_grid.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Roll our own simple grid system
|
||||||
|
// USWDS grid system is fairly outdated and does not serve the needs of this project
|
||||||
|
// We are implementing a simple flexbox row/column system
|
||||||
|
|
||||||
|
@mixin grid-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin grid-pad {
|
||||||
|
@include padding(null $site-margins-mobile);
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
@include padding(null $site-margins);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include grid-row;
|
||||||
|
|
||||||
|
&.row--pad {
|
||||||
|
@include grid-pad;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.row--max {
|
||||||
|
max-width: $site-max-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
&.col--pad {
|
||||||
|
@include grid-pad;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.col--grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
33
styles/core/_util.scss
Normal file
33
styles/core/_util.scss
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
.nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin hide {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
@include hide;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin unhide {
|
||||||
|
border: unset;
|
||||||
|
clip: unset;
|
||||||
|
height: unset;
|
||||||
|
margin: unset;
|
||||||
|
overflow: unset;
|
||||||
|
padding: unset;
|
||||||
|
position: unset;
|
||||||
|
width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin line-max {
|
||||||
|
max-width: 45em;
|
||||||
|
}
|
||||||
167
styles/core/_variables.scss
Normal file
167
styles/core/_variables.scss
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
/*
|
||||||
|
* AT-ST Variables
|
||||||
|
* ===================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$gap: 0.8rem; // 8px at 10px $em-base
|
||||||
|
$topbar-height: 4.8rem;
|
||||||
|
$icon-bar-width: 4.0rem;
|
||||||
|
$icon-size-small: 2.4rem;
|
||||||
|
$hover-transition-time: 0.2s;
|
||||||
|
$search-input-height: 4.4rem;
|
||||||
|
$search-button-width: 5.0rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* USWDS Variables
|
||||||
|
* @see https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_variables.scss
|
||||||
|
* ===================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
// $em-base: 10px; This is not defaulted in USWDS, so we cant override it
|
||||||
|
$base-font-size: 1.7rem;
|
||||||
|
$small-font-size: 1.4rem;
|
||||||
|
$lead-font-size: 2rem;
|
||||||
|
$title-font-size: 5.2rem;
|
||||||
|
$h1-font-size: 4rem;
|
||||||
|
$h2-font-size: 3rem;
|
||||||
|
$h3-font-size: 2rem;
|
||||||
|
$h4-font-size: 1.7rem;
|
||||||
|
$h5-font-size: 1.5rem;
|
||||||
|
$h6-font-size: 1.3rem;
|
||||||
|
$base-line-height: 1.5;
|
||||||
|
$heading-line-height: 1.3;
|
||||||
|
$lead-line-height: 1.7;
|
||||||
|
|
||||||
|
$font-sans: 'Source Sans Pro', sans-serif;
|
||||||
|
$font-serif: 'Merriweather', serif;
|
||||||
|
|
||||||
|
$font-normal: 400;
|
||||||
|
$font-bold: 700;
|
||||||
|
|
||||||
|
// Color
|
||||||
|
$color-blue: #0071bc;
|
||||||
|
$color-blue-darker: #205493;
|
||||||
|
$color-blue-darkest: #112e51;
|
||||||
|
|
||||||
|
$color-aqua: #02bfe7;
|
||||||
|
$color-aqua-dark: #00a6d2;
|
||||||
|
$color-aqua-darkest: #046b99;
|
||||||
|
$color-aqua-light: #9bdaf1;
|
||||||
|
$color-aqua-lightest: #e1f3f8;
|
||||||
|
|
||||||
|
$color-red: #e31c3d;
|
||||||
|
$color-red-dark: #cd2026;
|
||||||
|
$color-red-darkest: #981b1e;
|
||||||
|
$color-red-light: #e59393;
|
||||||
|
$color-red-lightest: #f9dede;
|
||||||
|
|
||||||
|
$color-white: #ffffff;
|
||||||
|
$color-black: #000000;
|
||||||
|
$color-black-light: #212121;
|
||||||
|
|
||||||
|
$color-gray-dark: #323a45;
|
||||||
|
$color-gray: #5b616b;
|
||||||
|
$color-gray-medium: #757575;
|
||||||
|
$color-gray-light: #aeb0b5;
|
||||||
|
$color-gray-lighter: #d6d7d9;
|
||||||
|
$color-gray-lightest: #f1f1f1;
|
||||||
|
|
||||||
|
$color-gray-warm-dark: #494440;
|
||||||
|
$color-gray-warm-light: #e4e2e0;
|
||||||
|
$color-gray-cool-light: #dce4ef;
|
||||||
|
|
||||||
|
$color-gold: #fdb81e;
|
||||||
|
$color-gold-light: #f9c642;
|
||||||
|
$color-gold-lighter: #fad980;
|
||||||
|
$color-gold-lightest: #fff1d2;
|
||||||
|
|
||||||
|
$color-green: #2e8540;
|
||||||
|
$color-green-light: #4aa564;
|
||||||
|
$color-green-lighter: #94bfa2;
|
||||||
|
$color-green-lightest: #e7f4e4;
|
||||||
|
|
||||||
|
$color-cool-blue: #205493;
|
||||||
|
$color-cool-blue-light: #4773aa;
|
||||||
|
$color-cool-blue-lighter: #8ba6ca;
|
||||||
|
$color-cool-blue-lightest: #dce4ef;
|
||||||
|
|
||||||
|
$color-purple: #4c2c92;
|
||||||
|
|
||||||
|
// Functional colors
|
||||||
|
$color-primary: $color-blue;
|
||||||
|
$color-primary-darker: $color-blue-darker;
|
||||||
|
$color-primary-darkest: $color-blue-darkest;
|
||||||
|
|
||||||
|
$color-primary-alt: $color-aqua;
|
||||||
|
$color-primary-alt-dark: $color-aqua-dark;
|
||||||
|
$color-primary-alt-darkest: $color-aqua-darkest;
|
||||||
|
$color-primary-alt-light: $color-aqua-light;
|
||||||
|
$color-primary-alt-lightest: $color-aqua-lightest;
|
||||||
|
|
||||||
|
$color-secondary: $color-red;
|
||||||
|
$color-secondary-dark: $color-red-dark;
|
||||||
|
$color-secondary-darkest: $color-red-darkest;
|
||||||
|
$color-secondary-light: $color-red-light;
|
||||||
|
$color-secondary-lightest: $color-red-lightest;
|
||||||
|
|
||||||
|
$color-base: $color-black-light;
|
||||||
|
$color-focus: $color-gray-light;
|
||||||
|
$color-visited: $color-purple;
|
||||||
|
|
||||||
|
$color-overlay: rgba(#000, 0.5);
|
||||||
|
$color-shadow: rgba(#000, 0.3);
|
||||||
|
$color-transparent: rgba(#000, 0);
|
||||||
|
|
||||||
|
// Mobile First Breakpoints
|
||||||
|
$small-screen: 481px;
|
||||||
|
$medium-screen: 600px;
|
||||||
|
$large-screen: 800px;
|
||||||
|
$xlarge-screen: 1200px;
|
||||||
|
|
||||||
|
// Grid column counts by screen size
|
||||||
|
$grid-columns-small: 1;
|
||||||
|
$grid-columns-medium: 6;
|
||||||
|
$grid-columns-large: 12;
|
||||||
|
|
||||||
|
// @media single-keyword helpers
|
||||||
|
// $small: new-breakpoint(min-width $small-screen $grid-columns-small);
|
||||||
|
// $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium);
|
||||||
|
// $large: new-breakpoint(min-width $large-screen $grid-columns-large);
|
||||||
|
|
||||||
|
// Set the base path for assets (used for font and image paths below)
|
||||||
|
$asset-path: '../static/';
|
||||||
|
|
||||||
|
// Relative font and image file paths
|
||||||
|
$font-path: '#{$asset-path}fonts';
|
||||||
|
$image-path: '#{$asset-path}img';
|
||||||
|
|
||||||
|
// Set $asset-pipeline to true if you're using the Rails Asset Pipeline
|
||||||
|
$asset-pipeline: false;
|
||||||
|
|
||||||
|
// Magic Numbers
|
||||||
|
$text-max-width: 66ch; // 66 characters per line
|
||||||
|
$lead-max-width: 77rem;
|
||||||
|
$site-max-width: 1200px; // previously 1040px;
|
||||||
|
$site-margins: $gap; // previously 3rem;
|
||||||
|
$site-margins-mobile: $gap / 2; // previously 1.5rem;
|
||||||
|
$article-max-width: 600px;
|
||||||
|
$input-max-width: 46rem;
|
||||||
|
$label-border-radius: 2px;
|
||||||
|
$checkbox-border-radius: 2px;
|
||||||
|
$border-radius: 3px;
|
||||||
|
$button-border-radius: 5px;
|
||||||
|
$box-shadow: 0 0 2px $color-shadow;
|
||||||
|
$focus-outline: 2px dotted $color-gray-light;
|
||||||
|
$focus-spacing: 3px;
|
||||||
|
$nav-width: 300px; // previously 951px;
|
||||||
|
$sidenav-current-border-width: 0.4rem; // must be in rem for math
|
||||||
|
|
||||||
|
// 44 x 44 pixels hit target following Apple iOS Human Interface
|
||||||
|
// Guidelines
|
||||||
|
$hit-area: 4.4rem;
|
||||||
|
|
||||||
|
$spacing-x-small: 0.5rem;
|
||||||
|
$spacing-small: 1rem;
|
||||||
|
$spacing-md-small: 1.5rem;
|
||||||
|
$spacing-medium: 2rem;
|
||||||
|
$spacing-large: 3rem;
|
||||||
19
styles/elements/_action_group.scss
Normal file
19
styles/elements/_action_group.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.action-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: $gap * 4;
|
||||||
|
|
||||||
|
.usa-button,
|
||||||
|
a {
|
||||||
|
margin: 0 0 0 ($gap * 2);
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin: 0 0 0 ($gap * 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: $gap * 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
90
styles/elements/_block_lists.scss
Normal file
90
styles/elements/_block_lists.scss
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
@mixin block-list {
|
||||||
|
@include panel-margin;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin block-list-header {
|
||||||
|
@include panel-base;
|
||||||
|
@include panel-theme-default;
|
||||||
|
padding: $gap * 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin block-list__title {
|
||||||
|
@include h4;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin block-list__footer {
|
||||||
|
@include panel-base;
|
||||||
|
@include panel-theme-default;
|
||||||
|
padding: $gap * 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.icon-link {
|
||||||
|
&:first-child {
|
||||||
|
margin-right: -$gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin block-list-item {
|
||||||
|
@include panel-base;
|
||||||
|
margin: 0;
|
||||||
|
padding: $gap * 2;
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 1px dashed $color-gray-light;
|
||||||
|
|
||||||
|
@at-root li#{&} {
|
||||||
|
&:last-child {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.block-list {
|
||||||
|
@include block-list;
|
||||||
|
|
||||||
|
.icon-link {
|
||||||
|
margin: -$gap 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-link,
|
||||||
|
.label {
|
||||||
|
&:first-child {
|
||||||
|
margin-left: -$gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: -$gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-list__header {
|
||||||
|
@include block-list-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-list__title {
|
||||||
|
@include block-list__title;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-list__item {
|
||||||
|
@include block-list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-list__footer {
|
||||||
|
@include block-list__footer;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
5
styles/elements/_buttons.scss
Normal file
5
styles/elements/_buttons.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/*
|
||||||
|
* Buttons
|
||||||
|
* @see https://designsystem.digital.gov/components/buttons/
|
||||||
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_buttons.scss
|
||||||
|
*/
|
||||||
36
styles/elements/_diff.scss
Normal file
36
styles/elements/_diff.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
[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;
|
||||||
|
}
|
||||||
|
}
|
||||||
66
styles/elements/_icon_link.scss
Normal file
66
styles/elements/_icon_link.scss
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
|
||||||
|
color: $color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $hover-color;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@include icon-color($color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-link {
|
||||||
|
@include icon-link-color($color-primary);
|
||||||
|
@include h5;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: $gap;
|
||||||
|
text-decoration: none;
|
||||||
|
background: none;
|
||||||
|
transition: background-color $hover-transition-time;
|
||||||
|
border-radius: $gap / 2;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@include icon-color($color-primary);
|
||||||
|
@include icon-size(12);
|
||||||
|
margin-right: $gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-link-large {
|
||||||
|
@include h4;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@include icon-size(16);
|
||||||
|
margin-right: $gap * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-link-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin: 0 $gap $gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-link {
|
||||||
|
@include icon-link;
|
||||||
|
@include icon-link-color($color-primary);
|
||||||
|
|
||||||
|
&.icon-link--vertical {
|
||||||
|
@include icon-link-vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-link--large {
|
||||||
|
@include icon-link-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-link--danger {
|
||||||
|
@include icon-link-color($color-red, $color-red-lightest);
|
||||||
|
}
|
||||||
|
}
|
||||||
52
styles/elements/_icons.scss
Normal file
52
styles/elements/_icons.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
@mixin icon {
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
* {
|
||||||
|
transition: fill $hover-transition-time;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-size($size) {
|
||||||
|
$icon-size: $size * .1rem;
|
||||||
|
width: $icon-size;
|
||||||
|
height: auto;
|
||||||
|
margin: $icon-size / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-color($color) {
|
||||||
|
> svg * {
|
||||||
|
fill: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-style-default {
|
||||||
|
@include icon-color($color-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-style-active {
|
||||||
|
@include icon-color($color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-style-inverted {
|
||||||
|
> svg * {
|
||||||
|
fill: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@include icon;
|
||||||
|
@include icon-size(16);
|
||||||
|
@include icon-style-default;
|
||||||
|
|
||||||
|
&.icon--tiny {
|
||||||
|
@include icon-size(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon--large {
|
||||||
|
@include icon-size(24);
|
||||||
|
}
|
||||||
|
}
|
||||||
241
styles/elements/_inputs.scss
Normal file
241
styles/elements/_inputs.scss
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
/*
|
||||||
|
* Inputs
|
||||||
|
* @see https://designsystem.digital.gov/components/form-controls/
|
||||||
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin input-icon {
|
||||||
|
width: 1.6rem;
|
||||||
|
height: 1.6rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin input-state($state) {
|
||||||
|
$border-width: 1px;
|
||||||
|
$state-color: $color-gray;
|
||||||
|
|
||||||
|
@if $state == 'error' {
|
||||||
|
$border-width: 2px;
|
||||||
|
$state-color: $color-red;
|
||||||
|
|
||||||
|
} @else if $state == 'warning' {
|
||||||
|
$border-width: 2px;
|
||||||
|
$state-color: $color-gold;
|
||||||
|
|
||||||
|
} @else if $state == 'success' {
|
||||||
|
$border-width: 2px;
|
||||||
|
$state-color: $color-green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@include icon-color($state-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-input__message {
|
||||||
|
color: $state-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
border-color: $state-color;
|
||||||
|
border-width: $border-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
input[type='radio'] {
|
||||||
|
+ label::before {
|
||||||
|
box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'] {
|
||||||
|
+ label::before {
|
||||||
|
box-shadow: 0 0 0 2px $color-red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-input {
|
||||||
|
margin: ($gap * 4) ($gap * 2) ($gap * 4) 0;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin: ($gap * 4) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 0 0 $gap 0;
|
||||||
|
margin: 0;
|
||||||
|
@include h4;
|
||||||
|
@include line-max;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.usa-input__help {
|
||||||
|
display: block;
|
||||||
|
@include h5;
|
||||||
|
font-weight: normal;
|
||||||
|
padding-top: $gap / 2;
|
||||||
|
@include line-max;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 100%;
|
||||||
|
top: 100%;
|
||||||
|
margin-top: 1.4rem;
|
||||||
|
margin-left: $gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
@include line-max;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-input__choices { // checkbox & radio sets
|
||||||
|
legend {
|
||||||
|
padding: 0 0 $gap 0;
|
||||||
|
@include h4;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
[type='radio'] + label,
|
||||||
|
[type='checkbox'] + label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-input__message {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.usa-input__choices--inline {
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: $gap * 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-input__message {
|
||||||
|
@include h5;
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: $gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.usa-input--error {
|
||||||
|
@include input-state('error');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.usa-input--warning {
|
||||||
|
@include input-state('warning');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.usa-input--success {
|
||||||
|
@include input-state('success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-date-input label {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-label {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-fieldset-inputs {
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
|
||||||
|
label:first-child {
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-search {
|
||||||
|
padding-top: 2px;
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
|
input[type=search] {
|
||||||
|
height: 4.4rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-height: 4.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Form Grid
|
||||||
|
.form-row {
|
||||||
|
margin: ($gap * 4) 0;
|
||||||
|
|
||||||
|
.form-col {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
&:first-child .usa-input {
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child .usa-input {
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
@include grid-row;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.form-col {
|
||||||
|
.usa-input {
|
||||||
|
margin-left: ($gap * 4);
|
||||||
|
margin-right: ($gap * 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
.usa-input {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.usa-input {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
34
styles/elements/_labels.scss
Normal file
34
styles/elements/_labels.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
/*
|
||||||
|
* Labels
|
||||||
|
* @see https://designsystem.digital.gov/components/labels/
|
||||||
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
.label {
|
||||||
|
@include h5;
|
||||||
|
display: inline-block;
|
||||||
|
height: 2.4rem;
|
||||||
|
line-height: 2.4rem;
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-gray;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0 $gap;
|
||||||
|
padding: 0 $gap;
|
||||||
|
border-radius: $gap / 2;
|
||||||
|
|
||||||
|
&.label--info {
|
||||||
|
background-color: $color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.label--warning {
|
||||||
|
background-color: $color-gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.label--error {
|
||||||
|
background-color: $color-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.label--success {
|
||||||
|
background-color: $color-green;
|
||||||
|
}
|
||||||
|
}
|
||||||
67
styles/elements/_panels.scss
Normal file
67
styles/elements/_panels.scss
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
/*
|
||||||
|
* Panels
|
||||||
|
* A generic block container
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin panel-base {
|
||||||
|
background-color: $color-white;
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin panel-theme-default {
|
||||||
|
border-top-color: $color-black;
|
||||||
|
border-bottom-color: $color-gray-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin panel-margin {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: $site-margins-mobile * 2;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin-bottom: $site-margins * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin panel-actions {
|
||||||
|
padding: $gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
@include panel-base;
|
||||||
|
@include panel-theme-default;
|
||||||
|
@include panel-margin;
|
||||||
|
|
||||||
|
.panel__content {
|
||||||
|
margin: ($gap * 2) 0;
|
||||||
|
padding: 0 ($gap * 2);
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin: ($gap * 4) 0;
|
||||||
|
padding: 0 ($gap * 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel__heading {
|
||||||
|
margin: $gap * 2;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin: $gap * 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel__actions {
|
||||||
|
@include panel-actions;
|
||||||
|
}
|
||||||
|
|
||||||
87
styles/elements/_sidenav.scss
Normal file
87
styles/elements/_sidenav.scss
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
.sidenav {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav__link {
|
||||||
|
display: block;
|
||||||
|
border-top: 1px solid $color-black;
|
||||||
|
padding: $gap ($gap * 2);
|
||||||
|
color: $color-black;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.sidenav__link-icon {
|
||||||
|
margin-left: - ($gap * .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sidenav__link--disabled {
|
||||||
|
color: $color-shadow;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sidenav__link--active {
|
||||||
|
@include h4;
|
||||||
|
background-color: $color-white;
|
||||||
|
color: $color-primary;
|
||||||
|
box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
|
||||||
|
|
||||||
|
.sidenav__link-icon {
|
||||||
|
@include icon-style-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
+ ul {
|
||||||
|
background-color: $color-white;
|
||||||
|
|
||||||
|
.sidenav__link {
|
||||||
|
&--active {
|
||||||
|
@include h5;
|
||||||
|
color: $color-primary;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
+ ul {
|
||||||
|
padding-bottom: $gap / 2;
|
||||||
|
|
||||||
|
li {
|
||||||
|
.sidenav__link {
|
||||||
|
@include h5;
|
||||||
|
padding: $gap * .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
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav__link-label {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-primary;
|
||||||
|
|
||||||
|
.sidenav__link-icon {
|
||||||
|
@include icon-style-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
92
styles/elements/_tables.scss
Normal file
92
styles/elements/_tables.scss
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
/*
|
||||||
|
* Tables
|
||||||
|
* @see https://designsystem.digital.gov/components/tables/
|
||||||
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
@include panel-margin;
|
||||||
|
min-width: 100%;
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
tr {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
@include block-list-item;
|
||||||
|
display: table-cell;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-bottom-style: dashed;
|
||||||
|
border-top: none;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom-style: dashed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell--align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell--shrink {
|
||||||
|
width: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell--expand {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell--hide-small {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
tr {
|
||||||
|
th {
|
||||||
|
@include block-list-header;
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .panel #{&} {
|
||||||
|
tr:last-child td {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.responsive-table-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
@include panel-margin;
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .panel #{&} {
|
||||||
|
tr:last-child td {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
59
styles/elements/_typography.scss
Normal file
59
styles/elements/_typography.scss
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
/*
|
||||||
|
* Typography
|
||||||
|
* @see https://designsystem.digital.gov/components/typography/
|
||||||
|
* @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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: $font-sans;
|
||||||
|
margin: ($gap * 2) 0;
|
||||||
|
|
||||||
|
+ .subtitle * {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: $color-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
dt {
|
||||||
|
display: inline;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
-webkit-margin-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
margin-bottom: $gap * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
styles/sections/_login.scss
Normal file
3
styles/sections/_login.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.login-area {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
41
styles/sections/_member_edit.scss
Normal file
41
styles/sections/_member_edit.scss
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
.member-card {
|
||||||
|
@include grid-row;
|
||||||
|
padding: $gap*2;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
dl {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
margin-bottom: $gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: normal;
|
||||||
|
color: $color-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card__header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card__heading {
|
||||||
|
margin: 0;
|
||||||
|
@include h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card__details {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.icon-link {
|
||||||
|
margin: 0 -$gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
19
styles/sections/_project_edit.scss
Normal file
19
styles/sections/_project_edit.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.project-edit__env-list-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.usa-input {
|
||||||
|
margin: 0 ($gap * 4) 0 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-edit__env-list-item__remover {
|
||||||
|
@include icon-link;
|
||||||
|
@include icon-link-vertical;
|
||||||
|
@include icon-link-color($color-red, $color-red-lightest);
|
||||||
|
|
||||||
|
margin-bottom: -$gap;
|
||||||
|
margin-right: -$gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
22
styles/sections/_projects_list.scss
Normal file
22
styles/sections/_projects_list.scss
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
.project-list-item {
|
||||||
|
.project-list-item__environment {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.project-list-item__environment__link {
|
||||||
|
@include icon-link;
|
||||||
|
@include icon-link-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-list-item__environment__members {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
@include h6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
97
styles/sections/_request_approval.scss
Normal file
97
styles/sections/_request_approval.scss
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
.request-approval {
|
||||||
|
.request-approval__heading {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.request-approval__info-columns {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex-basis: 100%;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
flex-basis: 50%;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-right: $gap * 2;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
padding-left: $gap * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.request-approval__columns__heading {
|
||||||
|
&:first-child {
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.approval-log {
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: $gap * 2;
|
||||||
|
border-top: 1px dashed $color-gray-light;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
padding: $gap * 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.approval-log__log-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.approval-log__log-item__header {
|
||||||
|
@include h4;
|
||||||
|
margin: 0 0 $gap 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.approval-log__log-item__timestamp {
|
||||||
|
@include h5;
|
||||||
|
margin-right: $gap * 2;
|
||||||
|
color: $color-gray;
|
||||||
|
flex-grow: 0;
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
margin-right: $gap * 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.approval-log__behalfs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.approval-log__behalf {
|
||||||
|
margin-right: $gap * 2;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin-right: $gap * 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user