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; /* 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-left: @textbox-padding - 1px;
  56         padding-right: @textbox-padding - 1px;
  57 }
  58
  59 .claro .dijitSelect,
  60 .claro .dijitSelect .dijitButtonContents,
  61 .claro .dijitTextBox,
  62 .claro .dijitTextBox .dijitButtonNode {
  63         /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
  64         border-color: @border-color;
  65         .transition-property(background-color, border);
  66         .transition-duration(.35s);
  67 }
  68
  69 .claro .dijitSelect,
  70 .claro .dijitTextBox {
  71         background-color: @textbox-background-color;
  72 }
  73
  74 /* hover */
  75 .claro .dijitSelectHover,
  76 .claro .dijitSelectHover .dijitButtonContents,
  77 .claro .dijitTextBoxHover,
  78 .claro .dijitTextBoxHover .dijitButtonNode {
  79         border-color: @hovered-border-color;
  80         .transition-duration(.25s);
  81 }
  82
  83 .claro .dijitTextBoxHover {
  84         background-color: @textbox-hovered-background-color;
  85         .textbox-background-image;
  86 }
  87
  88 /* error state */
  89 .claro .dijitSelectError,
  90 .claro .dijitSelectError .dijitButtonContents,
  91 .claro .dijitTextBoxError,
  92 .claro .dijitTextBoxError .dijitButtonNode {
  93         border-color: @error-border-color;
  94 }
  95
  96 /* focused state */
  97 .claro .dijitSelectFocused,
  98 .claro .dijitSelectFocused .dijitButtonContents,
  99 .claro .dijitTextBoxFocused,
 100 .claro .dijitTextBoxFocused .dijitButtonNode {
 101         border-color:@focused-border-color;
 102         .transition-duration(.1s);
 103 }
 104
 105 .claro .dijitTextBoxFocused {
 106         background-color: @textbox-focused-background-color;
 107         .textbox-background-image;
 108 }
 109 .claro .dijitTextBoxFocused .dijitInputContainer {
 110         background: @textbox-focused-background-color;
 111 }
 112
 113 .claro .dijitSelectErrorFocused,
 114 .claro .dijitSelectErrorFocused .dijitButtonContents,
 115 .claro .dijitTextBoxErrorFocused,
 116 .claro .dijitTextBoxErrorFocused .dijitButtonNode {
 117         border-color: @error-focused-border-color;
 118 }
 119
 120 /* disabled state */
 121 .claro .dijitSelectDisabled,
 122 .claro .dijitSelectDisabled .dijitButtonContents,
 123 .claro .dijitTextBoxDisabled,
 124 .claro .dijitTextBoxDisabled .dijitButtonNode {
 125         border-color: @disabled-border-color;
 126 }
 127
 128 .claro .dijitSelectDisabled,
 129 .claro .dijitTextBoxDisabled,
 130 .claro .dijitTextBoxDisabled .dijitInputContainer {
 131         background-color: @textbox-disabled-background-color;
 132         background-image: none;
 133 }
 134
 135 .claro .dijitSelectDisabled,
 136 .claro .dijitTextBoxDisabled,
 137 .claro .dijitTextBoxDisabled .dijitInputInner {
 138         color: @disabled-text-color;
 139 }
 140
 141 .dj_webkit .claro .dijitDisabled input {
 142     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 143         color: darken(@disabled-text-color, 5%)
 144 }
 145
 146 .dj_webkit .claro textarea.dijitTextAreaDisabled {
 147     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 148         color: darken(@disabled-text-color, 40%)
 149 }
 150
 151 /*========================= for special widgets =========================*/
 152
 153 /* Input boxes with an arrow (for a drop down) */
 154
 155 .claro .dijitSelect .dijitArrowButtonInner,
 156 .claro .dijitComboBox .dijitArrowButtonInner {
 157         background-image: url("../@{image-form-common-arrows}");
 158         background-position:-35px 53%;
 159         background-repeat: no-repeat;
 160         margin: 0;
 161         width:16px;
 162 }
 163
 164 .claro .dijitComboBox .dijitArrowButtonInner {
 165         border: 1px solid @arrowbutton-inner-border-color;      // white gutter around the arrow button
 166 }
 167
 168 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 169         border: none;
 170 }
 171
 172 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 173         border: none;
 174 }
 175
 176 /* Add 1px vertical padding to the <input> where user types and the validation icon,
 177    to match the 1px border on arrow button */
 178 .claro .dijitSelectLabel,
 179 .claro .dijitTextBox .dijitInputInner,
 180 .claro .dijitValidationTextBox .dijitValidationContainer {
 181         padding: 1px 0;
 182 }
 183
 184 .claro .dijitComboBox .dijitButtonNode {
 185         background-color: @arrowbutton-background-color;
 186         .standard-gradient("../");
 187 }
 188
 189 /* Arrow "hover" effect:
 190  * The arrow button should change color whenever the mouse is in a position such that clicking it
 191  * will toggle the drop down.   That's either (1) anywhere over the ComboBox or (2) over the arrow
 192  * button, depending on the openOnClick setting for the widget.
 193  */
 194 .claro .dijitComboBoxOpenOnClickHover .dijitButtonNode,
 195 .claro .dijitComboBox .dijitDownArrowButtonHover,
 196 .claro .dijitComboBoxFocused .dijitArrowButton {
 197         background-color:@arrowbutton-hovered-background-color;
 198 }
 199
 200 .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner,
 201 .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
 202         background-position:-70px 53%;
 203 }
 204
 205 /* Arrow Button change when drop down is open */
 206 .claro .dijitComboBox .dijitHasDropDownOpen {   // .dijitHasDropDown is on dijitArrowButton node
 207         background-color: @pressed-background-color;
 208         .active-gradient("../");
 209         padding: 1px;           // Since no border on arrow button (see rule below)
 210 }
 211
 212 .dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
 213         padding: 1px 0;
 214 }
 215
 216 .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 217         background-position:-70px 53%;
 218         border: 0 none;
 219 }
 220
 221 /* disabled state */
 222 .claro div.dijitComboBoxDisabled .dijitArrowButtonInner {
 223         /* specific selector set to override background-position setting from Button.js
 224          * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */
 225         background-position:0 50%;
 226         background-color:@disabled-background-color;
 227 }
 228
 229 /*========================= hacks for browsers =========================*/
 230 /* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
 231 .dj_ff3 .claro .dijitInputField input[type="hidden"] {
 232         display: none;
 233         height: 0;
 234         width: 0;
 235 }
 236
 237 .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 238         width:18px;                             // quirks mode means border-box sizing, so 18px with the border (same as 16px without border)
 239 }
 240
 241 .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
 242         width:16px;                             // when no border, then back to 16px just like content-box sizing
 243 }