Changeset 39506 in spip-zone


Ignore:
Timestamp:
Jul 23, 2010, 6:27:27 PM (9 years ago)
Author:
cedric@…
Message:

voila pour les boites de base, reste les titres a gerer
toujours visible sur ./?page=demo/box

Location:
_squelettes_/zpip
Files:
4 added
3 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/zpip/box.css

    r39492 r39506  
    66/* **************** BLOCK STRUCTURES ***************** */
    77/* box */
    8 .box{margin:10px;}
    9 .hd,.bd,.ft{padding:0 10px;/*overflow:hidden;_overflow:visible; _zoom:1;*/}
     8.box{margin:10px 0;}
     9.bd,.ft{padding:0 10px;/*overflow:hidden;_overflow:visible; _zoom:1;*/}
     10.hd {padding:5px 10px;}
    1011.box .inner{position:relative;}
    1112.box b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
  • _squelettes_/zpip/box_skins.css

    r39492 r39506  
    33/* remove *background-image:" to default to square corners for IE */
    44/* ----- simple (extends box) ----- */
    5 .simple .inner {border:1px solid #D7D7D7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
    6 .simple .inner .hd {-moz-border-radius: 7px 7px 0 0;-webkit-border-radius: 7px 7px 0 0;border-radius: 7px 7px 0 0;}
    7 .simple b{*background-image:url(img/box/simple_corners.png);}
     5.simple .inner {border:1px solid #dddddd;background-color:#fcfcfc;}
     6.simple .inner .hd {}
     7.simple b{}
     8/* ----- info (extends box) ----- */
     9.info .inner {border:2px solid #46839B;}
     10.info .inner .hd {}
     11.info b{}
     12/* ----- note (extends box) ----- */
     13.note,.note .inner{border:1px solid #c2c2c2;}
     14.note .inner{border-color:#fff; border-width:4px; background-color:#f0f0f0;}
     15.note .inner .hd {}
     16
     17/* ----- important (extends box) ----- */
     18.important .inner{border: 3px solid #00477a; border-bottom-width:10px;}
     19.important b{}
     20
    821/* ----- basic (extends box) ----- */
    9 .basic .inner {-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
    10 .basic .inner .hd {-moz-border-radius: 7px 7px 0 0;-webkit-border-radius: 7px 7px 0 0;border-radius: 7px 7px 0 0;}
    11 .basic b{*background-image:url(img/box/round.png);}
    12 /* ----- simpleExt (extends box) ----- */
    13 .simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px; }
    14 .simpleExt .inner{border-color:#fff; border-width:4px; background-color:#e2e2e2;}
    15 .simpleExt .inner .hd {-moz-border-radius: 7px 7px 0 0;-webkit-border-radius: 7px 7px 0 0;border-radius: 7px 7px 0 0;}
    16 .simpleExt b{*background-image:url(img/box/simple_extended.png);}
    17 .simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}
    18 .simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;}
    19 .simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
    20 .simpleExt .br{right:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
    21 /* ----- me (extends box) use for my comments ----- */
    22 .me,.me .inner{border:1px solid #909090;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
    23 .me .inner{border-color:#d76a84;}
    24 .me .inner .hd {-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
    25 .me b{*background-image:url(img/box/me.png);}
    26 .me .tl{left:-1px;top:-1px;}
    27 .me .tr{right:-1px;top:-1px;}
    28 .me .bl{left:-1px;bottom:-1px;}
    29 .me .br{right:-1px;bottom:-1px;}
    30 /* ----- noted (extends box) ----- */
    31 .noted,.noted .inner{border:1px solid #c2c2c2;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
    32 .noted .inner{border-color:#eded68;}
    33 .noted .inner .hd {-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
    34 .noted b{*background-image:url(img/box/noted.png);}
    35 .noted .tl{left:-1px;top:-1px;}
    36 .noted .tr{right:-1px;top:-1px;}
    37 .noted .bl{left:-1px;bottom:-1px;}
    38 .noted .br{right:-1px;bottom:-1px;}
    39 /* ----- grab (extends box) ----- */
    40 .grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */
    41 .grab b{background-image:url(img/box/grab.png);}
    42 .grab .tl, .grab .tr{height:10px; width:10px;}
    43 .grab .bl, .grab .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
    44 /* ----- talk (extends box) ----- */
    45 .talk,.talk .inner{border:1px solid #c7c7c7;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
    46 .talk .inner{border-color:#ededed;}
    47 .talk .inner .hd {-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
    48 .talk b{*background-image:url(img/box/talk.png);}
    49 .talk .tl{left:-1px;top:-1px;}
    50 .talk .tr{right:-1px;top:-1px;}
    51 .talk .bl{left:-1px;bottom:-1px;}
    52 .talk .br{right:-1px;bottom:-1px;}
    53 /* ----- photo (extends complex) ----- */
    54 .photo .inner{border:solid 10px #fff;margin:0 4px;}/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
    55 .photo b{background-image:url(img/box/photo.png);}
    56 .photo .tr, .photo .tl{width:20px;}
    57 .photo .top, .photo .bottom{height:4px;margin-top:0px;}
    58 .photo .bl, .photo .br{height:16px;margin-top: -12px;}
    59 /* ----- flow (extends complex) ----- */
    60 .flow{margin:6px;}
    61 .flow b{background-image:url(img/box/even.png);}
    62 .flow .inner{padding:0 4px;}
    63 .flow .top{height:4px;}
    64 .flow .bottom{height:4px;margin-top:-4px;}
    65 .flow .br,.flow .bl{height:10px;margin-top:-6px;}/* margin top = bottom height - corner height */
    66 /* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */
    67 .boo{-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33);-moz-box-shadow: black 2px 2px 2px 2px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border:solid 1px #949494;background:#fff;}
    68 /* ----- .excerpt (extends complex) ----- */
    69 .excerpt b{background-image:url(img/box/excerpt.png);}
    70 .excerpt .top{height:1px;}
    71 .excerpt .bottom{height:6px;margin-top:-6px;}/* margin top equal to - height of bottom */
    72 .excerpt .br,.excerpt .bl{height:12px;margin-top:-6px;}/* margin top = bottom height - corner height */
    73 /* ----- sommers (extends pop) ----- */
    74 .sommers .inner{_border:3px solid #D7D7D7;}/*IE6 backup no alpha transparency */
    75 .sommers,.sommers .inner,.sommers b{background-image:url(img/box/glow_7px.png);_background-image:none;}
    76 .sommers{/*margin:3px 10px 10px 3px;*/}
     22.basic {overflow: hidden;}
     23.basic .inner {padding-bottom: 1px;margin-bottom: -1px;}
     24.basic .inner .hd {}
     25.basic b{}
     26
     27/* ----- basic (extends box) ----- */
     28.basic {overflow: hidden;}
     29.basic .inner {padding-bottom: 1px;margin-bottom: -1px;}
     30.basic .inner .hd {}
     31.basic b{}
     32
     33/* ----- error, success, notice (extends box) ----- */
     34.error .inner,.success .inner,.notice .inner{border:2px solid;font-weight: normal;color:#333;padding-left:40px;min-height:24px;background-repeat:no-repeat;background-position: 5px 5px;}
     35.success .inner{color: #264409;border-color: #C6D880;background-color:#E6EFC2;background-image:url(img/box/message_ok-24.png);}
     36.error .inner{color: #8A1F11;border-color: #FBC2C4;background-color:#FBE3E4;background-image:url(img/box/message_erreur-24.png);}
     37.notice .inner{color: #514721;border-color: #FFD324;background-color:#FFF6BF;background-image:url(img/box/message_notice-24.png);}
     38
    7739/* ====== Background blocks ====== */
    78 .sale .inner{background-color:red;}
    79 .nicole .inner{background-color:#c01c41; color:#fff;}
    80 .nicole *, .login *{ color:#fff;}
    8140.highlight .inner{background-color:#e3e36f;}
    82 .universe .inner{background:url(img/box/universe.png) repeat left top;}
    83 .foo .inner{background: url(img/box/universe_gray.png) repeat left top;}
    84 .login .inner{background: url(img/box/universe_login.png) repeat left top;}
    85 .comment .inner{background-color:#e2e2e2;}
     41.inverse .inner{background-color:#333333;color:#ffffff}
     42
    8643/* ====== Block headers and footers ====== */
    8744.section{background: #e9e9e9 url(img/box/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;padding:5px 10px;}
  • _squelettes_/zpip/demo/contenu/page-box.html

    r39492 r39506  
    1515                <h2>Block Skins</h2>
    1616                <h3>Contour</h3>
    17                 #BOITE_OUVRIR{'<h3>grab</h3>','grab'}
    18                         <p>Body</p>
    19                 #BOITE_FERMER
    20                 #BOITE_OUVRIR{'<h3>simpleExt</h3>','simpleExt'}
    21                         <p>Body</p>
    22                 #BOITE_FERMER
    2317                #BOITE_OUVRIR{'<h3>simple</h3>','simple'}
    24                         <p>Body</p>
    25                 #BOITE_FERMER
    26                 #BOITE_OUVRIR{'<h3>noted</h3>','noted'}
    27                         <p>Body</p>
    28                 #BOITE_FERMER
    29                 #BOITE_OUVRIR{'<h3>talk</h3>','talk'}
    30                         <p>Body</p>
    31                 #BOITE_FERMER
    32                 #BOITE_OUVRIR{'<h3>me</h3>','me'}
    33                         <p>Body</p>
    34                 #BOITE_FERMER
    35                 #BOITE_OUVRIR{'<h3>basic</h3>','basic nicole'}
    36                         <p>Must be combined with a background color or content, adds rounded corners.</p>
     18                        <p>Contenu</p>
    3719                #BOITE_FERMER
    3820
    39                 <h3>Background Objects</h3>
    40                 #BOITE_OUVRIR{'<h3>highlight</h3>','highlight'}
    41                         <p>Body</p>
     21                #BOITE_OUVRIR{'<h3>info</h3>','info'}
     22                        <p>Contenu</p>
    4223                #BOITE_FERMER
    43                 #BOITE_OUVRIR{'<h3>universe</h3>','universe'}
    44                         <p>Body</p>
     24
     25                #BOITE_OUVRIR{'<h3>note</h3>','note'}
     26                        <p>Contenu</p>
    4527                #BOITE_FERMER
    46                 #BOITE_OUVRIR{'<h3>comment</h3>','comment'}
    47                         <p>Body</p>
     28
     29                #BOITE_OUVRIR{'<h3>important</h3>','important'}
     30                        <p>Contenu</p>
    4831                #BOITE_FERMER
    49                 #BOITE_OUVRIR{'<h3>foo</h3>','foo'}
    50                         <p>Body</p>
     32
     33                <h3>Fonds</h3>
     34                #BOITE_OUVRIR{'<h3>basic highlight</h3>','basic highlight'}
     35                        <p>Combiner la classe basic avec une classe de fond</p>
    5136                #BOITE_FERMER
    52                 #BOITE_OUVRIR{'<h3>nicole</h3>','nicole'}
    53                         <p>Body</p>
     37
     38                #BOITE_OUVRIR{'<h3>basic inverse</h3>','basic inverse'}
     39                        <p>Combiner la classe basic avec une classe de fond</p>
    5440                #BOITE_FERMER
    55                 #BOITE_OUVRIR{'<h3>login</h3>','login'}
    56                         <p>Body</p>
     41
     42                <h3>Erreurs, succes, avertissement</h3>
     43
     44                #BOITE_OUVRIR{'<h3>success</h3>','success'}
     45                        <p>Contenu</p>
     46                #BOITE_FERMER
     47                #BOITE_OUVRIR{'','success'}
     48                        <p>Contenu</p>
     49                #BOITE_FERMER
     50
     51                #BOITE_OUVRIR{'<h3>notice</h3>','notice'}
     52                        <p>Contenu</p>
     53                #BOITE_FERMER
     54                #BOITE_OUVRIR{'','notice'}
     55                        <p>Contenu</p>
     56                #BOITE_FERMER
     57
     58                #BOITE_OUVRIR{'<h3>error</h3>','error'}
     59                        <p>Contenu</p>
     60                #BOITE_FERMER
     61                #BOITE_OUVRIR{'','error'}
     62                        <p>Contenu</p>
    5763                #BOITE_FERMER
    5864
    5965        </div>
    6066
    61 
    6267        <div class="line">
    63                 #BOITE_OUVRIR{'<h1>complex</h1>','complex'}
    64                         <p>complex should be used in cases where you require images for borders because borders or drop shadows are too complex to be simulated via borders on mod and/or inner. </p>
    65                         <ul class="simpleList">
    66                                 <li>One image</li>
    67                                 <li>Height and width limited by image size</li>
    68                                 <li>Compatible with any content</li>
    69                                 <li>Choose when you require complex borders which cannot be simulated via css borders on mod and inner.</li>
    70                         </ul>
    71                         <p>Inspired by a conversation with Arnaud.</p>
    72                 #BOITE_FERMER
    73                 <h2>Block Skins</h2>
    74                 <h3>Contour</h3>
    75 
    76                 #BOITE_OUVRIR{'<h3>excerpt</h3>','complex excerpt','section'}
    77                         <p>Body</p>
    78                 #BOITE_PIED{act}
    79                         <p>Foot</p>
    80                 #BOITE_FERMER
    81 
    82                 #BOITE_OUVRIR{'<h3>flow</h3>','complex flow'}
    83                         <p><a href="#">Body</a></p>
    84                 #BOITE_FERMER
    85 
    86                 #BOITE_OUVRIR{'','complex photo'}
    87                         <img src="#CHEMIN{img/zpip-128.png}" alt="boo" />
    88                 #BOITE_FERMER
    89         </div>
    90 
    91         <div class="line">
    92                 #BOITE_OUVRIR{'<h3>pop </h3>','pop'}
    93                         <p>Use for popups and other containers that need outside transparency.</p>
    94                         <ul class="simpleList">
    95                                 <li>One image</li>
    96                                 <li>Height and width limited by image size</li>
    97                                 <li>Compatible with any container, but not any content</li>
    98                                 <li>Choose when you require outside transparency which cannot be simulated. (do i need to make this work with clip rather than bkg position?)</li>
    99                         </ul>
    100                         <p>Inspired by Leslie Sommers mojo blocks.</p>
    101                 #BOITE_FERMER
    102                 <h2>Block Skins</h2>
    103                 <h3>Contour</h3>
    104 
    105                 #BOITE_OUVRIR{'<h3>sommers</h3>','pop sommers'}
     68                <h2>Block Headers</h2>
     69                #BOITE_OUVRIR{'<h3>simple/bam</h3>','simple','bam'}
    10670                        <p>Body</p>
    10771                #BOITE_FERMER
    108         </div>
    109 
    110 
    111         <div class="line">
    112                 <h2>Block Headers</h2>
    113                 #BOITE_OUVRIR{'<h3>simple</h3>','simple','bam'}
     72                #BOITE_OUVRIR{'<h3>simple/topper</h3>','simple','topper'}
    11473                        <p>Body</p>
    11574                #BOITE_FERMER
    116                 #BOITE_OUVRIR{'<h3>simple</h3>','simple','topper'}
    117                         <p>Body</p>
    118                 #BOITE_FERMER
    119                 #BOITE_OUVRIR{'<h3>simple</h3>','simple','section'}
     75                #BOITE_OUVRIR{'<h3>simple/section</h3>','simple','section'}
    12076                        <p>Body</p>
    12177                #BOITE_FERMER
Note: See TracChangeset for help on using the changeset viewer.