resources/css/structure/box.css

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /*
   8  Creates rounded, raised boxes like on the Ext website - the markup isn't pretty:
   9   <div class="x-box-blue">
  10         <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
  11         <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
  12             <h3>YOUR TITLE HERE (optional)</h3>
  13             <div>YOUR CONTENT HERE</div>
  14         </div></div></div>
  15         <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
  16     </div>
  17  */
  18
  19 .x-box-tl {
  20         background: transparent no-repeat 0 0;
  21     zoom:1;
  22 }
  23
  24 .x-box-tc {
  25         height: 8px;
  26         background: transparent repeat-x 0 0;
  27         overflow: hidden;
  28 }
  29
  30 .x-box-tr {
  31         background: transparent no-repeat right -8px;
  32 }
  33
  34 .x-box-ml {
  35         background: transparent repeat-y 0;
  36         padding-left: 4px;
  37         overflow: hidden;
  38     zoom:1;
  39 }
  40
  41 .x-box-mc {
  42         background: repeat-x 0 -16px;
  43         padding: 4px 10px;
  44 }
  45
  46 .x-box-mc h3 {
  47         margin: 0 0 4px 0;
  48     zoom:1;
  49 }
  50
  51 .x-box-mr {
  52         background: transparent repeat-y right;
  53         padding-right: 4px;
  54         overflow: hidden;
  55 }
  56
  57 .x-box-bl {
  58         background: transparent no-repeat 0 -16px;
  59     zoom:1;
  60 }
  61
  62 .x-box-bc {
  63         background: transparent repeat-x 0 -8px;
  64         height: 8px;
  65         overflow: hidden;
  66 }
  67
  68 .x-box-br {
  69         background: transparent no-repeat right -24px;
  70 }
  71
  72 .x-box-tl, .x-box-bl {
  73         padding-left: 8px;
  74         overflow: hidden;
  75 }
  76
  77 .x-box-tr, .x-box-br {
  78         padding-right: 8px;
  79         overflow: hidden;
  80 }