Merge pull request #609 from fedspendingtransparency/staging

Sprint 55 Deploy | 01/10/18
fedspendingtransparency · Jan 10, 2018 · 5537a40 · 5537a40
2 parents 6e9ad10 + c84dfbb
commit 5537a40
Show file tree

Hide file tree

Showing 115 changed files with 2,741 additions and 894 deletions.
diff --git a/src/_scss/components/datePicker/_datePicker.scss b/src/_scss/components/datePicker/_datePicker.scss
@@ -108,8 +108,8 @@
     }
 }
 
-.set-date-button {
-    @include flex(1 1 auto);
+.set-date-submit {
+    @include flex(0 0 auto);
     height: rem(42);
     width: 100%;
     margin-left: 0;
@@ -122,14 +122,4 @@
         margin-bottom: rem(3);
         width: rem(15);
     }
-
-    @include display(flex);
-    @include align-items(center);
-    @include justify-content(center);
-    svg {
-        @include flex(0 0 auto);
-        width: rem(15);
-        height: rem(15);
-        fill: $color-white;
-    }
 }
diff --git a/src/_scss/layouts/default/footer/_downloadBottomBar.scss b/src/_scss/layouts/default/footer/_downloadBottomBar.scss
@@ -30,6 +30,33 @@
             p {
                 margin: 0;
                 font-size: $small-font-size;
+                display: inline-block;
+            }
+
+            button {
+                @include button-unstyled;
+                display: inline-block;
+                margin: rem(10) auto;
+                color: $color-primary;
+                font-weight: 600;
+                margin-left: rem(5);
+            }
+
+            .link {
+                background-color: $color-white;
+                border: solid 1px $color-gray-light;
+                padding: rem(5);
+            }
+
+            .icon {
+                height: rem(20);
+                display: inline-block;
+                width: rem(15);
+                svg {
+                    width: rem(25);
+                    height: rem(10);
+                    fill: $color-green;
+                }
             }
         }
 

diff --git a/src/_scss/layouts/tabbedSearch/header/_downloadButton.scss b/src/_scss/layouts/tabbedSearch/header/_downloadButton.scss
@@ -5,7 +5,6 @@
     .download-button {
         @include button-unstyled;
         padding: rem(8) rem(20);
-        border: 1px solid $color-white;
         cursor: pointer;
 
         @include display(flex);
@@ -15,19 +14,11 @@
         width: rem(155);
         height: rem(36);
 
-        @include transition(opacity 0.2s ease-in-out);
+        border: none;
+        background-color: $color-primary;
 
-        .icon {
-            @include flex(0 0 auto);
-            width: rem(18);
-            height: rem(18);
-            margin-right: rem(5);
-            svg {
-                fill: $color-white;
-                width: rem(18);
-                height: rem(18);
-            }
-        }
+
+        @include transition(opacity 0.2s ease-in-out);
 
         .label {
             @include flex(1 1 auto);
@@ -41,11 +32,14 @@
 
         &:hover, &:active {
             opacity: 1;
+            background-color: $color-primary-darker;
         }
 
         &[disabled], &.disabled {
             cursor: default;
             opacity: 0.4;
+            border: 1px solid $color-white;
+            background-color: transparent;
         }
     }
 }
