Skip to content

Commit

Permalink
added census logo to header
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrbarnes9
jrbarnes9 committed Feb 20, 2020
1 parent f0850c9 commit 619559b
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 39 deletions.
86 changes: 48 additions & 38 deletions _css/base/_sprite.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

.svg-crest-logo {
@extend %svg-common;
background-position: 18.106382978723403% 74.23274791555792%;
background-position: 17.91578947368421% 62.112216119934686%;
}

.svg-crest-logo-dims {
Expand All @@ -24,7 +24,7 @@

.svg-icons--caret-bottom {
@extend %svg-common;
background-position: 0 11.601694915254237%;
background-position: 0 9.778571428571428%;
}

.svg-icons--caret-bottom-dims {
Expand All @@ -34,7 +34,7 @@

.svg-icons--caret-left {
@extend %svg-common;
background-position: 34.899328859060404% 0;
background-position: 34.5514950166113% 0;
}

.svg-icons--caret-left-dims {
Expand All @@ -44,7 +44,7 @@

.svg-icons--caret-right {
@extend %svg-common;
background-position: 0 28.80909090909091%;
background-position: 0 24.007575757575758%;
}

.svg-icons--caret-right-dims {
Expand All @@ -54,17 +54,27 @@

.svg-icons--caret-top {
@extend %svg-common;
background-position: 12.76595744680851% 26.910665760869563%;
background-position: 12.631578947368421% 22.674585002862052%;
}

.svg-icons--caret-top-dims {
width: 52px;
height: 36.48px;
}

.svg-icons--census-logo-en {
@extend %svg-common;
background-position: 18.24561403508772% 9.447243116417086%;
}

.svg-icons--census-logo-en-dims {
width: 52px;
height: 26.18px;
}

.svg-icons--check {
@extend %svg-common;
background-position: 49.645390070921984% 0;
background-position: 49.12280701754386% 0;
}

.svg-icons--check-dims {
Expand All @@ -74,7 +84,7 @@

.svg-icons--chevron-bottom {
@extend %svg-common;
background-position: 49.645390070921984% 19.79425482760124%;
background-position: 49.12280701754386% 16.60875608061154%;
}

.svg-icons--chevron-bottom-dims {
Expand All @@ -84,7 +94,7 @@

.svg-icons--chevron-down {
@extend %svg-common;
background-position: 36.16140350877193% 71.22553191489362%;
background-position: 44.55902777777777% 78.63082437275986%;
}

.svg-icons--chevron-down-dims {
Expand All @@ -94,7 +104,7 @@

.svg-icons--chevron-left {
@extend %svg-common;
background-position: 0 52.445454545454545%;
background-position: 0 43.70454545454545%;
}

.svg-icons--chevron-left-dims {
Expand All @@ -104,7 +114,7 @@

.svg-icons--chevron-right {
@extend %svg-common;
background-position: 14.615147043684157% 52.445454545454545%;
background-position: 14.466220576746716% 43.70454545454545%;
}

.svg-icons--chevron-right-dims {
Expand All @@ -114,7 +124,7 @@

.svg-icons--chevron-top {
@extend %svg-common;
background-position: 30.20567375886525% 50.29423303256179%;
background-position: 29.887719298245614% 42.20035843604843%;
}

.svg-icons--chevron-top-dims {
Expand All @@ -124,7 +134,7 @@

.svg-icons--circle-check {
@extend %svg-common;
background-position: 68.08510638297872% 0;
background-position: 67.36842105263158% 0;
}

.svg-icons--circle-check-dims {
Expand All @@ -134,7 +144,7 @@

.svg-icons--circle-x {
@extend %svg-common;
background-position: 68.08510638297872% 23.636363636363637%;
background-position: 67.36842105263158% 19.696969696969695%;
}

.svg-icons--circle-x-dims {
Expand All @@ -144,7 +154,7 @@

.svg-icons--download {
@extend %svg-common;
background-position: 58.24137931034482% 96.21929824561404%;
background-position: 0 99.7720588235294%;
}

.svg-icons--download-dims {
Expand All @@ -154,7 +164,7 @@

.svg-icons--download-white {
@extend %svg-common;
background-position: 73.1615120274914% 94.96969696969697%;
background-position: 14.965986394557824% 98.68363636363637%;
}

.svg-icons--download-white-dims {
Expand All @@ -164,7 +174,7 @@

.svg-icons--external-link {
@extend %svg-common;
background-position: 0 76.08181818181818%;
background-position: 0 63.40151515151515%;
}

.svg-icons--external-link-dims {
Expand All @@ -174,7 +184,7 @@

.svg-icons--guidance {
@extend %svg-common;
background-position: 97.36842105263158% 34.04255319148936%;
background-position: 96.41693811074919% 57.34767025089606%;
}

.svg-icons--guidance-dims {
Expand All @@ -184,7 +194,7 @@

.svg-icons--guidance-white {
@extend %svg-common;
background-position: 97.36842105263158% 65.53191489361703%;
background-position: 96.41693811074919% 83.87096774193549%;
}

.svg-icons--guidance-white-dims {
Expand All @@ -194,7 +204,7 @@

.svg-icons--icons--check {
@extend %svg-common;
background-position: 51.72108843537415% 70.92372881355932%;
background-position: 99.66329966329967% 30.714285714285715%;
}

.svg-icons--icons--check-dims {
Expand All @@ -204,7 +214,7 @@

.svg-icons--icons--definition-arrow {
@extend %svg-common;
background-position: 99.32885906040268% 49.787234042553195%;
background-position: 98.33887043189368% 70.60931899641577%;
}

.svg-icons--icons--definition-arrow-dims {
Expand All @@ -214,7 +224,7 @@

.svg-icons--icons--guidance {
@extend %svg-common;
background-position: 84.70751605624024% 21.331818181818182%;
background-position: 83.83439271602818% 17.776515151515152%;
}

.svg-icons--icons--guidance-dims {
Expand All @@ -224,7 +234,7 @@

.svg-icons--icons--guidance-darkblue {
@extend %svg-common;
background-position: 84.70751605624024% 44.96818181818182%;
background-position: 83.83439271602818% 37.47348484848485%;
}

.svg-icons--icons--guidance-darkblue-dims {
Expand All @@ -234,7 +244,7 @@

.svg-icons--icons--guidance-white {
@extend %svg-common;
background-position: 84.70751605624024% 68.60454545454546%;
background-position: 83.83439271602818% 57.17045454545455%;
}

.svg-icons--icons--guidance-white-dims {
Expand All @@ -244,7 +254,7 @@

.svg-icons--info {
@extend %svg-common;
background-position: 0 99.71818181818182%;
background-position: 0 83.09848484848484%;
}

.svg-icons--info-dims {
Expand All @@ -254,7 +264,7 @@

.svg-icons--info-circle {
@extend %svg-common;
background-position: 13.099290780141844% 99.71818181818182%;
background-position: 12.96140350877193% 83.09848484848484%;
}

.svg-icons--info-circle-dims {
Expand All @@ -264,7 +274,7 @@

.svg-icons--lock {
@extend %svg-common;
background-position: 43.73445114678117% 96.21929824561404%;
background-position: 99.85494045811828% 0;
}

.svg-icons--lock-dims {
Expand All @@ -274,7 +284,7 @@

.svg-icons--lockicon {
@extend %svg-common;
background-position: 100% 0;
background-position: 98.99665551839465% 16.05839416058394%;
}

.svg-icons--lockicon-dims {
Expand All @@ -284,7 +294,7 @@

.svg-icons--person {
@extend %svg-common;
background-position: 100% 17.94871794871795%;
background-position: 98.99665551839465% 43.884892086330936%;
}

.svg-icons--person-dims {
Expand All @@ -294,7 +304,7 @@

.svg-icons--phone {
@extend %svg-common;
background-position: 99.32885906040268% 80.9322033898305%;
background-position: 58.91362126245847% 78.35%;
}

.svg-icons--phone-dims {
Expand All @@ -304,7 +314,7 @@

.svg-icons--right-arrow {
@extend %svg-common;
background-position: 30.18906350768813% 99.71818181818182%;
background-position: 29.884748496354288% 83.09848484848484%;
}

.svg-icons--right-arrow-dims {
Expand All @@ -314,7 +324,7 @@

.svg-logo {
@extend %svg-common;
background-position: 48.645390070921984% 46.96926521473641%;
background-position: 36.16140350877193% 57.78698429138616%;
}

.svg-logo-dims {
Expand All @@ -324,7 +334,7 @@

.svg-logo-crest {
@extend %svg-common;
background-position: 86.52482269503547% 0;
background-position: 85.6140350877193% 0;
}

.svg-logo-crest-dims {
Expand All @@ -334,7 +344,7 @@

.svg-logo-cy {
@extend %svg-common;
background-position: 31.20567375886525% 25.791486937413527%;
background-position: 48.13333333333333% 39.821909297991304%;
}

.svg-logo-cy-dims {
Expand All @@ -344,7 +354,7 @@

.svg-logo-en {
@extend %svg-common;
background-position: 18.43971631205674% 11.23466415001436%;
background-position: 30.87719298245614% 22.02912655104098%;
}

.svg-logo-en-dims {
Expand All @@ -354,7 +364,7 @@

.svg-logo-english-reversed {
@extend %svg-common;
background-position: 68.08510638297872% 53.135475431281165%;
background-position: 67.36842105263158% 45.034994109902286%;
}

.svg-logo-english-reversed-dims {
Expand All @@ -364,7 +374,7 @@

.svg-logo-welsh-reversed {
@extend %svg-common;
background-position: 68.08510638297872% 42.27298593610276%;
background-position: 67.36842105263158% 35.859595889938625%;
}

.svg-logo-welsh-reversed-dims {
Expand All @@ -374,7 +384,7 @@

.svg-ons-logo-black {
@extend %svg-common;
background-position: 49.645390070921984% 35.81312062510174%;
background-position: 49.12280701754386% 30.37415435592986%;
}

.svg-ons-logo-black-dims {
Expand All @@ -384,7 +394,7 @@

.svg-ons-logo-colour {
@extend %svg-common;
background-position: 18.43971631205674% 0;
background-position: 18.24561403508772% 0;
}

.svg-ons-logo-colour-dims {
Expand Down
1 change: 1 addition & 0 deletions _img/icons/census-logo-en.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 19 additions & 1 deletion _prototypes/individual-response--your-household-v15/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,24 @@ h4 {
}
}

.header__title {
display: block;
background: url('../img/icons/census-logo-en.svg') no-repeat 0 50%;
max-width: 100%;
height: 44px;
}

.header__title span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.btn:not(.btn--ghost):not(.btn--ghost-blue) {
-webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.8);
Expand Down Expand Up @@ -143,7 +161,7 @@ p.js-declaration {
width: 100%;
}

.panel--error a {
.panel a {
color: #4263c2;
}

Expand Down
1 change: 1 addition & 0 deletions img/icons/census-logo-en.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 619559b

Please sign in to comment.