git.roojs.org Git - roojs1/blob - css/button.css

   1
   2
   3 /* ------------ BUTTON FONTS ------------------ */
   4
   5 .x-btn
   6 {
   7         font: normal 8pt tahoma,verdan,arial,helvetica;
   8         white-space: nowrap;
   9     text-decoration:none !important;
  10     color:black !important;
  11     -moz-user-select: none;
  12         -khtml-user-select: none;
  13     cursor:pointer;
  14     /** no sure **/
  15     vertical-align: middle;
  16     text-align:center;
  17     border: 0px none;
  18 }
  19 /* override em (which is what the <button> is wrapped in) */
  20 .x-btn em
  21 {
  22     font-weight: normal;
  23     font-style: normal;
  24 }
  25
  26 /* -------- BUTTON LEFT RIGHT MAKE SMALL */
  27 .x-toolbar .x-btn-left,
  28 .x-toolbar .x-btn-right,
  29
  30 .x-btn-left,
  31 .x-btn-right
  32 {
  33         font-size:1px;
  34         line-height:1px;
  35     width: 3px;
  36 }
  37
  38
  39 .x-btn-left i
  40 .x-btn-right i
  41 {
  42     display: block;
  43     overflow: hidden;
  44     width: 3px;
  45     line-height: 1px;
  46     font-size: 1px;
  47     /*
  48     padding: 0px;
  49     margin: 0px;
  50     */
  51
  52 }
  53
  54 /* -------- BUTTON BACKGROUND IMAGE -------------- */
  55 .x-btn-left,
  56 .x-btn-center,
  57 .x-btn-right
  58
  59 {
  60     background-image :url(../images/default/basic-dialog/btn-sprite.gif);
  61     background-repeat: no-repeat;
  62     /* might have height, and padding / margin zero'd */
  63     height:21px;
  64     vertical-align: middle;
  65
  66
  67 }
  68 .x-btn-left
  69 {
  70     background-position:0 0;
  71 }
  72 .x-btn-right
  73 {
  74         background-position:0 -21px;
  75 }
  76 .x-btn-center
  77 {
  78         background-position: 0 -42px;
  79     background-repeat: repeat-x;
  80     width:auto;
  81     /* ??? not sure **/
  82     padding:0 5px;
  83
  84 }
  85
  86 .x-btn-clear .x-btn-center .x-btn-text  {
  87         width:16px;
  88         height:16px;
  89         background:url(../images/default/basic-dialog/btn-clear.gif) no-repeat 0 0;
  90 }
  91 /** - button with icon only **/
  92 .x-btn-icon .x-btn-text {
  93     width: 16px;
  94 }
  95
  96
  97 /* -------------------------- BUTTON OVER -------------------------- */
  98 .x-btn-over .x-btn-left
  99 {
 100         background-position:0 -63px;
 101 }
 102 .x-btn-over .x-btn-right
 103 {
 104         background-position:0 -84px;
 105 }
 106 .x-btn-over .x-btn-center
 107 {
 108         background-position:0 -105px;
 109 }
 110 /* -------------------------- BUTTON CLICK -------------------------- */
 111 .x-btn-click .x-btn-left
 112 {
 113         background-position:0 -63px; /* FIXME */
 114 }
 115 .x-btn-click .x-btn-right
 116 {
 117         background-position:0 -84px; /* FIXME */
 118 }
 119 .x-btn-click .x-btn-center
 120 {
 121         background-position:0 -126px;
 122 }
 123
 124 /* -------------------------- BUTTON FOCUS -------------------------- */
 125 /* ??? any special settings ?? */
 126
 127 /* -------------------------- BUTTON DISABLED -------------------------- */
 128 .x-btn .x-btn-disabled
 129 {
 130         cursor:default;
 131 }
 132 .x-btn-disabled .x-btn-center
 133 {
 134         color:gray;
 135 }
 136 /* -------------------------- BUTTON ELEMENT -------------------------- */
 137 .x-btn button {
 138     font-size: 11px;
 139     background: none no-repeat scroll 0 0 transparent;
 140     cursor:pointer;
 141     margin: 0px;
 142     outline: none;
 143     color: -moz-use-text-color;
 144     overflow: visible;
 145     width: auto;
 146     border: 0px none;
 147 }
 148 .x-btn-left i,
 149 .x-btn-right i
 150 {
 151     display: block;
 152     width: 3px;
 153 }
 154
 155 .roo-gecko .x-btn button
 156 {
 157     padding-left: 0px;
 158     padding-right: 0px;
 159 }
 160 /* -------------------------- BUTTON WITH ICONS  -------------------------- */
 161 .x-btn-text-icon .x-btn-center .x-btn-text
 162 {
 163    background-position:0 2px;
 164    background:none no-repeat scroll 0 0 transparent;
 165     /* padding : 3px 0 2px 18px; */
 166     padding: 1px 0px 1px 18px;
 167
 168 }
 169
 170
 171 /* -------------------------- BUTTON WITH MENUS  -------------------------- */
 172 button.x-btn-menu-arrow-el
 173 {
 174     display: block;
 175     background: url(../images/default/grid/sort_desc.gif) no-repeat scroll left 7px;
 176 }
 177
 178
 179 .x-btn-text-icon .x-btn-with-menu .x-btn-center em
 180 {
 181     display: block;
 182     background: url(../images/default/grid/sort_desc.gif) no-repeat scroll right 6px;
 183 }
 184
 185 .x-btn-with-menu .x-btn-center em
 186 {
 187     display: block;
 188     /* ??? background: url(../images/default/grid/sort_desc.gif) no-repeat scroll right 3px */
 189     padding-right: 14px;
 190
 191 }
 192 .x-btn-pressed .x-btn-center .x-btn-text
 193 {
 194     /* padding : 3px 0 2px 18px; */
 195     padding : 0 0 2px 0px;
 196 }
 197
 198