hover underline on nav links
authorAnthony Ly <anthonyly.com@gmail.com>
Wed, 26 Jun 2013 10:53:31 +0200
changeset 154 fa381a1d156f
parent 148 2fea6fdc024c
child 155 551ae48cdf0b
hover underline on nav links new icons sprites
integration/v2/14-creation_fragment.html
integration/v2/css/style.css
integration/v2/img/icon-add.png
integration/v2/img/icon-copy-15.png
integration/v2/img/icon-cut-15.png
integration/v2/img/icon-cut.png
integration/v2/img/icon-facebook.png
integration/v2/img/icon-pencil-15.png
integration/v2/img/icon-plus-15.png
integration/v2/img/icon-save-15.png
integration/v2/img/icon-save.png
integration/v2/img/icon-trash-15.png
integration/v2/img/icon-trash.png
integration/v2/img/icon-twitter.png
integration/v2/img/icons-15.png
integration/v2/img/tools-sprite.png
--- a/integration/v2/14-creation_fragment.html	Tue Jun 25 17:24:41 2013 +0200
+++ b/integration/v2/14-creation_fragment.html	Wed Jun 26 10:53:31 2013 +0200
@@ -67,8 +67,8 @@
                     <li><a class="go-to search" href="#"></a></li>
                 </ul>
                 <ul class="clearfix">
-                    <li><a title="Effacer le tracé" href="#">&times;</a></li>
-                    <li><a title="Revenir au tracé d'origine" href="#">↺</a></li>
+                    <li><a class="fs-15" title="Effacer le tracé" href="#">&times;</a></li>
+                    <li><a class="fs-15" title="Revenir au tracé d'origine" href="#">↺</a></li>
                     <li>
                         <a class="icon plus" href="#">Ajouter à ma collection</a>
                     </li>
