lib/dijit/themes/claro/form/NumberSpinner.css

   1 /* NumberSpinner - namespace "dijitSpinner"
   2  *
   3  * Styling NumberSpinner mainly includes:
   4  *
   5  * 1. Arrows
   6  *              Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner  - for border, padding and position
   7  *              Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton
   8  *              Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image
   9  *
  10  * 2. Hover state
  11  *              .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .*  - for background color|image
  12  *
  13  * 3. Active state
  14  *              .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .*  - for border, padding, margin and background color|image
  15  *
  16  * 4. Focused state
  17  *              .dijitSpinnerFocused .* - for background color|image
  18  *
  19  * 5. Disabled state
  20  *              .dijitSpinnerDisabled .* - for background color|image
  21  */
  22 .claro .dijitSpinnerButtonContainer {
  23   overflow: hidden;
  24   position: relative;
  25   width: auto;
  26   padding: 0 2px;
  27 }
  28 .claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner {
  29   border-width: 1px 0;
  30   /* reserve space to match the claro combobox button border with border and not padding to make IE happier */
  31
  32   border-style: solid none;
  33 }
  34 /* button */
  35 .claro .dijitSpinner .dijitArrowButton {
  36   width: auto;
  37   background-color: #efefef;
  38   background-image: url("images/formHighlight.png");
  39   background-position: 0 0;
  40   background-repeat: repeat-x;
  41   overflow: hidden;
  42 }
  43 .dj_iequirks .claro .dijitSpinner .dijitArrowButton {
  44   overflow: visible;
  45   /* 0 height w/o this */
  46
  47 }
  48 .claro .dijitSpinner .dijitSpinnerButtonInner {
  49   width: 15px;
  50 }
  51 /* up & down button icons */
  52 .claro .dijitSpinner .dijitArrowButtonInner {
  53   border: solid 1px #ffffff;
  54   border-bottom-width: 0;
  55   /* 2 top borders = 1 top+bottom border in ComboBox */
  56
  57   background-image: url("images/commonFormArrows.png");
  58   background-repeat: no-repeat;
  59   height: 100%;
  60   width: 15px;
  61   padding-left: 1px;
  62   padding-right: 1px;
  63   /* for up arrow */
  64
  65   background-position: -139px center;
  66   /* override button.css (TODO: move to Common.css since ComboBox needs this too) */
  67
  68   display: block;
  69   margin: -1px 0 -1px 0;
  70   /* compensate for inner border */
  71
  72 }
  73 .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner {
  74   margin-top: 0;
  75   /* since its bottom aligned */
  76
  77 }
  78 .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {
  79   width: 19px;
  80 }
  81 .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
  82   background-position: -34px;
  83 }
  84 .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {
  85   padding: 0;
  86 }
  87 /** hover & focused status **/
  88 .claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive {
  89   background-color: #abd6ff;
  90 }
  91 .claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton {
  92   background-color: #abd6ff;
  93 }
  94 .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
  95   background-position: -174px;
  96 }
  97 .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {
  98   background-position: -69px;
  99 }
 100 .claro .dijitSpinnerFocused {
 101   background-color: #ffffff;
 102   background-image: none;
 103 }
 104 /* mouse down status */
 105 .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive {
 106   background-color: #7dbefa;
 107   background-position: 0 -177px;
 108 }
 109 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
 110   /* hide inner border while button is depressed */
 111
 112   border: 0;
 113   padding: 1px;
 114   margin-right: 2px;
 115   margin-bottom: 1px;
 116 }
 117 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {
 118   background-position: -173px;
 119 }
 120 .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
 121   background-position: -68px;
 122 }
 123 /* disabled */
 124 .claro .dijitSpinnerDisabled .dijitArrowButtonInner {
 125   background-color: #efefef;
 126 }
 127 .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
 128   background-position: -104px;
 129 }
 130 .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {
 131   background-position: 1px;
 132 }
 133 /** hacks for browsers **/
 134 /* for IE 7, when div is enlarged,
 135  * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
 136 .dj_ie7 .claro .dijitSpinner {
 137   overflow: visible;
 138 }