/* ------------------------------------------------------------------------------ * * # ION Range Slider * * Styles for ION range slider plugin * * Version: 1.1 * Latest update: Mar 10, 2016 * * ---------------------------------------------------------------------------- */ // Functional styling // ------------------------------ // Base .irs { position: relative; display: block; height: @tooltip-arrow-width + (@padding-xs-vertical * 2) + @font-size-mini + (@slider-base-size * 3) + @slider-base-size; -webkit-touch-callout: none; .user-select(none); } // Hide original input .irs-hidden-input { position: absolute !important; display: block !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; outline: none !important; z-index: -9999 !important; background: none !important; border-style: solid !important; border-color: transparent !important; } // // Background line // // Base .irs-line { position: relative; display: block; overflow: hidden; outline: none; height: @slider-base-size; top: @tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size); background-color: @gray-lighter; border-radius: 100px; } // It consists of 3 parts .irs-line-left, .irs-line-mid, .irs-line-right { position: absolute; display: block; top: 0; } // Left .irs-line-left { left: 0; width: 11%; } // Middle .irs-line-mid { left: 9%; width: 82%; } // And right .irs-line-right { right: 0; width: 11%; } // // Colored bar // // Base .irs-bar { position: absolute; display: block; top: @tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size); left: 0; width: 0; height: @slider-base-size; background-color: @color-blue-500; border-radius: 100px; } // Edge .irs-bar-edge { position: absolute; display: block; top: 25px; left: 0; height: 12px; width: 9px; } // Shadow for highlight disabled range .irs-shadow { position: absolute; display: none; top: @tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size); left: 0; width: 0; height: @slider-base-size; background-color: @text-color; border-radius: 100px; .opacity(0.25); } // // Handles // // Base .irs-slider { position: absolute; display: block; width: (@slider-base-size * 3); height: (@slider-base-size * 3); background-color: #fcfcfc; border: 1px solid #bbb; cursor: pointer; top: (@tooltip-arrow-width + (@padding-xs-vertical * 3) + @font-size-mini + (@slider-base-size) - (((@slider-base-size * 3) - @slider-base-size) / 2)); border-radius: 100px; cursor: pointer; z-index: 1; // Small circle &:after { content: ''; display: inline-block; width: @slider-base-size; height: @slider-base-size; position: absolute; top: 50%; left: 50%; margin-top: -(@slider-base-size / 2); margin-left: -(@slider-base-size / 2); background-color: @color-grey-600; border-radius: 100px; } // Hover state &:hover, &:focus { background-color: #f7f7f7; } // Active state &:active { background-color: #fafafa; } // The last one is on top of the first one &.type_last { z-index: 2; } } // // Tooltips // // Base .irs-min, .irs-max, .irs-from, .irs-to, .irs-single { position: absolute; display: block; cursor: default; } // Minimum and maximum labels .irs-min, .irs-max { color: @text-muted; font-size: @font-size-mini; line-height: 1; top: 0; padding: @padding-xs-vertical; background-color: @gray-lighter; border-radius: @border-radius-small; } .irs-min { left: 0; } .irs-max { right: 0; } // Handle tooltips .irs-from, .irs-to, .irs-single { top: 0; left: 0; white-space: nowrap; color: #fff; font-size: @font-size-mini; line-height: 1; padding: @padding-xs-vertical; top: 0; background-color: @tooltip-bg; border-radius: @border-radius-small; // Tooltip arrow &:after { content: ""; position: absolute; display: block; bottom: -(@tooltip-arrow-width * 2); left: 50%; width: 0; height: 0; margin-left: -(@tooltip-arrow-width); overflow: hidden; border: @tooltip-arrow-width solid transparent; border-top-color: @tooltip-bg; } } // // The grid // // Base .irs-grid { position: absolute; display: none; bottom: 0; left: 0; width: 100%; height: 24px; } // If slider has grid .irs-with-grid { height: 75px; // Display grid .irs-grid { display: block; } } // Marker .irs-grid-pol { position: absolute; top: 0; left: 0; width: 1px; height: 8px; background-color: @text-muted; // Sub marker &.small { height: 4px; } } // Text label .irs-grid-text { position: absolute; bottom: 0; left: 0; white-space: nowrap; text-align: center; font-size: @font-size-mini; color: @text-muted; line-height: 1; padding: 0 3px; } // // Disabled state // // Disabled mask .irs-disable-mask { position: absolute; display: block; top: 0; left: -1%; width: 102%; height: 100%; cursor: default; background: transparent; z-index: 2; } // Mute slider if disabled .irs-disabled { .opacity(0.6); }