aboutsummaryrefslogtreecommitdiffstats
path: root/web/cobrands/sass/_layout.scss
diff options
context:
space:
mode:
Diffstat (limited to 'web/cobrands/sass/_layout.scss')
-rw-r--r--web/cobrands/sass/_layout.scss421
1 files changed, 119 insertions, 302 deletions
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 7e56d31bd..a0c27863e 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -2,17 +2,18 @@
$image-sprite: '../fixmystreet/images/sprite.png' !default;
$layout_front_stats_color: $primary !default;
-$mappage-header-height: 4em !default;
+$mappage-header-height: 4em !default; // eg: might want this to equal outer height of #site-header on normal pages
$mappage-sidebar-width: 29em;
$mappage-sidebar-padding: 1em;
-$mappage-with-notes-sidebar-width: 44em;
-$mappage-with-actions-sidebar-width: 58em;
+$mappage-notes-width: 15em;
+$mappage-actions-width: 25em;
+$mappage-sidebar-width--medium: 24em;
+$mappage-actions-width--medium: 20em;
+$header-top-border-width: 0.25em !default;
+$header-top-border: $header-top-border-width solid $primary !default;
.internal-link-fixed-header {
display: block;
- /* Roughly the height of .nav-wrapper-2 (mappage-header-height) plus the
- * border-top on .nav-wrapper-2 (4px), plus the padding-top on
- * .item-list__item (0.5em). */
@if unit($mappage-header-height) == 'em' {
padding-top: $mappage-header-height + 1em;
margin-top: -($mappage-header-height + 1em);
@@ -27,7 +28,8 @@ $mappage-with-actions-sidebar-width: 58em;
display: block;
}
.mob-only {
- display: none;
+ // Override `display: block` etc if other classes are defined
+ display: none !important ;
}
body {
@@ -46,80 +48,32 @@ h1 {
// Page wrapper and header bits follow
-.container{
- margin: 0 auto;
- padding: 0em;
- width: 60em;
- position: relative;
-}
-
-.wrapper{
- display: table;
- caption-side: top;
- width: 100%;
- .table-cell {
- display:table-cell;
- }
-}
-
-//pad the top of the wrapper to allow space for the menu to fit in
-//when its positioned absolute below
-.ie7 {
- .wrapper {
- padding-top:4em;
- }
-}
-
-.nav-wrapper {
- display: table-caption;
- .nav-wrapper-2 {
- width: 100%;
- min-height: 4em;
- position: absolute;
- border-top: 4px solid $primary;
- border-width: 4px 0 0 0;
- z-index: 2;
- }
+.container {
+ position: relative;
}
-//position absolute the menu as ie doesn't like display:table
-.ie7 {
- .nav-wrapper {
- position: absolute;
- top:0;
- #{$left}: 0;
- width:100%;
- .nav-wrapper-2 {
- // position static as well so we fix lots of the z-index issues
- position:static;
- }
- }
+// Body sometimes has a .top_banner at the start, which we don't want to
+// cover up when we absolutely position the nav to the top of the body.
+// So make .wrapper into a new positioning context for the nav.
+.wrapper {
+ position: relative;
}
-// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop
-#site-header {
- height: auto;
- background: none;
- border-top: 0px;
- // margin-top: 4px; <-- With this we compensate for 4px of content due to
- // .nav-wrapper-2's border-top, but misaligns e.g. FAQ page
- .container {
- position: static;//reset position so the nav links become clickable
- }
-
- .ie7 & {
- height: 3em;
- // Without this, the #site-logo is unclickable.
- // Something to do with broken z-index nesting in IE6-7.
- z-index: 2;
+#main-nav {
+ min-height: $mappage-header-height; // defaults to map header height; should be height of #site-header (eg: #site-logo + any vertical padding)
+ @include flex-container();
+ @include flex-align(center);
+ float: $right; // we could use justify-content here, but float degrades better for non-flexbox browsers
+ margin: 0;
+ @if ($header-top-border) {
+ margin-top: $header-top-border-width * -1; // visually compensate for border on #site-header
}
}
#site-logo {
- top: 0.9em;
- #{$left}: auto;
- position: absolute;
- z-index: 3;
+ // Bring #site-logo in front of .nav-wrapper (which has no z-index) so that it's clickable
+ position: relative;
+ z-index: 1;
}
#nav-link {
@@ -127,24 +81,27 @@ h1 {
#{$left}: -999999px;
}
-#report-cta {
+#report-cta,
+.nav-menu__item--privacy {
display: none;
}
-#main-nav {
- margin: 0 auto;
- padding: 0;
- width: 60em;
+.nav-wrapper {
+ position: absolute;
+ @if ($header-top-border) {
+ top: $header-top-border-width;
+ } @else {
+ top: 0;
+ }
+ left: 0;
+ right: 0;
}
+
.nav-menu {
float: $right;
li {
- display: inline;
float: $left;
}
- li.nav-menu__item--privacy {
- display: none;
- }
a, span {
display: block;
color: $nav_fg;
@@ -174,85 +131,38 @@ h1 {
color:$primary;
}
}
-.nav-menu--mysoc {
- padding: 0em 0.5em;
- margin-#{$left}: 0.25em;
- background-color: $primary;
- @include border-radius(0 0 0.375em 0.375em);
- a {
- background-color: transparent;
- color: $primary_text;
- text-transform: uppercase;
- font-size: 0.6875em;
- padding: 1.3em 0.7em 1em;
- &:hover {
- color: #fff;
- background-color: transparent;
- }
- }
-}
-#mysoc-logo {
- width:84px;
- height:16px;
- background-size: 100px auto;
- background-position: 50% 50%;
- opacity: 0.8;
- &:hover {
- opacity: 1;
- }
- // IE8 does not support background-size, so increase width to show whole image
- .ie8 & {
- width: 100px;
- }
-}
-.ie7 #mysoc-logo {
- background-position: -260px -43px;
-}
// .content Is the white box
-
-// The narrow single column box
.content {
- width: 27em;
- margin: 3em 0.5em -1em;
- padding: 1em 1em 3em;
+ margin: 1em 0 0 0;
+ padding: 1em;
background: #fff;
color: #222;
}
-.iel8 {
- .content {
- //take off margins so we line up properly
- margin: 0 0.5em;
- }
-}
-
-.full-width {
- margin: 0 ($mappage-sidebar-padding * -1);
-}
// map page - has fixed header and different styling
body.mappage {
-
- .wrapper .table-cell,
- .nav-wrapper {
- // No need for the table-cell stuff now we're using absolute positioning
- display: block;
+ .wrapper {
+ position: static;
}
.container {
- width: auto;
+ max-width: none;
position: static;
}
.content {
- width: auto;
padding: 0;
margin: 0;
}
+ .full-width {
+ margin: 0 ($mappage-sidebar-padding * -1);
+ }
+
#site-header {
// With the exception of the #site-logo child, the rest of
- // #site-header gets entirely hidden behind .nav-wrapper-2
+ // #site-header gets entirely hidden behind the navigation
position: absolute;
z-index: auto;
top: 0;
@@ -261,49 +171,14 @@ body.mappage {
height: $mappage-header-height;
}
- #site-logo {
- #{$left}: 12px;
- // Also inherits...
- // `top: 0.9em`
- // `position: absolute`
- // `z-index: 3`
- // ...from the non-mappage version, above
- }
-
- #main-nav {
- width: auto;
- margin-#{$right}: 1em;
- }
-
- .nav-wrapper {
- .nav-wrapper-2 {
- position: absolute;
- z-index: auto;
- top: 0;
- left: 0;
- right: 0;
- background: $map_nav_bg;
-
- // Watch out! If the nav links break onto two lines, the header will
- // get taller, and overlap the top of #map_sidebar and #map_box.
- // (But at least the nav links will be legible.)
- min-height: $mappage-header-height;
-
- // Count the 4px border-top as part of the height (mappage-header-height)
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- }
-
- .nav-menu--main a, .nav-menu--main span {
- padding: 1.4em 0.75em 1.35em;
- }
-
- .nav-menu--main a.report-a-problem-btn {
- padding: 0.5em;
- margin: 0.9em 0.25em 0.85em;
- }
+// .nav-menu--main a, .nav-menu--main span {
+// padding: 1.4em 0.75em 1.35em;
+// }
+//
+// .nav-menu--main a.report-a-problem-btn {
+// padding: 0.5em;
+// margin: 0.9em 0.25em 0.85em;
+// }
.banner {
p {
@@ -312,23 +187,6 @@ body.mappage {
}
}
-.ie7 {
- body.mappage {
- // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove.
- .container {
- float: $left;
- width: 27em;
- margin-#{$left}: 0.7em;
- }
- .nav-wrapper{
- z-index:1;
- .nav-wrapper-2 {
- position:static;
- }
- }
- }
-}
-
// Want to cover over the blue sidebar
body.mappage.admin {
.full-width--top {
@@ -353,11 +211,15 @@ body.mappage.admin {
margin: 0;
.with-notes & {
- #{$left}: $mappage-with-notes-sidebar-width;
+ #{$left}: $mappage-sidebar-width + $mappage-notes-width;
}
.with-actions & {
- #{$left}: $mappage-with-actions-sidebar-width;
+ #{$left}: $mappage-sidebar-width + $mappage-actions-width;
+
+ @media (max-width: 79em) {
+ #{$left}: $mappage-sidebar-width--medium + $mappage-actions-width--medium;
+ }
}
}
@@ -371,23 +233,27 @@ body.mappage.admin {
padding: $mappage-sidebar-padding;
overflow: auto; // vertical scrollbar when list is taller than window
background-color: #fff; // since no longer in the flow inside .content
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
.with-notes & {
- width: ($mappage-with-notes-sidebar-width - ($mappage-sidebar-padding * 2));
+ width: (($mappage-sidebar-width + $mappage-notes-width) - ($mappage-sidebar-padding * 2));
// TODO: Should have a bitmap image fallback for old browsers!!
background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
}
.with-actions & {
- width: $mappage-with-actions-sidebar-width;
+ width: $mappage-sidebar-width + $mappage-actions-width;
max-width: 100%; // Secondary column will squish on screens 768-960px
padding: 0; // Padding will be handled by children of .two_column_sidebar
&:after {
display: none; // 4em bottom spacing will be handled by children of .two_column_sidebar
}
+
+ @media (max-width: 79em) {
+ width: $mappage-sidebar-width--medium + $mappage-actions-width--medium;
+ }
}
// Chrome/Safari count padding-bottom as part of the scrollable content in
@@ -435,13 +301,27 @@ body.mappage.admin {
#side-report {
width: $mappage-sidebar-width;
@include flex(0 0 auto);
+
+ @media (max-width: 79em) {
+ width: $mappage-sidebar-width--medium;
+ }
+ }
+
+ // Line up edge of .shadow-wrap with edge of #side-report
+ .shadow-wrap {
+ width: $mappage-sidebar-width;
+
+ @media (max-width: 79em) {
+ width: $mappage-sidebar-width--medium;
+ }
}
- // No flexbox in IE8, so we settle for floating the columns instead.
+ // No flexbox in IE8-9, so we settle for floating the columns instead.
// They will no longer stretch the full height of the sidebar, and the
// width of #side-report will no longer match the width of .shadow-wrap
// when a scrollbar is present.
- .iel8 & {
+ .iel8 &,
+ .ie9 & {
@include clearfix();
& > * {
@@ -494,20 +374,10 @@ body.mappage.admin {
}
}
-
-// full width page
-body.fullwidthpage {
- .content {
- width: auto;
- }
-}
-
body.twothirdswidthpage,
body.fullwidthpage {
.container {
.content {
- padding: 1em;
- margin-bottom: 0em;
footer {
margin-top: 0em;
margin-bottom: -1em;
@@ -562,7 +432,7 @@ body.fullwidthpage {
// two thirds width page, also has option for a sidebar which can be sticky or not
body.twothirdswidthpage {
- .container {
+ #site-header + .container {
// This used to be on all containers, but there was a bug in Chrome, so now
// it's just here so that the sidebar links are still clickable with their
// negative z-index.
@@ -597,16 +467,26 @@ body.twothirdswidthpage {
}
}
}
+
+ @media (max-width: 61em) {
+ // make twothirdswidthpage nearly as small as main
+ // .content: just enough to still fit the sidebar in
+ .content {
+ width:30em;
+ .sticky-sidebar {
+ #{$left}: 32em;
+ }
+ }
+ }
}
// Centre the login and password change pages,
// but keep them narrow to match the report sidebar
body.authpage {
.content {
+ width: 27em;
margin-#{$left}: auto;
margin-#{$right}: auto;
- margin-bottom: 0;
- padding: 1em; // same as .twothirdswidthpage .content
}
}
@@ -623,7 +503,6 @@ body.authpage {
width:50%;
}
.full-width {
- width:auto;
margin:0;
}
}
@@ -650,6 +529,11 @@ body.authpage {
border-top:0.25em solid $primary;
}
+// Shown at bottom of homepage, among other places
+.footer-marketing {
+ width: 100%;
+}
+
//footer blocks
#footer-mobileapps {
border-#{$right}: 1em solid transparent;
@@ -776,6 +660,7 @@ body.authpage {
border:none;
a, input[type=submit] {
font-size: 0.75em;
+ line-height: 18px; // match `body`
color:#666;
padding: flip(0.5em 1.5em 0.5em 0, 0.5em 0 0.5em 1.5em);
text-transform:none;
@@ -943,7 +828,11 @@ textarea.form-error {
// The coloured sidebar column on .with-actions pages.
#side-inspect {
- background-color: #E9F2FF;
+ margin: 0;
+}
+
+.inspect-form-heading {
+ display: none;
}
// More general notes
@@ -953,46 +842,6 @@ textarea.form-error {
// Frontpage
-body.frontpage {
- .table-cell {
- .content {
- margin: 1em 0.5em 0;
- }
- }
- .nav-wrapper-2{
- height:6em;
- }
- #site-header{
- height:8em;
- }
- #site-logo{
- top:3em;
- width: 300px;
- height: 60px;
- background: url($image-sprite) -2px -108px no-repeat;
- }
-}
-//logo fix
-.iel8 {
- body.frontpage {
- #site-logo {
- position:relative;
- width:60em;
- margin:0 auto;
- }
- }
-}
-.ie7 {
- body.frontpage {
- #site-header {
- height:4em;
- }
- #site-logo {
- top:-1em;
- }
- }
-}
-
// big yellow bit full screen width
#front-main {
color: $primary_text;
@@ -1111,6 +960,15 @@ body.frontpage {
}
}
+.alerts__columns {
+ @include clearfix;
+ @include flex-container();
+ > div {
+ width: 50%;
+ margin: 0 2em;
+ }
+}
+
.confirmation-header {
width: 25em;
margin: 0 auto 1em;
@@ -1125,44 +983,3 @@ body.frontpage {
float: $right;
width: 25%;
}
-
-/* MEDIA QUERIES */
-@media only screen and (min-width: 48em) and (max-width: 61em) {
- .container {
- width: 100%;
- }
-
- // Remove central positioning of mainmenu and float right.
- // Left padding is to ensure no overlap of the site-logo
- // Background styling replicates header styling
-
- #main-nav {
- width: auto;
- float: $right;
- padding-#{$left}: 180px;
- }
-
- #mysoc-logo {
- width: 16px;
- // Just the mySociety circle logo
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJ9JREFUeNqsVXlMHFUYf/Pe7O7M7E2Xw6UFWg5LQ1GTosa0IT00wYbGaKoltWnaRGNrjIptiUalXqlJU9RU0fSPHtqCR20pliBpQpAmxQgoLDeLQIEuh2WBndmDnZn3fMvRsqEGVv0mv3lzvPd97/u97wBgmXLUbHvOFZ/cJK1KbTtmiX4F/J+ySzBuDiakeSdWphA3RSAhTX3NaN2znLVwyQkMA/YbzAcwAAIFIBSYELjPYH6Zpf9CwrEMeGS1zhalh2zEBkIq2NCdkDvfyOxCRqHfnnpIWN9caK+5URDX2VJob8zfZsqJyIBKlVzweU7pIMIC3TFHIUAISkSx2GKE2uK8qNK0ODZbVsgKuwllnthp/S4rUZs0vx4th0dHcLp3FCv1VogEL8G9Jz2THx4Tx79+Yh23/oVs4zuBwKx3CuWQ5aHO5VYba7oDDjDj/TJEpSgWJytD0FAP5Dm6PD4ySZmSIUM0+C6DoGdUdkXkwULBC56HJtRJuxFpsu7nsll60CwHQY3D/8PRq1NFQZXg+TP8TwKphhc3GXPS4zWP9tySm07XSZe9MgkLEpCuX5uZZdqQBwEM1nsaStq87V3/xtjGTVzKB29bj0RZkK2s3PvTJ59PnWG2Rm3esTP2mW80gDUByq+CFffJoS+2tkrtTZEoz80R1pVfjrsBEGMGCvWAQ+DsV5MFcLstp0jFqsmH/cCn+qjLMGqLdcvrcOkIDpO9eYY9QMuYVRED1U8A8Sjg6Vz9AahH+mi84OhCzwISbAwT8fFoFr6EjlgvMAh2eDtP85AP7XwGHORAi9R6USVqRNrPlUqlIEgCSM8ApGMAtCBw/nvpLGqR2qoFxIMYbUwCJvh2tbv6oyt/lX8Z6fa7e+Thdsd0bdpa7QqvF49UlPmKXz0y/vEdHqyshaeDH2lNNoPGmhlUfQMuydmzHOX2VENMTKKQ0OMQu6Qxv8hqaLDMhWoY0VlxuXkPx24vZhhooa/elts1hddvfXsCE/yPyrftTdj15ME1n3J6FOsTlbFrZwbeqDrVdz4sD0Ji41fan019q1MF2Ego/wy9NIjDl5zHM1xeZ8e9lMenGuIPl2zoIIAxqjIGiO4cIeg/vrs+fbBDvBlWi3RISKF5YCQYz5XkGRchx+rT6djBpzyYaM3Zl0ftaqd++fGSt7m2NTqBT9dwyOgXldmaRWnRcgyflGnKWGTAr0hOTFQPjSQTHWciihCCJd9IM/fAxuTV712shTreHppreXz3of739+dMDFW1E0wUBjIsHQGt4gDT8BtsF52L+oE74BquH7l6kFIzoYE6agBJv49V5o/JI39G5750mNFydlWaAiHQOca45/Pfvdk17bp2ur+AM6CAYGKBlkdyQ+Xom4OdYve83rBy3Tj284U+T/N1njUmBVTf0Lh/qBdABDQ2+31Elu8mkaoAyAsxgHbIK5/1FnX9NlmVmGFa0/vHVL+zYaJloc5F/cAdGB4AIIT51FaBWFdRps94bIciB2ZaJ+T1wNf2azmYS8bOOndbCPcKhGX1g0BfqwPpzUS3Ki0ZanVeT13FuZHiQ4UkOK0stfZvAQYA/wr53nPx8cUAAAAASUVORK5CYII=);
- background-size: auto;
- }
-
- //Revert to mobile use of the .full-width class
- .full-width{
- width: auto;
- margin: 0em -1em;
- }
-
- //make twothirdswidthpage nearly as small as main
- //.content: just enough to still fit the sidebar in
- body.twothirdswidthpage {
- .content {
- width:30em;
- .sticky-sidebar {
- #{$left}: 32em;
- }
- }
- }
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-05 10:03:26 +0000