diff options
Diffstat (limited to 'lib/dijit/themes/claro/TimePicker.css')
| -rw-r--r-- | lib/dijit/themes/claro/TimePicker.css | 164 |
1 files changed, 96 insertions, 68 deletions
diff --git a/lib/dijit/themes/claro/TimePicker.css b/lib/dijit/themes/claro/TimePicker.css index a5ddf9129..fb8bf5efa 100644 --- a/lib/dijit/themes/claro/TimePicker.css +++ b/lib/dijit/themes/claro/TimePicker.css @@ -1,102 +1,130 @@ - +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ +/* override Button.css */ .claro .dijitTimePicker .dijitButtonNode { - padding: 0 0; - border-radius: 0; - -moz-border-radius: 0; - -webkit-border-radius: 0; -} -.claro .dijitTimePicker{ - border:1px #b5bcc7 solid; - border-top:none; - border-bottom:none; - background-color:#fff; -} -.claro .dijitTimePickerItem{ - - background-image: url("images/commonHighlight.png"); - background-position:0px -1px; - background-repeat:repeat-x; - border-top:solid 1px #b5bcc7; - border-bottom:solid 1px #b5bcc7; - margin-right:-1px; - margin-left:-1px; - margin-top:-1px; + padding: 0 0; + -moz-border-radius: 0; + border-radius: 0; +} +.claro .dijitTimePicker { + border: 1px #b5bcc7 solid; + border-top: none; + border-bottom: none; + background-color: #fff; + /* TODO: useless? Appears to be overridden by settings on individual elements */ + } +.claro .dijitTimePickerItem { + /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ + + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; + border-top: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; + margin-right: -1px; + margin-left: -1px; + margin-top: -1px; +} +/* to make up for lack of alpha transparency in IE6 */ .dj_ie6 .claro .dijitTimePickerItem { - background-image: none; + background-image: none; } .claro .dijitTimePickerTick { - - color:#7a7a7a; - background-color:#f2f2f2; - font-size:0.818em; + /* minor value */ + + color: #818181; + background-color: #efefef; + font-size: 0.818em; } .claro .dijitTimePickerMarker { - - color:#000; - background-color:#e3f2ff; - font-size: 1em; - white-space: nowrap; + /* major value - 1:00, 2:00, times on the hour */ + + background-color: #e9f4fe; + font-size: 1em; + white-space: nowrap; } .claro .dijitTimePickerTickHover, .claro .dijitTimePickerMarkerHover, .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { - background-color: #83c0fa; - color:#000; - border:solid 1px #b5bcc7; - margin-left:-7px; - margin-right:-7px; + background-color: #7dbefa; + border: solid 1px #b5bcc7; + margin-left: -7px; + margin-right: -7px; + color: #000000; +} +.claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { + font-size: 1em; } -.claro .dijitTimePickerMarkerSelected, -.claro .dijitTimePickerTickSelected { - font-size: 1em; - } .dj_ie .claro .dijitTimePickerTickHover, .dj_ie .claro .dijitTimePickerMarkerHover, .dj_ie .claro .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerTickSelected { - width: 114%; +.dj_ie .claro .dijitTimePickerTickSelected { + width: 114%; } .dj_ie6 .claro .dijitTimePickerTickHover, .dj_ie6 .claro .dijitTimePickerMarkerHover, .dj_ie6 .claro .dijitTimePickerMarkerSelected, -.dj_ie6 .claro .dijitTimePickerTickSelected { - position: relative; - zoom: 1; +.dj_ie6 .claro .dijitTimePickerTickSelected { + position: relative; + /* creates widening of element */ + zoom: 1; + /* creates widening of element */ + } .claro .dijitTimePickerTick .dijitTimePickerItemInner { - padding:1px; - margin:0px; + padding: 1px; + margin: 0; } .claro .dijitTimePicker .dijitButtonNode { - border-left:none; - border-right:none; - border-color:#b5bcc7; - background-color: #f6f7fa; - background-image: url("images/commonHighlight.png"); - background-position:0px -1px; - background-repeat:repeat-x; + border-left: none; + border-right: none; + border-color: #b5bcc7; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; } .dj_ie6 .claro .dijitTimePicker .dijitButtonNode { - background-image: none; + background-image: none; } -.claro .dijitTimePicker .dijitArrowButtonInner{ - height: 100%; - background-image: url("form/images/commonFormArrows.png"); - background-repeat: no-repeat; - background-position:-140px 45%; +.claro .dijitTimePicker .dijitArrowButtonInner { + height: 100%; + /* hack claro.button.css */ + + background-image: url("form/images/commonFormArrows.png"); + background-repeat: no-repeat; + background-position: -140px 45%; } -.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ - background-position:-35px 45%; +.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner { + background-position: -35px 45%; } -.claro .dijitTimePicker .dijitUpArrowHover, -.claro .dijitTimePicker .dijitDownArrowHover { - background-color: #abd6ff; +/* hover */ +.claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover { + background-color: #abd6ff; } .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { - background-position:-175px 45%; + background-position: -175px 45%; } .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { - background-position:-70px 45%; + background-position: -70px 45%; } |