diff --git a/package-lock.json b/package-lock.json index f99c1e2..22bacca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1168,6 +1168,11 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -1803,6 +1808,88 @@ } } }, + "@material-ui/core": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz", + "integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.11.2", + "@material-ui/system": "^4.11.2", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.11.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0", + "react-transition-group": "^4.4.0" + } + }, + "@material-ui/styles": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz", + "integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.11.2", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", + "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + } + } + }, + "@material-ui/system": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz", + "integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.11.2", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", + "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + } + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + }, "@nodelib/fs.scandir": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz", @@ -4062,6 +4149,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4580,6 +4672,15 @@ } } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "3.4.2", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz", @@ -7448,6 +7549,11 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==" }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -7548,6 +7654,14 @@ "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" }, + "indefinite-observable": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz", + "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==", + "requires": { + "symbol-observable": "1.2.0" + } + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -7848,6 +7962,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -9662,6 +9781,85 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz", + "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.5.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz", + "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0" + } + }, + "jss-plugin-global": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz", + "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0" + } + }, + "jss-plugin-nested": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz", + "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz", + "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz", + "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz", + "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.5.0" + } + }, "jsx-ast-utils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz", @@ -11091,6 +11289,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", diff --git a/package.json b/package.json index 754b148..7f18558 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@material-ui/core": "^4.11.2", "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/src/App.js b/src/App.js index b80c4b9..708e36c 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import { Router,BrowserRouter, Route, Switch } from 'react-router-dom'; import UserContext from "./context/UserContext"; import Tracking from "./components/Tracking"; import Options from "./components/Options"; +import Stepper from './components/Stepper'; export default function App() { const [userData, setUserData ] = useState({ @@ -50,7 +51,7 @@ export default function App() { - + diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 10ffe76..a2316f8 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -38,12 +38,13 @@ export default function NavBar() {
  • About
  • Services
  • Contact us
    • +
  • Log Out
    • {userData.user ? (
  • Log Out
    • ) : (
  • Register
    • -
    • +
  • login
    •  )} diff --git a/src/components/Options.js b/src/components/Options.js index 1ed87bf..2385fa2 100644 --- a/src/components/Options.js +++ b/src/components/Options.js @@ -1,49 +1,52 @@ import React from 'react'; -import "./options.css"; +import './options.css'; export default function Options() { - const previousBtn = document.getElementById('previousBtn'); - const nextBtn = document.getElementById('nextBtn'); - const finishBtn = document.getElementById('finishBtn'); - const content = document.getElementById('content'); - const bullets = [...document.querySelectorAll('.bullet')]; + document.addEventListener('DOMContentLoaded', () => { + const previousBtn = document.getElementById('previousBtn'); + const nextBtn = document.getElementById('nextBtn'); + const finishBtn = document.getElementById('finishBtn'); + const content = document.getElementById('content'); + const bullets = [...document.querySelectorAll('.bullet')]; - const MAX_STEPS = 4; - let currentStep = 1; - if(nextBtn){ - nextBtn.addEventListener('click', () => { - bullets[currentStep - 1].classList.add('completed'); - currentStep += 1; - previousBtn.disabled = false; - if (currentStep === MAX_STEPS) { - nextBtn.disabled = true; - finishBtn.disabled = false; + const MAX_STEPS = 4; + let currentStep = 1; + if (nextBtn) { + nextBtn.addEventListener('click', () => { + bullets[currentStep - 1].classList.add('completed'); + currentStep += 1; + previousBtn.disabled = false; + if (currentStep === MAX_STEPS) { + nextBtn.disabled = true; + finishBtn.disabled = false; + } + content.innerText = `Step Number ${currentStep}`; + + }); } - content.innerText = `Step Number ${currentStep}`; - - }); -} - if(previousBtn){ - previousBtn.addEventListener('click', () => { - bullets[currentStep - 2].classList.remove('completed'); - currentStep -= 1; - nextBtn.disabled = false; - finishBtn.disabled = true; - if (currentStep === 1) { - previousBtn.disabled = true; + if (previousBtn) { + previousBtn.addEventListener('click', () => { + bullets[currentStep - 2].classList.remove('completed'); + currentStep -= 1; + nextBtn.disabled = false; + finishBtn.disabled = true; + if (currentStep === 1) { + previousBtn.disabled = true; + } + content.innerText = `Step Number ${currentStep}`; + }); } - content.innerText = `Step Number ${currentStep}`; - }); -} - if(finishBtn){ - finishBtn.addEventListener('click', () => { - window.location.reload(); - }); -} + if (finishBtn) { + finishBtn.addEventListener('click', () => { + window.location.reload(); + }); + } + + }) return ( diff --git a/src/components/Stepper.js b/src/components/Stepper.js new file mode 100644 index 0000000..45f7478 --- /dev/null +++ b/src/components/Stepper.js @@ -0,0 +1,66 @@ +import React from 'react'; +import './stepper.css'; + +export default function Stepper() { + + document.addEventListener('DOMContentLoaded', () => { + var list = document.getElementById('progress'), + next = document.getElementById('next'), + clear = document.getElementById('clear'), + children = list.children, + completed = 0; + + // simulate activating a node + next.addEventListener('click', function () { + + // count the number of completed nodes. + completed = (completed === 0) ? 1 : completed + 2; + if (completed > children.length) return; + + // for each node that is completed, reflect the status + // and show a green color! + for (var i = 0; i < completed; i++) { + children[i].children[0].classList.remove('grey'); + children[i].children[0].classList.add('green'); + + // if this child is a node and not divider, + // make it shine a little more + if (i % 2 === 0) { + children[i].children[0].classList.add('activated'); + } + } + + }, false); + + // clear the activated state of the markers + clear.addEventListener('click', function () { + for (var i = 0; i < children.length; i++) { + children[i].children[0].classList.remove('green'); + children[i].children[0].classList.remove('activated'); + children[i].children[0].classList.add('grey'); + } + completed = 0; + }, false); + }); + + return ( +
    +

    Relocation Status

    +
    +
    +
    +
      +

    • Transport tickets confirmed

      • +
      • +

    • Packers & movers due to come in a day

      • +
      • +

    • school admission being confirmed

      • +
      • +

    • House is empty

      • +
    + + +
    + ) + +} \ No newline at end of file diff --git a/src/components/Tracking.js b/src/components/Tracking.js index 8142dc2..fe66281 100644 --- a/src/components/Tracking.js +++ b/src/components/Tracking.js @@ -1,18 +1,101 @@ import React from 'react'; -import "./tracking.css"; +import './tracking.css'; export default function Tracking() { + document.addEventListener('DOMContentLoaded', () => { + const previousBtn = document.getElementById('previousBtn'); + const nextBtn = document.getElementById('nextBtn'); + const finishBtn = document.getElementById('finishBtn'); + const content = document.getElementById('content'); + const nodes = [...document.querySelectorAll('.node')]; + const dividers = [...document.querySelectorAll('.divider')]; + + const MAX_STEPS = 4; + let currentStep = 1; + if (nextBtn) { + nextBtn.addEventListener('click', () => { + nodes[currentStep - 1].classList.add('completed'); + currentStep += 1; + previousBtn.disabled = false; + if (currentStep === MAX_STEPS) { + nextBtn.disabled = true; + finishBtn.disabled = false; + } + content.innerText = `Step Number ${currentStep}`; + dividers[currentStep -1 ].classList.add('completed'); + + + }); + } + + + if (previousBtn) { + previousBtn.addEventListener('click', () => { + nodes[currentStep - 2].classList.remove('completed'); + currentStep -= 1; + nextBtn.disabled = false; + finishBtn.disabled = true; + if (currentStep === 1) { + previousBtn.disabled = true; + } + content.innerText = `Step Number ${currentStep}`; + }); + } + + if (finishBtn) { + finishBtn.addEventListener('click', () => { + window.location.reload(); + }); + } + + }) return (
    -
      -
    • Post a contest
      • -
    • Award an entry - Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button -
      • -
    • Post a contest
      • -
    • Handover
      • -
    • Provide feedback
      • +
        +
      • +

        + +

        +
        + 1 +
        +
        • +
        • +
      • +

        + +

        +
        + 2 +
        +
        • +
        • +
      • +

        + +

        +
        + 3 +
        +
        • +
        • +
      • +

        + +

        +
        + 4 +
        +
        • +
      +
      +

      Step Number 1

      + + + +
    + ) } \ No newline at end of file diff --git a/src/components/stepper.css b/src/components/stepper.css new file mode 100644 index 0000000..3ecfe77 --- /dev/null +++ b/src/components/stepper.css @@ -0,0 +1,61 @@ +*, *:after, *:before { margin:0; padding:0; } +body { + padding: 15px; + font-family: Helvetica, sans-serif; +} + +input[type="button"] { + margin-top: 20px; +} +.container{ + margin-left:0px; + max-width: 100vw; +} +h1{ + font-family: Ubuntu; + text-align: left; + color: #66bfbf; + margin-top: 0px; +} +ul{ + text-align: left; + + +} +.node { + height: 12px; + width: 12px; + border-radius: 100%; + display:inline-block; + transition: all 1000ms ease; +} + +.activated { + box-shadow: 0px 0px 0px 0px rgba(194, 255, 194, 0.8); +} + +.divider { + height: 86px; + width: 2px; + margin-left: 4px; + transition: all 800ms ease; +} +p { + margin-bottom: 0rem; +} + +li p { + display:inline-block; + margin-left: 25px; +} + +li { + list-style: none; + line-height: 1px; +} + + +.blue { background-color: rgba(82, 165, 255, 1); } +.green{ background-color: rgba(92, 184, 92, 1) } +.red { background-color: rgba(255, 148, 148, 1); } +.grey { background-color: rgba(201, 201, 201, 1); } \ No newline at end of file diff --git a/src/components/tracking.css b/src/components/tracking.css index 08023e0..74b9bfd 100644 --- a/src/components/tracking.css +++ b/src/components/tracking.css @@ -1,79 +1,53 @@ -.wrapper { - width: 100vw; - font-family: 'Helvetica'; - font-size: 14px; - border: 1px solid #CCC; - height: 100vh; +*, *:after, *:before { margin:0; padding:0; } +.wrapper{ + max-width: 400px; + margin: 0 auto; + margin-top: 20px; + padding: 40px; + } -.StepProgress { - position: relative; - padding-left: 45px; - list-style: none; +.stepProgressBar { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 300px; + margin: 0 auto; + margin-bottom: 40px; } -.StepProgress::before { - display: inline-block; - content: ''; - position: absolute; - top: 0; - left: 15px; - width: 10px; - height: 100%; - border-left: 2px solid #CCC; +li{ + list-style-type: none; } -.StepProgress-item { - position: relative; - counter-increment: list; +.node { + border: 1px solid #28a745; + height: 20px; + width: 20px; + border-radius: 100%; + color: #28a745; + display: inline-block; + position: relative; + transition: background-color 500ms; + line-height:20px; } -.StepProgress-item:not(:last-child) { - padding-bottom: 20px; +.node.completed { + content: ""; + color: white; + background-color: #28a745; } -.StepProgress-item::before { - display: inline-block; - content: ''; - position: absolute; - left: -30px; - height: 100%; - width: 10px; -} -.StepProgress-item::after { - content: ''; - display: inline-block; - position: absolute; - top: 0; - left: -37px; - width: 12px; - height: 12px; - border: 2px solid #CCC; - border-radius: 50%; - background-color: #FFF; -} -.StepProgress-item.is-done::before { - border-left: 5px solid green; -} -.StepProgress-item.is-done::after { - content: "✔"; - font-size: 10px; - color: #FFF; - text-align: center; - border: 10px solid green; - background-color: green; -} -.StepProgress-item.current::before { - border-left: 2px solid green; -} -.StepProgress-item.current::after { - content: counter(list); - padding-top: 1px; - width: 19px; - height: 18px; - top: -4px; - left: -40px; - font-size: 14px; - text-align: center; - color: green; - border: 2px solid green; - background-color: white; -} -.StepProgress strong { - display: block; + +.node.completed::after { + content: ""; + position: absolute; + height: 1px; + width: 54px; + background-color: #28a745; } + +.divider.completed::after{ + list-style-type: none; + background-color: grey; + position: relative; + height: 80px; + width: 2px; + margin-left: 134px; + transition: all 800ms ease; +} \ No newline at end of file