/*! * Materialize v0.97.1 (http://materializecss.com) * Copyright 2014-2015 Materialize * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) */ /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-user-select: none; -ms-touch-action: none; -ms-user-select: none; -moz-user-select: none; -moz-box-sizing: border-box; box-sizing: border-box; } .noUi-target { position: relative; direction: ltr; } .noUi-base { width: 100%; height: 100%; position: relative; z-index: 1; /* Fix 401 */ } .noUi-origin { position: absolute; right: 0; top: 0; left: 0; bottom: 0; } .noUi-handle { position: relative; z-index: 1; } .noUi-stacking .noUi-handle { /* This class is applied to the lower origin when its values is > 50%. */ z-index: 10; } .noUi-state-tap .noUi-origin { -webkit-transition: left 0.25s, top 0.25s; transition: left 0.25s, top 0.25s; } .noUi-state-drag * { cursor: inherit !important; } /* Painting and performance; * Browsers can paint handles in their own layer. */ .noUi-base { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* Slider size and handle placement; */ .noUi-horizontal { height: 18px; } .noUi-horizontal .noUi-handle { width: 34px; height: 28px; left: -17px; top: -6px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; left: -6px; top: -17px; } /* Styling; */ .noUi-background { background: #FAFAFA; box-shadow: inset 0 1px 1px #f0f0f0; } .noUi-connect { background: #3FB8AF; box-shadow: inset 0 0 3px rgba(51,51,51,0.45); -webkit-transition: background 450ms; transition: background 450ms; } .noUi-origin { border-radius: 2px; } .noUi-target { border-radius: 4px; border: 1px solid #D3D3D3; box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; } .noUi-target.noUi-connect { box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB; } /* Handles and cursors; */ .noUi-dragable { cursor: w-resize; } .noUi-vertical .noUi-dragable { cursor: n-resize; } .noUi-handle { border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } .noUi-active { box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; } /* Handle stripes; */ .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #E8E7E6; left: 14px; top: 6px; } .noUi-handle:after { left: 17px; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } /* Disabled state; */ [disabled].noUi-connect, [disabled] .noUi-connect { background: #B8B8B8; } [disabled].noUi-origin, [disabled] .noUi-handle { cursor: not-allowed; } /*Materialize Theming*/ .noUi-target { box-shadow: none; border: none; } .noUi-base { height: 15px; top: -6px; } .noUi-background { height: 3px; top: 6px; background-color: #bfbfbf; } .noUi-horizontal { height: 3px; } .noUi-connect { height: 3px; top: 6px; background-color: #26A69A; box-shadow: none; } /*Handle*/ .noUi-horizontal .noUi-handle { width: 15px; height: 15px; border-radius: 50%; box-shadow: none; background-color: #26A69A; border: none; left: -5px; top: -6px; transition: width .2s cubic-bezier(0.215, 0.610, 0.355, 1.000), height .2s cubic-bezier(0.215, 0.610, 0.355, 1.000), left .2s cubic-bezier(0.215, 0.610, 0.355, 1.000), top .2s cubic-bezier(0.215, 0.610, 0.355, 1.000); } .noUi-handle:before { content: none; } .noUi-handle:after { content: none; } /*Handle on Drag*/ .noUi-target .noUi-active.noUi-handle { width: 3px; height: 3px; left: 0; top: 0; } .noUi-target .noUi-active .range-label span { } .noUi-target .range-label { position: absolute; height: 30px; width: 30px; top: -17px; left: -2px; background-color: #26A69A; border-radius: 50%; transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000), transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: scale(.5) rotate(-45deg); transform-origin: 50% 100%; } .noUi-target .noUi-active .range-label { border-radius: 15px 15px 15px 0; transform: rotate(-45deg) translate(23px, -25px); } .range-label span { width: 100%; text-align: center; color: #fff; font-size: 12px; transform: rotate(45deg); opacity: 0; position: absolute; top: 7px; left: -1px; transition: opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1.000); } .noUi-active .range-label span { opacity: 1; }