diff --git a/.scss-lint.yml b/.scss-lint.yml new file mode 100644 index 00000000..e3523f1d --- /dev/null +++ b/.scss-lint.yml @@ -0,0 +1,253 @@ +# Default application configuration that all configurations inherit from. + +scss_files: "**/*.scss" +plugin_directories: ['.scss-linters'] + +# List of gem names to load custom linters from (make sure they are already +# installed) +plugin_gems: [] + +# Default severity of all linters. +severity: warning + +linters: + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + + BemDepth: + enabled: false + max_elements: 1 + + BorderZero: + enabled: true + convention: zero # or `none` + + ChainedClasses: + enabled: false + + ColorKeyword: + enabled: true + + ColorVariable: + enabled: true + + Comment: + enabled: true + style: silent + + DebugStatement: + enabled: true + + DeclarationOrder: + enabled: true + + DisableLinterReason: + enabled: false + + DuplicateProperty: + enabled: true + + ElsePlacement: + enabled: true + style: same_line # or 'new_line' + + EmptyLineBetweenBlocks: + enabled: true + ignore_single_line_blocks: true + + EmptyRule: + enabled: true + + ExtendDirective: + enabled: false + + FinalNewline: + enabled: true + present: true + + HexLength: + enabled: true + style: short # or 'long' + + HexNotation: + enabled: true + style: lowercase # or 'uppercase' + + HexValidation: + enabled: true + + IdSelector: + enabled: true + + ImportantRule: + enabled: true + + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + + Indentation: + enabled: true + allow_non_nested_indentation: false + character: space # or 'tab' + width: 2 + + LeadingZero: + enabled: true + style: exclude_zero # or 'include_zero' + + MergeableSelector: + enabled: true + force_nesting: false + + NameFormat: + enabled: true + allow_leading_underscore: true + convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern + + NestingDepth: + enabled: true + max_depth: 3 + ignore_parent_selectors: false + + PlaceholderInExtend: + enabled: true + + PrivateNamingConvention: + enabled: false + prefix: _ + + PropertyCount: + enabled: false + include_nested: false + max_properties: 10 + + PropertySortOrder: + enabled: true + ignore_unspecified: false + min_properties: 2 + separate_groups: false + + PropertySpelling: + enabled: true + extra_properties: [] + disabled_properties: [] + + PropertyUnits: + enabled: true + global: [ + 'ch', 'em', 'ex', 'rem', # Font-relative lengths + 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths + 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths + 'deg', 'grad', 'rad', 'turn', # Angle + 'ms', 's', # Duration + 'Hz', 'kHz', # Frequency + 'dpi', 'dpcm', 'dppx', # Resolution + '%'] # Other + properties: {} + + PseudoElement: + enabled: true + + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + + SelectorDepth: + enabled: true + max_depth: 3 + + SelectorFormat: + enabled: true + convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern + + Shorthand: + enabled: true + allowed_shorthands: [1, 2, 3] + + SingleLinePerProperty: + enabled: true + allow_single_line_rule_sets: true + + SingleLinePerSelector: + enabled: true + + SpaceAfterComma: + enabled: true + style: one_space # or 'no_space', or 'at_least_one_space' + + SpaceAfterPropertyColon: + enabled: true + style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned' + + SpaceAfterPropertyName: + enabled: true + + SpaceAfterVariableColon: + enabled: false + style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline' + + SpaceAfterVariableName: + enabled: true + + SpaceAroundOperator: + enabled: true + style: one_space # or 'at_least_one_space', or 'no_space' + + SpaceBeforeBrace: + enabled: true + style: space # or 'new_line' + allow_single_line_padding: false + + SpaceBetweenParens: + enabled: true + spaces: 0 + + StringQuotes: + enabled: true + style: single_quotes # or double_quotes + + TrailingSemicolon: + enabled: true + + TrailingWhitespace: + enabled: true + + TrailingZero: + enabled: false + + TransitionAll: + enabled: false + + UnnecessaryMantissa: + enabled: true + + UnnecessaryParentReference: + enabled: true + + UrlFormat: + enabled: true + + UrlQuotes: + enabled: true + + VariableForProperty: + enabled: false + properties: [] + + VendorPrefix: + enabled: false + identifier_list: base + additional_identifiers: [] + excluded_identifiers: [] + + ZeroUnit: + enabled: true + + Compass::*: + enabled: false diff --git a/app/assets/stylesheets/_uswds-grid-overrides.scss b/app/assets/stylesheets/_uswds-grid-overrides.scss index 7a99c239..1c9ba84a 100644 --- a/app/assets/stylesheets/_uswds-grid-overrides.scss +++ b/app/assets/stylesheets/_uswds-grid-overrides.scss @@ -7,7 +7,7 @@ $large-screen: 768px; $huge-screen: 900px; $jumbo-screen: 1240px; -$huge: new-breakpoint(min-width $jumbo-screen 12); +$jumbo: new-breakpoint(min-width $jumbo-screen 12); $huge: new-breakpoint(min-width $huge-screen 12); $large: new-breakpoint(min-width $large-screen 12); $medium: new-breakpoint(min-width $medium-screen 6); @@ -34,3 +34,12 @@ $small: new-breakpoint(min-width $small-screen 1); .usa-grid-top-padding { padding-top: 1.25em; } + + +.usa-grid { + padding: 0 1.5rem; + + @include media($small-screen) { + padding: 0 3rem; + } +} diff --git a/app/assets/stylesheets/_uswds-overrides.scss b/app/assets/stylesheets/_uswds-overrides.scss index 650596d3..652b737b 100644 --- a/app/assets/stylesheets/_uswds-overrides.scss +++ b/app/assets/stylesheets/_uswds-overrides.scss @@ -34,25 +34,6 @@ vertical-align: middle; } -.usa-footer-secondary_section { - background-color: $primary-darkest; -} - - -.usa-footer-secondary_section a { - color: $color-white; - line-height: 1.8; - - &:visited { - color: $color-white; - } -} - -.usa-footer-secondary_section h2 { - margin-bottom: 0px; - color: white; -} - .usa-button-primary-alt { color: white; } diff --git a/app/assets/stylesheets/blocks/_auction-detail.scss b/app/assets/stylesheets/blocks/_auction-detail.scss index 379a2bc3..0f0f3d17 100644 --- a/app/assets/stylesheets/blocks/_auction-detail.scss +++ b/app/assets/stylesheets/blocks/_auction-detail.scss @@ -2,6 +2,7 @@ .auction-detail-panel { border: 1px solid #ccc; border-radius: $border-radius; + margin-bottom: $base-padding-large; .auction-info { margin-top: 2rem; @@ -15,7 +16,6 @@ } .auction-more-info { - background-color: $primary-darkest; padding: 2rem; @@ -40,6 +40,10 @@ } } +.auction-detail-bid { + padding-bottom: $base-padding; +} + .auction-label-expiring { background-color: $color-gold !important; diff --git a/app/assets/stylesheets/blocks/_auction.scss b/app/assets/stylesheets/blocks/_auction.scss index dea3bef0..06d83f44 100644 --- a/app/assets/stylesheets/blocks/_auction.scss +++ b/app/assets/stylesheets/blocks/_auction.scss @@ -45,6 +45,10 @@ textarea#auction_description { font-weight: $font-light; margin-bottom: $site-margins; + &:last-of-type { + margin-bottom: $base-padding-large; + } + .issue-label { margin-top: 0.75rem; } diff --git a/app/assets/stylesheets/blocks/_footer.scss b/app/assets/stylesheets/blocks/_footer.scss index 8aa24a2a..882d2b98 100644 --- a/app/assets/stylesheets/blocks/_footer.scss +++ b/app/assets/stylesheets/blocks/_footer.scss @@ -1,8 +1,21 @@ + +// Start .usa-footer +.usa-footer-logo { + display: table-row; +} + .usa-footer-primary-section { - background: $color-gray-lightest; + background-color: transparent; + float: right; + padding: 0; + width: 100%; + + @include media($medium-screen) { + width: inherit; + } } -.footer-image { +.usa-footer-primary-section ul { margin-bottom: $base-padding; @include media($medium-screen) { @@ -10,55 +23,131 @@ } } +.usa-footer { + background: $primary-darkest; + -webkit-box-flex: 0; + -ms-flex: none; + -webkit-flex: none; + flex: none; +} + +.usa-footer .usa-footer-primary-link-item { + display: block; + + @include media($medium-screen) { + display: inline-block; + } +} .usa-footer .usa-footer-primary-link { - color: $branding-darkest; + color: $color-white; + font-size: $h4-font-size; font-weight: $font-normal; - font-size: $h3-font-size; + padding: 0; + padding-bottom: $base-padding-lite; + text-decoration: underline; + + @include media($medium-screen) { + padding: $base-padding-lite; + } + + &:hover, + &:focus { + text-decoration: none; + } +} + + +.usa-footer address { + text-align: left; @include media($medium-screen) { - padding: $base-padding; + text-align: right; } } -.usa-footer-large { - .usa-footer-primary-section { - padding: 0; +.usa-footer address a { + color: $color-purple-pale; + display: block; + font-size: $h6-font-size; + margin-bottom: $base-padding-lite; + margin-right: .4em; + text-decoration: none; - @include media($large-screen) { - padding-bottom: 1rem; - padding-top: 1rem; - } + @include media($medium-screen) { + display: inline-block; + margin-bottom: 0; } - .usa-footer-nav ul { - @include media($large-screen) { - align-items: center; - display: flex; - } + &:hover, + &:focus, + &:visited, + &:active { + text-decoration: underline; } } +// End .usa-footer + +// Start .footer -ul.usa-footer-primary-content, -li.usa-footer-primary-content, -li.usa-footer-primary-content { - border-top: 1px solid $primary-darkest; +.footer-image, +.footer-title-text { + display: table-cell; +} + +.footer-image { + float: left; + margin-right: $base-padding-lite; + max-width: none; + width: $logo-18f; +} + +.footer-title-text { + direction: inline-block; + font-size: 2rem; + font-weight: $font-light; + letter-spacing: -.5px; + vertical-align: middle; @include media($medium-screen) { - border-top: 1px solid $primary-darkest; + font-size: 3rem; } +} - @include media($large-screen) { - border: none; - text-align: center; - width: 20%; - } +.footer-wrapper { + margin-bottom: 2 * $base-padding; + margin-top: $base-padding; +} - &:last-child { +.footer-wrapper a { + color: $color-white; + line-height: 1.8; +} + +.footer-wrapper h2 { + color: $color-white; + margin-bottom: 0; +} + +.footer-home-link { + display: table; + float: left; + margin-bottom: $base-padding; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + text-decoration: none; - @include media($large-screen) { - border-bottom: none; - } + @include media($medium-screen) { + margin-bottom: 0; + } + + &:hover, + &:focus { + text-decoration: none; } } + +// End .footer diff --git a/app/assets/stylesheets/blocks/_header.scss b/app/assets/stylesheets/blocks/_header.scss index ecde56cf..48daed45 100644 --- a/app/assets/stylesheets/blocks/_header.scss +++ b/app/assets/stylesheets/blocks/_header.scss @@ -1,4 +1,3 @@ - nav.usa-site-navbar { background: $primary-darkest; padding-bottom: 10px; @@ -9,6 +8,20 @@ nav.usa-site-navbar a { color: #fff; margin-left: 14px; position: relative; + + &.header-home-link { + display: table-cell; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: none; + } + } } .header-account { @@ -45,21 +58,25 @@ nav.usa-site-navbar a { } .header-title-text { - font-size: 1.5rem; + font-size: 2rem; + font-weight: $font-light; + letter-spacing: -0.5px; @include media($small-screen) { font-size: 3rem; + } } .header-image, .header-image img { + margin-right: $base-padding-lite; max-width: none; - width: 25px; + width: $logo-18f; +} - @include media($small-screen) { - width: 50px; - } +.header-image img { + float: left; } .header-table { diff --git a/app/assets/stylesheets/blocks/_nav-drawer.scss b/app/assets/stylesheets/blocks/_nav-drawer.scss index 29becaeb..9aa79438 100644 --- a/app/assets/stylesheets/blocks/_nav-drawer.scss +++ b/app/assets/stylesheets/blocks/_nav-drawer.scss @@ -2,6 +2,8 @@ display: table-cell; background: transparent; box-shadow: none; + margin: 13px; + margin-left: 0; margin-right: 0; padding: 0; diff --git a/app/assets/stylesheets/components/_nav-button.scss b/app/assets/stylesheets/components/_nav-button.scss new file mode 100644 index 00000000..539b4042 --- /dev/null +++ b/app/assets/stylesheets/components/_nav-button.scss @@ -0,0 +1,92 @@ +$avatar-width: 32px; +$avatar-padding: 4px; +$login-btn-color-active: #909db2; +$login-btn-bg-primary: #4c6aa5; +$login-btn-bg-secondary: #1c366a; +$login-btn-border: #162b54; +$login-btn-border-bottom: #0f1e3b; +$login-gradient: linear-gradient($login-btn-bg-primary, $login-btn-bg-secondary); +$login-shadow: rgba(73, 207, 239, .2); +$login-shadow-active: rgba(8, 84, 141, .33); + +header.usa-site-header a.nav-sign-out { + background: transparent; + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; + float: right; + font-size: 1.4rem; + height: $avatar-width + (2 * $avatar-padding); // 40px + line-height: 1.4rem; + padding: 0; + position: relative; + text-align: left; + text-decoration: none; + + &:hover, + &:focus { + background: $login-btn-bg-primary; + background: linear-gradient($login-btn-bg-primary, $login-btn-bg-secondary); + border-bottom-color: $login-btn-border-bottom; + border-color: $login-btn-border; + -webkit-box-shadow: inset 1px 1px 0 $login-shadow; + cursor: pointer; + } + + &:active { + background: linear-gradient($login-btn-bg-secondary, $login-btn-bg-primary); + border-color: $login-btn-border; + -webkit-box-shadow: inset 1px 1px 0 $login-shadow-active; + color: $login-btn-color-active; + -webkit-touch-callout: none; // iOS Safari + -khtml-user-select: none; // Konqueror + -moz-user-select: none; // Firefox + -ms-user-select: none; // IE/Edge + -webkit-user-select: none; // Chrome/Safari/Opera + user-select: none; + } +} + +.nav-sign-out button { + background: transparent; + margin: 0; + padding: 0; + padding-left: $avatar-width + (2 * $avatar-padding); + padding-right: $base-padding-lite; + width: 100%; +} + +.nav-sign-out h1 { + font-family: Lucida Grande; + font-size: .9rem; + line-height: inherit; + margin-top: 1px; + text-align: left; + text-transform: uppercase; +} + +.nav-sign-out img { + border-radius: 100%; + height: $avatar-width; + left: $avatar-padding; + position: absolute; + top: $avatar-padding; + width: $avatar-width; +} + +.nav-sign-out span { + font-weight: $font-bold; + + &.action { + font-size: 1.2rem; + margin-left: .8em; + text-decoration: underline; + } +} + +.header-account .nav-sign-out span { + position: static; + right: inherit; + top: inherit; +} + diff --git a/app/assets/stylesheets/components/_nav-dropdown.scss b/app/assets/stylesheets/components/_nav-dropdown.scss index 0be4839a..af50064a 100644 --- a/app/assets/stylesheets/components/_nav-dropdown.scss +++ b/app/assets/stylesheets/components/_nav-dropdown.scss @@ -26,7 +26,7 @@ .header-account .fa-caret-down { font-size: 1.5rem; padding-left: $base-padding-lite; - vertical-align: bottom; + vertical-align: middle; @include media($medium-screen) { vertical-align: middle; diff --git a/app/assets/stylesheets/core/_layout.scss b/app/assets/stylesheets/core/_layout.scss index d1b9425b..ceb30eb8 100644 --- a/app/assets/stylesheets/core/_layout.scss +++ b/app/assets/stylesheets/core/_layout.scss @@ -1,14 +1,13 @@ .content-wrapper { @extend .usa-grid; - padding-bottom: (2 * $site-margins); + flex: 1 0 auto; } .content-wrapper#index, .content-wrapper#auctions, .content-wrapper#winners { padding: 0; - padding-bottom: (2 * $site-margins); margin: 0; max-width: none; } diff --git a/app/assets/stylesheets/core/_links.scss b/app/assets/stylesheets/core/_links.scss index 33fd1c46..8da0eb8d 100644 --- a/app/assets/stylesheets/core/_links.scss +++ b/app/assets/stylesheets/core/_links.scss @@ -10,7 +10,7 @@ a:focus { a.link-highlighted { background-color: $branding-darkest; - color: $branding-bright; + color: $color-white; padding: rem(1px); padding-left: $border-radius; padding-right: $border-radius; diff --git a/app/assets/stylesheets/core/_variables.scss b/app/assets/stylesheets/core/_variables.scss index d53e669f..d016dd9c 100644 --- a/app/assets/stylesheets/core/_variables.scss +++ b/app/assets/stylesheets/core/_variables.scss @@ -11,12 +11,14 @@ $color-secondary-dark: #cd2026; $color-gold: #fdb81e; $color-cool-blue: #205493; $color-purple: #4c2c92; +$color-purple-pale: #b1cffe; $color-white: #ffffff; $color-gray-neutral: #cccccc; // 18f Branding $branding-black: #000000; -$branding-darkest: #1C304A; +// $branding-darkest: #1C304A; +$branding-darkest: #2d3f5b; $branding-medium: #046B99; $branding-bright: #00CFFF; $branding-light: #B3EFFF; @@ -36,6 +38,12 @@ $font-bold: 600; // Padding $base-padding: 1.25em; $base-padding-lite: 0.42em; +$base-padding-large: 2.85em; // Typography $h1-font-size: rem(35px); + + +// Logo +// $logo-18f-sm: 25px; +$logo-18f: 44px; diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index f2e85b9c..f12591db 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -21,6 +21,7 @@ @import 'components/nav-dropdown'; @import 'components/accordion'; @import 'components/drawer'; +@import 'components/nav-button'; @import 'blocks/header'; @import 'blocks/footer'; @@ -50,6 +51,11 @@ body.admin { } } +body { + display: flex; + flex-direction: column; + min-height: 100vh; +} #logo { line-height: 0; diff --git a/app/views/application/_flashes.html.erb b/app/views/application/_flashes.html.erb index 821fac68..2e6e76cb 100644 --- a/app/views/application/_flashes.html.erb +++ b/app/views/application/_flashes.html.erb @@ -7,5 +7,6 @@

