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

   1 /* claro/form/Common.css */
   2 /*========================= common css =========================*/
   3 /* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */
   4 .claro .dijitTextBox, .claro .dijitInputInner {
   5   color: #000000;
   6 }
   7 .claro .dijitTextBoxError .dijitValidationContainer {
   8   background-color: #d46464;
   9   background-image: url("../form/images/error.png");
  10   background-position: top center;
  11   border: solid #d46464 0;
  12   border-left-width: 1px;
  13   width: 9px;
  14 }
  15 .claro .dijitTextBoxError .dijitValidationIcon {
  16   width: 0;
  17   background-color: transparent !important;
  18   /* so the INPUT doesn't obscure the border in rtl+a11y */
  19
  20 }
  21 /* Padding for the input area of TextBox based widgets, and corresponding padding for the
  22  * down arrow button and the placeholder.   placeholder is explicitly listed  because
  23  * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
  24  * won't affect it
  25  */
  26 .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {
  27   padding: 2px;
  28 }
  29 .claro .dijitTextBox .dijitInputField {
  30   padding: 1px 2px;
  31 }
  32 .dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner {
  33   padding: 1px;
  34 }
  35 .claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode {
  36   /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
  37
  38   border-color: #b5bcc7;
  39   -webkit-transition-property: background-color, border;
  40   -moz-transition-property: background-color, border;
  41   transition-property: background-color, border;
  42   -webkit-transition-duration: 0.35s;
  43   -moz-transition-duration: 0.35s;
  44   transition-duration: 0.35s;
  45 }
  46 .claro .dijitTextBox {
  47   background-color: #ffffff;
  48 }
  49 /* hover */
  50 .claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode {
  51   border-color: #759dc0;
  52   -webkit-transition-duration: 0.25s;
  53   -moz-transition-duration: 0.25s;
  54   transition-duration: 0.25s;
  55 }
  56 .claro .dijitTextBoxHover {
  57   background-color: #e5f2fe;
  58   background-image: url("../form/images/textBox_back.png");
  59   background-repeat: repeat-x;
  60 }
  61 /* error state */
  62 .claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode {
  63   border-color: #d46464;
  64 }
  65 .claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer {
  66   background-color: #ffffff;
  67 }
  68 /* focused state */
  69 .claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode {
  70   border-color: #759dc0;
  71   -webkit-transition-duration: 0.1s;
  72   -moz-transition-duration: 0.1s;
  73   transition-duration: 0.1s;
  74 }
  75 .claro .dijitTextBoxFocused {
  76   background-color: #ffffff;
  77   background-image: url("../form/images/textBox_back.png");
  78   background-repeat: repeat-x;
  79 }
  80 .claro .dijitTextBoxFocused .dijitInputContainer {
  81   background: #ffffff;
  82 }
  83 .claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode {
  84   border-color: #ce5050;
  85 }
  86 /* disabled state */
  87 .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode {
  88   border-color: #d3d3d3;
  89 }
  90 .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {
  91   background-color: #efefef;
  92   background-image: none;
  93 }
  94 .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner {
  95   color: #818181;
  96 }
  97 .dj_webkit .claro .dijitTextBoxDisabled input {
  98   /* because WebKit lightens disabled input/textarea no matter what color you specify */
  99
 100   color: #757575;
 101 }
 102 .dj_webkit .claro textarea.dijitTextAreaDisabled {
 103   /* because WebKit lightens disabled input/textarea no matter what color you specify */
 104
 105   color: #1b1b1b;
 106 }
 107 /*========================= for special widgets =========================*/
 108 /* Input boxes with an arrow (for a drop down) */
 109 .claro .dijitComboBox .dijitArrowButtonInner {
 110   background-image: url("../form/images/commonFormArrows.png");
 111   background-position: -35px 53%;
 112   background-repeat: no-repeat;
 113   margin: 0;
 114   width: 16px;
 115   border: 1px solid #ffffff;
 116 }
 117 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 118   border: none;
 119 }
 120 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 121   border: none;
 122 }
 123 /* Add 1px vertical padding to the <input> where user types and the validation icon,
 124    to match the 1px border on arrow button */
 125 .claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer {
 126   padding: 1px 0;
 127 }
 128 .claro .dijitComboBox .dijitButtonNode {
 129   background-color: #efefef;
 130   background-image: url("../form/images/formHighlight.png");
 131   background-repeat: repeat-x;
 132 }
 133 /* Arrow "hover" effect:
 134  * The arrow button should change color whenever the mouse is in a position such that clicking it
 135  * will toggle the drop down.   That's either (1) anywhere over the ComboBox or (2) over the arrow
 136  * button, depending on the openOnClick setting for the widget.
 137  */
 138 .claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, .claro .dijitComboBox .dijitDownArrowButtonHover {
 139   background-color: #abd6ff;
 140 }
 141 .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
 142   background-position: -70px 53%;
 143 }
 144 /* Arrow Button change when drop down is open */
 145 .claro .dijitComboBox .dijitHasDropDownOpen {
 146   background-color: #7dbdfa;
 147   background-position: 0 -177px;
 148   padding: 1px;
 149 }
 150 .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 151   background-position: -70px 53%;
 152   border: 0 none;
 153 }
 154 /* disabled state */
 155 .claro div.dijitComboBoxDisabled .dijitArrowButtonInner {
 156   /* specific selector set to override background-position setting from Button.js
 157          * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */
 158
 159   background-position: 0 50%;
 160   background-color: #efefef;
 161 }
 162 /*========================= hacks for browsers =========================*/
 163 /* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
 164 .dj_ff3 .claro .dijitInputField input[type="hidden"] {
 165   display: none;
 166   height: 0;
 167   width: 0;
 168 }
 169 /* ie6 doesn't support transparent background img */
 170 .dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode {
 171   background-image: none;
 172 }
 173 .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 174   width: 18px;
 175 }
 176 .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
 177   width: 16px;
 178 }