aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/cobrands/fixmystreet/base.scss95
-rw-r--r--web/cobrands/fixmystreet/layout.scss303
2 files changed, 208 insertions, 190 deletions
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 68534f5fd..7e05a46b3 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -386,18 +386,18 @@ label{
/* form errors */
div.form-error,
p.form-error {
+ @include inline-block;
background:#ff0000;
color:#fff;
padding:0 0.5em;
- margin:0 0.6em 0 -0.5em;
- width:auto;
+ margin:0 0 0 -0.5em;
@include border-radius(0.25em 0.25em 0 0);
}
input.form-error,
textarea.form-error {
border-color:#ff0000;
- @include border-radius(0 0 0.25em 0.25em);
+ @include border-radius(0 0.25em 0.25em 0.25em);
}
// don't display valid error boxes as now the jump won't be
@@ -580,11 +580,49 @@ p.label-valid {
}
}
-//hide page footer on mobile
-.mobile #page-footer {
- display:none;
+
+//footer blocks
+#footer-mobileapps {
+ @extend .full-width;
+ padding:1em;
+ h4 {
+ margin:0;
+ }
+ ul {
+ @include list-reset-soft;
+ li {
+ border-bottom:1px solid #AFAFAF;
+ &:last-child {
+ border-bottom:none;
+ }
+ a {
+ display:block;
+ padding:0.5em 0;
+ }
+ }
+ }
}
+#footer-ads {
+ ul {
+ @include list-reset-soft;
+ li {
+ border-bottom:1px solid #AFAFAF;
+ &:last-child {
+ border-bottom:none;
+ }
+ h4 {
+ margin:0.75em 0 0.25em 0;
+ }
+ p {
+ font-size:0.75em;
+ }
+ }
+ }
+}
+
+
+
/*BUTTONS*/
// Default style set for buttons, inputs and .btn class. Red and green class available.
@@ -1025,47 +1063,4 @@ a:hover.rap-notes-trigger {
border-bottom:none;
margin-bottom:0;
}
-}
-
-#front-mobileapps {
- @extend .full-width;
- background:#333;
- padding:1em;
- @include box-shadow(inset rgba(0, 0, 0, 0.9) 0 0 8px);
- h2 {
- color:#fff;
- margin-top:0;
- }
- ul {
- @include list-reset-soft;
- li {
- border-bottom:1px solid #AFAFAF;
- &:last-child {
- border-bottom:none;
- }
- a {
- display:block;
- color:#fff;
- padding:0.5em 0;
- }
- }
- }
-}
-
-#front-ads {
- ul {
- @include list-reset-soft;
- li {
- border-bottom:1px solid #AFAFAF;
- &:last-child {
- border-bottom:none;
- }
- h4 {
- margin:0.75em 0 0.25em 0;
- }
- p {
- font-size:0.75em;
- }
- }
- }
-}
+} \ No newline at end of file
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index 1130cc61d..a19b348a1 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -184,6 +184,12 @@ body {
margin-bottom: -1em;
@include box-shadow(0px 0px 6px 1px #000);
}
+//weird margining thing for ie8
+.ie8 {
+ .wrapper .content {
+ margin-top:7em;
+ }
+}
// full width page
body.fullwidthpage {
background:#1a1a1a;
@@ -201,13 +207,145 @@ body.fullwidthpage {
width:40em;
}
}
+// two thirds width page
body.twothirdswidthpage {
@extend .fullwidthpage;
.content {
width:40em;
+ position: relative;
+ aside {
+ background:#fff;
+ position:absolute;
+ left:44em;
+ top:0;
+ width:13.5em;
+ padding:1em;
+ @include box-shadow(0px 0px 6px 1px #000);
+ }
+ }
+}
+
+
+// table wrapper
+.tablewrapper {
+ display:table;
+ width:100%;
+ padding:1em 0;
+ >div {
+ display:table-cell;
+ width:50%;
+ }
+ #footer-mobileapps {
+ border-right:1em solid #fff;
+ }
+ #footer-ads {
+ border-left:1em solid #fff;
+ }
+ .full-width {
+ width:auto;
+ margin:0;
+ }
+}
+.ie6, .ie7 {
+ .tablewrapper {
+ display:block;
+ >div {
+ width:48%;
+ display:block;
+ float: left;
+ border:none !important;
+ }
}
}
+// adds border to the top and goes full width
+.bordered {
+ margin:0 -1em;
+ padding:0 1em;
+ width:auto;
+ border-top:0.25em solid $primary;
+}
+
+//footer blocks
+#footer-mobileapps {
+ border-right:1em solid #fff;
+ background:none;
+ padding:0;
+ @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
+ h2 {
+ color:#222;
+ margin-top:0;
+ }
+ ul {
+ @include list-reset;
+ li {
+ border-bottom:none;
+ float:left;
+ margin:0 1em 1em 0;
+ a {
+ color:#222;
+ padding:0;
+ width: 96px;
+ height: 32px;
+ margin:0 auto;
+ text-indent: -999999px;
+ background: url(images/sprite.png) -12px -3610px no-repeat;
+ @include opacity(0.8);
+ &:hover {
+ @include opacity(1);
+ }
+ &.m-app-iphone {
+ background-position: -12px -3610px;
+ }
+ &.m-app-iphone-streetreport {
+ background-position: -12px -3678px;
+ height:50px;
+ }
+ &.m-app-droid {
+ background-position: -12px -3756px;
+ }
+ &.m-app-nokia {
+ background-position: -12px -3820px;
+ width:74px;
+ }
+ }
+ }
+ }
+}
+.ie6, .ie7 {
+ #footer-mobileapps {
+ margin:0 0.5em;
+ margin-right:2%;
+ }
+}
+
+#footer-ads {
+ border-left:1em solid #fff;
+ ul {
+ display:table;
+ li {
+ display:table-cell;
+ border-bottom:none;
+ &:last-child {
+ border-left:1.25em solid #fff;
+ }
+ }
+ }
+}
+.ie6, .ie7 {
+ #footer-ads {
+ margin-left:2%;
+ ul {
+ width:100%;
+ li {
+ float:left;
+ width:45%
+ }
+ }
+ }
+}
+
+
#map_box{
position: absolute;
height: 25em;
@@ -246,6 +384,11 @@ body.twothirdswidthpage {
}
}
}
+.ie8 {
+ #user-meta p {
+ top:5em;
+ }
+}
// Wraps around #key-tools box
.shadow-wrap {
@@ -290,16 +433,6 @@ body.twothirdswidthpage {
}
}
-
-// page footer - style it full width
-#page-footer {
- border-top:3px solid $primary;
- margin:1em -1em 0 -1em;
- padding:1em;
-}
-
-
-
.big-green-banner {
right:-1.25em;
margin-left:-2em;
@@ -337,12 +470,6 @@ body.twothirdswidthpage {
width: 29em;
}
-.fullwidthpage {
- .full-width {
- width:58em;
- }
-}
-
/*FORMS*/
input[type=text],
input[type=password],
@@ -354,6 +481,20 @@ textarea{
max-width:25em;
}
+
+/* form errors */
+div.form-error,
+p.form-error {
+ display:block;
+ width:25.25em;
+}
+
+input.form-error,
+textarea.form-error {
+ @include border-radius(0 0 0.25em 0.25em);
+}
+
+
/* Report a problem sidebar notes */
#report-a-problem-sidebar {
position:absolute;
@@ -457,14 +598,6 @@ body.frontpage {
}
}
//weird margining thing for ie8
-.ie8 {
- .wrapper .content {
- margin-top:7em;
- }
- #user-meta p {
- top:5em;
- }
-}
.ie8 body.frontpage {
.wrapper .content {
margin-top:5em;
@@ -474,7 +607,6 @@ body.frontpage {
}
}
-
#front-main {
background:$primary;
position:absolute;
@@ -533,55 +665,20 @@ body.frontpage {
}
}
-.front-tablewrapper {
- display:table;
- width:100%;
- padding:1em 0;
- >div {
- display:table-cell;
- width:50%;
- }
- #front-howto,
- #front-mobileapps {
- border-right:1em solid #fff;
- }
- #front-recently,
- #front-ads {
- border-left:1em solid #fff;
- }
- .full-width {
- width:auto;
- margin:0;
- }
-}
.ie6, .ie7 {
- .front-tablewrapper {
- display:block;
- >div {
- width:48%;
- display:block;
- float: left;
- border:none !important;
- }
- #front-howto,
- #front-mobileapps {
+ .tablewrapper {
+ #front-howto {
margin-right:2%;
}
- #front-recently,
- #front-ads {
+ #front-recently {
margin-left:2%;
}
}
}
-.bordered {
- margin:0 -1em;
- padding:0 1em;
- width:auto;
- border-top:0.25em solid $primary;
-}
#front-howto {
+ border-right:1em solid #fff;
#front_stats {
background:none;
border-top:0.25em solid $primary;
@@ -603,84 +700,10 @@ body.frontpage {
}
}
-#front-mobileapps {
- background:none;
- padding:0;
- @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
- h2 {
- color:#222;
- margin-top:0;
- }
- ul {
- @include list-reset;
- li {
- border-bottom:none;
- float:left;
- margin:0 1em 1em 0;
- a {
- color:#222;
- padding:0;
- width: 96px;
- height: 32px;
- margin:0 auto;
- text-indent: -999999px;
- background: url(images/sprite.png) -12px -3610px no-repeat;
- @include opacity(0.8);
- &:hover {
- @include opacity(1);
- }
- &.m-app-iphone {
- background-position: -12px -3610px;
- }
- &.m-app-iphone-streetreport {
- background-position: -12px -3678px;
- height:50px;
- }
- &.m-app-droid {
- background-position: -12px -3756px;
- }
- &.m-app-nokia {
- background-position: -12px -3820px;
- width:74px;
- }
- }
- }
- }
-}
-.ie6, .ie7 {
- #front-mobileapps {
- margin:0 0.5em;
- }
-}
-#front-ads {
- ul {
- display:table;
- li {
- display:table-cell;
- border-bottom:none;
- &:last-child {
- border-left:1.25em solid #fff;
- }
- }
- }
+#front-recently {
+ border-left:1em solid #fff;
}
-.ie6, .ie7 {
- #front-ads {
- ul {
- width:100%;
- li {
- float:left;
- width:45%
- }
- }
- }
-}
-
-
-
-
-
/* MEDIA QUERIES */
@media only screen and (min-width: 48em) and (max-width: 64em) {