diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/cobrands/fixmystreet/base.scss | 95 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 303 |
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) { |