/* 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 */ @import "../variables"; .claro .dijitSliderBar { border-style: solid; outline: 1px; } .claro .dijitSliderFocused .dijitSliderBar { border-color: @focused-border-color; } .claro .dijitSliderHover .dijitSliderBar { border-color: @hovered-border-color; } .claro .dijitSliderDisabled .dijitSliderBar { background-image: none; border-color: @disabled-border-color; } .claro .dijitRuleLabelsContainer { color: @text-color; } /* Horizontal Slider */ .claro .dijitRuleLabelsContainerH { padding: 2px 0; } .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper{ border-color: @border-color; background-color: @slider-fullbar-background-color; .alpha-white-gradient (top, 1,0px, 1,1px, 0,2px); } .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper{ border-color: @border-color; background-color: @slider-remainingbar-background-color; } .claro .dijitSliderRightBumper { border-right: solid 1px @border-color; } .claro .dijitSliderLeftBumper { border-left: solid 1px @border-color; } .claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper{ background-color: @slider-hovered-fullbar-background-color; border-color: @hovered-border-color; } .claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper{ background-color: @slider-hovered-remainingbar-background-color; border-color: @hovered-border-color; } .claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper{ background-color: @slider-focused-fullbar-background-color; border-color: @focused-border-color; .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper{ background-color: @slider-focused-remainingbar-background-color; border-color: @focused-border-color; .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper{ background-color: @disabled-border-color; /* left side of slider, fill matches border */ background-image:none; } .claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper{ background-color: @disabled-background-color; } /* Vertical Slider */ .claro .dijitRuleLabelsContainerV { padding: 0 2px; } .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper{ border-color: @border-color; background-color: @slider-fullbar-background-color; .alpha-white-gradient (left, 1,0px, 0,1px); } .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper{ border-color: @border-color; background-color: @slider-remainingbar-background-color; } .claro .dijitSliderBottomBumper { border-bottom: solid 1px @border-color; } .claro .dijitSliderTopBumper { border-top: solid 1px @border-color; } .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper{ background-color: @slider-hovered-fullbar-background-color; border-color: @hovered-border-color; } .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper{ background-color: @slider-hovered-remainingbar-background-color; border-color: @hovered-border-color; } .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper{ background-color: @slider-focused-fullbar-background-color; border-color: @focused-border-color; .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper{ background-color: @slider-focused-remainingbar-background-color; border-color: @focused-border-color; .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper{ background-color: @disabled-border-color; /* bottom side of slider, fill matches border */ } .claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper{ background-color: @disabled-background-color; } /* ------- Thumbs ------- */ .claro .dijitSliderImageHandleH { border: 0; width: 18px; height: 16px; background-image: url("../@{image-form-slider-thumbs}"); background-repeat:no-repeat; background-position:0 0; } .claro .dijitSliderHover .dijitSliderImageHandleH { background-position:-18px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleH { background-position:-36px 0; } .claro .dijitSliderProgressBarH .dijitSliderThumbHover{ background-position:-36px 0; } .claro .dijitSliderProgressBarH .dijitSliderThumbActive{ background-position:-36px 0; } .claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { background-position:-54px 0; } .claro .dijitSliderImageHandleV { border: 0; width: 18px; height: 16px; background-image: url("../@{image-form-slider-thumbs}"); background-repeat:no-repeat; background-position:-289px 0; } .claro .dijitSliderHover .dijitSliderImageHandleV { background-position:-307px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleV { background-position:-325px 0; } .claro .dijitSliderProgressBarV .dijitSliderThumbHover{ background-position:-325px 0; } .claro .dijitSliderProgressBarV .dijitSliderThumbActive{ background-position:-325px 0; } .claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { background-position:-343px 0; } /* ---- Increment/Decrement Buttons ---- */ .claro .dijitSliderButtonContainerH{ padding: 1px 3px 1px 2px; } .claro .dijitSliderButtonContainerV{ padding: 3px 1px 2px 1px; } .claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { background-image: url("../@{image-form-common-arrows}"); background-repeat:no-repeat; background-color: @arrowbutton-background-color; .border-radius(2px); border: solid 1px @border-color; 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, .claro .dijitSliderActive .dijitSliderDecrementIconV, .claro .dijitSliderActive .dijitSliderIncrementIconV, .claro .dijitSliderHover .dijitSliderDecrementIconH, .claro .dijitSliderHover .dijitSliderIncrementIconH, .claro .dijitSliderHover .dijitSliderDecrementIconV, .claro .dijitSliderHover .dijitSliderIncrementIconV { /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ border: solid 1px @hovered-border-color; background-color: @slider-hoveredButton-background-color; } .claro .dijitSliderDecrementIconH { background-position:-357px 50%; } .claro .dijitSliderActive .dijitSliderDecrementIconH .claro .dijitSliderHover .dijitSliderDecrementIconH { background-position:-393px 50%; } .claro .dijitSliderIncrementIconH { background-position:-251px 50%; } .claro .dijitSliderActive .dijitSliderIncrementIconH .claro .dijitSliderHover .dijitSliderIncrementIconH { background-position:-283px 50%; } .claro .dijitSliderDecrementIconV { background-position:-38px 50%; } .claro .dijitSliderActive .dijitSliderDecrementIconV .claro .dijitSliderHover .dijitSliderDecrementIconV { background-position:-73px 50%; } .claro .dijitSliderIncrementIconV { background-position:-143px 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: @slider-button-hovered-background-color; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { background-color: @slider-button-pressed-background-color; border-color:@pressed-border-color; } .claro .dijitSliderButtonInner { visibility: hidden; } .claro .dijitSliderDisabled .dijitSliderBar{ border-color: @disabled-border-color; } .claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { border-color: @disabled-border-color; color: @disabled-text-color; } .claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { background-position:-321px 50%; background-color:@disabled-background-color; } .claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { background-position:-215px 50%; background-color:@disabled-background-color; } .claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { background-position:-3px 49%; background-color:@disabled-background-color; } .claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { background-position:-107px 49%; background-color:@disabled-background-color; }