init
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
@import "./variable";
|
||||
@import "./mixins";
|
||||
@import "./maps";
|
||||
@@ -0,0 +1,15 @@
|
||||
// $theme_backgrounds: (
|
||||
// "color_1": $color_background_1,
|
||||
// "color_2": $color_background_2,
|
||||
// "color_3": $color_background_3,
|
||||
// "color_4": $color_background_4,
|
||||
// "color_5": $color_background_5
|
||||
// );
|
||||
|
||||
// $theme_primary_color: (
|
||||
// "color_1": $color_primary_1,
|
||||
// "color_2": $color_primary_2,
|
||||
// "color_3": $color_primary_3,
|
||||
// "color_4": $color_primary_4,
|
||||
// "color_5": $color_primary_5
|
||||
// );
|
||||
@@ -0,0 +1,60 @@
|
||||
//MEDIA QUERY MANAGER
|
||||
// 0 - 600: Phone
|
||||
// 600 - 900: Tablet portrait
|
||||
// 900 - 1200: Tablet landscape
|
||||
// 1200 - 1800: Normal styles
|
||||
// 1800+ : Big Desktop
|
||||
// 1em = 16px
|
||||
// The smaller device rules always should write below the bigger device rules
|
||||
// Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
|
||||
@mixin respond($breakpoint) {
|
||||
@if($breakpoint=="phone") {
|
||||
@media only screen and (max-width: 575px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="phone-land") {
|
||||
@media only screen and (max-width: 767px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="tab-port") {
|
||||
@media only screen and (max-width: 991px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="tab-land") {
|
||||
@media only screen and (max-width: 1199px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if ($breakpoint=="desktop") {
|
||||
@media only screen and (min-width: 1200px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="big-desktop") {
|
||||
@media only screen and (min-width: 1800px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//don't use it untill you need this too much
|
||||
@mixin custommq($min: null, $max: null) {
|
||||
@if ($min !=null and $max !=null) {
|
||||
@media only screen and (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if ($min==null and $max !=null) {
|
||||
@media only screen and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if ($min !=null and $max==null) {
|
||||
@media only screen and (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$primary : #1652F0;
|
||||
$secondary: #f73164 !default;
|
||||
$success : #51BB25 !default;
|
||||
$info : #A927F9 !default;
|
||||
$warning : #F8D62B !default;
|
||||
$danger : #DC3545 !default;
|
||||
$light : #F7F6FF !default;
|
||||
$dark : #070707;
|
||||
$purple : #5848BB;
|
||||
|
||||
// Body
|
||||
$body-bg : #f0f0f0;
|
||||
$body-color: #a2a5b9;
|
||||
|
||||
// Typography
|
||||
$font-family-base: "Roboto",
|
||||
sans-serif;
|
||||
$headings-font-weight : 600;
|
||||
$font-size-base : 0.875rem !default;
|
||||
$font-weight-base : 400 !default;
|
||||
// $line-height-base : 1.6;
|
||||
$headings-line-height : 1.6;
|
||||
$h1-font-size : 2.25rem;
|
||||
$h2-font-size : 1.875rem;
|
||||
$h3-font-size : 1.5rem;
|
||||
$h4-font-size : 1.125rem;
|
||||
$h5-font-size : 1rem;
|
||||
$h6-font-size : 1rem;
|
||||
|
||||
$text-muted: #7184ad;
|
||||
|
||||
$heading-primary-size : 1.8rem;
|
||||
$sub-heading-size : 1.6rem !default;
|
||||
$grid-gutter-width : 30px;
|
||||
$dropdown-lik-color : $body-color;
|
||||
$border-color : #e5e5e5;
|
||||
$headings-color : #212529 !default;
|
||||
$table-striped-bg : $body-bg;
|
||||
$border-radius : 6px !default;
|
||||
$input-btn-focus-width: 0rem !default;
|
||||
|
||||
// custom
|
||||
$radius : $border-radius;
|
||||
$shadow : 0 0 20px rgba(89, 102, 122, 0.05);
|
||||
$shadow-sm : 0 0.125rem 0.25rem rgba(227, 230, 236, 0.9);
|
||||
$shadow-lg : 0 1rem 3rem rgba(35, 38, 45, 0.275);
|
||||
$sidebar-width : 80px;
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "./reset";
|
||||
@import "./fonts";
|
||||
@import "./color";
|
||||
@import "./preloader";
|
||||
@import "./shortcode";
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
// .bg-gradient-primary {
|
||||
// background: linear-gradient(50deg, #6e00ff 0, #bb00ff 100%) !important;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
.bg-purple {
|
||||
background-color: $purple !important
|
||||
}
|
||||
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent !important
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// Google Font
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||
// // Line Awesome
|
||||
|
||||
|
||||
@import url('../icons/bootstrap-icons/bootstrap-icons.css');
|
||||
@import url('../icons/remix-icon/remixicon.css');
|
||||
@@ -0,0 +1,123 @@
|
||||
#preloader {
|
||||
position : fixed;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
left : 0;
|
||||
top : 0;
|
||||
background-color: $white;
|
||||
z-index : 999999999;
|
||||
|
||||
|
||||
i {
|
||||
display : block;
|
||||
width : 16px;
|
||||
height : 16px;
|
||||
background : black;
|
||||
border-radius : 16px;
|
||||
position : absolute;
|
||||
top : 50%;
|
||||
left : 50%;
|
||||
margin : -8px 0 0 -8px;
|
||||
opacity : 1;
|
||||
-webkit-transform: translate3d(60px, 0, 0);
|
||||
overflow : hidden;
|
||||
text-indent : -9999px;
|
||||
border : 1px solid white;
|
||||
|
||||
&:nth-child(1) {
|
||||
background : $primary; // Red
|
||||
-webkit-animation: googleDotA 1.75s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background : $success; // Yellow
|
||||
-webkit-animation: googleDotB 1.75s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
background : $warning; // Blue
|
||||
-webkit-animation: googleDotC 1.75s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes googleDotA {
|
||||
0% {
|
||||
opacity : 0;
|
||||
transform : translate3d(60px, 0, 0);
|
||||
-webkit-transform: translate3d(60px, 0, 0);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity : 1;
|
||||
transform : translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity : 1;
|
||||
transform : translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity : 0;
|
||||
transform : translate3d(-300px, 0, 0);
|
||||
-webkit-transform: translate3d(-300px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes googleDotB {
|
||||
0% {
|
||||
opacity : 0;
|
||||
transform : translate3d(180px, 0, 0);
|
||||
-webkit-transform: translate3d(180px, 0, 0);
|
||||
}
|
||||
|
||||
35% {
|
||||
opacity : 1;
|
||||
transform : translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
77% {
|
||||
opacity : 1;
|
||||
transform : translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity : 0;
|
||||
transform : translate3d(-180px, 0, 0);
|
||||
-webkit-transform: translate3d(-180px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes googleDotC {
|
||||
0% {
|
||||
opacity : 0;
|
||||
transform : translate3d(300px, 0, 0);
|
||||
-webkit-transform: translate3d(300px, 0, 0);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity : 1;
|
||||
transform : translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity : 1;
|
||||
transform : translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity : 0;
|
||||
transform : translate3d(-60px, 0, 0);
|
||||
-webkit-transform: translate3d(-60px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
// @import "../vendor/animate/animate.min.css";
|
||||
// @import "../vendor/waves/waves.min.css";
|
||||
// @import "../vendor/perfect-scrollbar/perfect-scrollbar.css";
|
||||
// @import "../vendor/basic-table/basictable.css";
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
// &.dashboard {
|
||||
// background: $light;
|
||||
// font-size : 14px;
|
||||
// }
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
// opacity : 0;
|
||||
transition : all 0.25s ease-in;
|
||||
// overflow : hidden;
|
||||
position : relative;
|
||||
z-index : 1;
|
||||
// height: 100vh;
|
||||
margin-top : 110px;
|
||||
|
||||
// &::before {
|
||||
// content : "";
|
||||
// height : 300px;
|
||||
// top : 0;
|
||||
// left : 0;
|
||||
// width : 100%;
|
||||
// position : absolute;
|
||||
// z-index : -9;
|
||||
// background: $primary;
|
||||
// }
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left : $sidebar-width;
|
||||
// margin-right : $map-width +30px;
|
||||
// padding-top : 100px;
|
||||
margin-top : 30px;
|
||||
margin-bottom : 50px;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left : 0px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.content-body {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
.content-body {
|
||||
margin-left : $sidebar-width;
|
||||
margin-right: 0px;
|
||||
margin-top : 0px;
|
||||
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// margin-left : 0px;
|
||||
// margin-bottom: 50px;
|
||||
// }
|
||||
|
||||
// @include respond("tab-port") {
|
||||
// margin-left: 100px;
|
||||
// }
|
||||
|
||||
@include respond("phone-land") {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color : $primary;
|
||||
text-decoration: none;
|
||||
outline : none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
text-decoration: none;
|
||||
outline : none;
|
||||
color : $primary;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// h4,
|
||||
// .h4,
|
||||
// h5,
|
||||
// .h5,
|
||||
// h6,
|
||||
// .h6 {
|
||||
// font-family: 'Montserrat', sans-serif;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
|
||||
/* Editable */
|
||||
|
||||
// @include media-breakpoint-up(xxl) {
|
||||
// .container-fluid {
|
||||
// max-width: 80%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// #map {
|
||||
// height : 100%;
|
||||
// width : 100%;
|
||||
// margin : 0;
|
||||
// z-index: 990;
|
||||
// }
|
||||
@@ -0,0 +1,173 @@
|
||||
.section-padding {
|
||||
padding: 100px 0;
|
||||
|
||||
@include respond('tab-land') {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
@include respond('tab-port') {
|
||||
padding: 75px 0;
|
||||
}
|
||||
|
||||
@include respond('phone-land') {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
@include respond('phone') {
|
||||
padding: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mt-80 {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.mb-80 {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
// .vertical-line {
|
||||
// position : relative;
|
||||
// min-height : 1000px;
|
||||
// border-left: 1px solid $border-color;
|
||||
// z-index : 03;
|
||||
|
||||
// &::before {
|
||||
// content : "";
|
||||
// position : absolute;
|
||||
// top : -84px;
|
||||
// background : $border-color;
|
||||
// width : 1px;
|
||||
// height : 100px;
|
||||
// left : -1px;
|
||||
// // border-left : 1px solid #f00;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// content : "";
|
||||
// position : absolute;
|
||||
// bottom : -84px;
|
||||
// background: $border-color;
|
||||
// width : 1px;
|
||||
// height : 100px;
|
||||
// left : -1px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.page-title {
|
||||
margin-bottom : 30px;
|
||||
background : transparent;
|
||||
border-radius : $radius;
|
||||
// padding : 10px;
|
||||
|
||||
.page-title-content {
|
||||
// margin-top: 15px;
|
||||
|
||||
|
||||
h3 {
|
||||
font-size : 24px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.breadcrumbs {
|
||||
a {
|
||||
color : $text-muted;
|
||||
display : inline-block;
|
||||
// margin-left: 15px;
|
||||
font-size : 14px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin : 0px 10px;
|
||||
font-size : 20px;
|
||||
line-height: 0;
|
||||
position : relative;
|
||||
top : 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-grow-2 {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
|
||||
// Scrollbar
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Track */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow : inset 0 0 5px grey;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Handle */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background : #999;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Handle on hover */
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
|
||||
.c-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trade-balance {
|
||||
position: relative;
|
||||
height : 380px;
|
||||
}
|
||||
|
||||
.position-value {
|
||||
position: relative;
|
||||
height : 320px;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 75px;
|
||||
|
||||
h2 {
|
||||
text-align : center;
|
||||
font-weight: 600
|
||||
}
|
||||
}
|
||||
|
||||
.auth-bg{
|
||||
font-size: 100px;
|
||||
background: url("./../../images/login/auth.jpg");
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
button,
|
||||
.btn {
|
||||
color : #fff;
|
||||
padding : 8px 30px;
|
||||
// line-height: 0px;
|
||||
font-weight : 700;
|
||||
// display : inline-block;
|
||||
border-radius : 12px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
// background: $white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-outline-primary,
|
||||
.btn-outline-secondary,
|
||||
.btn-outline-success,
|
||||
.btn-outline-info,
|
||||
.btn-outline-warning,
|
||||
.btn-outline-danger,
|
||||
.btn-outline-light {
|
||||
color: $dark;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
color: $dark;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.card {
|
||||
border : 1px solid $border-color;
|
||||
margin-bottom: 30px;
|
||||
border-radius: $radius;
|
||||
// box-shadow : $shadow;
|
||||
background : $white;
|
||||
|
||||
// &::before {
|
||||
// content : "";
|
||||
// position : absolute;
|
||||
// top : 22px;
|
||||
// left : 18px;
|
||||
// right : 18px;
|
||||
// bottom : -40px;
|
||||
// z-index : -2;
|
||||
// background : #E3E6EC;
|
||||
// opacity : 0.91;
|
||||
// -webkit-filter: blur(86.985px);
|
||||
// filter : blur(86.985px);
|
||||
// border-radius : 24px;
|
||||
// }
|
||||
|
||||
&-header {
|
||||
display : flex;
|
||||
justify-content: space-between;
|
||||
align-items : center;
|
||||
border-bottom : 0px solid $border-color;
|
||||
background : transparent;
|
||||
padding : 20px 20px 0px;
|
||||
|
||||
// margin : 0px 35px;
|
||||
@include respond("phone-land") {
|
||||
flex-direction: column;
|
||||
align-items : start;
|
||||
}
|
||||
|
||||
// @include custommq($min: 1200px, $max: 1350px) {
|
||||
// padding: 30px 0px;
|
||||
// }
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size : 16px;
|
||||
margin-bottom: 0px;
|
||||
color : $headings-color;
|
||||
}
|
||||
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border : 0px;
|
||||
|
||||
.card-header {
|
||||
border : 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding : 20px;
|
||||
background : transparent;
|
||||
// border-radius: 15px;
|
||||
|
||||
// @include respond("desktop") {
|
||||
// padding: 30px;
|
||||
// }
|
||||
|
||||
// @include custommq($min: 1200px, $max: 1350px) {
|
||||
// padding: 30px 0px !important;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-footer {
|
||||
padding : 20px;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "./card";
|
||||
@import "./form";
|
||||
@import "./button";
|
||||
@import "./table";
|
||||
@@ -0,0 +1,126 @@
|
||||
.form-label {
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius : 5px;
|
||||
height : 45px;
|
||||
border : 1px solid $border-color;
|
||||
padding : 0px 22px;
|
||||
font-size : 14px;
|
||||
// font-weight : 500;
|
||||
color : $dark;
|
||||
// transition : all 0.3s ease-in-out;
|
||||
background : $white;
|
||||
|
||||
|
||||
|
||||
span {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow : none !important;
|
||||
outline : none;
|
||||
border-color: $border-color;
|
||||
color : $dark;
|
||||
background : $white;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
box-shadow : none !important;
|
||||
outline : none;
|
||||
border-color: $primary;
|
||||
color : $dark;
|
||||
background : $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-select {
|
||||
border-radius : 5px;
|
||||
height : 45px;
|
||||
border : 1px solid $border-color;
|
||||
padding : 0px 22px;
|
||||
font-size : 14px;
|
||||
// font-weight : 500;
|
||||
color : $dark;
|
||||
// transition : all 0.3s ease-in-out;
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow : none !important;
|
||||
outline : none;
|
||||
border-color: $border-color;
|
||||
color : $dark;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
box-shadow : none !important;
|
||||
outline : none;
|
||||
border-color: $primary;
|
||||
color : $dark;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
input:-internal-autofill-selected {
|
||||
background : lighten($body-bg, 2%) !important;
|
||||
background-image: none !important;
|
||||
color : -internal-light-dark-color(black, white) !important;
|
||||
}
|
||||
|
||||
|
||||
.input-group-text {
|
||||
padding : 11px 15px;
|
||||
background : $white;
|
||||
margin-bottom: 0px !important;
|
||||
color : $dark;
|
||||
border-color : $border-color;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
.input-group-text {
|
||||
border-top-right-radius : 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
border-top-left-radius : 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Validation Error
|
||||
label.error {
|
||||
color : $danger;
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
margin-bottom: -22px;
|
||||
font-size : 12px;
|
||||
font-weight : 400;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
.table {
|
||||
|
||||
th {
|
||||
color : $headings-color;
|
||||
border-bottom: 1px solid $border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive-sm {
|
||||
min-width: 48rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
|
||||
// border-collapse: separate;
|
||||
// border-spacing: 0 1rem;
|
||||
margin-bottom: 0px;
|
||||
|
||||
tr {
|
||||
&:last-child {
|
||||
td {
|
||||
border-bottom: 0px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
// background: rgba(0, 0, 0, 0.15);
|
||||
border-bottom : 1px solid $border-color;
|
||||
vertical-align: middle;
|
||||
padding : 18px;
|
||||
|
||||
&:last-child{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
tr {
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
td {
|
||||
&:first-child {
|
||||
border-top-left-radius : 7px;
|
||||
border-bottom-left-radius: 7px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius : 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-table{
|
||||
span{
|
||||
i{
|
||||
font-size:20px;
|
||||
&:hover{
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-icon{
|
||||
span{
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
.credit-card {
|
||||
background : #126AFF;
|
||||
padding : 20px;
|
||||
border-radius : $radius;
|
||||
// max-width : 400px;
|
||||
margin-bottom : 30px;
|
||||
position : relative;
|
||||
overflow : hidden;
|
||||
|
||||
// &::before {
|
||||
// content : "";
|
||||
// position : absolute;
|
||||
// top : 22px;
|
||||
// left : 18px;
|
||||
// right : 18px;
|
||||
// bottom : -40px;
|
||||
// z-index : -2;
|
||||
// background : #E3E6EC;
|
||||
// opacity : 0.91;
|
||||
// -webkit-filter: blur(86.985px);
|
||||
// filter : blur(86.985px);
|
||||
// border-radius : 24px;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// content : '';
|
||||
// position : absolute;
|
||||
// left : 0;
|
||||
// right : 0;
|
||||
// top : 0;
|
||||
// bottom : 0;
|
||||
// background: #fff;
|
||||
// opacity : 0;
|
||||
// transition: all 0.15s ease-in-out;
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// &::after {
|
||||
// opacity: 0.85;
|
||||
// }
|
||||
|
||||
// .cc-info {
|
||||
// bottom: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.type-brand {
|
||||
display : flex;
|
||||
justify-content: space-between;
|
||||
align-items : center;
|
||||
|
||||
h4 {
|
||||
color : $body-color;
|
||||
// opacity: 0.75;
|
||||
font-size : 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
// filter: brightness(100);
|
||||
height : 30px;
|
||||
background : #fff;
|
||||
padding : 4px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-number {
|
||||
padding: 20px 0px;
|
||||
|
||||
h6 {
|
||||
display : inline-block;
|
||||
margin-right: 20px;
|
||||
color : $white;
|
||||
font-size : 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-holder-exp {
|
||||
display : flex;
|
||||
justify-content: space-between;
|
||||
|
||||
h5 {
|
||||
color : $white;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.exp {
|
||||
color: $white;
|
||||
|
||||
strong {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.visa {
|
||||
background: $dark;
|
||||
|
||||
&:hover {
|
||||
.cc-info {
|
||||
background: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.master {
|
||||
background: $primary;
|
||||
|
||||
&:hover {
|
||||
.cc-info {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.payoneer {
|
||||
background: $white;
|
||||
|
||||
.type-brand {
|
||||
h4 {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-number {
|
||||
h6 {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-holder-exp {
|
||||
h5 {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.exp {
|
||||
color: $dark;
|
||||
|
||||
strong {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cc-info {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cc-info {
|
||||
// background : #070707;
|
||||
padding : 15px 20px 20px;
|
||||
// margin-bottom: 30px;
|
||||
border-radius : 0px;
|
||||
// margin-top : 30px;
|
||||
// margin: 10px;
|
||||
position : absolute;
|
||||
bottom : -100%;
|
||||
left : 0;
|
||||
right : 0;
|
||||
z-index : 1;
|
||||
transition : all 0.15s ease-in-out;
|
||||
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
margin-top : 5px;
|
||||
color : rgba(255, 255, 255, 0.5);
|
||||
|
||||
strong {
|
||||
color : $white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.cta1 {
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
// background: darken($primary, 10%);
|
||||
h2 {
|
||||
// color: $white;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
// color: $white;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding : 7px 20px;
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "./testimonial";
|
||||
@import "./credit-card";
|
||||
// @import "./bottom";
|
||||
@@ -0,0 +1,38 @@
|
||||
.bottom {
|
||||
background: $dark;
|
||||
|
||||
.bottom-logo {
|
||||
|
||||
p {
|
||||
color : $body-color;
|
||||
line-height: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-widget {
|
||||
@include respond("tab-port") {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size : 18px;
|
||||
font-weight : 600;
|
||||
color : #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
color : $body-color;
|
||||
font-weight : 400;
|
||||
margin-bottom: 10px;
|
||||
display : inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.footer {
|
||||
// border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: $body-bg;
|
||||
padding : 20px 0px;
|
||||
|
||||
position : fixed;
|
||||
bottom : 0;
|
||||
left : $sidebar-width + 30px;
|
||||
// right : $map-width + 30px;
|
||||
|
||||
border-radius: $radius;
|
||||
|
||||
.copyright {
|
||||
position : relative;
|
||||
text-align: left;
|
||||
|
||||
p {
|
||||
margin : 0;
|
||||
font-size: 14px;
|
||||
color : $body-color;
|
||||
|
||||
a {
|
||||
color : $primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
text-align: right;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
color : $dark;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.footer {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,580 @@
|
||||
.header {
|
||||
padding : 20px 0px;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : $sidebar-width;
|
||||
right : 0;
|
||||
z-index : 02;
|
||||
// transition: all 0.3s ease-in;
|
||||
background : $body-bg;
|
||||
|
||||
&.bg-primary {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
@include respond("tab-port") {
|
||||
// left : 100px;
|
||||
// margin: 0px;
|
||||
}
|
||||
|
||||
@include respond("phone-land") {
|
||||
left : 0;
|
||||
padding : 10px 0px;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
display: none;
|
||||
|
||||
@include respond("tab-port") {
|
||||
display: none;
|
||||
margin : 0px 20px 0px 0px;
|
||||
}
|
||||
|
||||
@include respond("phone-land") {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
// max-width: 35px;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.landing {
|
||||
padding : 20px 0px;
|
||||
left : 0px;
|
||||
// border-bottom: 1px solid $border-color;
|
||||
// position: relative;
|
||||
|
||||
a {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
display : block;
|
||||
margin-top : 0px;
|
||||
margin-left: 0px;
|
||||
|
||||
img {
|
||||
filter : none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
top : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-content,
|
||||
.header-left,
|
||||
.header-right {
|
||||
display : flex;
|
||||
justify-content: space-between;
|
||||
align-items : center;
|
||||
}
|
||||
|
||||
.notification {
|
||||
cursor: pointer;
|
||||
|
||||
.notify-bell {
|
||||
margin-right: 15px;
|
||||
|
||||
@include respond("phone-land") {
|
||||
margin-right : 15px;
|
||||
// margin-left : 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
border : 0px;
|
||||
padding : 15px 20px 10px;
|
||||
margin : 0px;
|
||||
top : 25px !important;
|
||||
width : 330px;
|
||||
box-shadow : 0 36px 48px rgba($color: #1b1994, $alpha: 0.08);
|
||||
border-radius : 5px;
|
||||
// background-color: #423A6F;
|
||||
|
||||
h4 {
|
||||
border-bottom : 1px solid $border-color;
|
||||
padding-bottom: 15px;
|
||||
font-size : 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
display : block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding : 10px 0px;
|
||||
|
||||
&:last-child {
|
||||
border : 0px;
|
||||
display : flex;
|
||||
justify-content: flex-end;
|
||||
align-items : center;
|
||||
color : $dark;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
font-size : 18px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
color : $headings-color;
|
||||
font-weight : $headings-font-weight;
|
||||
font-size : 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color : $body-color;
|
||||
}
|
||||
|
||||
span {
|
||||
&.icon {
|
||||
height : 40px;
|
||||
width : 40px;
|
||||
color : $white;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
border-radius : 50px;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: $success;
|
||||
}
|
||||
|
||||
&.fail {
|
||||
background: $danger;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
border-top : 0px;
|
||||
margin-left : 10.2px;
|
||||
display : inline-block;
|
||||
font-style : normal;
|
||||
font-variant : normal;
|
||||
text-rendering : auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family : "Font Awesome 5 Pro", "Font Awesome 5 Free";
|
||||
font-weight : 700;
|
||||
content : "\f107";
|
||||
}
|
||||
|
||||
.profile_log {
|
||||
cursor: pointer;
|
||||
|
||||
.user {
|
||||
display : flex;
|
||||
align-items: center;
|
||||
|
||||
.thumb {
|
||||
height : 35px;
|
||||
width : 35px;
|
||||
border-radius: 50px;
|
||||
color : #fff;
|
||||
text-align : center;
|
||||
|
||||
img {
|
||||
max-width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
// .arrow {
|
||||
|
||||
// // color: $white;
|
||||
// i {
|
||||
// font-weight: bold;
|
||||
// font-size : 14px;
|
||||
// line-height: 16px;
|
||||
// margin-top : 6px;
|
||||
// display : inline-block;
|
||||
// }
|
||||
|
||||
// @include respond("tab-land") {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
border : 0px;
|
||||
padding : 0px;
|
||||
margin : 0px;
|
||||
top : 25px !important;
|
||||
box-shadow : 0 1.5rem 4rem rgba(22, 28, 45, 0.15);
|
||||
border-radius : 5px;
|
||||
background-color: $white;
|
||||
min-width : 240px;
|
||||
|
||||
.user-email {
|
||||
padding: 10px 20px 10px;
|
||||
|
||||
.thumb {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
color : $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-balance {
|
||||
display : flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom : 15px;
|
||||
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
font-weight : 500;
|
||||
color : $headings-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding : 10px 20px;
|
||||
border-top : 1px solid $border-color;
|
||||
// font-size : 14px;
|
||||
// color : $body-color;
|
||||
font-weight : 400;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
|
||||
&:first-child {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
&.logout {
|
||||
color: $danger;
|
||||
|
||||
i {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
font-size : 18px;
|
||||
color : $primary;
|
||||
font-weight : bold;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
background-color: $primary;
|
||||
color : $white;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.dark-light-toggle {
|
||||
margin-right: 20px;
|
||||
cursor : pointer;
|
||||
display : none;
|
||||
|
||||
@include respond("phone-land") {
|
||||
margin-right: 0px;
|
||||
margin-left : 15px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
.dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.light {
|
||||
display: block;
|
||||
color : $warning;
|
||||
}
|
||||
}
|
||||
|
||||
// Landing page
|
||||
|
||||
.navigation {
|
||||
.navbar {
|
||||
background-color: transparent !important;
|
||||
padding : 0px;
|
||||
|
||||
ul {
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
@include respond("tab-port") {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
&>li {
|
||||
display : inline-block;
|
||||
padding : 0px 7px;
|
||||
// margin-left: 15px;
|
||||
width : 100%;
|
||||
|
||||
@include respond("tab-port") {
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin : 0 15px;
|
||||
padding : 7px 15px;
|
||||
// background: $primary;
|
||||
}
|
||||
|
||||
&>a {
|
||||
font-size : 16px;
|
||||
font-weight: $headings-font-weight;
|
||||
color : $dark;
|
||||
|
||||
@include respond("tab-port") {
|
||||
&::after {
|
||||
position: absolute;
|
||||
right : 15px;
|
||||
top : 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 991px) {
|
||||
.dropdown {
|
||||
&>a {
|
||||
position : relative;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background: $white;
|
||||
padding : 15px 0;
|
||||
display : block;
|
||||
opacity : 0;
|
||||
visibility: hidden;
|
||||
z-index : 1030;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.15);
|
||||
border : 0px;
|
||||
margin-top: 10px;
|
||||
z-index : 998;
|
||||
min-width : 10rem;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color : $body-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color : $primary;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.dropdown {
|
||||
&:hover {
|
||||
a {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
bottom : -9px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
// display: block;
|
||||
opacity : 1;
|
||||
visibility : visible;
|
||||
// transform: translate3d(-50%,0,0);
|
||||
margin-top : 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond("tab-port") {
|
||||
.dropdown-menu {
|
||||
border : 0px;
|
||||
padding: 0px;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding : 15px;
|
||||
color : $body-color;
|
||||
|
||||
// background: #323232;
|
||||
&:last-child {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
i,
|
||||
h6 {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
p {
|
||||
color : $body-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signin-btn {
|
||||
min-width: 100px;
|
||||
|
||||
// .btn-primary {
|
||||
// border-radius: 100px;
|
||||
// }
|
||||
}
|
||||
|
||||
.logo-white {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.light {
|
||||
.logo-primary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-white {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
.navbar {
|
||||
ul {
|
||||
&>li {
|
||||
&>a {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active,
|
||||
&:active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signin-btn {
|
||||
.btn-primary {
|
||||
background: $white;
|
||||
color : $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
min-width: 450px;
|
||||
|
||||
|
||||
@include respond("phone-land") {
|
||||
min-width : auto;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius : $radius;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
border-top-right-radius : $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
background : $primary;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
height : 40px;
|
||||
width : 40px;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
border-radius : 50%;
|
||||
background : #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: $primary;
|
||||
box-shadow: $shadow;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
i {
|
||||
font-size: 20px;
|
||||
color : $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "./header";
|
||||
@import "./bottom";
|
||||
@import "./footer";
|
||||
@import "./sidebar";
|
||||
@import "./theme-bg";
|
||||
@@ -0,0 +1,238 @@
|
||||
.sidebar {
|
||||
background : darken($primary, 10%);
|
||||
position : fixed;
|
||||
left : 0px;
|
||||
height : calc(100% - 20px);
|
||||
width : $sidebar-width;
|
||||
top : 0px;
|
||||
z-index : 3;
|
||||
bottom : 0px;
|
||||
border-radius : 0px;
|
||||
box-shadow : $shadow;
|
||||
// border-right : 1px solid $border-color;
|
||||
|
||||
|
||||
// @include respond("tab-port") {
|
||||
// width: $sidebar-width;
|
||||
// }
|
||||
|
||||
@include respond("phone-land") {
|
||||
top : auto;
|
||||
bottom : 0;
|
||||
width : 100%;
|
||||
height : 50px;
|
||||
left : 0;
|
||||
border-radius: 0px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
text-align: center;
|
||||
margin : 20px 20px 20px;
|
||||
|
||||
img {
|
||||
// max-width: 35px;
|
||||
// filter: brightness(100);
|
||||
}
|
||||
|
||||
// .mini-logo {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// @include respond("tab-port") {
|
||||
// text-align: center;
|
||||
|
||||
// .full-logo {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// .mini-logo {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
|
||||
@include respond("phone-land") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: 30px;
|
||||
padding : 20px;
|
||||
position : relative;
|
||||
|
||||
@include respond("phone-land") {
|
||||
margin-top: 0px;
|
||||
padding : 0px;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
ul {
|
||||
@include respond("phone-land") {
|
||||
display : flex;
|
||||
justify-content: space-around;
|
||||
align-items : center;
|
||||
}
|
||||
|
||||
li {
|
||||
// text-align: center;
|
||||
margin-bottom: 8px;
|
||||
border-radius: $radius;
|
||||
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
// background: lighten($dark, 0%);
|
||||
a {
|
||||
color: $white;
|
||||
|
||||
.nav-text {
|
||||
display : block;
|
||||
background: white;
|
||||
color : $primary;
|
||||
|
||||
@include respond("tab-port") {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color : $white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
// background: $white;
|
||||
|
||||
i {
|
||||
color : $white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color : $white;
|
||||
font-size : 20px;
|
||||
opacity : 0.6;
|
||||
margin-right: 15px;
|
||||
line-height : 0px;
|
||||
|
||||
|
||||
@include respond("tab-port") {
|
||||
margin-right: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding : 5px 8px;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
min-height : 3.5rem;
|
||||
// font-weight : 600;
|
||||
color : $body-color;
|
||||
// justify-content: center;
|
||||
|
||||
@include respond("tab-port") {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
display : none;
|
||||
padding : 3px 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow : $shadow;
|
||||
|
||||
@include respond("tab-port") {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.logout {
|
||||
position: fixed;
|
||||
bottom : 50px;
|
||||
left : 0;
|
||||
right : 0;
|
||||
width : 80px;
|
||||
|
||||
a {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
@include respond("tab-port") {
|
||||
right : auto;
|
||||
justify-content: center;
|
||||
left : 10px;
|
||||
width : auto;
|
||||
}
|
||||
|
||||
@include respond("phone-land") {
|
||||
position: relative;
|
||||
bottom : 0;
|
||||
left : auto;
|
||||
right : auto;
|
||||
width : auto;
|
||||
|
||||
a {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-limit-progress {
|
||||
display: none;
|
||||
|
||||
@include respond("tab-land") {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// background : lighten($secondary, 5%);
|
||||
background : url('/images/bg/6.jpg');
|
||||
position : absolute;
|
||||
bottom : 150px;
|
||||
padding : 15px 20px;
|
||||
margin : 20px;
|
||||
left : 0;
|
||||
right : 0;
|
||||
border-radius: $radius;
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
color : $white;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
|
||||
strong {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
height : 6px;
|
||||
background-color: darken($light, 10%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
$dbg : darken($primary, 37%);
|
||||
$dcolor : lighten($primary, 25%);
|
||||
$dcard : darken($primary, 30%);
|
||||
$dborder : rgba(255, 255, 255, 0.08);
|
||||
// $dborder: darken($primary, 37%);
|
||||
|
||||
.dark-theme {
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
background-color: $dbg;
|
||||
color : $dcolor;
|
||||
|
||||
.header {
|
||||
background-color: $dbg;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $dcard;
|
||||
|
||||
h4 {
|
||||
border-color: $dborder;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border-color: $dborder;
|
||||
|
||||
|
||||
|
||||
span {
|
||||
color: $dcolor !important;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification .notify-bell i {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.notification .dropdown-menu a:last-child {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.profile_log .dropdown-menu .dropdown-item {
|
||||
border-top: 1px solid $dborder;
|
||||
color : $dcolor;
|
||||
}
|
||||
|
||||
.user-info,
|
||||
.user-balance {
|
||||
span {
|
||||
color: $dcolor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
background: $dcard !important;
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid $dborder;
|
||||
|
||||
.card-title {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trade-form {
|
||||
p {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-widget li .icon-title span {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
background : $dbg;
|
||||
border-color: $dborder;
|
||||
color : $dcolor;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $dcolor;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: $dcolor;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $dcolor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $dborder;
|
||||
color : $dcolor;
|
||||
background : $dbg;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
border-color: $dborder;
|
||||
color : $dcolor;
|
||||
background : $dbg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-text {
|
||||
background-color: $dbg;
|
||||
border-color : $dborder;
|
||||
color : $dcolor;
|
||||
}
|
||||
|
||||
.form-file-button {
|
||||
border-color: $dborder;
|
||||
background : $primary;
|
||||
color : $white;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background : $dcard;
|
||||
color : $white;
|
||||
border-color: $dborder;
|
||||
}
|
||||
|
||||
.btn-outline-primary,
|
||||
.btn-outline-secondary,
|
||||
.btn-outline-success,
|
||||
.btn-outline-info,
|
||||
.btn-outline-warning,
|
||||
.btn-outline-danger,
|
||||
.btn-outline-light {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.balance-widget li {
|
||||
border-bottom: 1px solid $dborder;
|
||||
}
|
||||
|
||||
.table {
|
||||
color: $dcolor;
|
||||
|
||||
th {
|
||||
color : $white;
|
||||
border-bottom: 1px solid $dborder !important;
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: $dborder;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
--bs-table-accent-bg: $dbg;
|
||||
background-color : $dbg;
|
||||
color : $dcolor;
|
||||
}
|
||||
|
||||
.settings-menu {
|
||||
a {
|
||||
color: $dcolor;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color : $white;
|
||||
// opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: $dcard;
|
||||
|
||||
.modal-header {
|
||||
border-color: $dborder;
|
||||
|
||||
.btn-close {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.qr-img {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.chart-stat {
|
||||
border-color: $dborder;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.auth-form {
|
||||
padding: 30px 20px 10px;
|
||||
}
|
||||
|
||||
|
||||
.privacy-link {
|
||||
a {
|
||||
display : inline-block;
|
||||
font-size : 14px;
|
||||
line-height: 28px;
|
||||
color : $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.identity-content {
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
display : flex;
|
||||
width : 75px;
|
||||
height : 75px;
|
||||
border-radius : 100px;
|
||||
margin : 0 auto;
|
||||
background : $white;
|
||||
color : $primary;
|
||||
font-size : 30px;
|
||||
padding : 10px;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
margin-bottom : 30px;
|
||||
border : 1px solid $primary;
|
||||
}
|
||||
|
||||
h4 {
|
||||
max-width: 350px;
|
||||
margin : 0 auto 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 350px;
|
||||
margin : 0 auto 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
.total-balance {
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-stats {
|
||||
background : #F5F6FA;
|
||||
margin-top : 15px;
|
||||
// border : 1px solid $border-color;
|
||||
padding : 21px;
|
||||
border-radius : $radius;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
|
||||
border-color: $primary;
|
||||
background : $primary;
|
||||
|
||||
p {
|
||||
color : $white;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color : $body-color;
|
||||
font-size : 14px;
|
||||
font-weight : 400;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0px;
|
||||
font-size : 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.bills-widget-content {
|
||||
border : 1px solid $border-color;
|
||||
padding : 15px 20px;
|
||||
border-radius: $radius;
|
||||
margin-bottom: 18px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#transaction-graph {
|
||||
height: 300px !important;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
#chart-1 {
|
||||
height: 365px !important;
|
||||
}
|
||||
|
||||
.unpaid-content {
|
||||
li {
|
||||
padding : 15px 0px;
|
||||
display : flex;
|
||||
justify-content: space-between;
|
||||
border-bottom : 1px solid $border-color;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0px;
|
||||
border : 0px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#activityBar {
|
||||
height: 287px !important;
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
.stat-widget {
|
||||
background : #f5f6fa;
|
||||
padding : 20px;
|
||||
border-radius: $radius;
|
||||
margin : 15px 0px;
|
||||
position : relative;
|
||||
|
||||
// &::before {
|
||||
// content : "";
|
||||
// position : absolute;
|
||||
// top : 22px;
|
||||
// left : 18px;
|
||||
// right : 18px;
|
||||
// bottom : -40px;
|
||||
// z-index : -2;
|
||||
// background : #E3E6EC;
|
||||
// opacity : 0.91;
|
||||
// -webkit-filter: blur(86.985px);
|
||||
// filter : blur(86.985px);
|
||||
// border-radius : 24px;
|
||||
// }
|
||||
|
||||
.widget-icon {
|
||||
// background : rgba(0, 0, 0, 0.15);
|
||||
width : 50px;
|
||||
height : 50px;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
border-radius : 100%;
|
||||
font-size : 20px;
|
||||
color : $white;
|
||||
|
||||
i {
|
||||
line-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
// text-align: right;
|
||||
|
||||
p {
|
||||
color : $body-color;
|
||||
opacity : 0.85;
|
||||
font-size : 14px;
|
||||
font-weight : 400;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
// color: $dark;
|
||||
font-size : 20px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
// p {
|
||||
// // background : $dark;
|
||||
// display : inline-block;
|
||||
// padding : 3px 7px;
|
||||
// border-radius: $radius - 16px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// invoice-content
|
||||
|
||||
.invoice-content {
|
||||
// margin: 0px -15px;
|
||||
|
||||
li {
|
||||
margin-bottom : 7px;
|
||||
display : block;
|
||||
padding : 12px 0px;
|
||||
// border-radius: $radius;
|
||||
position : relative;
|
||||
border-bottom : 1px solid $border-color;
|
||||
|
||||
// &:hover,
|
||||
// &:focus,
|
||||
// &.active {
|
||||
// background: $primary;
|
||||
|
||||
// h5 {
|
||||
// color: $white;
|
||||
// }
|
||||
|
||||
// p {
|
||||
// color : $white;
|
||||
// opacity: 0.75;
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
|
||||
&:last-child {
|
||||
// margin-bottom: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
// position : absolute;
|
||||
right : 15px;
|
||||
display : block;
|
||||
font-size : 12px;
|
||||
background : $white;
|
||||
padding : 2px 10px;
|
||||
border-radius: 16px;
|
||||
display : inline-block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-user-img {
|
||||
img {
|
||||
border-radius: $radius + 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-info {
|
||||
position: relative;
|
||||
display : block;
|
||||
|
||||
|
||||
|
||||
p {
|
||||
margin-bottom : 5px;
|
||||
// font-weight : 600;
|
||||
// color : $body-color;
|
||||
// font-size : 18px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#most-selling-items {
|
||||
height: 295px !important;
|
||||
}
|
||||
|
||||
#activity {
|
||||
height: 245px !important;
|
||||
}
|
||||
|
||||
#user-activity {
|
||||
.btn {
|
||||
padding: 5px 15px;
|
||||
|
||||
@include respond("phone-land") {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.budget-content {
|
||||
li {
|
||||
margin-bottom: 32px;
|
||||
|
||||
h5 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.demo_img {
|
||||
text-align : center;
|
||||
margin-bottom: 60px;
|
||||
|
||||
.img-wrap {
|
||||
// max-height: 175px;
|
||||
overflow : hidden;
|
||||
margin-bottom: 15px;
|
||||
box-shadow : 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
|
||||
background : $white;
|
||||
padding : 10px;
|
||||
border-radius: 16px;
|
||||
border : 1px solid #EFF2F7;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-demo_img {
|
||||
// box-shadow: 0px 20px 25px rgba(22, 28, 45, 0.05);
|
||||
background : $white;
|
||||
box-shadow : 0px 36px 48px rgba(31, 66, 135, 0.04);
|
||||
padding : 10px;
|
||||
border-radius: 16px;
|
||||
|
||||
img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.all-notification {
|
||||
|
||||
|
||||
|
||||
a {
|
||||
display : block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding : 10px 0px;
|
||||
|
||||
&:last-child {
|
||||
border : 0px;
|
||||
display : flex;
|
||||
justify-content: flex-end;
|
||||
align-items : center;
|
||||
color : $dark;
|
||||
padding-bottom : 0px;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
font-size : 18px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
color : $headings-color;
|
||||
font-weight : $headings-font-weight;
|
||||
font-size : 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color : $body-color;
|
||||
}
|
||||
|
||||
span {
|
||||
&.icon {
|
||||
height : 40px;
|
||||
width : 40px;
|
||||
color : $white;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
border-radius : 50px;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: $success;
|
||||
}
|
||||
|
||||
&.fail {
|
||||
background: $danger;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "./dashboard";
|
||||
@import "./auth";
|
||||
@import "./settings";
|
||||
@import "./profile";
|
||||
@import "./wallet";
|
||||
@import "./balance";
|
||||
@import "./bill";
|
||||
@import "./notification";
|
||||
@import "./profile";
|
||||
@import "./demo";
|
||||
@@ -0,0 +1,96 @@
|
||||
.app-link {
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin: 15px 0px;
|
||||
|
||||
span {
|
||||
margin-bottom: 5px;
|
||||
display : inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.welcome-profile {
|
||||
// background: $primary !important;
|
||||
|
||||
.card-body {
|
||||
// background: $primary !important;
|
||||
|
||||
img {
|
||||
border : 4px solid $white;
|
||||
border-radius: 100px;
|
||||
width : 60px;
|
||||
}
|
||||
|
||||
// text-align: center;
|
||||
|
||||
h4 {
|
||||
// color : $white;
|
||||
margin-top: 10px;
|
||||
font-size : 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
// color : $white;
|
||||
opacity : 0.75;
|
||||
// max-width : 300px;
|
||||
// margin : 0 auto;
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
padding : 15px 0px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border : 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
a {
|
||||
// color : darken($white, 5%);
|
||||
display : flex;
|
||||
align-items: center;
|
||||
transition : all 0.25 ease-in-out;
|
||||
|
||||
span {
|
||||
// background : $primary;
|
||||
padding : 5px;
|
||||
border-radius : 50px;
|
||||
width : 30px;
|
||||
height : 30px;
|
||||
display : inline-flex;
|
||||
align-items : center;
|
||||
justify-content: center;
|
||||
margin-right : 10px;
|
||||
transition : all 0.25 ease-in-out;
|
||||
|
||||
&.verified {
|
||||
background: $success;
|
||||
color : $white;
|
||||
}
|
||||
|
||||
&.not-verified {
|
||||
background: $primary;
|
||||
color : $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/////
|
||||
@@ -0,0 +1,71 @@
|
||||
.settings-menu {
|
||||
margin-bottom: 30px;
|
||||
display : flex;
|
||||
|
||||
@include respond('phone-land') {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
@include respond('phone-land') {
|
||||
display: inline-block;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
a {
|
||||
color : $primary;
|
||||
// opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display : inline-block;
|
||||
margin-right : 20px;
|
||||
color : $body-color;
|
||||
// font-weight : $headings-font-weight;
|
||||
font-size : 16px;
|
||||
// opacity : 0.75;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.verify-content {
|
||||
display : flex;
|
||||
justify-content: space-between;
|
||||
align-items : center;
|
||||
|
||||
@include respond('phone-land') {
|
||||
display: block;
|
||||
|
||||
.btn {
|
||||
margin-left: 65px;
|
||||
margin-top : 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
height : 50px;
|
||||
min-width : 50px;
|
||||
font-size : 22px;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
border-radius : 50px;
|
||||
}
|
||||
|
||||
.card {
|
||||
.card {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.invoice-stats{
|
||||
background: $white;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
.invoice-stats-content{
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.invoice-stats-icon{
|
||||
span{
|
||||
display: flex;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(53, 70, 171, 0.12);
|
||||
border-radius: 50%;
|
||||
margin-left:1rem;
|
||||
i{
|
||||
|
||||
font-size: 32px;
|
||||
line-height: 0px;
|
||||
// padding: 5px;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
Plik diff jest za duży
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
Name: Intez
|
||||
Author: Quixlab
|
||||
Author Portfolio : https://themeforest.net/user/quixlab/portfolio
|
||||
Email: quixlab.com@gmail.com
|
||||
|
||||
|
||||
Table of Content:
|
||||
|
||||
1. Abstract
|
||||
2. Bootstrap CSS
|
||||
3. Base
|
||||
4. Layout
|
||||
5. Component
|
||||
6. Pages
|
||||
|
||||
*/
|
||||
|
||||
@import "./abstract/abstract";
|
||||
@import "../../node_modules/bootstrap/scss/bootstrap";
|
||||
@import "./base/base";
|
||||
@import "./layout/layout";
|
||||
@import "./element/element";
|
||||
@import "./components/component";
|
||||
@import "./pages/pages";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user