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

   1 /* claro/form/Common.css */
   2
   3 /*========================= common css =========================*/
   4
   5 @import "../variables";
   6
   7 /* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */
   8
   9 .claro .dijitTextBox,
  10 .claro .dijitInputInner {
  11     // .dijitInputInner selector needed for ValidationTextBox on IE6 because <input> doesn't inherit
  12     // the color setting from the ancestor div.dijitTextBox
  13         color: @text-color;
  14 }
  15
  16 .claro .dijitValidationTextBoxError .dijitValidationContainer {
  17         background-color: @erroricon-background-color;
  18         background-image: url("../@{image-form-error}");
  19         background-position: top center;
  20         border: solid @erroricon-background-color 0;
  21         width: 9px;
  22 }
  23
  24 .claro .dijitTextBoxError .dijitValidationContainer {
  25         border-left-width: 1px;
  26 }
  27
  28 .claro .dijitValidationTextBoxError .dijitValidationIcon {
  29         width: 0;
  30         background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
  31 }
  32
  33 /* Padding for the input area of TextBox based widgets, and corresponding padding for the
  34  * down arrow button and the placeholder.   placeholder is explicitly listed  because
  35  * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
  36  * won't affect it
  37  */
  38 .claro .dijitTextArea,
  39 .claro .dijitInputField .dijitPlaceHolder {
  40         padding: @textbox-padding;
  41 }
  42
  43 .claro .dijitSelect .dijitInputField,
  44 .claro .dijitTextBox .dijitInputField {
  45         // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below.
  46         // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right,
  47         // although that varies by so compensate for that too.
  48         padding: @textbox-padding - 1px  @textbox-padding;
  49 }
  50
  51 .dj_gecko .claro .dijitTextBox .dijitInputInner,
  52 .dj_webkit .claro .dijitTextBox .dijitInputInner {
  53         // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right,
  54         // so compensate for that too.
  55         padding: @textbox-padding - 1px;
  56 }
  57
  58 .claro .dijitSelect,
  59 .claro .dijitSelect .dijitButtonContents,
  60 .claro .dijitTextBox,
  61 .claro .dijitTextBox .dijitButtonNode {
  62         /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
  63         border-color: @border-color;
  64         .transition-property(background-color, border);
  65         .transition-duration(.35s);
  66 }
  67
  68 .claro .dijitSelect,
  69 .claro .dijitTextBox {
  70         background-color: @textbox-background-color;
  71 }
  72
  73 /* hover */
  74 .claro .dijitSelectHover,
  75 .claro .dijitSelectHover .dijitButtonContents,
  76 .claro .dijitTextBoxHover,
  77 .claro .dijitTextBoxHover .dijitButtonNode {
  78         border-color: @hovered-border-color;
  79         .transition-duration(.25s);
  80 }
  81
  82 .claro .dijitTextBoxHover {
  83         background-color: @textbox-hovered-background-color;
  84         .textbox-background-image;
  85 }
  86
  87 /* error state */
  88 .claro .dijitSelectError,
  89 .claro .dijitSelectError .dijitButtonContents,
  90 .claro .dijitTextBoxError,
  91 .claro .dijitTextBoxError .dijitButtonNode {
  92         border-color: @error-border-color;
  93 }
  94
  95 /* focused state */
  96 .claro .dijitSelectFocused,
  97 .claro .dijitSelectFocused .dijitButtonContents,
  98 .claro .dijitTextBoxFocused,
  99 .claro .dijitTextBoxFocused .dijitButtonNode {
 100         border-color:@focused-border-color;
 101         .transition-duration(.1s);
 102 }
 103
 104 .claro .dijitTextBoxFocused {
 105         background-color: @textbox-focused-background-color;
 106         .textbox-background-image;
 107 }
 108 .claro .dijitTextBoxFocused .dijitInputContainer {
 109         background: @textbox-focused-background-color;
 110 }
 111
 112 .claro .dijitSelectErrorFocused,
 113 .claro .dijitSelectErrorFocused .dijitButtonContents,
 114 .claro .dijitTextBoxErrorFocused,
 115 .claro .dijitTextBoxErrorFocused .dijitButtonNode {
 116         border-color: @error-focused-border-color;
 117 }
 118
 119 /* disabled state */
 120 .claro .dijitSelectDisabled,
 121 .claro .dijitSelectDisabled .dijitButtonContents,
 122 .claro .dijitTextBoxDisabled,
 123 .claro .dijitTextBoxDisabled .dijitButtonNode {
 124         border-color: @disabled-border-color;
 125 }
 126
 127 .claro .dijitSelectDisabled,
 128 .claro .dijitTextBoxDisabled,
 129 .claro .dijitTextBoxDisabled .dijitInputContainer {
 130         background-color: @textbox-disabled-background-color;
 131         background-image: none;
 132 }
 133
 134 .claro .dijitSelectDisabled,
 135 .claro .dijitTextBoxDisabled,
 136 .claro .dijitTextBoxDisabled .dijitInputInner {
 137         color: @disabled-text-color;
 138 }
 139
 140 .dj_webkit .claro .dijitDisabled input {
 141     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 142         color: darken(@disabled-text-color, 5%)
 143 }
 144
 145 .dj_webkit .claro textarea.dijitTextAreaDisabled {
 146     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 147         color: darken(@disabled-text-color, 40%)
 148 }
 149
 150 /*========================= for special widgets =========================*/
 151
 152 /* Input boxes with an arrow (for a drop down) */
 153
 154 .claro .dijitSelect .dijitArrowButtonInner,
 155 .claro .dijitComboBox .dijitArrowButtonInner {
 156         background-image: url("../@{image-form-common-arrows}");
 157         background-position:-35px 53%;
 158         background-repeat: no-repeat;
 159         margin: 0;
 160         width:16px;
 161 }
 162
 163 .claro .dijitComboBox .dijitArrowButtonInner {
 164         border: 1px solid @arrowbutton-inner-border-color;      // white gutter around the arrow button
 165 }
 166
 167 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 168         border: none;
 169 }
 170
 171 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 172         border: none;
 173 }
 174
 175 /* Add 1px vertical padding to the <input> where user types and the validation icon,
 176    to match the 1px border on arrow button */
 177 .claro .dijitSelectLabel,
 178 .claro .dijitTextBox .dijitInputInner,
 179 .claro .dijitValidationTextBox .dijitValidationContainer {
 180         padding: 1px 0;
 181 }
 182
 183 .claro .dijitComboBox .dijitButtonNode {
 184         background-color: @arrowbutton-background-color;
 185         .standard-gradient("../");
 186 }
 187
 188 /* Arrow "hover" effect:
 189  * The arrow button should change color whenever the mouse is in a position such that clicking it
 190  * will toggle the drop down.   That's either (1) anywhere over the ComboBox or (2) over the arrow
 191  * button, depending on the openOnClick setting for the widget.
 192  */
 193 .claro .dijitComboBoxOpenOnClickHover .dijitButtonNode,
 194 .claro .dijitComboBox .dijitDownArrowButtonHover {
 195         background-color:@arrowbutton-hovered-background-color;
 196 }
 197
 198 .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner,
 199 .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
 200         background-position:-70px 53%;
 201 }
 202
 203 /* Arrow Button change when drop down is open */
 204 .claro .dijitComboBox .dijitHasDropDownOpen {   // .dijitHasDropDown is on dijitArrowButton node
 205         background-color: @pressed-background-color;
 206         .active-gradient("../");
 207         padding: 1px;           // Since no border on arrow button (see rule below)
 208 }
 209
 210 .dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
 211         padding: 1px 0;
 212 }
 213
 214 .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 215         background-position:-70px 53%;
 216         border: 0 none;
 217 }
 218
 219 /* disabled state */
 220 .claro div.dijitComboBoxDisabled .dijitArrowButtonInner {
 221         /* specific selector set to override background-position setting from Button.js
 222          * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */
 223         background-position:0 50%;
 224         background-color:@disabled-background-color;
 225 }
 226
 227 /*========================= hacks for browsers =========================*/
 228 /* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
 229 .dj_ff3 .claro .dijitInputField input[type="hidden"] {
 230         display: none;
 231         height: 0;
 232         width: 0;
 233 }
 234
 235 .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 236         width:18px;                             // quirks mode means border-box sizing, so 18px with the border (same as 16px without border)
 237 }
 238
 239 .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
 240         width:16px;                             // when no border, then back to 16px just like content-box sizing
 241 }