Merge branch 'login-dev' of adekola/talenttic-crm-app into master
This commit is contained in:
Gogs
@@ -10457,7 +10457,7 @@ a.text-darker:focus {
|
||||
margin: 4px 1px;
|
||||
border-radius: 0.4285rem;
|
||||
cursor: pointer;
|
||||
background: #211069;
|
||||
background: #211069 !important;
|
||||
background-image: -webkit-linear-gradient(
|
||||
to bottom left,
|
||||
#211069,
|
||||
@@ -10510,27 +10510,27 @@ a.text-darker:focus {
|
||||
background-color: #263148 !important;
|
||||
background-image: linear-gradient(
|
||||
to bottom left,
|
||||
#344675,
|
||||
#263148,
|
||||
#344675
|
||||
#211069,
|
||||
#564794,
|
||||
#211069
|
||||
) !important;
|
||||
background-image: -webkit-linear-gradient(
|
||||
to bottom left,
|
||||
#211069,
|
||||
#263148,
|
||||
#564794,
|
||||
#211069
|
||||
) !important;
|
||||
background-image: -o-linear-gradient(
|
||||
to bottom left,
|
||||
#211069,
|
||||
#263148,
|
||||
#564794,
|
||||
#211069
|
||||
) !important;
|
||||
background-image: -moz-linear-gradient(
|
||||
to bottom left,
|
||||
#344675,
|
||||
#263148,
|
||||
#344675
|
||||
#211069,
|
||||
#564794,
|
||||
#211069
|
||||
) !important;
|
||||
color: #ffffff;
|
||||
box-shadow: none;
|
||||
@@ -10643,9 +10643,9 @@ fieldset[disabled] .navbar .navbar-nav > a.btn.active {
|
||||
border-color: #344675;
|
||||
background-image: linear-gradient(
|
||||
to bottom left,
|
||||
#344675,
|
||||
#263148,
|
||||
#344675
|
||||
#211069,
|
||||
#564794,
|
||||
#211069
|
||||
) !important;
|
||||
background-image: -webkit-linear-gradient(
|
||||
to bottom left,
|
||||
|
||||
@@ -2,11 +2,15 @@ import { NgModule } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { BrowserModule } from "@angular/platform-browser";
|
||||
import { Routes, RouterModule } from "@angular/router";
|
||||
|
||||
import { LoginComponent } from "./pages/login/login.component";
|
||||
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
|
||||
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: "login",
|
||||
component: LoginComponent
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
redirectTo: "company-information",
|
||||
|
||||
@@ -14,6 +14,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { AppRoutingModule } from "./app-routing.module";
|
||||
import { ComponentsModule } from "./components/components.module";
|
||||
import { LoginComponent } from './pages/login/login.component';
|
||||
// import { DatePipe } from "@angular/common";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
||||
@@ -1,123 +1,129 @@
|
||||
<nav class=" navbar navbar-expand-lg navbar-absolute navbar-transparent">
|
||||
<div class=" container-fluid">
|
||||
<div class=" navbar-wrapper">
|
||||
<div class=" navbar-toggle d-inline">
|
||||
<button class=" navbar-toggler" type="button" (click)="sidebarToggle()">
|
||||
<span class=" navbar-toggler-bar bar1"> </span>
|
||||
<span class=" navbar-toggler-bar bar2"> </span>
|
||||
<span class=" navbar-toggler-bar bar3"> </span>
|
||||
<nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-wrapper">
|
||||
<div class="navbar-toggle d-inline">
|
||||
<button class="navbar-toggler" type="button" (click)="sidebarToggle()">
|
||||
<span class="navbar-toggler-bar bar1"> </span>
|
||||
<span class="navbar-toggler-bar bar2"> </span>
|
||||
<span class="navbar-toggler-bar bar3"> </span>
|
||||
</button>
|
||||
</div>
|
||||
<a class=" navbar-brand" href="javascript:void(0)"> {{ getTitle() }} </a>
|
||||
<a class="navbar-brand" href="javascript:void(0)"> {{ getTitle() }} </a>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Toggle navigation"
|
||||
class=" navbar-toggler"
|
||||
class="navbar-toggler"
|
||||
(click)="collapse()"
|
||||
[attr.aria-expanded]="!isCollapsed"
|
||||
aria-controls="collapseExample"
|
||||
id="navigation"
|
||||
type="button"
|
||||
>
|
||||
<span class=" navbar-toggler-bar navbar-kebab"> </span>
|
||||
<span class=" navbar-toggler-bar navbar-kebab"> </span>
|
||||
<span class=" navbar-toggler-bar navbar-kebab"> </span>
|
||||
<span class="navbar-toggler-bar navbar-kebab"> </span>
|
||||
<span class="navbar-toggler-bar navbar-kebab"> </span>
|
||||
<span class="navbar-toggler-bar navbar-kebab"> </span>
|
||||
</button>
|
||||
<div class=" navbar-collapse" [ngbCollapse]="isCollapsed" id="navigation">
|
||||
<ul class=" navbar-nav ml-auto">
|
||||
<li class=" search-bar input-group">
|
||||
<div class="navbar-collapse" [ngbCollapse]="isCollapsed" id="navigation">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="search-bar input-group">
|
||||
<button
|
||||
class=" btn btn-link"
|
||||
class="btn btn-link"
|
||||
data-target="#searchModal"
|
||||
data-toggle="modal"
|
||||
(click)="open(content)"
|
||||
id="search-button"
|
||||
>
|
||||
<i class=" tim-icons icon-zoom-split"> </i>
|
||||
<span class=" d-lg-none d-md-block"> Search </span>
|
||||
<i class="tim-icons icon-zoom-split"> </i>
|
||||
<span class="d-lg-none d-md-block"> Search </span>
|
||||
</button>
|
||||
</li>
|
||||
<li class=" nav-item" ngbDropdown>
|
||||
<li class="nav-item" ngbDropdown>
|
||||
<a
|
||||
class=" nav-link"
|
||||
class="nav-link"
|
||||
data-toggle="dropdown"
|
||||
href="javascript:void(0)"
|
||||
ngbDropdownToggle
|
||||
>
|
||||
<div class=" notification d-none d-lg-block d-xl-block"></div>
|
||||
<i class=" tim-icons icon-sound-wave"> </i>
|
||||
<p class=" d-lg-none">Notifications</p>
|
||||
<div class="notification d-none d-lg-block d-xl-block"></div>
|
||||
<i class="bi bi-bell"></i>
|
||||
<p class="d-lg-none">Notifications</p>
|
||||
</a>
|
||||
<ul class=" dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<ul class="dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
|
||||
<li class="nav-link">
|
||||
<a class="nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Mike John responded to your email
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<li class="nav-link">
|
||||
<a class="nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
You have 5 more tasks
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<li class="nav-link">
|
||||
<a class="nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Your friend Michael is in town
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<li class="nav-link">
|
||||
<a class="nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Another notification
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<li class="nav-link">
|
||||
<a class="nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Another one
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class=" nav-item" ngbDropdown>
|
||||
<li class="nav-item" ngbDropdown>
|
||||
<a
|
||||
class=" nav-link"
|
||||
class="nav-link"
|
||||
data-toggle="dropdown"
|
||||
href="javascript:void(0)"
|
||||
ngbDropdownToggle
|
||||
>
|
||||
<div class=" photo">
|
||||
<img alt="Profile Photo" src="assets/img/anime3.png" />
|
||||
<div class="photo">
|
||||
<!-- <img alt="Profile Photo" [src]="assets/img/anime3.png" /> -->
|
||||
<img alt="Profile Photo" [src]="company.image" />
|
||||
</div>
|
||||
<b class=" caret d-none d-lg-block d-xl-block"> </b>
|
||||
<p class=" d-lg-none">Log out</p>
|
||||
<b class="caret d-none d-lg-block d-xl-block"> </b>
|
||||
<p class="d-lg-none">Log out</p>
|
||||
</a>
|
||||
<ul class=" dropdown-navbar" ngbDropdownMenu>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<ul class="dropdown-navbar" ngbDropdownMenu>
|
||||
<li class="nav-link">
|
||||
<a class="nav-item" routerLink="/company-profile" href="javascript:void(0)" ngbDropdownItem>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<li class="nav-link">
|
||||
<a class="nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class=" dropdown-divider"></li>
|
||||
<li class=" nav-link">
|
||||
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-link">
|
||||
<a
|
||||
class="nav-item"
|
||||
href="javascript:void(0)"
|
||||
(click)="logout()"
|
||||
ngbDropdownItem
|
||||
>
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class=" separator d-lg-none"></li>
|
||||
<li class="separator d-lg-none"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ng-template #content let-modal>
|
||||
<div class=" modal-header">
|
||||
<div class="modal-header">
|
||||
<input
|
||||
class=" form-control"
|
||||
class="form-control"
|
||||
id="inlineFormInputGroup"
|
||||
placeholder="SEARCH"
|
||||
type="text"
|
||||
@@ -125,13 +131,12 @@
|
||||
|
||||
<button
|
||||
aria-label="Close"
|
||||
class=" close"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
(click)="modal.dismiss('Cross click')"
|
||||
>
|
||||
<i class=" tim-icons icon-simple-remove"> </i>
|
||||
<i class="tim-icons icon-simple-remove"> </i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@@ -2,12 +2,14 @@ import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";
|
||||
import { ROUTES } from "../sidebar/sidebar.component";
|
||||
import { Location } from "@angular/common";
|
||||
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({
|
||||
selector: "app-navbar",
|
||||
templateUrl: "./navbar.component.html",
|
||||
styleUrls: ["./navbar.component.css"]
|
||||
styleUrls: ["./navbar.component.css"],
|
||||
})
|
||||
export class NavbarComponent implements OnInit, OnDestroy {
|
||||
private listTitles: any[];
|
||||
@@ -19,33 +21,49 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
||||
public isCollapsed = true;
|
||||
|
||||
closeResult: string;
|
||||
company: any;
|
||||
companyLocalStorage: any;
|
||||
|
||||
constructor(
|
||||
location: Location,
|
||||
private element: ElementRef,
|
||||
private router: Router,
|
||||
private modalService: NgbModal
|
||||
private modalService: NgbModal,
|
||||
private toastr: ToastrService,
|
||||
private companyService: CompanyService
|
||||
) {
|
||||
this.location = location;
|
||||
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)
|
||||
updateColor = () => {
|
||||
var navbar = document.getElementsByClassName('navbar')[0];
|
||||
var navbar = document.getElementsByClassName("navbar")[0];
|
||||
if (window.innerWidth < 993 && !this.isCollapsed) {
|
||||
navbar.classList.add('bg-white');
|
||||
navbar.classList.remove('navbar-transparent');
|
||||
navbar.classList.add("bg-white");
|
||||
navbar.classList.remove("navbar-transparent");
|
||||
} else {
|
||||
navbar.classList.remove('bg-white');
|
||||
navbar.classList.add('navbar-transparent');
|
||||
navbar.classList.remove("bg-white");
|
||||
navbar.classList.add("navbar-transparent");
|
||||
}
|
||||
};
|
||||
ngOnInit() {
|
||||
window.addEventListener("resize", this.updateColor);
|
||||
this.listTitles = ROUTES.filter(listTitle => listTitle);
|
||||
this.listTitles = ROUTES.filter((listTitle) => listTitle);
|
||||
const navbar: HTMLElement = this.element.nativeElement;
|
||||
this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
|
||||
this.router.events.subscribe(event => {
|
||||
this.router.events.subscribe((event) => {
|
||||
this.sidebarClose();
|
||||
var $layer: any = document.getElementsByClassName("close-layer")[0];
|
||||
if ($layer) {
|
||||
@@ -77,7 +95,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
||||
mainPanel.style.position = "fixed";
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
toggleButton.classList.add("toggled");
|
||||
}, 500);
|
||||
|
||||
@@ -93,7 +111,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
||||
);
|
||||
|
||||
if (window.innerWidth < 991) {
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
mainPanel.style.position = "";
|
||||
}, 500);
|
||||
}
|
||||
@@ -118,13 +136,13 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
||||
if ($layer) {
|
||||
$layer.remove();
|
||||
}
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$toggle.classList.remove("toggled");
|
||||
}, 400);
|
||||
|
||||
this.mobile_menu_visible = 0;
|
||||
} else {
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$toggle.classList.add("toggled");
|
||||
}, 430);
|
||||
|
||||
@@ -139,16 +157,16 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
||||
.appendChild($layer);
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$layer.classList.add("visible");
|
||||
}, 100);
|
||||
|
||||
$layer.onclick = function() {
|
||||
$layer.onclick = function () {
|
||||
//asign a function
|
||||
html.classList.remove("nav-open");
|
||||
this.mobile_menu_visible = 0;
|
||||
$layer.classList.remove("visible");
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$layer.remove();
|
||||
$toggle.classList.remove("toggled");
|
||||
}, 400);
|
||||
@@ -174,23 +192,39 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
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}`;
|
||||
}, (reason) => {
|
||||
},
|
||||
(reason) => {
|
||||
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private getDismissReason(reason: any): string {
|
||||
if (reason === ModalDismissReasons.ESC) {
|
||||
return 'by pressing ESC';
|
||||
return "by pressing ESC";
|
||||
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
|
||||
return 'by clicking on a backdrop';
|
||||
return "by clicking on a backdrop";
|
||||
} else {
|
||||
return `with: ${reason}`;
|
||||
}
|
||||
}
|
||||
ngOnDestroy(){
|
||||
ngOnDestroy() {
|
||||
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",
|
||||
username: "starkindustries",
|
||||
email: "info@starkindustries.com",
|
||||
password: "password1",
|
||||
phone: "09055784625",
|
||||
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:
|
||||
"A multinational technology company specializing in weapons manufacturing, led by Tony Stark.",
|
||||
address: "200 Park Ave, New York, NY 10166",
|
||||
city: "New York City, NY ",
|
||||
industry: "Technology",
|
||||
stagingUrl: "stage.starkindustries.com",
|
||||
productionUrl: "starkindustries.com",
|
||||
},
|
||||
@@ -21,6 +24,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Wayne Enterprises",
|
||||
username: "wayneenterprises",
|
||||
email: "info@wayneenterprises.com",
|
||||
password: "password2",
|
||||
phone: "0812012234",
|
||||
image:
|
||||
"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.",
|
||||
address: "10 Wayne Tower, Gotham City, NJ 07102",
|
||||
city: "Gotham City, NJ ",
|
||||
industry: "Technology",
|
||||
stagingUrl: "stage.wayneenterprises.com",
|
||||
productionUrl: "wayneenterprises.com",
|
||||
},
|
||||
@@ -36,6 +41,7 @@ export const company: CompanyModel[] = [
|
||||
name: "LexCorp",
|
||||
username: "lexcorp",
|
||||
email: "info@lexcorp.com",
|
||||
password: "password3",
|
||||
phone: "08174361092",
|
||||
image:
|
||||
"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.",
|
||||
address: "LexCorp Tower, Metropolis, NY 10001",
|
||||
city: "Metropolis, NY",
|
||||
industry: "Advertising and marketing",
|
||||
stagingUrl: "stage.lexcorp.com",
|
||||
productionUrl: "lexcorp.com",
|
||||
},
|
||||
@@ -51,6 +58,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Sahara Security & Investigation Ltd.",
|
||||
username: "saharasecurity_ng",
|
||||
email: "info@saharasecurity.ng",
|
||||
password: "password4",
|
||||
phone: "08120122347",
|
||||
image:
|
||||
"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.",
|
||||
address: "5, Bode Thomas Street, Surulere, Lagos State",
|
||||
city: "Lagos, Nigeria",
|
||||
industry: "Security",
|
||||
stagingUrl: "stage.saharasecurity.com",
|
||||
productionUrl: "saharasecurity.ng",
|
||||
},
|
||||
@@ -66,6 +75,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Umbrella Corporation",
|
||||
username: "umbrellacorporation",
|
||||
email: "info@umbrellacorp.com",
|
||||
password: "password5",
|
||||
phone: "07073214806",
|
||||
image:
|
||||
"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.",
|
||||
address: "Umbrella Corporation, Raccoon City, NY 10001",
|
||||
city: "Raccoon City, NY",
|
||||
industry: "Pharmaceuticals",
|
||||
stagingUrl: "stage.umbrellacorp.com",
|
||||
productionUrl: "umbrellacorp.com",
|
||||
},
|
||||
@@ -81,6 +92,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Aperture Science",
|
||||
username: "aperturescience",
|
||||
email: "aperturescience@info.com",
|
||||
password: "password6",
|
||||
phone: "08033567890",
|
||||
image:
|
||||
"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.",
|
||||
address: "Aperture Science, New York City, NY 10001",
|
||||
city: "New York City, NY",
|
||||
industry: "Technology",
|
||||
stagingUrl: "stage.aperturescience.com",
|
||||
productionUrl: "aperturescience.com",
|
||||
},
|
||||
@@ -96,6 +109,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Stellar Airways Nigeria Ltd.",
|
||||
username: "stellarairways_ng",
|
||||
email: "info@stellarairways.ng",
|
||||
password: "password7",
|
||||
phone: "07084849673",
|
||||
image:
|
||||
"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.",
|
||||
address: "Murtala Muhammed International Airport, Ikeja, Lagos State",
|
||||
city: "Lagos, Nigeria",
|
||||
industry: "Airlines",
|
||||
stagingUrl: "stage.stellarairways.com",
|
||||
productionUrl: "stellarairways.ng",
|
||||
},
|
||||
@@ -111,6 +126,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Deltacore Technologies Ltd.",
|
||||
username: "deltacore_ng",
|
||||
email: "info@deltacore.ng",
|
||||
password: "password8",
|
||||
phone: "09022345109",
|
||||
image:
|
||||
"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.",
|
||||
address: "23, Adeyemo Alakija Street, Victoria Island, Lagos State",
|
||||
city: "Lagos, Nigeria",
|
||||
industry: "Technology",
|
||||
stagingUrl: "stage.deltacore.com",
|
||||
productionUrl: "deltacore.ng",
|
||||
},
|
||||
@@ -126,6 +143,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Goldmine Oil & Gas Ltd.",
|
||||
username: "goldmineoilgas_ng",
|
||||
email: "info@goldmineoilgas.ng",
|
||||
password: "password9",
|
||||
phone: "0911250021",
|
||||
image:
|
||||
"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.",
|
||||
address: "14, Marina Road, Warri South, Delta State",
|
||||
city: "Warri, Nigeria",
|
||||
industry: "Oil & Gas",
|
||||
stagingUrl: "stage.goldmineoilgas.com",
|
||||
productionUrl: "goldmineoilgas.ng",
|
||||
},
|
||||
@@ -141,6 +160,7 @@ export const company: CompanyModel[] = [
|
||||
name: "Cedarwood Construction & Engineering Ltd.",
|
||||
username: "cedarwoodconstruction_ng",
|
||||
email: "info@cedarwoodconstruction.ng",
|
||||
password: "password10",
|
||||
phone: "0911250021",
|
||||
image:
|
||||
"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.",
|
||||
address: "9, Adeniyi Jones Avenue, Ikeja, Lagos State",
|
||||
city: "Lagos, Nigeria",
|
||||
industry: "Construction",
|
||||
stagingUrl: "stage.cedarwoodconstruction.com",
|
||||
productionUrl: "cedarwoodconstruction.ng",
|
||||
},
|
||||
|
||||
@@ -5,7 +5,7 @@ import { CompanyInformationComponent } from "../../pages/company-information/com
|
||||
import { CompanyProfileComponent } from "../../pages/company-profile/company-profile.component";
|
||||
import { InvoicesComponent } from "../../pages/invoices/invoices.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";
|
||||
|
||||
@@ -16,5 +16,5 @@ export const AdminLayoutRoutes: Routes = [
|
||||
{ path: "invoices", component: InvoicesComponent },
|
||||
{ path: "payments", component: PaymentsComponent },
|
||||
{ path: "notifications", component: NotificationsComponent },
|
||||
{ path: "login", component: LoginComponent}
|
||||
// { path: "login", component: LoginComponent}
|
||||
];
|
||||
|
||||
@@ -3,11 +3,13 @@ export interface CompanyModel {
|
||||
name: string;
|
||||
username: string;
|
||||
email: string;
|
||||
password: string;
|
||||
phone: string;
|
||||
image: string;
|
||||
description: string;
|
||||
address: string;
|
||||
city: string;
|
||||
industry: string;
|
||||
stagingUrl: string;
|
||||
productionUrl: string;
|
||||
}
|
||||
|
||||
@@ -27,29 +27,34 @@ export class CompanyInformationComponent implements OnInit {
|
||||
private databaseInfoService: DatabaseInfoService,
|
||||
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;
|
||||
console.log("Company: ", this.company);
|
||||
});
|
||||
|
||||
this.hostingInfoService.getHostingInfoById(2).subscribe((hostingInfo) => {
|
||||
this.hostingInfoService
|
||||
.getHostingInfoById(this.companyLocalStorage.id)
|
||||
.subscribe((hostingInfo) => {
|
||||
this.hostingInfo = hostingInfo;
|
||||
console.log("Hosting Info: ", this.hostingInfo);
|
||||
|
||||
this.timeDiff = this.calculateTimeDiff(this.hostingInfo.expirationDate);
|
||||
console.log("Time Diff: ", this.timeDiff);
|
||||
});
|
||||
|
||||
this.databaseInfoService
|
||||
.getDatabaseInfoById(1)
|
||||
.getDatabaseInfoById(this.companyLocalStorage.id)
|
||||
.subscribe((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;
|
||||
console.log("Server Info: ", this.serverInfo);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
<input
|
||||
type="file"
|
||||
name="companyLogo"
|
||||
|
||||
style="display: none"
|
||||
id="avatar-image"
|
||||
accept="image/*"
|
||||
@@ -394,9 +393,7 @@
|
||||
</div>
|
||||
|
||||
<div class="updateSaveBtn">
|
||||
<button class="btn btn-fill btn-save" type="submit">
|
||||
Save
|
||||
</button>
|
||||
<button class="btn btn-fill btn-save" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -412,24 +409,22 @@
|
||||
<div class="block block-three"></div>
|
||||
<div class="block block-four"></div>
|
||||
<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>
|
||||
<p class="description">Ceo/Co-Founder</p>
|
||||
<p class="description">{{ company.industry }}</p>
|
||||
</div>
|
||||
<div class="card-description">
|
||||
Do not be scared of the truth because we need to restart the human
|
||||
foundation in truth And I love you like Kanye loves Kanye I love
|
||||
Rick Owens’ bed design but the back is...
|
||||
{{ company.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<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>
|
||||
</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>
|
||||
</button>
|
||||
<button class="btn btn-icon btn-round btn-linkedin" href="#">
|
||||
|
||||
@@ -17,6 +17,7 @@ export class CompanyProfileComponent implements OnInit {
|
||||
imgFormatError: boolean = false;
|
||||
fileSizeError: boolean = false;
|
||||
company: any;
|
||||
companyLocalStorage: any;
|
||||
|
||||
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])+)\\])";
|
||||
@@ -47,9 +48,12 @@ export class CompanyProfileComponent implements OnInit {
|
||||
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;
|
||||
console.log(this.company);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -80,8 +84,6 @@ export class CompanyProfileComponent implements OnInit {
|
||||
this.imgFile = <File>event.target.files[0];
|
||||
this.fileName = this.imgFile.name;
|
||||
|
||||
console.log(this.imgFile);
|
||||
|
||||
if (this.checkFileType(this.imgFile)) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
|
||||
@@ -10,10 +10,15 @@ import { InvoiceService } from "../../services/invoice.service";
|
||||
export class InvoicesComponent implements OnInit {
|
||||
invoices: InvoiceModel[];
|
||||
options: any;
|
||||
companyLocalStorage: any;
|
||||
|
||||
constructor(private invoiceService: InvoiceService) {
|
||||
this.companyLocalStorage = JSON.parse(
|
||||
localStorage.getItem("companyData") || "{}"
|
||||
);
|
||||
|
||||
this.invoiceService
|
||||
.getInvoiceById(1)
|
||||
.getInvoiceById(this.companyLocalStorage.id)
|
||||
.subscribe((invoice: InvoiceModel[]) => {
|
||||
this.invoices = invoice;
|
||||
|
||||
|
||||
@@ -1,15 +1,33 @@
|
||||
<div class="content ml-2 signinContainer overflow-hidden">
|
||||
<div class="logo">
|
||||
<img
|
||||
src="../../../assets/img/logo.png"
|
||||
src="../../../assets/img/logo-white.png"
|
||||
class="img-fluid"
|
||||
height="150"
|
||||
width="150"
|
||||
alt="logo"
|
||||
style="width: 200px; height: 200px"
|
||||
style="width: 200px; height: 200px; border-radius: 50%"
|
||||
/>
|
||||
</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">
|
||||
<form (ngSubmit)="signin()" [formGroup]="loginForm" novalidate>
|
||||
<div class="forms__inputBox">
|
||||
@@ -17,7 +35,8 @@
|
||||
type="email"
|
||||
formControlName="companyEmail"
|
||||
id="companyEmail"
|
||||
autocomplete="off"
|
||||
data-cy="signin-email"
|
||||
autocomplete="new-email"
|
||||
required
|
||||
/>
|
||||
<label for="companyEmail">Email</label>
|
||||
@@ -50,7 +69,7 @@
|
||||
formControlName="password"
|
||||
id="password"
|
||||
data-cy="signin-password"
|
||||
autocomplete="off"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
/>
|
||||
<i
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
.signinContainer {
|
||||
height: 100vh;
|
||||
padding: 3rem;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.forms {
|
||||
// Sign in form
|
||||
form {
|
||||
@@ -69,7 +77,9 @@
|
||||
|
||||
// Forgot password
|
||||
.forgotPassw {
|
||||
margin-top: 0.6rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 1.6rem;
|
||||
|
||||
p {
|
||||
margin-top: 5px !important;
|
||||
margin-bottom: 0 !important;
|
||||
@@ -129,6 +139,13 @@
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
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 { FormGroup, FormBuilder, Validators } from "@angular/forms";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { CompanyService } from "../../services/company.service";
|
||||
|
||||
@Component({
|
||||
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])+)\\])";
|
||||
loginForm: FormGroup;
|
||||
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({
|
||||
companyEmail: ["", [Validators.required, Validators.pattern(this.emailPattern)]],
|
||||
companyEmail: [
|
||||
"",
|
||||
[Validators.required, Validators.pattern(this.emailPattern)],
|
||||
],
|
||||
password: ["", [Validators.required, Validators.minLength(6)]],
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
this.companyService
|
||||
.getCompanyById(1)
|
||||
.subscribe((company) => {
|
||||
this.company = company;
|
||||
});
|
||||
}
|
||||
|
||||
get formControls() {
|
||||
return this.loginForm.controls;
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
ngOnInit(): void {
|
||||
this.loginForm.patchValue({
|
||||
companyEmail: this.company.email,
|
||||
password: this.company.password,
|
||||
});
|
||||
}
|
||||
|
||||
signin() {
|
||||
const email = this.loginForm.get('email')?.value;
|
||||
const password = this.loginForm.get('password')?.value;
|
||||
const email = this.company.email;
|
||||
const password = this.company.password;
|
||||
|
||||
if (this.loginForm.invalid) {
|
||||
console.log('Form error');
|
||||
console.log("Form error");
|
||||
return;
|
||||
}
|
||||
|
||||
this.loginForm.reset();
|
||||
// this.userService.signinUser(email, password);
|
||||
if (
|
||||
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) => {
|
||||
// console.log('message', msg);
|
||||
// this.signinMessage = msg;
|
||||
// setTimeout(() => {
|
||||
// this.signinMessage = msg;
|
||||
// }, 1000);
|
||||
// });
|
||||
this.loginSuccess = true;
|
||||
|
||||
localStorage.setItem("companyData", JSON.stringify(this.company));
|
||||
|
||||
this.companyLocalStorage = JSON.parse(
|
||||
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 {
|
||||
payments: PaymentModel[];
|
||||
options: any;
|
||||
companyLocalStorage: any;
|
||||
|
||||
constructor(private paymentService: PaymentService) {
|
||||
this.companyLocalStorage = JSON.parse(
|
||||
localStorage.getItem("companyData") || "{}"
|
||||
);
|
||||
|
||||
this.paymentService
|
||||
.getPaymentById(1)
|
||||
.getPaymentById(this.companyLocalStorage.id)
|
||||
.subscribe((payment: PaymentModel[]) => {
|
||||
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-print-styles: true !default;
|
||||
|
||||
|
||||
// Color system
|
||||
|
||||
$white: #ffffff !default;
|
||||
@@ -28,9 +27,9 @@ $transparent-bg: transparent !default;
|
||||
$light-bg: #f5f6fa !default;
|
||||
$dark-background: #555555 !default;
|
||||
|
||||
|
||||
$grays: () !default;
|
||||
$grays: map-merge((
|
||||
$grays: map-merge(
|
||||
(
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
@@ -39,8 +38,10 @@ $grays: map-merge((
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900
|
||||
), $grays);
|
||||
"900": $gray-900,
|
||||
),
|
||||
$grays
|
||||
);
|
||||
|
||||
$blue: #5e72e4 !default;
|
||||
$indigo: #5603ad !default;
|
||||
@@ -57,26 +58,22 @@ $line-height-lg: 1.625rem !default;
|
||||
$line-height-sm: 1.5 !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-gray-5: rgba(222,222,222, .5) !default;
|
||||
$opacity-gray-8: rgba(222,222,222, .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-5: rgba(255, 255, 255, 0.5) !default;
|
||||
$opacity-6: rgba(255, 255, 255, 0.6) !default;
|
||||
$opacity-8: rgba(255, 255, 255, 0.8) !default;
|
||||
|
||||
$opacity-1: rgba(255, 255, 255, 0.1) !default;
|
||||
$opacity-2: rgba(255, 255, 255, 0.2) !default;
|
||||
|
||||
// end beniamin
|
||||
|
||||
$colors: () !default;
|
||||
$colors: map-merge((
|
||||
$colors: map-merge(
|
||||
(
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
@@ -91,26 +88,27 @@ $colors: map-merge((
|
||||
"gray": $gray-600,
|
||||
"light": $gray-400,
|
||||
"lighter": $gray-200,
|
||||
"gray-dark": $gray-800
|
||||
), $colors);
|
||||
"gray-dark": $gray-800,
|
||||
),
|
||||
$colors
|
||||
);
|
||||
|
||||
$default-color-opacity: rgba(182, 182, 182, .6) !default;
|
||||
$default-color-opacity: rgba(182, 182, 182, 0.6) !default;
|
||||
$orange-color: #f96332 !default;
|
||||
|
||||
$default: #344675 !default;
|
||||
$default: #211069 !default;
|
||||
$primary: #211069 !default;
|
||||
$secondary: #ADD8E6 !default;
|
||||
$secondary: #add8e6 !default;
|
||||
$success: #00f2c3 !default;
|
||||
$info: #1d8cf8 !default;
|
||||
$warning: #F2C94C !default;
|
||||
$danger: #FF4E4E !default;
|
||||
$warning: #f2c94c !default;
|
||||
$danger: #ff4e4e !default;
|
||||
// $black: #222a42 !default;
|
||||
$black: #0c0c0e !default;
|
||||
$white: #fff !default;
|
||||
|
||||
|
||||
// gradient
|
||||
$default-states: #263148 !default;
|
||||
$default-states: #564794 !default;
|
||||
$primary-states: #ba54f5 !default;
|
||||
$success-states: #0098f0 !default;
|
||||
$info-states: #3358f4 !default;
|
||||
@@ -124,16 +122,16 @@ $background-black: #1e1e2f !default;
|
||||
$background-states-black: #1e1e24 !default;
|
||||
|
||||
// opacity
|
||||
$default-opacity: rgba(182, 182, 182, .6) !default;
|
||||
$primary-opacity: rgba(249, 99, 50, .3) !default;
|
||||
$success-opacity: rgba(24, 206, 15, .3) !default;
|
||||
$info-opacity: rgba(44, 168, 255, .3) !default;
|
||||
$warning-opacity: rgba(255, 178, 54, .3) !default;
|
||||
$danger-opacity: rgba(255, 54, 54, .3) !default;
|
||||
$default-opacity: rgba(182, 182, 182, 0.6) !default;
|
||||
$primary-opacity: rgba(249, 99, 50, 0.3) !default;
|
||||
$success-opacity: rgba(24, 206, 15, 0.3) !default;
|
||||
$info-opacity: rgba(44, 168, 255, 0.3) !default;
|
||||
$warning-opacity: rgba(255, 178, 54, 0.3) !default;
|
||||
$danger-opacity: rgba(255, 54, 54, 0.3) !default;
|
||||
|
||||
$light-gray: #E3E3E3 !default;
|
||||
$medium-gray: #DDDDDD !default;
|
||||
$dark-gray: #9A9A9A !default;
|
||||
$light-gray: #e3e3e3 !default;
|
||||
$medium-gray: #dddddd !default;
|
||||
$dark-gray: #9a9a9a !default;
|
||||
$card-stats-gray: #808080 !default;
|
||||
$active-gray: #777777 !default;
|
||||
$nav-gray: #444444 !default;
|
||||
@@ -141,8 +139,6 @@ $search-gray: #b7b7b7 !default;
|
||||
$calendar-gray: #9499a7 !default;
|
||||
$active-blue: #00bbff !default;
|
||||
|
||||
|
||||
|
||||
$light: $gray-500 !default;
|
||||
$dark: $gray-900 !default;
|
||||
$darker: darken($gray-900, 15%) !default;
|
||||
@@ -155,7 +151,7 @@ $google-plus: #dd4b39 !default;
|
||||
$google-plus-states: darken($google-plus, 5%) !default;
|
||||
$instagram: #125688 !default;
|
||||
$instagram-states: lighten($instagram, 6%) !default;
|
||||
$linkedin: #0077B5 !default;
|
||||
$linkedin: #0077b5 !default;
|
||||
$linkedin-states: darken($linkedin, 5%) !default;
|
||||
$pinterest: #cc2127 !default;
|
||||
$pinterest-states: lighten($pinterest, 6%) !default;
|
||||
@@ -173,7 +169,8 @@ $behance: #1769ff !default;
|
||||
$behance-states: lighten($behance, 6%) !default;
|
||||
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge((
|
||||
$theme-colors: map-merge(
|
||||
(
|
||||
"default": $default,
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
@@ -184,11 +181,14 @@ $theme-colors: map-merge((
|
||||
"white": $white,
|
||||
"neutral": $white,
|
||||
"dark": $dark,
|
||||
"darker": $darker
|
||||
), $theme-colors);
|
||||
"darker": $darker,
|
||||
),
|
||||
$theme-colors
|
||||
);
|
||||
|
||||
$brand-colors: () !default;
|
||||
$brand-colors: map-merge((
|
||||
$brand-colors: map-merge(
|
||||
(
|
||||
"facebook": $facebook,
|
||||
"twitter": $twitter,
|
||||
"google-plus": $google-plus,
|
||||
@@ -201,8 +201,9 @@ $brand-colors: map-merge((
|
||||
"behance": $behance,
|
||||
"tumblr": $tumblr,
|
||||
"linkedin": $linkedin,
|
||||
), $brand-colors);
|
||||
|
||||
),
|
||||
$brand-colors
|
||||
);
|
||||
|
||||
/* brand Colors */
|
||||
$brand-primary: $primary !default;
|
||||
@@ -236,23 +237,24 @@ $favorite-color: $yellow !default;
|
||||
$like-color: $blue !default;
|
||||
$love-color: $red !default;
|
||||
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $background-black !default;
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
|
||||
// Sections
|
||||
|
||||
$section-colors: () !default;
|
||||
$section-colors: map-merge((
|
||||
$section-colors: map-merge(
|
||||
(
|
||||
"primary": $body-bg,
|
||||
"secondary": $secondary,
|
||||
"light": $gray-400,
|
||||
"dark": $dark,
|
||||
"darker": $darker
|
||||
), $section-colors);
|
||||
"darker": $darker,
|
||||
),
|
||||
$section-colors
|
||||
);
|
||||
|
||||
// Links
|
||||
|
||||
@@ -268,37 +270,54 @@ $grid-breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xl: 1200px,
|
||||
);
|
||||
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints);
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacers: () !default;
|
||||
$spacers: map-merge((
|
||||
$spacers: map-merge(
|
||||
(
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
1: (
|
||||
$spacer * 0.25,
|
||||
),
|
||||
2: (
|
||||
$spacer * 0.5,
|
||||
),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
5: ($spacer * 3),
|
||||
'sm': ($spacer * 2),
|
||||
'md': ($spacer * 4),
|
||||
'lg': ($spacer * 6),
|
||||
'xl': ($spacer * 8)
|
||||
), $spacers);
|
||||
4: (
|
||||
$spacer * 1.5,
|
||||
),
|
||||
5: (
|
||||
$spacer * 3,
|
||||
),
|
||||
"sm": (
|
||||
$spacer * 2,
|
||||
),
|
||||
"md": (
|
||||
$spacer * 4,
|
||||
),
|
||||
"lg": (
|
||||
$spacer * 6,
|
||||
),
|
||||
"xl": (
|
||||
$spacer * 8,
|
||||
),
|
||||
),
|
||||
$spacers
|
||||
);
|
||||
|
||||
$padding-base-vertical: .5rem !default;
|
||||
$padding-base-horizontal: .7rem !default;
|
||||
$padding-base-vertical: 0.5rem !default;
|
||||
$padding-base-horizontal: 0.7rem !default;
|
||||
|
||||
$padding-btn-vertical: 11px !default;
|
||||
$padding-btn-horizontal: 40px !default;
|
||||
@@ -310,19 +329,21 @@ $padding-lg-vertical: 15px !default;
|
||||
$padding-input-vertical: 11px !default;
|
||||
$padding-input-horizontal: 19px !default;
|
||||
|
||||
|
||||
$margin-lg-vertical: 30px !default;
|
||||
$margin-base-vertical: 15px !default;
|
||||
|
||||
// This variable affects the `.h-*` and `.w-*` classes.
|
||||
|
||||
$sizes: () !default;
|
||||
$sizes: map-merge((
|
||||
$sizes: map-merge(
|
||||
(
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
), $sizes);
|
||||
100: 100%,
|
||||
),
|
||||
$sizes
|
||||
);
|
||||
|
||||
// Components
|
||||
|
||||
@@ -334,10 +355,10 @@ $shape-height-sm: 1.5 !default;
|
||||
$none: 0 !default;
|
||||
$border-thin: 1px !default;
|
||||
$border-thick: 2px !default;
|
||||
$border-width: .0625rem !default;
|
||||
$border-width: 0.0625rem !default;
|
||||
$border-color: $gray-200 !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius: 0.25rem !default;
|
||||
$border-radius-xl: 0.875rem !default;
|
||||
$border-radius-lg: 0.4285rem !default;
|
||||
$border-radius-sm: 0.2857rem !default;
|
||||
@@ -346,14 +367,15 @@ $border-radius-xs: 0.1428rem !default;
|
||||
$margin-bottom: 10px !default;
|
||||
$border: 1px solid !default;
|
||||
|
||||
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
|
||||
$box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
|
||||
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
|
||||
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
|
||||
$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, 0.175);
|
||||
|
||||
$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: 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-bg: theme-color("primary") !default;
|
||||
@@ -363,11 +385,11 @@ $component-hover-color: $gray-300 !default;
|
||||
$component-hover-bg: $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-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
$transition-base: all 0.15s ease !default;
|
||||
$transition-fade: opacity 0.15s linear !default;
|
||||
$transition-collapse: height 0.35s ease !default;
|
||||
|
||||
$fast-transition-time: 150ms !default;
|
||||
|
||||
@@ -378,19 +400,18 @@ $transition-ease: ease 0s;
|
||||
$select-coordinates: 50% -40px !default;
|
||||
$general-transition-time: 300ms !default;
|
||||
|
||||
|
||||
// Fonts
|
||||
|
||||
$font-family-base: 'Poppins', sans-serif !default;
|
||||
$font-family-alt: 'Poppins', sans-serif !default;
|
||||
$font-family-base: "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-xl: ($font-size-base * 1.428);
|
||||
$font-size-lg: ($font-size-base * 1.142);
|
||||
$font-size-sm: ($font-size-base * .85714286);
|
||||
$font-size-xs: ($font-size-base * .714);
|
||||
$font-size-sm: ($font-size-base * 0.85714286);
|
||||
$font-size-xs: ($font-size-base * 0.714);
|
||||
|
||||
$h1-font-size: $font-size-base * 2.35714285 !default; //2.1875rem
|
||||
$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-color: $gray-800 !default;
|
||||
|
||||
$heading-letter-spacing: .025em !default;
|
||||
$heading-font-size: .95rem !default;
|
||||
$heading-letter-spacing: 0.025em !default;
|
||||
$heading-font-size: 0.95rem !default;
|
||||
$heading-text-transform: uppercase !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-weight: $font-weight-bold !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-weight: $font-weight-bold !default;
|
||||
$heading-section-text-transform: uppercase !default;
|
||||
@@ -455,20 +476,19 @@ $text-muted: $gray-600 !default;
|
||||
$blockquote-small-color: $gray-600 !default;
|
||||
$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;
|
||||
|
||||
$mark-padding: .2em !default;
|
||||
$mark-padding: 0.2em !default;
|
||||
|
||||
$dt-font-weight: $font-weight-bold !default;
|
||||
|
||||
$list-inline-padding: .5rem !default;
|
||||
$list-inline-padding: 0.5rem !default;
|
||||
|
||||
$mark-bg: #fcf8e3 !default;
|
||||
|
||||
$hr-margin-y: $spacer * 2 !default;
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
$icon-size: auto !default;
|
||||
@@ -480,15 +500,14 @@ $icon-font-size-lg: 1.325rem !default;
|
||||
$icon-size-lg: 3.6rem !default;
|
||||
$icon-size-xl: 5rem !default;
|
||||
|
||||
|
||||
// Tables
|
||||
|
||||
$table-cell-padding: 1rem !default;
|
||||
$table-cell-padding-sm: .3rem !default;
|
||||
$table-cell-padding-sm: 0.3rem !default;
|
||||
|
||||
$table-bg: transparent !default;
|
||||
$table-accent-bg: rgba($black, .05);
|
||||
$table-hover-bg: rgba($black, .075);
|
||||
$table-accent-bg: rgba($black, 0.05);
|
||||
$table-hover-bg: rgba($black, 0.075);
|
||||
$table-active-bg: $table-hover-bg !default;
|
||||
|
||||
$table-border-width: $border-width !default;
|
||||
@@ -498,16 +517,15 @@ $table-head-bg: $gray-200 !default;
|
||||
$table-head-color: $gray-700 !default;
|
||||
|
||||
$table-dark-bg: $gray-900 !default;
|
||||
$table-dark-accent-bg: rgba($white, .05);
|
||||
$table-dark-hover-bg: rgba($white, .075);
|
||||
$table-dark-accent-bg: rgba($white, 0.05);
|
||||
$table-dark-hover-bg: rgba($white, 0.075);
|
||||
$table-dark-border-color: lighten($gray-900, 7.5%);
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-padding-y: .5rem !default;
|
||||
$input-btn-padding-x: .7rem !default;
|
||||
$input-btn-padding-y: 0.5rem !default;
|
||||
$input-btn-padding-x: 0.7rem !default;
|
||||
$input-btn-line-height: $shape-height-base !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: none !default;
|
||||
|
||||
$input-btn-padding-y-sm: .25rem !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
$input-btn-padding-y-sm: 0.25rem !default;
|
||||
$input-btn-padding-x-sm: 0.5rem !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-line-height-lg: 1.35 !default;
|
||||
|
||||
$input-btn-border-width: 1px !default;
|
||||
|
||||
$input-btn-font-size-sm: .75rem !default;
|
||||
$input-btn-font-size: .875rem !default;
|
||||
$input-btn-font-size-lg: .875rem !default;
|
||||
$input-btn-font-size-sm: 0.75rem !default;
|
||||
$input-btn-font-size: 0.875rem !default;
|
||||
$input-btn-font-size-lg: 0.875rem !default;
|
||||
|
||||
$input-padding-vertical: 11px !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-weight: 600 !default;
|
||||
$btn-text-transform: uppercase !default;
|
||||
$btn-letter-spacing: .025em !default;
|
||||
$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(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-letter-spacing: 0.025em !default;
|
||||
$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, 0.1),
|
||||
0 3px 6px rgba(0, 0, 0, 0.08);
|
||||
$btn-focus-box-shadow: $btn-hover-box-shadow !default;
|
||||
$btn-focus-width: $input-btn-focus-width !default;
|
||||
|
||||
|
||||
$btn-active-box-shadow: none !default;
|
||||
$btn-round-radius: 30px !default;
|
||||
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$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-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-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
|
||||
$input-alternative-box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15),
|
||||
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-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-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-width: 0 !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-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-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
|
||||
|
||||
@@ -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-border-color: $input-focus-border-color !default;
|
||||
|
||||
|
||||
// Custom forms
|
||||
|
||||
$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-border-color: $component-active-border-color !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-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-color: theme-color("warning") !default;
|
||||
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
|
||||
$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-sm: $input-border-radius !default;
|
||||
|
||||
|
||||
// No UI Slider
|
||||
|
||||
$noui-target-bg: #eceeef !default;
|
||||
$noui-target-thickness: 5px !default;
|
||||
$noui-target-border-radius: 5px !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-disabled-bg: #b2b2b2 !default;
|
||||
@@ -693,26 +711,26 @@ $noui-handle-border-radius: 100% !default;
|
||||
|
||||
$noui-origin-border-radius: 2px !default;
|
||||
|
||||
|
||||
// Dropdown
|
||||
|
||||
$dropdown-bg: $white !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-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-bg: $component-active-bg !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .5rem !default;
|
||||
$nav-link-padding-y: 0.5rem !default;
|
||||
$nav-link-padding-x: 1rem !default;
|
||||
$nav-link-color: $gray-700 !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-space-x: 1rem !default;
|
||||
@@ -730,15 +748,15 @@ $nav-pills-box-shadow: $btn-box-shadow !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-transition: all .15s linear !default;
|
||||
$navbar-padding-y: .625rem !default;
|
||||
$navbar-padding-x: .9375rem !default;
|
||||
$navbar-transition: all 0.15s linear !default;
|
||||
$navbar-padding-y: 0.625rem !default;
|
||||
$navbar-padding-x: 0.9375rem !default;
|
||||
|
||||
$navbar-nav-link-padding-x: 1rem !default;
|
||||
$navbar-nav-link-padding-y: 1rem !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-text-transform: normal !default;
|
||||
$navbar-nav-link-letter-spacing: 0 !default;
|
||||
@@ -747,30 +765,29 @@ $navbar-nav-link-border-radius: $border-radius !default;
|
||||
/* navbar color */
|
||||
$navbar-color: #1a1e34 !default;
|
||||
$navbar-dark-bg: transparent !default;
|
||||
$navbar-dark-hover-bg: rgba(255, 255, 255, .1);
|
||||
$navbar-dark-active-bg: rgba(255, 255, 255, .1);
|
||||
$navbar-dark-color: rgba($white, .95);
|
||||
$navbar-dark-hover-color: rgba($white, .65);
|
||||
$navbar-dark-active-color: rgba($white, .65);
|
||||
$navbar-dark-disabled-color: rgba($white, .25);
|
||||
$navbar-dark-hover-bg: rgba(255, 255, 255, 0.1);
|
||||
$navbar-dark-active-bg: rgba(255, 255, 255, 0.1);
|
||||
$navbar-dark-color: rgba($white, 0.95);
|
||||
$navbar-dark-hover-color: rgba($white, 0.65);
|
||||
$navbar-dark-active-color: rgba($white, 0.65);
|
||||
$navbar-dark-disabled-color: rgba($white, 0.25);
|
||||
$navbar-dark-toggler-border-color: transparent !default;
|
||||
|
||||
$navbar-light-bg: transparent !default;
|
||||
$navbar-light-hover-bg: rgba(0, 0, 0, .1);
|
||||
$navbar-light-active-bg: rgba(0, 0, 0, .1);
|
||||
$navbar-light-color: rgba($black, .5);
|
||||
$navbar-light-hover-color: rgba($black, .7);
|
||||
$navbar-light-active-color: rgba($black, .9);
|
||||
$navbar-light-disabled-color: rgba($black, .3);
|
||||
$navbar-light-hover-bg: rgba(0, 0, 0, 0.1);
|
||||
$navbar-light-active-bg: rgba(0, 0, 0, 0.1);
|
||||
$navbar-light-color: rgba($black, 0.5);
|
||||
$navbar-light-hover-color: rgba($black, 0.7);
|
||||
$navbar-light-active-color: rgba($black, 0.9);
|
||||
$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-border-color: transparent !default;
|
||||
$full-width: 100% !default;
|
||||
$navbar-padding: 10px 15px !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-padding-y: .9rem !default;
|
||||
$alert-padding-y: 0.9rem !default;
|
||||
$alert-padding-x: 1.25rem !default;
|
||||
$alert-border-radius: $border-radius-sm !default;
|
||||
|
||||
@@ -778,7 +795,6 @@ $alert-bg-level: -2 !default;
|
||||
$alert-border-level: -2 !default;
|
||||
$alert-color-level: 0 !default;
|
||||
|
||||
|
||||
// List group
|
||||
|
||||
$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-bg: $gray-200 !default;
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
$close-font-size: $font-size-base * 1.5 !default;
|
||||
$close-font-weight: $font-weight-bold !default;
|
||||
$close-bg: transparent !default;
|
||||
$close-hover-bg: transparent !default;
|
||||
$close-color: rgba(0, 0, 0, .6);
|
||||
$close-hover-color: rgba(0, 0, 0, .9);
|
||||
$close-color: rgba(0, 0, 0, 0.6);
|
||||
$close-hover-color: rgba(0, 0, 0, 0.9);
|
||||
$close-text-shadow: none !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-font-size: $font-size-sm !default;
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !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-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-color: $headings-color !default;
|
||||
$popover-header-padding-y: .75rem !default;
|
||||
$popover-header-padding-x: .75rem !default;
|
||||
$popover-header-padding-y: 0.75rem !default;
|
||||
$popover-header-padding-x: 0.75rem !default;
|
||||
|
||||
$popover-body-color: $body-color !default;
|
||||
$popover-body-padding-y: $popover-header-padding-y !default;
|
||||
$popover-body-padding-x: $popover-header-padding-x !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-outer-color: transparent !default;
|
||||
@@ -846,19 +860,16 @@ $breadcrumb-bg: $black-states !default;
|
||||
$breadcrumb-divider-color: $white !default;
|
||||
$breadcrumb-active-color: $white !default;
|
||||
|
||||
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-size: $font-size-xs !default;
|
||||
$badge-font-weight: $font-weight-extra-bold !default;
|
||||
$badge-padding-y: .25rem !default;
|
||||
$badge-padding-x: .5rem !default;
|
||||
$badge-padding-y: 0.25rem !default;
|
||||
$badge-padding-x: 0.5rem !default;
|
||||
$badge-border-radius: $border-radius !default;
|
||||
$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-circle-size: 2rem;
|
||||
@@ -866,8 +877,7 @@ $badge-circle-size: 2rem;
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-y: 0 !default;
|
||||
$pagination-padding-x: .6875rem !default;
|
||||
|
||||
$pagination-padding-x: 0.6875rem !default;
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: transparent !default;
|
||||
@@ -889,14 +899,13 @@ $pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-border-color: $gray-300 !default;
|
||||
|
||||
|
||||
// Cards
|
||||
|
||||
$card-spacer-y: 1.25rem !default;
|
||||
$card-spacer-x: 1.5rem !default;
|
||||
$card-border-width: $border-width !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-cap-bg: $gray-100 !default;
|
||||
$card-bg: $white !default;
|
||||
@@ -917,13 +926,13 @@ $tooltip-max-width: 200px !default;
|
||||
$tooltip-color: $black !default;
|
||||
$tooltip-bg: $white !default;
|
||||
$tooltip-border-radius: $border-radius !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: .25rem !default;
|
||||
$tooltip-padding-x: .5rem !default;
|
||||
$tooltip-opacity: 0.9 !default;
|
||||
$tooltip-padding-y: 0.25rem !default;
|
||||
$tooltip-padding-x: 0.5rem !default;
|
||||
$tooltip-margin: 0 !default;
|
||||
|
||||
$tooltip-arrow-width: .8rem !default;
|
||||
$tooltip-arrow-height: .4rem !default;
|
||||
$tooltip-arrow-width: 0.8rem !default;
|
||||
$tooltip-arrow-height: 0.4rem !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
// Modals
|
||||
@@ -935,14 +944,15 @@ $modal-md: 500px !default;
|
||||
$modal-sm: 380px !default;
|
||||
$modal-title-line-height: 1.1;
|
||||
$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-radius: $border-radius-sm !default;
|
||||
$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-opacity: .16 !default;
|
||||
$modal-backdrop-opacity: 0.16 !default;
|
||||
$modal-header-border-color: $gray-200 !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !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-height: .5rem !default;
|
||||
$progress-height: 0.5rem !default;
|
||||
$progress-bg: rgba(0, 0, 0, 0.3) !default;
|
||||
$progress-border-radius: $border-radius-xl !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-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-highlighted-bg: $gray-200 !default;
|
||||
|
||||
@@ -986,10 +999,9 @@ $datepicker-dropdown-border: lighten($gray-400, 40%);
|
||||
$datepicker-dropdown-bg: $white !default;
|
||||
$datepicker-highlighted-bg: $datepicker-active-background !default;
|
||||
|
||||
|
||||
// Footer
|
||||
|
||||
$footer-link-font-size: .85rem !default;
|
||||
$footer-link-font-size: 0.85rem !default;
|
||||
$footer-bg: theme-color("secondary") !default;
|
||||
$footer-color: $gray-600 !default;
|
||||
$footer-link-color: $gray-600 !default;
|
||||
|
||||
Reference in New Issue
Block a user