├── commit.sh ├── .env ├── src ├── assets │ ├── scss │ │ ├── react │ │ │ ├── plugins │ │ │ │ └── _plugin-react-bootstrap-switch.scss │ │ │ ├── paper-kit │ │ │ │ ├── _inputs.scss │ │ │ │ ├── _navbars.scss │ │ │ │ ├── _dropdown.scss │ │ │ │ ├── _responsive.scss │ │ │ │ ├── _switch.scss │ │ │ │ └── _tooltips-and-popovers.scss │ │ │ └── react-differences.scss │ │ ├── paper-kit │ │ │ ├── mixins │ │ │ │ ├── _tabs.scss │ │ │ │ ├── _navbars.scss │ │ │ │ ├── _alerts.scss │ │ │ │ ├── _transparency.scss │ │ │ │ ├── _popovers.scss │ │ │ │ ├── _labels.scss │ │ │ │ ├── _inputs.scss │ │ │ │ └── _buttons.scss │ │ │ ├── cards │ │ │ │ ├── _card-plain.scss │ │ │ │ ├── _card-register.scss │ │ │ │ └── _card-profile.scss │ │ │ ├── _mixins.scss │ │ │ ├── _progress-bars.scss │ │ │ ├── _labels.scss │ │ │ ├── _badges.scss │ │ │ ├── _alerts.scss │ │ │ ├── _images.scss │ │ │ ├── _social-buttons.scss │ │ │ ├── _modal.scss │ │ │ ├── _carousel.scss │ │ │ ├── _icons.scss │ │ │ ├── _tags.scss │ │ │ ├── _sections.scss │ │ │ ├── _footers.scss │ │ │ ├── _sliders.scss │ │ │ ├── _typography.scss │ │ │ ├── _checkbox-radio.scss │ │ │ ├── _headers.scss │ │ │ ├── _switch.scss │ │ │ ├── plugins │ │ │ │ ├── _plugin-nouislider.scss │ │ │ │ └── _plugin-perfect-scrollbar.scss │ │ │ ├── _dropdown.scss │ │ │ ├── _misc.scss │ │ │ ├── _inputs.scss │ │ │ ├── _sidebar.scss │ │ │ ├── _examples.scss │ │ │ └── _buttons.scss │ │ └── paper-kit.scss │ ├── img │ │ ├── eva.jpg │ │ ├── logo.png │ │ ├── ryan.jpg │ │ ├── avatar.jpg │ │ ├── clouds.png │ │ ├── favicon.ico │ │ ├── favicon.png │ │ ├── fog-low.png │ │ ├── header.jpg │ │ ├── login.jpg │ │ ├── flags │ │ │ ├── AD.png │ │ │ ├── AE.png │ │ │ ├── AG.png │ │ │ ├── AM.png │ │ │ ├── AR.png │ │ │ ├── AT.png │ │ │ ├── AU.png │ │ │ ├── BE.png │ │ │ ├── BF.png │ │ │ ├── BG.png │ │ │ ├── BO.png │ │ │ ├── BR.png │ │ │ ├── CA.png │ │ │ ├── CD.png │ │ │ ├── CG.png │ │ │ ├── CH.png │ │ │ ├── CL.png │ │ │ ├── CM.png │ │ │ ├── CN.png │ │ │ ├── CO.png │ │ │ ├── CZ.png │ │ │ ├── DE.png │ │ │ ├── DJ.png │ │ │ ├── DK.png │ │ │ ├── DZ.png │ │ │ ├── EE.png │ │ │ ├── EG.png │ │ │ ├── ES.png │ │ │ ├── FI.png │ │ │ ├── FR.png │ │ │ ├── GA.png │ │ │ ├── GB.png │ │ │ ├── GM.png │ │ │ ├── GT.png │ │ │ ├── HN.png │ │ │ ├── HT.png │ │ │ ├── HU.png │ │ │ ├── ID.png │ │ │ ├── IE.png │ │ │ ├── IL.png │ │ │ ├── IN.png │ │ │ ├── IQ.png │ │ │ ├── IR.png │ │ │ ├── IT.png │ │ │ ├── JM.png │ │ │ ├── JO.png │ │ │ ├── JP.png │ │ │ ├── KG.png │ │ │ ├── KN.png │ │ │ ├── KP.png │ │ │ ├── KR.png │ │ │ ├── KW.png │ │ │ ├── KZ.png │ │ │ ├── LA.png │ │ │ ├── LB.png │ │ │ ├── LC.png │ │ │ ├── LS.png │ │ │ ├── LU.png │ │ │ ├── LV.png │ │ │ ├── MG.png │ │ │ ├── MK.png │ │ │ ├── ML.png │ │ │ ├── MM.png │ │ │ ├── MT.png │ │ │ ├── MX.png │ │ │ ├── NA.png │ │ │ ├── NE.png │ │ │ ├── NG.png │ │ │ ├── NI.png │ │ │ ├── NL.png │ │ │ ├── NO.png │ │ │ ├── OM.png │ │ │ ├── PA.png │ │ │ ├── PE.png │ │ │ ├── PG.png │ │ │ ├── PK.png │ │ │ ├── PL.png │ │ │ ├── PT.png │ │ │ ├── PY.png │ │ │ ├── QA.png │ │ │ ├── RO.png │ │ │ ├── RU.png │ │ │ ├── RW.png │ │ │ ├── SA.png │ │ │ ├── SE.png │ │ │ ├── SG.png │ │ │ ├── SL.png │ │ │ ├── SN.png │ │ │ ├── SO.png │ │ │ ├── SV.png │ │ │ ├── TD.png │ │ │ ├── TJ.png │ │ │ ├── TL.png │ │ │ ├── TR.png │ │ │ ├── TZ.png │ │ │ ├── UA.png │ │ │ ├── US.png │ │ │ ├── VE.png │ │ │ ├── VN.png │ │ │ └── YE.png │ │ ├── new_logo.png │ │ ├── apple-icon.png │ │ ├── bruno-abatti.jpg │ │ ├── daniel-olahh.jpg │ │ ├── daniel-olahs.jpg │ │ ├── ilya-yakover.jpg │ │ ├── login-image.jpg │ │ ├── placeholder.jpg │ │ ├── antoine-barres.jpg │ │ ├── default-avatar.png │ │ ├── fabio-mangione.jpg │ │ ├── soroush-karimi.jpg │ │ ├── blurred-image-1.jpg │ │ ├── faces │ │ │ ├── kaci-baum-2.jpg │ │ │ ├── joe-gardner-2.jpg │ │ │ ├── ayo-ogunseinde-2.jpg │ │ │ ├── clem-onojeghuo-2.jpg │ │ │ ├── clem-onojeghuo-3.jpg │ │ │ └── erik-lucatero-2.jpg │ │ ├── federico-beccari.jpg │ │ ├── joshua-stannard.jpg │ │ ├── uriel-soberanes.jpg │ │ ├── invision-white-slim.png │ │ ├── examples │ │ │ ├── landing-page.png │ │ │ └── profile-page.png │ │ ├── creative-tim-white-slim2.png │ │ └── nucleo-logo.svg │ └── fonts │ │ ├── nucleo-icons.eot │ │ ├── nucleo-icons.ttf │ │ ├── nucleo-icons.woff │ │ └── nucleo-icons.woff2 ├── views │ ├── index-sections │ │ ├── SectionDark.js │ │ ├── SectionExamples.js │ │ ├── SectionNucleoIcons.js │ │ ├── SectionNotifications.js │ │ ├── SectionCarousel.js │ │ ├── SectionLogin.js │ │ └── SectionDownload.js │ ├── Index.js │ └── examples │ │ └── RegisterPage.js ├── components │ ├── Headers │ │ ├── ProfilePageHeader.js │ │ ├── LandingPageHeader.js │ │ └── IndexHeader.js │ ├── Footers │ │ └── DemoFooter.js │ └── Navbars │ │ ├── IndexNavbar.js │ │ └── ExamplesNavbar.js ├── index.js └── logo.svg ├── .npmrc ├── public ├── favicon.ico ├── apple-icon.png ├── manifest.json └── index.html ├── jsconfig.json ├── .gitignore ├── ISSUE_TEMPLATE.md ├── genezio.yaml ├── LICENSE.md ├── .github └── workflows │ └── main.yml ├── package.json └── CHANGELOG.md /commit.sh: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false -------------------------------------------------------------------------------- /src/assets/scss/react/plugins/_plugin-react-bootstrap-switch.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/public/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/eva.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/eva.jpg -------------------------------------------------------------------------------- /src/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/logo.png -------------------------------------------------------------------------------- /src/assets/img/ryan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/ryan.jpg -------------------------------------------------------------------------------- /src/assets/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/avatar.jpg -------------------------------------------------------------------------------- /src/assets/img/clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/clouds.png -------------------------------------------------------------------------------- /src/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/fog-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/fog-low.png -------------------------------------------------------------------------------- /src/assets/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/header.jpg -------------------------------------------------------------------------------- /src/assets/img/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/login.jpg -------------------------------------------------------------------------------- /src/assets/img/flags/AD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/AD.png -------------------------------------------------------------------------------- /src/assets/img/flags/AE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/AE.png -------------------------------------------------------------------------------- /src/assets/img/flags/AG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/AG.png -------------------------------------------------------------------------------- /src/assets/img/flags/AM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/AM.png -------------------------------------------------------------------------------- /src/assets/img/flags/AR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/AR.png -------------------------------------------------------------------------------- /src/assets/img/flags/AT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/AT.png -------------------------------------------------------------------------------- /src/assets/img/flags/AU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/AU.png -------------------------------------------------------------------------------- /src/assets/img/flags/BE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/BE.png -------------------------------------------------------------------------------- /src/assets/img/flags/BF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/BF.png -------------------------------------------------------------------------------- /src/assets/img/flags/BG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/BG.png -------------------------------------------------------------------------------- /src/assets/img/flags/BO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/BO.png -------------------------------------------------------------------------------- /src/assets/img/flags/BR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/BR.png -------------------------------------------------------------------------------- /src/assets/img/flags/CA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CA.png -------------------------------------------------------------------------------- /src/assets/img/flags/CD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CD.png -------------------------------------------------------------------------------- /src/assets/img/flags/CG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CG.png -------------------------------------------------------------------------------- /src/assets/img/flags/CH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CH.png -------------------------------------------------------------------------------- /src/assets/img/flags/CL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CL.png -------------------------------------------------------------------------------- /src/assets/img/flags/CM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CM.png -------------------------------------------------------------------------------- /src/assets/img/flags/CN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CN.png -------------------------------------------------------------------------------- /src/assets/img/flags/CO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CO.png -------------------------------------------------------------------------------- /src/assets/img/flags/CZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/CZ.png -------------------------------------------------------------------------------- /src/assets/img/flags/DE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/DE.png -------------------------------------------------------------------------------- /src/assets/img/flags/DJ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/DJ.png -------------------------------------------------------------------------------- /src/assets/img/flags/DK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/DK.png -------------------------------------------------------------------------------- /src/assets/img/flags/DZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/DZ.png -------------------------------------------------------------------------------- /src/assets/img/flags/EE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/EE.png -------------------------------------------------------------------------------- /src/assets/img/flags/EG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/EG.png -------------------------------------------------------------------------------- /src/assets/img/flags/ES.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/ES.png -------------------------------------------------------------------------------- /src/assets/img/flags/FI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/FI.png -------------------------------------------------------------------------------- /src/assets/img/flags/FR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/FR.png -------------------------------------------------------------------------------- /src/assets/img/flags/GA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/GA.png -------------------------------------------------------------------------------- /src/assets/img/flags/GB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/GB.png -------------------------------------------------------------------------------- /src/assets/img/flags/GM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/GM.png -------------------------------------------------------------------------------- /src/assets/img/flags/GT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/GT.png -------------------------------------------------------------------------------- /src/assets/img/flags/HN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/HN.png -------------------------------------------------------------------------------- /src/assets/img/flags/HT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/HT.png -------------------------------------------------------------------------------- /src/assets/img/flags/HU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/HU.png -------------------------------------------------------------------------------- /src/assets/img/flags/ID.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/ID.png -------------------------------------------------------------------------------- /src/assets/img/flags/IE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/IE.png -------------------------------------------------------------------------------- /src/assets/img/flags/IL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/IL.png -------------------------------------------------------------------------------- /src/assets/img/flags/IN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/IN.png -------------------------------------------------------------------------------- /src/assets/img/flags/IQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/IQ.png -------------------------------------------------------------------------------- /src/assets/img/flags/IR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/IR.png -------------------------------------------------------------------------------- /src/assets/img/flags/IT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/IT.png -------------------------------------------------------------------------------- /src/assets/img/flags/JM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/JM.png -------------------------------------------------------------------------------- /src/assets/img/flags/JO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/JO.png -------------------------------------------------------------------------------- /src/assets/img/flags/JP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/JP.png -------------------------------------------------------------------------------- /src/assets/img/flags/KG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/KG.png -------------------------------------------------------------------------------- /src/assets/img/flags/KN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/KN.png -------------------------------------------------------------------------------- /src/assets/img/flags/KP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/KP.png -------------------------------------------------------------------------------- /src/assets/img/flags/KR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/KR.png -------------------------------------------------------------------------------- /src/assets/img/flags/KW.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/KW.png -------------------------------------------------------------------------------- /src/assets/img/flags/KZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/KZ.png -------------------------------------------------------------------------------- /src/assets/img/flags/LA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/LA.png -------------------------------------------------------------------------------- /src/assets/img/flags/LB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/LB.png -------------------------------------------------------------------------------- /src/assets/img/flags/LC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/LC.png -------------------------------------------------------------------------------- /src/assets/img/flags/LS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/LS.png -------------------------------------------------------------------------------- /src/assets/img/flags/LU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/LU.png -------------------------------------------------------------------------------- /src/assets/img/flags/LV.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/LV.png -------------------------------------------------------------------------------- /src/assets/img/flags/MG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/MG.png -------------------------------------------------------------------------------- /src/assets/img/flags/MK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/MK.png -------------------------------------------------------------------------------- /src/assets/img/flags/ML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/ML.png -------------------------------------------------------------------------------- /src/assets/img/flags/MM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/MM.png -------------------------------------------------------------------------------- /src/assets/img/flags/MT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/MT.png -------------------------------------------------------------------------------- /src/assets/img/flags/MX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/MX.png -------------------------------------------------------------------------------- /src/assets/img/flags/NA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/NA.png -------------------------------------------------------------------------------- /src/assets/img/flags/NE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/NE.png -------------------------------------------------------------------------------- /src/assets/img/flags/NG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/NG.png -------------------------------------------------------------------------------- /src/assets/img/flags/NI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/NI.png -------------------------------------------------------------------------------- /src/assets/img/flags/NL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/NL.png -------------------------------------------------------------------------------- /src/assets/img/flags/NO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/NO.png -------------------------------------------------------------------------------- /src/assets/img/flags/OM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/OM.png -------------------------------------------------------------------------------- /src/assets/img/flags/PA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/PA.png -------------------------------------------------------------------------------- /src/assets/img/flags/PE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/PE.png -------------------------------------------------------------------------------- /src/assets/img/flags/PG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/PG.png -------------------------------------------------------------------------------- /src/assets/img/flags/PK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/PK.png -------------------------------------------------------------------------------- /src/assets/img/flags/PL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/PL.png -------------------------------------------------------------------------------- /src/assets/img/flags/PT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/PT.png -------------------------------------------------------------------------------- /src/assets/img/flags/PY.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/PY.png -------------------------------------------------------------------------------- /src/assets/img/flags/QA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/QA.png -------------------------------------------------------------------------------- /src/assets/img/flags/RO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/RO.png -------------------------------------------------------------------------------- /src/assets/img/flags/RU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/RU.png -------------------------------------------------------------------------------- /src/assets/img/flags/RW.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/RW.png -------------------------------------------------------------------------------- /src/assets/img/flags/SA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/SA.png -------------------------------------------------------------------------------- /src/assets/img/flags/SE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/SE.png -------------------------------------------------------------------------------- /src/assets/img/flags/SG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/SG.png -------------------------------------------------------------------------------- /src/assets/img/flags/SL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/SL.png -------------------------------------------------------------------------------- /src/assets/img/flags/SN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/SN.png -------------------------------------------------------------------------------- /src/assets/img/flags/SO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/SO.png -------------------------------------------------------------------------------- /src/assets/img/flags/SV.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/SV.png -------------------------------------------------------------------------------- /src/assets/img/flags/TD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/TD.png -------------------------------------------------------------------------------- /src/assets/img/flags/TJ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/TJ.png -------------------------------------------------------------------------------- /src/assets/img/flags/TL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/TL.png -------------------------------------------------------------------------------- /src/assets/img/flags/TR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/TR.png -------------------------------------------------------------------------------- /src/assets/img/flags/TZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/TZ.png -------------------------------------------------------------------------------- /src/assets/img/flags/UA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/UA.png -------------------------------------------------------------------------------- /src/assets/img/flags/US.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/US.png -------------------------------------------------------------------------------- /src/assets/img/flags/VE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/VE.png -------------------------------------------------------------------------------- /src/assets/img/flags/VN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/VN.png -------------------------------------------------------------------------------- /src/assets/img/flags/YE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/flags/YE.png -------------------------------------------------------------------------------- /src/assets/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/new_logo.png -------------------------------------------------------------------------------- /src/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/bruno-abatti.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/bruno-abatti.jpg -------------------------------------------------------------------------------- /src/assets/img/daniel-olahh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/daniel-olahh.jpg -------------------------------------------------------------------------------- /src/assets/img/daniel-olahs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/daniel-olahs.jpg -------------------------------------------------------------------------------- /src/assets/img/ilya-yakover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/ilya-yakover.jpg -------------------------------------------------------------------------------- /src/assets/img/login-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/login-image.jpg -------------------------------------------------------------------------------- /src/assets/img/placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/placeholder.jpg -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_tabs.scss: -------------------------------------------------------------------------------- 1 | @mixin pill-style($color){ 2 | border: 1px solid $color; 3 | color: $color; 4 | } -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/fonts/nucleo-icons.eot -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/fonts/nucleo-icons.ttf -------------------------------------------------------------------------------- /src/assets/img/antoine-barres.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/antoine-barres.jpg -------------------------------------------------------------------------------- /src/assets/img/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/default-avatar.png -------------------------------------------------------------------------------- /src/assets/img/fabio-mangione.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/fabio-mangione.jpg -------------------------------------------------------------------------------- /src/assets/img/soroush-karimi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/soroush-karimi.jpg -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/fonts/nucleo-icons.woff -------------------------------------------------------------------------------- /src/assets/fonts/nucleo-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/fonts/nucleo-icons.woff2 -------------------------------------------------------------------------------- /src/assets/img/blurred-image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/blurred-image-1.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/kaci-baum-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/faces/kaci-baum-2.jpg -------------------------------------------------------------------------------- /src/assets/img/federico-beccari.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/federico-beccari.jpg -------------------------------------------------------------------------------- /src/assets/img/joshua-stannard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/joshua-stannard.jpg -------------------------------------------------------------------------------- /src/assets/img/uriel-soberanes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/uriel-soberanes.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/joe-gardner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/faces/joe-gardner-2.jpg -------------------------------------------------------------------------------- /src/assets/img/invision-white-slim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/invision-white-slim.png -------------------------------------------------------------------------------- /src/assets/img/examples/landing-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/examples/landing-page.png -------------------------------------------------------------------------------- /src/assets/img/examples/profile-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/examples/profile-page.png -------------------------------------------------------------------------------- /src/assets/img/faces/ayo-ogunseinde-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/faces/ayo-ogunseinde-2.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/clem-onojeghuo-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/faces/clem-onojeghuo-2.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/clem-onojeghuo-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/faces/clem-onojeghuo-3.jpg -------------------------------------------------------------------------------- /src/assets/img/faces/erik-lucatero-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/faces/erik-lucatero-2.jpg -------------------------------------------------------------------------------- /src/assets/scss/react/paper-kit/_inputs.scss: -------------------------------------------------------------------------------- 1 | .input-group .input-group-append .input-group-text { 2 | border-right: 1px solid $medium-gray; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/img/creative-tim-white-slim2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/paper-kit-react/HEAD/src/assets/img/creative-tim-white-slim2.png -------------------------------------------------------------------------------- /src/assets/scss/react/paper-kit/_navbars.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 991px) { 2 | .navbar-collapse { 3 | height: 100% !important; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"], 6 | "assets": ["src/assets"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_navbars.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-color($color){ 2 | background-color: $color; 3 | } 4 | 5 | @mixin center-item(){ 6 | left: 0; 7 | right: 0; 8 | margin-right: auto; 9 | margin-left: auto; 10 | position: absolute; 11 | } -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_alerts.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-style($background-color, $color){ 2 | background-color: $background-color; 3 | color: $color; 4 | .close{ 5 | color: $color; 6 | opacity: 0.7; 7 | &:hover{ 8 | opacity: 1; 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/cards/_card-plain.scss: -------------------------------------------------------------------------------- 1 | .card-plain { 2 | background-color: transparent; 3 | box-shadow: none; 4 | border-radius: 0; 5 | 6 | .card-body { 7 | padding-left: 5px; 8 | padding-right: 5px; 9 | } 10 | 11 | img { 12 | border-radius: $border-radius-extreme; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | 3 | @import "mixins/transparency"; 4 | @import "mixins/vendor-prefixes"; 5 | 6 | //Components 7 | 8 | @import "mixins/buttons"; 9 | @import "mixins/inputs"; 10 | @import "mixins/labels"; 11 | @import "mixins/tabs"; 12 | @import "mixins/navbars"; 13 | @import "mixins/alerts"; 14 | @import "mixins/popovers"; 15 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/react/react-differences.scss: -------------------------------------------------------------------------------- 1 | // Plugins CSS 2 | @import "plugins/plugin-nouislider"; 3 | @import "plugins/plugin-react-bootstrap-switch"; 4 | @import "plugins/plugin-react-datetime"; 5 | // components 6 | @import "paper-kit/dropdown"; 7 | @import "paper-kit/inputs"; 8 | @import "paper-kit/navbars"; 9 | @import "paper-kit/responsive"; 10 | @import "paper-kit/switch"; 11 | @import "paper-kit/tooltips-and-popovers"; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | package-lock.json 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity){ 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17,17,17,$opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/cards/_card-register.scss: -------------------------------------------------------------------------------- 1 | .card-register { 2 | background-color: #FF8F5E; 3 | border-radius: 8px; 4 | color: #fff; 5 | max-width: 350px; 6 | margin: 20px 0 70px; 7 | min-height: 400px; 8 | padding: 30px; 9 | 10 | & label { 11 | margin-top: 15px; 12 | } 13 | & .card-title { 14 | color: #B33C12; 15 | text-align: center; 16 | } 17 | & .btn { 18 | margin-top: 30px; 19 | } 20 | & .forgot { 21 | text-align: center; 22 | } 23 | 24 | .input-group-text { 25 | border: 1px solid $white-color; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: paper-kit-react 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: build 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | - npm run build 16 | yamlVersion: 2 -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_popovers.scss: -------------------------------------------------------------------------------- 1 | @mixin popover-style($background-color){ 2 | background-color: $background-color; 3 | color: $white-color; 4 | .popover-title{ 5 | background-color: $background-color; 6 | color: rgba(0, 0, 0, 0.56); 7 | } 8 | &.bottom .arrow:after{ 9 | border-bottom-color: $background-color; 10 | } 11 | &.left > .arrow::after{ 12 | border-left-color: $background-color; 13 | } 14 | &.top > .arrow::after{ 15 | border-top-color: $background-color; 16 | } 17 | &.right > .arrow::after{ 18 | border-right-color: $background-color; 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | .progress { 2 | background-color: $medium-gray; 3 | border-radius: $border-radius-small; 4 | box-shadow: none; 5 | height: 8px; 6 | } 7 | .progress-thin{ 8 | height: 4px; 9 | } 10 | .progress-bar{ 11 | background-color: $primary-color; 12 | } 13 | .progress-bar-primary{ 14 | background-color: $primary-color; 15 | } 16 | .progress-bar-info{ 17 | background-color: $info-color; 18 | } 19 | .progress-bar-success{ 20 | background-color: $success-color; 21 | } 22 | .progress-bar-warning{ 23 | background-color: $warning-color; 24 | } 25 | .progress-bar-danger{ 26 | background-color: $danger-color; 27 | } -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @mixin label-style(){ 2 | padding: $padding-label-vertical $padding-label-horizontal; 3 | border: 1px solid $default-color; 4 | border-radius: $border-radius-small; 5 | color: $default-color; 6 | font-weight: $font-weight-semi; 7 | font-size: $font-size-small; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | 13 | @mixin label-color($color){ 14 | border-color: $color; 15 | color: $color; 16 | } 17 | @mixin label-color-fill($color){ 18 | border-color: $color; 19 | color: $white-color; 20 | background-color: $color; 21 | } -------------------------------------------------------------------------------- /src/assets/scss/react/paper-kit/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown { 2 | .dropdown-menu{ 3 | &[x-placement="top-start"]{ 4 | @include transform-translate-y-dropdown(0px); 5 | 6 | } 7 | &[x-placement="bottom-start"]{ 8 | @include transform-translate-y-dropdown(0px); 9 | } 10 | } 11 | 12 | &.show .dropdown-menu{ 13 | &[x-placement="top-start"]{ 14 | @include transform-translate-y-dropdown(-50px); 15 | top: auto !important; 16 | bottom: 0 !important; 17 | } 18 | &[x-placement="bottom-start"]{ 19 | @include transform-translate-y-dropdown(40px); 20 | bottom: auto !important; 21 | top: 0 !important; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/assets/scss/react/paper-kit/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 320px){ 2 | .index { 3 | .presentation-subtitle { 4 | margin-bottom: 100px; 5 | } 6 | .category.category-absolute { 7 | margin-top: 20px; 8 | } 9 | } 10 | } 11 | @media screen and (max-width: 374px){ 12 | .index { 13 | .presentation-subtitle { 14 | margin-bottom: 100px; 15 | } 16 | } 17 | nav[aria-label="pagination"] { 18 | justify-content: center; 19 | text-align: center; 20 | .pagination { 21 | display: inline-block; 22 | .page-item { 23 | margin-bottom: 5px; 24 | } 25 | } 26 | } 27 | .register-page .page-header .container { 28 | margin-top: 7rem!important; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal, $height){ 2 | padding: $padding-vertical $padding-horizontal; 3 | height: $height; 4 | } 5 | 6 | @mixin light-form(){ 7 | border-radius: 0; 8 | border:0; 9 | padding: 0; 10 | background-color: transparent; 11 | 12 | } 13 | 14 | @mixin optional-at-root($sel) { 15 | @at-root #{if(not &, $sel, selector-append(&, $sel))} {@content;} 16 | } 17 | @mixin placeholder() { 18 | @include optional-at-root('::-moz-placeholder') {@content;} // Firefox 19 | @include optional-at-root(':-ms-input-placeholder') {@content;} // Internet Explorer 10+ 20 | @include optional-at-root('::-webkit-input-placeholder') {@content;} // Safari and Chrome 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_labels.scss: -------------------------------------------------------------------------------- 1 | /* Labels & Progress-bar */ 2 | .label{ 3 | padding: 0.2em 0.6em; 4 | border-radius: 10px; 5 | color: #FFFFFF; 6 | font-weight: 500; 7 | font-size: 0.75em; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | margin-bottom: 3px; 11 | line-height: 17px; 12 | } 13 | .label-primary{ 14 | background-color: $primary-color; 15 | } 16 | .label-info{ 17 | background-color: $info-color; 18 | } 19 | .label-success{ 20 | background-color: $success-color; 21 | } 22 | .label-warning{ 23 | background-color: $warning-color; 24 | } 25 | .label-danger{ 26 | background-color: $danger-color; 27 | } 28 | .label-default{ 29 | background-color: $default-color; 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_badges.scss: -------------------------------------------------------------------------------- 1 | /* badges & Progress-bar */ 2 | .badge{ 3 | padding: 0.4em 0.9em; 4 | color: $white-color; 5 | font-weight: 500; 6 | font-size: 0.75em; 7 | text-transform: uppercase; 8 | display: inline-block; 9 | margin-bottom: 3px; 10 | padding-top: 5px; 11 | 12 | &:focus { 13 | outline: none; 14 | } 15 | span[data-role="remove"]:focus { 16 | outline: none; 17 | } 18 | } 19 | .badge-primary{ 20 | background-color: $primary-color; 21 | } 22 | .badge-info{ 23 | background-color: $info-color; 24 | } 25 | .badge-success{ 26 | background-color: $success-color; 27 | } 28 | .badge-warning{ 29 | background-color: $warning-color; 30 | } 31 | .badge-danger{ 32 | background-color: $danger-color; 33 | } 34 | .badge-default{ 35 | background-color: $default-color; 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/cards/_card-profile.scss: -------------------------------------------------------------------------------- 1 | .card-profile { 2 | margin-top: 30px; 3 | text-align: center; 4 | 5 | .card-cover { 6 | height: 130px; 7 | background-position: center center; 8 | background-size: cover; 9 | border-radius: $border-radius-extreme $border-radius-extreme 0 0; 10 | } 11 | 12 | .card-body { 13 | .card-title { 14 | margin-top: 5px !important; 15 | } 16 | .card-category { 17 | margin-bottom: 5px; 18 | margin-top: 5px; 19 | } 20 | } 21 | 22 | .card-avatar { 23 | max-width: 120px; 24 | max-height: 120px; 25 | margin: -60px auto 0; 26 | border-radius: 50%; 27 | overflow: hidden; 28 | 29 | &.border-white { 30 | border: 4px solid $white-color; 31 | } 32 | &.border-gray { 33 | border: 4px solid $card-muted-color; 34 | } 35 | } 36 | 37 | } 38 | 39 | .section { 40 | .card-profile { 41 | margin-top: 100px; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/scss/react/paper-kit/_switch.scss: -------------------------------------------------------------------------------- 1 | .custom-switch { 2 | padding-left: 3.25rem; 3 | min-height: 2rem; 4 | display: flex; 5 | .custom-control-label { 6 | display: inline-flex; 7 | align-items: center; 8 | &::after { 9 | height: calc(1.625rem - 4px); 10 | width: calc(1.625rem - 4px); 11 | left: calc(-3.25rem + 2px); 12 | border-radius: 2.5rem; 13 | background-color: white; 14 | } 15 | &::before { 16 | height: 1.625rem; 17 | width: 3rem; 18 | left: -3.25rem; 19 | border-radius: 2.5rem; 20 | background-color: #adb5bd; 21 | } 22 | } 23 | 24 | .custom-control-input:checked ~ .custom-control-label { 25 | &::after { 26 | transform: translateX(1.35rem); 27 | } 28 | &::before { 29 | background-color: $info-color; 30 | border-color: $info-color; 31 | } 32 | } 33 | 34 | .custom-control-input:disabled { 35 | &:checked ~ .custom-control-label::before { 36 | // background-color: $info-color; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/paper-kit-react\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: 0; 4 | color: $white-color; 5 | padding: 10px 15px; 6 | font-size: 14px; 7 | 8 | & .close{ 9 | font-size: $font-size-large; 10 | color: $white-color; 11 | } 12 | 13 | .container &{ 14 | border-radius: 4px; 15 | 16 | } 17 | .navbar &{ 18 | border-radius: 0; 19 | left: 0; 20 | position: absolute; 21 | right: 0; 22 | top: 85px; 23 | width: 100%; 24 | z-index: 3; 25 | } 26 | .navbar:not(.navbar-transparent) &{ 27 | top: 70px; 28 | } 29 | .alert-icon{ 30 | display: block; 31 | font-size: 30px; 32 | left: 15px; 33 | position: absolute; 34 | top: 50%; 35 | margin-top: -22px; 36 | } 37 | .alert-wrapper { 38 | &.message{ 39 | padding-right: 60px; 40 | } 41 | i{ 42 | position: relative; 43 | font-size: 20px; 44 | top: 5px; 45 | margin-top: -5px; 46 | font-weight: $font-weight-bold; 47 | } 48 | } 49 | } 50 | .alert-info{ 51 | background-color: $bg-info; 52 | } 53 | .alert-success { 54 | background-color: $bg-success; 55 | } 56 | .alert-warning { 57 | background-color: $bg-warning; 58 | } 59 | .alert-danger { 60 | background-color: $bg-danger; 61 | } 62 | -------------------------------------------------------------------------------- /src/assets/img/nucleo-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 11 | 15 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_images.scss: -------------------------------------------------------------------------------- 1 | .img-rounded{ 2 | border-radius: $border-radius-extreme; 3 | transition: opacity 0.5s ease 0s; 4 | max-width: 100%; 5 | } 6 | .img-details{ 7 | min-height: 50px; 8 | padding: 0 4px 0.5em; 9 | 10 | } 11 | .img-details img{ 12 | width: 50px; 13 | } 14 | .img-details .author{ 15 | margin-left: 10px; 16 | margin-top: -21px; 17 | width: 40px; 18 | } 19 | .img-circle{ 20 | background-color: $white-color; 21 | margin-bottom: 10px; 22 | padding: 4px; 23 | border-radius: 50% !important; 24 | max-width: 100%; 25 | } 26 | .img-thumbnail{ 27 | border: 0 none; 28 | border-radius: $border-radius-extreme; 29 | box-shadow: 0 1px 2px rgba(164, 158, 147, 0.6); 30 | margin-bottom: 10px; 31 | } 32 | .img-no-padding{ 33 | padding: 0px; 34 | } 35 | .example-page .img-rounded{ 36 | margin: 50px 0 20px; 37 | } 38 | .img-shadow{ 39 | box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 40 | 0 3px 14px 2px rgba(0, 0, 0, 0.12), 41 | 0 5px 5px -3px rgba(0, 0, 0, 0.2) 42 | } 43 | .images-title{ 44 | margin-bottom: 20px; 45 | height: 50px; 46 | } 47 | .nav-link .profile-photo-small{ 48 | width: 40px; 49 | height: 30px; 50 | margin: -10px 0 0 -15px; 51 | } 52 | .profile-picture{ 53 | margin: 0 auto; 54 | .fileinput-new img{ 55 | width: 150px; 56 | height: 150px; 57 | border-radius: 50%; 58 | margin-bottom: 10px; 59 | } 60 | .fileinput-exists img{ 61 | max-width: 150px; 62 | max-height: 150px; 63 | border-radius: 50%; 64 | margin-bottom: 10px; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/views/index-sections/SectionDark.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Container, Row, Col } from "reactstrap"; 23 | 24 | // core components 25 | 26 | function SectionDark() { 27 | return ( 28 | <> 29 |
30 | 31 | 32 | 33 |

Completed with examples

34 |

35 | The kit comes with three pre-built pages to help you get started 36 | faster. You can change the text and images and you're good to 37 | go. More importantly, looking at them will give you a picture of 38 | what you can built with this powerful kit. 39 |

40 | 41 | 42 | 43 |
44 | 45 | ); 46 | } 47 | 48 | export default SectionDark; 49 | -------------------------------------------------------------------------------- /src/components/Headers/ProfilePageHeader.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | 23 | // core components 24 | 25 | function ProfilePageHeader() { 26 | let pageHeader = React.createRef(); 27 | 28 | React.useEffect(() => { 29 | if (window.innerWidth < 991) { 30 | const updateScroll = () => { 31 | let windowScrollTop = window.pageYOffset / 3; 32 | pageHeader.current.style.transform = 33 | "translate3d(0," + windowScrollTop + "px,0)"; 34 | }; 35 | window.addEventListener("scroll", updateScroll); 36 | return function cleanup() { 37 | window.removeEventListener("scroll", updateScroll); 38 | }; 39 | } 40 | }); 41 | 42 | return ( 43 | <> 44 |
53 |
54 |
55 | 56 | ); 57 | } 58 | 59 | export default ProfilePageHeader; 60 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | import ReactDOM from "react-dom/client"; 21 | import { BrowserRouter, Route, Navigate, Routes } from "react-router-dom"; 22 | 23 | // styles 24 | import "bootstrap/scss/bootstrap.scss"; 25 | import "assets/scss/paper-kit.scss?v=1.3.0"; 26 | import "assets/demo/demo.css?v=1.3.0"; 27 | // pages 28 | import Index from "views/Index.js"; 29 | import NucleoIcons from "views/NucleoIcons.js"; 30 | import LandingPage from "views/examples/LandingPage.js"; 31 | import ProfilePage from "views/examples/ProfilePage.js"; 32 | import RegisterPage from "views/examples/RegisterPage.js"; 33 | // others 34 | 35 | const root = ReactDOM.createRoot(document.getElementById("root")); 36 | 37 | root.render( 38 | 39 | 40 | } /> 41 | } /> 42 | } /> 43 | } /> 44 | } /> 45 | } /> 46 | 47 | 48 | ); 49 | -------------------------------------------------------------------------------- /src/assets/scss/react/paper-kit/_tooltips-and-popovers.scss: -------------------------------------------------------------------------------- 1 | .popover { 2 | box-shadow: 0 10px 50px 0 rgba(0,0,0,.2); 3 | z-index: 1050; 4 | } 5 | .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { 6 | border-left-color: rgba(0,0,0,.25); 7 | } 8 | .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { 9 | border-top-color: rgba(0,0,0,.25); 10 | } 11 | .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { 12 | border-right-color: rgba(0,0,0,.25); 13 | } 14 | .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { 15 | border-bottom-color: rgba(0,0,0,.25); 16 | } 17 | .bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-top .arrow::after, 18 | .bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-left .arrow::after, 19 | .bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-right .arrow::after, 20 | .bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-bottom .arrow::after { 21 | position: absolute; 22 | display: block; 23 | content: ""; 24 | border-color: transparent; 25 | border-style: solid; 26 | } 27 | .bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-left .arrow::after { 28 | right: 1px; 29 | border-width: .4rem 0 .4rem .4rem; 30 | border-left-color: #fff; 31 | } 32 | .bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-top .arrow::after { 33 | bottom: 1px; 34 | border-width: .4rem .4rem 0; 35 | border-top-color: #fff; 36 | } 37 | .bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-right .arrow::after { 38 | left: 1px; 39 | border-width: .4rem .4rem .4rem 0; 40 | border-right-color: #fff; 41 | } 42 | .bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-bottom .arrow::after { 43 | top: 1px; 44 | border-width: 0 .4rem .4rem .4rem; 45 | border-bottom-color: #fff; 46 | } 47 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | .btn-twitter{ 2 | color: $social-twitter !important; 3 | 4 | &:hover, 5 | &:focus, 6 | &:active{ 7 | color: $social-twitter !important; 8 | } 9 | } 10 | 11 | .btn-facebook{ 12 | color: $social-facebook !important; 13 | 14 | &:hover, 15 | &:focus, 16 | &:active{ 17 | color: $social-facebook !important; 18 | } 19 | } 20 | 21 | .btn-google{ 22 | color: $social-google !important; 23 | 24 | &:hover, 25 | &:focus, 26 | &:active{ 27 | color: $social-google !important; 28 | } 29 | } 30 | 31 | .btn-linkedin{ 32 | color: $social-linkedin !important; 33 | 34 | &:hover, 35 | &:focus, 36 | &:active{ 37 | color: $social-linkedin !important; 38 | } 39 | } 40 | .btn-twitter-bg{ 41 | background-color: $social-twitter !important; 42 | border-color: $social-twitter !important; 43 | &:hover{ 44 | background-color: darken($social-twitter, 5%) !important; 45 | border-color: darken($social-twitter, 5%) !important; 46 | } 47 | } 48 | .btn-facebook-bg{ 49 | background-color: $social-facebook !important; 50 | border-color: $social-facebook !important; 51 | &:hover{ 52 | background-color: darken($social-facebook, 5%) !important; 53 | border-color: darken($social-facebook, 5%) !important; 54 | } 55 | } 56 | .btn-google-bg{ 57 | background-color: $social-google !important; 58 | border-color: $social-google !important; 59 | &:hover{ 60 | background-color: darken($social-google, 5%) !important; 61 | border-color: darken($social-google, 5%) !important; 62 | } 63 | } 64 | .btn-github-bg{ 65 | background-color: #767676 !important; 66 | border-color: #767676 !important; 67 | &:hover{ 68 | background-color: darken(#767676, 5%) !important; 69 | border-color: darken(#767676, 5%) !important; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_modal.scss: -------------------------------------------------------------------------------- 1 | .modal-header { 2 | border-bottom: 1px solid $medium-gray; 3 | padding: 20px; 4 | text-align: center; 5 | display: block !important; 6 | 7 | &.no-border-header{ 8 | border-bottom: 0 none !important; 9 | & .modal-title{ 10 | margin-top: 20px; 11 | 12 | } 13 | } 14 | button.close{ 15 | &:focus { 16 | outline: none; 17 | } 18 | } 19 | } 20 | .modal-dialog{ 21 | &.modal-sm, 22 | &.modal-register{ 23 | .modal-header{ 24 | button.close{ 25 | margin-top: 0; 26 | } 27 | } 28 | } 29 | } 30 | 31 | .modal-content { 32 | border: 0 none; 33 | border-radius: 10px; 34 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(0, 0, 0, 0.1); 35 | .modal-header{ 36 | h6{ 37 | margin-top: 10px; 38 | } 39 | } 40 | } 41 | 42 | .modal-dialog { 43 | padding-top: 60px; 44 | } 45 | .modal-body{ 46 | padding: 20px 50px; 47 | color: #000; 48 | } 49 | .modal-footer { 50 | border-top: 1px solid $medium-gray; 51 | padding: 0px; 52 | 53 | &.no-border-footer{ 54 | border-top: 0 none; 55 | } 56 | } 57 | .modal-footer .left-side, .modal-footer .right-side{ 58 | display: inline-block; 59 | text-align: center; 60 | width: 49%; 61 | } 62 | .modal-footer .btn-link{ 63 | padding: 20px; 64 | width: 100% 65 | } 66 | .modal-footer .divider{ 67 | background-color: $medium-gray; 68 | display: inline-block; 69 | float: inherit; 70 | height: 63px; 71 | margin: 0px -3px; 72 | // position: absolute; 73 | width: 1px; 74 | } 75 | 76 | .modal-register .modal-footer{ 77 | text-align: center; 78 | margin-bottom: 25px; 79 | padding: 20px 0 15px; 80 | span{ 81 | width: 100%; 82 | } 83 | } 84 | .modal-header:after { 85 | display: table; 86 | content: " "; 87 | } 88 | .modal-header:before{ 89 | display: table; 90 | content: " "; 91 | } 92 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 based on Paper Kit - v2.2.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-2 8 | * Copyright 2023 Creative Tim (http://www.creative-tim.com) 9 | 10 | * Designed by www.invisionapp.com Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | 16 | */ 17 | 18 | @import "paper-kit/variables"; 19 | @import "paper-kit/mixins"; 20 | 21 | // Plugins CSS 22 | @import "paper-kit/plugins/plugin-bootstrap-switch"; 23 | @import "paper-kit/plugins/plugin-nouislider"; 24 | @import "paper-kit/plugins/plugin-datepicker"; 25 | 26 | // Core CSS 27 | @import "paper-kit/buttons"; 28 | @import "paper-kit/inputs"; 29 | @import "paper-kit/checkbox-radio"; 30 | @import "paper-kit/progress-bars"; 31 | @import "paper-kit/badges"; 32 | @import "paper-kit/pagination"; 33 | @import "paper-kit/typography"; 34 | @import "paper-kit/misc"; 35 | @import "paper-kit/labels"; 36 | 37 | // components 38 | @import "paper-kit/nucleo-icons"; 39 | @import "paper-kit/social-buttons"; 40 | @import "paper-kit/tabs-navs"; 41 | @import "paper-kit/navbars"; 42 | @import "paper-kit/dropdown"; 43 | @import "paper-kit/alerts"; 44 | @import "paper-kit/images"; 45 | @import "paper-kit/tooltips-and-popovers"; 46 | @import "paper-kit/modal"; 47 | @import "paper-kit/icons"; 48 | @import "paper-kit/carousel"; 49 | @import "paper-kit/footers"; 50 | 51 | // Cards 52 | @import "paper-kit/cards"; 53 | @import "paper-kit/cards/card-plain"; 54 | @import "paper-kit/cards/card-register"; 55 | @import "paper-kit/cards/card-profile"; 56 | 57 | // example pages and sections 58 | @import "paper-kit/examples"; 59 | @import "paper-kit/sections"; 60 | 61 | @import "paper-kit/responsive"; 62 | 63 | // React Differences 64 | @import "react/react-differences.scss"; 65 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_carousel.scss: -------------------------------------------------------------------------------- 1 | .carousel-control{ 2 | background-color: $danger-color; 3 | border-radius: 50%; 4 | opacity: 1; 5 | text-shadow: none; 6 | 7 | &:hover, 8 | &:focus{ 9 | opacity: 1; 10 | background-color: $danger-states-color; 11 | } 12 | } 13 | 14 | .carousel-control.left{ 15 | height: 30px; 16 | top: 50%; 17 | width: 30px; 18 | left: 25px; 19 | opacity: 0; 20 | } 21 | .carousel-control.right{ 22 | height: 30px; 23 | right: 25px; 24 | top: 50%; 25 | width: 30px; 26 | opacity: 0; 27 | } 28 | .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa, .carousel-control .fa { 29 | display: inline-block; 30 | z-index: 5; 31 | } 32 | .carousel-control .fa{ 33 | font-size: 26px; 34 | margin: 2px; 35 | } 36 | .carousel-control.left, .carousel-control.right { 37 | background-image: none; 38 | } 39 | 40 | .page-carousel{ 41 | border-radius: $border-radius-extreme !important; 42 | border: none !important; 43 | width: 100%; 44 | } 45 | 46 | .carousel-inner { 47 | > .carousel-item > img, 48 | > .carousel-item > a > img { 49 | border-radius: $border-radius-extreme; 50 | box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5); 51 | } 52 | .carousel-item img { 53 | width: 100%; 54 | } 55 | } 56 | 57 | .carousel-indicators > li{ 58 | background-color: rgba(204, 204, 204, 0.49); 59 | border: 0 none; 60 | } 61 | .carousel-indicators .active{ 62 | background-color: $danger-color; 63 | } 64 | .page-carousel:hover{ 65 | .carousel-control.right, 66 | .carousel-control.left{ 67 | opacity: 1; 68 | z-index: 1; 69 | } 70 | } 71 | .card { 72 | .carousel { 73 | .carousel-indicators { 74 | bottom: 0; 75 | } 76 | a { 77 | position: absolute; 78 | color: $white-color !important; 79 | &:hover { 80 | color: $white-color !important; 81 | } 82 | .fa-angle-left:before { 83 | padding-right: 3px; 84 | } 85 | .fa-angle-right:before { 86 | padding-left: 3px; 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/components/Footers/DemoFooter.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | /*eslint-disable*/ 20 | import React from "react"; 21 | 22 | // reactstrap components 23 | import { Row, Container } from "reactstrap"; 24 | 25 | function DemoFooter() { 26 | return ( 27 | 67 | ); 68 | } 69 | 70 | export default DemoFooter; 71 | -------------------------------------------------------------------------------- /src/components/Headers/LandingPageHeader.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Button, Container } from "reactstrap"; 23 | 24 | // core components 25 | 26 | function LandingPageHeader() { 27 | let pageHeader = React.createRef(); 28 | 29 | React.useEffect(() => { 30 | if (window.innerWidth < 991) { 31 | const updateScroll = () => { 32 | let windowScrollTop = window.pageYOffset / 3; 33 | pageHeader.current.style.transform = 34 | "translate3d(0," + windowScrollTop + "px,0)"; 35 | }; 36 | window.addEventListener("scroll", updateScroll); 37 | return function cleanup() { 38 | window.removeEventListener("scroll", updateScroll); 39 | }; 40 | } 41 | }); 42 | 43 | return ( 44 | <> 45 |
54 |
55 | 56 |
57 |

