From 81bea17aefb26859f825b9293c7c99192874806e Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 8 Nov 2011 20:40:44 +0400 Subject: upgrade Dojo to 1.6.1 --- lib/dijit/themes/claro/form/Slider.css | 422 ++++++++++++++++++--------------- 1 file changed, 227 insertions(+), 195 deletions(-) (limited to 'lib/dijit/themes/claro/form/Slider.css') diff --git a/lib/dijit/themes/claro/form/Slider.css b/lib/dijit/themes/claro/form/Slider.css index 51c2c2313..5694e8c76 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -1,204 +1,242 @@ - +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ .claro .dijitSliderBar { - border-style: solid; - outline: 1px; + border-style: solid; + outline: 1px; } .claro .dijitSliderFocused .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderHover .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderDisabled .dijitSliderBar { - background-image: none; - border-color: #d3d3d3; + background-image: none; + border-color: #d3d3d3; } +/* Horizontal Slider */ .claro .dijitRuleLabelsContainerH { - padding: 2px 0px; -} -.claro .dijitSlider .dijitSliderProgressBarH, -.claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -20px; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarH, -.claro .dijitSlider .dijitSliderRightBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -11px; - border-color: #b5bcc7; - background-color: #fff; + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -20px; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -11px; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderRightBumper { - border-right: solid 1px #b5bcc7; + border-right: solid 1px #b5bcc7; } .claro .dijitSliderLeftBumper { - border-left: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarH, -.claro .dijitSliderHover .dijitSliderLeftBumper{ - background-position:0 -20px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarH, -.claro .dijitSliderHover .dijitSliderRightBumper{ - background-position:0 0px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarH, -.claro .dijitSliderFocused .dijitSliderLeftBumper{ - background-position:0 -30px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarH, -.claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarH, -.claro .dijitSliderDisabled .dijitSliderLeftBumper{ - background-color: #cdcdcd; - background-image:none; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarH, -.claro .dijitSliderDisabled .dijitSliderRightBumper{ - background-color: #efefef; + border-left: solid 1px #b5bcc7; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { + background-position: 0 -20px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { + background-position: 0 0; + background-color: #ffffff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { + background-position: 0 -30px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { + background-position: 0 -9px; + background-color: #ffffff; + border-color: #769dc0; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { + background-color: #d3d3d3; + /* left side of slider, fill matches border */ + + background-image: none; } +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper { + background-color: #efefef; +} +/* Vertical Slider */ .claro .dijitRuleLabelsContainerV { - padding: 0px 2px; -} -.claro .dijitSlider .dijitSliderProgressBarV, -.claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-36px 0; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarV, -.claro .dijitSlider .dijitSliderTopBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-3px 0; - border-color: #b5bcc7; - background-color: #fff; + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -36px 0; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -3px 0; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderBottomBumper { - border-bottom: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; } .claro .dijitSliderTopBumper { - border-top: solid 1px #b5bcc7; + border-top: solid 1px #b5bcc7; } -.claro .dijitSliderHover .dijitSliderProgressBarV, -.claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; - background-color: #abd6ff; +.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { + background-position: -36px 0; + background-color: #abd6ff; } -.claro .dijitSliderHover .dijitSliderRemainingBarV, -.claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; - background-color: #fff; +.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { + background-position: 0 0; + background-color: #ffffff; } -.claro .dijitSliderFocused .dijitSliderProgressBarV, -.claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; - background-color: #abd6ff; +.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { + background-position: -56px 0; + background-color: #abd6ff; } -.claro .dijitSliderFocused .dijitSliderRemainingBarV, -.claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; - background-color: #fff; +.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { + background-position: -18px 0; + background-color: #ffffff; } -.claro .dijitSliderDisabled .dijitSliderProgressBarV, -.claro .dijitSliderDisabled .dijitSliderBottomBumper{ - background-color: #cdcdcd; +.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { + background-color: #d3d3d3; + /* bottom side of slider, fill matches border */ + } -.claro .dijitSliderDisabled .dijitSliderRemainingBarV, -.claro .dijitSliderDisabled .dijitSliderTopBumper{ - background-color: #efefef; +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { + background-color: #efefef; } +/* ------- Thumbs ------- */ .claro .dijitSliderImageHandleH { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:0 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: 0 0; } .claro .dijitSliderHover .dijitSliderImageHandleH { - background-position:-18px 0; + background-position: -18px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleH { - background-position:-36px 0; + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbHover { + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbActive { + background-position: -36px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleH, -.claro .dijitSliderDisabled .dijitSliderImageHandleH { - background-position:-54px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position: -54px 0; } .claro .dijitSliderImageHandleV { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:-289px 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: -289px 0; } .claro .dijitSliderHover .dijitSliderImageHandleV { - background-position:-307px 0; + background-position: -307px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleV { - background-position:-325px 0; + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbHover { + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbActive { + background-position: -325px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleV, -.claro .dijitSliderDisabled .dijitSliderImageHandleV { - background-position:-343px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position: -343px 0; } -.claro .dijitSliderButtonContainerH{ - padding: 1px 3px 1px 2px; +/* ---- Increment/Decrement Buttons ---- */ +.claro .dijitSliderButtonContainerH { + padding: 1px 3px 1px 2px; } -.claro .dijitSliderButtonContainerV{ - padding: 3px 1px 2px 1px; +.claro .dijitSliderButtonContainerV { + padding: 3px 1px 2px 1px; } .claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { - background-image: url('images/commonFormArrows.png'); - background-repeat:no-repeat; - background-color: #e9ecf2; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border: solid 1px #b5bcc7; - font-size: 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH { - height: 12px; - width: 9px; -} -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - height: 9px; - width: 12px; + background-image: url('images/commonFormArrows.png'); + background-repeat: no-repeat; + background-color: #efefef; + -moz-border-radius: 2px; + border-radius: 2px; + border: solid 1px #b5bcc7; + font-size: 1px; +} +.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH { + height: 12px; + width: 9px; +} +.claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { + height: 9px; + width: 12px; } .claro .dijitSliderActive .dijitSliderDecrementIconH, .claro .dijitSliderActive .dijitSliderIncrementIconH, @@ -208,79 +246,73 @@ .claro .dijitSliderHover .dijitSliderIncrementIconH, .claro .dijitSliderHover .dijitSliderDecrementIconV, .claro .dijitSliderHover .dijitSliderIncrementIconV { - border: solid 1px #769dc0; - background-color:#fff; + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + + border: solid 1px #769dc0; + background-color: #ffffff; } .claro .dijitSliderDecrementIconH { - background-position:-357px 50%; + background-position: -357px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconH -.claro .dijitSliderHover .dijitSliderDecrementIconH { - background-position:-393px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position: -393px 50%; } .claro .dijitSliderIncrementIconH { - background-position:-251px 50%; + background-position: -251px 50%; } -.claro .dijitSliderActive .dijitSliderIncrementIconH -.claro .dijitSliderHover .dijitSliderIncrementIconH { - background-position:-283px 50%; +.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position: -283px 50%; } .claro .dijitSliderDecrementIconV { - background-position:-38px 50%; + background-position: -38px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconV -.claro .dijitSliderHover .dijitSliderDecrementIconV { - background-position:-73px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position: -73px 50%; } .claro .dijitSliderIncrementIconV { - background-position:-143px 49%; + background-position: -143px 49%; } -.claro .dijitSliderActive .dijitSliderIncrementIconV -.claro .dijitSliderHover .dijitSliderIncrementIconV { - background-position:-178px 49%; +.claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV { + background-position: -178px 49%; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { - background-color: #cce3fc; + background-color: #cfe5fa; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { - background-color: #a5d0fc; - border-color:#6591b9; + background-color: #abd6ff; + border-color: #769dc0; } .claro .dijitSliderButtonInner { - visibility: hidden; + visibility: hidden; } -.claro .dijitSliderDisabled .dijitSliderBar{ - border-color: #d3d3d3; +.claro .dijitSliderDisabled .dijitSliderBar { + border-color: #d3d3d3; } -.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { - border-color: #d3d3d3; - color: #bdbdbd; +.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { + border-color: #d3d3d3; + color: #818181; } -.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, -.claro .dijitSliderDisabled .dijitSliderDecrementIconH { - background-position:-321px 50%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position: -321px 50%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, -.claro .dijitSliderDisabled .dijitSliderIncrementIconH { - background-position:-215px 50%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position: -215px 50%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, -.claro .dijitSliderDisabled .dijitSliderDecrementIconV { - background-position:-3px 49%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position: -3px 49%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, -.claro .dijitSliderDisabled .dijitSliderIncrementIconV { - background-position:-107px 49%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position: -107px 49%; + background-color: #efefef; } .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, .dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, @@ -290,5 +322,5 @@ .dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, .dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { - background-image:none; + background-image: none; } -- cgit v1.2.3