Merge pull request #570 from fedspendingtransparency/dev-stable

Promote Dev stable to Staging

src/_scss/layouts/default/header/_logo.scss

@@ -42,19 +42,19 @@
             color: $color-white;
             font-size: rem(8);
             font-weight: $font-semibold;
-            left: rem(195);
+            left: rem(189);
             letter-spacing: 0.14rem;
             padding: rem(2) rem(4);
             position: absolute;
             text-align: center;
             top: rem(-2);
             @include border-radius(2px);
-            @include media(360px) {
-                left: rem(228);
+            @include media(359px) {
+                left: rem(219);
             }
             @include media($large-screen) {
                 font-size: rem(10);
-                left: rem(280);
+                left: rem(268);
                 top: rem(-2);
             }
         }

src/_scss/layouts/search/header/_options.scss

@@ -11,7 +11,6 @@
             @include justify-content(center);
             @include align-items(center);
             position: relative;
-
         }
     }
     li {

src/_scss/layouts/search/header/_positioning.scss

@@ -11,12 +11,12 @@
 }
 
 .search-title {
-    flex: 1 100%;
+    @include flex(1 1 auto);
     & h1 {
         text-align: center;
     }
     @include media($tablet-screen) {
-        flex: 1;
+        @include flex(1 1 auto);
         & h1 {
             margin: rem(20) 0;
             text-align: left;
@@ -25,10 +25,10 @@
 }
 
 .search-options {
-    flex: 1 100%;
+    @include flex(1 1 auto);
     margin: 0 0 20px;
     @include media($tablet-screen) {
-        flex: 1;
+        @include flex(1 1 auto);
         margin: 0;
         & ul.search-formats {
             text-align: right;

src/_scss/layouts/tabbedSearch/header/_downloadButton.scss

@@ -0,0 +1,51 @@
+.download-wrap {
+    position: relative;
+    @import "./_downloadTooltip";
+
+    .download-button {
+        @include button-unstyled;
+        padding: rem(8) rem(20);
+        border: 1px solid $color-white;
+        cursor: pointer;
+
+        @include display(flex);
+        @include justify-content(center);
+        @include align-items(center);
+        position: relative;
+        width: rem(155);
+        height: rem(36);
+
+        @include transition(opacity 0.2s ease-in-out);
+
+        .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);
+            }
+        }
+
+        .label {
+            @include flex(1 1 auto);
+            text-align: center;
+            color: $color-white;
+            text-transform: uppercase;
+            font-size: rem(14);
+            line-height: rem(18);
+            font-weight: $font-semibold;
+        }
+
+        &:hover, &:active {
+            opacity: 1;
+        }
+
+        &[disabled], &.disabled {
+            cursor: default;
+            opacity: 0.4;
+        }
+    }
+}

src/_scss/layouts/tabbedSearch/header/_downloadTooltip.scss

@@ -0,0 +1,79 @@
+.download-hover-spacer {
+    // BODGE: add a wrapper that goes from the button to the edges of the hover in order to make it clickable
+    position: absolute;
+    top: rem(-18);
+    left: rem(-290);
+    width: rem(290);
+    height: rem(90);
+    z-index: $z-modal - 2;
+}
+.download-hover {
+    margin-right: rem(20);
+    z-index: $z-modal - 1;
+
+    width: rem(270);
+    height: rem(90);
+
+    .download-hover-interior {
+        position: relative;
+    }
+
+    .hover-content {
+        @include display(flex);
+        @include flex-direction(row);
+        @include justify-content(center);
+        @include align-items(center);
+        position: relative;
+
+        background-color: $color-gold-lightest;
+        border: 1px solid $color-gold-light;
+        box-shadow: $box-shadow;
+
+        padding: rem(10);
+
+        .icon {
+            @include flex(0 0 auto);
+            @include align-self(flex-start);
+            width: rem(25);
+            height: rem(25);
+            margin-right: rem(10);
+            svg {
+                fill: $color-gold;
+                width: rem(25);
+                height: rem(25);
+            }
+        }
+
+        .message {
+            @include flex(1 1 auto);
+            text-align: left;
+            color: $color-base;
+            font-size: $smallest-font-size;
+
+            a {
+                text-decoration: underline;
+                color: $color-primary;
+                font-weight: $font-semibold;
+
+                &:hover, &:active {
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    // inherit from the standard tooltip arrow style
+    $color-tooltip-border: $color-gold-light;
+    @import "components/visualizations/tooltip/_arrow";
+    .tooltip-pointer {
+        // override the coloring
+        &:after {
+            background: $color-gold-lightest;
+        }
+
+        &.right {
+            top: rem(32);
+            right: rem(9);
+        }
+    }
+}

src/_scss/layouts/tabbedSearch/header/header.scss

@@ -0,0 +1,51 @@
+$search-header-height: rem(66);
+
+.search-header-wrapper {
+    position: relative;
+    height: $search-header-height;
+}
+
+.search-header-container {
+    width: 100%;
+    background-color: $color-primary;
+    color: $color-white;
+    // bottom shadow cast on the content
+    box-shadow: 0 2px 2px rgba(0,0,0,.3);
+
+    &.sticky {
+        @include media($medium-screen) {
+            position: fixed;
+            top: 0;
+            z-index: $z-header;
+        }
+    }
+
+    .search-header {
+        @import "mixins/fullSectionWrap";
+        @include fullSectionWrap(0, 0);
+        @include display(flex);
+        @include justify-content(space-between);
+        @include flex-direction(row);
+        @include align-items(center);
+        @include align-self(stretch);
+        @include flex-flow(row wrap);
+        position: relative;
+
+        height: $search-header-height;
+
+        .search-title {
+            @include flex(1 1 auto);
+            h1 {
+                font-size: rem(24);
+                line-height: rem(31);
+                font-weight: $font-semibold;
+                margin: 0;
+            }
+        }
+
+        .search-options {
+            @include flex(0 0 auto);
+            @import "./_downloadButton";
+        }
+    }
+}

src/_scss/layouts/tabbedSearch/tabbedSearch.scss

@@ -0,0 +1,17 @@
+@import "layouts/default/default";
+
+#main-content {
+    @import "./header/header";
+
+    .search-contents {
+        @include outer-container(100%);
+        margin: 0 $outer-gutter/2;
+        @include media($large-screen) {
+            margin: 0 $outer-gutter;
+        }
+        @include media($x-large-screen) {
+            max-width: $site-max-width;
+            margin: 0 auto;
+        }
+    }
+}

src/_scss/pages/search/_filterExpand.scss

@@ -1,18 +1,21 @@
 .filter-toggle {
     @include button-unstyled;
-    display: inline-block;
+    @include display(flex);
+    @include justify-content(center);
+    @include align-items(center);
+    position: relative;
+    width: 100%;
+
     padding: rem(15);
     @include media($tablet-screen) {
         padding: rem(15);
     }
-    vertical-align: middle;
-    width: 100%;
-    position: relative;
+
     svg {
+        @include flex(0 0 auto);
         cursor: pointer;
         fill: $color-gray;
         height: rem(11);
-        vertical-align: middle;
         width: rem(11);
         @include media($large-screen) {
             width: rem(12);
@@ -24,8 +27,8 @@
         }
     }
     .filter-header {
+        @include flex(1 1 auto);
         color: $color-gray;
-        display: inline-block;
         font-size: $small-font-size;
         font-weight: $font-semibold;
         height: 100%;
@@ -37,6 +40,22 @@
             font-size: $base-font-size;
         }
     }
+
+    .accessory-view {
+        @include flex(0 0 auto);
+        width: rem(20);
+        height: rem(20);
+        position: relative;
+
+        color: $color-base;
+
+        svg {
+            width: rem(20);
+            height: rem(20);
+            fill: $color-gray;
+        }
+    }
+
     .usa-da-icon-guide {
         fill: lighten( $color-gray-light, 5%);
         float: right;
@@ -57,4 +76,6 @@
             @include transition(all 0.25s $ease-in-out-sine);
         }
     }
+
+    @import "pages/search/filters/keyword/_keywordHover";
 }

src/_scss/pages/search/_pagePositioning.scss

@@ -0,0 +1,28 @@
+.search-contents {
+    @include flex(1 1 auto);
+    @include display(flex);
+    @include flex-direction(row);
+    @include justify-content(flex-start);
+    @include align-items(stretch);
+    position: relative;
+
+
+    .full-search-sidebar {
+        @include flex(0 0 auto);
+        display: none;
+        @include media($medium-screen) {
+            display: block;
+            padding-right: rem(30);
+            width: 25%;
+        }
+    }
+
+    .search-results-wrapper {
+        @include flex(1 1 auto);
+        overflow: hidden;
+
+        @include media($medium-screen) {
+            margin-top: rem(32);
+        }
+    }
+}