Changeset 75304 in spip-zone


Ignore:
Timestamp:
Sep 8, 2013, 8:47:46 AM (7 years ago)
Author:
arnaud.berard@…
Message:
  • précisions sur les less et css dans les commentaires du modèle
  • ajout de la taille_logo et gestion de icones dans les menus listant les sites
  • Correction sur les couleurs de lien, les sous-menus ne décale plus les menu de niveau 1 au survol, ...
  • css minifié
Location:
_plugins_/boussole/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/boussole/trunk/css/boussole_topnav.css

    r75301 r75304  
    11/* CSS crunched with Crunch - http://crunchapp.net/ */
    2 /*
    3 
    4 Selecteur conditionels pour EI
    5 http://romy.tetue.net/selecteurs-conditionnels-pour-ie
    6 
    7 */
    8 .spip_theme {
    9   background: #a887b8;
    10   /* Old browsers */
    11 
    12   -webkit-box-shadow: 0px 3px 5px #aaaaaa;
    13   -moz-box-shadow: 0px 3px 5px #aaaaaa;
    14   box-shadow: 0px 3px 5px #aaaaaa;
    15 }
    16 .menu_container.spip-theme {
    17   background: #a887b8;
    18   /* Old browsers */
    19 
    20   -webkit-box-shadow: 0px 3px 5px #aaaaaa;
    21   -moz-box-shadow: 0px 3px 5px #aaaaaa;
    22   box-shadow: 0px 3px 5px #aaaaaa;
    23 }
    24 .menu_container.spip-theme > ul > li a {
    25   color: #ffffff;
    26   font-family: "Georgia,Cambria,Times New Roman,Times,serif";
    27   font-size: 16px;
    28 }
    29 .menu_container.spip-theme > ul > li:hover > a {
    30   background-color: #660e5c;
    31 }
    32 .menu_container.spip-theme ul.menu_submenu_block li a:hover {
    33   background: none repeat scroll 0% 0% #a887b8;
    34 }
    35 .menu_container {
    36   margin-bottom: 0;
    37   height: 48px;
    38   clear: both;
    39   float: left;
    40   position: absolute;
    41   top: 0;
    42 }
    43 .menu_container.full_width {
    44   width: 100%;
    45 }
    46 .menu_container > ul {
    47   list-style: none outside none;
    48   margin: 0px;
    49   padding: 0px;
    50   float: left;
    51   position: relative;
    52   width: 100%;
    53   height: inherit;
    54 }
    55 .menu_container > ul > li {
    56   display: block;
    57   float: left;
    58   padding: 0px;
    59   margin: 0px;
    60   text-align: left;
    61 }
    62 .menu_container > ul > li > a {
    63   padding: 12px 15px;
    64   display: block;
    65   color: #ffffff;
    66   text-decoration: none;
    67   box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
    68   border-right: 1px solid rgba(255, 255, 255, 0.25);
    69   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    70   transition: background-color 200ms linear 0s;
    71   font-size: 13px;
    72   font-family: "Georgia,Cambria,Times New Roman,Times,serif";
    73 }
    74 .menu_container > ul > li.right {
    75   float: right;
    76 }
    77 .menu_container > ul > li.last > a {
    78   box-shadow: none;
    79   border-right: 0px none;
    80 }
    81 .menu_container > ul > li:hover {
    82   margin-left: -1px;
    83 }
    84 .menu_container > ul > li:hover > a {
    85   box-shadow: 2px 0px 10px -5px rgba(0, 0, 0, 0.6) inset, -2px 0px 10px -5px rgba(0, 0, 0, 0.6) inset;
    86 }
    87 .menu_container > ul > li:hover > a.icn_home {
    88   box-shadow: none;
    89   padding-left: 0;
    90   border-right: 1px solid #383838;
    91 }
    92 .menu_container > ul > li > .menu_dropdown_block {
    93   visibility: hidden;
    94   display: none;
    95   position: relative;
    96   border-right: 1px solid #dddddd;
    97   border-width: 0px 1px 1px;
    98   border-style: none solid solid;
    99   border-color: -moz-use-text-color #dddddd #dddddd;
    100   -moz-border-top-colors: none;
    101   -moz-border-right-colors: none;
    102   -moz-border-bottom-colors: none;
    103   -moz-border-left-colors: none;
    104   border-image: none;
    105   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    106   background: none repeat scroll 0% 0% #ffffff;
    107   top: 100%;
    108   color: #575757;
    109   opacity: 0;
    110   text-align: left;
    111   transition: opacity 100ms linear 0s;
    112   -moz-box-sizing: border-box;
    113   overflow: hidden;
    114   z-index: 30;
    115 }
    116 .menu_container > ul > li:hover > .menu_dropdown_block {
    117   visibility: visible;
    118   display: block;
    119   opacity: 1;
    120   margin-left: -1px;
    121 }
    122 .menu_container > ul > li > .menu_dropdown_block.full_width {
    123   left: 0px;
    124   margin-left: 0px;
    125 }
    126 .menu_container > ul > li > .menu_dropdown_block .ssmenu_container {
    127   padding: 15px 20px;
    128 }
    129 ul.menu_submenu {
    130   list-style: none outside none;
    131   padding: 0px;
    132   margin: 0px 0px 10px;
    133 }
    134 ul.menu_submenu li {
    135   display: block;
    136 }
    137 ul.menu_submenu li > a {
    138   display: block;
    139   padding: 4px 0px;
    140   text-decoration: none;
    141   color: #666666;
    142   margin: 2px 0px;
    143   font-family: "Georgia,Cambria,Times New Roman,Times,serif";
    144 }
    145 ul.menu_submenu li > a:hover {
    146   color: #111111;
    147   background: none;
    148 }
    149 .mobile_collapser {
    150   display: none ;
    151 }
    152 .mobile_collapser > label {
    153   display: block;
    154   height: 22px;
    155   padding: 12px 25px;
    156   color: #ffffff;
    157   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    158   font-size: 16px;
    159   line-height: 22px;
    160   font-family: "Georgia,Cambria,Times New Roman,Times,serif";
    161   text-align: left;
    162   box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.2) inset;
    163 }
    164 .mobile_collapser .mobile_menu_icon {
    165   display: block;
    166   float: left;
    167   width: 22px;
    168   height: 22px;
    169   background: url('../images/mobile-menu-icon.png') no-repeat scroll 50% 50% transparent;
    170   margin-right: 10px;
    171 }
    172 #hidden_menu_collapser {
    173   display: none ;
    174 }
    175 #hidden_menu_collapser:checked + ul {
    176   height: auto;
    177   min-height: 40px;
    178   max-height: 2999px;
    179 }
    180 @media only screen and (max-width: 940px) and (min-width: 640px) {
    181   .menu_container > ul > li > a {
    182     padding: 12px 15px;
    183     font-size: 14px;
    184   }
    185   .menu_container > ul > li:hover > a {
    186     padding-left: 16px;
    187   }
    188 }
    189 @media only screen and (max-width: 980px) {
    190   .mobile_collapser {
    191     background: "none no-repeat #353535";
    192     display: block;
    193     height: 46px;
    194   }
    195   .menu_container {
    196     padding: 0px;
    197     height: auto;
    198   }
    199   .menu_container > ul {
    200     position: relative;
    201     transition: all 100ms linear 0s;
    202     height: 0px;
    203     background: inherit;
    204     overflow: hidden;
    205   }
    206   .menu_container > ul > li {
    207     position: relative;
    208     float: none;
    209     background: inherit;
    210   }
    211   .menu_container > ul > li:hover {
    212     margin-left: 0px;
    213   }
    214   .menu_container > ul > li > a {
    215     box-shadow: none;
    216     border-right: 0px none;
    217   }
    218   .menu_container > ul > li > .menu_dropdown_block {
    219     visibility: visible;
    220     position: relative;
    221     transition: all 100ms linear 0s;
    222     height: 0px;
    223     width: 100%;
    224   }
    225   .menu_container > ul > li:hover > .menu_dropdown_block {
    226     height: auto;
    227     min-height: 40px;
    228     max-height: 3000px;
    229   }
    230   .menu_container > ul > li .right {
    231     float: none;
    232   }
    233   .menu_container > ul > li > .menu_dropdown_block [class^="span"],
    234   .menu_container > ul > li > .menu_dropdown_block [class*=" span"] {
    235     float: none;
    236     width: auto ! important;
    237   }
    238 }
     2.spip_theme{background:#a887b8;-webkit-box-shadow:0px 3px 5px #aaaaaa;-moz-box-shadow:0px 3px 5px #aaaaaa;box-shadow:0px 3px 5px #aaaaaa;}
     3.menu_container.spip-theme{background:#a887b8;-webkit-box-shadow:0px 3px 5px #aaaaaa;-moz-box-shadow:0px 3px 5px #aaaaaa;box-shadow:0px 3px 5px #aaaaaa;}.menu_container.spip-theme>ul>li a{color:#ffffff;font-family:"Georgia,Cambria,Times New Roman,Times,serif";font-size:16px;}
     4.menu_container.spip-theme>ul>li:hover>a{background-color:#660e5c;}
     5.menu_container.spip-theme ul.menu_submenu_block li a:hover{background:none repeat scroll 0% 0% #a887b8;}
     6.menu_container{margin-bottom:0;height:48px;clear:both;float:left;position:absolute;top:0;}
     7.menu_container.full_width{width:100%;}
     8.menu_container>ul{list-style:none outside none;margin:0px;padding:0px;float:left;position:relative;width:100%;height:inherit;}.menu_container>ul>li{display:block;float:left;padding:0px;margin:0px;text-align:left;}
     9.menu_container>ul>li>a{padding:12px 15px;display:block;color:#ffffff;text-decoration:none;-webkit-box-shadow:-1px 0px 0px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow:-1px 0px 0px rgba(0, 0, 0, 0.2) inset;box-shadow:-1px 0px 0px rgba(0, 0, 0, 0.2) inset;border-right:1px solid rgba(255, 255, 255, 0.25);text-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transition:background-color 200ms linear 0s;font-size:13px;font-family:"Georgia,Cambria,Times New Roman,Times,serif";}
     10.menu_container>ul>li.right{float:right;}
     11.menu_container>ul>li.last>a{box-shadow:none;border-right:0px none;}
     12.menu_container>ul>li:hover{margin-left:-1px;}.menu_container>ul>li:hover>a{box-shadow:2px 0px 10px -5px rgba(0, 0, 0, 0.6) inset,-2px 0px 10px -5px rgba(0, 0, 0, 0.6) inset;}
     13.menu_container>ul>li:hover>a.icn_home{box-shadow:none;padding-left:0;border-right:1px solid #383838;}
     14.menu_container>ul>li>.menu_dropdown_block{visibility:hidden;display:none;position:absolute;border-right:1px solid #dddddd;border-width:0px 1px 1px;border-style:none solid solid;border-color:-moz-use-text-color #dddddd #dddddd;-moz-border-top-colors:none;-moz-border-right-colors:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;border-image:none;box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2);background:none repeat scroll 0% 0% #ffffff;top:100%;color:#575757;opacity:0;text-align:left;transition:opacity 100ms linear 0s;-moz-box-sizing:border-box;overflow:hidden;z-index:30;}
     15.menu_container>ul>li:hover>.menu_dropdown_block{visibility:visible;display:block;opacity:1;margin-left:-1px;}
     16.menu_container>ul>li>.menu_dropdown_block.full_width{left:0px;margin-left:0px;}
     17.menu_container>ul>li>.menu_dropdown_block .ssmenu_container{padding:15px 15px 5px 15px;}.menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu{list-style:none outside none;padding:0px;margin:0px 0px 10px;}.menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li{display:block;}.menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li>a{display:block;padding:4px 0px;text-decoration:none;color:#666666;font-family:"Georgia,Cambria,Times New Roman,Times,serif";}.menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li>a:hover{color:#111111;background:none;}
     18.menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li>a>img{float:left;margin-right:5px;}
     19.mobile_collapser{display:none ;}.mobile_collapser>label{display:block;height:22px;padding:12px 25px;color:#ffffff;text-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);font-size:16px;line-height:22px;font-family:"Georgia,Cambria,Times New Roman,Times,serif";text-align:left;box-shadow:0px -1px 1px rgba(0, 0, 0, 0.2) inset;}
     20.mobile_collapser .mobile_menu_icon{display:block;float:left;width:22px;height:22px;background:url('../images/mobile-menu-icon.png') no-repeat scroll 50% 50% transparent;margin-right:10px;}
     21#hidden_menu_collapser{display:none ;}#hidden_menu_collapser:checked+ul{height:auto;min-height:40px;max-height:2999px;}
     22@media only screen and (max-width:940px) and (min-width:640px){.menu_container>ul>li>a{padding:12px 15px;font-size:14px;} .menu_container>ul>li:hover>a{padding-left:16px;}}@media only screen and (max-width:980px){.mobile_collapser{background:"none no-repeat #353535";display:block;height:46px;} .menu_container{padding:0px;height:auto;}.menu_container>ul{position:relative;transition:all 100ms linear 0s;height:0px;background:inherit;overflow:hidden;}.menu_container>ul>li{position:relative;float:none;background:inherit;}.menu_container>ul>li:hover{margin-left:0px;} .menu_container>ul>li>a{box-shadow:none;border-right:0px none;} .menu_container>ul>li>.menu_dropdown_block{visibility:visible;position:relative;transition:all 100ms linear 0s;height:0px;width:100%;} .menu_container>ul>li:hover>.menu_dropdown_block{height:auto;min-height:40px;max-height:3000px;} .menu_container>ul>li .right{float:none;} .menu_container>ul>li>.menu_dropdown_block [class^="span"],.menu_container>ul>li>.menu_dropdown_block [class*=" span"]{float:none;width:auto ! important;}}
  • _plugins_/boussole/trunk/css/boussole_topnav.less

    r75301 r75304  
    1515@spipSansFont : "Georgia,Cambria,Times New Roman,Times,serif";
    1616
     17@1linkColor : #FFFFFF ;   // Couleur ldes liens de menu niv1
    1718@menuContainerHeight : 48px ;
    1819@mobileColapser_background : "none no-repeat #353535";
     
    2021
    2122
    22 //MARK : MIXINS
     23// MARK : MIXINS
    2324// Drop shadows
    2425.box-shadow(@shadow) {
     
    4041    .spip_theme;
    4142    > ul > li a {
    42         color:@white;
     43        color   :  @1linkColor;
    4344        font-family: @spipFont;
    4445        font-size: 16px;
    4546    }
    4647    > ul > li:hover > a {
    47         background-color: @spipMauve ;
    48        
     48        background-color: @spipMauve ;   
    4949    }
    5050    ul.menu_submenu_block li a:hover {
     
    9292        color: rgb(255, 255, 255);
    9393        text-decoration: none;
    94         box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
     94        .box-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2) inset);
    9595        border-right: 1px solid rgba(255, 255, 255, 0.25);
    9696        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
     
    121121        visibility: hidden;
    122122        display:none;
    123         position: relative;
     123        position: absolute;
    124124        border-right: 1px solid rgb(221, 221, 221);
    125125        border-width: 0px 1px 1px;
     
    158158
    159159.menu_container > ul > li > .menu_dropdown_block .ssmenu_container {
    160     padding: 15px 20px;
     160    padding: 15px 15px 5px 15px;
     161    // MARK : SubMenu Styles
     162    ul.menu_submenu {
     163        list-style: none outside none;
     164        padding: 0px;
     165        margin: 0px 0px 10px;
     166        li {
     167            display: block;
     168            > a {
     169            display: block;
     170            padding: 4px 0px;
     171            text-decoration: none;
     172            color: rgb(102, 102, 102);
     173            //margin: 2px 0px;
     174            font-family: @spipSansFont;
     175                &:hover {
     176                color: rgb(17, 17, 17);
     177                background: none;
     178                }
     179                > img {
     180                float:left;
     181                margin-right:5px;
     182                }
     183            }
     184        }
     185    }
    161186}
    162187   
    163  
    164 // MARK : SubMenu Styles
    165 
    166 ul.menu_submenu {
    167     list-style: none outside none;
    168     padding: 0px;
    169     margin: 0px 0px 10px;
    170     li {
    171         display: block;
    172         > a {
    173         display: block;
    174         padding: 4px 0px;
    175         text-decoration: none;
    176         color: rgb(102, 102, 102);
    177         margin: 2px 0px;
    178         font-family: @spipSansFont;
    179         &:hover {
    180             color: rgb(17, 17, 17);
    181             background: none;
    182             }
    183         }
    184     }
    185 }
    186 
    187  
    188        
     188   
    189189// MARK : Mobile Collapser
    190 
    191190.mobile_collapser {
    192191    display: none ;
     
    236235}
    237236
    238 @media only screen and (max-width: 980px) {
     237@media only screen and (max-width: 940px) {
    239238    .mobile_collapser {
    240239        background: @mobileColapser_background;
  • _plugins_/boussole/trunk/modeles/boussole_topnav.html

    r75301 r75304  
    2121                                    Pour ce modele, vide correspond a aucune bulle
    2222        - titre_menu_mobile :    Titre du menu en mode mobile
    23 
     23           
     24            Fichier de travail .less à utiliser ou dupliquer pour modifier le menu
    2425        [<link rel="stylesheet" href="(#CHEMIN{css/boussole_topnav.less}|less_css)" type="text/css" />]
     26            ou bien css généré utilisable directement en production
    2527        [<link rel="stylesheet" href="(#CHEMIN{css/boussole_topnav.css})" type="text/css" />]
    2628
     
    2830                boussole=spip,
    2931                titre_boussole=oui,
     32                taille_logo=24,
    3033                type_bulle=descriptif_site,
    3134                titre_menu_mobile=Spip Net} />
    3235-->]
    3336<B_groupe>
    34 <div id="menu1" class="menu_container spip-theme full_width">
     37<div id="boussole" class="menu_container spip-theme full_width">
    3538    <div class="mobile_collapser">
    3639        <label for="hidden_menu_collapser">
     
    5760                    <ul class="menu_submenu">
    5861                        <BOUCLE_site(BOUSSOLES){aka_boussole}{aka_groupe}{affiche=oui}{par rang_site}>
    59                                                 [(#SET{bulle, [(#AKA_BOUSSOLE|boussole_traduire{#ENV{type_bulle}, #AKA_SITE}|couper{100})]})]
    60                                                 [<li>
    61                                                         <a rel="external" href="#URL_SITE"[ title="(#GET{bulle}|couper{80}|attribut_html)"] class="spip_out">
    62                                                                 (#AKA_BOUSSOLE|boussole_traduire{nom_site, #AKA_SITE})
    63                                                         </a>
    64                                                 </li>]
     62                                [(#SET{bulle, [(#AKA_BOUSSOLE|boussole_traduire{#ENV{type_bulle}, #AKA_SITE}|couper{100})]})]
     63                                <li>
     64                                    <a rel="external" href="#URL_SITE"[ title="(#GET{bulle}|couper{80}|attribut_html)"] class="spip_out">
     65                                        <BOUCLE_logo_site(BOUSSOLES_EXTRAS){aka_boussole}{type_objet=site}{aka_objet=#AKA_SITE}>
     66                                                [(#CHAMP_SQL{logo_objet}
     67                                                |image_reduire{#ENV{taille_logo, 40}}
     68                                                |image_recadre{#ENV{taille_logo, 40},#ENV{taille_logo, 40},center,transparent}
     69                                                |inserer_attribut{alt,[(#GET{bulle}|couper{60}|attribut_html)]})] 
     70                                        </BOUCLE_logo_site>   
     71                                        [(#AKA_BOUSSOLE|boussole_traduire{nom_site, #AKA_SITE})]
     72                                    </a>
     73                                </li>
    6574                        </BOUCLE_site>
    6675                    </ul>
Note: See TracChangeset for help on using the changeset viewer.