login functionality done
This commit was merged in pull request #1.
This commit is contained in:
Kola92
@@ -10457,7 +10457,7 @@ a.text-darker:focus {
|
|||||||
margin: 4px 1px;
|
margin: 4px 1px;
|
||||||
border-radius: 0.4285rem;
|
border-radius: 0.4285rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #211069;
|
background: #211069 !important;
|
||||||
background-image: -webkit-linear-gradient(
|
background-image: -webkit-linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
#211069,
|
#211069,
|
||||||
@@ -10510,27 +10510,27 @@ a.text-darker:focus {
|
|||||||
background-color: #263148 !important;
|
background-color: #263148 !important;
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
#344675,
|
#211069,
|
||||||
#263148,
|
#564794,
|
||||||
#344675
|
#211069
|
||||||
) !important;
|
) !important;
|
||||||
background-image: -webkit-linear-gradient(
|
background-image: -webkit-linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
#211069,
|
#211069,
|
||||||
#263148,
|
#564794,
|
||||||
#211069
|
#211069
|
||||||
) !important;
|
) !important;
|
||||||
background-image: -o-linear-gradient(
|
background-image: -o-linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
#211069,
|
#211069,
|
||||||
#263148,
|
#564794,
|
||||||
#211069
|
#211069
|
||||||
) !important;
|
) !important;
|
||||||
background-image: -moz-linear-gradient(
|
background-image: -moz-linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
#344675,
|
#211069,
|
||||||
#263148,
|
#564794,
|
||||||
#344675
|
#211069
|
||||||
) !important;
|
) !important;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@@ -10643,9 +10643,9 @@ fieldset[disabled] .navbar .navbar-nav > a.btn.active {
|
|||||||
border-color: #344675;
|
border-color: #344675;
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
#344675,
|
#211069,
|
||||||
#263148,
|
#564794,
|
||||||
#344675
|
#211069
|
||||||
) !important;
|
) !important;
|
||||||
background-image: -webkit-linear-gradient(
|
background-image: -webkit-linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
|
|||||||
@@ -2,11 +2,15 @@ import { NgModule } from "@angular/core";
|
|||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from "@angular/common";
|
||||||
import { BrowserModule } from "@angular/platform-browser";
|
import { BrowserModule } from "@angular/platform-browser";
|
||||||
import { Routes, RouterModule } from "@angular/router";
|
import { Routes, RouterModule } from "@angular/router";
|
||||||
|
import { LoginComponent } from "./pages/login/login.component";
|
||||||
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
|
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
|
||||||
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
|
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: "login",
|
||||||
|
component: LoginComponent
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "",
|
path: "",
|
||||||
redirectTo: "company-information",
|
redirectTo: "company-information",
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
|
|||||||
import { AppRoutingModule } from "./app-routing.module";
|
import { AppRoutingModule } from "./app-routing.module";
|
||||||
import { ComponentsModule } from "./components/components.module";
|
import { ComponentsModule } from "./components/components.module";
|
||||||
import { LoginComponent } from './pages/login/login.component';
|
import { LoginComponent } from './pages/login/login.component';
|
||||||
|
// import { DatePipe } from "@angular/common";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|||||||
@@ -45,7 +45,7 @@
|
|||||||
ngbDropdownToggle
|
ngbDropdownToggle
|
||||||
>
|
>
|
||||||
<div class="notification d-none d-lg-block d-xl-block"></div>
|
<div class="notification d-none d-lg-block d-xl-block"></div>
|
||||||
<i class=" tim-icons icon-sound-wave"> </i>
|
<i class="bi bi-bell"></i>
|
||||||
<p class="d-lg-none">Notifications</p>
|
<p class="d-lg-none">Notifications</p>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
|
<ul class="dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
|
||||||
@@ -84,14 +84,15 @@
|
|||||||
ngbDropdownToggle
|
ngbDropdownToggle
|
||||||
>
|
>
|
||||||
<div class="photo">
|
<div class="photo">
|
||||||
<img alt="Profile Photo" src="assets/img/anime3.png" />
|
<!-- <img alt="Profile Photo" [src]="assets/img/anime3.png" /> -->
|
||||||
|
<img alt="Profile Photo" [src]="company.image" />
|
||||||
</div>
|
</div>
|
||||||
<b class="caret d-none d-lg-block d-xl-block"> </b>
|
<b class="caret d-none d-lg-block d-xl-block"> </b>
|
||||||
<p class="d-lg-none">Log out</p>
|
<p class="d-lg-none">Log out</p>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-navbar" ngbDropdownMenu>
|
<ul class="dropdown-navbar" ngbDropdownMenu>
|
||||||
<li class="nav-link">
|
<li class="nav-link">
|
||||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
<a class="nav-item" routerLink="/company-profile" href="javascript:void(0)" ngbDropdownItem>
|
||||||
Profile
|
Profile
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -102,7 +103,12 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="dropdown-divider"></li>
|
<li class="dropdown-divider"></li>
|
||||||
<li class="nav-link">
|
<li class="nav-link">
|
||||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
<a
|
||||||
|
class="nav-item"
|
||||||
|
href="javascript:void(0)"
|
||||||
|
(click)="logout()"
|
||||||
|
ngbDropdownItem
|
||||||
|
>
|
||||||
Log out
|
Log out
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -133,5 +139,4 @@
|
|||||||
<i class="tim-icons icon-simple-remove"> </i>
|
<i class="tim-icons icon-simple-remove"> </i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|||||||
@@ -2,12 +2,14 @@ import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";
|
|||||||
import { ROUTES } from "../sidebar/sidebar.component";
|
import { ROUTES } from "../sidebar/sidebar.component";
|
||||||
import { Location } from "@angular/common";
|
import { Location } from "@angular/common";
|
||||||
import { Router } from "@angular/router";
|
import { Router } from "@angular/router";
|
||||||
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
|
import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";
|
||||||
|
import { ToastrService } from "ngx-toastr";
|
||||||
|
import { CompanyService } from "../../services/company.service";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-navbar",
|
selector: "app-navbar",
|
||||||
templateUrl: "./navbar.component.html",
|
templateUrl: "./navbar.component.html",
|
||||||
styleUrls: ["./navbar.component.css"]
|
styleUrls: ["./navbar.component.css"],
|
||||||
})
|
})
|
||||||
export class NavbarComponent implements OnInit, OnDestroy {
|
export class NavbarComponent implements OnInit, OnDestroy {
|
||||||
private listTitles: any[];
|
private listTitles: any[];
|
||||||
@@ -19,33 +21,49 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
|||||||
public isCollapsed = true;
|
public isCollapsed = true;
|
||||||
|
|
||||||
closeResult: string;
|
closeResult: string;
|
||||||
|
company: any;
|
||||||
|
companyLocalStorage: any;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
location: Location,
|
location: Location,
|
||||||
private element: ElementRef,
|
private element: ElementRef,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private modalService: NgbModal
|
private modalService: NgbModal,
|
||||||
|
private toastr: ToastrService,
|
||||||
|
private companyService: CompanyService
|
||||||
) {
|
) {
|
||||||
this.location = location;
|
this.location = location;
|
||||||
this.sidebarVisible = false;
|
this.sidebarVisible = false;
|
||||||
|
|
||||||
|
this.companyLocalStorage = JSON.parse(
|
||||||
|
localStorage.getItem("companyData") || "{}"
|
||||||
|
);
|
||||||
|
|
||||||
|
this.companyService
|
||||||
|
.getCompanyById(this.companyLocalStorage.id)
|
||||||
|
.subscribe((company) => {
|
||||||
|
this.company = company;
|
||||||
|
|
||||||
|
console.log(this.company);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
// function that adds color white/transparent to the navbar on resize (this is for the collapse)
|
// function that adds color white/transparent to the navbar on resize (this is for the collapse)
|
||||||
updateColor = () => {
|
updateColor = () => {
|
||||||
var navbar = document.getElementsByClassName('navbar')[0];
|
var navbar = document.getElementsByClassName("navbar")[0];
|
||||||
if (window.innerWidth < 993 && !this.isCollapsed) {
|
if (window.innerWidth < 993 && !this.isCollapsed) {
|
||||||
navbar.classList.add('bg-white');
|
navbar.classList.add("bg-white");
|
||||||
navbar.classList.remove('navbar-transparent');
|
navbar.classList.remove("navbar-transparent");
|
||||||
} else {
|
} else {
|
||||||
navbar.classList.remove('bg-white');
|
navbar.classList.remove("bg-white");
|
||||||
navbar.classList.add('navbar-transparent');
|
navbar.classList.add("navbar-transparent");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
window.addEventListener("resize", this.updateColor);
|
window.addEventListener("resize", this.updateColor);
|
||||||
this.listTitles = ROUTES.filter(listTitle => listTitle);
|
this.listTitles = ROUTES.filter((listTitle) => listTitle);
|
||||||
const navbar: HTMLElement = this.element.nativeElement;
|
const navbar: HTMLElement = this.element.nativeElement;
|
||||||
this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
|
this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
|
||||||
this.router.events.subscribe(event => {
|
this.router.events.subscribe((event) => {
|
||||||
this.sidebarClose();
|
this.sidebarClose();
|
||||||
var $layer: any = document.getElementsByClassName("close-layer")[0];
|
var $layer: any = document.getElementsByClassName("close-layer")[0];
|
||||||
if ($layer) {
|
if ($layer) {
|
||||||
@@ -174,18 +192,23 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
open(content) {
|
open(content) {
|
||||||
this.modalService.open(content, {windowClass: 'modal-search'}).result.then((result) => {
|
this.modalService
|
||||||
|
.open(content, { windowClass: "modal-search" })
|
||||||
|
.result.then(
|
||||||
|
(result) => {
|
||||||
this.closeResult = `Closed with: ${result}`;
|
this.closeResult = `Closed with: ${result}`;
|
||||||
}, (reason) => {
|
},
|
||||||
|
(reason) => {
|
||||||
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
|
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
|
||||||
});
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private getDismissReason(reason: any): string {
|
private getDismissReason(reason: any): string {
|
||||||
if (reason === ModalDismissReasons.ESC) {
|
if (reason === ModalDismissReasons.ESC) {
|
||||||
return 'by pressing ESC';
|
return "by pressing ESC";
|
||||||
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
|
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
|
||||||
return 'by clicking on a backdrop';
|
return "by clicking on a backdrop";
|
||||||
} else {
|
} else {
|
||||||
return `with: ${reason}`;
|
return `with: ${reason}`;
|
||||||
}
|
}
|
||||||
@@ -193,4 +216,15 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
|||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
window.removeEventListener("resize", this.updateColor);
|
window.removeEventListener("resize", this.updateColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
localStorage.removeItem("companyData");
|
||||||
|
localStorage.clear();
|
||||||
|
|
||||||
|
this.toastr.success("Logout Successfully");
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.router.navigate(["login"]);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,13 +6,16 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Stark Industries",
|
name: "Stark Industries",
|
||||||
username: "starkindustries",
|
username: "starkindustries",
|
||||||
email: "info@starkindustries.com",
|
email: "info@starkindustries.com",
|
||||||
|
password: "password1",
|
||||||
phone: "09055784625",
|
phone: "09055784625",
|
||||||
image:
|
image:
|
||||||
"https://webtoolfeed.files.wordpress.com/2012/05/the-union-repoman.jpg",
|
"https://images.pexels.com/photos/16092112/pexels-photo-16092112.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
|
||||||
|
|
||||||
description:
|
description:
|
||||||
"A multinational technology company specializing in weapons manufacturing, led by Tony Stark.",
|
"A multinational technology company specializing in weapons manufacturing, led by Tony Stark.",
|
||||||
address: "200 Park Ave, New York, NY 10166",
|
address: "200 Park Ave, New York, NY 10166",
|
||||||
city: "New York City, NY ",
|
city: "New York City, NY ",
|
||||||
|
industry: "Technology",
|
||||||
stagingUrl: "stage.starkindustries.com",
|
stagingUrl: "stage.starkindustries.com",
|
||||||
productionUrl: "starkindustries.com",
|
productionUrl: "starkindustries.com",
|
||||||
},
|
},
|
||||||
@@ -21,6 +24,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Wayne Enterprises",
|
name: "Wayne Enterprises",
|
||||||
username: "wayneenterprises",
|
username: "wayneenterprises",
|
||||||
email: "info@wayneenterprises.com",
|
email: "info@wayneenterprises.com",
|
||||||
|
password: "password2",
|
||||||
phone: "0812012234",
|
phone: "0812012234",
|
||||||
image:
|
image:
|
||||||
"https://www.thesun.co.uk/wp-content/uploads/2019/07/NINTCHDBPICT000491000000.jpg?strip=all&w=960",
|
"https://www.thesun.co.uk/wp-content/uploads/2019/07/NINTCHDBPICT000491000000.jpg?strip=all&w=960",
|
||||||
@@ -28,6 +32,7 @@ export const company: CompanyModel[] = [
|
|||||||
"A multinational conglomerate holding company headquartered in Gotham City, led by Bruce Wayne.",
|
"A multinational conglomerate holding company headquartered in Gotham City, led by Bruce Wayne.",
|
||||||
address: "10 Wayne Tower, Gotham City, NJ 07102",
|
address: "10 Wayne Tower, Gotham City, NJ 07102",
|
||||||
city: "Gotham City, NJ ",
|
city: "Gotham City, NJ ",
|
||||||
|
industry: "Technology",
|
||||||
stagingUrl: "stage.wayneenterprises.com",
|
stagingUrl: "stage.wayneenterprises.com",
|
||||||
productionUrl: "wayneenterprises.com",
|
productionUrl: "wayneenterprises.com",
|
||||||
},
|
},
|
||||||
@@ -36,6 +41,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "LexCorp",
|
name: "LexCorp",
|
||||||
username: "lexcorp",
|
username: "lexcorp",
|
||||||
email: "info@lexcorp.com",
|
email: "info@lexcorp.com",
|
||||||
|
password: "password3",
|
||||||
phone: "08174361092",
|
phone: "08174361092",
|
||||||
image:
|
image:
|
||||||
"https://www.shutterstock.com/image-vector/young-smiling-woman-mia-avatar-600w-2127358541.jpg",
|
"https://www.shutterstock.com/image-vector/young-smiling-woman-mia-avatar-600w-2127358541.jpg",
|
||||||
@@ -43,6 +49,7 @@ export const company: CompanyModel[] = [
|
|||||||
"LexCorp is a multinational conglomerate that operates in various industries, including technology, finance, and media. Founded by billionaire businessman and philanthropist Lex Luthor.",
|
"LexCorp is a multinational conglomerate that operates in various industries, including technology, finance, and media. Founded by billionaire businessman and philanthropist Lex Luthor.",
|
||||||
address: "LexCorp Tower, Metropolis, NY 10001",
|
address: "LexCorp Tower, Metropolis, NY 10001",
|
||||||
city: "Metropolis, NY",
|
city: "Metropolis, NY",
|
||||||
|
industry: "Advertising and marketing",
|
||||||
stagingUrl: "stage.lexcorp.com",
|
stagingUrl: "stage.lexcorp.com",
|
||||||
productionUrl: "lexcorp.com",
|
productionUrl: "lexcorp.com",
|
||||||
},
|
},
|
||||||
@@ -51,6 +58,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Sahara Security & Investigation Ltd.",
|
name: "Sahara Security & Investigation Ltd.",
|
||||||
username: "saharasecurity_ng",
|
username: "saharasecurity_ng",
|
||||||
email: "info@saharasecurity.ng",
|
email: "info@saharasecurity.ng",
|
||||||
|
password: "password4",
|
||||||
phone: "08120122347",
|
phone: "08120122347",
|
||||||
image:
|
image:
|
||||||
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
||||||
@@ -58,6 +66,7 @@ export const company: CompanyModel[] = [
|
|||||||
"Sahara Security & Investigation is a leading provider of security and investigation services for businesses and individuals across Nigeria. With a team of highly trained professionals and state-of-the-art equipment, we are committed to protecting our clients' assets and interests.",
|
"Sahara Security & Investigation is a leading provider of security and investigation services for businesses and individuals across Nigeria. With a team of highly trained professionals and state-of-the-art equipment, we are committed to protecting our clients' assets and interests.",
|
||||||
address: "5, Bode Thomas Street, Surulere, Lagos State",
|
address: "5, Bode Thomas Street, Surulere, Lagos State",
|
||||||
city: "Lagos, Nigeria",
|
city: "Lagos, Nigeria",
|
||||||
|
industry: "Security",
|
||||||
stagingUrl: "stage.saharasecurity.com",
|
stagingUrl: "stage.saharasecurity.com",
|
||||||
productionUrl: "saharasecurity.ng",
|
productionUrl: "saharasecurity.ng",
|
||||||
},
|
},
|
||||||
@@ -66,6 +75,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Umbrella Corporation",
|
name: "Umbrella Corporation",
|
||||||
username: "umbrellacorporation",
|
username: "umbrellacorporation",
|
||||||
email: "info@umbrellacorp.com",
|
email: "info@umbrellacorp.com",
|
||||||
|
password: "password5",
|
||||||
phone: "07073214806",
|
phone: "07073214806",
|
||||||
image:
|
image:
|
||||||
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
||||||
@@ -73,6 +83,7 @@ export const company: CompanyModel[] = [
|
|||||||
"Umbrella Corporation is a pharmaceutical company that specializes in bioweapons and bioengineering.",
|
"Umbrella Corporation is a pharmaceutical company that specializes in bioweapons and bioengineering.",
|
||||||
address: "Umbrella Corporation, Raccoon City, NY 10001",
|
address: "Umbrella Corporation, Raccoon City, NY 10001",
|
||||||
city: "Raccoon City, NY",
|
city: "Raccoon City, NY",
|
||||||
|
industry: "Pharmaceuticals",
|
||||||
stagingUrl: "stage.umbrellacorp.com",
|
stagingUrl: "stage.umbrellacorp.com",
|
||||||
productionUrl: "umbrellacorp.com",
|
productionUrl: "umbrellacorp.com",
|
||||||
},
|
},
|
||||||
@@ -81,6 +92,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Aperture Science",
|
name: "Aperture Science",
|
||||||
username: "aperturescience",
|
username: "aperturescience",
|
||||||
email: "aperturescience@info.com",
|
email: "aperturescience@info.com",
|
||||||
|
password: "password6",
|
||||||
phone: "08033567890",
|
phone: "08033567890",
|
||||||
image:
|
image:
|
||||||
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
||||||
@@ -88,6 +100,7 @@ export const company: CompanyModel[] = [
|
|||||||
"Aperture Science is a science and technology company that specializes in the development of advanced research facilities and the manufacturing of consumer products.",
|
"Aperture Science is a science and technology company that specializes in the development of advanced research facilities and the manufacturing of consumer products.",
|
||||||
address: "Aperture Science, New York City, NY 10001",
|
address: "Aperture Science, New York City, NY 10001",
|
||||||
city: "New York City, NY",
|
city: "New York City, NY",
|
||||||
|
industry: "Technology",
|
||||||
stagingUrl: "stage.aperturescience.com",
|
stagingUrl: "stage.aperturescience.com",
|
||||||
productionUrl: "aperturescience.com",
|
productionUrl: "aperturescience.com",
|
||||||
},
|
},
|
||||||
@@ -96,6 +109,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Stellar Airways Nigeria Ltd.",
|
name: "Stellar Airways Nigeria Ltd.",
|
||||||
username: "stellarairways_ng",
|
username: "stellarairways_ng",
|
||||||
email: "info@stellarairways.ng",
|
email: "info@stellarairways.ng",
|
||||||
|
password: "password7",
|
||||||
phone: "07084849673",
|
phone: "07084849673",
|
||||||
image:
|
image:
|
||||||
"https://www.shutterstock.com/image-vector/young-smiling-woman-mia-avatar-600w-2127358541.jpg",
|
"https://www.shutterstock.com/image-vector/young-smiling-woman-mia-avatar-600w-2127358541.jpg",
|
||||||
@@ -103,6 +117,7 @@ export const company: CompanyModel[] = [
|
|||||||
"Stellar Airways Nigeria is a premier airline that provides domestic and international travel services to individuals and businesses across Nigeria. With a focus on safety, comfort, and convenience, we are dedicated to providing exceptional travel experiences to our customers.",
|
"Stellar Airways Nigeria is a premier airline that provides domestic and international travel services to individuals and businesses across Nigeria. With a focus on safety, comfort, and convenience, we are dedicated to providing exceptional travel experiences to our customers.",
|
||||||
address: "Murtala Muhammed International Airport, Ikeja, Lagos State",
|
address: "Murtala Muhammed International Airport, Ikeja, Lagos State",
|
||||||
city: "Lagos, Nigeria",
|
city: "Lagos, Nigeria",
|
||||||
|
industry: "Airlines",
|
||||||
stagingUrl: "stage.stellarairways.com",
|
stagingUrl: "stage.stellarairways.com",
|
||||||
productionUrl: "stellarairways.ng",
|
productionUrl: "stellarairways.ng",
|
||||||
},
|
},
|
||||||
@@ -111,6 +126,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Deltacore Technologies Ltd.",
|
name: "Deltacore Technologies Ltd.",
|
||||||
username: "deltacore_ng",
|
username: "deltacore_ng",
|
||||||
email: "info@deltacore.ng",
|
email: "info@deltacore.ng",
|
||||||
|
password: "password8",
|
||||||
phone: "09022345109",
|
phone: "09022345109",
|
||||||
image:
|
image:
|
||||||
"https://www.shutterstock.com/image-vector/young-smiling-woman-mia-avatar-600w-2127358541.jpg",
|
"https://www.shutterstock.com/image-vector/young-smiling-woman-mia-avatar-600w-2127358541.jpg",
|
||||||
@@ -118,6 +134,7 @@ export const company: CompanyModel[] = [
|
|||||||
"Deltacore Technologies is a leading provider of software and hardware solutions for businesses and individuals across Nigeria. With a focus on innovation and quality, we provide cutting-edge technology products and services to help our clients stay ahead of the competition.",
|
"Deltacore Technologies is a leading provider of software and hardware solutions for businesses and individuals across Nigeria. With a focus on innovation and quality, we provide cutting-edge technology products and services to help our clients stay ahead of the competition.",
|
||||||
address: "23, Adeyemo Alakija Street, Victoria Island, Lagos State",
|
address: "23, Adeyemo Alakija Street, Victoria Island, Lagos State",
|
||||||
city: "Lagos, Nigeria",
|
city: "Lagos, Nigeria",
|
||||||
|
industry: "Technology",
|
||||||
stagingUrl: "stage.deltacore.com",
|
stagingUrl: "stage.deltacore.com",
|
||||||
productionUrl: "deltacore.ng",
|
productionUrl: "deltacore.ng",
|
||||||
},
|
},
|
||||||
@@ -126,6 +143,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Goldmine Oil & Gas Ltd.",
|
name: "Goldmine Oil & Gas Ltd.",
|
||||||
username: "goldmineoilgas_ng",
|
username: "goldmineoilgas_ng",
|
||||||
email: "info@goldmineoilgas.ng",
|
email: "info@goldmineoilgas.ng",
|
||||||
|
password: "password9",
|
||||||
phone: "0911250021",
|
phone: "0911250021",
|
||||||
image:
|
image:
|
||||||
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
"https://www.shutterstock.com/image-vector/young-smiling-man-adam-avatar-600w-2107967969.jpg",
|
||||||
@@ -133,6 +151,7 @@ export const company: CompanyModel[] = [
|
|||||||
"Goldmine Oil & Gas is a leading exploration and production company that operates in the Nigerian oil and gas industry. With a focus on sustainability and innovation, we are committed to maximizing the potential of Nigeria's natural resources while minimizing our environmental impact.",
|
"Goldmine Oil & Gas is a leading exploration and production company that operates in the Nigerian oil and gas industry. With a focus on sustainability and innovation, we are committed to maximizing the potential of Nigeria's natural resources while minimizing our environmental impact.",
|
||||||
address: "14, Marina Road, Warri South, Delta State",
|
address: "14, Marina Road, Warri South, Delta State",
|
||||||
city: "Warri, Nigeria",
|
city: "Warri, Nigeria",
|
||||||
|
industry: "Oil & Gas",
|
||||||
stagingUrl: "stage.goldmineoilgas.com",
|
stagingUrl: "stage.goldmineoilgas.com",
|
||||||
productionUrl: "goldmineoilgas.ng",
|
productionUrl: "goldmineoilgas.ng",
|
||||||
},
|
},
|
||||||
@@ -141,6 +160,7 @@ export const company: CompanyModel[] = [
|
|||||||
name: "Cedarwood Construction & Engineering Ltd.",
|
name: "Cedarwood Construction & Engineering Ltd.",
|
||||||
username: "cedarwoodconstruction_ng",
|
username: "cedarwoodconstruction_ng",
|
||||||
email: "info@cedarwoodconstruction.ng",
|
email: "info@cedarwoodconstruction.ng",
|
||||||
|
password: "password10",
|
||||||
phone: "0911250021",
|
phone: "0911250021",
|
||||||
image:
|
image:
|
||||||
"https://thumbs.dreamstime.com/b/male-avatar-icon-flat-style-male-user-icon-cartoon-man-avatar-hipster-vector-stock-91462914.jpg",
|
"https://thumbs.dreamstime.com/b/male-avatar-icon-flat-style-male-user-icon-cartoon-man-avatar-hipster-vector-stock-91462914.jpg",
|
||||||
@@ -148,6 +168,7 @@ export const company: CompanyModel[] = [
|
|||||||
"Cedarwood Construction & Engineering is a leading construction company that provides innovative solutions for residential, commercial, and industrial projects across Nigeria. With a team of skilled professionals and state-of-the-art equipment, we are committed to delivering high-quality projects on time and within budget.",
|
"Cedarwood Construction & Engineering is a leading construction company that provides innovative solutions for residential, commercial, and industrial projects across Nigeria. With a team of skilled professionals and state-of-the-art equipment, we are committed to delivering high-quality projects on time and within budget.",
|
||||||
address: "9, Adeniyi Jones Avenue, Ikeja, Lagos State",
|
address: "9, Adeniyi Jones Avenue, Ikeja, Lagos State",
|
||||||
city: "Lagos, Nigeria",
|
city: "Lagos, Nigeria",
|
||||||
|
industry: "Construction",
|
||||||
stagingUrl: "stage.cedarwoodconstruction.com",
|
stagingUrl: "stage.cedarwoodconstruction.com",
|
||||||
productionUrl: "cedarwoodconstruction.ng",
|
productionUrl: "cedarwoodconstruction.ng",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { CompanyInformationComponent } from "../../pages/company-information/com
|
|||||||
import { CompanyProfileComponent } from "../../pages/company-profile/company-profile.component";
|
import { CompanyProfileComponent } from "../../pages/company-profile/company-profile.component";
|
||||||
import { InvoicesComponent } from "../../pages/invoices/invoices.component";
|
import { InvoicesComponent } from "../../pages/invoices/invoices.component";
|
||||||
import { PaymentsComponent } from "../../pages/payments/payments.component";
|
import { PaymentsComponent } from "../../pages/payments/payments.component";
|
||||||
import { LoginComponent } from "src/app/pages/login/login.component";
|
// import { LoginComponent } from "src/app/pages/login/login.component";
|
||||||
|
|
||||||
import { NotificationsComponent } from "../../pages/notifications/notifications.component";
|
import { NotificationsComponent } from "../../pages/notifications/notifications.component";
|
||||||
|
|
||||||
@@ -16,5 +16,5 @@ export const AdminLayoutRoutes: Routes = [
|
|||||||
{ path: "invoices", component: InvoicesComponent },
|
{ path: "invoices", component: InvoicesComponent },
|
||||||
{ path: "payments", component: PaymentsComponent },
|
{ path: "payments", component: PaymentsComponent },
|
||||||
{ path: "notifications", component: NotificationsComponent },
|
{ path: "notifications", component: NotificationsComponent },
|
||||||
{ path: "login", component: LoginComponent}
|
// { path: "login", component: LoginComponent}
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -3,11 +3,13 @@ export interface CompanyModel {
|
|||||||
name: string;
|
name: string;
|
||||||
username: string;
|
username: string;
|
||||||
email: string;
|
email: string;
|
||||||
|
password: string;
|
||||||
phone: string;
|
phone: string;
|
||||||
image: string;
|
image: string;
|
||||||
description: string;
|
description: string;
|
||||||
address: string;
|
address: string;
|
||||||
city: string;
|
city: string;
|
||||||
|
industry: string;
|
||||||
stagingUrl: string;
|
stagingUrl: string;
|
||||||
productionUrl: string;
|
productionUrl: string;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,29 +27,34 @@ export class CompanyInformationComponent implements OnInit {
|
|||||||
private databaseInfoService: DatabaseInfoService,
|
private databaseInfoService: DatabaseInfoService,
|
||||||
private serverInfoService: ServerInfoService
|
private serverInfoService: ServerInfoService
|
||||||
) {
|
) {
|
||||||
this.companyService.getCompanyById(1).subscribe((company) => {
|
this.companyLocalStorage = JSON.parse(
|
||||||
|
localStorage.getItem("companyData") || "{}"
|
||||||
|
);
|
||||||
|
|
||||||
|
this.companyService
|
||||||
|
.getCompanyById(this.companyLocalStorage.id)
|
||||||
|
.subscribe((company) => {
|
||||||
this.company = company;
|
this.company = company;
|
||||||
console.log("Company: ", this.company);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.hostingInfoService.getHostingInfoById(2).subscribe((hostingInfo) => {
|
this.hostingInfoService
|
||||||
|
.getHostingInfoById(this.companyLocalStorage.id)
|
||||||
|
.subscribe((hostingInfo) => {
|
||||||
this.hostingInfo = hostingInfo;
|
this.hostingInfo = hostingInfo;
|
||||||
console.log("Hosting Info: ", this.hostingInfo);
|
|
||||||
|
|
||||||
this.timeDiff = this.calculateTimeDiff(this.hostingInfo.expirationDate);
|
this.timeDiff = this.calculateTimeDiff(this.hostingInfo.expirationDate);
|
||||||
console.log("Time Diff: ", this.timeDiff);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.databaseInfoService
|
this.databaseInfoService
|
||||||
.getDatabaseInfoById(1)
|
.getDatabaseInfoById(this.companyLocalStorage.id)
|
||||||
.subscribe((databaseInfo) => {
|
.subscribe((databaseInfo) => {
|
||||||
this.databaseInfo = databaseInfo;
|
this.databaseInfo = databaseInfo;
|
||||||
console.log("Database Info: ", this.databaseInfo);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.serverInfoService.getServerInfoById(1).subscribe((serverInfo) => {
|
this.serverInfoService
|
||||||
|
.getServerInfoById(this.companyLocalStorage.id)
|
||||||
|
.subscribe((serverInfo) => {
|
||||||
this.serverInfo = serverInfo;
|
this.serverInfo = serverInfo;
|
||||||
console.log("Server Info: ", this.serverInfo);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,6 @@
|
|||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
name="companyLogo"
|
name="companyLogo"
|
||||||
|
|
||||||
style="display: none"
|
style="display: none"
|
||||||
id="avatar-image"
|
id="avatar-image"
|
||||||
accept="image/*"
|
accept="image/*"
|
||||||
@@ -394,9 +393,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="updateSaveBtn">
|
<div class="updateSaveBtn">
|
||||||
<button class="btn btn-fill btn-save" type="submit">
|
<button class="btn btn-fill btn-save" type="submit">Save</button>
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -412,24 +409,22 @@
|
|||||||
<div class="block block-three"></div>
|
<div class="block block-three"></div>
|
||||||
<div class="block block-four"></div>
|
<div class="block block-four"></div>
|
||||||
<a href="javascript:void(0)">
|
<a href="javascript:void(0)">
|
||||||
<img alt="..." class="avatar" src="assets/img/emilyz.jpg" />
|
<img alt="..." class="avatar" [src]="company.image" />
|
||||||
|
|
||||||
<h5 class="title">Mike Andrew</h5>
|
<h5 class="title">{{ company.name }}</h5>
|
||||||
</a>
|
</a>
|
||||||
<p class="description">Ceo/Co-Founder</p>
|
<p class="description">{{ company.industry }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-description">
|
<div class="card-description">
|
||||||
Do not be scared of the truth because we need to restart the human
|
{{ company.description }}
|
||||||
foundation in truth And I love you like Kanye loves Kanye I love
|
|
||||||
Rick Owens’ bed design but the back is...
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<button class="btn btn-icon btn-round btn-facebook" href="#">
|
<button class="btn btn-icon btn-round btn-facebook mr-2" href="#">
|
||||||
<i class="bi bi-facebook"> </i>
|
<i class="bi bi-facebook"> </i>
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-icon btn-round btn-twitter" href="#">
|
<button class="btn btn-icon btn-round btn-twitter mr-2" href="#">
|
||||||
<i class="bi bi-twitter"> </i>
|
<i class="bi bi-twitter"> </i>
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-icon btn-round btn-linkedin" href="#">
|
<button class="btn btn-icon btn-round btn-linkedin" href="#">
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ export class CompanyProfileComponent implements OnInit {
|
|||||||
imgFormatError: boolean = false;
|
imgFormatError: boolean = false;
|
||||||
fileSizeError: boolean = false;
|
fileSizeError: boolean = false;
|
||||||
company: any;
|
company: any;
|
||||||
|
companyLocalStorage: any;
|
||||||
|
|
||||||
private emailPattern =
|
private emailPattern =
|
||||||
"(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])";
|
"(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])";
|
||||||
@@ -47,9 +48,12 @@ export class CompanyProfileComponent implements OnInit {
|
|||||||
companyLogo: ["", Validators.required],
|
companyLogo: ["", Validators.required],
|
||||||
});
|
});
|
||||||
|
|
||||||
this.companyService.getCompanyById(1).subscribe((company) => {
|
this.companyLocalStorage = JSON.parse(
|
||||||
|
localStorage.getItem("companyData") || "{}"
|
||||||
|
);
|
||||||
|
|
||||||
|
this.companyService.getCompanyById(this.companyLocalStorage.id).subscribe((company) => {
|
||||||
this.company = company;
|
this.company = company;
|
||||||
console.log(this.company);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -80,8 +84,6 @@ export class CompanyProfileComponent implements OnInit {
|
|||||||
this.imgFile = <File>event.target.files[0];
|
this.imgFile = <File>event.target.files[0];
|
||||||
this.fileName = this.imgFile.name;
|
this.fileName = this.imgFile.name;
|
||||||
|
|
||||||
console.log(this.imgFile);
|
|
||||||
|
|
||||||
if (this.checkFileType(this.imgFile)) {
|
if (this.checkFileType(this.imgFile)) {
|
||||||
let reader = new FileReader();
|
let reader = new FileReader();
|
||||||
reader.readAsDataURL(event.target.files[0]);
|
reader.readAsDataURL(event.target.files[0]);
|
||||||
|
|||||||
@@ -10,10 +10,15 @@ import { InvoiceService } from "../../services/invoice.service";
|
|||||||
export class InvoicesComponent implements OnInit {
|
export class InvoicesComponent implements OnInit {
|
||||||
invoices: InvoiceModel[];
|
invoices: InvoiceModel[];
|
||||||
options: any;
|
options: any;
|
||||||
|
companyLocalStorage: any;
|
||||||
|
|
||||||
constructor(private invoiceService: InvoiceService) {
|
constructor(private invoiceService: InvoiceService) {
|
||||||
|
this.companyLocalStorage = JSON.parse(
|
||||||
|
localStorage.getItem("companyData") || "{}"
|
||||||
|
);
|
||||||
|
|
||||||
this.invoiceService
|
this.invoiceService
|
||||||
.getInvoiceById(1)
|
.getInvoiceById(this.companyLocalStorage.id)
|
||||||
.subscribe((invoice: InvoiceModel[]) => {
|
.subscribe((invoice: InvoiceModel[]) => {
|
||||||
this.invoices = invoice;
|
this.invoices = invoice;
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,33 @@
|
|||||||
<div class="content ml-2 signinContainer overflow-hidden">
|
<div class="content ml-2 signinContainer overflow-hidden">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img
|
<img
|
||||||
src="../../../assets/img/logo.png"
|
src="../../../assets/img/logo-white.png"
|
||||||
class="img-fluid"
|
class="img-fluid"
|
||||||
height="150"
|
|
||||||
width="150"
|
|
||||||
alt="logo"
|
alt="logo"
|
||||||
style="width: 200px; height: 200px"
|
style="width: 200px; height: 200px; border-radius: 50%"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin-bottom: 3rem;">
|
||||||
|
<h1>
|
||||||
|
TALENTTIC TECH HUB CRM
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ng-container *ngIf="loginSuccess">
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
<i class="bi bi-check-circle mr-1"></i>
|
||||||
|
<span>Logged in successfully</span>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="loginError">
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<i class="bi bi-exclamation-circle mr-1"></i>
|
||||||
|
<span>Invalid email or password</span>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<section class="forms">
|
<section class="forms">
|
||||||
<form (ngSubmit)="signin()" [formGroup]="loginForm" novalidate>
|
<form (ngSubmit)="signin()" [formGroup]="loginForm" novalidate>
|
||||||
<div class="forms__inputBox">
|
<div class="forms__inputBox">
|
||||||
@@ -17,7 +35,8 @@
|
|||||||
type="email"
|
type="email"
|
||||||
formControlName="companyEmail"
|
formControlName="companyEmail"
|
||||||
id="companyEmail"
|
id="companyEmail"
|
||||||
autocomplete="off"
|
data-cy="signin-email"
|
||||||
|
autocomplete="new-email"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<label for="companyEmail">Email</label>
|
<label for="companyEmail">Email</label>
|
||||||
@@ -50,7 +69,7 @@
|
|||||||
formControlName="password"
|
formControlName="password"
|
||||||
id="password"
|
id="password"
|
||||||
data-cy="signin-password"
|
data-cy="signin-password"
|
||||||
autocomplete="off"
|
autocomplete="new-password"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
|
|||||||
@@ -1,4 +1,12 @@
|
|||||||
.signinContainer {
|
.signinContainer {
|
||||||
|
height: 100vh;
|
||||||
|
padding: 3rem;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
.forms {
|
.forms {
|
||||||
// Sign in form
|
// Sign in form
|
||||||
form {
|
form {
|
||||||
@@ -69,7 +77,9 @@
|
|||||||
|
|
||||||
// Forgot password
|
// Forgot password
|
||||||
.forgotPassw {
|
.forgotPassw {
|
||||||
margin-top: 0.6rem;
|
margin-top: 0.3rem;
|
||||||
|
margin-bottom: 1.6rem;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-top: 5px !important;
|
margin-top: 5px !important;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
@@ -129,6 +139,13 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.07rem;
|
font-size: 1.07rem;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: white;
|
||||||
|
color: #211069;
|
||||||
|
border: 2px solid #211069;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { Component, OnInit } from "@angular/core";
|
import { Component, OnInit } from "@angular/core";
|
||||||
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
|
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
|
||||||
import { ActivatedRoute, Router } from "@angular/router";
|
import { ActivatedRoute, Router } from "@angular/router";
|
||||||
|
import { CompanyService } from "../../services/company.service";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-login",
|
selector: "app-login",
|
||||||
@@ -12,38 +13,77 @@ export class LoginComponent implements OnInit {
|
|||||||
"(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])";
|
"(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])";
|
||||||
loginForm: FormGroup;
|
loginForm: FormGroup;
|
||||||
hide: boolean = true;
|
hide: boolean = true;
|
||||||
|
company: any;
|
||||||
|
loginSuccess: boolean = false;
|
||||||
|
loginError: boolean = false;
|
||||||
|
companyLocalStorage: any;
|
||||||
|
|
||||||
constructor(private fb: FormBuilder) {
|
constructor(
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private companyService: CompanyService,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) {
|
||||||
this.loginForm = this.fb.group({
|
this.loginForm = this.fb.group({
|
||||||
companyEmail: ["", [Validators.required, Validators.pattern(this.emailPattern)]],
|
companyEmail: [
|
||||||
|
"",
|
||||||
|
[Validators.required, Validators.pattern(this.emailPattern)],
|
||||||
|
],
|
||||||
password: ["", [Validators.required, Validators.minLength(6)]],
|
password: ["", [Validators.required, Validators.minLength(6)]],
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.companyService
|
||||||
|
.getCompanyById(1)
|
||||||
|
.subscribe((company) => {
|
||||||
|
this.company = company;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
get formControls() {
|
get formControls() {
|
||||||
return this.loginForm.controls;
|
return this.loginForm.controls;
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {
|
||||||
|
this.loginForm.patchValue({
|
||||||
|
companyEmail: this.company.email,
|
||||||
|
password: this.company.password,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
signin() {
|
signin() {
|
||||||
const email = this.loginForm.get('email')?.value;
|
const email = this.company.email;
|
||||||
const password = this.loginForm.get('password')?.value;
|
const password = this.company.password;
|
||||||
|
|
||||||
if (this.loginForm.invalid) {
|
if (this.loginForm.invalid) {
|
||||||
console.log('Form error');
|
console.log("Form error");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.loginForm.reset();
|
if (
|
||||||
// this.userService.signinUser(email, password);
|
this.loginForm.value.companyEmail !== email ||
|
||||||
|
this.loginForm.value.password !== password
|
||||||
|
) {
|
||||||
|
console.log("Invalid email or password");
|
||||||
|
this.loginError = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// this.userService.signinMessage$.subscribe((msg) => {
|
this.loginSuccess = true;
|
||||||
// console.log('message', msg);
|
|
||||||
// this.signinMessage = msg;
|
localStorage.setItem("companyData", JSON.stringify(this.company));
|
||||||
// setTimeout(() => {
|
|
||||||
// this.signinMessage = msg;
|
this.companyLocalStorage = JSON.parse(
|
||||||
// }, 1000);
|
localStorage.getItem("companyData") || "{}"
|
||||||
// });
|
);
|
||||||
|
|
||||||
|
if (this.companyLocalStorage) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.router.navigate(["/company-information"]);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loginForm.reset();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,10 +10,15 @@ import { PaymentService } from "../../services/payment.service";
|
|||||||
export class PaymentsComponent implements OnInit {
|
export class PaymentsComponent implements OnInit {
|
||||||
payments: PaymentModel[];
|
payments: PaymentModel[];
|
||||||
options: any;
|
options: any;
|
||||||
|
companyLocalStorage: any;
|
||||||
|
|
||||||
constructor(private paymentService: PaymentService) {
|
constructor(private paymentService: PaymentService) {
|
||||||
|
this.companyLocalStorage = JSON.parse(
|
||||||
|
localStorage.getItem("companyData") || "{}"
|
||||||
|
);
|
||||||
|
|
||||||
this.paymentService
|
this.paymentService
|
||||||
.getPaymentById(1)
|
.getPaymentById(this.companyLocalStorage.id)
|
||||||
.subscribe((payment: PaymentModel[]) => {
|
.subscribe((payment: PaymentModel[]) => {
|
||||||
this.payments = payment;
|
this.payments = payment;
|
||||||
|
|
||||||
|
|||||||
BIN
src/assets/img/logo-white.png
Normal file
BIN
src/assets/img/logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
@@ -10,7 +10,6 @@ $enable-transitions: true !default;
|
|||||||
$enable-grid-classes: true !default;
|
$enable-grid-classes: true !default;
|
||||||
$enable-print-styles: true !default;
|
$enable-print-styles: true !default;
|
||||||
|
|
||||||
|
|
||||||
// Color system
|
// Color system
|
||||||
|
|
||||||
$white: #ffffff !default;
|
$white: #ffffff !default;
|
||||||
@@ -28,9 +27,9 @@ $transparent-bg: transparent !default;
|
|||||||
$light-bg: #f5f6fa !default;
|
$light-bg: #f5f6fa !default;
|
||||||
$dark-background: #555555 !default;
|
$dark-background: #555555 !default;
|
||||||
|
|
||||||
|
|
||||||
$grays: () !default;
|
$grays: () !default;
|
||||||
$grays: map-merge((
|
$grays: map-merge(
|
||||||
|
(
|
||||||
"100": $gray-100,
|
"100": $gray-100,
|
||||||
"200": $gray-200,
|
"200": $gray-200,
|
||||||
"300": $gray-300,
|
"300": $gray-300,
|
||||||
@@ -39,8 +38,10 @@ $grays: map-merge((
|
|||||||
"600": $gray-600,
|
"600": $gray-600,
|
||||||
"700": $gray-700,
|
"700": $gray-700,
|
||||||
"800": $gray-800,
|
"800": $gray-800,
|
||||||
"900": $gray-900
|
"900": $gray-900,
|
||||||
), $grays);
|
),
|
||||||
|
$grays
|
||||||
|
);
|
||||||
|
|
||||||
$blue: #5e72e4 !default;
|
$blue: #5e72e4 !default;
|
||||||
$indigo: #5603ad !default;
|
$indigo: #5603ad !default;
|
||||||
@@ -57,26 +58,22 @@ $line-height-lg: 1.625rem !default;
|
|||||||
$line-height-sm: 1.5 !default;
|
$line-height-sm: 1.5 !default;
|
||||||
$line-height: 1.35em !default;
|
$line-height: 1.35em !default;
|
||||||
|
|
||||||
|
$opacity-gray-3: rgba(222, 222, 222, 0.3) !default;
|
||||||
|
$opacity-gray-5: rgba(222, 222, 222, 0.5) !default;
|
||||||
|
$opacity-gray-8: rgba(222, 222, 222, 0.8) !default;
|
||||||
|
|
||||||
$opacity-gray-3: rgba(222,222,222, .3) !default;
|
$opacity-5: rgba(255, 255, 255, 0.5) !default;
|
||||||
$opacity-gray-5: rgba(222,222,222, .5) !default;
|
$opacity-6: rgba(255, 255, 255, 0.6) !default;
|
||||||
$opacity-gray-8: rgba(222,222,222, .8) !default;
|
$opacity-8: rgba(255, 255, 255, 0.8) !default;
|
||||||
|
|
||||||
|
|
||||||
$opacity-5: rgba(255,255,255, .5) !default;
|
|
||||||
$opacity-6: rgba(255,255,255, .6) !default;
|
|
||||||
$opacity-8: rgba(255,255,255, .8) !default;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$opacity-1: rgba(255,255,255, .1) !default;
|
|
||||||
$opacity-2: rgba(255,255,255, .2) !default;
|
|
||||||
|
|
||||||
|
$opacity-1: rgba(255, 255, 255, 0.1) !default;
|
||||||
|
$opacity-2: rgba(255, 255, 255, 0.2) !default;
|
||||||
|
|
||||||
// end beniamin
|
// end beniamin
|
||||||
|
|
||||||
$colors: () !default;
|
$colors: () !default;
|
||||||
$colors: map-merge((
|
$colors: map-merge(
|
||||||
|
(
|
||||||
"blue": $blue,
|
"blue": $blue,
|
||||||
"indigo": $indigo,
|
"indigo": $indigo,
|
||||||
"purple": $purple,
|
"purple": $purple,
|
||||||
@@ -91,26 +88,27 @@ $colors: map-merge((
|
|||||||
"gray": $gray-600,
|
"gray": $gray-600,
|
||||||
"light": $gray-400,
|
"light": $gray-400,
|
||||||
"lighter": $gray-200,
|
"lighter": $gray-200,
|
||||||
"gray-dark": $gray-800
|
"gray-dark": $gray-800,
|
||||||
), $colors);
|
),
|
||||||
|
$colors
|
||||||
|
);
|
||||||
|
|
||||||
$default-color-opacity: rgba(182, 182, 182, .6) !default;
|
$default-color-opacity: rgba(182, 182, 182, 0.6) !default;
|
||||||
$orange-color: #f96332 !default;
|
$orange-color: #f96332 !default;
|
||||||
|
|
||||||
$default: #344675 !default;
|
$default: #211069 !default;
|
||||||
$primary: #211069 !default;
|
$primary: #211069 !default;
|
||||||
$secondary: #ADD8E6 !default;
|
$secondary: #add8e6 !default;
|
||||||
$success: #00f2c3 !default;
|
$success: #00f2c3 !default;
|
||||||
$info: #1d8cf8 !default;
|
$info: #1d8cf8 !default;
|
||||||
$warning: #F2C94C !default;
|
$warning: #f2c94c !default;
|
||||||
$danger: #FF4E4E !default;
|
$danger: #ff4e4e !default;
|
||||||
// $black: #222a42 !default;
|
// $black: #222a42 !default;
|
||||||
$black: #0c0c0e !default;
|
$black: #0c0c0e !default;
|
||||||
$white: #fff !default;
|
$white: #fff !default;
|
||||||
|
|
||||||
|
|
||||||
// gradient
|
// gradient
|
||||||
$default-states: #263148 !default;
|
$default-states: #564794 !default;
|
||||||
$primary-states: #ba54f5 !default;
|
$primary-states: #ba54f5 !default;
|
||||||
$success-states: #0098f0 !default;
|
$success-states: #0098f0 !default;
|
||||||
$info-states: #3358f4 !default;
|
$info-states: #3358f4 !default;
|
||||||
@@ -124,16 +122,16 @@ $background-black: #1e1e2f !default;
|
|||||||
$background-states-black: #1e1e24 !default;
|
$background-states-black: #1e1e24 !default;
|
||||||
|
|
||||||
// opacity
|
// opacity
|
||||||
$default-opacity: rgba(182, 182, 182, .6) !default;
|
$default-opacity: rgba(182, 182, 182, 0.6) !default;
|
||||||
$primary-opacity: rgba(249, 99, 50, .3) !default;
|
$primary-opacity: rgba(249, 99, 50, 0.3) !default;
|
||||||
$success-opacity: rgba(24, 206, 15, .3) !default;
|
$success-opacity: rgba(24, 206, 15, 0.3) !default;
|
||||||
$info-opacity: rgba(44, 168, 255, .3) !default;
|
$info-opacity: rgba(44, 168, 255, 0.3) !default;
|
||||||
$warning-opacity: rgba(255, 178, 54, .3) !default;
|
$warning-opacity: rgba(255, 178, 54, 0.3) !default;
|
||||||
$danger-opacity: rgba(255, 54, 54, .3) !default;
|
$danger-opacity: rgba(255, 54, 54, 0.3) !default;
|
||||||
|
|
||||||
$light-gray: #E3E3E3 !default;
|
$light-gray: #e3e3e3 !default;
|
||||||
$medium-gray: #DDDDDD !default;
|
$medium-gray: #dddddd !default;
|
||||||
$dark-gray: #9A9A9A !default;
|
$dark-gray: #9a9a9a !default;
|
||||||
$card-stats-gray: #808080 !default;
|
$card-stats-gray: #808080 !default;
|
||||||
$active-gray: #777777 !default;
|
$active-gray: #777777 !default;
|
||||||
$nav-gray: #444444 !default;
|
$nav-gray: #444444 !default;
|
||||||
@@ -141,8 +139,6 @@ $search-gray: #b7b7b7 !default;
|
|||||||
$calendar-gray: #9499a7 !default;
|
$calendar-gray: #9499a7 !default;
|
||||||
$active-blue: #00bbff !default;
|
$active-blue: #00bbff !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$light: $gray-500 !default;
|
$light: $gray-500 !default;
|
||||||
$dark: $gray-900 !default;
|
$dark: $gray-900 !default;
|
||||||
$darker: darken($gray-900, 15%) !default;
|
$darker: darken($gray-900, 15%) !default;
|
||||||
@@ -155,7 +151,7 @@ $google-plus: #dd4b39 !default;
|
|||||||
$google-plus-states: darken($google-plus, 5%) !default;
|
$google-plus-states: darken($google-plus, 5%) !default;
|
||||||
$instagram: #125688 !default;
|
$instagram: #125688 !default;
|
||||||
$instagram-states: lighten($instagram, 6%) !default;
|
$instagram-states: lighten($instagram, 6%) !default;
|
||||||
$linkedin: #0077B5 !default;
|
$linkedin: #0077b5 !default;
|
||||||
$linkedin-states: darken($linkedin, 5%) !default;
|
$linkedin-states: darken($linkedin, 5%) !default;
|
||||||
$pinterest: #cc2127 !default;
|
$pinterest: #cc2127 !default;
|
||||||
$pinterest-states: lighten($pinterest, 6%) !default;
|
$pinterest-states: lighten($pinterest, 6%) !default;
|
||||||
@@ -173,7 +169,8 @@ $behance: #1769ff !default;
|
|||||||
$behance-states: lighten($behance, 6%) !default;
|
$behance-states: lighten($behance, 6%) !default;
|
||||||
|
|
||||||
$theme-colors: () !default;
|
$theme-colors: () !default;
|
||||||
$theme-colors: map-merge((
|
$theme-colors: map-merge(
|
||||||
|
(
|
||||||
"default": $default,
|
"default": $default,
|
||||||
"primary": $primary,
|
"primary": $primary,
|
||||||
"secondary": $secondary,
|
"secondary": $secondary,
|
||||||
@@ -184,11 +181,14 @@ $theme-colors: map-merge((
|
|||||||
"white": $white,
|
"white": $white,
|
||||||
"neutral": $white,
|
"neutral": $white,
|
||||||
"dark": $dark,
|
"dark": $dark,
|
||||||
"darker": $darker
|
"darker": $darker,
|
||||||
), $theme-colors);
|
),
|
||||||
|
$theme-colors
|
||||||
|
);
|
||||||
|
|
||||||
$brand-colors: () !default;
|
$brand-colors: () !default;
|
||||||
$brand-colors: map-merge((
|
$brand-colors: map-merge(
|
||||||
|
(
|
||||||
"facebook": $facebook,
|
"facebook": $facebook,
|
||||||
"twitter": $twitter,
|
"twitter": $twitter,
|
||||||
"google-plus": $google-plus,
|
"google-plus": $google-plus,
|
||||||
@@ -201,8 +201,9 @@ $brand-colors: map-merge((
|
|||||||
"behance": $behance,
|
"behance": $behance,
|
||||||
"tumblr": $tumblr,
|
"tumblr": $tumblr,
|
||||||
"linkedin": $linkedin,
|
"linkedin": $linkedin,
|
||||||
), $brand-colors);
|
),
|
||||||
|
$brand-colors
|
||||||
|
);
|
||||||
|
|
||||||
/* brand Colors */
|
/* brand Colors */
|
||||||
$brand-primary: $primary !default;
|
$brand-primary: $primary !default;
|
||||||
@@ -236,23 +237,24 @@ $favorite-color: $yellow !default;
|
|||||||
$like-color: $blue !default;
|
$like-color: $blue !default;
|
||||||
$love-color: $red !default;
|
$love-color: $red !default;
|
||||||
|
|
||||||
|
|
||||||
// Body
|
// Body
|
||||||
|
|
||||||
$body-bg: $background-black !default;
|
$body-bg: $background-black !default;
|
||||||
$body-color: $gray-700 !default;
|
$body-color: $gray-700 !default;
|
||||||
|
|
||||||
|
|
||||||
// Sections
|
// Sections
|
||||||
|
|
||||||
$section-colors: () !default;
|
$section-colors: () !default;
|
||||||
$section-colors: map-merge((
|
$section-colors: map-merge(
|
||||||
|
(
|
||||||
"primary": $body-bg,
|
"primary": $body-bg,
|
||||||
"secondary": $secondary,
|
"secondary": $secondary,
|
||||||
"light": $gray-400,
|
"light": $gray-400,
|
||||||
"dark": $dark,
|
"dark": $dark,
|
||||||
"darker": $darker
|
"darker": $darker,
|
||||||
), $section-colors);
|
),
|
||||||
|
$section-colors
|
||||||
|
);
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
|
|
||||||
@@ -268,37 +270,54 @@ $grid-breakpoints: (
|
|||||||
sm: 576px,
|
sm: 576px,
|
||||||
md: 768px,
|
md: 768px,
|
||||||
lg: 992px,
|
lg: 992px,
|
||||||
xl: 1200px
|
xl: 1200px,
|
||||||
);
|
);
|
||||||
|
|
||||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||||
@include _assert-starts-at-zero($grid-breakpoints);
|
@include _assert-starts-at-zero($grid-breakpoints);
|
||||||
|
|
||||||
|
|
||||||
// Grid containers
|
// Grid containers
|
||||||
//
|
//
|
||||||
// Define the maximum width of `.container` for different screen sizes.
|
// Define the maximum width of `.container` for different screen sizes.
|
||||||
|
|
||||||
|
|
||||||
// Spacing
|
// Spacing
|
||||||
|
|
||||||
$spacer: 1rem !default;
|
$spacer: 1rem !default;
|
||||||
$spacers: () !default;
|
$spacers: () !default;
|
||||||
$spacers: map-merge((
|
$spacers: map-merge(
|
||||||
|
(
|
||||||
0: 0,
|
0: 0,
|
||||||
1: ($spacer * .25),
|
1: (
|
||||||
2: ($spacer * .5),
|
$spacer * 0.25,
|
||||||
|
),
|
||||||
|
2: (
|
||||||
|
$spacer * 0.5,
|
||||||
|
),
|
||||||
3: $spacer,
|
3: $spacer,
|
||||||
4: ($spacer * 1.5),
|
4: (
|
||||||
5: ($spacer * 3),
|
$spacer * 1.5,
|
||||||
'sm': ($spacer * 2),
|
),
|
||||||
'md': ($spacer * 4),
|
5: (
|
||||||
'lg': ($spacer * 6),
|
$spacer * 3,
|
||||||
'xl': ($spacer * 8)
|
),
|
||||||
), $spacers);
|
"sm": (
|
||||||
|
$spacer * 2,
|
||||||
|
),
|
||||||
|
"md": (
|
||||||
|
$spacer * 4,
|
||||||
|
),
|
||||||
|
"lg": (
|
||||||
|
$spacer * 6,
|
||||||
|
),
|
||||||
|
"xl": (
|
||||||
|
$spacer * 8,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
$spacers
|
||||||
|
);
|
||||||
|
|
||||||
$padding-base-vertical: .5rem !default;
|
$padding-base-vertical: 0.5rem !default;
|
||||||
$padding-base-horizontal: .7rem !default;
|
$padding-base-horizontal: 0.7rem !default;
|
||||||
|
|
||||||
$padding-btn-vertical: 11px !default;
|
$padding-btn-vertical: 11px !default;
|
||||||
$padding-btn-horizontal: 40px !default;
|
$padding-btn-horizontal: 40px !default;
|
||||||
@@ -310,19 +329,21 @@ $padding-lg-vertical: 15px !default;
|
|||||||
$padding-input-vertical: 11px !default;
|
$padding-input-vertical: 11px !default;
|
||||||
$padding-input-horizontal: 19px !default;
|
$padding-input-horizontal: 19px !default;
|
||||||
|
|
||||||
|
|
||||||
$margin-lg-vertical: 30px !default;
|
$margin-lg-vertical: 30px !default;
|
||||||
$margin-base-vertical: 15px !default;
|
$margin-base-vertical: 15px !default;
|
||||||
|
|
||||||
// This variable affects the `.h-*` and `.w-*` classes.
|
// This variable affects the `.h-*` and `.w-*` classes.
|
||||||
|
|
||||||
$sizes: () !default;
|
$sizes: () !default;
|
||||||
$sizes: map-merge((
|
$sizes: map-merge(
|
||||||
|
(
|
||||||
25: 25%,
|
25: 25%,
|
||||||
50: 50%,
|
50: 50%,
|
||||||
75: 75%,
|
75: 75%,
|
||||||
100: 100%
|
100: 100%,
|
||||||
), $sizes);
|
),
|
||||||
|
$sizes
|
||||||
|
);
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
|
||||||
@@ -334,10 +355,10 @@ $shape-height-sm: 1.5 !default;
|
|||||||
$none: 0 !default;
|
$none: 0 !default;
|
||||||
$border-thin: 1px !default;
|
$border-thin: 1px !default;
|
||||||
$border-thick: 2px !default;
|
$border-thick: 2px !default;
|
||||||
$border-width: .0625rem !default;
|
$border-width: 0.0625rem !default;
|
||||||
$border-color: $gray-200 !default;
|
$border-color: $gray-200 !default;
|
||||||
|
|
||||||
$border-radius: .25rem !default;
|
$border-radius: 0.25rem !default;
|
||||||
$border-radius-xl: 0.875rem !default;
|
$border-radius-xl: 0.875rem !default;
|
||||||
$border-radius-lg: 0.4285rem !default;
|
$border-radius-lg: 0.4285rem !default;
|
||||||
$border-radius-sm: 0.2857rem !default;
|
$border-radius-sm: 0.2857rem !default;
|
||||||
@@ -346,14 +367,15 @@ $border-radius-xs: 0.1428rem !default;
|
|||||||
$margin-bottom: 10px !default;
|
$margin-bottom: 10px !default;
|
||||||
$border: 1px solid !default;
|
$border: 1px solid !default;
|
||||||
|
|
||||||
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
|
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
|
||||||
$box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
|
$box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||||
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
|
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);
|
||||||
|
|
||||||
$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125);
|
$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125);
|
||||||
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
|
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
|
||||||
$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);
|
$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);
|
||||||
$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);
|
$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0, 0.2),
|
||||||
|
0px 2px 30px 0 rgba(0, 0, 0, 0.35);
|
||||||
|
|
||||||
$component-active-color: $white !default;
|
$component-active-color: $white !default;
|
||||||
$component-active-bg: theme-color("primary") !default;
|
$component-active-bg: theme-color("primary") !default;
|
||||||
@@ -363,11 +385,11 @@ $component-hover-color: $gray-300 !default;
|
|||||||
$component-hover-bg: $gray-300 !default;
|
$component-hover-bg: $gray-300 !default;
|
||||||
$component-hover-border-color: $gray-300 !default;
|
$component-hover-border-color: $gray-300 !default;
|
||||||
|
|
||||||
$caret-width: .3em !default;
|
$caret-width: 0.3em !default;
|
||||||
|
|
||||||
$transition-base: all .15s ease !default;
|
$transition-base: all 0.15s ease !default;
|
||||||
$transition-fade: opacity .15s linear !default;
|
$transition-fade: opacity 0.15s linear !default;
|
||||||
$transition-collapse: height .35s ease !default;
|
$transition-collapse: height 0.35s ease !default;
|
||||||
|
|
||||||
$fast-transition-time: 150ms !default;
|
$fast-transition-time: 150ms !default;
|
||||||
|
|
||||||
@@ -378,19 +400,18 @@ $transition-ease: ease 0s;
|
|||||||
$select-coordinates: 50% -40px !default;
|
$select-coordinates: 50% -40px !default;
|
||||||
$general-transition-time: 300ms !default;
|
$general-transition-time: 300ms !default;
|
||||||
|
|
||||||
|
|
||||||
// Fonts
|
// Fonts
|
||||||
|
|
||||||
$font-family-base: 'Poppins', sans-serif !default;
|
$font-family-base: "Poppins", sans-serif !default;
|
||||||
$font-family-alt: 'Poppins', sans-serif !default;
|
$font-family-alt: "Poppins", sans-serif !default;
|
||||||
|
|
||||||
$font-size-dash: .875rem !default;
|
$font-size-dash: 0.875rem !default;
|
||||||
|
|
||||||
$font-size-base: $font-size-dash !default; // Assumes the browser default, typically `16px`
|
$font-size-base: $font-size-dash !default; // Assumes the browser default, typically `16px`
|
||||||
$font-size-xl: ($font-size-base * 1.428);
|
$font-size-xl: ($font-size-base * 1.428);
|
||||||
$font-size-lg: ($font-size-base * 1.142);
|
$font-size-lg: ($font-size-base * 1.142);
|
||||||
$font-size-sm: ($font-size-base * .85714286);
|
$font-size-sm: ($font-size-base * 0.85714286);
|
||||||
$font-size-xs: ($font-size-base * .714);
|
$font-size-xs: ($font-size-base * 0.714);
|
||||||
|
|
||||||
$h1-font-size: $font-size-base * 2.35714285 !default; //2.1875rem
|
$h1-font-size: $font-size-base * 2.35714285 !default; //2.1875rem
|
||||||
$h2-font-size: $font-size-base * 1.9285714 !default;
|
$h2-font-size: $font-size-base * 1.9285714 !default;
|
||||||
@@ -415,17 +436,17 @@ $headings-font-weight: $font-weight-normal !default;
|
|||||||
$headings-line-height: 1.2 !default;
|
$headings-line-height: 1.2 !default;
|
||||||
$headings-color: $gray-800 !default;
|
$headings-color: $gray-800 !default;
|
||||||
|
|
||||||
$heading-letter-spacing: .025em !default;
|
$heading-letter-spacing: 0.025em !default;
|
||||||
$heading-font-size: .95rem !default;
|
$heading-font-size: 0.95rem !default;
|
||||||
$heading-text-transform: uppercase !default;
|
$heading-text-transform: uppercase !default;
|
||||||
$heading-font-weight: $headings-font-weight !default;
|
$heading-font-weight: $headings-font-weight !default;
|
||||||
|
|
||||||
$heading-title-letter-spacing: .025em !default;
|
$heading-title-letter-spacing: 0.025em !default;
|
||||||
$heading-title-font-size: 1.375rem !default;
|
$heading-title-font-size: 1.375rem !default;
|
||||||
$heading-title-font-weight: $font-weight-bold !default;
|
$heading-title-font-weight: $font-weight-bold !default;
|
||||||
$heading-title-text-transform: uppercase !default;
|
$heading-title-text-transform: uppercase !default;
|
||||||
|
|
||||||
$heading-section-letter-spacing: .025em !default;
|
$heading-section-letter-spacing: 0.025em !default;
|
||||||
$heading-section-font-size: 1.375rem !default;
|
$heading-section-font-size: 1.375rem !default;
|
||||||
$heading-section-font-weight: $font-weight-bold !default;
|
$heading-section-font-weight: $font-weight-bold !default;
|
||||||
$heading-section-text-transform: uppercase !default;
|
$heading-section-text-transform: uppercase !default;
|
||||||
@@ -455,20 +476,19 @@ $text-muted: $gray-600 !default;
|
|||||||
$blockquote-small-color: $gray-600 !default;
|
$blockquote-small-color: $gray-600 !default;
|
||||||
$blockquote-font-size: ($font-size-base * 1.1);
|
$blockquote-font-size: ($font-size-base * 1.1);
|
||||||
|
|
||||||
$hr-border-color: rgba($black, .1);
|
$hr-border-color: rgba($black, 0.1);
|
||||||
$hr-border-width: $border-width !default;
|
$hr-border-width: $border-width !default;
|
||||||
|
|
||||||
$mark-padding: .2em !default;
|
$mark-padding: 0.2em !default;
|
||||||
|
|
||||||
$dt-font-weight: $font-weight-bold !default;
|
$dt-font-weight: $font-weight-bold !default;
|
||||||
|
|
||||||
$list-inline-padding: .5rem !default;
|
$list-inline-padding: 0.5rem !default;
|
||||||
|
|
||||||
$mark-bg: #fcf8e3 !default;
|
$mark-bg: #fcf8e3 !default;
|
||||||
|
|
||||||
$hr-margin-y: $spacer * 2 !default;
|
$hr-margin-y: $spacer * 2 !default;
|
||||||
|
|
||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
|
|
||||||
$icon-size: auto !default;
|
$icon-size: auto !default;
|
||||||
@@ -480,15 +500,14 @@ $icon-font-size-lg: 1.325rem !default;
|
|||||||
$icon-size-lg: 3.6rem !default;
|
$icon-size-lg: 3.6rem !default;
|
||||||
$icon-size-xl: 5rem !default;
|
$icon-size-xl: 5rem !default;
|
||||||
|
|
||||||
|
|
||||||
// Tables
|
// Tables
|
||||||
|
|
||||||
$table-cell-padding: 1rem !default;
|
$table-cell-padding: 1rem !default;
|
||||||
$table-cell-padding-sm: .3rem !default;
|
$table-cell-padding-sm: 0.3rem !default;
|
||||||
|
|
||||||
$table-bg: transparent !default;
|
$table-bg: transparent !default;
|
||||||
$table-accent-bg: rgba($black, .05);
|
$table-accent-bg: rgba($black, 0.05);
|
||||||
$table-hover-bg: rgba($black, .075);
|
$table-hover-bg: rgba($black, 0.075);
|
||||||
$table-active-bg: $table-hover-bg !default;
|
$table-active-bg: $table-hover-bg !default;
|
||||||
|
|
||||||
$table-border-width: $border-width !default;
|
$table-border-width: $border-width !default;
|
||||||
@@ -498,16 +517,15 @@ $table-head-bg: $gray-200 !default;
|
|||||||
$table-head-color: $gray-700 !default;
|
$table-head-color: $gray-700 !default;
|
||||||
|
|
||||||
$table-dark-bg: $gray-900 !default;
|
$table-dark-bg: $gray-900 !default;
|
||||||
$table-dark-accent-bg: rgba($white, .05);
|
$table-dark-accent-bg: rgba($white, 0.05);
|
||||||
$table-dark-hover-bg: rgba($white, .075);
|
$table-dark-hover-bg: rgba($white, 0.075);
|
||||||
$table-dark-border-color: lighten($gray-900, 7.5%);
|
$table-dark-border-color: lighten($gray-900, 7.5%);
|
||||||
$table-dark-color: $body-bg !default;
|
$table-dark-color: $body-bg !default;
|
||||||
|
|
||||||
|
|
||||||
// Buttons + Forms
|
// Buttons + Forms
|
||||||
|
|
||||||
$input-btn-padding-y: .5rem !default;
|
$input-btn-padding-y: 0.5rem !default;
|
||||||
$input-btn-padding-x: .7rem !default;
|
$input-btn-padding-x: 0.7rem !default;
|
||||||
$input-btn-line-height: $shape-height-base !default;
|
$input-btn-line-height: $shape-height-base !default;
|
||||||
|
|
||||||
$input-btn-focus-width: 0 !default;
|
$input-btn-focus-width: 0 !default;
|
||||||
@@ -515,19 +533,19 @@ $input-btn-focus-color: rgba($component-active-bg, 1);
|
|||||||
//$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
|
//$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
|
||||||
$input-btn-focus-box-shadow: none !default;
|
$input-btn-focus-box-shadow: none !default;
|
||||||
|
|
||||||
$input-btn-padding-y-sm: .25rem !default;
|
$input-btn-padding-y-sm: 0.25rem !default;
|
||||||
$input-btn-padding-x-sm: .5rem !default;
|
$input-btn-padding-x-sm: 0.5rem !default;
|
||||||
$input-btn-line-height-sm: 1.35 !default;
|
$input-btn-line-height-sm: 1.35 !default;
|
||||||
|
|
||||||
$input-btn-padding-y-lg: .875rem !default;
|
$input-btn-padding-y-lg: 0.875rem !default;
|
||||||
$input-btn-padding-x-lg: 1rem !default;
|
$input-btn-padding-x-lg: 1rem !default;
|
||||||
$input-btn-line-height-lg: 1.35 !default;
|
$input-btn-line-height-lg: 1.35 !default;
|
||||||
|
|
||||||
$input-btn-border-width: 1px !default;
|
$input-btn-border-width: 1px !default;
|
||||||
|
|
||||||
$input-btn-font-size-sm: .75rem !default;
|
$input-btn-font-size-sm: 0.75rem !default;
|
||||||
$input-btn-font-size: .875rem !default;
|
$input-btn-font-size: 0.875rem !default;
|
||||||
$input-btn-font-size-lg: .875rem !default;
|
$input-btn-font-size-lg: 0.875rem !default;
|
||||||
|
|
||||||
$input-padding-vertical: 11px !default;
|
$input-padding-vertical: 11px !default;
|
||||||
$input-padding-horizontal: 19px !default;
|
$input-padding-horizontal: 19px !default;
|
||||||
@@ -551,18 +569,16 @@ $btn-border-width: $input-btn-border-width !default;
|
|||||||
$btn-font-size-lg: 1em !default;
|
$btn-font-size-lg: 1em !default;
|
||||||
$btn-font-weight: 600 !default;
|
$btn-font-weight: 600 !default;
|
||||||
$btn-text-transform: uppercase !default;
|
$btn-text-transform: uppercase !default;
|
||||||
$btn-letter-spacing: .025em !default;
|
$btn-letter-spacing: 0.025em !default;
|
||||||
$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
$btn-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
|
$btn-hover-box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1),
|
||||||
|
0 3px 6px rgba(0, 0, 0, 0.08);
|
||||||
$btn-focus-box-shadow: $btn-hover-box-shadow !default;
|
$btn-focus-box-shadow: $btn-hover-box-shadow !default;
|
||||||
$btn-focus-width: $input-btn-focus-width !default;
|
$btn-focus-width: $input-btn-focus-width !default;
|
||||||
|
|
||||||
|
|
||||||
$btn-active-box-shadow: none !default;
|
$btn-active-box-shadow: none !default;
|
||||||
$btn-round-radius: 30px !default;
|
$btn-round-radius: 30px !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Forms
|
// Forms
|
||||||
|
|
||||||
$input-padding-y: $input-btn-padding-y !default;
|
$input-padding-y: $input-btn-padding-y !default;
|
||||||
@@ -585,10 +601,12 @@ $input-border-radius-sm: $border-radius-sm !default;
|
|||||||
$input-bg: $transparent-bg !default;
|
$input-bg: $transparent-bg !default;
|
||||||
$input-disabled-bg: $gray-200 !default;
|
$input-disabled-bg: $gray-200 !default;
|
||||||
|
|
||||||
$input-muted-bg: #EDF0F5 !default;
|
$input-muted-bg: #edf0f5 !default;
|
||||||
|
|
||||||
$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
|
$input-alternative-box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15),
|
||||||
$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
|
0 1px 0 rgba(0, 0, 0, 0.02);
|
||||||
|
$input-focus-alternative-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
|
||||||
|
0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
$input-color: $opacity-8 !default;
|
$input-color: $opacity-8 !default;
|
||||||
$input-border-color: #cad1d7 !default;
|
$input-border-color: #cad1d7 !default;
|
||||||
@@ -596,7 +614,7 @@ $input-border-width: $input-btn-border-width !default;
|
|||||||
$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default;
|
$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default;
|
||||||
|
|
||||||
$input-focus-bg: $white !default;
|
$input-focus-bg: $white !default;
|
||||||
$input-focus-border-color: rgba(50,151,211,.25);
|
$input-focus-border-color: rgba(50, 151, 211, 0.25);
|
||||||
$input-focus-color: $input-color !default;
|
$input-focus-color: $input-color !default;
|
||||||
$input-focus-width: 0 !default;
|
$input-focus-width: 0 !default;
|
||||||
$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default;
|
$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default;
|
||||||
@@ -605,11 +623,11 @@ $input-placeholder-color: $gray-500 !default;
|
|||||||
$input-focus-placeholder-color: $gray-500 !default;
|
$input-focus-placeholder-color: $gray-500 !default;
|
||||||
|
|
||||||
$input-height-border: $input-border-width * 2 !default;
|
$input-height-border: $input-border-width * 2 !default;
|
||||||
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
|
$input-height-inner: ($font-size-base * $input-btn-line-height) +
|
||||||
|
($input-btn-padding-y * 2) !default;
|
||||||
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
|
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
|
||||||
|
|
||||||
$input-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
$input-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
|
||||||
|
|
||||||
// Input groups
|
// Input groups
|
||||||
|
|
||||||
@@ -621,7 +639,6 @@ $input-group-addon-focus-color: $input-focus-color !default;
|
|||||||
$input-group-addon-focus-bg: $input-focus-bg !default;
|
$input-group-addon-focus-bg: $input-focus-bg !default;
|
||||||
$input-group-addon-focus-border-color: $input-focus-border-color !default;
|
$input-group-addon-focus-border-color: $input-focus-border-color !default;
|
||||||
|
|
||||||
|
|
||||||
// Custom forms
|
// Custom forms
|
||||||
|
|
||||||
$custom-control-gutter: 1.75rem !default;
|
$custom-control-gutter: 1.75rem !default;
|
||||||
@@ -648,7 +665,10 @@ $custom-control-indicator-checked-color: $component-active-color !default
|
|||||||
$custom-control-indicator-checked-bg: $component-active-bg !default;
|
$custom-control-indicator-checked-bg: $component-active-bg !default;
|
||||||
$custom-control-indicator-checked-border-color: $component-active-border-color !default;
|
$custom-control-indicator-checked-border-color: $component-active-border-color !default;
|
||||||
$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default;
|
$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default;
|
||||||
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5);
|
$custom-control-indicator-checked-disabled-bg: rgba(
|
||||||
|
theme-color("primary"),
|
||||||
|
0.5
|
||||||
|
);
|
||||||
|
|
||||||
$custom-control-indicator-disabled-bg: $gray-200 !default;
|
$custom-control-indicator-disabled-bg: $gray-200 !default;
|
||||||
$custom-control-label-disabled-color: $gray-600 !default;
|
$custom-control-label-disabled-color: $gray-600 !default;
|
||||||
@@ -666,7 +686,6 @@ $form-feedback-valid-color: theme-color("success") !default;
|
|||||||
$form-feedback-invalid-bg: lighten($warning, 15%);
|
$form-feedback-invalid-bg: lighten($warning, 15%);
|
||||||
$form-feedback-invalid-color: theme-color("warning") !default;
|
$form-feedback-invalid-color: theme-color("warning") !default;
|
||||||
|
|
||||||
|
|
||||||
// Allows for customizing button radius independently from global border radius
|
// Allows for customizing button radius independently from global border radius
|
||||||
|
|
||||||
$btn-border-radius: $input-border-radius !default;
|
$btn-border-radius: $input-border-radius !default;
|
||||||
@@ -674,14 +693,13 @@ $btn-border-radius-xl: $input-border-radius-xl !default;
|
|||||||
$btn-border-radius-lg: $input-border-radius-lg !default;
|
$btn-border-radius-lg: $input-border-radius-lg !default;
|
||||||
$btn-border-radius-sm: $input-border-radius !default;
|
$btn-border-radius-sm: $input-border-radius !default;
|
||||||
|
|
||||||
|
|
||||||
// No UI Slider
|
// No UI Slider
|
||||||
|
|
||||||
$noui-target-bg: #eceeef !default;
|
$noui-target-bg: #eceeef !default;
|
||||||
$noui-target-thickness: 5px !default;
|
$noui-target-thickness: 5px !default;
|
||||||
$noui-target-border-radius: 5px !default;
|
$noui-target-border-radius: 5px !default;
|
||||||
$noui-target-border-color: 0 !default;
|
$noui-target-border-color: 0 !default;
|
||||||
$noui-target-box-shadow: inset 0 1px 2px rgba(90,97,105,.1);
|
$noui-target-box-shadow: inset 0 1px 2px rgba(90, 97, 105, 0.1);
|
||||||
|
|
||||||
$noui-slider-connect-bg: $primary !default;
|
$noui-slider-connect-bg: $primary !default;
|
||||||
$noui-slider-connect-disabled-bg: #b2b2b2 !default;
|
$noui-slider-connect-disabled-bg: #b2b2b2 !default;
|
||||||
@@ -693,26 +711,26 @@ $noui-handle-border-radius: 100% !default;
|
|||||||
|
|
||||||
$noui-origin-border-radius: 2px !default;
|
$noui-origin-border-radius: 2px !default;
|
||||||
|
|
||||||
|
|
||||||
// Dropdown
|
// Dropdown
|
||||||
|
|
||||||
$dropdown-bg: $white !default;
|
$dropdown-bg: $white !default;
|
||||||
$dropdown-border-width: 0 !default;
|
$dropdown-border-width: 0 !default;
|
||||||
$dropdown-border-color: rgba($black, .15);
|
$dropdown-border-color: rgba($black, 0.15);
|
||||||
$dropdown-border-radius: $border-radius-xs !default;
|
$dropdown-border-radius: $border-radius-xs !default;
|
||||||
$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
|
$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
|
||||||
|
0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
$dropdown-link-active-color: $component-active-color !default;
|
$dropdown-link-active-color: $component-active-color !default;
|
||||||
$dropdown-link-active-bg: $component-active-bg !default;
|
$dropdown-link-active-bg: $component-active-bg !default;
|
||||||
|
|
||||||
// Navs
|
// Navs
|
||||||
|
|
||||||
$nav-link-padding-y: .5rem !default;
|
$nav-link-padding-y: 0.5rem !default;
|
||||||
$nav-link-padding-x: 1rem !default;
|
$nav-link-padding-x: 1rem !default;
|
||||||
$nav-link-color: $gray-700 !default;
|
$nav-link-color: $gray-700 !default;
|
||||||
$nav-link-disabled-color: $gray-600 !default;
|
$nav-link-disabled-color: $gray-600 !default;
|
||||||
|
|
||||||
$nav-pills-padding-y: .75rem !default;
|
$nav-pills-padding-y: 0.75rem !default;
|
||||||
$nav-pills-padding-x: 1rem !default;
|
$nav-pills-padding-x: 1rem !default;
|
||||||
|
|
||||||
$nav-pills-space-x: 1rem !default;
|
$nav-pills-space-x: 1rem !default;
|
||||||
@@ -730,15 +748,15 @@ $nav-pills-box-shadow: $btn-box-shadow !default;
|
|||||||
|
|
||||||
// Navbar
|
// Navbar
|
||||||
|
|
||||||
$navbar-transition: all .15s linear !default;
|
$navbar-transition: all 0.15s linear !default;
|
||||||
$navbar-padding-y: .625rem !default;
|
$navbar-padding-y: 0.625rem !default;
|
||||||
$navbar-padding-x: .9375rem !default;
|
$navbar-padding-x: 0.9375rem !default;
|
||||||
|
|
||||||
$navbar-nav-link-padding-x: 1rem !default;
|
$navbar-nav-link-padding-x: 1rem !default;
|
||||||
$navbar-nav-link-padding-y: 1rem !default;
|
$navbar-nav-link-padding-y: 1rem !default;
|
||||||
|
|
||||||
$navbar-nav-link-font-family: $font-family-alt !default;
|
$navbar-nav-link-font-family: $font-family-alt !default;
|
||||||
$navbar-nav-link-font-size: .9rem !default;
|
$navbar-nav-link-font-size: 0.9rem !default;
|
||||||
$navbar-nav-link-font-weight: 400 !default;
|
$navbar-nav-link-font-weight: 400 !default;
|
||||||
$navbar-nav-link-text-transform: normal !default;
|
$navbar-nav-link-text-transform: normal !default;
|
||||||
$navbar-nav-link-letter-spacing: 0 !default;
|
$navbar-nav-link-letter-spacing: 0 !default;
|
||||||
@@ -747,30 +765,29 @@ $navbar-nav-link-border-radius: $border-radius !default;
|
|||||||
/* navbar color */
|
/* navbar color */
|
||||||
$navbar-color: #1a1e34 !default;
|
$navbar-color: #1a1e34 !default;
|
||||||
$navbar-dark-bg: transparent !default;
|
$navbar-dark-bg: transparent !default;
|
||||||
$navbar-dark-hover-bg: rgba(255, 255, 255, .1);
|
$navbar-dark-hover-bg: rgba(255, 255, 255, 0.1);
|
||||||
$navbar-dark-active-bg: rgba(255, 255, 255, .1);
|
$navbar-dark-active-bg: rgba(255, 255, 255, 0.1);
|
||||||
$navbar-dark-color: rgba($white, .95);
|
$navbar-dark-color: rgba($white, 0.95);
|
||||||
$navbar-dark-hover-color: rgba($white, .65);
|
$navbar-dark-hover-color: rgba($white, 0.65);
|
||||||
$navbar-dark-active-color: rgba($white, .65);
|
$navbar-dark-active-color: rgba($white, 0.65);
|
||||||
$navbar-dark-disabled-color: rgba($white, .25);
|
$navbar-dark-disabled-color: rgba($white, 0.25);
|
||||||
$navbar-dark-toggler-border-color: transparent !default;
|
$navbar-dark-toggler-border-color: transparent !default;
|
||||||
|
|
||||||
$navbar-light-bg: transparent !default;
|
$navbar-light-bg: transparent !default;
|
||||||
$navbar-light-hover-bg: rgba(0, 0, 0, .1);
|
$navbar-light-hover-bg: rgba(0, 0, 0, 0.1);
|
||||||
$navbar-light-active-bg: rgba(0, 0, 0, .1);
|
$navbar-light-active-bg: rgba(0, 0, 0, 0.1);
|
||||||
$navbar-light-color: rgba($black, .5);
|
$navbar-light-color: rgba($black, 0.5);
|
||||||
$navbar-light-hover-color: rgba($black, .7);
|
$navbar-light-hover-color: rgba($black, 0.7);
|
||||||
$navbar-light-active-color: rgba($black, .9);
|
$navbar-light-active-color: rgba($black, 0.9);
|
||||||
$navbar-light-disabled-color: rgba($black, .3);
|
$navbar-light-disabled-color: rgba($black, 0.3);
|
||||||
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$navbar-light-toggler-border-color: transparent !default;
|
$navbar-light-toggler-border-color: transparent !default;
|
||||||
$full-width: 100% !default;
|
$full-width: 100% !default;
|
||||||
$navbar-padding: 10px 15px !default;
|
$navbar-padding: 10px 15px !default;
|
||||||
|
|
||||||
|
|
||||||
// Alerts
|
// Alerts
|
||||||
|
|
||||||
$alert-padding-y: .9rem !default;
|
$alert-padding-y: 0.9rem !default;
|
||||||
$alert-padding-x: 1.25rem !default;
|
$alert-padding-x: 1.25rem !default;
|
||||||
$alert-border-radius: $border-radius-sm !default;
|
$alert-border-radius: $border-radius-sm !default;
|
||||||
|
|
||||||
@@ -778,7 +795,6 @@ $alert-bg-level: -2 !default;
|
|||||||
$alert-border-level: -2 !default;
|
$alert-border-level: -2 !default;
|
||||||
$alert-color-level: 0 !default;
|
$alert-color-level: 0 !default;
|
||||||
|
|
||||||
|
|
||||||
// List group
|
// List group
|
||||||
|
|
||||||
$list-group-bg: $white !default;
|
$list-group-bg: $white !default;
|
||||||
@@ -803,39 +819,37 @@ $list-group-action-hover-color: $list-group-action-color !default;
|
|||||||
$list-group-action-active-color: $list-group-action-color !default;
|
$list-group-action-active-color: $list-group-action-color !default;
|
||||||
$list-group-action-active-bg: $gray-200 !default;
|
$list-group-action-active-bg: $gray-200 !default;
|
||||||
|
|
||||||
|
|
||||||
// Close
|
// Close
|
||||||
|
|
||||||
$close-font-size: $font-size-base * 1.5 !default;
|
$close-font-size: $font-size-base * 1.5 !default;
|
||||||
$close-font-weight: $font-weight-bold !default;
|
$close-font-weight: $font-weight-bold !default;
|
||||||
$close-bg: transparent !default;
|
$close-bg: transparent !default;
|
||||||
$close-hover-bg: transparent !default;
|
$close-hover-bg: transparent !default;
|
||||||
$close-color: rgba(0, 0, 0, .6);
|
$close-color: rgba(0, 0, 0, 0.6);
|
||||||
$close-hover-color: rgba(0, 0, 0, .9);
|
$close-hover-color: rgba(0, 0, 0, 0.9);
|
||||||
$close-text-shadow: none !default;
|
$close-text-shadow: none !default;
|
||||||
|
|
||||||
|
|
||||||
// Popovers
|
// Popovers
|
||||||
|
|
||||||
$popover-font-size: $font-size-sm !default;
|
$popover-font-size: $font-size-sm !default;
|
||||||
$popover-bg: $white !default;
|
$popover-bg: $white !default;
|
||||||
$popover-max-width: 276px !default;
|
$popover-max-width: 276px !default;
|
||||||
$popover-border-width: 1px !default;
|
$popover-border-width: 1px !default;
|
||||||
$popover-border-color: rgba($black, .05);
|
$popover-border-color: rgba($black, 0.05);
|
||||||
$popover-border-radius: $border-radius-lg !default;
|
$popover-border-radius: $border-radius-lg !default;
|
||||||
$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2);
|
$popover-box-shadow: 0px 0.5rem 2rem 0px rgba($black, 0.2);
|
||||||
|
|
||||||
$popover-header-bg: $popover-bg !default;
|
$popover-header-bg: $popover-bg !default;
|
||||||
$popover-header-color: $headings-color !default;
|
$popover-header-color: $headings-color !default;
|
||||||
$popover-header-padding-y: .75rem !default;
|
$popover-header-padding-y: 0.75rem !default;
|
||||||
$popover-header-padding-x: .75rem !default;
|
$popover-header-padding-x: 0.75rem !default;
|
||||||
|
|
||||||
$popover-body-color: $body-color !default;
|
$popover-body-color: $body-color !default;
|
||||||
$popover-body-padding-y: $popover-header-padding-y !default;
|
$popover-body-padding-y: $popover-header-padding-y !default;
|
||||||
$popover-body-padding-x: $popover-header-padding-x !default;
|
$popover-body-padding-x: $popover-header-padding-x !default;
|
||||||
|
|
||||||
$popover-arrow-width: 1.5rem !default;
|
$popover-arrow-width: 1.5rem !default;
|
||||||
$popover-arrow-height: .75rem !default;
|
$popover-arrow-height: 0.75rem !default;
|
||||||
$popover-arrow-color: $popover-bg !default;
|
$popover-arrow-color: $popover-bg !default;
|
||||||
|
|
||||||
$popover-arrow-outer-color: transparent !default;
|
$popover-arrow-outer-color: transparent !default;
|
||||||
@@ -846,19 +860,16 @@ $breadcrumb-bg: $black-states !default;
|
|||||||
$breadcrumb-divider-color: $white !default;
|
$breadcrumb-divider-color: $white !default;
|
||||||
$breadcrumb-active-color: $white !default;
|
$breadcrumb-active-color: $white !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Badges
|
// Badges
|
||||||
|
|
||||||
$badge-font-size: $font-size-xs !default;
|
$badge-font-size: $font-size-xs !default;
|
||||||
$badge-font-weight: $font-weight-extra-bold !default;
|
$badge-font-weight: $font-weight-extra-bold !default;
|
||||||
$badge-padding-y: .25rem !default;
|
$badge-padding-y: 0.25rem !default;
|
||||||
$badge-padding-x: .5rem !default;
|
$badge-padding-x: 0.5rem !default;
|
||||||
$badge-border-radius: $border-radius !default;
|
$badge-border-radius: $border-radius !default;
|
||||||
$badge-text-transfom: uppercase;
|
$badge-text-transfom: uppercase;
|
||||||
|
|
||||||
$badge-pill-padding-x: .875em !default;
|
$badge-pill-padding-x: 0.875em !default;
|
||||||
$badge-pill-border-radius: $border-radius-xl !default;
|
$badge-pill-border-radius: $border-radius-xl !default;
|
||||||
|
|
||||||
$badge-circle-size: 2rem;
|
$badge-circle-size: 2rem;
|
||||||
@@ -866,8 +877,7 @@ $badge-circle-size: 2rem;
|
|||||||
// Pagination
|
// Pagination
|
||||||
|
|
||||||
$pagination-padding-y: 0 !default;
|
$pagination-padding-y: 0 !default;
|
||||||
$pagination-padding-x: .6875rem !default;
|
$pagination-padding-x: 0.6875rem !default;
|
||||||
|
|
||||||
|
|
||||||
$pagination-color: $white !default;
|
$pagination-color: $white !default;
|
||||||
$pagination-bg: transparent !default;
|
$pagination-bg: transparent !default;
|
||||||
@@ -889,14 +899,13 @@ $pagination-disabled-color: $gray-600 !default;
|
|||||||
$pagination-disabled-bg: transparent !default;
|
$pagination-disabled-bg: transparent !default;
|
||||||
$pagination-disabled-border-color: $gray-300 !default;
|
$pagination-disabled-border-color: $gray-300 !default;
|
||||||
|
|
||||||
|
|
||||||
// Cards
|
// Cards
|
||||||
|
|
||||||
$card-spacer-y: 1.25rem !default;
|
$card-spacer-y: 1.25rem !default;
|
||||||
$card-spacer-x: 1.5rem !default;
|
$card-spacer-x: 1.5rem !default;
|
||||||
$card-border-width: $border-width !default;
|
$card-border-width: $border-width !default;
|
||||||
$card-border-radius: $border-radius-sm !default;
|
$card-border-radius: $border-radius-sm !default;
|
||||||
$card-border-color: rgba($black, .05);
|
$card-border-color: rgba($black, 0.05);
|
||||||
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
|
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
|
||||||
$card-cap-bg: $gray-100 !default;
|
$card-cap-bg: $gray-100 !default;
|
||||||
$card-bg: $white !default;
|
$card-bg: $white !default;
|
||||||
@@ -917,13 +926,13 @@ $tooltip-max-width: 200px !default;
|
|||||||
$tooltip-color: $black !default;
|
$tooltip-color: $black !default;
|
||||||
$tooltip-bg: $white !default;
|
$tooltip-bg: $white !default;
|
||||||
$tooltip-border-radius: $border-radius !default;
|
$tooltip-border-radius: $border-radius !default;
|
||||||
$tooltip-opacity: .9 !default;
|
$tooltip-opacity: 0.9 !default;
|
||||||
$tooltip-padding-y: .25rem !default;
|
$tooltip-padding-y: 0.25rem !default;
|
||||||
$tooltip-padding-x: .5rem !default;
|
$tooltip-padding-x: 0.5rem !default;
|
||||||
$tooltip-margin: 0 !default;
|
$tooltip-margin: 0 !default;
|
||||||
|
|
||||||
$tooltip-arrow-width: .8rem !default;
|
$tooltip-arrow-width: 0.8rem !default;
|
||||||
$tooltip-arrow-height: .4rem !default;
|
$tooltip-arrow-height: 0.4rem !default;
|
||||||
$tooltip-arrow-color: $tooltip-bg !default;
|
$tooltip-arrow-color: $tooltip-bg !default;
|
||||||
|
|
||||||
// Modals
|
// Modals
|
||||||
@@ -935,14 +944,15 @@ $modal-md: 500px !default;
|
|||||||
$modal-sm: 380px !default;
|
$modal-sm: 380px !default;
|
||||||
$modal-title-line-height: 1.1;
|
$modal-title-line-height: 1.1;
|
||||||
$modal-content-bg: $white !default;
|
$modal-content-bg: $white !default;
|
||||||
$modal-content-border-color: rgba($black, .2);
|
$modal-content-border-color: rgba($black, 0.2);
|
||||||
$modal-content-border-width: 1px !default;
|
$modal-content-border-width: 1px !default;
|
||||||
$modal-content-border-radius: $border-radius-sm !default;
|
$modal-content-border-radius: $border-radius-sm !default;
|
||||||
$modal-content-box-shadow-xs: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
|
$modal-content-box-shadow-xs: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
|
||||||
$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
|
$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50, 50, 93, 0.2),
|
||||||
|
0 5px 15px rgba(0, 0, 0, 0.17);
|
||||||
|
|
||||||
$modal-backdrop-bg: $black !default;
|
$modal-backdrop-bg: $black !default;
|
||||||
$modal-backdrop-opacity: .16 !default;
|
$modal-backdrop-opacity: 0.16 !default;
|
||||||
$modal-header-border-color: $gray-200 !default;
|
$modal-header-border-color: $gray-200 !default;
|
||||||
$modal-footer-border-color: $modal-header-border-color !default;
|
$modal-footer-border-color: $modal-header-border-color !default;
|
||||||
$modal-header-border-width: $modal-content-border-width !default;
|
$modal-header-border-width: $modal-content-border-width !default;
|
||||||
@@ -951,7 +961,7 @@ $modal-header-padding: 24px 24px 0 24px !default;
|
|||||||
|
|
||||||
// Progress bars
|
// Progress bars
|
||||||
|
|
||||||
$progress-height: .5rem !default;
|
$progress-height: 0.5rem !default;
|
||||||
$progress-bg: rgba(0, 0, 0, 0.3) !default;
|
$progress-bg: rgba(0, 0, 0, 0.3) !default;
|
||||||
$progress-border-radius: $border-radius-xl !default;
|
$progress-border-radius: $border-radius-xl !default;
|
||||||
$progress-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3) !default;
|
$progress-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3) !default;
|
||||||
@@ -978,7 +988,10 @@ $datepicker-active-background: theme-color("primary") !default;
|
|||||||
$datepicker-active-box-shadow: none !default;
|
$datepicker-active-box-shadow: none !default;
|
||||||
|
|
||||||
$datepicker-range-background: theme-color("primary") !default;
|
$datepicker-range-background: theme-color("primary") !default;
|
||||||
$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);
|
$datepicker-range-cell-focused-background: darken(
|
||||||
|
$datepicker-range-background,
|
||||||
|
5%
|
||||||
|
);
|
||||||
$datepicker-range-color: $white !default;
|
$datepicker-range-color: $white !default;
|
||||||
$datepicker-range-highlighted-bg: $gray-200 !default;
|
$datepicker-range-highlighted-bg: $gray-200 !default;
|
||||||
|
|
||||||
@@ -986,10 +999,9 @@ $datepicker-dropdown-border: lighten($gray-400, 40%);
|
|||||||
$datepicker-dropdown-bg: $white !default;
|
$datepicker-dropdown-bg: $white !default;
|
||||||
$datepicker-highlighted-bg: $datepicker-active-background !default;
|
$datepicker-highlighted-bg: $datepicker-active-background !default;
|
||||||
|
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
|
|
||||||
$footer-link-font-size: .85rem !default;
|
$footer-link-font-size: 0.85rem !default;
|
||||||
$footer-bg: theme-color("secondary") !default;
|
$footer-bg: theme-color("secondary") !default;
|
||||||
$footer-color: $gray-600 !default;
|
$footer-color: $gray-600 !default;
|
||||||
$footer-link-color: $gray-600 !default;
|
$footer-link-color: $gray-600 !default;
|
||||||
|
|||||||
Reference in New Issue
Block a user