Permalink
Browse files

Premier commit

  • Loading branch information...
PetiPandaRou committed Jun 14, 2012
1 parent d4d156b commit 48e1f1bc4aed73ee8622faea0af48ddc7b789180
Showing with 801 additions and 2 deletions.
  1. +11 −2 README.md
  2. BIN img/promo-beta.jpg
  3. BIN img/tab.png
  4. +21 −0 index.html
  5. +19 −0 style.css
  6. +315 −0 tabzilla.css
  7. +435 −0 tabzilla.js
View
@@ -1,4 +1,13 @@
-ongletmozfr
+ongletmozfr
===========
-Onglet MozFR basé sur Tabzilla, utilisé en haut de tous les sites de la galaxie MozFR
+Onglet MozFR, basé sur https://github.com/mozilla/tabzilla/, utilisé en haut de tous les sites de la galaxie MozFR.
+
+Pour utiliser cette tab, il faut :
+
+1. Ajouter un lien statique en haut de votre page web
+ ```<a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>```
+2. Ajouter la feuille de style tabzilla.css
+ ```<link href="tabzilla.css" rel="stylesheet" />```
+3. Ajouter le fichier JS tabzilla.js (de préférence dans le bas de la page)
+ ```<script src="tabzilla.js"></script>```
View
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <title>Demo Tabzilla</title>
+ <link rel="stylesheet" type="text/css" href="../media/css/tabzilla.css"/>
+ <link rel="stylesheet" type="text/css" href="style.css"/>
+</head>
+
+<body>
+<div id="metawrapper">
+ <div id="wrapper">
+ <a href="http://mozilla.org" id="tabzilla">mozilla</a>
+ <span>Ceci est un test simple de la Tabzilla "MozFR style".</span>
+ </div>
+</div>
+
+<script src="tabzilla.js" type="text/javascript"></script>
+<script src="http://www.mozilla.org/media/js/common-min.js?build=4f85ba8" type="text/javascript"></script>
+
+</body>
+</html>
View
@@ -0,0 +1,19 @@
+* {
+ margin: 0 auto;
+ padding: 0 auto;
+ border: 0;
+}
+
+#metawrapper {
+ width: 980px;
+ height: 100%;
+ min-height: 1000px;
+ margin-top: 2px;
+ background-color: grey;
+}
+
+#wrapper {
+ width: 980px;
+ font-size: 1.3em;
+ line-height: 1.5em;
+}
View
@@ -0,0 +1,315 @@
+/* Fonts */
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.eot');
+ src: url('//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.woff') format('woff'),
+ url('//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+ url('//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+ font-weight: 400;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.eot');
+ src: url('//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.woff') format('woff'),
+ url('//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
+ url('//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+ font-weight: 600;
+ font-style: normal;
+}
+
+
+/* Tab */
+
+#tabzilla {
+ float: right;
+ display: block;
+ background: url(../img/tab.png);
+ height: 45px;
+ width: 150px;
+ position: relative;
+ text-indent: -2000px;
+ overflow: hidden;
+ z-index: 999;
+}
+
+#tabzilla:after {
+ background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX%2F%2F%2F9ISEhr7AOpAAAAAXRSTlMAQObYZgAAACVJREFUCNdjYEACHAIMMhYMdjUM8j8Y%2BD8wsD9gYD7AwNiArAQAd4oFaCu14IQAAAAASUVORK5CYII%3D);
+ content: " ";
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ top: 11px;
+ right: 23px;
+ -moz-transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ border-radius: 8px;
+}
+
+#tabzilla.tabzilla-opened:after {
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+/* Tab panel */
+
+#tabzilla-panel {
+ height: 0;
+ background: #fff;
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1.3;
+ font-size: 11px;
+ color: #484848;
+ position: relative;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ overflow: hidden;
+ direction: ltr;
+}
+#tabzilla-panel:focus{
+ outline:none;
+}
+
+#tabzilla-panel.tabzilla-opened {
+ height: 200px;
+}
+
+#tabzilla-contents {
+ width: 992px;
+ margin: 0 auto;
+ text-align: left;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ margin-left: -486px;
+ right: 0;
+ display:none;
+}
+
+.tabzilla-opened #tabzilla-contents,
+#tabzilla-panel.open #tabzilla-contents{
+ display:block;
+}
+
+* html #tabzilla-contents { zoom: 1; } /* IE6 */
+*:first-child+html #tabzilla-contents { zoom: 1; } /* IE7 */
+
+#tabzilla-contents:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+}
+
+#tabzilla-promo {
+ float: left;
+ display: inline;
+ width: 300px;
+ height: 210px;
+ margin-right: 5px;
+ background: #f8f8f8;
+ position: relative;
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+#tabzilla-promo .snippet img {
+ position: absolute;
+ top: 40px;
+ left: 20px;
+}
+
+#tabzilla-promo .snippet {
+ padding: 40px;
+}
+
+#tabzilla-promo .snippet h4,
+#tabzilla-panel #tabzilla-nav,
+#tabzilla-panel #tabzilla-nav h2 {
+ margin: 0;
+ padding: 0;
+ font-family: 'Open Sans', sans-serif;
+ color: #484848;
+ font-style: normal;
+ font-weight: normal;
+ text-transform: uppercase;
+}
+
+#tabzilla-promo .snippet h4 {
+ line-height: 1.1;
+ font-size: 13px;
+ font-weight: 600;
+ margin-bottom: 0.4em;
+}
+
+#tabzilla-panel #tabzilla-nav h2 {
+ font-weight: 600;
+ font-size: 13px;
+ margin: 0 20px 0.4em 20px;
+ white-space: nowrap;
+}
+
+#tabzilla-panel #tabzilla-nav ul {
+ margin: 0;
+ padding: 0;
+}
+
+#tabzilla-panel #tabzilla-nav ul li {
+ float: left;
+ display: inline;
+ list-style-type: none;
+ margin: 40px 0 0 0;
+ padding: 0;
+ width: 135px;
+ height: 95px;
+ border-right: 1px dotted #d6d6d6;
+ background: none;
+ line-height: 1.1;
+}
+
+#tabzilla-panel #tabzilla-nav ul li ul li {
+ float: none;
+ margin: 0;
+ border-right: 0;
+ height: auto;
+}
+
+#tabzilla-panel #tabzilla-nav a {
+ color: #484848;
+ display: block;
+ padding: 0.4em 20px;
+ outline: 0;
+}
+
+#tabzilla-panel #tabzilla-nav a,
+#tabzilla-panel #tabzilla-nav a:link,
+#tabzilla-panel #tabzilla-nav a:visited {
+ text-decoration: none;
+}
+
+#tabzilla-panel #tabzilla-nav a:hover,
+#tabzilla-panel #tabzilla-nav a:active,
+#tabzilla-panel #tabzilla-nav a:focus {
+ text-decoration: underline;
+}
+
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search {
+ border-right: 0;
+}
+
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search a {
+ padding-top: 0;
+}
+
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search form {
+ margin: 0.4em 20px
+}
+
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input {
+ width: 90px;
+ background: #fafafa;
+ color: #484848;
+ border: 1px solid #ddd;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+ -moz-box-shadow: 0 0 0 3px rgba(0,0,0,0.02) inset;
+ -webkit-box-shadow: 0 0 0 3px rgba(0,0,0,0.02) inset;
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.02) inset;
+ -webkit-appearance: none;
+ padding: 4px;
+ -moz-transition: all .2s linear;
+ -webkit-transition: all .2s linear;
+ transition: all .2s linear;
+}
+
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input:hover {
+ border-color: #ccc;
+}
+
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input:focus {
+ outline: 0;
+ border-color: #999;
+}
+
+#tabzilla-search label{
+ position:absolute;
+ left:-10000px;
+ top:auto;
+ width:1px;
+ height:1px;
+ overflow:hidden;
+}
+.html-rtl #tabzilla-search label{
+ left:auto;
+ right:-10000px;
+}
+
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input::-webkit-input-placeholder { color: #ddd; }
+#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input:-moz-placeholder { color: #ddd; }
+
+/* Firefox Flicks Promo */
+
+#tabzilla-promo .snippet {
+ padding: 0;
+}
+
+#tabzilla-promo .snippet a {
+ display: block;
+ padding: 40px 35px 40px 95px;
+ height: 130px;
+ background-image: url(//www.mozilla.org/tabzilla/media/img/promo-flicks.png);
+ background-position: 20px 37px;
+ background-repeat: no-repeat;
+ color: #484848;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+
+#tabzilla-promo .snippet a:hover,
+#tabzilla-promo .snippet a:active {
+ text-decoration: none;
+ background-color: #f0f0f0;
+}
+
+#tabzilla-promo .snippet#tabzilla-promo-theden a {
+ padding: 40px 35px;
+ background-image: url(//www.mozilla.org/tabzilla/media/img/promo-theden.png);
+ background-image: url(/tabzilla/media/img/promo-theden.png);
+ background-position: 0 100%;
+}
+
+#tabzilla-promo .snippet#tabzilla-promo-beta a {
+ background-image: url(../img/promo-beta.jpg);
+ background-position: 0 0;
+ background-color: #226aa7;
+ color: #fff;
+ font-size: 12px;
+ padding: 50px 15px 30px 145px;
+ line-height: 20px;
+}
+
+#tabzilla-promo .snippet#tabzilla-promo-beta a b {
+ white-space: nowrap;
+}
Oops, something went wrong.

0 comments on commit 48e1f1b

Please sign in to comment.