summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJohnAlbin2011-09-14 21:43:38 (GMT)
committer JohnAlbin2011-09-14 21:48:37 (GMT)
commit0dfcf0603f97e0c289780b2d2c1428126347432e (patch)
tree90d147e53e200ed029e84115f4be92a49c9bd0d2
parent539b09774801283cbbaae58392372c277d4cda83 (diff)
Issue #1249790 by KrisBulman and JohnAlbin: Convert tabs from old sliding-door CSS technique to CSS3
-rw-r--r--STARTERKIT/css/tabs-rtl.css11
-rw-r--r--STARTERKIT/css/tabs.css147
-rw-r--r--STARTERKIT/sass/tabs-rtl.scss9
-rw-r--r--STARTERKIT/sass/tabs.scss97
-rw-r--r--templates/page.tpl.php4
5 files changed, 248 insertions, 20 deletions
diff --git a/STARTERKIT/css/tabs-rtl.css b/STARTERKIT/css/tabs-rtl.css
index 4ebd130..36c5283 100644
--- a/STARTERKIT/css/tabs-rtl.css
+++ b/STARTERKIT/css/tabs-rtl.css
@@ -4,14 +4,11 @@
*/
-ul.primary {
+ul.primary li,
+ul.secondary li {
+ float: right;
}
ul.primary li {
-}
-
-ul.secondary {
-}
-
-ul.secondary li {
+ margin: 0.5em 3px 0 0;
}
diff --git a/STARTERKIT/css/tabs.css b/STARTERKIT/css/tabs.css
index 4a5446d..e84d399 100644
--- a/STARTERKIT/css/tabs.css
+++ b/STARTERKIT/css/tabs.css
@@ -9,17 +9,158 @@
*/
-div.tabs {
+/*
+ * Basic positioning styles shared by primary and secondary tabs.
+ */
+ul.primary,
+ul.secondary {
+ border-bottom: 1px solid #bbbbbb;
+ list-style: none;
+ margin: 1em 0 1.5em;
+ padding: 0 2px;
+ white-space: nowrap;
+}
+/* Add clearfix styling to tab containers. */
+ul.primary:after,
+ul.secondary:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+.ie6 ul.primary,
+.ie6 ul.secondary {
+ height: 1%;
+}
+.ie7 ul.primary,
+.ie7 ul.secondary {
+ min-height: 1%;
+}
+
+/*
+ * Primary tabs
+ */
+ul.primary li,
+ul.secondary li {
+ float: left;
+ margin: 0.5em 3px 0;
}
-ul.primary {
+ul.primary a,
+ul.secondary a {
+ border: 1px solid #e9e9e9;
+ border-right: 0;
+ border-bottom: 0;
+ display: block;
+ line-height: 1.5em;
+ text-decoration: none;
}
ul.primary li {
+ -moz-border-radius-topleft: 4px;
+ -webkit-border-top-left-radius: 4px;
+ -o-border-top-left-radius: 4px;
+ -ms-border-top-left-radius: 4px;
+ -khtml-border-top-left-radius: 4px;
+ border-top-left-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -o-border-top-right-radius: 4px;
+ -ms-border-top-right-radius: 4px;
+ -khtml-border-top-right-radius: 4px;
+ border-top-right-radius: 4px;
+ text-shadow: white 1px 1px 0;
+ border: 1px solid #bbbbbb;
+ border-bottom: 0;
+ margin: 0.5em 0 0 3px;
}
+ul.primary li.active {
+ border-bottom: 1px solid white;
+ margin-bottom: -1px; /* Overlap the ul's border. */
+}
+
+ul.primary a:link,
+ul.primary a:visited {
+ -moz-border-radius-topleft: 4px;
+ -webkit-border-top-left-radius: 4px;
+ -o-border-top-left-radius: 4px;
+ -ms-border-top-left-radius: 4px;
+ -khtml-border-top-left-radius: 4px;
+ border-top-left-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -o-border-top-right-radius: 4px;
+ -ms-border-top-right-radius: 4px;
+ -khtml-border-top-right-radius: 4px;
+ border-top-right-radius: 4px;
+ -moz-transition: background-color 0.3s;
+ -webkit-transition: background-color 0.3s;
+ -o-transition: background-color 0.3s;
+ transition: background-color 0.3s;
+ color: #333;
+ background-color: #dedede;
+ letter-spacing: 1px;
+ padding: 0 1em;
+ text-align: center;
+}
+
+ul.primary a:hover,
+ul.primary a:focus {
+ background-color: #e9e9e9;
+ border-color: #f2f2f2;
+}
+
+ul.primary a.active {
+ background-color: white;
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #ffffff));
+ background-image: -webkit-linear-gradient(#e9e9e9, #ffffff);
+ background-image: -moz-linear-gradient(#e9e9e9, #ffffff);
+ background-image: -o-linear-gradient(#e9e9e9, #ffffff);
+ background-image: -ms-linear-gradient(#e9e9e9, #ffffff);
+ background-image: linear-gradient(#e9e9e9, #ffffff);
+ border-color: #fff;
+}
+
+/*
+ * Secondary tabs
+ */
ul.secondary {
+ font-size: .9em;
+ margin-top: -1.5em; /* Collapse bottom margin of ul.primary. */
+ padding-bottom: .5em;
}
-ul.secondary li {
+ul.secondary a:link,
+ul.secondary a:visited {
+ -moz-border-radius: 0.75em;
+ -webkit-border-radius: 0.75em;
+ -o-border-radius: 0.75em;
+ -ms-border-radius: 0.75em;
+ -khtml-border-radius: 0.75em;
+ border-radius: 0.75em;
+ -moz-transition: background-color 0.3s;
+ -webkit-transition: background-color 0.3s;
+ -o-transition: background-color 0.3s;
+ transition: background-color 0.3s;
+ text-shadow: white 1px 1px 0;
+ background-color: #f2f2f2;
+ color: #666;
+ padding: 0 .5em;
+}
+
+ul.secondary a:hover,
+ul.secondary a:focus {
+ background-color: #dedede;
+ border-color: #999;
+ color: #333;
+}
+
+ul.secondary a.active,
+ul.secondary a:active {
+ text-shadow: #333333 1px 1px 0;
+ background-color: #666;
+ border-color: #000;
+ color: #fff;
}
diff --git a/STARTERKIT/sass/tabs-rtl.scss b/STARTERKIT/sass/tabs-rtl.scss
index 3e8cf26..9b29b37 100644
--- a/STARTERKIT/sass/tabs-rtl.scss
+++ b/STARTERKIT/sass/tabs-rtl.scss
@@ -5,14 +5,15 @@
@import "base";
-ul.primary {
-
+ul.primary,
+ul.secondary {
li {
+ float: right;
}
}
-ul.secondary {
-
+ul.primary {
li {
+ margin: 0.5em 3px 0 0;
}
}
diff --git a/STARTERKIT/sass/tabs.scss b/STARTERKIT/sass/tabs.scss
index dada22e..6791539 100644
--- a/STARTERKIT/sass/tabs.scss
+++ b/STARTERKIT/sass/tabs.scss
@@ -8,19 +8,110 @@
//
@import "base";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "compass/css3/transition";
+@import "compass/css3/images";
-div.tabs {
+// Some variables to make altering the styling easier.
+$tabs-container-bg: #fff;
+$tabs-border: #bbb;
+
+
+//
+// Basic positioning styles shared by primary and secondary tabs.
+//
+ul.primary,
+ul.secondary {
+ @include clearfix;
+ border-bottom: 1px solid $tabs-border;
+ list-style: none;
+ margin: 1em 0 1.5em;
+ padding: 0 2px;
+ white-space: nowrap;
+
+ li {
+ float: left; // LTR
+ margin: 0.5em 3px 0;
+ }
+
+ a {
+ border: 1px solid #e9e9e9;
+ border-right: 0;
+ border-bottom: 0;
+ display: block;
+ line-height: 1.5em;
+ text-decoration: none;
+ }
}
+//
+// Primary tabs
+//
ul.primary {
-
li {
+ @include border-top-radius(4px);
+ @include single-text-shadow(#fff, 1px, 1px, 0);
+ border: 1px solid $tabs-border;
+ border-bottom: 0;
+ margin: 0.5em 0 0 3px; // LTR
+ }
+ li.active {
+ border-bottom: 1px solid $tabs-container-bg;
+ margin-bottom: -1px; // Overlap the ul's border.
+ }
+
+ a:link,
+ a:visited {
+ @include border-top-radius(4px);
+ @include transition(background-color 0.3s);
+ color: #333;
+ background-color: #dedede;
+ letter-spacing: 1px;
+ padding: 0 1em;
+ text-align: center;
+ }
+ a:hover,
+ a:focus {
+ background-color: #e9e9e9;
+ border-color: #f2f2f2;
+ }
+ a.active {
+ background-color: $tabs-container-bg;
+ @include background-image(linear-gradient(#e9e9e9, $tabs-container-bg));
+ border-color: #fff;
}
}
+//
+// Secondary tabs
+//
ul.secondary {
+ font-size: .9em;
+ margin-top: -1.5em; // Collapse bottom margin of ul.primary.
+ padding-bottom: .5em;
- li {
+ a:link,
+ a:visited {
+ @include border-radius(.75em);
+ @include transition(background-color 0.3s);
+ @include single-text-shadow(#fff, 1px, 1px, 0);
+ background-color: #f2f2f2;
+ color: #666;
+ padding: 0 .5em;
+ }
+ a:hover,
+ a:focus {
+ background-color: #dedede;
+ border-color: #999;
+ color: #333;
+ }
+ a.active,
+ a:active {
+ @include single-text-shadow(#333, 1px, 1px, 0);
+ background-color: #666;
+ border-color: #000;
+ color: #fff;
}
}
diff --git a/templates/page.tpl.php b/templates/page.tpl.php
index 532276d..b2a43eb 100644
--- a/templates/page.tpl.php
+++ b/templates/page.tpl.php
@@ -127,9 +127,7 @@
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php print $messages; ?>
- <?php if ($tabs = render($tabs)): ?>
- <div class="tabs"><?php print $tabs; ?></div>
- <?php endif; ?>
+ <?php print render($tabs); ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?>
<ul class="action-links"><?php print render($action_links); ?></ul>