diff options
Diffstat (limited to 'assets/stylesheets/responsive/custom.scss')
| -rw-r--r-- | assets/stylesheets/responsive/custom.scss | 989 |
1 files changed, 0 insertions, 989 deletions
diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss deleted file mode 100644 index d4d0aff..0000000 --- a/assets/stylesheets/responsive/custom.scss +++ /dev/null @@ -1,989 +0,0 @@ -/* Mixin styles */ - -/* Hide text when it's replaced by an image */ -.image-replacement { - overflow: hidden; - text-indent: 150%; - white-space: nowrap; -} - -/* General styling of nav menu items */ -%menu-item { - text-decoration: none; - color: transparentize($color_white, 0.2); - @include ie8 { - color: $color_white; - } - transition: background-color 0.5s ease-out; - &:hover{ - background-color: darken($color_primary, 15%); - color: $color_white; - } - -} - -/* Selected menu item */ -%selected-menu-item { - font-weight: bold; - color: $color_primary; - background-color: $color_neutral_light; - &:hover{ - background-color: $color_neutral_light; - } -} - -/* General styles */ -body{ - background-color: $body-bg; - color: $body-font-color; -} - -.entirebody { - 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 */ -@media( max-width: $main_menu-mobile_menu_cutoff ){ - h1 { - font-size: 2em; - } -} - -/* Square corners for text type inputs */ -form input[type="text"], -form input[type="password"], -form input[type="search"], -form input[type="email"], -form input[type="url"], -form input[type="tel"], -form input[type="number"] { - border-radius: 0; - background-color: $form_input-bg; - /* Set a fixed height for text inputs in older IE 8 */ - @include ie8{ - height: 2.3125em; - } - /* Do the same in px for IE < 7 */ - @include lte-ie7{ - height: 22px; - } -} - -input.use-datepicker[type=text] { - width: 130px; - background:image-url('calendar.png') no-repeat 100px 5px $form_input-bg; -} - -/* Button styles */ - -@mixin button-base($size: normal, $disabled: false) { - padding: 0.5em 1.25em; - border-radius: 3px; - display: inline-block; - 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; - 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; - } - } -} - -@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; - } -} - -@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%); - } -} - -@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 { - @include button-primary($size: large); -} - - -/* Action Bar Mixins */ - -@mixin follow-button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; -} - -@mixin follower-count { - color: $color_dark_grey; - padding: 0.56em 1.25em; - border: 1px solid $color_light_grey; - position: relative; - left: -3px; - line-height: 1.6em; - border-left: 0; - border-radius: 3px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -/* Popups */ - -.popup { - background-color: desaturate(lighten($notice-color, 30%),10%); - border: 3px solid $notice-color; -} - - -/* Header */ - -#banner_inner { - background-color: $color_primary; -} - -#topnav { - 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{ - border-bottom: none; - a { - @extend %menu-item; - } - /* Show which section is currently selected */ - li.selected a{ - @extend %selected-menu-item; - } - - /* Vertically align the search box */ - #navigation_search{ - input{ - margin-top:0.313em; - margin-bottom:0.313em; - height: 1.875em; - @include ie8 { - height: 33px; - font-size: 1.1em; - padding: 0; - } - } - } - - /* Vertically align the label image for older IE*/ - @include ie8 { - img { - margin-top: 0.626em; - } - } - - #navigation_search_button{ - background-color: $color_white; - border: none; - transition: all 0.3s ease-out; - color: $color_primary; - border-radius: 0; - font-size: inherit; - } -} - -.greeting { - color: $body-bg; -} -/* Notices, errors */ - -#notice, #error, .errorExplanation, #request_header_text, #hidden_request, .describe_state_form form, .undescribed_requests, .warning { - border-top: 10px solid; - font-size: 1em; - margin:1em 0; - padding: 1.5em; - - p:first-child { - margin-top: 0; - } - - p:last-child { - margin-bottom:0; - } - - ul { - margin: 0; - } -} - -#notice, #request_header_text { - background-color: desaturate(lighten($notice-color, 30%),10%); - border-color: $notice-color; -} - -#error, .errorExplanation, #hidden_request, .warning { - background-color: desaturate(lighten($error-color, 30%),10%); - border-color: $error-color; - -} - -.undescribed_requests { - background-color: desaturate(lighten($action-color, 30%),10%); - border-color: $action-color; -} - -/* Logged and local options act like submenus */ -#logged_in_bar{ - @include respond-min($main_menu-mobile_menu_cutoff) { - top: 0; - } - - a { - @extend %menu-item; - background-color: transparent; - font-weight: normal; - color: $color_white; - &:hover, - &:active, - &:focus { - background-color: transparent; - } - } - #logged_in_links { - a { - font-weight: normal; - } - } -} - -/* LANGUAGE SWITCHER */ -#user_locale_switcher { - background-color: $color_primary; - @include respond-min($main_menu-mobile_menu_cutoff) { - background-color: transparent; - } - left: 344px; -} - -/* 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; - min-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; -} - -.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; - -} - -/* 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 { - display: none; - } - - .rsp_menu_button{ - position: absolute; - 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; - background-position: center 10px; - background-size: 28px 26px; - width: 44px; - height: 38px; - padding: 0; - /* Make sure clickable area covers image */ - a { - width: 100%; - height: 100%; - } - } - - &:target { - .rsp_menu_button { - top: 5px; - right: 4px; - } - } - - /* Pad evenly top and bottom on smaller devices */ - #logo_wrapper{ - - @include respond-min( $main_menu-mobile_menu_cutoff ){ - @include lte-ie7 { - padding-bottom: 2em; - } - } - @media(max-width: $main_menu-mobile_menu_cutoff ){ - padding: 0.5em 0 0.5em 0.9375em; - img { - height: 30px; - } - } - } - -} - - -/* Footer */ -#footer { - background-color: $color_neutral_dark; - color: darken($color_neutral_light, 10%); - a { - text-decoration: none; - color: $color_white; - &:hover, - &:active, - &:focus { - color: lighten($color_primary, 10%); - text-decoration: underline; - } - } -} - -.footer__about { - h2 { - color: $color_white; - } -} - -.footer__final { - .row { - border-top: 1px solid lighten($color_neutral_dark, 6%); - } -} - -/* Request page */ -.request-header__action-bar__actions { - .action-menu__button { - @include button-secondary(); - &:after { - border-color: #a5a5a5 transparent transparent transparent; - right: 7%; - } - } - - .action-bar__follow-button { - .track__action { - @include button-primary(); - @include follow-button(); - } - } - - .action-bar__follower-count { - @include follower-count(); - } -} - -div.correspondence { - 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-top: 8px solid $color_secondary; - .correspondence_text a { - color: $color_secondary; - } - a.link_to_this { - background-color: $color_secondary; - } -} - -.outgoing.correspondence { - border-top: 8px solid $color_primary; - a.link_to_this { - background-color: $color_primary; - } -} - -a.correspondence__header__date, -a.correspondence__header__date:visited { - color: #777; -} - -.describe_state_form input[type="radio"] + label { - display:inline; -} - -a.link_to_this { - background-image: image-url('link-icon.png'); - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { - background-image:image-url('link-icon@2.png'); - } - background-position: center center; - background-repeat: no-repeat; - background-size: 14px; - border-radius: 50%; - height: 20px; - width: 20px; -} - -#link_box { - font-family: $font-family; - border-radius: 0; - border: 1px solid $color_neutral_dark; - .close-button { - background-color: $color_secondary; - float: right; - } -} - -.describe_state_form { - padding: 0; - - form{ - background-color: desaturate(lighten($action-color, 30%),10%); - border-color: $action-color; - h2 { - margin-top: 0; - } - hr { - border-color: $action-color; - } - } -} - -.sidebar { - .new-request-cta { - .new-request__make-new-requests { - @include button-primary(); - } - } -} - -.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, -.icon_waiting_clarification, -.icon_requires_admin, -.icon_waiting_response_overdue, -.icon_gone_postal, -.icon_error_message, -.icon_internal_review, -.icon_user_withdrawn { - color: $status-pending; -} - -.icon_attention_requested, -.icon_not_held, -.icon_waiting_response_very_overdue, -.icon_failed, -.icon_rejected { - color: $status-failure; -} - -.icon_successful, -.icon_partially_successful { - color: $status-success; -} - -.request-status-message { - color: $color_black; -} - -/* Attachments*/ - -.view_html_prefix { - font-family: $font-family; - background-color: $color_primary; - color: transparentize($color_white, 0.2); - @include ie8 { - color: $color_white; - } - a { - 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 { - margin-top:0.5em; - } -} - -/* Help pages */ - -dt { - font-weight: 700; - @include respond-min( $main_menu-mobile_menu_cutoff ){ - font-size: 2em; - line-height: 1.1em; - } -} - -/* Front page */ -/* Drop the extract indentation on small screens */ -#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 */ -.authority__header__action-bar { - .action-bar__follow-button { - .track_action, - .link_button_green { - @include button-secondary(); - @include follow-button(); - } - } - - .action-bar__follower-count { - @include follower-count(); - } -} - -.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; - } - } - - .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; - } - } - .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; - } -} - -/* Reset the logo, as we dont like image logos */ -.site-title__logo { - background-image: unset; - overflow-hidden: unset; - margin: unset; - padding-top: 10px; - margin-right: 40px; - width: unset; - text-indent: unset; - background-size: unset; - - font-size: 2em; - font-weight: 400; - color: #fff!important; - height: 50px; -} - -h1 { - font-size: 2.2em; -} - -h2 { - font-size: 1.8em; -} - -.request_listing .head, .body_listing .head, .user_listing .head { - font-size: 1.5em; -} - -.homepage-hero { - background-repeat: repeat; -} - -.footer { - padding: 5em 0 8em; - background-image: url(/assets/homepage-background.jpg); -} - -/* logged in menu */ -.js-loaded .navigation .logged-in-menu { - width: auto; - background-color: darken($color_primary, 10%); -} - -.dashboard-profile__name, .dashboard-profile__email { - color: #ccc; -} |