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 {\r
  33         font-size:1px;\r
  34         line-height:1px;
  35     width: 3px;\r
  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 -------------- */\r
  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
  65     \r
  66 }
  67 .x-btn-left
  68 {
  69     background-position:0 0;
  70 }
  71 .x-btn-right
  72 {\r
  73         background-position:0 -21px;
  74 }
  75 .x-btn-center
  76 {
  77         background-position: 0 -42px;
  78     background-repeat: repeat-x;
  79     width:auto;
  80     /* ??? not sure **/
  81     padding:0 5px;
  82
  83 }
  84
  85 .x-btn-clear .x-btn-center .x-btn-text  {
  86         width:16px;
  87         height:16px;
  88         background:url(../images/default/basic-dialog/btn-clear.gif) no-repeat 0 0;
  89 }
  90 /** - button with icon only **/
  91 .x-btn-icon .x-btn-text {
  92     width: 16px;
  93 }
  94
  95
  96 /* -------------------------- BUTTON OVER -------------------------- */
  97 .x-btn-over .x-btn-left
  98 {
  99         background-position:0 -63px;
 100 }
 101 .x-btn-over .x-btn-right
 102 {
 103         background-position:0 -84px;
 104 }
 105 .x-btn-over .x-btn-center
 106 {
 107         background-position:0 -105px;
 108 }
 109 /* -------------------------- BUTTON CLICK -------------------------- */
 110 .x-btn-click .x-btn-left
 111 {
 112         background-position:0 -63px; /* FIXME */
 113 }
 114 .x-btn-click .x-btn-right
 115 {
 116         background-position:0 -84px; /* FIXME */
 117 }
 118 .x-btn-click .x-btn-center
 119 {
 120         background-position:0 -126px;
 121 }
 122
 123 /* -------------------------- BUTTON FOCUS -------------------------- */\r
 124 /* ??? any special settings ?? */\r
 125
 126 /* -------------------------- BUTTON DISABLED -------------------------- */
 127 .x-btn .x-btn-disabled
 128 {
 129         cursor:default;
 130 }
 131 .x-btn-disabled .x-btn-center
 132 {
 133         color:gray;
 134 }
 135 /* -------------------------- BUTTON ELEMENT -------------------------- */
 136 .x-btn button {
 137     font-size: 11px;
 138     background: none no-repeat scroll 0 0 transparent;
 139     cursor:pointer;
 140     margin: 0px;
 141     outline: none;
 142     color: -moz-use-text-color;
 143     overflow: visible;
 144     width: auto;
 145     border: 0px none;
 146 }
 147 .x-btn-left i,
 148 .x-btn-right i
 149 {
 150     display: block;
 151     width: 3px;
 152 }
 153
 154 .roo-gecko .x-btn button
 155 {
 156     padding-left: 0px;
 157     padding-right: 0px;
 158 }\r
 159 /* -------------------------- BUTTON WITH ICONS  -------------------------- */
 160 .x-btn-text-icon .x-btn-center .x-btn-text
 161 {
 162    background-position:0 2px;
 163    background:none no-repeat scroll 0 0 transparent;
 164     /* padding : 3px 0 2px 18px; */
 165     padding: 1px 0px 1px 18px;
 166
 167 }
 168 /* -------------------------- BUTTON WITH MENUS  -------------------------- */
 169 button.x-btn-menu-arrow-el
 170 {
 171     display: block;
 172     background: url(../images/default/grid/sort_desc.gif) no-repeat scroll left 7px;
 173 }
 174
 175
 176 .x-btn-text-icon .x-btn-with-menu .x-btn-center em
 177 {
 178     display: block;
 179     background: url(../images/default/grid/sort_desc.gif) no-repeat scroll right 6px;
 180 }
 181
 182 .x-btn-with-menu .x-btn-center em
 183 {
 184     display: block;
 185     /* ??? background: url(../images/default/grid/sort_desc.gif) no-repeat scroll right 3px */
 186     padding-right: 14px;
 187
 188 }
 189 .x-btn-pressed .x-btn-center .x-btn-text
 190 {
 191     /* padding : 3px 0 2px 18px; */
 192     padding : 0 0 2px 0px;
 193 }
 194 \r
 195