forked from ppfun/pixelplanet
move from unmaintained react-toggle-button to react-toggle
This commit is contained in:
parent
e105b8fa07
commit
76a3f7d42a
101
package-lock.json
generated
101
package-lock.json
generated
|
@ -38,7 +38,7 @@
|
||||||
"react-redux": "^7.2.6",
|
"react-redux": "^7.2.6",
|
||||||
"react-responsive": "^8.2.0",
|
"react-responsive": "^8.2.0",
|
||||||
"react-stay-scrolled": "^7.4.0",
|
"react-stay-scrolled": "^7.4.0",
|
||||||
"react-toggle-button": "^2.1.0",
|
"react-toggle": "^4.1.2",
|
||||||
"redis": "^4.1.0",
|
"redis": "^4.1.0",
|
||||||
"redux": "^4.1.2",
|
"redux": "^4.1.2",
|
||||||
"redux-logger": "^3.0.6",
|
"redux-logger": "^3.0.6",
|
||||||
|
@ -3760,6 +3760,11 @@
|
||||||
"node": ">=6.0"
|
"node": ">=6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/classnames": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
|
||||||
|
},
|
||||||
"node_modules/clean-css": {
|
"node_modules/clean-css": {
|
||||||
"version": "5.3.0",
|
"version": "5.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
|
||||||
|
@ -8356,11 +8361,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
||||||
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
||||||
},
|
},
|
||||||
"node_modules/performance-now": {
|
|
||||||
"version": "0.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
|
|
||||||
"integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg=="
|
|
||||||
},
|
|
||||||
"node_modules/pg-connection-string": {
|
"node_modules/pg-connection-string": {
|
||||||
"version": "2.5.0",
|
"version": "2.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
|
||||||
|
@ -8719,19 +8719,6 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/raf": {
|
|
||||||
"version": "3.4.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
|
|
||||||
"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
|
|
||||||
"dependencies": {
|
|
||||||
"performance-now": "^2.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/raf/node_modules/performance-now": {
|
|
||||||
"version": "2.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
|
||||||
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
|
|
||||||
},
|
|
||||||
"node_modules/random-bytes": {
|
"node_modules/random-bytes": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
|
||||||
|
@ -8900,29 +8887,17 @@
|
||||||
"react": ">=16.8.0"
|
"react": ">=16.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-toggle-button": {
|
"node_modules/react-toggle": {
|
||||||
"version": "2.2.0",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
|
||||||
"integrity": "sha512-u6D/TalAvfuaIHq59v8WAddztrM6W/FtmTFrk6bvb3JmMpEDh2gQbKD8hFbfCtwwOAygZfsmzQdUAYg3x+wywQ==",
|
"integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"prop-types": "^15.6.0",
|
"classnames": "^2.2.5"
|
||||||
"react-motion": "^0.5.2"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": ">=0.13.2 || ^0.14 || ^15.0.0"
|
"prop-types": ">= 15.3.0 < 18",
|
||||||
}
|
"react": ">= 15.3.0 < 18",
|
||||||
},
|
"react-dom": ">= 15.3.0 < 18"
|
||||||
"node_modules/react-toggle-button/node_modules/react-motion": {
|
|
||||||
"version": "0.5.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
|
|
||||||
"integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"performance-now": "^0.2.0",
|
|
||||||
"prop-types": "^15.5.8",
|
|
||||||
"raf": "^3.1.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^0.14.9 || ^15.3.0 || ^16.0.0"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/readable-stream": {
|
"node_modules/readable-stream": {
|
||||||
|
@ -13900,6 +13875,11 @@
|
||||||
"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
|
"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"classnames": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
|
||||||
|
},
|
||||||
"clean-css": {
|
"clean-css": {
|
||||||
"version": "5.3.0",
|
"version": "5.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
|
||||||
|
@ -17411,11 +17391,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
||||||
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
||||||
},
|
},
|
||||||
"performance-now": {
|
|
||||||
"version": "0.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
|
|
||||||
"integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg=="
|
|
||||||
},
|
|
||||||
"pg-connection-string": {
|
"pg-connection-string": {
|
||||||
"version": "2.5.0",
|
"version": "2.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
|
||||||
|
@ -17663,21 +17638,6 @@
|
||||||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"raf": {
|
|
||||||
"version": "3.4.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
|
|
||||||
"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
|
|
||||||
"requires": {
|
|
||||||
"performance-now": "^2.1.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"performance-now": {
|
|
||||||
"version": "2.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
|
||||||
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"random-bytes": {
|
"random-bytes": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
|
||||||
|
@ -17803,25 +17763,12 @@
|
||||||
"tiny-invariant": "^1.2.0"
|
"tiny-invariant": "^1.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-toggle-button": {
|
"react-toggle": {
|
||||||
"version": "2.2.0",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
|
||||||
"integrity": "sha512-u6D/TalAvfuaIHq59v8WAddztrM6W/FtmTFrk6bvb3JmMpEDh2gQbKD8hFbfCtwwOAygZfsmzQdUAYg3x+wywQ==",
|
"integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"prop-types": "^15.6.0",
|
"classnames": "^2.2.5"
|
||||||
"react-motion": "^0.5.2"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"react-motion": {
|
|
||||||
"version": "0.5.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
|
|
||||||
"integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
|
|
||||||
"requires": {
|
|
||||||
"performance-now": "^0.2.0",
|
|
||||||
"prop-types": "^15.5.8",
|
|
||||||
"raf": "^3.1.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"readable-stream": {
|
"readable-stream": {
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
"react-redux": "^7.2.6",
|
"react-redux": "^7.2.6",
|
||||||
"react-responsive": "^8.2.0",
|
"react-responsive": "^8.2.0",
|
||||||
"react-stay-scrolled": "^7.4.0",
|
"react-stay-scrolled": "^7.4.0",
|
||||||
"react-toggle-button": "^2.1.0",
|
"react-toggle": "^4.1.2",
|
||||||
"redis": "^4.1.0",
|
"redis": "^4.1.0",
|
||||||
"redux": "^4.1.2",
|
"redux": "^4.1.2",
|
||||||
"redux-logger": "^3.0.6",
|
"redux-logger": "^3.0.6",
|
||||||
|
|
|
@ -14,14 +14,14 @@ import { requestHistoricalTimes } from '../store/actions/fetch';
|
||||||
|
|
||||||
|
|
||||||
function stringToDate(dateString) {
|
function stringToDate(dateString) {
|
||||||
if (!dateString) return null;
|
if (!dateString) return '';
|
||||||
// YYYYMMDD
|
// YYYYMMDD
|
||||||
// eslint-disable-next-line max-len
|
// eslint-disable-next-line max-len
|
||||||
return `${dateString.substring(0, 4)}-${dateString.substring(4, 6)}-${dateString.substring(6)}`;
|
return `${dateString.substring(0, 4)}-${dateString.substring(4, 6)}-${dateString.substring(6)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function stringToTime(timeString) {
|
function stringToTime(timeString) {
|
||||||
if (!timeString) return null;
|
if (!timeString) return '';
|
||||||
return `${timeString.substring(0, 2)}:${timeString.substring(2)}`;
|
return `${timeString.substring(0, 2)}:${timeString.substring(2)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -105,17 +105,18 @@ const HistorySelect = () => {
|
||||||
<div id="historyselect">
|
<div id="historyselect">
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
requiredPattern="\d{4}-\d{2}-\d{2}"
|
pattern="\d{4}-\d{2}-\d{2}"
|
||||||
|
key="dateinput"
|
||||||
value={selectedDate}
|
value={selectedDate}
|
||||||
min={canvasStartDate}
|
min={canvasStartDate}
|
||||||
max={max}
|
max={max}
|
||||||
ref={dateSelect}
|
ref={dateSelect}
|
||||||
onChange={handleDateChange}
|
onChange={handleDateChange}
|
||||||
/>
|
/>
|
||||||
<div>
|
<div key="timeselcon">
|
||||||
{ (!!times.length && historicalTime && !submitting)
|
{ (!!times.length && historicalTime && !submitting)
|
||||||
&& (
|
&& (
|
||||||
<div>
|
<div key="timesel">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="hsar"
|
className="hsar"
|
||||||
|
@ -128,7 +129,6 @@ const HistorySelect = () => {
|
||||||
{times.map((value) => (
|
{times.map((value) => (
|
||||||
<option
|
<option
|
||||||
value={value}
|
value={value}
|
||||||
selected={value === selectedTime}
|
|
||||||
>
|
>
|
||||||
{value}
|
{value}
|
||||||
</option>
|
</option>
|
||||||
|
|
|
@ -2,35 +2,14 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ToggleButton from 'react-toggle-button';
|
import ToggleButton from 'react-toggle';
|
||||||
import { MdCheck, MdClose } from 'react-icons/md';
|
|
||||||
|
|
||||||
|
|
||||||
const MdToggleButton = ({ value, onToggle, deactivated }) => (
|
const MdToggleButton = ({ value, onToggle, deactivated }) => (
|
||||||
<ToggleButton
|
<ToggleButton
|
||||||
inactiveLabel={<MdClose />}
|
checked={value}
|
||||||
activeLabel={<MdCheck />}
|
onChange={onToggle}
|
||||||
value={value}
|
disabled={deactivated}
|
||||||
onToggle={onToggle}
|
|
||||||
colors={(deactivated)
|
|
||||||
? {
|
|
||||||
activeThumb: {
|
|
||||||
base: '#b2b2b2',
|
|
||||||
},
|
|
||||||
inactiveTumb: {
|
|
||||||
base: '#b2b2b2',
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
base: '#cbcbcb',
|
|
||||||
},
|
|
||||||
inactive: {
|
|
||||||
base: '#cbcbcb',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
: {}}
|
|
||||||
thumbStyleHover={{ backgroundColor: '#ededed' }}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
// thumbAnimateRange={[-10, 36]}
|
|
||||||
export default MdToggleButton;
|
export default MdToggleButton;
|
||||||
|
|
|
@ -44,6 +44,7 @@ const titleStyles = {
|
||||||
|
|
||||||
const rowStyles = {
|
const rowStyles = {
|
||||||
...flexy,
|
...flexy,
|
||||||
|
alignItems: 'center',
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,6 @@ import compression from 'compression';
|
||||||
import express from 'express';
|
import express from 'express';
|
||||||
import http from 'http';
|
import http from 'http';
|
||||||
|
|
||||||
// import baseCss from './components/base.tcss';
|
|
||||||
import forceGC from './core/forceGC';
|
import forceGC from './core/forceGC';
|
||||||
import logger from './core/logger';
|
import logger from './core/logger';
|
||||||
import rankings from './core/ranking';
|
import rankings from './core/ranking';
|
||||||
|
|
|
@ -951,3 +951,148 @@ tr:nth-child(even) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*-----------*/
|
||||||
|
/* react-toggle css */
|
||||||
|
|
||||||
|
.react-toggle {
|
||||||
|
touch-action: pan-x;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle-screenreader-only {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle--disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
-webkit-transition: opacity 0.25s;
|
||||||
|
transition: opacity 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle-track {
|
||||||
|
width: 50px;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: #4D4D4D;
|
||||||
|
-webkit-transition: all 0.2s ease;
|
||||||
|
-moz-transition: all 0.2s ease;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle--checked .react-toggle-track {
|
||||||
|
background-color: #19AB27;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||||
|
background-color: #128D15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle-track-check {
|
||||||
|
position: absolute;
|
||||||
|
width: 14px;
|
||||||
|
height: 10px;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
line-height: 0;
|
||||||
|
left: 8px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.25s ease;
|
||||||
|
-moz-transition: opacity 0.25s ease;
|
||||||
|
transition: opacity 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle--checked .react-toggle-track-check {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transition: opacity 0.25s ease;
|
||||||
|
-moz-transition: opacity 0.25s ease;
|
||||||
|
transition: opacity 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle-track-x {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
line-height: 0;
|
||||||
|
right: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transition: opacity 0.25s ease;
|
||||||
|
-moz-transition: opacity 0.25s ease;
|
||||||
|
transition: opacity 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle--checked .react-toggle-track-x {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle-thumb {
|
||||||
|
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border: 1px solid #4D4D4D;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #FAFAFA;
|
||||||
|
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
-webkit-transition: all 0.25s ease;
|
||||||
|
-moz-transition: all 0.25s ease;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle--checked .react-toggle-thumb {
|
||||||
|
left: 27px;
|
||||||
|
border-color: #19AB27;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle--focus .react-toggle-thumb {
|
||||||
|
-webkit-box-shadow: 0px 0px 3px 2px #0099E0;
|
||||||
|
-moz-box-shadow: 0px 0px 3px 2px #0099E0;
|
||||||
|
box-shadow: 0px 0px 2px 3px #0099E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
|
||||||
|
-webkit-box-shadow: 0px 0px 5px 5px #0099E0;
|
||||||
|
-moz-box-shadow: 0px 0px 5px 5px #0099E0;
|
||||||
|
box-shadow: 0px 0px 5px 5px #0099E0;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user