diff --git a/examples/common.js.map b/examples/common.js.map index 0be03fe..4ccd0b2 100644 --- a/examples/common.js.map +++ b/examples/common.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///webpack/bootstrap f73b527d6d8fc277bef8"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,wEAAgE,aAAa;AAC7E;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA","file":"common.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t1:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".\" + ({\"0\":\"simple\"}[chunkId]||chunkId) + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap f73b527d6d8fc277bef8\n **/"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/bootstrap 9f2ab6b87963b1c0ffdc"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,wEAAgE,aAAa;AAC7E;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA","file":"common.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t1:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".\" + ({\"0\":\"simple\"}[chunkId]||chunkId) + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 9f2ab6b87963b1c0ffdc\n **/"],"sourceRoot":""} \ No newline at end of file diff --git a/examples/simple.css b/examples/simple.css index 9c77d53..ef2975b 100644 --- a/examples/simple.css +++ b/examples/simple.css @@ -91,13 +91,14 @@ .rc-slider-disabled .rc-slider-track { background-color: #ccc; } -.rc-slider-disabled .rc-slider-handle { +.rc-slider-disabled .rc-slider-handle, +.rc-slider-disabled .rc-slider-dot { border-color: #ccc; background-color: #fff; cursor: not-allowed; } .rc-slider-disabled .rc-slider-mark-text, -.rc-slider-disabled .dot { +.rc-slider-disabled .rc-slider-dot { cursor: not-allowed !important; } .rc-slider-tooltip { @@ -167,14 +168,14 @@ } .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { - -webkit-animation-name: rcSliderTooltipZoomDownOutIn; - animation-name: rcSliderTooltipZoomDownOutIn; + -webkit-animation-name: rcSliderTooltipZoomDownIn; + animation-name: rcSliderTooltipZoomDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { - -webkit-animation-name: rcSliderTooltipZoomDownOutOut; - animation-name: rcSliderTooltipZoomDownOutOut; + -webkit-animation-name: rcSliderTooltipZoomDownOut; + animation-name: rcSliderTooltipZoomDownOut; -webkit-animation-play-state: running; animation-play-state: running; } @@ -190,7 +191,7 @@ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } -@-webkit-keyframes rcSliderTooltipZoomDownOutIn { +@-webkit-keyframes rcSliderTooltipZoomDownIn { 0% { opacity: 0; -webkit-transform-origin: 50% 100%; @@ -205,7 +206,7 @@ transform: scale(1, 1); } } -@keyframes rcSliderTooltipZoomDownOutIn { +@keyframes rcSliderTooltipZoomDownIn { 0% { opacity: 0; -webkit-transform-origin: 50% 100%; @@ -220,7 +221,7 @@ transform: scale(1, 1); } } -@-webkit-keyframes rcSliderTooltipZoomDownOutOut { +@-webkit-keyframes rcSliderTooltipZoomDownOut { 0% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; @@ -235,7 +236,7 @@ transform: scale(0, 0); } } -@keyframes rcSliderTooltipZoomDownOutOut { +@keyframes rcSliderTooltipZoomDownOut { 0% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; diff --git a/examples/simple.css.map b/examples/simple.css.map index 8234b58..ebdc78b 100644 --- a/examples/simple.css.map +++ b/examples/simple.css.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///assets/index.less"],"names":[],"mappings":"AAuBA;EACE;EACA;EACA;EACA;EACA;EAdA;EACA;CAPD;AAeD;EALI;EACA;CAPH;AAoBC;EACE;EACA;EACA;EACA;EACA;EACA;CAlBH;AAqBC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAnBH;AAqBG;EACE;CAnBL;AAsBK;EACE;EACA;CApBP;AAyBC;EACE;EACA;EACA;EACA;EACA;EACA;CAvBH;AA0BC;EACE;EACA;EACA;EACA;EACA;EACA;CAxBH;AA0BG;EACE;CAxBL;AA4BC;EACE;EACA;EACA;EACA;EACA;CA1BH;AA6BC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CA3BH;AA4BG;EACE;CA1BL;AA4BG;EACE;CA1BL;AA4BG;EACE;CA1BL;AA8BC;EACE;CA5BH;AA2BC;EAII;CA5BL;AAwBC;EAQI;EACA;EACA;CA7BL;AAmBC;;EAcI;CA7BL;AAkCC;EACE;EACA;EACA;EACA;EACA;EA9HF;EACA;CA+FD;AAyBC;EArHE;EACA;CA+FH;AA8BG;EACE;CA5BL;AA+BG;EACE;CA7BL;AAgCG;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CA9BL;AAiCG;EACE;EACA;EACA;EACA;EACA;CA/BL;AAkCG;EACE;EACA;EACA;EACA;EACA;CAhCL;AA4CC;;EANA;UAAA;EACA;UAAA;EACA;EAME;UAAA;CAvCH;AAyCC;EAVA;UAAA;EACA;UAAA;EACA;EAUE;UAAA;CArCH;AAuCC;;EACE;UAAA;EACA;UAAA;CApCH;AAsCC;EACE;UAAA;EACA;UAAA;CApCH;AAyCC;;EACE;MAAA;UAAA;EACA;UAAA;CAtCH;AAwCC;EACE;UAAA;CAtCH;AA2CD;EACE;IACE;IACA;YAAA;IACA;YAAA;GAzCD;EA2CD;IACE;YAAA;IACA;YAAA;GAzCD;CACF;AAgCD;EACE;IACE;IACA;YAAA;IACA;YAAA;GAzCD;EA2CD;IACE;YAAA;IACA;YAAA;GAzCD;CACF;AA4CD;EACE;IACE;YAAA;IACA;YAAA;GA1CD;EA4CD;IACE;IACA;YAAA;IACA;YAAA;GA1CD;CACF;AAiCD;EACE;IACE;YAAA;IACA;YAAA;GA1CD;EA4CD;IACE;IACA;YAAA;IACA;YAAA;GA1CD;CACF","file":"simple.css","sourcesContent":["@prefixClass: rc-slider;\n\n@disabledColor: #ccc;\n@border-radius-base: 6px;\n@primary-color: #2db7f5;\n@tooltip-color: #fff;\n@tooltip-bg: tint(#666, 4%);\n@tooltip-arrow-width: 4px;\n@tooltip-distance: @tooltip-arrow-width+4;\n@tooltip-arrow-color: @tooltip-bg;\n@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);\n@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);\n\n.borderBox() {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari\n\n * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari\n }\n}\n\n.@{prefixClass} {\n position: relative;\n height: 4px;\n width: 100%;\n border-radius: @border-radius-base;\n background-color: #e9e9e9;\n\n .borderBox();\n\n &-track {\n position: absolute;\n left: 0;\n height: 4px;\n border-radius: @border-radius-base;\n background-color: tint(@primary-color, 60%);\n z-index: 1;\n }\n\n &-handle {\n position: absolute;\n margin-left: -7px;\n margin-top: -5px;\n width: 14px;\n height: 14px;\n cursor: pointer;\n border-radius: 50%;\n border: solid 2px tint(@primary-color, 50%);\n background-color: #fff;\n z-index: 2;\n\n &:hover {\n border-color: tint(@primary-color, 20%);\n }\n &-active {\n &:active {\n border-color: tint(@primary-color, 20%);\n box-shadow: 0 0 5px tint(@primary-color, 20%);\n }\n }\n }\n\n &-mark {\n position: absolute;\n top: 10px;\n left: 0;\n width: 100%;\n font-size: 12px;\n z-index: 3;\n }\n\n &-mark-text {\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n color: #999;\n\n &-active {\n color: #666;\n }\n }\n\n &-step {\n position: absolute;\n width: 100%;\n height: 4px;\n background: transparent;\n z-index: 1;\n }\n\n &-dot {\n position: absolute;\n top: -2px;\n margin-left: -4px;\n width: 8px;\n height: 8px;\n border: 2px solid #e9e9e9;\n background-color: #fff;\n cursor: pointer;\n border-radius: 50%;\n vertical-align: middle;\n &:first-child {\n margin-left: -4px;\n }\n &:last-child {\n margin-left: -4px;\n }\n &-active {\n border-color: tint(@primary-color, 50%);\n }\n }\n\n &-disabled {\n background-color: #e9e9e9;\n\n .@{prefixClass}-track {\n background-color: @disabledColor;\n }\n\n .@{prefixClass}-handle {\n border-color: @disabledColor;\n background-color: #fff;\n cursor: not-allowed;\n }\n\n .@{prefixClass}-mark-text, .dot {\n cursor: not-allowed!important;\n }\n }\n\n // slider tooltip style\n &-tooltip {\n position: absolute;\n left: -9999px;\n top: -9999px;\n z-index: 4;\n visibility: visible;\n\n .borderBox();\n\n &-hidden {\n display: none;\n }\n\n &-placement-points-bc-tc {\n padding: @tooltip-arrow-width 0 @tooltip-distance 0;\n }\n\n &-inner {\n padding: 6px 0;\n width: 24px;\n height: 24px;\n font-size: 12px;\n line-height: 1;\n color: @tooltip-color;\n text-align: center;\n text-decoration: none;\n background-color: @tooltip-bg;\n border-radius: @border-radius-base;\n box-shadow: 0 0 4px #d9d9d9;\n }\n\n &-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n\n &-placement-points-bc-tc &-arrow {\n bottom: @tooltip-distance - @tooltip-arrow-width;\n left: 50%;\n margin-left: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width @tooltip-arrow-width 0;\n border-top-color: @tooltip-arrow-color;\n }\n }\n}\n\n.motion-common() {\n animation-duration: .3s;\n animation-fill-mode: both;\n display: block !important;\n}\n\n.make-motion(@className, @keyframeName) {\n .@{className}-enter, .@{className}-appear {\n .motion-common();\n animation-play-state: paused;\n }\n .@{className}-leave {\n .motion-common();\n animation-play-state: paused;\n }\n .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {\n animation-name: ~\"@{keyframeName}In\";\n animation-play-state: running;\n }\n .@{className}-leave.@{className}-leave-active {\n animation-name: ~\"@{keyframeName}Out\";\n animation-play-state: running;\n }\n}\n.zoom-motion(@className, @keyframeName) {\n .make-motion(@className, @keyframeName);\n .@{className}-enter, .@{className}-appear {\n transform: scale(0, 0); // need this by yiminghe\n animation-timing-function: @ease-out-quint;\n }\n .@{className}-leave {\n animation-timing-function: @ease-in-quint;\n }\n}\n.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDownOut);\n\n@keyframes rcSliderTooltipZoomDownOutIn {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n 100% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n}\n\n@keyframes rcSliderTooltipZoomDownOutOut {\n 0% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n}\n\n\n/** WEBPACK FOOTER **\n ** assets/index.less\n **/"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///assets/index.less"],"names":[],"mappings":"AAuBA;EACE;EACA;EACA;EACA;EACA;EAdA;EACA;CAPD;AAeD;EALI;EACA;CAPH;AAoBC;EACE;EACA;EACA;EACA;EACA;EACA;CAlBH;AAqBC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAnBH;AAqBG;EACE;CAnBL;AAsBK;EACE;EACA;CApBP;AAyBC;EACE;EACA;EACA;EACA;EACA;EACA;CAvBH;AA0BC;EACE;EACA;EACA;EACA;EACA;EACA;CAxBH;AA0BG;EACE;CAxBL;AA4BC;EACE;EACA;EACA;EACA;EACA;CA1BH;AA6BC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CA3BH;AA4BG;EACE;CA1BL;AA4BG;EACE;CA1BL;AA4BG;EACE;CA1BL;AA8BC;EACE;CA5BH;AA2BC;EAII;CA5BL;AAwBC;;EAQI;EACA;EACA;CA5BL;AAkBC;;EAcI;CA5BL;AAiCC;EACE;EACA;EACA;EACA;EACA;EA9HF;EACA;CAgGD;AAwBC;EArHE;EACA;CAgGH;AA6BG;EACE;CA3BL;AA8BG;EACE;CA5BL;AA+BG;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CA7BL;AAgCG;EACE;EACA;EACA;EACA;EACA;CA9BL;AAiCG;EACE;EACA;EACA;EACA;EACA;CA/BL;AA2CC;;EANA;UAAA;EACA;UAAA;EACA;EAME;UAAA;CAtCH;AAwCC;EAVA;UAAA;EACA;UAAA;EACA;EAUE;UAAA;CApCH;AAsCC;;EACE;UAAA;EACA;UAAA;CAnCH;AAqCC;EACE;UAAA;EACA;UAAA;CAnCH;AAwCC;;EACE;MAAA;UAAA;EACA;UAAA;CArCH;AAuCC;EACE;UAAA;CArCH;AA0CD;EACE;IACE;IACA;YAAA;IACA;YAAA;GAxCD;EA0CD;IACE;YAAA;IACA;YAAA;GAxCD;CACF;AA+BD;EACE;IACE;IACA;YAAA;IACA;YAAA;GAxCD;EA0CD;IACE;YAAA;IACA;YAAA;GAxCD;CACF;AA2CD;EACE;IACE;YAAA;IACA;YAAA;GAzCD;EA2CD;IACE;IACA;YAAA;IACA;YAAA;GAzCD;CACF;AAgCD;EACE;IACE;YAAA;IACA;YAAA;GAzCD;EA2CD;IACE;IACA;YAAA;IACA;YAAA;GAzCD;CACF","file":"simple.css","sourcesContent":["@prefixClass: rc-slider;\n\n@disabledColor: #ccc;\n@border-radius-base: 6px;\n@primary-color: #2db7f5;\n@tooltip-color: #fff;\n@tooltip-bg: tint(#666, 4%);\n@tooltip-arrow-width: 4px;\n@tooltip-distance: @tooltip-arrow-width+4;\n@tooltip-arrow-color: @tooltip-bg;\n@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);\n@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);\n\n.borderBox() {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari\n\n * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari\n }\n}\n\n.@{prefixClass} {\n position: relative;\n height: 4px;\n width: 100%;\n border-radius: @border-radius-base;\n background-color: #e9e9e9;\n\n .borderBox();\n\n &-track {\n position: absolute;\n left: 0;\n height: 4px;\n border-radius: @border-radius-base;\n background-color: tint(@primary-color, 60%);\n z-index: 1;\n }\n\n &-handle {\n position: absolute;\n margin-left: -7px;\n margin-top: -5px;\n width: 14px;\n height: 14px;\n cursor: pointer;\n border-radius: 50%;\n border: solid 2px tint(@primary-color, 50%);\n background-color: #fff;\n z-index: 2;\n\n &:hover {\n border-color: tint(@primary-color, 20%);\n }\n &-active {\n &:active {\n border-color: tint(@primary-color, 20%);\n box-shadow: 0 0 5px tint(@primary-color, 20%);\n }\n }\n }\n\n &-mark {\n position: absolute;\n top: 10px;\n left: 0;\n width: 100%;\n font-size: 12px;\n z-index: 3;\n }\n\n &-mark-text {\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n color: #999;\n\n &-active {\n color: #666;\n }\n }\n\n &-step {\n position: absolute;\n width: 100%;\n height: 4px;\n background: transparent;\n z-index: 1;\n }\n\n &-dot {\n position: absolute;\n top: -2px;\n margin-left: -4px;\n width: 8px;\n height: 8px;\n border: 2px solid #e9e9e9;\n background-color: #fff;\n cursor: pointer;\n border-radius: 50%;\n vertical-align: middle;\n &:first-child {\n margin-left: -4px;\n }\n &:last-child {\n margin-left: -4px;\n }\n &-active {\n border-color: tint(@primary-color, 50%);\n }\n }\n\n &-disabled {\n background-color: #e9e9e9;\n\n .@{prefixClass}-track {\n background-color: @disabledColor;\n }\n\n .@{prefixClass}-handle, .@{prefixClass}-dot {\n border-color: @disabledColor;\n background-color: #fff;\n cursor: not-allowed;\n }\n\n .@{prefixClass}-mark-text, .@{prefixClass}-dot {\n cursor: not-allowed!important;\n }\n }\n\n // slider tooltip style\n &-tooltip {\n position: absolute;\n left: -9999px;\n top: -9999px;\n z-index: 4;\n visibility: visible;\n\n .borderBox();\n\n &-hidden {\n display: none;\n }\n\n &-placement-points-bc-tc {\n padding: @tooltip-arrow-width 0 @tooltip-distance 0;\n }\n\n &-inner {\n padding: 6px 0;\n width: 24px;\n height: 24px;\n font-size: 12px;\n line-height: 1;\n color: @tooltip-color;\n text-align: center;\n text-decoration: none;\n background-color: @tooltip-bg;\n border-radius: @border-radius-base;\n box-shadow: 0 0 4px #d9d9d9;\n }\n\n &-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n\n &-placement-points-bc-tc &-arrow {\n bottom: @tooltip-distance - @tooltip-arrow-width;\n left: 50%;\n margin-left: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width @tooltip-arrow-width 0;\n border-top-color: @tooltip-arrow-color;\n }\n }\n}\n\n.motion-common() {\n animation-duration: .3s;\n animation-fill-mode: both;\n display: block !important;\n}\n\n.make-motion(@className, @keyframeName) {\n .@{className}-enter, .@{className}-appear {\n .motion-common();\n animation-play-state: paused;\n }\n .@{className}-leave {\n .motion-common();\n animation-play-state: paused;\n }\n .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {\n animation-name: ~\"@{keyframeName}In\";\n animation-play-state: running;\n }\n .@{className}-leave.@{className}-leave-active {\n animation-name: ~\"@{keyframeName}Out\";\n animation-play-state: running;\n }\n}\n.zoom-motion(@className, @keyframeName) {\n .make-motion(@className, @keyframeName);\n .@{className}-enter, .@{className}-appear {\n transform: scale(0, 0); // need this by yiminghe\n animation-timing-function: @ease-out-quint;\n }\n .@{className}-leave {\n animation-timing-function: @ease-in-quint;\n }\n}\n.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);\n\n@keyframes rcSliderTooltipZoomDownIn {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n 100% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n}\n\n@keyframes rcSliderTooltipZoomDownOut {\n 0% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n}\n\n\n\n/** WEBPACK FOOTER **\n ** assets/index.less\n **/"],"sourceRoot":""} \ No newline at end of file diff --git a/examples/simple.html b/examples/simple.html index f827435..9dcab37 100644 --- a/examples/simple.html +++ b/examples/simple.html @@ -239,7 +239,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
slider ui component for react
'use strict';
+ 'use strict';
-require('rc-slider/assets/index.css');
+require('rc-slider/assets/index.css');
-var Slider = require('rc-slider');
-var React = require('react');
+var Slider = require('rc-slider');
+var React = require('react');
-function onChange(v){
- console.log(v);
+function onChange(v){
+ console.log(v);
}
-// React.render(<div style={{width:400,margin:100}}><Slider marks={["一","二","三","四","五"]} defaultIndex={2} /></div>, document.getElementById('__react-content'));
-// React.render(<div style={{width:400,margin:100}}><Slider className='rc-slider' step={20}/></div>, document.getElementById('__react-content'));
-React.render(<div style={{width:400,margin:100}}><Slider onChange={onChange} tipTransitionName='rc-slider-tooltip-zoom-down'/></div>, document.getElementById('__react-content'));
-
+// React.render(<div style={{width:400,margin:100}}><Slider marks={["一","二","三","四","五"]} defaultIndex={2} /></div>, document.getElementById('__react-content'));
+// React.render(<div style={{width:400,margin:100}}><Slider withDots className='rc-slider' step={20}/></div>, document.getElementById('__react-content'));
+// React.render(<div style={{width:400,margin:100}}><Slider className='rc-slider' step={20}/></div>, document.getElementById('__react-content'));
+React.render(<div style={{width:400,margin:100}}><Slider onChange={onChange} tipTransitionName='rc-slider-tooltip-zoom-down'/></div>, document.getElementById('__react-content'));
+
\n * wrappers (injected at creation time)\n * + +\n * | |\n * +-----------------|--------|--------------+\n * | v | |\n * | +---------------+ | |\n * | +--| wrapper1 |---|----+ |\n * | | +---------------+ v | |\n * | | +-------------+ | |\n * | | +----| wrapper2 |--------+ |\n * | | | +-------------+ | | |\n * | | | | | |\n * | v v v v | wrapper\n * | +---+ +---+ +---------+ +---+ +---+ | invariants\n * perform(anyMethod) | | | | | | | | | | | | maintained\n * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->\n * | | | | | | | | | | | |\n * | | | | | | | | | | | |\n * | | | | | | | | | | | |\n * | +---+ +---+ +---------+ +---+ +---+ |\n * | initialize close |\n * +-----------------------------------------+\n *\n *\n * Use cases:\n * - Preserving the input selection ranges before/after reconciliation.\n * Restoring selection even in the event of an unexpected error.\n * - Deactivating events while rearranging the DOM, preventing blurs/focuses,\n * while guaranteeing that afterwards, the event system is reactivated.\n * - Flushing a queue of collected DOM mutations to the main UI thread after a\n * reconciliation takes place in a worker thread.\n * - Invoking any collected `componentDidUpdate` callbacks after rendering new\n * content.\n * - (Future use case): Wrapping particular flushes of the `ReactWorker` queue\n * to preserve the `scrollTop` (an automatic scroll aware DOM).\n * - (Future use case): Layout calculations before and after DOM updates.\n *\n * Transactional plugin API:\n * - A module that has an `initialize` method that returns any precomputation.\n * - and a `close` method that accepts the precomputation. `close` is invoked\n * when the wrapped process is completed, or has failed.\n *\n * @param {Array