├── .env ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── Documentation └── documentation.html ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── genezio.yaml ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt └── src ├── assets ├── css │ ├── blk-design-system-react.css │ ├── blk-design-system-react.css.map │ ├── blk-design-system-react.min.css │ └── nucleo-icons.css ├── demo │ └── demo.css ├── fonts │ ├── nucleo.eot │ ├── nucleo.ttf │ ├── nucleo.woff │ └── nucleo.woff2 ├── img │ ├── apple-icon.png │ ├── asc.gif │ ├── bg.gif │ ├── bitcoin.png │ ├── blob.png │ ├── cercuri.png │ ├── chester-wade.jpg │ ├── darken-night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png │ ├── denys.jpg │ ├── desc.gif │ ├── dots.png │ ├── etherum.png │ ├── fabien-bazanegue.jpg │ ├── favicon.png │ ├── github.svg │ ├── google.svg │ ├── img_3115.jpg │ ├── james.jpg │ ├── julie.jpeg │ ├── landing-page.png │ ├── logo.png │ ├── lora.jpg │ ├── mark-finn.jpg │ ├── mike.jpg │ ├── night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png │ ├── nucleo-logo.svg │ ├── path1.png │ ├── path2.png │ ├── path3.png │ ├── path4.png │ ├── path5.png │ ├── patrat.png │ ├── profile-page.png │ ├── ripp.png │ ├── ryan.jpg │ ├── square-purple-1.png │ ├── square1.png │ ├── square2.png │ ├── square3.png │ ├── square4.png │ ├── square5.png │ ├── square6.png │ ├── triunghiuri.png │ └── waves.png └── scss │ ├── blk-design-system-react.scss │ └── blk-design-system-react │ ├── custom │ ├── _alerts.scss │ ├── _badge.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _checkboxes-radio.scss │ ├── _dropdown.scss │ ├── _example-pages.scss │ ├── _fixed-plugin.scss │ ├── _footer.scss │ ├── _forms.scss │ ├── _functions.scss │ ├── _icons.scss │ ├── _images.scss │ ├── _info-areas.scss │ ├── _input-group.scss │ ├── _misc.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _navbar.scss │ ├── _pagination.scss │ ├── _pills.scss │ ├── _progress.scss │ ├── _rtl.scss │ ├── _sections.scss │ ├── _tables.scss │ ├── _tabs.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── cards │ │ ├── _card-chart.scss │ │ ├── _card-map.scss │ │ ├── _card-plain.scss │ │ ├── _card-register.scss │ │ ├── _card-stats.scss │ │ ├── _card-task.scss │ │ └── _card-user.scss │ ├── mixins │ │ ├── _alert.scss │ │ ├── _background-variant.scss │ │ ├── _badges.scss │ │ ├── _buttons.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _icon.scss │ │ ├── _inputs.scss │ │ ├── _modals.scss │ │ ├── _page-header.scss │ │ ├── _popovers.scss │ │ ├── _vendor-prefixes.scss │ │ ├── _wizard.scss │ │ └── opacity.scss │ ├── sections │ │ ├── _blogs.scss │ │ ├── _contactus.scss │ │ ├── _features.scss │ │ ├── _headers.scss │ │ ├── _pricing.scss │ │ ├── _projects.scss │ │ ├── _social-subscribe-lines.scss │ │ ├── _team.scss │ │ └── _testimonials.scss │ ├── utilities │ │ ├── _backgrounds.scss │ │ ├── _floating.scss │ │ ├── _helper.scss │ │ ├── _position.scss │ │ ├── _shadows.scss │ │ ├── _sizing.scss │ │ ├── _spacing.scss │ │ ├── _text.scss │ │ └── _transform.scss │ └── vendor │ │ ├── _plugin-animate-bootstrap-notify.scss │ │ ├── _plugin-bootstrap-switch.scss │ │ ├── _plugin-datetimepicker.scss │ │ ├── _plugin-nouislider.scss │ │ └── _plugin-perfect-scrollbar.scss │ └── react │ ├── _alerts.scss │ ├── _badges.scss │ ├── _buttons.scss │ ├── _carousel.scss │ ├── _checkboxes-radio.scss │ ├── _custom-forms.scss │ ├── _example-pages.scss │ ├── _footer.scss │ ├── _inputs.scss │ ├── _modal.scss │ ├── _navbar.scss │ ├── _sections.scss │ ├── _type.scss │ ├── plugins │ ├── _plugin-nouislider.scss │ └── _plugin-react-datetime.scss │ └── react-differences.scss ├── components ├── Footer │ └── Footer.js ├── Navbars │ ├── ExamplesNavbar.js │ └── IndexNavbar.js └── PageHeader │ └── PageHeader.js ├── index.js ├── variables └── charts.js └── views ├── Index.js ├── IndexSections ├── Basics.js ├── Download.js ├── Examples.js ├── JavaScript.js ├── Navbars.js ├── Notifications.js ├── NucleoIcons.js ├── Pagination.js ├── Signup.js ├── Tabs.js └── Typography.js └── examples ├── LandingPage.js ├── ProfilePage.js └── RegisterPage.js /.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false -------------------------------------------------------------------------------- /.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/blk-design-system-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 | -------------------------------------------------------------------------------- /.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 | .eslintcache 26 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.2.2] 2023-05-24 4 | 5 | - Update the dependencies 6 | - Fix the installation issue 7 | 8 | ## [1.2.1] 2021-08-05 9 | 10 | - Update the dependencies 11 | - Migration to React 18 12 | - Migration to sass from node-sass 13 | 14 | ## [1.2.0] 2020-12-08 15 | 16 | ### Enhancements 17 | 18 | - **Full Hooks Support**: Change `class` components usage with `functional` ones in order to support Hooks 19 | 20 | ### Bug fixing 21 | 22 | ### Misc 23 | 24 | - Add new branch, named `main`, this will replace the `master` branch 25 | 26 | ### Major style changes 27 | 28 | - Remove `src/assets/scss/blk-design-system-react/bootstrap` folder and start using the `node_modules/bootstrap` one 29 | - Add `src/assets/scss/blk-design-system-react/react/_custom-forms.scss` for usage of Bootstrap Switch / Reactstrap CustomInput of type switch 30 | 31 | ### Deleted components 32 | 33 | ### Added components 34 | 35 | ### Deleted dependencies 36 | 37 | - react-bootstrap-switch 38 | - This project was not longer maintained, and it had issues with the new React version. The styles for it are still kept inside the product, but we do not recommended using the plugin anymore. You can use the simple Reactstrap CustomInput of type switch or the basic HTML Bootstrap Switch one. 39 | - eslint-plugin-flowtype 40 | 41 | ### Added dependencies 42 | 43 | ``` 44 | "@testing-library/jest-dom": "5.11.6", 45 | "@testing-library/react": "11.2.2", 46 | "@testing-library/user-event": "12.2.2", 47 | "bootstrap": "4.5.3", 48 | "jquery": "3.5.1", 49 | "node-sass-package-importer": "5.3.2", 50 | "web-vitals": "1.0.1" 51 | ``` 52 | 53 | ### Updated dependencies 54 | 55 | ``` 56 | chart.js 2.9.3 → 2.9.4 57 | moment 2.24.0 → 2.29.1 58 | node-sass 4.13.1 → 4.14.1 59 | nouislider 14.2.0 → 14.6.3 60 | react 16.13.1 → 17.0.1 61 | react-chartjs-2 2.9.0 → 2.11.1 62 | react-datetime 2.16.3 → 3.0.4 63 | react-dom 16.13.1 → 17.0.1 64 | react-router-dom 5.1.2 → 5.2.0 65 | react-scripts 3.4.1 → 4.0.1 66 | reactstrap 8.4.1 → 8.7.1 67 | typescript 3.8.3 → 4.1.2 68 | ``` 69 | 70 | ### Important Notes 71 | 72 | **The jQuery and TypeScript dependencies are installed only to stop console warnings on install. They are not actually used in our product. So the product is not based on jQuery, and it is not based on TypeScript!** 73 | 74 | ### Warning 75 | 76 | _Some warnings may appear when running the installation command, but they do not affect the UI or the functionality of the product._ 77 | _The following warnings will appear when running the installation command, but they do not affect the UI or the functionality of the product (they will be solved in our next update):_ 78 | 79 | ``` 80 | 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. 81 | npm WARN react-popper@1.3.7 requires a peer of react@0.14.x || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself. 82 | npm WARN create-react-context@0.3.0 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself. 83 | ``` 84 | 85 | ## [1.1.0] 2020-04-10 86 | 87 | ### Bug fixing 88 | 89 | - Github 90 | - https://github.com/creativetimofficial/blk-design-system-react/issues/8 91 | - https://github.com/creativetimofficial/blk-design-system-react/issues/7 92 | - https://github.com/creativetimofficial/blk-design-system-react/issues/5 93 | - https://github.com/creativetimofficial/blk-design-system-react/issues/4 94 | - https://github.com/creativetimofficial/blk-design-system-react/issues/2 95 | - https://github.com/creativetimofficial/blk-design-system-react/issues/1 96 | 97 | ### Major style changes 98 | 99 | - `src/assets/scss/blk-design-system-react/react/plugins/_plugin-nouislider.scss` 100 | 101 | ### Deleted components 102 | 103 | ### Added components 104 | 105 | ### Deleted dependencies 106 | 107 | ### Added dependencies 108 | 109 | - eslint-plugin-flowtype@3.13.0 (to stop terminal/cmd warnings) 110 | - typescript@3.8.3 (to stop terminal/cmd warnings) 111 | 112 | ### Updated dependencies 113 | 114 | ``` 115 | chart.js 2.7.3 → 2.9.3 116 | node-sass 4.11.0 → 4.13.1 117 | nouislider 13.1.1 → 14.2.0 118 | perfect-scrollbar 1.4.0 → 1.5.0 119 | react 16.8.3 → 16.13.1 120 | react-chartjs-2 2.7.4 → 2.9.0 121 | react-dom 16.8.3 → 16.13.1 122 | react-router-dom 4.3.1 → 5.1.2 123 | react-scripts 2.1.5 → 3.4.1 124 | reactstrap 7.1.0 → 8.4.1 125 | ``` 126 | 127 | ### Warning 128 | 129 | **The following warnings may appear when running the installation command, but they do not affect the UI or the functionality of the product:** 130 | 131 | ``` 132 | npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 133 | npm WARN deprecated popper.js@1.16.1: Popper changed home, find its new releases at @popperjs/core 134 | npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. 135 | ``` 136 | 137 | **The folowing components make react throw errors for using life-cycle methods that will be dropped in React 17.x: react-datetime, react-bootstrap-switch. But the UI or functionality of the product is not affected. When we'll update the product to React 17.x, if the issue will persist, we'll drop support for these components and replace them with other ones that create the same or a similar UI. Also, the warnings are only present in the development, and not in production.** 138 | 139 | ``` 140 | Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details. 141 | 142 | * Move data fetching code or side effects to componentDidUpdate. 143 | * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state 144 | * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. 145 | 146 | Please update the following components: DateTime, Switch 147 | ``` 148 | 149 | ## [1.0.0] 2019-03-04 150 | 151 | ### Original Release 152 | 153 | - Added Reactstrap as base framework 154 | - Added design from BLK Design System by Creative Tim 155 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Creative Tim (https://www.creative-tim.com?ref=blkdsr-license-md) 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 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: blk-design-system-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 -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blk-design-system-react", 3 | "version": "1.2.2", 4 | "description": "React version of BLK Design System by Creative Tim", 5 | "main": "index.js", 6 | "author": "Creative Tim", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/creativetimofficial/blk-design-system-react.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/creativetimofficial/blk-design-system-react/issues" 14 | }, 15 | "homepage": "https://demos.creative-tim.com/blk-design-system-react/#/", 16 | "keywords": [ 17 | "react", 18 | "reactjs", 19 | "blk", 20 | "blk-react", 21 | "design", 22 | "design-react", 23 | "system", 24 | "system-react", 25 | "design-system", 26 | "design-system-react", 27 | "blk-design", 28 | "blk-design-react", 29 | "blk-system", 30 | "blk-system-react", 31 | "blk-design-system", 32 | "blk-design-system-react" 33 | ], 34 | "dependencies": { 35 | "@testing-library/jest-dom": "5.16.5", 36 | "@testing-library/react": "14.0.0", 37 | "@testing-library/user-event": "14.4.3", 38 | "ajv": "^8.17.1", 39 | "bootstrap": "4.6.2", 40 | "chart.js": "2.9.4", 41 | "classnames": "2.3.1", 42 | "moment": "2.29.4", 43 | "nouislider": "15.4.0", 44 | "perfect-scrollbar": "1.5.5", 45 | "react": ">=16.8.0", 46 | "react-chartjs-2": "2.11.2", 47 | "react-datetime": "3.2.0", 48 | "react-dom": ">=16.8.0", 49 | "react-router-dom": "6.11.1", 50 | "react-scripts": "5.0.1", 51 | "reactstrap": "8.10.0", 52 | "sass": "1.62.1", 53 | "web-vitals": "3.3.1", 54 | "cross-env": "^7.0.3" 55 | }, 56 | "peerDependencies": { 57 | "react": ">=16.8.0", 58 | "react-dom": ">=16.8.0" 59 | }, 60 | "optionalDependencies": { 61 | "jquery": "3.7.0", 62 | "typescript": "5.0.4" 63 | }, 64 | "scripts": { 65 | "start": "react-scripts start", 66 | "build": "cross-env PUBLIC_URL=/ react-scripts build", 67 | "test": "react-scripts test", 68 | "eject": "react-scripts eject", 69 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", 70 | "compile-sass": "sass src/assets/scss/blk-design-system-react.scss src/assets/css/blk-design-system-react.css", 71 | "minify-sass": "sass src/assets/scss/blk-design-system-react.scss src/assets/css/blk-design-system-react.min.css --style compressed" 72 | }, 73 | "eslintConfig": { 74 | "extends": [ 75 | "react-app", 76 | "react-app/jest" 77 | ] 78 | }, 79 | "overrides": { 80 | "svgo": "3.0.2", 81 | "chokidar": "3.5.3", 82 | "fsevents": "2.3.2" 83 | }, 84 | "browserslist": { 85 | "production": [ 86 | ">0.2%", 87 | "not dead", 88 | "not op_mini all" 89 | ], 90 | "development": [ 91 | "last 1 chrome version", 92 | "last 1 firefox version", 93 | "last 1 safari version" 94 | ] 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 33 | 34 | 35 | 40 | 41 | 45 | 49 | BLK Design System React by Creative Tim 50 | 51 | 52 | 53 |
54 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "BLK Design System React", 3 | "name": "BLK Design System React by Creative Tim", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/fonts/nucleo.eot -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/fonts/nucleo.ttf -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/fonts/nucleo.woff -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/fonts/nucleo.woff2 -------------------------------------------------------------------------------- /src/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/asc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/asc.gif -------------------------------------------------------------------------------- /src/assets/img/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/bg.gif -------------------------------------------------------------------------------- /src/assets/img/bitcoin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/bitcoin.png -------------------------------------------------------------------------------- /src/assets/img/blob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/blob.png -------------------------------------------------------------------------------- /src/assets/img/cercuri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/cercuri.png -------------------------------------------------------------------------------- /src/assets/img/chester-wade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/chester-wade.jpg -------------------------------------------------------------------------------- /src/assets/img/darken-night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/darken-night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png -------------------------------------------------------------------------------- /src/assets/img/denys.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/denys.jpg -------------------------------------------------------------------------------- /src/assets/img/desc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/desc.gif -------------------------------------------------------------------------------- /src/assets/img/dots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/dots.png -------------------------------------------------------------------------------- /src/assets/img/etherum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/etherum.png -------------------------------------------------------------------------------- /src/assets/img/fabien-bazanegue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/fabien-bazanegue.jpg -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/dark/github 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/img/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/color/google 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/img/img_3115.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/img_3115.jpg -------------------------------------------------------------------------------- /src/assets/img/james.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/james.jpg -------------------------------------------------------------------------------- /src/assets/img/julie.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/julie.jpeg -------------------------------------------------------------------------------- /src/assets/img/landing-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/landing-page.png -------------------------------------------------------------------------------- /src/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/logo.png -------------------------------------------------------------------------------- /src/assets/img/lora.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/lora.jpg -------------------------------------------------------------------------------- /src/assets/img/mark-finn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/mark-finn.jpg -------------------------------------------------------------------------------- /src/assets/img/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/mike.jpg -------------------------------------------------------------------------------- /src/assets/img/night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png -------------------------------------------------------------------------------- /src/assets/img/nucleo-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 11 | 15 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/img/path1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/path1.png -------------------------------------------------------------------------------- /src/assets/img/path2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/path2.png -------------------------------------------------------------------------------- /src/assets/img/path3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/path3.png -------------------------------------------------------------------------------- /src/assets/img/path4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/path4.png -------------------------------------------------------------------------------- /src/assets/img/path5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/path5.png -------------------------------------------------------------------------------- /src/assets/img/patrat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/patrat.png -------------------------------------------------------------------------------- /src/assets/img/profile-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/profile-page.png -------------------------------------------------------------------------------- /src/assets/img/ripp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/ripp.png -------------------------------------------------------------------------------- /src/assets/img/ryan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/ryan.jpg -------------------------------------------------------------------------------- /src/assets/img/square-purple-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/square-purple-1.png -------------------------------------------------------------------------------- /src/assets/img/square1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/square1.png -------------------------------------------------------------------------------- /src/assets/img/square2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/square2.png -------------------------------------------------------------------------------- /src/assets/img/square3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/square3.png -------------------------------------------------------------------------------- /src/assets/img/square4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/square4.png -------------------------------------------------------------------------------- /src/assets/img/square5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/square5.png -------------------------------------------------------------------------------- /src/assets/img/square6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/square6.png -------------------------------------------------------------------------------- /src/assets/img/triunghiuri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/triunghiuri.png -------------------------------------------------------------------------------- /src/assets/img/waves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-react/b8d5ddd37310da5d170b1b2781b0a7d75a887077/src/assets/img/waves.png -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | $asset-base-path: "../../../../assets" !default; 20 | 21 | // Core 22 | 23 | @import "blk-design-system-react/custom/functions"; 24 | @import "~bootstrap/scss/functions"; 25 | 26 | @import "blk-design-system-react/custom/variables"; 27 | @import "~bootstrap/scss/variables"; 28 | 29 | @import "blk-design-system-react/custom/mixins"; 30 | @import "~bootstrap/scss/mixins"; 31 | 32 | // Bootstrap components 33 | 34 | @import "~bootstrap/scss/root"; 35 | @import "~bootstrap/scss/reboot"; 36 | @import "~bootstrap/scss/type"; 37 | @import "~bootstrap/scss/images"; 38 | @import "~bootstrap/scss/code"; 39 | @import "~bootstrap/scss/grid"; 40 | @import "~bootstrap/scss/tables"; 41 | @import "~bootstrap/scss/forms"; 42 | @import "~bootstrap/scss/buttons"; 43 | @import "~bootstrap/scss/transitions"; 44 | @import "~bootstrap/scss/dropdown"; 45 | @import "~bootstrap/scss/button-group"; 46 | @import "~bootstrap/scss/input-group"; 47 | @import "~bootstrap/scss/custom-forms"; 48 | @import "~bootstrap/scss/nav"; 49 | @import "~bootstrap/scss/navbar"; 50 | @import "~bootstrap/scss/card"; 51 | @import "~bootstrap/scss/breadcrumb"; 52 | @import "~bootstrap/scss/pagination"; 53 | @import "~bootstrap/scss/badge"; 54 | @import "~bootstrap/scss/jumbotron"; 55 | @import "~bootstrap/scss/alert"; 56 | @import "~bootstrap/scss/progress"; 57 | @import "~bootstrap/scss/media"; 58 | @import "~bootstrap/scss/list-group"; 59 | @import "~bootstrap/scss/close"; 60 | @import "~bootstrap/scss/modal"; 61 | @import "~bootstrap/scss/tooltip"; 62 | @import "~bootstrap/scss/popover"; 63 | @import "~bootstrap/scss/carousel"; 64 | @import "~bootstrap/scss/utilities"; 65 | @import "~bootstrap/scss/print"; 66 | 67 | // Custom components 68 | 69 | @import "blk-design-system-react/custom/alerts.scss"; 70 | @import "blk-design-system-react/custom/buttons.scss"; 71 | @import "blk-design-system-react/custom/dropdown.scss"; 72 | @import "blk-design-system-react/custom/footer.scss"; 73 | @import "blk-design-system-react/custom/forms.scss"; 74 | @import "blk-design-system-react/custom/images.scss"; 75 | @import "blk-design-system-react/custom/modal.scss"; 76 | @import "blk-design-system-react/custom/navbar.scss"; 77 | @import "blk-design-system-react/custom/type.scss"; 78 | @import "blk-design-system-react/custom/icons.scss"; 79 | @import "blk-design-system-react/custom/tables"; 80 | @import "blk-design-system-react/custom/checkboxes-radio"; 81 | @import "blk-design-system-react/custom/fixed-plugin"; 82 | @import "blk-design-system-react/custom/pagination.scss"; 83 | @import "blk-design-system-react/custom/misc.scss"; 84 | @import "blk-design-system-react/custom/rtl.scss"; 85 | @import "blk-design-system-react/custom/input-group.scss"; 86 | @import "blk-design-system-react/custom/example-pages.scss"; 87 | @import "blk-design-system-react/custom/progress.scss"; 88 | @import "blk-design-system-react/custom/badge.scss"; 89 | @import "blk-design-system-react/custom/pills.scss"; 90 | @import "blk-design-system-react/custom/tabs.scss"; 91 | @import "blk-design-system-react/custom/info-areas.scss"; 92 | 93 | // Sections 94 | @import "blk-design-system-react/custom/sections.scss"; 95 | 96 | // Vendor / Plugins 97 | 98 | @import "blk-design-system-react/custom/vendor/plugin-perfect-scrollbar.scss"; 99 | @import "blk-design-system-react/custom/vendor/plugin-animate-bootstrap-notify.scss"; 100 | @import "blk-design-system-react/custom/vendor/plugin-bootstrap-switch.scss"; 101 | @import "blk-design-system-react/custom/vendor/plugin-nouislider.scss"; 102 | @import "blk-design-system-react/custom/vendor/plugin-datetimepicker.scss"; 103 | 104 | // Cards 105 | 106 | @import "blk-design-system-react/custom/card"; 107 | @import "blk-design-system-react/custom/cards/card-chart"; 108 | @import "blk-design-system-react/custom/cards/card-map"; 109 | @import "blk-design-system-react/custom/cards/card-user"; 110 | @import "blk-design-system-react/custom/cards/card-task"; 111 | @import "blk-design-system-react/custom/cards/card-plain"; 112 | @import "blk-design-system-react/custom/cards/card-register"; 113 | @import "blk-design-system-react/custom/cards/card-stats"; 114 | @import "blk-design-system-react/custom/cards/card-chart"; 115 | 116 | // React Differences 117 | 118 | @import "blk-design-system-react/react/react-differences"; 119 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | color: $white; 4 | 5 | .alert-link{ 6 | color: $white; 7 | } 8 | 9 | &.alert-success{ 10 | background-color: darken($success, 10%); 11 | } 12 | 13 | i.fa, 14 | i.tim-icons{ 15 | font-size: $font-paragraph; 16 | } 17 | 18 | .close{ 19 | color: $white; 20 | opacity: .9; 21 | text-shadow: none; 22 | line-height: 0; 23 | outline: 0; 24 | } 25 | 26 | span[data-notify="icon"]{ 27 | font-size: 22px; 28 | display: block; 29 | left: 19px; 30 | position: absolute; 31 | top: 50%; 32 | margin-top: -11px; 33 | } 34 | 35 | button.close{ 36 | position: absolute; 37 | right: 15px; 38 | top: 50%; 39 | margin-top: -13px; 40 | width: 25px; 41 | height: 25px; 42 | padding: 3px; 43 | } 44 | 45 | .close ~ span{ 46 | display: block; 47 | max-width: 89%; 48 | } 49 | 50 | &.alert-with-icon{ 51 | padding-left: 65px; 52 | } 53 | } 54 | 55 | .alert-dismissible { 56 | .close { 57 | top: 50%; 58 | right: $alert-padding-x; 59 | padding: 0; 60 | transform: translateY(-50%); 61 | color: rgba($white, .6); 62 | opacity: 1; 63 | 64 | &:hover, 65 | &:focus { 66 | color: rgba($white, .9); 67 | opacity: 1 !important; 68 | } 69 | 70 | @include media-breakpoint-down(xs) { 71 | top: 1rem; 72 | right: .5rem; 73 | } 74 | 75 | &>span:not(.sr-only) { 76 | font-size: 1.5rem; 77 | background-color: transparent; 78 | color: rgba($white, .6); 79 | } 80 | 81 | &:hover, 82 | &:focus { 83 | &>span:not(.sr-only) { 84 | background-color: transparent; 85 | color: rgba($white, .9); 86 | } 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_badge.scss: -------------------------------------------------------------------------------- 1 | /* badges */ 2 | .badge{ 3 | text-transform: uppercase; 4 | line-height: 12px; 5 | border: none; 6 | text-decoration: none; 7 | margin-bottom: 5px; 8 | 9 | &:hover, 10 | &:focus{ 11 | text-decoration: none; 12 | } 13 | } 14 | 15 | .badge-icon{ 16 | padding: 0.4em 0.55em; 17 | 18 | i { 19 | font-size: 0.8em; 20 | } 21 | } 22 | 23 | .badge-success{ 24 | @include badge-variant(darken($success,10%)); 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn, 2 | .navbar .navbar-nav > a.btn{ 3 | border-width: $border-thick; 4 | border: none; 5 | position: relative; 6 | overflow: hidden; 7 | margin:4px 1px; 8 | border-radius: $border-radius-lg; 9 | cursor: pointer; 10 | 11 | @include btn-styles($default, $default-states); 12 | 13 | &:hover, 14 | &:focus{ 15 | @include opacity(1); 16 | outline: 0 !important; 17 | } 18 | &:active, 19 | &.active, 20 | .open > &.dropdown-toggle { 21 | @include box-shadow(none); 22 | outline: 0 !important; 23 | } 24 | 25 | .badge{ 26 | margin: 0; 27 | } 28 | 29 | &.btn-icon { 30 | // see above for color variations 31 | height: $icon-size-regular; 32 | min-width: $icon-size-regular; 33 | width: $icon-size-regular; 34 | padding: 0; 35 | font-size: $icon-font-size-regular; 36 | overflow: hidden; 37 | position: relative; 38 | line-height: normal; 39 | 40 | &.btn-simple{ 41 | padding: 0; 42 | } 43 | 44 | &.btn-sm{ 45 | height: $icon-size-sm; 46 | min-width: $icon-size-sm; 47 | width: $icon-size-sm; 48 | 49 | .fa, 50 | .far, 51 | .fas, 52 | .tim-icons{ 53 | font-size: $icon-font-size-sm; 54 | } 55 | } 56 | 57 | &.btn-lg{ 58 | height: $icon-size-lg; 59 | min-width: $icon-size-lg; 60 | width: $icon-size-lg; 61 | 62 | .fa, 63 | .far, 64 | .fas, 65 | .fab, 66 | .tim-icons{ 67 | font-size: $icon-font-size-lg !important; 68 | } 69 | } 70 | 71 | &:not(.btn-footer) .tim-icons, 72 | &:not(.btn-footer) .fa, 73 | &:not(.btn-footer) .far, 74 | &:not(.btn-footer) .fas, 75 | &:not(.btn-footer) .fab { 76 | position: absolute; 77 | font-size: 1em; 78 | top: 50%; 79 | left: 50%; 80 | transform: translate(-12px, -12px); 81 | line-height: 1.5626rem; 82 | width: 24px; 83 | } 84 | 85 | } 86 | 87 | &:not(.btn-icon) .tim-icons{ 88 | position: relative; 89 | top: -1px; 90 | } 91 | 92 | span{ 93 | position: relative; 94 | display: block; 95 | } 96 | 97 | &.btn-link.dropdown-toggle { 98 | color: $dark-gray; 99 | } 100 | 101 | &.dropdown-toggle:after { 102 | margin-left: 30px !important; 103 | } 104 | } 105 | 106 | // Apply the mixin to the buttons 107 | // .btn-default { @include btn-styles($default-color, $default-states-color); } 108 | .btn-primary { @include btn-styles($primary, $primary-states); 109 | 110 | } 111 | .btn-success { @include btn-styles($success, $success-states); 112 | 113 | } 114 | .btn-info { @include btn-styles($info, $info-states); 115 | 116 | } 117 | .btn-warning { @include btn-styles($warning, $warning-states); 118 | &:not(:disabled):not(.disabled):active{ 119 | color: $white; 120 | } 121 | } 122 | .btn-danger { @include btn-styles($danger, $danger-states); 123 | 124 | } 125 | .btn-neutral { @include btn-styles($white, $white); } 126 | 127 | .btn{ 128 | &:disabled, 129 | &[disabled], 130 | &.disabled{ 131 | @include opacity(.5); 132 | pointer-events: none; 133 | } 134 | } 135 | .btn-simple{ 136 | border: $border; 137 | border-color: $default; 138 | box-shadow: none; 139 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 140 | background-color: $transparent-bg; 141 | } 142 | 143 | .btn-simple, 144 | .btn-link{ 145 | &.disabled, 146 | &:disabled, 147 | &[disabled], 148 | fieldset[disabled] & { 149 | &, 150 | &:hover, 151 | &:focus, 152 | &.focus, 153 | &:active, 154 | &.active { 155 | background: $transparent-bg; 156 | } 157 | } 158 | } 159 | 160 | .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active{ 161 | box-shadow: 2px 2px 6px rgba(0,0,0,.4); 162 | } 163 | .btn-link{ 164 | border: $none; 165 | box-shadow: none; 166 | padding: $padding-base-vertical $padding-base-horizontal; 167 | background: $transparent-bg; 168 | color: $gray-300; 169 | font-weight: $font-weight-bold; 170 | 171 | &:hover { 172 | box-shadow: none !important; 173 | transform: none !important; 174 | } 175 | } 176 | 177 | .btn-lg{ 178 | @include btn-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $border-radius-lg); 179 | } 180 | .btn-sm{ 181 | @include btn-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-base, $border-radius-sm); 182 | } 183 | 184 | .btn-wd { 185 | min-width: 140px; 186 | } 187 | .btn-group.select{ 188 | width: 100%; 189 | } 190 | 191 | .btn-group { 192 | .btn.active { 193 | box-shadow: 2px 2px 6px rgba(0,0,0,.4); 194 | transform: translateY(-1px); 195 | -webkit-transform: translateY(-1px); 196 | } 197 | } 198 | 199 | 200 | .btn-group.select .btn{ 201 | text-align: left; 202 | } 203 | .btn-group.select .caret{ 204 | position: absolute; 205 | top: 50%; 206 | margin-top: -1px; 207 | right: 8px; 208 | } 209 | 210 | .btn-group .btn.active { 211 | box-shadow: 2px 2px 6px rgba(0,0,0,.4); 212 | transform: translateY(-1px); 213 | -webkit-transform: translateY(-1px); 214 | } 215 | 216 | .btn-round{ 217 | border-width: $border-thin; 218 | border-radius: $btn-round-radius; 219 | 220 | &.btn-simple{ 221 | padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; 222 | } 223 | } 224 | 225 | .no-caret { 226 | &.dropdown-toggle::after { 227 | display: none; 228 | } 229 | } 230 | 231 | .btn-secondary:not(:disabled):not(.disabled):active, 232 | .btn-secondary:not(:disabled):not(.disabled).active, 233 | .show > .btn-secondary.dropdown-toggle { 234 | color: $white; 235 | } 236 | 237 | .btn-group label.btn.active { 238 | transform: translateY(0); 239 | -webkit-transform: translateY(0); 240 | } 241 | 242 | // for sharing area 243 | 244 | .btn { 245 | &.btn-facebook { 246 | @include social-buttons-color($facebook, $facebook-states); 247 | } 248 | &.btn-twitter { 249 | @include social-buttons-color($twitter, $twitter-states); 250 | } 251 | &.btn-dribbble { 252 | @include social-buttons-color($dribbble, $dribbble-states); 253 | } 254 | &.btn-github { 255 | @include social-buttons-color($github, $github-states); 256 | } 257 | } 258 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | background: $card-black-background; 3 | border: 0; 4 | position: relative; 5 | width: 100%; 6 | margin-bottom: 30px; 7 | box-shadow: $box-shadow; 8 | 9 | 10 | label { 11 | color: rgba($white, 0.6); 12 | } 13 | 14 | .card-title { 15 | margin-bottom: .75rem; 16 | } 17 | 18 | .card-body { 19 | padding: 15px; 20 | 21 | &.table-full-width { 22 | padding-left: 0; 23 | padding-right: 0; 24 | } 25 | 26 | .card-title { 27 | color: $white; 28 | text-transform: inherit; 29 | font-weight: $font-weight-light; 30 | margin-bottom: .75rem; 31 | } 32 | 33 | .card-description, .card-category { 34 | color: rgba($white, 0.6); 35 | } 36 | 37 | } 38 | 39 | .card-header { 40 | &:not([data-background-color]) { 41 | background-color: transparent; 42 | } 43 | padding: 15px 15px 0; 44 | border: 0; 45 | color: rgba($white,0.8); 46 | 47 | .card-title{ 48 | color: $white; 49 | font-weight: 100; 50 | } 51 | 52 | .card-category { 53 | color: $dark-gray; 54 | margin-bottom: 5px; 55 | font-weight: 300; 56 | } 57 | } 58 | 59 | .map { 60 | border-radius: $border-radius-sm; 61 | 62 | &.map-big{ 63 | height: 420px; 64 | } 65 | } 66 | 67 | &.card-plain { 68 | background: transparent; 69 | box-shadow: none; 70 | } 71 | 72 | .image { 73 | overflow: hidden; 74 | height: 200px; 75 | position: relative; 76 | } 77 | 78 | .avatar { 79 | width: 30px; 80 | height: 30px; 81 | overflow: hidden; 82 | border-radius: 50%; 83 | margin-bottom: 15px; 84 | } 85 | 86 | label{ 87 | font-size: $font-size-sm; 88 | margin-bottom: 5px; 89 | 90 | } 91 | 92 | .card-footer{ 93 | background-color: transparent; 94 | border: 0; 95 | padding: 15px; 96 | 97 | 98 | .stats{ 99 | i{ 100 | margin-right: 5px; 101 | position: relative; 102 | 103 | } 104 | } 105 | 106 | h6{ 107 | margin-bottom: 0; 108 | padding: 7px 0; 109 | } 110 | } 111 | 112 | &.card-coin { 113 | border: 2px solid $default; 114 | 115 | .card-header { 116 | margin: -100px auto 20px; 117 | } 118 | 119 | img { 120 | width: 150px; 121 | } 122 | hr { 123 | width: 20%; 124 | margin-left: 40%; 125 | } 126 | .list-group { 127 | margin: 0 auto; 128 | text-align: center; 129 | 130 | .list-group-item { 131 | background-color: transparent; 132 | border: none; 133 | padding: .4rem 1rem; 134 | } 135 | } 136 | } 137 | } 138 | 139 | .card-body{ 140 | padding: $card-spacer-y; 141 | } 142 | 143 | @include media-breakpoint-down(sm) { 144 | .card.card-chart .card-header { 145 | .btn-group-toggle .tim-icons { 146 | font-size: .875rem; 147 | top: -1px; 148 | } 149 | } 150 | } 151 | 152 | @include media-breakpoint-down(xs) { 153 | .card.card-coin{ 154 | margin-top: 80px; 155 | } 156 | } 157 | 158 | 159 | .text-on-back{ 160 | position: relative; 161 | z-index: 1; 162 | font-size: 9.5em; 163 | margin-left: -4px; 164 | font-weight: 900; 165 | color: rgba(255, 255, 255, 0.2) !important; 166 | } 167 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_checkboxes-radio.scss: -------------------------------------------------------------------------------- 1 | .form-check{ 2 | margin-top: .5rem; 3 | padding-left: 0; 4 | } 5 | 6 | .form-check .form-check-label{ 7 | display: inline-block; 8 | position: relative; 9 | cursor: pointer; 10 | padding-left: 25px; 11 | line-height: 18px; 12 | margin-bottom: 0; 13 | -webkit-transition: color 0.3s linear; 14 | -moz-transition: color 0.3s linear; 15 | -o-transition: color 0.3s linear; 16 | -ms-transition: color 0.3s linear; 17 | transition: color 0.3s linear; 18 | color: $opacity-6 19 | } 20 | .radio .form-check-sign{ 21 | padding-left: 28px; 22 | } 23 | 24 | .form-check-radio.form-check-inline .form-check-label { 25 | padding-left: 5px; 26 | margin-right: 10px; 27 | } 28 | 29 | .form-check .form-check-sign::before, 30 | .form-check .form-check-sign::after{ 31 | content: " "; 32 | display: inline-block; 33 | position: absolute; 34 | width: 17px; 35 | height: 17px; 36 | left: 0; 37 | cursor: pointer; 38 | border-radius: 3px; 39 | top: 0; 40 | border: 1px solid darken($dark-gray,10%); 41 | -webkit-transition: opacity 0.3s linear; 42 | -moz-transition: opacity 0.3s linear; 43 | -o-transition: opacity 0.3s linear; 44 | -ms-transition: opacity 0.3s linear; 45 | transition: opacity 0.3s linear; 46 | } 47 | 48 | .form-check input[type="checkbox"]:checked + .form-check-sign::before, 49 | .form-check input[type="checkbox"]:checked + .form-check-sign::before{ 50 | border: none; 51 | background-color: $primary; 52 | } 53 | 54 | .form-check .form-check-sign::after{ 55 | font-family: 'nucleo'; 56 | content: "\ea1b"; 57 | top: 0px; 58 | text-align: center; 59 | font-size: 14px; 60 | opacity: 0; 61 | color: $white; 62 | font-weight: $font-weight-bold; 63 | border: 0; 64 | background-color: inherit; 65 | } 66 | 67 | .form-check.disabled .form-check-label, 68 | .form-check.disabled .form-check-label { 69 | color: $dark-gray; 70 | opacity: .5; 71 | cursor: not-allowed; 72 | } 73 | 74 | .form-check input[type="checkbox"], 75 | .radio input[type="radio"]{ 76 | opacity: 0; 77 | position: absolute; 78 | visibility: hidden; 79 | } 80 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{ 81 | opacity: 1; 82 | font-size: 10px; 83 | margin-top: 0; 84 | } 85 | 86 | 87 | .form-check input[type="checkbox"]+ .form-check-sign::after{ 88 | opacity: 0; 89 | font-size: 10px; 90 | margin-top: 0; 91 | } 92 | 93 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before, 94 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ 95 | cursor: not-allowed; 96 | } 97 | 98 | .form-check input[type="checkbox"]:disabled + .form-check-sign, 99 | .form-check input[type="radio"]:disabled + .form-check-sign{ 100 | pointer-events: none; 101 | } 102 | 103 | .form-check-radio .form-check-label{ 104 | padding-top: 3px; 105 | } 106 | .form-check-radio .form-check-sign::before, 107 | .form-check-radio .form-check-sign::after{ 108 | content: " "; 109 | width: 18px; 110 | height: 18px; 111 | border-radius: 50%; 112 | border: 1px solid darken($dark-gray,10%); 113 | display: inline-block; 114 | position: absolute; 115 | left: 0px; 116 | top: 3px; 117 | padding: 1px; 118 | -webkit-transition: opacity 0.3s linear; 119 | -moz-transition: opacity 0.3s linear; 120 | -o-transition: opacity 0.3s linear; 121 | -ms-transition: opacity 0.3s linear; 122 | transition: opacity 0.3s linear; 123 | } 124 | 125 | .form-check-radio input[type="radio"] + .form-check-sign:after, 126 | .form-check-radio input[type="radio"] { 127 | opacity: 0; 128 | } 129 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after { 130 | width: 6px; 131 | height: 6px; 132 | background-color: $primary; 133 | border-color: $primary; 134 | top: 9px; 135 | left: 6px; 136 | opacity: 1; 137 | } 138 | 139 | .form-check-radio input[type="radio"]:checked + .form-check-sign::before { 140 | border-color: $primary; 141 | } 142 | 143 | 144 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 145 | opacity: 1; 146 | } 147 | 148 | .form-check-radio input[type="radio"]:disabled + .form-check-sign { 149 | color: $dark-gray; 150 | } 151 | 152 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before, 153 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after { 154 | color: $dark-gray; 155 | } 156 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | padding: 50px 0; 3 | border-top: 2px solid #435DB5; 4 | background: radial-gradient(ellipse at bottom, #292D61 30%, $background-black 80%); 5 | 6 | [class*="container-"] { 7 | padding: 0; 8 | } 9 | 10 | .nav{ 11 | display: block; 12 | float: left; 13 | margin-bottom: 0; 14 | padding-top: 25px; 15 | list-style: none; 16 | } 17 | 18 | .nav-item { 19 | display: block; 20 | } 21 | 22 | .nav-link { 23 | color: $white; 24 | padding: 10px 0; 25 | font-size: $font-size-sm; 26 | text-transform: uppercase; 27 | text-decoration: none; 28 | 29 | &:hover{ 30 | text-decoration: none; 31 | } 32 | } 33 | 34 | .title { 35 | text-align: left !important; 36 | } 37 | 38 | .copyright{ 39 | font-size: $font-size-sm; 40 | line-height: 1.8; 41 | color: $white; 42 | } 43 | 44 | &:after{ 45 | display: table; 46 | clear: both; 47 | content: " "; 48 | } 49 | } 50 | 51 | 52 | @media screen and (max-width: 991px){ 53 | .footer { 54 | padding-left: 0px; 55 | 56 | .copyright { 57 | text-align: right; 58 | margin-right: 15px; 59 | } 60 | } 61 | } 62 | 63 | @media screen and (min-width: 992px){ 64 | .footer { 65 | .copyright { 66 | float: right; 67 | padding-right: 30px; 68 | } 69 | } 70 | } 71 | 72 | @media screen and (max-width: 768px){ 73 | .footer { 74 | nav { 75 | display: block; 76 | margin-bottom: 5px; 77 | float: none; 78 | } 79 | } 80 | } 81 | 82 | @media screen and (max-width: 576px){ 83 | .footer { 84 | text-align: center; 85 | .copyright { 86 | text-align: center; 87 | } 88 | 89 | .nav{ 90 | float: none; 91 | padding-left: 0; 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_forms.scss: -------------------------------------------------------------------------------- 1 | /* Form controls */ 2 | @include form-control-placeholder(#6c757c, 1); 3 | 4 | .form-control{ 5 | border-color: lighten($black,5%); 6 | border-radius: $border-radius-lg; 7 | font-size: $font-size-sm; 8 | @include transition-input-focus-color(); 9 | 10 | 11 | &:focus{ 12 | border-color: $primary; 13 | background-color: $input-bg; 14 | @include box-shadow(none); 15 | 16 | & + .input-group-append .input-group-text, 17 | & ~ .input-group-append .input-group-text, 18 | & + .input-group-prepend .input-group-text, 19 | & ~ .input-group-prepend .input-group-text{ 20 | border: 1px solid $primary; 21 | border-left: none; 22 | background-color: $transparent-bg; 23 | } 24 | } 25 | 26 | .has-success &, 27 | .has-error &, 28 | .has-success &:focus, 29 | .has-error &:focus{ 30 | @include box-shadow(none); 31 | } 32 | 33 | .has-danger &, 34 | .has-success &{ 35 | &.form-control-success, 36 | &.form-control-danger{ 37 | background-image: none; 38 | } 39 | } 40 | 41 | & + .form-control-feedback{ 42 | border-radius: $border-radius-lg; 43 | margin-top: -7px; 44 | position: absolute; 45 | right: 10px; 46 | top: 50%; 47 | vertical-align: middle; 48 | } 49 | 50 | .open &{ 51 | border-radius: $border-radius-lg $border-radius-lg 0 0; 52 | border-bottom-color: $transparent-bg; 53 | } 54 | 55 | } 56 | 57 | .has-success .input-group-append .input-group-text, 58 | .has-success .input-group-prepend .input-group-text, 59 | .has-success .form-control{ 60 | border-color: lighten($black,5%); 61 | } 62 | 63 | .has-success .form-control:focus, 64 | .has-success.input-group-focus .input-group-append .input-group-text, 65 | .has-success.input-group-focus .input-group-prepend .input-group-text{ 66 | border-color: darken($success, 10%); 67 | } 68 | 69 | .has-danger .form-control, 70 | .has-danger .input-group-append .input-group-text, 71 | .has-danger .input-group-prepend .input-group-text, 72 | .has-danger.input-group-focus .input-group-prepend .input-group-text, 73 | .has-danger.input-group-focus .input-group-append .input-group-text{ 74 | border-color: lighten($danger-states,5%); 75 | color: $danger-states; 76 | background-color: rgba(222,222,222, .1); 77 | 78 | &:focus{ 79 | background-color: $transparent-bg; 80 | } 81 | } 82 | 83 | .has-success, 84 | .has-danger{ 85 | &:after{ 86 | font-family: 'nucleo'; 87 | content: "\ea1b"; 88 | display: inline-block; 89 | position: absolute; 90 | right: 20px; 91 | top: 13px; 92 | color: $success; 93 | font-size: 11px; 94 | } 95 | 96 | &.form-control-lg{ 97 | &:after{ 98 | font-size: 13px; 99 | top: 24px; 100 | } 101 | } 102 | 103 | &.has-label{ 104 | &:after{ 105 | top: 37px; 106 | } 107 | } 108 | 109 | 110 | &.form-check:after{ 111 | display: none !important; 112 | } 113 | 114 | &.form-check .form-check-label{ 115 | color: $success; 116 | } 117 | } 118 | 119 | .has-danger{ 120 | &:after{ 121 | content: "\ea48"; 122 | color: $danger-states; 123 | } 124 | 125 | &.form-check .form-check-label{ 126 | color: $danger-states; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_functions.scss: -------------------------------------------------------------------------------- 1 | // Retrieve color Sass maps 2 | 3 | @function section-color($key: "primary") { 4 | @return map-get($section-colors, $key); 5 | } 6 | 7 | // Lines colors 8 | 9 | @function shapes-primary-color($key: "step-1-gradient-bg") { 10 | @return map-get($shapes-primary-colors, $key); 11 | } 12 | 13 | @function shapes-default-color($key: "step-1-gradient-bg") { 14 | @return map-get($shapes-default-colors, $key); 15 | } 16 | 17 | @function lines-light-color($key: "step-1-gradient-bg") { 18 | @return map-get($shapes-light-colors, $key); 19 | } 20 | 21 | @function shapes-dark-color($key: "step-1-gradient-bg") { 22 | @return map-get($shapes-dark-colors, $key); 23 | } -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_icons.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | width: $icon-size; 3 | height: $icon-size; 4 | 5 | i, svg { 6 | font-size: $icon-size - .75; 7 | } 8 | } 9 | 10 | .icon + .icon-text { 11 | padding-left: 1rem; 12 | // width: calc(100% - #{$icon-size} - 1); 13 | } 14 | 15 | .icon-xl { 16 | width: $icon-size-xl; 17 | height: $icon-size-xl; 18 | 19 | i, svg { 20 | font-size: $icon-size-xl - .75; 21 | } 22 | } 23 | 24 | .icon-xl + .icon-text { 25 | // width: calc(100% - #{$icon-size-xl} - 1); 26 | } 27 | 28 | .icon-lg { 29 | width: $icon-size-lg; 30 | height: $icon-size-lg; 31 | 32 | i, svg { 33 | font-size: $icon-size-lg - .75; 34 | } 35 | } 36 | 37 | .icon-lg + .icon-text { 38 | // width: calc(100% - #{$icon-size-lg} - 1); 39 | } 40 | 41 | .icon-sm { 42 | width: $icon-size-sm; 43 | height: $icon-size-sm; 44 | 45 | i, svg { 46 | font-size: $icon-size-sm - .75; 47 | } 48 | } 49 | 50 | .icon-sm + .icon-text { 51 | // width: calc(100% - #{$icon-size-sm} - 1); 52 | } 53 | 54 | 55 | // Icons included in shapes 56 | .icon-shape { 57 | padding: 12px; 58 | text-align: center; 59 | display: inline-flex; 60 | align-items: center; 61 | justify-content: center; 62 | border-radius: 50%; 63 | 64 | 65 | i, svg { 66 | font-size: 1.25rem; 67 | } 68 | 69 | &.icon-lg { 70 | i, svg { 71 | font-size: 1.625rem; 72 | } 73 | } 74 | 75 | &.icon-sm { 76 | i, svg { 77 | font-size: .875rem; 78 | } 79 | } 80 | 81 | svg { 82 | width: 30px; 83 | height: 30px; 84 | } 85 | 86 | } 87 | 88 | @each $color, $value in $theme-colors { 89 | .icon-shape-#{$color} { 90 | @include icon-shape-variant(theme-color($color)); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_images.scss: -------------------------------------------------------------------------------- 1 | img{ 2 | max-width: 100%; 3 | border-radius: $border-radius-sm; 4 | } 5 | .img-raised{ 6 | box-shadow: $box-shadow-raised; 7 | } 8 | 9 | .img-center { 10 | display: block; 11 | margin-right: auto; 12 | margin-left: auto; 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_info-areas.scss: -------------------------------------------------------------------------------- 1 | .info{ 2 | max-width: 360px; 3 | margin: 0 auto; 4 | padding: 70px 0 30px; 5 | 6 | .icon{ 7 | color: $default; 8 | 9 | > i{ 10 | font-size: $h1-font-size; 11 | } 12 | } 13 | .info-title{ 14 | color: $white; 15 | margin: 0.875rem * 2 0 0.875rem; 16 | } 17 | p{ 18 | color: $opacity-gray-8; 19 | line-height: 24px; 20 | } 21 | } 22 | 23 | hr { 24 | width: 10%; 25 | height: 1px; 26 | border-radius: 3px; 27 | margin-left: 0; 28 | 29 | &.line-primary { 30 | background-color: $primary; 31 | } 32 | &.line-info { 33 | background-color: $info; 34 | } 35 | &.line-success { 36 | background-color: $success; 37 | } 38 | &.line-warning { 39 | background-color: $warning; 40 | } 41 | &.line-danger { 42 | background-color: $danger; 43 | } 44 | &.line-deafult { 45 | background-color: $default; 46 | } 47 | } 48 | 49 | .info-horizontal{ 50 | .icon{ 51 | float: left; 52 | margin-top: 24px; 53 | margin-right: 10px; 54 | 55 | >i{ 56 | font-size: $h1-font-size; 57 | } 58 | } 59 | .description{ 60 | overflow: hidden; 61 | } 62 | 63 | } 64 | 65 | .icon { 66 | &.icon-primary { 67 | color: $primary; 68 | } 69 | &.icon-info { 70 | color: $info; 71 | } 72 | &.icon-success { 73 | color: $success; 74 | } 75 | &.icon-warning { 76 | color: $warning; 77 | } 78 | &.icon-danger { 79 | color: $danger; 80 | } 81 | 82 | } 83 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_misc.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Animations */ 3 | .nav-pills .nav-link, 4 | .navbar, 5 | .nav-tabs .nav-link, 6 | .sidebar .nav a, 7 | .sidebar .nav a i, 8 | .sidebar .nav p, 9 | .navbar-collapse .navbar-nav .nav-link, 10 | .animation-transition-general, 11 | .tag, 12 | .tag [data-role="remove"], 13 | .animation-transition-general{ 14 | @include transitions($general-transition-time, $transition-ease); 15 | } 16 | 17 | //transition for dropdown caret 18 | .bootstrap-switch-label:before, 19 | .caret{ 20 | @include transitions($fast-transition-time, $transition-ease); 21 | } 22 | 23 | .dropdown-toggle[aria-expanded="true"]:after, 24 | a[data-toggle="collapse"][aria-expanded="true"] .caret, 25 | .card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i, 26 | .card-collapse .card a[data-toggle="collapse"].expanded i{ 27 | @include rotate-180(); 28 | } 29 | 30 | .caret{ 31 | width: 0; 32 | height: 0; 33 | vertical-align: middle; 34 | border-top: 4px dashed; 35 | border-right: 4px solid transparent; 36 | border-left: 4px solid transparent; 37 | margin-top: -5px; 38 | position: absolute; 39 | top: 30px; 40 | margin-left: 5px; 41 | } 42 | 43 | .pull-left{ 44 | float: left; 45 | } 46 | .pull-right{ 47 | float: right; 48 | } 49 | 50 | 51 | // card user profile page 52 | 53 | .card { 54 | form { 55 | label + .form-control { 56 | margin-bottom: 20px; 57 | } 58 | } 59 | } 60 | 61 | .card { 62 | .map-title { 63 | color: $white; 64 | } 65 | 66 | &.card-chart { 67 | .gmnoprint, 68 | .gm-style-cc { 69 | display: none !important; 70 | } 71 | } 72 | } 73 | 74 | // documentation 75 | 76 | .bd-docs { 77 | 78 | h1,h2,h3,h4,h5,h6,p,ul li,ol li{ 79 | color:#2c2c2c; 80 | } 81 | 82 | 83 | .bd-content>table>thead>tr>th { 84 | color: $black; 85 | 86 | } 87 | 88 | .blockquote, .blockquote p, .card p{ 89 | color: rgba($white,0.8); 90 | } 91 | .bd-example { 92 | background: linear-gradient(#1e1e2f,#1e1e24); 93 | 94 | } 95 | 96 | .navbar { 97 | border-top: none; 98 | 99 | .navbar-nav .nav-link { 100 | color: rgba(255,255,255,.8) !important; 101 | } 102 | } 103 | 104 | .bd-example { 105 | 106 | .btn{ 107 | margin: 4px 0; 108 | } 109 | .btn .badge { 110 | display: inline-block; 111 | } 112 | 113 | .tim-icons{ 114 | color: $white; 115 | } 116 | 117 | .popover .popover-header { 118 | color: hsla(0,0%,71%,.6); 119 | } 120 | 121 | 122 | .popover-body { 123 | p { 124 | color: $gray-900; 125 | } 126 | } 127 | 128 | &.tooltip-demo p{ 129 | color: rgba($white,.8); 130 | } 131 | } 132 | 133 | .card.card-body, 134 | .card .card-body { 135 | color: hsla(0,0%,100%,.8); 136 | } 137 | 138 | label, 139 | .form-check { 140 | color: hsla(0,0%,100%,.8); 141 | } 142 | 143 | .form-check + .btn { 144 | margin-top: 20px; 145 | } 146 | 147 | .bd-example, 148 | table { 149 | thead th { 150 | color: hsla(0,0%,100%,.8); 151 | } 152 | 153 | h1, h2, h3, h4, h5, h6, 154 | .h1, .h2, .h3, .h4, .h5, .h6 { 155 | color: hsla(0,0%,100%,.8); 156 | } 157 | 158 | .datepicker{ 159 | thead th, table thead th,.tim-icons{ 160 | color: $primary; 161 | } 162 | 163 | } 164 | 165 | .picker-switch .tim-icons{ 166 | color: $primary; 167 | } 168 | } 169 | 170 | .footer { 171 | .container-fluid > nav { 172 | display: inline-block; 173 | } 174 | } 175 | } 176 | .modal.show .modal-dialog { 177 | -webkit-transform: translate(0,30%); 178 | transform: translate(0,30%); 179 | } 180 | 181 | code { 182 | color: $pink; 183 | } 184 | 185 | // iFrame News 186 | 187 | .ct-widget.ct-widget_theme_dark{ 188 | background: transparent !important; 189 | } 190 | 191 | @media screen and (max-width: 991px){ 192 | .profile-photo .profile-photo-small{ 193 | margin-left: -2px; 194 | } 195 | 196 | .button-dropdown{ 197 | display: none; 198 | } 199 | 200 | #searchModal .modal-dialog{ 201 | margin: 20px; 202 | } 203 | 204 | #minimizeSidebar{ 205 | display: none; 206 | } 207 | 208 | } 209 | 210 | 211 | @media screen and (max-width: 768px){ 212 | 213 | .landing-page .section-story-overview .image-container:nth-child(2){ 214 | margin-left: 0; 215 | margin-bottom: 30px; 216 | } 217 | 218 | } 219 | 220 | @media screen and (max-width: 576px){ 221 | .page-header{ 222 | .container h6.category-absolute{ 223 | width: 90%; 224 | } 225 | } 226 | 227 | .form-horizontal .col-form-label, .form-horizontal .label-on-right{ 228 | text-align: inherit; 229 | padding-top: 0; 230 | code{ 231 | padding: 0 10px; 232 | } 233 | } 234 | 235 | } 236 | 237 | .profile-page { 238 | .btcwdgt { 239 | background-color: $background-black !important; 240 | 241 | .btcwdgt-header { 242 | background-color: transparent!important; 243 | } 244 | } 245 | .btcwdgt-headlines .btcwdgt-body ul li:nth-child(2n) { 246 | background-color: #2a2f63 !important; 247 | } 248 | } 249 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/alert.scss"; 2 | @import "mixins/badges.scss"; 3 | @import "mixins/background-variant.scss"; 4 | @import "mixins/buttons.scss"; 5 | @import "mixins/forms.scss"; 6 | @import "mixins/icon.scss"; 7 | @import "mixins/modals.scss"; 8 | @import "mixins/popovers.scss"; 9 | @import "mixins/page-header.scss"; 10 | @import "mixins/vendor-prefixes.scss"; 11 | @import "mixins/opacity.scss"; 12 | @import "mixins/modals.scss"; 13 | @import "mixins/inputs.scss"; 14 | @import "mixins/dropdown.scss"; 15 | @import "mixins/wizard.scss"; 16 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_modal.scss: -------------------------------------------------------------------------------- 1 | // Modals 2 | // Design element Dialogs 3 | // -------------------------------------------------- 4 | .modal-content { 5 | border: 0; 6 | 7 | // Modal header 8 | // Top section of the modal w/ title and dismiss 9 | 10 | .modal-header { 11 | border-bottom: none; 12 | 13 | & button { 14 | position: absolute; 15 | right: 27px; 16 | top: 24px; 17 | outline: 0; 18 | padding: 1rem; 19 | margin: -1rem -1rem -1rem auto; 20 | } 21 | .title{ 22 | color: $black; 23 | margin-top: 5px; 24 | margin-bottom: 0; 25 | } 26 | 27 | .modal-title{ 28 | color: $black; 29 | } 30 | 31 | i.tim-icons { 32 | font-size: 16px; 33 | } 34 | .modal-profile{ 35 | width: 70px; 36 | height: 70px; 37 | background-color: $white; 38 | border-radius: 50%; 39 | text-align: center; 40 | line-height: 5.7; 41 | box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3); 42 | 43 | i{ 44 | color: $primary; 45 | font-size: 21px; 46 | margin-top: -10px; 47 | } 48 | 49 | &[class*="modal-profile-"]{ 50 | i{ 51 | color: $white; 52 | } 53 | } 54 | 55 | &.modal-profile-primary{ 56 | background-color: $primary; 57 | } 58 | 59 | &.modal-profile-danger{ 60 | background-color: $danger; 61 | } 62 | 63 | &.modal-profile-warning{ 64 | background-color: $warning; 65 | } 66 | &.modal-profile-success{ 67 | background-color: $success; 68 | } 69 | 70 | &.modal-profile-info{ 71 | background-color: $info; 72 | } 73 | } 74 | } 75 | 76 | 77 | // Modal body 78 | // Where all modal content resides (sibling of .modal-header and .modal-footer) 79 | .modal-body { 80 | line-height: 1.9; 81 | 82 | p{ 83 | color: $black; 84 | } 85 | 86 | form .form-check { 87 | padding-left: 19px; 88 | 89 | .form-check-label { 90 | padding-left: 35px; 91 | } 92 | } 93 | 94 | img{ 95 | padding: 10px; 96 | } 97 | } 98 | // Footer (for actions) 99 | .modal-footer { 100 | border-top: 0; 101 | -webkit-justify-content: space-between; /* Safari 6.1+ */ 102 | justify-content: space-between; 103 | 104 | button { 105 | margin: 0; 106 | padding-left: 16px; 107 | padding-right: 16px; 108 | width: auto; 109 | 110 | &.pull-left { 111 | padding-left: 5px; 112 | padding-right: 5px; 113 | position: relative; 114 | left: -5px; 115 | } 116 | } 117 | 118 | } 119 | .modal-body + .modal-footer { 120 | padding-top: 0; 121 | } 122 | } 123 | .modal-backdrop { 124 | background: rgba(0,0,0,0.3); 125 | } 126 | 127 | .modal{ 128 | 129 | &.modal-default{ 130 | @include modal-colors($white, $black); 131 | } 132 | 133 | &.modal-primary{ 134 | @include modal-colors($primary, $white); 135 | } 136 | 137 | &.modal-danger{ 138 | @include modal-colors($danger, $white); 139 | } 140 | 141 | &.modal-warning{ 142 | @include modal-colors($warning, $white); 143 | } 144 | 145 | &.modal-success{ 146 | @include modal-colors($success, $white); 147 | } 148 | 149 | &.modal-info{ 150 | @include modal-colors($info, $white); 151 | } 152 | 153 | .modal-header .close{ 154 | color: $danger; 155 | text-shadow: none; 156 | 157 | &:hover, 158 | &:focus{ 159 | opacity: 1; 160 | } 161 | } 162 | 163 | &.modal-mini{ 164 | p{ 165 | text-align: center; 166 | } 167 | 168 | .modal-dialog{ 169 | max-width: 255px; 170 | margin: 0 auto; 171 | 172 | 173 | } 174 | 175 | &.show .modal-dialog{ 176 | -webkit-transform: translate(0,30%); 177 | -o-transform: translate(0,30%); 178 | transform: translate(0,30%); 179 | } 180 | 181 | 182 | .modal-footer{ 183 | button{ 184 | text-transform: uppercase; 185 | color: $white; 186 | 187 | &:first-child{ 188 | opacity: .5; 189 | } 190 | } 191 | } 192 | } 193 | 194 | &.modal-black{ 195 | .modal-content{ 196 | background: $card-black-background; 197 | color: rgba($white, 0.8); 198 | .modal-header{ 199 | .modal-title, .title{ 200 | color: rgba($white, 0.9); 201 | } 202 | } 203 | .modal-body{ 204 | p{ 205 | color: rgba($white, 0.8); 206 | } 207 | } 208 | } 209 | h1, h2, h3, h4, h5, h6, p{ 210 | color: $white; 211 | } 212 | } 213 | } 214 | 215 | .modal-search{ 216 | .modal-dialog{ 217 | margin: 20px auto; 218 | max-width: 650px; 219 | input{ 220 | border: none; 221 | font-size: 17px; 222 | font-weight: 100; 223 | } 224 | span{ 225 | font-size: 35px; 226 | color: $search-gray; 227 | } 228 | } 229 | .modal-content{ 230 | .modal-header{ 231 | padding: 24px; 232 | } 233 | } 234 | 235 | .modal-header .close{ 236 | color: $dark-background; 237 | top: 30px !important; 238 | } 239 | 240 | .modal-footer{ 241 | border-top: 2px solid #f9f9f9; 242 | margin: 0px 25px 20px; 243 | } 244 | } 245 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | .page-item .page-link { 3 | border: 0; 4 | border-radius: 30px !important; 5 | transition: all .3s; 6 | margin: 0 3px; 7 | min-width: 30px; 8 | text-align: center; 9 | height: 30px; 10 | line-height: 30px; 11 | cursor: pointer; 12 | text-transform: uppercase; 13 | outline: none; 14 | 15 | &:hover, 16 | &:focus { 17 | background-color: rgba($white, 0.1); 18 | color: $white; 19 | border: none; 20 | box-shadow: none; 21 | } 22 | } 23 | 24 | .arrow-margin-left, 25 | .arrow-margin-right { 26 | position: absolute; 27 | } 28 | 29 | .arrow-margin-right { 30 | right: 0; 31 | } 32 | 33 | .arrow-margin-left { 34 | left: 0; 35 | } 36 | 37 | .page-item.active > .page-link { 38 | color: $white; 39 | box-shadow: $box-shadow; 40 | 41 | &, 42 | &:focus, 43 | &:hover{ 44 | @include diagonal-gradient($primary, $primary-states); 45 | 46 | color: $white; 47 | } 48 | } 49 | 50 | .page-item.disabled > .page-link{ 51 | opacity: .5; 52 | } 53 | 54 | // Colors 55 | &.pagination-info{ 56 | .page-item.active > .page-link{ 57 | &, 58 | &:focus, 59 | &:hover{ 60 | @include diagonal-gradient($info, $info-states); 61 | } 62 | } 63 | } 64 | 65 | &.pagination-success{ 66 | .page-item.active > .page-link{ 67 | &, 68 | &:focus, 69 | &:hover{ 70 | @include diagonal-gradient($success, $success-states); 71 | } 72 | } 73 | } 74 | 75 | &.pagination-primary{ 76 | .page-item.active > .page-link{ 77 | &, 78 | &:focus, 79 | &:hover{ 80 | @include diagonal-gradient($primary, $primary-states); 81 | 82 | } 83 | } 84 | } 85 | 86 | &.pagination-warning{ 87 | .page-item.active > .page-link{ 88 | &, 89 | &:focus, 90 | &:hover{ 91 | @include diagonal-gradient($warning, $warning-states); 92 | 93 | } 94 | } 95 | } 96 | 97 | &.pagination-danger{ 98 | .page-item.active > .page-link{ 99 | &, 100 | &:focus, 101 | &:hover{ 102 | @include diagonal-gradient($danger, $danger-states); 103 | 104 | } 105 | } 106 | } 107 | 108 | &.pagination-neutral{ 109 | .page-item > .page-link{ 110 | color: $white; 111 | 112 | &:focus, 113 | &:hover{ 114 | background-color: $opacity-2; 115 | color: $white; 116 | } 117 | } 118 | 119 | .page-item.active > .page-link{ 120 | &, 121 | &:focus, 122 | &:hover{ 123 | background-color: $white; 124 | border-color: $white; 125 | color: $brand-primary; 126 | } 127 | } 128 | } 129 | 130 | } 131 | 132 | @include media-breakpoint-down(sm){ 133 | div.dataTables_paginate ul.pagination { 134 | .page-item:first-of-type, 135 | .page-item:nth-of-type(2), 136 | .page-item:nth-of-type(8), 137 | .page-item:last-of-type { 138 | display: none !important; 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_pills.scss: -------------------------------------------------------------------------------- 1 | .nav-pills { 2 | 3 | &.flex-column li > a { 4 | margin-bottom: 15px; 5 | } 6 | 7 | &.nav-pills:not(.flex-column) .nav-item:not(:last-child) .nav-link { 8 | margin-right: 10px; 9 | margin-bottom: 5px; 10 | } 11 | 12 | &:not(.nav-pills-icons):not(.nav-pills-just-icons) .nav-item .nav-link { 13 | border-radius: $btn-round-radius; 14 | } 15 | 16 | &.nav-pills-just-icons .nav-item .nav-link { 17 | border-radius: 50%; 18 | height: 80px; 19 | max-width: 80px; 20 | min-width: auto; 21 | padding: 0; 22 | width: 80px; 23 | 24 | .tim-icons { 25 | font-size: 24px; 26 | line-height: 80px; 27 | } 28 | } 29 | 30 | .nav-item { 31 | .nav-link{ 32 | padding: 0 15.5px; 33 | text-align: center; 34 | padding: $padding-btn-vertical $padding-round-horizontal; 35 | min-width: 100px; 36 | font-weight: $font-weight-normal; 37 | color: rgba($white,0.5); 38 | background-color: $card-black-background; 39 | 40 | 41 | &:hover{ 42 | background-color: darken($card-black-background,5%); 43 | } 44 | 45 | &.active{ 46 | &, 47 | &:focus, 48 | &:hover{ 49 | background-color: $dark-gray; 50 | color: $white; 51 | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); 52 | } 53 | } 54 | 55 | &.disabled, 56 | &:disabled, 57 | &[disabled]{ 58 | opacity: .5; 59 | } 60 | } 61 | 62 | i{ 63 | display: block; 64 | font-size: 24px; 65 | line-height: 60px; 66 | } 67 | } 68 | 69 | &.nav-pills-neutral{ 70 | .nav-item { 71 | .nav-link{ 72 | background-color: $opacity-2; 73 | color: $white; 74 | 75 | &.active{ 76 | &, 77 | &:focus, 78 | &:hover{ 79 | background-color: $white; 80 | color: $primary; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | 87 | &.nav-pills-primary{ 88 | .nav-item { 89 | .nav-link.active{ 90 | &, 91 | &:focus, 92 | &:hover{ 93 | @include diagonal-gradient($primary, $primary-states); 94 | } 95 | } 96 | } 97 | } 98 | 99 | &.nav-pills-info{ 100 | .nav-item { 101 | .nav-link.active{ 102 | &, 103 | &:focus, 104 | &:hover{ 105 | @include diagonal-gradient($info, $info-states); 106 | } 107 | } 108 | } 109 | } 110 | 111 | &.nav-pills-success{ 112 | .nav-item { 113 | .nav-link.active{ 114 | &, 115 | &:focus, 116 | &:hover{ 117 | @include diagonal-gradient($success, $success-states); 118 | } 119 | } 120 | } 121 | } 122 | 123 | &.nav-pills-warning{ 124 | .nav-item { 125 | .nav-link.active{ 126 | &, 127 | &:focus, 128 | &:hover{ 129 | @include diagonal-gradient($warning, $warning-states); 130 | } 131 | } 132 | } 133 | } 134 | 135 | &.nav-pills-danger{ 136 | .nav-item { 137 | .nav-link.active{ 138 | &, 139 | &:focus, 140 | &:hover{ 141 | @include diagonal-gradient($danger, $danger-states); 142 | } 143 | } 144 | } 145 | } 146 | } 147 | .tab-space{ 148 | padding: 20px 0 50px 0px; 149 | } 150 | 151 | .tab-content{ 152 | &.tab-subcategories{ 153 | margin-top: 20px; 154 | background-color: $transparent-bg; 155 | padding-left: 15px; 156 | padding-right: 15px; 157 | } 158 | .tab-pane{ 159 | color: rgba($white,0.5); 160 | } 161 | } 162 | 163 | .nav-align-center{ 164 | text-align: center; 165 | 166 | .nav-pills{ 167 | display: inline-flex; 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_progress.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | .progress-container{ 3 | position: relative; 4 | 5 | &.progress-sm { 6 | margin-top: 10px; 7 | 8 | .progress { 9 | .progress-value{ 10 | position: absolute; 11 | top: -3px; 12 | left: -27px; 13 | color: $white; 14 | font-size: $font-size-xs; 15 | } 16 | } 17 | } 18 | 19 | & + .progress-container, 20 | & ~ .progress-container{ 21 | margin-top: $margin-base-vertical; 22 | } 23 | .progress-badge{ 24 | color: $white; 25 | font-size: $font-size-sm; 26 | text-transform: uppercase; 27 | 28 | &.float-left{ 29 | margin-right: 20px; 30 | } 31 | 32 | } 33 | 34 | .progress { 35 | margin: 10px 0; 36 | box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3); 37 | 38 | .progress-bar { 39 | border-radius:$border-radius-xl; 40 | box-shadow: none; 41 | background: $card-black-background; 42 | 43 | .progress-value{ 44 | position: absolute; 45 | top: 2px; 46 | right: 0; 47 | color: $white; 48 | font-size: $font-size-xs; 49 | } 50 | } 51 | 52 | &.progress-bar-sm{ 53 | height: 3px; 54 | } 55 | } 56 | 57 | &.progress-neutral{ 58 | .progress{ 59 | background: rgba(255, 255, 255, .3); 60 | } 61 | 62 | .progress-bar{ 63 | background: $white; 64 | } 65 | } 66 | 67 | &.progress-primary{ 68 | .progress-bar{ 69 | @include diagonal-gradient($primary-states, $primary); 70 | } 71 | } 72 | 73 | &.progress-info{ 74 | .progress-bar{ 75 | @include diagonal-gradient($info-states, $info); 76 | } 77 | } 78 | 79 | &.progress-success{ 80 | .progress-bar{ 81 | @include diagonal-gradient($success-states, $success); 82 | } 83 | } 84 | 85 | &.progress-warning{ 86 | .progress-bar{ 87 | @include diagonal-gradient($warning-states, $warning); 88 | } 89 | } 90 | 91 | &.progress-danger{ 92 | .progress-bar{ 93 | @include diagonal-gradient($danger-states, $danger); 94 | } 95 | } 96 | } 97 | 98 | .card-chart { 99 | .progress-container+.progress-container, 100 | .progress-container~.progress-container { 101 | margin-top: 25px; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_rtl.scss: -------------------------------------------------------------------------------- 1 | .rtl { 2 | .sidebar, 3 | .bootstrap-navbar{ 4 | right: 0; 5 | left: auto; 6 | margin-right: 20px; 7 | margin-left: 0; 8 | 9 | .nav{ 10 | i{ 11 | float: right; 12 | margin-left: 15px; 13 | margin-right: 0; 14 | } 15 | 16 | p{ 17 | margin-right: 45px; 18 | text-align: right; 19 | } 20 | 21 | .caret{ 22 | left: 11px; 23 | right: auto; 24 | } 25 | } 26 | 27 | .logo{ 28 | a.logo-mini{ 29 | float: right; 30 | margin-right: 20px; 31 | margin-left: 10px; 32 | } 33 | 34 | .simple-text{ 35 | text-align: right; 36 | } 37 | } 38 | 39 | .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, 40 | .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{ 41 | float: right; 42 | margin-left: 15px; 43 | margin-right: 0; 44 | } 45 | 46 | .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, 47 | .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal{ 48 | text-align: right; 49 | } 50 | 51 | &:before{ 52 | right: 30px; 53 | left: auto; 54 | } 55 | } 56 | 57 | .main-panel .content{ 58 | padding: 80px 280px 30px 30px; 59 | } 60 | 61 | .footer{ 62 | padding: 24px 300px 24px 0; 63 | } 64 | 65 | .dropdown-toggle:after{ 66 | margin-right: .255em; 67 | margin-left: 0; 68 | } 69 | 70 | .dropdown-menu.dropdown-menu-right.dropdown-navbar{ 71 | right: -220px !important; 72 | left: auto; 73 | 74 | &:before{ 75 | right: auto; 76 | left: 35px; 77 | } 78 | } 79 | 80 | .notification{ 81 | left: 40px; 82 | right: auto; 83 | } 84 | 85 | .dropdown-menu{ 86 | right: auto; 87 | left: 0; 88 | } 89 | 90 | 91 | .minimize-sidebar{ 92 | float: right; 93 | } 94 | 95 | .alert{ 96 | left: 0; 97 | margin-left: 0; 98 | margin-right: 0; 99 | button.close{ 100 | left: 10px !important; 101 | right: auto !important; 102 | } 103 | 104 | span[data-notify="icon"]{ 105 | right: 15px; 106 | left: auto; 107 | } 108 | 109 | 110 | 111 | &.alert-with-icon{ 112 | padding-right: 65px; 113 | padding-left: 15px; 114 | } 115 | 116 | &.alert-with-icon i[data-notify="icon"]{ 117 | right: 15px; 118 | left: auto; 119 | } 120 | } 121 | 122 | .search-bar{ 123 | margin-left: 0; 124 | } 125 | 126 | .modal-search .modal-header .close{ 127 | margin-right: auto; 128 | left: 10px; 129 | } 130 | 131 | 132 | @media (min-width: 991px){ 133 | &.sidebar-mini .main-panel .content { 134 | padding-right: 130px; 135 | padding-left: 50px; 136 | } 137 | 138 | &.sidebar-mini footer{ 139 | padding-right: 130px; 140 | padding-left: 50px; 141 | } 142 | 143 | .navbar-minimize button{ 144 | margin-right: -5px; 145 | } 146 | } 147 | 148 | 149 | 150 | @media screen and (max-width: 991px){ 151 | 152 | .sidebar{ 153 | margin-right: 0; 154 | } 155 | .main-panel .content{ 156 | padding-right: 50px; 157 | } 158 | 159 | #bodyClick{ 160 | right: 260px; 161 | left: auto; 162 | } 163 | 164 | .footer{ 165 | padding-right: 15px; 166 | } 167 | } 168 | 169 | .navbar { 170 | .navbar-nav { 171 | padding-right: 0; 172 | a.nav-link { 173 | text-align: right; 174 | p{ 175 | margin-right: 7px; 176 | } 177 | } 178 | 179 | .btn { 180 | margin-right: 0; 181 | padding: 0; 182 | i{ 183 | margin-left: 4px; 184 | margin-right: 5px; 185 | } 186 | } 187 | 188 | .search-bar span{ 189 | margin-right: 10px; 190 | } 191 | } 192 | } 193 | 194 | .ps__rail-y { 195 | right: auto !important; 196 | left: 0; 197 | } 198 | 199 | .main-panel { 200 | position: fixed; 201 | height: 100%; 202 | overflow-y: scroll; 203 | overflow-x: hidden; 204 | } 205 | } 206 | 207 | 208 | @media screen and (max-width: 768px){ 209 | 210 | .rtl .main-panel .content{ 211 | padding-left: 15px; 212 | padding-right: 15px; 213 | } 214 | 215 | } 216 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | > tbody > tr > td { 3 | color: rgba(255, 255, 255, 0.7) !important; 4 | 5 | .photo { 6 | height: 30px; 7 | width: 30px; 8 | border-radius: 50%; 9 | overflow: hidden; 10 | margin: 0 auto; 11 | 12 | img { 13 | width: 100%; 14 | } 15 | } 16 | } 17 | 18 | > tbody > tr.table-success > td{ 19 | background-color: darken($success,10%); 20 | } 21 | 22 | > tbody > tr.table-info > td{ 23 | background-color: $info; 24 | } 25 | 26 | > tbody > tr.table-primary > td{ 27 | background-color: $primary; 28 | } 29 | 30 | > tbody > tr.table-warning > td{ 31 | background-color: $warning; 32 | } 33 | > tbody > tr.table-danger > td{ 34 | background-color: $danger; 35 | } 36 | 37 | .img-wrapper{ 38 | width: 40px; 39 | height: 40px; 40 | border-radius: 50%; 41 | overflow: hidden; 42 | margin: 0 auto; 43 | } 44 | 45 | .img-row{ 46 | max-width: 60px; 47 | width: 60px; 48 | } 49 | 50 | .form-check{ 51 | margin: 0; 52 | margin-top: 5px; 53 | 54 | & label .form-check-sign::before, 55 | & label .form-check-sign::after{ 56 | top: -17px; 57 | left: 4px; 58 | } 59 | } 60 | 61 | .btn{ 62 | margin: 0; 63 | } 64 | 65 | small,.small{ 66 | font-weight: 300; 67 | } 68 | 69 | .card-tasks .card-body &{ 70 | margin-bottom: 0; 71 | 72 | > thead > tr > th, 73 | > tbody > tr > th, 74 | > tfoot > tr > th, 75 | > thead > tr > td, 76 | > tbody > tr > td, 77 | > tfoot > tr > td{ 78 | padding-top: 5px; 79 | padding-bottom: 5px; 80 | } 81 | } 82 | 83 | > thead > tr > th{ 84 | border-bottom-width: 1px; 85 | font-size: 12px; 86 | text-transform: uppercase; 87 | font-weight: $font-weight-extra-bold; 88 | border: 0; 89 | color: rgba($white, 0.7); 90 | } 91 | 92 | .radio, 93 | .checkbox{ 94 | margin-top: 0; 95 | margin-bottom: 0; 96 | padding: 0; 97 | width: 15px; 98 | 99 | .icons{ 100 | position: relative; 101 | } 102 | 103 | label{ 104 | &:after, 105 | &:before{ 106 | top: -17px; 107 | left: -3px; 108 | } 109 | } 110 | } 111 | > thead > tr > th, 112 | > tbody > tr > th, 113 | > tfoot > tr > th, 114 | > thead > tr > td, 115 | > tbody > tr > td, 116 | > tfoot > tr > td{ 117 | border-color: rgba(255, 255, 255, 0.1); 118 | padding: 12px 7px; 119 | vertical-align: middle; 120 | } 121 | 122 | &.table-shopping tbody tr:last-child td{ 123 | border: none; 124 | } 125 | 126 | .th-description{ 127 | max-width: 150px; 128 | } 129 | .td-price{ 130 | font-size: 26px; 131 | font-weight: $font-weight-light; 132 | margin-top: 5px; 133 | position: relative; 134 | top: 4px; 135 | text-align: right; 136 | } 137 | .td-total{ 138 | font-weight: $font-weight-bold; 139 | font-size: $h5-font-size; 140 | padding-top: 20px; 141 | text-align: right; 142 | } 143 | 144 | .td-actions .btn{ 145 | margin: 0px; 146 | } 147 | 148 | > tbody > tr{ 149 | position: relative; 150 | } 151 | 152 | > tfoot > tr { 153 | color: hsla(0,0%,100%,.7); 154 | text-transform: uppercase; 155 | } 156 | } 157 | 158 | .table-responsive{ 159 | overflow: scroll; 160 | padding-bottom: 10px; 161 | } 162 | 163 | #tables .table-responsive{ 164 | margin-bottom: 30px; 165 | } 166 | 167 | // datatables 168 | 169 | .dataTables_wrapper { 170 | .table-striped tbody tr:nth-of-type(odd) { 171 | background-color: rgba(0,0,0,.05); 172 | } 173 | 174 | .form-control-sm { 175 | font-size: 10px; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_tabs.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | 3 | .nav-tabs { 4 | border: 0; 5 | padding: $padding-base-vertical $padding-base-horizontal; 6 | 7 | > .nav-item{ 8 | > .nav-link{ 9 | color: $white; 10 | margin: 0; 11 | margin-right: 5px; 12 | background-color: $transparent-bg; 13 | border-radius: 30px; 14 | padding: $padding-btn-vertical $padding-round-horizontal; 15 | line-height: $line-height-sm; 16 | 17 | &:hover { 18 | background-color: $transparent-bg; 19 | border: 1px solid darken($black,5%); 20 | color: rgba($white, 0.8); 21 | } 22 | 23 | &.active{ 24 | border: 1px solid $white; 25 | border-radius: 30px; 26 | } 27 | 28 | i.tim-icons{ 29 | font-size: 14px; 30 | position: relative; 31 | top: -1px; 32 | margin-right: 3px; 33 | } 34 | } 35 | 36 | &.disabled > .nav-link, 37 | &.disabled > .nav-link:hover { 38 | color: rgba(255,255,255,0.5); 39 | } 40 | } 41 | 42 | &.nav-tabs-neutral{ 43 | > .nav-item{ 44 | > .nav-link{ 45 | color: $white; 46 | 47 | &.active{ 48 | border-color: $opacity-5; 49 | color: $white; 50 | } 51 | } 52 | } 53 | } 54 | 55 | &.nav-tabs-primary{ 56 | > .nav-item{ 57 | > .nav-link{ 58 | &.active{ 59 | border-color: $primary; 60 | color: $primary; 61 | } 62 | } 63 | } 64 | } 65 | 66 | &.nav-tabs-info{ 67 | > .nav-item{ 68 | > .nav-link{ 69 | &.active{ 70 | border-color: $info; 71 | color: $info; 72 | } 73 | } 74 | } 75 | } 76 | 77 | &.nav-tabs-danger{ 78 | > .nav-item{ 79 | > .nav-link{ 80 | &.active{ 81 | border-color: $danger; 82 | color: $danger; 83 | } 84 | } 85 | } 86 | } 87 | 88 | &.nav-tabs-warning{ 89 | > .nav-item{ 90 | > .nav-link{ 91 | &.active{ 92 | border-color: $warning; 93 | color: $warning; 94 | } 95 | } 96 | } 97 | } 98 | 99 | &.nav-tabs-success{ 100 | > .nav-item{ 101 | > .nav-link{ 102 | &.active{ 103 | border-color: $success; 104 | color: $success; 105 | } 106 | } 107 | } 108 | } 109 | 110 | } 111 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_type.scss: -------------------------------------------------------------------------------- 1 | body { 2 | -moz-osx-font-smoothing: grayscale; 3 | -webkit-font-smoothing: antialiased; 4 | } 5 | 6 | h1, h2, h3, h4, h5, h6, 7 | .h1, .h2, .h3, .h4, .h5, .h6 { 8 | line-height: $headings-line-height; 9 | 10 | } 11 | p{ 12 | font-weight: $font-weight-light; 13 | } 14 | 15 | button, 16 | input, 17 | optgroup, 18 | select, 19 | textarea{ 20 | font-family: $font-family-base; 21 | } 22 | .card{ 23 | h1,h2,h3,h4,h5,h6,p{ 24 | color: $opacity-8; 25 | } 26 | } 27 | h1,h2,h3,h4,h5,h6{ 28 | font-weight: $font-weight-normal; 29 | color: $opacity-8; 30 | } 31 | 32 | a{ 33 | color: $primary-states; 34 | font-weight: $font-weight-light; 35 | &:hover, 36 | &:focus{ 37 | color: $primary; 38 | } 39 | } 40 | h1, .h1 { 41 | line-height: 1.05; 42 | margin-bottom: $margin-base-vertical * 2; 43 | 44 | small{ 45 | font-weight: $font-weight-bold; 46 | text-transform: uppercase; 47 | opacity: .8; 48 | } 49 | 50 | } 51 | h2, .h2{ 52 | margin-bottom: $margin-base-vertical * 2; 53 | line-height: 1.2; 54 | 55 | } 56 | h3, .h3{ 57 | margin-bottom: $margin-base-vertical * 2; 58 | line-height: 1.4em; 59 | } 60 | h4, .h4{ 61 | line-height: 1.45em; 62 | margin-bottom: $margin-base-vertical; 63 | 64 | & + .category, 65 | &.title + .category{ 66 | margin-top: -10px; 67 | } 68 | } 69 | h5, .h5 { 70 | line-height: 1.4em; 71 | margin-bottom: 15px; 72 | } 73 | h6, .h6{ 74 | text-transform: uppercase; 75 | font-weight: $font-weight-bold; 76 | } 77 | p{ 78 | color: $opacity-8; 79 | margin-bottom: 5px; 80 | 81 | &.description{ 82 | font-size: 1.14em; 83 | } 84 | } 85 | 86 | 87 | .title{ 88 | margin-top: 30px; 89 | margin-bottom: 25px; 90 | font-weight: $font-weight-bold; 91 | color: $opacity-8; 92 | 93 | 94 | &.title-up{ 95 | text-transform: uppercase; 96 | 97 | a{ 98 | color: $black; 99 | text-decoration: none; 100 | } 101 | } 102 | & + .category{ 103 | margin-top: -10px; 104 | } 105 | } 106 | 107 | .description, 108 | .card-description, 109 | .footer-big p, 110 | .card .footer .stats{ 111 | color: $dark-gray; 112 | font-weight: $font-weight-light; 113 | } 114 | .category, 115 | .card-category{ 116 | text-transform: capitalize; 117 | font-weight: $font-weight-normal; 118 | color: rgba($white, 0.6); 119 | font-size: $font-size-sm; 120 | } 121 | 122 | .card-category{ 123 | font-size: $font-size-sm; 124 | } 125 | 126 | .blockquote{ 127 | border-left: none; 128 | border: 1px solid $default; 129 | padding: 20px; 130 | font-size: $blockquote-font-size; 131 | line-height: 1.8; 132 | 133 | small{ 134 | color: $default; 135 | font-size: $font-size-sm; 136 | text-transform: uppercase; 137 | } 138 | 139 | &.blockquote-primary{ 140 | border-color: $primary; 141 | color: $primary; 142 | 143 | small{ 144 | color: $primary; 145 | } 146 | } 147 | 148 | &.blockquote-danger{ 149 | border-color: $danger; 150 | color: $danger; 151 | 152 | small{ 153 | color: $danger; 154 | } 155 | } 156 | 157 | &.blockquote-white{ 158 | border-color: $opacity-8; 159 | color: $white; 160 | 161 | small{ 162 | color: $opacity-8; 163 | } 164 | } 165 | } 166 | 167 | ul li, ol li{ 168 | color: $white; 169 | } 170 | 171 | pre{ 172 | color: $opacity-8; 173 | } 174 | 175 | hr{ 176 | border-top: 1px solid rgba(0,0,0,0.1); 177 | margin-top: $spacer; 178 | margin-bottom: $spacer; 179 | } 180 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/backgrounds.scss"; 2 | @import "utilities/floating.scss"; 3 | @import "utilities/helper.scss"; 4 | @import "utilities/position.scss"; 5 | @import "utilities/sizing.scss"; 6 | @import "utilities/spacing.scss"; 7 | @import "utilities/shadows.scss"; 8 | @import "utilities/text.scss"; 9 | @import "utilities/transform.scss"; 10 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/cards/_card-chart.scss: -------------------------------------------------------------------------------- 1 | .card-chart { 2 | overflow: hidden; 3 | .card-header{ 4 | .card-title{ 5 | i{ 6 | font-size: 16px; 7 | margin-right: 5px; 8 | margin-bottom: 3px; 9 | } 10 | } 11 | .card-category{ 12 | margin-bottom: 5px; 13 | } 14 | } 15 | .card-body{ 16 | padding-left: 5px; 17 | padding-right: 5px; 18 | .tab-space{ 19 | padding: 0; 20 | } 21 | } 22 | .table{ 23 | margin-bottom: 0; 24 | 25 | td{ 26 | border-top: none; 27 | border-bottom: 1px solid rgba($white,0.1); 28 | } 29 | } 30 | 31 | .card-progress { 32 | margin-top: 30px; 33 | padding: 0 10px; 34 | } 35 | 36 | .chart-area { 37 | width: 100%; 38 | height: 500px; 39 | } 40 | .card-footer { 41 | margin-top: 15px; 42 | 43 | .stats{ 44 | color: $dark-gray; 45 | } 46 | } 47 | 48 | .dropdown{ 49 | position: absolute; 50 | right: 20px; 51 | top: 20px; 52 | 53 | .btn{ 54 | margin: 0; 55 | } 56 | } 57 | 58 | 59 | } 60 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/cards/_card-map.scss: -------------------------------------------------------------------------------- 1 | .map { 2 | height: 500px; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/cards/_card-plain.scss: -------------------------------------------------------------------------------- 1 | .card-plain { 2 | background: transparent; 3 | box-shadow: none; 4 | 5 | .card-header, 6 | .card-footer { 7 | margin-left: 0; 8 | margin-right: 0; 9 | background-color: transparent; 10 | } 11 | 12 | &:not(.card-subcategories).card-body { 13 | padding-left: 0; 14 | padding-right: 0; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/cards/_card-register.scss: -------------------------------------------------------------------------------- 1 | .card-register { 2 | overflow: hidden; 3 | text-align: left; 4 | z-index: 2; 5 | 6 | .card-header img { 7 | position: absolute; 8 | margin-left: -50px; 9 | margin-top: -150px; 10 | border-radius: 20%; 11 | width: 350px; 12 | } 13 | 14 | .header { 15 | margin-left: 20px; 16 | margin-right: 20px; 17 | padding: 30px 0; 18 | } 19 | 20 | .text-divider { 21 | margin-top: 30px; 22 | margin-bottom: 0px; 23 | text-align: center; 24 | } 25 | 26 | .content { 27 | padding: 0px 30px; 28 | } 29 | 30 | .form-check { 31 | margin-top: 20px; 32 | margin-left: 20px; 33 | 34 | label:not(.form-check-label){ 35 | padding-left: 38px; 36 | } 37 | } 38 | 39 | .card-header { 40 | padding: 0 0 50px; 41 | overflow: hidden; 42 | 43 | .card-title { 44 | position: relative; 45 | font-size: 5em; 46 | font-weight: 900; 47 | color: $black; 48 | text-transform: lowercase; 49 | margin-left: -5px; 50 | z-index: 1; 51 | } 52 | } 53 | 54 | .card-img { 55 | position: absolute; 56 | left: 0; 57 | top: -15%; 58 | width: 70%; 59 | } 60 | 61 | .social-line { 62 | margin-top: 20px; 63 | text-align: center; 64 | 65 | .btn.btn-icon , 66 | .btn.btn-icon .btn-icon { 67 | margin-left: 5px; 68 | margin-right: 5px; 69 | box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2); 70 | } 71 | } 72 | 73 | .card-footer { 74 | margin-bottom: 10px; 75 | margin-top: 24px; 76 | } 77 | } 78 | 79 | @include media-breakpoint-down(md){ 80 | .card.card-register .card-img { 81 | margin-left: -45px; 82 | } 83 | } 84 | 85 | @include media-breakpoint-down(xs){ 86 | .card.card-register { 87 | margin-top: 50px; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/cards/_card-stats.scss: -------------------------------------------------------------------------------- 1 | %card-stats{ 2 | hr{ 3 | margin: 5px 15px; 4 | } 5 | } 6 | 7 | 8 | .card-stats { 9 | margin-bottom: 0; 10 | 11 | &.upper { 12 | box-shadow: 2px 7px 11px rgba(0, 0, 0, 0.4); 13 | transform: translate(-20px, -25px); 14 | position: absolute; 15 | padding: 10px; 16 | z-index: 2; 17 | min-width: 260px; 18 | } 19 | 20 | .card-body { 21 | .numbers { 22 | text-align: right; 23 | font-size: 2em; 24 | 25 | p{ 26 | margin-bottom: 0; 27 | } 28 | .card-category { 29 | color: $dark-gray; 30 | font-size: 16px; 31 | line-height: 1.4em; 32 | } 33 | } 34 | } 35 | .card-footer{ 36 | padding: 0px 15px 15px; 37 | 38 | .stats{ 39 | color: $dark-gray; 40 | } 41 | 42 | hr{ 43 | margin-top: 10px; 44 | margin-bottom: 15px; 45 | } 46 | } 47 | .icon-big { 48 | font-size: 3em; 49 | min-height: 64px; 50 | 51 | i{ 52 | line-height: 59px; 53 | } 54 | } 55 | 56 | 57 | } 58 | 59 | @media screen and (max-width: 991px){ 60 | .card { 61 | &.card-stats.upper { 62 | position: relative; 63 | transform: translate(0); 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/cards/_card-task.scss: -------------------------------------------------------------------------------- 1 | .card-tasks { 2 | height: 473px; 3 | 4 | .table-full-width { 5 | max-height: 410px; 6 | position: relative; 7 | } 8 | 9 | .card-header { 10 | .title { 11 | margin-right: 20px; 12 | font-weight: $font-weight-normal; 13 | } 14 | 15 | .dropdown { 16 | float: right; 17 | color: darken($white, 20%); 18 | } 19 | } 20 | 21 | .card-body { 22 | i { 23 | color: $dark-gray; 24 | font-size: 1.4em; 25 | &:hover { 26 | color: $white; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/cards/_card-user.scss: -------------------------------------------------------------------------------- 1 | .card-user { 2 | overflow: hidden; 3 | .image { 4 | height: 120px; 5 | } 6 | 7 | .author { 8 | text-align: center; 9 | text-transform: none; 10 | margin-top: 25px; 11 | 12 | a + p.description { 13 | margin-top: -7px; 14 | } 15 | 16 | .block { 17 | position: absolute; 18 | height: 100px; 19 | width: 250px; 20 | &.block-one { 21 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 22 | @include nc-rotate(150deg,10); 23 | margin-top: -90px; 24 | margin-left: -50px; 25 | } 26 | 27 | &.block-two { 28 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 29 | @include nc-rotate(30deg,10); 30 | margin-top: -40px; 31 | margin-left: -100px; 32 | } 33 | 34 | &.block-three { 35 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 36 | @include nc-rotate(170deg,10); 37 | margin-top: -70px; 38 | right: -45px; 39 | 40 | } 41 | 42 | &.block-four { 43 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); 44 | @include nc-rotate(150deg,10); 45 | margin-top: -25px; 46 | right: -45px; 47 | 48 | } 49 | } 50 | } 51 | 52 | .avatar { 53 | width: 124px; 54 | height: 124px; 55 | border: 5px solid lighten($black,5%); 56 | border-bottom-color: $transparent-bg; 57 | background-color: $transparent-bg; 58 | position: relative; 59 | } 60 | 61 | .card-body { 62 | min-height: 240px; 63 | } 64 | 65 | hr { 66 | margin: 5px 15px; 67 | } 68 | 69 | .button-container { 70 | margin-bottom: 6px; 71 | text-align: center; 72 | } 73 | 74 | .card-description { 75 | margin-top: 30px; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: color-yiq($background); 3 | // @include gradient-bg($background); 4 | background-color: lighten($background, 5%); 5 | border-color: $border; 6 | 7 | hr { 8 | border-top-color: darken($border, 5%); 9 | } 10 | 11 | .alert-link { 12 | color: darken($color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | @mixin bg-variant($parent, $color) { 3 | #{$parent} { 4 | background-color: $color !important; 5 | } 6 | a#{$parent}, 7 | button#{$parent} { 8 | @include hover-focus { 9 | background-color: darken($color, 10%) !important; 10 | } 11 | } 12 | } 13 | 14 | @mixin bg-gradient-variant($parent, $color) { 15 | #{$parent} { 16 | background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_badges.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | &[href] { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | text-decoration: none; 9 | background-color: darken($bg, 3%); 10 | } 11 | } 12 | .tagsinput-remove-link{ 13 | color: $white; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { 2 | background-color: $brand-color; 3 | 4 | &:before{ 5 | color: $brand-color; 6 | } 7 | 8 | .dropdown-header:not([href]):not([tabindex]){ 9 | color: $dropdown-header-color; 10 | } 11 | 12 | .dropdown-item{ 13 | color: $dropdown-color; 14 | 15 | &:hover, 16 | &:focus{ 17 | background-color: $background-color; 18 | } 19 | } 20 | 21 | .dropdown-divider{ 22 | background-color: $background-color; 23 | } 24 | 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | @mixin form-control-focus() { 2 | &:focus { 3 | color: $input-focus-color; 4 | background-color: $input-focus-bg; 5 | border-color: $input-focus-border-color; 6 | outline: 0; 7 | // Avoid using mixin so we can pass custom focus shadow properly 8 | @if $enable-shadows { 9 | box-shadow: $input-box-shadow, $input-focus-box-shadow; 10 | } @else { 11 | box-shadow: $input-focus-box-shadow; 12 | } 13 | } 14 | } 15 | 16 | 17 | @mixin form-validation-state($state, $color) { 18 | .#{$state}-feedback { 19 | display: none; 20 | width: 100%; 21 | margin-top: $form-feedback-margin-top; 22 | font-size: $form-feedback-font-size; 23 | color: $color; 24 | } 25 | 26 | .#{$state}-tooltip { 27 | position: absolute; 28 | top: 100%; 29 | z-index: 5; 30 | display: none; 31 | max-width: 100%; // Contain to parent when possible 32 | padding: .5rem; 33 | margin-top: .1rem; 34 | font-size: .875rem; 35 | line-height: 1; 36 | color: $white; 37 | background-color: rgba($color, .8); 38 | border-radius: .2rem; 39 | } 40 | 41 | .form-control, 42 | .custom-select { 43 | .was-validated &:#{$state}, 44 | &.is-#{$state} { 45 | border-color: $color; 46 | 47 | &:focus { 48 | border-color: $color; 49 | //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75); 50 | } 51 | 52 | ~ .#{$state}-feedback, 53 | ~ .#{$state}-tooltip { 54 | display: block; 55 | } 56 | } 57 | } 58 | 59 | .form-check-input { 60 | .was-validated &:#{$state}, 61 | &.is-#{$state} { 62 | ~ .form-check-label { 63 | color: $color; 64 | } 65 | 66 | ~ .#{$state}-feedback, 67 | ~ .#{$state}-tooltip { 68 | display: block; 69 | } 70 | } 71 | } 72 | 73 | .custom-control-input { 74 | .was-validated &:#{$state}, 75 | &.is-#{$state} { 76 | ~ .custom-control-label { 77 | color: $color; 78 | 79 | &::before { 80 | background-color: lighten($color, 25%); 81 | border-color: lighten($color, 25%); 82 | } 83 | } 84 | 85 | ~ .#{$state}-feedback, 86 | ~ .#{$state}-tooltip { 87 | display: block; 88 | } 89 | 90 | &:checked { 91 | ~ .custom-control-label::before { 92 | @include gradient-bg(lighten($color, 10%)); 93 | border-color: lighten($color, 25%); 94 | } 95 | } 96 | 97 | &:focus { 98 | ~ .custom-control-label::before { 99 | box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); 100 | } 101 | } 102 | } 103 | } 104 | 105 | // custom file 106 | .custom-file-input { 107 | .was-validated &:#{$state}, 108 | &.is-#{$state} { 109 | ~ .custom-file-label { 110 | border-color: $color; 111 | 112 | &::before { border-color: inherit; } 113 | } 114 | 115 | ~ .#{$state}-feedback, 116 | ~ .#{$state}-tooltip { 117 | display: block; 118 | } 119 | 120 | &:focus { 121 | ~ .custom-file-label { 122 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25); 123 | } 124 | } 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_icon.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-shape-variant($color) { 2 | color: saturate(darken($color, 10%), 10); 3 | background-color: transparentize(lighten($color, 10%), .5); 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal){ 2 | padding: $padding-vertical $padding-horizontal; 3 | } 4 | 5 | @mixin form-control-placeholder($color, $opacity){ 6 | .form-control::-moz-placeholder{ 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | .form-control:-moz-placeholder{ 11 | color: $color; 12 | @include opacity(1); 13 | } 14 | .form-control::-webkit-input-placeholder{ 15 | color: $color; 16 | @include opacity(1); 17 | } 18 | .form-control:-ms-input-placeholder{ 19 | color: $color; 20 | @include opacity(1); 21 | } 22 | } 23 | 24 | @mixin placeholder() { 25 | &::-moz-placeholder {@content; } // Firefox 26 | &:-ms-input-placeholder {@content; } // Internet Explorer 10+ 27 | &::-webkit-input-placeholder {@content; } // Safari and Chrome 28 | } 29 | 30 | @mixin light-form(){ 31 | border-radius: 0; 32 | border:0; 33 | padding: 0; 34 | background-color: transparent; 35 | 36 | } 37 | 38 | 39 | @mixin form-control-lg-padding($padding-vertical, $padding-horizontal) { 40 | .form-group.no-border.form-control-lg, 41 | .input-group.no-border.form-control-lg{ 42 | .input-group-append .input-group-text{ 43 | padding: $padding-vertical 0 $padding-vertical $padding-horizontal; 44 | } 45 | 46 | .form-control{ 47 | padding: $padding-vertical $padding-horizontal; 48 | 49 | & + .input-group-prepend .input-group-text, 50 | & + .input-group-append .input-group-text{ 51 | padding: $padding-vertical $padding-horizontal $padding-vertical 0; 52 | } 53 | 54 | 55 | } 56 | } 57 | 58 | .form-group.form-control-lg, 59 | .input-group.form-control-lg{ 60 | .form-control{ 61 | padding: $padding-vertical - 1 $padding-horizontal - 1; 62 | height: 100%; 63 | 64 | & + .input-group-prepend .input-group-text, 65 | & + .input-group-append .input-group-text{ 66 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; 67 | } 68 | } 69 | 70 | .input-group-prepend .input-group-text, 71 | .input-group-append .input-group-text{ 72 | padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; 73 | 74 | & + .form-control{ 75 | padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; 76 | } 77 | } 78 | } 79 | } 80 | 81 | 82 | 83 | @mixin input-base-padding($padding-vertical, $padding-horizontal) { 84 | .form-group.no-border, 85 | .input-group.no-border{ 86 | .form-control{ 87 | padding: $padding-vertical $padding-horizontal; 88 | 89 | & + .input-group-prepend .input-group-text, 90 | & + .input-group-append .input-group-text{ 91 | padding: $padding-vertical $padding-horizontal $padding-vertical 0; 92 | } 93 | } 94 | 95 | .input-group-prepend .input-group-text, 96 | .input-group-append .input-group-text{ 97 | padding: $padding-vertical 0 $padding-vertical $padding-horizontal; 98 | } 99 | } 100 | 101 | .form-group, 102 | .input-group{ 103 | .form-control{ 104 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; 105 | 106 | & + .input-group-prepend .input-group-text, 107 | & + .input-group-append .input-group-text{ 108 | padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; 109 | } 110 | } 111 | 112 | .input-group-prepend .input-group-text, 113 | .input-group-append .input-group-text{ 114 | padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1; 115 | 116 | & + .form-control, 117 | & ~ .form-control{ 118 | padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3; 119 | } 120 | } 121 | } 122 | } 123 | 124 | 125 | //color1 = $opacity-5 126 | //color2 = $opacity-8 127 | //color3 = $white-color 128 | //color4 = $transparent-bg 129 | //color5 = $opacity-1 130 | //color6 = $opacity-2 131 | 132 | 133 | @mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { 134 | @include form-control-placeholder(rgba($white, 0.4), 1); 135 | 136 | .form-control{ 137 | border-color: $color1; 138 | color: $color2; 139 | 140 | &:focus{ 141 | border-color: $color3; 142 | background-color: $color4; 143 | color: $color3; 144 | } 145 | } 146 | 147 | .has-success, 148 | .has-danger{ 149 | &:after{ 150 | color: $color3; 151 | } 152 | } 153 | 154 | .has-danger{ 155 | .form-control{ 156 | background-color: $color4; 157 | } 158 | } 159 | 160 | .input-group-prepend{ 161 | margin-right: 0; 162 | } 163 | 164 | .input-group-prepend .input-group-text, 165 | .input-group-append .input-group-text{ 166 | background-color: rgba($background-black, 0.2); 167 | border-color: $color1; 168 | color: $color2; 169 | 170 | 171 | } 172 | 173 | .input-group-focus{ 174 | .input-group-prepend .input-group-text, 175 | .input-group-append .input-group-text{ 176 | background-color: rgba($background-black, 0.3); 177 | border-color: $color3; 178 | color: $color3; 179 | } 180 | } 181 | 182 | .form-group.no-border, 183 | .input-group.no-border{ 184 | .form-control{ 185 | background-color: rgba($background-black,0.2); 186 | color: $color2; 187 | 188 | &:focus, 189 | &:active, 190 | &:active{ 191 | background-color: rgba($background-black,0.3); 192 | color: $color3; 193 | } 194 | } 195 | 196 | .form-control + .input-group-prepend .input-group-text, 197 | .form-control + .input-group-append .input-group-text{ 198 | background-color: rgba($background-black,0.2);; 199 | 200 | &:focus, 201 | &:active, 202 | &:active{ 203 | background-color: rgba($background-black,0.3); 204 | color: $color3; 205 | } 206 | } 207 | 208 | .form-control{ 209 | &:focus{ 210 | & + .input-group-prepend .input-group-text, 211 | & + .input-group-append .input-group-text{ 212 | background-color: rgba($background-black, 0.3); 213 | color: $color3; 214 | } 215 | } 216 | } 217 | 218 | .input-group-prepend .input-group-text, 219 | .input-group-append .input-group-text{ 220 | background-color: rgba($background-black, 0.2); 221 | border: none; 222 | color: $color2; 223 | } 224 | 225 | &.input-group-focus{ 226 | .input-group-prepend .input-group-text, 227 | .input-group-append .input-group-text{ 228 | background-color: rgba($background-black, 0.3); 229 | color: $color3; 230 | } 231 | } 232 | } 233 | 234 | } 235 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_modals.scss: -------------------------------------------------------------------------------- 1 | @mixin modal-colors($bg-color, $color) { 2 | .modal-content{ 3 | background-color: $bg-color; 4 | color: $color; 5 | } 6 | 7 | .modal-body p{ 8 | color: rgba($white, 0.8); 9 | } 10 | 11 | //inputs 12 | @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2); 13 | 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_page-header.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($color1, $color2){ 2 | background: $color1; /* For browsers that do not support gradients */ 3 | background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ 4 | background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ 5 | background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ 6 | background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_popovers.scss: -------------------------------------------------------------------------------- 1 | @mixin popover-variant($background) { 2 | background-color: $background; 3 | 4 | .popover-header { 5 | background-color: $background; 6 | color: color-yiq($background); 7 | opacity: .6; 8 | } 9 | 10 | .popover-body { 11 | color: color-yiq($background); 12 | } 13 | 14 | .popover-header{ 15 | border-color: rgba(color-yiq($background), .2); 16 | } 17 | 18 | &.bs-popover-top { 19 | .arrow::after { 20 | border-top-color: $background; 21 | } 22 | } 23 | 24 | &.bs-popover-right { 25 | .arrow::after { 26 | border-right-color: $background; 27 | } 28 | } 29 | 30 | &.bs-popover-bottom { 31 | .arrow::after { 32 | border-bottom-color: $background; 33 | } 34 | } 35 | 36 | &.bs-popover-left { 37 | .arrow::after { 38 | border-left-color: $background; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/_wizard.scss: -------------------------------------------------------------------------------- 1 | @mixin set-wizard-color($color) { 2 | .progress-with-circle .progress-bar{ 3 | background: $color; 4 | } 5 | 6 | .nav-pills .nav-item .nav-link{ 7 | color: $color; 8 | 9 | &.checked, &.active{ 10 | background: $color; 11 | color: white; 12 | } 13 | &:hover{ 14 | background: $white; 15 | } 16 | } 17 | 18 | .nav-pills .nav-item .nav-link.active, 19 | .nav-pills .nav-item .nav-link.checked:focus, 20 | .nav-pills .nav-item .nav-link.checked:hover, 21 | .nav-pills .nav-item .nav-link.active:focus, 22 | .nav-pills .nav-item .nav-link.active:hover{ 23 | background: $color; 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/mixins/opacity.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 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_blogs.scss: -------------------------------------------------------------------------------- 1 | [class*="blogs-"]{ 2 | padding: 50px 0; 3 | } 4 | 5 | 6 | .blogs-1{ 7 | .card{ 8 | margin-bottom: 80px; 9 | } 10 | } 11 | 12 | .blogs-4{ 13 | .card{ 14 | margin-bottom: 60px; 15 | text-align: center; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_contactus.scss: -------------------------------------------------------------------------------- 1 | .contactus-1{ 2 | .info{ 3 | padding: 0; 4 | margin: 0; 5 | 6 | &:first-child{ 7 | margin-top: 30px; 8 | } 9 | 10 | .info-title{ 11 | margin-top: 20px; 12 | color: $white-color; 13 | } 14 | 15 | .icon{ 16 | margin-top: 19px; 17 | color: $white-color; 18 | } 19 | } 20 | 21 | .card-contact{ 22 | margin-top: 30px; 23 | } 24 | } 25 | 26 | 27 | .contactus-2{ 28 | padding: 0; 29 | position: relative; 30 | 31 | .card-contact{ 32 | max-width: 560px; 33 | margin: 80px 0 80px 150px; 34 | 35 | .info{ 36 | padding: 0; 37 | margin: 0; 38 | } 39 | } 40 | .map{ 41 | width: 100%; 42 | height: 100%; 43 | position: absolute; 44 | } 45 | 46 | .info-horizontal .icon{ 47 | margin-top: 28px; 48 | 49 | > i{ 50 | font-size: 2.2em; 51 | max-width: 45px; 52 | 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_features.scss: -------------------------------------------------------------------------------- 1 | .phone-container{ 2 | img{ 3 | width: 100%; 4 | } 5 | } 6 | 7 | .features-2, 8 | .features-1, 9 | .features-3{ 10 | text-align: center; 11 | } 12 | 13 | .features-4{ 14 | .card{ 15 | margin-top: 70px; 16 | } 17 | } 18 | 19 | .features-2{ 20 | .info-title, 21 | .title{ 22 | color: $white-color; 23 | } 24 | } 25 | 26 | .features-5{ 27 | .info{ 28 | max-width: none; 29 | margin: 0 auto; 30 | padding: 10px 0 0px; 31 | } 32 | .phone-container{ 33 | max-width: 200px; 34 | margin: 0 auto; 35 | } 36 | } 37 | 38 | .features-6{ 39 | .phone-container{ 40 | max-width: 260px; 41 | margin: 60px auto 0; 42 | } 43 | .info{ 44 | max-width: none; 45 | margin: 0 auto; 46 | padding: 10px 0 0px; 47 | } 48 | .info:first-child{ 49 | padding-top: 130px; 50 | } 51 | } 52 | 53 | .features-7, 54 | .features-2, 55 | .features-8{ 56 | position: relative; 57 | 58 | &:after{ 59 | display: block; 60 | content: ""; 61 | position: absolute; 62 | width: 100%; 63 | height: 100%; 64 | top: 0; 65 | left: 0; 66 | z-index: 1; 67 | background-color: rgba(0,0,0,.5); 68 | } 69 | 70 | .container, 71 | .container-fluid, 72 | .title, 73 | .description{ 74 | position: relative; 75 | z-index: 2; 76 | } 77 | } 78 | 79 | .features-8, 80 | .features-7{ 81 | .title{ 82 | color: #FFFFFF; 83 | } 84 | } 85 | 86 | .features-8{ 87 | .title + .description{ 88 | margin-bottom: 70px; 89 | } 90 | } 91 | 92 | .features-7{ 93 | overflow: hidden; 94 | 95 | .info-title{ 96 | color: #FFFFFF; 97 | } 98 | .info-horizontal{ 99 | padding: 15px 0 0; 100 | 101 | &:first-child{ 102 | padding-top: 45px; 103 | } 104 | } 105 | 106 | .image-container{ 107 | max-width: 1200px; 108 | position: relative; 109 | height: 550px; 110 | margin-top: 58px; 111 | 112 | img{ 113 | max-width: 1200px; 114 | left: 100px; 115 | top: 0; 116 | height: 100%; 117 | position: absolute; 118 | } 119 | } 120 | } 121 | 122 | .tablet-container{ 123 | margin-top: 40px; 124 | } 125 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_headers.scss: -------------------------------------------------------------------------------- 1 | .page-header{ 2 | .carousel .carousel-indicators{ 3 | bottom: 60px; 4 | } 5 | 6 | .container{ 7 | color: $white; 8 | } 9 | 10 | .title{ 11 | color: $white; 12 | } 13 | 14 | &.header-small{ 15 | height: 65vh; 16 | min-height: 65vh; 17 | 18 | .container{ 19 | padding-top: 20vh; 20 | } 21 | } 22 | } 23 | 24 | .landing-page { 25 | .content-center { 26 | img { 27 | height: 300px; 28 | } 29 | } 30 | } 31 | 32 | .header-filter{ 33 | position: relative; 34 | 35 | .container{ 36 | z-index: 2; 37 | position: relative; 38 | } 39 | 40 | } 41 | .clear-filter{ 42 | &:before{ 43 | display: none; 44 | } 45 | } 46 | 47 | .iframe-container iframe{ 48 | width: 100%; 49 | box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.3); 50 | } 51 | 52 | .header-1, 53 | .header-2, 54 | .header-3{ 55 | .wrapper{ 56 | background: #CCCCCC; 57 | } 58 | .content-center{ 59 | max-width: none !important; 60 | } 61 | } 62 | 63 | .header-2, 64 | .header-1{ 65 | .page-header{ 66 | .card{ 67 | margin-top: 60px; 68 | } 69 | } 70 | } 71 | 72 | .header-3{ 73 | .btn{ 74 | margin: 0; 75 | } 76 | h6{ 77 | margin-bottom: 0; 78 | } 79 | } 80 | 81 | 82 | @media screen and (max-width: 768px){ 83 | .page-header { 84 | .content-center { 85 | 86 | .row { 87 | text-align: center !important; 88 | } 89 | img { 90 | height: 150px; 91 | margin-top: 40px; 92 | } 93 | } 94 | } 95 | } 96 | .wrapper .navbar{ 97 | z-index: 2; 98 | 99 | } 100 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_pricing.scss: -------------------------------------------------------------------------------- 1 | .pricing-1{ 2 | h2.title{ 3 | margin-bottom: 10px; 4 | } 5 | 6 | .card-separator{ 7 | width: 1px; 8 | display: block; 9 | height: 100%; 10 | background-color: rgba($default-color, .2); 11 | position: absolute; 12 | left: 0; 13 | top: 0; 14 | } 15 | // &.section-image:after{ 16 | // background-color: rgba(0, 0, 0, 0.8); 17 | // } 18 | } 19 | 20 | .pricing-2{ 21 | .nav-pills{ 22 | margin-bottom: 50px; 23 | } 24 | 25 | } 26 | 27 | .pricing-5{ 28 | .nav-pills{ 29 | margin-top: 50px; 30 | margin-bottom: 50px; 31 | } 32 | } 33 | 34 | .pricing-3, 35 | .pricing-4{ 36 | .title{ 37 | margin-bottom: 10px; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_projects.scss: -------------------------------------------------------------------------------- 1 | .projects-1{ 2 | .card-title{ 3 | margin-top: 10px 4 | } 5 | } 6 | 7 | .projects-2{ 8 | h2.title{ 9 | margin-top: 5px; 10 | margin-bottom: 15px; 11 | } 12 | .card-title{ 13 | margin-bottom: 5px; 14 | } 15 | .category{ 16 | color: $default-color; 17 | margin-top: 5px; 18 | } 19 | .card-description{ 20 | margin-top: 20px; 21 | } 22 | .card{ 23 | text-align: center; 24 | } 25 | } 26 | 27 | .projects-3{ 28 | h2.title, 29 | h3.title{ 30 | margin-bottom: 80px; 31 | margin-top: 5px; 32 | } 33 | 34 | .card{ 35 | margin-bottom: 30px; 36 | text-align: center; 37 | } 38 | .category{ 39 | margin-bottom: 5px; 40 | } 41 | .card-title{ 42 | margin-top: 10px; 43 | } 44 | 45 | 46 | } 47 | 48 | .projects-5{ 49 | h2.title{ 50 | margin-top: 5px; 51 | margin-bottom: 15px; 52 | } 53 | 54 | .info{ 55 | padding: 0; 56 | 57 | p{ 58 | margin: 0; 59 | } 60 | } 61 | 62 | .card-background{ 63 | margin-bottom: 0; 64 | 65 | .card-body{ 66 | padding-top: 140px; 67 | padding-bottom: 140px; 68 | } 69 | } 70 | hr{ 71 | margin: 70px auto; 72 | max-width: 970px; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_social-subscribe-lines.scss: -------------------------------------------------------------------------------- 1 | .social-line-big-icons{ 2 | [class*="col-"]{ 3 | border-right: 1px solid $light-gray; 4 | 5 | &:last-child{ 6 | border: 0; 7 | } 8 | } 9 | 10 | .btn{ 11 | margin: 0; 12 | width: 100%; 13 | padding-top: 30px !important; 14 | padding-bottom: 30px !important; 15 | height: auto; 16 | 17 | .fa{ 18 | font-size: 25px; 19 | } 20 | } 21 | } 22 | 23 | .social-line{ 24 | padding: .85rem 0; 25 | } 26 | 27 | .subscribe-line{ 28 | padding: 15px * 2 0; 29 | 30 | .card{ 31 | margin-top: 54px; 32 | 33 | .card-block{ 34 | min-height: auto; 35 | } 36 | } 37 | &.subscribe-line-image{ 38 | position: relative; 39 | 40 | background-position: center center; 41 | background-size: cover; 42 | 43 | .description{ 44 | color: $opacity-8; 45 | } 46 | 47 | .title{ 48 | color: $white-color; 49 | } 50 | &:after{ 51 | position: absolute; 52 | z-index: 1; 53 | width: 100%; 54 | height: 100%; 55 | display: block; 56 | left: 0; 57 | top: 0; 58 | content: ""; 59 | background-color: rgba(0,0,0,.66); 60 | } 61 | 62 | .container{ 63 | z-index: 2; 64 | position: relative; 65 | } 66 | } 67 | } 68 | 69 | .social-line-white, 70 | .subscribe-line-white{ 71 | background-color: $white-color; 72 | } 73 | .social-line-black, 74 | .subscribe-line-black{ 75 | background-color: $black-color; 76 | 77 | [class*="col-"]{ 78 | border-color: rgba(255, 255, 255, 0.1); 79 | } 80 | } 81 | 82 | [data-background-color]{ 83 | .social-line{ 84 | h1,h2,h3,h4,h5,h6{ 85 | color: initial; 86 | } 87 | 88 | .btn.btn-simple{ 89 | border: 0; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_team.scss: -------------------------------------------------------------------------------- 1 | .team-2{ 2 | .card{ 3 | .card-title{ 4 | margin: 10px 0 0; 5 | } 6 | h6{ 7 | margin-top: 5px; 8 | } 9 | } 10 | 11 | [class*="col-md-"]:nth-child(2){ 12 | margin-top: 45px; 13 | } 14 | } 15 | 16 | .team-3{ 17 | .card.card-profile{ 18 | .card-image a > img{ 19 | border-radius: 0; 20 | border-bottom-left-radius: $border-radius-small; 21 | border-top-left-radius: $border-radius-small; 22 | } 23 | 24 | .card-title{ 25 | margin-top: 15px; 26 | } 27 | } 28 | } 29 | 30 | 31 | .team-4{ 32 | .card{ 33 | text-align: left; 34 | 35 | .footer{ 36 | margin-top: 0; 37 | } 38 | } 39 | } 40 | 41 | .team-5{ 42 | h5.description{ 43 | margin-bottom: 100px; 44 | } 45 | 46 | [class*="col-md-"]{ 47 | margin-top: 50px; 48 | 49 | &:nth-child(2){ 50 | margin-top: 95px; 51 | } 52 | } 53 | 54 | .card.card-profile{ 55 | .card-title + .category{ 56 | margin-bottom: .625rem; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/sections/_testimonials.scss: -------------------------------------------------------------------------------- 1 | .testimonials-1{ 2 | .description{ 3 | margin-bottom: 50px; 4 | } 5 | } 6 | 7 | .section-testimonials, 8 | .testimonials-2{ 9 | background-image: none; 10 | 11 | .card-profile{ 12 | .card-title, 13 | .card-description{ 14 | text-align: left !important; 15 | } 16 | } 17 | .card-image{ 18 | margin: 0; 19 | } 20 | .carousel{ 21 | .carousel-inner{ 22 | box-shadow: none; 23 | } 24 | 25 | .carousel-control-prev, 26 | .carousel-control-next{ 27 | i{ 28 | color: $light-black; 29 | } 30 | } 31 | } 32 | .testimonials-people{ 33 | position: relative; 34 | 35 | img{ 36 | position: absolute; 37 | border-radius: 50%; 38 | z-index: 4; 39 | } 40 | .left-first-person{ 41 | left: 2%; 42 | top: 2%; 43 | height: 70px; 44 | width: 70px; 45 | } 46 | .left-second-person{ 47 | left: 65%; 48 | top: 100%; 49 | height: 70px; 50 | width: 70px; 51 | } 52 | .left-third-person{ 53 | left: -25%; 54 | top: 135%; 55 | height: 120px; 56 | width: 120px; 57 | } 58 | .left-fourth-person{ 59 | left: 40%; 60 | top: 180%; 61 | height: 40px; 62 | width: 40px; 63 | } 64 | .left-fifth-person{ 65 | left: 95%; 66 | top: 220%; 67 | height: 45px; 68 | width: 45px; 69 | } 70 | .left-sixth-person{ 71 | left: 40%; 72 | top: 265%; 73 | height: 95px; 74 | width: 95px; 75 | } 76 | .right-first-person{ 77 | right: 2%; 78 | top: 0; 79 | height: 60px; 80 | width: 60px; 81 | } 82 | .right-second-person{ 83 | right: 30%; 84 | top: 60%; 85 | height: 70px; 86 | width: 70px; 87 | } 88 | .right-third-person{ 89 | right: 95%; 90 | top: 95%; 91 | height: 50px; 92 | width: 50px; 93 | } 94 | .right-fourth-person{ 95 | right: 66%; 96 | top: 145%; 97 | height: 40px; 98 | width: 40px; 99 | } 100 | .right-fifth-person{ 101 | right: 90%; 102 | top: 210%; 103 | height: 100px; 104 | width: 100px; 105 | } 106 | .right-sixth-person{ 107 | right: 15%; 108 | top: 240%; 109 | height: 70px; 110 | width: 70px; 111 | } 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | @each $color, $value in $colors { 2 | @include bg-variant(".bg-#{$color}", $value); 3 | } 4 | 5 | @each $color, $value in $theme-colors { 6 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 7 | } 8 | 9 | @each $color, $value in $colors { 10 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 11 | } 12 | 13 | 14 | // Sections 15 | 16 | section { 17 | //background-color: section-color("primary"); 18 | } 19 | 20 | @each $color, $value in $section-colors { 21 | @include bg-variant(".section-#{$color}", $value); 22 | } 23 | 24 | @each $color, $value in $theme-colors { 25 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 26 | } 27 | 28 | 29 | // Shape (svg) fill colors 30 | @each $color, $value in $theme-colors { 31 | .fill-#{$color} { 32 | fill: $value; 33 | } 34 | 35 | .stroke-#{$color} { 36 | stroke: $value; 37 | } 38 | } 39 | 40 | .fill-opacity-8 { 41 | fill-opacity: .8; 42 | } -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_floating.scss: -------------------------------------------------------------------------------- 1 | .floating { 2 | animation: floating 3s ease infinite; 3 | will-change: transform; 4 | 5 | &:hover { 6 | animation-play-state: paused; 7 | } 8 | } 9 | 10 | .floating-lg { 11 | animation: floating-lg 3s ease infinite; 12 | } 13 | 14 | .floating-sm { 15 | animation: floating-sm 3s ease infinite; 16 | } 17 | 18 | // Keyframes 19 | 20 | @keyframes floating-lg { 21 | 0% { 22 | transform: translateY(0px) 23 | } 24 | 50% { 25 | transform: translateY(15px) 26 | } 27 | 100% { 28 | transform: translateY(0px) 29 | } 30 | } 31 | 32 | @keyframes floating { 33 | 0% { 34 | transform: translateY(0px) 35 | } 36 | 50% { 37 | transform: translateY(10px) 38 | } 39 | 100% { 40 | transform: translateY(0px) 41 | } 42 | } 43 | 44 | @keyframes floating-sm { 45 | 0% { 46 | transform: translateY(0px) 47 | } 48 | 50% { 49 | transform: translateY(5px) 50 | } 51 | 100% { 52 | transform: translateY(0px) 53 | } 54 | } -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_helper.scss: -------------------------------------------------------------------------------- 1 | // Image 2 | 3 | .img-center { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | 9 | // Clearfix 10 | 11 | .floatfix { 12 | &:before, 13 | &:after { 14 | content: ''; 15 | display: table; 16 | } 17 | &:after { 18 | clear: both; 19 | } 20 | } 21 | 22 | // Overflows 23 | 24 | .overflow-visible { 25 | overflow: visible !important; 26 | } 27 | .overflow-hidden { 28 | overflow: hidden !important; 29 | } 30 | 31 | // Opacity classes 32 | 33 | .opacity-1 { 34 | opacity: .1 !important; 35 | } 36 | .opacity-2 { 37 | opacity: .2 !important; 38 | } 39 | .opacity-3 { 40 | opacity: .3 !important; 41 | } 42 | .opacity-4 { 43 | opacity: .4 !important; 44 | } 45 | .opacity-5 { 46 | opacity: .5 !important; 47 | } 48 | .opacity-6 { 49 | opacity: .6 !important; 50 | } 51 | .opacity-7 { 52 | opacity: .7 !important; 53 | } 54 | .opacity-8 { 55 | opacity: .8 !important; 56 | } 57 | .opacity-8 { 58 | opacity: .9 !important; 59 | } 60 | .opacity-10 { 61 | opacity: 1 !important; 62 | } -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | @each $size, $value in $spacers { 2 | .top-#{$size} { 3 | top: $value; 4 | } 5 | .right-#{$size} { 6 | right: $value; 7 | } 8 | .bottom-#{$size} { 9 | bottom: $value; 10 | } 11 | .left-#{$size} { 12 | left: $value; 13 | } 14 | } 15 | 16 | .center { 17 | left: 50%; 18 | transform: translateX(-50%); 19 | } -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | [class*="shadow"] { 2 | @if $enable-transitions { 3 | transition: $transition-base; 4 | } 5 | } 6 | 7 | .shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; } 8 | .shadow--hover:hover { box-shadow: $box-shadow !important; } 9 | .shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; } 10 | .shadow-none--hover:hover { box-shadow: none !important; } 11 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | // Height values in vh 2 | 3 | .h-100vh { 4 | height: 100vh !important; 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_spacing.scss: -------------------------------------------------------------------------------- 1 | // Spacing columns vertically 2 | 3 | .row.row-grid > [class*="col-"] + [class*="col-"] { 4 | margin-top: 3rem; 5 | } 6 | 7 | @include media-breakpoint-up(lg) { 8 | .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] { 9 | margin-top: 0; 10 | } 11 | } 12 | @include media-breakpoint-up(md) { 13 | .row.row-grid > [class*="col-md-"] + [class*="col-md-"] { 14 | margin-top: 0; 15 | } 16 | } 17 | @include media-breakpoint-up(sm) { 18 | .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] { 19 | margin-top: 0; 20 | } 21 | } 22 | 23 | .row-grid + .row-grid { 24 | margin-top: 3rem; 25 | } 26 | 27 | // Negative margins and paddings 28 | 29 | @media(min-width: 992px) { 30 | [class*="mt--"], 31 | [class*="mr--"], 32 | [class*="mb--"], 33 | [class*="ml--"] { 34 | position: relative; 35 | z-index: 5; 36 | } 37 | 38 | 39 | // Large negative margins in pixels 40 | 41 | .mt--100 { 42 | margin-top: -100px !important; 43 | } 44 | .mr--100 { 45 | margin-right: -100px !important; 46 | } 47 | .mb--100 { 48 | margin-bottom: -100px !important; 49 | } 50 | .ml--100 { 51 | margin-left: -100px !important; 52 | } 53 | .mt--150 { 54 | margin-top: -150px !important; 55 | } 56 | .mb--150 { 57 | margin-bottom: -150px !important; 58 | } 59 | .mt--200 { 60 | margin-top: -200px !important; 61 | } 62 | .mb--200 { 63 | margin-bottom: -200px !important; 64 | } 65 | .mt--300 { 66 | margin-top: -300px !important; 67 | } 68 | .mb--300 { 69 | margin-bottom: -300px !important; 70 | } 71 | 72 | 73 | // Large margins in pixels 74 | 75 | .pt-100 { 76 | padding-top: 100px !important; 77 | } 78 | .pb-100 { 79 | padding-bottom: 100px !important; 80 | } 81 | .pt-150 { 82 | padding-top: 150px !important; 83 | } 84 | .pb-150 { 85 | padding-bottom: 150px !important; 86 | } 87 | .pt-200 { 88 | padding-top: 200px !important; 89 | } 90 | .pb-200 { 91 | padding-bottom: 200px !important; 92 | } 93 | .pt-250 { 94 | padding-top: 250px !important; 95 | } 96 | .pb-250 { 97 | padding-bottom: 250px !important; 98 | } 99 | .pt-300 { 100 | padding-top: 300px!important; 101 | } 102 | .pb-300 { 103 | padding-bottom: 300px!important; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | // Weight and italics 2 | 3 | .font-weight-300 { font-weight: 300 !important; } 4 | .font-weight-400 { font-weight: 400 !important; } 5 | .font-weight-500 { font-weight: 500 !important; } 6 | .font-weight-600 { font-weight: 600 !important; } 7 | .font-weight-700 { font-weight: 700 !important; } 8 | .font-weight-800 { font-weight: 800 !important; } 9 | .font-weight-900 { font-weight: 900 !important; } 10 | 11 | 12 | // Text decorations 13 | 14 | .text-underline { text-decoration: underline; } 15 | .text-through { text-decoration: line-through; } 16 | 17 | 18 | // Line heights 19 | 20 | .lh-100 { line-height: 1; } 21 | .lh-110 { line-height: 1.1; } 22 | .lh-120 { line-height: 1.2; } 23 | .lh-130 { line-height: 1.3; } 24 | .lh-140 { line-height: 1.4; } 25 | .lh-150 { line-height: 1.5; } 26 | .lh-160 { line-height: 1.6; } 27 | .lh-170 { line-height: 1.7; } 28 | .lh-180 { line-height: 1.8; } 29 | 30 | //Contextual colors 31 | 32 | .text-muted { color: $text-muted !important; } 33 | 34 | 35 | 36 | // Letter spacings 37 | 38 | .ls-1 { letter-spacing: .0625rem; } 39 | .ls-15 { letter-spacing: .09375rem; } 40 | .ls-2 { letter-spacing: 0.125rem; } 41 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/utilities/_transform.scss: -------------------------------------------------------------------------------- 1 | @include media-breakpoint-up(lg) { 2 | .transform-perspective-right { 3 | transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); 4 | } 5 | .transform-perspective-left{ 6 | transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/vendor/_plugin-animate-bootstrap-notify.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | @charset "UTF-8"; 34 | 35 | /*! 36 | Animate.css - http://daneden.me/animate 37 | Licensed under the MIT license - http://opensource.org/licenses/MIT 38 | 39 | Copyright (c) 2015 Daniel Eden 40 | */ 41 | 42 | .animated { 43 | -webkit-animation-duration: 1s; 44 | animation-duration: 1s; 45 | -webkit-animation-fill-mode: both; 46 | animation-fill-mode: both; 47 | } 48 | 49 | .animated.infinite { 50 | -webkit-animation-iteration-count: infinite; 51 | animation-iteration-count: infinite; 52 | } 53 | 54 | .animated.hinge { 55 | -webkit-animation-duration: 2s; 56 | animation-duration: 2s; 57 | } 58 | 59 | .animated.bounceIn, 60 | .animated.bounceOut { 61 | -webkit-animation-duration: .75s; 62 | animation-duration: .75s; 63 | } 64 | 65 | .animated.flipOutX, 66 | .animated.flipOutY { 67 | -webkit-animation-duration: .75s; 68 | animation-duration: .75s; 69 | } 70 | 71 | @-webkit-keyframes shake { 72 | from, to { 73 | -webkit-transform: translate3d(0, 0, 0); 74 | transform: translate3d(0, 0, 0); 75 | } 76 | 77 | 10%, 30%, 50%, 70%, 90% { 78 | -webkit-transform: translate3d(-10px, 0, 0); 79 | transform: translate3d(-10px, 0, 0); 80 | } 81 | 82 | 20%, 40%, 60%, 80% { 83 | -webkit-transform: translate3d(10px, 0, 0); 84 | transform: translate3d(10px, 0, 0); 85 | } 86 | } 87 | 88 | @keyframes shake { 89 | from, to { 90 | -webkit-transform: translate3d(0, 0, 0); 91 | transform: translate3d(0, 0, 0); 92 | } 93 | 94 | 10%, 30%, 50%, 70%, 90% { 95 | -webkit-transform: translate3d(-10px, 0, 0); 96 | transform: translate3d(-10px, 0, 0); 97 | } 98 | 99 | 20%, 40%, 60%, 80% { 100 | -webkit-transform: translate3d(10px, 0, 0); 101 | transform: translate3d(10px, 0, 0); 102 | } 103 | } 104 | 105 | .shake { 106 | -webkit-animation-name: shake; 107 | animation-name: shake; 108 | } 109 | 110 | 111 | 112 | @-webkit-keyframes fadeInDown { 113 | from { 114 | opacity: 0; 115 | -webkit-transform: translate3d(0, -100%, 0); 116 | transform: translate3d(0, -100%, 0); 117 | } 118 | 119 | to { 120 | opacity: 1; 121 | -webkit-transform: none; 122 | transform: none; 123 | } 124 | } 125 | 126 | @keyframes fadeInDown { 127 | from { 128 | opacity: 0; 129 | -webkit-transform: translate3d(0, -100%, 0); 130 | transform: translate3d(0, -100%, 0); 131 | } 132 | 133 | to { 134 | opacity: 1; 135 | -webkit-transform: none; 136 | transform: none; 137 | } 138 | } 139 | 140 | .fadeInDown { 141 | -webkit-animation-name: fadeInDown; 142 | animation-name: fadeInDown; 143 | } 144 | 145 | 146 | @-webkit-keyframes fadeOut { 147 | from { 148 | opacity: 1; 149 | } 150 | 151 | to { 152 | opacity: 0; 153 | } 154 | } 155 | 156 | @keyframes fadeOut { 157 | from { 158 | opacity: 1; 159 | } 160 | 161 | to { 162 | opacity: 0; 163 | } 164 | } 165 | 166 | .fadeOut { 167 | -webkit-animation-name: fadeOut; 168 | animation-name: fadeOut; 169 | } 170 | 171 | @-webkit-keyframes fadeOutDown { 172 | from { 173 | opacity: 1; 174 | } 175 | 176 | to { 177 | opacity: 0; 178 | -webkit-transform: translate3d(0, 100%, 0); 179 | transform: translate3d(0, 100%, 0); 180 | } 181 | } 182 | 183 | @keyframes fadeOutDown { 184 | from { 185 | opacity: 1; 186 | } 187 | 188 | to { 189 | opacity: 0; 190 | -webkit-transform: translate3d(0, 100%, 0); 191 | transform: translate3d(0, 100%, 0); 192 | } 193 | } 194 | 195 | .fadeOutDown { 196 | -webkit-animation-name: fadeOutDown; 197 | animation-name: fadeOutDown; 198 | } 199 | 200 | @-webkit-keyframes fadeOutUp { 201 | from { 202 | opacity: 1; 203 | } 204 | 205 | to { 206 | opacity: 0; 207 | -webkit-transform: translate3d(0, -100%, 0); 208 | transform: translate3d(0, -100%, 0); 209 | } 210 | } 211 | 212 | @keyframes fadeOutUp { 213 | from { 214 | opacity: 1; 215 | } 216 | 217 | to { 218 | opacity: 0; 219 | -webkit-transform: translate3d(0, -100%, 0); 220 | transform: translate3d(0, -100%, 0); 221 | } 222 | } 223 | 224 | .fadeOutUp { 225 | -webkit-animation-name: fadeOutUp; 226 | animation-name: fadeOutUp; 227 | } 228 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/custom/vendor/_plugin-perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Container style 3 | */ 4 | .ps { 5 | overflow: hidden !important; 6 | overflow-anchor: none; 7 | -ms-overflow-style: none; 8 | touch-action: auto; 9 | -ms-touch-action: auto; 10 | } 11 | 12 | /* 13 | * Scrollbar rail styles 14 | */ 15 | .ps__rail-x { 16 | display: none; 17 | opacity: 0; 18 | transition: background-color .2s linear, opacity .2s linear; 19 | -webkit-transition: background-color .2s linear, opacity .2s linear; 20 | height: 15px; 21 | /* there must be 'bottom' or 'top' for ps__rail-x */ 22 | bottom: 0px; 23 | /* please don't change 'position' */ 24 | position: absolute; 25 | } 26 | 27 | .ps__rail-y { 28 | display: none; 29 | opacity: 0; 30 | transition: background-color .2s linear, opacity .2s linear; 31 | -webkit-transition: background-color .2s linear, opacity .2s linear; 32 | width: 15px; 33 | /* there must be 'right' or 'left' for ps__rail-y */ 34 | right: 0; 35 | /* please don't change 'position' */ 36 | position: absolute; 37 | } 38 | 39 | .ps--active-x > .ps__rail-x, 40 | .ps--active-y > .ps__rail-y { 41 | display: block; 42 | background-color: transparent; 43 | } 44 | 45 | .ps:hover > .ps__rail-x, 46 | .ps:hover > .ps__rail-y, 47 | .ps--focus > .ps__rail-x, 48 | .ps--focus > .ps__rail-y, 49 | .ps--scrolling-x > .ps__rail-x, 50 | .ps--scrolling-y > .ps__rail-y { 51 | opacity: 0.6; 52 | } 53 | 54 | .ps .ps__rail-x:hover, 55 | .ps .ps__rail-y:hover, 56 | .ps .ps__rail-x:focus, 57 | .ps .ps__rail-y:focus, 58 | .ps .ps__rail-x.ps--clicking, 59 | .ps .ps__rail-y.ps--clicking { 60 | background-color: #eee; 61 | opacity: 0.9; 62 | } 63 | 64 | /* 65 | * Scrollbar thumb styles 66 | */ 67 | .ps__thumb-x { 68 | background-color: #aaa; 69 | border-radius: 6px; 70 | transition: background-color .2s linear, height .2s ease-in-out; 71 | -webkit-transition: background-color .2s linear, height .2s ease-in-out; 72 | height: 6px; 73 | /* there must be 'bottom' for ps__thumb-x */ 74 | bottom: 2px; 75 | /* please don't change 'position' */ 76 | position: absolute; 77 | } 78 | 79 | .ps__thumb-y { 80 | background-color: #aaa; 81 | border-radius: 6px; 82 | transition: background-color .2s linear, width .2s ease-in-out; 83 | -webkit-transition: background-color .2s linear, width .2s ease-in-out; 84 | width: 6px; 85 | /* there must be 'right' for ps__thumb-y */ 86 | right: 2px; 87 | /* please don't change 'position' */ 88 | position: absolute; 89 | } 90 | 91 | .ps__rail-x:hover > .ps__thumb-x, 92 | .ps__rail-x:focus > .ps__thumb-x, 93 | .ps__rail-x.ps--clicking .ps__thumb-x { 94 | background-color: #999; 95 | height: 11px; 96 | } 97 | 98 | .ps__rail-y:hover > .ps__thumb-y, 99 | .ps__rail-y:focus > .ps__thumb-y, 100 | .ps__rail-y.ps--clicking .ps__thumb-y { 101 | background-color: #999; 102 | width: 11px; 103 | } 104 | 105 | /* MS supports */ 106 | @supports (-ms-overflow-style: none) { 107 | .ps { 108 | overflow: auto !important; 109 | } 110 | } 111 | 112 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 113 | .ps { 114 | overflow: auto !important; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | button.close { 3 | margin-top: -1px; 4 | color: $white; 5 | opacity: 0.9; 6 | text-shadow: none; 7 | line-height: 0; 8 | outline: 0; 9 | &::after { 10 | display: inline-block; 11 | font: normal normal normal 1em/1 "Nucleo"; 12 | vertical-align: middle; 13 | speak: none; 14 | text-transform: none; 15 | -webkit-font-smoothing: antialiased; 16 | font-size: 1rem; 17 | content: "\ea48"; 18 | } 19 | span { 20 | display: none !important; 21 | } 22 | } 23 | &.alert-dismissible { 24 | padding-right: 1.25rem; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_badges.scss: -------------------------------------------------------------------------------- 1 | .badge { 2 | & + .badge { 3 | margin-left: 4px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | & + .btn { 3 | margin-left: 4px; 4 | } 5 | } 6 | .btn-group + .btn-group { 7 | margin-left: 4px; 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_carousel.scss: -------------------------------------------------------------------------------- 1 | .carousel { 2 | .carousel-control-prev .carousel-control-prev-icon, 3 | .carousel-control-next .carousel-control-next-icon{ 4 | display: inline-block; 5 | font: normal normal normal 1em/1 'Nucleo'; 6 | vertical-align: middle; 7 | speak: none; 8 | text-transform: none; 9 | -webkit-font-smoothing: antialiased; 10 | background-image: none; 11 | } 12 | .carousel-control-prev .carousel-control-prev-icon:before{ 13 | content: "\ea34"; 14 | } 15 | .carousel-control-next .carousel-control-next-icon:before{ 16 | content: "\ea35"; 17 | } 18 | .carousel-caption h3 { 19 | display: none; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_checkboxes-radio.scss: -------------------------------------------------------------------------------- 1 | .form-check input[type="checkbox"]:checked + .form-check-sign::before, 2 | .form-check input[type="checkbox"]:checked + .form-check-sign::before, 3 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 4 | background-color: $info; 5 | } 6 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after, 7 | .form-check-radio input[type="radio"]:checked + .form-check-sign::before{ 8 | border-color: $info; 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_custom-forms.scss: -------------------------------------------------------------------------------- 1 | .custom-switch { 2 | .custom-control-label { 3 | vertical-align: middle; 4 | &::before { 5 | height: 22px; 6 | width: 45px; 7 | border: none; 8 | background-image: url($asset-base-path + "/img/darken-night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png"); 9 | background-position: center center; 10 | background-size: cover; 11 | } 12 | &::after { 13 | height: 18px; 14 | width: 18px; 15 | background-color: rgba(156, 156, 156, 0.9); 16 | transition: all 0.25s ease-out; 17 | } 18 | } 19 | .custom-control-input:checked { 20 | ~ .custom-control-label::before { 21 | background-image: url($asset-base-path + "/img/night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png"); 22 | } 23 | ~ .custom-control-label::after { 24 | background-color: $white; 25 | transform: translateX(23px); 26 | } 27 | } 28 | &:hover { 29 | .custom-control-label::after { 30 | width: 23px; 31 | } 32 | .custom-control-input:checked ~ .custom-control-label::after { 33 | margin-left: -5px; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_example-pages.scss: -------------------------------------------------------------------------------- 1 | // style for the landing page 2 | .index-page .squares{ 3 | @include linear-gradient($info-states, $info); 4 | } 5 | .register-page, .section.section-signup{ 6 | .squares, .square { 7 | @include linear-gradient($primary-states, $primary); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | border-color: #8c3db9; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control:focus, 2 | .form-control:focus + .input-group-append .input-group-text, 3 | .form-control:focus ~ .input-group-append .input-group-text, 4 | .form-control:focus + .input-group-prepend .input-group-text, 5 | .form-control:focus ~ .input-group-prepend .input-group-text, 6 | .input-group-focus .input-group-prepend .input-group-text, 7 | .input-group-focus .input-group-append .input-group-text { 8 | border-color: $info; 9 | } 10 | .has-danger .form-control:focus { 11 | border-color: lighten($danger-states,5%); 12 | } 13 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_modal.scss: -------------------------------------------------------------------------------- 1 | .modal-footer { 2 | padding: $modal-inner-padding; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_navbar.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 991px){ 2 | .navbar-nav .dropdown-menu { 3 | position: static !important; 4 | float: none; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_sections.scss: -------------------------------------------------------------------------------- 1 | .section-examples .container .col-sm-6 img{ 2 | border-color: $info; 3 | } 4 | @include media-breakpoint-down(xs) { 5 | .page-header{ 6 | .content-center { 7 | &.brand { 8 | width: unset; 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/_type.scss: -------------------------------------------------------------------------------- 1 | .blockquote{ 2 | &.blockquote-info{ 3 | border-color: $info; 4 | color: $info; 5 | small{ 6 | color: $info; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/plugins/_plugin-nouislider.scss: -------------------------------------------------------------------------------- 1 | /*! nouislider - 14.1.1 - 12/15/2020 */ 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-tap-highlight-color: rgba(0, 0, 0, 0); 10 | -webkit-user-select: none; 11 | -ms-touch-action: none; 12 | touch-action: none; 13 | -ms-user-select: none; 14 | -moz-user-select: none; 15 | user-select: none; 16 | -moz-box-sizing: border-box; 17 | box-sizing: border-box; 18 | } 19 | .noUi-target { 20 | position: relative; 21 | } 22 | .noUi-base, 23 | .noUi-connects { 24 | width: 100%; 25 | height: 100%; 26 | position: relative; 27 | z-index: 1; 28 | } 29 | /* Wrapper for all connect elements. 30 | */ 31 | .noUi-connects { 32 | overflow: hidden; 33 | z-index: 0; 34 | } 35 | .noUi-connect, 36 | .noUi-origin { 37 | will-change: transform; 38 | position: absolute; 39 | z-index: 1; 40 | top: 0; 41 | right: 0; 42 | -ms-transform-origin: 0 0; 43 | -webkit-transform-origin: 0 0; 44 | -webkit-transform-style: preserve-3d; 45 | transform-origin: 0 0; 46 | transform-style: flat; 47 | } 48 | .noUi-connect { 49 | height: 100%; 50 | width: 100%; 51 | } 52 | .noUi-origin { 53 | height: 10%; 54 | width: 10%; 55 | } 56 | /* Offset direction 57 | */ 58 | .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { 59 | left: 0; 60 | right: auto; 61 | } 62 | /* Give origins 0 height/width so they don't interfere with clicking the 63 | * connect elements. 64 | */ 65 | .noUi-vertical .noUi-origin { 66 | width: 0; 67 | } 68 | .noUi-horizontal .noUi-origin { 69 | height: 0; 70 | } 71 | .noUi-handle { 72 | -webkit-backface-visibility: hidden; 73 | backface-visibility: hidden; 74 | position: absolute; 75 | } 76 | .noUi-touch-area { 77 | height: 100%; 78 | width: 100%; 79 | } 80 | .noUi-state-tap .noUi-connect, 81 | .noUi-state-tap .noUi-origin { 82 | -webkit-transition: transform 0.3s; 83 | transition: transform 0.3s; 84 | } 85 | .noUi-state-drag * { 86 | cursor: inherit !important; 87 | } 88 | /* Slider size and handle placement; 89 | */ 90 | .noUi-horizontal { 91 | height: 1px; 92 | } 93 | .noUi-horizontal .noUi-handle { 94 | height: 15px; 95 | width: 15px; 96 | right: -17px; 97 | } 98 | .noUi-vertical { 99 | width: 18px; 100 | } 101 | .noUi-vertical .noUi-handle { 102 | height: 15px; 103 | width: 15px; 104 | top: -17px; 105 | } 106 | .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { 107 | left: -17px; 108 | right: auto; 109 | } 110 | /* Styling; 111 | * Giving the connect element a border radius causes issues with using transform: scale 112 | */ 113 | 114 | .noUi-connects { 115 | border-radius: 3px; 116 | } 117 | .noUi-connect { 118 | background: $default; 119 | } 120 | /* Handles and cursors; 121 | */ 122 | .noUi-draggable { 123 | cursor: ew-resize; 124 | } 125 | .noUi-vertical .noUi-draggable { 126 | cursor: ns-resize; 127 | } 128 | .noUi-active { 129 | box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; 130 | } 131 | 132 | /* Disabled state; 133 | */ 134 | [disabled] .noUi-connect { 135 | background: #B8B8B8; 136 | } 137 | [disabled].noUi-target, 138 | [disabled].noUi-handle, 139 | [disabled] .noUi-handle { 140 | cursor: not-allowed; 141 | } 142 | /* Base; 143 | * 144 | */ 145 | .noUi-pips, 146 | .noUi-pips * { 147 | -moz-box-sizing: border-box; 148 | box-sizing: border-box; 149 | } 150 | .noUi-pips { 151 | position: absolute; 152 | color: #999; 153 | } 154 | /* Values; 155 | * 156 | */ 157 | .noUi-value { 158 | position: absolute; 159 | white-space: nowrap; 160 | text-align: center; 161 | } 162 | .noUi-value-sub { 163 | color: #ccc; 164 | font-size: 10px; 165 | } 166 | /* Markings; 167 | * 168 | */ 169 | .noUi-marker { 170 | position: absolute; 171 | background: #CCC; 172 | } 173 | .noUi-marker-sub { 174 | background: #AAA; 175 | } 176 | .noUi-marker-large { 177 | background: #AAA; 178 | } 179 | /* Horizontal layout; 180 | * 181 | */ 182 | .noUi-pips-horizontal { 183 | padding: 10px 0; 184 | height: 80px; 185 | top: 100%; 186 | left: 0; 187 | width: 100%; 188 | } 189 | .noUi-value-horizontal { 190 | -webkit-transform: translate(-50%, 50%); 191 | transform: translate(-50%, 50%); 192 | } 193 | .noUi-rtl .noUi-value-horizontal { 194 | -webkit-transform: translate(50%, 50%); 195 | transform: translate(50%, 50%); 196 | } 197 | .noUi-marker-horizontal.noUi-marker { 198 | margin-left: -1px; 199 | width: 2px; 200 | height: 5px; 201 | } 202 | .noUi-marker-horizontal.noUi-marker-sub { 203 | height: 10px; 204 | } 205 | .noUi-marker-horizontal.noUi-marker-large { 206 | height: 15px; 207 | } 208 | /* Vertical layout; 209 | * 210 | */ 211 | .noUi-pips-vertical { 212 | padding: 0 10px; 213 | height: 100%; 214 | top: 0; 215 | left: 100%; 216 | } 217 | .noUi-value-vertical { 218 | -webkit-transform: translate(0, -50%); 219 | transform: translate(0, -50%); 220 | padding-left: 25px; 221 | } 222 | .noUi-rtl .noUi-value-vertical { 223 | -webkit-transform: translate(0, 50%); 224 | transform: translate(0, 50%); 225 | } 226 | .noUi-marker-vertical.noUi-marker { 227 | width: 5px; 228 | height: 2px; 229 | margin-top: -1px; 230 | } 231 | .noUi-marker-vertical.noUi-marker-sub { 232 | width: 10px; 233 | } 234 | .noUi-marker-vertical.noUi-marker-large { 235 | width: 15px; 236 | } 237 | .noUi-tooltip { 238 | display: block; 239 | position: absolute; 240 | border: 1px solid #D9D9D9; 241 | border-radius: 3px; 242 | background: #fff; 243 | color: #000; 244 | padding: 5px; 245 | text-align: center; 246 | white-space: nowrap; 247 | } 248 | .noUi-horizontal .noUi-tooltip { 249 | -webkit-transform: translate(-50%, 0); 250 | transform: translate(-50%, 0); 251 | left: 50%; 252 | bottom: 120%; 253 | } 254 | .noUi-vertical .noUi-tooltip { 255 | -webkit-transform: translate(0, -50%); 256 | transform: translate(0, -50%); 257 | top: 50%; 258 | right: 120%; 259 | } 260 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system-react/react/react-differences.scss: -------------------------------------------------------------------------------- 1 | // Differences from the HTML to the React product 2 | 3 | // react plugins 4 | @import "plugins/plugin-nouislider"; 5 | @import "plugins/plugin-react-datetime"; 6 | 7 | // core components 8 | @import "alerts"; 9 | @import "badges"; 10 | @import "buttons"; 11 | @import "carousel"; 12 | @import "checkboxes-radio"; 13 | @import "custom-forms"; 14 | @import "example-pages"; 15 | @import "footer"; 16 | @import "inputs"; 17 | @import "modal"; 18 | @import "navbar"; 19 | @import "sections"; 20 | @import "type"; 21 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import { Link } from "react-router-dom"; 20 | // reactstrap components 21 | import { 22 | Button, 23 | NavItem, 24 | NavLink, 25 | Nav, 26 | Container, 27 | Row, 28 | Col, 29 | UncontrolledTooltip, 30 | } from "reactstrap"; 31 | 32 | export default function Footer() { 33 | return ( 34 | 132 | ); 133 | } 134 | -------------------------------------------------------------------------------- /src/components/Navbars/ExamplesNavbar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import { Link } from "react-router-dom"; 20 | // reactstrap components 21 | import { 22 | Button, 23 | Collapse, 24 | NavbarBrand, 25 | Navbar, 26 | NavItem, 27 | NavLink, 28 | Nav, 29 | Container, 30 | Row, 31 | Col, 32 | UncontrolledTooltip, 33 | } from "reactstrap"; 34 | 35 | export default function ExamplesNavbar() { 36 | const [collapseOpen, setCollapseOpen] = React.useState(false); 37 | const [collapseOut, setCollapseOut] = React.useState(""); 38 | const [color, setColor] = React.useState("navbar-transparent"); 39 | React.useEffect(() => { 40 | window.addEventListener("scroll", changeColor); 41 | return function cleanup() { 42 | window.removeEventListener("scroll", changeColor); 43 | }; 44 | }, []); 45 | const changeColor = () => { 46 | if ( 47 | document.documentElement.scrollTop > 99 || 48 | document.body.scrollTop > 99 49 | ) { 50 | setColor("bg-info"); 51 | } else if ( 52 | document.documentElement.scrollTop < 100 || 53 | document.body.scrollTop < 100 54 | ) { 55 | setColor("navbar-transparent"); 56 | } 57 | }; 58 | const toggleCollapse = () => { 59 | document.documentElement.classList.toggle("nav-open"); 60 | setCollapseOpen(!collapseOpen); 61 | }; 62 | const onCollapseExiting = () => { 63 | setCollapseOut("collapsing-out"); 64 | }; 65 | const onCollapseExited = () => { 66 | setCollapseOut(""); 67 | }; 68 | return ( 69 | 70 | 71 |
72 | 73 | BLK• 74 | Design System React 75 | 76 | 77 | Designed and Coded by Creative Tim 78 | 79 | 88 |
89 | 96 |
97 | 98 | 99 | e.preventDefault()}> 100 | BLK•React 101 | 102 | 103 | 104 | 111 | 112 | 113 |
114 | 172 | 173 | 174 | 175 | ); 176 | } 177 | -------------------------------------------------------------------------------- /src/components/PageHeader/PageHeader.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Container } from "reactstrap"; 22 | 23 | export default function PageHeader() { 24 | return ( 25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |

BLK• React

36 |

37 | A beautiful Design System for Bootstrap 4 (reactstrap) and React. 38 | It's Free and Open Source. 39 |

40 |
41 | 42 |
43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import ReactDOM from "react-dom/client"; 20 | import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; 21 | 22 | import "assets/css/nucleo-icons.css"; 23 | import "assets/scss/blk-design-system-react.scss"; 24 | import "assets/demo/demo.css"; 25 | 26 | import Index from "views/Index.js"; 27 | import LandingPage from "views/examples/LandingPage.js"; 28 | import RegisterPage from "views/examples/RegisterPage.js"; 29 | import ProfilePage from "views/examples/ProfilePage.js"; 30 | 31 | const root = ReactDOM.createRoot(document.getElementById("root")); 32 | 33 | root.render( 34 | 35 | 36 | } /> 37 | } /> 38 | } /> 39 | } /> 40 | } /> 41 | 42 | 43 | ); 44 | -------------------------------------------------------------------------------- /src/variables/charts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | // used inside src/views/examples/LandingPage.js 19 | const bigChart = { 20 | data: (canvas) => { 21 | let ctx = canvas.getContext("2d"); 22 | 23 | let gradientFill = ctx.createLinearGradient(0, 230, 0, 50); 24 | 25 | gradientFill.addColorStop(1, "rgba(29,140,248,0.2)"); 26 | gradientFill.addColorStop(0.4, "rgba(29,140,248,0.0)"); 27 | gradientFill.addColorStop(0, "rgba(29,140,248,0)"); //blue colors 28 | 29 | return { 30 | labels: [ 31 | "JUN", 32 | "FEB", 33 | "MAR", 34 | "APR", 35 | "MAY", 36 | "JUN", 37 | "JUL", 38 | "AUG", 39 | "SEP", 40 | "OCT", 41 | "NOV", 42 | "DEC", 43 | ], 44 | datasets: [ 45 | { 46 | label: "Data", 47 | fill: true, 48 | backgroundColor: gradientFill, 49 | borderColor: "#1d8cf8", 50 | borderWidth: 2, 51 | borderDash: [], 52 | borderDashOffset: 0.0, 53 | pointBackgroundColor: "#1d8cf8", 54 | pointBorderColor: "rgba(255,255,255,0)", 55 | pointHoverBackgroundColor: "#5464ed", 56 | //pointHoverBorderColor:'rgba(35,46,55,1)', 57 | pointBorderWidth: 20, 58 | pointHoverRadius: 4, 59 | pointHoverBorderWidth: 15, 60 | pointRadius: 4, 61 | data: [80, 160, 200, 160, 250, 280, 220, 190, 200, 250, 290, 320], 62 | }, 63 | ], 64 | }; 65 | }, 66 | options: { 67 | maintainAspectRatio: false, 68 | legend: { 69 | display: false, 70 | }, 71 | 72 | tooltips: { 73 | backgroundColor: "#fff", 74 | titleFontColor: "#ccc", 75 | bodyFontColor: "#666", 76 | bodySpacing: 4, 77 | xPadding: 12, 78 | mode: "nearest", 79 | intersect: 0, 80 | position: "nearest", 81 | }, 82 | responsive: true, 83 | scales: { 84 | yAxes: [ 85 | { 86 | barPercentage: 1.6, 87 | gridLines: { 88 | drawBorder: false, 89 | color: "rgba(0,0,0,0.0)", 90 | zeroLineColor: "transparent", 91 | }, 92 | ticks: { 93 | display: false, 94 | suggestedMin: 0, 95 | suggestedMax: 350, 96 | padding: 20, 97 | fontColor: "#9a9a9a", 98 | }, 99 | }, 100 | ], 101 | xAxes: [ 102 | { 103 | barPercentage: 1.6, 104 | gridLines: { 105 | drawBorder: false, 106 | color: "rgba(0,0,0,0)", 107 | zeroLineColor: "transparent", 108 | }, 109 | ticks: { 110 | padding: 20, 111 | fontColor: "#9a9a9a", 112 | }, 113 | }, 114 | ], 115 | }, 116 | }, 117 | }; 118 | 119 | export default bigChart; 120 | -------------------------------------------------------------------------------- /src/views/Index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // core components 21 | import IndexNavbar from "components/Navbars/IndexNavbar.js"; 22 | import PageHeader from "components/PageHeader/PageHeader.js"; 23 | import Footer from "components/Footer/Footer.js"; 24 | 25 | // sections for this page/view 26 | import Basics from "views/IndexSections/Basics.js"; 27 | import Navbars from "views/IndexSections/Navbars.js"; 28 | import Tabs from "views/IndexSections/Tabs.js"; 29 | import Pagination from "views/IndexSections/Pagination.js"; 30 | import Notifications from "views/IndexSections/Notifications.js"; 31 | import Typography from "views/IndexSections/Typography.js"; 32 | import JavaScript from "views/IndexSections/JavaScript.js"; 33 | import NucleoIcons from "views/IndexSections/NucleoIcons.js"; 34 | import Signup from "views/IndexSections/Signup.js"; 35 | import Examples from "views/IndexSections/Examples.js"; 36 | import Download from "views/IndexSections/Download.js"; 37 | 38 | export default function Index() { 39 | React.useEffect(() => { 40 | document.body.classList.toggle("index-page"); 41 | // Specify how to clean up after this effect: 42 | return function cleanup() { 43 | document.body.classList.toggle("index-page"); 44 | }; 45 | }, []); 46 | return ( 47 | <> 48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 |
65 |
66 | 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /src/views/IndexSections/Download.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // reactstrap components 20 | import { Button, Container, Row, Col, UncontrolledTooltip } from "reactstrap"; 21 | 22 | export default function Download() { 23 | return ( 24 |
29 | ... 30 | 31 | 32 | 33 |