diff --git a/src/_scss/layouts/tabbedSearch/header/header.scss b/src/_scss/layouts/tabbedSearch/header/header.scss
@@ -7,7 +7,7 @@ $search-header-height: rem(66);
 
 .search-header-container {
     width: 100%;
-    background-color: $color-primary;
+    background-color: #4A4A4A;
     color: $color-white;
     // bottom shadow cast on the content
     box-shadow: 0 2px 2px rgba(0,0,0,.3);

diff --git a/src/_scss/pages/bulkDownload/_archiveInfoBox.scss b/src/_scss/pages/bulkDownload/_archiveInfoBox.scss
@@ -1,5 +1,5 @@
 .archive-info-box {
-    display: none;
+    @include display(flex);
     background-color: $color-primary-alt-lightest;
     border: solid 1px $color-primary-alt-light;
     margin: rem(30) rem(20) rem(30) rem(30);

diff --git a/src/_scss/pages/modals/bulkDownload/bulkDownload.scss b/src/_scss/pages/modals/bulkDownload/bulkDownload.scss
@@ -1,6 +1,6 @@
 .search-section-extra-modal {
     // override the modal widths
-    width: 85%;
+    width: 68%;
 }
 
 .bulk-download-modal {
@@ -10,7 +10,7 @@
         background-color: $color-primary;
     }
     .download-body {
-        padding: rem(20) rem(60);
+        padding: rem(20) rem(60) rem(40);
         .download-status-screen {
             text-align: center;
             .link-box {
@@ -21,6 +21,7 @@
                 p {
                     margin-top: 0;
                     font-size: rem(14);
+                    font-weight: bold;
                 }
                 button {
                     @include button-unstyled;
@@ -29,24 +30,37 @@
                     color: $color-primary;
                     font-weight: 600;
                     text-transform: uppercase;
+                    padding: rem(10) rem(10) rem(5) rem(5);
                 }
+
                 .link {
                     background-color: $color-white;
                     border: solid 1px $color-gray-light;
                     padding: rem(5);
                 }
+
                 .icon {
-                    margin: auto;
+                    margin-right: rem(2.5);
                     width: rem(20);
                     height: rem(20);
+                    display: inline-block;
 
                     svg {
                         width: rem(25);
-                        height: rem(25);
+                        height: rem(11);
                         fill: $color-green;
                     }
                 }
             }
+
+            h3 {
+                margin-top: rem(15);
+            }
+
+            .sub-details {
+                padding-bottom: rem(16);
+            }
+
             .finish-button {
                 display: block;
                 margin: auto;

diff --git a/src/_scss/pages/modals/fullDownload/_filterBar.scss b/src/_scss/pages/modals/fullDownload/_filterBar.scss
@@ -16,12 +16,21 @@
 
         .filter-group-container {
             display: inline-block;
+            margin-right: rem(10);
+
+            .filter-name {
+                font-size: $smallest-font-size;
+                font-weight: $font-semibold;
+                text-transform: uppercase;
+
+                margin-bottom: rem(5);
+            }
 
             .filter-values {
                 white-space: nowrap;
                 .filter-item-container {
                     display: inline-block;
-                    margin-left: rem(10);
+                    margin-right: rem(5);
                 }
             }
         }

diff --git a/src/_scss/pages/modals/fullDownload/_progressScreen.scss b/src/_scss/pages/modals/fullDownload/_progressScreen.scss
@@ -1,4 +1,5 @@
 .download-progress-screen {
+    text-align: center;
     .main-title {
         h2 {
             text-align: center;
@@ -11,5 +12,59 @@
         .details {
             text-align: center;
         }
+
+        .sub-details {
+            padding-bottom: rem(14);
+        }
+    }
+    .link-box {
+        padding: rem(30);
+        margin: rem(20) auto;
+        background-color: $color-gray-lightest;
+        text-align: center;
+        p {
+            margin-top: 0;
+            font-size: rem(14);
+            font-weight: bold;
+        }
+
+        h3 {
+            margin-top: rem(15);
+        }
+        button {
+            @include button-unstyled;
+            display: block;
+            margin: rem(10) auto;
+            color: $color-primary;
+            font-weight: 600;
+            text-transform: uppercase;
+            padding: rem(10) rem(10) rem(5) rem(5);
+        }
+
+        .link {
+            background-color: $color-white;
+            border: solid 1px $color-gray-light;
+            padding: rem(5);
+        }
+
+        .icon {
+            margin-right: rem(2.5);
+            width: rem(20);
+            height: rem(20);
+            display: inline-block;
+
+            svg {
+                width: rem(25);
+                height: rem(11);
+                fill: $color-green;
+            }
+        }
+    }
+    .finish-button {
+        display: block;
+        margin: auto;
+        background-color: $color-white;
+        color: $color-primary;
+        border: solid rem(2) $color-primary;
     }
 }
diff --git a/src/_scss/pages/modals/fullDownload/fullDownload.scss b/src/_scss/pages/modals/fullDownload/fullDownload.scss
@@ -1,6 +1,6 @@
 .search-section-extra-modal {
     // override the modal widths
-    width: 85%;
+    width: 50%;
 }
 
 .full-download-modal {
@@ -9,7 +9,7 @@
     background-color: $color-white;
 
     .download-body {
-        padding: rem(20) rem(30);
+        padding: rem(20) rem(60) rem(40);
 
         @import "./_filterBar";
     }

diff --git a/src/_scss/pages/search/_filterExpand.scss b/src/_scss/pages/search/_filterExpand.scss
@@ -14,6 +14,7 @@
     svg {
         @include flex(0 0 auto);
         cursor: pointer;
+        pointer-events: none;
         fill: $color-gray;
         height: rem(11);
         width: rem(11);
@@ -43,16 +44,16 @@
 
     .accessory-view {
         @include flex(0 0 auto);
-        width: rem(20);
-        height: rem(20);
+        width: rem(15);
+        height: rem(15);
         position: relative;
 
         color: $color-base;
 
         svg {
-            width: rem(20);
-            height: rem(20);
-            fill: $color-gray;
+            width: rem(15);
+            height: rem(15);
+            fill: $color-gray-light;
         }
     }
 
@@ -75,6 +76,12 @@
             fill: $color-black;
             @include transition(all 0.25s $ease-in-out-sine);
         }
+
+        .accessory-view {
+            svg {
+                fill: $color-gray;
+            }
+        }
     }
 
     @import "pages/search/filters/keyword/_keywordHover";

diff --git a/src/_scss/pages/search/_searchSubmit.scss b/src/_scss/pages/search/_searchSubmit.scss
@@ -0,0 +1,53 @@
+.sidebar-submit {
+    padding: rem(15) rem(25);
+    .submit-button {
+        display: block;
+        width: 100%;
+
+        transition: opacity 0.15s;
+        opacity: 1;
+
+        background-color: $color-primary;
+
+        &:hover {
+            background-color: $color-primary-darker;            
+        }
+
+        &[disabled] {
+            opacity: 0.5;
+            cursor: not-allowed;
+            &:hover {
+                background-color: $color-primary;
+            }
+        }
+    }
+    .reset-button {
+        display: block;
+        @include button-unstyled;
+
+        transition: opacity 0.15s;
+        opacity: 1;
+
+        text-align: center;
+
+        color: $color-primary;
+        font-size: $smallest-font-size;
+
+        margin-top: rem(8);
+        margin-left: auto;
+        margin-right: auto;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+}
+
+.sidebar-top-submit {
+    border-bottom: 1px solid #e4e2e0;
+}