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 .dijitTextBoxError .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         border-left-width: 1px;
  22         width: 9px;
  23 }
  24 .claro .dijitTextBoxError .dijitValidationIcon {
  25         width: 0;
  26         background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
  27 }
  28
  29 /* Padding for the input area of TextBox based widgets, and corresponding padding for the
  30  * down arrow button and the placeholder.   placeholder is explicitly listed  because
  31  * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
  32  * won't affect it
  33  */
  34 .claro .dijitTextArea,
  35 .claro .dijitInputField .dijitPlaceHolder {
  36         padding: @textbox-padding;
  37 }
  38 .claro .dijitTextBox .dijitInputField {
  39         // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below.
  40         // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right,
  41         // although that varies by so compensate for that too.
  42         padding: @textbox-padding - 1px  @textbox-padding;
  43 }
  44 .dj_gecko .claro .dijitTextBox .dijitInputInner,
  45 .dj_webkit .claro .dijitTextBox .dijitInputInner {
  46         // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right,
  47         // so compensate for that too.
  48         padding: @textbox-padding - 1px;
  49 }
  50
  51 .claro .dijitTextBox,
  52 .claro .dijitTextBox .dijitButtonNode {
  53         /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
  54         border-color: @border-color;
  55         .transition-property(background-color, border);
  56         .transition-duration(.35s);
  57 }
  58 .claro .dijitTextBox {
  59         background-color: @textbox-background-color;
  60 }
  61
  62 /* hover */
  63 .claro .dijitTextBoxHover,
  64 .claro .dijitTextBoxHover .dijitButtonNode {
  65         border-color: @hovered-border-color;
  66         .transition-duration(.25s);
  67 }
  68 .claro .dijitTextBoxHover {
  69         background-color: @textbox-hovered-background-color;
  70         background-image: url("../@{image-form-textbox-background}");
  71         background-repeat: repeat-x;
  72 }
  73
  74 /* error state */
  75 .claro .dijitTextBoxError,
  76 .claro .dijitTextBoxError .dijitButtonNode {
  77         border-color: @error-border-color;
  78 }
  79 .claro .dijitTextBoxError,
  80 .claro .dijitTextBoxError .dijitInputContainer {
  81         background-color: @textbox-error-background-color;
  82 }
  83
  84 /* focused state */
  85 .claro .dijitTextBoxFocused,
  86 .claro .dijitTextBoxFocused .dijitButtonNode {
  87         border-color:@focused-border-color;
  88         .transition-duration(.1s);
  89 }
  90 .claro .dijitTextBoxFocused {
  91         background-color: @textbox-focused-background-color;
  92         background-image: url("../@{image-form-textbox-background}");
  93         background-repeat: repeat-x;
  94 }
  95 .claro .dijitTextBoxFocused .dijitInputContainer {
  96         background: @textbox-focused-background-color;
  97 }
  98
  99 .claro .dijitTextBoxErrorFocused,
 100 .claro .dijitTextBoxErrorFocused .dijitButtonNode {
 101         border-color: @error-focused-border-color;
 102 }
 103
 104 /* disabled state */
 105 .claro .dijitTextBoxDisabled,
 106 .claro .dijitTextBoxDisabled .dijitButtonNode {
 107         border-color: @disabled-border-color;
 108 }
 109 .claro .dijitTextBoxDisabled,
 110 .claro .dijitTextBoxDisabled .dijitInputContainer {
 111         background-color: @textbox-disabled-background-color;
 112         background-image: none;
 113 }
 114 .claro .dijitTextBoxDisabled,
 115 .claro .dijitTextBoxDisabled .dijitInputInner {
 116         color: @disabled-text-color;
 117 }
 118 .dj_webkit .claro .dijitTextBoxDisabled input {
 119     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 120         color: darken(@disabled-text-color, 5%)
 121 }
 122 .dj_webkit .claro textarea.dijitTextAreaDisabled {
 123     /* because WebKit lightens disabled input/textarea no matter what color you specify */
 124         color: darken(@disabled-text-color, 40%)
 125 }
 126
 127 /*========================= for special widgets =========================*/
 128
 129 /* Input boxes with an arrow (for a drop down) */
 130
 131 .claro .dijitComboBox .dijitArrowButtonInner {
 132         background-image: url("../@{image-form-common-arrows}");
 133         background-position:-35px 53%;
 134         background-repeat: no-repeat;
 135         margin: 0;
 136         width:16px;
 137         border: 1px solid @arrowbutton-inner-border-color;      // white gutter around the arrow button
 138 }
 139
 140 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 141         border: none;
 142 }
 143
 144 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
 145         border: none;
 146 }
 147
 148 /* Add 1px vertical padding to the <input> where user types and the validation icon,
 149    to match the 1px border on arrow button */
 150 .claro .dijitTextBox .dijitInputInner,
 151 .claro .dijitTextBox .dijitValidationContainer {
 152         padding: 1px 0;
 153 }
 154
 155 .claro .dijitComboBox .dijitButtonNode {
 156         background-color: @arrowbutton-background-color;
 157         background-image: url("../@{image-form-highlight}");
 158         background-repeat:repeat-x;
 159 }
 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,
 167 .claro .dijitComboBox .dijitDownArrowButtonHover {
 168         background-color:@arrowbutton-hovered-background-color;
 169 }
 170 .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner,
 171 .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
 172         background-position:-70px 53%;
 173 }
 174
 175 /* Arrow Button change when drop down is open */
 176 .claro .dijitComboBox .dijitHasDropDownOpen {   // .dijitHasDropDown is on dijitArrowButton node
 177         background-color: @pressed-background-color;
 178         background-position:0 -177px;
 179         padding: 1px;           // Since no border on arrow button (see rule below)
 180 }
 181 .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 182         background-position:-70px 53%;
 183         border: 0 none;
 184 }
 185
 186 /* disabled state */
 187 .claro div.dijitComboBoxDisabled .dijitArrowButtonInner {
 188         /* specific selector set to override background-position setting from Button.js
 189          * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */
 190         background-position:0 50%;
 191         background-color:@disabled-background-color;
 192 }
 193
 194 /*========================= hacks for browsers =========================*/
 195 /* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
 196 .dj_ff3 .claro .dijitInputField input[type="hidden"] {
 197         display: none;
 198         height: 0;
 199         width: 0;
 200 }
 201
 202 /* ie6 doesn't support transparent background img */
 203 .dj_ie6 .claro .dijitTextBox,
 204 .dj_ie6 .claro .dijitComboBox .dijitButtonNode {
 205         background-image: none;
 206 }
 207 .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 208         width:18px;                             // quirks mode means border-box sizing, so 18px with the border (same as 16px without border)
 209 }
 210 .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
 211         width:16px;                             // when no border, then back to 16px just like content-box sizing
 212 }