<%= raw value %>

+ <% end -%> <% end %> diff --git a/app/views/auctions/_bids_and_form.html.erb b/app/views/auctions/_bids_and_form.html.erb index f4b00127..5de986fb 100644 --- a/app/views/auctions/_bids_and_form.html.erb +++ b/app/views/auctions/_bids_and_form.html.erb @@ -6,11 +6,12 @@
- - Bid Deadline: <%= auction.relative_time_left %> left -
- - Bid start time: <%= auction.relative_start_time %> - -
+ + Bid Deadline: <%= auction.relative_time_left %> left + +
+ + Bid start time: <%= auction.relative_start_time %> + +
diff --git a/app/views/auctions/_list_item.html.erb b/app/views/auctions/_list_item.html.erb index 46ac98d3..26f8f767 100644 --- a/app/views/auctions/_list_item.html.erb +++ b/app/views/auctions/_list_item.html.erb @@ -13,18 +13,18 @@
- <% if auction.available? %> - <%= render partial: 'auctions/bids_and_form', locals: {auction: auction} %> + <% if auction.available? %> + <%= render partial: 'auctions/bids_and_form', locals: {auction: auction} %> -
- <% if auction.show_bid_button? %> - Bid - <% end %> -
- <% else %> - <%= render partial: 'auctions/winning_bid', locals: {auction: auction} %> - <% end %> -
+
+ <% if auction.show_bid_button? %> + Bid + <% end %> +
+ <% else %> + <%= render partial: 'auctions/winning_bid', locals: {auction: auction} %> + <% end %> +
diff --git a/app/views/auctions/_list_item_previous.html.erb b/app/views/auctions/_list_item_previous.html.erb index a3164659..1def1813 100644 --- a/app/views/auctions/_list_item_previous.html.erb +++ b/app/views/auctions/_list_item_previous.html.erb @@ -11,5 +11,4 @@ - <% end %> diff --git a/app/views/auctions/show.html.erb b/app/views/auctions/show.html.erb index b32fbd87..618d6fe0 100644 --- a/app/views/auctions/show.html.erb +++ b/app/views/auctions/show.html.erb @@ -46,9 +46,9 @@ <% end %> <% if @view_model.auction.show_bid_button? %> -

