/* 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 .dijitSlider {
|
background: transparent;
|
border: 0 none;
|
-webkit-border-radius: 3px;
|
border-radius: 3px;
|
padding: 0;
|
}
|
.claro .dijitSliderBar {
|
border-style: solid;
|
outline: 1px;
|
}
|
.claro .dijitRuleLabelsContainer {
|
color: #2b2e34;
|
}
|
.claro .dijitSliderDisabled {
|
opacity: 0.65;
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
|
filter: alpha(opacity=65);
|
}
|
.claro .dijitRuleLabelsContainerH {
|
padding: 0;
|
}
|
.claro .dijitSliderBarH,
|
.claro .dijitSliderBumperH {
|
height: 4px;
|
}
|
.claro .dijitSlider .dijitSliderLeftBumper {
|
-webkit-border-radius: 2px 0 0 2px;
|
border-radius: 2px 0 0 2px;
|
border-width: 1px 0 1px 1px;
|
margin-left: 4px;
|
}
|
.claro .dijitSlider .dijitSliderRightBumper {
|
-webkit-border-radius: 0 2px 2px 0;
|
border-radius: 0 2px 2px 0;
|
border-width: 1px 1px 1px 0;
|
margin-left: -2px;
|
margin-right: 4px;
|
}
|
.claro .dijitSlider .dijitSliderProgressBarH{
|
border-color: #ebebeb;
|
background-color: #ebebeb;
|
background-image: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
.claro .dijitSlider .dijitSliderLeftBumper {
|
border-color: #ebebeb;
|
background-color: #ebebeb;
|
background-image: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
-webkit-border-radius: 2px 0 0 2px;
|
border-radius: 2px 0 0 2px;
|
}
|
.claro .dijitSlider .dijitSliderRemainingBarH,
|
.claro .dijitSlider .dijitSliderRightBumper {
|
border-color: #878787;
|
background-color: #878787;
|
-webkit-border-radius: 2px;
|
border-radius: 2px;
|
}
|
.claro .dijitSliderHover .dijitSliderProgressBarH,
|
.claro .dijitSliderHover .dijitSliderLeftBumper {
|
border-color: #ebebeb;
|
background-color: #ebebeb;
|
background-image: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
.claro .dijitSliderFocused .dijitSliderProgressBarH,
|
.claro .dijitSliderFocused .dijitSliderLeftBumper {
|
border-color: #ebebeb;
|
/*-webkit-border-radius: 2px 0 0 2px;
|
border-radius: 2px 0 0 2px;*/
|
}
|
.claro .dijitSliderFocused .dijitSliderRemainingBarH,
|
.claro .dijitSliderFocused .dijitSliderRightBumper {
|
border-color: #878787;
|
background-color: #878787;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
.claro .dijitRuleLabelsContainerV {
|
padding: 0;
|
}
|
.claro .dijitSliderBarV,
|
.claro .dijitSliderBumperV {
|
width: 4px;
|
}
|
.claro .dijitSlider .dijitSliderTopBumper {
|
-webkit-border-radius: 2px 2px 0 0;
|
border-radius: 2px 2px 0 0;
|
border-width: 1px 1px 0 1px;
|
margin-top: 4px;
|
margin-bottom: -2px;
|
}
|
.claro .dijitSlider .dijitSliderBottomBumper {
|
-webkit-border-radius: 0 0 2px 2px;
|
border-radius: 0 0 2px 2px;
|
border-width: 0 1px 1px 1px;
|
margin-bottom: 4px;
|
}
|
.claro .dijitSlider .dijitSliderProgressBarV,
|
.claro .dijitSlider .dijitSliderBottomBumper {
|
border-color: #ebebeb;
|
background-color: #ebebeb;
|
background-image: -webkit-linear-gradient(left, #f5f5f5, #ebebeb);
|
background-image: -moz-linear-gradient(left, #f5f5f5, #ebebeb);
|
background-image: -o-linear-gradient(left, #f5f5f5, #ebebeb);
|
background-image: -ms-linear-gradient(left, #f5f5f5, #ebebeb);
|
background-image: linear-gradient(to right, #f5f5f5, #ebebeb);
|
}
|
.claro .dijitSlider .dijitSliderRemainingBarV,
|
.claro .dijitSlider .dijitSliderTopBumper {
|
border-color: #878787;
|
background-color: #878787;
|
}
|
.claro .dijitSliderHover .dijitSliderProgressBarV,
|
.claro .dijitSliderHover .dijitSliderBottomBumper {
|
border-color: #ebebeb;
|
background-color: #d7d7d7;
|
background-image: -webkit-linear-gradient(left, #e1e1e1, #d7d7d7);
|
background-image: -moz-linear-gradient(left, #e1e1e1, #d7d7d7);
|
background-image: -o-linear-gradient(left, #e1e1e1, #d7d7d7);
|
background-image: -ms-linear-gradient(left, #e1e1e1, #d7d7d7);
|
background-image: linear-gradient(to right, #e1e1e1, #d7d7d7);
|
}
|
.claro .dijitSliderFocused .dijitSliderProgressBarV,
|
.claro .dijitSliderFocused .dijitSliderBottomBumper {
|
border-color: #ebebeb;
|
}
|
.claro .dijitSliderImageHandle {
|
background: #ffffff;
|
-webkit-border-radius: 50%;
|
border-radius: 50%;
|
border: 0 none;
|
width: 16px;
|
height: 16px;
|
margin-top: -2px;
|
position: absolute;
|
}
|
.claro .dijitSliderImageHandle:after {
|
content: "";
|
display: block;
|
background: #6e6e6e;
|
-webkit-border-radius: 50%;
|
border-radius: 50%;
|
height: 8px;
|
width: 8px;
|
left: 4px;
|
top: 4px;
|
position: absolute;
|
}
|
.claro .dijitSliderDisabled.dijitSliderFocused .dijitSliderImageHandle:after {
|
display: none;
|
outline: none;
|
}
|
.claro .dijitSliderDecrementIconH,
|
.claro .dijitSliderIncrementIconH,
|
.claro .dijitSliderDecrementIconV,
|
.claro .dijitSliderIncrementIconV {
|
padding: 0;
|
height: 20px;
|
width: 20px;
|
background-color: transparent;
|
border: 0 none;
|
}
|
.claro .dijitSliderHover .dijitSliderDecrementIconH,
|
.claro .dijitSliderHover .dijitSliderIncrementIconH,
|
.claro .dijitSliderHover .dijitSliderDecrementButtonHover,
|
.claro .dijitSliderHover .dijitSliderIncrementButtonHover {
|
background-color: #222;
|
border: 0 none;
|
}
|
.claro .dijitSliderActive .dijitSliderDecrementIconH,
|
.claro .dijitSliderActive .dijitSliderIncrementIconH,
|
.claro .dijitSliderActive .dijitSliderDecrementButtonActive,
|
.claro .dijitSliderActive .dijitSliderIncrementButtonActive {
|
background-color: #222;
|
border: 0 none;
|
}
|
.claro .dijitSliderIncrementIconH,
|
.claro .dijitSliderIncrementIconV {
|
background-image: url("icons/Icon_Right_16.png");
|
background-position: center center;
|
}
|
.claro .dijitSliderRtl .dijitSliderIncrementIconH,
|
.claro .dijitSliderRtl .dijitSliderIncrementIconV {
|
background-image: url("icons/Icon_Left_16.png");
|
background-position: center center;
|
}
|
.claro .dijitSliderDecrementIconH,
|
.claro .dijitSliderDecrementIconV {
|
background-image: url("icons/Icon_Left_16.png");
|
background-position: center center;
|
}
|
.claro .dijitSliderRtl .dijitSliderDecrementIconH,
|
.claro .dijitSliderRtl .dijitSliderDecrementIconV {
|
background-image: url("icons/Icon_Right_16.png");
|
background-position: center center;
|
}
|
.claro .dijitRuleMarkH,
|
.claro .dijitRuleMarkV {
|
display: none;
|
border-left: 1px solid #9a9b9f;
|
border-right: 1px solid #fff;
|
}
|
.claro .dijitRuleMarkV {
|
border-right: 0 none;
|
border-bottom: 1px solid #fff;
|
}
|
.claro .dijitRuleLabelContainerH {
|
margin-top: 2px;
|
margin-bottom: 2px;
|
color: #909090 !important;
|
font-weight: bold;
|
font-size: 100% !important;
|
}
|
.claro .dijitRuleLabelContainerV {
|
margin-left: 2px;
|
margin-right: 2px;
|
color: #909090 !important;
|
font-weight: bold;
|
font-size: 100% !important;
|
}
|
.claro .dojoxRangeSlider .dijitSliderLeftBumper {
|
border-color: #878787;
|
background-color: #878787;
|
}
|
.claro .dojoxRangeSlider .dijitSliderRemainingBarH {
|
-webkit-border-radius: 0;
|
border-radius: 0;
|
}
|
