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

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