The sliding door technique has worked well for Zen's tabs for years. But its time to convert the tab styling to CSS3. This will improve the front-end performance of all sub-themes as they won't have to download a handful of images.

Files: 

Comments

KrisBulman’s picture

definitely agree on this one, it will help get rid of the annoying ie6 tab code & images too, falling back to basic functional tabs

KrisBulman’s picture

Status:Active» Needs review
StatusFileSize
new9.67 KB

Here is my go at css3 tabs for zen

just the primary tabs for now, and I am using compass imports for cross browser support.. tweak as desired!

KrisBulman’s picture

here is the added support for color mods. just enter the $tabs-color, the $tabs-text-color and the $page-bg

@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "compass/css3/transition";
@import "compass/css3/images";

$tabs-color: #dedede;
$page-bg: white;
$tabs-text-color: #333333;

ul.primary {
  border-bottom: 1px solid darken($tabs-color, 14%);
  height: 26px;
  padding: 0 0 0 4px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  font-size: 90%;
    li {
      @include border-top-radius(4px);
      @include single-text-shadow(lighten($tabs-color, 30%), 1px, 1px, 0);
      float: left;
      margin: 0 3px 0 0;
      border: 1px solid darken($tabs-color, 14%);
      border-bottom: 0px;
      position: relative;
      z-index: 1;
    &.active {
      z-index: 3; }
    a {
      &:link, &:visited {
        color: $tabs-text-color;
        border-color: lighten($tabs-color, 8%);
        @include transition(background-color 0.3s);
        @include border-top-radius(4px);
        background: adjust-color($tabs-color, $lightness: 0, $saturation: -10);
        float: left;
        height: 24px;
        letter-spacing: 1px;
        line-height: 24px;
        margin-right: 0; // override drupal default margin
        outline: none;
        text-align: center;
        text-decoration: none;
       }
      &:hover {
        background-color: lighten($tabs-color, 4%);
        border-color: lighten($tabs-color, 8%);
        }
      &:focus {
        background-color: lighten($tabs-color, 8%);
        }
      }
    &.active a {
      &:link, &:visited {
        @include transition(background-color 0.3s);
        @include background-image(linear-gradient(lighten($tabs-color, 2), $page-bg));
        background-color: $page-bg;
        border: solid 1px $page-bg;
        }
    }
    }
}

.ie6 ul.primary li {
    top: 1px;
}

KrisBulman’s picture

Status:Needs review» Needs work
StatusFileSize
new59.41 KB

ul.primary needs a display:inline-block in order for tabs spanning 2 levels to avoid text floating up next to the last tab.

There also seems to be another slight problem when tabs span 2 levels, the second level pushes over to the right of the selected block, screenshot attached

JohnAlbin’s picture

Status:Needs work» Needs review
StatusFileSize
new28.5 KB

Thanks for the start on this, Kris!

I've taken what you started and finished it up. (Mostly.) I haven't tested in any version of IE yet. :-p

I went ahead and pushed the changes to 7.x-5.x. Here's a screenshot.

It could use some eyeballs as I'm a bit tired, atm.

KrisBulman’s picture

very nice work John, that looks great! Woot, so glad to see this going forth, man those old tabs stuck around too long.

JohnAlbin’s picture

Status:Needs review» Fixed

I just tested this in IE6. It's not perfect. The active tab colors are off. But they are totally functional.

Also tested this in IE9. Looks fine there (minus the gradients).

So, I'm going to close this. I look forward to bug reports. ;-)

JohnAlbin’s picture

Duh. The @import statements at the top of tabs.scss need to be moved to the base partial. Doing that now.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

barraponto’s picture

Component:CSS/HTML markup» layout.css

Just dropping by to say it is gorgeous. Congratulations!