mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-18 21:49:37 -04:00
- Removed links to the gov uk stylesheets
- Deleted /stylesheets folder - Removed sass build from gulpfile - Changed gov links to usa links - Changed other govuk styles, like breadcrumbs - Changed name of uk_components file to us_components - Fixed a few tests that broke on account of the changes
This commit is contained in:
Jonathan Bobel
297
app/templates/components/us_components/header/_header.scss
Normal file
297
app/templates/components/us_components/header/_header.scss
Normal file
@@ -0,0 +1,297 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../../helpers/typography";
|
||||
|
||||
@include govuk-exports("govuk/component/header") {
|
||||
|
||||
$govuk-header-background: govuk-colour("black");
|
||||
$govuk-header-border-color: $govuk-brand-colour;
|
||||
$govuk-header-border-width: govuk-spacing(2);
|
||||
$govuk-header-text: govuk-colour("white");
|
||||
$govuk-header-link: govuk-colour("white");
|
||||
$govuk-header-link-hover: govuk-colour("white");
|
||||
$govuk-header-link-active: #1d8feb;
|
||||
$govuk-header-nav-item-border-color: #2e3133;
|
||||
|
||||
.govuk-header {
|
||||
@include govuk-font($size: 16);
|
||||
|
||||
border-bottom: govuk-spacing(2) solid govuk-colour("white");
|
||||
color: $govuk-header-text;
|
||||
background: $govuk-header-background;
|
||||
|
||||
}
|
||||
|
||||
.govuk-header__container--full-width {
|
||||
padding: 0 govuk-spacing(3);
|
||||
border-color: $govuk-header-border-color;
|
||||
|
||||
.govuk-header__menu-button {
|
||||
right: govuk-spacing(3);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__container {
|
||||
@include govuk-clearfix;
|
||||
position: relative;
|
||||
margin-bottom: -$govuk-header-border-width;
|
||||
padding-top: govuk-spacing(2);
|
||||
border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
|
||||
}
|
||||
|
||||
.govuk-header__logotype {
|
||||
margin-right: govuk-spacing(1);
|
||||
}
|
||||
|
||||
.govuk-header__logotype-fallback-image {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.govuk-header__product-name {
|
||||
@include govuk-font($size: 24);
|
||||
display: inline-table;
|
||||
padding-right: govuk-spacing(2);
|
||||
}
|
||||
|
||||
.govuk-header__link {
|
||||
@include govuk-focusable-fill;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-header-link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
// alphagov/govuk_template includes a specific a:link:focus selector
|
||||
// designed to make unvisited links a slightly darker blue when focussed, so
|
||||
// we need to override the text colour for that combination of selectors.
|
||||
@include govuk-compatibility(govuk_template) {
|
||||
&:link:focus {
|
||||
@include govuk-text-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__link--homepage {
|
||||
// Font size needs to be set on the link so that the box sizing is correct
|
||||
// in Firefox
|
||||
@include govuk-font($size: false, $weight: bold);
|
||||
|
||||
display: inline-block;
|
||||
font-size: 30px; // We don't have a mixin that produces 30px font size
|
||||
line-height: 30px;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
// Negate the added border
|
||||
margin-bottom: -1px;
|
||||
// Omitting colour will use default value of currentColor – if we
|
||||
// specified currentColor explicitly IE8 would ignore this rule.
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__link--service-name {
|
||||
display: inline-block;
|
||||
margin-bottom: govuk-spacing(2);
|
||||
@include govuk-font($size: 24, $weight: bold);
|
||||
}
|
||||
|
||||
.govuk-header__logo,
|
||||
.govuk-header__content {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.govuk-header__logo {
|
||||
@include govuk-responsive-margin(2, "bottom");
|
||||
padding-right: govuk-spacing(8);
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
width: 33.33%;
|
||||
padding-right: $govuk-gutter-half;
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__content {
|
||||
@include mq ($from: desktop) {
|
||||
width: 66.66%;
|
||||
padding-left: $govuk-gutter-half;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__menu-button {
|
||||
@include govuk-font($size: 16);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: govuk-spacing(4);
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: $govuk-header-link;
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
|
||||
content: "";
|
||||
margin-left: govuk-spacing(1);
|
||||
}
|
||||
|
||||
@include govuk-focusable;
|
||||
|
||||
@include mq ($from: tablet) {
|
||||
top: govuk-spacing(3);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__menu-button--open {
|
||||
&::after {
|
||||
@include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation {
|
||||
@include govuk-responsive-margin(2, "bottom");
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.js-enabled {
|
||||
.govuk-header__menu-button {
|
||||
display: block;
|
||||
@include mq ($from: desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation {
|
||||
display: none;
|
||||
@include mq ($from: desktop) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation--open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.govuk-header__navigation--end {
|
||||
@include mq ($from: desktop) {
|
||||
margin: 0;
|
||||
padding: govuk-spacing(1) 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation--no-service-name {
|
||||
padding-top: govuk-spacing(7);
|
||||
}
|
||||
|
||||
.govuk-header__navigation-item {
|
||||
padding: govuk-spacing(2) 0;
|
||||
border-bottom: 1px solid $govuk-header-nav-item-border-color;
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
display: inline-block;
|
||||
margin-right: govuk-spacing(3);
|
||||
padding: govuk-spacing(1) 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@include govuk-font($size: 16, $weight: bold);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation-item--active {
|
||||
a {
|
||||
&:link,
|
||||
&:hover,
|
||||
&:visited {
|
||||
color: $govuk-header-link-active;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@include govuk-media-query($media-type: print) {
|
||||
.govuk-header {
|
||||
border-bottom-width: 0;
|
||||
color: govuk-colour("black");
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Hide the inverted logo when printing in browsers that don't support SVG.
|
||||
.govuk-header__logotype-fallback-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.govuk-header__link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: govuk-colour("black");
|
||||
}
|
||||
|
||||
// Do not append link href to GOV.UK link when printing (e.g. '(/)')
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Begin adjustments for font baseline offset
|
||||
// These should be removed when the font is updated with the correct baseline
|
||||
.govuk-header__logotype {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.govuk-header {
|
||||
$offset: 3px;
|
||||
padding-top: $offset;
|
||||
}
|
||||
// End adjustments
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user