34 | Do you love this Bootstrap 4 React Design System? 35 |

36 |

37 | Cause if you do, it can be yours for FREE. Hit the button below to 38 | navigate to Creative Tim where you can find the design system in 39 | React format. Start a new project or give an old Bootstrap project 40 | a new look! 41 |

42 | 43 | 44 | 53 | 54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 | 62 |

63 | Thank you for supporting us! 64 |

65 |

66 | Let's get in touch on any of these platforms. 67 |

68 | 69 | 70 | 78 | 79 | Tweet! 80 | 81 | 89 | 90 | Share! 91 | 92 | 102 | 103 | Star on Github 104 | 105 | 106 | 107 | 108 |
109 | ); 110 | } 111 | -------------------------------------------------------------------------------- /src/views/IndexSections/Examples.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import { Link } from "react-router-dom"; 20 | // reactstrap components 21 | import { Button, Container, Row, Col } from "reactstrap"; 22 | 23 | export default function Examples() { 24 | return ( 25 |
26 | ... 27 |
28 | 29 | 30 | 31 | 32 | ... 37 | 38 | 46 | 47 | 48 | 49 | ... 54 | 55 | 63 | 64 | 65 | 66 |
67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /src/views/IndexSections/Notifications.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // reactstrap components 20 | import { UncontrolledAlert, Container } from "reactstrap"; 21 | 22 | export default function Notifications() { 23 | return ( 24 |
25 | 26 |
27 |

