-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #575 from fedspendingtransparency/staging
Promote staging to master
- Loading branch information
Showing
59 changed files
with
1,194 additions
and
327 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,50 @@ | ||
| .warning-banner-wrap { | ||
| @import "mixins/fullSectionWrap"; | ||
| background: as-alpha($color-gold-lightest, 0.95); | ||
| min-height: rem(60); | ||
| background: $color-primary-alt-lightest; | ||
| overflow: hidden; | ||
| padding: rem(15) 0; | ||
| width: 100%; | ||
| border-bottom: 1px solid $color-gold-lighter; | ||
| border: 3px solid #BCE8EB; | ||
| .warning-banner { | ||
| @include fullSectionWrap(0, 0); | ||
| @include display(flex); | ||
| & p { | ||
| margin: auto; | ||
| width: fit-content; | ||
| p { | ||
| flex: 1; | ||
| font-size: $small-font-size; | ||
| display: block; | ||
| margin: rem(8) rem(30) rem(8) 0; | ||
| } | ||
| & .top-alert-icon { | ||
| margin: rem(15) rem(10) 0 0; | ||
| @include media($large-screen) { | ||
| margin: rem(10) rem(10) 0 0; | ||
| } | ||
| & .usa-da-icon { | ||
| .top-alert-icon { | ||
| margin: rem(5) rem(10) 0 rem(10); | ||
| height: 21px; | ||
| .usa-da-icon { | ||
| flex: 1; | ||
| height: rem(20); | ||
| width: rem(30); | ||
| & svg { | ||
| fill: $color-gray-dark; | ||
| height: rem(30); | ||
| width: rem(30); | ||
| margin-top: rem(4); | ||
| height: rem(21); | ||
| width: rem(21); | ||
| fill: #5BC0DE; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &.info { | ||
| background: as-alpha($color-cool-blue-lightest, 0.95); | ||
| border-bottom: 1px solid $color-cool-blue-lighter; | ||
|
|
||
| .warning-banner { | ||
| .top-alert-icon { | ||
| .usa-da-icon { | ||
| & svg { | ||
| fill: $color-cool-blue; | ||
| } | ||
| } | ||
| } | ||
| .good-news { | ||
| font-weight: $font-semibold; | ||
| } | ||
| } | ||
| .close { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| @include button-unstyled; | ||
| margin: rem(15); | ||
| @include media($large-screen) { | ||
| margin: rem(15) rem(30); | ||
| } | ||
|
|
||
| .good-news { | ||
| font-weight: $font-semibold; | ||
| } | ||
| svg { | ||
| fill: $color-gray; | ||
| width: rem(16); | ||
| height: rem(16); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,7 +11,6 @@ | |
| @include justify-content(center); | ||
| @include align-items(center); | ||
| position: relative; | ||
|
|
||
| } | ||
| } | ||
| li { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
src/_scss/layouts/tabbedSearch/header/_downloadButton.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } |
79 changes: 79 additions & 0 deletions
79
src/_scss/layouts/tabbedSearch/header/_downloadTooltip.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.