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/standardGradient.png");
  39   background-repeat: repeat-x;
  40   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  41   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  42   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  43   background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  44   _background-image: none;
  45   overflow: hidden;
  46 }
  47 .dj_iequirks .claro .dijitSpinner .dijitArrowButton {
  48   overflow: visible;
  49   /* 0 height w/o this */
  50
  51 }
  52 .claro .dijitSpinner .dijitSpinnerButtonInner {
  53   width: 15px;
  54 }
  55 /* up & down button icons */
  56 .claro .dijitSpinner .dijitArrowButtonInner {
  57   border: solid 1px #ffffff;
  58   border-bottom-width: 0;
  59   /* 2 top borders = 1 top+bottom border in ComboBox */
  60
  61   background-image: url("../form/images/commonFormArrows.png");
  62   background-repeat: no-repeat;
  63   height: 100%;
  64   width: 15px;
  65   padding-left: 1px;
  66   padding-right: 1px;
  67   /* for up arrow */
  68
  69   background-position: -139px center;
  70   /* override button.css (TODO: move to Common.css since ComboBox needs this too) */
  71
  72   display: block;
  73   margin: -1px 0 -1px 0;
  74   /* compensate for inner border */
  75
  76 }
  77 .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
  78 .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
  79 .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
  80 .dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
  81   margin-top: 0;
  82   /* since its bottom aligned */
  83
  84 }
  85 .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {
  86   width: 19px;
  87 }
  88 .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
  89   background-position: -34px;
  90 }
  91 .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {
  92   padding: 0;
  93 }
  94 /** hover & focused status **/
  95 .claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive {
  96   background-color: #abd6ff;
  97 }
  98 .claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton {
  99   background-color: #abd6ff;
 100 }
 101 .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
 102   background-position: -174px;
 103 }
 104 .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {
 105   background-position: -69px;
 106 }
 107 .claro .dijitSpinnerFocused {
 108   background-color: #ffffff;
 109   background-image: none;
 110 }
 111 /* mouse down status */
 112 .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive {
 113   background-color: #7dbefa;
 114   background-image: url("../images/activeGradient.png");
 115   background-repeat: repeat-x;
 116   background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
 117   background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
 118   background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
 119   background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
 120   _background-image: none;
 121 }
 122 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
 123   /* hide inner border while button is depressed */
 124
 125   border: 0;
 126   padding: 1px;
 127   margin-right: 2px;
 128   margin-bottom: 1px;
 129 }
 130 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {
 131   background-position: -173px;
 132 }
 133 .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
 134   background-position: -68px;
 135 }
 136 /* disabled */
 137 .claro .dijitSpinnerDisabled .dijitArrowButtonInner {
 138   background-color: #efefef;
 139 }
 140 .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
 141   background-position: -104px;
 142 }
 143 .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {
 144   background-position: 1px;
 145 }
 146 /** hacks for browsers **/
 147 /* for IE 7, when div is enlarged,
 148  * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
 149 .dj_ie7 .claro .dijitSpinner {
 150   overflow: visible;
 151 }