- BID -

+

+ BID +

<% end %>
diff --git a/app/views/components/_disclaimer.erb b/app/views/components/_disclaimer.erb new file mode 100644 index 00000000..ae9909a9 --- /dev/null +++ b/app/views/components/_disclaimer.erb @@ -0,0 +1,10 @@ +
+
+
+ + <%= image_tag 'us_flag_small.png', class: 'usa-flag_icon', alt: "US flag signifying that this is a United States Federal Government website" %> + An official website of the United States Government + +
+
+
diff --git a/app/views/components/_nav_drawer.erb b/app/views/components/_nav_drawer.erb index 5e6a256b..3c1bdf25 100644 --- a/app/views/components/_nav_drawer.erb +++ b/app/views/components/_nav_drawer.erb @@ -15,9 +15,6 @@
-
  • - Projects -
  • About
    • diff --git a/app/views/components/_nav_header.erb b/app/views/components/_nav_header.erb new file mode 100644 index 00000000..09feef55 --- /dev/null +++ b/app/views/components/_nav_header.erb @@ -0,0 +1,28 @@ + + diff --git a/app/views/components/_site_footer.erb b/app/views/components/_site_footer.erb new file mode 100644 index 00000000..96c55af6 --- /dev/null +++ b/app/views/components/_site_footer.erb @@ -0,0 +1,35 @@ + diff --git a/app/views/components/_user_nav_drawer.html.erb b/app/views/components/_user_nav_drawer.html.erb index 41969888..412af8ed 100644 --- a/app/views/components/_user_nav_drawer.html.erb +++ b/app/views/components/_user_nav_drawer.html.erb @@ -14,3 +14,12 @@ + + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 0566818e..fd361c54 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -47,43 +47,8 @@ - + <%= render partial: 'components/nav_header', locals: { current_user: current_user } %> <%= render partial: "components/nav_drawer", locals: { current_user: @current_user } %> @@ -94,58 +59,9 @@
    - - + diff --git a/features/feedback.feature b/features/feedback.feature index c8d14324..744bd2b6 100644 --- a/features/feedback.feature +++ b/features/feedback.feature @@ -6,5 +6,5 @@ Feature: Feedback options Scenario: Visiting the homepage When I visit the home page Then I should see a link to give feedback - And I should see a link to get in touch + And I should see an email link to get in touch And I should see a link to the github repository diff --git a/features/step_definitions/feedback_steps.rb b/features/step_definitions/feedback_steps.rb index 4b67298c..9f415e53 100644 --- a/features/step_definitions/feedback_steps.rb +++ b/features/step_definitions/feedback_steps.rb @@ -2,8 +2,8 @@ expect(page).to have_link('Feedback') end -Then(/^I should see a link to get in touch$/) do - expect(page).to have_content('Get In Touch') +Then(/^I should see an email link to get in touch$/) do + expect(page).to have_content('micropurchase@gsa.gov') end Then(/^I should see a link to the github repository$/) do