Notifications

28 | 29 | 30 | 31 | Congrats! - 32 | This is a regular notification made with ".alert-primary" 33 | 34 | 35 | 36 | 37 | 38 | Heads up! - 39 | This is a regular notification made with ".alert-info" 40 | 41 | 42 | 43 | 44 | 45 | Well done! - 46 | This is a regular notification made with ".alert-success" 47 | 48 | 49 | 50 | 51 | 52 | Warning! - 53 | This is a regular notification made with ".alert-warning" 54 | 55 | 56 | 57 | 58 | 59 | Oh snap! - 60 | This is a regular notification made with ".alert-danger" 61 | 62 | 63 | 64 |
65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /src/views/IndexSections/NucleoIcons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // reactstrap components 20 | import { Button, Container, Row, Col } from "reactstrap"; 21 | 22 | export default function NucleoIcons() { 23 | return ( 24 |
25 | ... 26 | 27 | 28 | 29 |

Nucleo Icons

30 |

31 | BLK• Design System PRO comes with 100 custom icons made by our 32 | friends from NucleoApp. The official package contains over 2.100 33 | thin icons which are looking great in combination with BLK• Design 34 | System PRO Make sure you check all of them and use those that you 35 | like the most. 36 |

37 |
38 | 47 | 57 |
58 | 59 | 60 | 87 | 88 |
89 | ); 90 | } 91 | -------------------------------------------------------------------------------- /src/views/IndexSections/Signup.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * BLK Design System React - v1.2.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/blk-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import classnames from "classnames"; 20 | import { Link } from "react-router-dom"; 21 | // reactstrap components 22 | import { 23 | Button, 24 | Card, 25 | CardHeader, 26 | CardBody, 27 | CardFooter, 28 | CardImg, 29 | CardTitle, 30 | Label, 31 | FormGroup, 32 | Form, 33 | Input, 34 | InputGroupAddon, 35 | InputGroupText, 36 | InputGroup, 37 | Container, 38 | Row, 39 | Col, 40 | } from "reactstrap"; 41 | 42 | export default function Signup() { 43 | const [fullNameFocus, setFullNameFocus] = React.useState(false); 44 | const [emailFocus, setEmailFocus] = React.useState(false); 45 | const [passwordFocus, setPasswordFocus] = React.useState(false); 46 | return ( 47 |
48 | 49 |
50 |
51 |
52 |
53 | 54 | 55 |

56 | A beautiful Black Design{" "} 57 | completed with examples 58 |

59 |

60 | The Design System comes with four pre-built pages to help you get 61 | started faster. You can change the text and images and you're good 62 | to go. More importantly, looking at them will give you a picture 63 | of what you can built with this powerful Bootstrap 4 Design 64 | System. 65 |

66 |
67 | 70 |
71 | 72 | 73 | 74 | 75 | 79 | Register 80 | 81 | 82 |
83 | 88 | 89 | 90 | 91 | 92 | 93 | setFullNameFocus(true)} 97 | onBlur={(e) => setFullNameFocus(false)} 98 | /> 99 | 100 | 105 | 106 | 107 | 108 | 109 | 110 | setEmailFocus(true)} 114 | onBlur={(e) => setEmailFocus(false)} 115 | /> 116 | 117 | 122 | 123 | 124 | 125 | 126 | 127 | setPasswordFocus(true)} 131 | onBlur={(e) => setPasswordFocus(false)} 132 | /> 133 | 134 | 135 | 143 | 144 | 145 |
146 | 147 | 150 | 151 | 152 | 153 | 154 | 155 |
156 | ); 157 | } 158 | --------------------------------------------------------------------------------