--- a/integration/v2/css/style.css	Tue Jun 25 17:24:41 2013 +0200
+++ b/integration/v2/css/style.css	Wed Jun 26 10:53:31 2013 +0200
@@ -26,12 +26,13 @@
 .dot-6{vertical-align:middle; width: 6px; height: 6px; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background-color: #616364; display: inline-block; margin: 0 7px;}
 .dot-10{ vertical-align:middle; width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #A1A1A1; display: inline-block; margin: 0 12px;}
 nav{height: 70px;}
+nav a:hover{ border-bottom: 1px solid #000;}
 nav li{height:100%; float:left; }
 .nav{margin-bottom: 14px; height: 18px; display: block;float: right;}
 .sub-nav{float: right; display: block;clear: both; }
-.sub-nav a{font-size: 14px; font-family: 'Lato'; font-weight: 300; display:inline-block;}
+.sub-nav a{padding-bottom: 1px;font-size: 14px; font-family: 'Lato'; font-weight: 300; display:inline-block;}
 .sub-nav a:first-letter {text-transform: uppercase;}
-.sub-nav a.active, .sub-nav a:hover{font-family: 'Lato'; font-weight: bold;}
+.sub-nav a.active, .sub-nav a:hover{border-bottom: 1px solid #000;}
 .nav a{font-family: 'josefin_sans'; font-size: 18px; text-transform : uppercase;}
 
 .title-page{margin: 30px 0; position: relative; min-height: 30px;}
@@ -40,6 +41,7 @@
 .title-menu{ position: absolute; bottom: 0; right: 0;}
 .title-menu li{float: left;}
 
+.fs-15{font-size: 15px !important;}
 .edition-table-left{
 	width: 700px !important;
 	float: left;
@@ -62,13 +64,13 @@
 .bar-tools li a{display: inline-block; font-size: 12px; height: 25px; line-height: 25px; padding: 0 7px; background-color: #DDD;}
 .bar-tools li a:hover{background-color: #eee;}
 .bar-tools li a:first-letter {text-transform: uppercase;}
-.bar-tools a.icon{padding-left: 30px;background-repeat: no-repeat; background-position: 8px center;}
-a.icon.save{background-image: url(../img/icon-save-15.png);}
-a.icon.cut{background-image: url(../img/icon-cut-15.png) ;}
-a.icon.plus{background-image: url(../img/icon-plus-15.png);}
-a.icon.edit{background-image: url(../img/icon-pencil-15.png);}
-a.icon.trash{background-image: url(../img/icon-trash-15.png);}
-a.icon.copy{background-image: url(../img/icon-copy-15.png);}
+.bar-tools a.icon{padding-left: 30px;background-repeat: no-repeat; background-image: url(../img/icons-15.png);}
+a.icon.save{background-position: 8px -80px;}
+a.icon.cut{background-position: 8px -5px;}
+a.icon.plus{background-position: 8px -54px;}
+a.icon.edit{background-position: 8px -26px;}
+a.icon.trash{background-position: 8px -148px;}
+a.icon.copy{background-position: 8px -112px;}
 /* Home */
 .w650{width: 650px;}
 .our-images{margin-bottom: 38px; text-align: center; font-size: 12px; font-family: 'Lato'; font-weight : bold; font-style : italic; color: #58595A;}
@@ -105,7 +107,7 @@
 .list-projets-2 .bot p{color: #333; background-color: #fff; font-family: 'Lato';  font-weight: 300; font-style: italic; padding: 8px 14px 0 14px; font-size: 14px; height: 104px; border-bottom: 1px solid #000; border-left: 1px solid #BBB; border-right: 1px solid #BBB;}
 .list-projets-2 .bot{height: 113px;  overflow: hidden;}
 
-li .toggle{display: none;}
+li .toggle{display: block;}
 li:hover .toggle{ display:block; }
 
 .tools{  text-align:right; width:100%; position:absolute; bottom:0; left:0;  background: rgba(255, 255, 255, .85);}
@@ -144,19 +146,15 @@
 .pagination{ margin-bottom: 12px;}
 .pagination li{float: left; font-size: 14px;font-family: 'Lato'; margin-right: 14px;}
 .pagination li.curent, .pagination li:hover{font-weight: bold;}
-.tool{display:inline-block; width:25px; height: 25px; background-image: url(../img/tools-sprite.png); background-repeat: no-repeat; vertical-align: middle;}
-.tool.twitter:hover{background-position: 0 0;}
-.tool.twitter{background-position: 0 -25px;}
-.tool.facebook{background-position: -30px -25px;}
-.tool.facebook:hover{background-position: -30px 0;}
-.tool.plus{background-position: -60px -25px;}
-.tool.plus:hover{background-position: -60px 0;}
-.tool.cut{background-position: -90px -25px;}
-.tool.cut:hover{background-position: -90px 0;}
-.tool.save{background-position: -115px -25px;}
-.tool.save:hover{background-position: -115px 0;}
-.tool.trash{background-position: -140px -25px;}
-.tool.trash:hover{background-position: -140px 0;}
+.tool{opacity: 0.5; display:inline-block; width:25px; height: 25px; background-image: url(../img/tools-sprite.png); background-repeat: no-repeat; vertical-align: middle;}
+.tool:hover{opacity: 1;}
+.tool.twitter{background-position: 2px 0;}
+.tool.facebook{background-position: -26px 0;}
+.tool.plus{background-position: -57px 0;}
+.tool.cut{background-position: -86px 0;}
+.tool.save{background-position: -144px 0;}
+.tool.trash{background-position: -117px 0;}
+
 
 .box-shadow{ -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);}
 .box-shadow-2{ -webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);-moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);}
Binary file integration/v2/img/icon-add.png has changed
Binary file integration/v2/img/icon-copy-15.png has changed
Binary file integration/v2/img/icon-cut-15.png has changed
Binary file integration/v2/img/icon-cut.png has changed
Binary file integration/v2/img/icon-facebook.png has changed
Binary file integration/v2/img/icon-pencil-15.png has changed
Binary file integration/v2/img/icon-plus-15.png has changed
Binary file integration/v2/img/icon-save-15.png has changed
Binary file integration/v2/img/icon-save.png has changed
Binary file integration/v2/img/icon-trash-15.png has changed
Binary file integration/v2/img/icon-trash.png has changed
Binary file integration/v2/img/icon-twitter.png has changed
Binary file integration/v2/img/icons-15.png has changed
Binary file integration/v2/img/tools-sprite.png has changed