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

Merge branch 'master' into ui-progress-bar

Browse Source
This commit is contained in:
luisgov
2018-07-20 14:49:34 -04:00
committed by GitHub
parent b1b6322197 ef1f2224e9
commit f020115a51
37 changed files with 625 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
scss/atat.scss
View File

@@ -1,7 +1,6 @@
@import 'core/variables';
@import '../node_modules/uswds/src/stylesheets/uswds';
@import 'core/base';
@import 'core/grid';
@import 'core/util';
@@ -12,7 +11,11 @@
@import 'elements/block_lists';
@import 'elements/tables';
@import 'elements/icons';
@import 'elements/sidenav';
@import 'components/layout';
@import 'components/topbar';
@import 'components/global_navigation';
@import 'components/site_action';
@import 'components/empty_state';

30
scss/components/_global_navigation.scss Normal file
View File

@@ -0,0 +1,30 @@
.global-navigation {
background-color: $color-white;
.sidenav__link {
padding-right: $gap;
@include media($medium-screen) {
padding-right: $gap * 2;
}
}
.sidenav__link-label {
@include hide;
@include media($medium-screen) {
@include unhide;
padding-left: $gap;
}
}
&.global-navigation__context--workspace {
.sidenav__link {
padding-right: $gap;
}
.sidenav__link-label {
@include hide;
}
}
}

31
scss/components/_layout.scss Normal file
View File

@@ -0,0 +1,31 @@
body {
background-color: $color-gray-lightest;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 100vh;
> footer {
margin-top: auto;
}
}
.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: auto;
@include media($medium-screen) {
margin: $gap * 2;
}
}
}

71
scss/components/_topbar.scss Normal file
View 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;
}
}
}
}
}
}

16
scss/core/_base.scss
View File

@@ -1,16 +0,0 @@
/*
* Base Styles
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_base.scss
*/
body {
background-color: $color-gray-lightest;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 100vh;
> footer {
margin-top: auto;
}
}

9
scss/core/_grid.scss
View File

@@ -9,12 +9,9 @@
// We are implementing a simple flexbox row/column system
@mixin grid-row {
@include media($medium-screen) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: $site-max-width;
}
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
@mixin grid-pad {

22
scss/core/_util.scss
View File

@@ -1,3 +1,25 @@
.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;
}
@mixin unhide {
border: unset;
clip: unset;
height: unset;
margin: unset;
overflow: unset;
padding: unset;
position: unset;
width: unset;
}

8
scss/core/_variables.scss
View File

@@ -3,9 +3,11 @@
* ===================================================
*/
$gap: .8rem; // 8px at 10px $em-base
$topbar-height: 4.8rem;
$icon-size-small: 2.4rem;
$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;
/*
* USWDS Variables

24
scss/elements/_icons.scss
View File

@@ -1,17 +1,19 @@
@mixin icon {
display: inline-block;
vertical-align: bottom;
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: $icon-size;
height: auto;
margin: $icon-size / 4;
}
@@ -21,8 +23,24 @@
}
}
@mixin icon-style-active {
> svg * {
fill: $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);
}
}

33
scss/elements/_panels.scss
View File

@@ -44,36 +44,3 @@
}
}
}
/*
* Panel Container
* Grid container for panel blocks
*/
.panel-container {
@include grid-row;
@include grid-pad;
@include margin(($site-margins-mobile * 2) null);
@include media($medium-screen) {
@include margin(($site-margins * 2) null);
}
@include media($large-screen) {
flex-wrap: nowrap;
}
> .col {
@include grid-pad;
}
h1 {
margin-bottom: 0;
}
h2 {
color: $color-gray;
}
}

68
scss/sections/_sidenav.scss → scss/elements/_sidenav.scss
View File

@@ -1,15 +1,13 @@
.sidenav {
@include grid-pad;
@include panel-margin;
width: 100%;
flex-shrink: 0;
ul {
list-style: none;
margin: 0;
padding: 0;
@include media($large-screen) {
width: 21rem;
}
@include media($xlarge-screen) {
width: 30rem;
li {
margin: 0;
display: block;
}
}
.sidenav__link {
@@ -18,10 +16,10 @@
padding: $gap ($gap * 2);
color: $color-black;
text-decoration: none;
white-space: nowrap;
&:hover {
background-color: $color-white;
color: $color-primary;
.sidenav__link-icon {
margin-left: - ($gap * .5);
}
&.sidenav__link--disabled {
@@ -35,60 +33,42 @@
color: $color-primary;
box-shadow: inset .4rem 0 0 0 $color-primary;
.sidenav__link-icon {
@include icon-style-active;
}
+ ul {
background-color: $color-white;
.sidenav__link {
&--active {
@include h5;
box-shadow: none;
color: $color-primary;
}
}
}
}
+ ul {
padding-bottom: $gap / 2;
li {
.sidenav__link {
@include h5;
padding: ($gap * .75) ($gap * 3);
border: 0;
@include h5;
font-weight: normal;
}
&:last-child {
.sidenav__link {
padding-bottom: $gap * 1.5;
}
}
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
&:hover {
color: $color-primary;
li {
margin: 0;
display: block;
}
}
> ul {
@include panel-margin;
&:last-child {
margin: 0;
}
> li {
&:last-child {
> .sidenav__link {
border-bottom: 1px solid $color-black;
}
.sidenav__link-icon {
@include icon-style-active;
}
}
}
}

13
scss/elements/_typography.scss
View File

@@ -4,7 +4,12 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
*/
h1, h2, h3, h4, h5, h6 {
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: $font-sans;
.usa-button {
@@ -24,12 +29,12 @@ h2 {
}
a,
a > span {
a:hover {
transition:
background 0.2s,
border 0.2s,
box-shadow 0.2s,
color 0.2s,
color 0.2s;
}
a:visited {
@@ -39,4 +44,4 @@ a:visited {
dt {
display: inline;
font-weight: bold;
}
}

3
scss/sections/_main.scss
View File

@@ -1,3 +0,0 @@
section {
margin-bottom: 10rem;
}

54
scss/sections/_topbar.scss
View File

@@ -1,54 +0,0 @@
.topbar {
background-color: $color-white;
height: $topbar-height;
border-bottom: 1px solid $color-black;
.topbar__navigation {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-end;
> .topbar__link {
@include h5;
color: $color-primary;
display: inline-block;
height: $topbar-height;
line-height: $topbar-height;
padding: 0 ($gap * 2);
text-decoration: none;
> span {
display: inline-block;
height: $topbar-height;
line-height: $topbar-height;
}
&.topbar__link--primary {
margin-right: auto;
> span {
@include nav-border;
}
&:hover {
color: $color-white;
background-color: $color-primary-darkest;
}
}
&.topbar__link--secondary {
font-weight: normal;
> span {
@include nav-border;
border-bottom-width: 0;
}
&:hover {
> span {
@include nav-border;
}
}
}
}
}
}