Permalink
Browse files

Make @textbox-padding variable to control text box padding.

Also:
  - Made the Select widget's padding in-line with !ComboBox etc.
  - Fixed horizontal alignment of menu items with the input area text (for !ComboBox and Select).

A future simplification would be to replace the 1px border around the .dijitArrowButtonInner with 1px padding on it's parent (corresponding to the 1px padding on the parents of other <input> nodes).    That would eliminate the special CSS rules for quirks-mode border-box sizing.

Refs #12099.
  • Loading branch information...
1 parent a110e95 commit f92821900cf4b481e08fa0e12894fd21871ad406 @wkeese wkeese committed Dec 22, 2010
View
@@ -163,8 +163,7 @@ There are three areas of styling for the Menu:
background-image: none;
}
.claro .dijitComboBoxMenu .dijitMenuItem {
- padding: 2px 0px;
- text-indent: 6px;
+ padding: 2px;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #ffffff;
View
@@ -167,9 +167,9 @@ There are three areas of styling for the Menu:
margin-left:0px;
background-image: none;
}
-.claro .dijitComboBoxMenu .dijitMenuItem{
- padding:2px 0px;
- text-indent:6px;
+
+.claro .dijitComboBoxMenu .dijitMenuItem {
+ padding: @textbox-padding; // Make drop down menu text line up with text in <input>.
border-width:1px 0px 1px 0px;
border-style:solid;
border-color: @select-dropdownitem-background-color;
@@ -15,12 +15,20 @@
/* so the INPUT doesn't obscure the border in rtl+a11y */
}
-/* .dijitInputField .dijitPlaceHolder is explicitly listed below because
- dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
- won't affect it */
-.claro .dijitTextBox .dijitInputContainer, .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {
+/* Padding for the input area of TextBox based widgets, and corresponding padding for the
+ * down arrow button and the placeholder. placeholder is explicitly listed because
+ * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
+ * won't affect it
+ */
+.claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {
padding: 2px;
}
+.claro .dijitTextBox .dijitInputField {
+ padding: 1px 2px;
+}
+.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner {
+ padding: 1px;
+}
.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode {
/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
@@ -74,36 +82,25 @@
color: #818181;
}
/*========================= for special widgets =========================*/
-/* ComboBox */
+/* Input boxes with an arrow (for a drop down) */
.claro .dijitComboBox .dijitArrowButtonInner {
background-image: url("images/commonFormArrows.png");
background-position: -35px 53%;
background-repeat: no-repeat;
margin: 0px;
width: 16px;
- height: 100%;
border: 1px solid #ffffff;
}
.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
border: none;
}
-.claro .dijitTextBox .dijitInputField {
- padding-top: 1px;
- /* 1px and not 2px due to 1px padding on the INPUT */
-
- padding-bottom: 1px;
-}
-.claro .dijitTextBox .dijitInputInner {
- /* left padding helps line up input text with menu text */
-
- padding: 1px 2px 1px 0;
- /* match 1px vertical border on button */
-
+.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+ border: none;
}
-.claro .dijitTextBox .dijitValidationContainer {
- padding: 0 0 2px 0;
- /* match 1px border height in button */
-
+/* Add 1px vertical padding to the <input> where user types and the validation icon,
+ to match the 1px border on arrow button */
+.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer {
+ padding: 1px 0px;
}
.claro .dijitComboBox .dijitButtonNode {
background-color: #efefef;
@@ -136,7 +133,7 @@
background-color: #efefef;
}
/*========================= hacks for browsers =========================*/
-/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calcuate error */
+/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
.dj_ff3 .claro .dijitInputField input[type="hidden"] {
display: none;
height: 0;
@@ -146,13 +143,9 @@
.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode {
background-image: none;
}
-/* In quirks mode strangely all browsers do border-box sizing for input nodes.
- * Drop the 1px white border around ComboBox arrow to fix misalignment of icon, and to jump on focus.
- * Note also that these rules are copying what is done on focus.
- */
.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner {
- border: 0px;
+ width: 18px;
}
-.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer {
- padding: 1px;
+.dj_quirks .claro .dijitComboBoxFocused .dijitArrowButtonInner {
+ width: 16px;
}
@@ -19,13 +19,26 @@
background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
}
-/* .dijitInputField .dijitPlaceHolder is explicitly listed below because
- dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
- won't affect it */
-.claro .dijitTextBox .dijitInputContainer,
+/* Padding for the input area of TextBox based widgets, and corresponding padding for the
+ * down arrow button and the placeholder. placeholder is explicitly listed because
+ * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
+ * won't affect it
+ */
.claro .dijitTextArea,
.claro .dijitInputField .dijitPlaceHolder {
- padding: 2px;
+ padding: @textbox-padding;
+}
+.claro .dijitTextBox .dijitInputField {
+ // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below.
+ // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right,
+ // although that varies by so compensate for that too.
+ padding: @textbox-padding - 1px @textbox-padding;
+}
+.dj_gecko .claro .dijitTextBox .dijitInputInner,
+.dj_webkit .claro .dijitTextBox .dijitInputInner {
+ // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right,
+ // so compensate for that too.
+ padding: @textbox-padding - 1px;
}
.claro .dijitTextBox,
@@ -95,32 +108,30 @@
/*========================= for special widgets =========================*/
-/* ComboBox */
+/* Input boxes with an arrow (for a drop down) */
.claro .dijitComboBox .dijitArrowButtonInner {
background-image: url("images/commonFormArrows.png");
background-position:-35px 53%;
background-repeat: no-repeat;
margin: 0px;
width:16px;
- height:100%;
- border: 1px solid @arrowbutton-inner-border-color;
+ border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button
}
.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
border: none;
}
-.claro .dijitTextBox .dijitInputField {
- padding-top: 1px; /* 1px and not 2px due to 1px padding on the INPUT */
- padding-bottom: 1px;
-}
-.claro .dijitTextBox .dijitInputInner {
- /* left padding helps line up input text with menu text */
- padding: 1px 2px 1px 0; /* match 1px vertical border on button */
+.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+ border: none;
}
+
+/* Add 1px vertical padding to the <input> where user types and the validation icon,
+ to match the 1px border on arrow button */
+.claro .dijitTextBox .dijitInputInner,
.claro .dijitTextBox .dijitValidationContainer {
- padding: 0 0 2px 0; /* match 1px border height in button */
+ padding: 1px 0px;
}
.claro .dijitComboBox .dijitButtonNode {
@@ -137,11 +148,13 @@
background-position:-70px 53%;
}
-/* focused state */
+/* Arrow Button change when drop down is open.
+ * (TODO: trigger this from drop down being open, not focus)
+ */
.claro .dijitComboBoxFocused .dijitButtonNode {
background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
background-position:0px -177px;
- padding: 1px;
+ padding: 1px; // Since no border on arrow button on focus
}
.claro .dijitComboBoxFocused .dijitArrowButtonInner {
background-position:-70px 53%;
@@ -157,7 +170,7 @@
}
/*========================= hacks for browsers =========================*/
-/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calcuate error */
+/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
.dj_ff3 .claro .dijitInputField input[type="hidden"] {
display: none;
height: 0;
@@ -169,15 +182,9 @@
.dj_ie6 .claro .dijitComboBox .dijitButtonNode {
background-image: none;
}
-
-
-/* In quirks mode strangely all browsers do border-box sizing for input nodes.
- * Drop the 1px white border around ComboBox arrow to fix misalignment of icon, and to jump on focus.
- * Note also that these rules are copying what is done on focus.
- */
-.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner {
- border: 0px;
-}
-.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer {
- padding: 1px;
+.dj_borderbox .claro .dijitComboBox .dijitArrowButtonInner {
+ width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border)
}
+.dj_borderbox .claro .dijitComboBoxFocused .dijitArrowButtonInner {
+ width:16px; // when no border, then back to 16px just like content-box sizing
+}
@@ -17,7 +17,7 @@
* .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image
*/
.claro .dijitSelect .dijitButtonText {
- padding: 0px 5px 2px 5px;
+ padding: 2px;
}
/* normal status */
.claro .dijitSelect {
@@ -102,8 +102,7 @@
.claro .dijitSelectMenu td.dijitMenuItemLabel {
/* line up menu text with text in select box (in LTR and RTL modes) */
- padding-left: 5px;
- padding-right: 5px;
+ padding: 2px;
}
.claro .dijitSelectMenu .dijitMenuSeparatorTop {
border-bottom: 1px solid #769dc0;
@@ -20,7 +20,7 @@
@import "../variables";
.claro .dijitSelect .dijitButtonText {
- padding: 0px 5px 2px 5px;
+ padding: @textbox-padding;
}
/* normal status */
@@ -116,8 +116,7 @@
}
.claro .dijitSelectMenu td.dijitMenuItemLabel {
/* line up menu text with text in select box (in LTR and RTL modes) */
- padding-left: 5px;
- padding-right: 5px;
+ padding: @textbox-padding;
}
.claro .dijitSelectMenu .dijitMenuSeparatorTop {
@@ -47,6 +47,8 @@
@textbox-error-background-color: @textbox-background-color;
@textbox-disabled-background-color: @disabled-background-color;
+@textbox-padding: 2px; // Padding for Textbox, Textarea, etc.
+
// CheckBox, RadioButton
@focus-outline-color: #4a4a4a; // Color for artificial focus outline around labels of checkboxes
View
@@ -460,6 +460,10 @@ DIV.dijitArrowButton {
/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
border-width: 0 0 0 1px !important; /* !important needed due to wayward ".theme .dijitButtonNode" rules */
}
+.dijitComboBoxMenu {
+ /* Drop down menu is implemented as <ul> <li/> <li/> ... but we don't want circles before each item */
+ list-style-type: none;
+}
.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
border-width: 0;

0 comments on commit f928219

Please sign in to comment.