Example page

58 |

Start designing your landing page here.

59 |
60 | 70 | 73 |
74 | 75 |
76 | 77 | ); 78 | } 79 | 80 | export default LandingPageHeader; 81 | -------------------------------------------------------------------------------- /src/views/index-sections/SectionExamples.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Button, Container, Row, Col } from "reactstrap"; 23 | 24 | // core components 25 | 26 | function SectionExamples() { 27 | return ( 28 | <> 29 |
30 | 31 | 32 | 33 | 34 | ... 40 | 41 | 49 | 50 | 51 | 52 | ... 58 | 59 | 67 | 68 | 69 | 70 |
{" "} 71 | 72 | ); 73 | } 74 | 75 | export default SectionExamples; 76 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/Headers/IndexHeader.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | /*eslint-disable*/ 20 | import React from "react"; 21 | 22 | // reactstrap components 23 | import { Container } from "reactstrap"; 24 | 25 | // core components 26 | 27 | function IndexHeader() { 28 | return ( 29 | <> 30 |
37 |
38 |
39 | 40 |
41 |

Paper Kit React

42 |
43 | ... 44 |
45 |
46 | ... 47 |
48 |
49 |

50 | Make your mark with a Free Bootstrap 4 (Reactstrap) UI Kit! 51 |

52 | 53 |
54 |
60 |
61 | Designed and coded by{" "} 62 | 66 | ... 71 | 72 |
73 |
74 | 75 | ); 76 | } 77 | 78 | export default IndexHeader; 79 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "paper-kit-react", 3 | "version": "1.3.2", 4 | "dependencies": { 5 | "ajv": "^8.17.1", 6 | "classnames": "2.3.2", 7 | "moment": "2.29.4", 8 | "nouislider": "15.4.0", 9 | "react": ">=16.0.0", 10 | "react-datetime": "3.2.0", 11 | "react-dom": ">=16.0.0", 12 | "react-router-dom": "6.11.1", 13 | "react-scripts": "5.0.1", 14 | "reactstrap": "8.10.0", 15 | "sass": "1.62.1" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "cross-env PUBLIC_URL=/ react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject", 22 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", 23 | "compile-sass": "sass src/assets/scss/paper-kit.scss src/assets/css/paper-kit.css", 24 | "minify-sass": "sass src/assets/scss/paper-kit.scss src/assets/css/paper-kit.min.css --style compressed" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "optionalDependencies": { 42 | "typescript": "5.0.4" 43 | }, 44 | "devDependencies": { 45 | "bootstrap": "4.6.2", 46 | "cross-env": "^7.0.3" 47 | }, 48 | "peerDependencies": { 49 | "react": ">=16.0.0", 50 | "react-dom": ">=16.0.0" 51 | }, 52 | "overrides": { 53 | "svgo": "3.0.2" 54 | }, 55 | "description": "Paper Kit React is a free Bootstrap 4, React, React Hooks and Reactstrap UI Kit with pale colors, beautiful typography and thoughtful drawings. We've created it having paper and drawings in mind.", 56 | "main": "src/assets/scss/paper-kit.scss", 57 | "repository": { 58 | "type": "git", 59 | "url": "git+https://github.com/creativetimofficial/paper-kit-react.git" 60 | }, 61 | "keywords": [ 62 | "react", 63 | "reactstrap", 64 | "reactjs", 65 | "paper-kit", 66 | "paper-kit-react", 67 | "paper-kit-2", 68 | "paper-kit2", 69 | "paper-design", 70 | "hook", 71 | "hooks", 72 | "react-hook", 73 | "react-hooks", 74 | "template", 75 | "theme", 76 | "react-template", 77 | "react-theme" 78 | ], 79 | "author": "Creative Tim", 80 | "license": "MIT", 81 | "bugs": { 82 | "url": "https://github.com/creativetimofficial/paper-kit-react/issues" 83 | }, 84 | "homepage": "https://demos.creative-tim.com/paper-kit-react/#/index" 85 | } 86 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_icons.scss: -------------------------------------------------------------------------------- 1 | 2 | .section-nucleo-icons{ 3 | padding: 100px 0; 4 | 5 | .icons-container{ 6 | position: relative; 7 | max-width: 450px; 8 | height: 300px; 9 | max-height: 300px; 10 | margin: 0 auto; 11 | 12 | i{ 13 | font-size: 34px; 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | 18 | &:nth-child(1){ 19 | top: 5%; 20 | left: 7%; 21 | } 22 | &:nth-child(2){ 23 | top: 28%; 24 | left: 24%; 25 | } 26 | &:nth-child(3){ 27 | top: 40%; 28 | } 29 | &:nth-child(4){ 30 | top: 18%; 31 | left: 62%; 32 | } 33 | &:nth-child(5){ 34 | top: 74%; 35 | left: 3%; 36 | } 37 | &:nth-child(6){ 38 | top: 36%; 39 | left: 44%; 40 | font-size: 65px; 41 | color: $danger-color; 42 | padding: 1px; 43 | } 44 | &:nth-child(7){ 45 | top: 59%; 46 | left: 26%; 47 | } 48 | &:nth-child(8){ 49 | top: 60%; 50 | left: 69%; 51 | } 52 | &:nth-child(9){ 53 | top: 72%; 54 | left: 47%; 55 | } 56 | &:nth-child(10){ 57 | top: 88%; 58 | left: 27%; 59 | } 60 | &:nth-child(11){ 61 | top: 31%; 62 | left: 80%; 63 | } 64 | &:nth-child(12){ 65 | top: 88%; 66 | left: 68%; 67 | } 68 | &:nth-child(13){ 69 | top: 5%; 70 | left: 81%; 71 | } 72 | &:nth-child(14){ 73 | top: 58%; 74 | left: 90%; 75 | } 76 | &:nth-child(15){ 77 | top: 6%; 78 | left: 40%; 79 | } 80 | } 81 | } 82 | } 83 | .section-dark{ 84 | .icons-container{ 85 | color: $white-color; 86 | } 87 | } 88 | .info{ 89 | .icon{ 90 | margin-top: 0; 91 | font-size: 3.4em; 92 | } 93 | } 94 | .icon-primary{ 95 | color: $primary-color; 96 | } 97 | .icon-info{ 98 | color: $info-color; 99 | } 100 | .icon-success{ 101 | color: $success-color; 102 | } 103 | .icon-warning{ 104 | color: $warning-color; 105 | } 106 | .icon-danger{ 107 | color: $danger-color; 108 | } 109 | .icon-neutral{ 110 | color: $white-color; 111 | } 112 | -------------------------------------------------------------------------------- /src/views/Index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | 23 | // core components 24 | import IndexNavbar from "components/Navbars/IndexNavbar.js"; 25 | import IndexHeader from "components/Headers/IndexHeader.js"; 26 | import DemoFooter from "components/Footers/DemoFooter.js"; 27 | 28 | // index sections 29 | import SectionButtons from "views/index-sections/SectionButtons.js"; 30 | import SectionNavbars from "views/index-sections/SectionNavbars.js"; 31 | import SectionNavigation from "views/index-sections/SectionNavigation.js"; 32 | import SectionProgress from "views/index-sections/SectionProgress.js"; 33 | import SectionNotifications from "views/index-sections/SectionNotifications.js"; 34 | import SectionTypography from "views/index-sections/SectionTypography.js"; 35 | import SectionJavaScript from "views/index-sections/SectionJavaScript.js"; 36 | import SectionCarousel from "views/index-sections/SectionCarousel.js"; 37 | import SectionNucleoIcons from "views/index-sections/SectionNucleoIcons.js"; 38 | import SectionDark from "views/index-sections/SectionDark.js"; 39 | import SectionLogin from "views/index-sections/SectionLogin.js"; 40 | import SectionExamples from "views/index-sections/SectionExamples.js"; 41 | import SectionDownload from "views/index-sections/SectionDownload.js"; 42 | 43 | function Index() { 44 | document.documentElement.classList.remove("nav-open"); 45 | React.useEffect(() => { 46 | document.body.classList.add("index"); 47 | return function cleanup() { 48 | document.body.classList.remove("index"); 49 | }; 50 | }); 51 | return ( 52 | <> 53 | 54 | 55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 | 72 | ); 73 | } 74 | 75 | export default Index; 76 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | 25 | 26 | 27 | 32 | 33 | 34 | 38 | 39 | 48 | 49 | 53 | 57 | Paper Kit React by Creative Tim 58 | 59 | 60 | 61 |
62 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | background-color: $btn-color; 4 | border-color: $btn-color; 5 | color: $white-color; 6 | @include opacity(1); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active, 11 | &.active, 12 | &:active:focus, 13 | &:active:hover, 14 | &.active:focus, 15 | &:not(:disabled):not(.disabled):active:focus, 16 | &:not(:disabled):not(.disabled):active, 17 | &:not(:disabled):not(.disabled).active, 18 | &:not(:disabled):not(.disabled).active:focus, 19 | .show > &.dropdown-toggle{ 20 | background-color: $btn-states-color; 21 | color: $white-color; 22 | border-color: $btn-states-color; 23 | box-shadow: none; 24 | } 25 | 26 | .caret{ 27 | border-top-color: $white-color; 28 | } 29 | 30 | &.disabled, 31 | &:disabled, 32 | &[disabled], 33 | fieldset[disabled] & { 34 | &, 35 | &:hover, 36 | &:focus, 37 | &.focus, 38 | &:active, 39 | &.active { 40 | background-color: $btn-states-color; 41 | border-color: $btn-states-color; 42 | } 43 | } 44 | 45 | &.btn-link { 46 | color: $btn-color; 47 | 48 | &:hover, 49 | &:focus, 50 | &:active, 51 | &.active, 52 | &:focus:active, 53 | .open > &.dropdown-toggle{ 54 | background-color: $transparent-bg !important; 55 | color: $btn-states-color !important; 56 | } 57 | 58 | .caret{ 59 | border-top-color: $btn-color; 60 | } 61 | } 62 | 63 | .caret{ 64 | border-top-color: $white-color; 65 | } 66 | } 67 | 68 | @mixin btn-outline-styles($btn-color, $btn-states-color){ 69 | border-color: $btn-color; 70 | color: $btn-color; 71 | @include opacity(1); 72 | 73 | &:hover, 74 | &:focus, 75 | &:active, 76 | &.active, 77 | &:active:focus, 78 | &:active:hover, 79 | &.active:focus, 80 | .show > &.dropdown-toggle { 81 | background-color: $btn-color !important; 82 | color: $fill-font-color; 83 | border-color: $btn-color !important; 84 | .caret{ 85 | border-top-color: $fill-font-color; 86 | } 87 | } 88 | 89 | .caret{ 90 | border-top-color: $white-color; 91 | } 92 | 93 | &.disabled, 94 | &:disabled, 95 | &[disabled], 96 | fieldset[disabled] & { 97 | &, 98 | &:hover, 99 | &:focus, 100 | &.focus, 101 | &:active, 102 | &.active { 103 | background-color: $transparent-bg; 104 | border-color: $btn-color; 105 | } 106 | } 107 | } 108 | 109 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $line-height){ 110 | font-size: $font-size; 111 | padding: $padding-vertical $padding-horizontal; 112 | 113 | &.btn-simple{ 114 | padding: $padding-vertical + 2 $padding-horizontal; 115 | } 116 | 117 | } 118 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_tags.scss: -------------------------------------------------------------------------------- 1 | // 2 | // bootstrap-tagsinput v0.8.0 for Bootstrap v4.0.0-alpha.6 3 | // -------------------------------------------------- 4 | 5 | .bootstrap-tagsinput { 6 | background-color: transparent; 7 | display: inline-block; 8 | padding: 4px 6px; 9 | color: #555; 10 | vertical-align: middle; 11 | border-radius: 4px; 12 | width: 100%; 13 | line-height: 22px; 14 | cursor: text; 15 | 16 | & input { 17 | border: none; 18 | box-shadow: none; 19 | outline: none; 20 | background-color: transparent; 21 | padding: 0 6px; 22 | margin: 0; 23 | width: auto; 24 | max-width: inherit; 25 | 26 | &:focus { 27 | border: none; 28 | box-shadow: none; 29 | } 30 | 31 | &::-moz-placeholder { 32 | color: $input-color-placeholder; 33 | opacity: 1; 34 | } 35 | 36 | &:-ms-input-placeholder { 37 | color: $input-color-placeholder; 38 | } 39 | 40 | &::-webkit-input-placeholder { 41 | color: $input-color-placeholder; 42 | } 43 | } 44 | 45 | &.form-control { 46 | & input::-moz-placeholder { 47 | color: $input-color-placeholder; 48 | // opacity: 1; 49 | } 50 | 51 | & input:-ms-input-placeholder { 52 | color: $input-color-placeholder; 53 | } 54 | 55 | & input::-webkit-input-placeholder { 56 | color: $input-color-placeholder; 57 | } 58 | } 59 | 60 | .badge{ 61 | -webkit-transition: all 170ms linear; 62 | -moz-transition: all 170ms linear; 63 | -o-transition: all 170ms linear; 64 | -ms-transition: all 170ms linear; 65 | transition: all 170ms linear; 66 | } 67 | 68 | & .badge { 69 | cursor: pointer; 70 | margin: 5px 3px 5px 0; 71 | position: relative; 72 | padding: 4px 8px 3px .8em; 73 | border-radius: 12px; 74 | color: #FFF; 75 | font-size: .75em; 76 | font-weight: 500; 77 | display: inline-block; 78 | line-height: 1.5em; 79 | text-transform: uppercase; 80 | 81 | &:hover{ 82 | padding-right: 25px; 83 | } 84 | &:hover [data-role="remove"]{ 85 | opacity: 1; 86 | padding-right: 6px; 87 | } 88 | 89 | & [data-role="remove"] { 90 | cursor: pointer; 91 | position: absolute; 92 | top: 3.5px; 93 | right: 0; 94 | opacity: 0; 95 | 96 | &:after { 97 | content: "\f00d"; 98 | padding: 0px 4px; 99 | font-size: 18px; 100 | font: normal normal normal 10px/1 FontAwesome; 101 | } 102 | &:hover { 103 | &:active { 104 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 105 | opacity: 1; 106 | } 107 | } 108 | } 109 | } 110 | } 111 | .badge-success{ 112 | background-color: #7AC29A; 113 | } 114 | -------------------------------------------------------------------------------- /src/views/index-sections/SectionNucleoIcons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Button, Container, Row, Col } from "reactstrap"; 23 | 24 | // core components 25 | 26 | function SectionNucleoIcons() { 27 | return ( 28 | <> 29 |
30 | 31 | 32 | 33 |

