first commit
This commit is contained in:
67
public/style/scss/_preloader.scss
Normal file
67
public/style/scss/_preloader.scss
Normal file
@ -0,0 +1,67 @@
|
||||
/* Editable */
|
||||
|
||||
#preloader {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.sk-three-bounce {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.sk-three-bounce .sk-child {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $primary;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
|
||||
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
|
||||
}
|
||||
|
||||
.sk-three-bounce .sk-bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.sk-three-bounce .sk-bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-three-bounce {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-three-bounce {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
4
public/style/scss/abstracts/_abstracts.scss
Normal file
4
public/style/scss/abstracts/_abstracts.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import './variable';
|
||||
@import './inheritance';
|
||||
@import './mixin';
|
||||
@import './maps';
|
||||
145
public/style/scss/abstracts/_bs-custom.scss
Normal file
145
public/style/scss/abstracts/_bs-custom.scss
Normal file
@ -0,0 +1,145 @@
|
||||
//to ignore cli warning about deprecated mixin
|
||||
$enable-deprecation-messages: false;
|
||||
$ignore-warning : true;
|
||||
|
||||
// Custom class not bootstrap
|
||||
$fn:'HelveticaNeue'; // fn = font normal
|
||||
$fm:'HelveticaNeueMed'; // fm = font Medium
|
||||
$border-radius: 0.75rem;
|
||||
// Body
|
||||
$body-bg : #F9F9F9;
|
||||
$body-color: #7e7e7e;
|
||||
|
||||
// Typography
|
||||
$font-family-base: 'Roboto',
|
||||
sans-serif;
|
||||
$headings-font-weight : 500;
|
||||
// $headings-font-family: $fm;
|
||||
|
||||
|
||||
|
||||
|
||||
$font-size-base : 0.875rem !default;
|
||||
$font-weight-base : 400 !default;
|
||||
// $line-height-base: 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 : 0.938rem;
|
||||
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
$white : #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black : #000 !default;
|
||||
|
||||
|
||||
$blue : #5e72e4;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink : #e83e8c !default;
|
||||
$red : #EE3232;
|
||||
$orange: #ff9900 !default;
|
||||
$yellow: #FFFA6F;
|
||||
$green : #297F00;
|
||||
$teal : #20c997 !default;
|
||||
$cyan : #3065D0;
|
||||
|
||||
|
||||
|
||||
$grays: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$grays: map-merge((
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900),
|
||||
$grays);
|
||||
|
||||
|
||||
$muted : #89879f;
|
||||
$text-muted: #89879f;
|
||||
$mine-shaft: #262626;
|
||||
$ebony-clay: #232833;
|
||||
|
||||
$colors: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$colors: map-merge((
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800),
|
||||
$colors);
|
||||
|
||||
|
||||
|
||||
$primary : #0B2A97 !default;
|
||||
/*$primary : #7356f1 !default;*/
|
||||
$secondary: #A02CFA !default;
|
||||
$success : #2BC155 !default;
|
||||
$info : #1EA7C5 !default;
|
||||
$warning : #FFBC11 !default;
|
||||
$danger : #F94687 !default;
|
||||
$light : #F4F5F9 !default;
|
||||
$dark : #B1B1B1;
|
||||
|
||||
$theme-colors: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$theme-colors: map-merge(("primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark),
|
||||
$theme-colors);
|
||||
|
||||
|
||||
// $base-font-size : 0.8125rem !default;
|
||||
$heading-primary-size: 1.8rem;
|
||||
$sub-heading-size : 1.6rem !default;
|
||||
|
||||
$grid-gutter-width: 30px;
|
||||
|
||||
$dropdown-lik-color: $body-color;
|
||||
|
||||
|
||||
$border-color : #EEEEEE;
|
||||
$headings-color:#3d4465 !default;
|
||||
$rounded : 0.75rem ;
|
||||
|
||||
|
||||
|
||||
$grid-breakpoints: (xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1440);
|
||||
154
public/style/scss/abstracts/_inheritance.scss
Normal file
154
public/style/scss/abstracts/_inheritance.scss
Normal file
@ -0,0 +1,154 @@
|
||||
%gradient_one {
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
}
|
||||
|
||||
%gradient-1 {
|
||||
background: #f0a907;
|
||||
background: -moz-linear-gradient(top, #f0a907 0%, #f53c79 100%);
|
||||
background: -webkit-linear-gradient(top, #f0a907 0%,#f53c79 100%);
|
||||
background: linear-gradient(to bottom, #f0a907 0%,#f53c79 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0a907', endColorstr='#f53c79',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-2 {
|
||||
background: #4dedf5;
|
||||
background: -moz-linear-gradient(top, #4dedf5 0%, #480ceb 100%);
|
||||
background: -webkit-linear-gradient(top, #4dedf5 0%,#480ceb 100%);
|
||||
background: linear-gradient(to bottom, #4dedf5 0%,#480ceb 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dedf5', endColorstr='#480ceb',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-3 {
|
||||
background: #51f5ae;
|
||||
background: -moz-linear-gradient(top, #51f5ae 0%, #3fbcda 100%);
|
||||
background: -webkit-linear-gradient(top, #51f5ae 0%,#3fbcda 100%);
|
||||
background: linear-gradient(to bottom, #51f5ae 0%,#3fbcda 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51f5ae', endColorstr='#3fbcda',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-4 {
|
||||
background: #f25521;
|
||||
background: -moz-linear-gradient(left, #f25521 0%, #f9c70a 100%);
|
||||
background: -webkit-linear-gradient(left, #f25521 0%,#f9c70a 100%);
|
||||
background: linear-gradient(to right, #f25521 0%,#f9c70a 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25521', endColorstr='#f9c70a',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-5 {
|
||||
background: #f53c79;
|
||||
background: -moz-linear-gradient(left, #f53c79 0%, #f0a907 100%);
|
||||
background: -webkit-linear-gradient(left, #f53c79 0%,#f0a907 100%);
|
||||
background: linear-gradient(to right, #f53c79 0%,#f0a907 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f53c79', endColorstr='#f0a907',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-6 {
|
||||
background: #36b9d8;
|
||||
background: -moz-linear-gradient(left, #36b9d8 0%, #4bffa2 100%);
|
||||
background: -webkit-linear-gradient(left, #36b9d8 0%,#4bffa2 100%);
|
||||
background: linear-gradient(to right, #36b9d8 0%,#4bffa2 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36b9d8', endColorstr='#4bffa2',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-7 {
|
||||
background: #4400eb;
|
||||
background: -moz-linear-gradient(left, #4400eb 0%, #44e7f5 100%);
|
||||
background: -webkit-linear-gradient(left, #4400eb 0%,#44e7f5 100%);
|
||||
background: linear-gradient(to right, #4400eb 0%,#44e7f5 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4400eb', endColorstr='#44e7f5',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-8 {
|
||||
background: #F7B00F;
|
||||
background: -moz-linear-gradient(top, #F7B00F 0%, #F25521 100%);
|
||||
background: -webkit-linear-gradient(top, #F7B00F 0%,#F25521 100%);
|
||||
background: linear-gradient(to bottom, #F7B00F 0%,#F25521 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7B00F', endColorstr='#F25521',GradientType=1 );
|
||||
|
||||
// background: linear-gradient(top, #f25521 0%, #f9c70a 100%);
|
||||
}
|
||||
|
||||
%gradient-9 {
|
||||
background: #f31e7a !important;
|
||||
background: -moz-linear-gradient(left, #f31e7a 0%, #fd712c 100%);
|
||||
background: -webkit-linear-gradient(left, #f31e7a 0%,#fd712c 100%);
|
||||
background: linear-gradient(to right, #f31e7a 0%,#fd712c 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f31e7a', endColorstr='#fd712c',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-10 {
|
||||
background: #f25521 !important;
|
||||
background: -moz-linear-gradient(left, #f25521 0%, #f9c70a 100%);
|
||||
background: -webkit-linear-gradient(left, #f25521 0%,#f9c70a 100%);
|
||||
background: linear-gradient(to top, #f25521 0%,#f9c70a 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25521', endColorstr='#f9c70a',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-11 {
|
||||
background: #3398fb;
|
||||
background: -moz-linear-gradient(left, #3398fb 0%, #8553ee 100%);
|
||||
background: -webkit-linear-gradient(left, #3398fb 0%,#8553ee 100%);
|
||||
background: linear-gradient(to right, #3398fb 0%,#8553ee 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3398fb', endColorstr='#8553ee',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-12 {
|
||||
background: #36e1b4;
|
||||
background: -moz-linear-gradient(left, #36e1b4 0%, #11cae7 100%);
|
||||
background: -webkit-linear-gradient(left, #36e1b4 0%,#11cae7 100%);
|
||||
background: linear-gradient(to right, #36e1b4 0%,#11cae7 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36e1b4', endColorstr='#11cae7',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-13 {
|
||||
background: #ffbf31;
|
||||
background: -moz-linear-gradient(left, #ffbf31 0%, #ff890e 100%);
|
||||
background: -webkit-linear-gradient(left, #ffbf31 0%,#ff890e 100%);
|
||||
background: linear-gradient(to right, #ffbf31 0%,#ff890e 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf31', endColorstr='#ff890e',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-14 {
|
||||
background: #23bdb8;
|
||||
background: -moz-linear-gradient(-45deg, #23bdb8 0%, #43e794 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #23bdb8 0%,#43e794 100%);
|
||||
background: linear-gradient(135deg, #23bdb8 0%,#43e794 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23bdb8', endColorstr='#43e794',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-15 {
|
||||
background: #9a56ff;
|
||||
background: -moz-linear-gradient(-45deg, #9a56ff 0%, #e36cd9 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #9a56ff 0%,#e36cd9 100%);
|
||||
background: linear-gradient(135deg, #9a56ff 0%,#e36cd9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a56ff', endColorstr='#e36cd9',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-16 {
|
||||
background: #f48665;
|
||||
background: -moz-linear-gradient(-45deg, #f48665 0%, #fda23f 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #f48665 0%,#fda23f 100%);
|
||||
background: linear-gradient(135deg, #f48665 0%,#fda23f 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48665', endColorstr='#fda23f',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-17 {
|
||||
background: #e36cd9;
|
||||
background: -moz-linear-gradient(-45deg, #e36cd9 0%, #fe60ae 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #e36cd9 0%,#fe60ae 100%);
|
||||
background: linear-gradient(135deg, #e36cd9 0%,#fe60ae 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e36cd9', endColorstr='#fe60ae',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-18 {
|
||||
background: #a15cff;
|
||||
background: -moz-linear-gradient(left, #a15cff 0%, #ce82fd 100%);
|
||||
background: -webkit-linear-gradient(left, #a15cff 0%,#ce82fd 100%);
|
||||
background: linear-gradient(to right, #a15cff 0%,#ce82fd 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a15cff', endColorstr='#ce82fd',GradientType=1 );
|
||||
}
|
||||
|
||||
%text-gradient {
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
22
public/style/scss/abstracts/_maps.scss
Normal file
22
public/style/scss/abstracts/_maps.scss
Normal file
@ -0,0 +1,22 @@
|
||||
$borders: (
|
||||
"right", "left", "top", "bottom", ""
|
||||
);
|
||||
|
||||
|
||||
$theme_backgrounds: (
|
||||
"color_1": $color_pallate_1,
|
||||
"color_2": $color_pallate_2,
|
||||
"color_3": $color_pallate_3,
|
||||
"color_4": $color_pallate_4,
|
||||
"color_5": $color_pallate_5,
|
||||
"color_6": $color_pallate_6,
|
||||
"color_7": $color_pallate_7,
|
||||
"color_8": $color_pallate_8,
|
||||
"color_9": $color_pallate_9,
|
||||
"color_10": $color_pallate_10,
|
||||
"color_11": $color_pallate_11,
|
||||
"color_12": $color_pallate_12,
|
||||
"color_13": $color_pallate_13,
|
||||
"color_14": $color_pallate_14,
|
||||
"color_15": $color_pallate_15
|
||||
);
|
||||
115
public/style/scss/abstracts/_mixin.scss
Normal file
115
public/style/scss/abstracts/_mixin.scss
Normal file
@ -0,0 +1,115 @@
|
||||
//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 == "laptop") {
|
||||
@media only screen and (max-width: 1400px) { @content; }
|
||||
}
|
||||
|
||||
@if ($breakpoint == "desktop") {
|
||||
|
||||
@media only screen and (min-width: 1200px) { @content; }
|
||||
}
|
||||
@if($breakpoint == "mid-desktop") {
|
||||
|
||||
@media only screen and (max-width: 1600px) { @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; }
|
||||
}
|
||||
}
|
||||
|
||||
// transition
|
||||
@mixin transitionSlow{
|
||||
-webkit-transition: all 0.8s;
|
||||
-ms-transition: all 0.8s;
|
||||
transition: all 0.8s;
|
||||
}
|
||||
@mixin transitionMedium{
|
||||
-webkit-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
@mixin transitionFast{
|
||||
-webkit-transition: all 0.2s;
|
||||
-ms-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@mixin transformScale{
|
||||
transform:scale(1);
|
||||
-moz-transform:scale(1);
|
||||
-webkit-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
}
|
||||
@mixin transformScaleXS{
|
||||
transform:scale(0.8);
|
||||
-moz-transform:scale(0.8);
|
||||
-webkit-transform:scale(0.8);
|
||||
-ms-transform:scale(0.8);
|
||||
-o-transform:scale(0.8);
|
||||
}
|
||||
@mixin transformScaleSM{
|
||||
transform:scale(1.2);
|
||||
-moz-transform:scale(1.2);
|
||||
-webkit-transform:scale(1.2);
|
||||
-ms-transform:scale(1.2);
|
||||
-o-transform:scale(1.2);
|
||||
}
|
||||
@mixin transformScaleMD{
|
||||
transform:scale(1.5);
|
||||
-moz-transform:scale(1.5);
|
||||
-webkit-transform:scale(1.5);
|
||||
-ms-transform:scale(1.5);
|
||||
-o-transform:scale(1.5);
|
||||
}
|
||||
122
public/style/scss/abstracts/_variable.scss
Normal file
122
public/style/scss/abstracts/_variable.scss
Normal file
@ -0,0 +1,122 @@
|
||||
//customize bootstrap
|
||||
@import './bs-custom';
|
||||
|
||||
$strong:#646c9a;
|
||||
$border: #f0f1f5;
|
||||
$shadow: 0px 0Epx 40px 0px rgba(82,63,105,0.1);
|
||||
$body-bg: #F9F9F9;
|
||||
|
||||
|
||||
///////////////
|
||||
// Solid Color
|
||||
///////////////
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$charade: #23252F;
|
||||
|
||||
/////////////////////////
|
||||
// Dark Version Color
|
||||
/////////////////////////
|
||||
$d-ctd: #ddd;
|
||||
$d-ctl: #828690;
|
||||
$d-border: #333a54;
|
||||
$d-bg: #181f39;
|
||||
$dark-card: #1e2746;
|
||||
$dark_bg_lighter: #1E2A4A;
|
||||
|
||||
/////////////////////////
|
||||
// Primary Light
|
||||
/////////////////////////
|
||||
$primary-light: lighten($primary, 60%);
|
||||
$secondary-light: lighten($secondary, 36%);
|
||||
$success-light: lighten($success, 47%);
|
||||
$warning-light: lighten($warning, 40%);
|
||||
$danger-light: lighten($danger, 35%);
|
||||
$info-light: lighten($info, 35%);
|
||||
$dark-light: lighten($dark, 25%);
|
||||
|
||||
/////////////////////////
|
||||
// Opacity
|
||||
/////////////////////////
|
||||
$primary-opacity: rgba($primary, 0.2);
|
||||
$secondary-opacity: rgba($secondary, 0.5);
|
||||
$success-opacity: rgba($success, 0.1);
|
||||
$warning-opacity: rgba($warning, 0.1);
|
||||
$danger-opacity: rgba($danger, 0.15);
|
||||
$info-opacity: rgba($info, 0.1);
|
||||
$dark-opacity: rgba($dark, 0.35);
|
||||
|
||||
////////////////////////
|
||||
// Light Version Color
|
||||
////////////////////////
|
||||
$l-ctd: #464a53;
|
||||
$l-ctl: #828690;
|
||||
$l-border: #eaeaea;
|
||||
$l-bg: #f2f4fa;
|
||||
$heading: #333;
|
||||
|
||||
///////////////////
|
||||
// Material Colors
|
||||
///////////////////
|
||||
$dusty-gray: #999999;
|
||||
$gallery: #EEEEEE;
|
||||
$gray: #898989;
|
||||
$input-border-color: $border;
|
||||
|
||||
|
||||
///////////////////
|
||||
// Social Colors
|
||||
///////////////////
|
||||
$facebook: #3b5998;
|
||||
$twitter: #1da1f2;
|
||||
$youtube: #FF0000;
|
||||
$google-plus: #db4439;
|
||||
$linkedin: #007bb6;
|
||||
$instagram: #c32aa3;
|
||||
$pinterest: #bd081c;
|
||||
$google: #4285f4;
|
||||
$snapchat: #fffc00;
|
||||
$whatsapp: #25d366;
|
||||
$tumblr: #35465d;
|
||||
$reddit: #ff4500;
|
||||
$spotify: #1ed760;
|
||||
$yahoo: #430297;
|
||||
$dribbble: #ea4c89;
|
||||
$skype: #00aff0;
|
||||
$quora: #aa2200;
|
||||
$riverBed: #4C585C;
|
||||
$vimeo: #1ab7ea;
|
||||
|
||||
|
||||
///////////////////
|
||||
// Misc Colors
|
||||
///////////////////
|
||||
$iron: #DDDFE1;
|
||||
$grey: #D2D6DE;
|
||||
$pale-sky: #6a707e;
|
||||
$athensGray: #F0F0F2;
|
||||
$sky: #2290FF;
|
||||
|
||||
|
||||
//color for coller pallate
|
||||
$color_pallate_1: $white;
|
||||
$color_pallate_2: #143b64;
|
||||
$color_pallate_3: $primary;
|
||||
$color_pallate_4: #4527a0;
|
||||
$color_pallate_5: #c62828;
|
||||
$color_pallate_6: #283593;
|
||||
$color_pallate_7: #7356f1;
|
||||
$color_pallate_8: #3695eb;
|
||||
$color_pallate_9: #00838f;
|
||||
$color_pallate_10: #ff8f16;
|
||||
$color_pallate_11: #6673fd;
|
||||
$color_pallate_12: #558b2f;
|
||||
$color_pallate_13: #2a2a2a;
|
||||
$color_pallate_14: #1367c8;
|
||||
$color_pallate_15: #ed0b4c;
|
||||
|
||||
//utility variables
|
||||
$radius: 1.25rem;
|
||||
|
||||
|
||||
|
||||
6
public/style/scss/base/_base.scss
Normal file
6
public/style/scss/base/_base.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import './fonts';
|
||||
@import './helper';
|
||||
@import './reset';
|
||||
@import './colors';
|
||||
@import './custom-grid';
|
||||
|
||||
61
public/style/scss/base/_colors.scss
Normal file
61
public/style/scss/base/_colors.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.gradient_one {
|
||||
@extend %gradient_one;
|
||||
}
|
||||
|
||||
|
||||
.gradient {
|
||||
&-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
&-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
&-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
&-4 {
|
||||
@extend %gradient-4;
|
||||
}
|
||||
&-5 {
|
||||
@extend %gradient-5;
|
||||
}
|
||||
&-6 {
|
||||
@extend %gradient-6;
|
||||
}
|
||||
&-7 {
|
||||
@extend %gradient-7;
|
||||
}
|
||||
&-8 {
|
||||
@extend %gradient-8;
|
||||
}
|
||||
&-9 {
|
||||
@extend %gradient-9;
|
||||
}
|
||||
&-10 {
|
||||
@extend %gradient-10;
|
||||
}
|
||||
&-11 {
|
||||
@extend %gradient-11;
|
||||
}
|
||||
&-12 {
|
||||
@extend %gradient-12;
|
||||
}
|
||||
&-13 {
|
||||
@extend %gradient-13;
|
||||
}
|
||||
&-14 {
|
||||
@extend %gradient-14;
|
||||
}
|
||||
&-15 {
|
||||
@extend %gradient-15;
|
||||
}
|
||||
&-16 {
|
||||
@extend %gradient-16;
|
||||
}
|
||||
&-17 {
|
||||
@extend %gradient-17;
|
||||
}
|
||||
&-18 {
|
||||
@extend %gradient-18;
|
||||
}
|
||||
}
|
||||
27
public/style/scss/base/_custom-grid.scss
Normal file
27
public/style/scss/base/_custom-grid.scss
Normal file
@ -0,0 +1,27 @@
|
||||
$grid-columns: 12;
|
||||
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
|
||||
@for $i from 1 through $grid-columns {
|
||||
.col-xxl-#{$i} {
|
||||
flex: 0 0 percentage($i / $grid-columns);
|
||||
max-width: percentage($i / $grid-columns);
|
||||
}
|
||||
}
|
||||
.mb-xxl-4{
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
7
public/style/scss/base/_fonts.scss
Normal file
7
public/style/scss/base/_fonts.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import url('./../icons/simple-line-icons/css/simple-line-icons.css');
|
||||
@import url('./../icons/font-awesome-old/css/font-awesome.min.css');
|
||||
@import url('./../icons/material-design-iconic-font/css/materialdesignicons.min.css');
|
||||
@import url('./../icons/themify-icons/css/themify-icons.css');
|
||||
@import url('./../icons/line-awesome/css/line-awesome.min.css');
|
||||
@import url('./../icons/avasta/css/style.css');
|
||||
@import url('./../icons/flaticon/flaticon.css');
|
||||
3
public/style/scss/base/_helper.scss
Normal file
3
public/style/scss/base/_helper.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.c-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
538
public/style/scss/base/_reset.scss
Normal file
538
public/style/scss/base/_reset.scss
Normal file
@ -0,0 +1,538 @@
|
||||
@import "../abstracts/maps";
|
||||
@import "./../vendor/animate/animate.min.css";
|
||||
@import "./../vendor/aos/css/aos.min.css";
|
||||
@import "./../vendor/perfect-scrollbar/css/perfect-scrollbar.css";
|
||||
@import "./../vendor/metismenu/css/metisMenu.min.css";
|
||||
* {
|
||||
outline: none;
|
||||
padding: 0;
|
||||
&::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
&::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: $primary;
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
font-size:1rem;
|
||||
@include respond('tab-port') {
|
||||
font-size:0.875rem;
|
||||
}
|
||||
}
|
||||
@include respond('laptop') {
|
||||
h2{
|
||||
font-size:1.5rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.box-shadow-none {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
opacity: 0;
|
||||
transition: all 0.25s ease-in;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// background: $body-bg;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.rounded-lg{
|
||||
border-radius:$radius;
|
||||
}
|
||||
.rounded-xl{
|
||||
border-radius:12px !important;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $body-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.btn-link{
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active{
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
.w-space-no{
|
||||
white-space:nowrap;
|
||||
}
|
||||
// .content-body {
|
||||
// .container-fluid {
|
||||
// padding: 0 30px 0;
|
||||
// @include media-breakpoint-down(sm) {
|
||||
// padding: 0 1.5rem 0;
|
||||
// padding: 0 0.9375rem 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.content-body {
|
||||
.container {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.container-fluid {
|
||||
padding-top: 40px;
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
@include custommq($max: 1600px) {
|
||||
padding-top: 30px;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
@include custommq($max: 767px) {
|
||||
padding-top: 20px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
@include custommq($max: 575px) {
|
||||
padding-top: 15px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* sp */
|
||||
.row.sp80,
|
||||
.sp80{
|
||||
margin-left:-40px;
|
||||
margin-right:-40px;
|
||||
[class*="col-"]{
|
||||
padding-left:40px;
|
||||
padding-right:40px;
|
||||
}
|
||||
}
|
||||
.row.sp60,
|
||||
.sp60{
|
||||
margin-left:-30px;
|
||||
margin-right:-30px;
|
||||
[class*="col-"]{
|
||||
padding-left:30px;
|
||||
padding-right:30px;
|
||||
}
|
||||
}
|
||||
.row.sp40,
|
||||
.sp40{
|
||||
margin-left:-20px;
|
||||
margin-right:-20px;
|
||||
[class*="col-"]{
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
}
|
||||
}
|
||||
.row.sp20,
|
||||
.sp20{
|
||||
margin-left:-10px;
|
||||
margin-right:-10px;
|
||||
[class*="col-"]{
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
}
|
||||
}
|
||||
.row.sp16,
|
||||
.sp16{
|
||||
margin-left:-8px;
|
||||
margin-right:-8px;
|
||||
[class*="col-"]{
|
||||
padding-left:8px;
|
||||
padding-right:8px;
|
||||
}
|
||||
}
|
||||
.row.sp10,
|
||||
.sp10{
|
||||
margin-left:-5px;
|
||||
margin-right:-5px;
|
||||
[class*="col-"]{
|
||||
padding-left:5px;
|
||||
padding-right:5px;
|
||||
}
|
||||
}
|
||||
.row.sp4,
|
||||
.sp4{
|
||||
margin-left:-2px;
|
||||
margin-right:-2px;
|
||||
[class*="col-"]{
|
||||
padding-left:2px;
|
||||
padding-right:2px;
|
||||
}
|
||||
}
|
||||
.row.spno,
|
||||
.spno{
|
||||
margin-left:0;
|
||||
margin-right:0;
|
||||
[class*="col-"]{
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
}
|
||||
.content-heading {
|
||||
font-size: 16px;
|
||||
margin-bottom: 1.875rem;
|
||||
margin-top: 3.125rem;
|
||||
border-bottom: 1px solid $border;
|
||||
padding-bottom: 10px;
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.text-ov {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
//change bootstrap default button behaviour on :focus:active 😢
|
||||
.btn {
|
||||
&-primary {
|
||||
&:not(:disabled):not(.disabled) {
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.op1{opacity:0.1;}
|
||||
.op2{opacity:0.2;}
|
||||
.op3{opacity:0.3;}
|
||||
.op4{opacity:0.4;}
|
||||
.op5{opacity:0.5;}
|
||||
.op6{opacity:0.6;}
|
||||
.op7{opacity:0.7;}
|
||||
.op8{opacity:0.8;}
|
||||
.op9{opacity:0.9;}
|
||||
.wspace-no{
|
||||
white-space:nowrap;
|
||||
}
|
||||
// Support ticket btn
|
||||
.support-ticket {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 15px;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.support-ticket-btn {
|
||||
width: 100px;
|
||||
background: #7CB442;
|
||||
animation: 0.7s ease-in-out 0s infinite alternate none running crescendo;
|
||||
border-radius: 50px;
|
||||
color: #fff;
|
||||
font-size: 8px;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px 7px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-shadow: rgba(124, 180, 66, 0.7) 0px 8px 35px 0px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.text-blue { color:$blue ;}
|
||||
.text-indigo{ color:$indigo;}
|
||||
.text-purple{ color:$purple;}
|
||||
.text-pink { color:$pink ;}
|
||||
.text-red { color:$red ;}
|
||||
.text-orange{ color:$orange;}
|
||||
.text-yellow{ color:$yellow;}
|
||||
.text-green { color:$green ;}
|
||||
.text-teal { color:$teal ;}
|
||||
.text-cyan { color:$cyan ;}
|
||||
|
||||
.bg-gray-dark{
|
||||
background:$color_pallate_2 !important;
|
||||
}
|
||||
.bg-purpal{
|
||||
background:$color_pallate_4 !important;
|
||||
}
|
||||
.bg-red{
|
||||
background:$color_pallate_5 !important;
|
||||
}
|
||||
.bg-blue-dark{
|
||||
background:$color_pallate_6 !important;
|
||||
}
|
||||
.bg-blue{
|
||||
background:$color_pallate_7 !important;
|
||||
}
|
||||
.bg-blue-light{
|
||||
background:$color_pallate_8 !important;
|
||||
}
|
||||
.bg-green-light{
|
||||
background:$color_pallate_9 !important;
|
||||
}
|
||||
.bg-green{
|
||||
background:$color_pallate_10 !important;
|
||||
}
|
||||
.bg-black{
|
||||
background:$black;
|
||||
}
|
||||
.text-black{
|
||||
color:$black !important;
|
||||
}
|
||||
.dz-scroll{
|
||||
position:relative;
|
||||
}
|
||||
.h-auto{
|
||||
height:auto !important;
|
||||
}
|
||||
.list-inline li{
|
||||
display:inline-block;
|
||||
}
|
||||
.fs-12{font-size:12px !important; line-height:1.3; }
|
||||
.fs-13{font-size:13px !important; line-height:1.4; }
|
||||
.fs-14{font-size:14px !important; line-height:1.5; }
|
||||
.fs-15{font-size:14px !important; line-height:1.5; }
|
||||
.fs-16{font-size:16px !important; line-height:1.5; }
|
||||
.fs-18{font-size:18px !important; line-height:1.5; }
|
||||
.fs-20{font-size:20px !important; line-height:1.5; }
|
||||
.fs-22{font-size:22px !important; line-height:1.5; }
|
||||
.fs-24{font-size:24px !important; line-height:1.4; }
|
||||
.fs-26{font-size:26px !important; line-height:1.4; }
|
||||
.fs-28{font-size:28px !important; line-height:1.4; }
|
||||
.fs-30{font-size:30px !important; line-height:1.4; }
|
||||
.fs-32{font-size:32px !important; line-height:1.25; }
|
||||
.fs-34{font-size:34px !important; line-height:1.25; }
|
||||
.fs-35{font-size:35px !important; line-height:1.25; }
|
||||
.fs-36{font-size:36px !important; line-height:1.25; }
|
||||
.fs-38{font-size:38px !important; line-height:1.25; }
|
||||
.fs-46{font-size:46px !important; line-height:1.25; }
|
||||
.fs-48{font-size:48px !important; line-height:1.25; }
|
||||
.font-w100{font-weight:100;}
|
||||
.font-w200{font-weight:200;}
|
||||
.font-w300{font-weight:300;}
|
||||
.font-w400{font-weight:400;}
|
||||
.font-w500{font-weight:500;}
|
||||
.font-w600{font-weight:600;}
|
||||
.font-w700{font-weight:700;}
|
||||
.font-w800{font-weight:800;}
|
||||
.font-w900{font-weight:900;}
|
||||
.scale1{
|
||||
transform:scale(1.1);
|
||||
-moz-transform:scale(1.1);
|
||||
-webkit-transform:scale(1.1);
|
||||
-ms-transform:scale(1.1);
|
||||
-o-transform:scale(1.1);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale2{
|
||||
transform:scale(1.2);
|
||||
-moz-transform:scale(1.2);
|
||||
-webkit-transform:scale(1.2);
|
||||
-ms-transform:scale(1.2);
|
||||
-o-transform:scale(1.2);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale3{
|
||||
transform:scale(1.3);
|
||||
-moz-transform:scale(1.3);
|
||||
-webkit-transform:scale(1.3);
|
||||
-ms-transform:scale(1.3);
|
||||
-o-transform:scale(1.3);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale4{
|
||||
transform:scale(1.4);
|
||||
-moz-transform:scale(1.4);
|
||||
-webkit-transform:scale(1.4);
|
||||
-ms-transform:scale(1.4);
|
||||
-o-transform:scale(1.4);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale5{
|
||||
transform:scale(1.5);
|
||||
-moz-transform:scale(1.5);
|
||||
-webkit-transform:scale(1.5);
|
||||
-ms-transform:scale(1.5);
|
||||
-o-transform:scale(1.5);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale-2{
|
||||
transform:scale(2);
|
||||
-moz-transform:scale(2);
|
||||
-webkit-transform:scale(2);
|
||||
-ms-transform:scale(2);
|
||||
-o-transform:scale(2);
|
||||
display:inline-block;
|
||||
}
|
||||
// @keyframes crescendo {
|
||||
// 0% {transform: scale(.8);}
|
||||
// 50% {transform: scale(1);}
|
||||
// }
|
||||
.height10 { height:10px; }
|
||||
.height20 { height:20px; }
|
||||
.height30 { height:30px; }
|
||||
.height40 { height:40px; }
|
||||
.height50 { height:50px; }
|
||||
.height60 { height:60px; }
|
||||
.height70 { height:70px; }
|
||||
.height80 { height:80px; }
|
||||
.height90 { height:90px; }
|
||||
.height100{ height:100px; }
|
||||
.height110 { height:110px; }
|
||||
.height120 { height:120px; }
|
||||
.height130 { height:130px; }
|
||||
.height140 { height:140px; }
|
||||
.height150 { height:150px; }
|
||||
.height160 { height:160px; }
|
||||
.height170 { height:170px; }
|
||||
.height180 { height:180px; }
|
||||
.height190 { height:190px; }
|
||||
.height200{ height:200px; }
|
||||
.height210 { height:210px; }
|
||||
.height220 { height:220px; }
|
||||
.height230 { height:230px; }
|
||||
.height240 { height:240px; }
|
||||
.height250 { height:250px; }
|
||||
.height260 { height:260px; }
|
||||
.height270 { height:270px; }
|
||||
.height280 { height:280px; }
|
||||
.height290 { height:290px; }
|
||||
.height300{ height:300px; }
|
||||
.height310 { height:310px; }
|
||||
.height320 { height:320px; }
|
||||
.height330 { height:330px; }
|
||||
.height340 { height:340px; }
|
||||
.height350 { height:350px; }
|
||||
.height360 { height:360px; }
|
||||
.height370 { height:370px; }
|
||||
.height380 { height:380px; }
|
||||
.height390 { height:390px; }
|
||||
.height400{ height:400px; }
|
||||
.height415{ height:415px; }
|
||||
.height720{ height:720px; }
|
||||
.height750{ height:750px; }
|
||||
.height800{ height:800px; }
|
||||
.width10 { width:10px; }
|
||||
.width20 { width:20px; }
|
||||
.width30 { width:30px; }
|
||||
.width40 { width:40px; }
|
||||
.width50 { width:50px; }
|
||||
.width60 { width:60px; }
|
||||
.width70 { width:70px; }
|
||||
.width80 { width:80px; }
|
||||
.width90 { width:90px; }
|
||||
.width100 { width:100px; }
|
||||
.width110 { width:110px; }
|
||||
.width120 { width:120px; }
|
||||
.width130 { width:130px; }
|
||||
.width140 { width:140px; }
|
||||
.width150 { width:150px; }
|
||||
.width160 { width:160px; }
|
||||
.width170 { width:170px; }
|
||||
.width180 { width:180px; }
|
||||
.width190 { width:190px; }
|
||||
.width200 { width:200px; }
|
||||
.width210 { width:210px; }
|
||||
.width220 { width:220px; }
|
||||
.width230 { width:230px; }
|
||||
.width240 { width:240px; }
|
||||
.width250 { width:250px; }
|
||||
.width260 { width:260px; }
|
||||
.width270 { width:270px; }
|
||||
.width280 { width:280px; }
|
||||
.width290 { width:290px; }
|
||||
.width300 { width:300px; }
|
||||
.width310 { width:310px; }
|
||||
.width320 { width:320px; }
|
||||
.width330 { width:330px; }
|
||||
.width340 { width:340px; }
|
||||
.width350 { width:350px; }
|
||||
.width360 { width:360px; }
|
||||
.width370 { width:370px; }
|
||||
.width380 { width:380px; }
|
||||
.width390 { width:390px; }
|
||||
.width400 { width:400px; }
|
||||
@-webkit-keyframes crescendo {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gXGDoR {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crescendo {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gXGDoR {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.border-2{
|
||||
border-width:2px!important;
|
||||
}
|
||||
9
public/style/scss/components/_components.scss
Normal file
9
public/style/scss/components/_components.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import "./app/apps";
|
||||
@import "./charts/charts";
|
||||
@import "./forms/forms";
|
||||
@import "./map/maps";
|
||||
@import "./uc/addons";
|
||||
@import "./ui/interfaces";
|
||||
@import "./widget/widgets";
|
||||
@import "./tables/table";
|
||||
|
||||
295
public/style/scss/components/app/_app-calender-event.scss
Normal file
295
public/style/scss/components/app/_app-calender-event.scss
Normal file
@ -0,0 +1,295 @@
|
||||
/* =============
|
||||
Calendar
|
||||
============= */
|
||||
|
||||
.app-fullcalender {
|
||||
button {
|
||||
border-radius: 0px;
|
||||
color: $dark;
|
||||
}
|
||||
td{
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
float : left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fc-view {
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
margin-bottom: 0.3125rem;
|
||||
margin-top : 0.9375rem;
|
||||
|
||||
& .fc-left {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.625rem;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .fc-right {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
float: none;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .fc-center {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
* {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-size : 1rem;
|
||||
font-weight : 600;
|
||||
line-height : 1.875rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.fc-toolbar .fc-state-active,
|
||||
.fc-toolbar .ui-state-active,
|
||||
.fc-toolbar .ui-state-hover,
|
||||
.fc-toolbar button:focus,
|
||||
.fc-toolbar button:hover {
|
||||
z-index: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fc-widget-header {
|
||||
border: 1px solid $border;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .fc-widget-content {
|
||||
// border: 1px solid #E5E5E5 !important;
|
||||
// }
|
||||
|
||||
.fc th.fc-widget-header {
|
||||
background : $border!important;
|
||||
font-size : 0.875rem;
|
||||
line-height : 1.25rem;
|
||||
padding : 0.625rem 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
border : 1px solid $border;
|
||||
text-transform: capitalize;
|
||||
&.active{
|
||||
box-shadow: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-text-arrow {
|
||||
font-family: inherit;
|
||||
font-size : 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fc-event {
|
||||
border-radius: 0.125rem;
|
||||
border : none;
|
||||
cursor : move;
|
||||
font-size : 0.8125rem;
|
||||
margin : 0.3125rem 0.4375rem;
|
||||
padding : 0.3125rem;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.external-event {
|
||||
cursor : move;
|
||||
margin : 0.625rem 0;
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.fc-basic-view td.fc-week-number span {
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-basic-view td.fc-day-number {
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
|
||||
#drop-remove {
|
||||
margin-right: 8px;
|
||||
top : 0.1875rem;
|
||||
}
|
||||
|
||||
#add-category,
|
||||
#event-modal {
|
||||
|
||||
.modal-dialog {
|
||||
max-width: 37.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content {
|
||||
color: $white;
|
||||
}
|
||||
// .fc-widget-content {
|
||||
// border: 1px solid $l-border!important;
|
||||
// }
|
||||
.fc th.fc-widget-header {
|
||||
// background: $l-border!important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.fc-button {
|
||||
background: $white;
|
||||
// color: $l-ctl;
|
||||
}
|
||||
.fc-state-hover {
|
||||
background: $white!important;
|
||||
}
|
||||
.fc-state-highlight {
|
||||
background: $l-bg!important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
.fc-cell-overlay {
|
||||
background: $white!important;
|
||||
}
|
||||
.fc-unthemed .fc-today {
|
||||
background: $l-bg!important;
|
||||
}
|
||||
|
||||
.fc-day-top{
|
||||
color: $dark !important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
|
||||
.external-event {
|
||||
color: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
.fc-basic-view .fc-body .fc-row {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.fc-scroller.fc-day-grid-container {
|
||||
height: 490px !important;
|
||||
}
|
||||
|
||||
.fc-row.fc-week.fc-widget-content.fc-rigid {
|
||||
height: 81px !important;
|
||||
}
|
||||
|
||||
.email_left_pane {
|
||||
@include custommq($max: 1440px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#external-events{
|
||||
|
||||
.external-event:before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
margin-right: .9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
[data-class="bg-primary"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
&::before{
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
[data-class="bg-success"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $success;
|
||||
}
|
||||
}
|
||||
[data-class="bg-warning"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $warning;
|
||||
}
|
||||
}
|
||||
[data-class="bg-dark"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $dark;
|
||||
}
|
||||
}
|
||||
[data-class="bg-danger"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $danger;
|
||||
}
|
||||
}
|
||||
[data-class="bg-info"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $info;
|
||||
}
|
||||
}
|
||||
[data-class="bg-pink"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fc .fc-row .fc-content-skeleton table,
|
||||
.fc .fc-row .fc-content-skeleton td,
|
||||
.fc .fc-row .fc-helper-skeleton td {
|
||||
border-color: $border;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
6
public/style/scss/components/app/_apps.scss
Normal file
6
public/style/scss/components/app/_apps.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import "./app-calender-date";
|
||||
@import "./app-calender-event";
|
||||
@import "./email";
|
||||
// @import "./invoice";
|
||||
@import "./profile";
|
||||
@import "./chat";
|
||||
234
public/style/scss/components/app/_chat.scss
Normal file
234
public/style/scss/components/app/_chat.scss
Normal file
@ -0,0 +1,234 @@
|
||||
|
||||
.event-chat-ryt{
|
||||
|
||||
.chat-area{
|
||||
.chat-reciver,
|
||||
.chat-sender {
|
||||
margin-bottom: 1.875rem;
|
||||
padding: 0;
|
||||
img{
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
|
||||
&-body {
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
// max-width: 60%;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
top: 103%;
|
||||
position: relative;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-reciver{
|
||||
padding: .5rem 1rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.media {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
.media-body {
|
||||
margin-right: 2rem;
|
||||
text-align: right;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
text-align: left;
|
||||
margin-left: 2rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
background: $white;
|
||||
margin-bottom: 0;
|
||||
border-radius: 5px 5px 0 5px;
|
||||
|
||||
span {
|
||||
text-align: left;
|
||||
border: 1px solid $border;
|
||||
|
||||
&::after{
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $border;
|
||||
border-right: 1px solid $border;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $white;
|
||||
-webkit-transform: rotate(-45deg) translateX(15px);
|
||||
transform: rotate(-45deg) translateX(15px);
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
left: 0;
|
||||
right: auto;
|
||||
-webkit-transform: rotate(135deg) translateY(15px);
|
||||
transform: rotate(135deg) translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
color: $body-color;
|
||||
font-weight: 400;
|
||||
bottom: 0;
|
||||
left: -80px;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
right: -5rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-sender{
|
||||
text-align: left;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
.media {
|
||||
|
||||
.media-body {
|
||||
margin-left: 2rem;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
text-align: right;
|
||||
margin-right: 2rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
background-color: $white;
|
||||
margin-bottom: 0;
|
||||
span {
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $border;
|
||||
border-left: 1px solid $border;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: $white;
|
||||
-webkit-transform: rotate(45deg) translateX(-15px);
|
||||
transform: rotate(45deg) translateX(-15px);
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
-webkit-transform: rotate(-135deg) translateY(15px);
|
||||
transform: rotate(-135deg) translateY(15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
color: $body-color;
|
||||
font-weight: 400;
|
||||
bottom: 0;
|
||||
right: -5rem;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
left: -5rem;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.char-type{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
form{
|
||||
|
||||
.form-control{
|
||||
height: 45px;
|
||||
// border-radius: 30px;
|
||||
padding-left: 18px;
|
||||
background: $body-bg;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.input-group{
|
||||
|
||||
&-append{
|
||||
i{
|
||||
color: $gray;
|
||||
font-size: 18px;
|
||||
}
|
||||
.input-group-text{
|
||||
padding-left: .7rem;
|
||||
padding-right: .7rem;
|
||||
background: $body-bg;
|
||||
border-color: $border;
|
||||
border-left: 0;
|
||||
|
||||
&:last-child{
|
||||
// border-top-right-radius: 30px;
|
||||
// border-bottom-right-radius: 30px;
|
||||
padding-right: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-avatar{
|
||||
padding: 25px 0;
|
||||
border-bottom: 1px solid $border;
|
||||
&:last-child{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.avatar-status{
|
||||
position: relative;
|
||||
i{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
533
public/style/scss/components/app/_email.scss
Normal file
533
public/style/scss/components/app/_email.scss
Normal file
@ -0,0 +1,533 @@
|
||||
.email-left-box {
|
||||
width: 15rem;
|
||||
float: left;
|
||||
padding: 0 1.25rem 1.25rem 1rem;
|
||||
// border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
width: 100%;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 100%;
|
||||
float: none;
|
||||
border: none;
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
|
||||
// &.generic-width{
|
||||
// @media screen and (min-width: 649px) and (max-width: 1700px){
|
||||
// width: 15rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
.intro-title{
|
||||
background: rgba($primary, .1);
|
||||
padding: 1rem;
|
||||
margin: 1.875rem 0 1.25rem 0;
|
||||
|
||||
h5{
|
||||
margin-bottom: 0;
|
||||
color: #6a707e;
|
||||
font-size: 14px;
|
||||
|
||||
i{
|
||||
font-size: 0.75rem;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
// font-size: 1.0625rem;
|
||||
color: $primary;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-right-box {
|
||||
// padding-top: 1.875rem;
|
||||
padding-left: 15rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
padding-left: 0;
|
||||
margin-left: 0!important;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// &.generic-position{
|
||||
// padding-left: 15rem;
|
||||
|
||||
// @media(min-width: 1700px){
|
||||
// padding-left: 18.75rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
.right-box-border{
|
||||
border-right: 2px solid rgba($primary, .1);
|
||||
}
|
||||
|
||||
.right-box-padding{
|
||||
|
||||
@media screen and (min-width: 649px) and (max-width: 1200px){
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-left: 0.9375rem;
|
||||
}
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
.btn-group {
|
||||
.btn {
|
||||
// background: $dark;
|
||||
border: 0;
|
||||
// color: $white;
|
||||
// i {
|
||||
// color: $white!important;
|
||||
// }
|
||||
}
|
||||
input{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.read-content {
|
||||
textarea {
|
||||
height:150px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
&-email{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
h5{
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
p{
|
||||
|
||||
strong{
|
||||
color: #6a707e;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
|
||||
p{
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-attachment{
|
||||
padding: 0.5rem 0;
|
||||
|
||||
h6{
|
||||
font-size: 1.125rem;
|
||||
color: #6a707e;
|
||||
|
||||
i{
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment{
|
||||
|
||||
& > div:not(:last-child){
|
||||
border-right: 1px solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-content {
|
||||
.wysihtml5-toolbar {
|
||||
border-color: $l-border;
|
||||
}
|
||||
// .textarea_editor {
|
||||
// background: $l-bg!important;
|
||||
// }
|
||||
.dropzone {
|
||||
background: $l-bg!important;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: 1.0625rem;
|
||||
color: #6a707e;
|
||||
|
||||
i{
|
||||
font-size: 1.125rem;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone{
|
||||
border: 1px dashed #DDDFE1;
|
||||
min-height: 13.125rem;
|
||||
position: relative;
|
||||
|
||||
.dz-message{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-list {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 3.125rem;
|
||||
line-height: 3.125rem;
|
||||
cursor: default;
|
||||
transition-duration: 0.3s;
|
||||
a {
|
||||
color: $l-ctl;
|
||||
}
|
||||
|
||||
&-single{
|
||||
.custom-checkbox{
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
i{
|
||||
color: $muted;
|
||||
font-size: 1.125rem;
|
||||
padding-left: .4rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
transition-duration: 0.05s;
|
||||
background: rgba(152, 166, 173, 0.15);
|
||||
}
|
||||
|
||||
.col-mail {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-mail-1 {
|
||||
width: 5.625rem;
|
||||
|
||||
.star-toggle {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 1.125rem;
|
||||
font-size: 1rem;
|
||||
margin-left: 0.3125rem;
|
||||
}
|
||||
|
||||
.email-checkbox {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0.9375rem 0.625rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: block;
|
||||
float: left;
|
||||
border: .4rem solid transparent;
|
||||
border-radius: 6.25rem;
|
||||
margin: 1.375rem 1.625rem 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col-mail-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5.625rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.subject {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 5.5rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
// width: 4rem;
|
||||
// padding-left: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-checkbox {
|
||||
cursor: pointer;
|
||||
height: 0.9375rem;
|
||||
width: 0.9375rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: .1rem;
|
||||
position: relative;
|
||||
top: 0.3125rem;
|
||||
box-shadow: inset 0 0 0 .1rem $l-ctl;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked {
|
||||
label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: .3rem;
|
||||
left: .3rem;
|
||||
right: .3rem;
|
||||
bottom: .3rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
margin-bottom: 0 !important;
|
||||
transition-duration: 0.05s;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-list {
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
padding: 0.625rem 0.9375rem;
|
||||
display: block;
|
||||
background: transparent;
|
||||
color: $l-ctd;
|
||||
// font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.list-group-item{
|
||||
color: #6a707e;
|
||||
padding: 0.75rem 1.0625rem;
|
||||
|
||||
i{
|
||||
font-size: 1rem;
|
||||
padding-right: 0.625rem;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: $white;
|
||||
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-wrap{
|
||||
padding: 1.0625rem 1.875rem;
|
||||
|
||||
.media{
|
||||
|
||||
.media-body{
|
||||
|
||||
h6{
|
||||
font-size: 1.0625rem;
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-filter{
|
||||
|
||||
@media (min-width: 648px){
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-left: 1.875rem;
|
||||
}
|
||||
|
||||
.input-group{
|
||||
|
||||
&-prepend{
|
||||
|
||||
i{
|
||||
font-size: 0.875rem;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.input-group-text{
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDDFE1 !important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
padding: 0 0 0 0.3125rem;
|
||||
border: 0;
|
||||
font-size: 0.875rem;
|
||||
height: 1.875rem;
|
||||
color: $muted;
|
||||
border-bottom: 1px solid #DDDFE1;
|
||||
|
||||
&::placeholder{
|
||||
font-size: 0.875rem;
|
||||
color: $muted;
|
||||
}
|
||||
}
|
||||
|
||||
& > .form-control{
|
||||
min-height: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-mail{
|
||||
display: block;
|
||||
padding: 1.5625rem 0;
|
||||
|
||||
.media{
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-left: 1.875rem;
|
||||
padding-right: 1.875rem;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.9375rem;
|
||||
|
||||
@media(min-width: 1700px){
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
|
||||
h6{
|
||||
color: #abafb3;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
color: #6a707e;
|
||||
|
||||
button{
|
||||
|
||||
i{
|
||||
font-size: 1.125rem;
|
||||
color: #abafb3;
|
||||
font-weight: bold;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 0.875rem;
|
||||
color: #abafb3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
background: $primary;
|
||||
|
||||
h6,h4,p,i{
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.email-right-box {
|
||||
padding-left: 1rem;
|
||||
padding-right: 15rem;
|
||||
@include respond('tab-port') {
|
||||
padding-left: 1rem;
|
||||
padding-right: 12rem;
|
||||
}
|
||||
@include respond('phone') {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.email-left-box{
|
||||
float:right;
|
||||
}
|
||||
.email-list .message .col-mail-2{
|
||||
right: 5.625rem;
|
||||
left: 0;
|
||||
float: right;
|
||||
.date{
|
||||
right:auto;
|
||||
left:0;
|
||||
}
|
||||
.subject{
|
||||
right: 0;
|
||||
left: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
0
public/style/scss/components/app/_invoice.scss
Normal file
0
public/style/scss/components/app/_invoice.scss
Normal file
185
public/style/scss/components/app/_profile.scss
Normal file
185
public/style/scss/components/app/_profile.scss
Normal file
@ -0,0 +1,185 @@
|
||||
.photo-content{
|
||||
position: relative;
|
||||
.cover-photo{
|
||||
background: url(../images/profile/cover.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 250px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.profile .profile-photo {
|
||||
max-width: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -40px;
|
||||
margin-right: 10px;
|
||||
|
||||
@include respond('tab-land') {
|
||||
|
||||
}
|
||||
@include respond('phone') {
|
||||
width: 80px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.profile .photo-content .profile-photo {
|
||||
left: auto;
|
||||
right: 50px;
|
||||
}
|
||||
.profile .profile-photo {
|
||||
left:auto;
|
||||
right: 30px;
|
||||
@include respond('tab-land') {
|
||||
right: 15px;
|
||||
}
|
||||
@include respond('phone') {
|
||||
width: 80px;
|
||||
right: calc(50% - 40px);
|
||||
top: -100px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-info{
|
||||
padding: 15px 20px;
|
||||
// margin-bottom: 30px;
|
||||
@include respond('phone') {
|
||||
padding: 0 0 20px;
|
||||
text-align:center;
|
||||
}
|
||||
h4 {
|
||||
color: $l-ctd!important;
|
||||
}
|
||||
|
||||
h4.text-primary {
|
||||
color: $primary!important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $l-ctl;
|
||||
}
|
||||
|
||||
.prf-col{
|
||||
min-width: 250px;
|
||||
padding: 10px 50px 0;
|
||||
}
|
||||
}
|
||||
.profile-interest{
|
||||
.row{
|
||||
margin: 0 -.70px;
|
||||
.int-col{
|
||||
padding: 0 .70px;
|
||||
.interest-cat{
|
||||
margin-bottom: 1.40px;
|
||||
position: relative;
|
||||
display: block;
|
||||
&:after{
|
||||
background: $black;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
img{
|
||||
// margin-bottom: 1.20px;
|
||||
}
|
||||
p{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
color:white;
|
||||
font-size: 1.20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-tab{
|
||||
.nav-item{
|
||||
.nav-link{
|
||||
font-size: 16px;
|
||||
margin-right: 30px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
border: none;
|
||||
border-bottom: .20px solid transparent;
|
||||
color: $l-ctl;
|
||||
&:hover, &.active{
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
border-bottom: .20px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.profile-info{
|
||||
display:flex;
|
||||
@include respond('phone') {
|
||||
display:block;
|
||||
}
|
||||
.profile-details {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@include respond('phone') {
|
||||
display:block;
|
||||
.dropdown{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-input{
|
||||
margin-bottom: 30px;
|
||||
.form-control{
|
||||
height: 75px;
|
||||
font-weight: 400;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
}
|
||||
.profile-uoloaded-post{
|
||||
|
||||
.post-title{
|
||||
h3{
|
||||
font-size: 24px;
|
||||
@include respond ('phone'){
|
||||
font-size:18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a{
|
||||
h4{
|
||||
margin-bottom: 10px;
|
||||
color: $l-ctd;
|
||||
}
|
||||
}
|
||||
}
|
||||
207
public/style/scss/components/charts/_chart-amchart.scss
Normal file
207
public/style/scss/components/charts/_chart-amchart.scss
Normal file
@ -0,0 +1,207 @@
|
||||
#revenue-chart {
|
||||
height: 27.7rem;
|
||||
}
|
||||
|
||||
// #finance_graph, #revenue_graph {
|
||||
// height: 29.625rem;
|
||||
// }
|
||||
|
||||
#duration-value-axis {
|
||||
height: 27.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#combined-bullet {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#zoomable-chart {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#chartMap {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#professional-candlesticks {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#comparing-stock-indices {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#multiple-panel-data {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#depth-chart {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
// #btc1 {
|
||||
// width: 100%;
|
||||
// height: 31.25rem;
|
||||
|
||||
// @include respond('phone') {
|
||||
// margin-bottom: 5.625rem;
|
||||
// padding-bottom: 2.5rem;
|
||||
// height: 25rem;
|
||||
|
||||
// fieldset {
|
||||
|
||||
// div {
|
||||
// display: block !important;
|
||||
// margin-bottom: 0.625rem;
|
||||
|
||||
// input {
|
||||
// display: block;
|
||||
// margin-bottom: 0.3125rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// div:last-child {
|
||||
// float: none !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.amcharts-export-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.amcharts-data-set-selector-div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
width: 16.875rem;
|
||||
margin: 0 auto;
|
||||
select {
|
||||
border: 0;
|
||||
margin-left: 0.625rem;
|
||||
background: #ddd;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.amChartsInputField {
|
||||
border: 0;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
padding: 0.3125rem 0.9375rem;
|
||||
margin: 0 0.9375rem;
|
||||
}
|
||||
|
||||
.amcharts-data-set-select {
|
||||
border: 0;
|
||||
background: #ddd;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.amcharts-period-input,
|
||||
.amcharts-period-input-selected {
|
||||
border: 0;
|
||||
margin-left: 0.625rem;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
padding: 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// CSS Animation
|
||||
///////////////////
|
||||
.amcharts-graph-g2 .amcharts-graph-stroke {
|
||||
stroke-dasharray: 3px 3px;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
-webkit-animation: am-moving-dashes 1s linear infinite;
|
||||
animation: am-moving-dashes 1s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-moving-dashes {
|
||||
100% {
|
||||
stroke-dashoffset: -1.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-moving-dashes {
|
||||
100% {
|
||||
stroke-dashoffset: -1.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lastBullet {
|
||||
-webkit-animation: am-pulsating 1s ease-out infinite;
|
||||
animation: am-pulsating 1s ease-out infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-pulsating {
|
||||
0% {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
stroke-width: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-pulsating {
|
||||
0% {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
stroke-width: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.amcharts-graph-column-front {
|
||||
-webkit-transition: all .3s .3s ease-out;
|
||||
transition: all .3s .3s ease-out;
|
||||
}
|
||||
|
||||
.amcharts-graph-column-front:hover {
|
||||
fill: #496375;
|
||||
stroke: #496375;
|
||||
-webkit-transition: all .3s ease-out;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-draw {
|
||||
0% {
|
||||
stroke-dashoffset: 500%;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-draw {
|
||||
0% {
|
||||
stroke-dashoffset: 500%;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.amChartsPeriodSelector {
|
||||
&>fieldset>div {
|
||||
@include respond('tab-port') {
|
||||
float: none !important;
|
||||
display: block !important;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/style/scss/components/charts/_chart-c3.scss
Normal file
13
public/style/scss/components/charts/_chart-c3.scss
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
.c3{
|
||||
height: 250px;
|
||||
}
|
||||
.c3-legend-item {
|
||||
fill: #9fabb1;
|
||||
}
|
||||
|
||||
.c3 .c3-axis-x path,
|
||||
.c3 .c3-axis-x line,
|
||||
.c3 .c3-axis-y path,
|
||||
.c3 .c3-axis-y line,
|
||||
.tick text { stroke: $white; }
|
||||
127
public/style/scss/components/charts/_chart-chartist.scss
Normal file
127
public/style/scss/components/charts/_chart-chartist.scss
Normal file
@ -0,0 +1,127 @@
|
||||
|
||||
|
||||
|
||||
.ct-golden-section:before {
|
||||
float: none;
|
||||
}
|
||||
.ct-chart {
|
||||
max-height: 15.7rem;
|
||||
}
|
||||
.ct-chart .ct-label {
|
||||
fill: #a3afb7;
|
||||
color: #a3afb7;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.ct-grid {
|
||||
stroke: rgba(49, 58, 70, 0.1);
|
||||
}
|
||||
.ct-chart.simple-pie-chart-chartist .ct-label {
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-a .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-a .ct-line,
|
||||
.ct-chart .ct-series.ct-series-a .ct-point,
|
||||
.ct-chart .ct-series.ct-series-a .ct-slice-donut {
|
||||
stroke: $primary;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-b .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-b .ct-line,
|
||||
.ct-chart .ct-series.ct-series-b .ct-point,
|
||||
.ct-chart .ct-series.ct-series-b .ct-slice-donut {
|
||||
stroke: $success;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-c .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-c .ct-line,
|
||||
.ct-chart .ct-series.ct-series-c .ct-point,
|
||||
.ct-chart .ct-series.ct-series-c .ct-slice-donut {
|
||||
stroke: $warning;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-d .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-d .ct-line,
|
||||
.ct-chart .ct-series.ct-series-d .ct-point,
|
||||
.ct-chart .ct-series.ct-series-d .ct-slice-donut {
|
||||
stroke: $danger;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-e .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-e .ct-line,
|
||||
.ct-chart .ct-series.ct-series-e .ct-point,
|
||||
.ct-chart .ct-series.ct-series-e .ct-slice-donut {
|
||||
stroke: $info;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-f .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-f .ct-line,
|
||||
.ct-chart .ct-series.ct-series-f .ct-point,
|
||||
.ct-chart .ct-series.ct-series-f .ct-slice-donut {
|
||||
stroke: $dark;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-g .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-g .ct-line,
|
||||
.ct-chart .ct-series.ct-series-g .ct-point,
|
||||
.ct-chart .ct-series.ct-series-g .ct-slice-donut {
|
||||
stroke: #8d6e63;
|
||||
}
|
||||
.ct-series-a .ct-area,
|
||||
.ct-series-a .ct-slice-pie {
|
||||
fill: $secondary;
|
||||
}
|
||||
.ct-series-b .ct-area,
|
||||
.ct-series-b .ct-slice-pie {
|
||||
fill: #00A2FF;
|
||||
}
|
||||
.ct-series-c .ct-area,
|
||||
.ct-series-c .ct-slice-pie {
|
||||
fill: #ff9800;
|
||||
}
|
||||
.ct-series-d .ct-area,
|
||||
.ct-series-d .ct-slice-pie {
|
||||
fill: #ff9800;
|
||||
}
|
||||
.chartist-tooltip {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
min-width: 0.625rem;
|
||||
padding: 2px 0.625rem;
|
||||
border-radius: 3px;
|
||||
background: #313a46;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
-webkit-transition: opacity .2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
-o-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
}
|
||||
.chartist-tooltip.tooltip-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#donught_graph {
|
||||
.ct-series.ct-series-a .ct-slice-donut {
|
||||
stroke: #3FC6D4;
|
||||
}
|
||||
|
||||
.ct-series.ct-series-b .ct-slice-donut {
|
||||
stroke: #333333;
|
||||
}
|
||||
|
||||
.ct-series.ct-series-c .ct-slice-donut {
|
||||
stroke: #F63465;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#pie-chart .ct-label{
|
||||
@include respond ('phone-land'){
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
93
public/style/scss/components/charts/_chart-chartjs.scss
Normal file
93
public/style/scss/components/charts/_chart-chartjs.scss
Normal file
@ -0,0 +1,93 @@
|
||||
|
||||
#visitor_graph {
|
||||
height: 253px !important;
|
||||
}
|
||||
|
||||
#user_rating_graph {
|
||||
height: 280px !important;
|
||||
}
|
||||
|
||||
#radar_chart,
|
||||
#pie_chart,
|
||||
#doughnut_chart,
|
||||
#polar_chart {
|
||||
// height: 10.875rem!important;
|
||||
}
|
||||
#visitorOnline{
|
||||
height: 72px !important;
|
||||
}
|
||||
#trendMeter{
|
||||
height: 72px !important;
|
||||
}
|
||||
#widget-revenue1,
|
||||
#widget-revenue2,
|
||||
#widget-revenue3{
|
||||
height: 117px !important;
|
||||
}
|
||||
#widget-profit1,
|
||||
#widget-profit2,
|
||||
#widget-profit3{
|
||||
height: 160px !important;
|
||||
}
|
||||
|
||||
#comparison-rate{
|
||||
height: 230px!important;
|
||||
}
|
||||
#session_day{
|
||||
height: 175px!important;
|
||||
width: auto!important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#walet-status {
|
||||
height: 140px!important;
|
||||
}
|
||||
#bar1 {
|
||||
height: 150px!important;
|
||||
}
|
||||
#sold-product {
|
||||
height: 230px!important;
|
||||
}
|
||||
|
||||
|
||||
#chart-venue-expenses,
|
||||
#chart-online-sale,
|
||||
#chart-gross-sale{
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
|
||||
#areaChart_3{
|
||||
height: 295px !important;
|
||||
}
|
||||
.chart-point{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
|
||||
.check-point-area{
|
||||
width:100px;
|
||||
height: 100px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.chart-point-list{
|
||||
margin:0;
|
||||
padding-left: 5px;
|
||||
|
||||
li{
|
||||
list-style:none;
|
||||
font-size: 13px;
|
||||
padding: 2px 0;
|
||||
|
||||
i{
|
||||
margin-right: 5px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
36
public/style/scss/components/charts/_chart-flot.scss
Normal file
36
public/style/scss/components/charts/_chart-flot.scss
Normal file
@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
.flot-chart{
|
||||
height: 15.7rem;
|
||||
}
|
||||
|
||||
.tooltipflot {
|
||||
background-color: transparent;
|
||||
font-size: 1.4rem;
|
||||
padding: .5rem 1rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: .2rem; }
|
||||
|
||||
.legendColorBox > div {
|
||||
border: 0 !important;
|
||||
padding: 0 !important; }
|
||||
|
||||
.legendLabel {
|
||||
font-size: 0.825rem;
|
||||
padding-left: .5rem;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.flotTip {
|
||||
background: $black;
|
||||
border: 1px solid $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.legend > div{
|
||||
background: transparent!important;
|
||||
}
|
||||
|
||||
#balance_graph {
|
||||
height: 260px;
|
||||
}
|
||||
11
public/style/scss/components/charts/_chart-highcharts.scss
Normal file
11
public/style/scss/components/charts/_chart-highcharts.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.highcharts-root {
|
||||
text {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.highcharts-credits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
58
public/style/scss/components/charts/_chart-morris.scss
Normal file
58
public/style/scss/components/charts/_chart-morris.scss
Normal file
@ -0,0 +1,58 @@
|
||||
.morris-hover {
|
||||
position: absolute;
|
||||
z-index : 1;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.morris-hover .morris-hover-point {
|
||||
color: $white !important;
|
||||
margin: 3px 0;
|
||||
text-align: center;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.morris-hover .morris-hover-row-label {
|
||||
background-color: $dark;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.morris-hover.morris-default-style {
|
||||
border-radius: 5px;
|
||||
padding : 0;
|
||||
margin: 0;
|
||||
border : none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
svg text {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
|
||||
#morris_donught,
|
||||
#morris_donught_2,
|
||||
#line_chart_2,
|
||||
#morris_bar,
|
||||
#morris_bar_stalked,
|
||||
#morris_bar_2,
|
||||
#morris_area_2,
|
||||
#morris_area {
|
||||
height: 240px !important;
|
||||
}
|
||||
|
||||
#morris_line {
|
||||
height: 278px !important;
|
||||
}
|
||||
|
||||
|
||||
#crypto-btc-card,
|
||||
#crypto-eth-card,
|
||||
#crypto-rpl-card,
|
||||
#crypto-ltc-card {
|
||||
height: 9.375rem;
|
||||
}
|
||||
|
||||
|
||||
25
public/style/scss/components/charts/_chart-sparkline.scss
Normal file
25
public/style/scss/components/charts/_chart-sparkline.scss
Normal file
@ -0,0 +1,25 @@
|
||||
#daily-sales, #comparison-rate, #usage-chart, #walet-status {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
canvas {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sparkline-composite-chart,
|
||||
#composite-bar,
|
||||
#sparkline11,
|
||||
#StackedBarChart,
|
||||
#spark-bar,
|
||||
#tristate {
|
||||
canvas {
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sparkline11 canvas {
|
||||
width: 100px !important;
|
||||
}
|
||||
10
public/style/scss/components/charts/_charts.scss
Normal file
10
public/style/scss/components/charts/_charts.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "./chart-chartist";
|
||||
@import "./chart-chartjs";
|
||||
@import "./chart-c3";
|
||||
@import "./chart-flot";
|
||||
@import "./chart-morris";
|
||||
@import "./chart-sparkline";
|
||||
@import "./easy-pie-chart";
|
||||
@import "./chart-amchart";
|
||||
@import "./chart-highcharts";
|
||||
@import "./echarts";
|
||||
23
public/style/scss/components/charts/_easy-pie-chart.scss
Normal file
23
public/style/scss/components/charts/_easy-pie-chart.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.easy-pie-chart {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
4
public/style/scss/components/charts/_echarts.scss
Normal file
4
public/style/scss/components/charts/_echarts.scss
Normal file
@ -0,0 +1,4 @@
|
||||
#chart_employee_gender, #chart_employee_status {
|
||||
width: auto;
|
||||
height: 350px;
|
||||
}
|
||||
46
public/style/scss/components/forms/_form-addons-cropper.scss
Normal file
46
public/style/scss/components/forms/_form-addons-cropper.scss
Normal file
@ -0,0 +1,46 @@
|
||||
#image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.docs-options {
|
||||
.dropdown-menu {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-preview {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.img-preview {
|
||||
float: left;
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
overflow: hidden;
|
||||
max-width: 100% !important;
|
||||
|
||||
&>img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&.preview-lg {
|
||||
width: 16rem;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
&.preview-md {
|
||||
width: 8rem;
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
&.preview-sm {
|
||||
width: 4rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
&.preview-xs {
|
||||
width: 2rem;
|
||||
height: 1.125rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
public/style/scss/components/forms/_form-addons-select2.scss
Normal file
100
public/style/scss/components/forms/_form-addons-select2.scss
Normal file
@ -0,0 +1,100 @@
|
||||
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
border-radius: $radius;
|
||||
border: 1px solid $light;
|
||||
height: 40px;
|
||||
background: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
|
||||
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 40px;
|
||||
color:$body-color;
|
||||
padding-left: 15px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border-color: $border;
|
||||
border-radius: 0;
|
||||
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||
border-color: $border;
|
||||
background: $white;
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
top: 6px;
|
||||
right: 15px;
|
||||
}
|
||||
.select2-container .select2-selection--multiple{
|
||||
min-height: 40px;
|
||||
color:$body-color;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.select2-search--dropdown .select2-search__field{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$dark-card;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.select2-dropdown{
|
||||
border-color: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.swal2-popup .swal2-content{
|
||||
color:$body-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
|
||||
|
||||
.tagsinput {
|
||||
overflow-y : auto;
|
||||
display : block;
|
||||
width : 100%;
|
||||
height : 3.4rem;
|
||||
padding : .6rem 1.2rem;
|
||||
font-size : 1.4rem;
|
||||
line-height : 1.42857143;
|
||||
background-image : none;
|
||||
-webkit-border-radius: .4rem;
|
||||
border-radius : .4rem;
|
||||
|
||||
span.tag {
|
||||
display : block;
|
||||
float : left;
|
||||
padding : .3rem .8rem;
|
||||
text-decoration : none;
|
||||
margin-right : .5rem;
|
||||
margin-bottom : .5rem;
|
||||
font-size : 1.3rem;
|
||||
-webkit-border-radius: .3rem;
|
||||
border-radius : .3rem;
|
||||
|
||||
a {
|
||||
font-weight : bold;
|
||||
text-decoration: none;
|
||||
font-size : 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width : 8rem;
|
||||
margin : 0;
|
||||
font-size : 1.3rem;
|
||||
border : 1px solid transparent;
|
||||
padding : .5rem;
|
||||
background : transparent;
|
||||
outline : 0;
|
||||
margin-right : .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
float : left;
|
||||
}
|
||||
}
|
||||
|
||||
.tags_clear {
|
||||
clear : both;
|
||||
width : 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.not_valid {
|
||||
background: #FBD8DB !important;
|
||||
color : #90111A !important;
|
||||
}
|
||||
223
public/style/scss/components/forms/_form-basic.scss
Normal file
223
public/style/scss/components/forms/_form-basic.scss
Normal file
@ -0,0 +1,223 @@
|
||||
|
||||
// Basic Input
|
||||
|
||||
.form-control{
|
||||
border-radius: $radius;
|
||||
background: $white;
|
||||
border: 1px solid $border;
|
||||
// height: 45px;
|
||||
color: $dark;
|
||||
height: 56px;
|
||||
@include respond('laptop') {
|
||||
height: 41px;
|
||||
}
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
background: $white;
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-rounded {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
|
||||
// Input Color
|
||||
[data-theme-version="light"],
|
||||
[data-theme-version="dark"] {
|
||||
.input-primary{
|
||||
.form-control{
|
||||
border-color:$primary;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$primary;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-danger{
|
||||
.form-control{
|
||||
border-color:$danger;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$danger;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-info{
|
||||
.form-control{
|
||||
border-color:$info;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$info;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-success{
|
||||
.form-control{
|
||||
border-color:$success;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$success;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-warning{
|
||||
.form-control{
|
||||
border-color:$warning;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$warning;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Input Outline
|
||||
[data-theme-version="light"],
|
||||
[data-theme-version="dark"] {
|
||||
.input-primary-o{
|
||||
.form-control{
|
||||
border-color:$primary;
|
||||
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$primary;
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
.input-danger-o{
|
||||
.form-control{
|
||||
border-color:$danger;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$danger;
|
||||
color:$danger;
|
||||
}
|
||||
}
|
||||
.input-info-o{
|
||||
.form-control{
|
||||
border-color:$info;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$info;
|
||||
color:$info;
|
||||
}
|
||||
}
|
||||
.input-success-o{
|
||||
.form-control{
|
||||
border-color:$success;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$success;
|
||||
color:$success;
|
||||
}
|
||||
}
|
||||
.input-warning-o{
|
||||
.form-control{
|
||||
border-color:$warning;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$warning;
|
||||
color:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input Size/
|
||||
// .form-control{
|
||||
// min-height: 40px;
|
||||
// }
|
||||
// .form-control-sm{
|
||||
// min-height: 36px;
|
||||
// }
|
||||
// .form-control-lg{
|
||||
// min-height: 52px;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// Input Group
|
||||
.input-group-text{
|
||||
background: #d7dae3;
|
||||
border: 1px solid transparent;
|
||||
min-width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.532rem 0.75rem;
|
||||
border-radius: $radius;
|
||||
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.custom-file-label{
|
||||
height: 40px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-group-prepend .btn,
|
||||
.input-group-append .btn {
|
||||
z-index: 0;
|
||||
}
|
||||
.custom-select{
|
||||
background: none;
|
||||
// height: 45px;
|
||||
border-color: $border;
|
||||
color: $dark;
|
||||
// border-radius: 0px!important;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
border-color: $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.custom-file-label{
|
||||
// height: 45px;
|
||||
// border-radius: 0px!important;
|
||||
|
||||
&:after{
|
||||
background: #656C73;
|
||||
border: 1px solid $border;
|
||||
color: $white;
|
||||
border-radius: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-border;
|
||||
border-color: $d-border;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom_file_input {
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
// height: 45px;
|
||||
}
|
||||
|
||||
.custom-file-label::after {
|
||||
height: 100%;
|
||||
// line-height: 2.4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.custom-file-label{
|
||||
background: $white;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
266
public/style/scss/components/forms/_form-checkbox.scss
Normal file
266
public/style/scss/components/forms/_form-checkbox.scss
Normal file
@ -0,0 +1,266 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
input[type="checkbox"] {
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0px;
|
||||
margin-left: -1px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background: #d4d7da;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&:checked:after{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
content: "\f00c";
|
||||
font-family: 'FontAwesome';
|
||||
color: $white;
|
||||
font-weight: 100;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
.form-check-label{
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
|
||||
.form-check-inline {
|
||||
.form-check-input {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
.custom-control-label{
|
||||
&:before,
|
||||
&:after{
|
||||
top:2px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.rtl .custom-control-label{
|
||||
&:before,
|
||||
&:after{
|
||||
right: -1.5rem !important;
|
||||
left: inherit;
|
||||
}
|
||||
}
|
||||
.custom-control {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
color: #fff;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
// CheckBox
|
||||
.custom-control-input:focus ~ .custom-control-label::before{
|
||||
box-shadow:none !important;
|
||||
}
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: #BEBEBE;
|
||||
border-width: 2px;
|
||||
border-radius: 5px !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.check-xs{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.check-lg{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.check-xl{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
.checkbox{
|
||||
&-info{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
&-danger {
|
||||
.custom-control-label::before{
|
||||
background-color:transparent;
|
||||
border-color: $danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
&-success{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
}
|
||||
&-secondary{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $secondary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Toggle Switch
|
||||
.toggle-switch{
|
||||
padding-left:50px;
|
||||
line-height: 1.25;
|
||||
.custom-control-label{
|
||||
|
||||
font-weight: 500;
|
||||
&:after{
|
||||
width: 24px;
|
||||
background:#959595;
|
||||
height: 24px;
|
||||
border-radius: 24px;
|
||||
top: -2px;
|
||||
left: -50px;
|
||||
@include transitionMedium;
|
||||
}
|
||||
&:before{
|
||||
border: 0;
|
||||
background: #D8D8D8;
|
||||
width: 40px;
|
||||
border-radius: 20px !important;
|
||||
height: 16px;
|
||||
left: -50px;
|
||||
@include transitionMedium
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label{
|
||||
&:after{
|
||||
left: -43px;
|
||||
background:$primary;
|
||||
}
|
||||
&:before{
|
||||
background: $primary-light;
|
||||
}
|
||||
}
|
||||
&.text-right{
|
||||
padding-left:0;
|
||||
padding-right:50px;
|
||||
.custom-control-label{
|
||||
&:after{
|
||||
left: auto;
|
||||
right: -30px;
|
||||
}
|
||||
&:before{
|
||||
left: auto;
|
||||
right: -50px;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label{
|
||||
&:after{
|
||||
left: auto;
|
||||
right: -43px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Check Switch
|
||||
.check-switch{
|
||||
padding-left: 40px;
|
||||
.custom-control-label{
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
&:after,&:before{
|
||||
height:1.5rem;
|
||||
width:1.5rem;
|
||||
left: -2rem;
|
||||
border-radius: 3rem!important;
|
||||
border-color:rgba($primary,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3
public/style/scss/components/forms/_form-dropzone.scss
Normal file
3
public/style/scss/components/forms/_form-dropzone.scss
Normal file
@ -0,0 +1,3 @@
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.ql-container{
|
||||
height: 25rem;
|
||||
}
|
||||
134
public/style/scss/components/forms/_form-pickers.scss
Normal file
134
public/style/scss/components/forms/_form-pickers.scss
Normal file
@ -0,0 +1,134 @@
|
||||
|
||||
|
||||
.asColorPicker-dropdown {
|
||||
max-width: 26rem;
|
||||
}
|
||||
|
||||
.asColorPicker-trigger {
|
||||
border : 0 none;
|
||||
height : 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top : 0;
|
||||
width : 2.1875rem;
|
||||
}
|
||||
[direction="rtl"] .asColorPicker-trigger{
|
||||
right: 99%;
|
||||
left: auto;
|
||||
}
|
||||
.asColorPicker-clear {
|
||||
display : none;
|
||||
position : absolute;
|
||||
right : 1rem;
|
||||
text-decoration: none;
|
||||
top : .5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.daterangepicker {
|
||||
td.active {
|
||||
background-color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
button.applyBtn {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
|
||||
&.datepicker-dropdown {
|
||||
background: $l-bg;
|
||||
border-radius: 1px;
|
||||
border: 1px solid $gallery;
|
||||
|
||||
td.day, th.next, th.prev {
|
||||
height: 30px;
|
||||
width: 30px !important;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
border-radius: 50px;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
th.datepicker-switch, th.next, th.prev {
|
||||
font-weight: 300;
|
||||
color: $heading;
|
||||
}
|
||||
|
||||
th.dow {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
table {
|
||||
|
||||
|
||||
|
||||
tr td.selected, tr td.active.active {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
td.today {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
td.today.disabled {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.picker {
|
||||
&__select--month, &__select--year {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
&__input {
|
||||
background-color: transparent !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid $d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-wrap{
|
||||
.form-control{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
574
public/style/scss/components/forms/_form-steps.scss
Normal file
574
public/style/scss/components/forms/_form-steps.scss
Normal file
@ -0,0 +1,574 @@
|
||||
@import "../../abstracts/variable";
|
||||
@import "../../abstracts/mixin";
|
||||
|
||||
|
||||
/* .wizard > .content > .body input.error {
|
||||
position: absolute;
|
||||
top: 100% !important;
|
||||
}
|
||||
|
||||
.wizard {
|
||||
position: relative;
|
||||
|
||||
&>.steps {
|
||||
width: 100%;
|
||||
// padding-left: 3%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media(min-width: 1200px){
|
||||
width: 100%;
|
||||
// margin-left: 3%;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
&.current {
|
||||
a {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &.done {
|
||||
a {
|
||||
background-color: $white;
|
||||
color: $heading;
|
||||
|
||||
&:hover {
|
||||
margin: 0;
|
||||
background-color: $white;
|
||||
border-radius: 0;
|
||||
color: $heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $white;
|
||||
|
||||
&:hover {
|
||||
margin: 0;
|
||||
background-color: $white;
|
||||
border-radius: 0;
|
||||
color: $heading;
|
||||
}
|
||||
|
||||
@include respond(phone-land) {
|
||||
padding: 1em 4px;
|
||||
}
|
||||
|
||||
.number {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 32rem;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
min-height: 41rem;
|
||||
}
|
||||
|
||||
& > .body {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// background-color: $l-bg;
|
||||
border: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
input.error {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label.error {
|
||||
margin-top: 5px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skip-email {
|
||||
margin-top: 6rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&>.actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 2rem;
|
||||
|
||||
li:not(.disabled) {
|
||||
a {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard .actions ul li{
|
||||
&.disabled a{
|
||||
color: #333333 !important;
|
||||
background: #F7FAFC !important;
|
||||
border: 1px solid #EEEEEE;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg !important;
|
||||
border-color: $d-border;
|
||||
color:$white !important;
|
||||
}
|
||||
}
|
||||
|
||||
& a{
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0.55em 2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{
|
||||
padding: 0.55em 2em;
|
||||
}
|
||||
|
||||
// .wizard > .steps > ul > li{
|
||||
|
||||
// @media(max-width: 680px){
|
||||
// width: 100%;
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .wizard > .steps{
|
||||
|
||||
// @media(max-width: 680px){
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.wizard > .content{
|
||||
background: transparent;
|
||||
// box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wizard, .tabcontrol{
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.step-form-horizontal {
|
||||
.wizard {
|
||||
padding-top: 3.5rem;
|
||||
|
||||
.steps {
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&.done {
|
||||
a {
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
color: $body-color;
|
||||
}
|
||||
&:hover {
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
border-color: transparent;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current a, &.disabled a {
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.current a {
|
||||
.number {
|
||||
color: $primary;
|
||||
background: $white;
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled a {
|
||||
.number {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 0.75rem;
|
||||
padding-top: 0.9375rem;
|
||||
}
|
||||
|
||||
.number {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
border: 3px solid #d7dae3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 3rem;
|
||||
border-radius: 50px;
|
||||
width: 3rem;
|
||||
|
||||
// @include respond(phone) {
|
||||
// width: 4rem;
|
||||
// height: 4rem;
|
||||
// }
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
@include respond('phone') {
|
||||
top: -45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0.375rem;
|
||||
content: "";
|
||||
left: 50%;
|
||||
top: -2.1rem;
|
||||
background-color: $primary;
|
||||
z-index: -1;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
height: 0.375rem;
|
||||
top: -1.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
&::after {
|
||||
background-color: #F3F3F3;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&~li {
|
||||
&::after {
|
||||
background-color: #F3F3F3;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// form-wizard
|
||||
.form-wizard{
|
||||
border: 0;
|
||||
.nav-wizard{
|
||||
box-shadow: none!important;
|
||||
margin-bottom: 2rem;
|
||||
li{
|
||||
.nav-link{
|
||||
position: relative;
|
||||
span{
|
||||
border-radius: 50px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 2px solid $primary;
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
color: $primary;
|
||||
font-size: 18px;
|
||||
margin: auto;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&:after{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 3px;
|
||||
transform: translateY(-50%);
|
||||
background: $dark-light!important;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.active{
|
||||
&:after{
|
||||
background: $dark-light!important;
|
||||
}
|
||||
}
|
||||
&.done{
|
||||
&:after{
|
||||
background: $primary!important;
|
||||
}
|
||||
span{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.nav-link{
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-bottom{
|
||||
.btn{
|
||||
background-color: $primary;
|
||||
border: 0;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
}
|
||||
.tab-content{
|
||||
.tab-pane{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// emial-setup
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
.nav-wizard{
|
||||
flex-direction: unset!important;
|
||||
}
|
||||
.tab-content{
|
||||
height: 100%!important;
|
||||
}
|
||||
}
|
||||
@include respond('phone') {
|
||||
.nav-wizard{
|
||||
li{
|
||||
.nav-link{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
public/style/scss/components/forms/_form-summernote.scss
Normal file
30
public/style/scss/components/forms/_form-summernote.scss
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
|
||||
.note-icon-caret,
|
||||
.note-popover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.note-editor.note-frame .panel-heading {
|
||||
padding : .6rem 1rem 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.note-editor.note-frame {
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-editing-area .note-editable {
|
||||
background-color: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
102
public/style/scss/components/forms/_form-switch.scss
Normal file
102
public/style/scss/components/forms/_form-switch.scss
Normal file
@ -0,0 +1,102 @@
|
||||
.js-switch {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 50px;
|
||||
margin-right: 4rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&>small {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-lg {
|
||||
& + .switchery {
|
||||
height: 2rem;
|
||||
width: 4.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-md {
|
||||
& + .switchery {
|
||||
height: 1.5rem;
|
||||
width: 3.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-sm {
|
||||
& + .switchery {
|
||||
height: 1rem;
|
||||
width: 2.2rem;
|
||||
|
||||
&>small {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-square {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 0;
|
||||
|
||||
&>small {
|
||||
border-radius: 0;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-lg {
|
||||
& + .switchery {
|
||||
height: 2rem;
|
||||
width: 4.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-md {
|
||||
& + .switchery {
|
||||
height: 1.5rem;
|
||||
width: 3.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-sm {
|
||||
& + .switchery {
|
||||
height: 1rem;
|
||||
width: 2.2rem;
|
||||
|
||||
&>small {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
18
public/style/scss/components/forms/_form-touchspin.scss
Normal file
18
public/style/scss/components/forms/_form-touchspin.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.bootstrap-touchspin .input-group-btn-vertical>.btn {
|
||||
height: 51%;
|
||||
|
||||
&.bootstrap-touchspin-up {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-touchspin {
|
||||
button.btn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
67
public/style/scss/components/forms/_form-validation.scss
Normal file
67
public/style/scss/components/forms/_form-validation.scss
Normal file
@ -0,0 +1,67 @@
|
||||
/////////////////////////////
|
||||
// Bootstrap validation
|
||||
/////////////////////////////
|
||||
.form-control.is-valid {
|
||||
border-color: $success !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-warning {
|
||||
border-color: $warning !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: $danger !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////
|
||||
// Jquery Validation
|
||||
////////////////////////
|
||||
.is-valid {
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
i {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
i {
|
||||
color: lighten($primary, 15%)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show Pass
|
||||
.show-pass{
|
||||
cursor:pointer;
|
||||
|
||||
.fa-eye{
|
||||
display:none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
.fa-eye-slash{
|
||||
display:none;
|
||||
}
|
||||
.fa-eye{
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/style/scss/components/forms/_forms.scss
Normal file
13
public/style/scss/components/forms/_forms.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "./form-basic";
|
||||
@import "./form-checkbox";
|
||||
@import "./form-radio-button";
|
||||
@import "./form-switch";
|
||||
@import "./form-validation";
|
||||
@import "./form-pickers";
|
||||
@import "./form-addons-cropper";
|
||||
@import "./form-addons-select2";
|
||||
@import "./form-steps";
|
||||
@import "./form-dropzone";
|
||||
@import "./form-summernote";
|
||||
@import "./form-editor-quill";
|
||||
|
||||
0
public/style/scss/components/ico/_buy-sell.scss
Normal file
0
public/style/scss/components/ico/_buy-sell.scss
Normal file
0
public/style/scss/components/ico/_exchange.scss
Normal file
0
public/style/scss/components/ico/_exchange.scss
Normal file
0
public/style/scss/components/ico/_gateway.scss
Normal file
0
public/style/scss/components/ico/_gateway.scss
Normal file
8
public/style/scss/components/ico/_ico.scss
Normal file
8
public/style/scss/components/ico/_ico.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "./buy-sell";
|
||||
@import "./exchange";
|
||||
@import "./gateway";
|
||||
@import "./marketcap";
|
||||
@import "./ticker";
|
||||
@import "./trading";
|
||||
@import "./transaction";
|
||||
@import "./wallet";
|
||||
0
public/style/scss/components/ico/_marketcap.scss
Normal file
0
public/style/scss/components/ico/_marketcap.scss
Normal file
35
public/style/scss/components/ico/_ticker.scss
Normal file
35
public/style/scss/components/ico/_ticker.scss
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
|
||||
|
||||
.crypto-ticker{
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#webticker-big {
|
||||
font: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: normal !important;
|
||||
li{
|
||||
i{
|
||||
font-size: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
0
public/style/scss/components/ico/_trading.scss
Normal file
0
public/style/scss/components/ico/_trading.scss
Normal file
0
public/style/scss/components/ico/_transaction.scss
Normal file
0
public/style/scss/components/ico/_transaction.scss
Normal file
2
public/style/scss/components/ico/_wallet.scss
Normal file
2
public/style/scss/components/ico/_wallet.scss
Normal file
@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
29
public/style/scss/components/map/_map-datamap.scss
Normal file
29
public/style/scss/components/map/_map-datamap.scss
Normal file
@ -0,0 +1,29 @@
|
||||
#world-datamap {
|
||||
padding-bottom: 46% !important;
|
||||
}
|
||||
|
||||
.datamaps-hoverover {
|
||||
background: $white;
|
||||
padding: 0.3125rem;
|
||||
border-radius: 0.3125rem;
|
||||
font-family: 'Roboto' !important;
|
||||
color: $primary;
|
||||
border: 1px solid rgba($primary, .3);
|
||||
}
|
||||
|
||||
.world_map_card {
|
||||
ul.list-group {
|
||||
@include custommq($max: 1440px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
// li {
|
||||
// @include custommq($min: 1200px, $max: 1440px) {
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
22
public/style/scss/components/map/_map-jqvmap.scss
Normal file
22
public/style/scss/components/map/_map-jqvmap.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 14px;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.jqvmap-zoomout {
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
#world-map, #usa {
|
||||
height: 400px;
|
||||
@include respond ('tab-port'){
|
||||
height:350px;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
height:230px;
|
||||
}
|
||||
}
|
||||
2
public/style/scss/components/map/_maps.scss
Normal file
2
public/style/scss/components/map/_maps.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "./map-datamap";
|
||||
@import "./map-jqvmap";
|
||||
266
public/style/scss/components/tables/_table-basic.scss
Normal file
266
public/style/scss/components/tables/_table-basic.scss
Normal file
@ -0,0 +1,266 @@
|
||||
//style for all basic tables
|
||||
.table {
|
||||
|
||||
@include respond('tab-land') {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
strong{
|
||||
color:$dark;
|
||||
}
|
||||
td {
|
||||
border-color: $border;
|
||||
padding: 12px 20px;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
&.shadow-hover tbody tr:hover{
|
||||
background-color:$white;
|
||||
box-shadow: 0 0px 30px rgba($primary, 0.15);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
&.bg-secondary-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$secondary;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-info-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$info;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-warning-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$warning;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-bottom-width: 1px;
|
||||
// color: $dark ;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 20px 20px;
|
||||
letter-spacing: 0.5px;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
tbody tr td {
|
||||
// color: $l-ctd;
|
||||
// line-height: 2.5rem;
|
||||
vertical-align: middle;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
//delete header borders without '.borders tables'
|
||||
&:not(.table-bordered) {
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
//heading background
|
||||
.thead-primary th {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
.thead-info th {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
.thead-warning th {
|
||||
background-color: $warning;
|
||||
color: $white;
|
||||
}
|
||||
.thead-danger th {
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
}
|
||||
.thead-success th {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
//table border
|
||||
&.primary-table-bordered {
|
||||
border: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
//table hover
|
||||
&.primary-table-bg-hover {
|
||||
thead th {
|
||||
background-color: darken($color: $primary, $amount: 5%);
|
||||
color: $white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
transition: all .1s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color: $primary, $amount: 5%);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
td, th {
|
||||
border-bottom: 1px solid darken($color: $primary, $amount: 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//responsive table width
|
||||
&-responsive {
|
||||
&-tiny {
|
||||
// @include media-breakpoint-down(xs) {
|
||||
min-width: 18.75rem;
|
||||
// }
|
||||
}
|
||||
|
||||
&-sm {
|
||||
// @include media-breakpoint-down(sm) {
|
||||
min-width: 30rem !important;
|
||||
// }
|
||||
}
|
||||
|
||||
&-md {
|
||||
// @include media-breakpoint-down(sm) {
|
||||
min-width: 36rem !important;
|
||||
// }
|
||||
}
|
||||
|
||||
&-lg {
|
||||
min-width: 60.9375rem !important;
|
||||
}
|
||||
|
||||
&-xl {
|
||||
min-width: 70.9375rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-primary,
|
||||
.table-primary > th,
|
||||
.table-primary > td {
|
||||
background-color: $primary-light;
|
||||
color: $primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
.table-success,
|
||||
.table-success > th,
|
||||
.table-success > td {
|
||||
background-color: $success-light;
|
||||
color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
.table-info,
|
||||
.table-info > th,
|
||||
.table-info > td {
|
||||
background-color: $info-light;
|
||||
color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
.table-warning,
|
||||
.table-warning > th,
|
||||
.table-warning > td {
|
||||
background-color: $warning-light;
|
||||
color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
.table-danger,
|
||||
.table-danger > th,
|
||||
.table-danger > td {
|
||||
background-color: $danger-light;
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
.table-active,
|
||||
.table-active > th,
|
||||
.table-active > td {
|
||||
background-color: $l-bg;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.card-table{
|
||||
th, td{
|
||||
&:first-child{
|
||||
padding-left: 30px;
|
||||
@include respond('phone') {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
padding-right:30px;
|
||||
@include respond('phone') {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
14
public/style/scss/components/tables/_table-bootgrid.scss
Normal file
14
public/style/scss/components/tables/_table-bootgrid.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.bootgrid-header {
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
.actionBar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
235
public/style/scss/components/tables/_table-datatable.scss
Normal file
235
public/style/scss/components/tables/_table-datatable.scss
Normal file
@ -0,0 +1,235 @@
|
||||
//demo styles
|
||||
table#example{
|
||||
padding: 0rem 0 2rem 0;
|
||||
}
|
||||
table.dataTable{
|
||||
color:$black;
|
||||
border-radius:$radius;
|
||||
}
|
||||
#example2_wrapper {
|
||||
.dataTables_scrollBody {
|
||||
max-height: 33.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#employees, #custommers {
|
||||
padding: .5rem 0 1rem 0;
|
||||
}
|
||||
//////////
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
padding:25px 0;
|
||||
@include respond('laptop') {
|
||||
padding:10px 0;
|
||||
}
|
||||
}
|
||||
table.dataTable thead th,
|
||||
table.dataTable thead td {
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid $border;
|
||||
@include respond('laptop') {
|
||||
padding:8px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tfoot th,
|
||||
table.dataTable tfoot td{
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
background: #fff!important;
|
||||
}
|
||||
|
||||
table.dataTable thead th{
|
||||
color: $black;
|
||||
font-size:16px;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
@include respond('laptop') {
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
font-size: 16px;
|
||||
padding: 15px 10px;
|
||||
@include respond('laptop') {
|
||||
padding:8px 10px;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tr.selected{
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
table.dataTable tfoot th{
|
||||
color: $dark;
|
||||
font-weight: 600;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper {
|
||||
input[type="search"], input[type="text"], select {
|
||||
border: 1px solid #e2e2e2;
|
||||
padding: .3rem 0.5rem;
|
||||
color: rgba(113, 93, 93, 1);
|
||||
border-radius: 5px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom: 15px;
|
||||
.bootstrap-select{
|
||||
width: 80px!important;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.no-footer{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.min-w850{
|
||||
min-width:850px;
|
||||
}
|
||||
|
||||
.rounded-lg{
|
||||
min-width:30px;
|
||||
}
|
||||
.dataTables_scroll{
|
||||
padding: 1rem 0;
|
||||
|
||||
&Foot{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter {
|
||||
@include media-breakpoint-down(md) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.dataTablesCard{
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 12px 23px 0px rgba(62, 73, 84, 0.04);
|
||||
border-radius: 0;
|
||||
|
||||
tbody tr:hover{
|
||||
background:$white!important;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
td{
|
||||
background:transparent!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.display tbody tr:hover{
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
td{
|
||||
background:transparent!important;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_info {
|
||||
padding:25px 0;
|
||||
@include respond('laptop') {
|
||||
padding:8px 0;
|
||||
}
|
||||
}
|
||||
table.dataTable.display.white-border td{
|
||||
border-color:$white;
|
||||
}
|
||||
table.dataTable.row-border tbody th,
|
||||
table.dataTable.row-border tbody td,
|
||||
table.dataTable.display tbody th,
|
||||
table.dataTable.display tbody td {
|
||||
border-color: $border-color;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
table.dataTable thead .sorting{
|
||||
background-position: center right 15px;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
border-radius:$radius;
|
||||
span{
|
||||
border-radius:$radius;
|
||||
display: inline-block;
|
||||
background:rgba($primary,0.08);
|
||||
border:0px solid $primary;
|
||||
margin: 0 0;
|
||||
|
||||
a{
|
||||
color:$white;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.paginate_button{
|
||||
border: 0 !important;
|
||||
padding: 15px 24px;
|
||||
background: transparent !important;
|
||||
border-radius: $radius;
|
||||
color:$primary !important;
|
||||
font-size:16px;
|
||||
margin:0;
|
||||
display:inline-block;
|
||||
@include respond('laptop') {
|
||||
padding: 8px 15px;
|
||||
font-size:14px;
|
||||
}
|
||||
&:hover,
|
||||
&.current:hover,
|
||||
&.current{
|
||||
color:$white !important;
|
||||
background:$primary !important;
|
||||
}
|
||||
|
||||
&.previous,
|
||||
&.next{
|
||||
background:$white!important;
|
||||
color:$primary !important;
|
||||
margin: 0 10px;
|
||||
border:0px solid $primary!important;
|
||||
&:hover{
|
||||
background:$primary!important;
|
||||
color:$white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4
public/style/scss/components/tables/_table-footable.scss
Normal file
4
public/style/scss/components/tables/_table-footable.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.fooicon {
|
||||
font-size: 1.25rem;
|
||||
color: $dark;
|
||||
}
|
||||
25
public/style/scss/components/tables/_table-jsgrid.scss
Normal file
25
public/style/scss/components/tables/_table-jsgrid.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.jsgrid-table{
|
||||
|
||||
.jsgrid-header-row{
|
||||
|
||||
& > .jsgrid-header-cell{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody > tr > td{
|
||||
padding: 1.2em;
|
||||
}
|
||||
|
||||
.jsgrid-insert-row, .jsgrid-edit-row{
|
||||
|
||||
input, select{
|
||||
border: 1px solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsgrid .jsgrid-button{
|
||||
border: 0 !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
5
public/style/scss/components/tables/_table.scss
Normal file
5
public/style/scss/components/tables/_table.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import "./table-basic";
|
||||
@import "./table-bootgrid";
|
||||
@import "./table-datatable";
|
||||
@import "./table-footable";
|
||||
@import "./table-jsgrid";
|
||||
24
public/style/scss/components/uc/_addons.scss
Normal file
24
public/style/scss/components/uc/_addons.scss
Normal file
@ -0,0 +1,24 @@
|
||||
@import "./uc-blockui";
|
||||
@import "./uc-bootstrap-select";
|
||||
@import "./uc-clipboard";
|
||||
@import "./uc-ticker";
|
||||
@import "./uc-typeahead";
|
||||
@import "./uc-weather";
|
||||
@import "./uc-noui-slider";
|
||||
@import "./uc-nestable";
|
||||
@import "./uc-pignose-calender";
|
||||
@import "./uc-horizontal-timeline";
|
||||
@import "./uc-lightgallery";
|
||||
@import "./uc-toastr";
|
||||
@import "./jqvmap";
|
||||
@import "./perfect-scroll";
|
||||
@import "./dropzone";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3
public/style/scss/components/uc/_dropzone.scss
Normal file
3
public/style/scss/components/uc/_dropzone.scss
Normal file
@ -0,0 +1,3 @@
|
||||
// dropzone
|
||||
.dropzone{
|
||||
}
|
||||
27
public/style/scss/components/uc/_jqvmap.scss
Normal file
27
public/style/scss/components/uc/_jqvmap.scss
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
.jqvmap-zoomin, .jqvmap-zoomout
|
||||
{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #000000;
|
||||
padding: 3px;
|
||||
color: white;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
cursor: pointer;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.jqvmap-zoomin
|
||||
{
|
||||
top: 10px;
|
||||
}
|
||||
.jqvmap-zoomout
|
||||
{
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
|
||||
88
public/style/scss/components/uc/_perfect-scroll.scss
Normal file
88
public/style/scss/components/uc/_perfect-scroll.scss
Normal file
@ -0,0 +1,88 @@
|
||||
// .deznav-scroll{
|
||||
// .ps__rail-x:hover,
|
||||
// .ps__rail-y:hover,
|
||||
// .ps__rail-x:focus,
|
||||
// .ps__rail-y:focus,
|
||||
// .ps__rail-x.ps--clicking,
|
||||
// .ps__rail-y.ps--clicking {
|
||||
// background-color: #f00;
|
||||
// opacity: 0.9;
|
||||
// }
|
||||
// .ps__rail-y:hover > .ps__thumb-y,
|
||||
// .ps__rail-y:focus > .ps__thumb-y,
|
||||
// .ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
// background-color: #f00;
|
||||
// width: 4px;
|
||||
// }
|
||||
// .ps__thumb-y {
|
||||
// background-color: #f00;
|
||||
// width: 4px;
|
||||
// }
|
||||
// }
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-x.ps--clicking,
|
||||
.ps__rail-y.ps--clicking {
|
||||
background-color: transparent;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover>.ps__thumb-y,
|
||||
.ps__rail-y:focus>.ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
background-color: #DAE2F3;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: #DAE2F3;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.total-average {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.widget-chat {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.widget-todo {
|
||||
position: relative;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.widget-team {
|
||||
position: relative;
|
||||
height: 285px;
|
||||
}
|
||||
|
||||
.widget-timeline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-comments {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.sidebar-right-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.widget-team {
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y:hover,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-y.ps--clicking {
|
||||
background-color: transparent!important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
17
public/style/scss/components/uc/_uc-blockui.scss
Normal file
17
public/style/scss/components/uc/_uc-blockui.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.blockUI.blockMsg.blockPage {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
#loginForm {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.blockMsg {
|
||||
border: 0px!important;
|
||||
width: 20%!important;
|
||||
h1{
|
||||
font-size: 16px;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
45
public/style/scss/components/uc/_uc-bootstrap-select.scss
Normal file
45
public/style/scss/components/uc/_uc-bootstrap-select.scss
Normal file
@ -0,0 +1,45 @@
|
||||
.bootstrap-select{
|
||||
margin-bottom: 0;
|
||||
|
||||
.btn {
|
||||
border: 1px solid $border !important;
|
||||
background-color: transparent !important;
|
||||
font-weight:400;
|
||||
color: $body-color !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color:$d-border !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none !important;
|
||||
outline-offset: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $body-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu{
|
||||
border-color: $border !important;
|
||||
box-shadow:$shadow;
|
||||
|
||||
.dropdown-item{
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $border !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.input-group > .bootstrap-select:not(:first-child) .dropdown-toggle{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.input-group > .bootstrap-select:not(:last-child) .dropdown-toggle{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
10
public/style/scss/components/uc/_uc-clipboard.scss
Normal file
10
public/style/scss/components/uc/_uc-clipboard.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
.clipboard-btn {
|
||||
transition: all .1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
9
public/style/scss/components/uc/_uc-counterup.scss
Normal file
9
public/style/scss/components/uc/_uc-counterup.scss
Normal file
@ -0,0 +1,9 @@
|
||||
.counter-wrapper {
|
||||
.counter {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
254
public/style/scss/components/uc/_uc-horizontal-timeline.scss
Normal file
254
public/style/scss/components/uc/_uc-horizontal-timeline.scss
Normal file
@ -0,0 +1,254 @@
|
||||
.cd-h-timeline {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.cd-h-timeline--loaded { // show the timeline after dates position has been set (using JavaScript)
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cd-h-timeline__container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.cd-h-timeline__dates {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin: 0 40px;
|
||||
overflow: hidden;
|
||||
|
||||
&::after, &::before { // these are used to create a shadow effect at the sides of the timeline
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__line { // grey line
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 49px;
|
||||
height: 2px; // width will be set using JavaScript
|
||||
background-color: $primary;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__filling-line { // green filling line
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $success;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__date {
|
||||
position: absolute;
|
||||
bottom: 0; // left position will be set using JavaScript
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
padding-bottom: var(--space-sm);
|
||||
color: var(--cd-color-1);
|
||||
user-select: none; // improve swipe
|
||||
text-decoration: none;
|
||||
|
||||
&::after { // this is used to create the event spot
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -5px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: lighten($primary, 0.9);
|
||||
background-color: $primary;
|
||||
transition: background-color 0.3s, border-color .3s;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
// @include breakpoint(md) {
|
||||
// font-size: 0.7em;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cd-h-timeline__date--selected {
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__date--older-event::after {
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation { // arrows to navigate the timeline
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
border-radius: 50%;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: lighten($primary, 0.9);
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&::after { // arrow icon
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background: url(../images/svg/cd-arrow.svg) no-repeat 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--prev {
|
||||
left: 0;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--inactive {
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: lighten($primary, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__events { // container of events info
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: height .4s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event { // single event info
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
padding: 1px 5%;
|
||||
opacity: 0;
|
||||
animation-duration: 0.4s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--selected { // selected event info
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--enter-right,
|
||||
.cd-h-timeline__event--leave-right { // animate event info
|
||||
animation-name: cd-enter-right;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--enter-left,
|
||||
.cd-h-timeline__event--leave-left { // animate event info
|
||||
animation-name: cd-enter-left;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--leave-right,
|
||||
.cd-h-timeline__event--leave-left {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-content {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-title {
|
||||
color: var(--cd-color-1);
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-xxxl);
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-date {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin: var(--space-xs) auto;
|
||||
|
||||
&::before {
|
||||
content: '- ';
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cd-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cd-enter-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
40
public/style/scss/components/uc/_uc-lightgallery.scss
Normal file
40
public/style/scss/components/uc/_uc-lightgallery.scss
Normal file
@ -0,0 +1,40 @@
|
||||
/* Light Gallery */
|
||||
.lg-actions .lg-next,
|
||||
.lg-actions .lg-prev,
|
||||
.lg-sub-html,
|
||||
.lg-toolbar{
|
||||
background-color: rgba(30, 30, 30, .6);
|
||||
}
|
||||
.lg-outer{
|
||||
.lg-toogle-thumb,
|
||||
.lg-thumb-outer,
|
||||
.lg-img-wrap,
|
||||
.lg-item{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.lg-thumb-outer.lg-grab,
|
||||
.lg-toogle-thumb.lg-icon{
|
||||
background-color: rgba(30, 30, 30, .6);
|
||||
}
|
||||
.lg-backdrop {
|
||||
background-color: rgba(30, 30, 30, 0.9);
|
||||
}
|
||||
.lg-outer .lg-toogle-thumb,
|
||||
.lg-actions .lg-next,
|
||||
.lg-actions .lg-prev,
|
||||
.lg-toolbar .lg-icon,
|
||||
#lg-counter{
|
||||
color: $white;
|
||||
}
|
||||
.lg-outer{
|
||||
.lg-thumb-item{
|
||||
&.active,
|
||||
&:hover{
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lightimg{
|
||||
cursor: pointer;
|
||||
}
|
||||
43
public/style/scss/components/uc/_uc-nestable.scss
Normal file
43
public/style/scss/components/uc/_uc-nestable.scss
Normal file
@ -0,0 +1,43 @@
|
||||
// Variable.scss
|
||||
|
||||
.nestable-cart {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// .dd-item > button {
|
||||
// height: 2.1rem;
|
||||
// }
|
||||
.dd-handle {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
border-radius: 5px;
|
||||
padding: 8px 15px;
|
||||
height:auto;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
.dd-handle:hover {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
// #nestable2 .dd-handle {
|
||||
// color: $white;
|
||||
// border: 1px solid $border;
|
||||
// background: $primary;
|
||||
// }
|
||||
// #nestable2 .dd-handle:hover {
|
||||
// background: $primary;
|
||||
// }
|
||||
// #nestable2 .dd-item>button:before {
|
||||
// color: $white;
|
||||
// }
|
||||
.dd3-content:hover {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
.dd3-content {
|
||||
color: $white;
|
||||
}
|
||||
.dd-item>button{
|
||||
line-height:28px;
|
||||
color:$white;
|
||||
}
|
||||
112
public/style/scss/components/uc/_uc-noui-slider.scss
Normal file
112
public/style/scss/components/uc/_uc-noui-slider.scss
Normal file
@ -0,0 +1,112 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
|
||||
|
||||
.noUi-target {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.noUi-connect {
|
||||
background-color: $primary;
|
||||
|
||||
&s {
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
&.c-1-color {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.c-2-color {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
&.c-3-color {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&.c-4-color {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-vertical {
|
||||
width: 0.375rem;
|
||||
}
|
||||
|
||||
.noUi-horizontal {
|
||||
height: 0.375rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
|
||||
&::after, &::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
left: -4px;
|
||||
top: -6px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
top: -4px;
|
||||
}
|
||||
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
|
||||
right: -6px;
|
||||
}
|
||||
#slider-toggle {
|
||||
height: 50px;
|
||||
}
|
||||
#slider-toggle.off .noUi-handle {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
|
||||
.colorpicker-slider {
|
||||
.sliders.noUi-target {
|
||||
|
||||
|
||||
&#red, &#green, &#blue {
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&#red .noUi-connect {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
&#green .noUi-connect {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
&#blue .noUi-connect {
|
||||
background: #2980b9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#result {
|
||||
margin: 60px 26px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: rgb(127, 127, 127);
|
||||
background: rgb(127, 127, 127);
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-vertical {
|
||||
height: 18rem;
|
||||
}
|
||||
32
public/style/scss/components/uc/_uc-pignose-calender.scss
Normal file
32
public/style/scss/components/uc/_uc-pignose-calender.scss
Normal file
@ -0,0 +1,32 @@
|
||||
.pignose-calendar {
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
border-color: $primary;
|
||||
|
||||
.pignose-calendar-top-date {
|
||||
background-color: $primary;
|
||||
|
||||
.pignose-calendar-top-month {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
|
||||
background-color: $primary;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pignose-calendar .pignose-calendar-top {
|
||||
box-shadow: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.pignose-calendar.pignose-calendar-blue {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.pignose-calendar .pignose-calendar-unit {
|
||||
height: 4.8em;
|
||||
}
|
||||
32
public/style/scss/components/uc/_uc-tagsinput.scss
Normal file
32
public/style/scss/components/uc/_uc-tagsinput.scss
Normal file
@ -0,0 +1,32 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-left: .5rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
background-color: $white;
|
||||
width: 100%;
|
||||
|
||||
.tag {
|
||||
font-size: 0.875rem;
|
||||
background-color: $primary;
|
||||
// color: $white;
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
height: 2.1rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
// max-width: 105px;
|
||||
}
|
||||
|
||||
label{
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
35
public/style/scss/components/uc/_uc-ticker.scss
Normal file
35
public/style/scss/components/uc/_uc-ticker.scss
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
|
||||
|
||||
.crypto-ticker{
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#webticker-big {
|
||||
font: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: normal !important;
|
||||
li{
|
||||
i{
|
||||
font-size: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
63
public/style/scss/components/uc/_uc-toastr.scss
Normal file
63
public/style/scss/components/uc/_uc-toastr.scss
Normal file
@ -0,0 +1,63 @@
|
||||
.toast {
|
||||
&-success {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&-error {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
|
||||
&>div {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
max-width: 250px;
|
||||
opacity: 1;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
padding: 15px 50px 15px 15px;
|
||||
background-position: calc(100% - 15px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toast-close-button {
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
[direction="rtl"] {
|
||||
.toast-top-right.demo_rtl_class {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
29
public/style/scss/components/uc/_uc-typeahead.scss
Normal file
29
public/style/scss/components/uc/_uc-typeahead.scss
Normal file
@ -0,0 +1,29 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
|
||||
// .form-control {
|
||||
// background-color: $l-bg !important;
|
||||
// }
|
||||
|
||||
.tt-dataset.tt-dataset-states {
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 0.625rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
33
public/style/scss/components/uc/_uc-weather.scss
Normal file
33
public/style/scss/components/uc/_uc-weather.scss
Normal file
@ -0,0 +1,33 @@
|
||||
// Variable.scss
|
||||
|
||||
.weather-one {
|
||||
i {
|
||||
font-size: 8rem;
|
||||
position : relative;
|
||||
top : .5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display : inline-block;
|
||||
float : right;
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
|
||||
.city {
|
||||
position : relative;
|
||||
text-align: right;
|
||||
top : -2.5rem;
|
||||
}
|
||||
|
||||
.currently {
|
||||
font-size : 1.6rem;
|
||||
font-weight: 400;
|
||||
position : relative;
|
||||
top : 2.5rem;
|
||||
}
|
||||
|
||||
.celcious {
|
||||
text-align: right;
|
||||
font-size : 2rem;
|
||||
}
|
||||
}
|
||||
26
public/style/scss/components/ui/_interfaces.scss
Normal file
26
public/style/scss/components/ui/_interfaces.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@import "./ui-accordion";
|
||||
@import "./ui-alert";
|
||||
@import "./ui-badge";
|
||||
@import "./ui-breadcrumb";
|
||||
@import "./ui-button";
|
||||
@import "./ui-card";
|
||||
@import "./ui-carousel";
|
||||
@import "./ui-dropdown";
|
||||
@import "./ui-grid";
|
||||
@import "./ui-label";
|
||||
@import "./ui-list-group";
|
||||
@import "./ui-media";
|
||||
@import "./ui-menu";
|
||||
@import "./ui-modal";
|
||||
@import "./ui-pagination";
|
||||
@import "./ui-popover";
|
||||
@import "./ui-preloader";
|
||||
@import "./ui-progressbar";
|
||||
@import "./ui-ribbon";
|
||||
@import "./ui-scrollbar";
|
||||
@import "./ui-step";
|
||||
@import "./ui-tab";
|
||||
@import "./ui-tooltip";
|
||||
@import "./ui-timeline";
|
||||
|
||||
|
||||
454
public/style/scss/components/ui/_ui-accordion.scss
Normal file
454
public/style/scss/components/ui/_ui-accordion.scss
Normal file
@ -0,0 +1,454 @@
|
||||
.accordion {
|
||||
// accordion primary
|
||||
&-primary{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
color: $white;
|
||||
box-shadow:0 15px 20px 0 rgba($primary, 0.15);
|
||||
}
|
||||
}
|
||||
&-primary-solid{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
color: $white;
|
||||
box-shadow:0 -10px 20px 0 rgba($primary, 0.15);
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
.accordion__body {
|
||||
border: 2px solid $primary;
|
||||
border-top: none;
|
||||
box-shadow:0 15px 20px 0 rgba($primary, 0.15);
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
&-danger{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
}
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
color: $white;
|
||||
box-shadow:0 15px 20px 0 rgba($danger, 0.15);
|
||||
}
|
||||
}
|
||||
&-danger-solid{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
color: $white;
|
||||
box-shadow:0 -10px 20px 0 rgba($danger, 0.15);
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
.accordion__body {
|
||||
border: 2px solid $danger;
|
||||
border-top: none;
|
||||
box-shadow:0 15px 20px 0 rgba($danger, 0.15);
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//a single accrodion
|
||||
&__item {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
//accrodion header styles
|
||||
&__header {
|
||||
padding:1rem 1.75rem;
|
||||
border: 1px solid $border;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
color: $heading;
|
||||
font-weight: 400;
|
||||
border-radius:$radius;
|
||||
@include transitionMedium;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
border-color: $d-border;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//set the indicator font family
|
||||
&--indicator {
|
||||
font-family: 'themify';
|
||||
position: absolute;
|
||||
right: 1.5625rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
@at-root [direction="rtl"] & {
|
||||
right:auto;
|
||||
left: 1.5625rem;
|
||||
}
|
||||
&.indicator_bordered {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 50%;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
.accordion__header--indicator {
|
||||
&::before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
//icon style
|
||||
&.style_two {
|
||||
&::before {
|
||||
content: "\e648";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.accordion__header--indicator {
|
||||
&::before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
//icon style
|
||||
&.style_two {
|
||||
&::before {
|
||||
content: "\e64b";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//accordion body styles
|
||||
&__body {
|
||||
&--text {
|
||||
padding: 0.875rem 1.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//accrodion with border
|
||||
&-bordered {
|
||||
.accordion__body {
|
||||
border: 1px solid $border;
|
||||
border-top: none;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.accordion__header.collapsed{
|
||||
border-radius:$radius;
|
||||
}
|
||||
.accordion__header{
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//accrodion without space
|
||||
&-no-gutter {
|
||||
.accordion__item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.accordion__header {
|
||||
&.collapsed {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.accordion__header {
|
||||
border-bottom: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//not gutter and bordered
|
||||
&-no-gutter.accordion__bordered {
|
||||
.accordion__item {
|
||||
&:not(:last-child) {
|
||||
.accordion__body {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//indicator in left positon
|
||||
&-left-indicator {
|
||||
.accordion__header {
|
||||
&--text {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
&--indicator {
|
||||
right: auto;
|
||||
left: 1.5625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//with icon
|
||||
&-with-icon {
|
||||
.accordion__header {
|
||||
&--text {
|
||||
padding-left: 2.5rem;
|
||||
@at-root [direction="rtl"] & {
|
||||
padding-left: 0;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--icon {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
left: 1.5625rem;
|
||||
font-family: 'themify';
|
||||
@at-root [direction="rtl"] & {
|
||||
left: auto;
|
||||
right: 1.5625rem;
|
||||
}
|
||||
&::before {
|
||||
content: "\e645";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//with header background
|
||||
&-header-bg {
|
||||
.accordion__header {
|
||||
background-color: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border-color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&--info {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
border-color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
border-color:$success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//with header background and no space
|
||||
&-header-bg.accordion-no-gutter {
|
||||
.accordion__header {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__item{
|
||||
&:first-child{
|
||||
.accordion__header{
|
||||
border-top-left-radius:$radius;
|
||||
border-top-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.accordion__header{
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-no-gutter {
|
||||
.accordion__header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__header.collapsed {
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__body{
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__item{
|
||||
&:first-child{
|
||||
.accordion__header{
|
||||
border-top-left-radius:$radius;
|
||||
border-top-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.accordion__header.collapsed{
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
.accordion__body{
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//with solid background
|
||||
&-solid-bg {
|
||||
.accordion__header {
|
||||
border-color: transparent;
|
||||
background-color: $primary-light;
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
&.collapsed{
|
||||
border-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion__body {
|
||||
border-color: transparent;
|
||||
background-color: $primary-light;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//active header styles
|
||||
&-active-header {
|
||||
.accordion__header {
|
||||
&:not(.collapsed) {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//shadow in header
|
||||
&-header-shadow {
|
||||
.accordion__header {
|
||||
border: none;
|
||||
box-shadow: 0 0 0.9375rem -3px rgba($color: $black, $alpha: .3);
|
||||
}
|
||||
}
|
||||
|
||||
//stylishly rounded borders
|
||||
&-rounded-stylish {
|
||||
.accordion__header {
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.accordion__body {
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
//smothly rounded accrodion header
|
||||
&-rounded {
|
||||
.accordion__header {
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
//accordion gradient
|
||||
&-gradient {
|
||||
.accordion__header {
|
||||
color: $white;
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
border-color: transparent;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
&.collapsed{
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion__body {
|
||||
color: $white;
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
371
public/style/scss/components/ui/_ui-alert.scss
Normal file
371
public/style/scss/components/ui/_ui-alert.scss
Normal file
@ -0,0 +1,371 @@
|
||||
|
||||
|
||||
.alert{
|
||||
border-radius: $radius;
|
||||
padding:1rem 3rem 1rem 1.5rem;
|
||||
p{
|
||||
line-height:1.5;
|
||||
}
|
||||
}
|
||||
.alert-square{
|
||||
|
||||
}
|
||||
|
||||
.alert-rounded{
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
// Basic Alert
|
||||
|
||||
|
||||
.alert-primary{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color: $primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-secondary{
|
||||
background: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
color: $secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $secondary-opacity;
|
||||
border-color: $secondary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alert-success{
|
||||
background: $success-light;
|
||||
border-color: $success-light;
|
||||
color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $success-opacity;
|
||||
border-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning{
|
||||
background: $warning-light;
|
||||
border-color: $warning-light;
|
||||
color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $warning-opacity;
|
||||
border-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-info{
|
||||
background: $info-light;
|
||||
border-color: $info-light;
|
||||
color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $info-opacity;
|
||||
border-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dark{
|
||||
background: $dark-light;
|
||||
border-color: $dark-light;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-opacity;
|
||||
border-color: $dark-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.alert-light{
|
||||
background: $light;
|
||||
border-color: $light;
|
||||
color: $dark;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Alert alt
|
||||
|
||||
.alert-alt.alert-primary{
|
||||
border-left: 4px solid $primary;
|
||||
}
|
||||
|
||||
.alert-alt.alert-secondary{
|
||||
border-left: 4px solid $secondary;
|
||||
}
|
||||
|
||||
|
||||
.alert-alt.alert-success{
|
||||
border-left: 4px solid $success
|
||||
}
|
||||
|
||||
.alert-alt.alert-warning{
|
||||
border-left: 4px solid $warning;
|
||||
}
|
||||
|
||||
.alert-alt.alert-danger{
|
||||
border-left: 4px solid $danger;
|
||||
}
|
||||
|
||||
.alert-alt.alert-info{
|
||||
border-left: 4px solid $info;
|
||||
}
|
||||
|
||||
.alert-alt.alert-dark{
|
||||
border-left: 4px solid $dark;
|
||||
}
|
||||
.alert-alt.alert-light{
|
||||
border-left: 4px solid darken($light,15%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alert alt with solid color
|
||||
|
||||
.alert-alt.alert-primary.solid{
|
||||
border-left: 4px solid darken($primary,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-secondary.solid{
|
||||
border-left: 4px solid darken($secondary,25%)!important;
|
||||
}
|
||||
|
||||
|
||||
.alert-alt.alert-success.solid{
|
||||
border-left: 4px solid darken($success, 25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-warning.solid{
|
||||
border-left: 4px solid darken($warning,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-danger.solid{
|
||||
border-left: 4px solid darken($danger,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-info.solid{
|
||||
border-left: 4px solid darken($info,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-dark.solid{
|
||||
border-left: 4px solid darken($dark,25%)!important;
|
||||
}
|
||||
.alert-alt.alert-light.solid{
|
||||
border-left: 4px solid darken($light,25%)!important;
|
||||
}
|
||||
|
||||
|
||||
//Alert dismissable with solid color
|
||||
.alert-dismissible.solid{
|
||||
.close{
|
||||
&:hover{
|
||||
color: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Alert Solid
|
||||
.alert.alert-primary.solid{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.alert.alert-secondary.solid{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
border-color: $secondary;
|
||||
}
|
||||
.alert.alert-success.solid{
|
||||
background: $success;
|
||||
color: $white;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.alert.alert-warning.solid{
|
||||
background: $warning;
|
||||
color: $white;
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
.alert.alert-danger.solid{
|
||||
background: $danger;
|
||||
color: $white;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.alert.alert-info.solid{
|
||||
background: $info;
|
||||
color: $white;
|
||||
border-color: $info;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-dark.solid{
|
||||
background: $dark;
|
||||
color: $white;
|
||||
border-color: $dark;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-light.solid{
|
||||
background: $light;
|
||||
color: $dark;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Alert right icon
|
||||
|
||||
.alert-right-icon{
|
||||
&>span i{
|
||||
font-size: 18px;
|
||||
margin-right: 5px;;
|
||||
}
|
||||
.close{
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alert Outline
|
||||
.alert.alert-outline-primary{
|
||||
background: transparent;
|
||||
color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-secondary{
|
||||
background: transparent;
|
||||
color: $body-color;
|
||||
border-color: $secondary;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-success{
|
||||
background: transparent;
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-info{
|
||||
background: transparent;
|
||||
color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-warning{
|
||||
background: transparent;
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
.alert.alert-outline-danger{
|
||||
background: transparent;
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.alert.alert-outline-dark{
|
||||
background: transparent;
|
||||
color: $body-color;
|
||||
border-color: $dark;
|
||||
}
|
||||
|
||||
.alert.alert-outline-light{
|
||||
background: transparent;
|
||||
color: $dark;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alert Social
|
||||
.alert-social{
|
||||
color: $white;
|
||||
.alert-social-icon{
|
||||
align-self: center;
|
||||
margin-right: 0.9375rem;
|
||||
i{
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
&.facebook{
|
||||
background-color: $facebook;
|
||||
}
|
||||
&.twitter{
|
||||
background-color: $twitter;
|
||||
}
|
||||
&.linkedin{
|
||||
background-color: $linkedin;
|
||||
}
|
||||
&.google-plus{
|
||||
background-color: $google-plus;
|
||||
}
|
||||
.close{
|
||||
&:hover{
|
||||
opacity: 1!important;
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alert left icon
|
||||
|
||||
.left-icon-big{
|
||||
.alert-left-icon-big{
|
||||
align-self: center;
|
||||
margin-right: 0.9375rem;
|
||||
i{
|
||||
font-size: 35px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// &.primary{
|
||||
// background: $primary;
|
||||
// color: $white;
|
||||
// }
|
||||
}
|
||||
.media-body{
|
||||
// margin-left: 100px;
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.left-icon-big .alert-left-icon-big,
|
||||
.alert-social .alert-social-icon{
|
||||
margin-left: 0;
|
||||
margin-right: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
218
public/style/scss/components/ui/_ui-badge.scss
Normal file
218
public/style/scss/components/ui/_ui-badge.scss
Normal file
@ -0,0 +1,218 @@
|
||||
|
||||
|
||||
|
||||
.badge{
|
||||
line-height: 1.5;
|
||||
border-radius: $radius;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border:1px solid transparent;
|
||||
}
|
||||
|
||||
.badge-rounded{
|
||||
border-radius: 20px;
|
||||
padding:3px 13px ;
|
||||
}
|
||||
.badge-circle{
|
||||
border-radius: 100px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.badge-outline-primary{
|
||||
border: 1px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
.badge-outline-secondary{
|
||||
border: 1px solid $secondary;
|
||||
color: $secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.badge-outline-success{
|
||||
border: 1px solid $success;
|
||||
color: $success;
|
||||
}
|
||||
.badge-outline-info{
|
||||
border: 1px solid $info;
|
||||
color: $info;
|
||||
}
|
||||
.badge-outline-warning{
|
||||
border: 1px solid $warning;
|
||||
color: $warning;
|
||||
}
|
||||
.badge-outline-danger{
|
||||
border: 1px solid $danger;
|
||||
color: $danger;
|
||||
}
|
||||
.badge-outline-light{
|
||||
border: 1px solid $border;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.badge-outline-dark{
|
||||
border: 1px solid $dark;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.badge-xs {
|
||||
font-size: 10px;
|
||||
padding: 0px 5px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.badge-sm {
|
||||
font-size: 11px;
|
||||
padding: 5px 8px;
|
||||
line-height: 11px;
|
||||
}
|
||||
//.badge-md {
|
||||
// font-size: 13px;
|
||||
// padding: 0px 9px;
|
||||
// line-height: 25px;
|
||||
//}
|
||||
.badge-lg {
|
||||
font-size: 14px;
|
||||
padding: 0px 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.badge-xl {
|
||||
font-size: 15px;
|
||||
padding: 0px 15px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.badge-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
.badge-success {
|
||||
background-color: $success;
|
||||
}
|
||||
.badge-info {
|
||||
background-color: $info;
|
||||
}
|
||||
.badge-primary {
|
||||
background-color: $primary;
|
||||
}
|
||||
.badge-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
.badge-danger {
|
||||
background-color: $danger;
|
||||
}
|
||||
.badge-dark {
|
||||
background-color: $dark;
|
||||
}
|
||||
.badge-light {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.light.badge-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
.light.badge-success {
|
||||
background-color: $success-light;
|
||||
color:$success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-info {
|
||||
background-color: $info-light;
|
||||
color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-primary {
|
||||
background-color: $primary-light;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-secondary {
|
||||
background-color: $secondary-light;
|
||||
color:$secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.light.badge-warning {
|
||||
background-color: $warning-light;
|
||||
color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-danger {
|
||||
background-color: $danger-light;
|
||||
color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-dark {
|
||||
background-color: $dark-light;
|
||||
color:$dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
|
||||
.bootstrap-label{
|
||||
.label{
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-demo{
|
||||
|
||||
.badge{
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-badge-buttons{
|
||||
|
||||
button{
|
||||
margin-right: .2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
114
public/style/scss/components/ui/_ui-breadcrumb.scss
Normal file
114
public/style/scss/components/ui/_ui-breadcrumb.scss
Normal file
@ -0,0 +1,114 @@
|
||||
|
||||
.welcome-text{
|
||||
span,
|
||||
p{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.page-titles {
|
||||
margin-bottom: 25px;
|
||||
display: block;
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
padding: 20px 40px;
|
||||
margin-top: -15px;
|
||||
background: $body-bg;
|
||||
display: block;
|
||||
|
||||
|
||||
|
||||
|
||||
[class*="col-"]{
|
||||
display: block !important;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
@include custommq($max: 1600px) {
|
||||
margin-left: -30px;
|
||||
margin-top: 0px;
|
||||
margin-right: -30px;
|
||||
margin-bottom: 30px;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
margin-right: -15px;
|
||||
margin-bottom: 0px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.justify-content-sm-end{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0;
|
||||
color: #000;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
span {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
// font-size: 0.875rem;
|
||||
li {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 18px;
|
||||
@include respond('phone-land') {
|
||||
font-size: 15px;
|
||||
}
|
||||
a{
|
||||
color: #656773;
|
||||
|
||||
}
|
||||
|
||||
&.active a{
|
||||
color: $primary;
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
|
||||
/* .breadcrumb-item + .breadcrumb-item {
|
||||
&:before {
|
||||
content: "\e606";
|
||||
font-family: 'simple-line-icons';
|
||||
// font-weight: 4;
|
||||
font-size: 10px;
|
||||
}
|
||||
} */
|
||||
|
||||
&-datepicker{
|
||||
font-size: 0.75rem;
|
||||
color: $muted;
|
||||
|
||||
&__icon{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-widget{
|
||||
.border-dark{
|
||||
border-color: $gray-300!important;
|
||||
}
|
||||
h4{
|
||||
color: $strong;
|
||||
font-weight: 600;
|
||||
}
|
||||
@include respond('phone') {
|
||||
text-align: left!important;
|
||||
margin-bottom: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
989
public/style/scss/components/ui/_ui-button.scss
Normal file
989
public/style/scss/components/ui/_ui-button.scss
Normal file
@ -0,0 +1,989 @@
|
||||
// .qx_btn{
|
||||
// min-height: 50px;
|
||||
// min-width: 100px;
|
||||
// // font-weight: 700;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
|
||||
|
||||
button{
|
||||
cursor: pointer;
|
||||
|
||||
&:focus{
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary{
|
||||
color:$white;
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
padding:0.938rem 1.5rem;
|
||||
border-radius: $radius;
|
||||
font-weight:500;
|
||||
font-size:1rem;
|
||||
// border-radius: 0px;
|
||||
// box-shadow: 0 4px 6px rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
|
||||
&:hover, &:focus, &:active, &.active{
|
||||
outline: 0!important;
|
||||
// box-shadow: 0 4px 05x rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
@include respond('laptop') {
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sharp {
|
||||
min-width: 40px;
|
||||
padding: 7px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.sharp.btn-xs{
|
||||
padding: 3px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
}
|
||||
.light{
|
||||
|
||||
&.tp-btn{
|
||||
background-color:transparent;
|
||||
}
|
||||
&.btn-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
&.btn-success {
|
||||
background-color: $success-light;
|
||||
border-color: $success-light;
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-info {
|
||||
background-color: $info-light;
|
||||
border-color: $info-light;
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-primary {
|
||||
background-color: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
svg{
|
||||
path{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
background-color: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color:transparent;
|
||||
color:$white;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-warning {
|
||||
background-color: $warning-light;
|
||||
border-color: $warning-light;
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
background-color: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$danger;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
svg path{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
background-color: $dark-light;
|
||||
border-color: $dark-light;
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-opacity;
|
||||
border-color:transparent;
|
||||
color:$white;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $dark;
|
||||
border-color: $dark;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.tp-btn{
|
||||
background-color:transparent;
|
||||
border-color: transparent;
|
||||
&.btn-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
&.btn-success {
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-info {
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-primary {
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-warning {
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$danger;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-light {
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $light;
|
||||
border-color: $light;
|
||||
color: $dark;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $dark;
|
||||
border-color: $dark;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.tp-btn-light{
|
||||
background-color:transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&.btn-success {
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $success-light;
|
||||
border-color: $success-light;
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-info {
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $info-light;
|
||||
border-color: $info-light;
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-primary {
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-warning {
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $warning-light;
|
||||
border-color: $warning-light;
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$danger;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $dark-light;
|
||||
border-color: $dark-light;
|
||||
color: $dark;
|
||||
[fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.shadow.btn-primary {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($primary,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($primary,0.2) !important;
|
||||
}
|
||||
.shadow.btn-secondary {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($secondary,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($secondary,0.2) !important;
|
||||
}
|
||||
.shadow.btn-warning {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($warning,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($warning,0.2) !important;
|
||||
}
|
||||
.shadow.btn-danger {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($danger,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($danger,0.2) !important;
|
||||
}
|
||||
.shadow.btn-info {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($info,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($info,0.2) !important;
|
||||
}
|
||||
.shadow.btn-success {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($success,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($success,0.2) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn-xxs {
|
||||
padding: 6px 15px;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.btn-xs {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.438rem 1rem;
|
||||
// padding : 0.5 2.5rem !important;
|
||||
font-weight: 600;
|
||||
@include respond('laptop') {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 0.813rem !important;
|
||||
padding:0.625rem 1rem;
|
||||
@include respond('laptop') {
|
||||
padding: 0.375rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.btn-md {
|
||||
font-size: 0.813rem !important;
|
||||
padding: 0.875rem 1.25rem;
|
||||
@include respond('laptop') {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
}
|
||||
.btn-lg{
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem !important;
|
||||
@include respond('laptop') {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xl{
|
||||
padding: 0.6rem 1rem;
|
||||
|
||||
&.btn-default{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.btn-icon-right {
|
||||
border-left: 1px solid white;
|
||||
display: inline-block;
|
||||
margin: -.8rem 0 -.8rem 1rem;
|
||||
padding: 0.4375rem 0 0.4375rem 1rem;
|
||||
margin: -1rem -0.25rem -1rem 1rem;
|
||||
padding: 1rem 0 1rem 1.25rem;
|
||||
@include respond ('laptop'){
|
||||
padding: 1rem 0 1rem 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon-left {
|
||||
background: #fff;
|
||||
border-radius: 10rem;
|
||||
display: inline-block;
|
||||
margin: -0.5rem 0.75rem -0.5rem -1.188rem;
|
||||
padding: 0.5rem 0.80rem 0.5rem;
|
||||
float: left;
|
||||
@include respond('tab-land') {
|
||||
margin: -0.5rem 0.75rem -0.5rem -0.800rem;
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.btn-icon-left {
|
||||
margin: -.5rem -1.5rem -.5rem 1rem;
|
||||
}
|
||||
.btn-icon-right {
|
||||
border-left: 0px solid white;
|
||||
display: inline-block;
|
||||
margin: -.8rem 1rem -.8rem 0;
|
||||
padding: 0.4375rem 1rem 0.4375rem 0;
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
}
|
||||
.toggle-dropdown::after {
|
||||
margin-left: 0.755em;
|
||||
}
|
||||
|
||||
.social-btn-icon {
|
||||
.btn {
|
||||
min-width : 7.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
.btn {
|
||||
padding: .7rem 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
height : 5rem;
|
||||
width : 5rem;
|
||||
border-radius: 50% !important;
|
||||
|
||||
&-sm {
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
&-md {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
font-size: 2.5rem;
|
||||
|
||||
i{
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
font-size: 3.2rem;
|
||||
|
||||
i{
|
||||
font-size: 3.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-page{
|
||||
.btn{
|
||||
min-width: 110px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// btn sizes
|
||||
.size-1{
|
||||
min-width: 160px !important;
|
||||
font-size: 24px;
|
||||
padding: 0.68rem 0.75rem;
|
||||
}
|
||||
|
||||
.size-2{
|
||||
font-size: 20px;
|
||||
min-width: 130px !important;
|
||||
padding: 0.57rem 0.75rem;
|
||||
}
|
||||
|
||||
.size-3{
|
||||
font-size: 14px;
|
||||
min-width: 110px !important;
|
||||
padding: 0.536rem 0.75rem;
|
||||
}
|
||||
.size-4{
|
||||
font-size: 14px;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
.size-5{
|
||||
font-size: 14px;
|
||||
min-width: 90px !important;
|
||||
padding: .22rem 0.75rem;
|
||||
}
|
||||
.size-6{
|
||||
font-size: 13px;
|
||||
min-width: 80px !important;
|
||||
padding: 0.097rem 0.75rem;
|
||||
}
|
||||
.size-7{
|
||||
font-size: 12px;
|
||||
min-width: 60px !important;
|
||||
padding: 0.001rem 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.btn-light {
|
||||
background : $light;
|
||||
border-color: $light;
|
||||
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : lighten($light, 25%);
|
||||
border-color: lighten($light, 25%);
|
||||
}
|
||||
}
|
||||
.btn-outline-primary{
|
||||
&:hover{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.btn-outline-light{
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.btn-outline-secondary{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.btn-outline-dark{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-dark {
|
||||
background : $dark;
|
||||
border-color: $dark;
|
||||
color : $white;
|
||||
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($dark, 10%);
|
||||
color : $white;
|
||||
border-color: darken($dark, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group{
|
||||
|
||||
&.btn-rounded{
|
||||
|
||||
.btn:first-child{
|
||||
border-top-left-radius: 30px;
|
||||
border-bottom-left-radius: 30px;
|
||||
}
|
||||
|
||||
.btn:last-child{
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
///////////////////
|
||||
// Social Buttons
|
||||
///////////////////
|
||||
|
||||
.btn-facebook {
|
||||
background : $facebook;
|
||||
border-color: $facebook;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($facebook, 10%);
|
||||
color : $white;
|
||||
border-color: darken($facebook, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
background : $twitter;
|
||||
border-color: $twitter;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($twitter, 10%);
|
||||
color : $white;
|
||||
border-color: darken($twitter, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-youtube {
|
||||
background : $youtube;
|
||||
border-color: $youtube;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($youtube, 10%);
|
||||
color : $white;
|
||||
border-color: darken($youtube, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-instagram {
|
||||
background : $instagram;
|
||||
border-color: $instagram;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($instagram, 10%);
|
||||
color : $white;
|
||||
border-color: darken($instagram, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pinterest {
|
||||
background : $pinterest;
|
||||
border-color: $pinterest;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($pinterest, 10%);
|
||||
color : $white;
|
||||
border-color: darken($pinterest, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
background : $linkedin;
|
||||
border-color: $linkedin;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($linkedin, 10%);
|
||||
color : $white;
|
||||
border-color: darken($linkedin, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google-plus {
|
||||
background : $google-plus;
|
||||
border-color: $google-plus;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($google-plus, 10%);
|
||||
color : $white;
|
||||
border-color: darken($google-plus, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background : $google;
|
||||
border-color: $google;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($google, 10%);
|
||||
color : $white;
|
||||
border-color: darken($google, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-snapchat {
|
||||
background : $snapchat;
|
||||
border-color: $snapchat;
|
||||
color : $black;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($snapchat, 10%);
|
||||
color : $black;
|
||||
border-color: darken($snapchat, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-whatsapp {
|
||||
background : $whatsapp;
|
||||
border-color: $whatsapp;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($whatsapp, 10%);
|
||||
color : $white;
|
||||
border-color: darken($whatsapp, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tumblr {
|
||||
background : $tumblr;
|
||||
border-color: $tumblr;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($tumblr, 10%);
|
||||
color : $white;
|
||||
border-color: darken($tumblr, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reddit {
|
||||
background : $reddit;
|
||||
border-color: $reddit;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($reddit, 10%);
|
||||
color : $white;
|
||||
border-color: darken($reddit, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spotify {
|
||||
background : $spotify;
|
||||
border-color: $spotify;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($spotify, 10%);
|
||||
color : $white;
|
||||
border-color: darken($spotify, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-yahoo {
|
||||
background : $yahoo;
|
||||
border-color: $yahoo;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($yahoo, 10%);
|
||||
color : $white;
|
||||
border-color: darken($yahoo, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dribbble {
|
||||
background : $dribbble;
|
||||
border-color: $dribbble;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($dribbble, 10%);
|
||||
color : $white;
|
||||
border-color: darken($dribbble, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-skype {
|
||||
background : $skype;
|
||||
border-color: $skype;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($skype, 10%);
|
||||
color : $white;
|
||||
border-color: darken($skype, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-quora {
|
||||
background : $quora;
|
||||
border-color: $quora;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($quora, 10%);
|
||||
color : $white;
|
||||
border-color: darken($quora, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vimeo {
|
||||
background : $vimeo;
|
||||
border-color: $vimeo;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($vimeo, 10%);
|
||||
color : $white;
|
||||
border-color: darken($vimeo, 10%);
|
||||
}
|
||||
}
|
||||
246
public/style/scss/components/ui/_ui-card.scss
Normal file
246
public/style/scss/components/ui/_ui-card.scss
Normal file
@ -0,0 +1,246 @@
|
||||
.card {
|
||||
margin-bottom: 1.875rem;
|
||||
background-color: $white;
|
||||
transition: all .5s ease-in-out;
|
||||
position: relative;
|
||||
border: 0px solid transparent;
|
||||
border-radius:$radius;
|
||||
box-shadow: 0px 12px 23px 0px rgba($secondary,0.04);
|
||||
height: calc(100% - 30px);
|
||||
|
||||
// z-index: 0;
|
||||
@include custommq($max: 575px) {
|
||||
margin-bottom:0.938rem;
|
||||
height: calc(100% - 0.938rem);
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding: 1.875rem;
|
||||
@include respond('phone') {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
// line-height: 2.2rem;
|
||||
color: #000;
|
||||
text-transform: capitalize;
|
||||
// margin-bottom: 1.5rem;
|
||||
|
||||
&--large{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&--medium{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&--small{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
border-color: $border;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
padding:1.5rem 1.875rem 1.25rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// min-height: 65px;
|
||||
@include respond('phone') {
|
||||
padding: 1.25rem 1rem 1.25rem;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.subtitle{
|
||||
padding-top: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-color: $border;
|
||||
background: transparent;
|
||||
padding: 1.25rem 1.875rem 1.25rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
@include respond('phone') {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-card{
|
||||
&.card{
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////
|
||||
// Card action
|
||||
///////////////////
|
||||
.card-action {
|
||||
> a {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 5px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
background: darken($primary,57%);
|
||||
color: $white;
|
||||
margin-right: 8px;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover,&:focus{
|
||||
background: darken($primary,57%);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
i,span{
|
||||
font-size: 1rem;
|
||||
// color: #333333;
|
||||
}
|
||||
// padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
margin-right: 8px;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: darken($primary,57%);
|
||||
color: $primary;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
|
||||
&:hover,&:focus{
|
||||
background: darken($primary,57%);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
padding: 0;
|
||||
line-height: 27px;
|
||||
color: $white;
|
||||
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99999999;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 999
|
||||
}
|
||||
|
||||
.card-loader i {
|
||||
margin: 0 auto;
|
||||
background: darken($primary,7%);
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.rotate-refresh {
|
||||
-webkit-animation: mymove 0.8s infinite linear;
|
||||
animation: mymove 0.8s infinite linear;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.date_picker {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
border: 1px solid $border;
|
||||
cursor: pointer;
|
||||
border-radius: .375rem;
|
||||
}
|
||||
.border-0{
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes mymove {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mymove {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
50
public/style/scss/components/ui/_ui-carousel.scss
Normal file
50
public/style/scss/components/ui/_ui-carousel.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.carousel-custom{
|
||||
|
||||
&-prev, &-next{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: $white;
|
||||
text-align: center;
|
||||
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: linear-gradient(to right, rgba(245, 60, 121, 0.99) 0%, rgba(246, 104, 47, 0.99) 100%);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&-next{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&-prev{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.carousel-caption{
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.78);
|
||||
z-index:0;
|
||||
|
||||
h5{
|
||||
color: $white;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
142
public/style/scss/components/ui/_ui-dropdown.scss
Normal file
142
public/style/scss/components/ui/_ui-dropdown.scss
Normal file
@ -0,0 +1,142 @@
|
||||
.dropdown-toggle:focus {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
.dropdown-outline{
|
||||
border: .1rem solid $primary;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
box-shadow: 0 10px 40px 0 rgba(32,28,69,0.1);
|
||||
margin-top:0;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
|
||||
.dropdown-item{
|
||||
font-size: 16px;
|
||||
color:$body-color;
|
||||
padding: 0.5rem 1.75rem;
|
||||
|
||||
@include respond('laptop') {
|
||||
padding: 0.375rem 1rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active{
|
||||
color: $primary;
|
||||
background:#F4F5F9;
|
||||
}
|
||||
&.active,
|
||||
&:active{
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
right: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Custom Dropdown
|
||||
///////////////////
|
||||
.dropdown-toggle-split {
|
||||
padding: 0 10px;
|
||||
opacity: 0.85;
|
||||
&:after{
|
||||
margin-left:0 !important;
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
.dropleft .dropdown-toggle:before,
|
||||
.dropright .dropdown-toggle:before,
|
||||
.dropup .dropdown-toggle:after,
|
||||
.dropdown-toggle:after {
|
||||
content:"\f107";
|
||||
font-family:FontAwesome;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.25em;
|
||||
line-height: 1;
|
||||
}
|
||||
.dropup .dropdown-toggle:after{
|
||||
content:"\f106";
|
||||
}
|
||||
.dropleft .dropdown-toggle::before {
|
||||
content:"\f104";
|
||||
}
|
||||
.dropright .dropdown-toggle::before {
|
||||
content:"\f105";
|
||||
}
|
||||
.dropright .dropdown-toggle::after {
|
||||
content:none;
|
||||
}
|
||||
.custom-dropdown{
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.dropdown-menu{
|
||||
border: 0px;
|
||||
min-width: 160px;
|
||||
// padding: 1rem;
|
||||
|
||||
}
|
||||
}
|
||||
.card-action{
|
||||
.custom-dropdown{
|
||||
// padding: 15px;
|
||||
margin: 0px;
|
||||
background: lighten($primary, 30%);
|
||||
&.show,&:focus,&:hover{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
i{
|
||||
display: inline-block;
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
.dropdown-dots{
|
||||
position: relative;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
background: rgba($dark, 0.4);
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
&:after,
|
||||
&:before{
|
||||
content: "";
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
background: rgba($dark, 0.4);
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
}
|
||||
&:after{
|
||||
right: -8px;
|
||||
}
|
||||
&:before{
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
&.text-white{
|
||||
background: rgba($white, 0.7);
|
||||
&:after,
|
||||
&:before{
|
||||
background: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
20
public/style/scss/components/ui/_ui-grid.scss
Normal file
20
public/style/scss/components/ui/_ui-grid.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.grid-col {
|
||||
padding: 0.5rem !important;
|
||||
background:$l-bg;
|
||||
// box-shadow: 2px 3px 10px 0px rgba(119, 119, 119, 0.1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row.grid {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row.grid .grid-col:first-child{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
154
public/style/scss/components/ui/_ui-label.scss
Normal file
154
public/style/scss/components/ui/_ui-label.scss
Normal file
@ -0,0 +1,154 @@
|
||||
.label {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
padding: .2rem .8rem;
|
||||
|
||||
&-fixed {
|
||||
width: 7.5rem;
|
||||
padding: .6rem 0;
|
||||
|
||||
&-lg {
|
||||
width: 9.5rem;
|
||||
padding: .6rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-big {
|
||||
width: 16.8rem;
|
||||
font-size: 1.4rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-xl {
|
||||
width: 10.5rem;
|
||||
padding: 1.1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
width: 9.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-md {
|
||||
width: 8.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
width: 7.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
|
||||
.label-primary{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-secondary{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-info{
|
||||
background: $info;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-success{
|
||||
background: $success;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-warning{
|
||||
background: $warning;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-danger{
|
||||
background: $danger;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.label-light{
|
||||
background: $light;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
|
||||
.label-dark{
|
||||
background: $dark;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
code{
|
||||
word-break: break-word;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
background: lighten($danger, 33%);
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: rgba($danger, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.heading-labels{
|
||||
color: #333333;
|
||||
|
||||
& > *{
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
|
||||
h1{
|
||||
.label{
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
padding: .4rem .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
.label{
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
padding: 0.3rem .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3{
|
||||
.label{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h4{
|
||||
.label{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h5{
|
||||
.label{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h6{
|
||||
.label{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
public/style/scss/components/ui/_ui-list-group.scss
Normal file
36
public/style/scss/components/ui/_ui-list-group.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.list-group-item {
|
||||
background-color: rgba(255,255,255,0);
|
||||
border: 1px solid $border;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item.disabled, .list-group-item:disabled {
|
||||
color: #fff;
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
[class*="bg-"]{
|
||||
.list-group-item{
|
||||
border-color:rgba($white, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-warning{
|
||||
.list-group-item{
|
||||
border-color:rgba($black, 0.05);
|
||||
}
|
||||
}
|
||||
// .list-group-item-action {
|
||||
// color: #fff;
|
||||
// }
|
||||
5
public/style/scss/components/ui/_ui-media.scss
Normal file
5
public/style/scss/components/ui/_ui-media.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.media{
|
||||
img{
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
146
public/style/scss/components/ui/_ui-menu.scss
Normal file
146
public/style/scss/components/ui/_ui-menu.scss
Normal file
@ -0,0 +1,146 @@
|
||||
.vertical-card__menu {
|
||||
// box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&--image {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--status {
|
||||
&.closed {
|
||||
background: $danger;
|
||||
|
||||
&:after {
|
||||
border-top: 10px solid $danger;
|
||||
}
|
||||
|
||||
.ribbon-curve {
|
||||
border-top: 11px solid $danger;
|
||||
border-bottom: 10px solid $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--desc {
|
||||
// padding: 0.9375rem 1.25rem;
|
||||
// border-left: 1px solid #e5e5e5;
|
||||
// border-right: 1px solid #e5e5e5;
|
||||
|
||||
p {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--price {
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--rating {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&--title {
|
||||
// margin-bottom: 0.625rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--button {
|
||||
button {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--location {
|
||||
// font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 15px 20px;
|
||||
background-color: $border;
|
||||
// border: 1px solid #e5e5e5;
|
||||
border-top: none;
|
||||
|
||||
@include custommq($min: 1200px, $max: 1440px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
span{
|
||||
color: $dark;
|
||||
margin-right: 0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-card__menu {
|
||||
box-shadow: 0 0 7px rgba(173, 173, 173, 0.32);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--image {
|
||||
flex-basis: 30%;
|
||||
max-width: 30%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
max-width: unset;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
&--fav {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&--price {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--rating {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
&--footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.prev_price {
|
||||
text-decoration: line-through;
|
||||
// color: $muted;
|
||||
font-size: 80%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
108
public/style/scss/components/ui/_ui-modal.scss
Normal file
108
public/style/scss/components/ui/_ui-modal.scss
Normal file
@ -0,0 +1,108 @@
|
||||
// .modal{
|
||||
// border: 0;
|
||||
// z-index: 9999999999;
|
||||
|
||||
// &-content{
|
||||
// border: 0;
|
||||
// box-shadow: 0px 2px 21px 6px rgba(70, 66, 66, 0.26);
|
||||
// }
|
||||
// }
|
||||
|
||||
// // primary modal rule
|
||||
// #primaryModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $primary;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #fff;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// //danger modal rule
|
||||
// #dangerModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $danger;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #fff;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// //warning modal rule
|
||||
// #warningModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $warning;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #a39e06 ;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// //success modal rule
|
||||
// #successModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $success;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #fff;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// .bootstrap-modal-wrapper{
|
||||
|
||||
// button:not(:last-child){
|
||||
// margin-right: 7px;
|
||||
// }
|
||||
|
||||
// button{
|
||||
// margin-bottom: .5rem;
|
||||
|
||||
// &:focus{
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.modal-header{
|
||||
padding: 1rem 1.875rem;
|
||||
|
||||
.close{
|
||||
padding: 0.875rem 1.815rem;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
float: none;
|
||||
top: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: 1.875rem;
|
||||
}
|
||||
.modal-footer{
|
||||
padding: 1rem 1.875rem;
|
||||
}
|
||||
.modal-content{
|
||||
border-radius:$radius;
|
||||
}
|
||||
.modal-backdrop{
|
||||
z-index: 10!important;
|
||||
}
|
||||
320
public/style/scss/components/ui/_ui-pagination.scss
Normal file
320
public/style/scss/components/ui/_ui-pagination.scss
Normal file
@ -0,0 +1,320 @@
|
||||
.pagination .page-item{
|
||||
|
||||
.page-link{
|
||||
|
||||
|
||||
&:hover{
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&.active .page-link{
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.page-item {
|
||||
|
||||
&.page-indicator .page-link {
|
||||
padding: .65rem .8rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.page-indicator:hover{
|
||||
.page-link{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
// height: 3.125rem;
|
||||
text-align: center;
|
||||
z-index:2;
|
||||
padding: 0.55rem 1rem;
|
||||
font-size: 1rem;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: $dark;
|
||||
// line-height: 2.375rem;
|
||||
border: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
color: $d-ctl;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
&:hover i,span{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus{
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: $white;
|
||||
box-shadow:0 10px 20px 0px rgba($primary, 0.2);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
// width: 4.0625rem;
|
||||
color: $dark;
|
||||
@include transitionMedium;
|
||||
}
|
||||
|
||||
&:last-child .page-link{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:first-child .page-link{
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.no-bg{
|
||||
li:not(.page-indicator):not(.active) .page-link{
|
||||
background:transparent;
|
||||
border-color:transparent;
|
||||
|
||||
}
|
||||
&.pagination-primary{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-danger{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-info{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-warning{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-primary{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$primary-light;
|
||||
border-color:$primary-light;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary-opacity;
|
||||
border-color:transparent;
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
box-shadow:0 10px 20px 0px rgba($primary, 0.2);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-danger{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$danger-light;
|
||||
border-color:$danger-light;
|
||||
color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$danger-opacity;
|
||||
border-color:transparent;
|
||||
color:$danger;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
box-shadow:0 10px 20px 0px rgba($danger, 0.2);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$info-light;
|
||||
border-color:$info-light;
|
||||
color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$info-opacity;
|
||||
border-color:transparent;
|
||||
color:$info;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
box-shadow:0 10px 20px 0px rgba($info, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$warning-light;
|
||||
border-color:$warning-light;
|
||||
color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$warning-opacity;
|
||||
border-color:transparent;
|
||||
color:$warning;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
box-shadow:0 10px 20px 0px rgba($warning, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gutter{
|
||||
|
||||
.page-item{
|
||||
margin-right: 7px;
|
||||
|
||||
.page-link{
|
||||
border-radius: $radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-circle{
|
||||
.page-item{
|
||||
margin-right: 7px;
|
||||
|
||||
.page-link, &.page-indicator .page-link{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
line-height: 40px;
|
||||
border-radius: 50% !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-md{
|
||||
|
||||
.page-item{
|
||||
|
||||
.page-link{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-sm{
|
||||
|
||||
.page-item{
|
||||
|
||||
&.page-indicator .page-link {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page-link{
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-xs{
|
||||
|
||||
.page-item{
|
||||
|
||||
&.page-indicator .page-link {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.page-link{
|
||||
padding: 0;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
73
public/style/scss/components/ui/_ui-popover.scss
Normal file
73
public/style/scss/components/ui/_ui-popover.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.popover{
|
||||
border: 2px solid $secondary;
|
||||
min-width: 210px;
|
||||
box-shadow: 0 0 30px 0 rgba(0,0,0,0.1);
|
||||
border-radius:0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
&-header{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
font-weight: 300;
|
||||
border-radius:0;
|
||||
&::before{
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
font-size: 0.75rem;
|
||||
|
||||
}
|
||||
.popover-header{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $dark-card;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-popover-wrapper{
|
||||
.bootstrap-popover:not(:last-child){
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.bootstrap-popover{
|
||||
margin-bottom: .5rem;
|
||||
|
||||
button:hover,button:focus{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .tooltip {
|
||||
// font-size: 15px;
|
||||
// }
|
||||
|
||||
|
||||
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
|
||||
bottom: 0px;
|
||||
border-top-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
|
||||
right: 0px;
|
||||
border-left-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
|
||||
left: 0px;
|
||||
border-right-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
|
||||
top: 0px;
|
||||
border-bottom-color: $secondary;
|
||||
}
|
||||
|
||||
.note-popover{
|
||||
display: none;
|
||||
}
|
||||
0
public/style/scss/components/ui/_ui-preloader.scss
Normal file
0
public/style/scss/components/ui/_ui-preloader.scss
Normal file
183
public/style/scss/components/ui/_ui-pricing.scss
Normal file
183
public/style/scss/components/ui/_ui-pricing.scss
Normal file
@ -0,0 +1,183 @@
|
||||
.pricing-wrapper {
|
||||
margin-top: 7rem;
|
||||
|
||||
.pricing-heading-text {
|
||||
text-align: center;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
h2 {
|
||||
font-size: 4.5rem;
|
||||
line-height: 1.2;
|
||||
color: $pale-sky;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $pale-sky;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.plan-swither {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
margin-top: 3rem;
|
||||
|
||||
&>* {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.switch label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
height: 5.5rem;
|
||||
width: 5.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.single-pricing-table {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-height: 89rem;
|
||||
|
||||
.upper-border {
|
||||
height: 1.5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
margin-top: 2rem;
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
padding: 2.8rem 0;
|
||||
margin: 3rem 0;
|
||||
display: flex;
|
||||
color: $white;
|
||||
justify-content: center;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 6rem;
|
||||
color: $white;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.currency-timeplan {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-icon {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.plan-specification {
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 2.5rem 0;
|
||||
|
||||
del{
|
||||
color: $athensGray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
border: .1rem solid $border;
|
||||
margin-top: 4.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2290ff;
|
||||
transition: all .2s;
|
||||
padding: 0.9rem 1.8rem;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-footer-text {
|
||||
margin-bottom: 7rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
b{
|
||||
border-bottom: 1px solid $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
padding: .95rem 2.5rem;
|
||||
|
||||
i{
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
86
public/style/scss/components/ui/_ui-progressbar.scss
Normal file
86
public/style/scss/components/ui/_ui-progressbar.scss
Normal file
@ -0,0 +1,86 @@
|
||||
// Variable.scss
|
||||
.progress-bar {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.progress-bar-primary {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.progress-bar-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.progress-bar-info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
.progress-bar-danger {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.progress-bar-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.progress-bar-pink {
|
||||
background-color: $pink;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
// box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.13);
|
||||
border-radius: $radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
&-bar{
|
||||
// outline: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-vertical {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: 2rem;
|
||||
min-height: 17rem;
|
||||
position: relative;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-vertical-bottom {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: 2rem;
|
||||
min-height: 17rem;
|
||||
position: relative;
|
||||
transform: rotate(180deg);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-animated {
|
||||
animation-duration: 5s;
|
||||
animation-name: myanimation;
|
||||
transition: all 5s ease 0s;
|
||||
}
|
||||
|
||||
@keyframes myanimation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes myanimation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
161
public/style/scss/components/ui/_ui-ribbon.scss
Normal file
161
public/style/scss/components/ui/_ui-ribbon.scss
Normal file
@ -0,0 +1,161 @@
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
&__one {
|
||||
top: 15px;
|
||||
left: -11px;
|
||||
min-height: 20px;
|
||||
min-width: 52px;
|
||||
text-align: center;
|
||||
padding: 3px 10px;
|
||||
background: #3AB54B;
|
||||
color: #fff;
|
||||
font-size: 0.625rem;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid #239132;
|
||||
border-left: 11px solid transparent;
|
||||
left: 0;
|
||||
content: "";
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__two {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background: $warning;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: $white;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
border-radius: 3px;
|
||||
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// content: "";
|
||||
// -webkit-clip-path: polygon(90% 0, 100% 100%, 50% 75%, 0 100%, 10% 0, 50% 0);
|
||||
// clip-path: polygon(90% 0, 100% 100%, 50% 75%, 0 100%, 10% 0, 50% 0);
|
||||
// height: 22px;
|
||||
// width: 40px;
|
||||
// left: 50%;
|
||||
// top: 75%;
|
||||
// background: $primary;
|
||||
// transform: translateX(-50%);
|
||||
// }
|
||||
}
|
||||
|
||||
&__three {
|
||||
left: -1.875rem;
|
||||
top: 0.875rem;
|
||||
width: 6.875rem;
|
||||
height: 1.5625rem;
|
||||
background-color: $danger;
|
||||
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(-45deg);
|
||||
color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__four {
|
||||
left: 8px;
|
||||
top: -8px;
|
||||
width: 110px;
|
||||
height: 50px;
|
||||
background-color: $primary;
|
||||
z-index: auto;
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:after {
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
// &:after, &:before {
|
||||
|
||||
// }
|
||||
|
||||
&:after, &:before {
|
||||
z-index: -1;
|
||||
background-color: lighten($color: $primary, $amount: 20%);
|
||||
top: 3px;
|
||||
transform: rotate(45deg);
|
||||
content: "";
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&__five {
|
||||
left: -1.875rem;
|
||||
top: 0.625rem;
|
||||
width: 6.875rem;
|
||||
height: 1.875rem;
|
||||
background-color: $primary;
|
||||
transform: rotate(-45deg);
|
||||
font-size: 0.75rem;
|
||||
color: $white;
|
||||
padding-bottom: 0.3125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 50px 50px 50px;
|
||||
border-color: transparent transparent $primary transparent;
|
||||
left: 0.25rem;
|
||||
top: -2.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__six {
|
||||
left: 0;
|
||||
top: 1.125rem;
|
||||
width: 6.875rem;
|
||||
height: 2.375rem;
|
||||
background-color: $primary;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
|
||||
display: flex;
|
||||
font-size: 1.25rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-curve {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -6px;
|
||||
width: 10px;
|
||||
height: 11px;
|
||||
border-top: 11px solid #3AB54B;
|
||||
border-bottom: 10px solid #3AB54B;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
21
public/style/scss/components/ui/_ui-scrollbar.scss
Normal file
21
public/style/scss/components/ui/_ui-scrollbar.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.jsgrid-grid-body,
|
||||
.dataTables_scrollBody,
|
||||
.table-responsive {
|
||||
&::-webkit-scrollbar {
|
||||
background-color: #F5F5F5;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: $body-color;
|
||||
}
|
||||
}
|
||||
103
public/style/scss/components/ui/_ui-step.scss
Normal file
103
public/style/scss/components/ui/_ui-step.scss
Normal file
@ -0,0 +1,103 @@
|
||||
|
||||
|
||||
|
||||
%remain-steps {
|
||||
&:before {
|
||||
content: counter(stepNum);
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-steps {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
>li {
|
||||
counter-increment: stepNum;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: $primary;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\2713';
|
||||
display: block;
|
||||
margin: 0 auto 4px;
|
||||
background-color: $white;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
border: {
|
||||
width: 2px;
|
||||
style: solid;
|
||||
color: $primary;
|
||||
radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: $primary;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
@extend %remain-steps;
|
||||
|
||||
&:before {
|
||||
background-color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
~li {
|
||||
color: $body-color;
|
||||
@extend %remain-steps;
|
||||
|
||||
&:before {
|
||||
background-color: $border;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
85
public/style/scss/components/ui/_ui-tab.scss
Normal file
85
public/style/scss/components/ui/_ui-tab.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
border-radius: $radius;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.default-tab{
|
||||
.nav-link{
|
||||
background: transparent;
|
||||
border-radius: 0px;
|
||||
font-weight: 500;
|
||||
i{
|
||||
display:inline-block;
|
||||
transform:scale(1.5);
|
||||
color:$primary;
|
||||
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active{
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color: #dee2e6 #dee2e6 #fff #ebeef6;
|
||||
border-radius: $radius $radius 0 0;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
border-color: transparent transparent $d-border transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tab-1{
|
||||
.nav-link{
|
||||
background: transparent;
|
||||
border-radius: 0px;
|
||||
font-weight: 500;
|
||||
border-bottom:3px solid transparent;
|
||||
border-width: 0 0px 3px 0;
|
||||
|
||||
i{
|
||||
display:inline-block;
|
||||
transform:scale(1.5);
|
||||
color:$primary;
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active{
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color:$primary ;
|
||||
border-radius:0;
|
||||
color: $primary;
|
||||
border-width: 0 0px 3px 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.nav-pills{
|
||||
|
||||
&.light{
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link{
|
||||
background:$primary-light;
|
||||
color:$primary;
|
||||
box-shadow:none;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.nav-link.active,
|
||||
.show > .nav-link{
|
||||
box-shadow:0 0 20px 0 rgba($primary, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
297
public/style/scss/components/ui/_ui-timeline.scss
Normal file
297
public/style/scss/components/ui/_ui-timeline.scss
Normal file
@ -0,0 +1,297 @@
|
||||
|
||||
.widget-timeline{
|
||||
|
||||
.timeline {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
&:before {
|
||||
top: 20px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
left: 9px;
|
||||
margin-right: -1.5px;
|
||||
background: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-border;
|
||||
}
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
left: auto;
|
||||
right: 9px;
|
||||
margin-right: auto;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
|
||||
}
|
||||
> li {
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
> {
|
||||
.timeline-panel {
|
||||
border-radius: $radius;
|
||||
padding: 15px 20px;
|
||||
position: relative;
|
||||
display:block;
|
||||
margin-left: 40px;
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
span{
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
p{
|
||||
font-size:14px;
|
||||
}
|
||||
&:after{
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: inherit;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0px 0px 1px 1px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
transform: rotate(45deg);
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
.timeline-badge {
|
||||
border-radius: 50%;
|
||||
height: 22px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 22px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background:$white;
|
||||
padding:4px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-card;
|
||||
}
|
||||
&:after{
|
||||
content:"";
|
||||
width:10px;
|
||||
height:10px;
|
||||
border-radius:100%;
|
||||
display:block;
|
||||
}
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
left: auto;
|
||||
right: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-body > p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
&.primary{
|
||||
border-color:$primary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $primary-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $primary !important;
|
||||
box-shadow:0 5px 10px 0 rgba($primary, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$primary-light;
|
||||
border-color:$primary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: transparent;
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
border-color:$success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $success-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $success !important;
|
||||
box-shadow:0 5px 10px 0 rgba($success, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$success-light;
|
||||
border-color:$success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
border-color:$warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $warning-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $warning !important;
|
||||
box-shadow:0 5px 10px 0 rgba($warning, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$warning-light;
|
||||
border-color:$warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger{
|
||||
border-color:$danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $danger-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $danger !important;
|
||||
box-shadow:0 5px 10px 0 rgba($danger, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$danger-light;
|
||||
border-color:$danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.info{
|
||||
border-color:$info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $info-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $info !important;
|
||||
box-shadow:0 5px 10px 0 rgba($info, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$info-light;
|
||||
border-color:$info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark{
|
||||
border-color:$dark-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $dark-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $dark !important;
|
||||
box-shadow:0 5px 10px 0 rgba($dark, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$dark-light;
|
||||
border-color:$dark-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-1{
|
||||
.timeline-panel{
|
||||
background:transparent;
|
||||
}
|
||||
.timeline {
|
||||
.timeline-badge {
|
||||
&.timeline-badge{
|
||||
& + .timeline-panel{
|
||||
background: transparent !important;
|
||||
border-style:solid;
|
||||
border-width: 0 0 0 5px;
|
||||
border-radius: 0;
|
||||
padding: 5px 10px 5px 15px;
|
||||
&:after{
|
||||
border:0;
|
||||
left: -9px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.primary{
|
||||
& + .timeline-panel{
|
||||
border-color:$primary;
|
||||
&:after{
|
||||
background:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
& + .timeline-panel{
|
||||
border-color:$success;
|
||||
&:after{
|
||||
background:$success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
& + .timeline-panel{
|
||||
border-color:$warning;
|
||||
&:after{
|
||||
background:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger{
|
||||
& + .timeline-panel{
|
||||
border-color:$danger;
|
||||
&:after{
|
||||
background:$danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.info{
|
||||
& + .timeline-panel{
|
||||
border-color:$info;
|
||||
&:after{
|
||||
background:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark{
|
||||
& + .timeline-panel{
|
||||
border-color:$dark;
|
||||
&:after{
|
||||
background:$dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
48
public/style/scss/components/ui/_ui-tooltip.scss
Normal file
48
public/style/scss/components/ui/_ui-tooltip.scss
Normal file
@ -0,0 +1,48 @@
|
||||
.tooltip{
|
||||
|
||||
&-wrapper{
|
||||
|
||||
button:not(:last-child){
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
button{
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inner{
|
||||
border-radius: 0;
|
||||
background: #333333;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
padding: 0.35rem 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before{
|
||||
// border-width: 0 0.6rem 0.6rem;
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before{
|
||||
border-right-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before{
|
||||
border-left-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before{
|
||||
border-top-color: #333333;
|
||||
}
|
||||
68
public/style/scss/components/widget/_widget-card-list.scss
Normal file
68
public/style/scss/components/widget/_widget-card-list.scss
Normal file
@ -0,0 +1,68 @@
|
||||
.card-list{
|
||||
overflow: unset;
|
||||
height: calc(100% - 50px);
|
||||
|
||||
.card-header{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.photo{
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond('tab-land') {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
&.list-left{
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
|
||||
.card-header{
|
||||
padding-left: 0;
|
||||
|
||||
.photo{
|
||||
margin: -15px 15px 0 -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list-right{
|
||||
margin-top: 15px;
|
||||
margin-right: 15px;
|
||||
text-align: right;
|
||||
|
||||
.card-header{
|
||||
padding-right: 0;
|
||||
|
||||
.photo{
|
||||
margin: -15px -15px 0 15px;
|
||||
img{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list-center{
|
||||
margin-top: 15px;
|
||||
|
||||
.card-header{
|
||||
|
||||
.photo{
|
||||
margin: -15px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.photo img{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.card-profile{
|
||||
.profile-photo{
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
123
public/style/scss/components/widget/_widget-chart.scss
Normal file
123
public/style/scss/components/widget/_widget-chart.scss
Normal file
@ -0,0 +1,123 @@
|
||||
#chart_widget_4 {
|
||||
height: 255px !important;
|
||||
}
|
||||
|
||||
#chart_widget_5 {
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: #46ffc8;
|
||||
}
|
||||
|
||||
.ct-line {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: #43d66c;
|
||||
}
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#chart_widget_6 {
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: $info;
|
||||
}
|
||||
|
||||
.ct-line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: $info;
|
||||
}
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
#chart_widget_8 {
|
||||
height: 255px;
|
||||
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: $info;
|
||||
}
|
||||
|
||||
.ct-line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: $info;
|
||||
}
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
#chart_widget_9, #chart_widget_10 {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
#chart_widget_11, #chart_widget_12, #chart_widget_13 {
|
||||
.ct-slice-donut {
|
||||
stroke-width: 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#chart_widget_11 {
|
||||
height: 270px !important;
|
||||
}
|
||||
|
||||
#chart_widget_17 {
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
|
||||
.chart_widget_tab_one {
|
||||
.nav-link {
|
||||
border: 1px solid #ddd;
|
||||
|
||||
&.active {
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ccc-widget {
|
||||
&>div {
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card !important;
|
||||
border-color: $d-border !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
86
public/style/scss/components/widget/_widget-media.scss
Normal file
86
public/style/scss/components/widget/_widget-media.scss
Normal file
@ -0,0 +1,86 @@
|
||||
.widget-media{
|
||||
.timeline{
|
||||
.timeline-panel{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom:1px solid $l-border;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.media{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #eee;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
align-self: start;
|
||||
|
||||
&-primary{
|
||||
background:$primary-light;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
background:$info-light;
|
||||
color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
background:$warning-light;
|
||||
color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
&-danger{
|
||||
background:$danger-light;
|
||||
color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
&-success{
|
||||
background:$success-light;
|
||||
color:$success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media-body{
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height:1.5;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
align-self: self-end;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
li:last-child {
|
||||
.timeline-panel{
|
||||
margin-bottom:0;
|
||||
border-bottom:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card[class*="bg-"]{
|
||||
.timeline{
|
||||
.timeline-panel{
|
||||
border-color:rgba(255,255,255,0.2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
.widget-message {
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
127
public/style/scss/components/widget/_widget-pickadate.scss
Normal file
127
public/style/scss/components/widget/_widget-pickadate.scss
Normal file
@ -0,0 +1,127 @@
|
||||
.picker{
|
||||
.picker__frame {
|
||||
min-width: 450px!important;
|
||||
max-width: 450px!important;
|
||||
|
||||
.picker__box{
|
||||
padding: 20px;
|
||||
border: 0;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
||||
|
||||
.picker__header{
|
||||
margin-top: 0;
|
||||
|
||||
.picker__year{
|
||||
color: $primary;
|
||||
font-style: inherit;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
line-height: 40px;
|
||||
border-radius: 2px;
|
||||
&:before{
|
||||
content: none!important
|
||||
}
|
||||
&:after{
|
||||
font-family: fontawesome;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
font-size: 22px;
|
||||
}
|
||||
&:hover{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $primary!important;
|
||||
}
|
||||
}
|
||||
.picker__nav--prev{
|
||||
left: 0;
|
||||
&:after{
|
||||
content: "\f0d9";
|
||||
}
|
||||
}
|
||||
.picker__nav--next{
|
||||
right: 0;
|
||||
&:after{
|
||||
content: "\f0da";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker__table{
|
||||
.picker__weekday {
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.picker__day {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50px;
|
||||
padding: 0!important;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
margin: auto;
|
||||
border: 0!important;
|
||||
|
||||
&.picker__day--today{
|
||||
&:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.picker__day--highlighted {
|
||||
border: 0!important;
|
||||
padding: 0;
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white!important;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker__footer{
|
||||
.picker__button--today{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white !important;
|
||||
|
||||
&:before{
|
||||
content: none!important
|
||||
}
|
||||
}
|
||||
|
||||
.picker__button--clear,
|
||||
.picker__button--close,
|
||||
.picker__button--today{
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
font-size: 16px;
|
||||
&:hover{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include respond('phone') {
|
||||
min-width: 100%!important;
|
||||
max-width: 100%!important;
|
||||
|
||||
.picker__box{
|
||||
padding: 15px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
76
public/style/scss/components/widget/_widget-social.scss
Normal file
76
public/style/scss/components/widget/_widget-social.scss
Normal file
@ -0,0 +1,76 @@
|
||||
.social-icon{
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: $body-bg;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 20px;
|
||||
|
||||
i{
|
||||
// font-size: 0.875rem;
|
||||
color: $white
|
||||
}
|
||||
&.youtube{
|
||||
background: $youtube;
|
||||
}
|
||||
&.facebook{
|
||||
background: $facebook;
|
||||
}
|
||||
&.twitter{
|
||||
background: $twitter;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.social-icon2{
|
||||
a{
|
||||
border: .1rem solid $primary;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: .5rem;
|
||||
border-radius: .3rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 12px;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon3{
|
||||
ul{
|
||||
li{
|
||||
display: inline-block;
|
||||
a{
|
||||
display: block;
|
||||
i{
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem .7rem;
|
||||
color: $l-ctd;
|
||||
}
|
||||
&:hover{
|
||||
i{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-icons-muted{
|
||||
ul li a i{
|
||||
color: $muted;
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
a {
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
210
public/style/scss/components/widget/_widget-stat.scss
Normal file
210
public/style/scss/components/widget/_widget-stat.scss
Normal file
@ -0,0 +1,210 @@
|
||||
.widget-stat {
|
||||
.media {
|
||||
padding: 0px 0;
|
||||
align-items: center;
|
||||
&>span {
|
||||
height: 85px;
|
||||
width: 85px;
|
||||
border-radius: 100%;
|
||||
padding: 10px 12px;
|
||||
font-size: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $l-ctd;
|
||||
|
||||
@include respond('laptop') {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
min-width:70px;
|
||||
}
|
||||
}
|
||||
@include custommq($min: 576px) {}
|
||||
.media-body {
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
@include respond('laptop') {
|
||||
font-size: 14px;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: #c4c9d5;
|
||||
}
|
||||
}
|
||||
small,
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
h3{
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&[class*="bg-"] .media > span{
|
||||
background-color:rgba(255,255,255,0.25);
|
||||
color:$white;
|
||||
}
|
||||
&[class*="bg-"] .progress{
|
||||
background-color:rgba(255,255,255,0.25) !important;
|
||||
}
|
||||
|
||||
}
|
||||
[direction="rtl"] {
|
||||
.widget-stat .media .media-body span{
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.dez-widget-1{
|
||||
.card {
|
||||
background: #FFE7DB;
|
||||
.card-body {
|
||||
p {
|
||||
color: #f87533;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
|
||||
}
|
||||
.icon{
|
||||
float: right;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border-radius: 6px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.bgl-primary{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
.bgl-secondary{
|
||||
background: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color: $secondary-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-success{
|
||||
background: $success-light;
|
||||
border-color: $success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: $success-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-warning{
|
||||
background: $warning-light;
|
||||
border-color: $warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: $warning-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-danger{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-info{
|
||||
background: $info-light;
|
||||
border-color: $info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: $info-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bg-primary-light{
|
||||
background: rgba($primary-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($primary, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-secondary-light{
|
||||
background: rgba($secondary-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($secondary, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-success-light{
|
||||
background: rgba($success-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($success, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-warning-light{
|
||||
background: rgba($warning-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($warning, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-danger-light{
|
||||
background: rgba($danger-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($danger, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-info-light{
|
||||
background: rgba($info-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($info, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bgl-dark{
|
||||
background: $dark-light;
|
||||
border-color: $dark-light;
|
||||
}
|
||||
.bgl-light{
|
||||
background: $light;
|
||||
border-color: $light;
|
||||
}
|
||||
.overlay-box{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
&:after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;;
|
||||
position:absolute;
|
||||
opacity:0.85;
|
||||
background:$primary;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.rating-bar{
|
||||
font-size: 13px;
|
||||
}
|
||||
130
public/style/scss/components/widget/_widget-todo-list.scss
Normal file
130
public/style/scss/components/widget/_widget-todo-list.scss
Normal file
@ -0,0 +1,130 @@
|
||||
.tdl-holder {
|
||||
margin: 0 auto;
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid $border;
|
||||
// color: #252525;
|
||||
list-style: none none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
span {
|
||||
margin-left: 35px;
|
||||
// color: $l-ctd;
|
||||
font-size: 1rem;
|
||||
// font-weight: 600;
|
||||
vertical-align: middle;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
margin-left: auto;
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
margin: 0 !important;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
padding-left: 0;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #eef1f6;
|
||||
color: $dark;
|
||||
|
||||
|
||||
|
||||
a {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 50px;
|
||||
-webkit-transition: all .2s linear;
|
||||
-moz-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all 0.2s linear;
|
||||
padding: 18px 0px;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
&[type=checkbox] {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
+ i {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
display: block;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
width: 20px;
|
||||
z-index: 1;
|
||||
border-radius: 00px;
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&:checked {
|
||||
|
||||
+ i {
|
||||
background: $primary;
|
||||
border-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
+ i::after {
|
||||
content: "\f00c";
|
||||
font-family: 'fontAwesome';
|
||||
display: block;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
z-index: 2;
|
||||
color: $white;
|
||||
}
|
||||
~ span {
|
||||
text-decoration: line-through;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type=text] {
|
||||
background-color: $white;
|
||||
height: 50px;
|
||||
margin-top: 29px;
|
||||
border-radius: 3px;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
public/style/scss/components/widget/_widgets.scss
Normal file
8
public/style/scss/components/widget/_widgets.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "./widget-chart";
|
||||
@import "./widget-social";
|
||||
@import "./widget-stat";
|
||||
@import "./widget-todo-list";
|
||||
@import "./widget-messages";
|
||||
@import "./widget-pickadate";
|
||||
@import "./widget-card-list";
|
||||
@import "./widget-media";
|
||||
8
public/style/scss/layout/_layout.scss
Normal file
8
public/style/scss/layout/_layout.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import './footer/footer';
|
||||
@import './header/header';
|
||||
@import './rtl/rtl';
|
||||
@import './sidebar/sidebar';
|
||||
@import './theme/theme';
|
||||
@import './typography/typography';
|
||||
@import './version-transparent/main';
|
||||
@import './version-dark/main';
|
||||
27
public/style/scss/layout/footer/_footer.scss
Normal file
27
public/style/scss/layout/footer/_footer.scss
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
|
||||
|
||||
.footer {
|
||||
padding-left: 21.563rem;
|
||||
background-color: $body-bg;
|
||||
@include respond('laptop'){
|
||||
padding-left: 17rem;
|
||||
}
|
||||
.copyright {
|
||||
padding: 0.9375rem;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $primary;
|
||||
}
|
||||
@include custommq($min: 991px) {
|
||||
border-radius:0 0 0 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
262
public/style/scss/layout/header/_header-global.scss
Normal file
262
public/style/scss/layout/header/_header-global.scss
Normal file
@ -0,0 +1,262 @@
|
||||
/////////////////
|
||||
// Header
|
||||
/////////////////
|
||||
.header {
|
||||
// width: 100%;
|
||||
height: 7.5rem;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: 0rem;
|
||||
background-color: $white;
|
||||
z-index: 4;
|
||||
// box-shadow: 0 0 1rem $l-border;
|
||||
padding-left: 21.563rem;
|
||||
transition: all .2s ease;
|
||||
@include respond('laptop'){
|
||||
padding-left: 17rem;
|
||||
}
|
||||
// &::before {
|
||||
// content: "";
|
||||
// height: 168px;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// position: absolute;
|
||||
// z-index: 997;
|
||||
// background: rgba(116, 104, 240,0.85)
|
||||
// }
|
||||
.header-content {
|
||||
height: 100%;
|
||||
padding-left: 5.3125rem;
|
||||
padding-right: 2.4rem;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
// box-shadow: $shadow;
|
||||
// @include respond('desktop') {
|
||||
// padding-left: 15px;
|
||||
// padding-right:15px;
|
||||
// max-width: 1140px;
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// @include respond('tab-land') {
|
||||
// padding-left: 15px;
|
||||
// padding-right:15px;
|
||||
// max-width: 960px;
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// @include respond('tab-port') {
|
||||
// padding-left: 15px;
|
||||
// padding-right:15px;
|
||||
// max-width: 720px;
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// @include respond('phone-land') {
|
||||
// padding-left: 60px;
|
||||
// padding-right:15px;
|
||||
// }
|
||||
@include custommq($max: 767px) {
|
||||
padding-left: 3.75rem;
|
||||
padding-right: 0.938rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.navbar {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.navbar-collapse {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include respond('tab-land'){
|
||||
height:5rem;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////
|
||||
// CSS Pulse Effect
|
||||
////////////////////////
|
||||
@mixin circle($circleSize) {
|
||||
width: $circleSize;
|
||||
height: $circleSize;
|
||||
border-radius: $circleSize/2;
|
||||
}
|
||||
|
||||
|
||||
/* pulse in SVG */
|
||||
|
||||
svg.pulse-svg {
|
||||
overflow: visible;
|
||||
.first-circle {
|
||||
-webkit-transform: scale(0.3);
|
||||
transform: scale(0.3);
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-animation: pulse-me 3s linear infinite;
|
||||
animation: pulse-me 3s linear infinite;
|
||||
fill: $primary;
|
||||
}
|
||||
.second-circle {
|
||||
@extend .first-circle;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.third-circle {
|
||||
@extend .first-circle;
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* pulse in CSS */
|
||||
|
||||
.pulse-css {
|
||||
@include circle(1rem);
|
||||
border-radius: 3.5rem;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
background:$warning;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 1rem;
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
@include circle(1rem);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: -.2rem;
|
||||
background-color: $warning;
|
||||
margin: auto;
|
||||
-webkit-transform: scale(0.3);
|
||||
transform: scale(0.3);
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-animation: pulse-me 3s linear infinite;
|
||||
animation: pulse-me 3s linear infinite;
|
||||
@at-root [direction="rtl"] & {
|
||||
left: auto;
|
||||
right: -.2rem;
|
||||
}
|
||||
}
|
||||
@include respond ('laptop'){
|
||||
height:0.5rem;
|
||||
width:0.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse-me {
|
||||
0% {
|
||||
-webkit-transform: scale(0.3);
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.09;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(3);
|
||||
transform: scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-me {
|
||||
0% {
|
||||
-webkit-transform: scale(0.3);
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.09;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(3);
|
||||
transform: scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="full"],
|
||||
[data-sidebar-style="overlay"] {
|
||||
.header {
|
||||
width: 100%;
|
||||
@include custommq($min: 1200px, $max: 1350px) {
|
||||
width: 100%;
|
||||
padding-left: 17rem;
|
||||
}
|
||||
@include respond('tab-land') {
|
||||
width: 100%;
|
||||
padding-left: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="mini"] {
|
||||
.header {
|
||||
width: 100%;
|
||||
padding-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="compact"] {
|
||||
.header {
|
||||
width: 100%;
|
||||
padding-left: 15rem;
|
||||
.header-content{
|
||||
padding-left: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-header-position="fixed"] {
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.content-body {
|
||||
padding-top: 7.5rem;
|
||||
@include respond('tab-land'){
|
||||
padding-top: 5rem;
|
||||
}
|
||||
}
|
||||
.deznav {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
[data-sidebar-style="compact"][data-header-position="fixed"][data-container="boxed"][data-layout="vertical"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
[data-sidebar-style="modern"] {
|
||||
.header {
|
||||
width: 100%;
|
||||
padding-left: 9.375rem;
|
||||
|
||||
|
||||
}
|
||||
&[data-layout="horizontal"] {
|
||||
.nav-header .brand-logo{
|
||||
justify-content: start;
|
||||
}
|
||||
.header .header-content{
|
||||
padding-left: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
156
public/style/scss/layout/header/_header-left.scss
Normal file
156
public/style/scss/layout/header/_header-left.scss
Normal file
@ -0,0 +1,156 @@
|
||||
.header-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dashboard_bar {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color:$black;
|
||||
@include respond('laptop') {
|
||||
font-size: 24px;
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background: $body-bg !important;
|
||||
min-width: 170px;
|
||||
min-height: 40px;
|
||||
color: $dark!important;
|
||||
border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border-right-width:0!important;
|
||||
border: 1px solid #ebebeb;
|
||||
border-width: 1px;
|
||||
font-weight: 300;
|
||||
|
||||
@include respond('desktop') {
|
||||
// margin-top: 3px;
|
||||
}
|
||||
@at-root [direction="rtl"] & {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
border-color: #ebebeb;
|
||||
box-shadow: none;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
/* Edge */
|
||||
color: $dark;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
/* Internet Explorer */
|
||||
color: $dark;
|
||||
}
|
||||
&::placeholder {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
// .btn {
|
||||
// border-top-left-radius: 0;
|
||||
// border-bottom-left-radius: 0;
|
||||
// height: 45px;
|
||||
// @at-root [direction="rtl"] & {
|
||||
// border-top-right-radius: 0;
|
||||
// border-bottom-right-radius: 0;
|
||||
// border-top-left-radius: .25rem;
|
||||
// border-bottom-left-radius: .25rem;
|
||||
// }
|
||||
// }
|
||||
.search_bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
@include respond('phone-land') {
|
||||
display:none;
|
||||
}
|
||||
.dropdown-menu {
|
||||
box-shadow: none;
|
||||
|
||||
|
||||
}
|
||||
.search_icon {
|
||||
background: $body-bg !important;
|
||||
height: 56px;
|
||||
line-height:22px;
|
||||
padding: 15px 20px 15px 0 !important;
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
border: 1px solid #ebebeb;
|
||||
border-width: 1px;
|
||||
border-left-width:0;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: $dark;
|
||||
line-height: 1;
|
||||
}
|
||||
@include respond('laptop') {
|
||||
height: 41px;
|
||||
padding: 8px 15px 8px 0 !important;
|
||||
svg{
|
||||
width:18px;
|
||||
height:18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include custommq($max: 767px) {
|
||||
position: static;
|
||||
.dropdown-menu {
|
||||
width: 300px;
|
||||
left: -15vw;
|
||||
box-shadow: 0px 5px 10px 0 rgba(0,0,0,0.1);
|
||||
border-radius: 4px !important;
|
||||
@include respond('phone') {
|
||||
width: 250px;
|
||||
left: -25vw;
|
||||
}
|
||||
.form-control{
|
||||
border-radius: 4px !important;
|
||||
width:100%;
|
||||
}
|
||||
@at-root [direction="rtl"] & {
|
||||
right: -98px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .form-inline {
|
||||
// flex-flow: row nowrap;
|
||||
// }
|
||||
.dropdown-menu,
|
||||
.dropdown-menu.show {
|
||||
// box-shadow: 0px 0px 10px rgba(120, 130, 140, 0.13);
|
||||
border: 0px;
|
||||
background-color: transparent;
|
||||
border-top-right-radius: 5rem;
|
||||
border-bottom-right-radius: 5rem;
|
||||
@include custommq($min: 768px) {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
display: block;
|
||||
position: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="compact"] {
|
||||
.header-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
343
public/style/scss/layout/header/_header-right.scss
Normal file
343
public/style/scss/layout/header/_header-right.scss
Normal file
@ -0,0 +1,343 @@
|
||||
.header-right {
|
||||
height: 100%;
|
||||
|
||||
|
||||
|
||||
.nav-item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-link {
|
||||
color: $l-ctd;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.right-sidebar{
|
||||
margin-right:-30px;
|
||||
a{
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-left: 1px solid $light;
|
||||
}
|
||||
}
|
||||
&>li {
|
||||
&:not(:first-child) {
|
||||
padding-left:2rem;
|
||||
@include respond ('mid-desktop'){
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
@include respond('laptop') {
|
||||
padding-left:1rem;
|
||||
}
|
||||
@include respond('phone') {
|
||||
padding-left:0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.notification_dropdown {
|
||||
@include respond('phone-land') {
|
||||
position: static;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
color: $primary;
|
||||
background: rgba($primary,0.1);
|
||||
border-radius: $radius;
|
||||
padding: 12px;
|
||||
//border:1px solid $primary;
|
||||
line-height: 1;
|
||||
@include respond('laptop') {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&.secondary{
|
||||
background:$secondary-light;
|
||||
color: $secondary;
|
||||
[fill] {
|
||||
fill: $secondary;
|
||||
}
|
||||
|
||||
}
|
||||
&.primary{
|
||||
background:$primary-light;
|
||||
color: $primary;
|
||||
[fill] {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
background:$warning-light;
|
||||
color: $warning;
|
||||
[fill] {
|
||||
fill: $warning;
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
background:$success-light;
|
||||
color: $success;
|
||||
[fill] {
|
||||
fill: $success;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-size: 24px;
|
||||
@include respond('laptop') {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
svg{
|
||||
@include respond('laptop') {
|
||||
width:24px;
|
||||
height:24px;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
border-radius: 40px;
|
||||
right: -1px;
|
||||
top: 3px;
|
||||
box-shadow:0px 0px 10px 3px rgba($primary,0.2);
|
||||
font-weight: normal;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
@include respond('laptop') {
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
font-size: 12px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
right:-1px;
|
||||
height:15px;
|
||||
width:15px;
|
||||
font-size:10px;
|
||||
line-height:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-item {
|
||||
&:focus,
|
||||
&:active {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $dark;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
border-width:0;
|
||||
box-shadow: 0 0 37px rgba(8,21,66,0.05);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.header-profile {
|
||||
&>a.nav-link {
|
||||
padding: 0 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: $radius 28px 28px $radius;
|
||||
@include respond('phone') {
|
||||
background: transparent;
|
||||
padding: 0 ;
|
||||
}
|
||||
i {
|
||||
font-weight: 700;
|
||||
}
|
||||
.header-info{
|
||||
text-align: left;
|
||||
padding-left:15px;
|
||||
@include respond('tab-land') {
|
||||
padding-left:15px;
|
||||
}
|
||||
@include respond('phone') {
|
||||
display:none;
|
||||
}
|
||||
span{
|
||||
font-size:16px;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
strong{
|
||||
font-weight: 600;
|
||||
}
|
||||
small{
|
||||
display:block;
|
||||
font-size: 13px;
|
||||
color:$muted;
|
||||
font-weight:400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
padding: 15px 0;
|
||||
min-width: 12.5rem;
|
||||
a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 57px;
|
||||
height: 57px;
|
||||
border-radius: 60px;
|
||||
|
||||
@include respond('laptop') {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
}
|
||||
}
|
||||
.dropdown-toggle {
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
span {
|
||||
@include respond('phone') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile_title {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
padding: 10px 20px;
|
||||
h5 {
|
||||
color: $white;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
// .dropdown-toggle::after{
|
||||
// display: none;
|
||||
// }
|
||||
.dropdown-item {
|
||||
padding: 8px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.dz-fullscreen{
|
||||
#icon-minimize{
|
||||
display:none;
|
||||
}
|
||||
&.active{
|
||||
#icon-full{
|
||||
display:none;
|
||||
}
|
||||
#icon-minimize{
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.notification_dropdown {
|
||||
.dropdown-menu-right {
|
||||
min-width: 310px;
|
||||
padding: 0rem 0 1rem;
|
||||
top: 100%;
|
||||
|
||||
.notification_title {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
padding: 10px 20px;
|
||||
h5 {
|
||||
color: $white;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
.media {
|
||||
width: 45px !important;
|
||||
height: 45px !important;
|
||||
font-size: 18px !important;
|
||||
|
||||
// &:last-child{
|
||||
// border-bottom: 0px;
|
||||
// }
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
&>span {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50px;
|
||||
display: inline-block;
|
||||
padding: 7px 9px;
|
||||
margin-right: 10px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
margin-right: 0;
|
||||
margin-left: 10px
|
||||
}
|
||||
&.success {
|
||||
background: $success-light;
|
||||
color: $success;
|
||||
[fill] {
|
||||
fill: $success;
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
background: $primary-light;
|
||||
color: $primary;
|
||||
svg [fill] {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
&.danger {
|
||||
background: $danger-light;
|
||||
color: $danger;
|
||||
[fill] {
|
||||
fill: $danger;
|
||||
}
|
||||
}
|
||||
[fill] {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
.notify-time {
|
||||
width: 100%!important;
|
||||
margin-right: 0!important;
|
||||
color: $l-ctl;
|
||||
}
|
||||
p {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
@include respond('phone') {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.all-notification {
|
||||
display: block;
|
||||
padding: 15px 30px 0;
|
||||
// color: $dark;
|
||||
text-align: center;
|
||||
border-top: 1px solid $light;
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
public/style/scss/layout/header/_header.scss
Normal file
7
public/style/scss/layout/header/_header.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import './nav-header/nav-header';
|
||||
@import './header-global';
|
||||
@import './header-left';
|
||||
@import './header-right';
|
||||
|
||||
|
||||
|
||||
288
public/style/scss/layout/header/nav-header/_nav-control.scss
Normal file
288
public/style/scss/layout/header/nav-header/_nav-control.scss
Normal file
@ -0,0 +1,288 @@
|
||||
[data-sidebar-style="mini"],
|
||||
[data-layout="horizontal"] {
|
||||
.nav-control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="overlay"] {
|
||||
@include respond('phone-land') {
|
||||
.nav-header .logo-abbr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-header-position="fixed"] {
|
||||
.nav-header {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
// @include respond('big-desktop') {
|
||||
// left: 6rem;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
height: 7.5rem;
|
||||
width: 21.563rem;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $white;
|
||||
transition: all .2s ease;
|
||||
z-index: 5;
|
||||
// border-bottom: 1px solid $border;
|
||||
|
||||
.logo-abbr {
|
||||
max-width: 52px;
|
||||
@include respond('phone') {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
.logo-compact {
|
||||
display: none;
|
||||
}
|
||||
// @include respond('big-desktop') {
|
||||
// left: 3.125rem;
|
||||
// }
|
||||
@include custommq($min: 1200px, $max: 1400px) {
|
||||
width: 17rem;
|
||||
}
|
||||
.brand-logo {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 1.125rem;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
font-weight: 700;
|
||||
@include respond('laptop') {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
// &:hover {
|
||||
// color: $primary;
|
||||
// }
|
||||
|
||||
|
||||
[data-sidebar-style="compact"] &,
|
||||
[data-sidebar-style="mini"] & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.brand-title {
|
||||
margin-left: 10px;
|
||||
max-width: 120px;
|
||||
margin-top: 0px;
|
||||
// &::first-letter{
|
||||
// background: $white;
|
||||
// color: $primary;
|
||||
// padding: 1px 10px;
|
||||
// margin-right: 5px;
|
||||
// border-radius: 3px;
|
||||
// }
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-position: 0 120%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond('tab-land') {
|
||||
.nav-header {
|
||||
width: 5rem;
|
||||
height:5rem;
|
||||
.brand-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-control {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -4.0625rem;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 9999;
|
||||
// color: $primary;
|
||||
font-size: 1.4rem;
|
||||
// line-height: 2rem;
|
||||
padding: 2px 0.5rem 0;
|
||||
// margin-top: 5px;
|
||||
border-radius: 2px;
|
||||
@include respond('phone-land') {
|
||||
right: -2.75rem;
|
||||
}
|
||||
@include respond('phone') {
|
||||
right: -2.75rem;
|
||||
}
|
||||
// @include respond('desktop') {
|
||||
// right: -3.125rem;
|
||||
// }
|
||||
@include custommq($min: 1200px, $max: 1500px) {
|
||||
// right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Humbuger Icon
|
||||
////////////////////
|
||||
.hamburger {
|
||||
// background-color: $white;
|
||||
display: inline-block;
|
||||
left: 0px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
-webkit-transition: all 0.3s ease-in-out 0s;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
width: 26px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.hamburger .line {
|
||||
background: $primary;
|
||||
display: block;
|
||||
height: 3px;
|
||||
border-radius: 3px;;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-left: auto;
|
||||
// width: 22px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.hamburger .line:nth-child(1) {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.hamburger .line:nth-child(2) {
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.hamburger .line:nth-child(3) {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.hamburger:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger:hover .line {
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.hamburger.is-active {
|
||||
left: 60px;
|
||||
}
|
||||
*/
|
||||
|
||||
.hamburger.is-active .line:nth-child(1),
|
||||
.hamburger.is-active .line:nth-child(3) {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.hamburger.is-active .line:nth-child(2) {
|
||||
-webkit-transform: translateX(-0px);
|
||||
transform: translateX(-0px);
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.hamburger.is-active .line:nth-child(1) {
|
||||
-webkit-transform: translateY(4px) rotate(45deg);
|
||||
transform: translateY(4px) rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger.is-active .line:nth-child(3) {
|
||||
-webkit-transform: translateY(-4px) rotate(-45deg);
|
||||
transform: translateY(-4px) rotate(-45deg);
|
||||
}
|
||||
|
||||
@media (min-width:767px) {
|
||||
|
||||
[data-sidebar-style="compact"] {
|
||||
.nav-control {
|
||||
display: none;
|
||||
}
|
||||
.nav-header {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="full"][data-layout="vertical"] {
|
||||
.menu-toggle {
|
||||
.brand-title {
|
||||
display: none;
|
||||
}
|
||||
.nav-header {
|
||||
.logo-abbr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="full"][data-layout="horizontal"] {
|
||||
.logo-compact {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="mini"] {
|
||||
.nav-header {
|
||||
.logo-abbr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="compact"][data-layout="vertical"] {
|
||||
.nav-header {
|
||||
.brand-title {
|
||||
/* display: none; */
|
||||
}
|
||||
.logo-compact {
|
||||
max-width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-sidebar-style="compact"][data-layout="horizontal"] {
|
||||
.nav-header .brand-logo {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
[data-sidebar-style="modern"][data-layout="vertical"] {
|
||||
.nav-header {
|
||||
width: 9.375rem;
|
||||
.brand-title {
|
||||
display: none;
|
||||
}
|
||||
.logo-compact {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
@import './nav-control';
|
||||
44
public/style/scss/layout/rtl/_rtl-footer.scss
Normal file
44
public/style/scss/layout/rtl/_rtl-footer.scss
Normal file
@ -0,0 +1,44 @@
|
||||
html[dir="rtl"] {
|
||||
|
||||
//footer
|
||||
[direction="rtl"] {
|
||||
.footer{
|
||||
padding-right: 17.1875rem;
|
||||
padding-left: 0;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="overlay"] {
|
||||
.footer {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
.footer {
|
||||
padding-right: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-container="boxed"] {
|
||||
.footer {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="mini"]:not([data-layout="horizontal"]) {
|
||||
.footer {
|
||||
padding-right: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="compact"]:not([data-layout="horizontal"]) {
|
||||
.footer {
|
||||
padding-right: 9.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
78
public/style/scss/layout/rtl/_rtl-global.scss
Normal file
78
public/style/scss/layout/rtl/_rtl-global.scss
Normal file
@ -0,0 +1,78 @@
|
||||
// html[dir="rtl"] {
|
||||
|
||||
//content body
|
||||
[direction="rtl"] {
|
||||
.list-group{
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-check-input{
|
||||
margin-left: -1.25rem;
|
||||
margin-right: inherit;
|
||||
}
|
||||
.form-check-inline .form-check-input{
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.radio input,
|
||||
.radio-inline,
|
||||
.checkbox input,
|
||||
.checkbox-inline input{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.content-body {
|
||||
margin-right: 17.1875rem;
|
||||
margin-left: auto;
|
||||
@at-root [data-sidebar-style="modern"]#{&} {
|
||||
margin-right: 9.375rem;
|
||||
}
|
||||
.page-titles {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="horizontal"] {
|
||||
.content-body {
|
||||
margin-right: 0;
|
||||
}
|
||||
.deznav .metismenu li li .has-arrow:after{
|
||||
-webkit-transform: rotate(-4deg) translateY(-50%);
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="mini"]:not([data-layout="horizontal"]) {
|
||||
.content-body {
|
||||
margin-right: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="compact"]:not([data-layout="horizontal"]) {
|
||||
.content-body {
|
||||
margin-right: 9.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="overlay"] {
|
||||
.content-body {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
#external-events .external-event:before{
|
||||
margin-right: 0;
|
||||
margin-left: .9rem;
|
||||
}
|
||||
.post-input a i{
|
||||
margin-left: 15px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
@media only screen and (max-width: 1350px) and (min-width: 1200px){
|
||||
[direction="rtl"] {
|
||||
.content-body {
|
||||
margin-right: 14.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
109
public/style/scss/layout/rtl/_rtl-header.scss
Normal file
109
public/style/scss/layout/rtl/_rtl-header.scss
Normal file
@ -0,0 +1,109 @@
|
||||
|
||||
|
||||
//header styles
|
||||
[direction="rtl"] {
|
||||
.header {
|
||||
padding: 0 0.9375rem;
|
||||
padding-right: 17.1875rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-right: 3.75rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding-left: 0;
|
||||
padding-right: 5.3125rem;
|
||||
|
||||
@include custommq($max: 575px) {
|
||||
padding-right: 4.5rem;
|
||||
}
|
||||
@at-root [data-sidebar-style="compact"]#{&}{
|
||||
padding-right: 1.875rem;
|
||||
}
|
||||
@at-root [data-sidebar-style="modern"]#{&}{
|
||||
padding-right: 5.3125rem;
|
||||
}
|
||||
@at-root [data-sidebar-style="overlay"]#{&}{
|
||||
padding-right: 5.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-control {
|
||||
right: 0.4375rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.header-left{
|
||||
|
||||
|
||||
.search_bar{
|
||||
.dropdown-menu,
|
||||
.dropdown-menu.show{
|
||||
right: 40px !important;
|
||||
@include respond('phone') {
|
||||
right: -100px !important;
|
||||
}
|
||||
}
|
||||
.search_icon{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 5rem;
|
||||
border-bottom-right-radius: 5rem;
|
||||
@include respond('phone') {
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&[data-layout="horizontal"] {
|
||||
.header {
|
||||
padding: 0;
|
||||
padding-right: 16rem;
|
||||
|
||||
.header-content{
|
||||
padding-right: 1.875rem;
|
||||
padding-left: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-layout="horizontal"][data-sidebar-style="mini"] {
|
||||
.header {
|
||||
padding-right: 6rem;
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="mini"] {
|
||||
.header {
|
||||
padding: 0 0.9375rem;
|
||||
padding-right: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="compact"] {
|
||||
.header {
|
||||
padding: 0 0.9375rem;
|
||||
padding-right: 9.375rem;
|
||||
}
|
||||
&[data-layout="horizontal"]{
|
||||
.header{
|
||||
padding:0;
|
||||
padding-right: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="modern"] {
|
||||
.header {
|
||||
padding: 0 0.9375rem;
|
||||
padding-right: 9.375rem;
|
||||
}
|
||||
&[data-layout="horizontal"]{
|
||||
.header{
|
||||
padding:0;
|
||||
padding-right: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
105
public/style/scss/layout/rtl/_rtl-nav-header.scss
Normal file
105
public/style/scss/layout/rtl/_rtl-nav-header.scss
Normal file
@ -0,0 +1,105 @@
|
||||
|
||||
|
||||
//nav header styles
|
||||
[direction="rtl"] {
|
||||
|
||||
&:not([data-container="boxed"]) {
|
||||
.nav-header {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-container="wide-boxed"] {
|
||||
.nav-header {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
text-align: right;
|
||||
right: auto;
|
||||
.brand-title{
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.brand-logo {
|
||||
padding-left: 0;
|
||||
padding-right: 1.75rem;
|
||||
|
||||
@at-root [data-sidebar-style="compact"]#{&}{
|
||||
padding-right: 0;
|
||||
}
|
||||
@at-root [data-sidebar-style="compact"]#{&}[data-layout="horizontal"]{
|
||||
padding-right: 30px;
|
||||
}
|
||||
@at-root [data-sidebar-style="mini"]#{&}{
|
||||
padding-right: 0;
|
||||
}
|
||||
@at-root [data-sidebar-style="modern"]#{&}{
|
||||
padding-right: 0;
|
||||
@at-root [data-layout="horizontal"]#{&}{
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
// padding-left: 0;
|
||||
padding-right: 0;
|
||||
// justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-control {
|
||||
right: auto;
|
||||
left: -4.0625rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
left: -4.0625rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
left:-4.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="overlay"] {
|
||||
.nav-header {
|
||||
.hamburger {
|
||||
&.is-active {
|
||||
right: 0;
|
||||
|
||||
// .line:nth-child(1) {
|
||||
// transform: translateY(0.4rem) rotate(-45deg);
|
||||
// }
|
||||
//
|
||||
// .line:nth-child(3) {
|
||||
// transform: translateY(-0.4rem) rotate(45deg);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
[direction="rtl"][data-sidebar-style="compact"][data-layout="horizontal"]{
|
||||
.nav-header .brand-logo{
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
[direction="rtl"][data-sidebar-style="modern"][data-layout="horizontal"]{
|
||||
.nav-header{
|
||||
width: 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
118
public/style/scss/layout/rtl/_rtl-reset.scss
Normal file
118
public/style/scss/layout/rtl/_rtl-reset.scss
Normal file
@ -0,0 +1,118 @@
|
||||
|
||||
@import "../../../vendor/bootstrap-v4-rtl/scss/functions";
|
||||
@import "../../../vendor/bootstrap-v4-rtl/scss/variables";
|
||||
@import "../../../vendor/bootstrap-v4-rtl/scss/mixins";
|
||||
@import "../../../vendor/bootstrap-v4-rtl/scss/rtl";
|
||||
|
||||
.rtl {
|
||||
|
||||
|
||||
// stylelint-disable declaration-no-important
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $length in $spacers {
|
||||
|
||||
// .#{$abbrev}r#{$infix}-#{$size} {
|
||||
// #{$prop}-right: 0!important;
|
||||
// #{$prop}-left: $length !important;
|
||||
// }
|
||||
|
||||
.#{$abbrev}x#{$infix}-#{$size} {
|
||||
#{$prop}-right: auto;
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
|
||||
// .#{$abbrev}l#{$infix}-#{$size} {
|
||||
// #{$prop}-left: 0!important;
|
||||
// #{$prop}-right: $length !important;
|
||||
// }
|
||||
|
||||
.#{$abbrev}x#{$infix}-#{$size} {
|
||||
#{$prop}-left: auto;
|
||||
#{$prop}-right: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mr#{$infix}-auto {
|
||||
margin-right: 0!important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.mx#{$infix}-auto {
|
||||
margin-right: auto!important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.ml#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.mx#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.float#{$infix}-left { @include float-right; }
|
||||
.float#{$infix}-right { @include float-left; }
|
||||
.float#{$infix}-none { @include float-none; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//global styles
|
||||
[direction="rtl"] {
|
||||
|
||||
&[data-theme-version="dark"] {
|
||||
.border, .border-left, .border-right {
|
||||
border-color: $d-border !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
border-left: 1px solid $border !important;
|
||||
border-right: 0 !important;
|
||||
|
||||
}
|
||||
|
||||
.border-left {
|
||||
border-right: 1px solid $border !important;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu-right {
|
||||
left: 0;
|
||||
right: auto;
|
||||
@include respond('phone') {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
.notification_dropdown .dropdown-menu-right .media > span{
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
26
public/style/scss/layout/rtl/_rtl-sidebar-right.scss
Normal file
26
public/style/scss/layout/rtl/_rtl-sidebar-right.scss
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
|
||||
//sidebar right
|
||||
[direction="rtl"] {
|
||||
.sidebar-right {
|
||||
left: -15.625rem;
|
||||
right: auto;
|
||||
box-shadow: 2px 3px 10px 0px rgba(119, 119, 119, 0.1);
|
||||
|
||||
&.show {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.sidebar-right-trigger {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
border-radius: 0 5px 5px 0;
|
||||
box-shadow: 5px 3px 5px 0px rgba(119, 119, 119, 0.15);
|
||||
}
|
||||
}
|
||||
.bootstrap-select .dropdown-toggle .filter-option{
|
||||
text-align:right;
|
||||
}
|
||||
}
|
||||
|
||||
85
public/style/scss/layout/rtl/_rtl-sidebar.scss
Normal file
85
public/style/scss/layout/rtl/_rtl-sidebar.scss
Normal file
@ -0,0 +1,85 @@
|
||||
|
||||
|
||||
//sidebar styles
|
||||
[direction="rtl"] {
|
||||
text-align: right;
|
||||
|
||||
.deznav {
|
||||
text-align: right;
|
||||
|
||||
.metismenu {
|
||||
ul{
|
||||
padding: 0 25px 0 0;
|
||||
&:after{
|
||||
left:auto;
|
||||
right:25px;
|
||||
}
|
||||
a:before{
|
||||
left:auto;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
li{
|
||||
& > a svg{
|
||||
margin-left:5px;
|
||||
margin-right:0;
|
||||
@at-root [data-sidebar-style="compact"]#{&} {
|
||||
left: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@at-root [data-sidebar-style="icon-hover"]#{&} {
|
||||
margin-left:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.active {
|
||||
|
||||
&>.has-arrow {
|
||||
&:after {
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&:after {
|
||||
left: 1.5625rem;
|
||||
right: auto;
|
||||
|
||||
@at-root [data-layout="horizontal"]#{&} {
|
||||
left: 1.125rem;
|
||||
}
|
||||
@at-root [data-sidebar-style="modern"]#{&} {
|
||||
-webkit-transform: rotate(-45deg) translateY(-50%);
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-style="full"][data-layout="vertical"] {
|
||||
.menu-toggle {
|
||||
.deznav {
|
||||
.metismenu {
|
||||
li {
|
||||
&>ul {
|
||||
|
||||
li:hover {
|
||||
ul {
|
||||
right: 11.8125rem;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
7
public/style/scss/layout/rtl/_rtl.scss
Normal file
7
public/style/scss/layout/rtl/_rtl.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import './rtl-reset';
|
||||
@import './rtl-nav-header';
|
||||
@import './rtl-header';
|
||||
@import './rtl-sidebar';
|
||||
@import './rtl-global';
|
||||
@import './rtl-sidebar-right';
|
||||
@import './rtl-footer';
|
||||
382
public/style/scss/layout/sidebar/_fixed-sidebar.scss
Normal file
382
public/style/scss/layout/sidebar/_fixed-sidebar.scss
Normal file
@ -0,0 +1,382 @@
|
||||
.chatbox{
|
||||
width:340px;
|
||||
height:100vh;
|
||||
position:fixed;
|
||||
right:-500px;
|
||||
top:0;
|
||||
z-index:999;
|
||||
background:#fff;
|
||||
box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.15) ;
|
||||
@include transitionSlow;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$dark-card;
|
||||
}
|
||||
.chatbox-close{
|
||||
position: absolute;
|
||||
@include transitionFast;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
right: 340px;
|
||||
background: #000;
|
||||
z-index: 1;
|
||||
opacity: 0.1;
|
||||
cursor:pointer;
|
||||
}
|
||||
.card-fotter {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
&.active{
|
||||
right:0;
|
||||
|
||||
.chatbox-close{
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
.type_msg {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.nav{
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
background:$primary;
|
||||
border: 0;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-link{
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&.active{
|
||||
background:transparent;
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img_cont{
|
||||
width: 40px;
|
||||
border-radius: 40px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
background: #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
|
||||
.icon{
|
||||
color:#fff;
|
||||
}
|
||||
&.primary{
|
||||
background:$primary-light;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary-opacity;
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
background:$warning-light;
|
||||
color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$warning-opacity;
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
background:$success-light;
|
||||
color:$success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$success-opacity;
|
||||
}
|
||||
}
|
||||
&.info{
|
||||
background:$info-light;
|
||||
color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$info-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
width:100%;
|
||||
}
|
||||
.online_icon{
|
||||
background: $success;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 15px;
|
||||
right: -1px;
|
||||
bottom: 0px;
|
||||
border: 2px solid #fff;
|
||||
//box-shadow: 5px 5px 10px 0px rgba($success, 0.3);
|
||||
|
||||
&.offline{
|
||||
background:$danger;
|
||||
//box-shadow: 5px 5px 10px 0px rgba($danger, 0.3);
|
||||
}
|
||||
}
|
||||
.online_icon{
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.card{
|
||||
box-shadow:none;
|
||||
}
|
||||
.search{
|
||||
height:40px;
|
||||
}
|
||||
.user_info{
|
||||
span{
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
margin-bottom: 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
max-width: 170px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size:13px;
|
||||
margin-bottom:0;
|
||||
line-height: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
max-width: 170px;
|
||||
}
|
||||
}
|
||||
.contacts{
|
||||
li{
|
||||
padding: 7px 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
& > div{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
&:hover{
|
||||
background:#f4f7ff;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.name-first-letter{
|
||||
background: $body-bg;
|
||||
padding: 4px 1rem;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
background:$d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msg_card_body{
|
||||
height: calc(100vh - 195px);
|
||||
}
|
||||
.contacts_body{
|
||||
height: calc(100vh - 120px);
|
||||
}
|
||||
.card-header{
|
||||
background:#f4f7ff;
|
||||
padding: 15px 20px;
|
||||
justify-content: center;
|
||||
h6{
|
||||
font-size:15px;
|
||||
}
|
||||
p{
|
||||
line-height:1.2;
|
||||
font-size:12px;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
.chat-list-header{
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card;
|
||||
}
|
||||
a{
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: $body-bg;
|
||||
border-radius: 6px;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary-opacity;
|
||||
svg g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.img_cont_msg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
max-width: 30px;
|
||||
min-width: 30px;
|
||||
|
||||
img{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.msg_cotainer {
|
||||
background: $primary;
|
||||
margin-left: 10px;
|
||||
border-radius: 0 $radius $radius $radius;
|
||||
padding: 10px 15px;
|
||||
color:#fff;
|
||||
position:relative;
|
||||
.msg_time{
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
border-right: 10px solid $primary;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-top: 0px solid;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.msg_cotainer_send {
|
||||
background: $body-bg;
|
||||
padding: 10px 15px;
|
||||
border-radius: 6px 0px 6px 6px;
|
||||
margin-right: 10px;
|
||||
color: #222;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
color:$white;
|
||||
}
|
||||
|
||||
.msg_time_send {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
text-align: right;
|
||||
margin-top: 5px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
border-left: 10px solid $body-bg;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-top: 0px solid;
|
||||
top: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-left: 10px solid $d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.type_msg{
|
||||
.form-control{
|
||||
padding: 10px 0;
|
||||
height: 50px;
|
||||
border: 0;
|
||||
resize: none;
|
||||
}
|
||||
.btn{
|
||||
font-size: 18px;
|
||||
border-radius: 38px !important;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.video_cam{
|
||||
margin-left:15px;
|
||||
span{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #10ca93;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
border-radius: 35px;
|
||||
color: #fff;
|
||||
margin-right: 5px;
|
||||
align-self: center;
|
||||
font-size: 16px;
|
||||
padding: 0 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.note_card{
|
||||
.contacts li{
|
||||
padding: 12px 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include custommq($max: 576px) {
|
||||
.chatbox{
|
||||
width: 280px;
|
||||
.chatbox-close{
|
||||
right: 280px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
432
public/style/scss/layout/sidebar/_mega-menu.scss
Normal file
432
public/style/scss/layout/sidebar/_mega-menu.scss
Normal file
@ -0,0 +1,432 @@
|
||||
//common mega-menu styles
|
||||
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle,
|
||||
[data-sidebar-style="mini"][data-layout="vertical"] {
|
||||
|
||||
.deznav {
|
||||
.metismenu {
|
||||
&>li {
|
||||
&.mega-menu {
|
||||
|
||||
&> ul.collapse:not(.in) {
|
||||
height: 252px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(70vw + 3.75rem);
|
||||
}
|
||||
|
||||
&>ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
max-height: 13.75rem;
|
||||
width: 70vw;
|
||||
|
||||
ul a {
|
||||
width: 101%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(70vw + 3rem);
|
||||
}
|
||||
|
||||
&>ul {
|
||||
max-height: 200px;
|
||||
width: 70vw;
|
||||
|
||||
ul a {
|
||||
width: 101%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(55vw + 3rem);
|
||||
}
|
||||
|
||||
&>ul {
|
||||
max-height:200px;
|
||||
width: 55vw;
|
||||
|
||||
ul a {
|
||||
width: 101%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(45vw + 3);
|
||||
}
|
||||
&>ul {
|
||||
max-height: 18.75rem;
|
||||
width: 45vw;
|
||||
|
||||
ul a {
|
||||
width: 101%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(30vw + 3);
|
||||
}
|
||||
&>ul {
|
||||
max-height: 18.125rem;
|
||||
width: 30vw;
|
||||
|
||||
ul a {
|
||||
width: 101%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-sidebar-style="mini"][data-layout="vertical"][data-container="boxed"] {
|
||||
.deznav {
|
||||
.metismenu {
|
||||
|
||||
&>li {
|
||||
&.mega-menu {
|
||||
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(60vw + 3.75rem);
|
||||
}
|
||||
&>ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
max-height: 25rem;
|
||||
width: 60vw;
|
||||
|
||||
ul a {
|
||||
width: 101%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(60vw + 3.75rem);
|
||||
}
|
||||
&>ul {
|
||||
max-height: 25.625rem;
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(50vw + 3.75rem);
|
||||
}
|
||||
|
||||
&>ul {
|
||||
max-height: 16.25rem;
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(40vw + 3.75rem);
|
||||
}
|
||||
&>ul {
|
||||
max-height: 18.75rem;
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
&:hover {
|
||||
&>a {
|
||||
width: calc(22vw + 3.75rem);
|
||||
}
|
||||
&>ul {
|
||||
max-height: 18.125rem;
|
||||
width: 22vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//mega menu for horizontal layout
|
||||
[data-layout="horizontal"] {
|
||||
|
||||
.deznav {
|
||||
|
||||
.metismenu {
|
||||
|
||||
&>li {
|
||||
|
||||
&.mega-menu {
|
||||
&:not(:last-child) {
|
||||
position: static;
|
||||
}
|
||||
|
||||
ul {
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
|
||||
li {
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
border-color: $d-border;
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_2"]#{&} {
|
||||
border-color: darken($color_pallate_2, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_3"]#{&} {
|
||||
border-color: darken($color_pallate_3, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_4"]#{&} {
|
||||
border-color: darken($color_pallate_4, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_5"]#{&} {
|
||||
border-color: darken($color_pallate_5, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_6"]#{&} {
|
||||
border-color: darken($color_pallate_6, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_7"]#{&} {
|
||||
border-color: darken($color_pallate_7, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_8"]#{&} {
|
||||
border-color: darken($color_pallate_8, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_9"]#{&} {
|
||||
border-color: darken($color_pallate_9, 20%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_10"]#{&} {
|
||||
border-color: darken($color_pallate_10, 20%);
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all .4s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&>ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
max-height: 13.75rem;
|
||||
width: 70vw;
|
||||
z-index: 99;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
right: 2.8125rem;
|
||||
top: 0;
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
background-color: lighten($color: $d-bg, $amount: 3.2%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_2"]#{&} {
|
||||
background-color: darken($color_pallate_2, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_3"]#{&} {
|
||||
background-color: darken($color_pallate_3, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_4"]#{&} {
|
||||
background-color: darken($color_pallate_4, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_5"]#{&} {
|
||||
background-color: darken($color_pallate_5, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_6"]#{&} {
|
||||
background-color: darken($color_pallate_6, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_7"]#{&} {
|
||||
background-color: darken($color_pallate_7, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_8"]#{&} {
|
||||
background-color: darken($color_pallate_8, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_9"]#{&} {
|
||||
background-color: darken($color_pallate_9, 10%);
|
||||
}
|
||||
|
||||
@at-root [data-sibebarbg="color_10"]#{&} {
|
||||
background-color: darken($color_pallate_10, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
ul a {
|
||||
width: 101%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
&:hover {
|
||||
&>ul {
|
||||
max-height: 210px;
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
|
||||
&:hover {
|
||||
|
||||
&>ul {
|
||||
max-height: 210px;
|
||||
width: 700px;
|
||||
height: 210px !important;
|
||||
|
||||
@include custommq($min: 1200px, $max: 1500px) {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
&:hover {
|
||||
&>ul {
|
||||
max-height: 20rem;
|
||||
width: 54vw;
|
||||
|
||||
@include custommq($min: 1200px, $max: 1500px) {
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
&:hover {
|
||||
&>ul {
|
||||
max-height: 20rem;
|
||||
width: 25vw;
|
||||
|
||||
@include custommq($min: 1200px, $max: 1500px) {
|
||||
width: 35vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="boxed"] {
|
||||
.deznav {
|
||||
.metismenu {
|
||||
&>li {
|
||||
&.mega-menu {
|
||||
&:hover {
|
||||
&>ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
&:hover {
|
||||
&>ul {
|
||||
max-height: 21.875rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
|
||||
&:hover {
|
||||
|
||||
&>ul {
|
||||
max-height: 21.875rem;
|
||||
width: 55vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
&:hover {
|
||||
&>ul {
|
||||
max-height: 18.75rem;
|
||||
width: 45vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
&:hover {
|
||||
&>ul {
|
||||
max-height: 18.125rem;
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
public/style/scss/layout/sidebar/_sidebar-bg.scss
Normal file
3
public/style/scss/layout/sidebar/_sidebar-bg.scss
Normal file
@ -0,0 +1,3 @@
|
||||
[data-sibebarbg="image_3"] {
|
||||
|
||||
}
|
||||
162
public/style/scss/layout/sidebar/_sidebar-compact-nav.scss
Normal file
162
public/style/scss/layout/sidebar/_sidebar-compact-nav.scss
Normal file
@ -0,0 +1,162 @@
|
||||
////////////////
|
||||
// Compact Nav
|
||||
////////////////
|
||||
|
||||
@media (min-width:767px) {
|
||||
[data-sidebar-style="compact"] {
|
||||
|
||||
.deznav {
|
||||
|
||||
.nav-user{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
& > li{
|
||||
|
||||
& > a{
|
||||
padding:1.5rem 1.625rem 1.5rem 1.5rem;
|
||||
}
|
||||
ul{
|
||||
padding:1rem 0;
|
||||
|
||||
li > a{
|
||||
padding:0.5rem 1rem;
|
||||
&.has-arrow:after{
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
text-align: center;
|
||||
a {
|
||||
|
||||
svg{
|
||||
|
||||
max-width: 21px;
|
||||
max-height: 21px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
i{
|
||||
font-size:2.2rem;
|
||||
}
|
||||
&:after{
|
||||
content:none;
|
||||
}
|
||||
&:before{
|
||||
content: "";
|
||||
height: 75px;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform:translatey(-50%);
|
||||
background: $primary;
|
||||
border-radius:0 $radius $radius 0;
|
||||
@include transitionMedium;
|
||||
}
|
||||
}
|
||||
|
||||
ul:after{
|
||||
content:none;
|
||||
}
|
||||
&.mm-active,
|
||||
&:hover{
|
||||
& > a{
|
||||
background: -moz-linear-gradient(left, rgba(224,224,228,1) 0%, rgba(125,185,232,0) 100%);
|
||||
background: -webkit-linear-gradient(left, rgba(224,224,228,1) 0%,rgba(125,185,232,0) 100%);
|
||||
background: linear-gradient(to right, rgba(224,224,228,1) 0%,rgba(125,185,232,0) 100%);
|
||||
|
||||
&:before{
|
||||
width:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
display: inline-block;
|
||||
margin-top: 0.7125rem;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
&.first{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 9.375rem;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-layout="horizontal"][data-sidebar-style="compact"] {
|
||||
.footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
.content-body {
|
||||
margin-left:0;
|
||||
}
|
||||
.deznav .metismenu{
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
[data-layout="vertical"][data-sidebar-style="compact"] {
|
||||
.deznav {
|
||||
width: 15rem;
|
||||
|
||||
.metismenu {
|
||||
|
||||
ul{
|
||||
background: rgba(0,0,0,0.02);
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
background:(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
a{
|
||||
&:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
|
||||
ul a {
|
||||
padding: 0.625rem 0.9375rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&>li {
|
||||
&>a.has-arrow::after {
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
right: auto;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-width: 2px 0px 0px 2px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
269
public/style/scss/layout/sidebar/_sidebar-full.scss
Normal file
269
public/style/scss/layout/sidebar/_sidebar-full.scss
Normal file
@ -0,0 +1,269 @@
|
||||
@import "../../abstracts/variable";
|
||||
@import "../../abstracts/mixin";
|
||||
[data-sidebar-style="full"][data-layout="vertical"] {
|
||||
.deznav{
|
||||
|
||||
.metismenu{
|
||||
|
||||
& > li{
|
||||
padding: 0 0 0 40px;
|
||||
|
||||
& > a{
|
||||
font-size: 16px;
|
||||
padding: 20px 20px;
|
||||
border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
@include transitionMedium;
|
||||
position:relative;
|
||||
@include respond('laptop') {
|
||||
padding: 20px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
&:before{
|
||||
height:100%;
|
||||
position:absolute;
|
||||
border-radius:4px;
|
||||
width:6px;
|
||||
background:$primary;
|
||||
top:0;
|
||||
right:0;
|
||||
opacity: 0;
|
||||
content:"";
|
||||
@include transitionMedium;
|
||||
}
|
||||
}
|
||||
&.mm-active{
|
||||
|
||||
& > a{
|
||||
color:$primary;
|
||||
background:rgba($primary,0.1);
|
||||
i{
|
||||
color: $primary;
|
||||
}
|
||||
&:before{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.has-arrow:after{
|
||||
right: 2.5rem;
|
||||
@include respond('laptop') {
|
||||
right: 1.5rem;
|
||||
}
|
||||
}
|
||||
@include respond ('laptop'){
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.menu-toggle {
|
||||
.nav-header {
|
||||
width: 5rem;
|
||||
z-index: 999;
|
||||
.brand-logo {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-control {
|
||||
.hamburger {
|
||||
.line {
|
||||
background-color: $primary!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyright,
|
||||
.add-menu-sidebar{
|
||||
display:none;
|
||||
}
|
||||
.header {
|
||||
padding-left: 6rem;
|
||||
width: 100%;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding: 0 0.9375rem;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
}
|
||||
.deznav {
|
||||
width: 5rem;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
.nav-text {
|
||||
display: none;
|
||||
}
|
||||
.slimScrollDiv,
|
||||
.deznav-scroll {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.metismenu {
|
||||
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
padding: 13px;
|
||||
border-radius:$radius;
|
||||
margin:2px 0;
|
||||
|
||||
svg{
|
||||
max-width: 24px;
|
||||
max-height: 24px;
|
||||
margin-right: 0;
|
||||
}
|
||||
&:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
&>ul {
|
||||
position: absolute;
|
||||
left: 5rem;
|
||||
top: 0;
|
||||
width: 12rem;
|
||||
z-index: 1001;
|
||||
display: none;
|
||||
padding-left: 1px;
|
||||
height: auto !important;
|
||||
box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.1);
|
||||
border-radius: 6px;
|
||||
margin-left: 0;
|
||||
border:0;
|
||||
background:$white;
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: inherit;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
left: -5px;
|
||||
top: 20px;
|
||||
}
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 3rem;
|
||||
// box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
li:hover {
|
||||
ul {
|
||||
// display: block;
|
||||
left: 11.8125rem;
|
||||
top: 0;
|
||||
&:after{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover>ul {
|
||||
display: block;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
&>li {
|
||||
transition: all 0.4s ease-in-out;
|
||||
padding: 0 13px;
|
||||
|
||||
&>a {
|
||||
text-align: center;
|
||||
&.has-arrow {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
i{
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
margin:0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
&.mm-active > a{
|
||||
background:$primary;
|
||||
border-radius:$radius;
|
||||
color:$white;
|
||||
|
||||
|
||||
i{
|
||||
color: $white;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
&:nth-last-child(-n + 1) {
|
||||
&>ul {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
&>a {
|
||||
border-radius: $radius;
|
||||
background:$primary;
|
||||
color:$white;
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
background:$dark-card;
|
||||
}
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&>ul {
|
||||
height: auto !important;
|
||||
padding: 10px 0;
|
||||
|
||||
a {
|
||||
padding: 6px 20px 6px 20px;
|
||||
margin-left: -.1rem;
|
||||
}
|
||||
ul{
|
||||
padding: 10px 0;
|
||||
a {
|
||||
padding: 6px 20px 6px 20px;
|
||||
margin-left: -.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-label,
|
||||
.nav-badge {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-body {
|
||||
margin-left: 5rem;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
margin-right: 5rem;
|
||||
margin-left: auto;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
&+.footer {
|
||||
padding-left: 5rem;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding-left: 0;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-sidebar-style="full"][data-layout="horizontal"] {
|
||||
.deznav .metismenu{
|
||||
padding: 0 30px;
|
||||
}
|
||||
.header .header-content{
|
||||
padding-left: 1.875rem;
|
||||
}
|
||||
}
|
||||
349
public/style/scss/layout/sidebar/_sidebar-global.scss
Normal file
349
public/style/scss/layout/sidebar/_sidebar-global.scss
Normal file
@ -0,0 +1,349 @@
|
||||
///////////////////////////
|
||||
// Nav Profile
|
||||
///////////////////////////
|
||||
.nav-label {
|
||||
margin: 10px 30px 0;
|
||||
padding: 1.5625rem 0 10px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05rem;
|
||||
border-top: 1px solid $l-border;
|
||||
color:$dusty-gray;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
&.first {
|
||||
border: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
position: absolute;
|
||||
right: 2.8125rem;
|
||||
top: 0.625rem;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left: 21.563rem;
|
||||
z-index: 0;
|
||||
transition: all .2s ease;
|
||||
@include custommq($min: 1200px, $max: 1400px) {
|
||||
margin-left: 17rem;
|
||||
}
|
||||
}
|
||||
// Bell //
|
||||
.bell img{
|
||||
-webkit-animation: ring 8s .7s ease-in-out infinite;
|
||||
-webkit-transform-origin: 50% 4px;
|
||||
-moz-animation: ring 8s .7s ease-in-out infinite;
|
||||
-moz-transform-origin: 50% 4px;
|
||||
animation: ring 8s .7s ease-in-out infinite;
|
||||
}
|
||||
// bell //
|
||||
@-webkit-keyframes ring {
|
||||
0% { -webkit-transform: rotateZ(0); }
|
||||
1% { -webkit-transform: rotateZ(30deg); }
|
||||
3% { -webkit-transform: rotateZ(-28deg); }
|
||||
5% { -webkit-transform: rotateZ(34deg); }
|
||||
7% { -webkit-transform: rotateZ(-32deg); }
|
||||
9% { -webkit-transform: rotateZ(30deg); }
|
||||
11% { -webkit-transform: rotateZ(-28deg); }
|
||||
13% { -webkit-transform: rotateZ(26deg); }
|
||||
15% { -webkit-transform: rotateZ(-24deg); }
|
||||
17% { -webkit-transform: rotateZ(22deg); }
|
||||
19% { -webkit-transform: rotateZ(-20deg); }
|
||||
21% { -webkit-transform: rotateZ(18deg); }
|
||||
23% { -webkit-transform: rotateZ(-16deg); }
|
||||
25% { -webkit-transform: rotateZ(14deg); }
|
||||
27% { -webkit-transform: rotateZ(-12deg); }
|
||||
29% { -webkit-transform: rotateZ(10deg); }
|
||||
31% { -webkit-transform: rotateZ(-8deg); }
|
||||
33% { -webkit-transform: rotateZ(6deg); }
|
||||
35% { -webkit-transform: rotateZ(-4deg); }
|
||||
37% { -webkit-transform: rotateZ(2deg); }
|
||||
39% { -webkit-transform: rotateZ(-1deg); }
|
||||
41% { -webkit-transform: rotateZ(1deg); }
|
||||
43% { -webkit-transform: rotateZ(0); }
|
||||
100% { -webkit-transform: rotateZ(0); }
|
||||
}
|
||||
@-moz-keyframes ring {
|
||||
0% { -moz-transform: rotate(0); }
|
||||
1% { -moz-transform: rotate(30deg); }
|
||||
3% { -moz-transform: rotate(-28deg); }
|
||||
5% { -moz-transform: rotate(34deg); }
|
||||
7% { -moz-transform: rotate(-32deg); }
|
||||
9% { -moz-transform: rotate(30deg); }
|
||||
11% { -moz-transform: rotate(-28deg); }
|
||||
13% { -moz-transform: rotate(26deg); }
|
||||
15% { -moz-transform: rotate(-24deg); }
|
||||
17% { -moz-transform: rotate(22deg); }
|
||||
19% { -moz-transform: rotate(-20deg); }
|
||||
21% { -moz-transform: rotate(18deg); }
|
||||
23% { -moz-transform: rotate(-16deg); }
|
||||
25% { -moz-transform: rotate(14deg); }
|
||||
27% { -moz-transform: rotate(-12deg); }
|
||||
29% { -moz-transform: rotate(10deg); }
|
||||
31% { -moz-transform: rotate(-8deg); }
|
||||
33% { -moz-transform: rotate(6deg); }
|
||||
35% { -moz-transform: rotate(-4deg); }
|
||||
37% { -moz-transform: rotate(2deg); }
|
||||
39% { -moz-transform: rotate(-1deg); }
|
||||
41% { -moz-transform: rotate(1deg); }
|
||||
43% { -moz-transform: rotate(0); }
|
||||
100% { -moz-transform: rotate(0); }
|
||||
}
|
||||
@keyframes ring {
|
||||
0% { transform: rotate(0); }
|
||||
1% { transform: rotate(30deg); }
|
||||
3% { transform: rotate(-28deg); }
|
||||
5% { transform: rotate(34deg); }
|
||||
7% { transform: rotate(-32deg); }
|
||||
9% { transform: rotate(30deg); }
|
||||
11% { transform: rotate(-28deg); }
|
||||
13% { transform: rotate(26deg); }
|
||||
15% { transform: rotate(-24deg); }
|
||||
17% { transform: rotate(22deg); }
|
||||
19% { transform: rotate(-20deg); }
|
||||
21% { transform: rotate(18deg); }
|
||||
23% { transform: rotate(-16deg); }
|
||||
25% { transform: rotate(14deg); }
|
||||
27% { transform: rotate(-12deg); }
|
||||
29% { transform: rotate(10deg); }
|
||||
31% { transform: rotate(-8deg); }
|
||||
33% { transform: rotate(6deg); }
|
||||
35% { transform: rotate(-4deg); }
|
||||
37% { transform: rotate(2deg); }
|
||||
39% { transform: rotate(-1deg); }
|
||||
41% { transform: rotate(1deg); }
|
||||
43% { transform: rotate(0); }
|
||||
100% { transform: rotate(0); }
|
||||
}
|
||||
|
||||
// 38px + 60px
|
||||
///////////////
|
||||
// Sidebar
|
||||
//////////////
|
||||
.deznav {
|
||||
width: 21.563rem;
|
||||
padding-bottom: 0;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding-top: 120px;
|
||||
z-index: 4;
|
||||
background-color: $white;
|
||||
box-shadow: 0px 0px 10px rgba(120, 130, 140, 0.13);
|
||||
transition: all .2s ease;
|
||||
// border-top-left-radius: 5px;
|
||||
// border-top-right-radius: 5px;
|
||||
//box-shadow: 18px 0px 35px 0px rgba(0, 0, 0, 0.02);
|
||||
|
||||
@include respond('tab-land') {
|
||||
padding-top:80px;
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
width: 18rem;
|
||||
}
|
||||
// @include respond('big-desktop') {
|
||||
// left: 6rem;
|
||||
// }
|
||||
.deznav-scroll {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
// overflow: visible!important;
|
||||
// border-top-left-radius: 5px;
|
||||
// border-top-right-radius: 5px;
|
||||
}
|
||||
@include custommq($min: 1200px, $max: 1400px) {
|
||||
width: 17rem;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.metismenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 15px;
|
||||
|
||||
@include respond('phone-land') {
|
||||
padding-top: 0;
|
||||
}
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
&>li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
a {
|
||||
&>i {
|
||||
//icon will get color from parent "a"
|
||||
font-size: 1.4rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
//padding: 0 1.5rem 0 0;
|
||||
position: relative;
|
||||
top: 0;
|
||||
height:auto;
|
||||
width:auto;
|
||||
border-radius:$radius;
|
||||
line-height: 1;
|
||||
text-align:center;
|
||||
@include transitionMedium;
|
||||
margin-right: 15px;
|
||||
|
||||
@at-root [data-sidebar-style="compact"] & {
|
||||
display:block;
|
||||
padding:0;
|
||||
}
|
||||
@include custommq($max:1300px){
|
||||
height:auto;
|
||||
width:auto;
|
||||
margin-right:0;
|
||||
line-height:1;
|
||||
padding:0;
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
font-size: 1.25rem;
|
||||
padding: 0 .75rem 0 0;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>a {
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
|
||||
svg {
|
||||
max-width: 24px;
|
||||
max-height: 24px;
|
||||
height: 100%;
|
||||
margin-right:5px;
|
||||
margin-top: -3px;
|
||||
color: $primary;
|
||||
}
|
||||
g [fill] {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
&>a {
|
||||
// background-color: lighten($color: $primary, $amount: 40%);
|
||||
color: $primary;
|
||||
g [fill] {
|
||||
fill: $primary;
|
||||
}
|
||||
// &::after {
|
||||
// border-color: blue;
|
||||
// }
|
||||
}
|
||||
}
|
||||
&.mm-active {
|
||||
&>a {
|
||||
color: $primary;
|
||||
g [fill] {
|
||||
fill: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
//one step dropdown
|
||||
ul {
|
||||
//background-color: darken($color: $white, $amount: 2%);
|
||||
transition: all .2s ease-in-out;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
padding: 5px 0;
|
||||
|
||||
a {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
padding-left: 3.9rem;
|
||||
@include respond('laptop') {
|
||||
padding-left: 3.9rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
text-decoration: none;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0.625rem 1.875rem;
|
||||
outline-width: 0;
|
||||
color: rgba($color: $body-color, $alpha: 1);
|
||||
text-decoration: none;
|
||||
@include respond('phone-land') {
|
||||
padding: 0.625rem 1.25rem;
|
||||
}
|
||||
}
|
||||
.has-arrow {
|
||||
&:after {
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
right: 1.875rem;
|
||||
top: 48%;
|
||||
border-color: inherit;
|
||||
-webkit-transform: rotate(-225deg) translateY(-50%);
|
||||
transform: rotate(-225deg) translateY(-50%);
|
||||
|
||||
}
|
||||
}
|
||||
.has-arrow[aria-expanded=true]:after,
|
||||
.mm-active>.has-arrow:after {
|
||||
-webkit-transform: rotate(-135deg) translateY(-50%);
|
||||
transform: rotate(-135deg) translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .metismenu .mm-active>.has-arrow:after, .metismenu .has-arrow[aria-expanded=true]:after {
|
||||
// transform: rotate(45deg) translateY(-50%);
|
||||
// }
|
||||
|
||||
.nav-header {
|
||||
@include respond('tab-land'){
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
|
||||
.brand-title {
|
||||
display: none;
|
||||
}
|
||||
.footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
.deznav {
|
||||
left: 0;
|
||||
top: 5rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
383
public/style/scss/layout/sidebar/_sidebar-horizontal.scss
Normal file
383
public/style/scss/layout/sidebar/_sidebar-horizontal.scss
Normal file
@ -0,0 +1,383 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
////////////////////
|
||||
// Horizontal Nav
|
||||
////////////////////
|
||||
@media (min-width: 1199px) {
|
||||
[data-layout="horizontal"] {
|
||||
|
||||
.nav-header {
|
||||
width: 16rem;
|
||||
|
||||
.nav-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
/* padding-left: 0;
|
||||
justify-content: center; */
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
padding-left: 16rem;
|
||||
}
|
||||
|
||||
.deznav {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: auto;
|
||||
padding-bottom: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
|
||||
.slimScrollDiv {
|
||||
overflow: visible!important;
|
||||
|
||||
.deznav-scroll {
|
||||
overflow: visible!important;
|
||||
}
|
||||
}
|
||||
.deznav-scroll {
|
||||
overflow: visible!important;
|
||||
}
|
||||
.slimScrollBar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-user,
|
||||
.nav-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
flex-direction: row;
|
||||
|
||||
.collapse.in {
|
||||
display: none;
|
||||
}
|
||||
ul{
|
||||
border-left:0;
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
li {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
&>ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&>ul {
|
||||
position: absolute;
|
||||
height: auto !important;
|
||||
top: 3.25rem;
|
||||
width: 100%;
|
||||
min-width: 13.75rem;
|
||||
z-index: 999;
|
||||
left: auto;
|
||||
right: auto;
|
||||
padding: 0.5rem 0;
|
||||
display: none;
|
||||
box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.1);
|
||||
margin:0;
|
||||
background:$white;
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
transition: all .4s ease-in-out;
|
||||
padding: 8px 20px 8px 45px;
|
||||
margin-left: -.1rem;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding: 8px 45px 8px 20px;
|
||||
text-align: right;
|
||||
}
|
||||
&:hover {
|
||||
border-radius: .4rem;
|
||||
}
|
||||
&:before{
|
||||
left: 22px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
box-shadow: 0px 10px 13px 0px rgba(82, 63, 105, 0.05);
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>li {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
border-color: rgba(255,255,255,0.07);
|
||||
|
||||
&.mm-active{
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&.mm-active{
|
||||
padding:0;
|
||||
& > a{
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
|
||||
}
|
||||
}
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
//&:not(:first-child) {
|
||||
// border-right: lighten($color: $color-pallate-2, $amount: 10%);
|
||||
//}
|
||||
|
||||
&:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
&>a {
|
||||
padding: 15px 40px 15px 15px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding: 15px 15px 15px 40px;
|
||||
}
|
||||
|
||||
i{
|
||||
padding: 0 0.4375rem 0 0;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding: 0 0 0 0.4375rem;
|
||||
}
|
||||
}
|
||||
.nav-badge {
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
right: 20px;
|
||||
transform: rotate(-135deg) translateY(-50%);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border-color:transparent;
|
||||
|
||||
&>ul {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: auto !important;
|
||||
box-shadow: 0px 10px 13px 0px rgba(82, 63, 105, 0.05);
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
box-shadow: 0px 0 13px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&>ul {
|
||||
&>li {
|
||||
&:hover {
|
||||
ul.collapse {
|
||||
display: block!important;
|
||||
position: absolute;
|
||||
left: auto!important;
|
||||
right: -100%!important;
|
||||
top: 0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-last-child(-n + 5) {
|
||||
&>ul {
|
||||
left: auto;
|
||||
right: 0;
|
||||
&>li {
|
||||
&:hover {
|
||||
ul.collapse {
|
||||
right: auto!important;
|
||||
left: -100%!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
&>ul {
|
||||
ul {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
|
||||
&:nth-last-child(-n + 3) {
|
||||
&>ul {
|
||||
left: 0;
|
||||
right: auto;
|
||||
&>li {
|
||||
&:hover {
|
||||
ul.collapse {
|
||||
right: -100% !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left: 0;
|
||||
.page-titles {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-left: 0;
|
||||
margin: 0 auto;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-header-position="fixed"][data-layout="horizontal"] {
|
||||
.deznav {
|
||||
top: 5rem;
|
||||
}
|
||||
} //ok
|
||||
|
||||
[data-header-position="fixed"][data-sidebar-position="fixed"] {
|
||||
.deznav {
|
||||
position: fixed;
|
||||
}
|
||||
} //ok
|
||||
|
||||
[data-header-position="fixed"][data-layout="horizontal"][data-sidebar-position="fixed"] {
|
||||
.content-body {
|
||||
padding-top: 8.3rem;
|
||||
}
|
||||
} //ok
|
||||
|
||||
[data-layout="horizontal"][data-container="boxed"] {
|
||||
|
||||
.footer {
|
||||
margin-left: 0;
|
||||
max-width: 1199px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide"] {
|
||||
.page-titles {
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-sidebar-style="compact"] {
|
||||
.page-titles {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.deznav {
|
||||
.metismenu {
|
||||
|
||||
&>li {
|
||||
&>ul {
|
||||
top: 4.315rem;
|
||||
}
|
||||
&>a {
|
||||
padding: 0.8125rem 2.1rem;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="mini"][data-layout="horizontal"] {
|
||||
.nav-header {
|
||||
width: 6rem;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
.brand-logo {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
padding-left: 6rem;
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
&>li {
|
||||
&:hover {
|
||||
a {
|
||||
width: auto;
|
||||
.nav-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-header-position="fixed"][data-layout="horizontal"][data-sidebar-position="fixed"][data-sidebar-style="compact"] {
|
||||
.content-body {
|
||||
padding-top: 8.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-position="fixed"][data-layout="horizontal"] {
|
||||
.deznav.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
189
public/style/scss/layout/sidebar/_sidebar-icon-hover.scss
Normal file
189
public/style/scss/layout/sidebar/_sidebar-icon-hover.scss
Normal file
@ -0,0 +1,189 @@
|
||||
@media (min-width: 767px) {
|
||||
|
||||
[data-sidebar-style="icon-hover"][data-layout="horizontal"] {
|
||||
.metismenu {
|
||||
padding: 0 30px;
|
||||
}
|
||||
.header .header-content {
|
||||
padding-left: 1.875rem;
|
||||
}
|
||||
}
|
||||
[data-sidebar-style="icon-hover"][data-layout="vertical"] {
|
||||
.nav-header {
|
||||
width: 5.063rem;
|
||||
|
||||
.brand-logo {
|
||||
padding-left: 20px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding-left:1.25rem;
|
||||
padding-right:1.25rem;
|
||||
}
|
||||
.logo-abbr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-left: 5.063rem;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding-right: 4.38rem;
|
||||
padding-left: 0.9375rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding-left: 1.375rem;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding-right: 1.375rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deznav {
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
left: -12.125rem;
|
||||
// z-index: 1;
|
||||
|
||||
@include custommq($min: 1200px, $max: 1350px) {
|
||||
left: -10rem;
|
||||
}
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: -12.125rem;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
&>li {
|
||||
&>a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&>svg,
|
||||
&>i {
|
||||
order: 1;
|
||||
margin-right:0;
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
border-left: 0;
|
||||
padding-left:0;
|
||||
padding-right:28px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding-right:0;
|
||||
padding-left:28px;
|
||||
}
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
border-color:$d-border;
|
||||
}
|
||||
&:after{
|
||||
left:auto;
|
||||
right:28px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left:28px;
|
||||
right:auto;
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: -5px;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
right: auto;
|
||||
left:-5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&::after {
|
||||
right: 5rem;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
right: auto;
|
||||
left: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-hover-toggle {
|
||||
|
||||
.nav-header {
|
||||
width: 17.1875rem;
|
||||
|
||||
.brand-logo {
|
||||
padding-left: 1.6rem;
|
||||
|
||||
|
||||
.brand-title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-left: 4.38rem;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding-right: 4.38rem;
|
||||
padding-left: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.deznav {
|
||||
left: 0;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left: 5rem;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
margin-left: 0;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 4.375rem;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
margin-left: 0;
|
||||
margin-right: 4.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
311
public/style/scss/layout/sidebar/_sidebar-mini-nav.scss
Normal file
311
public/style/scss/layout/sidebar/_sidebar-mini-nav.scss
Normal file
@ -0,0 +1,311 @@
|
||||
@import "../../abstracts/_mixin";
|
||||
@import "../../abstracts/_variable";
|
||||
|
||||
@include custommq($min: 768px) {
|
||||
|
||||
[data-sidebar-style="mini"] {
|
||||
|
||||
.nav-header {
|
||||
width: 5rem;
|
||||
|
||||
.nav-control {
|
||||
z-index: -1;
|
||||
.hamburger{
|
||||
left: 5rem!important;
|
||||
.line{
|
||||
background-color: $dark!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-title {
|
||||
display: none;
|
||||
}
|
||||
.hamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.header .header-content{
|
||||
padding-left: 1.875rem;
|
||||
@at-root [direction="rtl"]#{&}{
|
||||
padding-right: 1.875rem;
|
||||
}
|
||||
}
|
||||
.deznav {
|
||||
width: 5rem;
|
||||
overflow: visible;
|
||||
position: absolute!important;
|
||||
.copyright,
|
||||
.add-menu-sidebar{
|
||||
display:none;
|
||||
}
|
||||
.nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slimScrollDiv,
|
||||
.deznav-scroll {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.nav-user{
|
||||
padding: 11px;
|
||||
.media-body{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
li {
|
||||
|
||||
a {
|
||||
padding: 0.813rem 0.875rem;
|
||||
svg{
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
&>ul {
|
||||
position: absolute;
|
||||
left: 5rem;
|
||||
top: 2.9375rem;
|
||||
width: 11.875rem;
|
||||
z-index: 1001;
|
||||
display: none;
|
||||
padding-left: 1px;
|
||||
box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.1);
|
||||
height: auto !important;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
|
||||
@at-root [direction="rtl"]:not([data-layout="horizontal"])#{&} {
|
||||
left: auto;
|
||||
right: 5rem;
|
||||
box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
&>li {
|
||||
padding: 2px 15px;
|
||||
&>a {
|
||||
|
||||
&.has-arrow {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-label,
|
||||
.nav-badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 5rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
[data-sidebar-style="mini"][data-layout="vertical"] {
|
||||
.deznav {
|
||||
.metismenu {
|
||||
|
||||
li {
|
||||
&:hover>ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&>li {
|
||||
|
||||
&:nth-last-child(-n + 1) {
|
||||
&>ul {
|
||||
bottom:0;
|
||||
top: auto !important;
|
||||
&:after{
|
||||
top:auto;
|
||||
bottom:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond('tab-land') {
|
||||
&:nth-last-child(-n + 1) {
|
||||
&>ul {
|
||||
bottom: 0;
|
||||
top: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>ul {
|
||||
overflow: visible;
|
||||
|
||||
&:after{
|
||||
content:none;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
ul {
|
||||
padding: 10px 0;
|
||||
width: 13rem;
|
||||
left: 13rem;
|
||||
top: -10px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
&:after{
|
||||
content:none;
|
||||
}
|
||||
@at-root [direction="rtl"]#{&}{
|
||||
left: auto;
|
||||
right: 13rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mm-active {
|
||||
&>a {
|
||||
background: $primary;
|
||||
color:$white;
|
||||
border-radius: $radius;
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
background: $dark-card;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
|
||||
|
||||
&>a {
|
||||
background: $primary;
|
||||
color:$white;
|
||||
border-radius: $radius;
|
||||
position: unset;
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
background: $dark-card;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding-left: auto;
|
||||
padding-right: 1.6875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>ul {
|
||||
height: auto !important;
|
||||
overflow: visible;
|
||||
border:0;
|
||||
margin-left:0;
|
||||
left: 5rem;
|
||||
width: 13rem;
|
||||
border-radius:12px;
|
||||
border:0;
|
||||
padding: 10px 0;
|
||||
top: 0;
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: inherit;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
left: -5px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
box-shadow: 0px 9px 10px 0px rgba(0, 0, 0, 0.1);;
|
||||
}
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 5rem;
|
||||
}
|
||||
a {
|
||||
padding: 6px 20px 6px 20px;
|
||||
|
||||
&:before{
|
||||
content:none;
|
||||
}
|
||||
&.has-arrow:after{
|
||||
right: 1.25rem
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
|
||||
a {
|
||||
padding: 6px 20px 6px 20px;
|
||||
margin-left: -1.6px;
|
||||
&:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="mini"][data-header-position="fixed"][data-container="boxed"][data-layout="vertical"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="mini"][data-layout="horizontal"] {
|
||||
.deznav .metismenu {
|
||||
padding: 0 30px;
|
||||
}
|
||||
.deznav .metismenu > li > a {
|
||||
padding: 15px 20px;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
padding: 15px 20px;
|
||||
svg {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
svg{
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include respond('tab-land') {
|
||||
[data-sidebar-style="mini"] {
|
||||
.deznav {
|
||||
|
||||
li {
|
||||
&.mm-active {
|
||||
ul {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
a.has-arrow {
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
234
public/style/scss/layout/sidebar/_sidebar-modern.scss
Normal file
234
public/style/scss/layout/sidebar/_sidebar-modern.scss
Normal file
@ -0,0 +1,234 @@
|
||||
@media (min-width:767px) {
|
||||
[data-sidebar-style="modern"] {
|
||||
|
||||
.nav-header {
|
||||
width: 9.375rem;
|
||||
.brand-logo{
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.deznav {
|
||||
|
||||
.metismenu {
|
||||
|
||||
&>li {
|
||||
text-align: center;
|
||||
|
||||
|
||||
&>a {
|
||||
padding: 20px 15px 20px 15px!important;
|
||||
// font-weight: 500;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.mm-active {
|
||||
&>a {
|
||||
background-color: lighten($color: $primary, $amount: 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mm-active{
|
||||
padding:0;
|
||||
}
|
||||
li {
|
||||
text-align: left;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
a {
|
||||
padding: 0.625rem 0.9375rem 0.625rem 0.9375rem;
|
||||
}
|
||||
ul:after{
|
||||
content:none;
|
||||
}
|
||||
|
||||
&>ul {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
.nav-label{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.nav-text {
|
||||
display: block;
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 9.375rem;
|
||||
}
|
||||
.content-body {
|
||||
margin-left: 9.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="modern"][data-layout="vertical"] {
|
||||
|
||||
.deznav {
|
||||
width: 9.375rem;
|
||||
left: 0;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.slimScrollDiv,
|
||||
.deznav-scroll {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
&>li {
|
||||
&>a{
|
||||
i{
|
||||
font-size: 20px;
|
||||
// height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&>ul {
|
||||
display: none;
|
||||
padding: 1.875rem 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
padding:0.625rem 1.5rem;
|
||||
&:before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
left: 105%;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
background-color: $white;
|
||||
border: 1px solid $border;
|
||||
width: 200px;
|
||||
// box-shadow: 2px 3px 10px 0px rgba(119, 119, 119, 0.1);
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
background:$dark-card;
|
||||
box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 105%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&>ul {
|
||||
display: block;
|
||||
left: 100%;
|
||||
padding: 1rem 0;
|
||||
margin-left: -10px;
|
||||
border: 0;
|
||||
box-shadow: 5px 0px 13px 0px rgba(82, 63, 105, 0.05);
|
||||
|
||||
@at-root [data-theme-version="dark"]#{&} {
|
||||
box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
box-shadow: -5px 0px 13px 0px rgba(82, 63, 105, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-toggle {
|
||||
.deznav {
|
||||
left: -9.375rem;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: -9.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left: 0;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="modern"][data-layout="horizontal"] {
|
||||
.footer,
|
||||
.content-body {
|
||||
margin-left:0;
|
||||
}
|
||||
.deznav {
|
||||
.metismenu {
|
||||
padding: 0 30px;
|
||||
|
||||
&>li {
|
||||
&>a {
|
||||
padding: 0.8125rem 2.25rem;
|
||||
}
|
||||
|
||||
&>ul {
|
||||
top: 4.5625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-container="boxed"] {
|
||||
.deznav {
|
||||
.metismenu {
|
||||
|
||||
&>li {
|
||||
&>a {
|
||||
padding: 0.8125rem 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
49
public/style/scss/layout/sidebar/_sidebar-overlay.scss
Normal file
49
public/style/scss/layout/sidebar/_sidebar-overlay.scss
Normal file
@ -0,0 +1,49 @@
|
||||
[data-sidebar-style="overlay"] {
|
||||
.deznav {
|
||||
left: -100%;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: -100%;
|
||||
}
|
||||
}
|
||||
.content-body {
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-header {
|
||||
position: absolute;
|
||||
.hamburger.is-active {
|
||||
left: 0;
|
||||
.line {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-toggle {
|
||||
.nav-header {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
}
|
||||
.deznav {
|
||||
left: 0;
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-style="overlay"][data-header-position="fixed"] {
|
||||
.nav-header {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-position="fixed"][data-header-position="fixed"] {
|
||||
.nav-header {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
75
public/style/scss/layout/sidebar/_sidebar-profile.scss
Normal file
75
public/style/scss/layout/sidebar/_sidebar-profile.scss
Normal file
@ -0,0 +1,75 @@
|
||||
///////////////////////////
|
||||
// Sidebar profile
|
||||
///////////////////////////
|
||||
.nav-user {
|
||||
// text-align: center;
|
||||
background: $primary;
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 25px 15px;
|
||||
@include custommq($min: 768px, $max: 1199px) {
|
||||
padding: 20px 15px 15px;
|
||||
}
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
@include custommq($min: 768px, $max: 1199px) {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 3px;
|
||||
color: $white;
|
||||
@include custommq($min: 768px, $max: 1199px) {
|
||||
display: none;
|
||||
}
|
||||
@at-root [data-sibebarbg="color_2"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-left: 10px;
|
||||
margin-bottom: 8px;
|
||||
color: #afcff7;
|
||||
@include custommq($min: 768px, $max: 1199px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include custommq($min: 768px, $max: 1199px) {
|
||||
i{
|
||||
margin-top: 15px;
|
||||
display: block
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.menu-toggle{
|
||||
.nav-user {
|
||||
padding: 20px 15px 15px;
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h5,
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
i {
|
||||
margin-top: 15px;
|
||||
display: block
|
||||
}
|
||||
.dropdown-menu {
|
||||
left: 45px !important;
|
||||
top: 22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
204
public/style/scss/layout/sidebar/_sidebar-right.scss
Normal file
204
public/style/scss/layout/sidebar/_sidebar-right.scss
Normal file
@ -0,0 +1,204 @@
|
||||
// @import "../../abstracts/variable";
|
||||
|
||||
.sidebar-right {
|
||||
// display: none;
|
||||
right: -15.625rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 15.625rem;
|
||||
background-color: $white;
|
||||
height: calc(100% - 7.0625rem);
|
||||
margin-top: 5rem;
|
||||
transition: all .5s ease-in-out;
|
||||
padding-bottom: 1.875rem;
|
||||
box-shadow: -2px 3px 10px 0px rgba(119, 119, 119, 0.1);
|
||||
|
||||
.slimScrollDiv {
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
.sidebar-right-trigger {
|
||||
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 4.75rem;
|
||||
right: 100%;
|
||||
background-color: $white;
|
||||
color: $primary;
|
||||
display: inline-block;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
line-height: 3rem;
|
||||
border-radius: 5px 0 0 5px;
|
||||
box-shadow: -5px 3px 5px 0px rgba(119, 119, 119, 0.15);
|
||||
|
||||
@at-root [data-theme-version="dark"] #{&} {
|
||||
background-color: #31343b;
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: $white;
|
||||
z-index: 2;
|
||||
|
||||
@at-root [data-theme-version="dark"] #{&} {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
|
||||
.nav-link {
|
||||
border: 0;
|
||||
font-size: 1.125rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@at-root [data-theme-version="dark"] #{&} {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
@at-root [data-theme-version="dark"] #{&} {
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 1.25rem;
|
||||
|
||||
.tab-pane {
|
||||
|
||||
.admin-settings {
|
||||
& > div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
//All color switcher scss goes here
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
+ label {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
transition: all .1s ease;
|
||||
border-radius: 4px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
border-radius: 6px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#nav_header,
|
||||
#header,
|
||||
#sidebar,
|
||||
#primary{
|
||||
|
||||
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
&_#{$name} {
|
||||
+ label {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_color_1 {
|
||||
+ label {
|
||||
border: 1px solid $muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
transform: translateX(-8%);;
|
||||
-webkit-transform: translateX(-8%);;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(8%);;
|
||||
-webkit-transform: translateX(8%);;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-8%);;
|
||||
-webkit-transform: translateX(-8%);;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce {
|
||||
0% {
|
||||
transform: translateX(-8%);;
|
||||
-webkit-transform: translateX(-8%);;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(8%);;
|
||||
-webkit-transform: translateX(8%);;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-8%);;
|
||||
-webkit-transform: translateY(-8%);;
|
||||
}
|
||||
}
|
||||
30
public/style/scss/layout/sidebar/_sidebar-vertical-nav.scss
Normal file
30
public/style/scss/layout/sidebar/_sidebar-vertical-nav.scss
Normal file
@ -0,0 +1,30 @@
|
||||
[data-sidebar-position="fixed"][data-layout="vertical"] {
|
||||
.nav-header {
|
||||
position: fixed;
|
||||
// left: auto;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.deznav {
|
||||
position: fixed;
|
||||
// z-index: 0;
|
||||
.deznav-scroll {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
.deznav {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-header-position="fixed"][data-sidebar-position="fixed"][data-sidebar-style="overlay"][data-layout="vertical"][data-container="boxed"] {
|
||||
.deznav {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
public/style/scss/layout/sidebar/_sidebar.scss
Normal file
15
public/style/scss/layout/sidebar/_sidebar.scss
Normal file
@ -0,0 +1,15 @@
|
||||
//all sidebar css goes here
|
||||
@import './sidebar-global';
|
||||
@import './sidebar-bg';
|
||||
@import './mega-menu';
|
||||
@import './sidebar-full';
|
||||
@import './sidebar-mini-nav';
|
||||
@import './sidebar-horizontal';
|
||||
@import './sidebar-compact-nav';
|
||||
@import './sidebar-icon-hover';
|
||||
@import './sidebar-modern';
|
||||
@import './sidebar-overlay';
|
||||
@import './sidebar-vertical-nav';
|
||||
@import './sidebar-right';
|
||||
@import './sidebar-profile';
|
||||
@import './fixed-sidebar';
|
||||
235
public/style/scss/layout/theme/_theme-bg.scss
Normal file
235
public/style/scss/layout/theme/_theme-bg.scss
Normal file
@ -0,0 +1,235 @@
|
||||
//background for nav header
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-nav-headerbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-nav-headerbg="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
.nav-header {
|
||||
background-color: $color;
|
||||
|
||||
.brand-logo {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.hamburger .line{
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
}
|
||||
&[data-sidebar-style="full"][data-layout="vertical"]{
|
||||
.menu-toggle .nav-header .nav-control .hamburger .line{
|
||||
background:#fff ;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//background for header
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-headerbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-headerbg="#{$name}"] {
|
||||
|
||||
@if $name != "color_1" {
|
||||
.header {
|
||||
background-color: $color;
|
||||
color: $white;
|
||||
}
|
||||
.header-left {
|
||||
input {
|
||||
border-color: lighten($color: $color, $amount: 10%);
|
||||
background-color: lighten($color: $color, $amount: 10%) !important;
|
||||
color: $white;
|
||||
// border-right-color: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: darken($color: $color, $amount: 10%);
|
||||
}
|
||||
}
|
||||
.search_icon{
|
||||
background-color: lighten($color: $color, $amount: 10%) !important;
|
||||
i{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: darken($color: $color, $amount: 10%);
|
||||
border-color: darken($color: $color, $amount: 10%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken($color: $color, $amount: 20%);
|
||||
border-color: darken($color: $color, $amount: 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.dropdown {
|
||||
&>a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.pulse-css{
|
||||
background-color:$white;
|
||||
&:after,
|
||||
&:before{
|
||||
background-color:inherit;
|
||||
}
|
||||
}
|
||||
.notification_dropdown .nav-link{
|
||||
background-color: lighten($color: $color, $amount: 10%) !important;
|
||||
}
|
||||
.right-sidebar a{
|
||||
border-color:rgba(255,255,255,0.1);
|
||||
color:$white;
|
||||
}
|
||||
.header-profile > a.nav-link .header-info {
|
||||
strong{
|
||||
color:$white;
|
||||
}
|
||||
span,
|
||||
small{
|
||||
color:rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-control {
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//styles for sidebar
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
//:not([data-sidebar-style="modern"])
|
||||
[data-sibebarbg="#{$name}"][data-theme-version="dark"],
|
||||
[data-sibebarbg="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
|
||||
.deznav {
|
||||
background-color: $color;
|
||||
.menu-tabs li a.active{
|
||||
color: $color;
|
||||
}
|
||||
.metismenu {
|
||||
.nav-label{
|
||||
color:rgba(255,255,255,0.7);
|
||||
border-color:rgba(255,255,255,0.2);
|
||||
}
|
||||
&>li {
|
||||
&>a {
|
||||
color: rgba(255,255,255,0.7); //darken($color: $white, $amount: 0%);
|
||||
svg{
|
||||
color:rgba(255,255,255,0.7);
|
||||
}
|
||||
g [fill] {
|
||||
fill: rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
|
||||
&>a {
|
||||
color: $white;
|
||||
g [fill] {
|
||||
fill:$white;
|
||||
}
|
||||
svg{
|
||||
color:$white;
|
||||
}
|
||||
// &::after {
|
||||
// border-color: transparent transparent $white transparent;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@at-root [data-layout="horizontal"]#{&} {
|
||||
// &:not(:last-child) {
|
||||
border-color: lighten($color: $color, $amount: 10%);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255,255,255,0.7);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
&:after{
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// .has-arrow {
|
||||
// &:after {
|
||||
// border-color: transparent transparent darken($color: $white, $amount: 30%) transparent;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="mini"][data-layout="vertical"]{
|
||||
.deznav .metismenu li > ul{
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
}
|
||||
.deznav .metismenu > li.mm-active > a,
|
||||
.deznav .metismenu > li:hover > a{
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="full"][data-layout="vertical"]{
|
||||
.menu-toggle .deznav .metismenu li > ul,
|
||||
.menu-toggle .deznav .metismenu > li.mm-active > a,
|
||||
.menu-toggle .deznav .metismenu > li:hover > a{
|
||||
background-color: lighten($color: $color, $amount: 10%);
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="icon-hover"][data-layout="vertical"]{
|
||||
.deznav .metismenu ul{
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
&[data-layout="horizontal"]{
|
||||
.deznav .metismenu > li{
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-headerbg="transparent"]{
|
||||
.header{
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
[data-headerbg="color_1"]{
|
||||
.nav-header .hamburger.is-active .line,
|
||||
.nav-header .hamburger .line{
|
||||
background:$primary !important;
|
||||
}
|
||||
}
|
||||
92
public/style/scss/layout/theme/_theme-boxed.scss
Normal file
92
public/style/scss/layout/theme/_theme-boxed.scss
Normal file
@ -0,0 +1,92 @@
|
||||
@media (min-width: 992px) {
|
||||
[data-container="boxed"] {
|
||||
#main-wrapper {
|
||||
max-width: 1199px;
|
||||
margin: 0 auto;
|
||||
|
||||
@at-root [direction="rtl"]#{&} {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include custommq($min: 1350px) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include custommq($min: 1200px, $max: 1349px) {
|
||||
[data-layout="vertical"][data-sidebar-style="overlay"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-header-position="fixed"][data-layout="horizontal"][data-container="boxed"] {
|
||||
.deznav {
|
||||
max-width: 1199px;
|
||||
}
|
||||
} //ok
|
||||
|
||||
[data-layout="horizontal"][data-container="boxed"][data-header-position="fixed"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="boxed"][data-header-position="fixed"][data-sidebar-style="mini"] {
|
||||
.header {
|
||||
width: 1199px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-container="boxed"] {
|
||||
.metismenu.fixed {
|
||||
left: auto;
|
||||
max-width: 1199px;
|
||||
}
|
||||
|
||||
.page-titles {
|
||||
margin-bottom: 3rem;
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.content-body .container-fluid {
|
||||
padding: 0.9375rem 0.9375rem 0 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="boxed"][data-layout="vertical"] {
|
||||
.page-titles {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"][data-container="boxed"][data-sidebar-position="fixed"][data-header-position="static"][data-sidebar-style="overlay"] {
|
||||
.nav-header {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
.deznav {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="boxed"][data-sidebar-position="fixed"][data-layout="horizontal"] {
|
||||
.deznav.fixed {
|
||||
left: auto;
|
||||
max-width: 1199px;
|
||||
}
|
||||
}
|
||||
605
public/style/scss/layout/theme/_theme-color.scss
Normal file
605
public/style/scss/layout/theme/_theme-color.scss
Normal file
@ -0,0 +1,605 @@
|
||||
//Theme color for Primary Variable
|
||||
@each $name, $color in $theme_backgrounds {
|
||||
[data-primary="#{$name}"] {
|
||||
@if $name != "color_1" {
|
||||
|
||||
a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
[data-class="bg-primary"]:before{
|
||||
background: $color;
|
||||
}
|
||||
.email-left-box .intro-title{
|
||||
background: rgba($color, .1);
|
||||
i{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.widget-stat .media .media-body h4{
|
||||
color: $color !important;
|
||||
}
|
||||
.email-right-box .right-box-border{
|
||||
border-right: 2px solid rgba($color, .1);
|
||||
}
|
||||
.mail-list .list-group-item.active i{
|
||||
color: $color;
|
||||
}
|
||||
.single-mail.active{
|
||||
background: $color;
|
||||
}
|
||||
.profile-info h4.text-primary {
|
||||
color: $color!important;
|
||||
}
|
||||
.profile-tab .nav-item .nav-link{
|
||||
&:hover,
|
||||
&.active{
|
||||
border-bottom: .20px solid $color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.amChartsInputField {
|
||||
border: 0;
|
||||
background: $color;
|
||||
}
|
||||
.amcharts-period-input,
|
||||
.amcharts-period-input-selected {
|
||||
background: $color;
|
||||
}
|
||||
.morris-hover {
|
||||
background: $color;
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $color;
|
||||
}
|
||||
.custom-select:focus{
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
.daterangepicker {
|
||||
td.active {
|
||||
background-color: $color;
|
||||
|
||||
&:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
button.applyBtn {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
.wizard {
|
||||
&>.steps li.current a {
|
||||
background-color: $color;
|
||||
}
|
||||
.skip-email a {
|
||||
color: $color;
|
||||
}
|
||||
&>.actions li:not(.disabled) a {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.step-form-horizontal {
|
||||
.wizard {
|
||||
.steps {
|
||||
li {
|
||||
&.done {
|
||||
a {
|
||||
.number {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.current a {
|
||||
.number {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
&.disabled a {
|
||||
.number {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-invalid .input-group-prepend .input-group-text i {
|
||||
color: lighten($color, 15%);
|
||||
}
|
||||
.datamaps-hoverover {
|
||||
color: $color;
|
||||
border: 1px solid rgba($color, .3);
|
||||
}
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
background-color: $color;
|
||||
}
|
||||
.table {
|
||||
.thead-primary th {
|
||||
background-color: $color;
|
||||
}
|
||||
&.primary-table-bg-hover {
|
||||
thead th {
|
||||
background-color: darken($color: $color, $amount: 5%);
|
||||
}
|
||||
tbody tr {
|
||||
background-color: $color;
|
||||
&:hover {
|
||||
background-color: lighten($color: $color, $amount: 5%);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
td, th {
|
||||
border-bottom: 1px solid darken($color: $color, $amount: 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tr.selected{
|
||||
color: $color;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
|
||||
color: $color !important;
|
||||
background: rgba($color, .1);
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
|
||||
color: $color !important;
|
||||
background: rgba($color, .1);
|
||||
}
|
||||
.clipboard-btn:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
.cd-h-timeline__dates {
|
||||
&::before {
|
||||
background: $color;
|
||||
}
|
||||
&::after {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
.cd-h-timeline__line {
|
||||
background-color: $color;
|
||||
}
|
||||
.cd-h-timeline__date:after {
|
||||
border-color: lighten($color, 0.9);
|
||||
background-color: $color;
|
||||
}
|
||||
.cd-h-timeline__navigation {
|
||||
border-color: lighten($color, 0.9);
|
||||
}
|
||||
.cd-h-timeline__navigation--inactive:hover {
|
||||
border-color: lighten($color, 0.9);
|
||||
}
|
||||
.dd-handle {
|
||||
background: $color;
|
||||
}
|
||||
.dd-handle:hover {
|
||||
background: $color;
|
||||
}
|
||||
.dd3-content:hover {
|
||||
background: $color;
|
||||
}
|
||||
.noUi-connect {
|
||||
background-color: $color;
|
||||
&.c-3-color {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
|
||||
background-color: $color;
|
||||
}
|
||||
#slider-toggle.off .noUi-handle {
|
||||
border-color: $color;
|
||||
}
|
||||
.pignose-calendar {
|
||||
border-color: $color;
|
||||
|
||||
.pignose-calendar-top-date {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
|
||||
background-color: $color;
|
||||
}
|
||||
.bootstrap-tagsinput .tag {
|
||||
background-color: $color;
|
||||
}
|
||||
.toast {
|
||||
&-success {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.twitter-typeahead .tt-menu .tt-suggestion:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
.accordion {
|
||||
&-header-bg {
|
||||
.accordion__header {
|
||||
&--primary {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert-primary{
|
||||
background: lighten($color, 25%);
|
||||
border-color: lighten($color, 25%);
|
||||
color: $color;
|
||||
}
|
||||
.alert-alt.alert-primary{
|
||||
border-left: 4px solid $color;
|
||||
}
|
||||
.alert-alt.alert-primary.solid{
|
||||
border-left: 4px solid darken($color,25%)!important;
|
||||
}
|
||||
.alert.alert-primary.solid{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.alert.alert-outline-primary{
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.badge-outline-primary{
|
||||
border: 1px solid $color;
|
||||
color: $color;
|
||||
}
|
||||
.badge-primary {
|
||||
background-color: $color;
|
||||
}
|
||||
.page-titles h4 {
|
||||
color: $color;
|
||||
}
|
||||
.card-action{
|
||||
&>a{
|
||||
background: darken($color,57%);
|
||||
}
|
||||
//&:hover,&:focus{
|
||||
// background: darken($color,57%);
|
||||
//}
|
||||
.dropdown{
|
||||
background: darken($color,57%);
|
||||
color: $color;
|
||||
&:hover,&:focus{
|
||||
background: darken($color,57%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-loader i {
|
||||
background: darken($color,7%);
|
||||
}
|
||||
|
||||
.dropdown-outline{
|
||||
border: .1rem solid $color;
|
||||
}
|
||||
.custom-dropdown .dropdown-menu .dropdown-item:hover{
|
||||
color: $color;
|
||||
}
|
||||
.card-action .custom-dropdown{
|
||||
background: lighten($color, 30%);
|
||||
&.show,&:focus,&:hover{
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
.label-primary{
|
||||
background: $color;
|
||||
}
|
||||
.pagination {
|
||||
.page-item {
|
||||
.page-link {
|
||||
&:hover{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
&.active .page-link {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bootstrap-popover-wrapper .bootstrap-popover{
|
||||
button:hover,
|
||||
button:focus{
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: $color;
|
||||
}
|
||||
.progress-bar-primary {
|
||||
background-color: $color;
|
||||
}
|
||||
.ribbon {
|
||||
&__four {
|
||||
background-color: $color;
|
||||
&:after, &:before {
|
||||
background-color: lighten($color: $color, $amount: 20%);
|
||||
}
|
||||
}
|
||||
&__five {
|
||||
background-color: $color;
|
||||
|
||||
&::before {
|
||||
border-color: transparent transparent $color transparent;
|
||||
}
|
||||
}
|
||||
&__six {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.multi-steps{
|
||||
& > li {
|
||||
color: $color;
|
||||
&:after {
|
||||
background-color: $color;
|
||||
}
|
||||
&.is-active:before {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeline-badge.primary {
|
||||
background-color: $color !important;
|
||||
}
|
||||
.tooltip{
|
||||
&-wrapper{
|
||||
button:hover{
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart_widget_tab_one {
|
||||
.nav-link {
|
||||
&.active {
|
||||
background-color: $color;
|
||||
border: 1px solid $color;
|
||||
&:hover {
|
||||
border: 1px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.social-icon2{
|
||||
a{
|
||||
border: .1rem solid $color;
|
||||
}
|
||||
i{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.social-icon3 ul li a:hover i{
|
||||
color: $color;
|
||||
}
|
||||
.bgl-primary{
|
||||
background: lighten($color, 30%);
|
||||
border-color: lighten($color, 30%);
|
||||
color: $color;
|
||||
}
|
||||
.tdl-holder input[type=checkbox]:checked + i {
|
||||
background: $color;
|
||||
}
|
||||
.footer .copyright a{
|
||||
color: $color;
|
||||
}
|
||||
.hamburger .line {
|
||||
background: $color;
|
||||
}
|
||||
svg.pulse-svg .first-circle {
|
||||
fill: $color;
|
||||
}
|
||||
.pulse-css {
|
||||
background: $color;
|
||||
&:after,
|
||||
&:before {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.notification_dropdown .dropdown-menu-right .notification_title {
|
||||
background: $color;
|
||||
}
|
||||
.header-right {
|
||||
.header-profile {
|
||||
.dropdown-menu {
|
||||
a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile_title {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="full"][data-layout="vertical"] {
|
||||
.menu-toggle .nav-header .nav-control .hamburger .line {
|
||||
background-color: $color!important;
|
||||
}
|
||||
}
|
||||
.deznav .metismenu{
|
||||
& > li{
|
||||
& > a svg {
|
||||
color: $color;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
&>a {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&.mm-active {
|
||||
&>a {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width:767px) {
|
||||
[data-sidebar-style="modern"] {
|
||||
.deznav {
|
||||
.metismenu {
|
||||
&>li {
|
||||
&>a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.mm-active {
|
||||
&>a {
|
||||
background-color: lighten($color: $color, $amount: 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sidebar-style="overlay"] {
|
||||
.nav-header .hamburger.is-active .line {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.nav-user {
|
||||
background: $color;
|
||||
}
|
||||
.sidebar-right .sidebar-right .sidebar-right-trigger {
|
||||
color: $color;
|
||||
&:hover {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&[data-theme-version="dark"] {
|
||||
.pagination .page-item{
|
||||
.page-link:hover{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
&.active .page-link{
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
.header-left input:focus {
|
||||
border-color: $color;
|
||||
}
|
||||
.loader {
|
||||
&__bar {
|
||||
background: $color;
|
||||
}
|
||||
&__ball {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-theme-version="transparent"] {
|
||||
.header-left input:focus {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
.new-arrival-content .price {
|
||||
color: $color;
|
||||
}
|
||||
.chart-link a i.text-primary {
|
||||
color: $color;
|
||||
}
|
||||
#user-activity .nav-tabs .nav-link.active {
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
span#counter {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.welcome-content:after{
|
||||
background: $color;
|
||||
}
|
||||
.timeline-badge {
|
||||
background-color: $color;
|
||||
}
|
||||
.page-timeline{
|
||||
.timeline {
|
||||
&-workplan#{&} {
|
||||
.timeline-badge:after {
|
||||
background-color: rgba($color: $color, $alpha: .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sk-three-bounce .sk-child {
|
||||
background-color: $color;
|
||||
}
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active{
|
||||
color: #fff;
|
||||
background-color:$color;
|
||||
}
|
||||
.overlay-box:after {
|
||||
background: $color;
|
||||
}
|
||||
.btn-primary{
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.bg-primary{
|
||||
background-color: $color !important;
|
||||
}
|
||||
.text-primary{
|
||||
color:$color !important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color:darken($color, 15);
|
||||
border-color: darken($color, 15);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
color:$color;
|
||||
border-color: $color;
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
.btn-primary:not(:disabled):not(.disabled):active,
|
||||
.btn-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-primary.dropdown-toggle,
|
||||
.btn-outline-primary:not(:disabled):not(.disabled):active,
|
||||
.btn-outline-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-primary.dropdown-toggle{
|
||||
background-color:darken($color, 15);
|
||||
border-color: darken($color, 15);
|
||||
}
|
||||
// End Css
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.bg-#{$color}-alt {
|
||||
background-color: rgba($value, .1);
|
||||
}
|
||||
}
|
||||
115
public/style/scss/layout/theme/_theme-wide-boxed.scss
Normal file
115
public/style/scss/layout/theme/_theme-wide-boxed.scss
Normal file
@ -0,0 +1,115 @@
|
||||
[data-container="wide-boxed"] {
|
||||
@media (min-width: 992px) {
|
||||
#main-wrapper {
|
||||
max-width: 1480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="full"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
.menu-toggle {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
.menu-toggle {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="mini"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
@at-root [data-header-position="fixed"][data-layout="horizontal"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="compact"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-container="wide-boxed"][data-sidebar-style="overlay"] {
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide-boxed"] {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
@at-root [data-sidebar-style="full"][data-header-position="fixed"]#{&} {
|
||||
.header {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
@at-root [data-sidebar-style="mini"]#{&} {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide-boxed"][data-sidebar-position="fixed"] {
|
||||
.deznav.fixed {
|
||||
max-width: 1480px;
|
||||
transition: none;
|
||||
}
|
||||
&[direction="rtl"] {
|
||||
.deznav.fixed {
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"][data-container="wide-boxed"][data-sidebar-position="fixed"][data-header-position="fixed"] {
|
||||
.deznav {
|
||||
max-width: 1480px;
|
||||
left: 5%;
|
||||
}
|
||||
&[direction="rtl"] {
|
||||
.deznav {
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
public/style/scss/layout/theme/_theme.scss
Normal file
4
public/style/scss/layout/theme/_theme.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import './theme-bg';
|
||||
@import './theme-boxed';
|
||||
@import './theme-wide-boxed';
|
||||
@import './theme-color';
|
||||
8
public/style/scss/layout/typography/_helvetica.scss
Normal file
8
public/style/scss/layout/typography/_helvetica.scss
Normal file
@ -0,0 +1,8 @@
|
||||
[data-typography="helvetica"] {
|
||||
font-family: 'HelveticaNeue';
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7
public/style/scss/layout/typography/_opensans.scss
Normal file
7
public/style/scss/layout/typography/_opensans.scss
Normal file
@ -0,0 +1,7 @@
|
||||
[data-typography="opensans"] {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
6
public/style/scss/layout/typography/_poppins.scss
Normal file
6
public/style/scss/layout/typography/_poppins.scss
Normal file
@ -0,0 +1,6 @@
|
||||
[data-typography="poppins"] {
|
||||
font-family: 'poppins', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
7
public/style/scss/layout/typography/_roboto.scss
Normal file
7
public/style/scss/layout/typography/_roboto.scss
Normal file
@ -0,0 +1,7 @@
|
||||
[data-typography="roboto"] {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
7
public/style/scss/layout/typography/_typography.scss
Normal file
7
public/style/scss/layout/typography/_typography.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import "./opensans";
|
||||
@import "./poppins";
|
||||
@import "./roboto";
|
||||
@import "./helvetica";
|
||||
|
||||
|
||||
|
||||
13
public/style/scss/layout/version-dark/_dark-footer.scss
Normal file
13
public/style/scss/layout/version-dark/_dark-footer.scss
Normal file
@ -0,0 +1,13 @@
|
||||
[data-theme-version="dark"] {
|
||||
.footer {
|
||||
background-color: transparent;
|
||||
|
||||
.copyright {
|
||||
background-color: transparent;
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
171
public/style/scss/layout/version-dark/_dark-global.scss
Normal file
171
public/style/scss/layout/version-dark/_dark-global.scss
Normal file
@ -0,0 +1,171 @@
|
||||
|
||||
[data-theme-version="dark"] {
|
||||
.dropdown-menu {
|
||||
background-color: $d-bg;
|
||||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255,0.1);
|
||||
|
||||
.dropdown-item {
|
||||
&.selected,
|
||||
&.selected.active,
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $dark-card;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: $d-bg;
|
||||
border-color: $d-border;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: $dark-card;
|
||||
box-shadow:none;
|
||||
}
|
||||
.btn-outline-dark:hover{
|
||||
background-color: $d-bg;
|
||||
border-color: $d-bg;
|
||||
}
|
||||
.tdl-holder input[type=text],
|
||||
.tdl-holder li{
|
||||
background-color: $dark-card;
|
||||
border-color:$d-border;
|
||||
}
|
||||
.tdl-holder input[type=text]{
|
||||
&::placeholder {
|
||||
color: $d-ctl;
|
||||
}
|
||||
}
|
||||
.tdl-holder label:hover {
|
||||
background-color: $d-border;
|
||||
color: $white;
|
||||
}
|
||||
.text-muted {
|
||||
color: $d-ctl !important;
|
||||
}
|
||||
.modal-content{
|
||||
background:$dark-card;
|
||||
}
|
||||
.modal-footer,
|
||||
.modal-header{
|
||||
border-color: $d-border;
|
||||
}
|
||||
.close{
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.table strong {
|
||||
color: #fff;
|
||||
}
|
||||
.text-dark {
|
||||
color: $d-ctl !important;
|
||||
}
|
||||
.star-rating .product-review,
|
||||
.new-arrival-content .item{
|
||||
color: $white;
|
||||
}
|
||||
.custom-dropdown .dropdown-menu{
|
||||
border-color: $d-border;
|
||||
}
|
||||
.widget-stat .media > span{
|
||||
background: $d-border;
|
||||
border-color: $d-border;
|
||||
color:$white;
|
||||
}
|
||||
.plus-minus-input .custom-btn{
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
}
|
||||
.dropdown-divider,
|
||||
.size-filter ul li{
|
||||
border-color: $d-border;
|
||||
}
|
||||
.custom-select{
|
||||
border-color: $d-border;
|
||||
color: $d-ctl;
|
||||
background:$d-bg;
|
||||
}
|
||||
.nav-tabs{
|
||||
border-color: $d-border;
|
||||
}
|
||||
.mail-list .list-group-item.active i {
|
||||
color: $white;
|
||||
}
|
||||
hr{
|
||||
border-color: $d-border;
|
||||
}
|
||||
|
||||
.grid-col{
|
||||
background:$d-bg;
|
||||
}
|
||||
|
||||
.noUi-target{
|
||||
border-color:$d-border;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
|
||||
.noUi-connects{
|
||||
background:$d-border;
|
||||
}
|
||||
}
|
||||
.noUi-marker-large,
|
||||
.noUi-marker{
|
||||
background:$d-border;
|
||||
}
|
||||
.input-group-text{
|
||||
background:$d-border;
|
||||
color:$body-color;
|
||||
}
|
||||
.note-editor.note-frame{
|
||||
border-color:$d-border;
|
||||
.btn{
|
||||
color:$white;
|
||||
}
|
||||
.note-editing-area .note-editable{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.widget-media .timeline .timeline-panel{
|
||||
border-color:$d-border;
|
||||
}
|
||||
.notification_dropdown .dropdown-menu-right .all-notification{
|
||||
border-color:$d-border;
|
||||
}
|
||||
#user-activity .nav-tabs .nav-link{
|
||||
border-color:$d-border;
|
||||
}
|
||||
.list-group-item-action{
|
||||
color:$body-color;
|
||||
}
|
||||
.list-group-item-action:focus,
|
||||
.list-group-item-action:hover,
|
||||
.list-group-item-action:focus{
|
||||
background-color:$d-bg;
|
||||
border-color:$d-bg;
|
||||
}
|
||||
.list-group-item.active{
|
||||
color:$white;
|
||||
border-color:$primary;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color:$primary;
|
||||
border-color:$primary;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.swal2-popup{
|
||||
background:$dark-card;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
62
public/style/scss/layout/version-dark/_dark-header.scss
Normal file
62
public/style/scss/layout/version-dark/_dark-header.scss
Normal file
@ -0,0 +1,62 @@
|
||||
[data-theme-version="dark"] {
|
||||
|
||||
.header {
|
||||
background-color: $dark-card;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
input {
|
||||
background: $d-bg !important;
|
||||
border-color: transparent ;
|
||||
color: $white !important;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.search_icon{
|
||||
background: $d-bg !important;
|
||||
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.right-sidebar a{
|
||||
color:$primary;
|
||||
border-color:$d-border;
|
||||
}
|
||||
.header-profile > a.nav-link .header-info strong{
|
||||
color:$white;
|
||||
}
|
||||
.notification_dropdown .nav-link{
|
||||
background: $d-bg;
|
||||
}
|
||||
.dropdown {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
|
||||
}
|
||||
.notification_dropdown {
|
||||
.dropdown-item {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
[data-theme-version="dark"] {
|
||||
|
||||
&[data-sidebar-style="mini"] {
|
||||
.deznav .metismenu li > ul{
|
||||
background-color: $dark-card;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-content-box{
|
||||
background-color: $dark-card;
|
||||
.head-name{
|
||||
background:$dark-card;
|
||||
color: $white;
|
||||
border-color:$d-border;
|
||||
}
|
||||
& + .header + .deznav{
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.deznav {
|
||||
background-color: $dark-card;
|
||||
|
||||
.metismenu {
|
||||
|
||||
|
||||
&>li {
|
||||
|
||||
&>a {
|
||||
color: darken($color: $white, $amount: 30%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
|
||||
&>a {
|
||||
color: $white;
|
||||
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mm-active {
|
||||
|
||||
ul {
|
||||
|
||||
ul {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//one step dropdown
|
||||
ul {
|
||||
|
||||
&:after{
|
||||
background-color:$d-border;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color: $white;
|
||||
}
|
||||
&:before{
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($color: $white, $amount: 30%);
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&:after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
18
public/style/scss/layout/version-dark/_dark-nav-header.scss
Normal file
18
public/style/scss/layout/version-dark/_dark-nav-header.scss
Normal file
@ -0,0 +1,18 @@
|
||||
[data-theme-version="dark"] {
|
||||
.nav-header,
|
||||
.nav-control {
|
||||
background-color:$d-bg;
|
||||
}
|
||||
|
||||
.nav-control {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
public/style/scss/layout/version-dark/_dark-preloader.scss
Normal file
17
public/style/scss/layout/version-dark/_dark-preloader.scss
Normal file
@ -0,0 +1,17 @@
|
||||
[data-theme-version="dark"] {
|
||||
|
||||
#preloader {
|
||||
background: $d-bg;
|
||||
}
|
||||
|
||||
.loader {
|
||||
&__bar {
|
||||
background: $primary;
|
||||
box-shadow: 1px 1px 0 $d-border;
|
||||
}
|
||||
&__ball {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
46
public/style/scss/layout/version-dark/_dark-reset.scss
Normal file
46
public/style/scss/layout/version-dark/_dark-reset.scss
Normal file
@ -0,0 +1,46 @@
|
||||
@import "./../../abstracts/variable";
|
||||
|
||||
|
||||
|
||||
[data-theme-version="dark"] {
|
||||
background: $d-bg;
|
||||
color: $d-ctl;
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $white !important;
|
||||
}
|
||||
a.link {
|
||||
color: $d-ctd;
|
||||
}
|
||||
a.link:focus,
|
||||
a.link:hover {
|
||||
color: $info;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//Generating border classess
|
||||
@each $value in $borders {
|
||||
@if $value == "" {
|
||||
.border {
|
||||
border: 1px solid $d-border !important;
|
||||
}
|
||||
} @else {
|
||||
.border-#{$value} {
|
||||
border-#{$value}: 1px solid $d-border !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
[data-theme-version="dark"] {
|
||||
.sidebar-right {
|
||||
background-color: lighten($d-bg, 3.2%);
|
||||
|
||||
.nav-tabs {
|
||||
background-color: lighten($d-bg, 3.2%);
|
||||
border-bottom: 1px solid $d-bg;
|
||||
|
||||
.nav-link {
|
||||
&.active {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
public/style/scss/layout/version-dark/_main.scss
Normal file
8
public/style/scss/layout/version-dark/_main.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "./dark-reset";
|
||||
@import "./dark-global";
|
||||
@import "./dark-header";
|
||||
@import "./dark-nav-header";
|
||||
@import "./dark-nav-header";
|
||||
@import "./dark-left-sidebar";
|
||||
@import "./dark-right-sidebar";
|
||||
@import "./dark-footer";
|
||||
8
public/style/scss/layout/version-transparent/_main.scss
Normal file
8
public/style/scss/layout/version-transparent/_main.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "./_transparent-reset";
|
||||
@import "./_transparent-global";
|
||||
@import "./_transparent-header";
|
||||
@import "./_transparent-nav-header";
|
||||
@import "./_transparent-nav-header";
|
||||
@import "./_transparent-left-sidebar";
|
||||
@import "./_transparent-right-sidebar";
|
||||
@import "./_transparent-footer";
|
||||
@ -0,0 +1,13 @@
|
||||
// [data-theme-version="dark"] {
|
||||
// .footer {
|
||||
// background-color: lighten($d-bg, 3.2%);
|
||||
|
||||
// .copyright {
|
||||
// background-color: lighten($d-bg, 3.2%);
|
||||
|
||||
// p {
|
||||
// color: $white;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -0,0 +1,24 @@
|
||||
|
||||
[data-theme-version="transparent"] {
|
||||
.dropdown-menu {
|
||||
background-color: $dark-card;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
&:hover, &:focus {
|
||||
background-color: $d-bg;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: $d-bg;
|
||||
border-color: $d-border;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
[data-theme-version="transparent"] {
|
||||
|
||||
.header {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
|
||||
.header-left {
|
||||
input {
|
||||
border-color: $d-border;
|
||||
color: $white;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-right {
|
||||
.dropdown {
|
||||
.nav-link {
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification_dropdown {
|
||||
.dropdown-item {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
[data-theme-version="transparent"] {
|
||||
|
||||
.deznav {
|
||||
background-color: rgba(0,0,0,0.15)!important;
|
||||
|
||||
.metismenu {
|
||||
|
||||
|
||||
&>li {
|
||||
|
||||
&>a {
|
||||
color: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
|
||||
&>a {
|
||||
background-color: rgba(0,0,0,0.15)!important;
|
||||
color: $white;
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent $white transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mm-active {
|
||||
ul {
|
||||
|
||||
ul {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//one step dropdown
|
||||
ul {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
|
||||
a {
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.mm-active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0,0,0,0.15);
|
||||
}
|
||||
ul {
|
||||
background-color: rgba(0,0,0,0.15)!important;
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&:after {
|
||||
border-color: transparent transparent rgba(0,0,0,0.15) transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
[data-theme-version="transparent"] {
|
||||
.nav-header,
|
||||
.nav-control {
|
||||
background-color: rgba(0,0,0,0.15)!important;
|
||||
}
|
||||
|
||||
.nav-control {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
// [data-theme-version="dark"] {
|
||||
|
||||
// #preloader {
|
||||
// background: $d-bg;
|
||||
// }
|
||||
|
||||
// .loader {
|
||||
// &__bar {
|
||||
// background: $primary;
|
||||
// box-shadow: 1px 1px 0 $d-border;
|
||||
// }
|
||||
// &__ball {
|
||||
// background: $primary;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
@ -0,0 +1,56 @@
|
||||
@import "./../../abstracts/variable";
|
||||
|
||||
|
||||
|
||||
[data-theme-version="transparent"] {
|
||||
|
||||
|
||||
background: url('../images/body/12.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
// background: $d-bg;s
|
||||
color: $white;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $white !important;
|
||||
}
|
||||
a.link {
|
||||
color: $d-ctd;
|
||||
}
|
||||
a.link:focus,
|
||||
a.link:hover {
|
||||
color: $info;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $d-ctl;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Generating border classess
|
||||
@each $value in $borders {
|
||||
@if $value == "" {
|
||||
.border {
|
||||
border: 1px solid $d-border !important;
|
||||
}
|
||||
} @else {
|
||||
.border-#{$value} {
|
||||
border-#{$value}: 1px solid $d-border !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
// [data-theme-version="dark"] {
|
||||
// .sidebar-right {
|
||||
// background-color: lighten($d-bg, 3.2%);
|
||||
|
||||
// .nav-tabs {
|
||||
// background-color: lighten($d-bg, 3.2%);
|
||||
// border-bottom: 1px solid $d-bg;
|
||||
|
||||
// .nav-link {
|
||||
// &.active {
|
||||
// background-color: $d-bg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
31156
public/style/scss/main.css
Normal file
31156
public/style/scss/main.css
Normal file
File diff suppressed because it is too large
Load Diff
7
public/style/scss/main.css.map
Normal file
7
public/style/scss/main.css.map
Normal file
File diff suppressed because one or more lines are too long
110
public/style/scss/main.scss
Normal file
110
public/style/scss/main.scss
Normal file
@ -0,0 +1,110 @@
|
||||
/*
|
||||
Table of Contents
|
||||
|
||||
Name : Gymove
|
||||
Author : DexignZone
|
||||
Author Portfolio : https://themeforest.net/user/dexignzone/portfolio
|
||||
|
||||
|
||||
|
||||
Table of Sass Contents
|
||||
|
||||
1. Abstracts
|
||||
_bs-custom
|
||||
_inheritance
|
||||
_maps
|
||||
_mixin
|
||||
_variable
|
||||
|
||||
2. bootstrap
|
||||
-Here goes all official bootstrap scss files
|
||||
|
||||
3. Global/Base
|
||||
_color
|
||||
_custom-grid
|
||||
_fonts
|
||||
_helper
|
||||
_reset
|
||||
|
||||
4. layout
|
||||
+footer
|
||||
+header
|
||||
+rtl
|
||||
+sidebar
|
||||
+tables
|
||||
+theme
|
||||
+version-dark
|
||||
|
||||
5. Conponents
|
||||
+app
|
||||
+charts
|
||||
+forms
|
||||
+map
|
||||
+uc
|
||||
+ui
|
||||
+widget
|
||||
|
||||
6. Page
|
||||
_index-1
|
||||
_page-error
|
||||
_page-register
|
||||
_page-signin
|
||||
_page-user-lock
|
||||
_page-user-lock
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
////////////////////
|
||||
// Abstracts
|
||||
////////////////////
|
||||
@import "./abstracts/abstracts";
|
||||
|
||||
//bootstrap library scss files
|
||||
@import "./../vendor/bootstrap/scss/bootstrap";
|
||||
|
||||
|
||||
|
||||
////////////////////
|
||||
// Global
|
||||
////////////////////
|
||||
@import "./base/base";
|
||||
|
||||
@import "./preloader";
|
||||
|
||||
|
||||
////////////////////
|
||||
// Components
|
||||
////////////////////
|
||||
@import "./layout/layout";
|
||||
|
||||
|
||||
////////////////////
|
||||
// Components
|
||||
////////////////////
|
||||
@import "./components/components";
|
||||
|
||||
|
||||
////////////////////
|
||||
// All pages
|
||||
////////////////////
|
||||
@import "./pages/pages";
|
||||
|
||||
|
||||
|
||||
////////////////////
|
||||
// RTL
|
||||
////////////////////
|
||||
@import "./layout/rtl/rtl";
|
||||
|
||||
|
||||
////////////////////
|
||||
// Version Color
|
||||
////////////////////
|
||||
@import "./layout/version-dark/main";
|
||||
13
public/style/scss/pages/_distance-map.scss
Normal file
13
public/style/scss/pages/_distance-map.scss
Normal file
@ -0,0 +1,13 @@
|
||||
.mapouter{
|
||||
iframe{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.activity-icon{
|
||||
height:50px;
|
||||
width:50px;
|
||||
min-width:50px;
|
||||
line-height:50px;
|
||||
text-align:center;
|
||||
border-radius:100%;
|
||||
}
|
||||
288
public/style/scss/pages/_ecom-product-detail.scss
Normal file
288
public/style/scss/pages/_ecom-product-detail.scss
Normal file
@ -0,0 +1,288 @@
|
||||
/*
|
||||
===================================
|
||||
Product detail
|
||||
===================================*/
|
||||
|
||||
.produtct-detail-tag {
|
||||
display: inline-block;
|
||||
a {
|
||||
font-style: 13px;
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail-content {
|
||||
.item-tag {
|
||||
background: $l-ctl;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
padding: 2px 12px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.filtaring-area {
|
||||
h4 {
|
||||
color: #1d1d1d;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
|
||||
.plus-minus-input {
|
||||
.input-icon {
|
||||
font-size: 13px;
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.plus-minus-input {
|
||||
display: flex;
|
||||
width: 120px;
|
||||
.custom-btn {
|
||||
border-radius: 0;
|
||||
height: 40px;
|
||||
padding: 12px 8px;
|
||||
background: $white;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
.form-control {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-reveal-trigger .avatar-xl {
|
||||
min-width: 30px;
|
||||
}
|
||||
.share-view {
|
||||
display: inline-block;
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
a {}
|
||||
}
|
||||
}
|
||||
.share-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
border: 1px solid $border;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-style: 16px;
|
||||
color: $border;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------tab----------*/
|
||||
|
||||
.veritical-line {
|
||||
padding: 20px 30px;
|
||||
border-top: 1px solid $border;
|
||||
border-right: 1px solid $border;
|
||||
border-bottom: 1px solid $border;
|
||||
position: relative;
|
||||
&:before {
|
||||
background: $border;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
height: 100%;
|
||||
left: -1px;
|
||||
max-height: 40%;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content-text {
|
||||
p {
|
||||
color: $dark;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item-list {
|
||||
li {
|
||||
a {
|
||||
background: $white;
|
||||
border-top: 1px solid $border;
|
||||
border-left: 1px solid $border;
|
||||
border-right: 1px solid $border;
|
||||
color: $dark;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
text-transform: uppercase;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $white;
|
||||
color: $dark;
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
li {
|
||||
margin-bottom: 7px;
|
||||
font-size: 13px;
|
||||
i {
|
||||
font-size: 13px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-item-list {
|
||||
text-align: center;
|
||||
margin: 0 -5px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
flex: 0 0 25%;
|
||||
width: 25%;
|
||||
padding: 0 5px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
// float: left;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
background: transparent;
|
||||
padding-bottom: 0px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail-text {
|
||||
padding-top: 28px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
.product-review {
|
||||
font-style: 13px;
|
||||
color: $dark;
|
||||
font-weight: 400;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
.tab-content {
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular-tag ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 8px 15px;
|
||||
background: #f8f8f8;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.size-filter ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.intro {
|
||||
border: 1px solid red;
|
||||
color: #1d1d1d;
|
||||
}
|
||||
|
||||
#listResults {
|
||||
.slider {
|
||||
margin: 25px 0;
|
||||
}
|
||||
.slider-box {
|
||||
width: 90%;
|
||||
margin: 25px auto;
|
||||
}
|
||||
input {
|
||||
width: 10%;
|
||||
}
|
||||
label {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
margin-right: -4px;
|
||||
vertical-align: top;
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
// input {
|
||||
// border: none;
|
||||
// display: inline-block;
|
||||
// margin-right: -4px;
|
||||
// vertical-align: top;
|
||||
// width: 30%;
|
||||
// }
|
||||
.plus-minus-input {
|
||||
.input-icon {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.custom-btn {
|
||||
border-radius: 0;
|
||||
height: 40px;
|
||||
padding: 8px 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #c8c8c8;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
height: 40px;
|
||||
border-top: 1px solid #c8c8c8;
|
||||
border-bottom: 1px solid #c8c8c8;
|
||||
border-left: 0px solid #c8c8c8;
|
||||
border-right: 1px solid #c8c8c8;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-top: 1px solid #c8c8c8;
|
||||
border-bottom: 1px solid #c8c8c8;
|
||||
border-left: 0px solid #c8c8c8;
|
||||
border-right: 0px solid #c8c8c8;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
public/style/scss/pages/_ecom-product-grid.scss
Normal file
17
public/style/scss/pages/_ecom-product-grid.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.new-arrival-product{
|
||||
.new-arrivals-img-contnent{
|
||||
overflow:hidden;
|
||||
|
||||
img{
|
||||
width:100%;
|
||||
@include transitionMedium;
|
||||
}
|
||||
}
|
||||
&:hover .new-arrivals-img-contnent img{
|
||||
transform: scale(1.5) translateY(12%);
|
||||
-moz-transform: scale(1.5) translateY(12%);
|
||||
-webkit-transform: scale(1.5) translateY(12%);
|
||||
-ms-transform: scale(1.5) translateY(12%);
|
||||
-o-transform: scale(1.5) translateY(12%);
|
||||
}
|
||||
}
|
||||
73
public/style/scss/pages/_ecom-product-list.scss
Normal file
73
public/style/scss/pages/_ecom-product-list.scss
Normal file
@ -0,0 +1,73 @@
|
||||
/*
|
||||
===================================
|
||||
list view
|
||||
===================================*/
|
||||
|
||||
.new-arrival-content {
|
||||
.item {
|
||||
font-size: 12px;
|
||||
color: $dark;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
a{
|
||||
color:$black;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
font-weight: 600;
|
||||
color: $primary;
|
||||
font-size: 24px;
|
||||
margin-bottom: 0;
|
||||
float: right;
|
||||
@include respond ('phone'){
|
||||
float:none;
|
||||
margin-top:10px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: $d-ctl;
|
||||
margin-bottom: 6px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.text-content {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
.new-arrival-content.text-center .price {
|
||||
float: unset;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
color: $success;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.comment-review {
|
||||
margin-bottom: 15px;
|
||||
display: table;
|
||||
width: 100%;
|
||||
.client-review {
|
||||
color: $d-ctl;
|
||||
padding-right: 20px;
|
||||
text-decoration: underline !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
.span {
|
||||
color: $d-ctl;
|
||||
font-size: 14px;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.star-rating li {
|
||||
display: inline-block;
|
||||
i {
|
||||
color: gold;
|
||||
}
|
||||
}
|
||||
46
public/style/scss/pages/_food-menu.scss
Normal file
46
public/style/scss/pages/_food-menu.scss
Normal file
@ -0,0 +1,46 @@
|
||||
.diet-search{
|
||||
width:360px;
|
||||
.input-group-append{
|
||||
margin-left:-20px;
|
||||
button{
|
||||
border-top-left-radius: $radius!important;
|
||||
border-bottom-left-radius: $radius!important;
|
||||
font-size: 25px;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
@include respond ('laptop'){
|
||||
width:300px;
|
||||
.input-group-append{
|
||||
button{
|
||||
font-size:18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond ('phone'){
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.menu-list{
|
||||
@include respond ('tab-port'){
|
||||
&>a>img{
|
||||
float:left;
|
||||
}
|
||||
}
|
||||
@include respond ('phone'){
|
||||
&>a>img{
|
||||
width:80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plus-icon{
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
display: inline-block;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
805
public/style/scss/pages/_homepage.scss
Normal file
805
public/style/scss/pages/_homepage.scss
Normal file
@ -0,0 +1,805 @@
|
||||
.items-table{
|
||||
|
||||
tbody{
|
||||
|
||||
tr{
|
||||
padding:0;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 0 0 #f8f8f8;
|
||||
@include transitionMedium;
|
||||
.dropdown{
|
||||
opacity:0;
|
||||
}
|
||||
&.active,
|
||||
&:hover{
|
||||
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
|
||||
z-index: 1;
|
||||
.dropdown{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
th,
|
||||
td{
|
||||
border: 0;
|
||||
padding:18px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond('phone') {
|
||||
width:500px;
|
||||
}
|
||||
}
|
||||
|
||||
.star-review{
|
||||
i{
|
||||
font-size:16px;
|
||||
&.text-gray{
|
||||
color:#d9d9d9;
|
||||
}
|
||||
}
|
||||
span{
|
||||
color:$black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form Head
|
||||
.form-head{
|
||||
|
||||
.breadcrumb{
|
||||
background:transparent;
|
||||
padding:0;
|
||||
}
|
||||
.search-area{
|
||||
max-width:300px;
|
||||
border-radius: 0;
|
||||
@include respond('laptop') {
|
||||
max-width:250px;
|
||||
}
|
||||
@include respond('phone') {
|
||||
max-width:250px;
|
||||
}
|
||||
.form-control{
|
||||
border: 0;
|
||||
height: 56px;
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
background:#f1f1f1;
|
||||
border-radius:0;
|
||||
@include respond('laptop') {
|
||||
height: 41px;
|
||||
padding: 10px 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.input-group-append .input-group-text{
|
||||
background:#f1f1f1;
|
||||
padding: 0 5px 0 30px;
|
||||
@include respond('laptop') {
|
||||
padding: 0 5px 0 30px;
|
||||
}
|
||||
i {
|
||||
font-size: 20px;
|
||||
color:$body-color;
|
||||
@include respond('laptop') {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
.btn{
|
||||
|
||||
i{
|
||||
transform: scale(1.3);
|
||||
-moz-transform: scale(1.3);
|
||||
-webkit-transform: scale(1.3);
|
||||
-ms-transform: scale(1.3);
|
||||
-o-transform: scale(1.3);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&:after{
|
||||
color:$primary;
|
||||
font-size:25px;
|
||||
}
|
||||
}
|
||||
/* .btn i{
|
||||
line-height: 1;
|
||||
transform: scale(1.3);
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
} */
|
||||
/* .btn-outline-primary{
|
||||
border-color:#eee;
|
||||
&:hover{
|
||||
border-color:$primary;
|
||||
}
|
||||
} */
|
||||
& > *{
|
||||
@include respond('phone-land') {
|
||||
margin-right:5px !important;
|
||||
margin-bottom:10px;
|
||||
vertical-align: baseline;
|
||||
margin-left:0 !important;
|
||||
}
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
display:block !important;
|
||||
}
|
||||
}
|
||||
.rounded{
|
||||
border-radius:$radius !important;
|
||||
}
|
||||
.btn-link{
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
@include respond('laptop') {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.deznav .copyright{
|
||||
font-size:14px;
|
||||
padding: 0 45px 60px;
|
||||
margin-top: 40px;
|
||||
color: #969BA0;
|
||||
margin-bottom: 40px;
|
||||
|
||||
p{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
strong{
|
||||
display:block;
|
||||
}
|
||||
|
||||
@include respond('laptop') {
|
||||
padding:0 25px 60px;
|
||||
}
|
||||
@include respond ('phone-land'){
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
.widget-buyer {
|
||||
.media {
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
.media-body {
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recentOrderTable {
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
thead {
|
||||
th {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
color: $dark;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $d-ctl;
|
||||
}
|
||||
img {
|
||||
border-radius: 50px;
|
||||
}
|
||||
.custom-dropdown {
|
||||
i {
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.activity_overview{
|
||||
.nav-tabs{
|
||||
border-bottom:1px solid rgba(255,255,255,0.2) !important;
|
||||
}
|
||||
.custom-tab-1 .nav-link{
|
||||
color:rgba(255,255,255,0.5);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-right: 30px;
|
||||
|
||||
&:hover,
|
||||
&.active{
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y:hover,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-y.ps--clicking {
|
||||
background-color: transparent!important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.chart-link {
|
||||
@include respond('phone') {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@include respond('tab-land') {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@include respond('desktop') {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.week-link {
|
||||
display: inline-block;
|
||||
// @include respond('tab-land'){
|
||||
// display: flex;
|
||||
// }
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 10px;
|
||||
i {
|
||||
font-size: 13px;
|
||||
&.text-primary {
|
||||
color: $primary;
|
||||
}
|
||||
&.text-muted {
|
||||
color: #DAE2F3!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
max-width: 97px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.input-group {
|
||||
&.input-group-lg{
|
||||
.form-control,.input-group-text{
|
||||
height:80px;
|
||||
padding:10px 30px;
|
||||
@include respond('phone') {
|
||||
height:50px;
|
||||
padding: 10px 15px;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
.input-group-text{
|
||||
width:200px;
|
||||
text-align:left;
|
||||
@include respond('phone') {
|
||||
width:120px;
|
||||
padding: 10px 15px;
|
||||
height:50px;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-tabs {
|
||||
.nav-tabs {
|
||||
border-bottom: 0px;
|
||||
background: #E8E8E8;
|
||||
padding: 5px;
|
||||
border-radius: $radius;
|
||||
flex-wrap: unset;
|
||||
|
||||
.nav-link {
|
||||
border-radius:$radius;
|
||||
padding: 12px 20px;
|
||||
font-weight: 500;
|
||||
font-size:16px;
|
||||
border:0px solid $border-color;
|
||||
color:$black;
|
||||
&.active {
|
||||
background: $white;
|
||||
color:$primary;
|
||||
}
|
||||
@include respond('laptop') {
|
||||
padding: 8px 15px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
&.tabs-lg{
|
||||
.nav-link {
|
||||
padding:23px 30px;
|
||||
font-size:16px;
|
||||
@include respond('phone-land') {
|
||||
padding:10px 15px;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.icontabs{
|
||||
.nav-tabs{
|
||||
background:transparent;
|
||||
.nav-item{
|
||||
.nav-link{
|
||||
height:42px;
|
||||
width:42px;
|
||||
line-height:42px;
|
||||
text-align:center;
|
||||
background:rgba($gray,0.6);
|
||||
color:$white;
|
||||
margin-right:15px;
|
||||
border-radius: 50px;
|
||||
padding:0;
|
||||
&.active{
|
||||
background:$warning;
|
||||
}
|
||||
i{
|
||||
font-size:25px;
|
||||
line-height:42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-1{
|
||||
.nav-tabs{
|
||||
background:transparent;
|
||||
.nav-link{
|
||||
font-size:16px;
|
||||
color:$black;
|
||||
position:relative;
|
||||
&:after{
|
||||
content:none;
|
||||
}
|
||||
span{
|
||||
position:absolute;
|
||||
bottom:-4px;
|
||||
left:50%;
|
||||
transform:translatex(-50%);
|
||||
content:"";
|
||||
height:4px;
|
||||
width:0;
|
||||
@include transitionMedium;
|
||||
}
|
||||
&.active{
|
||||
span{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.revenue-chart .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{
|
||||
display:flex !important;
|
||||
margin-right: 30px !important;
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
.revenue-chart-bar{
|
||||
margin-bottom:-30px;
|
||||
|
||||
@include respond('phone') {
|
||||
margin-bottom: 20px;
|
||||
float: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
|
||||
.revenue-chart-bar{
|
||||
margin-bottom: 20px;
|
||||
float: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
#activeUser {
|
||||
height: 215px!important;
|
||||
}
|
||||
#activeUser {
|
||||
height: 180px!important;
|
||||
}
|
||||
span#counter {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: $primary;
|
||||
}
|
||||
.social-graph-wrapper {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
color: $white;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
|
||||
&.widget-facebook {
|
||||
background-color: $facebook;
|
||||
}
|
||||
&.widget-twitter {
|
||||
background-color: $twitter;
|
||||
}
|
||||
&.widget-linkedin {
|
||||
background-color: $linkedin;
|
||||
}
|
||||
&.widget-googleplus {
|
||||
background-color: $google-plus;
|
||||
}
|
||||
.s-icon {
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
// top: 0.625rem;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.recent-stats i{
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
|
||||
#lineChart_3Kk{
|
||||
height: 140px !important;
|
||||
}
|
||||
}
|
||||
/* add menu sidebar */
|
||||
.add-menu-sidebar{
|
||||
background: $primary;
|
||||
padding: 20px 18px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
border-radius: $radius;
|
||||
position:relative;
|
||||
margin: 50px 50px;
|
||||
p{
|
||||
font-size:16px;
|
||||
font-weight:500;
|
||||
color:#fff;
|
||||
}
|
||||
@include respond('laptop') {
|
||||
margin: 50px 25px 50px;
|
||||
p{
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
@include respond('phone') {
|
||||
margin: 20px 25px 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.donut-chart-sale {
|
||||
position:relative;
|
||||
small {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.profile-bx{
|
||||
.profile-image{
|
||||
background-image:url('../images/circle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
img{
|
||||
margin: 18px;
|
||||
width: 118px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//search-area
|
||||
.search-area{
|
||||
width: 300px;
|
||||
.form-control{
|
||||
background:#EFEFEF!important;
|
||||
border-width:0px;
|
||||
padding-right: 20px;
|
||||
min-height: 55px;
|
||||
border-radius:0;
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
&::placeholder{
|
||||
color:#757575;
|
||||
}
|
||||
}
|
||||
.input-group-text{
|
||||
background:#EFEFEF;
|
||||
border-width:0px;
|
||||
border-top-left-radius: $radius!important;
|
||||
border-bottom-left-radius: $radius!important;
|
||||
padding-right: 0;
|
||||
padding-left: 20px;
|
||||
i{
|
||||
font-size:25px;
|
||||
}
|
||||
|
||||
}
|
||||
@include respond('mid-desktop'){
|
||||
width:230px;
|
||||
}
|
||||
@include respond('laptop'){
|
||||
.form-control{
|
||||
min-height:45px;
|
||||
}
|
||||
.input-group-text i{
|
||||
font-size:18px;
|
||||
}
|
||||
}
|
||||
@include respond('tab-port'){
|
||||
width:200px;
|
||||
}
|
||||
}
|
||||
|
||||
//donut chart
|
||||
.donut-chart-sale{
|
||||
z-index: 1;
|
||||
.circle {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
z-index: -1;
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
small {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.min-w24{
|
||||
min-width:24px;
|
||||
} .min-w30{
|
||||
min-width:30px;
|
||||
}
|
||||
.min-w32{
|
||||
min-width:32px;
|
||||
}
|
||||
.min-w42{
|
||||
min-width:42px;
|
||||
}
|
||||
.min-w46{
|
||||
min-width:46px;
|
||||
}
|
||||
.min-w50{
|
||||
min-width:50px;
|
||||
}
|
||||
.line-chart-demo{
|
||||
|
||||
}
|
||||
|
||||
.form-group.style-1{
|
||||
.form-control{
|
||||
border-color:transparent;
|
||||
margin-right: -45px;
|
||||
z-index: 0;
|
||||
color:$black;
|
||||
background:#F0F0F0;
|
||||
border-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
.previous-transactions{
|
||||
tbody{
|
||||
tr{
|
||||
td:first-child{
|
||||
width:100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//star rating
|
||||
.rating-widget .rating-stars ul li i {
|
||||
font-size: 25px !important;
|
||||
}
|
||||
|
||||
|
||||
.heart {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: inline-block;
|
||||
background: url('../images/like.png');
|
||||
cursor: pointer;
|
||||
margin: -25px -15px;
|
||||
}
|
||||
.heart-blast {
|
||||
background-position: -1680px 0;
|
||||
transition: background 1s steps(28);
|
||||
}
|
||||
|
||||
//avtivity-card
|
||||
.avtivity-card{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
overflow:hidden;
|
||||
.activity-icon{
|
||||
height:80px;
|
||||
width:80px;
|
||||
min-width:80px;
|
||||
display:block;
|
||||
@include transitionMedium;
|
||||
border-radius:100%;
|
||||
line-height:80px;
|
||||
text-align:center;
|
||||
}
|
||||
.title{
|
||||
font-size:28px;
|
||||
}
|
||||
.progress{
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
}
|
||||
.effect{
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
transition: width .4s ease-in-out,height .4s ease-in-out;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
z-index: -1;
|
||||
}
|
||||
p,.media-body span{
|
||||
@include transitionMedium;
|
||||
}
|
||||
&:hover {
|
||||
.activity-icon{
|
||||
background:$white!important;
|
||||
}
|
||||
.effect{
|
||||
width: 225%;
|
||||
height: 562px;
|
||||
}
|
||||
p{
|
||||
color:$white;
|
||||
}
|
||||
.media-body{
|
||||
span{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
background:rgba($white,0.2)!important;
|
||||
.progress-bar{
|
||||
background:$white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond ('phone-land'){
|
||||
.title{
|
||||
font-size:20px;
|
||||
}
|
||||
.activity-icon{
|
||||
height:65px;
|
||||
width:65px;
|
||||
min-width:65px;
|
||||
line-height:65px;
|
||||
svg{
|
||||
width:35px;
|
||||
height:35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//testimonial-one
|
||||
.testimonial-one{
|
||||
.card{
|
||||
box-shadow:none;
|
||||
@include transitionMedium;
|
||||
margin-bottom:0;
|
||||
img{
|
||||
height:113px;
|
||||
width:113px;
|
||||
margin-left:auto;
|
||||
margin-bottom: 15px;
|
||||
margin-right:auto;
|
||||
border-radius:100%;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0px 12px 23px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.owl-nav{
|
||||
.owl-prev,.owl-next{
|
||||
height:68px;
|
||||
width:68px;
|
||||
cursor:pointer;
|
||||
line-height:68px;
|
||||
border-radius:100%;
|
||||
position:absolute;
|
||||
top:40%;
|
||||
background:$white;
|
||||
color:$primary;
|
||||
text-align:center;
|
||||
font-size:25px;
|
||||
box-shadow:0px 0px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.owl-next{
|
||||
right:-30px;
|
||||
}
|
||||
.owl-prev{
|
||||
left:-30px;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
.owl-next,.owl-prev{
|
||||
height:50px;
|
||||
width:50px;
|
||||
line-height:50px;
|
||||
font-size:20px;
|
||||
}
|
||||
.owl-next{
|
||||
right:-10px;
|
||||
}
|
||||
.owl-prev{
|
||||
left:-10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//featuredMenu
|
||||
.featuredMenu{
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
//card-footer style-1
|
||||
.card-footer.style-1{
|
||||
position:relative;
|
||||
a{
|
||||
position:absolute;
|
||||
height:68px;
|
||||
width:68px;
|
||||
line-height:68px;
|
||||
font-size: 25px;
|
||||
left:50%;
|
||||
border-radius:100%;
|
||||
background:$white;
|
||||
color:$primary;
|
||||
box-shadow:0px 0px 10px rgba(0,0,0,0.1);
|
||||
transform:translateX(-50%);
|
||||
bottom:-10px;
|
||||
}
|
||||
}
|
||||
84
public/style/scss/pages/_page-auth.scss
Normal file
84
public/style/scss/pages/_page-auth.scss
Normal file
@ -0,0 +1,84 @@
|
||||
.authincation-content{
|
||||
background: $primary;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
|
||||
border-radius: 5px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
.welcome-content{
|
||||
background: url('./../images/1.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
padding: 75px 50px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: $primary;
|
||||
opacity: 0.75;
|
||||
z-index: -1;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
.welcome-title{
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
p{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.brand-logo{
|
||||
a{
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
font-size: 20px;
|
||||
img{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro-social{
|
||||
position: absolute;
|
||||
bottom: 75px;
|
||||
ul{
|
||||
margin-bottom: 0;
|
||||
li{
|
||||
display: inline-block;
|
||||
a{
|
||||
color: $white;
|
||||
font-size: 14px;
|
||||
padding: 0px 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.auth-form{
|
||||
padding: 50px 50px;
|
||||
@include respond('phone') {
|
||||
padding: 30px;
|
||||
}
|
||||
.btn{
|
||||
font-weight: 700;
|
||||
}
|
||||
.page-back{
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
24
public/style/scss/pages/_page-error.scss
Normal file
24
public/style/scss/pages/_page-error.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.error-page{
|
||||
.error-text {
|
||||
font-size: 150px;
|
||||
line-height: 1;
|
||||
color:$secondary;
|
||||
@include respond('phone') {
|
||||
font-size: 80px;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
font-size: 40px;
|
||||
margin-bottom: 5px;
|
||||
color:$secondary;
|
||||
@include respond('phone') {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 16px;
|
||||
@include respond('phone') {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
87
public/style/scss/pages/_page-order.scss
Normal file
87
public/style/scss/pages/_page-order.scss
Normal file
@ -0,0 +1,87 @@
|
||||
.full-map-area{
|
||||
position:relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
a{
|
||||
position:absolute;
|
||||
bottom:30px;
|
||||
left:30px;
|
||||
}
|
||||
i{
|
||||
background: #3e4954;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
border-radius: 56px;
|
||||
}
|
||||
img
|
||||
{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.iconbox{
|
||||
position: relative;
|
||||
padding-left: 70px;
|
||||
|
||||
i{
|
||||
background:$primary;
|
||||
width:50px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
border-radius:50px;
|
||||
text-align:center;
|
||||
font-size:28px;
|
||||
color:$white;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
p{
|
||||
margin: 0;
|
||||
color: #484848;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
font-weight: 500;
|
||||
}
|
||||
small{
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.widget-timeline-icon{
|
||||
li{
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
margin-left: 11px;
|
||||
border-left: 3px solid $primary;
|
||||
min-height: 80px;
|
||||
padding-top: 1px;
|
||||
|
||||
.icon{
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
border-radius: 22px;
|
||||
left:-13px;
|
||||
top: 0;
|
||||
}
|
||||
.timeline-panel{
|
||||
|
||||
}
|
||||
&:last-child{
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
77
public/style/scss/pages/_page-pricing.scss
Normal file
77
public/style/scss/pages/_page-pricing.scss
Normal file
@ -0,0 +1,77 @@
|
||||
.pricing_table_content {
|
||||
background : $white;
|
||||
text-align : center;
|
||||
border : 1px solid #e7e7e7;
|
||||
border-radius : 3px;
|
||||
padding : 25px;
|
||||
-webkit-transition: all 0.25s ease-in-out;
|
||||
transition : all 0.25s ease-in-out;
|
||||
|
||||
.package {
|
||||
font-weight: 700;
|
||||
font-size : 18px;
|
||||
// font-family: $p_hf;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: 700;
|
||||
font-size : 50px;
|
||||
// font-family: $p_hf;
|
||||
line-height: 100px;
|
||||
color : $dark;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.price_list {
|
||||
padding : 30px 0;
|
||||
text-align: left;
|
||||
max-width : 175px;
|
||||
margin : 0 auto;
|
||||
|
||||
li {
|
||||
// font-family: $p_op;
|
||||
color : #909093;
|
||||
font-size : 14px;
|
||||
line-height: 25px;
|
||||
padding : 7px 0;
|
||||
|
||||
i {
|
||||
margin-right: 15px;
|
||||
// color : $p_bc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-btn {
|
||||
padding : 15px 50px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow : none;
|
||||
border : 1px solid $l-border;
|
||||
// color : $p_bc;
|
||||
border-radius : 5px;
|
||||
font-weight : 700;
|
||||
font-size : 14px;
|
||||
// font-family : $p_hf;
|
||||
margin-bottom : 25px;
|
||||
-webkit-transition: all 0.25s ease-in-out;
|
||||
transition : all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
-webkit-transform : scale(1.05);
|
||||
transform : scale(1.05);
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.175);
|
||||
box-shadow : 0 0 10px rgba(0,0,0,0.175);
|
||||
|
||||
.price-btn {
|
||||
// background: $p_bc;
|
||||
color : $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
286
public/style/scss/pages/_page-timeline.scss
Normal file
286
public/style/scss/pages/_page-timeline.scss
Normal file
@ -0,0 +1,286 @@
|
||||
.page-timeline{
|
||||
.timeline {
|
||||
list-style: none;
|
||||
padding : 40px 0;
|
||||
position : relative;
|
||||
|
||||
&-workplan#{&} {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.timeline > li > .timeline-badge {
|
||||
top: 4.5rem;
|
||||
}
|
||||
|
||||
&>li {
|
||||
margin-bottom: 2.6rem;
|
||||
}
|
||||
|
||||
li {
|
||||
>p{
|
||||
|
||||
@include custommq($min: 1200px, $max: 1650px) {
|
||||
max-width: 8rem;
|
||||
}
|
||||
|
||||
@include respond('tab-land') {
|
||||
max-width: 7rem;
|
||||
}
|
||||
|
||||
@include respond('tab-port') {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include respond('phone') {
|
||||
max-width: 7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 20%;
|
||||
top: 6rem;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
right: 22%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@include respond('phone') {
|
||||
left: 22%;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
left: 21.4%;
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
background-color: $primary;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
right: 19.2%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@include custommq($min: 1200px, $max: 1650px) {
|
||||
left: 22.4%;
|
||||
}
|
||||
|
||||
@include respond('tab-land') {
|
||||
left: 22.4%;
|
||||
}
|
||||
|
||||
@include respond('tab-port') {
|
||||
left: 21.7%;
|
||||
}
|
||||
|
||||
@include respond('phone-land') {
|
||||
left: 19.5%;
|
||||
}
|
||||
|
||||
@include respond('phone') {
|
||||
left: 21.4%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
background-color: rgba($color: $primary, $alpha: .4);
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.timeline-panel {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
top : 0;
|
||||
bottom : 0;
|
||||
position : absolute;
|
||||
content : " ";
|
||||
width : 2px;
|
||||
background-color: #ECEFF2;
|
||||
left : 50%;
|
||||
margin-left : -1.5px;
|
||||
}
|
||||
|
||||
.timeline > li {
|
||||
margin-bottom: 20px;
|
||||
position : relative;
|
||||
}
|
||||
|
||||
.timeline > li:after,
|
||||
.timeline > li:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline > li:after,
|
||||
.timeline > li:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel {
|
||||
width : 46%;
|
||||
float : left;
|
||||
// border : 1px solid #d4d4d4;
|
||||
border-radius : 2px;
|
||||
// padding : 20px;
|
||||
position : relative;
|
||||
// -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
|
||||
// box-shadow : 0 0 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-badge {
|
||||
background-color: $l-bg;
|
||||
border: 1px solid $iron;
|
||||
border-radius : 50%;
|
||||
color : $dark;
|
||||
// font-size : 1.4em;
|
||||
height : 40px;
|
||||
left : 50%;
|
||||
line-height : 40px;
|
||||
margin-left : -13px;
|
||||
position : absolute;
|
||||
text-align : center;
|
||||
top : 30px;
|
||||
width : 40px;
|
||||
z-index : 1;
|
||||
transform: translate(-25%, -3rem);
|
||||
|
||||
@include media-breakpoint-up(sm){
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
// i{
|
||||
// color: $pale-sky;
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel {
|
||||
float: right;
|
||||
|
||||
// @at-root [direction="rtl"] #{&} {
|
||||
// float: left;
|
||||
// }
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel:before {
|
||||
border-left-width : 0;
|
||||
border-right-width: 15px;
|
||||
left : -15px;
|
||||
right : auto;
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel:after {
|
||||
border-left-width : 0;
|
||||
border-right-width: 14px;
|
||||
left : -14px;
|
||||
right : auto;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
margin-top: 0;
|
||||
color : inherit;
|
||||
}
|
||||
|
||||
.event_time {
|
||||
// color : $bc;
|
||||
font-size : 14px;
|
||||
// text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.event_vanue {
|
||||
// color : $bc;
|
||||
font-size : 14px;
|
||||
margin : 5px 0;
|
||||
// text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timeline_img {
|
||||
height: 100px;
|
||||
width : 100px;
|
||||
}
|
||||
|
||||
.timeline-body > p,
|
||||
.timeline-body > ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
ul.timeline:before {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel {
|
||||
width: calc(100% - 90px);
|
||||
width: -webkit-calc(100% - 90px);
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-badge {
|
||||
left: 28px;
|
||||
margin-left: 0;
|
||||
top : 16px;
|
||||
|
||||
// @include media-breakpoint-up(sm){
|
||||
// left: 15px;
|
||||
// }
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel:before {
|
||||
border-left-width : 0;
|
||||
border-right-width: 15px;
|
||||
left : -15px;
|
||||
right : auto;
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel:after {
|
||||
border-left-width : 0;
|
||||
border-right-width: 14px;
|
||||
left : -14px;
|
||||
right : auto;
|
||||
}
|
||||
|
||||
.timeline_img {
|
||||
height: 30%;
|
||||
width : 30%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.timeline-timestamp {
|
||||
text-align: center;
|
||||
|
||||
.badge {
|
||||
padding: .8rem 2rem;
|
||||
border-radius: 50px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
public/style/scss/pages/_pages.scss
Normal file
22
public/style/scss/pages/_pages.scss
Normal file
@ -0,0 +1,22 @@
|
||||
@import "./page-error";
|
||||
@import "./page-auth";
|
||||
@import "./page-pricing";
|
||||
@import "./page-timeline";
|
||||
@import "./page-order";
|
||||
@import "./workout-plan";
|
||||
@import "./review";
|
||||
@import "./workout-statistic";
|
||||
@import "./distance-map";
|
||||
@import "./food-menu";
|
||||
|
||||
//specific HTML pages scss
|
||||
@import "./homepage";
|
||||
@import "./ecom-product-detail";
|
||||
@import "./ecom-product-grid";
|
||||
@import "./ecom-product-list";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
95
public/style/scss/pages/_review.scss
Normal file
95
public/style/scss/pages/_review.scss
Normal file
@ -0,0 +1,95 @@
|
||||
.review-table {
|
||||
padding: 25px;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
.star-review i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.media-body{
|
||||
p{
|
||||
color: #3e4954;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.disease {
|
||||
border-left: 1px solid $border-color;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.media-footer {
|
||||
min-width: 500px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
@include respond ('laptop'){
|
||||
.media-footer{
|
||||
min-width: 273px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
@include respond ('tab-port'){
|
||||
.star-review i {
|
||||
font-size: 16px;
|
||||
}
|
||||
.custom-control {
|
||||
float: right;
|
||||
right:-20px;
|
||||
}
|
||||
.media{
|
||||
display: block !important;
|
||||
}
|
||||
.media-body{
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
width: 80px;
|
||||
}
|
||||
.media-footer {
|
||||
margin-left: 0;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.disease {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
margin-right: 10px !important;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@include respond ('phone'){
|
||||
.media-footer{
|
||||
flex-flow:wrap;
|
||||
.disease{
|
||||
margin-right:auto!important;
|
||||
}
|
||||
.edit{
|
||||
margin-left:0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//review-tab
|
||||
.review-tab{
|
||||
.nav-link{
|
||||
border-radius:0;
|
||||
font-weight:600;
|
||||
border-bottom:2px solid #D9D9D9;
|
||||
@include transitionMedium;
|
||||
&.active{
|
||||
background:transparent;
|
||||
color:$primary;
|
||||
@include transitionMedium;
|
||||
box-shadow:none;
|
||||
border-color:$primary;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
206
public/style/scss/pages/_workout-plan.scss
Normal file
206
public/style/scss/pages/_workout-plan.scss
Normal file
@ -0,0 +1,206 @@
|
||||
.plan-list{
|
||||
.list-row {
|
||||
border-radius: 1.25rem;
|
||||
@include transitionMedium;
|
||||
.list-icon {
|
||||
height: 76px;
|
||||
min-width:76px;
|
||||
width: 76px;
|
||||
font-weight: 600;
|
||||
@include transitionMedium;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 1.25rem;
|
||||
@include respond ('phone-land'){
|
||||
height:60px;
|
||||
width:60px;
|
||||
min-width:60px;
|
||||
line-height:18px;
|
||||
p{
|
||||
font-size:18px!important;
|
||||
}
|
||||
span{
|
||||
font-size:12px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.play-button{
|
||||
color:$primary;
|
||||
@include transitionMedium;
|
||||
background:$light;
|
||||
margin-left:auto;
|
||||
@include respond ('mid-desktop'){
|
||||
margin-left:0;
|
||||
margin-right:auto!important;
|
||||
}
|
||||
@include respond ('tab-land'){
|
||||
margin-left:auto;
|
||||
margin-right:1rem!important;
|
||||
}
|
||||
@include respond ('tab-port'){
|
||||
margin-left:0;
|
||||
margin-right:auto!important;
|
||||
}
|
||||
}
|
||||
.more-dropdown{
|
||||
margin-left:auto;
|
||||
@include respond ('tab-land'){
|
||||
margin-left:auto;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
.more-button{
|
||||
height:56px;
|
||||
width:56px;
|
||||
display: block;
|
||||
border-radius:$radius;
|
||||
line-height:56px;
|
||||
@include transitionMedium;
|
||||
text-align:center;
|
||||
background:$light;
|
||||
@include respond ('laptop'){
|
||||
height:40px;
|
||||
width:40px;
|
||||
line-height:40px;
|
||||
svg{
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.activities{
|
||||
svg path,span{
|
||||
@include transitionMedium;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
h4 a,span{
|
||||
@include transitionMedium;
|
||||
}
|
||||
@include respond ('phone-land'){
|
||||
h4{
|
||||
font-size:16px!important;
|
||||
}
|
||||
span{
|
||||
font-size:13px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background:$primary;
|
||||
.info{
|
||||
h4 a,span{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
.play-button{
|
||||
color:$white;
|
||||
background:$warning;
|
||||
}
|
||||
.more-button{
|
||||
background:rgba($white,0.3);
|
||||
svg path{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
.activities{
|
||||
svg path{
|
||||
fill:$white;
|
||||
}
|
||||
span{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.event-calender{
|
||||
.bootstrap-datetimepicker-widget table th.picker-switch {
|
||||
width: 145px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $black;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table th {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.day {
|
||||
height: 46px;
|
||||
line-height: 30px;
|
||||
width: 46px;
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .picker-switch td i {
|
||||
line-height: 2.5;
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.datepicker table tr td.today{
|
||||
background:#EEEEEE!important;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.datepicker table tr td.active.active{
|
||||
background:#EEEEEE!important;
|
||||
box-shadow:none;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.day:hover {
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
background: $warning!important;
|
||||
color:$white!important;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.today:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
border:3px solid $white;
|
||||
right: -5px;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
background: $primary;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th{
|
||||
border-radius:10px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.new {
|
||||
color: #dee2e6!important;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table thead tr:first-child th {
|
||||
cursor: pointer;
|
||||
padding: 30px 10px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td span.active{
|
||||
color:$primary;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .datepicker-decades .decade {
|
||||
width: 50%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.date-icon{
|
||||
height:60px;
|
||||
width:60px;
|
||||
font-size:24px;
|
||||
line-height:60px;
|
||||
text-align:center;
|
||||
color:$primary;
|
||||
background:rgba($primary,0.2);
|
||||
border-radius:1.25rem;
|
||||
}
|
||||
20
public/style/scss/pages/_workout-statistic.scss
Normal file
20
public/style/scss/pages/_workout-statistic.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.man-chart {
|
||||
position: relative;
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.radialBar{
|
||||
p{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
#radialBar{
|
||||
@include respond ('tab-land'){
|
||||
margin-bottom:-40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user