diff options
Diffstat (limited to 'assets/stylesheets/responsive/custom.scss')
| -rw-r--r-- | assets/stylesheets/responsive/custom.scss | 716 |
1 files changed, 509 insertions, 207 deletions
diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index 9debf2f..12bf0b7 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -1,76 +1,37 @@ -$color_sand: #f7eee1; -$color_light_blue: #67848C; -$color_blue: #336C86; -$color_dark_blue: #2c5d74; -$color_darker_blue: #354C56; -$color_red: #8c6673; -$color_dark_red: #A1432C; -$color_teal: #6d918d; -$color_green: #8b9352; -$color_bright_green: #839310; -$color_light_green: #AAB26E; -$color_pale_green: #D7DABD; -$color_orange: #CC8245; -$color_bright_orange: #FF7959; -$color_pale_orange: #EBC3A9; -$color_yellow: #E69E5D; -$color_pale_yellow: #EDD3B8; -$color_black_alt: #3d3b38; +$color_sand: #f3f1eb; $color_black: #333333; -$color_mid_grey: #999999; -$color_light_grey: #CCCCCC; -$color_lighter_grey: #D3D3D3; -$color_mid_cold_grey: #9AA6AB; +$color_orange: #f4a140; +$color_blue: #4faded; +$color_green: #62b356; +$color_yellow: #ffd836; +$color_red: #e04b4b; +$color_violet: #a94ca6; +$color_purple: #5c377f; $color_white: #ffffff; -$body-bg: $color_sand; +$color_neutral_light: $color_sand; +$color_neutral_dark: $color_black; +$color_primary: $color_violet; +$color_secondary: $color_orange; -$locale-bg: $color_black; -$locale-color: $color_mid_grey; -$locale-hover-color: $color_white; +$body-bg: $color_neutral_light; -$body-font-color: $color_black; -$link-color: $color-blue; -$heading-color: $color_black-alt; -$font-family: "Roboto Slab", Georgia, serif; -$sans-serif-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +$body-font-color: $color_neutral_dark; +$link-color: darken($color_blue, 20%); +$action-color: $color_green; +$font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; $form_input-bg: $color_white; -$button-bg: $color_green; +$button-bg: $action-color; $button-color: $color_white; -$banner_bg: $color_darker_blue; +$status-success: $color_green; +$status-failure: $color_red; +$status-pending: $color_orange; -$main_menu-bg: $color_dark_blue; -$main_menu-search_text: $color_black; -$main_menu-link_text: $color_white; -$main_menu-search_bg: $color_light_blue; -$main_menu-link_bg: $color_dark_blue; -$main_menu-active_link_text: $main_menu-link_bg; -$main_menu-active_link_bg: $body-bg; -$submenu-color: $color_mid_cold_grey; - -$footer-bg: $color_black; -$footer-color: $color_light_grey; -$footer-link-color: $color_white; - -$incoming-correspondence-color: $color_red; -$outgoing-correspondence-color: $color_teal; -$correspondence-bg: $color_white; -$correspondence-shadow: $color_light_grey; - -$status-success: $color_light_green; -$status-failure: $color_bright_orange; -$status-pending: $color_yellow; - -$notice-bg: $color_pale_green; -$notice-border: $color_bright_green; - -$error-bg: $color_pale_orange; -$error-border: $color_dark_red; - -$action-bg: $color_pale_yellow; -$action-border: $color_orange; +$notice-color: $color_green; +$error-color: $color_red; +$action-color: $color_orange; /* Mixin styles */ @@ -84,16 +45,14 @@ $action-border: $color_orange; /* General styling of nav menu items */ %menu-item { text-decoration: none; - background-color: $main_menu-link_bg; - color: transparentize($main_menu-link_text, 0.2); + color: transparentize($color_white, 0.2); @include ie8 { - color: $main_menu-link_text; + color: $color_white; } transition: background-color 0.5s ease-out; - &:hover{ - background-color: darken($main_menu-bg, 5%); - color: transparentize($main_menu-link_text, 0); + background-color: darken($color_primary, 15%); + color: $color_white; } } @@ -101,22 +60,10 @@ $action-border: $color_orange; /* Selected menu item */ %selected-menu-item { font-weight: bold; - color: $main_menu-active_link_text; - background-color: $main_menu-active_link_bg; + color: $color_primary; + background-color: $color_neutral_light; &:hover{ - background-color: $main_menu-active_link_bg; - } -} - -/* Styling if not part of the main menu on larger screens */ -%sub-menu-item { - @include respond-min( $main_menu-mobile_menu_cutoff ){ - background-color: $banner_bg; - color: $submenu-color; - &:hover{ - background-color: $banner_bg; - color: transparentize($main_menu-link_text, 0); - } + background-color: $color_neutral_light; } } @@ -130,13 +77,16 @@ body{ font-family: $font-family; } -a{ - color: $link-color; -} - -h1, h2, h3, h4, h5, h6 { - color: $heading-color; - font-family: $font-family; +a { + &:link, + &:visited { + color: $link-color; + } + &:hover, + &:active, + &:focus { + color: darken($link-color, 10%); + } } /* Let h1s be a little smaller on small screens */ @@ -171,75 +121,121 @@ input.use-datepicker[type=text] { background:image-url('calendar.png') no-repeat 100px 5px $form_input-bg; } -form input[type=submit], a.link_button_green, a.link_button_green_large { - text-decoration: none; - color: $button-color; - background-color: darken($button-bg, 5%); +/* Button styles */ + +@mixin button-base($size: normal, $disabled: false) { + padding: 0.5em 1.25em; + border-radius: 3px; display: inline-block; - cursor: pointer; - /* This style is expressed for all borders to avoid triggering an IE9 border rendering bug */ - border-style: solid; border-color: darken($button-bg, 15%); border-width: 0 0 4px 0; - border-radius: 0; - padding: 3px 7px; - line-height: normal; - font-size: 1.1rem; - /* Same height as form elements */ - height: 2.3125rem; - @include ie8 { - height: 2.3125em; - font-size: 1.1em; - } - vertical-align: top; - &:focus, &:hover{ + font-weight: 600; + text-decoration: none; + transition: background-color 300ms ease-out; + margin-bottom: 0; + font-family: $font-family; + @if $size == large { + font-size: 2.2em; + } + &:hover, + &:active, + &:focus { text-decoration: none; - background-color: darken($button-bg, 10%); - border-bottom: 4px solid darken($button-bg, 20%); + transition: background-color 300ms ease-out; + } + @if $disabled { + opacity: 0.333; + transition: none; + &:hover, + &:active, + &:focus { + background-color: inherit; + color: inherit; + cursor: default; + transition: none; + } } } -@include lte-ie7{ +@mixin button-primary($args...) { + @include button-base($args...); + color: $color_white; + background-color: $button-bg; + border: none; + &:hover, + &:active, + &:focus, + &:visited:hover, + &:visited:active, + &:visited:focus { + background-color: darken($button-bg, 10%); + color: $color_white; + } +} - a.link_button_green, a.link_button_green_large { - padding: 0 7px; - height: 31px; - font-weight: bold; +@mixin button-secondary($args...) { + @include button-base($args...); + background-color: desaturate(darken($color_sand, 10%), 5%); + color: $color_black; + font-weight: normal; + &:hover, + &:active, + &:focus { + color: $color_black; + background-color: desaturate(darken($color_sand, 20%), 5%); } +} - form input[type=submit] { - padding: 0; - height: 35px; +@mixin button-tertiary($args...) { + @include button-base($args...); + background-color: desaturate(darken($color_sand, 5%), 5%);; + color: $color_black; + font-weight: normal; + border: 1px solid desaturate(darken($color_sand, 15%),5%); + &:hover, + &:active, + &:focus { + background-color: darken($color_sand, 7.5%); + border: 1px solid desaturate(darken($color_sand, 25%),5%); } } +form input[type=submit], a.link_button_green, a.link_button_green_large { + @include button-primary; + text-decoration: none; +} + a.link_button_green_large { - font-size: 2.2rem; - height: inherit; - padding: 0 10px; - @include ie8 { - font-size: 2.2em; - height: 66px; - } - @include lte-ie7 { - height: 50px; - } + @include button-primary($size: large); } /* Popups */ .popup { - background-color: $notice-bg; - border: 3px solid $notice-border; + background-color: desaturate(lighten($notice-color, 30%),10%); + border: 3px solid $notice-color; } /* Header */ #banner_inner { - background-color: $banner-bg; + background-color: $color_primary; } #topnav { - background-color: $main_menu-bg; + background-color: darken($color_primary, 10%); +} + +.site-title__logo { + // Smaller logo on mobiles + width: ($logo-width / 2); + height: ($logo-height / 2); + background-size: ($logo-width / 2) ($logo-height / 2); + + @include respond-min( $main_menu-mobile_menu_cutoff ){ + width: $logo-width; + height: $logo-height; + background-size: $logo-width $logo-height; + } } #navigation{ @@ -274,15 +270,12 @@ a.link_button_green_large { } #navigation_search_button{ - background-color: mix($main_menu-search_bg, $main_menu-bg, 50%); + background-color: $color_white; border: none; transition: all 0.3s ease-out; - color: $main_menu-search_text; + color: $color_primary; border-radius: 0; font-size: inherit; - &:focus{ - background-color: $form_input-bg; - } } } @@ -293,8 +286,7 @@ a.link_button_green_large { #notice, #error, .errorExplanation, #request_header_text, #hidden_request, .describe_state_form form, .undescribed_requests, .warning { border-top: 10px solid; - font-size: 1.2em; - border-radius: 0; + font-size: 1em; margin:1em 0; padding: 1.5em; @@ -312,69 +304,210 @@ a.link_button_green_large { } #notice, #request_header_text { - background-color: $notice-bg; - border-color: $notice-border; + background-color: desaturate(lighten($notice-color, 30%),10%); + border-color: $notice-color; } #error, .errorExplanation, #hidden_request, .warning { - background-color: $error-bg; - border-color: $error-border; + background-color: desaturate(lighten($error-color, 30%),10%); + border-color: $error-color; } .undescribed_requests { - background-color: $action-bg; - border-color: $action-border; + background-color: desaturate(lighten($action-color, 30%),10%); + border-color: $action-color; } /* Logged and local options act like submenus */ #logged_in_bar{ a { @extend %menu-item; - @extend %sub-menu-item; + background-color: transparent; font-weight: normal; + color: $color_white; + &:hover, + &:active, + &:focus { + background-color: transparent; + } } #logged_in_links { - top: 4em; - .greeting, a { + top: 2em; + a { font-weight: normal; } } } +/* LANGUAGE SWITCHER */ #user_locale_switcher { - @include respond-min( $main_menu-mobile_menu_cutoff ){ - background-image: image-url('locale-switcher.png'); - background-repeat: no-repeat; - background-position: 0.5em 0.5em; - background-color: $locale-bg; - border-radius: 0 0 1.25em 1.25em; - padding: 0 1em 0 2.5em; - right: 15px; + background-color: $color_primary; + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: transparent; } - a { - @extend %menu-item; - font-family: $sans-serif-font-family; - @include respond-min( $main_menu-mobile_menu_cutoff ){ - padding: 0.5em 0.2em; - background-color: $locale-bg; - border-radius: 0 0 1.25em 1.25em; - color: $locale-color; - &:hover{ - background-color: $locale-bg; - color: $locale-hover-color; +} + +/* Dropdown list for switching locale */ +.locale-list { + border-bottom: 0; + @include respond-min($main_menu-mobile_menu_cutoff) { + position: absolute; + left: ($logo-width + 40px); + top: 2.2em; + right: auto; + } + .locale-list-trigger { + margin-bottom: 0; + color: $color_white; + color: transparentize($color_white, 0.8); + @include respond-min($main_menu-mobile_menu_cutoff) { + margin-top: 0; + border: 1px solid desaturate(lighten($color_primary, 5%), 5%); + border-radius: 3px; + color: $link-color; + padding: 0; + } + } +} + +.locale-list-trigger .current-locale { + position: relative; + z-index: 999; + border-radius: 3px; + color: $color_white; + @include respond-min($main_menu-mobile_menu_cutoff) { + padding: 0.66em 2em 0.66em 0.66em; + } +} + +.locale-list-trigger .current-locale:after { + display: block; + position: absolute; + content: ''; + right: 10px; + top: 12px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + @include ie8 { + border-top: 5px solid $color_white; + } + border-top: 5px solid transparentize($color_white, 0.6); +} + +.locale-list-trigger .current-locale, +.locale-list .available-languages a { + display: block; + cursor: pointer; + font-weight: normal; + @include respond-min($main_menu-mobile_menu_cutoff) { + font-size: 0.8125em; + line-height: 1em; + } +} + +.locale-list .available-languages { + display: none; + padding: 0; + margin-bottom: 0; + margin-top: 0; + font-size: 0.8125em; + @include respond-min($main_menu-mobile_menu_cutoff) { + position: absolute; + top: 2em; + left: 0; + z-index: 1000; + border-radius: 3px; + font-size: 1em; + width: 100%; + } + +} + +.locale-list li { + list-style-type: none; + border-bottom: 1px solid desaturate(lighten($color_primary, 3%), 5%); + @include respond-min($main_menu-mobile_menu_cutoff) { + border-bottom-color: $color_neutral_dark; + display: block; + } + &:last-child { + @include respond-min($main_menu-mobile_menu_cutoff) { + border-bottom: 0; + a { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; } } } } +.locale-list .available-languages a, +.locale-list .available-languages a:link, +.locale-list .available-languages a:visited { + display: block; + background-color: $color_primary; + padding: 0.66em 1em; + width: 100%; + text-decoration: none; + color: transparentize($color_white, 0.2); + @include ie8 { + color: $color_white; + } + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: lighten($color_neutral_dark, 6%); + } + transition: background-color 0.5s ease-out; +} -#banner { +.locale-list .available-languages a:hover, +.locale-list .available-languages a:focus { + border-bottom: none; + background-color: darken($color_primary, 5%); + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: $color_neutral_dark + } + color: $color_white; - /* locale border */ - @include respond-min( $main_menu-mobile_menu_cutoff ){ - border-top: 4px solid $locale-bg; +} + +/* JS interactivity */ +.no-js .locale-list .available-languages, +.locale-list.active .available-languages { + display: block; +} + +.locale-list.active .current-locale { + background-color: $color_primary; + color: $color_white; + border-color: $color_primary; + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: lighten($color_neutral_dark, 6%); + border-bottom: 1px solid lighten($color_neutral_dark, 2%); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} + +.locale-list.active .current-locale:after { + @include ie8 { + border-top-color: $color_white; } + border-top-color: transparentize($color_white, 0.6); +} + + +.locale-list.active .locale-list-trigger { + border-color: transparent; + @include respond-min($main_menu-mobile_menu_cutoff) { + border-color: $color_neutral_dark; + } +} + + +#banner { /* Hide the greeting on smaller devices */ .greeting { @@ -383,9 +516,8 @@ a.link_button_green_large { .rsp_menu_button{ position: absolute; - top: 0; - /* 15px for margin minus 9 for background offset*/ - right: 4px; + top: 5px; // vertically centre the button in the header + right: 4px; // 15px for margin minus 9 for background offset @extend .image-replacement; background-image: image-url('hamburger.png'); background-repeat: no-repeat; @@ -401,6 +533,13 @@ a.link_button_green_large { } } + &:target { + .rsp_menu_button { + top: 5px; + right: 4px; + } + } + /* Pad evenly top and bottom on smaller devices */ #logo_wrapper{ @@ -422,44 +561,55 @@ a.link_button_green_large { /* Footer */ #footer { - background-color: $footer-bg; - color: $footer-color; - padding: 2em 4em; - font-family: $sans-serif-font-family; + background-color: $color_neutral_dark; + color: darken($color_neutral_light, 10%); a { text-decoration: none; - color: $footer-link-color; + color: $color_white; + &:hover, + &:active, + &:focus { + color: lighten($color_primary, 10%); + text-decoration: underline; + } } - ul > li:nth-child(4n+1) { - padding-top: 0; +} + +.footer__about { + h2 { + color: $color_white; } +} - ul li { - padding: 1em 0 0 0 ; - text-align: bottom; +.footer__final { + .row { + border-top: 1px solid lighten($color_neutral_dark, 6%); } } /* Request page */ div.correspondence { - background-color: $correspondence-bg; + background-color: $color_white; + box-shadow: 0 2px 2px transparentize($color_black, 0.8); + border: none; + border-radius: 5px; + margin-bottom: 2em; } .incoming.correspondence { - border: none; - border-top: 8px solid $incoming-correspondence-color; - box-shadow: 0 3px 3px $correspondence-shadow; + border-top: 8px solid $color_secondary; + a { + color: $color_secondary; + } a.link_to_this { - background-color: $incoming-correspondence-color; + background-color: $color_secondary; } } .outgoing.correspondence { - border: none; - border-top: 8px solid $outgoing-correspondence-color; - box-shadow: 0 3px 3px $correspondence-shadow; + border-top: 8px solid $color_primary; a.link_to_this { - background-color: $outgoing-correspondence-color; + background-color: $color_primary; } } @@ -474,7 +624,7 @@ a.link_to_this { } background-position: center center; background-repeat: no-repeat; - background-size: 70% 70%; + background-size: 14px; border-radius: 50%; height: 20px; width: 20px; @@ -483,9 +633,9 @@ a.link_to_this { #link_box { font-family: $font-family; border-radius: 0; - border: 1px solid $heading-color; + border: 1px solid $color_neutral_dark; .close-button { - background-color: $correspondence-bg; + background-color: $color_secondary; float: right; } } @@ -494,17 +644,29 @@ a.link_to_this { padding: 0; form{ - background-color: $action-bg; - border-color: $action-border; + background-color: desaturate(lighten($action-color, 30%),10%); + border-color: $action-color; h2 { margin-top: 0; } hr { - border-color: $action-border; + border-color: $action-color; } } } +.feed_link_sidebar .link_button_green { + @include button-primary(); +} + +.report-this-request { + @include button-secondary(); + color: $color_black !important; + /* Using !important here as a temporary fix for a bad declaration (a:link) + in Alaveteli core. When this is fixed it can be removed. + */ +} + /* Status lines and icons */ .icon_waiting_classification, .icon_waiting_response, @@ -535,19 +697,25 @@ a.link_to_this { .view_html_prefix { font-family: $font-family; - background-color: $banner-bg; - color: transparentize($main_menu-link_text, 0.2); + background-color: $color_primary; + color: transparentize($color_white, 0.2); @include ie8 { - color: $main_menu-link_text; + color: $color_white; } a { - color: $main_menu-link_text; + color: $color_white; } .view_html_logo, .view_html_description { padding-top: 1em; } } +#header_right { + .link_button_green { + @include button-secondary; + } +} + /* User page */ #user_photo_on_profile { img, #set_photo { @@ -558,7 +726,6 @@ a.link_to_this { /* Help pages */ dt { - color: $heading-color; font-weight: 700; @include respond-min( $main_menu-mobile_menu_cutoff ){ font-size: 2em; @@ -568,11 +735,79 @@ dt { /* Front page */ /* Drop the extract indentation on small screens */ -#frontpage_examples .excerpt { +#frontpage_examples { + .excerpt { padding: 0.2em 0 0 0; @include respond-min( $main_menu-mobile_menu_cutoff ){ padding: 0 0 0 2em; } + } + p strong a { + @include button-secondary; + } +} + +/* How it works section */ +.steps__list { + li { + @include respond-min( $main_menu-mobile_menu_cutoff ){ + width: 33.3333%; + margin-left: 0 !important; + } + } +} + +.steps__step-box { + background-color: $color_white; + padding: 2em; + box-shadow: 0 1px 2px transparentize($color_black, 0.75); + @include respond-min( $main_menu-mobile_menu_cutoff ){ + min-height: 11em; + } + p { + line-height: 1.5em; + color: $color_neutral_dark; + } +} + +.steps__step-number { + height: 3.5em; + width: 3.5em; + background-color: $color_primary; + box-shadow: 0 1px 2px transparentize($color_black, 0.75); + padding: 1em; + border-radius: 100%; + color: $color_white; + @include respond-min( $main_menu-mobile_menu_cutoff ){ + left: 50%; + margin-left: -1.75em; + bottom: -1em; + top: auto; + } +} + +.learn-more-foi { + @include respond-min( $main_menu-mobile_menu_cutoff ){ + margin-top: 3em; + } + a { + @include button-secondary; + } +} + +.learn-more-foi { + @include respond-min( $main_menu-mobile_menu_cutoff ){ + margin-top: 3em; + } + a { + @include button-secondary; + } +} + +.latest-requests { + .button-secondary { + @include button-secondary; + } } /* Authority page */ @@ -581,4 +816,71 @@ dt { font-size: 1.1rem; } +.action-bar__follow-button { + .link_button_green { + @include button-secondary(); + } +} +.authority__body__sidebar form input[type=submit] { + @include button-secondary(); +} + +.homepage-hero { + background-color: $color_neutral_dark; + background-image: image-url('homepage-background-small.jpg'); + background-repeat: no-repeat; + background-position: center top; + background-size: cover; + color: $color_white; + padding: 2em 0 5em; + position: relative; + @include respond-min($main_menu-mobile_menu_cutoff) { + padding: 5em 0 8em; + background-image: image-url('homepage-background.jpg'); + } + + a { + color: $color_secondary; + &:hover, + &:active, + &:focus { + color: $color_white; + } + } + + .new-request__make-new-requests { + @include button-base; + background-color: desaturate(darken($color_secondary, 10%), 5%); + color: $color_white; + &:hover, + &:active, + &:focus { + background-color: darken($color_secondary, 20%); + } + } +} + +.intro__title { + color: $color_white; + text-shadow: 0 1px 2px transparentize($color_black, 0.7); +} + +.new-request__content { + background-color: $color_neutral_dark; + border-radius: 5px; + padding: 1.888888889em; +} + +.new-request__title { + color: $color_white; + font-size: 1.4375em; + margin: 0 0 0.5em; +} + +.new-request__description { + color: transparentize($color_white, 0.2); + @include ie8 { + color: $color_white; + } +} |