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