diff options
| -rw-r--r-- | assets/stylesheets/responsive/custom.scss | 177 |
1 files changed, 135 insertions, 42 deletions
diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index 3f44501..8c61de7 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -121,57 +121,90 @@ 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 */ @@ -604,6 +637,18 @@ a.link_to_this { } } +.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, @@ -647,6 +692,12 @@ a.link_to_this { } } +#header_right { + .link_button_green { + @include button-secondary; + } +} + /* User page */ #user_photo_on_profile { img, #set_photo { @@ -666,11 +717,16 @@ 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 */ @@ -713,9 +769,26 @@ dt { } .learn-more-foi { - @extend .button-secondary; @include respond-min( $main_menu-mobile_menu_cutoff ){ - margin-top: 2em; + 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; } } @@ -725,6 +798,15 @@ 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; @@ -748,6 +830,17 @@ dt { 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 { |