Premier commit

mozfr · Jun 14, 2012 · 48e1f1b · 48e1f1b
1 parent d4d156b
commit 48e1f1b
Show file tree

Hide file tree

Showing 7 changed files with 801 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -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>```
diff --git a/img/promo-beta.jpg b/img/promo-beta.jpg
diff --git a/img/tab.png b/img/tab.png
diff --git a/index.html b/index.html
@@ -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>
diff --git a/style.css b/style.css
@@ -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; 
+}
diff --git a/tabzilla.css b/tabzilla.css
@@ -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;
+}