resources/css/button.css

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 .x-btn{\r
  10         font:normal 11px tahoma, verdana, helvetica;\r
  11         cursor:pointer;\r
  12         white-space: nowrap;\r
  13 }\r
  14 .x-btn button{\r
  15     border:0 none;\r
  16     background:transparent;\r
  17     font:normal 11px tahoma,verdana,helvetica;\r
  18     padding-left:3px;\r
  19     padding-right:3px;\r
  20     cursor:pointer;\r
  21     margin:0;\r
  22     overflow:visible;\r
  23     width:auto;\r
  24     -moz-outline:0 none;\r
  25     outline:0 none;\r
  26 }\r
  27 * html .ext-ie .x-btn button {\r
  28     width:1px;\r
  29 }\r
  30 .ext-gecko .x-btn button {\r
  31     padding-left:0;\r
  32     padding-right:0;\r
  33 }\r
  34 .ext-ie .x-btn button {\r
  35     padding-top:2px;\r
  36 }\r
  37 /*\r
  38  Predefined css class for buttons with only icon. Add this class (x-btn-icon) and a class with a background-image\r
  39  to your button for a button with just an icon.\r
  40  e.g.\r
  41  .my-class .x-btn-text { background-image: url(foo.gif); }\r
  42  */\r
  43  \r
  44 .x-btn-icon .x-btn-center .x-btn-text{\r
  45         background-position: center;\r
  46         background-repeat: no-repeat;\r
  47         height: 16px;\r
  48         width: 16px;\r
  49         cursor:pointer;\r
  50         white-space: nowrap;\r
  51     padding:0;\r
  52 }\r
  53 .x-btn-icon .x-btn-center{\r
  54         padding:1px;\r
  55 }\r
  56 .x-btn em {\r
  57     font-style:normal;\r
  58     font-weight:normal;\r
  59 }\r
  60 /*\r
  61  Button class for icon and text. Add this class (x-btn-text-icon) and a class with a background-image\r
  62  to your button for both text and icon. \r
  63 */\r
  64 \r
  65 .x-btn-text-icon .x-btn-center .x-btn-text{\r
  66         background-position: 0 2px;\r
  67         background-repeat: no-repeat;\r
  68         padding-left:18px;\r
  69         padding-top:3px;\r
  70         padding-bottom:2px;\r
  71     padding-right:0;\r
  72 }\r
  73 .ext-gecko3 .x-btn-text-icon .x-btn-center .x-btn-text {\r
  74     padding-top:2px;\r
  75 }\r
  76 .x-btn-left, .x-btn-right{\r
  77         font-size:1px;\r
  78     line-height:1px;\r
  79 }\r
  80 .x-btn-left{\r
  81         width:3px;\r
  82         height:21px;\r
  83         background:url(../images/default/button/btn-sprite.gif) no-repeat 0 0;\r
  84 }\r
  85 .x-btn-right{\r
  86         width:3px;\r
  87         height:21px;\r
  88         background:url(../images/default/button/btn-sprite.gif) no-repeat 0 -21px;\r
  89 }\r
  90 .x-btn-left i, .x-btn-right i{\r
  91         display:block;\r
  92     width:3px;\r
  93     overflow:hidden;\r
  94     font-size:1px;\r
  95     line-height:1px;\r
  96 }\r
  97 .x-btn-center{\r
  98         background:url(../images/default/button/btn-sprite.gif) repeat-x 0 -42px;\r
  99         vertical-align: middle;\r
 100         text-align:center;\r
 101         padding:0 5px;\r
 102         cursor:pointer;\r
 103         white-space:nowrap;\r
 104 }\r
 105 .x-btn-over .x-btn-left{\r
 106         background-position:0 -63px;\r
 107 }\r
 108 .x-btn-over .x-btn-right{\r
 109         background-position:0 -84px;\r
 110 }\r
 111 .x-btn-over .x-btn-center{\r
 112         background-position:0 -105px;\r
 113 }\r
 114 .x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-center{\r
 115         background-position:0 -126px;\r
 116 }\r
 117 .x-btn-disabled *{\r
 118         color:gray !important;\r
 119         cursor:default !important;\r
 120 }\r
 121 .x-btn-menu-text-wrap .x-btn-center {\r
 122         padding:0 3px;\r
 123 }\r
 124 .ext-gecko .x-btn-menu-text-wrap .x-btn-center {\r
 125         padding:0 1px;\r
 126 }\r
 127 .x-btn-menu-arrow-wrap .x-btn-center {\r
 128     padding:0;\r
 129 }\r
 130 .x-btn-menu-arrow-wrap .x-btn-center button {\r
 131         width:12px !important;\r
 132     height:21px;\r
 133     padding:0 !important;\r
 134     display:block;\r
 135     background:transparent url(../images/default/button/btn-arrow.gif) no-repeat left 3px;\r
 136 }\r
 137 .x-btn-with-menu  .x-btn-center {\r
 138     padding-right:2px !important;\r
 139 }\r
 140 .x-btn-with-menu  .x-btn-center em {\r
 141     display:block;\r
 142     background:transparent url(../images/default/toolbar/btn-arrow.gif) no-repeat right 0;\r
 143         padding-right:10px;\r
 144 }\r
 145 \r
 146 .x-btn-text-icon .x-btn-with-menu .x-btn-center em {\r
 147     display:block;\r
 148     background:transparent url(../images/default/toolbar/btn-arrow.gif) no-repeat right 3px;\r
 149         padding-right:10px;\r
 150 }\r
 151 \r
 152 /* Toggle button styles */\r
 153 .x-btn-pressed .x-btn-left{\r
 154         background: url(../images/default/button/btn-sprite.gif) no-repeat 0 -63px;\r
 155 }\r
 156 .x-btn-pressed .x-btn-right{\r
 157         background: url(../images/default/button/btn-sprite.gif) no-repeat 0 -84px;\r
 158 }\r
 159 .x-btn-pressed .x-btn-center{\r
 160         background: url(../images/default/button/btn-sprite.gif) repeat-x 0 -126px;\r
 161 }