├── .github └── workflows │ └── main.yml ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── angular.json ├── documentation └── documentation.html ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── genezio.yaml ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ └── pages │ │ ├── examples │ │ ├── landingpage │ │ │ ├── landingpage.component.html │ │ │ └── landingpage.component.ts │ │ ├── profilepage │ │ │ ├── profilepage.component.html │ │ │ └── profilepage.component.ts │ │ └── registerpage │ │ │ ├── registerpage.component.html │ │ │ └── registerpage.component.ts │ │ ├── index │ │ ├── index.component.html │ │ └── index.component.ts │ │ └── pages.module.ts ├── assets │ ├── 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 │ │ ├── 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 │ │ ├── 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-red.png │ │ ├── square1.png │ │ ├── square2.png │ │ ├── square3.png │ │ ├── square4.png │ │ ├── square5.png │ │ ├── square6.png │ │ ├── triunghiuri.png │ │ └── waves.png │ └── scss │ │ ├── blk-design-system.scss │ │ └── blk-design-system │ │ ├── angular │ │ ├── _alerts.scss │ │ ├── _datepicker.scss │ │ ├── _example-pages.scss │ │ ├── _pills.scss │ │ └── _tabs.scss │ │ ├── bootstrap │ │ ├── _alert.scss │ │ ├── _badge.scss │ │ ├── _breadcrumb.scss │ │ ├── _button-group.scss │ │ ├── _buttons.scss │ │ ├── _card.scss │ │ ├── _carousel.scss │ │ ├── _close.scss │ │ ├── _code.scss │ │ ├── _custom-forms.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _functions.scss │ │ ├── _grid.scss │ │ ├── _images.scss │ │ ├── _input-group.scss │ │ ├── _jumbotron.scss │ │ ├── _list-group.scss │ │ ├── _media.scss │ │ ├── _mixins.scss │ │ ├── _modal.scss │ │ ├── _nav.scss │ │ ├── _navbar.scss │ │ ├── _pagination.scss │ │ ├── _popover.scss │ │ ├── _print.scss │ │ ├── _progress.scss │ │ ├── _reboot.scss │ │ ├── _root.scss │ │ ├── _tables.scss │ │ ├── _tooltip.scss │ │ ├── _transitions.scss │ │ ├── _type.scss │ │ ├── _utilities.scss │ │ ├── _variables.scss │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _background-variant.scss │ │ │ ├── _badge.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _box-shadow.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _caret.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _float.scss │ │ │ ├── _forms.scss │ │ │ ├── _gradients.scss │ │ │ ├── _grid-framework.scss │ │ │ ├── _grid.scss │ │ │ ├── _hover.scss │ │ │ ├── _image.scss │ │ │ ├── _list-group.scss │ │ │ ├── _lists.scss │ │ │ ├── _nav-divider.scss │ │ │ ├── _pagination.scss │ │ │ ├── _reset-text.scss │ │ │ ├── _resize.scss │ │ │ ├── _screen-reader.scss │ │ │ ├── _size.scss │ │ │ ├── _table-row.scss │ │ │ ├── _text-emphasis.scss │ │ │ ├── _text-hide.scss │ │ │ ├── _text-truncate.scss │ │ │ ├── _transition.scss │ │ │ └── _visibility.scss │ │ └── utilities │ │ │ ├── _align.scss │ │ │ ├── _background.scss │ │ │ ├── _borders.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _display.scss │ │ │ ├── _embed.scss │ │ │ ├── _flex.scss │ │ │ ├── _float.scss │ │ │ ├── _position.scss │ │ │ ├── _screenreaders.scss │ │ │ ├── _shadows.scss │ │ │ ├── _sizing.scss │ │ │ ├── _spacing.scss │ │ │ ├── _text.scss │ │ │ └── _visibility.scss │ │ └── 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 ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.scss ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /.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 the bellow 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-angular\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 http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events.json 15 | speed-measure-plugin.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.2.0] 2021-01-05 4 | ### Updates 5 | - update to Angular 11 6 | - update all dependencies to match Angular 11 version 7 | 8 | ## [1.1.0] 2020-03-11 9 | ### Updates 10 | - update to Angular 9 11 | - update all dependencies to match Angular 9 version 12 | 13 | ## [1.0.0] 2019-09-26 14 | ### Original Release 15 | - Added Angular as base framework 16 | - Added design from BLK Design System by Creative Tim 17 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 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 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from "./app.po"; 2 | import { browser, logging } from "protractor"; 3 | 4 | describe("workspace-project App", () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it("should display welcome message", () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual( 14 | "Welcome to blk-design-system-angular!" 15 | ); 16 | }); 17 | 18 | afterEach(async () => { 19 | // Assert that there are no errors emitted from the browser 20 | const logs = await browser 21 | .manage() 22 | .logs() 23 | .get(logging.Type.BROWSER); 24 | expect(logs).not.toContain( 25 | jasmine.objectContaining({ 26 | level: logging.Level.SEVERE 27 | } as logging.Entry) 28 | ); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from "protractor"; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css("app-root h1")).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: blk-design-system-angular 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: dist/blk-design-system-angular 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 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blk-design-system-angular", 3 | "version": "1.2.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "cross-env CI=false cross-env PUBLIC_URL=/ cross-env NODE_OPTIONS=--openssl-legacy-provider ng build", 8 | "description": "BLK Design System Angular: Free Angular Design System For Bootstrap 4 and Angular", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e", 12 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/creativetimofficial/blk-design-system-angular.git" 17 | }, 18 | "keywords": [ 19 | "design system", 20 | "angular design system", 21 | "bootstrap 4 design system", 22 | "angular design system", 23 | "bootstrap 4 design", 24 | "angular design", 25 | "bootstrap 4 system", 26 | "angular system", 27 | "angular", 28 | "bootstrap 4 ui kit", 29 | "angular uit kit", 30 | "bootstrap 4 kit", 31 | "angular kit", 32 | "blk", 33 | "black", 34 | "black angular", 35 | "black kit", 36 | "blk ui kit", 37 | "blk angular ui kit", 38 | "creative tim", 39 | "creative tim angular", 40 | "html kit", 41 | "angular kit", 42 | "html css template", 43 | "angular css template", 44 | "web template", 45 | "angular template", 46 | "bootstrap", 47 | "bootstrap 4", 48 | "css3 template", 49 | "frontend", 50 | "angular frontend", 51 | "responsive bootstrap template", 52 | "responsive angular template", 53 | "bootstrap ui kit", 54 | "responsive ui kit", 55 | "responsive angular ui kit", 56 | "blk design system", 57 | "blk design system angular" 58 | ], 59 | "author": "Creative Tim (https://www.creative-tim.com/)", 60 | "license": "MIT", 61 | "bugs": { 62 | "url": "https://github.com/creativetimofficial/blk-design-system-angular/issues" 63 | }, 64 | "homepage": "https://demos.creative-tim.com/blk-design-system-angular/", 65 | "private": false, 66 | "dependencies": { 67 | "@angular/animations": "11.2.14", 68 | "@angular/common": "11.2.14", 69 | "@angular/compiler": "11.2.14", 70 | "@angular/core": "11.2.14", 71 | "@angular/forms": "11.2.14", 72 | "@angular/platform-browser": "11.2.14", 73 | "@angular/platform-browser-dynamic": "11.2.14", 74 | "@angular/router": "11.2.14", 75 | "chart.js": "2.9.4", 76 | "core-js": "3.8.2", 77 | "jw-bootstrap-switch-ng2": "2.0.5", 78 | "ngx-bootstrap": "6.2.0", 79 | "nouislider": "14.6.3", 80 | "rxjs": "6.6.3", 81 | "tslib": "2.0.3", 82 | "zone.js": "0.11.3" 83 | }, 84 | "devDependencies": { 85 | "@angular-devkit/build-angular": "12.2.18", 86 | "@angular/cli": "11.2.19", 87 | "@angular/compiler-cli": "11.2.14", 88 | "@angular/language-service": "11.2.14", 89 | "@types/node": "14.14.20", 90 | "@types/jasmine": "3.6.2", 91 | "@types/jasminewd2": "2.0.8", 92 | "codelyzer": "6.0.1", 93 | "jasmine-core": "3.6.0", 94 | "jasmine-spec-reporter": "6.0.0", 95 | "karma": "5.2.3", 96 | "karma-chrome-launcher": "3.1.0", 97 | "karma-coverage-istanbul-reporter": "3.0.3", 98 | "karma-jasmine": "4.0.1", 99 | "karma-jasmine-html-reporter": "1.5.4", 100 | "protractor": "7.0.0", 101 | "ts-node": "9.1.1", 102 | "tslint": "6.1.3", 103 | "typescript": "4.0.3", 104 | "cross-env": "7.0.3" 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { CommonModule } from "@angular/common"; 3 | import { BrowserModule } from "@angular/platform-browser"; 4 | import { Routes, RouterModule } from "@angular/router"; 5 | 6 | import { IndexComponent } from "./pages/index/index.component"; 7 | import { ProfilepageComponent } from "./pages/examples/profilepage/profilepage.component"; 8 | import { RegisterpageComponent } from "./pages/examples/registerpage/registerpage.component"; 9 | import { LandingpageComponent } from "./pages/examples/landingpage/landingpage.component"; 10 | 11 | const routes: Routes = [ 12 | { path: "", redirectTo: "home", pathMatch: "full" }, 13 | { path: "home", component: IndexComponent }, 14 | { path: "profile", component: ProfilepageComponent }, 15 | { path: "register", component: RegisterpageComponent }, 16 | { path: "landing", component: LandingpageComponent } 17 | ]; 18 | 19 | @NgModule({ 20 | imports: [ 21 | CommonModule, 22 | BrowserModule, 23 | RouterModule.forRoot(routes, { 24 | useHash: true 25 | }) 26 | ], 27 | exports: [] 28 | }) 29 | export class AppRoutingModule {} 30 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from "@angular/core/testing"; 2 | import { RouterTestingModule } from "@angular/router/testing"; 3 | import { AppComponent } from "./app.component"; 4 | 5 | describe("AppComponent", () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [RouterTestingModule], 9 | declarations: [AppComponent] 10 | }).compileComponents(); 11 | })); 12 | 13 | it("should create the app", () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'blk-design-system-angular'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.debugElement.componentInstance; 22 | expect(app.title).toEqual("blk-design-system-angular"); 23 | }); 24 | 25 | it("should render title in a h1 tag", () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.debugElement.nativeElement; 29 | expect(compiled.querySelector("h1").textContent).toContain( 30 | "Welcome to blk-design-system-angular!" 31 | ); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | OnInit, 4 | Renderer2, 5 | HostListener, 6 | Inject 7 | } from "@angular/core"; 8 | import { Location } from "@angular/common"; 9 | import { DOCUMENT } from "@angular/common"; 10 | 11 | @Component({ 12 | selector: "app-root", 13 | templateUrl: "./app.component.html", 14 | styleUrls: ["./app.component.scss"] 15 | }) 16 | export class AppComponent implements OnInit { 17 | constructor( 18 | private renderer: Renderer2, 19 | public location: Location, 20 | @Inject(DOCUMENT) document 21 | ) {} 22 | @HostListener("window:scroll", ["$event"]) 23 | onWindowScroll(e) { 24 | if (window.pageYOffset > 100) { 25 | var element = document.getElementById("navbar-top"); 26 | if (element) { 27 | element.classList.remove("navbar-transparent"); 28 | element.classList.add("bg-danger"); 29 | } 30 | } else { 31 | var element = document.getElementById("navbar-top"); 32 | if (element) { 33 | element.classList.add("navbar-transparent"); 34 | element.classList.remove("bg-danger"); 35 | } 36 | } 37 | } 38 | ngOnInit() { 39 | this.onWindowScroll(event); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; 2 | import { NgModule } from "@angular/core"; 3 | import { FormsModule } from "@angular/forms"; 4 | import { RouterModule } from "@angular/router"; 5 | import { AppRoutingModule } from "./app-routing.module"; 6 | import { AppComponent } from "./app.component"; 7 | import { HttpClientModule } from "@angular/common/http"; 8 | 9 | import { BsDropdownModule } from "ngx-bootstrap/dropdown"; 10 | import { ProgressbarModule } from "ngx-bootstrap/progressbar"; 11 | import { TooltipModule } from "ngx-bootstrap/tooltip"; 12 | import { CollapseModule } from "ngx-bootstrap/collapse"; 13 | import { TabsModule } from "ngx-bootstrap/tabs"; 14 | import { PaginationModule } from "ngx-bootstrap/pagination"; 15 | import { AlertModule } from "ngx-bootstrap/alert"; 16 | import { BsDatepickerModule } from "ngx-bootstrap/datepicker"; 17 | import { CarouselModule } from "ngx-bootstrap/carousel"; 18 | import { ModalModule } from "ngx-bootstrap/modal"; 19 | 20 | import { PagesModule } from "./pages/pages.module"; 21 | 22 | import { IndexComponent } from "./pages/index/index.component"; 23 | import { ProfilepageComponent } from "./pages/examples/profilepage/profilepage.component"; 24 | import { RegisterpageComponent } from "./pages/examples/registerpage/registerpage.component"; 25 | import { LandingpageComponent } from "./pages/examples/landingpage/landingpage.component"; 26 | @NgModule({ 27 | declarations: [ 28 | AppComponent 29 | // IndexComponent, 30 | // ProfilepageComponent, 31 | // RegisterpageComponent, 32 | // LandingpageComponent 33 | ], 34 | imports: [ 35 | BrowserAnimationsModule, 36 | FormsModule, 37 | HttpClientModule, 38 | RouterModule, 39 | AppRoutingModule, 40 | // BsDropdownModule.forRoot(), 41 | // ProgressbarModule.forRoot(), 42 | // TooltipModule.forRoot(), 43 | // CollapseModule.forRoot(), 44 | // TabsModule.forRoot(), 45 | PagesModule 46 | // PaginationModule.forRoot(), 47 | // AlertModule.forRoot(), 48 | // BsDatepickerModule.forRoot(), 49 | // CarouselModule.forRoot(), 50 | // ModalModule.forRoot() 51 | ], 52 | providers: [], 53 | bootstrap: [AppComponent] 54 | }) 55 | export class AppModule {} 56 | -------------------------------------------------------------------------------- /src/app/pages/examples/landingpage/landingpage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from "@angular/core"; 2 | import Chart from "chart.js"; 3 | 4 | @Component({ 5 | selector: "app-landingpage", 6 | templateUrl: "landingpage.component.html" 7 | }) 8 | export class LandingpageComponent implements OnInit, OnDestroy { 9 | isCollapsed = true; 10 | constructor() {} 11 | 12 | ngOnInit() { 13 | var body = document.getElementsByTagName("body")[0]; 14 | body.classList.add("landing-page"); 15 | 16 | var canvas: any = document.getElementById("chartBig"); 17 | var ctx = canvas.getContext("2d"); 18 | var gradientFill = ctx.createLinearGradient(0, 350, 0, 50); 19 | gradientFill.addColorStop(0, "rgba(228, 76, 196, 0.0)"); 20 | gradientFill.addColorStop(1, "rgba(228, 76, 196, 0.14)"); 21 | var chartBig = new Chart(ctx, { 22 | type: "line", 23 | responsive: true, 24 | data: { 25 | labels: [ 26 | "JUN", 27 | "FEB", 28 | "MAR", 29 | "APR", 30 | "MAY", 31 | "JUN", 32 | "JUL", 33 | "AUG", 34 | "SEP", 35 | "OCT", 36 | "NOV", 37 | "DEC" 38 | ], 39 | datasets: [ 40 | { 41 | label: "Data", 42 | fill: true, 43 | backgroundColor: gradientFill, 44 | borderColor: "#e44cc4", 45 | borderWidth: 2, 46 | borderDash: [], 47 | borderDashOffset: 0.0, 48 | pointBackgroundColor: "#e44cc4", 49 | pointBorderColor: "rgba(255,255,255,0)", 50 | pointHoverBackgroundColor: "#be55ed", 51 | //pointHoverBorderColor:'rgba(35,46,55,1)', 52 | pointBorderWidth: 20, 53 | pointHoverRadius: 4, 54 | pointHoverBorderWidth: 15, 55 | pointRadius: 4, 56 | data: [80, 160, 200, 160, 250, 280, 220, 190, 200, 250, 290, 320] 57 | } 58 | ] 59 | }, 60 | options: { 61 | maintainAspectRatio: false, 62 | legend: { 63 | display: false 64 | }, 65 | 66 | tooltips: { 67 | backgroundColor: "#fff", 68 | titleFontColor: "#ccc", 69 | bodyFontColor: "#666", 70 | bodySpacing: 4, 71 | xPadding: 12, 72 | mode: "nearest", 73 | intersect: 0, 74 | position: "nearest" 75 | }, 76 | responsive: true, 77 | scales: { 78 | yAxes: [ 79 | { 80 | barPercentage: 1.6, 81 | gridLines: { 82 | drawBorder: false, 83 | color: "rgba(0,0,0,0.0)", 84 | zeroLineColor: "transparent" 85 | }, 86 | ticks: { 87 | display: false, 88 | suggestedMin: 0, 89 | suggestedMax: 350, 90 | padding: 20, 91 | fontColor: "#9a9a9a" 92 | } 93 | } 94 | ], 95 | 96 | xAxes: [ 97 | { 98 | barPercentage: 1.6, 99 | gridLines: { 100 | drawBorder: false, 101 | color: "rgba(0,0,0,0)", 102 | zeroLineColor: "transparent" 103 | }, 104 | ticks: { 105 | padding: 20, 106 | fontColor: "#9a9a9a" 107 | } 108 | } 109 | ] 110 | } 111 | } 112 | }); 113 | } 114 | ngOnDestroy() { 115 | var body = document.getElementsByTagName("body")[0]; 116 | body.classList.remove("landing-page"); 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/app/pages/examples/profilepage/profilepage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from "@angular/core"; 2 | 3 | @Component({ 4 | selector: "app-profilepage", 5 | templateUrl: "profilepage.component.html" 6 | }) 7 | export class ProfilepageComponent implements OnInit, OnDestroy { 8 | isCollapsed = true; 9 | constructor() {} 10 | 11 | ngOnInit() { 12 | var body = document.getElementsByTagName("body")[0]; 13 | body.classList.add("profile-page"); 14 | } 15 | ngOnDestroy() { 16 | var body = document.getElementsByTagName("body")[0]; 17 | body.classList.remove("profile-page"); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/examples/registerpage/registerpage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy, HostListener } from "@angular/core"; 2 | 3 | @Component({ 4 | selector: "app-registerpage", 5 | templateUrl: "registerpage.component.html" 6 | }) 7 | export class RegisterpageComponent implements OnInit, OnDestroy { 8 | isCollapsed = true; 9 | focus; 10 | focus1; 11 | focus2; 12 | constructor() {} 13 | @HostListener("document:mousemove", ["$event"]) 14 | onMouseMove(e) { 15 | var squares1 = document.getElementById("square1"); 16 | var squares2 = document.getElementById("square2"); 17 | var squares3 = document.getElementById("square3"); 18 | var squares4 = document.getElementById("square4"); 19 | var squares5 = document.getElementById("square5"); 20 | var squares6 = document.getElementById("square6"); 21 | var squares7 = document.getElementById("square7"); 22 | var squares8 = document.getElementById("square8"); 23 | 24 | var posX = e.clientX - window.innerWidth / 2; 25 | var posY = e.clientY - window.innerWidth / 6; 26 | 27 | squares1.style.transform = 28 | "perspective(500px) rotateY(" + 29 | posX * 0.05 + 30 | "deg) rotateX(" + 31 | posY * -0.05 + 32 | "deg)"; 33 | squares2.style.transform = 34 | "perspective(500px) rotateY(" + 35 | posX * 0.05 + 36 | "deg) rotateX(" + 37 | posY * -0.05 + 38 | "deg)"; 39 | squares3.style.transform = 40 | "perspective(500px) rotateY(" + 41 | posX * 0.05 + 42 | "deg) rotateX(" + 43 | posY * -0.05 + 44 | "deg)"; 45 | squares4.style.transform = 46 | "perspective(500px) rotateY(" + 47 | posX * 0.05 + 48 | "deg) rotateX(" + 49 | posY * -0.05 + 50 | "deg)"; 51 | squares5.style.transform = 52 | "perspective(500px) rotateY(" + 53 | posX * 0.05 + 54 | "deg) rotateX(" + 55 | posY * -0.05 + 56 | "deg)"; 57 | squares6.style.transform = 58 | "perspective(500px) rotateY(" + 59 | posX * 0.05 + 60 | "deg) rotateX(" + 61 | posY * -0.05 + 62 | "deg)"; 63 | squares7.style.transform = 64 | "perspective(500px) rotateY(" + 65 | posX * 0.02 + 66 | "deg) rotateX(" + 67 | posY * -0.02 + 68 | "deg)"; 69 | squares8.style.transform = 70 | "perspective(500px) rotateY(" + 71 | posX * 0.02 + 72 | "deg) rotateX(" + 73 | posY * -0.02 + 74 | "deg)"; 75 | } 76 | 77 | ngOnInit() { 78 | var body = document.getElementsByTagName("body")[0]; 79 | body.classList.add("register-page"); 80 | 81 | this.onMouseMove(event); 82 | } 83 | ngOnDestroy() { 84 | var body = document.getElementsByTagName("body")[0]; 85 | body.classList.remove("register-page"); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/app/pages/index/index.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from "@angular/core"; 2 | import noUiSlider from "nouislider"; 3 | 4 | @Component({ 5 | selector: "app-index", 6 | templateUrl: "index.component.html" 7 | }) 8 | export class IndexComponent implements OnInit, OnDestroy { 9 | isCollapsed = true; 10 | focus; 11 | focus1; 12 | focus2; 13 | date = new Date(); 14 | pagination = 3; 15 | pagination1 = 1; 16 | constructor() {} 17 | scrollToDownload(element: any) { 18 | element.scrollIntoView({ behavior: "smooth" }); 19 | } 20 | ngOnInit() { 21 | var body = document.getElementsByTagName("body")[0]; 22 | body.classList.add("index-page"); 23 | 24 | var slider = document.getElementById("sliderRegular"); 25 | 26 | noUiSlider.create(slider, { 27 | start: 40, 28 | connect: false, 29 | range: { 30 | min: 0, 31 | max: 100 32 | } 33 | }); 34 | 35 | var slider2 = document.getElementById("sliderDouble"); 36 | 37 | noUiSlider.create(slider2, { 38 | start: [20, 60], 39 | connect: true, 40 | range: { 41 | min: 0, 42 | max: 100 43 | } 44 | }); 45 | } 46 | ngOnDestroy() { 47 | var body = document.getElementsByTagName("body")[0]; 48 | body.classList.remove("index-page"); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/app/pages/pages.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from "@angular/platform-browser"; 2 | import { NgModule } from "@angular/core"; 3 | import { CommonModule } from "@angular/common"; 4 | import { FormsModule } from "@angular/forms"; 5 | import { RouterModule } from "@angular/router"; 6 | 7 | import { BsDropdownModule } from "ngx-bootstrap/dropdown"; 8 | import { ProgressbarModule } from "ngx-bootstrap/progressbar"; 9 | import { TooltipModule } from "ngx-bootstrap/tooltip"; 10 | import { CollapseModule } from "ngx-bootstrap/collapse"; 11 | import { TabsModule } from "ngx-bootstrap/tabs"; 12 | import { PaginationModule } from "ngx-bootstrap/pagination"; 13 | import { AlertModule } from "ngx-bootstrap/alert"; 14 | import { BsDatepickerModule } from "ngx-bootstrap/datepicker"; 15 | import { CarouselModule } from "ngx-bootstrap/carousel"; 16 | import { ModalModule } from "ngx-bootstrap/modal"; 17 | import { JwBootstrapSwitchNg2Module } from "jw-bootstrap-switch-ng2"; 18 | import { PopoverModule } from "ngx-bootstrap/popover"; 19 | 20 | import { IndexComponent } from "./index/index.component"; 21 | import { ProfilepageComponent } from "./examples/profilepage/profilepage.component"; 22 | import { RegisterpageComponent } from "./examples/registerpage/registerpage.component"; 23 | import { LandingpageComponent } from "./examples/landingpage/landingpage.component"; 24 | 25 | @NgModule({ 26 | imports: [ 27 | CommonModule, 28 | BrowserModule, 29 | FormsModule, 30 | RouterModule, 31 | BsDropdownModule.forRoot(), 32 | ProgressbarModule.forRoot(), 33 | TooltipModule.forRoot(), 34 | PopoverModule.forRoot(), 35 | CollapseModule.forRoot(), 36 | JwBootstrapSwitchNg2Module, 37 | TabsModule.forRoot(), 38 | PaginationModule.forRoot(), 39 | AlertModule.forRoot(), 40 | BsDatepickerModule.forRoot(), 41 | CarouselModule.forRoot(), 42 | ModalModule.forRoot() 43 | ], 44 | declarations: [ 45 | IndexComponent, 46 | ProfilepageComponent, 47 | RegisterpageComponent, 48 | LandingpageComponent 49 | ], 50 | exports: [ 51 | IndexComponent, 52 | ProfilepageComponent, 53 | RegisterpageComponent, 54 | LandingpageComponent 55 | ], 56 | providers: [] 57 | }) 58 | export class PagesModule {} 59 | -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/fonts/nucleo.eot -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/fonts/nucleo.ttf -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/fonts/nucleo.woff -------------------------------------------------------------------------------- /src/assets/fonts/nucleo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/fonts/nucleo.woff2 -------------------------------------------------------------------------------- /src/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/asc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/asc.gif -------------------------------------------------------------------------------- /src/assets/img/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/bg.gif -------------------------------------------------------------------------------- /src/assets/img/bitcoin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/bitcoin.png -------------------------------------------------------------------------------- /src/assets/img/blob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/blob.png -------------------------------------------------------------------------------- /src/assets/img/cercuri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/cercuri.png -------------------------------------------------------------------------------- /src/assets/img/chester-wade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/chester-wade.jpg -------------------------------------------------------------------------------- /src/assets/img/denys.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/denys.jpg -------------------------------------------------------------------------------- /src/assets/img/desc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/desc.gif -------------------------------------------------------------------------------- /src/assets/img/dots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/dots.png -------------------------------------------------------------------------------- /src/assets/img/etherum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/etherum.png -------------------------------------------------------------------------------- /src/assets/img/fabien-bazanegue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/fabien-bazanegue.jpg -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/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-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/img_3115.jpg -------------------------------------------------------------------------------- /src/assets/img/james.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/james.jpg -------------------------------------------------------------------------------- /src/assets/img/julie.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/julie.jpeg -------------------------------------------------------------------------------- /src/assets/img/landing-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/landing-page.png -------------------------------------------------------------------------------- /src/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/logo.png -------------------------------------------------------------------------------- /src/assets/img/lora.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/lora.jpg -------------------------------------------------------------------------------- /src/assets/img/mark-finn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/mark-finn.jpg -------------------------------------------------------------------------------- /src/assets/img/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/mike.jpg -------------------------------------------------------------------------------- /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-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/path1.png -------------------------------------------------------------------------------- /src/assets/img/path2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/path2.png -------------------------------------------------------------------------------- /src/assets/img/path3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/path3.png -------------------------------------------------------------------------------- /src/assets/img/path4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/path4.png -------------------------------------------------------------------------------- /src/assets/img/path5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/path5.png -------------------------------------------------------------------------------- /src/assets/img/patrat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/patrat.png -------------------------------------------------------------------------------- /src/assets/img/profile-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/profile-page.png -------------------------------------------------------------------------------- /src/assets/img/ripp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/ripp.png -------------------------------------------------------------------------------- /src/assets/img/ryan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/ryan.jpg -------------------------------------------------------------------------------- /src/assets/img/square-purple-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square-purple-1.png -------------------------------------------------------------------------------- /src/assets/img/square1-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square1-red.png -------------------------------------------------------------------------------- /src/assets/img/square1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square1.png -------------------------------------------------------------------------------- /src/assets/img/square2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square2.png -------------------------------------------------------------------------------- /src/assets/img/square3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square3.png -------------------------------------------------------------------------------- /src/assets/img/square4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square4.png -------------------------------------------------------------------------------- /src/assets/img/square5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square5.png -------------------------------------------------------------------------------- /src/assets/img/square6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/square6.png -------------------------------------------------------------------------------- /src/assets/img/triunghiuri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/triunghiuri.png -------------------------------------------------------------------------------- /src/assets/img/waves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/blk-design-system-angular/bb21961cb6f2fedc760b3ea87b04f4d0677ebf6d/src/assets/img/waves.png -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/angular/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert-dismissible .close { 2 | transform: translateY(0); 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/angular/_datepicker.scss: -------------------------------------------------------------------------------- 1 | /* .bs-datepicker */ 2 | .bs-datepicker { 3 | box-shadow: none; 4 | .bs-datepicker-body { 5 | border: none; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/angular/_example-pages.scss: -------------------------------------------------------------------------------- 1 | .index-page .squares { 2 | @include linear-gradient($danger-states, $danger); 3 | } 4 | .register-page, 5 | .section.section-signup { 6 | .squares, 7 | .square { 8 | @include linear-gradient($danger-states, $danger); 9 | } 10 | } 11 | .footer { 12 | border-top: 2px solid $danger; 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/angular/_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 | // 70 | // } 71 | .nav-pills-neutral { 72 | .nav-item { 73 | .nav-link { 74 | background-color: $opacity-2; 75 | color: $white; 76 | 77 | &.active { 78 | &, 79 | &:focus, 80 | &:hover { 81 | background-color: $white; 82 | color: $primary; 83 | } 84 | } 85 | } 86 | } 87 | } 88 | 89 | .nav-pills-primary { 90 | .nav-item { 91 | .nav-link.active { 92 | &, 93 | &:focus, 94 | &:hover { 95 | @include diagonal-gradient($primary, $primary-states); 96 | } 97 | } 98 | } 99 | } 100 | 101 | .nav-pills-info { 102 | .nav-item { 103 | .nav-link.active { 104 | &, 105 | &:focus, 106 | &:hover { 107 | @include diagonal-gradient($info, $info-states); 108 | } 109 | } 110 | } 111 | } 112 | 113 | .nav-pills-success { 114 | .nav-item { 115 | .nav-link.active { 116 | &, 117 | &:focus, 118 | &:hover { 119 | @include diagonal-gradient($success, $success-states); 120 | } 121 | } 122 | } 123 | } 124 | 125 | .nav-pills-warning { 126 | .nav-item { 127 | .nav-link.active { 128 | &, 129 | &:focus, 130 | &:hover { 131 | @include diagonal-gradient($warning, $warning-states); 132 | } 133 | } 134 | } 135 | } 136 | 137 | .nav-pills-danger { 138 | .nav-item { 139 | .nav-link.active { 140 | &, 141 | &:focus, 142 | &:hover { 143 | @include diagonal-gradient($danger, $danger-states); 144 | } 145 | } 146 | } 147 | } 148 | .nav-pills-icons .nav-item .nav-link { 149 | border-radius: 0.25rem !important; 150 | } 151 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/angular/_tabs.scss: -------------------------------------------------------------------------------- 1 | .nav-tabs-primary .nav-tabs > .nav-item > .nav-link.active { 2 | border-color: $primary; 3 | color: $primary; 4 | } 5 | .nav-tabs-neutral .nav-tabs > .nav-item > .nav-link.active { 6 | border-color: $opacity-5; 7 | color: $white; 8 | } 9 | .nav-tabs-info .nav-tabs > .nav-item > .nav-link.active { 10 | border-color: $info; 11 | color: $info; 12 | } 13 | .nav-tabs-danger .nav-tabs > .nav-item > .nav-link.active { 14 | border-color: $danger; 15 | color: $danger; 16 | } 17 | .nav-tabs-warning .nav-tabs > .nav-item > .nav-link.active { 18 | border-color: $warning; 19 | color: $warning; 20 | } 21 | .nav-tabs-success .nav-tabs > .nav-item > .nav-link.active { 22 | border-color: $success; 23 | color: $success; 24 | } 25 | 26 | tabset .tab-content { 27 | padding: 20px 0 0; 28 | } 29 | .justify-content-center .nav-tabs { 30 | justify-content: center !important; 31 | } 32 | .tab-subcategories { 33 | .tab-content { 34 | background-color: transparent; 35 | padding-left: 15px; 36 | padding-right: 15px; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | position: relative; 7 | padding: $alert-padding-y $alert-padding-x; 8 | margin-bottom: $alert-margin-bottom; 9 | border: $alert-border-width solid transparent; 10 | @include border-radius($alert-border-radius); 11 | } 12 | 13 | // Headings for larger alerts 14 | .alert-heading { 15 | // Specified to prevent conflicts of changing $headings-color 16 | color: inherit; 17 | } 18 | 19 | // Provide class for links that match alerts 20 | .alert-link { 21 | font-weight: $alert-link-font-weight; 22 | } 23 | 24 | // Dismissible alerts 25 | // 26 | // Expand the right padding and account for the close button's positioning. 27 | 28 | .alert-dismissible { 29 | padding-right: ($close-font-size + $alert-padding-x * 2); 30 | 31 | // Adjust close link position 32 | .close { 33 | position: absolute; 34 | top: 0; 35 | right: 0; 36 | padding: $alert-padding-y $alert-padding-x; 37 | color: inherit; 38 | } 39 | } 40 | 41 | // Alternate styles 42 | // 43 | // Generate contextual modifier classes for colorizing the alert. 44 | 45 | @each $color, $value in $theme-colors { 46 | .alert-#{$color} { 47 | @include alert-variant( 48 | theme-color-level($color, $alert-bg-level), 49 | theme-color-level($color, $alert-border-level), 50 | theme-color-level($color, $alert-color-level) 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | font-size: $badge-font-size; 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | @include border-radius($badge-border-radius); 16 | 17 | // Empty badges collapse automatically 18 | &:empty { 19 | display: none; 20 | } 21 | } 22 | 23 | // Quick fix for badges in buttons 24 | .btn .badge { 25 | position: relative; 26 | top: -1px; 27 | } 28 | 29 | // Pill badges 30 | // 31 | // Make them extra rounded with a modifier to replace v3's badges. 32 | 33 | .badge-pill { 34 | padding-right: $badge-pill-padding-x; 35 | padding-left: $badge-pill-padding-x; 36 | @include border-radius($badge-pill-border-radius); 37 | } 38 | 39 | // Colors 40 | // 41 | // Contextual variations (linked badges get darker on :hover). 42 | 43 | @each $color, $value in $theme-colors { 44 | .badge-#{$color} { 45 | @include badge-variant($value); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/scss/blk-design-system/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: flex; 3 | flex-wrap: wrap; 4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 5 | margin-bottom: $breadcrumb-margin-bottom; 6 | list-style: none; 7 | background-color: $breadcrumb-bg; 8 | @include border-radius($breadcrumb-border-radius); 9 | } 10 | 11 | .breadcrumb-item { 12 | // The separator between breadcrumbs (by default, a forward-slash: "/") 13 | + .breadcrumb-item { 14 | padding-left: $breadcrumb-item-padding; 15 | 16 | &::before { 17 | display: inline-block; // Suppress underlining of the separator in modern browsers 18 | padding-right: $breadcrumb-item-padding; 19 | color: $breadcrumb-divider-color; 20 | content: $breadcrumb-divider; 21 | } 22 | } 23 | 24 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 25 | // without `