diff --git a/app/assets/javascripts/tabs.js b/app/assets/javascripts/tabs.js index f561c0b2..4a13f77b 100644 --- a/app/assets/javascripts/tabs.js +++ b/app/assets/javascripts/tabs.js @@ -15,3 +15,12 @@ $('ul.tab__nav--grey li a').click(function(){ $('.tab__content').not(target).addClass('js-hidden'); $(target).removeClass('js-hidden'); }); + + function hide(id) { + var e = document.getElementById(id); + e.style.display = 'none'; + } + function show(id) { + var e = document.getElementById(id); + e.style.display = 'block'; + } diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index 62267850..4e24908c 100755 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -26,6 +26,7 @@ $box-shadow: 0 2px 10px rgba($text-colour, 0.5); // Patterns @import "patterns/confirm-pages"; @import "patterns/case"; +@import "patterns/tabs-horizontal"; @import "patterns/header"; @import "patterns/flashcard"; @import "patterns/highlights"; diff --git a/app/assets/sass/patterns/_tabs-horizontal.scss b/app/assets/sass/patterns/_tabs-horizontal.scss new file mode 100644 index 00000000..c891ab9e --- /dev/null +++ b/app/assets/sass/patterns/_tabs-horizontal.scss @@ -0,0 +1,111 @@ +// Pattern: tabs +// Problem: Switching between views of grouped content + +.section-tabs { + + a:visited { + color: $link-colour; + } + + a:hover{ + color: $link-hover-colour; + text-decoration: underline; + } + + @extend %contain-floats; + border-bottom: 2px solid $border-colour; + margin: $gutter * 2 0 $gutter; + + @include media(mobile) { + border-bottom: none; + margin: $gutter 0; + } + + ul { + position: relative; + top: 2px; + margin: -2px 0 0 0; + padding: 0; + + li { + margin: 0; + padding: 0; + float: left; + display: inline; + list-style: none; + @include media(mobile) { + float: none; + display: block; + } + } + + a { + @include core-19; + font-weight: 700; + display: block; + overflow: hidden; + margin: 5px 2px 6px 0; + padding: 5px 0; + text-decoration: underline; + background: $white; + border: 2px solid $white; + border-bottom: none; + + &:hover, &:focus { + background: $grey-3; + color:$link-colour; + text-decoration: underline; + } + + @include media(mobile) { + @include core-16; + border-bottom: 2px solid $border-colour; + width: 98.5%; + @include calc(width, "100% - 10px"); + margin: 5px 0 0 0; + padding: 5px 0 5px 5px; + text-decoration: underline; + font-weight: normal; + } + + @include media(tablet) { + padding: 10px 15px; + } + + @include ie(6) { + float: left; + } + } + + li.active a { + background: $white; + margin: 0 2px 0 0; + border-color: $border-colour; + color: $black; + text-decoration: none; + cursor: hand; + + @include media(mobile) { + border-bottom: 2px solid $border-colour; + width: 98.5%; + @include calc(width, "100% - 10px"); + padding: 5px 0 5px 5px; + margin: 5px 0 0 0; + text-decoration: none; + font-weight: bold; + } + + @include media(tablet) { + padding: 15px 15px 16px ; + } + } + + li.disabled a { + background: $white; + border-color: transparent; + color: $grey-2; + text-decoration: none; + cursor: hand; + } + } + } diff --git a/app/views/includes/patterns/tabs-list.html b/app/views/includes/patterns/tabs-list.html index 306cc90b..0ccc1ecf 100644 --- a/app/views/includes/patterns/tabs-list.html +++ b/app/views/includes/patterns/tabs-list.html @@ -30,6 +30,9 @@ London Boroughs - North +
  • + Locked content (locked) +
    • @@ -244,6 +247,4 @@ - - diff --git a/app/views/includes/patterns/tabs.html b/app/views/includes/patterns/tabs.html index c6a902d1..add4450f 100644 --- a/app/views/includes/patterns/tabs.html +++ b/app/views/includes/patterns/tabs.html @@ -1,76 +1,87 @@
    -
    -
    - - - + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    Timeline form

    +
    -
    - -
    -

    Main content heading

    -

    - A 19px body copy paragraph, maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. -

    -
    - +
    + + +