Nucleo Icons

34 |
35 |

36 | Paper Kit comes with 100 custom icons made by our friends from 37 | NucleoApp. The official package contains over 2.100 thin icons 38 | which are looking great in combination with Paper Kit Make sure 39 | you check all of them and use those that you like the most. 40 |

41 |
42 | 50 | 59 | 60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 | 79 | 80 | 81 |
{" "} 82 | 83 | ); 84 | } 85 | 86 | export default SectionNucleoIcons; 87 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_sections.scss: -------------------------------------------------------------------------------- 1 | .section{ 2 | padding: 70px 0; 3 | position: relative; 4 | background-color: #FFFFFF; 5 | } 6 | .section-with-space{ 7 | padding: 60px 0; 8 | } 9 | .section-gray{ 10 | background-color: #EEEEEE; 11 | } 12 | .section-nude{ 13 | background-color: $bg-nude; 14 | } 15 | .section-gold{ 16 | background-color: #caac90; 17 | color: $white-color; 18 | } 19 | .section-brown{ 20 | background-color: #A59E94; 21 | color: $white-color; 22 | } 23 | .section-light-blue{ 24 | background-color: $primary-color; 25 | color: $white-color; 26 | } 27 | .section-dark-blue{ 28 | background-color: #506367; 29 | color: $white-color; 30 | } 31 | .section-dark{ 32 | background-color: #0b1011; 33 | } 34 | .section-image, 35 | .section-gold, 36 | .section-dark{ 37 | position: relative; 38 | 39 | .title, 40 | .info-title, 41 | .card-plain .card-title{ 42 | color: $white-color !important; 43 | } 44 | .category, 45 | .description, 46 | .card-plain .card-description, 47 | .card-plain .card-category{ 48 | color: rgba($white-color, .7); 49 | } 50 | hr{ 51 | border-color: rgba(255, 255, 255, 0.19); 52 | } 53 | } 54 | .page-header, 55 | .carousel-caption{ 56 | .title, 57 | .info-title{ 58 | color: $white-color; 59 | } 60 | } 61 | [class*="features-"], 62 | [class*="team-"], 63 | [class*="projects-"], 64 | [class*="pricing-"], 65 | [class*="testimonials-"], 66 | [class*="contactus-"]{ 67 | padding: 80px 0; 68 | } 69 | .section-image{ 70 | background-position: center center; 71 | background-size: cover; 72 | 73 | &:before{ 74 | background-color: rgba(0, 0, 0, 0.5); 75 | content: ""; 76 | display: block; 77 | height: 100%; 78 | left: 0; 79 | top: 0; 80 | position: absolute; 81 | width: 100%; 82 | z-index: 1; 83 | } 84 | & .container{ 85 | position: relative; 86 | z-index: 2; 87 | } 88 | } 89 | 90 | .section-login{ 91 | min-height: 700px; 92 | } 93 | 94 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 95 | /* IE10+ CSS styles go here */ 96 | .page-header{ 97 | .content-center{ 98 | position: absolute; 99 | top: 50%; 100 | left: 50%; 101 | transform: translate(-50%, -75%); 102 | } 103 | .presentation-title{ 104 | background: none !important; 105 | } 106 | } 107 | } 108 | 109 | 110 | [class*="features-"], 111 | [class*="team-"], 112 | [class*="projects-"], 113 | [class*="pricing-"], 114 | [class*="testimonials-"], 115 | [class*="contactus-"] { 116 | padding: 80px 0; 117 | } 118 | .section-image { 119 | background-position: center center; 120 | background-size: cover; 121 | 122 | &:before { 123 | background-color: rgba(0, 0, 0, 0.5); 124 | content: ""; 125 | display: block; 126 | height: 100%; 127 | left: 0; 128 | top: 0; 129 | position: absolute; 130 | width: 100%; 131 | z-index: 1; 132 | } 133 | & .container { 134 | position: relative; 135 | z-index: 2; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | background-attachment: fixed; 3 | position: relative; 4 | line-height: 20px; 5 | 6 | .footer-nav{ 7 | ul{ 8 | padding-left: 0; 9 | margin-bottom: 0; 10 | } 11 | } 12 | } 13 | .footer nav > ul { 14 | list-style: none; 15 | font-weight: normal; 16 | } 17 | .footer nav > ul > li{ 18 | display: inline-block; 19 | padding: 10px 15px; 20 | margin: 15px 3px; 21 | line-height: 20px; 22 | text-align: center; 23 | } 24 | .footer nav > ul a:not(.btn) { 25 | color: #777777; 26 | display: block; 27 | margin-bottom: 3px; 28 | line-height: 1.6; 29 | opacity: .8; 30 | font-size: 12px; 31 | text-transform: uppercase; 32 | font-weight: 600; 33 | } 34 | .footer nav > ul a:not(.btn):hover, 35 | .footer nav > ul a:not(.btn):focus { 36 | color: #777777; 37 | opacity: 1; 38 | } 39 | .footer .copyright { 40 | color: #777777; 41 | padding: 10px 0px; 42 | font-size: 14px; 43 | margin: 15px 3px; 44 | line-height: 20px; 45 | text-align: center; 46 | } 47 | .footer .heart{ 48 | color: #EB5E28; 49 | } 50 | .footer{ 51 | background-color: $white-color; 52 | line-height: $line-height; 53 | 54 | &.footer-black{ 55 | h4{ 56 | color: $white-color; 57 | } 58 | } 59 | 60 | .links{ 61 | display: inline-block; 62 | 63 | ul{ 64 | list-style: none; 65 | margin: 0; 66 | padding: 0; 67 | font-weight: $font-weight-bold; 68 | 69 | > li{ 70 | display: inline-block; 71 | padding-right: 20px; 72 | } 73 | > li:last-child{ 74 | padding-right: 0px; 75 | } 76 | 77 | a:not(.btn){ 78 | color: $font-color; 79 | display: block; 80 | font-size: $font-size-h6; 81 | margin-bottom: 3px; 82 | &:hover, 83 | &:focus{ 84 | color: $default-states-color; 85 | } 86 | } 87 | 88 | &.uppercase-links{ 89 | text-transform: uppercase; 90 | } 91 | &.stacked-links{ 92 | margin-top: 10px; 93 | 94 | > li{ 95 | display: block; 96 | line-height: 26px; 97 | } 98 | h4{ 99 | margin-top: 0px; 100 | } 101 | } 102 | } 103 | } 104 | .social-area{ 105 | padding: 15px 0; 106 | .btn{ 107 | margin-bottom: 3px; 108 | padding: 8px; 109 | i{ 110 | margin-right: 0 !important; 111 | color: #fff; 112 | } 113 | } 114 | } 115 | hr{ 116 | border-color: $medium-gray; 117 | border-width: 1px 0 0; 118 | margin-top: 5px; 119 | margin-bottom: 5px; 120 | } 121 | .copyright{ 122 | color: $brown-font-color; 123 | font-size: 0.9em; 124 | ul > li{ 125 | padding-right: 0px; 126 | } 127 | } 128 | .title{ 129 | color: $default-states-color; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_sliders.scss: -------------------------------------------------------------------------------- 1 | .noUi-target, 2 | .noUi-target * { 3 | -webkit-touch-callout: none; 4 | -ms-touch-action: none; 5 | user-select: none; 6 | box-sizing: border-box; 7 | } 8 | 9 | .noUi-base { 10 | width: 100%; 11 | height: 100%; 12 | position: relative; 13 | } 14 | 15 | .noUi-origin { 16 | position: absolute; 17 | right: 0; 18 | top: 0; 19 | left: 0; 20 | bottom: 0; 21 | } 22 | 23 | .noUi-handle { 24 | position: relative; 25 | z-index: 1; 26 | box-sizing: border-box; 27 | } 28 | 29 | .noUi-stacking .noUi-handle { 30 | z-index: 10; 31 | } 32 | 33 | .noUi-state-tap .noUi-origin { 34 | transition: left 0.3s, top 0.3s; 35 | } 36 | 37 | .noUi-state-drag * { 38 | cursor: inherit !important; 39 | } 40 | 41 | .noUi-horizontal { 42 | height: 10px; 43 | } 44 | 45 | .noUi-handle { 46 | box-sizing: border-box; 47 | width: 14px; 48 | height: 14px; 49 | left: -10px; 50 | top: -6px; 51 | cursor: pointer; 52 | border-radius: 100%; 53 | transition: all 0.2s ease-out; 54 | border: 1px solid; 55 | background: #FFFFFF; 56 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); 57 | } 58 | 59 | .noUi-vertical .noUi-handle { 60 | margin-left: 5px; 61 | cursor: ns-resize; 62 | } 63 | 64 | .noUi-horizontal.noUi-extended { 65 | padding: 0 15px; 66 | } 67 | 68 | .noUi-horizontal.noUi-extended .noUi-origin { 69 | right: -15px; 70 | } 71 | 72 | .noUi-background { 73 | height: 2px; 74 | margin: 20px 0; 75 | } 76 | 77 | .noUi-origin { 78 | margin: 0; 79 | border-radius: 0; 80 | height: 2px; 81 | background: #c8c8c8; 82 | } 83 | .noUi-origin[style^="left: 0"] .noUi-handle { 84 | background-color: #fff; 85 | border: 2px solid #c8c8c8; 86 | } 87 | .noUi-origin[style^="left: 0"] .noUi-handle.noUi-active { 88 | border-width: 1px; 89 | } 90 | 91 | .noUi-target { 92 | border-radius: 3px; 93 | } 94 | 95 | .noUi-horizontal { 96 | height: 2px; 97 | margin: 15px 0; 98 | } 99 | 100 | .noUi-vertical { 101 | height: 100%; 102 | width: 2px; 103 | margin: 0 15px; 104 | display: inline-block; 105 | } 106 | 107 | .noUi-handle.noUi-active { 108 | transform: scale3d(2, 2, 1); 109 | } 110 | 111 | [disabled].noUi-slider { 112 | opacity: 0.5; 113 | } 114 | 115 | [disabled] .noUi-handle { 116 | cursor: not-allowed; 117 | } 118 | 119 | .slider { 120 | background: #c8c8c8; 121 | } 122 | .c-1-color{ 123 | background-color: blue; 124 | } 125 | .c-2-color{ 126 | background-color: white; 127 | } 128 | .slider.noUi-connect { 129 | background-color: #7AC29A; 130 | } 131 | .slider .noUi-handle { 132 | border-color: #7AC29A; 133 | } 134 | .slider.slider-info .noUi-origin:first-child{ 135 | background-color: #68B3C8; 136 | } 137 | .slider.slider-info .noUi-handle { 138 | border-color: #68B3C8; 139 | } 140 | .slider.slider-success .noUi-connect, 141 | .slider.slider-success.noUi-connect { 142 | background-color: #68B3C8; 143 | } 144 | .slider.slider-success .noUi-handle { 145 | border-color: #68B3C8; 146 | } 147 | .slider.slider-warning .noUi-connect, 148 | .slider.slider-warning.noUi-connect { 149 | background-color: #ff9800; 150 | } 151 | .slider.slider-warning .noUi-handle { 152 | border-color: #ff9800; 153 | } 154 | .slider.slider-danger .noUi-connect, 155 | .slider.slider-danger.noUi-connect { 156 | background-color: #f44336; 157 | } 158 | .slider.slider-danger .noUi-handle { 159 | border-color: #f44336; 160 | } 161 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Font Smoothing */ 2 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td, button, input, select, textarea{ 3 | -moz-osx-font-smoothing: grayscale; 4 | -webkit-font-smoothing: antialiased; 5 | font-family: $font-family-sans-serif; 6 | font-weight: $font-weight-light; 7 | } 8 | 9 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{ 10 | margin: $margin-large-vertical 0 0; 11 | } 12 | h1, .h1 { 13 | font-size: $font-size-h1; 14 | } 15 | h2, .h2{ 16 | font-size: $font-size-h2; 17 | } 18 | h3, .h3{ 19 | font-size: $font-size-h3; 20 | line-height: 1.4; 21 | margin: 20px 0 0px; 22 | } 23 | h4, .h4{ 24 | font-size: $font-size-h4; 25 | line-height: 1.2em; 26 | } 27 | h5, .h5 { 28 | font-size: $font-size-h5; 29 | line-height: 1.4em; 30 | } 31 | h6, .h6{ 32 | font-size: $font-size-h6; 33 | font-weight: $font-weight-bold; 34 | text-transform: uppercase; 35 | line-height: 1.5em; 36 | } 37 | p{ 38 | font-size: $font-paragraph; 39 | line-height: $line-height-general; 40 | margin-bottom: 5px; 41 | } 42 | 43 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 44 | color: $dark-gray; 45 | line-height: $line-height-general; 46 | } 47 | 48 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { 49 | font-size: 60%; 50 | } 51 | 52 | .title, 53 | .card-title, 54 | .info-title, 55 | .footer-brand, 56 | .footer-big h5, 57 | .footer-big h4, 58 | .media .media-heading{ 59 | font-family: $font-family-sans-serif;; 60 | 61 | &, 62 | a{ 63 | color: $card-black-color; 64 | text-decoration: none; 65 | } 66 | } 67 | .title-uppercase{ 68 | text-transform: uppercase; 69 | } 70 | .description{ 71 | color: $dark-gray; 72 | } 73 | blockquote small{ 74 | font-style: normal; 75 | } 76 | .text-muted{ 77 | color: $medium-gray; 78 | } 79 | .text-primary, .text-primary:hover{ 80 | color: $primary-color !important; 81 | } 82 | .text-info, .text-info:hover{ 83 | color: $info-color !important; 84 | } 85 | .text-success, .text-success:hover{ 86 | color: $success-color !important; 87 | } 88 | .text-warning, .text-warning:hover{ 89 | color: $warning-color !important; 90 | } 91 | .text-danger, .text-danger:hover{ 92 | color: $danger-color !important; 93 | } 94 | .glyphicon{ 95 | line-height: 1; 96 | } 97 | 98 | // Pulsing Heart (footer) 99 | .heart { 100 | color: #EB5E28; 101 | animation: heathing 1s ease infinite,; 102 | } 103 | 104 | @keyframes heathing { 105 | 0% { transform: scale( .75 ); } 106 | 20% { transform: scale( 1 ); } 107 | 40% { transform: scale( .75 ); } 108 | 60% { transform: scale( 1 ); } 109 | 80% { transform: scale( .75 ); } 110 | 100% { transform: scale( .75 ); } 111 | } 112 | .footer .credits, 113 | .footer-nav{ 114 | line-height: 85px; 115 | } 116 | .footer .btn{ 117 | margin-bottom: 0; 118 | } 119 | .blockquote{ 120 | border-left: 0 none; 121 | border-bottom: 1px solid #CCC5B9; 122 | border-top: 1px solid #CCC5B9; 123 | font-weight: 300; 124 | margin: 15px 0 10px; 125 | text-align: center; 126 | } 127 | .title{ 128 | margin-top: 30px; 129 | margin-bottom: 25px; 130 | min-height: 32px; 131 | } 132 | .title.text-center{ 133 | margin-bottom: 50px; 134 | } 135 | -------------------------------------------------------------------------------- /src/views/index-sections/SectionNotifications.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Alert, Container } from "reactstrap"; 23 | 24 | // core components 25 | 26 | function SectionNotifications() { 27 | const [alertSuccess, setAlertSuccess] = React.useState(true); 28 | const [alertWarning, setAlertWarning] = React.useState(true); 29 | const [alertDanger, setAlertDanger] = React.useState(true); 30 | return ( 31 | <> 32 | 33 |
34 |

Notifications

35 |
36 | 37 |
38 | 39 | 40 | This is a plain notification! 41 | 42 | 43 | 44 | 45 | 54 | This is a notification with close button. 55 | 56 | 57 | 62 | 63 |
64 | 73 |
74 | This is a notification with 75 | close button and icon. 76 |
77 |
78 | 79 | 80 | 81 | 82 |
83 | 92 |
93 | This is a notification with 94 | close button and icon and have many lines. You can see that the 95 | icon and the close button are always vertically aligned. This is 96 | a beautiful notification. So you don't have to worry about the 97 | style. 98 |
99 |
100 | 101 | 102 |
103 | 104 | ); 105 | } 106 | 107 | export default SectionNotifications; 108 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_checkbox-radio.scss: -------------------------------------------------------------------------------- 1 | .from-check, 2 | .form-check-radio { 3 | margin-bottom: 12px; 4 | position: relative; 5 | } 6 | 7 | .form-check { 8 | padding-left: 0; 9 | margin-bottom: .5rem; 10 | 11 | .form-check-label{ 12 | display: inline-block; 13 | position: relative; 14 | cursor: pointer; 15 | padding-left: 35px; 16 | line-height: 26px; 17 | margin-bottom: 0; 18 | } 19 | 20 | .form-check-sign::before, 21 | .form-check-sign::after { 22 | content: " "; 23 | display: inline-block; 24 | position: absolute; 25 | width: 24px; 26 | height: 24px; 27 | left: 0; 28 | cursor: pointer; 29 | border-radius: 6px; 30 | top: 0; 31 | background-color: #AAA7A4; 32 | -webkit-transition: opacity 0.3s linear; 33 | -moz-transition: opacity 0.3s linear; 34 | -o-transition: opacity 0.3s linear; 35 | -ms-transition: opacity 0.3s linear; 36 | transition: opacity 0.3s linear; 37 | } 38 | .form-check-sign::after { 39 | font-family: 'FontAwesome'; 40 | content: "\f00c"; 41 | top: -1px; 42 | text-align: center; 43 | font-size: 15px; 44 | opacity: 0; 45 | color: #FFF; 46 | border: 0; 47 | background-color: inherit; 48 | } 49 | &.disabled{ 50 | .form-check-label{ 51 | color: $dark-gray; 52 | opacity: .5; 53 | cursor: not-allowed; 54 | } 55 | } 56 | 57 | } 58 | 59 | .form-check.disabled .form-check-label, 60 | .form-check.disabled .form-check-label { 61 | 62 | } 63 | 64 | .form-check input[type="checkbox"], 65 | .form-check-radio input[type="radio"]{ 66 | opacity: 0; 67 | position: absolute; 68 | visibility: hidden; 69 | } 70 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{ 71 | opacity: 1; 72 | } 73 | 74 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before, 75 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ 76 | cursor: not-allowed; 77 | } 78 | 79 | .form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign, 80 | .form-check-radio input[type="radio"]:disabled + .form-check-sign{ 81 | pointer-events: none !important; 82 | } 83 | 84 | .form-check-radio{ 85 | margin-left: -3px; 86 | 87 | .form-check-label{ 88 | padding-left: 2rem; 89 | } 90 | &.disabled{ 91 | .form-check-label{ 92 | color: $dark-gray; 93 | opacity: .5; 94 | cursor: not-allowed; 95 | } 96 | } 97 | } 98 | 99 | .form-check-radio .form-check-sign::before{ 100 | font-family: 'FontAwesome'; 101 | content: "\f10c"; 102 | font-size: 22px; 103 | -webkit-font-smoothing: antialiased; 104 | -moz-osx-font-smoothing: grayscale; 105 | display: inline-block; 106 | position: absolute; 107 | opacity: .50; 108 | left: 5px; 109 | top: -5px; 110 | } 111 | 112 | .form-check-label input[type="checkbox"]:checked + .form-check-sign:before{ 113 | background-color: #66615B; 114 | } 115 | 116 | .form-check-radio input[type="radio"] + .form-check-sign:after, 117 | .form-check-radio input[type="radio"] { 118 | opacity: 0; 119 | @include transition-opacity(0.3s, linear); 120 | content:" "; 121 | display: block; 122 | } 123 | 124 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after { 125 | font-family: 'FontAwesome'; 126 | content: "\f192"; 127 | top: -5px; 128 | position: absolute; 129 | left: 5px; 130 | opacity: 1; 131 | font-size: 22px; 132 | } 133 | 134 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 135 | opacity: 1; 136 | } 137 | 138 | 139 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before, 140 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after { 141 | color: $dark-gray; 142 | } 143 | -------------------------------------------------------------------------------- /src/views/examples/RegisterPage.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Button, Card, Form, Input, Container, Row, Col } from "reactstrap"; 23 | 24 | // core components 25 | import ExamplesNavbar from "components/Navbars/ExamplesNavbar.js"; 26 | 27 | function RegisterPage() { 28 | document.documentElement.classList.remove("nav-open"); 29 | React.useEffect(() => { 30 | document.body.classList.add("register-page"); 31 | return function cleanup() { 32 | document.body.classList.remove("register-page"); 33 | }; 34 | }); 35 | return ( 36 | <> 37 | 38 |
44 |
45 | 46 | 47 | 48 | 49 |

Welcome

50 |
51 | 59 | 67 | 75 |
76 |
77 | 78 | 79 | 80 | 81 | 84 |
85 |
86 | 94 |
95 | 96 | 97 | 98 | 99 |
100 |
101 | © {new Date().getFullYear()}, made with{" "} 102 | by Creative Tim 103 |
104 |
105 |
106 | 107 | ); 108 | } 109 | 110 | export default RegisterPage; 111 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_headers.scss: -------------------------------------------------------------------------------- 1 | .page-header{ 2 | background-color: $header-background; 3 | background-position: center center; 4 | background-size: cover; 5 | min-height: 100vh; 6 | max-height: 999px; 7 | overflow: hidden; 8 | position: relative; 9 | width: 100%; 10 | z-index: 1; 11 | 12 | &.page-header-small{ 13 | min-height: 65vh !important; 14 | max-height: 700px; 15 | } 16 | &.page-header-xs{ 17 | min-height: 40vh !important; 18 | } 19 | 20 | .page-header-image{ 21 | position: absolute; 22 | background-size: cover; 23 | background-position: center center; 24 | width: 100%; 25 | height: 100%; 26 | z-index: -1; 27 | } 28 | 29 | 30 | .content-center{ 31 | position: absolute; 32 | top: 50%; 33 | left: 50%; 34 | z-index: 3; 35 | -ms-transform: translate(-50%,-50%); 36 | -webkit-transform: translate(-50%,-50%); 37 | transform: translate(-50%,-50%); 38 | text-align: center; 39 | color: #FFFFFF; 40 | width: 100%; 41 | } 42 | 43 | .motto{ 44 | color: #FFFFFF; 45 | text-align: center; 46 | z-index: 2; 47 | position: relative; 48 | } 49 | 50 | .filter{ 51 | &::after{ 52 | background-color: rgba(0, 0, 0, 0.5); 53 | content: ""; 54 | display: block; 55 | height: 100%; 56 | left: 0; 57 | position: absolute; 58 | top: 0; 59 | width: 100%; 60 | z-index: 2; 61 | } 62 | &.filter-primary::after{ 63 | background-color: rgba($filter-primary, 0.5); 64 | } 65 | &.filter-info::after{ 66 | background-color: rgba($filter-info, 0.5); 67 | } 68 | &.filter-success::after{ 69 | background-color: rgba($filter-success, 0.5); 70 | } 71 | &.filter-warning::after{ 72 | background-color: rgba($filter-warning, 0.5); 73 | } 74 | &.filter-danger::after{ 75 | background-color: rgba($filter-danger, 0.5); 76 | } 77 | } 78 | 79 | 80 | .container{ 81 | color: $white-color; 82 | position: relative; 83 | z-index: 3; 84 | } 85 | .description{ 86 | color: $white-color; 87 | } 88 | } 89 | .header-video{ 90 | &.state-play{ 91 | .filter::after{ 92 | opacity: 0; 93 | } 94 | .video-text{ 95 | opacity: 0; 96 | } 97 | 98 | .btn{ 99 | opacity: 0; 100 | } 101 | 102 | &:hover{ 103 | .btn{ 104 | opacity: 1; 105 | } 106 | } 107 | } 108 | } 109 | video{ 110 | position: absolute; 111 | width: 102%; 112 | } 113 | 114 | // For IE Browser 115 | 116 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 117 | 118 | .page-header{ 119 | .content-center{ 120 | position: absolute; 121 | top: 50%; 122 | left: 50%; 123 | transform: translate(-50%, -75%); 124 | } 125 | .presentation-title{ 126 | background: none !important; 127 | } 128 | } 129 | 130 | .subscribe-line{ 131 | .form-group{ 132 | .form-control{ 133 | line-height: 50px !important; 134 | height: 50px !important; 135 | } 136 | } 137 | } 138 | 139 | .nav-tabs .nav-item .active.nav-link::before{ 140 | bottom: 2px !important; 141 | } 142 | 143 | .nav-tabs .nav-item .active.nav-link::after{ 144 | bottom: 1px !important; 145 | } 146 | .nav-stacked .active.nav-link::before{ 147 | right: 0 !important; 148 | bottom: 7px !important; 149 | } 150 | .nav-stacked .active.nav-link::after{ 151 | right: -2px !important; 152 | bottom: 0 !important; 153 | top: 13px !important; 154 | } 155 | .buy-product{ 156 | .page-carousel{ 157 | .carousel-inner{ 158 | max-height: 570px !important; 159 | } 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_switch.scss: -------------------------------------------------------------------------------- 1 | /* ============================================================ 2 | * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru 3 | * http://www.larentis.eu/switch/ 4 | * ============================================================ 5 | * Licensed under the Apache License, Version 2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * ============================================================ */ 8 | .has-switch { 9 | border-radius: 30px; 10 | cursor: pointer; 11 | display: inline-block; 12 | line-height: 1.72222; 13 | overflow: hidden; 14 | position: relative; 15 | text-align: left; 16 | width: 61px; 17 | 18 | -webkit-user-select: none; 19 | -moz-user-select: none; 20 | -ms-user-select: none; 21 | -o-user-select: none; 22 | user-select: none; 23 | 24 | /* this code is for fixing safari bug with hidden overflow for border-radius */ 25 | -webkit-mask: url('../img/mask.png') 0 0 no-repeat; 26 | -webkit-mask-size: 61px 28px; 27 | mask: url('../img/mask.png') 0 0 no-repeat; 28 | mask-size: 61px 28px; 29 | } 30 | .has-switch.deactivate { 31 | opacity: 0.5; 32 | filter: alpha(opacity=50); 33 | cursor: default !important; 34 | } 35 | .has-switch.deactivate label, 36 | .has-switch.deactivate span { 37 | cursor: default !important; 38 | } 39 | .has-switch > div { 40 | position: relative; 41 | top: 0; 42 | width: 100px; 43 | } 44 | .has-switch > div.switch-animate { 45 | -webkit-transition: left 0.25s ease-out; 46 | transition: left 0.25s ease-out; 47 | } 48 | .has-switch > div.switch-off { 49 | left: -35px; 50 | } 51 | 52 | .has-switch > div.switch-on { 53 | left: 0; 54 | } 55 | .has-switch > div label { 56 | background-color: #FFFFFF; 57 | 58 | box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25); 59 | cursor: pointer; 60 | } 61 | .has-switch input[type=checkbox] { 62 | display: none; 63 | } 64 | .has-switch span { 65 | cursor: pointer; 66 | float: left; 67 | font-size: 11px; 68 | font-weight: 500; 69 | height: 26px; 70 | line-height: 15px; 71 | margin: 0; 72 | padding-bottom: 6px; 73 | padding-top: 5px; 74 | position: relative; 75 | text-align: center; 76 | text-indent: -10px; 77 | width: 50%; 78 | z-index: 1; 79 | -webkit-transition: 0.25s ease-out; 80 | transition: 0.25s ease-out; 81 | } 82 | .has-switch span.switch-left { 83 | background-color: $font-color; 84 | border-left: 1px solid rgba(0, 0, 0, 0); 85 | border-radius: 30px 0 0 30px; 86 | color: #FFFFFF; 87 | } 88 | .has-switch .switch-off span.switch-left{ 89 | background-color: $medium-gray; 90 | } 91 | .has-switch span.switch-right { 92 | background-color: $font-color; 93 | border-radius: 0 30px 30px 0; 94 | color: #ffffff; 95 | text-indent: 1px; 96 | } 97 | .has-switch .switch-off span.switch-right{ 98 | background-color: $medium-gray; 99 | } 100 | 101 | .has-switch label { 102 | border-radius: 12px; 103 | float: left; 104 | height: 22px; 105 | margin: 2px -13px; 106 | padding: 0; 107 | position: relative; 108 | transition: all 0.25s ease-out 0s; 109 | vertical-align: middle; 110 | width: 22px; 111 | z-index: 100; 112 | -webkit-transition: 0.25s ease-out; 113 | transition: 0.25s ease-out; 114 | } 115 | .has-switch .switch-on .fa-check:before{ 116 | margin-left: 10px; 117 | } 118 | .has-switch:hover .switch-on label{ 119 | margin: 2px -17px; 120 | width: 26px; 121 | } 122 | .has-switch:hover .switch-off label{ 123 | margin: 2px -13px; 124 | width: 26px; 125 | } 126 | input.ct-primary + span.switch-left, 127 | input.ct-primary + span + label + span.switch-right{ 128 | background-color: $primary-color; 129 | } 130 | input.ct-info + span.switch-left, 131 | input.ct-info + span + label + span.switch-right{ 132 | background-color: $info-color; 133 | } 134 | input.ct-success + span.switch-left, 135 | input.ct-success + span + label + span.switch-right{ 136 | background-color: $success-color; 137 | } 138 | input.ct-warning + span.switch-left, 139 | input.ct-warning + span + label + span.switch-right{ 140 | background-color: $warning-color; 141 | } 142 | input.ct-danger + span.switch-left, 143 | input.ct-danger + span + label + span.switch-right{ 144 | background-color: $danger-color; 145 | } 146 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/plugins/_plugin-nouislider.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Functional styling; 3 | * These styles are required for noUiSlider to function. 4 | * You don't need to change these rules to apply your design. 5 | */ 6 | .noUi-target, 7 | .noUi-target * { 8 | -webkit-touch-callout: none; 9 | -webkit-user-select: none; 10 | -ms-touch-action: none; 11 | touch-action: none; 12 | -ms-user-select: none; 13 | -moz-user-select: none; 14 | user-select: none; 15 | -moz-box-sizing: border-box; 16 | box-sizing: border-box; 17 | } 18 | .noUi-target { 19 | position: relative; 20 | direction: ltr; 21 | } 22 | .noUi-base { 23 | width: 100%; 24 | height: 100%; 25 | position: relative; 26 | z-index: 1; /* Fix 401 */ 27 | } 28 | .noUi-connect { 29 | position: absolute; 30 | right: 0; 31 | top: 0; 32 | left: 0; 33 | bottom: 0; 34 | } 35 | .noUi-origin { 36 | position: absolute; 37 | height: 0; 38 | width: 0; 39 | 40 | margin: 0; 41 | border-radius: 0; 42 | height: 2px; 43 | background: #c8c8c8; 44 | &[style^="left: 0"] .noUi-handle { 45 | background-color: #fff; 46 | border: 2px solid #c8c8c8; 47 | &.noUi-active { 48 | border-width: 1px; 49 | } 50 | } 51 | } 52 | .noUi-handle { 53 | position: relative; 54 | z-index: 1; 55 | } 56 | .noUi-state-tap .noUi-connect, 57 | .noUi-state-tap .noUi-origin { 58 | -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; 59 | transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; 60 | } 61 | .noUi-state-drag * { 62 | cursor: inherit !important; 63 | } 64 | 65 | /* Painting and performance; 66 | * Browsers can paint handles in their own layer. 67 | */ 68 | .noUi-base, 69 | .noUi-handle { 70 | -webkit-transform: translate3d(0,0,0); 71 | transform: translate3d(0,0,0); 72 | } 73 | 74 | /* Slider size and handle placement; 75 | */ 76 | .noUi-horizontal { 77 | height: 2px; 78 | margin: 15px 0; 79 | } 80 | .noUi-vertical { 81 | width: 18px; 82 | } 83 | .noUi-vertical .noUi-handle { 84 | width: 28px; 85 | height: 34px; 86 | left: -6px; 87 | top: -17px; 88 | } 89 | 90 | /* Styling; 91 | */ 92 | .noUi-target { 93 | background: #c8c8c8; 94 | border-radius: 4px; 95 | } 96 | .noUi-connect { 97 | background: #3FB8AF; 98 | -webkit-transition: background 450ms; 99 | transition: background 450ms; 100 | } 101 | 102 | /* Handles and cursors; 103 | */ 104 | .noUi-draggable { 105 | cursor: w-resize; 106 | } 107 | .noUi-vertical .noUi-draggable { 108 | cursor: n-resize; 109 | } 110 | .noUi-handle { 111 | box-sizing: border-box; 112 | width: 14px; 113 | height: 14px; 114 | left: -10px; 115 | top: -6px; 116 | cursor: pointer; 117 | border-radius: 100%; 118 | transition: all 0.2s ease-out; 119 | border: 1px solid; 120 | background: $white-color; 121 | 122 | &.noUi-active { 123 | transform: scale3d(1.5, 1.5, 1); 124 | } 125 | } 126 | .noUi-vertical .noUi-handle:before, 127 | .noUi-vertical .noUi-handle:after { 128 | width: 14px; 129 | height: 1px; 130 | left: 6px; 131 | top: 14px; 132 | } 133 | .noUi-vertical .noUi-handle:after { 134 | top: 17px; 135 | } 136 | 137 | /* Disabled state; 138 | */ 139 | 140 | [disabled] .noUi-connect { 141 | background: #B8B8B8; 142 | } 143 | [disabled].noUi-target, 144 | [disabled].noUi-handle, 145 | [disabled] .noUi-handle { 146 | cursor: not-allowed; 147 | } 148 | 149 | .slider { 150 | background: #c8c8c8; 151 | 152 | & .noUi-connect{ 153 | background-color: $primary-color; 154 | border-radius: 4px; 155 | } 156 | 157 | .noUi-handle{ 158 | border-color: $primary-color; 159 | } 160 | 161 | &.slider-info{ 162 | & .noUi-connect{ 163 | background-color: $info-color; 164 | } 165 | 166 | .noUi-handle{ 167 | border-color: $info-color; 168 | } 169 | } 170 | &.slider-success{ 171 | & .noUi-connect{ 172 | background-color: $success-color; 173 | } 174 | 175 | .noUi-handle{ 176 | border-color: $success-color; 177 | } 178 | } 179 | &.slider-warning{ 180 | & .noUi-connect{ 181 | background-color: $warning-color; 182 | } 183 | 184 | .noUi-handle{ 185 | border-color: $warning-color; 186 | } 187 | } 188 | &.slider-danger{ 189 | & .noUi-connect{ 190 | background-color: $danger-color; 191 | } 192 | 193 | .noUi-handle{ 194 | border-color: $danger-color; 195 | } 196 | } 197 | 198 | } 199 | -------------------------------------------------------------------------------- /src/views/index-sections/SectionCarousel.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { 23 | Card, 24 | Container, 25 | Row, 26 | Col, 27 | Carousel, 28 | CarouselItem, 29 | CarouselIndicators, 30 | CarouselCaption, 31 | } from "reactstrap"; 32 | 33 | // core components 34 | 35 | const items = [ 36 | { 37 | src: require("assets/img/soroush-karimi.jpg"), 38 | altText: "Somewhere", 39 | caption: "Somewhere", 40 | }, 41 | { 42 | src: require("assets/img/federico-beccari.jpg"), 43 | altText: "Somewhere else", 44 | caption: "Somewhere else", 45 | }, 46 | { 47 | src: require("assets/img/joshua-stannard.jpg"), 48 | altText: "Here it is", 49 | caption: "Here it is", 50 | }, 51 | ]; 52 | 53 | function SectionCarousel() { 54 | const [activeIndex, setActiveIndex] = React.useState(0); 55 | const [animating, setAnimating] = React.useState(false); 56 | const onExiting = () => { 57 | setAnimating(true); 58 | }; 59 | const onExited = () => { 60 | setAnimating(false); 61 | }; 62 | const next = () => { 63 | if (animating) return; 64 | const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1; 65 | setActiveIndex(nextIndex); 66 | }; 67 | const previous = () => { 68 | if (animating) return; 69 | const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1; 70 | setActiveIndex(nextIndex); 71 | }; 72 | const goToIndex = (newIndex) => { 73 | if (animating) return; 74 | setActiveIndex(newIndex); 75 | }; 76 | return ( 77 | <> 78 | {" "} 140 | 141 | ); 142 | } 143 | 144 | export default SectionCarousel; 145 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown { 2 | > .dropdown-menu:first-of-type { 3 | display: block; 4 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; 5 | } 6 | .dropdown-menu{ 7 | @include opacity(0); 8 | @include box-shadow($dropdown-shadow); 9 | visibility: hidden; 10 | position: absolute; 11 | 12 | &[x-placement="top-start"]{ 13 | @include transform-translate-y-dropdown(0px); 14 | 15 | } 16 | &[x-placement="bottom-start"]{ 17 | @include transform-translate-y-dropdown(0px); 18 | } 19 | } 20 | 21 | &.show .dropdown-menu{ 22 | @include opacity(1); 23 | visibility: visible; 24 | 25 | &[x-placement="top-start"]{ 26 | @include transform-translate-y-dropdown(-50px); 27 | top: auto !important; 28 | bottom: 0 !important; 29 | 30 | } 31 | &[x-placement="bottom-start"]{ 32 | @include transform-translate-y-dropdown(40px); 33 | bottom: auto !important; 34 | top: 0 !important; 35 | } 36 | } 37 | } 38 | 39 | .dropdown-menu{ 40 | background-color: $white-color; 41 | border: 0 none; 42 | border-radius: $border-radius-extreme; 43 | margin-top: 10px; 44 | padding: 0px; 45 | 46 | .divider{ 47 | background-color: $medium-pale-bg; 48 | margin: 0px; 49 | } 50 | 51 | .dropdown-header{ 52 | color: $dark-gray; 53 | font-size: $font-size-small; 54 | padding: $padding-dropdown-vertical $padding-dropdown-horizontal; 55 | } 56 | 57 | .no-notification{ 58 | color: #9A9A9A; 59 | font-size: 1.2em; 60 | padding: 30px 30px; 61 | text-align: center; 62 | } 63 | 64 | .dropdown-item{ 65 | color: $font-color; 66 | font-size: $font-size-base; 67 | padding: 10px 45px 10px 15px; 68 | clear: both; 69 | white-space: nowrap; 70 | width: 100%; 71 | display: block; 72 | 73 | img{ 74 | margin-top: -3px; 75 | } 76 | 77 | } 78 | .dropdown-item:focus{ 79 | outline: 0 !important; 80 | } 81 | 82 | .btn-group.select &{ 83 | min-width: 100%; 84 | } 85 | 86 | .dropdown-item:first-child { 87 | border-top-left-radius: $border-radius-extreme; 88 | border-top-right-radius: $border-radius-extreme; 89 | } 90 | 91 | .dropdown-item:last-child { 92 | border-bottom-left-radius: $border-radius-extreme; 93 | border-bottom-right-radius: $border-radius-extreme; 94 | } 95 | 96 | .dropdown-item.dropdown-toggle:last-of-type{ 97 | border-bottom-left-radius: $border-radius-extreme; 98 | border-bottom-right-radius: $border-radius-extreme; 99 | 100 | +.dropdown-menu { 101 | &.show { 102 | left: 100% !important; 103 | } 104 | .dropdown-item.dropdown-toggle { 105 | border-bottom-left-radius: 0; 106 | border-bottom-right-radius: 0; 107 | } 108 | li .dropdown-item.dropdown-toggle { 109 | border-top-left-radius: 0; 110 | border-top-right-radius: 0; 111 | border-bottom-left-radius: $border-radius-extreme; 112 | border-bottom-right-radius: $border-radius-extreme; 113 | } 114 | } 115 | } 116 | 117 | .select & .dropdown-item:first-child{ 118 | border-radius: 0; 119 | border-bottom: 0 none; 120 | } 121 | 122 | .dropdown-item:hover, 123 | .dropdown-item:focus{ 124 | color: $white-color !important; 125 | opacity: 1; 126 | text-decoration: none; 127 | 128 | } 129 | .dropdown-item:hover, 130 | .dropdown-item:focus{ 131 | background-color: $default-color; 132 | } 133 | 134 | &.dropdown-primary .dropdown-item:hover, 135 | &.dropdown-primary .dropdown-item:focus{ 136 | background-color: $bg-primary; 137 | } 138 | &.dropdown-info .dropdown-item:hover, 139 | &.dropdown-info .dropdown-item:focus{ 140 | background-color: $bg-info; 141 | } 142 | &.dropdown-success .dropdown-item:hover, 143 | &.dropdown-success .dropdown-item:focus{ 144 | background-color: $bg-success; 145 | } 146 | &.dropdown-warning .dropdown-item:hover, 147 | &.dropdown-warning .dropdown-item:focus{ 148 | background-color: $bg-warning; 149 | } 150 | &.dropdown-danger .dropdown-item:hover, 151 | &.dropdown-danger .dropdown-item:focus{ 152 | background-color: $bg-danger; 153 | } 154 | 155 | } 156 | .dropdown-divider { 157 | margin: 0 !important; 158 | } 159 | 160 | //fixed the bug for the select items in btn-group 161 | 162 | .btn-group.select.open { 163 | overflow: visible; 164 | } 165 | .dropdown-menu-right { 166 | right: -2px; 167 | left: auto; 168 | } 169 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_misc.scss: -------------------------------------------------------------------------------- 1 | /* General overwrite */ 2 | body{ 3 | color: $font-color; 4 | font-size: $font-size-base; 5 | font-weight: $font-weight-light; 6 | font-family: 'Montserrat', "Helvetica", Arial, sans-serif; 7 | } 8 | a{ 9 | color: $info-color; 10 | 11 | &:hover, &:focus{ 12 | color: $info-states-color; 13 | text-decoration: none; 14 | } 15 | 16 | // @include transition($fast-transition-time, linear); 17 | } 18 | hr{ 19 | border-color: $medium-pale-bg; 20 | } 21 | .icon{ 22 | fill: $font-color; 23 | } 24 | .fa-base{ 25 | font-size: 1.25em !important; 26 | } 27 | a:focus, a:active, 28 | button::-moz-focus-inner, 29 | input[type="reset"]::-moz-focus-inner, 30 | input[type="button"]::-moz-focus-inner, 31 | input[type="submit"]::-moz-focus-inner, 32 | select::-moz-focus-inner, 33 | input[type="file"] > input[type="button"]::-moz-focus-inner { 34 | outline : 0; 35 | } 36 | .ui-slider-handle:focus, 37 | .navbar-toggle { 38 | outline : 0 !important; 39 | } 40 | 41 | 42 | /* Animations */ 43 | .form-control, 44 | .input-group-addon, 45 | .tagsinput, 46 | .navbar, 47 | .navbar .alert, 48 | .carousel-control.right, 49 | .carousel-control.left 50 | { 51 | @include transition($general-transition-time, linear); 52 | } 53 | .tagsinput .tag, 54 | .tagsinput-remove-link, 55 | .filter, 56 | .btn-hover, 57 | [data-toggle="collapse"] i, 58 | .animation-transition-fast, 59 | .dropdown-menu .dropdown-item{ 60 | @include transition($fast-transition-time, linear); 61 | } 62 | 63 | .btn-morphing .fa, 64 | .btn-morphing .circle, 65 | .gsdk-collapse{ 66 | @include transition($slow-transition-time, linear); 67 | } 68 | 69 | .fa{ 70 | width: 18px; 71 | text-align: center; 72 | } 73 | .margin-top{ 74 | margin-top: 50px; 75 | } 76 | 77 | .iframe-container iframe{ 78 | box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2); 79 | } 80 | 81 | /* CT colors */ 82 | .ct-blue{ 83 | color: $primary-color; 84 | } 85 | .ct-azure{ 86 | color: $info-color; 87 | } 88 | .ct-green{ 89 | color: $success-color; 90 | } 91 | .ct-orange{ 92 | color: $warning-color; 93 | } 94 | .ct-red{ 95 | color: $danger-color; 96 | } 97 | 98 | //stefan changes 99 | 100 | .pagination .page-item .page-link .fa{ 101 | width: auto; 102 | font-weight: $font-weight-bold; 103 | } 104 | 105 | .bg-primary{ 106 | @include navbar-color($bg-primary !important); 107 | } 108 | .bg-info{ 109 | @include navbar-color($bg-info !important); 110 | } 111 | .bg-success{ 112 | @include navbar-color($bg-success !important); 113 | } 114 | .bg-warning{ 115 | @include navbar-color($bg-warning !important); 116 | } 117 | .bg-danger{ 118 | @include navbar-color($bg-danger !important); 119 | } 120 | 121 | 122 | .wrapper { 123 | -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); 124 | transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); 125 | left: 0; 126 | background-color: $white-color; 127 | position: relative; 128 | z-index: 1; 129 | } 130 | 131 | // Pulsing Heart (footer) 132 | .heart { 133 | color: #EB5E28; 134 | animation: heathing 1s ease infinite,; 135 | } 136 | 137 | @keyframes heathing { 138 | 0% { transform: scale( .75 ); } 139 | 20% { transform: scale( 1 ); } 140 | 40% { transform: scale( .75 ); } 141 | 60% { transform: scale( 1 ); } 142 | 80% { transform: scale( .75 ); } 143 | 100% { transform: scale( .75 ); } 144 | } 145 | 146 | 147 | .bd-docs { 148 | .page-header { 149 | min-height: 50vh; 150 | } 151 | } 152 | 153 | .offline-doc { 154 | .navbar.navbar-transparent{ 155 | padding-top: 25px; 156 | border-bottom: none; 157 | 158 | .navbar-minimize { 159 | display: none; 160 | } 161 | .navbar-brand, 162 | .collapse .navbar-nav .nav-link { 163 | color: $white-color !important; 164 | } 165 | } 166 | 167 | .footer{ 168 | position: absolute; 169 | width: 100%; 170 | background: transparent; 171 | bottom: 0; 172 | z-index: 3; 173 | 174 | nav > ul a:not(.btn), 175 | .copyright { 176 | color: $white-color !important; 177 | } 178 | } 179 | 180 | .page-header{ 181 | .page-header-image { 182 | position: absolute; 183 | background-size: cover; 184 | background-position: center center; 185 | width: 100%; 186 | height: 100%; 187 | z-index: -1; 188 | } 189 | .container { 190 | z-index: 3; 191 | } 192 | &:after { 193 | background-color: rgba(0, 0, 0, 0.5); 194 | content: ""; 195 | display: block; 196 | height: 100%; 197 | left: 0; 198 | position: absolute; 199 | top: 0; 200 | width: 100%; 201 | z-index: 2; 202 | } 203 | } 204 | } 205 | 206 | .main .section:first-of-type { 207 | position: relative; 208 | z-index: 2; 209 | } 210 | -------------------------------------------------------------------------------- /src/views/index-sections/SectionLogin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { 23 | Button, 24 | Card, 25 | Form, 26 | Input, 27 | InputGroupAddon, 28 | InputGroupText, 29 | InputGroup, 30 | Container, 31 | Row, 32 | Col, 33 | } from "reactstrap"; 34 | 35 | // core components 36 | 37 | function SectionLogin() { 38 | return ( 39 | <> 40 |
46 | 47 | 48 | 49 | 50 |

Welcome

51 |
52 | 60 | 68 | 76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 104 | 105 |
106 | 114 |
115 |
116 |
117 | 127 |
128 | 129 | 130 | 131 |
{" "} 132 | 133 | ); 134 | } 135 | 136 | export default SectionLogin; 137 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_inputs.scss: -------------------------------------------------------------------------------- 1 | @include placeholder() { 2 | color: $dark-gray; 3 | }; 4 | 5 | .form-control:focus + .input-group-text{ 6 | border: 1px solid black; 7 | } 8 | .form-control { 9 | background-color: $white-bg; 10 | border: 1px solid $medium-gray; 11 | border-radius: $border-radius-base; 12 | color: $font-color; 13 | font-size: $font-size-base; 14 | transition: background-color 0.3s ease 0s; 15 | padding-right: 0 !important; 16 | @include input-size($padding-base-vertical, $padding-label-horizontal, $height-base); 17 | @include box-shadow(none); 18 | 19 | &:focus{ 20 | background-color: $white-bg; 21 | border: 1px solid $table-line-color; 22 | @include box-shadow(none); 23 | outline: 0 !important; 24 | 25 | + .input-group-prepend, 26 | + .input-group-append { 27 | .input-group-text { 28 | border: 1px solid $table-line-color; 29 | border-left: none; 30 | } 31 | } 32 | } 33 | 34 | &.no-border{ 35 | border: medium none !important; 36 | 37 | &:focus { 38 | + .input-group-prepend, 39 | + .input-group-append { 40 | .input-group-text { 41 | border: none; 42 | } 43 | } 44 | } 45 | } 46 | 47 | .has-success &, 48 | .has-error &, 49 | .has-success &:focus, 50 | .has-error &:focus{ 51 | @include box-shadow(none); 52 | } 53 | 54 | .has-success &{ 55 | border: 1px solid $table-line-color; 56 | color: $font-color; 57 | 58 | &.form-control-success{ 59 | padding-right: 2.5em !important; 60 | } 61 | } 62 | .has-success &:focus{ 63 | border: 1px solid $success-color; 64 | color: $success-color; 65 | } 66 | .has-danger &{ 67 | background-color: $danger-input-bg; 68 | border: 1px solid $danger-color; 69 | color: $danger-color; 70 | 71 | &.form-control-danger{ 72 | padding-right: 2.5em !important; 73 | } 74 | } 75 | .has-danger &:focus{ 76 | background-color: $white-color; 77 | border: 1px solid $danger-color; 78 | } 79 | 80 | & + .form-control-feedback{ 81 | border-radius: $border-radius-large; 82 | font-size: $font-size-base; 83 | color: $danger-color; 84 | font-size: .8rem; 85 | position: absolute; 86 | top: 100%; 87 | padding-left: $padding-label-horizontal; 88 | vertical-align: middle; 89 | } 90 | 91 | .open &{ 92 | border-radius: $border-radius-base $border-radius-base 0 0; 93 | border-bottom-color: transparent; 94 | } 95 | 96 | &.form-control-lg { 97 | height: 55px; 98 | padding: $padding-large-vertical 13px; 99 | font-size: 1.25rem; 100 | line-height: 1.5; 101 | } 102 | 103 | &.form-control-sm { 104 | padding: .25rem .5rem; 105 | font-size: .875rem; 106 | line-height: 1.5; 107 | height: 31px; 108 | } 109 | } 110 | 111 | .has-error{ 112 | .form-control-feedback, .control-label{ 113 | color: $danger-color; 114 | } 115 | } 116 | .has-success{ 117 | .form-control-feedback, .control-label{ 118 | color: $success-color; 119 | } 120 | } 121 | 122 | .input-group-prepend + .form-control { 123 | margin-left: -1px; 124 | border-left: none; 125 | } 126 | .form-control + .input-group-append .input-group-text { 127 | border-right: 1px solid #ddd; 128 | } 129 | 130 | .input-group>.custom-select:not(:last-child), 131 | .input-group>.form-control:not(:last-child) { 132 | border-right: none; 133 | } 134 | 135 | .input-group-text { 136 | background-color: $white-bg; 137 | border-radius: $border-radius-base; 138 | border: 1px solid #ddd; 139 | border-right: none; 140 | 141 | .has-success &, 142 | .has-error &{ 143 | background-color: $white-color; 144 | } 145 | .has-error .form-control:focus + &{ 146 | color: $danger-color; 147 | } 148 | .has-success .form-control:focus + &{ 149 | color: $success-color; 150 | } 151 | .form-control:focus + &, 152 | .form-control:focus ~ &{ 153 | background-color: $white-color; 154 | } 155 | } 156 | 157 | .input-group { 158 | &.no-border{ 159 | .input-group-text { 160 | border: 0; 161 | } 162 | } 163 | } 164 | 165 | 166 | textarea.form-control{ 167 | padding: 10px 18px; 168 | height: auto; 169 | } 170 | .form-group{ 171 | position: relative; 172 | } 173 | 174 | .register-form { 175 | .form-control { 176 | border: 1px solid transparent !important; 177 | } 178 | .input-group .form-control { 179 | margin-left: -1px; 180 | } 181 | 182 | .input-group-prepend, 183 | .input-group-append { 184 | border: 1px solid transparent !important; 185 | } 186 | } 187 | 188 | #inputs { 189 | 190 | .input-group{ 191 | margin-bottom: 1rem; 192 | } 193 | } 194 | 195 | .card-form-horizontal{ 196 | .card-body{ 197 | .form-group{ 198 | margin-bottom: 0; 199 | } 200 | } 201 | } 202 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_sidebar.scss: -------------------------------------------------------------------------------- 1 | #bodyClick { 2 | height: 100%; 3 | width: 100%; 4 | position: fixed; 5 | opacity: 0; 6 | top: 0; 7 | left: auto; 8 | right: 230px; 9 | content: ""; 10 | z-index: 1029; 11 | overflow-x: hidden; 12 | } 13 | body { 14 | position: relative; 15 | } 16 | body > .navbar-collapse { 17 | position: fixed; 18 | display: block; 19 | top: 0; 20 | height: 100vh; 21 | width: 300px; 22 | right: 0; 23 | z-index: 1032; 24 | visibility: visible; 25 | background-color: $white-color; 26 | overflow-y: visible; 27 | border-top: none; 28 | text-align: left; 29 | border-left: 1px solid $table-line-color; 30 | padding-top: 15px; 31 | 32 | @include transform-translate-x(300px); 33 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 34 | 35 | ul { 36 | position: relative; 37 | z-index: 3; 38 | overflow-y: auto; 39 | height: 100%; 40 | } 41 | 42 | .nav > li{ 43 | 44 | &:last-child { 45 | border-bottom: 0; 46 | } 47 | & > a{ 48 | margin: 0px 0px; 49 | color: $default-color; 50 | text-transform: uppercase; 51 | font-weight: 600; 52 | font-size: $font-size-small; 53 | line-height: $line-height-general; 54 | padding: 15px; 55 | 56 | &:hover, 57 | &.active{ 58 | color: $default-states-color; 59 | } 60 | 61 | span{ 62 | display: inline-block !important; 63 | margin-left: 5px; 64 | } 65 | } 66 | 67 | &.social-links{ 68 | text-align: center; 69 | margin-left: -40px; 70 | > a{ 71 | font-size: 20px; 72 | padding: 15px 15px; 73 | } 74 | } 75 | } 76 | 77 | .scroll-area{ 78 | max-height: none; 79 | } 80 | 81 | &::after{ 82 | top: 0; 83 | left: 0; 84 | height: 100%; 85 | width: 100%; 86 | position: absolute; 87 | background-color: $bg-nude; 88 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%); 89 | display: block; 90 | content: ""; 91 | z-index: 1; 92 | } 93 | 94 | &.navbar-white-collapse{ 95 | &::after{ 96 | background-color: $white-color; 97 | } 98 | } 99 | &.has-image::after{ 100 | @include black-filter(.8); 101 | } 102 | 103 | .dropdown-menu{ 104 | display: none; 105 | } 106 | .open .dropdown-menu{ 107 | position: static; 108 | float: none; 109 | width: auto; 110 | margin-top: 0; 111 | background-color: transparent; 112 | border: 0; 113 | -webkit-box-shadow: none; 114 | box-shadow: none; 115 | display: block; 116 | min-width: auto !important; 117 | } 118 | 119 | .caret{ 120 | border-bottom-color: $default-states-color; 121 | border-top-color: $default-states-color; 122 | } 123 | 124 | .nav .open > a, 125 | .nav .open > a:hover, 126 | .nav .open > a:focus{ 127 | background-color: transparent; 128 | } 129 | 130 | } 131 | 132 | body > navbar-white-collapse{ 133 | 134 | } 135 | body > .navbar-collapse.collapse{ 136 | height: 100vh !important; 137 | } 138 | 139 | .wrapper{ 140 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 141 | left: 0; 142 | background-color: white; 143 | position: relative; 144 | z-index: 1; 145 | 146 | &.transition{ 147 | @include transform-translate-x(0px); 148 | } 149 | } 150 | 151 | .navbar-burger{ 152 | .navbar-toggle .icon-bar { 153 | display: block; 154 | position: relative; 155 | width: 24px; 156 | height: 2px; 157 | border-radius: 1px; 158 | } 159 | &.navbar-transparent .navbar-toggle .icon-bar{ 160 | background: #fff; 161 | } 162 | 163 | .container{ 164 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 165 | position: relative; 166 | } 167 | .navbar-header .navbar-toggle { 168 | margin-top: 12px; 169 | margin-bottom: 8px; 170 | width: 40px; 171 | height: 40px; 172 | } 173 | 174 | .bar1, 175 | .bar2, 176 | .bar3 { 177 | outline: 1px solid transparent; 178 | } 179 | .bar1 { 180 | top: 0px; 181 | @include bar-animation($topbar-back); 182 | } 183 | .bar2 { 184 | opacity: 1; 185 | } 186 | .bar3 { 187 | bottom: 0px; 188 | @include bar-animation($bottombar-back); 189 | } 190 | .toggled .bar1 { 191 | top: 6px; 192 | @include bar-animation($topbar-x); 193 | } 194 | .toggled .bar2 { 195 | opacity: 0; 196 | } 197 | .toggled .bar3 { 198 | bottom: 6px; 199 | @include bar-animation($bottombar-x); 200 | } 201 | 202 | @include topbar-x-rotation(); 203 | @include topbar-back-rotation(); 204 | @include bottombar-x-rotation(); 205 | @include bottombar-back-rotation(); 206 | 207 | } 208 | -------------------------------------------------------------------------------- /src/views/index-sections/SectionDownload.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Button, Container, Row, Col, UncontrolledTooltip } from "reactstrap"; 23 | 24 | // core components 25 | 26 | function SectionDownload() { 27 | return ( 28 | <> 29 |
30 | 31 | 32 | 33 |

Do you like what you see?

34 |

35 | Cause if you do, it can be yours for Free. Hit the button below 36 | and download it. Start a new project or give an old Bootstrap 4 37 | project a new look. 38 |

39 | 40 | 41 | 49 | 50 | 51 | 52 | 53 |

Want more?

54 |

55 | We're going to launch{" "} 56 | 57 | Paper Kit PRO React in a few weeks 58 | 59 | . It will have a huge number of components, sections and example 60 | pages. 61 |

62 | 63 | 64 | 68 | 69 | 70 | 71 | 72 |

Thank you for supporting us!

73 | 74 | 75 | 84 | 85 | Tweet! 86 | 87 | 96 | 97 | Share! 98 | 99 | 108 | 109 | Share! 110 | 111 | 120 | 121 | Star on Github 122 | 123 | 124 | 125 | 126 |
127 | 128 | ); 129 | } 130 | 131 | export default SectionDownload; 132 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.3.2] 2023-05-25 4 | 5 | - Update dependencies 6 | - Fix installation issue 7 | 8 | ## [1.3.1] 2022-08-19 9 | 10 | - Update the dependencies 11 | - Migration to React 18 12 | - Migration to sass from node-sass 13 | 14 | ## [1.3.0] 2021-03-24 15 | 16 | ### Bug fixing 17 | 18 | - Changed the way we import images 19 | - Old way: `require("path/to/imgae")` 20 | - New way: `require("path/to/imgae")` 21 | 22 | ### Major style changes 23 | 24 | ### Deleted components 25 | 26 | ### Added components 27 | 28 | ### Deleted dependencies 29 | 30 | - `react-bootstrap-switch` (replaced by the simple Bootstrap Switch: https://reactstrap.github.io/components/form/#Custom-Inputs) 31 | 32 | ### Added dependencies 33 | 34 | - `bootstrap@4.6.0` 35 | - `jquery@3.6.0` (Only to stop warnings from Bootstrap) 36 | 37 | ### Updated dependencies 38 | 39 | ``` 40 | moment 2.26.0 → 2.29.1 41 | node-sass 4.14.1 → 5.0.0 42 | nouislider 14.5.0 → 14.6.4 43 | react 16.13.1 → 17.0.2 44 | react-datetime 2.16.3 → 3.0.4 45 | react-dom 16.13.1 → 17.0.2 46 | react-scripts 3.4.1 → 4.0.3 47 | reactstrap 8.4.1 → 8.9.0 48 | typescript 3.9.5 → 4.2.3 49 | ``` 50 | 51 | ### Warning 52 | 53 | _When doing a clean install, you might have some warnings, those come from `node_modules` and do not affect the project in any way._ 54 | _The following two error might occur while doing a clean install - They do not affect the product in any way:_ 55 | _npm WARN react-datetime@3.0.4 requires a peer of react@^16.5.0 but none is installed. You must install peer dependencies yourself._ 56 | _npm WARN @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.13.12 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself._ 57 | 58 | ## [1.2.0] 2020-06-12 59 | 60 | ### Bug fixing 61 | 62 | - https://github.com/creativetimofficial/paper-kit-react/issues/2 (changed the fonts import to `~assets/fonts` and also added assets path inside `jsconfig.json` file) 63 | - Other Paper React products issues solved here as well 64 | - https://github.com/creativetimofficial/ct-paper-kit-pro-react/issues/2 65 | - https://github.com/creativetimofficial/paper-dashboard-react/issues/15 66 | - https://github.com/creativetimofficial/paper-dashboard-react/issues/8 67 | - https://github.com/creativetimofficial/ct-paper-dashboard-pro-react/issues/8 68 | - https://github.com/creativetimofficial/ct-paper-dashboard-pro-react/issues/6 - solution to this is to change the usage of the ModalHeader from reactstrap to simple Bootstrap ones: 69 | So, instead of: 70 | 71 | ``` 72 | 73 | Modal Title 74 | 75 | ``` 76 | 77 | You should use 78 | 79 | ``` 80 |
81 | 84 |
Modal Title
85 |
86 | ``` 87 | 88 | ### Major style changes 89 | 90 | - `src/assets/scss/paper-kit/_nucleo-outline.scss` (changed the fonts import to `~assets/fonts` and also added assets path inside `jsconfig.json` file) 91 | - `src/assets/scss/paper-kit/_nucleo-icons.scss` (changed the fonts import to `~assets/fonts` and also added assets path inside `jsconfig.json` file) 92 | - `src/assets/scss/react/plugins/_plugin-nouislider.scss` (due to new `noUiSlider` API) 93 | 94 | ### Deleted components 95 | 96 | ### Added components 97 | 98 | ### Deleted dependencies 99 | 100 | ### Added dependencies 101 | 102 | - gulp@4.0.2 (for Creative Tim copyrights) 103 | - gulp-append-prepend@1.0.8 (for Creative Tim copyrights) 104 | 105 | ### Updated dependencies 106 | 107 | ``` 108 | moment 2.24.0 → 2.26.0 109 | node-sass 4.12.0 → 4.14.1 110 | nouislider 13.1.5 → 14.5.0 111 | react 16.8.6 → 16.13.1 112 | react-dom 16.8.6 → 16.13.1 113 | react-router 5.0.1 → 5.2.0 114 | react-router-dom 5.0.1 → 5.2.0 115 | react-scripts 3.0.1 → 3.4.1 116 | reactstrap 8.0.0 → 8.4.1 117 | typescript 3.5.2 → 3.9.5 118 | ``` 119 | 120 | ### Warning 121 | 122 | _All the following products: Paper Kit React, Paper Dashboard React, Paper Kit PRO React and Paper Dashboard PRO React have been updated together, and thus, we've added to all of them the same version of 1.2.0 - we may have skipped some versions for some of the above products, we've done so, since we want all Paper & React products to share the same versions._ 123 | _While in development some of the plugins that were used for this product will throw some warnings - note, this only happens in development, the UI or the functionality of the product is not affected, also, if the issues will persist in React 17, we'll drop usage of those plugins, and replace them with other ones._ 124 | _Warnings might appear while doing an npm install - they do not affect the UI or the functionality of the product, and they appear because of NodeJS and not from the product itself._ 125 | 126 | ## [1.0.0] 2019-06-26 127 | 128 | ### Original Release 129 | 130 | - Added Reactstrap as base framework 131 | - Added design from Paper Kit 2 by Creative Tim 132 | -------------------------------------------------------------------------------- /src/components/Navbars/IndexNavbar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | // nodejs library that concatenates strings 21 | import classnames from "classnames"; 22 | // reactstrap components 23 | import { 24 | Button, 25 | Collapse, 26 | NavbarBrand, 27 | Navbar, 28 | NavItem, 29 | NavLink, 30 | Nav, 31 | Container, 32 | } from "reactstrap"; 33 | 34 | function IndexNavbar() { 35 | const [navbarColor, setNavbarColor] = React.useState("navbar-transparent"); 36 | const [navbarCollapse, setNavbarCollapse] = React.useState(false); 37 | 38 | const toggleNavbarCollapse = () => { 39 | setNavbarCollapse(!navbarCollapse); 40 | document.documentElement.classList.toggle("nav-open"); 41 | }; 42 | 43 | React.useEffect(() => { 44 | const updateNavbarColor = () => { 45 | if ( 46 | document.documentElement.scrollTop > 299 || 47 | document.body.scrollTop > 299 48 | ) { 49 | setNavbarColor(""); 50 | } else if ( 51 | document.documentElement.scrollTop < 300 || 52 | document.body.scrollTop < 300 53 | ) { 54 | setNavbarColor("navbar-transparent"); 55 | } 56 | }; 57 | 58 | window.addEventListener("scroll", updateNavbarColor); 59 | 60 | return function cleanup() { 61 | window.removeEventListener("scroll", updateNavbarColor); 62 | }; 63 | }); 64 | return ( 65 | 66 | 67 |
68 | 74 | Paper Kit React 75 | 76 | 87 |
88 | 93 | 157 | 158 | 159 | 160 | ); 161 | } 162 | 163 | export default IndexNavbar; 164 | -------------------------------------------------------------------------------- /src/components/Navbars/ExamplesNavbar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Kit React - v1.3.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/paper-kit-react 8 | 9 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 10 | * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/main/LICENSE.md) 11 | 12 | * Coded by Creative Tim 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | import React from "react"; 20 | import { Link } from "react-router-dom"; 21 | // nodejs library that concatenates strings 22 | import classnames from "classnames"; 23 | 24 | // reactstrap components 25 | import { 26 | Collapse, 27 | NavbarBrand, 28 | Navbar, 29 | NavItem, 30 | NavLink, 31 | Nav, 32 | Container, 33 | Button, 34 | } from "reactstrap"; 35 | 36 | function ExamplesNavbar() { 37 | const [navbarColor, setNavbarColor] = React.useState("navbar-transparent"); 38 | const [navbarCollapse, setNavbarCollapse] = React.useState(false); 39 | 40 | const toggleNavbarCollapse = () => { 41 | setNavbarCollapse(!navbarCollapse); 42 | document.documentElement.classList.toggle("nav-open"); 43 | }; 44 | 45 | React.useEffect(() => { 46 | const updateNavbarColor = () => { 47 | if ( 48 | document.documentElement.scrollTop > 299 || 49 | document.body.scrollTop > 299 50 | ) { 51 | setNavbarColor(""); 52 | } else if ( 53 | document.documentElement.scrollTop < 300 || 54 | document.body.scrollTop < 300 55 | ) { 56 | setNavbarColor("navbar-transparent"); 57 | } 58 | }; 59 | 60 | window.addEventListener("scroll", updateNavbarColor); 61 | 62 | return function cleanup() { 63 | window.removeEventListener("scroll", updateNavbarColor); 64 | }; 65 | }); 66 | return ( 67 | 72 | 73 |
74 | 81 | Paper Kit 2 82 | 83 | 94 |
95 | 100 | 169 | 170 | 171 | 172 | ); 173 | } 174 | 175 | export default ExamplesNavbar; 176 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_examples.scss: -------------------------------------------------------------------------------- 1 | .landing-alert{ 2 | margin-bottom: 0; 3 | } 4 | .page-header{ 5 | background-color: #B2AFAB; 6 | background-position: center center; 7 | background-size: cover; 8 | min-height: 100vh; 9 | max-height: 999px; 10 | overflow: hidden; 11 | position: relative; 12 | width: 100%; 13 | z-index: 1; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | 18 | .filter::after{ 19 | background-color: rgba(0, 0, 0, 0.5); 20 | content: ""; 21 | display: block; 22 | height: 100%; 23 | left: 0; 24 | top: 0; 25 | position: absolute; 26 | width: 100%; 27 | z-index: 1; 28 | } 29 | &.page-header-small{ 30 | min-height: 65vh !important; 31 | max-height: 700px; 32 | } 33 | &.page-header-xs{ 34 | min-height: 40vh !important; 35 | } 36 | 37 | &.section-dark{ 38 | .content-center, 39 | .category-absolute{ 40 | z-index: 1; 41 | } 42 | } 43 | } 44 | .page-header .motto{ 45 | text-align: left; 46 | z-index: 3; 47 | color: #fff; 48 | position: relative; 49 | 50 | } 51 | .landing-section{ 52 | padding: 100px 0; 53 | z-index: 1; 54 | } 55 | .section-buttons{ 56 | z-index: 1; 57 | } 58 | .landing-section .btn-simple{ 59 | padding: 0; 60 | } 61 | .landing-section .column{ 62 | padding: 0 75px 0 25px; 63 | } 64 | .team-player .img-circle, .team-player .img-thumbnail{ 65 | display: block; 66 | margin-top: 50px; 67 | margin-left: auto; 68 | margin-right: auto; 69 | width: 120px; 70 | } 71 | .contact-form{ 72 | margin-top: 30px; 73 | } 74 | .contact-form label{ 75 | margin-top: 15px; 76 | } 77 | .contact-form .btn{ 78 | margin-top: 30px; 79 | } 80 | 81 | .navbar-relative{ 82 | position: relative; 83 | z-index: 2; 84 | } 85 | #register-navbar a{ 86 | color: #FFF; 87 | } 88 | .register-background .container{ 89 | margin-top: 11%; 90 | position: relative; 91 | z-index: 3; 92 | } 93 | .register-footer{ 94 | bottom: 20px; 95 | position: absolute; 96 | z-index: 1; 97 | width: 100%; 98 | background: transparent; 99 | color: $white-color; 100 | } 101 | .register-footer .fa-heart{ 102 | color: #EB5E28; 103 | } 104 | 105 | .register-card label{ 106 | margin-top: 15px; 107 | } 108 | .register-card .title{ 109 | color: #B33C12; 110 | text-align: center; 111 | } 112 | .register-card .btn{ 113 | margin-top: 30px; 114 | } 115 | .register-card .forgot{ 116 | text-align: center; 117 | } 118 | 119 | .profile-content{ 120 | position: relative; 121 | } 122 | .owner{ 123 | text-align: center; 124 | } 125 | .owner .avatar{ 126 | padding: 15px; 127 | max-width: 180px; 128 | margin: -85px auto 0; 129 | display: inline-block; 130 | } 131 | .owner .name h4{ 132 | margin-top: 10px; 133 | } 134 | .profile-tabs{ 135 | margin: 50px 0; 136 | min-height: 300px; 137 | } 138 | #following h3{ 139 | margin: 20px 0 40px 0; 140 | } 141 | 142 | #follows .follows .unfollow .checkbox{ 143 | margin-top: -15px; 144 | } 145 | #follows .follows h6{ 146 | margin-top: 15px; 147 | } 148 | .follows hr{ 149 | margin-top: 10px; 150 | } 151 | .alert h5{ 152 | // margin-bottom: 10px; 153 | } 154 | .title-brand{ 155 | max-width: 730px; 156 | margin: 0 auto; 157 | position: relative; 158 | text-align: center; 159 | color: #FFFFFF; 160 | display: block; 161 | 162 | .type{ 163 | position: absolute; 164 | font-size: 20px; 165 | background: #132026; 166 | padding: 6px 10px; 167 | border-radius: 4px; 168 | top: 0; 169 | font-weight: 600; 170 | margin-top: 10px; 171 | right: -15px; 172 | } 173 | } 174 | 175 | .presentation-title{ 176 | font-size: 8em; 177 | font-weight: 700; 178 | margin: 0; 179 | color: #FFFFFF; 180 | background: #fbf8ec; 181 | background: -moz-linear-gradient(top, #FFFFFF 35%, #4e6773 100%); 182 | background: -webkit-linear-gradient(top, #FFFFFF 35%,#4e6773 100%); 183 | background: -ms-linear-gradient(top, #FFFFFF 35%,#4e6773 100%); 184 | background: linear-gradient(to bottom, #FFFFFF 35%,#4e6773 100%); 185 | 186 | -webkit-background-clip: text; 187 | -webkit-text-fill-color: transparent; 188 | } 189 | .presentation-subtitle{ 190 | font-size: 1.7em; 191 | color: #FFFFFF; 192 | } 193 | 194 | .category-absolute{ 195 | position: absolute; 196 | text-align: center; 197 | top: 100vh; 198 | margin-top: -60px; 199 | padding: 0 15px; 200 | width: 100%; 201 | color: rgba(255, 255, 255, 0.5); 202 | 203 | .creative-tim-logo { 204 | max-width: 140px; 205 | top: -2px; 206 | left: 3px; 207 | position: relative; 208 | } 209 | } 210 | 211 | .fog-low{ 212 | position: absolute; 213 | left: 0; 214 | bottom: 0; 215 | margin-left: -35%; 216 | margin-bottom: -50px; 217 | width: 110%; 218 | opacity: .85; 219 | 220 | img{ 221 | width: 100%; 222 | } 223 | 224 | &.right{ 225 | margin-left: 30%; 226 | opacity: 1; 227 | } 228 | } 229 | .page-header{ 230 | .content-center{ 231 | margin-top: 85px; 232 | } 233 | } 234 | .moving-clouds{ 235 | position: absolute; 236 | z-index: 1; 237 | bottom: 0; 238 | left: 0; 239 | width: 250.625em; 240 | height: 43.75em; 241 | -webkit-animation: cloudLoop 80s linear infinite; 242 | animation: cloudLoop 80s linear infinite; 243 | } 244 | 245 | @keyframes cloudLoop{ 0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 246 | 100%{-webkit-transform:translate3d(-50%,0,0); 247 | transform:translate3d(-50%,0,0)} 248 | } 249 | .following{ 250 | img{ 251 | max-width: 70px; 252 | } 253 | } 254 | 255 | 256 | .profile-content{ 257 | & .tab-content{ 258 | & .tab-pane{ 259 | min-height: 200px; 260 | } 261 | & #tweets, #connections, #media{ 262 | height: 100%; 263 | } 264 | } 265 | } 266 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/plugins/_plugin-perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | /* perfect-scrollbar v0.6.13 */ 2 | .ps-container { 3 | -ms-touch-action: auto; 4 | touch-action: auto; 5 | overflow: hidden !important; 6 | -ms-overflow-style: none; } 7 | @supports (-ms-overflow-style: none) { 8 | .ps-container { 9 | overflow: auto !important; } } 10 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 11 | .ps-container { 12 | overflow: auto !important; } } 13 | .ps-container.ps-active-x > .ps-scrollbar-x-rail, 14 | .ps-container.ps-active-y > .ps-scrollbar-y-rail { 15 | display: block; 16 | background-color: transparent; } 17 | .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { 18 | background-color: #eee; 19 | opacity: 0.9; } 20 | .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { 21 | background-color: #999; 22 | height: 11px; } 23 | .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { 24 | background-color: #eee; 25 | opacity: 0.9; } 26 | .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { 27 | background-color: #999; 28 | width: 11px; } 29 | .ps-container > .ps-scrollbar-x-rail { 30 | display: none; 31 | position: absolute; 32 | /* please don't change 'position' */ 33 | opacity: 0; 34 | -webkit-transition: background-color .2s linear, opacity .2s linear; 35 | -o-transition: background-color .2s linear, opacity .2s linear; 36 | -moz-transition: background-color .2s linear, opacity .2s linear; 37 | transition: background-color .2s linear, opacity .2s linear; 38 | bottom: 0px; 39 | /* there must be 'bottom' for ps-scrollbar-x-rail */ 40 | height: 15px; } 41 | .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { 42 | position: absolute; 43 | /* please don't change 'position' */ 44 | background-color: #aaa; 45 | -webkit-border-radius: 6px; 46 | -moz-border-radius: 6px; 47 | border-radius: 6px; 48 | -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 49 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 50 | -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 51 | -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 52 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 53 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 54 | bottom: 2px; 55 | /* there must be 'bottom' for ps-scrollbar-x */ 56 | height: 6px; } 57 | .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x { 58 | height: 11px; } 59 | .ps-container > .ps-scrollbar-y-rail { 60 | display: none; 61 | position: absolute; 62 | /* please don't change 'position' */ 63 | opacity: 0; 64 | -webkit-transition: background-color .2s linear, opacity .2s linear; 65 | -o-transition: background-color .2s linear, opacity .2s linear; 66 | -moz-transition: background-color .2s linear, opacity .2s linear; 67 | transition: background-color .2s linear, opacity .2s linear; 68 | right: 0; 69 | /* there must be 'right' for ps-scrollbar-y-rail */ 70 | width: 15px; } 71 | .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { 72 | position: absolute; 73 | /* please don't change 'position' */ 74 | background-color: #aaa; 75 | -webkit-border-radius: 6px; 76 | -moz-border-radius: 6px; 77 | border-radius: 6px; 78 | -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 79 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; 80 | -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 81 | -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 82 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; 83 | transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; 84 | right: 2px; 85 | /* there must be 'right' for ps-scrollbar-y */ 86 | width: 6px; } 87 | .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y { 88 | width: 11px; } 89 | .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { 90 | background-color: #eee; 91 | opacity: 0.9; } 92 | .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { 93 | background-color: #999; 94 | height: 11px; } 95 | .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { 96 | background-color: #eee; 97 | opacity: 0.9; } 98 | .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { 99 | background-color: #999; 100 | width: 11px; } 101 | .ps-container:hover > .ps-scrollbar-x-rail, 102 | .ps-container:hover > .ps-scrollbar-y-rail { 103 | opacity: 0.6; } 104 | .ps-container:hover > .ps-scrollbar-x-rail:hover { 105 | background-color: #eee; 106 | opacity: 0.9; } 107 | .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { 108 | background-color: #999; } 109 | .ps-container:hover > .ps-scrollbar-y-rail:hover { 110 | background-color: #eee; 111 | opacity: 0.9; } 112 | .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { 113 | background-color: #999; } 114 | -------------------------------------------------------------------------------- /src/assets/scss/paper-kit/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn{ 2 | box-sizing: border-box; 3 | border-width: $border-thick; 4 | font-size: $font-size-small; 5 | font-weight: $font-weight-bold; 6 | padding: .5rem $padding-base-horizontal; 7 | line-height: 1.75; 8 | cursor: pointer; 9 | text-transform: uppercase; 10 | 11 | 12 | &.btn-border, 13 | &.btn-link{ 14 | background-color: $transparent-bg; 15 | } 16 | 17 | @include btn-styles($default-color, $default-states-color); 18 | @include transition($fast-transition-time, linear); 19 | 20 | &:hover, 21 | &:focus{ 22 | outline: 0 !important; 23 | @include box-shadow(none); 24 | } 25 | &:active, 26 | &.active, 27 | .open > &.dropdown-toggle { 28 | @include box-shadow(none); 29 | outline: 0 !important; 30 | } 31 | 32 | &[class*="btn-outline-"]{ 33 | background-image: none; 34 | background-color: transparent; 35 | } 36 | 37 | .nc-icon{ 38 | position: relative; 39 | top: 2px; 40 | } 41 | } 42 | .btn-just-icon{ 43 | border-radius: $border-radius-btn-large; 44 | height: 40px; 45 | width: 40px; 46 | min-width: 40px; 47 | padding: 8px; 48 | 49 | &.btn-sm{ 50 | padding: 4px !important; 51 | } 52 | i{ 53 | font-size: $font-size-medium; 54 | padding: 2px 0px; 55 | } 56 | } 57 | 58 | .btn-group .btn + .btn, 59 | .btn-group .btn + .btn-group, 60 | .btn-group .btn-group + .btn, 61 | .btn-group .btn-group + .btn-group{ 62 | margin-left: -2px; 63 | } 64 | 65 | 66 | // Apply the mixin to the buttons 67 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 68 | .btn-success { @include btn-styles($success-color, $success-states-color); } 69 | .btn-info { @include btn-styles($info-color, $info-states-color); } 70 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 71 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 72 | .btn-neutral { @include btn-styles($white-color, $default-states-color); } 73 | 74 | .btn-outline-default { @include btn-outline-styles($default-color, $default-states-color); } 75 | .btn-outline-primary { @include btn-outline-styles($primary-color, $primary-states-color); } 76 | .btn-outline-success { @include btn-outline-styles($success-color, $success-states-color); } 77 | .btn-outline-info { @include btn-outline-styles($info-color, $info-states-color); } 78 | .btn-outline-warning { @include btn-outline-styles($warning-color, $warning-states-color); } 79 | .btn-outline-danger { @include btn-outline-styles($danger-color, $danger-states-color); } 80 | .btn-outline-neutral { @include btn-outline-styles($white-color, $default-states-color); 81 | &:hover, 82 | &:focus, 83 | &:active { 84 | color: $default-states-color !important; 85 | background-color: $white-color; 86 | } 87 | } 88 | .btn-neutral { 89 | @include btn-styles($white-color, $white-color); 90 | color: $default-color; 91 | 92 | &:hover, 93 | &:focus, 94 | &:active { 95 | color: $default-states-color !important; 96 | } 97 | 98 | &.btn-border{ 99 | &:hover, 100 | &:focus{ 101 | color: $default-color; 102 | } 103 | 104 | &:active, 105 | &.active, 106 | .open > &.dropdown-toggle{ 107 | background-color: $white-color; 108 | color: $default-color; 109 | } 110 | } 111 | &.btn-link:hover, 112 | &.btn-link:focus, 113 | &.btn-link:active { 114 | color: $white-color !important; 115 | } 116 | 117 | &.btn-link:focus:active { 118 | color: $default-states-color !important; 119 | } 120 | 121 | &.btn-link:active, 122 | &.btn-link.active{ 123 | background-color: transparent; 124 | } 125 | } 126 | 127 | .btn{ 128 | &:disabled, 129 | &[disabled], 130 | &.disabled{ 131 | @include opacity(.5); 132 | } 133 | } 134 | .btn-link{ 135 | border-color: transparent !important; 136 | padding: $padding-base-vertical $padding-base-horizontal; 137 | 138 | &:hover, 139 | &:focus, 140 | &:active{ 141 | text-decoration: none; 142 | border-color: transparent; 143 | } 144 | 145 | &.btn-icon{ 146 | padding: $padding-base-vertical; 147 | } 148 | } 149 | 150 | .btn-lg{ 151 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-base, $line-height-small); 152 | } 153 | .btn-sm{ 154 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small); 155 | } 156 | .btn-wd { 157 | min-width: 140px; 158 | } 159 | 160 | .btn-group.select{ 161 | width: 100%; 162 | } 163 | .btn-group.select .btn{ 164 | text-align: left; 165 | } 166 | .btn-group.select .caret{ 167 | position: absolute; 168 | top: 50%; 169 | margin-top: -1px; 170 | right: 8px; 171 | } 172 | .btn-just-icon{ 173 | &.btn-sm{ 174 | height: 30px; 175 | width: 30px; 176 | min-width: 30px; 177 | padding: 0; 178 | 179 | i{ 180 | font-size: $font-size-small; 181 | top: 1px !important; 182 | } 183 | } 184 | &.btn-lg{ 185 | height: 50px; 186 | width: 50px; 187 | min-width: 50px; 188 | padding: 13px; 189 | 190 | i{ 191 | font-size: 18px; 192 | padding: 0; 193 | } 194 | } 195 | &.btn-link{ 196 | padding: 8px !important; 197 | } 198 | } 199 | .btn-round{ 200 | border-radius: 30px; 201 | } 202 | .btn.btn-link:focus{ 203 | box-shadow: none !important; 204 | text-decoration: none; 205 | } 206 | 207 | .column .btn-link{ 208 | padding: 7px 0; 209 | } 210 | .share-buttons .btn-outline-default{ 211 | margin-top: 24px; 212 | } 213 | .btn-group.select{ 214 | overflow: visible !important; 215 | } 216 | .media{ 217 | .media-body{ 218 | .media-footer{ 219 | .btn-neutral{ 220 | margin: $navbar-margin-btn; 221 | font-size: $font-size-base; 222 | i{ 223 | margin-right: 0 !important; 224 | } 225 | } 226 | } 227 | } 228 | } 229 | --------------------------------------------------------------------------------