From 37c50be5598da86878b8782bf568196bc148969e Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 16 Jul 2018 12:31:20 -0400 Subject: [PATCH 1/8] fixes to panel styles --- scss/elements/_block_lists.scss | 49 +++++++++++++++++++++++++++++++++ scss/elements/_panels.scss | 13 +++++++-- 2 files changed, 59 insertions(+), 3 deletions(-) create mode 100644 scss/elements/_block_lists.scss diff --git a/scss/elements/_block_lists.scss b/scss/elements/_block_lists.scss new file mode 100644 index 00000000..8799b3c8 --- /dev/null +++ b/scss/elements/_block_lists.scss @@ -0,0 +1,49 @@ +@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; +} + +@mixin block-list__title { + @include h4; + margin: 0; +} + +@mixin block-list-item { + @include panel-base; + margin: 0; + padding: $gap * 2; + border-top: 0; + border-bottom: 1px dashed $color-gray-light; + + &li:last-child { + border-bottom-style: solid; + } +} + + +.block-list { + @include block-list; +} + +.block-list__header { + @include block-list-header; +} + +.block-list__title { + @include block-list__title; +} + +.block-list__item { + @include block-list-item; +} diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss index ce50b515..5a8cbb3a 100644 --- a/scss/elements/_panels.scss +++ b/scss/elements/_panels.scss @@ -9,6 +9,8 @@ border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; + border-left: 0; + border-right: 0; } @mixin panel-theme-default { @@ -29,9 +31,14 @@ @include panel-theme-default; @include panel-margin; - &__content { - padding-left: $gap*4; - padding-right: $gap*4; + .panel__content { + margin: ($gap * 2) 0; + padding: 0 ($gap * 2); + + @include media($medium-screen) { + margin: ($gap * 4) 0; + padding: 0 ($gap * 4); + } } } From c1f0aa7d816c2031b5858ad25436db7831d69428 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 16 Jul 2018 12:31:37 -0400 Subject: [PATCH 2/8] table and list styles --- scss/elements/_tables.scss | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/scss/elements/_tables.scss b/scss/elements/_tables.scss index 243aefea..6fc3cd51 100644 --- a/scss/elements/_tables.scss +++ b/scss/elements/_tables.scss @@ -3,3 +3,28 @@ * @see https://designsystem.digital.gov/components/tables/ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss */ + +table { + @include panel-margin; + margin-top: 0; + + tr { + th { + @include block-list-header; + } + + td { + @include block-list-item; + } + + &:last-child { + td { + border-bottom-style: solid; + } + } + + .align-right { + text-align: right; + } + } +} From f2537001d861ab40f588204cc0086d9e3fbacea0 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 16 Jul 2018 12:31:48 -0400 Subject: [PATCH 3/8] imports --- scss/atat.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/atat.scss b/scss/atat.scss index d95957ea..8f73326c 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -7,8 +7,9 @@ @import 'elements/typography'; @import 'elements/inputs'; @import 'elements/buttons'; -@import 'elements/tables'; @import 'elements/panels'; +@import 'elements/block_lists'; +@import 'elements/tables'; @import 'components/site_action'; @import 'components/empty_state'; From 8609dbc81895959882321101a35d5e94fc903208 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 16 Jul 2018 12:32:00 -0400 Subject: [PATCH 4/8] Add example lists and tables to styleguide --- templates/styleguide.html.to | 57 ++++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index f5be0acb..aec9edca 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -24,7 +24,7 @@ {% end %} {% block content %} -
+

This is a panel

@@ -33,16 +33,6 @@
- -
-

Panel Heading H1

-

Panel Heading H2

-

Panel Heading H3

-

Panel Heading H4

-
Panel Heading H5
-
Panel Heading H6
-
- This is a panel content

Heading H1

Heading H2

@@ -57,7 +47,7 @@
col 1
col 2
col 3
-
col 4
+
col 4
@@ -80,5 +70,48 @@
Another panel without padding
+ +
+
+

A Block List

+
+
    +
  • Block List Item
    • +
  • Block List Item
    • +
  • Block List Item
    • +
  • Block List Item
    • +
  • Block List Item
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table HeadingTable HeadingTable Heading
Table Cell1,234.56Table Cell
Table Cell1,231,253.43Table Cell
Table Cell564.54Table Cell
{% end %} From 3f51b6b840bd186f49cb67240e4da4d21f923e26 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 17 Jul 2018 08:45:14 -0400 Subject: [PATCH 5/8] Apply solid bottom border only to li elements --- scss/elements/_block_lists.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/scss/elements/_block_lists.scss b/scss/elements/_block_lists.scss index 8799b3c8..dc5062af 100644 --- a/scss/elements/_block_lists.scss +++ b/scss/elements/_block_lists.scss @@ -26,8 +26,10 @@ border-top: 0; border-bottom: 1px dashed $color-gray-light; - &li:last-child { - border-bottom-style: solid; + @at-root li#{&} { + &:last-child { + border-bottom-style: solid; + } } } From 8e185d1b12de9fb6f8e5c3ed65b82eff68e10ead Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 17 Jul 2018 08:45:33 -0400 Subject: [PATCH 6/8] panel-margin only has bottom margin --- scss/elements/_panels.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss index 5a8cbb3a..a2f047ef 100644 --- a/scss/elements/_panels.scss +++ b/scss/elements/_panels.scss @@ -19,6 +19,9 @@ } @mixin panel-margin { + margin-top: 0; + margin-left: 0; + margin-right: 0; margin-bottom: $site-margins-mobile * 2; @include media($medium-screen) { From beb9fd3074a44b6c8570265162481663939c03bf Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 17 Jul 2018 08:46:00 -0400 Subject: [PATCH 7/8] Some table cell variants --- scss/elements/_tables.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/scss/elements/_tables.scss b/scss/elements/_tables.scss index 6fc3cd51..678770d6 100644 --- a/scss/elements/_tables.scss +++ b/scss/elements/_tables.scss @@ -6,9 +6,14 @@ table { @include panel-margin; - margin-top: 0; + min-width: 100%; tr { + th, + td { + white-space: nowrap; + } + th { @include block-list-header; } @@ -23,8 +28,16 @@ table { } } - .align-right { + .table-cell--align-right { text-align: right; } + + .table-cell--shrink { + width: 1%; + } + + .table-cell--expand { + width: 100%; + } } } From c5c6f3b00d8db3a79d67b01318ae27feb4d54e06 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 17 Jul 2018 08:46:15 -0400 Subject: [PATCH 8/8] Add some more table cell examples --- templates/styleguide.html.to | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index aec9edca..4439a21d 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -84,32 +84,36 @@ - +
- - - + + + + + - - + + + - - + + + - - + +
Table HeadingTable HeadingTable HeadingExpanded ColumnNormal ColumnRight AlignedShrunk
Table Cell Table Cell1,234.56Table Cell1,234.56Table Cell
Table Cell Table Cell1,231,253.43Table Cell1,231,253.43Table Cell
Table Cell Table Cell564.54Table Cell564.54Table Cell