diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index e88b13ae4..19c15a659 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -4,39 +4,50 @@ background-color: $red; } -#global-header #logo { - white-space: nowrap; - font-size: 27px; - line-height: 32px; +#global-header { - img { - padding-right: 8px; + #logo { + + white-space: nowrap; + font-size: 27px; + line-height: 32px; + + img { + padding-right: 8px; + } + + } + + .header-proposition { + #proposition-links { + li { + padding: 0 0 0 15px; + } + } } } @include media(desktop) { - #proposition-menu { float: right; } - - #global-header .header-proposition #proposition-links li { - padding: 0 0 0 15px; - } - } -a:visited { - color: $link-colour; +a { + &:visited { + color: $link-colour; + } } .form-control-5em { + width: 100%; @include media(tablet) { width: 5em; } + } .column-main { diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss index 8b79307ab..737a13a92 100644 --- a/app/assets/stylesheets/components/banner.scss +++ b/app/assets/stylesheets/components/banner.scss @@ -32,29 +32,35 @@ } .banner-info { - @extend .banner; + + @extend %banner; background: $govuk-blue; color: $white; - a:link, a:visited { - color: $white; - text-decoration: underline; - } + a { + + &:link, + &:visited { + color: $white; + text-decoration: underline; + } + + &:hover { + color: $light-blue-25; + } - a:hover { - color: $light-blue-25; } } .banner-dangerous { - @extend .banner; + @extend %banner; + @include bold-19; background: $white; color: $error-colour; border: 5px solid $error-colour; margin: 15px 0; - @include bold-19; text-align: left; .button { @@ -66,15 +72,18 @@ .banner-tip { - @extend .banner; + @extend %banner; background: $yellow; color: $text-colour; text-align: left; font-weight: bold; - a:link, a:visited { - color: $text-colour; - text-decoration: underline; + a { + &:link, + &:visited { + color: $text-colour; + text-decoration: underline; + } } ol { @@ -87,7 +96,7 @@ @extend %banner; background: $white; color: $text-colour; - background-image: file-url("icon-important-2x.png"); + background-image: file-url('icon-important-2x.png'); background-size: 34px 34px; background-position: 0 0; background-repeat: no-repeat; diff --git a/app/assets/stylesheets/components/browse-list.scss b/app/assets/stylesheets/components/browse-list.scss index abb95ecc0..26781ad65 100644 --- a/app/assets/stylesheets/components/browse-list.scss +++ b/app/assets/stylesheets/components/browse-list.scss @@ -7,14 +7,25 @@ margin-bottom: $gutter-two-thirds; } - a.browse-list-link { + &-link { @include bold-24; - &-destructive, - &-destructive:visited { + &-destructive { + @include bold-24; color: $error-colour; + + &:visited, + &:link { + @include bold-24; + color: $error-colour; + } + + &:hover { + color: $mellow-red; + } + } } diff --git a/app/assets/stylesheets/components/email-message.scss b/app/assets/stylesheets/components/email-message.scss index c351e4263..2eec50050 100644 --- a/app/assets/stylesheets/components/email-message.scss +++ b/app/assets/stylesheets/components/email-message.scss @@ -4,13 +4,13 @@ border: 1px solid $border-colour; &-subject { - border-bottom: 1px solid $border-colour;; - padding: 10px; @include bold-19; + border-bottom: 1px solid $border-colour; + padding: 10px; } &-body { - border-bottom: 1px solid white; + border-bottom: 1px solid $white; padding: 10px; overflow: hidden; max-height: 103px; diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss index 5750b24d8..f772d4230 100644 --- a/app/assets/stylesheets/components/file-upload.scss +++ b/app/assets/stylesheets/components/file-upload.scss @@ -15,10 +15,11 @@ overflow: hidden; position: absolute; z-index: -1; - } - &-field:focus + .file-upload-button { - outline: 3px solid $yellow; + &:focus + .file-upload-button { + outline: 3px solid $yellow; + } + } &-button { @@ -27,9 +28,9 @@ } &-filename { + @include bold-19; display: inline-block; padding-left: $gutter-half; - @include bold-19; } } diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index 82032dea9..978b52b63 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -2,7 +2,8 @@ padding: 20px 0 0 0; - ul, h2 { + ul, + h2 { @include core-19; border-bottom: 1px solid $border-colour; margin: 10px 20px 15px 0; @@ -18,14 +19,18 @@ margin: 10px 0 0 0; } - a:link, - a:visited { - text-decoration: none; - } + a { + + &:link, + &:visited { + text-decoration: none; + } + + &:hover { + color: $link-hover-colour; + text-decoration: underline; + } - a:hover { - color: $link-hover-colour; - text-decoration: underline; } } diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss index 2a5e07613..1df6405f1 100644 --- a/app/assets/stylesheets/components/page-footer.scss +++ b/app/assets/stylesheets/components/page-footer.scss @@ -14,16 +14,20 @@ line-height: 40px; padding: 0 0 0 5px; - a:visited, - a:link { - color: $error-colour; - display: inline-block; - vertical-align: center; - } + a { + + &:visited, + &:link { + color: $error-colour; + display: inline-block; + vertical-align: center; + } + + &:hover, + &:active { + color: $mellow-red; + } - a:hover, - a:active { - color: $mellow-red; } } @@ -33,8 +37,6 @@ margin-top: $gutter; } - .button {} - .button-destructive { @include button($error-colour); padding: 0.52632em 0.78947em 0.26316em 0.78947em; diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index d019a2b60..41b0e0dfb 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/app/assets/stylesheets/components/sms-message.scss @@ -2,7 +2,7 @@ .sms-message-wrapper { width: 100%; box-sizing: border-box; - padding: $gutter/2; + padding: $gutter-half; background: $panel-colour; border: 1px solid $panel-colour; border-radius: 5px; @@ -36,33 +36,7 @@ z-index: 50; } -label.sms-message-option { - - display: block; - position: relative; - - &.selected { - - .sms-message-wrapper-with-radio { - background: $white; - border: 1px solid $text-colour; - } - - } - - &.focused { - - outline: none; - - .sms-message-wrapper-with-radio { - box-shadow: 0 0 0 3px $yellow; - } - - } - -} - .sms-message-use-link { - margin-top: 70px; @include bold-19; + margin-top: 70px; } diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss index f92472c12..650509f24 100644 --- a/app/assets/stylesheets/components/table.scss +++ b/app/assets/stylesheets/components/table.scss @@ -25,9 +25,13 @@ color: $error-colour; font-weight: bold; - a:link, - a:visited { - color: $error-colour; + a { + + &:link, + &:visited { + color: $error-colour; + } + } } @@ -50,7 +54,7 @@ } .table-field-right-aligned { - @extend .table-field; + @extend %table-field; text-align: right; } @@ -62,8 +66,8 @@ } .table-show-more-link { + @include bold-16; margin-top: -20px; border-bottom: 1px solid $border-colour; padding-bottom: 10px; - @include bold-16; } diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index 224750586..3bd01944a 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -1,5 +1,7 @@ .textbox-highlight { + $tag-background: rgba($light-blue, 0.7); + &-wrapper { position: relative; } @@ -73,8 +75,7 @@ border-radius: 3px; overflow: hidden; display: inline; - box-shadow: inset 0.75em 0 0 0 rgba($light-blue, .7), - inset -0.75em 0 0 0 rgba($light-blue, .7); + box-shadow: inset 0.75em 0 0 0 $tag-background, inset -0.75em 0 0 0 $tag-background; } } diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html index 21efc76d7..044f3f5c7 100644 --- a/app/templates/components/sms-message.html +++ b/app/templates/components/sms-message.html @@ -1,9 +1,6 @@ {% macro sms_message( - body, recipient=None, name=None, id=None, edit_link=None, input_name=None, input_index=None + body, recipient=None, name=None, id=None, edit_link=None ) %} - {% if input_name %} - - {% endif %} {% endmacro %} diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html index da99a5d9a..9c0d2006c 100644 --- a/app/templates/views/styleguide.html +++ b/app/templates/views/styleguide.html @@ -140,12 +140,6 @@ name='Two week reminder', edit_link='#' ) }} - {{ sms_message( - "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax", - name="Reminder", - input_name="template", - input_index=1 - ) }}