felipe.aquino/cae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

definicao de layout

Browse Source
This commit is contained in:
Felipe AQUINO
2026-02-06 14:37:54 +00:00
parent 872a5bb3ea
commit a4f80c85c2
2686 changed files with 640668 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
public/assets/scss/theme/_according.scss Normal file
View File

@@ -0,0 +1,110 @@
/**=====================
24. According CSS start
==========================**/
.default-according{
.card{
margin-bottom: 0;
box-shadow: none !important;
&+.card{
margin-top: $according-card-top-margin;
}
.btn-link{
font-weight: $according-btn-weight;
color: $theme-body-font-color;
font-size: 16px;
}
.btn-link{
&:focus,&:hover{
text-decoration: none;
}
}
.card-header{
padding: $according-card-header-padding;
// border: 1px solid $light-gray;
border-bottom: 1px solid $light-gray;
i{
position: initial;
font-size: 20px;
display: inline-block;
vertical-align: text-bottom;
margin-right: 5px;
}
h5{
margin-top: 2px;
}
}
.card-body {
border-top:none !important;
padding: 20px;
h5{
font-size: 14px;
margin-bottom: 5px;
}
h6{
color: $light-text ;
font-size: 12px ;
margin-bottom: 5px ;
}
ul{
&.rating{
li{
display: inline-block;
}
}
}
}
}
}
.default-according.style-1{
button{
width: 100%;
text-align: left;
&:before{
right: 20px;
position: absolute;
transition: 0.4s;
}
&[aria-expanded="true"]{
&:before{
content: $according-open-icon;
font-family: $according-card-header-icon;
}
}
&[aria-expanded="false"]{
&:before{
content: $according-close-icon;
font-family: $according-card-header-icon;
}
}
}
}
@media (max-width:480px){
.default-according {
.card {
.card-header{
padding-right:32px;
h5{
font-size:16px;
}
}
}
&.style-1 {
button{
&:before{
right:10px;
}
}
}
}
}
/**=====================
24. According CSS Ends
==========================**/

229
public/assets/scss/theme/_alert.scss Normal file
View File

@@ -0,0 +1,229 @@
/**=====================
15. Alert CSS start
==========================**/
.notify-alert {
.close {
background: unset;
border: none;
font-size: 25px;
outline: none;
}
}
.alert{
border-radius: $alert-border-radious;
padding:15px;
svg{
vertical-align: middle;
}
.progress{
margin-top: $alert-padding;
}
[data-notify='icon'] {
margin-right: 10px;
line-height: 20px;
position: absolute;
}
[data-notify='message'] {
display: inline-block;
width: 100%;
}
i{
margin-right: 5px;
font-size: $alert-msg-icon-size;
}
p{
margin-bottom: 0;
}
.close{
opacity: 1;
span{
font-size: 24px;
font-weight: 400;
display: inline-block;
border-radius: 3px;
text-shadow: none;
padding: 0 5px;
padding-right: 0;
}
}
}
.alert-dismissible {
.close {
padding: 10px 1.25rem;
top:4px;
padding-right: 13px;
opacity: 0.5;
transition: all 0.3s ease;
&:hover{
transition: all 0.3s ease;
opacity: 1;
color: inherit;
}
}
}
.card-body{
button{
&:focus{
outline: none;
}
}
.alert{
&:last-child{
margin-bottom: 0;
}
svg{
width: 14px;
height: 14px;
margin-right: 4px;
position: absolute;
top:18px;
&~p{
padding-left: 20px;
}
}
}
}
strong{
display: inline-block;
&~p{
display: inline-block;
}
}
$alert-name:primary,
secondary,
success,
danger,
warning,
info,
light,
dark;
$alert-color :$primary-color,
$secondary-color,
$success-color,
$danger-color,
$warning-color,
$light-font,
$light-gray,
$dark-color;
@each $var in $alert-name {
$i: index($alert-name, $var);
.alert-#{$var}{
background-color: rgba(nth($alert-color, $i), 0.8);
border-color: rgba(nth($alert-color, $i), 0.9);
color: $white;
.progress {
height: 5px;
background-color: darken(nth($alert-color, $i), 1%);
border-radius: 0;
}
.progress-bar{
background-color: lighten(nth($alert-color, $i), 50%);
}
.btn-close {
filter: brightness(1) invert(1);
}
.alert-link{
color: nth($alert-color, $i);
@if($var == "light"){
color: $dark-color;
}
}
@if($var == "light"){
color: $dark-color;
background-color: $light-color;
.btn-close {
filter: unset;
}
}
hr{
border-top-color: nth($alert-color, $i);
}
}
.alert-#{$var}.dark {
.alert-link{
color: $white;
@if($var == "light"){
color: $dark-color;
}
}
background-color: nth($alert-color, $i);
border-color: nth($alert-color, $i);
color: $auth-bg-color;
@if($var == "light"){
color: $dark-color;
}
}
.alert-#{$var}.outline,.alert-#{$var}.outline-2x {
background-color: $transparent-color;
border-color: nth($alert-color, $i);
color: nth($alert-color, $i);
.btn-close {
filter: unset;
}
@if($var == "light"){
color: $dark-color;
}
}
.alert-#{$var}.inverse{
&:before{
top: 16px;
content: "";
position: absolute;
left: 54px;
width: 0;
height: 0;
border-left: 7px solid nth($alert-color, $i);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
background-color: transparent;
padding: 13px 20px 13px 65px;
border-color: nth($alert-color, $i);
color: $theme-body-font-color;
i{
padding: 17px 20px;
display: inline-block;
background-color: nth($alert-color, $i);
color: $white;
border-radius: 3px 0 0 3px;
position: absolute;
left: 0;
top: 0;
height:100%;
}
.btn-close {
filter: unset;
top: -3px;
}
}
}
.dismiss-text {
.alert {
.btn-close {
background: unset;
opacity: 1;
top: -6px;
right: 40px;
span {
display: inline-block;
border-radius: 3px;
text-shadow: none;
padding: 0 5px;
}
}
}
}
.outline-2x{
border-width: 2px;
padding: 11px 1.25rem;
}
/**=====================
15. Alert CSS end
==========================**/

129
public/assets/scss/theme/_avatars.scss Normal file
View File

@@ -0,0 +1,129 @@
/**=====================
80. avatars CSS start
==========================**/
.avatars{
.avatar{
display: inline-block;
margin-right: 10px;
position: relative;
&:last-child{
margin-right: 0;
}
.b-r-30 {
border-radius: 30px;
}
.b-r-35 {
border-radius: 35px;
}
.b-r-25 {
border-radius: 25px;
}
.b-r-15 {
border-radius: 15px;
}
&.ratio{
img{
width: auto;
}
}
.height-100{
height: 100px;
}
.height-90{
height: 90px;
}
.height-80{
height: 80px;
}
.height-70{
height: 70px;
}
.height-60{
height: 60px;
}
.height-50{
height: 50px;
}
.status{
position: absolute;
background-color: $light-text;
bottom: 0;
right: 4px;
border-radius: 100%;
border: 1px solid $white;
}
.status-100 {
width: 25px;
height: 25px;
}
.status-90 {
width: 20px;
height: 20px;
}
.status-80 {
width: 15px;
height: 15px;
}
.status-70 {
width: 12px;
height: 12px;
}
.status-60 {
width: 10px;
height: 10px;
}
.status-50 {
width: 9px;
height: 9px;
}
.status-40 {
width: 8px;
height: 8px;
}
.status-30 {
width: 7px;
height: 7px;
}
}
}
.customers{
ul{
li{
img{
border: 2px solid $white;
box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.2);
transition: 0.5s;
&:hover{
transform: translateY(-4px) scale(1.02);
transition: 0.5s;
}
}
+ li{
margin-left: -22px;
}
&:nth-child(4){
margin-left: -4px;
}
}
}
&.avatar-group{
margin-right: 30px;
&:last-child{
margin-right: 0;
}
}
}
.avatar-showcase{
margin-bottom: -10px;
.avatars{
.avatar{
margin-bottom: 10px;
}
}
.avatar-group{
margin-bottom: 10px;
}
}
/**=====================
80. avatars CSS Ends
==========================**/

56
public/assets/scss/theme/_badge.scss Normal file
View File

@@ -0,0 +1,56 @@
/**=====================
49. Badge CSS start
==========================**/
.badge {
padding: $badge-padding;
&+.badge{
margin-left: 5px;
}
svg{
width: $badge-svg-size;
height: $badge-svg-size;
}
}
// flat badge loop css
@each $pill-badge-name, $pill-badge-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.pill-badge-#{$pill-badge-name}{
background-color: $pill-badge-color;
box-shadow: -0.5px 4.33px 16px 0px rgba($pill-badge-color, 0.25);
color:$white;
font-size:9px;
text-transform:capitalize;
border-radius:5px;
font-weight:600;
padding: 5px 9px;
}
}
// round badge loop css
@each $round-badge-name, $round-badge-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.round-badge-#{$round-badge-name}{
border-radius: 6px;
background-color: $round-badge-color;
box-shadow: -0.5px -6.67px 14px 0px rgba($round-badge-color, 0.18);
color: $white !important;
}
}
/**=====================
49. Badge CSS Ends
==========================**/

44
public/assets/scss/theme/_base-inputs.scss Normal file
View File

@@ -0,0 +1,44 @@
//form input settings
$form-group-margin-bottom : 1.25em;
$col-form-label-font-size : 14px;
$form-control-font-size : 14px;
$form-control-border-radious : 2px;
$form-control-border-color : $light-gray;
/**=====================
35. base_inputs CSS start
==========================**/
.base_inputs {
.form-group {
margin-bottom: $form-group-margin-bottom;
.col-form-label {
font-size: $col-form-label-font-size;
}
.form-control {
font-size: $form-control-font-size;
border-radius: $form-control-border-radious;
border: 1px solid $form-control-border-color;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
box-shadow: none !important;
border: 1px solid $form-control-border-color !important;
}
}
}
/**=====================
35. base_inputs CSS ends
==========================**/

575
public/assets/scss/theme/_blog.scss Normal file
View File

@@ -0,0 +1,575 @@
/**=====================
46. Blog CSS start
==========================**/
.blog-box{
.blog-wrraper{
overflow:hidden;
}
img{
border-radius: 0.25rem;
transition: all 0.5s ease;
}
.top-radius-blog{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
h6{
font-weight: 600;
margin: 15px 0;
color: $theme-body-font-color;
}
.blog-details{
padding-right:20px;
.blog-social{
li{
display: inline-block;
font-size: 14px;
color: $light-text;
font-weight: 500;
i{
padding-right: 5px;
}
&:nth-child(n+2){
border-left: 1px solid $light-gray;
padding-left:20px;
margin-left: 20px;
}
}
}
}
.blog-details-main{
.blog-social{
margin:15px 0;
li{
display: inline-block;
color: $theme-body-sub-title-color;
font-size: 12px;
padding: 0 15px;
font-weight:500;
border-right:1px solid $light-gray;
&:last-child{
border-right: 0;
}
i{
padding-right: 5px;
}
}
}
.blog-bottom-details{
margin: 20px;
font-size: 14px;
line-height: 1.6;
font-weight: 700;
}
}
.blog-date{
color: $theme-body-sub-title-color;
margin-bottom:5px;
span{
font-size:36px;
font-weight:600;
padding-right:5px;
color: $primary-color;
line-height:1;
}
}
.media{
align-items:center;
}
.blog-details-second{
padding:20px;
.blog-post-date{
margin-top:-48px;
z-index:2;
position:relative;
.blg-month,.blg-date{
padding:5px;
display:block;
width: 50px;
font-size: 12px;
text-align: center;
text-transform: capitalize;
color:$white;
font-weight:600;
}
.blg-month{
background-color:$primary-color;
}
.blg-date{
background-color: $secondary-color;
}
}
h6{
font-size: 18px;
margin-top: 25px;
margin-bottom: 10px;
}
p{
color: $light-text;
margin-bottom:15px;
}
.detail-footer{
padding:15px 20px;
margin-left: -20px;
margin-right: -20px;
margin-bottom: -20px;
border-top: 1px solid $light-gray;
ul.sociyal-list{
li{
display:inline-block;
color:$light-text;
text-transform: capitalize;
font-weight: 600;
i{
font-size:12px;
margin-right:5px;
font-weight:600;
}
&:nth-child(n+2){
margin-left: 15px;
padding-left: 15px;
border-left: 1px solid $light-gray;
}
}
}
}
}
&:hover{
.blog-wrraper{
img{
transform:scale(1.05);
}
}
}
}
.blog-box.blog-shadow{
height:560px;
&:before{
box-shadow: inset 0px -200px 100px -13px rgba(0, 0, 0, 0.6);
transition: all 0.3s ease;
border-radius: 5px;
content: "";
position: absolute;
height: 100%;
top: 0;
width: 100%;
bottom: 0;
}
&:hover{
&:before{
box-shadow: inset 0px -200px 100px -13px rgba(0, 0, 0, 0.65);
transition: all 0.3s ease;
}
}
.blog-details{
position: absolute;
bottom: 0;
width: 100%;
padding: 40px;
h4{
color: $white;
margin-top: 15px;
margin-bottom: 15px;
}
p{
font-size: 14px ;
color: $white ;
padding-top:unset;
margin-top:0;
}
.blog-social{
li{
color: $white;
}
}
}
}
.blog-list{
.blog-details{
hr{
margin-top: 15px;
margin-bottom: 15px;
}
.blog-social{
margin-top: 0;
}
h6{
margin-top: 0;
margin-bottom: 10px;
line-height: 1.6;
font-weight: 600 ;
color: $theme-body-font-color;
}
}
img{
width: 100%;
padding: 17px;
}
}
.blog-grid{
img{
width: 100%;
}
.blog-details{
padding: 20px;
h6{
font-size: 14px;
margin-bottom: 0;
line-height: 1.8;
}
}
}
.blog-box{
position: relative;
max-height: 100%;
align-items: center;
.blog-details{
p{
font-size:14px;
line-height:1.6;
letter-spacing:0.7px;
margin-top:10px;
margin-bottom:0;
color:$light-text;
}
h4{
font-size: 18px;
font-weight: 600;
line-height:1.5;
margin-top:20px;
margin-bottom: 0;
}
.single-blog-content-top{
border-top:1px solid $light-gray;
}
.blog-social,.comment-social{
li{
font-size: 14px;
color: $light-text;
font-weight: 600;
}
}
}
}
.comment-box{
margin-top:30px;
h4{
font-weight:700;
margin-bottom:30px;
padding-bottom:20px;
border-bottom:1px solid $light-gray;
}
li{
margin-bottom:30px;
clear:both;
&:last-child{
margin-bottom:0;
}
}
ul {
ul{
margin-left:135px;
text-align:right;
}
}
p{
font-size: 14px;
line-height: 1.8;
text-align: justify;
margin-bottom: 0;
color: $light-text;
}
.media{
img{
margin-right:45px;
border-radius: 50%;
height: 90px;
padding: 7px;
width: 90px;
border: 1px solid $light-semi-gray;
}
h6{
font-size:16px;
font-weight:600;
margin-bottom:10px;
text-align:left;
span{
padding-left: 10px;
font-size: 13px;
color: $light-text;
font-weight: 400;
}
}
}
.comment-social{
margin-left:0;
li{
display: inline-block;
color: $gray-60;
margin-bottom:0;
font-weight: 500;
text-transform: uppercase;
&:nth-child(n+2){
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid $light-gray;
}
i{
padding-right: 10px;
}
}
}
}
.blog-single{
.blog-box {
.banner-wrraper{
height:400px;
}
.blog-details{
p{
margin-top: 15px;
}
}
}
.single-blog-content-top{
margin-top:15px;
}
.comment-social{
margin-left: unset;
}
}
@media (max-width:1500px){
.blog-box{
&.blog-shadow{
height:480px;
}
}
}
@media screen and (min-width:1366px) and (max-width: 1530px){
.blog-box {
.blog-details-second {
padding: 15px;
p{
font-size: 13px;
}
h6{
font-size: 16px;
margin-top: 20px;
margin-bottom: 5px;
}
.blog-post-date {
margin-top:-35px;
.blg-month,.blg-date{
font-size: 10px;
padding: 3px;
}
}
.detail-footer {
margin-bottom:-15px;
margin-left: -15px;
margin-right: -15px;
padding:10px 15px;
ul{
&.sociyal-list {
li{
font-size: 12px ;
&:nth-child(n+2){
margin-left:10px;
padding-left:10px;
}
}
}
}
}
}
}
}
@media (max-width:1400px){
.blog-box{
&.blog-shadow{
height:440px;
}
}
}
@media (max-width:1365px){
.blog-box{
&.blog-shadow{
height:440px;
}
}
}
@media (max-width:1280px){
.blog-box{
&.blog-shadow{
height:365px;
}
}
}
@media (max-width: 1199px){
.comment-box{
.blog-details {
h4{
margin-top:50px;
}
}
}
.blog-box{
&.blog-shadow{
height:380px;
}
.media{
display: block;
}
.blog-details{
padding:20px;
}
}
.blog-list {
img{
width:100%;
padding:0;
}
}
.blog-single{
.blog-box {
.blog-details{
padding:unset;
}
}
}
}
@media (max-width:991px){
.blog-box {
.blog-details {
p{
margin-top:10px;
}
.single-blog-content-top{
margin-top:20px;
}
}
}
}
@media (max-width:767px){
.comment-box {
ul {
ul{
text-align:left;
}
}
}
.blog-single{
.blog-box {
.blog-details{
h4{
margin-top:10px;
}
}
.blog-details {
.single-blog-content-top{
margin-top: 10px;
}
p{
margin-top: 10px;
}
}
}
}
.blog-box {
.blog-details-second {
padding:15px;
h6{
margin-top:20px;
}
.detail-footer{
padding:15px 15px;
margin-left:-15px;
margin-right:-15px;
margin-bottom:-15px;
ul.sociyal-list {
li{
font-size:12px;
&:nth-child(n+2){
margin-left:10px;
padding-left:10px;
}
}
}
}
.blog-post-date {
margin-top: -35px;
.blg-month,.blg-date{
padding:3px;
font-size:10px;
}
}
}
.blog-details {
.blog-social {
li{
&:nth-child(n+2){
padding-left:10px;
margin-left:10px;
}
}
}
.blog-social,.comment-social {
li{
font-size:13px;
}
}
}
}
}
@media (max-width:575px){
.blog-single {
.comment-box {
.comment-social {
li{
font-size: 12px;
}
}
}
}
}
@media (max-width:480px){
.blog-box {
.blog-details-second {
h6{
margin-top:15px;
margin-bottom:5px;
}
p{
margin-bottom:10px;
}
}
}
}
/**=====================
46. Blog CSS ends
==========================**/

550
public/assets/scss/theme/_bookmark-app.scss Normal file
View File

@@ -0,0 +1,550 @@
/**=====================
85. bookmark app CSS Start
==========================**/
.email-wrap .email-app-sidebar .main-menu>li a[aria-selected="true"] span{
color:$primary-color !important;
}
.modal-bookmark{
.modal-body,.modal-header {
padding:25px;
h5{
font-weight:600;
}
}
}
.bookmark-wrap {
.btn-mail {
color:$primary-color !important;
width:100% ;
font-weight:600;
}
.row {
.col-xl-3 {
+.col-xl-3 {
padding-right: 15px;
}
}
}
.left-bookmark {
ul {
li {
button {
border: none;
cursor: pointer;
&:focus {
outline: none;
}
}
svg {
width: 18px;
height: 18px;
vertical-align: middle;
}
>.main-title {
color: $primary-color;
font-weight: 600;
margin-bottom: 5px;
display: block;
font-size:16px;
span {
a {
&:hover {
background-color: $transparent-color;
}
}
}
svg {
color: $dark-gray;
stroke-width: 1px;
}
}
a {
>.title {
text-transform: capitalize;
color:$theme-font-color;
}
}
}
}
}
}
.form-bookmark {
a {
text-transform: capitalize !important;
color: $primary-color !important;
line-height: 1 !important;
font-weight: 500;
&:hover {
background-color: $transparent-color !important;
}
}
input {
&#index_var {
display: none;
}
}
.form-group {
label{
font-weight: 600;
margin-bottom: 5px;
}
input, select {
font-size: 14px;
}
.select2 {
width: 100% !important;
}
.error {
margin: 0 !important;
font-size: 11px;
color: red !important;
}
.fill-color{
width:35px;
height:30px;
padding:3px;
}
}
button {
margin-top: 30px;
}
}
@keyframes displayTransition {
from { opacity: 0; }
to { opacity: 1; }
}
.bookmark-tabcontent {
.details-bookmark {
height: auto;
min-height: 359px;
.bookmark-card {
position: relative;
&.card {
.favourite-icon {
padding: 3px;
border-radius: 4px;
background-color: rgba($black, 0.2);
width: 30px;
position: absolute;
right: 15px;
top: 15px;
opacity:0;
i {
color: $white;
font-size: 16px;
vertical-align: text-bottom;
}
&.favourite {
i {
color: #fed112;
}
}
}
.desciption-data {
width: 100%;
.content-general {
display: none;
}
}
.favourite-icon {
transition: 0.5s;
}
.title-bookmark {
text-align:left;
padding:15px;
border-top:1px solid $light-gray;
position:relative;
p{
animation:displayTransition 1s;
font-size:13px;
opacity:1;
}
.hover-block{
display:none;
margin-top:15px;
ul{
li {
display: inline-block;
+ li {
margin-left: 5px;
}
svg {
width: 16px;
height: 16px;
color: $dark-gray;
}
}
}
}
}
&:hover {
box-shadow: 1px 4px 16px 3px rgba($black, 0.04);
transition: 0.5s;
.title-bookmark {
p {
opacity: 0;
}
.hover-block {
display: block;
animation: displayTransition 2s;
// opacity: 0;
position: absolute;
width: 100%;
padding: 15px;
top: 15px;
left: 0;
}
}
.favourite-icon {
opacity: 1;
}
}
}
}
&.list-bookmark {
.row{
.col-xl-3{
flex:0 0 100%;
max-width: 100%
}
}
.bookmark-card{
.desciption-data{
.content-general{
display: block;
}
}
.details-website {
display:flex;
align-items:center;
.title-bookmark {
p {
display: block;
opacity: 1;
}
.hover-block {
position:absolute;
right:15px;
display:block;
text-align: right;
}
}
&:hover {
.title-bookmark {
.hover-block {
display: block;
animation: displayTransition 0s;
}
}
}
}
&.card {
.title-bookmark {
border-top: none;
p, h6 {
margin-top: 0;
display: inline-block;
}
h6 {
position: relative;
padding-right: 15px;
&::after {
position: absolute;
content: '-';
right: 0;
color: $dark-gray;
}
}
.content-general {
margin-top: 5px;
p {
width: 68%;
margin-right: 20px;
opacity: 1;
}
}
}
}
img {
width: 20%;
}
}
}
}
.tab-content {
.card {
.card-header {
justify-content: space-between;
display:flex ;
border-bottom:1px solid $light-gray;
h5{
font-weight:600;
font-size:22px;
}
svg {
width: 18px;
height: 18px;
vertical-align: middle;
}
ul {
li {
display: inline-block;
+ li {
margin-left: 5px;
}
}
}
}
}
}
}
// responsive
@media only screen and (max-width: 1660px) {
.bookmark-tabcontent {
.details-bookmark {
&.list-bookmark {
.bookmark-card {
&.card{
.title-bookmark{
.content-general{
p{
display: none;
}
}
.hover-block {
margin-top: 6px;
}
}
}
}
}
}
}
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
.bookmark-wrap {
.left-bookmark {
ul {
li {
.btn-block {
svg {
display: none;
}
}
}
}
}
}
}
@media only screen and (max-width: 1366px) {
.bookmark-tabcontent {
.details-bookmark {
&.list-bookmark {
.bookmark-card {
img {
width: 40%;
}
&.card {
.title-bookmark {
.hover-block{
top:80px;
}
}
}
}
}
}
}
.bookmark {
ul {
li {
a {
svg{
width:15px;
height:15px;
margin:10px;
}
}
}
}
}
}
@media only screen and (max-width: 1199px) {
.bookmark-wrap {
.left-bookmark {
height: auto;
}
}
.bookmark-tabcontent{
.details-bookmark{
min-height:auto;
// .bookmark-card.card {
// .title-bookmark{
// h6{
// font-size:16px;
// }
// }
// }
}
}
}
@media only screen and (max-width: 991px) {
.modal-bookmark {
.modal-body, .modal-header {
padding: 20px;
}
}
.form-bookmark {
button {
margin-top: 20px;
}
}
.bookmark-tabcontent {
.tab-content {
.card {
.card-header,.card-body {
padding:20px;
h5{
font-size:18px;
}
}
}
}
}
}
@media only screen and (max-width: 767px) {
.bookmark-tabcontent {
.details-bookmark {
&.list-bookmark {
.bookmark-card {
.details-website {
.title-bookmark {
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 172px;
}
}
&:hover {
.title-bookmark {
.hover-block {
p {
display: none;
}
ul {
position: relative;
right: unset;
top: unset;
}
}
}
}
}
img {
width:45%;
}
}
}
}
}
}
@media only screen and (max-width: 575px) {
.bookmark-tabcontent {
.details-bookmark {
&.list-bookmark {
.bookmark-card {
img {
width:46%;
}
.details-website {
display: block;
img{
width:100%;
}
.title-bookmark {
h6,p{
display: block;
}
.content-general{
display:none;
}
.hover-block {
position: relative;
right: unset;
text-align: left;
top: unset;
padding: 0;
}
}
}
}
}
}
}
.modal-bookmark {
.modal-body, .modal-header {
padding: 15px;
}
}
.form-bookmark {
button {
margin-top: 15px;
}
}
}
@media only screen and (max-width: 360px) {
.bookmark-tabcontent {
.details-bookmark {
&.list-bookmark {
.bookmark-card {
img {
width: 28%;
}
}
}
}
}
}
/**=====================
85. bookmark app CSS Ends
==========================**/

119
public/assets/scss/theme/_bookmark.scss Normal file
View File

@@ -0,0 +1,119 @@
/**=====================
81. Bookmark CSS start
==========================**/
.bookmark {
text-align:right;
ul {
li {
border:1px solid $light-gray;
background-color:$white;
display:inline-block;
border-radius:8px;
transition: all 0.5s ease;
svg{
transition: all 0.5s ease;
}
&:hover{
background-color:$primary-color;
a {
svg{
color:$white;
stroke:$white;
}
}
}
.search-form {
position: absolute;
bottom: 53px;
.form-control-search {
top:60px;
position:absolute;
transition:all linear 0.3s;
right:-20px;
transform: translateY(-35px) scaleY(0);
opacity:0;
visibility: hidden;
input {
width: 285px;
background-color: $white;
border: 1px solid $light-gray;
}
&.open {
transform: translateY(0px) scaleY(1);
opacity: 1;
visibility: visible;
transition: all linear 0.3s;
z-index: 100;
}
&:after {
top: 12px;
left: 20px;
z-index: 1;
}
&:before {
left: 50px;
top: 9px;
z-index: 2;
}
}
}
a{
position: relative;
color: $theme-body-font-color;
svg {
vertical-align: middle;
height: 18px;
width: 18px;
margin: 12px;
}
}
&:nth-child(n+2){
margin-left:8px;
}
&:last-child {
padding-right: 0;
color: $primary-color;
a {
border-radius: 5px;
svg {
color: $primary-color;
}
}
}
}
}
}
.offcanvas-bookmark {
&.page-wrapper.horizontal-wrapper {
.page-body-wrapper {
.page-body {
.bookmark {
ul {
li {
a {
z-index: 99999;
color: rgba(255, 255, 255, 0.5);
}
}
}
}
}
}
}
&:before {
position: fixed;
content: '';
background-color: rgba(0,0,0,0.5);
height: 100%;
width: 100%;
z-index: 99;
right: 0;
left: 0;
}
}
/**=====================
81. Bookmark CSS Ends
==========================**/

714
public/assets/scss/theme/_box-layout.scss Normal file
View File

@@ -0,0 +1,714 @@
/**=====================
63. Box-layout CSS start
==========================**/
.box-layout {
@media only screen and (min-width: 1280px){
.page-wrapper{
&.horizontal-wrapper {
.page-body-wrapper{
margin-top: 40px !important;
overflow:hidden;
.page-body{
min-height:calc(100vh - 165px);
margin-top: 0;
top:80px;
overflow-y: scroll !important;
max-height: calc(100vh - 220px);
padding-bottom: 80px;
}
}
.page-main-header{
margin-top: 40px;
&.close_icon{
margin-left: auto;
}
}
.page-body-wrapper{
width:1280px;
&.horizontal-menu {
header{
&.main-nav {
width:1280px;
top:80px;
margin:0;
overflow-x: unset;
position: relative;
.main-navbar {
#mainnav{
width:1280px;
margin-left:auto;
margin-right:auto;
position: unset;
}
}
}
}
}
}
}
&.compact-sidebar{
&.compact-wrapper {
.page-body-wrapper {
header{
&.main-nav {
height:calc(100vh - 206px);
width:155px;
.main-navbar {
.nav-menu {
height:calc(100vh - 240px);
padding-top: 0;
padding-bottom: 0;
.dropdown {
.menu-title{
&.active {
~ .menu-content{
left:24.7%;
top:118px;
}
}
}
}
}
}
}
}
}
}
}
&.compact-wrapper{
.page-body-wrapper{
margin-top: 40px !important;
}
.page-main-header{
margin-top: 40px;
&.close_icon{
margin-left: auto;
}
}
.page-body-wrapper{
.page-body{
margin-left:255px;
min-height: calc(100vh - 165px);
margin-top: 0;
top: 80px;
overflow-y:scroll !important;
max-height: calc(100vh - 130px);
padding-bottom: 80px;
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba($primary-color,0.2);
}
&::-webkit-scrollbar-thumb, &::-webkit-scrollbar {
width: 6px;
border-radius: 13px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba($primary-color,0.1);
}
}
header{
&.main-nav{
position: fixed;
border-bottom: none;
top:100px;
z-index: 3;
height: auto;
line-height: inherit;
width:255px;
height:100%;
text-align: left;
transition: 0.5s;
padding-top: 25px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 7px;
height: calc(100vh - 201px);
&.close_icon{
opacity: 0;
visibility: hidden;
~ footer {
margin-left:0;
width:1280px;
transition: 0.5s;
}
}
.main-navbar {
.nav-menu{
height: calc(100vh - 510px);
}
}
&.main-nav {
.main-navbar {
.nav-menu {
>li{
padding:0 10px;
}
}
}
}
}
}
}
}
&.compact-sidebar {
&.compact-wrapper {
.page-body-wrapper {
.page-body {
margin-left: 150px;
}
footer {
margin-left: unset !important;
}
}
}
}
&.modern-sidebar{
&.compact-wrapper {
.page-main-header{
margin:0 auto;
}
.page-body-wrapper {
padding-top:40px;
header{
&.main-nav{
top:103px;
height: calc(100vh - 190px);
margin-left: unset;
}
}
.page-body{
max-height: calc(100vh - 170px);
min-height: calc(100vh - 170px);
top: 0;
margin:0 auto;
margin-left:255px;
padding-bottom:30px;
}
footer{
z-index:3;
}
}
}
}
.main-navbar {
.tab-content{
padding-left:10px;
padding-right:10px;
}
}
.page-main-header {
.main-header-right {
.main-header-left{
width:255px;
}
}
}
ul {
&.close_icon {
> li {
label {
padding: 0;
&:after {
display: none;
}
}
}
}
}
.bookmark {
ul {
margin-right: -1px;
}
}
#batchDelete{
.jsgrid-grid-header{
.jsgrid-table{
tr{
th{
.btn{
padding-left: 20px;
padding-right: 20px;
}
}
}
}
}
}
.btn-group-showcase{
.btn-radio{
.btn-group{
.radio{
input[type="radio"] {
display: none;
}
}
}
}
}
.media.bitcoin-graph{
display: block;
.top-bitcoin {
display: inline-block;
vertical-align: middle;
}
.media-body{
margin-top: 30px;
.bitcoin-content{
.bitcoin-numbers{
h6 {
font-size: 14PX;
}
}
&.text-end{
text-align: center !important;
}
}
}
}
.alert{
&.inverse{
p{
max-width: 238px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.page-main-header {
.main-header-right {
margin: 0;
}
.vertical-menu-main .mega-menu {
width: 1050px !important;
max-width: 1050px !important;
left: -80px !important;
}
}
.page-body-wrapper {
width: 1280px;
box-shadow: 1px 3px 25px rgba(0, 0, 0, 0.07);
.learning-comment{
margin-left: -14px !important;
float: left !important;
}
.todo {
.todo-list-wrapper{
#todo-list{
li{
.task-responsive {
min-width: 1087px;
overflow: auto;
}
}
}
}
}
.browse{
div[class^="col-"]{
&:nth-child(3) {
margin-top: 30px;
}
}
}
.current-progress{
table{
tbody{
tr {
td{
&:last-child {
width: 147px;
}
}
}
}
}
}
.server-chart {
#latency-chart {
width: 497px;
}
}
.active-order-table{
max-width: 443px;
overflow: auto;
table{
tbody{
tr{
td{
p {
width: 100px;
}
}
}
}
}
}
.activity{
.media{
.gradient-round{
&.gradient-line-1{
&:after {
height: 57px;
bottom: -64px;
}
}
&.small-line{
&:after{
height: 36px;
bottom: -43px;
}
}
&.medium-line{
&:after{
height: 40px;
bottom: -48px;
}
}
}
}
}
margin: 0 auto;
footer {
width:1025px;
margin:0 auto;
right:0;
padding-right:15px;
margin-left: 255px;
width:1280px;
margin:0 auto;
padding-left:15px;
margin-bottom:40px !important;
position:fixed;
left:50%;
transform:translate(-50%, 0);
z-index:3;
}
.footer-fix{
margin-left: 567px;
}
.chat-box {
.chat-history {
.call-content {
display: flex;
align-items: center;
justify-content: center;
min-width: 300px;
> div {
z-index: 8;
background-color: rgba(255, 255, 255, 0.75);
background-blend-mode: overlay;
width: 100%;
padding: 30px;
left: 15px;
}
button {
width: 40%;
font-size: 14px;
margin: 0 auto;
}
}
.call-icons {
margin-top: 20px;
margin-bottom: 20px;
ul {
li {
border: 1px solid #717171;
width: 50px;
height: 50px;
padding: 8px;
}
}
}
.receiver-img {
margin-top: 30px;
margin-bottom: 30px;
img {
width: 38%;
}
}
.total-time {
h2 {
font-size: 28px;
color: #717171;
}
}
}
}
canvas{
&#myLineCharts{
width: 100%;
}
}
.chat-right-aside {
flex: 0 0 60%;
max-width: 60%;
overflow: hidden;
}
.caller-img {
position: absolute;
width: 100%;
max-width: 100%;
left: 15px;
img {
opacity: 0.7;
}
}
.browser-widget{
img{
height: 65px;
}
}
.weather-widget-two{
.bottom-whetherinfo {
.whether-content{
top: 39px;
}
}
}
.custom-card {
.card-header{
img{
margin-top: -73px;
}
}
.card-profile {
img {
height: 130px;
top: -17px;
}
}
}
.select2{
width: 901.781px;
}
}
.page-main-header {
max-width: 1280px;
margin: 0 auto;
left: 0;
right: 0;
transition: $sidebar-transition;
&.open{
padding-left: 0;
transition: $sidebar-transition;
}
}
.page-builder {
.ge-canvas.ge-layout-desktop {
margin-top: 50px;
}
.ge-addRowGroup {
margin-bottom: 10px;
}
}
.pricing-wrapper-card {
padding: 50px 20px;
}
.card {
.blog-box {
&.blog-grid {
&.set-min-height {
min-height: 400px;
}
}
}
}
.flot-chart-placeholder {
&#donut-color-chart-morris-daily {
min-height: 430px;
}
}
.flot-chart-placeholder {
&#donut-color-chart-morris {
min-height: 430px;
}
}
.box-col-12 {
flex: 0 0 100%;
max-width: 100%;
}
.box-col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.box-col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.box-col-7 {
flex: 0 0 60%;
max-width: 60%;
}
.box-col-5 {
flex: 0 0 40%;
max-width: 40%;
}
.box-col-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%;
}
.box-col-4 {
flex: 0 0 33.33%;
max-width: 33%;
}
.chat-box {
.chat-right-aside {
.chat {
.chat-header {
.chat-menu-icons {
li {
a {
i {
font-size: 19px;
}
}
}
}
}
}
flex: 0 0 100%;
max-width: calc(100% - 15px);
overflow: hidden;
&.bitcoin-chat{
max-width: 100%;
}
}
.toogle-bar {
display:inline-block;
margin-right:0 !important;
}
}
.chat-menu {
right:0;
border-top:1px solid $light-gray;
opacity:0;
transform:translateY(-30px);
visibility:hidden;
top:81px;
position:absolute;
z-index:9;
background-color:$light-background;
transition:all linear 0.3s;
}
.chat-menu.show {
opacity:1;
visibility:visible;
transform:translateY(0px);
transition:all linear 0.3s;
padding-bottom:25px;
}
.ct-10.total-chart{
.ct-chart-bar{
.ct-series{
.ct-bar{
stroke-width:23px !important;
}
}
}
}
.email-wrap {
.email-body {
.email-compose {
.cke_contents{
&.cke_reset{
max-height:165px;
}
}
}
}
.email-right-aside{
.email-body {
.inbox{
height: 644px;
}
}
}
.email-content {
.email-top{
.user-emailid{
&:after{
right: -10px;
}
}
}
}
}
.todo {
.notification-popup{
right: 320px;
}
}
.touchspin{
padding: 0 10px;
}
.vertical-menu-main {
width: 1280px;
margin: 0 auto;
left: 0;
right: 0;
.mega-menu {
width: 1050px !important;
max-width: 1050px !important;
left: -320px !important;
}
}
.comingsoon {
video{
min-width: 67%;
width: 67%;
}
}
.auth-bg-effect {
.second-effect {
left: 55%;
}
}
.auth-bg-video{
video{
min-width: 67%;
width: 67%;
}
}
// search //
.search-page {
.search-vid-block {
> div{
margin-top: 30px;
}
}
}
}
}
}
/**=====================
63. Box-layout CSS ends
==========================**/

48
public/assets/scss/theme/_breadcrumb.scss Normal file
View File

@@ -0,0 +1,48 @@
/**=====================
57. breadcrumb CSS Start
==========================**/
.breadcrumb-colored{
padding: 12px 16px;
border-radius: 4px;
li{
a{
color: $breadcrumb-ancher-color;
}
&.active{
color: $breadcrumb-ancher-color;
opacity:0.7;
}
}
.breadcrumb-item{
&:before{
color: $breadcrumb-ancher-color;
}
}
.breadcrumb-item.txt-dark{
&:before{
color: $breadcrumb-ancher-dark-color;
}
}
}
.breadcrumb-icon {
--bs-breadcrumb-divider: '>';
li {
display: inline-block;
}
}
.breadcrumb-no-divider {
--bs-breadcrumb-divider: '';
}
.breadcrumb-item{
&.active{
text-transform: capitalize;
}
}
/**=====================
57. breadcrumb CSS ends
==========================**/

364
public/assets/scss/theme/_buttons.scss Normal file
View File

@@ -0,0 +1,364 @@
/**=====================
06. Button CSS start
==========================**/
@mixin btn-gradien($deg,$leftcolor,$leftcolor-per,$rightcolor,$rightcolor-per,$font-color){
background-image: linear-gradient(to right,$leftcolor 0%,$rightcolor 51%,$leftcolor 100%);
border:none;
color:$font-color;
background-size: auto 200%;
transition: all 0.3s ease;
}
@mixin btn-squre($border-radius){
border-radius:$border-radius+px;
}
@mixin btn-pill($border-radius){
border-radius:$border-radius+px;
}
@mixin btn-pill-first($radius){
border-radius: $radius+px 0 0 $radius+px;
}
@mixin btn-pill-last($radius){
border-radius: 0 $radius+px $radius+px 0;
}
.btn{
font-size: $btn-font-size;
padding: $btn-padding;
font-weight:600;
}
.btn-lg{
font-size: $btn-lg-font-size;
}
.btn-sm{
font-size: $btn-sm-font-size;
}
.btn-xs {
padding: $btn-xs-padding;
font-size: $btn-xs-font-size;
}
.large-btn{
.btn{
margin-right: 5px;
margin-bottom: 15px;
}
margin-bottom: -20px;
}
// outline buttons//
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.btn-air-#{$btn-name}{
box-shadow: 0 5px 10px 2px rgba($primary-color,0.19) !important;
&:hover,&:active,&:not([disabled]):not(.disabled):active{
background-color: darken( $btn-color, 10% );
border-color: darken( $btn-color, 10% );
}
}
}
.btn-info{
color: $white;
}
// forms //
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.input-air-#{$btn-name}{
box-shadow: 0 3px 5px 1px rgba(88,103,221,.15)!important;
&:focus{
border-color:$btn-color;
}
}
}
//input background //
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.form-bg-#{$btn-name}{
background:$btn-color;
border-color:$btn-color;
@if($btn-name == light){
color:$dark-color;
}
@else{
color: $white;
}
&:focus{
border-color:$btn-color;
background:$btn-color;
@if($btn-name == light){
color:$dark-color;
}
@else{
color: $white;
}
&:active{
border-color:$btn-color;
background:$btn-color;
@if($btn-name == light){
color:$dark-color;
}
@else{
color: $white;
}
}
}
}
}
.btn-warning{
color: $white;
&:hover,
&.disabled{
color: $white;
}
}
.btn-primary-gradien{
@include btn-gradien(60,lighten($primary-color,8%),0%,darken($primary-color,8%),100%,$white);
&:hover {
color: $theme-body-font-color !important;
}
&:focus,&:active,&.active{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($primary-color,8%),0%,darken($primary-color,8%),100%,$white) !important;
}
}
.btn-secondary-gradien{
@include btn-gradien(60,lighten($secondary-color,8%),0%,darken($secondary-color,8%),100%,$white);
&:hover,&:focus,&:active,&.active,&.hover{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($secondary-color,8%),0%,darken($secondary-color,8%),100%,$white) !important;
}
}
.btn-success-gradien{
@include btn-gradien(60,lighten($success-color,8%),0%,darken($success-color,8%),100%,$white);
&:hover,&:focus,&:active,&.active,&.hover{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($success-color,8%),0%,darken($success-color,8%),100%,$white) !important;
}
}
.btn-danger-gradien{
@include btn-gradien(60,lighten($danger-color,8%),0%,darken($danger-color,8%),100%,$white);
&:hover,&:focus,&:active,&.active,&.hover{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($danger-color,8%),0%,darken($danger-color,8%),100%,$white) !important;
}
}
.btn-warning-gradien{
@include btn-gradien(60,lighten($warning-color,8%),0%,darken($warning-color,8%),100%,$white);
&:hover,&:focus,&:active,&.active,&.hover{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($warning-color,8%),0%,darken($warning-color,8%),100%,$white) !important;
}
}
.btn-info-gradien{
@include btn-gradien(60,lighten($light-font,8%),0%,darken($light-font,8%),100%,$white);
&:hover,&:focus,&:active,&.active,&.hover{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($light-font,8%),0%,darken($light-font,8%),100%,$white) !important;
}
}
.btn-light-gradien{
@include btn-gradien(60,lighten($light-gray,8%),0%,darken($light-gray,8%),100%,$white);
&:hover,&:focus,&:active,&.active,&.hover{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($light-gray,8%),0%,darken($light-gray,8%),100%,$white) !important;
}
}
.btn-dark-gradien{
@include btn-gradien(60,lighten($dark-color,8%),0%,darken($dark-color,8%),100%,$white);
&:hover,&:focus,&:active,&.active,&.hover{
transition: 1.5s;
background-position: right center;
background-image: linear-gradient(to right, lighten($dark-color,8%),0%,darken($dark-color,8%),100%,$white) !important;
}
}
[class*='-gradien']{
&:hover{
background-size: 50% 100%;
transition: all 0.3s ease;
color: $white;
}
}
.btn-square{
@include btn-squre(0);
}
.btn-pill{
@include btn-squre(60);
}
.btn-group-pill {
.btn{
&:first-child{
@include btn-pill-first(60);
}
&:last-child{
@include btn-pill-last(60);
}
}
}
.btn-group-square{
.btn{
&:first-child{
@include btn-pill-first(0);
}
&:last-child{
@include btn-pill-last(0);
}
}
}
.btn-showcase{
.btn{
margin-bottom: 10px;
margin-right: 18px;
}
margin-bottom:-10px;
}
.btn-dropdown-showcase{
.dropdown{
margin-bottom: 10px;
margin-right: 18px;
}
.btn-group{
margin-bottom: 10px;
margin-right: 18px;
}
margin-bottom:-10px;
}
.btn-group{
.radio{
label{
&::before{
top: 2px;
}
&::after{
top: 7px;
}
}
}
.checkbox{
label{
margin-top: 3px;
}
}
}
.btn-group-showcase{
>div{
margin-bottom: -20px;
label{
margin-bottom: 0;
}
}
.btn-group{
margin-right: 20px;
margin-bottom: 20px;
}
.checkbox {
input[type="checkbox"] {
display: none;
}
}
}
.tooltiptext {
visibility: visible;
width: 120px;
background-color: #555;
color: $white;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 1;
transition: opacity 0.3s;
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left:-5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
}
.topright-general{
width:20px;
height:20px;
border-radius:50%;
display:inline-grid;
align-items:center;
justify-content:center;
&:before{
transform:rotate(45deg);
}
}
.toprightarrow-primary{
color:$primary-color;
background-color: rgba($primary-color,0.1);
@extend .topright-general ;
}
.toprightarrow-secondary{
color:$secondary-color;
background-color: rgba($secondary-color,0.1);
@extend .topright-general ;
}
.btn-arrow{
font-size:12px;
font-weight:700;
display:flex;
align-items:center;
margin-left:auto;
margin-right:auto;
width: fit-content;
margin-left: auto;
margin-right:auto;
&.arrow-primary{
color:$primary-color ;
}
&.arrow-secondary{
color:$secondary-color ;
}
}
.btn-iconsolid{
border-radius:5px;
background-color:$primary-color;
padding:8px 12px;
i{
color:$white;
font-weight:700;
}
}
/**=====================
06. Button CSS end
==========================**/

726
public/assets/scss/theme/_calendar.scss Normal file
View File

@@ -0,0 +1,726 @@
/**=====================
66. FullCalendar CSS Start
==========================**/
%calander-mixin1 {
position: absolute;
top: 0;
left: 0;
right: 0;
}
%calander-mixin2 {
border: 1px solid;
vertical-align: top;
}
%calander-mixin3 {
border-color: $transparent-color;
}
.calendar-wrap {
.fc-scroller {
margin-right: -17px;
}
.fc-events-container{
margin-top: 55px;
}
.checkbox {
label{
margin-top: 20px;
margin-bottom: 0;
}
}
.basic-calendar {
.external-events {
.fc-event {
cursor: pointer;
&+ .fc-event{
margin-top: 20px;
}
}
}
}
.fc {
direction: ltr;
text-align: left;
button {
margin: 0 5px !important;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
.fc-icon {
position: relative;
top: .05em;
margin: 0 .1em;
display: inline-block;
font-size: 2em;
line-height: .5em;
height: .5em;
}
}
button{
&::-moz-focus-inner {
margin: 0;
padding: 0;
}
}
table {
width: 100%;
table-layout: fixed;
}
th {
text-align: center;
@extend %calander-mixin2;
}
td {
@extend %calander-mixin2;
}
.fc-axis {
vertical-align: middle;
padding: 0 15px;
white-space: nowrap;
}
.fc-toolbar > * {
> * {
float: left;
margin-left: .75em;
}
> :first-child {
margin-bottom: 0;
margin-left: 0;
font-size: 24px;
text-transform: uppercase;
font-weight: 600;
font-family: $font-rubik, $font-serif;
}
}
}
.fc-rtl {
text-align: right;
.fc-day-grid-event {
&.fc-not-end {
}
&.fc-not-start {
}
.fc-resizer {
left: -3px;
cursor: w-resize;
}
}
.fc-popover .fc-header {
.fc-close {
float: left;
}
.fc-title {
float: right;
}
}
.fc-basic-view .fc-day-number {
text-align: left;
}
.fc-time-grid .fc-event-container {
margin: 0 2px 0 2.5%;
}
}
.fc-unthemed {
.fc-popover {
border-color: $light-gray;
background-color: $white;
border-width: 1px;
border-style: solid;
.fc-header {
background: $light-gray;
}
}
.fc-row {
border-color: $light-gray;
}
hr {
border-color: $primary-color;
background: $light-gray;
margin: 0;
}
tbody {
border-color: $light-gray;
}
td {
border-color: $light-gray;
}
th {
border-color: $light-gray;
}
thead {
border-color: $light-gray;
}
.fc-today {
background: $primary-color;
opacity: 0.1;
}
}
.fc-highlight {
background: $success-color;
opacity: .3;
filter: alpha(opacity=30);
}
.fc-bgevent {
background: $secondary-color;
opacity: .3;
filter: alpha(opacity=30);
}
.fc-nonbusiness {
background: $light-gray;
}
.fc-state-active {
background-color: $primary-color !important;
border:1px solid $primary-color !important;
color:$white;
}
.fc-state-down {
color: $theme-font-color;
background-color: $white;
//@extend %calander-mixin1;
}
.fc-state-hover {
color: $theme-font-color;
background-color: $white;
text-decoration: none;
background-position: 0 -15px;
transition: background-position .1s linear;
}
.fc-button-group {
display: inline-block;
}
.fc-today-button {
font-size: 14px!important;
text-transform: capitalize!important;
font-weight: bold;
}
.fc-popover {
position: absolute;
box-shadow: 0 2px 6px $theme-font-color;
.fc-header {
padding: 8px 4px;
.fc-title {
margin: 0 2px;
}
.fc-close {
cursor: pointer;
}
}
> .ui-widget-header + .ui-widget-content {
border-top: 0;
}
}
.fc-ltr {
.fc-day-grid-event {
.fc-resizer {
right: -3px;
cursor: e-resize;
}
}
.fc-axis {
text-align: right;
font-weight:600;
}
.fc-popover .fc-header {
.fc-title {
float: left;
}
.fc-close {
float: right;
}
}
.fc-basic-view .fc-day-number {
text-align: right;
font-family: $font-rubik, $font-serif;
}
.fc-time-grid .fc-event-container {
margin: 0 2.5% 0 2px;
}
}
.fc-clear {
clear: both;
}
.fc-bg {
@extend %calander-mixin1;
bottom: 0;
table {
height: 100%;
}
}
.fc-bgevent-skeleton {
@extend %calander-mixin1;
}
.fc-helper-skeleton {
@extend %calander-mixin1;
}
.fc-highlight-skeleton {
@extend %calander-mixin1;
}
.fc-row {
position: relative;
table {
border-left: 0 hidden $transparent-color;
border-right: 0 hidden $transparent-color;
border-bottom: 0 hidden $transparent-color;
}
.fc-bg {
z-index: 1;
}
.fc-bgevent-skeleton {
bottom: 0;
z-index: 2;
table {
height: 100%;
}
td {
border-color: $transparent-color;
}
}
.fc-highlight-skeleton {
bottom: 0;
z-index: 3;
table {
height: 100%;
}
td {
border-color: $transparent-color;
}
}
.fc-content-skeleton {
position: relative;
z-index: 4;
padding-bottom: 2px;
td {
@extend %calander-mixin3;
}
tbody td {
border-top: 0;
}
}
.fc-helper-skeleton {
z-index: 5;
td {
@extend %calander-mixin3;
}
tbody td {
border-top: 0;
}
}
&.fc-rigid {
overflow: hidden;
.fc-content-skeleton {
@extend %calander-mixin1;
}
}
&:first-child table {
border-top: 0 hidden $transparent-color;
}
}
.fc-scroller {
overflow-y: scroll;
overflow-x: hidden;
> * {
position: relative;
width: 100%;
overflow: hidden;
}
}
.fc-event {
position: relative;
display: block;
font-size: 12px;
line-height: 1;
border-radius: 4px;
border: 1px solid $primary-color;
background-color: $primary-color;
color: $white !important;
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
padding: 10px;
&:hover {
text-decoration: none;
}
&.fc-draggable {
cursor: pointer;
}
}
.ui-widget {
.fc-event {
color: $black;
text-decoration: none;
}
td.fc-axis {
font-weight: 400;
}
}
.fc-event[href] {
cursor: pointer;
}
.fc-not-allowed {
cursor: not-allowed;
.fc-event {
cursor: not-allowed;
}
}
.fc-day-grid-event {
padding: 9px 6px;
width: 90%;
.fc-time {
font-weight: 700;
}
.fc-resizer {
position: absolute;
top: 0;
bottom: 0;
width: 7px;
}
> .fc-content {
white-space: nowrap;
overflow: hidden;
}
}
.fc-limited {
display: none;
}
.fc-more-popover {
z-index: 2;
width: 220px;
.fc-event-container {
padding: 10px;
}
}
.fc-toolbar {
text-align: center;
margin-bottom: 1em;
.fc-left,.fc-right {
.fc-prev-button,.fc-next-button,.fc-today-button {
background-color: transparent;
padding: 4px 10px;
}
.fc-prev-button{
.fc-icon-left-single-arrow{
&:after{
font-size: 14px;
content: "\e64a";
font-family: $font-themify;
color: $theme-body-sub-title-color;
}
}
}
.fc-next-button{
.fc-icon-right-single-arrow{
&:after{
font-size: 14px;
content: "\e649";
font-family: $font-themify; color: $theme-body-sub-title-color;
}
}
}
float: left;
display: flex;
}
.fc-left{
.fc-button-group{
.fc-month-button{
margin-left: 0!important;
}
}
}
.fc-right {
float: right;
}
.fc-center {
display: inline-block;
margin-top: 8px;
}
button {
position: relative;
color: $primary-color;
&:focus {
z-index: 5;
}
&:hover{
background-color:$primary-color !important;
color: $white !important;
}
}
.fc-state-hover {
z-index: 2;
}
.ui-state-hover {
z-index: 2;
}
.fc-state-down {
z-index: 3;
}
.fc-state-active {
z-index:4;
color:$white;
}
.ui-state-active {
z-index: 4;
}
}
.fc-view-container {
* {
box-sizing: content-box;
font-family:$font-rubik, $font-serif;
}
:after {
box-sizing: content-box;
}
:before {
box-sizing: content-box;
}
}
.fc-view {
position: relative;
z-index: 1;
> table {
position: relative;
z-index: 1;
}
}
.fc-basic-view {
.fc-day-number {
padding: 0 10px !important;
}
.fc-week-number {
padding: 0 10px;
text-align: center;
span {
display: inline-block;
min-width: 1.25em;
}
}
td {
&.fc-day-number {
padding-top: 10px;
padding-bottom: 10px;
}
&.fc-week-number span {
padding-top: 10px;
padding-bottom: 10px;
}
}
tbody .fc-row {
min-height: 4em;
}
}
.fc-time-grid {
position: relative;
z-index: 1;
min-height: 100%;
table {
border: 0 hidden $transparent-color;
}
.fc-slats {
position: relative;
z-index: 2;
}
> hr {
position: relative;
z-index: 2;
}
.fc-bgevent-skeleton {
z-index: 3;
}
.fc-content-skeleton {
z-index: 5;
}
.fc-highlight-skeleton {
z-index: 4;
}
.fc-helper-skeleton {
z-index: 6;
}
.fc-highlight-container {
position: relative;
}
.fc-highlight {
position: absolute;
left: 0;
right: 0;
}
.fc-bgevent-container {
position: relative;
}
.fc-event-container {
position: relative;
}
.fc-bgevent {
position: absolute;
z-index: 1;
left: 0;
right: 0;
}
.fc-event {
position: absolute;
z-index: 1;
}
> .fc-bg {
z-index: 1;
}
}
.fc-time-grid-container {
position: relative;
z-index: 1;
}
.fc-slats {
td {
height: 1.5em;
border-bottom: 0;
}
.ui-widget-content {
background: 0 0;
}
.fc-minor td {
border-top-style: dotted;
}
}
.fc-time-grid-event {
overflow: hidden;
&.fc-not-start {
border-top-width: 0;
padding-top: 1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
&.fc-not-end {
border-bottom-width: 0;
padding-bottom: 1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.fc-time {
padding: 0 1px;
font-size: .85em;
white-space: nowrap;
}
.fc-title {
padding: 0 1px;
}
.fc-bg {
z-index: 1;
background: $white;
opacity: .25;
filter: alpha(opacity=25);
}
&.fc-short {
.fc-content {
white-space: nowrap;
}
.fc-time {
display: inline-block;
vertical-align: top;
span {
display: none;
}
&:before {
content: attr(data-start);
}
&:after {
content: "\000A0-\000A0";
}
}
.fc-title {
display: inline-block;
vertical-align: top;
font-size: .85em;
padding: 0;
}
}
.fc-resizer {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
height: 8px;
overflow: hidden;
line-height: 8px;
font-size: 11px;
text-align: center;
cursor: s-resize;
&:after {
content: "=";
}
}
> .fc-content {
position: relative;
z-index: 2;
}
}
.fc-icon-left-single-arrow:after {
content: "\02039";
font-weight: 700;
}
.fc-icon-right-single-arrow:after {
content: "\0203A";
font-weight: 700;
}
.fc-icon-left-double-arrow:after {
content: "\000AB";
}
.fc-icon-right-double-arrow:after {
content: "\000BB";
}
.fc-icon-x:after {
content: "\000D7";
}
a.fc-more {
font-size: .85em;
cursor: pointer;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.fc-day-grid .fc-row {
z-index: 1;
}
.fc-basicDay-view .fc-content-skeleton {
padding-top: 1px;
padding-bottom: 1em;
}
.fc-basicWeek-view .fc-content-skeleton {
padding-top: 1px;
padding-bottom: 1em;
}
.fc-day-number.fc-other-month {
opacity: .3;
filter: alpha(opacity=30);
}
.fc-agenda-view .fc-day-grid {
position: relative;
z-index: 2;
.fc-row {
min-height: 3em;
.fc-content-skeleton {
padding-top: 1px;
padding-bottom: 1em;
}
}
}
}
/**=====================
66. FullCalendar CSS End
==========================**/

302
public/assets/scss/theme/_card.scss Normal file
View File

@@ -0,0 +1,302 @@
/**=====================
03. Card CSS Start
==========================**/
//Card css
.card{
margin-bottom: $card-margin-bottom;
border: 1px solid $light-gray;
transition: all 0.3s ease;
letter-spacing: 0.5px;
border-radius: $card-border-radious;
background-color: $white;
.card-header{
padding:$card-padding;
border-bottom:none;
border-top-left-radius: $card-border-radious;
border-top-right-radius: $card-border-radious;
position: relative;
background-color: $white;
&.card-no-border {
border-bottom: none !important;
}
h4{
font-size:24px;
font-weight:500;
}
h5{
font-size: 22px;
font-weight: 500;
&:not(.mb-0){
margin-bottom: 0;
text-transform: $card-header-font-transform;
font-weight: $card-header-font-weight;
line-height: 1.3;
color: $dark-color;
}
}
> span{
font-size: $card-header-span-size;
color: $card-header-span-color;
margin-top: 5px;
display: block;
letter-spacing: 1px;
}
&.bg-primary,&.bg-secondary,&.bg-success,&.bg-danger,&.bg-warning{
h4{
color:$white;
}
h5{
color:$white;
}
>span{
color:$white;
}
}
}
.card-body{
padding: $card-padding;
background-color: $card-body-bg-color;
p{
&:last-child{
margin-bottom: 0;
}
}
&.bg-primary,&.bg-secondary,&.bg-success,&.bg-danger,&.bg-warning{
p{
color:$white;
}
}
}
.sub-title{
border-bottom:1px solid rgba($primary-color,0.2);
padding-bottom:5px;
margin-bottom:8px;
font-size:18px;
}
.card-footer{
background-color: $card-body-bg-color;
border-top: $card-border-color;
padding: $card-padding;
border-bottom-left-radius: $card-border-radious;
border-bottom-right-radius: $card-border-radious;
&.bg-primary,&.bg-secondary,&.bg-success,&.bg-danger,&.bg-warning{
color:$white;
}
}
}
.setting-list{
border-radius:0 0 0 7px;
position:absolute;
right:20px;
top:22px;
display: inline-block;
float :right;
z-index:1;
background-color: $white;
.setting-option{
text-align:right;
width:35px;
height:35px;
overflow:hidden;
transition:0.3s ease-in-out;
li{
display: inline-block;
&:first-child {
i {
// font-size: 18px;
&.icon-angle-double-right{
font-size:14px;
}
}
}
}
&.open-setting{
width:190px;
}
&.setting-vertical{
text-align:center;
height:40px;
// .setting-list .setting-option li:first-child i.icon-angle-double-right
li{
display:block;
margin:5px 0;
&:first-child {
i.icon-angle-double-right{
transform:rotate(90deg);
}
}
}
&.open-setting{
height:170px;
width:35px;
}
}
}
i{
margin: 0 5px;
cursor: pointer;
line-height: 20px;
&.icofont-refresh{
font-size: 13px;
}
}
}
.card{
&.card-load {
.card-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
background-color: rgba(255, 255, 255, 0.7);
z-index: 8;
align-items: center;
justify-content: center;
i{
margin: 0 auto;
color: $primary-color;
font-size: 20px;
}
}
}
}
.card{
&.full-card {
position: fixed;
top: 0;
z-index: 99999;
box-shadow: none;
right: 0;
border-radius: 0;
border: 1px solid $light-semi-gray;
width: calc(100vw - 12px);
height: calc(100vh);
.card-body {
overflow: auto;
}
}
}
.card-absolute{
margin-top: 20px;
.card-header{
position: absolute;
top: -20px;
margin-bottom: 30px;
left: 15px;
border-radius: 0.25rem;
padding: 10px 15px;
h5{
font-size: 17px;
&.text-white {
-webkit-text-fill-color: $white;
}
}
}
.card-body{
margin-top: 10px;
}
}
.card-header{
.border-tab{
margin-bottom: -13px;
}
}
.custom-card{
overflow:hidden;
padding:30px;
.card-header{
padding:0;
img{
// border-radius: 50%;
// margin-top: -100px;
transform: scale(1.5);
}
}
.card-profile{
text-align: center;
img{
height:110px;
padding:7px;
background-color:$light-background;
z-index: 1;
position: relative;
}
}
.card-social{
text-align: center;
padding-top:15px;
padding-bottom:15px;
li{
display:inline-block;
&:nth-child(n+2){
margin-left:10px;
}
a{
width: 35px;
height: 35px;
border-radius: 5px;
background-color: rgba($primary-color,0.1);
transition: all 0.3s ease;
color: $primary-color;
display: flex;
align-items: center;
justify-content: center;
}
&:hover{
a{
background-color:$primary-color;
color: $white;
}
}
}
}
.profile-details{
h4{
font-weight:600;
color: $theme-body-font-color;
}
h6{
margin-bottom: 30px;
margin-top: 10px;
color:$light-text;
font-size: 14px;
}
}
.card-footer{
padding: 0;
> div{
+div{
border-left: 1px solid $light-semi-gray;
}
padding: 15px;
text-align: center;
h3{
margin-bottom: 0;
font-size:20px;
font-weight: 600;
}
h6{
font-size: 13px;
color: $light-text;
}
i{
font-size: 24px;
display: inline-block;
margin-bottom: 15px;
}
.m-b-card{
margin-bottom: 10px;
}
}
}
}
/**=====================
03. Card CSS End
==========================**/

36
public/assets/scss/theme/_cart.scss Normal file
View File

@@ -0,0 +1,36 @@
/**=====================
82. cart CSS start
==========================**/
.cart{
.total-amount{
text-align: right!important;
margin-top: 30px;
}
.amount-space{
margin-left: 40px;
}
.cart-btn-transform{
text-transform: capitalize;
}
.qty-box{
width: 25%;
margin: 0 auto;
.input-group {
.btn {
background-color: #ddd !important;
border-color: #ddd !important;
padding: 5px 12px;
}
}
}
}
.cart-buttons{
margin-top: 30px;
.cart-btn{
float: right;
padding-right: 85px;
}
}
/**=====================
82. cart CSS Ends
==========================**/

308
public/assets/scss/theme/_chart.scss Normal file
View File

File diff suppressed because one or more lines are too long

497
public/assets/scss/theme/_chat.scss Normal file
View File

@@ -0,0 +1,497 @@
/**=====================
14. Chat CSS Start
==========================**/
.chat-box {
.chat-menu{
max-width:340px;
}
.people-list {
.search{
position: relative;
.form-control{
border: 1px solid $light-gray;
&::placeholder{
color: $semi-dark;
}
}
i {
position: absolute;
right: 10px;
top: 10px;
font-size: 14px;
color: $light-gray;
}
}
ul {
padding: 0;
li {
padding-bottom: 20px;
&:last-child{
padding-bottom: 0;
}
}
}
}
.user-image {
float: left;
width: 52px;
height: 52px;
margin-right : 5px;
}
.about {
float:left;
margin-top:5px;
padding-left:10px;
.name {
color: $dark-color;
letter-spacing: 1px;
font-weight: 600;
}
}
.status {
color: $light-text;
letter-spacing:1px;
font-size: 12px;
margin-top: 5px;
.chat-status{
font-weight:600;
color: $theme-body-font-color;
}
p{
font-size:14px;
}
}
.chat-right-aside{
.chat {
.chat-header{
padding:15px;
border-bottom:1px solid $light-gray ;
img {
float:left;
width:50px;
box-shadow:1px 1px 4px 1px $light-gray;
}
.chat-menu-icons{
margin-top:15px;
margin-left:auto;
display:flex;
justify-content:flex-end;
li{
margin-right:unset;
a i{
color: $theme-body-sub-title-color;
font-size: 25px;
cursor: pointer;
}
&:nth-child(n+2){
margin-left: 24px;
}
}
}
}
.chat-msg-box {
padding: 20px;
overflow-y: auto;
height: 560px;
margin-bottom: 90px;
.chat-user-img{
margin-top: -35px;
}
.message-data {
margin-bottom: 10px;
}
.message-data-time {
letter-spacing: 1px;
font-size: 12px;
color:$semi-dark;
font-weight:600;
}
.message {
color: $light-text;
padding: 20px;
line-height: 1.9;
letter-spacing: 1px;
font-size: 14px;
margin-bottom: 30px;
width: 50%;
position: relative;
}
.my-message {
border:1px solid $light-gray;
border-radius: 10px;
border-top-left-radius: 0;
}
.other-message {
border:1px solid $light-gray;
border-radius: 10px;
border-top-right-radius: 0;
}
}
.chat-message {
padding: 20px;
border-top: 1px solid $light-body-bg-color;
position: absolute;
width: calc(100% - 15px);
// background-color: $white;
bottom: 0;
.smiley-box{
background: $light-semi-gray;
padding: 10px;
display: block;
border-radius: 4px;
margin-right: 0.5rem;
}
.text-box{
position: relative;
.input-txt-bx {
height: 50px;
border: 2px solid $primary-color;
padding-left: 18px;
font-size: 12px;
letter-spacing: 1px;
}
i{
position: absolute;
right: 20px;
top: 20px;
font-size: 20px;
color: $light-gray;
cursor: pointer;
}
.btn{
font-size: 16px;
font-weight: 500;
}
}
}
}
}
.chat-menu {
right:10px;
opacity:0;
transform:translateY(-30px);
visibility:hidden;
top:95px;
position:absolute;
z-index: 9;
background-color: $white;
border: 1px solid $light-gray;
transition: all linear 0.3s;
padding-right: unset;
.tab-pane {
padding: 0 15px;
}
ul{
li{
.about{
.status{
i{
font-size: 10px;
}
}
}
}
}
.user-profile {
margin-top: 30px;
.user-content{
h5{
margin:15px 0;
font-weight:600;
}
p{
font-size:14px;
}
.social-list{
li{
display: inline-block;
a{
width:30px;
height:30px;
border-radius:5px;
background-color: rgba($primary-color,0.08);
color: $primary-color;
display: flex;
align-items: center;
justify-content: center;
}
&:hover{
a{
background-color:$primary-color;
color:$white;
}
}
&:nth-child(n+2){
margin-left:5px;
}
}
}
}
.image {
position: relative;
.icon-wrapper {
position:absolute;
bottom:0;
left:55%;
display:flex;
justify-content:center;
align-items:center;
height:30px;
width:30px;
border-radius:50%;
background-color: $white;
cursor:pointer;
overflow:hidden;
margin:0 auto;
font-size:14px;
box-shadow:1px 1px 3px 1px $light-gray;
i{
color:$primary-color;
}
}
.avatar {
width:80px;
height:80px;
border-radius:50%;
overflow:hidden;
margin-left:auto;
margin-right:auto;
img{
width:100%;
height:100%;
border-radius: 50%;
border: 5px solid $light-gray;
}
}
}
.border-right {
border-right: 1px solid $light-gray;
}
.follow {
margin-top:15px;
padding-top:15px;
border-top:1px solid $light-gray ;
.follow-num {
font-size:20px;
color:$black;
font-weight:600;
line-height:1;
}
span {
color: $light-text;
font-size: 14px;
letter-spacing: 1px;
font-weight:600;
}
}
.digits{
border-top:1px solid $light-gray;
margin-top:15px;
padding-top:15px;
p{
margin-bottom:unset;
}
}
.social-media a{
color: $semi-dark;
font-size: 15px;
padding: 0 7px;
}
.chat-profile-contact{
p{
font-size:14px;
color:$light-text;
}
}
}
.nav{
margin-bottom: 20px;
}
.nav-tabs .nav-item {
width:33.33%;
a {
padding: 15px!important;
color: $semi-dark!important;
letter-spacing: 1px;
font-size: 14px;
font-weight: 600;
display:flex;
align-items:center;
justify-content:center;
}
.material-border{
border-width:1px;
border-color:$primary-color;
}
.nav-link.active {
color: $primary-color !important;
}
}
&.show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
transition: all linear 0.3s;
padding-bottom: 25px;
position: absolute;
top: 60px;
}
}
.chat-history{
.call-content {
display: flex;
align-items: center;
justify-content: center;
min-width:300px;
min-height:650px;
height:100%;
>div{
width:100%;
height:100%;
padding:30px;
}
}
.total-time h2 {
font-size: 50px;
font-weight: 700;
margin-bottom: 30px;
color: $light-text;
}
.receiver-img{
margin-top: 55px;
img{
border-radius: 5px;
}
}
.call-icons{
margin-bottom: 35px;
ul{
display: flex;
align-items:center;
justify-content:center;
li {
width: 55px;
height: 55px;
border: 1px solid $light-gray;
border-radius: 50%;
display:flex;
align-items:center;
justify-content:center;
+ li{
margin-left: 10px;
}
a {
color: #999;
font-size: 22px;
}
}
}
}
.caller-img{
height:100%;
}
}
}
.chat-left-aside{
> .media{
margin-bottom: 15px;
}
.people-list{
height: 625px;
}
ul li{
position: relative;
}
}
.status-circle{
width: 12px;
height: 12px;
position: absolute;
top:4px;
left:44px;
border-radius: 50%;
border:2px solid $white;
}
.away{
background-color: $warning-color;
}
.online{
background-color: $success-color;
}
.offline{
background-color: $danger-color;
}
.chat-container{
.aside-chat-left{
width:320px;
}
.chat-right-aside{
width:320px;
}
}
.call-chat-sidebar{
max-width: 320px;
}
.call-chat-sidebar,.chat-body{
.card{
.card-body{
padding: 15px;
margin-bottom: 15px;
}
}
}
.chart-widget{
.chart-widget-top{
h4{
font-weight:600;
}
.num{
i{
margin-left:5px;
}
}
}
}
.apexcharts-menu{
border-color: $light-gray !important;
}
@media(max-width:1660px){
.chat-box {
.chat-right-aside {
.chat{
.chat-message{
// bottom: 25px;
}
}
}
}
}
@media(max-width:1366px){
.chat-box{
.chat-right-aside{
.chat{
.chat-message{
bottom:0;
}
}
}
}
}
@media(max-width:360px){
.chat-box{
.chat-menu{
width:220px;
}
}
}
/**=====================
14. Chat CSS Ends
==========================**/

264
public/assets/scss/theme/_checkout.scss Normal file
View File

@@ -0,0 +1,264 @@
/**=====================
84. Checkout CSS start
==========================**/
.checkout{
label{
color: $dark-color ;
}
.checkout-details {
border: 1px solid $light-gray;
padding: 40px;
.order-place{
margin-top:20px;
}
}
}
.order-box {
.title-box {
padding-bottom:20px;
font-size:22px;
border-bottom:1px solid $light-gray;
span{
width: 35%;
float: right;
font-weight: 600;
text-align: right;
}
h4{
font-weight: 600;
}
.checkbox-title{
display: flex;
justify-content: space-between;
}
}
.sub-total {
li {
position: relative;
display: inline-block;
font-size:16px;
font-weight: 600;
width: 100%;
&:nth-child(n+2){
margin-top:15px;
}
.count {
position:relative;
font-size:18px;
line-height:20px;
width:35%;
float:right;
text-align:right;
}
}
.shipping-class{
margin-bottom: 12px;
padding-bottom: 15px;
border-bottom: 1px solid $light-gray;
.shopping-checkout-option{
margin-top: -4px;
position: relative;
font-size: 18px;
line-height: 20px;
color:$primary-color;
font-weight:400;
width:35%;
float:right;
label{
font-weight:500;
font-size:14px;
text-align:right;
}
}
}
}
.total {
position: relative;
margin-bottom: 30px;
li {
position: relative;
display: block;
line-height: 20px;
font-size: 18px;
}
}
.qty{
position: relative;
border-bottom: 1px solid $light-gray;
margin-bottom: 20px;
padding-bottom: 20px;
padding-top: 20px;
li{
position: relative;
display: block;
font-size: 14px;
font-weight: 500;
&:nth-child(n+2){
margin-top: 15px;
}
span{
float: right;
font-size: 18px;
line-height: 20px;
font-weight: 500;
width:35%;
text-align:right;
}
}
}
}
.radio-option {
position: relative;
}
.img-paypal{
width: 50%;
margin-left: 15px;
}
/**=====================
86. Checkout CSS Ends
==========================**/
/**=====================
Responsive CSS Start
==========================**/
@media screen and (max-width: 1199px) {
.checkout {
.checkout-details{
padding: 25px;
}
}
.order-box {
.title-box {
span{
width: 30%;
}
}
.sub-total {
li {
.count {
width: 30%;
}
}
.shipping-class{
.shopping-checkout-option{
width: 32%;
}
}
}
.qty{
li{
span{
width: 30%;
}
}
}
.total{
li{
.count{
width: 30%;
}
}
}
}
}
@media screen and (max-width: 991px) {
.order-box {
.title-box {
h4{
font-size:18px;
}
span{
font-size:18px;
}
}
.qty {
li{
font-size:14px;
span{
font-size:16px;
}
}
}
.sub-total {
li {
font-size:14px;
.count{
font-size:16px;
}
}
.shipping-class {
.shopping-checkout-option {
width: 30%;
}
}
}
.animate-chk {
label{
font-size:14px;
}
}
}
}
@media screen and (max-width: 575px) {
.order-box {
.title-box{
padding-bottom: 15px;
}
.sub-total {
.shipping-class {
.shopping-checkout-option {
width: 50%;
}
}
li {
.count {
width: 50%;
}
}
}
.animate-chk {
label{
font-size: 12px;
margin-bottom: 10px;
}
}
}
.checkout {
.checkout-details{
padding:20px;
}
}
}
@media screen and (max-width:420px){
.order-box {
.qty {
li {
font-size:13px;
span{
font-size:14px;
}
}
}
.sub-total {
li {
.count{
font-size: 14px;
}
}
}
}
}
/**=====================
84. Checkout CSS ends
==========================**/

222
public/assets/scss/theme/_color.scss Normal file
View File

@@ -0,0 +1,222 @@
// /**=====================
// 07. Color CSS Start
// ==========================**/
// .color-box{
// margin-bottom: -10px;
// button {
// margin-bottom: 10px;
// + button {
// margin-left: 5px;
// }
// }
// }
// // primary Color
// $m-val:13;
// $or: $primary-color;
// @while $m-val >=1 {
// .primary-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, 1.5%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //primary Color
// // secondary Color
// $m-val:13;
// $or: $secondary-color;
// @while $m-val >=1 {
// .secondary-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, 3%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //secondary Color
// //Success Color
// $m-val:13;
// $or:$success-color;
// @while $m-val >=1 {
// .success-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, .9%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //Success Color
// // Info Color
// $m-val:13;
// $or: $light-font;
// @while $m-val >=1 {
// .info-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, 2.5%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //Info Color
// // warning Color
// $m-val:13;
// $or: $warning-color;
// @while $m-val >=1 {
// .yellow-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, 3%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //warning Color
// //Danger Color
// $m-val:13;
// $or:$danger-color;
// @while $m-val >=1 {
// .red-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, 2%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //Danger Color
// //Pink Color
// $m-val:13;
// $or:#e6155e;
// @while $m-val >=1 {
// .pink-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, 3%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //Pink Color
// // Gray Color
// $m-val:13;
// $or: $dark-gray;
// @while $m-val >=1 {
// .gray-color ul li {
// &:nth-child(#{$m-val}) {
// $or: lighten($or, 3%);
// background-color: $or;
// padding: 10px 15px;
// margin-bottom: 10px;
// span:before {
// content: "#{$or}";
// display: block;
// color: $white;
// text-align: center;
// }
// $m-val: $m-val - 1;
// }
// &:last-child {
// margin-bottom: 0;
// }
// }
// }
// //gray Color
// .light-font {
// color: $theme-body-sub-title-color;
// }
// /**=====================
// 07. Color CSS Ends
// ==========================**/

74
public/assets/scss/theme/_comingsoon.scss Normal file
View File

@@ -0,0 +1,74 @@
/**=====================
27. Coming Soon CSS Start
==========================**/
.comingsoon-bgimg{
background: url(../images/other-images/coming-soon-bg.jpg);
background-position: bottom;
background-size:cover;
}
.comingsoon {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 50px 0;
background-color:rgba($primary-color,0.1);
.comingsoon-inner {
h5 {
font-size:22px;
letter-spacing: 1px;
color: $light-text;
font-weight:600;
margin-bottom: 30px;
margin-top:30px;
}
.countdown {
padding: 30px 0;
border-top: 1px solid rgba($primary-color,0.1);
border-bottom: 1px solid rgba($primary-color,0.1);
.time {
display: flex;
justify-content: center;
align-items: center;
border-radius:20px;
color: $white;
font-weight: 500;
width: 100px;
height: 100px;
font-size: 36px;
background: $primary-color;
}
.title {
padding-top: 13px;
font-size: 14px;
font-weight:600;
color: $theme-body-sub-title-color;
text-transform: uppercase;
letter-spacing: 1px;
}
ul li {
display: inline-block;
text-transform: uppercase;
margin: 0 20px;
span {
display: block;
}
}
}
}
video{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
transition: 1s opacity;
}
}
/**=====================
27. Coming Soon CSS Ends
==========================**/

421
public/assets/scss/theme/_contacts.scss Normal file
View File

@@ -0,0 +1,421 @@
/**=====================
86. contacts CSS Start
==========================**/
.alert-contactadd {
background-color: $white;
border: 1px solid var(--theme-deafult);
width: 12%;
padding: 10px;
}
.updateimg {
position: absolute;
left: 15px;
width: 100px;
top: 32px;
line-height: 93px;
opacity: 0;
}
#right-history {
top: 81px;
right: -320px;
height: 100%;
position: fixed;
width: 320px;
z-index: 9;
background-color: $white;
transition: .5s;
box-shadow: 0 0 9px rgba(191, 191, 191, 0.36);
h6 {
span {
a {
color: $theme-body-font-color;
}
}
}
&.show {
right: 0;
transition: .3s;
}
}
.history-details {
>div {
padding: 30px 0;
}
.media {
padding: 30px 15px;
border-top: 1px solid $light-color;
i {
padding: 5px;
background: #fed112;
color: $white;
border-radius: 100%;
}
h6 {
margin-bottom: 5px;
}
}
}
.delete-contact {
display: none;
}
.more-data {
animation: displayTransition 1s;
}
.contact-editform {
padding: 30px;
padding-left:unset;
animation: displayTransition 1s;
a {
display: block;
}
button {
margin-top: 30px;
}
.select2-container {
.select2-selection--single {
height:39px !important;
border-color:$light-gray !important;
background-color: $light-background;
}
}
}
#deletemodal {
.modal-header {
border-bottom: none;
.delete-data {
span {
svg {
vertical-align: middle;
margin-right: 15px;
}
}
}
}
}
.contact-options {
li {
.btn-category {
line-height:39px;
border-radius:3px;
padding-left:40px !important;
padding:0;
color:$primary-color;
font-weight: 500;
}
}
}
.list-persons {
p {
font-family:$font-roboto, $font-serif;
}
.profile-mail {
padding: 30px 0;
.media {
align-items:center;
img {
width:auto;
height:100px;
}
.media-body {
h5 {
margin-bottom:5px;
font-weight:700;
}
ul {
margin-top: 5px;
li {
display: inline-block;
a {
font-size:13px;
font-weight:500;
}
+li {
padding-left: 10px;
margin-left: 5px;
border-left: 2px solid $light-color;
}
}
}
}
}
.email-general {
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid #ddd;
ul {
padding-right: 20px;
li {
color: $dark-gray;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight:500;
&:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
>span {
float: right;
}
}
}
p {
span {
margin-left: 30px;
}
}
.gender {
margin-top: 30px;
}
}
}
}
.contacts-tabs {
.nav-pills {
border-right: 1px solid $light-gray;
height: 100%;
.nav-link,
.show {
&.active,
>.nav-link {
// background-color: rgba($primary-color, 0.05);
background-color:rgba($primary-color,0.1);
color: $theme-body-font-color;
h6{
color:$primary-color;
}
}
}
.nav-link {
color: $theme-body-font-color;
padding: 0;
.media {
.img-50 {
height: 50px;
}
}
+.nav-link {
border-top: 1px solid $light-gray;
}
}
.media {
padding: 20px;
}
}
.tab-content {
.tab-content-child {
animation: displayTransition 1s;
}
}
}
// responsive
@media only screen and (max-width: 991px) {
#right-history {
top: 60px;
}
.updateimg {
top: 21px;
}
.list-persons {
.profile-mail {
padding: 20px;
.email-general {
.gender {
margin-top: 20px;
}
}
}
}
.contact-editform {
button {
margin-top: 20px;
}
}
}
@media only screen and (max-width: 767px) {
.contact-editform {
padding:20px;
&.pl-0 {
padding-left: 20px !important;
}
}
.contacts-tabs {
.nav-pills {
border-right: none;
border-bottom: 1px solid $light-gray;
}
}
}
@media only screen and (max-width: 575px) {
#right-history {
width: 270px;
}
.updateimg {
top: 16px;
left: 29px;
}
.contacts-tabs {
.media {
img {
&.m-r-20 {
margin-right: 15px;
}
}
}
.nav-pills {
.media {
padding: 15px;
}
}
}
.list-persons {
.profile-mail {
padding: 15px;
.media {
img{
height:80px;
width:80px !important;
}
}
.email-general {
.gender {
margin-top: 15px;
}
ul {
padding-right: unset;
li{
font-size:12px;
}
}
}
}
.nav-pills {
.nav-link {
.media {
.media-body {
text-align: left;
}
}
}
}
}
.contact-editform {
padding: 15px;
button {
margin-top: 15px;
}
&.pl-0 {
padding-left: 15px !important;
}
}
.contact-editform,
.contact-options {
form {
.row {
> div {
.row {
> div {
> div {
margin-bottom: 0;
}
+div {
margin-top: 15px;
}
}
}
}
}
}
}
.list-persons {
.profile-mail {
.media {
.media-body {
h5{
font-size:16px;
}
}
}
}
}
.bookmark-tabcontent {
.tab-content {
.card {
.card-header {
h5{
font-size:16px;
}
}
}
}
}
}
@media only screen and (max-width: 360px) {
.updateimg {
line-height: 73px;
width: 80px;
}
.list-persons {
.profile-mail {
.email-general {
p {
span {
margin-left: 10px;
}
}
}
.media {
display: block;
img {
height: 80px;
width: 80px !important;
margin-bottom: 15px;
}
}
}
}
}
/**=====================
86. contacts CSS Ends
==========================**/

5688
public/assets/scss/theme/_custom-theme-options.scss Normal file
View File

File diff suppressed because it is too large Load Diff

770
public/assets/scss/theme/_dashboard_2.scss Normal file
View File

@@ -0,0 +1,770 @@
/**=====================
67. Dashboard 2 CSS Start
==========================**/
// dashbord-2 viho css start
.dashboard-2-main {
.card{
.card-header{
span{
font-size: 14px !important;
color: $primary-color;
font-weight: 600 !important;
display: inline-block;
}
}
.card-body {
.media {
img {
margin-right:5px;
}
}
}
}
}
.yearly-growth-sec {
#myChart {
height: 350px !important;
}
}
.top-dealer-sec {
.card {
margin-bottom: 20px;
.card-img-top {
height: 50px;
width: 50px;
border-radius: 50%;
margin: 0 auto;
margin-bottom:15px;
}
.top-dealerbox {
padding:20px;
h6 {
font-size: 13px;
font-weight: 600;
}
p {
font-size:11px;
font-family:$font-roboto;
margin-bottom:12px;
color: $light-text;
}
.btn {
padding:8px 10px;
background-color:rgba($primary-color,0.1);
color:$primary-color;
font-size:11px;
font-weight:400;
border-radius:15px;
font-family:$font-roboto;
line-height:1;
}
&:hover{
background-color:$white;
.btn{
background-color:$primary-color;
color:$white;
}
}
}
}
.owl-theme {
.owl-nav{
&.disabled {
+ .owl-dots{
margin-top:0;
}
}
}
}
}
.top-sell-sec {
.card-body {
.fa-shopping-bag {
background-color:$primary-color;
padding:8px;
border-radius:2px;
color:$white;
}
.media {
background-color: rgba($primary-color, 0.05);
padding: 25px 30px;
border-radius: 5px;
img{
transition: all 3s ease;
}
.btn{
&:hover{
i{
&:before{
animation: bounceIn 0.5s ease-in-out ;
}
}
}
}
.media-body {
margin-left:20px;
h6 {
font-size:16px;
font-weight:700;
margin-bottom:5px;
}
p{
margin-bottom:5px;
}
}
&:hover{
img{
transform:rotate(-26deg);
}
}
}
}
.media {
.media-body {
.fa-star {
color: #f5c304;
}
}
}
}
.target-sec {
background-color:$white;
border:none;
.card-header {
ul.target-list {
display: flex;
align-items: center;
justify-content: space-between;
li {
border-radius: 10px;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0px;
padding-right: 0px;
width: 50%;
transition: all 0.5s ease;
&:hover{
h6{
color: $white;
}
p{
color: $white;
}
span{
color: $white;
}
}
&:first-child {
background-color:rgba($primary-color, 0.05);
&:hover{
background-color:$primary-color;
}
}
&:nth-child(n+2) {
background-color: $primary-color;
margin-left: 20px;
h6{
color: $white;
}
p{
color: $white;
}
span{
color: $white;
}
}
h6 {
font-size:16px;
font-weight:700;
margin-bottom:10px;
}
p {
font-size: 12px;
margin-bottom: 10px;
line-height: 1.4;
}
span{
color:$primary-color;
}
}
}
}
.card-body{
.traget-img-sec{
width: 100%;
background-image: url('../images/dashboard-2/target1.png');
height: 415px;
background-position:center;
background-size: cover;
background-repeat: no-repeat;
}
}
.animat-block{
i{
color: $primary-color;
position: absolute;
}
.close1{
bottom: 29%;
left: 75px;
position: absolute;
animation: star 5s linear infinite;
}
.close2{
bottom: 31%;
right: 8%;
animation: star 7s linear infinite;
}
.close3{
bottom: 65%;
left: 30%;
opacity:0.2;
animation: star 10s linear infinite;
}
>div{
width: 5px;
height: 5px;
border-radius:50%;
background-color:$primary-color;
position: absolute;
}
.circle1{
bottom:50%;
left:5%;
animation: move2 1.2s infinite alternate;
}
.circle2{
bottom: 45%;
right: 30%;
animation: move2 1.4s infinite alternate;
}
.circle3{
bottom: 65%;
right: 18%;
opacity:0.2;
animation: move2 1.6s infinite alternate;
}
}
}
.activity-sec {
.activity-timeline {
.media {
align-items: start !important;
.activity-line {
left: 37px;
}
}
&.update-line {
.media {
.activity-line {
height: 80% !important;
}
}
.media {
.media-body {
h6 {
font-size: 12px;
margin-bottom: 25px;
span{
margin-right:5px;
font-weight:600;
}
.dot-notification{
float: right;
width: 15px;
height: 15px;
background-color: $primary-color;
border:5px solid #b2b6b6;
border-radius: 50%;
animation: round 1.3s ease-in-out infinite;
}
}
h5 {
font-size: 14px;
color: $theme-body-font-color;
font-weight: 600;
margin-bottom:5px;
}
p {
font-size: 14px;
font-weight: 400;
font-family: $font-roboto;
color: $light-font;
}
ul.timeline-pro {
display: flex;
align-items: center;
margin-top:15px;
li {
width: 100px;
height: 65px;
border-radius: 5px;
background-color: rgba($primary-color, 0.05);
display: flex;
img {
margin: auto;
transition: all 0.5s ease;
}
&:nth-child(n+2) {
margin-left: 20px;
}
&:hover{
img{
animation:tada 1s ease-out infinite;
}
}
}
}
.tomorrow-sec {
margin: auto;
font-weight: 500;
font-family: $font-montserrat;
position: relative;
z-index: 1;
&:before {
content: '';
position: absolute;
top: 45%;
left: 0;
right: 0;
margin: auto;
background-color: $light-gray;
height: 1px;
width: 90%;
z-index: -1;
}
p {
width: fit-content;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
background-color: $light-background;
}
}
}
}
}
}
.media {
.tomorrow-sec {
p {
display: flex;
justify-content: center;
}
}
}
}
.yearly-growth-sec {
#myChart {
height: 350px !important;
}
}
#graph_rounded {
svg {
filter: drop-shadow(-1px 5px 9px rgba(233, 233, 255, 0.3));
}
}
// dashbord-2 viho css end
// responsive dashboard-2
@media only screen and (max-width:1800px){
.activity-sec {
.activity-timeline{
&.update-line {
.media {
.activity-line{
left:37px;
}
}
}
}
}
}
@media screen and (min-width:1200px) and (max-width:1500px){
.dashboard-2-main{
.setting-primary, .setting-secondary, .setting-white{
width:25px;
height:25px;
}
.setting-list {
.setting-option{
width:25px;
height:25px;
.setting-option{
width:25px;
height:25px;
}
li{
&:first-child {
i.icon-angle-double-right{
font-size:12px;
}
}
}
}
}
.card{
.card-header,.card-body,.card-footer{
padding:20px;
}
.card-header {
h5{
font-size:16px;
}
}
&.income-card {
.card-body{
h5{
font-size:18px;
}
}
}
}
}
.top-dealer-sec {
.card {
.top-dealerbox{
padding:15px;
}
}
}
.top-sell-sec {
.card-body {
.media{
padding:15px;
.btn-iconsolid{
padding:5px 10px;
i{
font-size:12px;
}
}
.media-body{
h6{
font-size:15px;
}
p{
font-size:12px;
}
}
}
}
}
.target-sec{
.card-header{
ul{
&.target-list {
li{
h6 {
font-size:14px;
}
}
}
}
}
.card-body {
.traget-img-sec {
height:410px;
}
}
}
.activity-sec{
.activity-timeline{
&.update-line{
.media{
.media-body{
h6{
margin-bottom:10px;
}
p{
font-size:12px;
}
}
.activity-line{
left:26px;
top: 105px;
}
}
}
}
}
.activity-dot-primary{
width:14px;
height:14px;
border-width:2px;
}
}
@media screen and (min-width:1366px) and (max-width:1500px){
.top-sell-sec {
.card-body{
.media {
.media-body {
p{
display: none;
}
}
}
}
}
.activity-sec {
.activity-timeline{
&.update-line {
.media {
.media-body
p{
display:none;
}
}
}
}
}
.target-sec {
.card-body {
.traget-img-sec{
height:328px;
}
}
.card-header {
ul{
&.target-list {
li{
padding-top: 15px;
padding-bottom: 15px;
p{
display:none;
}
}
}
}
}
}
}
@media screen and (min-width:1200px) and (max-width:1365px){
.dashboard-2-main{
.des-xl-50{
max-width: 50%;
flex:0 0 50%;
}
.des-xl-100{
max-width: 100%;
width:100%;
flex:0 0 100%;
}
}
.target-sec {
.card-body {
.traget-img-sec{
margin-top:20px;
background-position:top;
height:247px;
}
}
}
}
@media only screen and (max-width: 1200px) {
.traget-img-sec {
display: flex;
justify-content: center;
}
}
@media only screen and (max-width: 1199px){
.activity-sec {
.activity-timeline{
&.update-line {
.media {
.activity-line{
left:37px;
}
}
}
}
}
.target-sec {
.card-body {
.traget-img-sec{
background-position:top;
}
}
}
}
@media only screen and (max-width:991px){
.activity-sec {
.activity-timeline{
&.update-line {
.media {
.activity-line{
left: 27px;
}
}
}
}
}
.top-dealer-sec{
.card {
.top-dealerbox{
padding:12px;
}
}
}
.target-sec {
.card-body {
.traget-img-sec{
height:360px;
}
}
}
}
@media only screen and (max-width: 767px){
.activity-timeline {
.media {
.activity-line {
top: 100px;
}
}
}
.top-sell-sec {
.card {
.card-body {
.media {
img {
margin-right: 25px;
}
}
}
}
}
}
@media only screen and (max-width: 991px) {
.activity-sec {
.activity-timeline {
.media {
.activity-line {
left: 26px;
}
}
}
}
.top-dealer-sec {
.owl-theme {
.owl-nav{
&.disabled {
+ .owl-dots{
margin-top:-15px;
}
}
}
}
}
}
@media only screen and (max-width: 575px) {
.activity-sec {
.activity-timeline {
.media {
.activity-line {
// left: 22px;
}
}
}
}
.update-line {
.media {
.activity-line {
top: 95px !important;
}
}
}
.top-dealer-sec {
.card{
box-shadow:none !important;
}
.owl-theme {
.owl-nav{
&.disabled {
+ .owl-dots{
margin-top:0;
}
}
}
}
}
}
@media only screen and (max-width: 480px){
.top-sell-sec {
.card-body {
.media{
display:block;
position:relative;
padding:20px;
.btn{
position:absolute;
top:20px;
right:20px;
padding:5px 10px;
font-size:12px;
}
.media-body{
margin-left:unset;
margin-top:15px;
}
}
}
}
.target-sec {
.card-header {
ul.target-list {
display:block;
li{
width:auto;
&:nth-child(n+2){
margin-left:unset;
margin-top:15px;
}
}
}
}
}
}
@media only screen and (max-width: 359px) {
.update-line{
.media{
.activity-line{
top:125px!important;
}
}
}
.activity-sec {
.media{
.activity-dot-primary{
width:10px;
height:10px;
border:1px solid $primary-color;
}
}
.activity-timeline {
.media {
.activity-line{
left:23px !important;
}
}
}
}
.activity-timeline {
.media {
.media-body{
margin-left: 10px;
}
}
}
}
@media only screen and (max-width: 340px) {
.top-sell-sec {
.card {
.card-body {
// margin-left: 0px;
}
}
}
}
/**=====================
67. Dashboard 2 CSS End
==========================**/

245
public/assets/scss/theme/_dashboard_3.scss Normal file
View File

@@ -0,0 +1,245 @@
/**=====================
68. Dashboard 3 CSS Start
==========================**/
.order-chart-container {
.history {
height: 294px;
.chartist-tooltip {
box-shadow:-1.5px 1.33px 15px 0px rgba($secondary-color,0.1);
.chartist-tooltip-value {
color: $secondary-color;
}
}
svg {
.ct-grids {
.ct-horizontal {
stroke: $transparent-color;
&:nth-child(4){
stroke: rgba(0,0,0,0.2);
}
}
}
.ct-point {
stroke-width: 3px;
fill: $white;
&.circle-trans {
display: none;
}
}
.ct-series-a {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke: lighten($secondary-color, 30%);
}
}
.ct-series-b {
.ct-slice-pie, .ct-slice-donut-solid, .ct-area {
fill: url(#gradient) !important;
fill-opacity: 0.2;
}
}
}
}
}
.task-progress {
margin-top: 30px;
.progress {
margin-top: 10px;
}
}
.task-table, .project-table {
table {
tr {
th {
border-top: none;
border-bottom: none;
color: rgba($theme-body-font-color, 0.5);
font-weight: 500;
}
td {
+ td {
color: rgba($theme-body-font-color, 0.5);
}
}
&:last-child {
padding-bottom: 0;
}
}
}
}
.report-status {
#project-status {
margin-top: -15px;
}
ul {
display: flex;
border-top: 1px solid $light-gray;
li {
display: inline-block;
width: 100%;
padding: 15px;
h5 {
margin-bottom: 0;
}
+ li {
border-left: 1px solid $light-gray;
}
}
}
}
.update-line {
.media {
.activity-line {
height: 249px;
}
}
}
.project-table {
table {
thead {
tr {
th {
color: $theme-body-font-color;
font-weight: 600;
}
}
}
tr {
th,td {
vertical-align: middle;
span {
font-size: 12px;
}
&:last-child {
min-width: 150px;
}
}
}
}
}
.jvector-map-project {
height: 304px;
}
.map-progress {
li {
h6 {
font-weight: 400;
span {
color: rgba($theme-body-font-color, 0.5);
}
}
+ li {
margin-top: 30px;
}
}
}
@media screen and (min-width: 1200px) and (max-width: 1291px) {
.update-line {
.media {
.activity-line {
height: 287px;
}
}
}
.order-chart-container {
.history {
height: 321px;
}
}
#project-status {
min-height: 320px !important;
.apexcharts-canvas, svg {
height: 320px !important;
}
}
}
@media only screen and (max-width: 991px) {
.update-line {
.media {
.activity-line {
height: 211px;
}
}
}
.map-progress {
li {
+ li {
margin-top: 20px;
}
}
}
}
@media only screen and (max-width: 767px) {
.map-progress {
margin-top: 20px;
}
.project-table {
table {
tr {
td,th {
min-width: 130px;
&:nth-child(2) {
min-width: 169px;
}
}
}
}
}
}
@media only screen and (max-width: 575px) {
.task-table {
table {
tr {
th,td {
&:first-child {
min-width: 280px;
}
&:last-child {
min-width: 60px;
}
}
}
}
}
.map-progress {
margin-top: 15px;
li {
+ li {
margin-top: 15px;
}
}
}
.order-chart-container {
.history {
height: 245px;
}
}
.update-line {
.media {
.activity-line {
height: 178px;
top: 139px;
}
}
}
}
@media only screen and (max-width: 468px) {
.update-line {
.media {
.activity-line {
height: 215px;
}
}
}
}
@media only screen and (max-width: 333px) {
.update-line {
.media {
.activity-line {
height: 228px;
}
}
}
}
/**=====================
68. Dashboard 3 CSS End
==========================**/

2030
public/assets/scss/theme/_dashboard_default.scss Normal file
View File

File diff suppressed because it is too large Load Diff

301
public/assets/scss/theme/_datatable.scss Normal file
View File

@@ -0,0 +1,301 @@
/**=====================
30. Data-table CSS Start
==========================**/
div{
&.dt-button-background{
display: none !important;
}
&.DTS {
div {
&.dataTables_scrollBody {
table {
z-index: 1;
}
}
}
}
}
.dataTables_wrapper{
&.no-footer {
.dataTables_scrollBody {
border-bottom: 1px solid $light-gray;
}
}
.dt-buttons{
.btn{
border-radius: 0.25rem !important;
}
}
padding: 0;
.btn-group{
button{
margin-right: 5px;
}
}
button{
font-weight:400;
padding:0.375rem 0.75rem;
font-size:1rem;
border-radius:0.25rem;
color:$white;
background-color: $primary-color;
border: 1px solid $white;
}
width: 100%;
&+.dataTables_wrapper{
margin-top: 20px;
}
.dataTables_paginate{
margin-left: 15px !important;
border: 1px solid $light-gray;
border-radius: 0.25rem;
padding-top: 0;
.paginate_button{
margin: 0;
&.current,&:active{
background: $primary-color;
color: $white !important;
box-shadow: none;
}
&:hover{
border:1px solid $primary-color;
color: $dark-color !important;
background: transparent !important;
}
}
}
.dataTables_length{
margin-bottom:30px;
select{
background-color: $white;
border-color: $light-gray;
color: $dark-color;
padding: 0 10px;
margin: 0 10px;
height: 2.7142em;
}
}
table.dataTable{
border:1px solid $light-semi-gray;
tbody {
td, th {
background-color: $white;
border:1px solid $light-gray;
&.select-checkbox {
padding-right: 40px !important;
&:before {
right: 20px;
top: 22px;
left: unset;
}
}
}
}
thead{
th,td{
border-bottom:2px solid $light-gray;
}
}
th,td{
padding:0.75rem;
border-color:$light-gray;
}
}
.dataTables_filter{
margin-bottom: 25px;
margin-left: 15px;
input[type="search"]{
// background-color: $light-background;
border: 1px solid $light-semi-gray;
padding: 0 10px;
margin-left: 10px;
height: 37px;
border-radius: 0;
}
}
}
.dataTables_scrollHeadInner{
width: 100% !important;
}
table{
.fixedHeader-floating {
position: fixed!important;
background-color: $white;
}
.box{
>div{
padding: 5px 15px;
background-color: $primary-color;
display: inline-block;
color: $white;
border-radius: 5px;
margin-bottom: 15px;
margin-right: 15px;
}
}
&.dataTable{
&.fixedHeader-locked,&.fixedHeader-floating{
width: calc(100vw - 250px) !important;
max-width: calc(100vw - 250px) !important;
overflow: hidden !important;
right: 0 !important;
z-index: 99;
left: 260px !important;
}
&:not(.fixedHeader-locked){
&:not(.fixedHeader-floating){
width: 100% !important;
}
}
}
&.dataTable{
border-collapse: collapse!important;
margin-top: 0 !important;
thead{
.sorting,.sorting_asc,.sorting_desc,.sorting_asc_disabled,.sorting_desc_disabled{
&:before,&:after{
bottom: 12px !important;
}
}
}
input,select{
border: 1px solid $light-semi-gray;
height: 37px;
}
}
}
.toolbar{
padding: 5px 15px;
background-color: $primary-color;
display: inline-block;
color: $white;
border-radius: 5px;
margin-bottom: 15px;
margin-right: 15px;
}
code{
&.option{
color: $danger-color !important;
}
&.api{
color: $success-color !important;
}
}
// Datatable extension
.dt-ext{
.dataTables_wrapper{
.page-item{
&.active {
.page-link {
background-color: $primary-color;
border-color: $primary-color;
color: $white;
}
}
}
.dataTables_paginate{
border: none;
.paginate_button{
padding: 0;
border: none;
&.disabled,&.hover,&.active{
border: none !important;
}
}
.page-link{
margin-left: 0px;
color: $primary-color;
}
}
button.dt-button, div.dt-button, a.dt-button, button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), button.dt-button:active:not(.disabled), button.dt-button.active:not(.disabled), div.dt-button:active:not(.disabled), div.dt-button.active:not(.disabled), a.dt-button:active:not(.disabled), a.dt-button.active:not(.disabled){
background-color: $primary-color;
border-color:$primary-color;
border-radius: 2px;
color: $white;
background-image: none;
font-size: 14px;
}
button.dt-button.btn-success, div.dt-button.btn-success, a.dt-button.btn-success{
background-color: $success-color;
border-color:$success-color;
}
button.dt-button.btn-primary, div.dt-button.btn-primary, a.dt-button.btn-primary{
background-color: $primary-color;
border-color:$primary-color;
}
button.dt-button.btn-danger, div.dt-button.btn-danger, a.dt-button.btn-danger{
background-color: $danger-color;
border-color:$danger-color
}
table.dataTable th.focus, table.dataTable td.focus{
outline: 3px solid $primary-color;
}
table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1{
background-color: lighten($primary-color , 20%);
}
table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected{
background-color: lighten($primary-color , 20%);
}
table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1{
background-color: lighten($primary-color , 20%);
}
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected{
background-color: lighten($primary-color , 20%);
}
}
}
td.highlight {
background-color: $light-gray !important;
}
td.details-control {
background: url('../images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../images/details_close.png') no-repeat center center;
}
.dataTables_scroll{
&~.dataTables_paginate{
margin-top: 20px !important;
}
}
.product-table{
th{
&:last-child{
min-width: 120px;
}
}
h6{
font-weight: 600;
color: $dark-color;
}
}
table{
&.dataTable{
&.display {
tbody {
tr{
border: 1px solid $light-gray;
&.even{
> .sorting_1{
// background-color:$light-background;
}
}
&.odd {
> .sorting_1{
// background-color: rgba($primary-color,0.05);
}
}
}
}
}
}
}
/**=====================
30. Data-table CSS Ends
==========================**/

144
public/assets/scss/theme/_datepicker.scss Normal file
View File

@@ -0,0 +1,144 @@
/**=====================
52. Datepicker CSS Start
==========================**/
//colors
.clockpicker-canvas {
line {
stroke: $primary-color;
}
}
.clockpicker-canvas-fg, .clockpicker-canvas-bearing {
fill: $primary-color;
}
.daterangepicker {
td, th {
&.available {
&:hover {
background-color: $primary-color;
}
}
}
}
.datepicker--day-name {
color: $black;
font-weight: bold;
}
.datepicker--cell {
&.-current- {
color: $black;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 5px;
font-weight: bold;
border: 2px solid $primary-color;
}
&.-focus- {
background: $primary-color;
color: $white;
}
&.-selected- {
background: $primary-color;
}
}
.daterangepicker.ltr {
color: $dark-gray;
z-index: 8;
tr {
font-size: 13px;
td {
height: 34px;
width: 34px;
&.in-range {
background-color: $auth-bg-color;
}
&.active {
background-color: $primary-color;
}
}
}
.ranges {
float: none;
li {
color: $primary-color;
&:hover {
background-color: $primary-color;
border: 1px solid $primary-color;
color: $white;
}
&.active {
background-color: $primary-color;
border: 1px solid $primary-color;
color: $white;
}
}
}
.calendar-time select {
color: $dark-gray;
}
}
.datetime-picker {
.bootstrap-datetimepicker-widget.dropdown-menu {
width: auto;
}
}
.date-range-picker{
.theme-form{
// margin-bottom: 30px;
}
> div{
&:last-child{
.theme-form{
margin-bottom: 0px;
}
}
}
}
.daterangepicker{
&:before {
border-bottom: 7px solid $light-semi-gray;
}
.daterangepicker_input {
i {
font-size: 14px;
color: $semi-dark;
}
}
.input-mini{
border-color: $light-semi-gray !important;
font-size: 14px;
color: $semi-dark;
}
th,td{
height: 34px;
width: 34px;
&:hover{
color: $dark-color;
}
&.prev,&.next{
color: $white;
height: 34px;
width: 34px;
background-color: $primary-color;
}
&.month{
color: $primary-color;
letter-spacing: 1px;
text-transform: uppercase;
}
}
}
/**=====================
52. Datepicker CSS End
==========================**/

441
public/assets/scss/theme/_document.scss Normal file
View File

@@ -0,0 +1,441 @@
/**=====================
70. Document CSS Start
==========================**/
.document {
&.close{
.page-sidebar{
left:-290px;
}
.page-wrapper{
&.compact-wrapper {
.page-body-wrapper{
&.sidebar-icon {
.page-body{
margin-left:unset;
}
}
}
}
}
}
.page-main-header{
background-color:$white;
&.document-header{
height:80px;
width: calc(100% - 290px);
margin-left:290px;
padding-left:30px;
padding-right:30px;
&.open {
margin-left: 0;
width: 100%;
}
}
.main-header-right {
padding: 0 0;
}
.navbar-collapse{
.navbar-nav{
display: flex;
justify-content: flex-end;
padding-right: 0;
width: 100%;
.nav-item{
padding-right: 15px;
&:last-child {
padding-right: 0;
}
}
}
}
.document-right-nav {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
font-weight:600;
text-transform: uppercase;
}
}
}
}
}
}
}
.page-sidebar {
position:fixed;
top:0;
left:0;
width:290px;
height:100%;
overflow-y:auto;
background-color:$white;
z-index:9;
transition: all 0.5s ease;
.logo-wrapper{
border-bottom: 1px solid $light-semi-gray;
img{
vertical-align: middle;
border-style: none;
padding: 23px -7px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 30px;
}
}
ul.document-menu{
padding-right: 20px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 15px;
h4{
font-size:22px;
font-weight:600;
border-bottom:1px solid $light-semi-gray;
}
li{
a{
color:$theme-body-font-color;
font-size:16px;
padding-left:unset;
padding-right:unset;
transition:all 0.5s ease;
// &.active{
// background-color: $primary-color;
// color:$white;
// padding-left:15px;
// padding-right:15px;
// }
&.menu-title{
font-weight:600;
line-height:1;
&:hover{
color:$primary-color;
}
}
}
.nav-submenu{
padding-top:5px;
padding-bottom:5px;
padding-left:15px;
li{
padding-left:15px;
position:relative;
transition: all 0.5s ease;
a{
color:$light-text;
font-weight:500;
font-size:14px;
line-height:1;
i{
position:absolute;
top:7px;
left:0;
transition: all 0.5s ease;
}
&:hover{
color:$primary-color;
// animation: fadeInLeft 300ms ease-in-out;
// transform: translateX(5px);
}
}
&:hover{
transform:translateX(5px);
}
}
}
}
}
}
.fa-star{
color:$yellow;
}
.card {
.card-header {
h5{
font-size:20px;
margin-bottom:5px;
}
}
}
.reviews{
margin-bottom: 20px;
h2{
font-weight:600;
font-size: calc(20px + (28 - 20) * ((100vw - 320px) / (1920 - 320)));
}
h5{
font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
}
}
}
.document-content {
.page-sidebar {
&.open {
transform: translate(-260px) !important;
~ .page-body, ~ footer {
margin-left: 0 !important;
}
}
}
ul.nav-pills {
overflow-y: scroll;
max-height: calc(100vh - 180px);
display: block;
li {
h4{
color: $white;
padding: 0 15px;
}
line-height: 25px;
.nav-link {
border-radius: .25rem;
font-size: 14px;
display: block;
text-decoration: none;
color: #d4d4d4;
font-weight: 500;
padding: 3px 15px;
letter-spacing: 1px;
i {
margin-top: 5px;
text-decoration: none;
color: $white;
margin-right: 20px;
}
&.active {
background-color: unset !important;
color: $primary-color;
}
p{
font-size: 16px;
margin-bottom: 0;
padding-top: 7px;
font-weight: 600;
}
}
.show > .nav-link {
background-color: unset !important;
color: $primary-color;
}
}
}
.table {
thead {
th {
width: 50%;
}
}
}
.set-flex {
display: flex;
}
i {
&.fa-star {
color: $btn-search-bg-c;
}
}
.col-9 {
padding-left: 40px;
.set-height {
overflow: scroll;
overflow-x: hidden;
}
.tab-content {
overflow: auto;
overflow-x: hidden;
max-height: calc(100% - 200px);
position: fixed;
width: 976px;
margin-left: 30px;
-webkit-box-shadow: 0 0 15px 0 rgba(220, 220, 220, 0.4);
-o-box-shadow: 0 0 15px 0 rgba(220, 220, 220, 0.4);
box-shadow: 0 0 15px 0 rgba(220, 220, 220, 0.4);
.section-head {
font-weight: 600;
font-size: 32px;
margin-bottom: 40px;
padding: 0;
}
}
}
.card-body.tree-color {
padding: 0;
}
.jstree-default {
padding: 30px;
background-color: $dark-card-background;
box-shadow: 1px 1px 2px 1px rgba(255, 255, 255, 0.08);
.jstree-anchor {
color: #a6aaaf;
}
.jstree-hovered {
background-color: $dark-body-background;
border: 1px solid $dark-border-color;
}
.jstree-clicked {
color: white !important;
background: transparent !important;
}
.jstree-icon {
color: #656b78 !important;
}
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.html-editor {
color: rgba(255, 255, 255, 0.7);
background-color: #2b2b2b;
pre {
color: rgba(255, 255, 255, 0.7);
background-color: #000;
}
}
.progress {
margin-bottom: 10px;
}
ul.list-ticked li {
margin-bottom: 10px;
padding-left: 1rem;
}
&.faq {
font-size: 18px;
.btn {
font-size: 18px;
font-weight: 600;
color: $primary-color;
&.btn-link {
color: $black;
&.collapsed {
color: $primary-color;
}
}
}
ul {
border: unset;
&.nav {
display: block;
li .nav-link {
border-radius: .25rem;
font-size: 18px;
display: block;
padding: 3px 20px 3px 30px;
text-decoration: none;
line-height: 30px;
color: $color-scarpa;
font-weight: 500;
border: unset;
i {
margin-top: 3px;
text-decoration: none;
line-height: 25px;
color: $primary-color;
margin-right: 20px;
}
&.active {
color: $primary-color;
background-color: unset;
border: unset;
}
&:hover {
border: unset;
}
}
}
}
}
.reviews{
background-color: $white;
padding: 30px 0;
margin-bottom: 30px;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
h1{
text-transform: uppercase;
font-weight: 600;
}
h5{
text-transform: capitalize;
}
}
}
@media (max-width:991px){
.document {
&.close{
.page-sidebar{
left:0;
}
.page-wrapper{
&.compact-wrapper {
.page-body-wrapper{
&.sidebar-icon {
.page-body{
margin-left:unset;
}
}
}
}
}
}
.navbar{
padding-top: 0;
padding-bottom: 0;
}
.page-sidebar{
left:-290px;
z-index:1;
}
.navbar-toggler{
padding:0;
&:focus{
box-shadow:none;
}
}
}
}
@media (max-width:575px){
.document {
.page-main-header{
&.document-header{
height:60px;
}
}
}
}
/**=====================
70. Document CSS Ends
==========================**/

105
public/assets/scss/theme/_dropdown.scss Normal file
View File

@@ -0,0 +1,105 @@
/**=====================
37. Dropdown CSS Start
==========================**/
.dropdown-basic {
margin-bottom: -10px;
.btn-group {
margin-right: 18px;
.btn-round {
border-radius: 50px;
}
}
.separated-btn {
margin-left: -6px;
.btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 10px;
}
}
button{
max-height: 43px;
}
.dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
.dropbtn {
color:$white;
padding:12px 35px;
border:none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: $white;
border: 1px solid $light-gray;
min-width: 175px;
z-index: 1;
left: 0;
top: 45px;
a {
color: $light-text;
padding:10px 16px;
text-decoration: none;
display: block;
border-top: 1px solid $light-gray;
}
.dropdown-header{
padding:12px 16px;
}
}
}
.dropdown-content a:hover {
background-color: rgba($primary-color,0.1);
color:$primary-color;
}
.dropdown:hover .dropdown-content {
display: block;
}
}
.dropup-basic {
.dropup {
position: relative;
display: inline-block;
.dropbtn {
color: white;
padding: 12px;
border: none;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 170px;
bottom: 45px;
z-index: 999;
left:0;
a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
}
}
.dropup .dropup-content a:hover {
background-color: #f1f1f1;
}
.dropup:hover .dropup-content{
display: block;
a {
&.active {
background-color: #f1f1f1;
}
}
}
}
/**=====================
37. Dropdown CSS Ends
==========================**/

1040
public/assets/scss/theme/_ecommerce.scss Normal file
View File

File diff suppressed because it is too large Load Diff

406
public/assets/scss/theme/_email-application.scss Normal file
View File

@@ -0,0 +1,406 @@
/**====================================
13. Email Application CSS Start
========================================**/
%email-mixin {
background: transparent;
font-size: 15px;
line-height: 25px;
}
.email-wrap{
.email-app-sidebar{
.media{
img{
border:2px solid $light-gray;
}
}
.main-menu{
> li {
width: 100%;
text-align: left;
a {
color: $dark-gray;
line-height: 39px;
text-transform: uppercase;
border-radius: 3px;
font-weight:500;
i{
margin-right: 10px;
}
&.active > a {
color:$black;
}
&:hover {
background-color:rgba($primary-color,0.1);
text-decoration:none;
>.title{
color:$primary-color;
}
> .badge{
color:$primary-color;
}
}
}
}
}
ul{
li{
a {
display: flex;
padding-left: 20px;
align-items: center;
>{
.title {
width: 100%;
}
.badge {
align-self: center;
color: $dark-gray;
}
}
}
}
}
}
.email-left-aside {
.card-body{
padding: 20px;
}
}
.email-right-aside {
.email-body{
.modal-content{
.btn-close{
top:30px;
right:25px;
}
}
.inbox {
overflow: auto;
overflow-x: hidden;
.media{
position: relative;
.media-body{
span{
position:absolute;
right:20px;
}
}
}
svg{
width: 18px;
margin-right: 10px;
stroke: $dark-gray;
cursor: pointer;
&.like{
fill: $warning-color;
stroke: $warning-color;
}
}
.media-size-email{
display: flex;
align-items: center;
justify-content: center;
}
.media-body{
display: flex;
}
img{
height: 20px;
}
.media {
padding: 12px 20px;
transform: translateY(0) scale(1.0);
transition: all 0.3s ease;
&:hover {
background-color: lighten($light-gray , 4%);
transform: translateY(-1px) scale(1.01);
transition: transform 0.3s ease;
}
}
}
.attachment{
margin-top:10px;
ul{
li{
display: inline-block;
img{
width:90px;
height:90px;
}
}
}
}
}
.email-profile{
.inbox{
p{
color:$light-text;
font-weight:500;
display:inline-block;
width:calc(100% - 200px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-left:15px;
max-width: 600px;
}
}
>div{
&:first-child{
.email-top{
padding:20px;
.email-chek{
margin-right:20px;
}
.checkbox_animated{
&:after {
width: 2.1rem;
height: 2.1rem;
border-radius: 4px;
}
&:before{
left: 0.4rem;
top: 0.55rem;
width: 1.1rem;
height: 0.5rem;
}
}
}
}
}
}
}
.btn-mail {
border-radius: 2px;
text-align: left;
padding: 13px 15px;
margin: 20px 0 20px;
letter-spacing: 1px;
line-height: 12px!important;
color: $white!important;
}
.dropdown-menu{
background-color: $white;
border-color: $light-gray;
}
.cke_chrome{
background-color:$light-background;
.cke_top{
background-color: transparent;
}
}
.cke_top{
background-color:transparent;
}
p {
margin-bottom: 0;
color: $light-text;
}
.media-body {
h6{
margin-bottom: 2px;
color: $primary-color;
margin-top: 3px;
font-weight: 600;
display: inline-block;
font-size: 14px;
span{
font-weight:600;
}
small{
span{
color:$light-font;
}
}
}
}
.email-top {
padding:20px;
border-bottom:1px solid $light-gray;
h5{
margin-bottom: 0;
display: flex;
align-items: center;
}
.email-right{
padding:13px 0;
display:flex;
justify-content:flex-end;
}
}
.email-wrapper{
padding:20px;
h5{
margin-bottom:20px;
}
.emailread-group{
&:nth-child(n+2){
border-top: 1px solid $light-gray;
padding-top: 20px;
margin-top: 20px;
}
h5{
margin-bottom:10px;
}
h6{
font-size: 14px;
}
.read-group{
&:nth-child(n+2){
margin-top:15px;
}
}
textarea{
text-transform:capitalize;
padding:15px;
}
.action-wrapper{
margin-top:15px;
}
}
h6{
margin-bottom:10px;
float:left;
}
.right-download {
float:right;
}
}
.email-content{
.email-top{
.user-emailid{
&:after{
content: "";
position: relative;
height:20px;
width:1px;
right: 0;
top: 3px;
z-index: 2;
border: 1px solid $light-semi-gray;
float: right;
padding: 0;
margin: 0 20px;
}
}
}
}
.email-body{
.attachment{
ul{
li{
img{
width:80px;
height:80px;
}
&:nth-child(n+2){
margin-left:10px;
}
}
}
.list-inline{
.list-inline-item{
padding-right:13px;
margin-right:unset;
}
}
}
.email-compose{
.cke_contents.cke_reset {
max-height:100px;
width:100% ;
border:1px solid $light-gray;
margin-bottom:20px;
}
.cke_inner{
background-color: transparent;
}
.email-top{
h4{
margin-bottom:0;
}
}
.compose-border{
margin: -1px;
.btn-middle{
padding-top: 5px;
}
}
.compose-header{
display: flex;
align-items: center;
justify-content: space-between;
}
.dropzone{
i{
display:block;
margin-bottom:10px;
}
h6{
float:unset;
}
.needsclick{
display:block;
margin:0;
}
}
}
}
.actions{
text-align:right;
li{
display:inline-block;
&:nth-child(n+2){
margin-left:15px;
}
}
}
.email-aside-toggle{
text-transform: capitalize;
display:none;
}
}
.cke_top {
border-bottom: 1px solid $light-gray !important;
}
@media (max-width:575px){
.email-wrap {
.email-app-sidebar {
.main-menu {
> li {
a{
line-height:30px;
}
}
}
}
.email-right-aside {
.tab-content {
.email-wrapper {
h6{
font-size: 12px;
}
.right-download{
font-size:12px;
}
}
}
}
}
}
/**=================================
13. Email Application CSS Ends
====================================**/

262
public/assets/scss/theme/_errorpage.scss Normal file
View File

@@ -0,0 +1,262 @@
/**=====================
09. Error-page CSS Start
==========================**/
.error-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
&.maintenance-bg {
background-image: url(../images/other-images/maintenance-bg.jpg);
// background-color: rgba(255, 255, 255, 0.97);
background-blend-mode: overlay;
}
.maintenance-icons{
li{
i{
color: rgba($primary-color , 0.5);
font-size: 50px;
animation: rotate-effect 40s infinite linear reverse;
}
&:nth-child(2){
i{
font-size: 100px;
margin-left: 110px;
margin-top: -25px;
animation: rotate-effect 40s linear infinite reverse;
}
}
&:nth-child(3){
i{
animation: rotate-effect 30s infinite linear;
font-size: 150px;
margin-top: -85px;
margin-right: 120px;
}
}
}
}
.maintenance-heading {
margin-top: 70px;
.headline {
font-size: 99px;
font-weight: 900;
letter-spacing: 10px;
// color: $light-font;
color: $secondary-color;
z-index: 2;
position: relative;
margin-top: -70px;
}
}
.error-heading {
margin-top: 115px;
.headline {
font-size: 285px;
font-weight: 700;
letter-spacing: 1px;
margin-top: -130px;
}
}
.sub-content {
font-size: 18px;
color: $light-text;
letter-spacing: 1px;
font-weight: normal;
line-height: 35px;
z-index: 3;
position: relative;
margin-top: 30px;
margin-bottom: 0;
font-weight:600;
}
.btn{
margin-top: 40px;
}
}
.error{
margin: 70px 0 100px;
color:$black;
.error-title{
font-size: 9.5rem;
color:$white;
text-shadow: 6px 6px 7px rgba(0, 0, 0, 0.32);
}
.line-bottom{
width: 10%;
height: 5px;
background-color: $warning-color;
border: none;
}
.c-white{
color:$white;
}
.error-btn{
text-align: center;
}
.padd{
padding: 10px 30px 10px 30px;
}
.btn-back-home{
background-color:$light-gray;
color:$black;
&:hover{
background-color:$warning-color;
color:$white;
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.21);
}
}
.btn-adnc-serc{
background-color:$dark-color;
color:$white;
&:hover{
background-color:$warning-color;
color:$white;
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.21);
}
}
}
.maintenance-sec{
.error-wrapper {
.maintenance-heading {
.headline{
margin-bottom:0;
}
}
.sub-content{
margin-top: 15px;
}
}
}
/**=====================
09. Error-page CSS Ends
==========================**/
.error-page1{
@keyframes wheel-rotate {
50% {
transform: rotate(360deg);
animation-timing-function: cubic-bezier(0.55,0.085,0.68,0.53);
}
100% {
transform: rotate(960deg);
}
}
@keyframes bicycle-run {
0% {
transform: translateX(-1300px);
}
50% {
transform: translateX(0);
animation-timing-function: cubic-bezier(0.47,0,0.745,0.715);
}
100% {
transform: translateX(1300px);
}
}
@keyframes move-1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateX(0);
}
100% {
transform: translateY(-10px);
}
}
.danger-color{
fill:$danger-color;
}
.warning-color{
fill: $warning-color;
}
.primary-color{
fill:$primary-color;
&.opacity-05{
fill:rgba($primary-color,0.5);
}
}
.secondary-color{
fill: $secondary-color;
&.opacity-o6{
opacity: 0.6;
}
&.opacity-o4{
opacity: 0.4;
}
&.lighten-5{
fill:darken($secondary-color, 5%);
}
}
.svg-wrraper{
margin-bottom:35px;
svg{
&.svg-45{
width: 45%;
}
&.svg-60{
width: 60%;
}
&.svg-40{
width: 40%;
}
}
}
.wheel {
animation: wheel-rotate 6s ease infinite;
transform-origin: center;
transform-box: fill-box;
}
.bicycle {
animation: bicycle-run 15s ease infinite;
}
.circle {
animation: circle-anim ease infinite;
transform-origin: center;
transform-box: fill-box;
perspective: 0;
}
.rocket,.jacket-man{
animation:move-1 6s linear infinite ;
}
h3{
font-weight:700;
text-transform:capitalize;
}
.btn-primary-gradien{
color:$white;
font-weight:700;
}
}
@media (max-width:767px){
.error-page1 {
h3{
font-size:22px;
}
}
}
@media (max-width:575px){
.error-page1{
.svg-wrraper{
margin-bottom:10px;
svg{
&.svg-40{
width:50%;
}
}
}
}
}

349
public/assets/scss/theme/_faq.scss Normal file
View File

@@ -0,0 +1,349 @@
//According settings
$card-padding :30px;
$card-margin-bottom :30px;
$card-border-width :0px;
$card-border-color :$light-gray;
$card-border-radious :8px;
$card-box-shadow :0 0 10px 0 rgba(68,102,242,0.05);
$card-header-font-weight : 600;
$card-header-bg-color : $white;
$card-header-font-size : 18px;
$card-header-font-transform : uppercase;
$card-header-font-color : $theme-body-font-color;
$card-header-span-size : 12px;
$card-header-span-color : $theme-body-sub-title-color;
$card-body-bg-color : $transparent-color;
$card-footer-bg-color : $white;
/**=====================
71. Faq CSS start
==========================**/
.faq-widgets{
align-items: center;
.media-body{
h5{
font-weight: 600;
color: $white;
}
p{
font-size: 14px;
padding-right: 20px;
color: rgba($white, 0.7);
}
}
svg{
width: 50px;
height: 50px;
opacity: 0.5;
}
}
.header-faq{
h5{
font-weight: 600;
text-transform: capitalize;
}
margin-bottom: 30px;
}
.faq-articles{
h6{
font-size: 16px;
}
p{
color: $light-text;
}
}
.features-faq{
.faq-image{
img{
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: 100%;
}
}
.card-body,.card-footer{
padding: 20px;
}
.card-body{
h6{
font-weight: 600;
font-size: 18px;
}
p{
font-size: 14px;
color: $light-text;
}
}
ul{
li{
display: inline-block;
}
}
}
.faq-accordion{
margin-bottom: 30px;
p{
color: $light-text;
}
.card{
.btn-link{
display:flex;
svg{
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
left: 20px;
}
}
}
.faq-header{
position: relative;
svg{
position: absolute;
right:20px;
top: 20px;
}
span{
margin-top: 3px;
}
}
.faq-body{
padding: 20px !important;
}
.card-mb-faq{
margin-bottom: 30px;
}
label{
font-weight:500;
font-size:14px;
margin-bottom: 10px;
}
}
.latest-articles{
p{
color: $light-text;
}
}
.faq-title{
margin: 30px 0;
h6{
font-size: 18px;
font-weight: 600;
margin-bottom: unset;
}
}
.faq-form{
position: relative;
.search-icon{
position: absolute;
right:12px;
top:9px;
width:16px;
height:16px;
}
}
.navigation-btn{
margin-bottom:20px;
a{
display: flex;
align-items: center;
justify-content: center;
font-weight:600;
svg{
width: 15px;
height: 15px;
}
}
}
.navigation-option{
ul{
li{
position: relative;
padding: 10px 10px 10px 0;
&:hover{
background-color:rgba($primary-color,0.05);
a{
color:$primary-color;
}
}
a{
padding-left: 40px;
color: $light-text;
font-weight:500;
svg{
position: absolute;
width: 15px;
height: 15px;
top: 12px;
left: 15px;
}
}
}
}
}
.updates-faq{
min-width:40px;
height:40px;
border:1px solid $primary-color;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-right:20px;
svg{
width:18px;
height:18px;
}
}
.updates-bottom-time{
p{
margin-bottom: 2px;
font-weight: 600;
+ p{
color: $light-text;
}
}
}
.updates-faq-main{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
}
.default-according {
.card {
.card-header {
h5{
padding-left: 25px;
}
.btn-link{
padding:0;
}
}
}
}
@media only screen and (max-width: 1199px){
.faq-accordion{
margin-bottom: 30px;
}
}
@media only screen and (max-width: 991px){
.faq-accordion{
.faq-header{
padding:20px !important;
h5{
font-size:20px;
}
svg {
right:20px;
top:20px;
width:20px;
height:auto;
}
}
}
.navigation-option {
ul{
li{
padding:10px 10px 10px 0;
a {
svg{
top:12px;
}
}
}
}
}
.navigation-btn, .updates-faq-main{
margin-bottom: 20px;
}
.updates-faq{
width:35px;
height:35px;
margin-right:20px;
svg{
width:16px;
height:16px;
}
}
}
@media only screen and (max-width: 767px){
.xs-mt-search{
margin-top: 30px;
}
.featured-tutorial{
.card-body,.card-footer{
padding:20px;
}
}
.updates-faq{
width:30px;
height:30px;
}
}
@media only screen and (max-width: 575px){
.xs-mt-search{
margin-top: 0px;
}
.faq-widgets {
svg {
width: 100px;
height: 100px;
position: absolute;
opacity: 0.1;
top: 10px;
right: 20px;
}
}
.faq-title {
margin: 15px 0;
h6{
font-size:16px;
}
}
.header-faq {
margin-bottom:15px;
}
.faq-accordion{
margin-bottom:0px;
.card {
.btn-link{
// font-size:14px;
}
}
.faq-header {
padding: 15px !important;
.pull-right{
float: right;
}
svg {
right: 15px;
top: 15px;
}
}
}
.navigation-btn, .updates-faq-main{
margin-bottom: 15px;
}
}
/**=====================
71. Faq CSS end
==========================**/

318
public/assets/scss/theme/_file.scss Normal file
View File

@@ -0,0 +1,318 @@
/**=====================
File Manager
==========================**/
.file-sidebar,.file-content {
.card {
.card-body,
.card-header {
padding: 20px !important;
}
.file-manager{
padding-top: unset!important;
}
}
}
.file-sidebar {
ul {
li {
&+li {
margin-top: 8px;
}
}
}
.btn {
display: flex;
align-items: center;
&.btn-light {
&:hover {
color: $primary-color !important;
svg {
stroke: $primary-color;
}
}
}
svg {
width: 15px;
vertical-align: middle;
margin-right: 8px;
}
}
.pricing-plan {
border: 1px solid $light-gray;
border-radius: 5px;
margin-top: 10px;
padding: 15px;
position: relative;
overflow: hidden;
h6{
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
color: $dark-gray;
}
h5{
font-weight:600;
}
p {
margin-bottom: 10px;
color: $light-text;
}
.btn {
display: inline-block;
}
.bg-img{
position: absolute;
top: 40px;
opacity: 0.1;
transform: rotate(-45deg);
right: -40px;
}
}
h6{
font-size:14px;
}
}
.file-manager{
h5{
font-size:18px;
font-weight:600;
}
>h6 {
opacity: 0.6;
font-weight: 400 !important;
font-size: 15px;
margin-bottom: 20px;
color: $light-text ;
}
.files {
.file-box {
$show-numbers: true;
@if $show-numbers {
@for $i from 1 through 15 {
&:nth-child(#{$i}) {
animation-fill-mode: both;
animation: fadeIncustom .5s linear #{$i}00000ms;
}
}
}
}
h6 {
margin-top: 10px ;
margin-bottom: 0 ;
text-transform: capitalize;
}
}
p {
opacity: 0.9;
font-size: 12px;
color: $light-text;
}
}
.files,.folder {
h6 {
font-size: 14px;
}
}
.file-content {
.ellips {
position: absolute;
top: 30px;
right: 30px;
opacity: 0.7;
}
.form-inline {
border: 1px solid $light-gray;
border-radius: 5px;
padding: 0 20px;
i {
padding-right: 10px;
color: $dark-gray;
line-height: 3;
}
input {
&::-webkit-input-placeholder {
color: $dark-gray;
}
&:focus {
outline: none !important;
}
}
}
.search-form {
input {
padding: 5px 10px 5px 70px;
border-radius: 5px;
}
.form-group {
&:before {
left: 82px;
top: 37px;
}
&:after {
top: 39px;
left: 53px;
}
}
}
.btn {
svg {
height: 15px;
margin-right: 2px;
vertical-align: middle;
}
}
h4{
font-weight:600;
}
.folder {
.folder-box {
border: 1px solid $light-gray;
border-radius: 5px;
padding: 15px;
background-color:rgba($primary-color,0.05);
width: calc(25% - 15px);
display: inline-block;
$show-numbers: true;
@if $show-numbers {
@for $i from 1 through 15 {
&:nth-child(#{$i}) {
animation-fill-mode: both;
animation: fadeIncustom .5s linear #{$i}00000ms;
}
}
}
}
}
.files {
.file-box {
border: 1px solid $light-gray;
border-radius: 5px;
padding: 15px;
background-color:rgba($primary-color,0.05);
width: calc(25% - 15px);
display: inline-block;
position: relative;
.file-top {
height: 100px;
background-color: #fff;
border: 1px solid $light-gray;
border-radius: 5px;
font-size: 36px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
@media screen and (max-width: 1440px) {
.file-content .folder .folder-box .media {
display: block;
text-align: center;
.media-body {
margin-left:0 !important;
margin-top: 5px;
}
}
}
@media screen and (max-width: 1366px) {
.file-content {
.files{
margin-bottom: -10px;
.file-box {
width: calc(50% - 15px);
margin-bottom: 10px;
margin-right: 8px;
}
}
.card-header{
.btn{
padding:8px 15px;
}
}
.folder {
.folder-box{
padding:13px;
width: calc(50% - 15px);
margin-bottom:10px;
.media{
i{
font-size:30px;
}
}
}
}
}
.file-sidebar {
.btn{
padding: 8px 15px;
}
}
}
@media screen and (max-width: 768px) {
.file-content{
.folder{
margin-bottom: -10px;
.folder-box {
width: calc(50% - 15px);
margin-bottom: 10px;
margin-right: 8px;
}
}
.media {
display: block;
text-align: center;
.media-body{
margin-top:10px;
text-align: center !important;
}
}
}
}
@media screen and (max-width: 420px) {
.file-content .folder .folder-box, .file-content .files .file-box {
width:calc(100%);
margin-right:unset;
}
.file-content {
h4{
font-size:20px;
}
.card-header {
.btn{
padding: 7px 10px;
font-size: 12px;
}
}
}
.file-manager {
> h6{
font-size:14px;
}
}
}
/**=====================
File Manager
==========================**/

70
public/assets/scss/theme/_footer.scss Normal file
View File

@@ -0,0 +1,70 @@
/**=====================
47. Footer CSS Start
==========================**/
.footer-links{
text-align: $footer_link_align;
li{
display: inline-block;
padding-right: 15px;
a{
font-size: 12px;
}
}
}
footer{
background-color: $footer_bg_color;
padding: 15px;
bottom: 0;
left: 0;
margin-left: 275px;
a{
font-weight: 600;
}
&.footer-starter-kit{
bottom: -52px;
}
p{
font-size:14px;
font-weight:500;
color:$light-text;
}
}
.page-wrapper{
.page-body-wrapper{
.footer-dark{
background-color: $footer_dark_color;
p{
color: $white !important;
}
li{
a{
color: $footer_dark__txt_color;
}
}
}
}
}
.footer-fix{
width: calc(100% - 255px);
position: fixed;
}
.page-wrapper.horizontal-wrapper{
.page-body-wrapper{
footer{
transition: all 0.3s ease;
bottom: 0;
z-index: 8;
margin-left: 0;
p{
color: $theme-body-font-color;
i{
color: $secondary-color;
margin-left: 5px;
}
}
}
}
}
/**=====================
47. Footer CSS Ends
==========================**/

86
public/assets/scss/theme/_form-input.scss Normal file
View File

@@ -0,0 +1,86 @@
/**=====================
29. Form Input CSS Start
==========================**/
%input-mixin1 {
position: absolute;
z-index: 2;
left: 10px;
font-size: 14px;
width: 20px;
margin-left: -2.5px;
text-align: center;
padding: 10px 0;
top: 1px;
}
%input-mixin2 {
position: absolute;
z-index: 2;
left: 10px;
font-size: 14px;
width: 20px;
margin-left: -2.5px;
text-align: center;
padding: 10px 0;
top: 1px;
}
.input-group-square {
.input-group-text ,.form-control{
border-radius: 0;
}
}
.input-group-solid {
.input-group-text ,.form-control{
background: $light-gray;
}
}
.input-group-air {
box-shadow: 0 3px 20px 0 $light-semi-gray;
}
.icon-addon {
position: relative;
color: $color-scarpa;
display: block;
&:after {
display: table;
content: "";
clear: both;
}
&:before {
display: table;
content: "";
}
.addon-md {
.form-control {
padding-left: 30px;
float: left;
font-weight: normal;
}
.glyphicon {
@extend %input-mixin1;
}
.fa {
@extend %input-mixin1;
}
}
.form-control {
padding-left: 30px;
float: left;
font-weight: normal;
}
.glyphicon,.fa {
@extend %input-mixin2;
}
}
.pill-input-group div {
&:last-child span {
border-top-right-radius: 1.3rem;
border-bottom-right-radius: 1.3rem;
}
&:first-child span {
border-top-left-radius: 1.3rem;
border-bottom-left-radius: 1.3rem;
}
}
/**=====================
29. Form Input CSS Ends
==========================**/

62
public/assets/scss/theme/_form-widgets.scss Normal file
View File

@@ -0,0 +1,62 @@
/**========================
65. Formwidgets CSS Start
=============================**/
.clockpicker-popover {
.popover-title{
border-color:$light-gray;
}
.popover-content{
background-color: rgba($primary-color,0.05);
}
}
// date range picker //
.date-range-picker{
margin-bottom:-25px;
.daterange-card{
border:1px solid $light-gray;
padding:30px;
height:100%;
.form-group{
margin-bottom:unset;
}
}
>div{
margin-bottom:25px;
}
}
@media screen and (max-width:1199px){
.card {
.card-header {
h5{
font-size:20px;
}
}
}
}
@media screen and (max-width:1199px){
.date-range-picker {
.daterange-card{
padding:20px;
}
}
}
@media screen and (max-width:575px){
.date-range-picker {
.daterange-card{
padding:15px;
}
}
}
/**========================
65. Formwidgets CSS end
=============================**/

304
public/assets/scss/theme/_form-wizard.scss Normal file
View File

@@ -0,0 +1,304 @@
/**===========================
48. Form Wizard CSS Start
=============================**/
/*Form Wizard One Start*/
.form-wizard{
.tab {
display: none;
}
.btn-mb{
margin-bottom: 30px;
}
.step {
height: 10px;
width: 10px;
margin: 0 2px;
background-color: $primary-color;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
&.active {
opacity: 1;
}
&.finish {
background-color: $secondary-color;
}
}
}
/*Form Wizard One ends*/
/*Form Wizard Two Start*/
.stepwizard {
display: table;
width: 100%;
position: relative;
margin-bottom: 30px;
.stepwizard-row {
display: table-row;
&:before {
top: 16px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: $light-gray;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
p {
margin-top: 10px;
}
button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.btn{
font-weight:600;
}
}
}
}
/*Form Wizard Two Ends*/
/*Form Wizard Three Start*/
.f1 {
fieldset {
display: none;
}
.input-error {
border-color: $danger-color;
}
.f1-steps {
overflow: hidden;
position: relative;
margin-top: 30px;
margin-bottom: 30px;
.f1-progress {
position:absolute;
top:24px;
width:100%;
height:1px;
background-color:$light-gray;
.f1-progress-line {
height:1px;
background-color:$primary-color;
width:16%;
}
}
.f1-step {
position: relative;
float: left;
width: 33.333333%;
text-align:center;
&.activated {
.f1-step-icon {
border: 1px solid $primary-color;
color: $primary-color;
line-height: 38px;
}
p {
color: $primary-color;
}
}
&.active {
.f1-step-icon {
background-color:$primary-color;
color:$white;
}
p {
color: $primary-color;
}
}
p {
color:$dark-gray;
font-weight:600;
}
.f1-step-icon {
display:inline-block;
width:40px;
height:40px;
background-color:$light-gray;
font-size:16px;
color:$primary-color;
line-height: 40px;
border-radius: 50%;
}
}
}
.f1-buttons {
text-align: right;
}
}
/*Form Wizard Three ends*/
/*Form Wizard Four Start*/
.wizard-4 {
.buttonDisabled {
color: $dark-color;
background-color: $light-gray;
border: 1px solid $light-gray;
cursor: text;
}
.action-bar{
.btn{
float: right;
margin: 0 5px;
}
}
.step-container {
position: relative;
margin: 0;
padding: 0;
border: 0 solid $light-gray;
overflow: hidden;
clear: right;
width: 70%;
box-sizing: border-box;
div.content {
display: block;
position: absolute;
float: left;
height: 295px;
text-align: left;
overflow: auto;
z-index: 1;
width: 100%;
box-sizing: border-box;
clear: both;
}
}
.loader {
display: none;
}
.msg-box {
position: absolute;
display: none;
padding: 5px 10px;
background-color: $primary-color;
left: 32%;
bottom: 30px;
border-radius: 2px;
.content {
padding: 0;
float: left;
padding-top: 3px;
color: $white;
}
.close {
text-shadow: none;
color: $white;
margin-left: 10px;
opacity: 1;
}
}
ul.anchor {
position: relative;
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
border: 0 solid $light-gray;
background: transparent;
width: 30%;
box-sizing: border-box;
padding-right: 30px;
li {
position: relative;
display: block;
margin: 0;
padding: 0;
padding-bottom: 19px;
float: left;
clear: both;
width: 100%;
box-sizing: border-box;
z-index: 0;
a {
display: block;
position: relative;
float: left;
margin: 0;
padding: 10px 20px;
width: 100%;
box-sizing: border-box;
text-decoration: none;
outline-style: none;
z-index: 1;
font-size: 18px;
small{
display: block;
font-size: 14px;
}
.stepNumber {
position: relative;
float: left;
width: 30px;
text-align: center;
padding: 5px;
padding-top: 0;
}
&.selected {
color: $white;
background: $primary-color;
cursor: text;
border-radius: 5px;
}
&.done {
position: relative;
color: $white;
background: $secondary-color;
z-index: 99;
border-radius: 5px;
}
&.disabled {
color: $dark-gray;
background: $light-gray;
cursor: text;
border-radius: 5px;
}
&.error {
color: $dark-gray;
background: $pitch-color ;
border: 1px solid $danger-color;
&:hover {
color: $black;
}
}
}
}
}
}
@media (max-width:575px){
.f1 {
.f1-steps {
.f1-step {
.f1-step-icon{
width:35px;
height:35px;
font-size:14px;
}
}
.f1-progress{
top:20px;
}
}
}
}
/*Form Wizard Four Ends*/
/**=====================
48. Form Wizard CSS Ends
==========================**/

191
public/assets/scss/theme/_forms.scss Normal file
View File

@@ -0,0 +1,191 @@
/**=====================
26. Form CSS Start
==========================**/
.height-35{
height: 35px !important;
}
label{
margin-bottom:5px;
font-weight:600;
}
.form-group{
margin-bottom:20px;
}
.form-control,.form-select{
background-color:$white;
font-size: 14px;
border-color: $light-gray;
color:$light-font;
&:focus{
border-color: $light-gray;
background-color: $white;
box-shadow: 0 0 0 0.2rem rgba(171, 140, 228, 0.05);
}
}
.theme-form {
.form-control{
:focus {
box-shadow: 0 0 0 0.2rem rgba(171, 140, 228, 0.05);
}
}
&.sm-form{
.form-group{
margin-bottom: $sm-form-margin-bottom;
}
}
.form-group {
margin-bottom: $form-group-margin-bottom;
textarea{
border-color: $form-input-border-color;
&::-webkit-input-placeholder{
color: $form-placeholder-color;
font-size: $form-placeholder-font-size;
letter-spacing: $form-placeholder-letter-spacing;
font-weight: $form-placeholder-font-weight;
}
}
input[type=text], input[type=email], input[type=search],
input[type=password], input[type=number], input[type=tel], input[type=date], input[type=datetime-local]
, input[type=time], input[type=datetime-local], input[type=month],input[type=week],
input[type=url],input[type=file], select {
border-color: $light-gray;
// background-color: $form-input-bg-color;
font-size: $form-placeholder-font-size;
color: $form-placeholder-color;
&::-webkit-input-placeholder{
color: $form-placeholder-color;
font-size: $form-placeholder-font-size;
letter-spacing: $form-placeholder-letter-spacing;
font-weight: $form-placeholder-font-weight;
}
}
select.form-control:not([size]):not([multiple]){
border-color: $form-input-border-color;
font-size: $form-placeholder-font-size;
}
}
.checkbox {
label {
padding-left: 10px;
}
}
.form-divider {
position: relative;
clear: both;
height: 0;
margin: 30px 0;
border-top: 1px solid $light-semi-gray;
&:before {
position: absolute;
top: -11px;
left: 40%;
margin-left: -10px;
padding: 0 5px;
content: "Or Signup With";
color: $theme-font-color;
background: $white;
}
}
.login-divider {
position: relative;
clear: both;
height: 0;
margin: 30px 0;
border-top: 1px solid $light-semi-gray;
&:before {
position: absolute;
top: -11px;
left: 40%;
margin-left: -10px;
padding: 0 5px;
color: $theme-font-color;
background: $white;
content: "Or Login With";
}
}
.btn-fb {
background-color: $fb;
color: $white;
width: 100%;
}
.btn-twitter {
background-color: $twitter;
color: $white;
width: 100%;
}
.btn-google {
background-color: $google-plus;
color: $white;
width: 100%;
}
}
.form-inline{
display: -webkit-inline-box;
.form-group{
margin-right: 15px;
.col-form-label
{
margin-right: 5px;
}
}
}
.search-form{
.form-group{
&:before{
position: absolute;
content: "";
width:1px;
height:25px;
background:#e8ebf2;
left:82px;
top:50px;
}
&:after{
position: absolute;
content: "\f002";
font-family: FontAwesome;
top:50px;
left:53px;
color: #8e8e8e;
}
}
input{
border: 1px solid $light-gray;
padding: 10px 10px 10px 70px;
border-radius:50px;
}
}
.form-label-align-right{
label{
text-align:right;
padding-top: 17px;
font-weight: 500;
}
}
.custom-file-label{
line-height: 1.8;
&::after{
line-height: 1.8;
}
}
.input-group-text{
border-color:$light-gray;
font-weight:500;
}
.dropdown-menu{
border: 1px solid $light-gray;
}
.animated-modal {
.form-select{
display: inline-block;
width: auto;
vertical-align: middle;
}
}
/**=====================
26. Form CSS Ends
==========================**/

425
public/assets/scss/theme/_gallery.scss Normal file
View File

@@ -0,0 +1,425 @@
/**=====================
45. Gallery CSS Start
==========================**/
.profile-img-style, .scroll-bar-wrap {
img {
width: 100%;
}
}
.gallery{
margin-bottom: -30px;
> a{
margin-bottom: 30px;
&:before{
content: "\edee";
font-family: $font-ICO;
position: absolute;
height: calc(100% - 10px);
left: 20px;
width: calc(100% - 40px);
background-color: rgba(255, 255, 255, 0.27);
top: 5px;
transform: scale(0);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: $black;
}
&:hover{
&:before{
transform: scale(1);
transition: all 0.3s ease;
}
}
.img-thumbnail {
border-radius: 0;
}
}
}
.gallery-with-description{
margin-bottom: -30px;
a{
> div{
padding: 10px;
border: 1px solid lighten($dark-color , 70%);
margin-bottom: 30px;
}
&:hover{
text-decoration: none !important;
}
}
h4{
color: $dark-color;
margin-top:15px;
font-size:18px;
font-weight:600;
}
p{
color: $light-text;
}
}
.lg-backdrop{
background-color: $white;
}
.lg-outer{
.lg-actions {
.lg-next,.lg-prev{
background-color: rgb(255, 255, 255);
border: 1px solid $light-semi-gray;
&:hover{
color: $dark-color;
}
}
}
.lg-toolbar {
background-color: rgba(255, 255, 255, 0.45);
border-bottom: 1px solid $dark-color;
.lg-icon:hover{
color: $dark-color;
}
}
#lg-counter {
color: $dark-color;
}
.lg-sub-html{
background-color: rgba(255, 255, 255, 0.45);
h4{
font-size: inherit;
color: $dark-color;
}
p{
color: $dark-color;
}
}
.lg-thumb-outer{
background-color: $light-gray;
}
.lg-thumb-item{
padding: 4px;
border: 1px solid $light-semi-gray;
border-radius: 0;
.active,&:hover{
border-color: $black;
}
}
}
.gallery{
a{
&:before,&:after{
content: none;
}
}
.img-hover{
> div{
overflow: hidden;
}
}
.hover-1{
img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
&:hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
}
.hover-2{
img {
width: 100%;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
transform: translateX(0px);
}
&:hover{
img{
transform: translateX(40px) scale(1.2);
}
}
}
.hover-3{
img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
-webkit-transform: scale(1);
transform: scale(1);
}
}
}
.hover-4{
img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
-webkit-transform: scale(1);
transform: scale(1);
}
}
}
.hover-5{
img {
margin-left: 30px;
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
margin-left: 0;
}
}
}
.hover-6{
img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
}
}
.hover-7{
img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
-webkit-filter: blur(0);
filter: blur(0);
}
}
}
.hover-8{
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}
}
.hover-9{
img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
-webkit-filter: sepia(0);
filter: sepia(0);
}
}
}
.hover-10{
img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
}
}
.hover-11{
img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
&:hover{
img{
opacity: .5;
}
}
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
.hover-13{
&:hover{
img{
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
}
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
.hover-14{
div{
position: relative;
&:before{
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
&:hover{
&:before{
-webkit-animation: shine .75s;
animation: shine .75s;
}
}
}
}
.hover-15{
div{
position: relative;
&:before{
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
&:hover{
&:before{
-webkit-animation: circle .75s;
animation: circle .75s;
}
}
}
}
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
* {
box-sizing: border-box;
&:after, &:before {
box-sizing: border-box;
}
}
.grid {
position: relative;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
img{
max-width: 100%;
padding: 0.25rem;
background-color: $white;
border: 1px solid #dee2e6;
}
}
.gallery-with-description {
.grid-item {
img {
border: 0;
padding: 0;
}
}
}
/**=====================
45. Gallery CSS Ends
==========================**/

521
public/assets/scss/theme/_general.scss Normal file
View File

@@ -0,0 +1,521 @@
/**=====================
01. General CSS Start
==========================**/
//Custom css Start
html{
max-width: 100vw;
overflow-x: hidden;
}
body {
font-size:$body-font-size;
overflow-x:hidden;
font-family:$font-montserrat;
color: $theme-body-font-color;
background-color:$light-background;
}
ul {
padding-left: $ul-padding-left;
list-style-type: none;
margin-bottom: 0;
padding-right: $ul-padding-right;
}
a{
color: $primary-color;
text-decoration: none;
&:hover{
text-decoration: none;
}
}
.btn-link{
text-decoration:none;
}
*a{
color: $primary-color;
text-decoration: none;
&:hover{
text-decoration: none;
}
}
*.btn:focus{
box-shadow : $btn-focus-box-shadow !important;
}
h6{
font-weight:600;
}
p {
font-size: $paragraph-font-size;
line-height: $paragraph-line-height;
letter-spacing: $paragraph-letter-spacing;
}
span {
font-weight:500;
}
.dropdown-item{
&:active,&.active {
background-color: $primary-color;
}
}
hr{
background-color:$light-gray;
opacity:1;
}
.theme-form{
.col-form-label{
color: $semi-dark;
}
}
.form-label{
color: $semi-dark;
font-weight: 500;
}
.figure {
&.text-center {
blockquote {
border: none !important;
}
}
&.text-end {
blockquote {
border-left: none !important;
border-right: 4px solid $primary-color;
[dir="rtl"] & {
border-right: none;
border-left: 4px solid $primary-color !important;
}
}
}
}
.navs-icon {
padding: 30px;
li {
padding: 9px 0;
font-family: system-ui;
ul {
padding-top: 9px;
}
}
}
.pl-navs-inline {
padding-left: 30px !important;
}
.icon-last {
.form-inline {
.form-group {
display: flex;
}
}
}
code{
color: $code-tag-color !important;
background-color: $code-tag-bg-color;
padding: $code-tag-padding;
margin: $code-tag-margin;
border-radius: $code-tag-border-radious;
}
blockquote{
border-left: 4px solid $primary-color;
padding: $blockquote-padding;
[dir="rtl"] & {
border-left: none;
border-right: 4px solid $primary-color;
}
}
blockquote{
&.text-center{
border: none;
padding: $blockquote-padding;
}
}
blockquote{
&.text-end{
border-left: none;
border-right: $blockquote-border;
padding: $blockquote-padding;
}
}
:focus{
outline: none;
}
.disabled {
cursor: not-allowed;
opacity: 0.5;
}
svg{
vertical-align: baseline;
}
input {
&:focus {
outline-color: $transparent-color;
}
}
.font-nunito {
font-family: $font-nunito, $font-serif;
}
.font-roboto{
font-family:$font-roboto;
}
.font-rubik {
font-family: $font-rubik, $font-serif;
}
.media-widgets {
.media-body {
margin-bottom: 30px;
}
}
.rating-star{
display:flex;
align-items:center;
li{
i{
color:$yellow;
}
}
}
// setting rotation
@keyframes rotateInSetting {
0% {
transform-origin: center;
transform: rotate(-200deg);
}
to {
transform-origin: center;
transform: none;
}
}
.setting-primary, .setting-secondary, .setting-white{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50px;
svg {
width: 15px;
stroke-width: 2.5px;
animation: rotateInSetting 1.5s ease infinite;
}
}
.setting-primary{
background-color: rgba($primary-color, 0.1);
svg{
color: $primary-color;
}
i{
color: $primary-color;
}
&:hover{
background-color:$primary-color;
svg{
color:$white;
}
i{
color: $white;
}
}
}
.setting-secondary{
background-color: rgba($secondary-color, 0.1);
svg{
color: $secondary-color;
}
i{
color: $secondary-color;
}
&:hover{
background-color:$secondary-color;
svg{
color:$white;
}
i{
color: $white;
}
}
}
.setting-white{
background-color: rgba($white, 0.1);
svg{
color:$white;
}
i{
color:$white;
}
&:hover{
background-color:$white;
svg{
color:$primary-color;
}
i{
color:$primary-color;
}
}
}
.setting-bg-primary {
background-color: rgba($primary-color, 0.1);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
svg {
width: 15px;
color: $primary-color;
stroke-width: 2.5px;
animation: rotateInSetting 1.5s ease infinite;
}
}
//Custom css End
//Typography css start
.typography {
h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6 {
margin: 20px 0;
margin-top: 0;
&:last-child{
margin-bottom: 0;
}
}
small {
padding-left: $small-tag-padding;
color: $small-tag-color;
}
}
pre{
background-color: $pre-tag-bg-color;
padding: $pre-tag-padding;
}
a{
&:hover{
text-decoration: none;
color: $primary-color;
}
}
.typography{
.blockquote-footer{
background-color:$light-background;
}
}
//Typography css end
.owl-theme {
.owl-dots {
.owl-dot{
span{
background: lighten($primary-color, 20%);
}
&.active,&:hover {
span {
background: $primary-color;
}
}
}
}
.owl-nav{
&.disabled {
&+ .owl-dots {
margin-bottom: -10px;
margin-top: 25px;
}
}
}
}
.click2edit{
&~.note-editor{
&.note-frame{
margin-bottom: 30px;
}
}
}
.note-editor{
p{
color:$light-text;
}
&.note-frame {
border-color: $light-gray;
}
i{
color: $primary-color;
}
span{
color: $primary-color;
}
}
.note-editor{
&.note-frame {
border-color: $light-gray;
}
}
// modal page
.modal {
.modal-body {
.card {
box-shadow: none !important;
}
}
}
.modal-dialog{
.modal-content{
.modal-body{
p{
a{
margin-right: 0;
}
}
}
}
}
.clipboaard-container{
p{
font-weight:600;
}
h6{
line-height: 1.8;
}
}
// index page notify
.alert-theme{
button{
top: 24px !important;
right: 30px !important;
color: $primary-color;
}
span{
+ span{
+ span{
border-left: 5px solid $primary-color;
background-color: $white;
border-radius: 4px;
box-shadow: 0 2px 14px -3px rgba($black, 0.2);
}
}
}
i{
padding: 20px;
padding-right: 0 !important;
margin-right: 10px !important;
}
.progress {
margin-top: -2px !important;
height: 2px;
.progress-bar {
background-color: $primary-color;
}
}
}
.alert-copy{
border: 1px solid $primary-color;
line-height: 1;
display: inline-block;
width: 300px;
color: $white;
background-color: $primary-color;
box-shadow: 3px 3px 5px 0 #9b9b9b;
.close{
box-shadow: none;
color: $white;
line-height: 1.4;
font-weight: 100;
}
}
.ace-editor {
height: 400px;
width: 100%;
}
.editor-toolbar{
width: 100% !important;
}
.CodeMirror{
top:0!important;
}
.border{
border: 1px solid $light-gray !important;
}
// rangeslider
.irs-from, .irs-to, .irs-single {
background: $primary-color;
}
// medaia //
.media{
display: flex;
align-items: flex-start;
}
.media-body{
flex: 1;
}
.row {
> div {
position: relative;
}
}
[class*="col-"] {
position: relative;
}
.cke_top{
background-color:$light-background;
}
.cke_wysiwyg_frame,.cke_wysiwyg_div{
background-color:$light-background;
}
// modal page css //
.modal-header,.modal-footer,.modal-content{
.btn-close{
position: absolute;
top: 30px;
right: 25px;
}
}
.btn-close{
&:focus{
box-shadow:none;
}
}
// photoswipe //
.my-gallery{
&.gallery-with-description {
img{
border-color: $light-gray !important;
}
}
}
/**=====================
01. General CSS Ends
==========================**/

865
public/assets/scss/theme/_generic.scss Normal file
View File

@@ -0,0 +1,865 @@
/**=====================
02. Generic CSS Start
==========================**/
/*====== Padding css starts ======*/
$i:0;
@while $i<=50 {
.p-#{$i} {
padding:#{$i}px;
}
$i:$i+5;
}
/*====== Padding css ends ======*/
/*====== Padding-left css starts ======*/
$i:0;
@while $i<=50 {
.p-l-#{$i} {
padding-left:#{$i}px;
}
$i:$i+5;
}
/*====== Padding-left css ends ======*/
/*====== Padding-top css starts ======*/
$i:0;
@while $i<=50 {
.p-t-#{$i} {
padding-top:#{$i}px !important;
}
$i:$i+5;
}
/*====== Padding-top css ends ======*/
/*====== Padding-bottom css starts ======*/
$i:0;
@while $i<=50 {
.p-b-#{$i} {
padding-bottom:#{$i}px !important;
}
$i:$i+5;
}
/*====== Padding-bottom css ends ======*/
/*====== Padding-right css starts ======*/
$i:0;
@while $i<=50 {
.p-r-#{$i} {
padding-right:#{$i}px;
}
$i:$i+5;
}
/*====== Padding-right css ends ======*/
/*====== Margin css starts ======*/
$i:0;
@while $i<=50 {
.m-#{$i} {
margin:#{$i}px !important;
}
$i:$i+5;
}
/*====== Margin css ends ======*/
/*====== Margin-top css starts ======*/
$i:0;
@while $i<=50 {
.m-t-#{$i} {
margin-top:#{$i}px !important;
}
$i:$i+5;
}
/*====== Margin-top css ends ======*/
/*====== Margin-Bottom css starts ======*/
$i:0;
@while $i<=50 {
.m-b-#{$i} {
margin-bottom:#{$i}px !important;
}
$i:$i+5;
}
/*====== Margin-Bottom css ends ======*/
/*====== Margin-left css starts ======*/
$i:0;
@while $i<=50 {
.m-l-#{$i} {
margin-left:#{$i}px !important;
}
$i:$i+5;
}
/*====== Margin-left css ends ======*/
/*====== Margin-right css starts ======*/
$i:0;
@while $i<=50 {
.m-r-#{$i} {
margin-right:#{$i}px;
}
$i:$i+5;
}
/*====== Margin-right css ends ======*/
/*====== Border-radius css starts ======*/
$i:0;
@while $i<=10 {
.b-r-#{$i} {
border-radius:#{$i}px !important;
}
$i:$i+1;
}
/*====== Border-radius css ends ======*/
/*====== Font-size css starts ======*/
$i:12;
@while $i<=100 {
.f-#{$i} {
font-size:#{$i}px;
}
$i:$i+2;
}
/*====== Font-size css ends ======*/
/*====== Font-weight css starts ======*/
$i:100,
200,
300,
400,
500,
600,
700,
800,
900;
@each $val in $i {
.f-w-#{$val} {
font-weight: $val;
}
}
/*====== Font-weight css ends ======*/
/*====== Font-style css starts ======*/
$i:normal,
italic,
oblique,
initial,
inherit;
@each $val in $i {
.f-s-#{$val} {
font-style: $val;
}
}
/*====== Font-style css ends ======*/
/*====== Text-Decoration css starts ======*/
$i:overline,
line-through,
underline,
dashed,
blink,
dotted,
initial,
none,
solid,
wavy,
inherit,
double;
@each $val in $i {
.text-#{$val} {
text-decoration: $val;
}
}
/*====== Text-Decoration css ends ======*/
/*====== Vertical-Align css starts ======*/
$i:baseline,
sub,
super,
top,
text-top,
middle,
bottom,
text-bottom,
initial,
inherit;
@each $val in $i {
.#{$val} {
vertical-align: $val;
}
}
/*====== Vertical-Align css ends ======*/
/*====== Position css starts ======*/
$i:static,
absolute,
fixed,
relative,
initial,
inherit;
@each $val in $i {
.p-#{$val} {
position: $val;
}
}
/*====== Position css ends ======*/
/*====== Float css starts ======*/
$i:left,
right,
none;
@each $val in $i {
.f-#{$val} {
float: $val;
}
}
/*====== Float css ends ======*/
/*====== Overflow css starts ======*/
$i:hidden,
visible,
auto;
@each $val in $i {
.o-#{$val} {
overflow: $val;
}
}
/*====== Overflow css ends ======*/
/*====== Image-sizes css starts ======*/
$i:10;
@while $i<=100 {
.img-#{$i} {
width:#{$i}px !important;
}
$i:$i+10;
}
/*====== Image-sizes css ends ======*/
/*======= Text css starts ===========*/
$text-name:
primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$text-color : $primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $text-name {
$i: index($text-name, $var);
.font-#{$var} {
color: nth($text-color, $i) !important;
}
}
/*======= Text css ends ===========*/
/*======= Font bold start ===========*/
@mixin font-bold($boldval){
.fontbold-#{$boldval}{
font-weight:#{$boldval};
}
}
@include font-bold(100);
@include font-bold(200);
@include font-bold(300);
@include font-bold(400);
@include font-bold(500);
@include font-bold(600);
@include font-bold(700);
@include font-bold(800);
@include font-bold(900);
/*======= Font bold end ===========*/
/*======= Label-color css starts ======= */
.label {
border-radius: 2px;
color: $white;
font-size: 12px;
line-height: 1;
margin-bottom: 0;
text-transform: capitalize;
}
$label-name:theme,
primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$label-color: $primary-color,
$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $label-name {
$i: index($label-name, $var);
.label-#{$var} {
background-color: nth($label-color, $i);
}
}
/*======= Label-color css ends ======= */
/*======= Badge-color css starts ======= */
$badge-name:
primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$badge-color:
$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $badge-name {
$i: index($badge-name, $var);
.badge-#{$var} {
background-color: nth($badge-color, $i);
@if($badge-name == "light"){
color: $theme-body-font-color !important;
}
}
}
/*======= Badge-color css end ======= */
/*======= Background-color css starts ======= */
$background-name:
primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$background-color:
$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $background-name {
$i: index($background-name, $var);
.bg-#{$var} {
background-color: nth($background-color, $i) !important;
color: $white;
}
}
/*======= Background-color css end ======= */
/*======= Font-color css starts ======= */
$text-name:primary,
secondary,
success,
danger,
info,
light,
dark,
warning,
google-plus,
twitter,
linkedin,
fb;
$label-color:$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color,
$google-plus,
$twitter,
$linkedin,
$fb;
@each $var in $text-name {
$i: index($text-name, $var);
.txt-#{$var} {
color: nth($label-color, $i) !important;
}
}
.txt-white{
color: $white !important;
}
/*======= Font-color css end ======= */
/*======= Button-color css starts ======= */
// btn--color//
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.btn-#{$btn-name}{
background-color: $btn-color !important;
border-color: $btn-color !important;
&.disabled, &:disabled {
background-color: $btn-color !important;
border-color: $btn-color !important;
}
// &:hover,&:focus,&:active,&.active{
// background-color: darken( $btn-color, 10% ) !important;
// border-color: darken( $btn-color, 10% ) !important;
// }
&:focus{
box-shadow: 0 0 0 0.2rem lighten( $btn-color, 30% );
}
}
}
.btn-primary-light {
background-color: rgba($primary-color, 0.1) !important;
border:none !important;
color:$primary-color;
transition: 0.5s;
&:focus, &:hover {
background-color: rgba($primary-color, 0.5) !important;
color: $white;
transition: 0.5s;
}
}
/*======= Button-color css ends ======= */
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.btn-outline-#{$btn-name}-2x{
border-width: 2px;
border-color:$btn-color;
color: $btn-color;
background-color: transparent;
&:hover,&:focus,&:active,&.active{
color: white;
background-color: darken( $btn-color, 10%) !important;
border-color: darken( $btn-color, 10% )!important;
box-shadow: none;
}
}
}
// outline buttons//
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.btn-outline-#{$btn-name}{
border-color:$btn-color;
color: $btn-color;
background-color: transparent;
&.disabled{
color: $btn-color;
}
@if($btn-name == "light"){
color: $theme-body-font-color;
}
&:hover,&:focus,&:active,&.active{
color: white;
background-color: darken( $btn-color, 10%) !important;
border-color: darken( $btn-color, 10% ) !important;
}
}
}
//active button css //
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.btn-#{$btn-name}:not([disabled]):not(.disabled).active{
background-color:darken($btn-color,10%);
border-color:darken($btn-color,10%);
box-shadow: none !important;
&:hover,&:focus,&:active,&.active{
color: white;
background-color: darken( $btn-color, 10% );
border-color: darken( $btn-color, 10% );
}
}
}
//* active button css end *//
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.btn-outline-#{$btn-name}-2x:not([disabled]):not(.disabled).active{
background-color:$btn-color;
border-color:$btn-color;
box-shadow: none !important;
color: white;
&:hover,&:focus,&:active,&.active{
color: white;
box-shadow: none !important;
background-color: darken( $btn-color, 10% ) !important;
border-color: darken( $btn-color, 10% ) !important;
}
}
}
/*======= Table-Border-Bottom-color css starts ======= */
$border-name:primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$border-color:$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $border-name {
$i: index($border-name, $var);
table thead .border-bottom-#{$var} th,
table tbody .border-bottom-#{$var} th,
table tbody .border-bottom-#{$var} td {
border-bottom: 1px solid nth($border-color, $i);
}
}
/*======= Table-Border-Bottom-color css ends ======= */
/*======= Table styling css starts ======= */
$table-name:
primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$table-color:$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $table-name {
$i: index($table-name, $var);
.table-styling .table-#{$var},
.table-styling.table-#{$var} {
background-color: nth($border-color, $i);
color: $white !important;
border: 3px solid nth($border-color, $i);
thead {
background-color: darken(nth($border-color, $i), 10%);
border: 3px solid darken(nth($border-color, $i), 10%);
}
tr{
th,td{
color:$white;
}
}
th,
td {
background-color: transparent;
}
}
}
/*======= Table styling css ends ======= */
/*======= All-Borders-color css starts ======= */
$b-name:primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$b-color:$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $b-name {
$i: index($b-name, $var);
.b-#{$var} {
border: 1px solid nth($b-color, $i) !important;
}
.b-t-#{$var} {
border-top: 1px solid nth($b-color, $i) !important;
}
.b-b-#{$var} {
border-bottom: 1px solid nth($b-color, $i) !important;
}
.b-l-#{$var} {
border-left: 1px solid nth($b-color, $i) !important;
}
.b-r-#{$var} {
border-right: 1px solid nth($b-color, $i) !important;
}
}
/*======= All-Borders-color css ends ======= */
/*====== Border width css starts ======*/
$i:1;
@while $i<=10 {
.border-#{$i} {
border-width:#{$i}px !important;
}
$i:$i+1;
}
/*====== Border width css ends ======*/
.opacity-0{
opacity: 0;
}
.shadow-0{
box-shadow: none;
}
.map-block{
height: 350px;
width: 100%;
}
.map-js-height{
height: 500px;
}
/**====== custom scrollbar css start ======**/
.custom-scrollbar {
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px $light-gray;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(68, 102, 242, 0.15);
}
}
/**====== Custom scrollbar css end ======**/
/**====== Animation css Start ======**/
.comment{
color: #9f9ba5;
font-style: italic;
}
.line{
color: $dark-color;
}
.line{
pre{
font-size: 100%;
}
}
/**====== Animation css end ======**/
/**====== list style css Start ======**/
.list-circle{
list-style: circle;
}
/**====== list style css end ======**/
/**====== Modal style css Start ======**/
.theme-close{
opacity: 1;
height: 40px;
width: 40px;
position: absolute;
z-index: 1;
right: 0;
background-color: $white !important;
border-radius: 5px;
}
/**====== Modal style css end ======**/
/**====== Animation css start ======**/
.options{
> div{
color: $gray-60;
display: inline-block;
padding: 2px 10px;
border: 1px solid;
margin: 0 8px 8px 0;
transition: all 0.3s ease;
&:hover{
background-color: $primary-color;
color: $white;
transition: all 0.3s ease;
}
}
}
/**====== Animation css Ends ======**/
.modal-footer{
flex-wrap: wrap;
}
.img-cropper {
#putData{
margin-bottom: 0;
}
.img-container{
min-height: auto;
margin-bottom: 0;
}
.docs-data{
> .input-group{
&:last-child{
margin-bottom: 0;
}
}
}
.docs-preview{
margin-top: 20px;
margin-bottom: 10px;
}
}
.dropzone {
.dz-preview {
.dz-error-message {
background: $white !important;
color: $primary-color !important;
border: 1px solid $primary-color;
&:after{
border-bottom: 6px solid $primary-color !important;
}
}
}
}
.typeahead{
.theme-form {
.form-group {
margin-bottom: 0;
}
}
}
.editor-statusbar {
border-bottom: 1px solid $light-gray;
}
.page-builder {
.ge-canvas{
&.ge-editing {
.row {
padding: 30px;
margin-bottom: 0;
}
}
&.ge-layout-desktop {
[class*="col-"]{
width: inherit !important;
}
}
}
.btn-screen {
padding: 0 18px 0 0;
}
}
.datepicker{
z-index: 99;
}
/**=====================
02. Generic CSS Ends
==========================**/

51
public/assets/scss/theme/_grid.scss Normal file
View File

@@ -0,0 +1,51 @@
/**=====================
08. GRID CSS Start
==========================**/
.grid-showcase {
margin-bottom: -10px;
span {
display: block;
border: 1px solid $light-gray;
padding: 10px;
margin-bottom: 10px;
text-align: center;
background-color: rgba($primary-color,0.1);
color: $primary-color;
font-weight:600;
}
}
.grid-align{
margin-bottom: -30px;
.row{
padding: 15px 0;
min-height: 10rem;
border: 1px solid rgba($primary-color, 0.03);
margin-bottom: 30px;
background-color: rgba($primary-color, 0.03);
}
}
.grid-wrrapper{
.table-striped {
tbody {
tr{
&:nth-of-type(odd){
--bs-table-accent-bg:unset;
background-color: rgba($primary-color, 0.1);
color: $primary-color;
th,td{
color: $primary-color;
}
}
}
}
}
}
/**=====================
08. GRID CSS Ends
==========================**/

927
public/assets/scss/theme/_header.scss Normal file
View File

@@ -0,0 +1,927 @@
$header-size: 76px;
/**=====================
05. Header CSS Start
==========================**/
%common {
border-left-color: $dark-color;
transition: $sidebar-transition;
}
%for-animated-hover {
box-shadow: 0 0 12px 3px rgba(25,124,207,0.05);
transform: translateY(30px);
opacity: 0;
visibility: hidden;
left: 0;
}
%for-animated-hover-box{
opacity: 1;
transform: translateY(0px);
visibility: visible;
&:before{
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid $white;
content: "";
top: -7px;
position: absolute;
left: 10px;
z-index: 2;
}
&:after{
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid $light-background;
content: "";
top: -7px;
position: absolute;
left: 10px;
z-index: 1;
}
}
%sidebar-icon {
display: block;
transform: rotateX(0deg);
z-index: 1;
background-color: $white;
color: $light-background;
font-size: 14px;
opacity: 1;
margin-top: -70px;
padding: 10px 0;
text-align: left;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
position: absolute;
width: 245px;
margin-left: 115px;
}
/*======= Page Header css Start ======= */
.page-wrapper{
.page-main-header{
position: $main-header-position;
top: $main-header-top;
z-index: $main-header-z-index;
width: 100%;
display: flex;
align-items: center;
transition: $sidebar-transition;
background-color: $white;
box-shadow: $main-header-shadow;
&.open{
margin-left: 0;
width: 100%;
transition: $sidebar-transition;
}
}
.page-body-wrapper{
background-color: $light-background;
.page-body{
min-height: calc(100vh - #{$header-size});
margin-top: $header-size;
padding: $page-body-padding;
position: relative;
transition: 0.5s;
background-color: $light-background;
}
.page-header{
// padding-top: $page-header-padding;
padding-bottom: $page-header-padding;
.row{
align-items: center;
h3{
font-size: $page-title-font-size;
margin-bottom: $page-title-margin-bottom;
font-weight: $page-title-font-weight;
text-transform: $page-title-text-tranform;
small{
display: $page-small-title-display;
font-size: $page-small-title-font-size;
margin-bottom: $page-small-title-margin-bottom;
text-transform: $page-small-title-text-transform;
color: $theme-body-sub-title-color;
}
}
}
.breadcrumb{
background-color: $transparent-color;
padding: 0 ;
margin-top: 5px;
margin-bottom: 0;
li{
color: $light-font;
font-size: 13px;
letter-spacing: 1px;
font-weight: 500;
}
.breadcrumb-item{
&+.breadcrumb-item{
&:before{
content: $breadcrumb-content;
}
}
a{
color: $primary-color;
}
}
}
}
}
}
/*======= Page Header css ends ======= */
/**======Main Header css Start ======**/
.page-main-header{
max-width: 100vw;
.main-header-right{
width: 100%;
display: flex;
align-items: center;
position: relative;
.main-header-left {
display:flex;
width:290px;
justify-content: space-between;
align-items: center;
padding: $main-header-right-padding;
border-right: 1px solid $light-gray;
.dark-logo-wrapper{
display:none;
}
}
.left-menu-header {
padding: $main-header-right-padding;
ul{
li{
.search-form{
.search-bg{
display:flex;
align-items:center;
width: 100%;
i{
text-align: center;
}
}
}
}
}
}
.nav-right {
.nav-menus {
padding: 20px 40px;
}
.profile-dropdown{
width: 160px;
top: 57px;
right: -12px;
padding: 10px;
li{
padding: 10px !important;
svg{
width: 16px;
vertical-align: bottom;
margin-right: 10px;
}
}
}
}
.toggle-sidebar {
cursor: pointer;
padding:5px 8px;
border-radius:5px;
transition:all 0.3s ease;
svg {
width: 20px;
color: $primary-color;
}
&:hover{
background-color:rgba($primary-color, 0.1);
}
}
.vertical-mobile-sidebar {
display: none;
}
.nav-left{
i{
margin-right: 20px;
}
input:focus{
outline: 0 !important;
}
}
.left-menu-header {
ul {
li {
i {
color: $primary-color;
}
.search-form {
font-family: $font-roboto;
input {
padding: 0 20px;
border: none;
background: $transparent-color;
color: $theme-body-sub-title-color;
font-weight: 500;
&::placeholder {
color: $theme-body-sub-title-color;
font-weight: 500;
}
}
}
}
}
}
.nav-right{
text-align: left;
ul{
li{
svg{
vertical-align: $main-header-right-nav-icon-align;
width: $main-header-right-nav-icon-size;
height: $main-header-right-nav-icon-size;
path{
color: $main-header-right-nav-icon-color;
}
}
&:last-child {
margin-right: 0;
}
.mode{
.mode-moon,.mode-sun{
position: absolute;
top: 0;
left: 0;
}
.mode-sun{
opacity:0;
visibility: hidden;
z-index: 1;
&.show{
opacity: 1;
visibility: visible;
}
}
i{
vertical-align: middle;
font-size: 18px;
}
}
}
}
.onhover-show-div {
li {
display: block;
}
}
> ul {
padding: 0 0;
}
.btn-primary-light {
padding:6px 20px;
font-weight:600;
svg {
margin-right: 10px;
path {
color: $primary-color;
transition: 0.5s;
}
}
&:focus,&:hover {
background-color:$primary-color !important;
color: $white;
a{
color: $white;
}
svg {
path {
color: $white;
transition: 0.5s;
}
}
}
}
&.right-menu {
ul {
justify-content:flex-end;
li {
position:relative;
.notification {
position: absolute;
top: -2px;
right: -9px;
padding: 5px 7px;
}
.profile-media {
.media-body {
margin-left: 15px;
span {
font-weight: 500;
}
p {
font-size: 12px;
line-height: 1;
color: rgba($theme-body-font-color, 0.7);
font-weight: 500;
}
}
}
&:hover{
background-color:rgba($primary-color,0.1);
.media {
.media-body{
>span{
color: $dark-card-inbox;
}
p{
color:$primary-color ;
}
}
p{
color:$primary-color ;
}
}
.btn{
svg{
stroke:$white;
}
}
}
}
}
}
.icon-user{
font-size: 16px;
}
>ul{
display: flex;
align-items: center;
> li{
position: relative;
padding: 6px 10px;
border-radius: 4px;
margin-right: 20px;
.badge {
padding: 4px 8px;
}
span{
letter-spacing: 0.9px;
.fa {
color: $gray-60;
}
ul{
left: inherit;
right: -10px;
width: 130px;
&:before,&:after{
left: inherit;
right: 10px;
}
li{
display: block;
a{
font-size: 14px;
color: $dark-color;
i{
margin-left: 10px;
font-size: 13px;
color: $dark-color;
}
}
}
}
}
}
.flag-icon{
font-size: 16px;
}
}
.chat-dropdown {
width: 330px;
top: 49px;
right: 0;
left: unset;
li {
padding: 15px;
+ li {
border-top: $card-border-color;
}
.media {
img {
width: 40px;
position: relative;
}
.media-body {
> span {
font-weight: 600;
color : $primary-color !important;
}
p {
margin-bottom: 0;
color : $dark-color !important;
}
}
>p{
color: $gray-60;
}
}
}
&:before, &:after {
right: 10px !important;
left: unset !important;
}
}
.bookmark-dropdown {
width:300px;
top:50px;
left:unset;
right:0;
border-radius:8px;
padding:15px;
&::before, &::after {
display: none;
}
.form-group {
.input-group {
.input-group-prepend {
.input-group-text {
background-color: $transparent-color;
height:100%;
}
}
.form-control {
border-left: none;
font-size: 13px;
&::placeholder {
color: $gray-60;
font-size: 13px;
}
}
}
}
ul {
li {
padding-top:10px;
padding-bottom:10px;
&:hover {
background-color: $light-background;
.bookmark-icon{
color:$primary-color;
}
}
.bookmark-icon {
margin-right: 15px;
vertical-align: bottom;
}
&.add-to-bookmark {
font-weight: 500;
transition: all 0.5s ease;
.pull-right {
svg {
color: $bookmark-icon-color;
transition: all 0.5s ease;
}
}
&:hover{
color:$primary-color;
.bookmark-icon {
stroke: $primary-color;
}
.pull-right {
svg {
color: $bookmark-icon-color;
fill: $bookmark-icon-color;
}
}
}
}
}
}
}
.notification-box {
position: relative;
svg {
animation: tada 1.5s ease infinite;
}
.dot-animated {
position: absolute;
right: -5px;
top: -6px;
width: 6px;
height: 6px;
border-radius: 100%;
content: '';
background-color: $danger-color;
animation: fadeIn 2s ease infinite;
}
}
.notification-dropdown{
top: 52px;
width: 300px;
right: -20px !important;
left: unset;
li {
padding: 15px !important;
.badge-primary {
background-color: rgba($primary-color, 0.1);
color: $primary-color;
}
.media {
.notification-bg {
width: 40px;
height: 40px;
border-radius: 100%;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
&.bg-light-primary {
background-color: rgba($primary-color, 0.1);
color: $primary-color;
}
&.bg-light-secondary {
background-color: rgba($secondary-color, 0.1);
color: $secondary-color;
svg {
path {
color: $secondary-color;
}
}
}
&.bg-light-success {
background-color: rgba($success-color, 0.1);
color: $success-color;
}
&.bg-light-danger {
background-color: rgba($danger-color, 0.1);
color: $danger-color;
path {
color: $danger-color;
}
}
}
.media-body {
p {
font-weight:700;
margin-bottom:0;
}
span {
font-size:12px;
color:$gray-60;
font-weight:500;
}
}
}
+ li {
border-top: $card-border-color;
}
&.noti-primary{
&:hover{
background-color:rgba($primary-color,0.1);
}
}
&.noti-secondary{
&:hover{
background-color: rgba($secondary-color,0.1);
.media {
.media-body {
p{
color: $secondary-color;
}
span{
color: $secondary-color;
}
}
}
}
}
&.noti-success{
&:hover{
background-color: rgba($success-color,0.1);
.media {
.media-body {
p{
color:$success-color;
}
span{
color:$success-color;
}
}
}
}
}
&.noti-danger{
&:hover{
background-color: rgba($danger-color,0.1);
.media {
.media-body {
p{
color: $danger-color;
}
span{
color: $danger-color;
}
}
}
}
}
&:hover{
.notification-bg{
&.bg-light-primary{
background-color: $primary-color;
color:$white;
}
&.bg-light-secondary{
background-color: $secondary-color;
color:$white;
svg {
path {
color:$white;
}
}
}
&.bg-light-success{
background-color:$success-color;
color:$white;
svg{
color:$white;
path{
color:$white;
}
}
}
&.bg-light-danger{
background-color: $danger-color;
color:$white;
path{
color:$white;
}
}
}
}
}
&:before, &:after {
right: 28px !important;
left: unset !important;
}
}
}
li{
display: inline-block;
position: relative;
}
}
}
.onhover-dropdown{
cursor: pointer;
position: relative;
&:hover{
.onhover-show-div{
@extend %for-animated-hover-box;
}
}
}
.onhover-show-div {
top: 80px;
position: absolute;
z-index: 8;
background-color:$white;
border: 1px solid $light-background;
transition: all linear 0.3s;
@extend %for-animated-hover;
li{
a{
svg{
margin-top: 0 !important;
path, line{
color: $theme-body-font-color !important;
}
}
}
}
}
/**======Main Header css Ends ======**/
/** ===== Vertical Menu css Start=====**/
.vertical-menu-main{
background: white;
position: fixed;
top: 88px;
z-index: 1;
width: 100%
}
.vertical-menu-mt{
margin-top: 148px !important;
margin-left: 0 !important;
.custom-card{
.card-header{
img{
margin-top: -146px !important;
}
}
}
}
.vertical-menu-main{
#main-nav{
#main-menu{
li{
a{
svg{
width: 15px;
height: 15px;
margin-right: 8px;
stroke-width: 2.5;
}
}
}
}
}
.mega-menu {
width: 1500px !important;
max-width: 1500px !important;
padding: 0;
left:-120px !important;
top: 65px !important;
}
}
/** ===== Vertical Menu css Ends=====**/
/*=======Mega menu css start=======*/
.mega-menu {
perspective: inherit;
position: static !important;
padding-top: 5px;
.default-according{
.card{
.btn-link{
font-weight: 500;
color: gray;
}
.card-body{
font-size: 12px;
}
}
}
.onhover-show-div{
width: 1500px;
}
.card-body{
padding: 20px;
}
.title {
color: $theme-body-font-color;
font-weight: 600;
border-bottom: 1px solid $light-semi-gray;
padding-bottom: 15px;
margin-bottom: 15px;
text-transform: uppercase;
}
div {
>div {
a {
margin-bottom: 0px;
display: inline-block;
color: $theme-body-sub-title-color;
}
}
}
.custom-nav-img {
position: static;
.desk {
line-height: 25px;
font-size: 14px;
color: $theme-body-sub-title-color;
}
}
.list-unstyled {
div {
a{
padding: 8px 35px 8px 0;
transition: $sidebar-transition;
&:hover{
padding: 8px 35px 8px 10px;
transition: $sidebar-transition;
}
}
}
}
.galleria div {
margin-bottom: 5px;
&:hover {
transform: translateY(4px) scale(1.04);
}
}
.galleria-list .galleria > div {
width: 25%;
font-size: 12px;
float: left;
color: $black;
transition: ease-in 0.3s;
> a {
display: block;
margin: 5px 0 10px;
padding: 0 0!important;
}
img {
border-radius: 3px;
max-width: 100%;
}
.username {
font-size: 12px;
color: $theme-body-font-color;
margin-bottom: 5px;
small {
display: block;
font-size: 11px;
color: $theme-body-sub-title-color;
margin-top: 3px;
}
}
}
.drilldown {
overflow: hidden;
width: 100%;
padding: 0;
transform: translate3d(0, 0, 0);
a{
width: 100%;
&:hover{
background-color: transparent;
color:$primary-color;
}
}
}
.drilldown-sub { display: none; }
.drilldown-back { font-weight: bold; }
}
/*=======Mega menu css end=======*/
// responsive header
@media only screen and (max-width: 1366px) {
.profile-dropdown {
&.onhover-show-div {
// right: 0;
// left: unset !important;
left:0;
right:unset !important;
&:before, &:after {
right: 10px !important;
left: unset !important;
}
}
}
}
// @media only screen and (max-width: 1200px) {
// .page-main-header{
// .main-header-right{
// .nav-right{
// .btn-primary-light{
// padding: 6px 12px;
// }
// }
// }
// }
// }
@media only screen and (max-width: 1199px) {
.page-main-header {
.main-header-right {
.nav-right {
>ul {
>li {
padding: 6px;
margin-right: 15px;
}
}
}
}
}
}
@media only screen and (max-width: 991px) {
.page-main-header {
.main-header-right {
.nav-right {
.notification-dropdown {
top: 46px;
}
}
}
}
}
/**=====================
05. Header CSS Ends
==========================**/

166
public/assets/scss/theme/_icons.scss Normal file
View File

@@ -0,0 +1,166 @@
/**=====================
10. ICON CSS Start
==========================**/
.icon-lists{
h6{
color: $dark-gray;
font-weight: 400;
}
>div{
&:hover{
background-color: rgba($primary-color,0.1);
color:$primary-color;
i{
color:$primary-color;
}
}
}
div{
cursor: pointer;
line-height: 60px;
white-space: nowrap;
border-radius:4px;
display: flex;
align-items: center;
i{
margin: 0 15px 0 10px;
font-size: 24px;
}
}
&.whether-icon{
svg{
height: 50px;
width: 50px;
}
}
&.feather-icons{
.media{
svg{
margin: 0 15px 0 10px;
}
}
}
.feather-icon{
.icon-first{
h6{
display: none;
}
}
}
}
.flag-icons, .feather-icons{
margin-bottom: -15px;
margin-top: -15px;
div{
line-height: 1;
word-wrap: break-word;
overflow: auto;
.flag-icon{
height: 50px;
width: 50px;
}
.media{
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
}
.media-body{
h6{
margin-bottom: 0;
font-size:14px;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
h5{
background-color: $primary-color;
display:inline-block;
padding:3px 5px;
font-size:11px;
border-radius:3px;
margin-right:5px;
margin-bottom:5px;
color:$white;
}
}
}
}
.icon-hover-bottom{
background-color: $light;
width: 100%;
bottom: 0;
left: 0;
box-shadow: 0px 0px 1px 1px $light-gray;
z-index: 999;
.icon-popup{
display: flex;
align-items: center;
justify-content:center;
width:100%;
.close-icon{
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: $gray-60;
cursor:pointer;
}
padding: 20px;
>
div{
display: inline-block;
.flag-icon{
width: 60px;
height: 60px;
}
}
.icon-class{
margin: 0 20px;
cursor: pointer;
}
}
.icon-title{
display: block;
color: $dark-color;
text-transform: uppercase;
font-weight: 500;
}
.form-group{
input{
min-width: 300px;
background-color: $white;
}
}
}
.fa-fa-icon-show-div,.icons-show-div{
display:none;
}
.icon-first{
i{
color: $dark-gray;
}
h6{
display: none;
}
}
@media only screen and (max-width:480px){
.flag-icons,.feather-icons {
div {
.media{
padding-top:10px;
padding-bottom:10px;
}
}
}
}
/**=====================
10. ICON CSS Ends
==========================**/

20
public/assets/scss/theme/_internationalization.scss Normal file
View File

@@ -0,0 +1,20 @@
/**=====================
74. internationalization css start
==========================**/
.hdg_main{
position: relative;
}
.main {
.langChoice{
position:absolute;
right:30px;
top:20px;
padding:10px 12px;
background-color:rgba($primary-color,0.05);
border-color:$light-gray;
color:$primary-color;
}
}
/**=====================
74. internationalization CSS end
==========================**/

141
public/assets/scss/theme/_invoice.scss Normal file
View File

@@ -0,0 +1,141 @@
/**========================
64. Invoice CSS Start
=============================**/
.invoice{
p{
color:$light-text;
}
.invo-header{
padding-bottom:15px;
margin-bottom:15px;
border-bottom: 1px solid $light-gray;
}
.table-striped{
tbody{
tr{
&:nth-of-type(odd){
background-color:rgba($primary-color,0.05);
--bs-table-accent-bg:unset;
}
h6{
text-transform:capitalize;
color:$primary-color;
}
}
}
}
.invo-profile{
margin-bottom: 15px;
}
}
@media only screen and (max-width:1199px){
.invoice{
h4{
margin-bottom: 0px;
}
h3{
margin-bottom: 0px;
}
.invo-header{
.media-left{
img{
width: 55% !important;
}
}
}
.invo-profile{
.media{
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid $light-gray;
}
}
}
}
@media only screen and (max-width: 991px){
.invoice{
.card {
.card-body{
padding:20px;
}
}
h4{
font-size:20px;
}
h3{
font-size:20px;
}
table{
td{
min-width:150px;
&:first-child{
min-width:280px;
}
}
}
}
}
@media only screen and (max-width:767px){
.invoice{
.invo-pal{
margin-top:15px;
text-align: left !important;
}
}
}
@media only screen and (max-width:575px){
.invoice {
h4{
font-size:18px;
}
h3{
font-size:14px;
}
p{
font-size:13px;
}
.invo-header{
.media-body{
text-align:right;
}
}
.text-xs-center{
margin-top:20px;
text-align:center !important;
}
.text-md-end{
text-align:left;
}
}
}
@media only screen and (max-width:420px){
.invoice {
.invo-header {
.media-left{
img{
width: 50% !important;
}
}
}
.invo-profile {
.media {
display: block;
.media-body{
margin-left: 0 !important;
margin-top: 10px;
}
}
}
}
}
/**========================
64. Invoice CSS endp
==========================**/

368
public/assets/scss/theme/_job-search.scss Normal file
View File

@@ -0,0 +1,368 @@
/**=====================
72. Job CSS start
==========================**/
.filter-cards-view{
.job-filter{
&:first-child{
margin-bottom: 30px;
}
}
.checkbox-animated{
margin-top: 30px;
margin-bottom: 30px;
}
p{
color: $light-text;
line-height: 1.6;
letter-spacing: 0.02em;
font-size: 13px;
}
.filter-view-group{
margin-bottom:10px;
}
}
.location-checkbox{
span{
color: $light-text;
padding-left: 33px;
}
}
.job-accordion{
.card{
margin-bottom: 30px;
}
.btn-block {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.job-sidebar{
.job-toggle{
display: none;
width: fit-content;
}
}
.job-search{
p{
margin-top: 20px;
color: $light-text;
}
.media{
.media-body{
h6{
margin-bottom: 3px;
span{
font-size: 13px;
font-weight: normal;
&.badge{
color: $white;
font-weight: 600;
}
}
.btn{
font-weight: 600;
}
}
p{
margin-top: 0;
margin-bottom: 0;
font-weight: 500;
display: inline-block;
}
ul{
&.rating{
margin-left:10px;
display: inline-block;
li{
display: inline-block;
letter-spacing: -2px;
}
}
}
.job-apply-btn{
position: absolute;
top: 30px;
right: 30px;
}
}
}
.job-description{
margin-top: 20px;
border-top: 1px solid #ececec;
padding-top: 20px;
h6{
font-weight: 600;
}
p{
margin-top: 0;
margin-bottom: 6px;
letter-spacing: 0.04em;
}
ul{
list-style-type: disc;
list-style-position: inside;
li{
margin-bottom: 10px;
cursor: pointer;
color: $light-text;
&:last-child{
margin-bottom: 0;
}
&:hover{
color:$primary-color;
}
}
}
.theme-form{
margin-top: 20px;
margin-bottom: 30px;
border-bottom: 1px solid $light-semi-gray;
.row{
div[class^="col-"]{
+ div[class^="col-"]{
.select2-container{
margin-top: 14px;
max-width: 100%;
}
}
.job-select2{
~ .select2-container{
margin-top: 0 !important;
}
}
.input-group{
.datepicker-here{
font-size:14px;
border:1px solid $light-gray;
padding-top:7px;
padding-bottom:7px;
}
}
}
}
}
}
}
.select2-container {
.select2-selection--single {
border-radius: 0.25rem !important;
border-color: $light-gray !important;
height: 40px !important;
padding: 5px;
}
}
.job-pagination{
margin-bottom: 30px;
nav{
ul{
justify-content: center;
}
}
}
@media only screen and (max-width: 1366px){
.xl-mt-job{
margin-bottom: 20px;
}
}
@media only screen and (max-width: 1400px) and (min-width:1200px){
.job-search {
.media {
.media-body {
.job-apply-btn{
position:unset;
width: fit-content;
margin-top:5px;
display:block;
}
}
}
}
}
@media only screen and (max-width: 991px) {
.filter-cards-view{
padding: 20px !important;
.job-filter{
&:first-child{
margin-bottom: 20px;
}
}
.checkbox-animated{
margin-top: 20px;
margin-bottom: 20px;
}
}
.job-accordion{
.animate-chk{
padding: 20px !important;
}
}
.job-search{
p {
margin-top:15px;
}
}
}
@media only screen and (max-width: 767px){
.job-search {
.media {
.media-body {
.job-apply-btn{
position: unset;
display: block;
width: fit-content;
margin-top: 5px;
}
}
}
}
}
@media only screen and (max-width: 575px) {
.filter-cards-view{
padding: 15px !important;
.job-filter{
&:first-child{
margin-bottom: 15px;
}
}
.checkbox-animated{
margin-top: 15px;
margin-bottom: 15px;
}
}
.job-accordion{
.animate-chk{
padding: 15px !important;
}
}
.job-search{
p {
margin-top:10px;
text-align:center;
font-size: 13px;
}
.media {
display: block;
text-align: center;
.media-body{
text-align: center;
.job-apply-btn{
margin-left: auto;
margin-right: auto;
}
h6{
margin-bottom:unset;
.pull-right{
float: none;
display: inline-block;
margin-left: 15px;
}
span.badge{
font-size: 10px;
padding: 5px;
}
a{
margin-bottom:10px;
}
}
p{
span{
+ span{
display: block;
}
}
}
}
img{
margin-bottom: 15px;
}
.m-r-20{
margin-right: 0;
}
}
.job-description {
margin-top: 15px;
padding-top: 15px;
label{
display: block;
text-align: left !important;
}
.select2-container{
width:100% !important;
}
.theme-form {
margin-top: 15px;
margin-bottom: 15px;
.row{
div[class^="col-"]{
+ div[class^="col-"]{
.select2-container{
margin-top: 2px;
}
}
}
}
.xs-mt-period{
margin-top: 15px;
}
}
}
.card-footer{
padding:20px;
}
}
.job-pagination{
margin-bottom: 15px;
}
.xl-mt-job {
margin-bottom: 15px;
}
}
@media only screen and (max-width: 420px){
.job-search {
.media {
.media-body {
h6 {
span.badge{
display: none;
}
}
}
}
}
}
@media only screen and (max-width: 360px) {
.job-search{
.job-description{
.btn{
padding: 6px 12px;
}
}
}
}
/**=====================
72. Job CSS end
==========================**/

59
public/assets/scss/theme/_jsgrid.scss Normal file
View File

@@ -0,0 +1,59 @@
/**=====================
31. JS datagrid CSS Start
==========================**/
.jsgrid{
.jsgrid-grid-body{
.jsgrid-cell{
padding: 0.75rem;
}
}
.jsgrid-pager-container{
text-align: right;
}
.jsgrid-pager{
padding: 0;
margin-top: 20px;
.jsgrid-pager-nav-inactive-button{
margin-right: -5px;
&:first-child{
border-radius: 5px 0 0 5px;
}
}
.jsgrid-pager-page{
&~.jsgrid-pager-nav-button{
margin-left: -5px;
&:last-child{
border-radius:0 5px 5px 0;
}
}
}
[class*="jsgrid-pager"]{
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
border: 1px solid $light-gray;
}
.jsgrid-pager-page{
a{
color: $dark-color;
}
}
.jsgrid-pager-current-page{
color: $dark-color;
}
}
.jsgrid-selected-row{
>.jsgrid-cell{
background: $light-gray;
border-color: $auth-bg-color;
}
}
.jsgrid-header-row{
> .jsgrid-header-cell{
padding: 0.75rem;
}
}
}
/**=====================
31. JS datagrid CSS Ends
==========================**/

243
public/assets/scss/theme/_kanban.scss Normal file
View File

@@ -0,0 +1,243 @@
/**=====================
90. base_inputs CSS start
==========================**/
.jkanban-container {
// .btn {
// margin-bottom: 10px;
// }
.note {
a {
display: contents;
}
}
p{
color: $light-text;
}
}
.kanban-board-header {
height: auto;
width: auto;
line-height: unset;
background-color: rgba($primary-color,0.05);
// border-bottom: 1px solid $light-gray;
&.bg-primary {
&~.kanban-drag {
background-color: rgba($primary-color, 0.3);
}
}
&.bg-secondary {
&~.kanban-drag {
background-color: rgba($secondary-color, 0.3);
}
}
&.bg-warning {
&~.kanban-drag {
background-color: rgba($warning-color, 0.3);
}
}
&.bg-success {
&~.kanban-drag {
background-color: rgba($success-color, 0.3);
}
}
}
.kanban-container {
display: contents;
footer{
padding:0;
margin:0;
}
}
.kanban-board {
margin-bottom:30px;
transition: all 0.3s ease;
letter-spacing: 0.5px;
border-radius: 8px;
box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
overflow: hidden;
width: calc(100% / 3 - 30px) !important;
.kanban-drag {
background: rgba($primary-color,0.05);
}
}
.kanban-board header {
padding: 20px 20px 0;
}
.kanban-item {
background:$white;
padding:0;
margin-bottom:20px;
p {
font-size:13px;
}
&:last-child {
margin-bottom: 0;
}
.list {
display: inline-block;
opacity: 0.4;
li {
display: inline-block;
font-size: 12px;
i{
margin-right: 10px;
}
&:nth-child(n+2){
margin-left: 5px;
}
}
}
.kanban-box {
border: 1px solid $light-gray;
border-radius: 5px;
padding: 20px;
position: relative;
display: block;
color: inherit;
&:hover {
color: inherit;
}
&+.kanban-box {
margin-top: 20px;
}
.badge {
font-weight: 400;
}
h6 {
font-size:15px;
margin-top:5px;
font-weight: 600;
}
.dropdown {
display: inline-block;
right: 10px;
position: absolute;
top: 20px;
.dropdown-item {
font-size: 13px;
font-weight: 500;
padding: 5px 10px;
text-align: left;
}
svg {
height: 14px;
}
}
.d-flex {
justify-content: space-between;
}
.dropdown-toggle {
&:after {
content: none;
}
}
.customers ul li+li {
margin-left: -10px;
}
.date {
font-size: 11px;
opacity: 0.5;
}
}
}
.colorfull-kanban{
.kanban-board-header{
padding-bottom:20px;
}
}
.kanban-block{
margin-bottom:-30px;
}
@media only screen and (max-width: 1300px){
.kanban-board{
width: calc(100% / 2 - 30px) !important;
}
}
@media only screen and (max-width: 1199px) {
.jkanban-container .btn {
margin-bottom: 10px;
margin-left: 20px;
}
}
@media only screen and (max-width:991px){
.kanban-block{
margin-bottom: -20px;
}
}
@media only screen and (max-width: 700px){
.kanban-container .kanban-board {
width:100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.jkanban-container{
.btn{
margin-left:unset;
padding: 10px 15px;
}
}
}
@media only screen and (max-width: 600px) {
.kanban-board .kanban-drag, .kanban-container .kanban-item .kanban-box {
// padding: 10px 15px;
}
}
@media only screen and (max-width: 480px) {
.kanban-board{
.kanban-drag{
padding:10px;
}
header{
padding:10px 10px 0;
.kanban-title-board{
font-size:14px;
}
}
}
.jkanban-container{
.card{
.card-body{
padding:15px;
}
}
.btn{
padding:7px 12px;
}
}
.kanban-item{
margin-bottom:10px;
.kanban-box{
padding:15px;
}
}
.colorfull-kanban{
.kanban-board-header{
padding-bottom:10px;
}
}
}
/**=====================
90. base_inputs CSS ends
==========================**/

202
public/assets/scss/theme/_knowledgebase.scss Normal file
View File

@@ -0,0 +1,202 @@
/**=====================
73. knowledgebase CSS start
==========================**/
.knowledgebase-bg{
height:500px;
margin-bottom:30px;
}
.knowledgebase-search {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
left: 5%;
h3{
font-weight:600;
}
.form-inline {
background-color: $white;
width: 500px;
padding: 12px 50px;
border-radius: 10px;
border: 1px solid $light-gray;
margin-top: 10px;
position: relative;
::placeholder {
color: $gray-60;
}
svg {
position: absolute;
left: 20px;
width: 20px;
top: 17px;
stroke: $gray-60;
}
}
}
.browse{
>div{
margin-bottom: 30px;
}
.browse-articles{
background-color:$white;
padding:30px;
h6{
font-weight: 600;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid $light-gray;
color: $semi-dark;
padding-left: 25px;
position: relative;
line-height: 1.5;
span{
svg{
width: 16px;
height: 16px;
margin-right: 10px;
vertical-align: text-top;
position: absolute;
left: 0;
top: 4px;
}
}
}
ul{
li{
border-radius: 8px;
position: relative;
padding-top: 8px;
padding-bottom: 8px;
cursor: pointer;
&:last-child{
padding-bottom:0;
}
h5{
vertical-align: text-top;
font-size: 14px;
margin-bottom: unset;
color: $light-text;
width: 100%;
padding-left: 20px;
line-height: 1.6;
font-weight: 500;
position: relative;
span.badge{
margin-left: auto;
}
svg{
width: 14px;
height: 14px;
margin-right: 10px;
vertical-align: text-top;
position: absolute;
left: 0;
top: 4px;
}
}
a{
color: $theme-body-font-color;
display: inline-flex;
align-items: center;
width: 100% ;
}
&:hover{
h5{
color: $primary-color;
}
}
}
}
}
}
@media only screen and (max-width: 1199px){
.knowledgebase-bg {
height:400px;
}
.knowledgebase-search{
.form-inline {
width: 400px;
padding: 7px 45px;
svg {
top: 14px;
}
}
}
}
@media only screen and (max-width: 767px){
.browse {
.browse-articles {
h6{
margin-bottom:10px;
}
}
}
}
@media only screen and (max-width: 575px){
.browse{
.browse-articles{
padding:20px;
h6{
font-size:14px;
margin-bottom:10px;
}
}
}
.knowledgebase-bg{
height:250px;
}
.knowledgebase-search {
width: calc(100% - 30px);
left: 15px;
height: calc(100% - 30px);
background-color: rgba($white, 0.7);
.form-inline {
width: 90%;
padding: 3px 45px;
svg {
top: 8px;
}
}
>div {
width: 100%;
text-align: center;
padding: 15px;
border-right: 10px;
h3 {
font-size: 20px;
margin-bottom: 0;
}
.form-group {
margin-bottom: 0;
}
}
}
}
@media only screen and (max-width: 360px){
.browse{
.browse-articles{
ul{
li{
h5{
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
span{
&.badge{
display: none;
}
}
}
}
}
}
}
}
/**=====================
73. knowledgebase CSS end
==========================**/

832
public/assets/scss/theme/_landing-responsive.scss Normal file
View File

@@ -0,0 +1,832 @@
/**========================
38. Landing CSS Start
===========================**/
@media (max-width: 1880px) {
.landing-wrraper {
// landing home //
.landing-home {
.position-block {
.img1,
.img2,
.img3,
.img4,
.img5,
.img6,
.img7,
.img8,
.img9 {
width: auto;
}
.img1 {
height: 80px;
}
.img2 {
height: 130px;
}
.img3 {
height: 100px;
}
.img4 {
height: 160px;
}
.img5 {
height: 230px;
}
.img6 {
height: 180px;
}
.img7 {
height: 120px;
}
.img8 {
height: 140px;
}
.img9 {
height: 210px;
}
ul {
li {
img {
margin-left: 35px;
}
}
.img-parten {
&.bottom-parten {
top: 70px;
}
}
}
}
}
}
}
@media (max-width: 1660px) {
.landing-wrraper {
.custom-container {
max-width: 1440px;
}
}
}
@media (max-width: 1470px) {
.landing-wrraper {
.custom-container {
max-width: 100%;
padding-left: 50px;
padding-right: 50px;
}
}
}
@media (max-width: 1367px) {
.landing-wrraper {
// landing home //
.landing-home {
.position-block {
.img1 {
height: 70px;
}
.img2 {
height: 110px;
}
.img3 {
height: 75px;
}
.img4 {
height: 140px;
}
.img5 {
height: 200px;
}
.img6 {
height: 140px;
}
.img7 {
height: 100px;
}
.img8 {
height: 115px;
}
.img9 {
height: 160px;
}
ul {
.img-parten {
width: auto;
height: 50px;
&.bottom-parten {
left: 20px;
}
}
li {
img {
margin-left: 25px;
}
&:nth-child(n + 2) {
margin-top: 20px;
}
}
}
}
}
// demo section
.demo-section {
.demo-box {
.img-wrraper {
.overlay {
ul.demo-link {
li {
a {
width: 40px;
height: 40px;
img {
height: 45%;
}
}
}
}
}
}
}
}
// framework
.framework {
.nav {
margin-bottom: 40px;
.nav-link {
// padding-bottom:15px;
// img{
// height:40px;
// }
h5 {
font-size: 18px;
}
p {
font-size: 12px;
}
}
}
ul.framworks-list {
li {
height: 175px;
width: 175px;
img {
width: auto;
height: 60px;
&.img-68{
width: auto;
}
}
}
}
}
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.landing-wrraper{
.landing-home-contain{
.landing-button{
.btn-landing{
padding: 12px 8px !important;
}
}
}
}
}
@media (max-width: 1199px) {
.landing-wrraper
.landing-header
ul.landing-menu
li.nav-item
.form-inline
.nav-link {
padding: 5px 20px;
}
.framework{
.nav{
margin-bottom: -10px;
.nav-item{
margin-bottom: 10px;
}
}
}
.landing-wrraper {
.custom-container {
padding-left: 40px;
padding-right: 40px;
}
.title {
margin-bottom: 35px;
h2 {
font-size: 28px;
}
}
.section-py-space {
padding-top: 60px;
padding-bottom: 60px;
}
.section-pt-space {
padding-top: 60px;
}
.section-pb-space {
padding-bottom: 60px;
}
// landing header //
.landing-header {
ul.landing-menu {
li.nav-item {
a.nav-link {
padding: 5px 15px;
}
}
}
}
// landing home //
.landing-home {
.position-block {
.img5 {
height: 180px;
}
}
}
//demo
.demo-section {
.demo-box {
.img-wrraper {
.overlay {
ul.demo-link {
li {
a {
width: 35px;
height: 35px;
}
&:nth-child(n + 2) {
margin-left: 5px;
}
}
}
}
}
}
}
// footer //
.landing-footer {
.footer-contain {
h2 {
width: 65%;
margin-bottom: 5px;
}
p {
margin-bottom: 8px;
}
.star-rate {
margin-bottom: 40px;
}
}
}
}
}
@media (max-width: 991px) {
.landing-wrraper{
.landing-home-contain{
.landing-button{
justify-content: center;
}
}
}
.landing-wrraper {
.landing-home .landing-home-contain {
background-color: rgba(255, 255, 255, 0.57);
padding: 30px 0;
border-radius: 20px;
}
.btn-landing {
padding: 10px 25px;
}
//landing header//
.landing-header {
padding-top: 15px;
padding-bottom: 15px;
ul.landing-menu {
position: fixed;
top: 0;
right: -320px;
width: 300px;
height: 100vh;
background-color: $white;
display: block;
transition: all 0.5s ease;
&.open {
right: 0;
}
li.nav-item {
display: block;
background-color: $white;
text-align: left;
&.menu-back {
display: block;
}
.form-inline {
.nav-link {
padding: 5px 15px;
}
}
}
}
.buy-block {
.toggle-menu {
display: block;
}
}
}
//landing home //
.landing-home {
height: 78vh;
overflow: hidden;
.landing-home-contain {
height: 58vh;
justify-content: center;
display: flex;
width: 100%;
text-align: center;
h2 {
font-size: 24px;
}
p {
width: 80%;
margin-left: auto;
margin-right: auto;
font-size: 14px;
margin-bottom: 25px;
}
// .btn-landing{
// margin-left:auto;
// margin-right:auto;
// }
}
.position-block {
ul {
width: 100%;
text-align: center;
padding: 30px;
top: 0;
height: 100%;
.img-parten {
display: none;
}
li {
position: absolute;
width: 100%;
img {
margin-left: unset;
}
> div {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
&:first-child {
top: 13%;
}
&:nth-child(2) {
top: 33%;
}
&:last-child {
bottom: 20px;
}
}
}
.img1,
.img2,
.img3,
.img4,
.img5,
.img6,
.img7,
.img8,
.img9 {
position: absolute;
}
.img1 {
top: 0;
left: 3%;
}
.img2 {
top: 0;
left: 20%;
}
.img3 {
top: 0;
right: 40%;
}
.img4 {
top: 0;
right: 10%;
}
.img5 {
height: 120px;
top: -12px;
left: -20px;
}
.img6 {
top: 45%;
right: -20px;
height: 108px;
}
.img7 {
bottom: 0;
left: 5%;
}
.img8 {
bottom: 0;
right: 45%;
}
.img9 {
bottom: 0;
right: 10%;
}
}
}
// framework //
.framework {
.nav {
margin-bottom: 30px;
}
ul.framworks-list {
li {
width: 150px;
height: 150px;
img {
height: 40px;
}
}
}
}
}
}
@media (max-width: 767px) {
.landing-wrraper {
.custom-container {
padding-left: 25px;
padding-right: 25px;
}
.title {
margin-bottom: 25px;
h2 {
font-size: 24px;
}
}
.section-py-space {
padding-top: 50px;
padding-bottom: 50px;
}
.section-pt-space {
padding-top: 50px;
}
.section-pb-space {
padding-bottom: 50px;
}
// landing header //
.landing-header {
padding-top: 10px;
padding-bottom: 10px;
ul.landing-menu {
li.nav-item {
&.menu-back {
padding: 18px 15px;
}
}
}
}
// landing home //
.landing-home {
height: auto;
.position-block {
ul {
display: none;
}
}
.landing-home-contain {
margin-top: 60px;
background-color: transparent;
padding: 60px 0 0 0;
height: auto;
.landing-logo {
margin-bottom: 20px;
img {
width: auto;
height: 50px;
}
}
h6 {
margin-bottom: 10px;
}
h2 {
margin-bottom: 10px;
}
p {
margin-bottom: 20px;
}
}
}
// demo //
.demo-section {
.demo-block {
> div {
margin-bottom: 20px;
padding-left: 8px;
padding-right: 8px;
}
}
}
// framework //
.framework {
.nav {
.nav-link {
img {
height: 35px;
}
h5 {
font-size: 16px;
}
}
}
ul.framworks-list {
li {
width: 145px;
height: 145px;
img {
height: 40px;
}
}
}
}
// footer
.landing-footer {
.footer-contain {
h2 {
width: auto;
padding-left: 50px;
padding-right: 50px;
}
.star-rate {
margin-bottom: 30px;
}
.btn-footer {
a {
padding: 5px 15px;
font-size: 16px;
}
}
}
}
}
}
@media screen and (max-width: 1365px) {
.landing-wrraper {
.landing-home-contain {
.landing-button {
.btn-landing {
padding: 12px 15px;
}
}
}
}
}
@media (max-width: 575px) {
.landing-wrraper {
.custom-container {
padding-left: 20px;
padding-right: 20px;
}
.title {
h2 {
font-size: 22px;
}
}
.section-py-space {
padding-top: 40px;
padding-bottom: 40px;
}
.section-pt-space {
padding-top: 40px;
}
.section-pb-space {
padding-bottom: 40px;
}
// landign home //
.landing-home {
.landing-home-contain {
p {
width: auto;
}
}
}
// demo //
.demo-section {
.demo-box {
.img-wrraper {
img {
width: 100%;
}
}
}
}
// framework
.framework {
.nav {
display: flex;
.nav-link {
img {
}
}
}
}
// core feature //
.core-feature {
.feature-box {
padding: 30px 10px;
.icon-wrraper {
width: 50px;
height: 50px;
}
}
.feature-block {
margin-bottom: -15px;
> div {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 15px;
}
}
}
.unique-cards {
.unique-block {
margin-bottom: -15px;
}
}
// footer //
.landing-footer {
.footer-contain {
text-align: center;
h2 {
padding-left: unset;
padding-right: unset;
}
}
}
.sub-footer {
.footer-contain {
justify-content: center;
text-align: center;
p {
margin-right: auto;
margin-top: 10px;
}
}
}
}
}
@media (max-width: 480px) {
.landing-wrraper {
.framework{
.nav{
.nav-link{
padding: 10px 18px;
}
}
}
// landing home //
.btn-footer {
margin-bottom: -10px;
.btn {
margin-bottom: 10px;
}
}
.landing-home {
.landing-home-contain {
padding: 50px 0 0 0;
.landing-logo {
margin-bottom: 15px;
img {
height: 40px;
}
}
h6 {
font-size: 14px;
letter-spacing: 0.05em;
}
h2 {
font-size: 20px;
}
}
}
// demo section
.demo-section {
.demo-box {
.demo-detail {
.demo-title {
h3 {
font-size: 18px;
}
}
}
}
}
// framework
.framework {
.nav {
.nav-item {
width: auto;
}
.nav-link {
padding-bottom: 10px;
display: block !important;
img {
height: 25px;
margin-right: unset;
}
.text-start {
display: none;
}
&.active,
&.show {
border-bottom: 2px solid $primary-color;
}
}
}
ul.framworks-list {
li {
width: 120px;
height: 110px;
padding: 25px 0;
margin: 5px;
img {
height: 30px;
}
}
}
}
// core feature
.core-feature {
.feature-box {
.icon-wrraper {
width: 45px;
height: 45px;
}
}
}
// ecommerce-pages
.ecommerce-pages {
.pages-box {
.page-detail {
margin-top: 15px;
h3 {
font-size: 18px;
}
}
}
}
// footer
.landing-footer {
.footer-contain {
.star-rate {
margin-bottom: 20px;
}
.btn-footer {
a {
font-size: 14px;
padding: 3px 12px;
}
}
}
}
}
}
/**=======================
38. Landing CSS end
==========================**/

715
public/assets/scss/theme/_landing.scss Normal file
View File

@@ -0,0 +1,715 @@
/**=====================
38. Landing CSS Start
==========================**/
$landing-color : $primary-color;
body{
background-color:$white;
}
.landing-wrraper{
.section-py-space{
padding-top:70px;
padding-bottom:70px;
}
.section-pt-space{
padding-top:70px;
}
.section-pb-space{
padding-bottom:70px;
}
.title{
margin-bottom:40px;
width:fit-content;
margin-left:auto;
margin-right:auto;
h2{
font-size:30px;
text-transform: uppercase;
font-weight:700;
color:$landing-color;
margin-bottom:0;
line-height: 0.8;
}
}
.light-bg{
background-color: rgba($primary-color,0.05);
}
// tap top //
.tap-top {
text-align: center;
cursor: pointer;
display: none;
width: 40px;
height: 40px;
border-radius: 100%;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 5;
color:$white;
background-color: $primary-color;
border:none;
padding:7px;
box-shadow: 0 0 10px $primary-color;
opacity: 0.5;
transition: all 0.3s ease;
&:hover {
transition: all 0.3s ease;
opacity: 1;
}
svg {
width: 20px;
}
}
// landing header//
.custom-container{
max-width:1600px;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
.navbar-nav{
align-items: center;
.nav-item {
position: relative;
.nav-link {
color: $black;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
padding: 12px;
transition: all 0.3s ease;
border: 1px solid;
opacity: 0.7;
&:hover,&.active {
opacity: 1;
text-shadow: 0 0 0 $primary-color;
transition: all 0.3s ease;
color:$primary-color;
}
}
}
}
.btn-landing{
border-radius: 20px;
color:$white;
background-color:$primary-color;
padding: 12px 30px;
line-height: 1;
font-weight: 600;
display: block;
width: fit-content;
}
.landing-header{
filter: drop-shadow(0px 5px 17.5px rgba(36,105,92,0.06));
background-color:$white;
padding-top: 18px;
padding-bottom: 18px;
position: fixed;
top:0;
left:0;
width:100%;
z-index:3;
ul.landing-menu{
li.nav-item{
.form-inline{
.nav-link{
font-size: 16px;
padding: 10px 20px;
border: none;
background-color: transparent;
&:focus{
outline: none;
}
}
}
&.menu-back{
border-bottom:1px solid $light-gray;
padding:22px 20px;
text-align: right;
text-transform: uppercase;
font-weight: 700;
font-size:16px;
display:none;
cursor: pointer;
margin-bottom:15px;
i{
font-size:16px;
margin-left:10px;
}
}
a.nav-link{
font-size:16px;
font-weight:600;
font-family:$font-montserrat;
color:$theme-font-color;
padding:10px 20px;
}
&:hover{
a.nav-link{
color: $primary-color;
}
.nav-link{
color: $primary-color;
}
}
}
}
.buy-block{
display: flex;
align-items: center;
.toggle-menu{
margin-left:20px;
display:none;
cursor: pointer;
i{
font-size:24px;
color:$primary-color;
}
}
}
}
//animat key freams //
@keyframes move1 {
0%{
transform: rotate(0deg) translateX(10px) rotate(0deg);
}
100%{
transform: rotate(360deg) translateX(10px) rotate(-360deg);
}
}
@keyframes move2{
0%{
transform: translateY(0);
}
100%{
transform: translateY(-5px);
}
}
@keyframes star{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(0.5) rotate(45deg);
}
100%{
transform: scale(1) rotate(0deg);
}
}
.landing-home-contain{
.landing-button{
display: flex;
flex-flow: row wrap;
.btn-landing{
margin-bottom: 10px;
img{
height: 20px;
margin-right: 6px;
}
}
}
}
// landing home css
.landing-home{
height:100vh;
position: relative;
border-bottom: 1px solid #edeef3;
.landing-home-contain{
height: calc(100vh - 80px);
margin-top: 80px;
display:flex;
align-items:center;
width:37%;
z-index:2;
position: relative;
.landing-logo{
margin-bottom:25px;
}
h6{
font-size: 16px;
letter-spacing: 8px;
color:$theme-font-color;
font-weight:500;
font-family: $font-rubik;
text-transform: uppercase;
margin-bottom: 15px;
}
h2{
font-size: calc(22px + (35 - 22) * ((100vw - 300px) / (1920 - 300)));
color:$primary-color;
font-weight:500;
margin-bottom: 15px;
span{
color:$theme-font-color;
font-weight:700;
}
}
p{
font-size: 16px;
font-weight: 400;
font-family: $font-rubik;
margin-bottom:30px;
color: $light-text;
}
}
.position-block{
.circle1,.star,.cross,.img-parten,.img1,.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9{
position: absolute;
&.opicity3{
opacity: 0.3;
}
}
.circle1{
width: 13px;
height: 13px;
border-radius: 6px;
border: 3px solid $primary-color;
bottom: 7%;
left: 10%;
animation: move1 9s linear infinite;
}
.star{
top:48%;
left:33%;
font-size:14px;
font-weight:700;
color:$primary-color;
line-height: 1;
animation: star 7s linear infinite;
&.star1{
top: 79%;
left: 39%;
animation: star 5s linear infinite;
}
&.star2{
top:23%;
left:20%;
animation: star 8s linear infinite;
}
&.star3,&.star4,&.star5{
top: 18%;
left: 47%;
transform: rotate(-35deg);
animation: star 9s linear infinite;
}
&.star4{
top: 44%;
left: 47%;
animation: star 4s linear infinite;
}
&.star5{
top: 50%;
left: 3%;
animation: star 6s linear infinite;
}
}
.img1,.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9{
border: 1px solid $light-gray;
position: unset;
}
.img1{
animation: move2 1.2s infinite alternate;
}
.img2{
animation: move2 1.3s infinite alternate;
}
.img3{
animation: move2 1.4s infinite alternate;
}
.img4{
animation: move2 1.5s infinite alternate;
}
.img5{
animation: move2 1.6s infinite alternate;
}
.img6{
animation: move2 1.2s infinite alternate;
}
.img7{
animation: move2 1.3s infinite alternate;
}
.img8{
animation: move2 1.4s infinite alternate;
}
.img9{
animation: move2 1.5s infinite alternate;
}
ul{
position:absolute;
top:80px;
bottom:0;
right:30px;
height:fit-content;
margin-top:auto;
margin-bottom:auto;
text-align: right;
.v-align-b{
vertical-align:bottom;
}
.v-align-t{
vertical-align:top;
}
.v-align-c{
vertical-align:middle;
}
.img-parten{
&.top-parten{
top: 15px;
left: -20px;
animation: move2 1.2s infinite alternate;
}
&.bottom-parten{
top:100px;
left:0;
animation: move2 1.3s infinite alternate;
}
}
li{
position:relative;
// width:fit-content;
margin-left:auto;
img{
margin-left:45px;
filter: drop-shadow(0px 13px 17.5px $light-gray);
}
&:nth-child(n+2){
margin-top:30px;
}
}
}
}
}
// demo css
.demo-section{
.demo-block{
margin-bottom:-30px;
>div{
margin-bottom:30px;
}
}
.demo-box{
.img-wrraper{
position:relative;
border:5px solid $light-gray;
border-radius:15px;
overflow:hidden;
transition:all 0.5s ease;
img{
transition:all 0.5s ease;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
// background-color:rgba($black,0.5);
display: flex;
align-items: flex-end;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
ul.demo-link{
width:fit-content;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
li{
display: inline-block;
margin-left: 0 !important;
&:nth-child(n+2){
margin-left:2px;
}
a{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
width:45px;
height:45px;
border-radius:100%;
background-color:$white;
border:1px solid $primary-color;
img{
width:auto;
height:50%;
}
}
}
}
}
}
.demo-detail{
padding-top:15px;
.demo-title{
text-align:center;
h3{
font-size:20px;
text-transform:capitalize;
font-weight:700;
margin-bottom:0;
color:$theme-font-color;
}
}
}
&:hover{
.img-wrraper{
border-color:rgba($primary-color,0.3);
img{
transform: scale(1.01);
}
.overlay{
visibility: visible;
opacity:1;
}
}
.demo-detail{
.demo-title{
h3{
color:$primary-color;
}
}
}
}
}
}
// Frameworks
.framework{
.nav {
margin-bottom:50px;
.nav-item{
&:nth-child(n+2){
margin-left:10px;
}
}
.nav-link {
border:2px solid rgba($primary-color, 0.2);
padding:10px 15px;
align-items:center;
h5{
font-weight:700;
}
p{
color: $light-text;
}
&.active,&.show{
background-color:transparent;
color: $primary-color;
border: 2px solid $primary-color;
border-radius: 0;
}
img{
height:35px;
margin-right: 10px;
}
}
}
ul.framworks-list{
text-align: center;
margin-bottom: -9px;
li{
display: inline-block;
background-color:rgba($primary-color,0.05);
padding: 40px 10px;
margin-bottom: 30px;
border-radius: 10px;
border: 1px solid $light-gray;
margin:10px;
height:185px;
width:185px;
transition: all 0.3s ease;
text-align:center;
img{
transition: all 0.3s ease;
&.img-68{
width: 68px;
}
}
h6{
margin-top:10px;
margin-bottom:unset;
}
&:hover{
background-color:rgba($primary-color,0.1);
img{
transform: scale(0.9);
}
}
}
}
}
// unique-cards
.unique-cards{
.unique-block{
margin-bottom: -30px;
}
.card{
.img-wrraper{
box-shadow: 0 0 37px rgba($primary-color,0.05);
img{
transition: all 0.5s ease;
}
&:hover{
box-shadow: 0 0 37px rgba($primary-color,0.15);
img{
transform: rotate3d(1, 1, 1, -3deg);
}
}
}
}
}
// Ecommerce page
.ecommerce-pages{
.pages-box{
.page-detail{
margin-top:25px;
text-align:center;
h3{
font-size:20px;
text-transform:capitalize;
font-weight:700;
margin-bottom:0;
color: $theme-font-color;
transition: all 0.5s ease;
}
}
&:hover{
.page-detail{
h3{
color: $primary-color;
}
}
}
}
}
// core feature
.core-feature{
.feature-block{
margin-bottom: -24px;
>div{
margin-bottom:25px;
}
}
.feature-box{
border:1px solid $light-gray;
padding:45px 16px ;
text-align:center;
border-radius:15px;
.icon-wrraper{
width:60px;
height:60px;
border-radius:5px;
background-color:rgba($primary-color,0.1);
display:flex;
align-items:center;
justify-content:center;
margin-left:auto;
margin-right:auto;
transition:all 0.5s ease;
svg{
width:50%;
height:auto;
color:$primary-color;
transition:all 0.5s ease;
}
}
h6{
margin-bottom:0;
margin-top:10px;
font-weight:700;
text-transform:capitalize;
}
&:hover{
.icon-wrraper{
background-color:$primary-color;
svg{
color:$white;
}
}
}
}
}
// footer //
.landing-footer{
.footer-contain{
text-align: center;
.rating-wrraper{
margin-bottom:10px;
svg{
width:auto;
height:calc(95px + (120 - 95) * ((100vw - 320px) / (1920 - 320)));
}
}
h2{
// font-size:28px;
font-size: calc(18px + (28 - 18) * ((100vw - 320px) / (1920 - 320)));
font-weight:700;
margin-bottom:10px;
line-height:1.4;
width:50%;
margin-left: auto;
margin-right: auto;
}
p{
font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
color:$light-text;
font-weight:600;
}
.star-rate{
margin-bottom:50px;
li{
display: inline-block;
i{
font-size: calc(20px + (35 - 20) * ((100vw - 320px) / (1920 - 320)));
}
}
}
.btn-footer{
a{
&:nth-child(n+2){
margin-left:10px;
}
}
}
}
}
.sub-footer{
padding-top:15px;
padding-bottom:15px;
.footer-contain{
display:flex;
align-items:center;
p{
font-weight:600;
margin-left:auto;
color: $light-text;
}
}
}
}
/**=====================
38. Landing CSS Ends
==========================**/

16
public/assets/scss/theme/_language.scss Normal file
View File

@@ -0,0 +1,16 @@
/**=====================
76. Language CSS start
==========================**/
.language {
position: relative;
}
.js-languageSelect{
position: absolute;
top: 18px;
right: 30px;
padding: 12px;
}
/**=====================
76. Language CSS end
==========================**/

154
public/assets/scss/theme/_learning.scss Normal file
View File

@@ -0,0 +1,154 @@
/**=====================
75. Learning CSS start
==========================**/
.learning-box{
.details-main{
margin: 30px;
h6{
font-size: 20px;
}
p{
color : $semi-dark;
margin-bottom: 0;
}
}
}
.learning-header{
margin-bottom:5px;
}
.categories{
padding:20px 0;
.learning-header{
padding-left: 30px;
font-size: 16px;
}
ul{
li{
padding: 5px 30px;
a{
color: $light-text;
font-weight: 500;
}
&:hover{
background-color: $light-gray;
a{
color:$primary-color;
}
}
}
}
}
.upcoming-course{
.media{
+ .media{
margin-top: 30px;
}
}
}
.job-accordion{
margin-bottom: 0;
}
.learning-section{
.categories {
ul {
li{
a{
font-size:13px;
}
}
}
}
}
@media screen and (min-width: 1200px) and (max-width: 1366px){
.learning-comment{
float: left !important;
}
.blog-box {
.blog-details {
.blog-social {
li{
&:nth-child(n+2){
padding-left:15px;
margin-left:15px;
}
}
}
}
}
}
@media only screen and (max-width: 991px){
.categories{
padding: 20px 0;
.learning-header{
padding-left: 20px;
}
ul{
li{
padding: 5px 20px;
}
}
}
.upcoming-course{
.media{
+ .media{
margin-top: 20px;
}
}
}
}
@media only screen and (max-width: 767px){
.categories {
ul{
li{
a{
font-size:13px;
}
}
}
}
.comment-box {
h4{
margin-bottom:20px;
padding-bottom:15px;
}
li{
margin-bottom:20px;
}
}
}
@media only screen and (max-width: 575px){
.categories{
padding: 15px 0;
.learning-header{
padding-left: 15px;
}
// ul{
// li{
// padding: 10px 15px;
// }
// }
}
.upcoming-course{
.media{
+ .media{
margin-top:10px;
}
}
}
}
/**=====================
75. Learning CSS end
==========================**/

20
public/assets/scss/theme/_list.scss Normal file
View File

@@ -0,0 +1,20 @@
/**=====================
17. List CSS Start
==========================**/
.list-group-item.active {
background-color: $primary-color;
border-color: $primary-color;
}
.list-group{
i{
margin-right: $list-group-margin;
}
img{
height: 40px;
width: 40px;
margin-right: $list-group-margin;
}
}
/**=====================
17. List CSS Ends
==========================**/

83
public/assets/scss/theme/_loader.scss Normal file
View File

@@ -0,0 +1,83 @@
/**=====================
04. Loader CSS Start
==========================**/
.loader-wrapper{
position: fixed;
z-index: 999999;
background: $white;
width: 100%;
height: 100%;
top: 0;
left: 0;
.theme-loader{
height:100px;
width:100px;
position:relative;
.loader-p {
border: 0 solid transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 75px);
left: calc(50vw - 75px);
&:before {
content: '';
border: 1em solid $primary-color;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
animation-delay: 0.5s;
}
&:after {
content: '';
border: 1em solid $primary-color;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
}
}
}
@keyframes loader{
0% {
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
}
.loader-box {
height: 150px;
text-align: center;
display: flex;
align-items: center;
vertical-align: middle;
justify-content: center;
transition: .3s color, .3s border, .3s transform, .3s opacity;
[class*="loader-"] {
display: inline-block;
width: 50px;
height: 50px;
color: inherit;
vertical-align: middle;
}
}
/**=====================
04. Loader CSS Ends
==========================**/

200
public/assets/scss/theme/_login.scss Normal file
View File

@@ -0,0 +1,200 @@
/**=====================
25. Authentication CSS Start
==========================**/
// login page //
.show-hide {
position: absolute;
top: 18px;
right: 30px;
transform:translateY(-50%);
text-transform:capitalize;
z-index:2;
span {
cursor: pointer;
font-size: 13px;
color:$primary-color;
.show-hide span:before {
content: "hide";
}
&.show {
&:before {
content: "show";
}
}
}
}
.needs-validation {
label{
opacity: 0.7;
margin-bottom: 10px;
}
.invalid-tooltip{
top:-35px;
right: 10px;
}
}
.login-card {
background-color: rgba($primary-color, 0.1);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0 auto;
padding: 30px 12px;
}
.login-form {
padding: 30px;
width: 450px;
background-color: $white;
justify-content: center;
margin-left: auto;
margin-right: auto;
h4{
text-transform: capitalize;
font-weight:600;
margin-bottom:5px;
font-size:22px;
}
h6 {
font-size: 14px;
margin-bottom: 25px;
color:$light-text;
}
.btn {
text-transform: uppercase;
font-weight:700;
margin-left:auto;
display:block;
}
p{
font-weight:600;
text-align:center;
margin-bottom:unset;
}
.form-group{
position:relative;
label {
font-weight: 600;
text-transform: capitalize;
margin-bottom: 5px;
}
.input-group-text {
background-color: rgba($primary-color, 0.1);
border: none;
color: $primary-color;
}
input{
transition:all 0.3s ease ;
}
.form-control {
&::placeholder {
font-weight: 400;
}
&:focus {
box-shadow: none;
}
}
.checkbox {
display: inline-block;
label {
padding-top: 0;
margin-top: 0;
color: $light-text;
span{
color:rgba($primary-color,0.5);
}
}
}
.link {
float: right;
font-weight: 500;
}
.small-group{
display:flex;
align-items:center;
.input-group{
&:nth-child(n+2){
margin-left:10px;
}
}
}
}
ul.login-social{
display:flex;
align-items:center;
justify-content: center;
li{
display:inline-block;
width:35px;
height:35px;
background-color:rgba($primary-color,0.08);
display:flex;
justify-content:center;
align-items:center;
border-radius:5px;
a{
line-height:1;
svg{
width:16px;
height:auto;
}
}
&:nth-child(n+2){
margin-left:10px;
}
}
}
.login-social-title{
position: relative;
margin-bottom:20px;
z-index:2;
&::before{
content: '';
position: absolute;
top:10px;
left:0;
width:100%;
height:1px;
background-color:$light-text;
z-index:-1;
}
h5{
font-weight:600;
font-size:16px;
color:$light-text;
width:fit-content;
margin-left:auto;
margin-right:auto;
padding-left: 10px;
padding-right: 10px;
background-color:$white;
}
}
}
@media(max-width:575px){
.login-form {
.form-group {
.link{
float:unset;
}
}
.btn{
margin-left: unset;
}
}
}
@media(max-width:480px){
.login-form{
width:100%;
}
}
/**==========================
25. Authentication CSS Ends
==========================**/

88
public/assets/scss/theme/_megaoption.scss Normal file
View File

@@ -0,0 +1,88 @@
/**=====================
19. Mega option CSS Start
==========================**/
.mega-inline{
margin-bottom: -30px;
display: flex;
.card{
border: 1px solid $light-gray;
box-shadow: 0 0 11px 5px $light-gray;
}
.mega-title-badge{
display:table;
width: 100%;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.media{
.radio{
margin-left: 3px;
}
}
}
.mega-vertical{
display: flex;
flex-wrap: wrap;
.card{
box-shadow: 0 0 11px 5px $common-shadow-color;
}
.mega-title-badge{
display:table;
width: 100%;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.media{
.radio{
margin-left: 3px;
}
}
}
.mega-title{
font-weight: 600;
}
.mega-horizontal{
display: flex;
flex-wrap: wrap;
.card{
border: 1px solid #f3f3f3;
box-shadow: 0 0 11px 5px $common-shadow-color;
}
.mega-title-badge{
display:table;
width: 100%;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.media{
.radio{
margin-left: 3px;
}
}
}
.plain-style{
.card{
box-shadow: none;
}
}
.border-style{
.card{
box-shadow: none;
border: 1px solid $light-gray;
}
}
.offer-style{
.card{
box-shadow: none;
border: 1px dashed $light-gray;
}
}
.rating-star-wrapper{
color: #797979;
}
/**=====================
19. Mega option CSS Ends
==========================**/

219
public/assets/scss/theme/_order-history.scss Normal file
View File

@@ -0,0 +1,219 @@
/**=====================
76. Order History CSS start
==========================**/
.prooduct-details-box {
margin-bottom: 30px;
.close{
position: absolute;
top:10px;
right:10px;
height:16px ;
cursor: pointer;
}
.media{
border: 1px solid $light-gray;
width: 100%;
position: relative;
display: block;
.media-body{
padding: 15px;
}
}
.rating{
color:#ffaf45;
}
.price{
font-size: 14px;
font-weight: 600;
span{
margin-left: 5px;
color: $light-font;
}
}
ul.rating{
li{
display: inline-block;
}
}
.product-name {
h6{
color: $theme-body-font-color;
// margin-bottom:5px;
font-size: 15px;
}
}
.btn{
position: absolute;
right:15px;
bottom:15px;
font-size: 9px;
padding: 2px 5px;
}
}
.order-history {
.input-group {
text-align: right;
max-width: 300px;
}
table {
th{
min-width:170px;
}
th,
td {
text-align: center;
}
thead {
tr {
th {
vertical-align: middle;
border-top: none;
background-color:rgba($primary-color,0.05);
border:1px solid $primary-color;
padding:15px;
font-size: 16px;
color:$primary-color;
font-weight:600;
}
}
}
.qty-box {
width:120px;
margin:0 auto;
border-radius: 5px;
overflow: hidden;
input {
padding:0;
border:none;
background-color:transparent;
&:focus{
box-shadow:none;
border:none;
}
}
.input-group{
justify-content: space-between;
align-items:center;
background-color:transparent;
border-radius:5px;
border: 1px solid $light-gray;
overflow:hidden;
}
.btn{
background-color:transparent;
padding: 8px 13px;
font-size: 10px;
}
}
tbody{
tr{
td{
vertical-align: middle;
color: $light-text ;
font-weight: 600;
.product-name {
a {
font-size: 15px;
color: $dark-gray;
}
.order-process {
font-size: 13px;
padding-left: 15px;
.order-process-circle {
position: relative;
&:before {
position: absolute;
content: '';
width: 4px;
height: 4px;
border-radius: 100%;
background-color: $dark-gray;
left: -15px;
top: 4px;
}
&.shipped-order {
&:before {
background-color: $success-color;
}
}
&.cancel-order {
&:before {
background-color: $danger-color;
}
}
}
}
}
&.total-amount{
color: $theme-body-font-color;
}
}
}
}
}
.product-name{
h6{
color: $theme-body-font-color;
margin-bottom: unset;
font-size: 14px;
}
}
}
.whishlist-main{
>div{
margin-bottom: -30px;
}
}
@media only screen and (max-width: 1199px){
.order-history{
table{
width: 900px;
overflow: auto;
}
}
}
@media only screen and (max-width:767px){
.order-history {
table {
tbody {
tr {
td {
.product-name {
a{
font-size:14px;
}
}
}
}
}
}
}
}
@media only screen and (max-width:575px){
.wishlist {
.text-end{
text-align: left !important;
}
}
}
/**=====================
76. Order History CSS end
==========================**/

43
public/assets/scss/theme/_page.scss Normal file
View File

@@ -0,0 +1,43 @@
/**=====================
32. pagination CSS Start
==========================**/
/*test Nav bar color */
$page-name:theme,
primary,
secondary,
success,
danger,
info,
dark,
warning;
$page-color:$primary-color,
$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$dark-color,
$warning-color;
@each $var in $page-name {
$i: index($page-name, $var);
.pagination-#{$var}{
.page-item{
.page-link{
color: nth($page-color, $i) !important;
&:focus{
box-shadow: none;
}
}
&.active{
.page-link{
color: $white !important;
background-color: nth($page-color, $i) !important;
border-color: nth($page-color, $i);
}
}
}
}
}
/**=====================
32. pagination CSS Ends
==========================**/

34
public/assets/scss/theme/_popover.scss Normal file
View File

@@ -0,0 +1,34 @@
/**=====================
16. Popover CSS Start
==========================**/
.popover{
border:1px solid $light-gray;
box-shadow:none;
}
.popover-header {
background-color:rgba($primary-color,0.1);
border-color: $light-gray;
color:$primary-color;
}
.popover-body{
border-color: $light-gray;
background-color: $white;
}
.popover-main{
.btn-showcase{
a{
color: $white;
}
button{
&:last-child{
margin-right: 0;
}
}
}
}
/**=====================
16. Popover CSS Ends
==========================**/

434
public/assets/scss/theme/_pricing.scss Normal file
View File

@@ -0,0 +1,434 @@
/**=====================
34. Pricing CSS Start
==========================**/
.pricing-content{
div{
.pricing-simple, .pricing-block{
margin-bottom: 0;
}
.pricing-simple {
.btn-block {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}
}
.pricing-content-ribbons{
div {
.pricing-block{
margin-bottom: 30px;
}
&:last-child,
&:nth-child(7),
&:nth-child(8){
.pricing-block{
margin-bottom: 0;
}
}
}
}
.pricing-card-design-2{
.pricing-block{
.pricing-inner{
ul{
margin-bottom:30px;
li{
border-bottom:1px solid $light-body-bg-color;
}
}
}
}
}
.pricing-block {
overflow:hidden;
.pricing-header{
position:relative;
height:170px;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
border-radius: 0% 0% 50% 50%;
background-color: rgba($primary-color,0.05);
}
h2{
color: $primary-color;
font-weight: 600;
font-size: 30px;
text-transform: uppercase;
margin-top: 30px;
span{
font-size:50%;
}
}
.price-box{
background-color:$primary-color;
border-radius:5px;
width:90px;
height:90px;
margin-left:auto;
margin-right: auto;
transform:rotate(45deg) ;
display: flex;
align-items: center;
justify-content: center;
position:absolute;
bottom:-40px;
left:0;
right:0;
>div{
transform:rotate(-45deg);
}
h3{
color:$white;
font-weight:600;
margin-bottom:5px;
line-height:1;
font-size:24px;
}
p{
color:$white;
text-transform:capitalize;
line-height:1;
font-weight:600;
}
}
}
svg {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-left: -1px;
}
.pricing-list {
padding-top:90px;
padding-bottom:30px;
ul {
padding:0;
li {
margin-bottom: 20px;
h6{
font-weight: 700;
margin-bottom: 0;
span{
color: $light-text;
margin-left: 5px ;
display: inline-block;
}
}
}
}
.pricing-inner{
margin-bottom: 30px;
}
}
}
.pricing-simple{
.card-body{
border-bottom: none;
h3{
position: relative;
margin-bottom: 38px;
font-weight: 600;
&:before{
position: absolute;
content: '';
width: 80px;
height: 1px;
margin: 0 auto;
left: 0;
right: 0;
bottom: -10px;
background-color: $light-text;
}
}
h1{
font-size: 80px;
line-height: 0.9;
margin-bottom: 30px;
font-weight: 600;
color: $primary-color;
}
h6{
color: $light-text;
}
}
}
@media only screen and (max-width:1550px){
.pricing-block {
.pricing-header{
height:150px;
h2{
font-size:22px;
}
}
}
}
@media only screen and (max-width: 1470px){
// pricing page //
.pricing-col{
margin-bottom:-30px;
>div{
width:50%;
margin-bottom:30px;
}
}
.pricing-block {
.pricing-header{
h2{
font-size:30px;
}
}
}
}
@media only screen and (max-width: 1366px){
.pricing-content{
div{
&:nth-child(2),
&:first-child{
.pricing-simple {
margin-bottom: 30px;
}
}
}
}
}
@media screen and (min-width: 768px) and (max-width: 1199px){
.pricing-block{
.ribbon-vertical-left {
left: 3px;
top: 0px;
}
.ribbon-bookmark{
top: 0;
left: -1px;
}
.ribbon-clip-right{
top: 0;
}
}
}
@media only screen and (max-width: 1199px){
.pricing-block{
.pricing-inner{
h3 {
font-size: 20px;
}
ul{
li{
h6{
font-size: 14px;
}
}
}
}
}
}
@media only screen and (max-width: 991px) {
.pricing-content{
div{
&:nth-child(2),
&:first-child{
.pricing-simple {
margin-bottom: 20px;
}
}
}
}
.pricing-block {
.pricing-inner {
padding: 20px 0 20px;
ul, h3 {
margin-bottom: 1px;
}
}
}
.pricing-simple{
.card-body{
h1 {
margin-bottom: 20px;
}
h3 {
margin-bottom: 28px;
}
}
}
.pricing-card-design-2 {
.pricing-block{
.pricing-inner{
ul {
margin-bottom: 20px;
}
}
}
}
}
@media only screen and (max-width: 767px) {
.pricing-content-ribbons{
div {
.pricing-block{
margin-bottom: 20px !important;
}
&:last-child{
.pricing-block{
margin-bottom: 0 !important;
}
}
}
}
.pricing-content{
div{
// .pricing-block {
// margin-bottom: 20px;
// }
&:last-child{
.pricing-block{
margin-bottom: 0;
}
}
}
}
.pricing-block {
.pricing-inner {
padding: 15px 0 15px;
h3{
font-size: 28px;
}
ul{
li{
h6{
font-size: 16px;
}
}
}
}
.pricing-header{
h2{
font-size:24px;
}
}
}
.pricing-simple {
.card-body {
h1{
font-size:60px;
}
h3{
font-size:20px;
}
}
}
}
@media only screen and (max-width: 575px){
.pricing-content{
div{
.pricing-simple {
margin-bottom: 15px;
}
&:last-child{
.pricing-simple{
margin-bottom: 0;
}
}
}
}
.pricing-simple{
.card-body{
h1{
margin-bottom:15px;
font-size:45px;
}
}
}
.pricing-block{
box-shadow:none !important;
.pricing-inner {
padding: 15px 0 15px;
}
}
.pricing-card-design-2 {
.pricing-block{
.pricing-inner{
ul {
margin-bottom: 15px;
}
}
}
}
.pricing-col {
> div{
width:100%;
}
}
.pricing-block {
.pricing-list {
.btn{
padding: 5px 15px;
font-size: 16px;
}
}
}
}
@media only screen and (max-width: 480px){
.pricing-block {
.pricing-list {
padding-top:80px;
ul {
li{
margin-bottom:15px;
h6{
font-size:14px;
}
}
}
.pricing-inner{
margin-bottom: 25px;
}
}
}
}
@media only screen and (max-width: 420px){
.pricing-block{
.pricing-header{
height:140px;
.price-box{
width: 80px;
height: 80px;
h3{
font-size:20px;
}
p{
font-size:12px;
}
}
}
}
}
/**=====================
34. Pricing CSS Ends
==========================**/

35
public/assets/scss/theme/_print.scss Normal file
View File

@@ -0,0 +1,35 @@
/**=====================
77. Print CSS Start
==========================**/
@media print {
.page-wrapper {
.page-main-header {
visibility: hidden;
}
.page-body-wrapper {
.page-header {
display: none;
}
}
}
table.fixedHeader-floating {
display: none;
}
}
.invoice-table{
margin-top: 16px;
margin-bottom: 16px;
}
.invoice{
.text-end{
input{
margin-top: 6px;
}
}
.media {
align-items: center;
}
}
/**=====================
77. Print CSS Ends
==========================**/

96
public/assets/scss/theme/_progress.scss Normal file
View File

@@ -0,0 +1,96 @@
/**=====================
23. Progress CSS Start
==========================**/
.progress-showcase{
.progress{
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
}
}
.sm-progress-bar{
height:5px;
}
.lg-progress-bar{
height:20px;
}
// progress bar gradient loop css
.progress-animate {
overflow: inherit;
background-color: $transparent-color;
margin-bottom: 2px;
span {
position: absolute;
bottom: 15px;
right: -10px;
font-weight: 600;
font-size: 15px;
}
}
@keyframes heartbit{
0%{transform:scale(0);
opacity:0
}
25%
{transform:scale(0.1);
opacity:.1
}
50%
{
transform:scale(0.5);
opacity:.3
}
75%{
transform:scale(0.8);
opacity:.5
}
100%
{
transform:scale(1);
opacity:0
}
}
@each $progress-gradient-name, $progress-gradient-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.progress-gradient-#{$progress-gradient-name}{
background-image: linear-gradient(to right, $transparent-color, $progress-gradient-color);
position: relative;
&:hover {
background-size: 100%;
}
&::after {
position: absolute;
content: '';
top: -3px;
right: -1px;
background-color: $progress-gradient-color;
width: 10px;
height: 10px;
border-radius: 100%;
box-shadow: 0 0 17px 4px rgba($progress-gradient-color, 0.36);
}
.animate-circle {
position: absolute;
top: -11px;
right: -8px;
height: 25px;
width: 25px;
border: 5px solid $progress-gradient-color;
border-radius: 70px;
animation: heartbit 1s ease-out;
animation-iteration-count: infinite;
}
}
}
/**=====================
23. Progress CSS Ends
==========================**/

210
public/assets/scss/theme/_projectlist.scss Normal file
View File

@@ -0,0 +1,210 @@
/**==========================
11. Project list css start
=============================**/
.project-list {
.row {
margin: 15px;
}
button:focus {
outline: none !important;
}
.theme-form .form-group {
margin-bottom: 15px;
}
.border-tab.nav-tabs {
.nav-item .nav-link {
border: 1px solid transparent;
padding: 5px 30px 5px 0;
border-radius: 5px;
display: flex;
align-items: center;
font-weight: 600;
}
}
.btn {
// margin-right: 5px;
vertical-align: -12px;
float:right;
svg {
vertical-align: middle;
height: 16px;
}
}
ul {
margin-bottom: 0 !important;
border-bottom: 0;
li {
svg {
height: 18px;
vertical-align: middle;
margin-right: 5px;
}
}
}
}
.tab-content {
.row {
>div.col-xl-4 {
$show-numbers: true;
@if $show-numbers {
@for $i from 1 through 15 {
&:nth-child(#{$i}) {
animation-fill-mode: both;
animation: fadeIncustom .5s linear #{$i}00000ms;
}
}
}
}
}
}
.project-cards {
.tab-content {
margin-bottom: -30px;
}
}
.project-box {
border: 1px solid $light-gray;
border-radius: 5px;
padding: 30px;
margin-bottom: 30px;
position:relative;
h6{
font-weight: 600;
}
p{
color:$light-text;
}
.badge {
position: absolute;
right: 15px;
top: 15px;
}
.project-status {
p {
margin-bottom: 5px;
font-weight: 800;
}
}
.media {
margin-bottom: 15px;
}
.details{
margin-bottom: 10px;
}
}
.projectdetails {
.card {
.card-body {
padding: 20px;
}
.card-footer {
padding: 20px;
}
select {
width: 90px;
height: 28px;
font-size: 11px;
right: 20px;
top: 20px;
}
}
}
.projectmore {
.details {
.col-4 {
margin-bottom: 5px;
&:nth-child(even) {
opacity: 0.5;
}
}
}
h5 {
font-size: 20px;
font-weight: 600;
}
.task-list {
position: relative;
ul {
li {
margin-bottom: 5px
}
&+ul {
position: absolute;
left: 50%;
top: 0;
}
}
}
}
.new-users {
&.activity {
.gradient-round {
padding: 13px;
font-size: 20px;
line-height: 1.4;
text-align: center;
top: unset !important;
&::after {
display: none;
}
}
}
}
@media(max-width:767px){
.project-list {
.btn{
float:left;
margin-top:5px;
}
}
.project-box{
padding:20px;
}
}
@media(max-width:420px){
.project-box{
padding:15px;
.badge{
font-size:8px;
top:10px;
right:10px;
}
}
.project-list{
.border-tab{
&.nav-tabs{
display:flex;
.nav-item {
width:auto !important;
.nav-link{
padding: 5px 15px 5px 0;
font-size:14px;
}
}
}
}
}
}
/**==========================
11. Project list css end
=============================**/

375
public/assets/scss/theme/_radio.scss Normal file
View File

@@ -0,0 +1,375 @@
/**=====================
28. Radio CSS Start
==========================**/
.animate-chk{
label{
line-height: 1.6;
cursor: pointer;
&:last-child{
margin-bottom: 0;
}
}
}
.checkbox_animated {
cursor: pointer;
position: relative;
margin: 0 1rem 0 0;
&:before {
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
transform: rotate(-45deg) scale(0, 0);
content: "";
position: absolute;
left: 0.25rem;
top: 0.225rem;
z-index: 1;
width: 0.75rem;
height: 0.375rem;
border: 2px solid $primary-color;
border-top-style: none;
border-right-style: none;
}
&:after {
content: "";
position: absolute;
top: -0.125rem;
left: 0;
width: 1.3rem;
height: 1.3rem;
background: $white;
border: 2px solid $light-gray;
cursor: pointer;
}
&:checked:before {
transform: rotate(-45deg) scale(1, 1);
}
}
.radio_animated {
position: relative;
margin: 0 1rem 0 0;
cursor: pointer;
&:before {
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
transform: scale(0, 0);
content: "";
position: absolute;
top: 0;
left: 0.125rem;
z-index: 1;
width: 0.75rem;
height: 0.75rem;
background: $primary-color;
border-radius: 50%;
}
&:after {
content: "";
position: absolute;
top: -0.25rem;
left: -0.125rem;
width: 1.25rem;
height: 1.25rem;
background: $white;
border: 2px solid $light-gray;
border-radius: 50%;
}
&:checked:before {
transform: scale(1, 1);
}
}
.checkbox{
label {
display: inline-block;
position: relative;
padding-left: 16px;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
&::before {
content: "";
display: inline-block;
position: absolute;
width: 19px;
height: 19px;
left: 0;
margin-left: -16px;
border: 1px solid $light-gray;
border-radius: 3px;
background-color: $white;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&::after{
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: $theme-font-color;
}
}
input[type="checkbox"]{
opacity: 0;
&:focus{
outline-offset: -2px;
& + label{
&::before{
outline-offset: -2px;
}
}
}
}
input[type="checkbox"]{
&:checked{
& + label{
&::before{
font-family: $font-themify;
content: "\e64c";
text-align: center;
line-height: 1.2;
}
}
}
&:disabled{
& + label{
opacity: 0.65;
&::before{
background-color: $light-gray;
cursor: not-allowed;
}
}
}
}
.checkbox-circle{
label{
&::before{
border-radius: 50%;
}
}
}
.checkbox-inline{
margin-top: 0;
}
}
.m-squar{
label {
&::before {
border-radius: 0;
}
}
.checkbox-circle{
label{
&::before{
border-radius: 50%;
}
}
}
.checkbox-inline{
margin-top: 0;
}
}
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.checkbox-#{$btn-name}{
input[type="checkbox"]
{
&:checked{
& + label{
&::before{
// background-color: $btn-color;
border-color: $btn-color;
color: $btn-color;
}
&::after{
color: $white;
}
}
}
}
}
}
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.checkbox-solid-#{$btn-name}{
label{
&:before{
background-color: $btn-color;
border-color: $btn-color;
color: $white;
}
}
input[type="checkbox"]
{
&:checked{
& + label{
&::before{
background-color: $btn-color;
border-color: $btn-color;
color: $white;
}
&::after{
color: $white;
}
}
}
}
}
}
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.checkbox-#{$btn-name}{
label{
&::before{
border-color:$btn-color;
}
}
}
}
.m-checkbox-inline{
.checkbox{
display: inline-block;
}
.radio{
display: inline-block;
}
label{
margin-right:20px;
}
}
.radio{
label{
display: inline-block;
position: relative;
padding-left: 5px;
cursor: pointer;
&::before{
content: "";
display: inline-block;
position: absolute;
width: 19px;
height: 19px;
left: 0;
margin-left: -20px;
border: 1px solid $light-gray;
border-radius: 50%;
background-color: $white;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
&::after{
display: inline-block;
position: absolute;
content: " ";
width: 9px;
height: 9px;
left: 5px;
top: 5px;
margin-left: -20px;
border-radius: 50%;
background-color: $dark-gray;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
}
input[type="radio"]{
opacity: 0;
&:focus{
& + label{
&::before{
outline-offset: -2px;
}
}
}
&:checked{
& + label{
&::after{
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
&:disabled{
& + label{
opacity: 0.65;
&::before{
cursor: not-allowed;
}
}
}
}
.radio-inline{
margin-top: 0;
}
}
@each $btn-name, $btn-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.radio-#{$btn-name}{
input[type="radio"]
{
& + label{
&::before{
border-color: $btn-color;
}
&::after{
background-color: $btn-color;
}
}
&:checked{
& + label{
&::before{
border-color: $btn-color;
}
&::after{
background-color: $btn-color;
}
}
}
}
}
}
/**=====================
28. Radio CSS Ends
==========================**/

7434
public/assets/scss/theme/_responsive.scss Normal file
View File

File diff suppressed because it is too large Load Diff

231
public/assets/scss/theme/_ribbon.scss Normal file
View File

@@ -0,0 +1,231 @@
/**=====================
56. Ribbon CSS Start
==========================**/
.ribbon-wrapper, .ribbon-wrapper-right, .ribbon-wrapper-bottom, .ribbon-wrapper-right-bottom {
position: relative;
padding-top: 40px;
}
.ribbon-vertical-left-wrapper {
padding-left: 40px;
position: relative;
}
.ribbon-overflow {
overflow: hidden;
}
.ribbon-vertical-right-wrapper{
padding-right: 40px;
}
.ribbon-wrapper-bottom {
padding-bottom: 40px;
padding-top: 0;
}
.ribbon-wrapper-right-bottom {
padding-right: 40px;
}
.ribbon-content {
margin-bottom: 0;
}
.ribbon {
padding: 0 20px;
height: 30px;
line-height: 30px;
clear: left;
position: absolute;
top: 12px;
left: 0px;
color: $white;
z-index:2;
}
.ribbon-space-bottom{
top:0px;
}
.ribbon-clip{
left: -14px;
&:before{
position: absolute;
top: 30px;
left: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-bookmark{
&:before {
position: absolute;
top: 0;
left: 100%;
display: block;
width: 0;
height: 0;
content: '';
border: 15px solid $dark-color;
border-right: 10px solid transparent;
}
}
.ribbon-right {
left: auto;
right: -2px;
}
.ribbon-clip-right{
right: -14px;
&:before{
position: absolute;
top: 30px;
right: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-clip-bottom{
left: -14px;
bottom:12px;
top:auto;
&:before{
position: absolute;
bottom: 30px;
left: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-clip-bottom-right{
right: -14px;
left:auto;
bottom:12px;
top:auto;
&:before{
position: absolute;
bottom: 30px;
right: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-bookmark.ribbon-right:before {
right: 100%;
left: auto;
border-right: 15px solid $dark-color;
border-left: 10px solid transparent;
}
.ribbon-vertical-left {
clear: none;
padding: 0 5px;
height: 70px;
width: 30px;
line-height: 70px;
text-align: center;
left: 12px;
top: -2px;
}
.ribbon-vertical-right {
clear: none;
padding: 0 5px;
height: 70px;
width: 30px;
line-height: 70px;
text-align: center;
top: -2px;
left: auto;
right: 12px;
}
.ribbon-bookmark {
&.ribbon-vertical-left:before, &.ribbon-vertical-right:before {
top: 100%;
left: 0;
margin-top: -14px;
border-right: 15px solid $dark-color;
border-bottom: 10px solid transparent;
}
}
@each $ribbon-name, $ribbon-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.ribbon-#{$ribbon-name}{
background: $ribbon-color;
}
.ribbon-#{$ribbon-name} {
background: $ribbon-color;
}
.ribbon-bookmark {
&.ribbon-#{$ribbon-name}:before {
border-color: $ribbon-color;
border-right-color: transparent;
}
&.ribbon-right.ribbon-#{$ribbon-name}:before {
border-right-color: $ribbon-color;
border-left-color: transparent;
}
&.ribbon-vertical-left.ribbon-#{$ribbon-name}:before, &.ribbon-vertical-right.ribbon-#{$ribbon-name}:before {
border-right-color: $ribbon-color;
border-bottom-color: transparent;
}
}
.ribbon-#{$ribbon-name}.ribbon-corner {
&:before {
border-top-color: $ribbon-color;
border-left-color: $ribbon-color;
}
&.ribbon-right:before {
border-right-color: $ribbon-color;
border-left-color: transparent;
}
&.ribbon-bottom:before {
border-top-color: transparent;
border-bottom-color: $ribbon-color;
}
}
.ribbon-#{$ribbon-name}.ribbon-clip{
&:before{
border-color: transparent;
border-top-color: darken($ribbon-color, 10%);
border-right-color: darken($ribbon-color, 10%);
}
}
.ribbon-#{$ribbon-name}.ribbon-clip-right{
&:before{
border-right-color: transparent;
border-top-color: darken($ribbon-color, 10%);
border-left-color: darken($ribbon-color, 10%);
}
}
.ribbon-#{$ribbon-name}.ribbon-clip-bottom{
&:before{
border-top-color: transparent;
border-bottom-color: darken($ribbon-color, 10%);
border-right-color: darken($ribbon-color, 10%);
}
}
.ribbon-#{$ribbon-name}.ribbon-clip-bottom-right{
&:before{
border-top-color: transparent;
border-bottom-color: darken($ribbon-color, 10%);
border-right-color: transparent;
border-left-color: darken($ribbon-color, 10%);
}
}
}
/**=====================
56. Ribbon CSS Ends
==========================**/

4838
public/assets/scss/theme/_rtl.scss Normal file
View File

File diff suppressed because it is too large Load Diff

185
public/assets/scss/theme/_search.scss Normal file
View File

@@ -0,0 +1,185 @@
/**=====================
51. Search CSS Start
==========================**/
.search-page{
.search-form{
input{
&:focus{
outline: none;
}
}
.form-group{
// border:1px solid $primary-color;
position:relative;
border-radius:50px;
overflow:hidden;
.input-group-text{
position:absolute;
top:0;
left:0;
height:100%;
border-radius:20px;
border-color: $primary-color ;
background-color: $primary-color ;
padding: 0 20px;
i{
color:$white;
font-weight:600;
}
}
}
}
.info-block{
+.info-block{
padding-top:30px;
border-top:1px solid $light-gray;
margin-top:30px;
}
}
.border-tab.nav-tabs{
align-items: left;
justify-content: end;
.nav-item{
width: auto;
}
}
.search-links{
h6{
margin-bottom: 0;
font-size: 18px;
line-height: 1.6;
}
}
p{
margin-bottom: 0;
color: $light-text;
}
ul.search-info{
>li{
display: inline-block;
font-size: 12px;
line-height: 1;
color: #586082;
+ li{
border-left: 1px solid lighten($dark-color , 50%);
padding-left: 8px;
margin-left: 8px;
}
i{
color: $warning-color;
}
}
.rating{
li{
display:inline-block;
}
}
}
#video-links{
.embed-responsive
+ .embed-responsive{
margin-top: 30px;
}
}
.search-vid-block{
>div{
&:nth-child(n+2){
margin-top:30px;
}
}
}
}
.search-list {
margin-bottom: 30px;
width: auto;
display: flex;
border-radius: 10px;
overflow: hidden;
border: 1px solid $primary-color;
border: none;
margin-left: auto ;
margin-right: auto;
justify-content: center;
.nav-item {
background-color: rgba($primary-color, 0.1);
.nav-link {
border:none;
padding: 0.7rem 1.5rem;
opacity: 0.5;
&.active {
background-color: rgba($primary-color, 0.1);
// color: var(--theme-deafult);
opacity: 1;
}
}
&.show,
&.active {
background-color: rgba($primary-color, 0.1);
}
}
}
@media(max-width:1199px){
.search-page{
.search-banner{
margin-top:30px;
.card{
margin-bottom:unset;
}
}
}
}
@media(max-width:767px){
.search-page {
.search-links {
h6{
font-size:16px;
}
}
}
}
@media(max-width:575px){
.search-page {
.search-form {
.form-group {
input{
padding:8px 8px 8px 60px;
}
.input-group-text{
padding: 0 15px;
}
}
}
.info-block {
+ .info-block{
margin-top: 15px;
padding-top: 15px;
}
}
}
.search-list {
display:inline-flex;
margin-bottom:15px;
.nav-item{
display: inline-block;
margin-bottom:5px;
.nav-link{
padding: 8px 20px;
}
}
}
}
/**=====================
51. Search CSS Ends
==========================**/

224
public/assets/scss/theme/_select2.scss Normal file
View File

@@ -0,0 +1,224 @@
/**=====================
21. Select 2 CSS Start
==========================**/
.select2{
max-width: 100%;
}
.add-post {
#cke_text-box {
border: 1px solid $light-semi-gray;
}
form {
.m-checkbox-inline {
label {
margin-bottom: 0;
}
}
.form-group {
margin-bottom: 30px;
.form-control {
border: 1px solid $light-semi-gray;
}
.col-form-label {
padding-bottom: 0;
padding-top: 0;
.select2-container--default {
margin-top: 10px;
max-width: 100%;
.selection {
.select2-selection {
.select2-search__field {
padding: 2px;
}
}
}
.select2-selection--multiple {
border: 1px solid $light-semi-gray;
max-width: 100%;
.select2-selection__rendered {
li {
margin-top: 6px !important;
}
}
}
}
}
}
}
.dropzone {
margin-bottom: 30px;
}
}
.select2-drpdwn {
.select2-selection {
border-radius: 0!important;
border-color: $light-gray!important;
height: 40px!important;
padding: 5px;
}
.form-control{
border-radius: 5px;
}
.form-control-primary {
border-color: $primary-color;
color: $primary-color;
}
.form-control-secondary {
border-color: $secondary-color;
color: $secondary-color;
}
.form-control-success
{
border-color: $success-color;
color: $success-color;
}
.form-control-info
{
border-color: $light-font;
color: $light-font;
}
.form-control-warning
{
border-color: $warning-color;
color: $warning-color;
}
.form-control-danger
{
border-color: $danger-color;
color: $danger-color;
}
.form-control-inverse
{
border-color: $dark-color;
color: $dark-color;
}
.form-control-primary-fill {
background-color:$primary-color;
color:$white;
&:focus{
background-color:$primary-color;
}
}
.form-control-secondary-fill {
background-color:$secondary-color;
color: white;
&:focus{
background-color:$secondary-color;
}
}
.form-control-success-fill{
background-color:$success-color;
color:$white;
&:focus{
background-color:$success-color;
}
}
.form-control-info-fill
{
background-color: $light-font;
color: $white;
&:focus{
background-color: $light-font;
}
}
.form-control-warning-fill
{
background-color: $warning-color;
color: $white;
&:focus{
background-color: $warning-color;
}
}
.form-control-danger-fill
{
background-color: $danger-color;
color: $white;
&:focus{
background-color: $danger-color;
}
}
.form-control-inverse-fill
{
background-color: $dark-color;
color: $white;
&:focus{
background-color: $dark-color;
}
}
}
//colors
$color_bon_jour_approx: #e0e0e0;
$color_cape_cod_approx: #424242;
.selection{
.select2-selection{
font-family: $font-rubik, $font-serif;
border-radius: 5px !important;
.select2-search__field{
margin-top: 0;
padding: 0px 0 0 15px;
}
}
}
.select2-container--classic {
.select2-selection--multiple {
.select2-selection__choice {
padding: 2px 6px !important;
margin-top: 0 !important;
background-color: $primary-color !important;
border-color: darken($primary-color , 10%) !important;
color: $white;
margin-right: 8px !important;
}
.select2-selection__choice__remove {
color: $white !important;
float: right;
margin-left: 0.5rem;
}
}
.select2-results__option--highlighted[aria-selected] {
background-color: $color_bon_jour_approx !important;
color: $color_cape_cod_approx !important;
}
.select2-results__options .select2-results__option[aria-selected=true] {
color: $white !important;
}
}
.select2-container--default {
.select2-selection--single{
.select2-selection__arrow {
top: 7px !important;
right: 10px !important;
}
}
.select2-selection--multiple {
.select2-selection__choice {
padding: 2px 6px !important;
margin-top: 0 !important;
background-color: $primary-color !important;
border-color: darken($primary-color , 10%) !important;
color: $white;
margin-right: 8px !important;
}
.select2-selection__choice__remove {
color: $white !important;
float: right;
margin-left: 0.5rem;
}
}
.select2-results__option--highlighted[aria-selected] {
background-color: $color_bon_jour_approx !important;
color: $color_cape_cod_approx !important;
}
.select2-results__options .select2-results__option[aria-selected=true] {
background-color: $primary-color !important;
color: $white !important;
}
}
.select2-results > .select2-results__options{
border: 1px solid $light-gray;
}
/**=====================
21. Select 2 CSS Ends
==========================**/

1343
public/assets/scss/theme/_sidebar.scss Normal file
View File

File diff suppressed because it is too large Load Diff

429
public/assets/scss/theme/_social-app.scss Normal file
View File

@@ -0,0 +1,429 @@
/**=====================
79. social app css start
==========================**/
.social-tab{
display: flex;
align-items: center;
justify-content: space-between;
padding:30px;
ul{
border-bottom:none !important;
li{
a{
font-weight:600;
display:flex;
align-items:center;
background-color:rgba($primary-color,0.05);
svg{
width:15px;
height:15px;
margin-right:5px;
color:$primary-color;
}
&:hover{
border-color:transparent !important;
}
&.active{
background-color:$primary-color !important;
color:$white !important;
svg{
color:$white;
}
}
}
&:nth-child(n+2){
margin-left:20px;
}
}
}
.input-group{
width: 280px;
.form-control{
background-color:rgba($primary-color,0.08);
border-color:$light-gray;
height:40px;
padding-left: 13px;
font-size: 14px;
}
.input-group-text{
background-color:$primary-color;
i{
color:$white;
}
}
}
}
.social-network{
span{
margin-bottom:10px;
display: block;
}
}
.social-list {
.media{
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
&:last-child{
margin-bottom: 0;
}
.media-body{
a{
color: $light-text;
}
span{
font-weight: 600;
color: $theme-body-font-color;
}
&:hover{
a{
color: $primary-color;
}
}
}
}
}
.photos{
margin-bottom: -10px;
ul{
// text-align:center;
li{
display:inline-block;
margin-right:10px;
margin-bottom:10px;
width:65px;
img{
width:100%;
}
}
}
}
.new-users-social {
margin-bottom: 30px;
.media {
img {
width: 58px;
}
.media-body {
margin-top: 10px;
}
}
svg{
circle{
color: $light-text;
}
}
}
.like-content{
span{
i{
font-size: 14px;
}
}
}
.timeline-content{
p{
margin-top: 30px;
color: $light-text;
}
.comment-number{
i{
color: $light-text;
margin-right: 20px;
}
}
.comments-box{
margin-top: 30px;
.input-group{
margin-top: 6px;
.input-txt-bx{
// border: none;
&::placeholder{
color: $light-text;
}
}
.input-group-append{
.btn{
i{
font-size: 20px;
display: flex;
color: $light-text;
}
}
}
.input-group-text{
background-color:$primary-color;
padding:10px;
img{
width:22px;
height:22px;
}
}
}
}
}
.social-chat{
margin-top: 30px;
span{
span{
font-weight: normal;
color: $light-text;
font-size: 12px;
}
}
.media-body{
padding: 30px;
border: 1px solid $light-gray;
position: relative;
p{
margin-top: 5px;
}
&:before{
content: '';
position: absolute;
top: 19px;
right: 100%;
border: 7px solid transparent;
border-right: 7px solid $semi-dark;
}
&:after {
content: '';
position: absolute;
top: 19px;
right: 100%;
border: 7px solid transparent;
border-right: 7px solid $white;
}
}
.your-msg, .other-msg{
margin-bottom: 30px;
}
.other-msg{
margin-left: 40px;
}
}
.socialprofile{
span{
color: $light-text;
}
h5{
margin-bottom:10px;
}
.social-btngroup {
margin:15px 0;
}
.likes-profile{
h5{
span{
color: $theme-body-font-color;
}
}
}
.social-group{
margin-top:15px;
ul{
li{
&:nth-child(4){
margin-left: -22px;
}
}
}
}
}
.social-status{
form{
.form-group{
.form-control-social{
border: 1px solid $light-gray;
padding-left: 15px;
margin-bottom: 30px;
width:100%;
height:40px;
border-radius:5px;
}
}
}
.media{
position: relative;
margin-bottom: 30px;
&:last-child{
margin-bottom: 0;
}
.social-status{
content: '';
position: absolute;
width: 12px;
height: 12px;
background-color:$white;
bottom: 0;
left: 35px;
border-radius: 100%;
}
.social-online{
border: 3px solid $success-color;
}
.social-busy{
border: 3px solid $warning-color;
}
.social-offline{
border: 3px solid $semi-dark;
}
.media-body{
p{
color: $light-text;
font-size:13px;
margin-bottom: 5px;
}
span{
+ span{
color: $light-text;
}
}
.light-span{
color: $light-text;
}
}
}
}
.social-header{
h5{
span{
&:first-child {
line-height: 1.48;
}
svg{
circle{
color: $light-text;
}
}
}
}
}
.details-about{
+ .details-about{
margin-top:15px;
}
.your-details{
p{
color: $light-text;
line-height:1.6;
}
}
}
.avatar-showcase{
.friend-pic{
margin-right: 8px;
margin-bottom: 10px;
}
.pepole-knows{
ul{
li{
display: inline-block;
margin-right: 21px;
margin-bottom: 10px;
&:last-child{
margin-right:0;
}
.add-friend{
h6{
margin-top: 3px;
}
span{
margin-bottom:5px;
margin-top:5px;
}
}
}
}
}
}
.activity-log{
.my-activity{
+ .my-activity{
margin-top:15px;
}
h6{
margin-bottom:15px;
}
p{
margin-bottom: 5px;
color: $light-text;
span{
svg{
width: 15px;
height: 15px;
}
}
}
}
}
.social-app-profile{
.card{
.socialprofile{
h5{
margin-bottom:5px;
font-weight:600;
font-size: 16px;
}
h4{
font-size:20px;
}
h6{
margin-bottom: unset;
}
span{
font-size:12px;
.badge{
font-size: 10px;
padding: 2px 3px;
font-weight: 400;
}
}
}
}
}
@media(max-width:480px){
.social-app-profile{
.card {
.socialprofile {
h4{
font-size:18px;
}
}
}
}
.customers {
ul {
li {
img{
width: 25px !important;
}
}
}
}
.socialprofile {
.social-group{
margin-top:10px;
}
}
.photos{
ul{
li{
width:49px;
}
}
}
.new-users-social {
.media {
img{
width:50px;
}
}
}
}
/**=====================
79. social app CSS end
==========================**/

311
public/assets/scss/theme/_switch.scss Normal file
View File

@@ -0,0 +1,311 @@
/**=====================
18. Switch CSS Start
==========================**/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
input {
display: none;
&:checked + .switch-state {
background-color: $primary-color;
&:before {
transform: translateX(26px);
}
}
&:focus + .switch-state {
box-shadow: 0 0 1px $primary-color;
}
}
}
.switch-state {
border-radius: 20px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $light-gray;
// background-color: $primary-color;
transition: .4s;
&:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: $white;
transition: .4s;
border-radius: 20px;
}
}
.icon-state{
.switch-state{
&:after{
content: "\efb8";
font-family: $font-ICO;
left: 10px;
position: absolute;
top: 10px;
color: $dark-color;
transition: .4s;
opacity: 0.3;
}
}
input {
&:checked + .switch-state {
&:after {
content: "\efad";
left: 36px;
opacity: 1;
transition: .4s;
}
}
}
}
.switch-lg{
.switch{
width: 75px;
height: 40px;
.switch-state{
&:before {
height: 30px;
width: 30px;
left: 7px;
bottom: 5px;
top: 4px;
}
}
}
}
.switch-sm{
.switch{
width: 25px;
height: 16px;
margin-top: 10px;
margin-bottom: 0px;
.switch-state{
&:before {
height: 8px;
width: 8px;
left: 4px;
bottom: 4px;
}
}
}
input {
&:checked + .switch-state {
&:before {
left:-13px;
}
}
}
}
.switch-lg.icon-state {
.switch{
.switch-state{
&:after {
left: 12px;
font-size: 18px;
}
}
input {
&:checked + .switch-state {
&:after {
left: 47px;
}
&:before {
transform: translateX(32px);
}
}
}
}
}
.switch-sm.icon-state {
.switch{
.switch-state{
&:after {
top: 4px;
left: 4px;
font-size: 8px;
}
}
input {
&:checked + .switch-state {
&:after {
left: 13px;
top:4px;
}
}
}
}
}
.switch-outline {
.switch-state {
background-color: $white;
border: 1px solid $primary-color;
transition: .4s;
&:before {
background-color: $light-gray;
bottom: 3px;
color: $white;
}
}
}
.switch-outline {
.switch {
input {
display: none;
&:checked + .switch-state {
background-color: $transparent-color;
border: 1px solid $primary-color;
&:before {
background-color: $primary-color;
bottom: 3px;
transform: translateX(26px);
}
&:after {
color: $white;
}
}
}
}
}
.switch-outline {
.switch-state.bg-primary {
border: 1px solid $primary-color;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-primary {
background-color: $transparent-color !important;
border: 1px solid $primary-color;
&:before {
background-color: $primary-color;
}
}
}
}
.switch-state.bg-dark {
border: 1px solid $dark-color;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-dark {
background-color: $transparent-color !important;
border: 1px solid $dark-color;
&:before {
background-color: $dark-color;
}
}
}
}
.switch-state.bg-warning {
border: 1px solid $warning-color;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-warning {
background-color: $transparent-color !important;
border: 1px solid $warning-color;
&:before {
background-color: $warning-color;
}
}
}
}
.switch-state.bg-success {
border: 1px solid $success-color;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-success {
background-color: $transparent-color !important;
border: 1px solid $success-color;
&:before {
background-color: $success-color;
}
}
}
}
.switch-state.bg-info {
border: 1px solid $light-font;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-info {
background-color: $transparent-color !important;
border: 1px solid $light-font;
&:before {
background-color: $light-font;
}
}
}
}
.switch-state.bg-danger {
border: 1px solid $danger-color;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-danger {
background-color: $transparent-color !important;
border: 1px solid $danger-color;
&:before {
background-color: $danger-color;
}
}
}
}
.switch-state.bg-primary {
border: 1px solid $primary-color;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-primary {
background-color: $transparent-color !important;
border: 1px solid $primary-color;
&:before {
background-color: $primary-color;
}
}
}
}
.switch-state.bg-secondary {
border: 1px solid $secondary-color;
background-color: $transparent-color !important;
}
.switch {
input {
&:checked + .switch-state.bg-secondary {
background-color: $transparent-color !important;
border: 1px solid $secondary-color;
&:before {
background-color: $secondary-color;
}
}
}
}
}
.switch-showcase{
margin-bottom: -8px;
.media{
line-height: 1;
}
}
/**=====================
18. Switch CSS Ends
==========================**/

192
public/assets/scss/theme/_tab.scss Normal file
View File

@@ -0,0 +1,192 @@
/**=====================
44. Tabs CSS Start
==========================**/
.nav-pills {
.nav-link.active, .show > .nav-link {
background-color: $primary-color;
}
.nav-link{
font-weight:600;
}
}
.nav{
i{
margin-right: 10px;
}
}
$nav-name:theme,
primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$nav-color:$primary-color,
$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $nav-name {
$i: index($label-name, $var);
.nav-#{$var} , .nav-pills.nav-#{$var} {
.nav-link{
color: nth($nav-color, $i);
}
.nav-link.active, .show > .nav-link {
background-color: nth($nav-color, $i);
color: $white;
}
}
}
.nav-right{
justify-content: flex-end;
}
.nav-tabs.nav-bottom {
.nav-item {
.nav-link.active,.nav-link.focus,.nav-link.hover{
border-color: $white #dee2e6 #dee2e6;
}
}
}
.tab-content{
~ .nav-tabs{
&.border-tab {
margin-bottom: 0;
margin-top: 30px;
}
}
}
// Material style css
.border-tab.nav-tabs{
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-bottom: 30px;
.nav-item{
.nav-link{
font-size: 16px;
color: $dark-color;
text-align: center;
padding:10px 25px;
border: none;
border-bottom: 2px solid $light-gray;
transition: 0.3s;
background-color:transparent;
&.active, &.show, &:focus, &:hover {
color: $primary-color;
}
&.active, &.show, &:focus {
border-bottom: 2px solid $primary-color;
}
}
}
}
.border-tab.nav-left{
.nav-link{
border-left: 2px solid transparent;
transition: all 0.3s ease;
color: $dark-color;
}
.nav-link.active,.show > .nav-link{
background-color: transparent;
border-left-color: $primary-color;
color: $primary-color;
border-radius: 0;
transition: all 0.3s ease;
}
}
.border-tab.nav-right{
.nav-link{
border-right: 2px solid transparent;
transition: all 0.3s ease;
color: $dark-color;
text-align: right;
}
.nav-link.active,.show > .nav-link{
background-color: transparent;
border-right-color: $primary-color;
color: $primary-color;
border-radius: 0;
transition: all 0.3s ease;
}
}
$m-nav-name:theme,
primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$nav-color:$primary-color,
$primary-color,
$secondary-color,
$success-color,
$danger-color,
$light-font,
$light-gray,
$dark-color,
$warning-color;
@each $var in $m-nav-name {
$i: index($label-name, $var);
.border-tab.nav-#{$var} {
.nav-link.active,.nav-item.show,.nav-link:focus,.nav-link:hover {
color: nth($nav-color, $i);
background-color: transparent;
}
.nav-item {
.nav-link {
transition: 0.3s;
&.active, &.show, &:focus {
border-bottom: 2px solid nth($nav-color, $i);
}
&.active, &.show, &:focus, &:hover {
color: nth($nav-color, $i);
}
}
}
}
.border-tab.nav-left.nav-#{$var}{
.nav-link.active,.show > .nav-link{
border-left-color: nth($nav-color, $i);
color: nth($nav-color, $i);
}
}
.border-tab.nav-right.nav-#{$var}{
.nav-link.active,.show > .nav-link{
border-right-color: nth($nav-color, $i);
color: nth($nav-color, $i);
}
}
}
.tabbed-card{
ul{
position: absolute;
right: 15px;
top: 22px;
&.border-tab{
&.nav-tabs{
top: 0;
.nav-item{
float: right;
.nav-link{
padding: 28px 15px;
}
}
}
}
}
}
/**=====================
44. Tabs CSS Ends
==========================**/

231
public/assets/scss/theme/_table.scss Normal file
View File

@@ -0,0 +1,231 @@
/**=====================
39. Table CSS Start
==========================**/
.table-bordered {
td, th {
border-color: $light-gray !important;
}
}
.pills-component {
width: 20%;
}
.product-page-width {
width: 80%;
}
.table{
margin-bottom: $table-b-margin;
th,td{
padding: $table-padding;
}
th{
color: $table-heading-color;
}
td{
color: $table-row-color;
}
[class*='bg-']{
color: $white;
}
.bg-light{
color: $theme-body-font-color;
}
tfoot{
font-weight: $table-footer-font-weight;
}
thead{
&.bg-primary{
tr{
th{
color:$white;
}
}
}
&.table-primary{
background-color:rgba($primary-color,0.1);
--bs-table-bg:rgba($primary-color,0.1);
color:$primary-color;
tr{
th{
color:$primary-color;
}
}
}
}
}
.table-inverse {
th,td{
color: $white;
}
}
.table[class*='bg-']{
th,td{
color: $white;
}
}
.table-hover {
tbody {
tr:hover {
background-color: rgba($primary-color,0.1);
--bs-table-accent-bg:unset;
th,td{
color:$primary-color;
}
}
}
}
//Sizing class
.table-xl{
td,th{
padding: $table-xl-padding;
font-size: $table-xl-font;
}
}
.table-lg{
td,th{
padding: $table-lg-padding;
font-size: $table-lg-font;
}
}
.table-de{
td,th{
padding: $table-de-padding;
}
}
.table-sm{
th,td{
padding: $table-sm-padding;
font-size: $table-sm-font;
}
}
.table-xs{
th,td{
padding: $table-xs-padding;
font-size: $table-xs-font;
}
}
//Table Border
.table-border-horizontal {
tr,th,td{
border-top: 1px solid $horizontal-border-color;
padding: $horizontal-padding;
}
}
.table-border-vertical{
tr,th,td{
border-top: 0;
border-right: 1px solid $horizontal-border-color;
}
tr{
td{
&:last-child{
border-right: none;
}
}
}
}
.table-bordernone{
td{
border: 0;
}
.bd-t-none{
border-top: none;
}
.u-s-tb{
padding: 11px;
}
}
.table-inverse{
color: $white;
background-color: $table-inverse-bg-color;
th,td{
border-color: $white;
}
&.table-bordered {
border: 0;
}
}
.table-striped{
tbody{
tr{
&:nth-of-type(odd){
background-color:rgba(245, 247, 250, 0.5);
}
}
}
}
.table-bordered{
td,th{
border-color: $light;
}
}
.table {
> :not(:last-child) {
> :last-child {
> *{
border-color:$light-gray;
}
}
}
}
thead, tbody, tfoot, tr, td, th{
border-color:$light-gray;
}
.table-styling{
&.table-primary {
&.table-striped {
tbody {
tr{
&:nth-of-type(odd){
// background-color:rgba($primary-color,0.1);
--bs-table-accent-bg:unset;
&:hover{
color:$primary-color;
}
}
&:nth-of-type(even){
&:hover{
th,td{
color:$white;
}
}
}
}
}
}
}
}
.table-success{
background-color:rgba($success-color,0.1);
--bs-table-bg:rgba($success-color,0.1);
color:$success-color;
tr{
th{
color:$success-color;
}
}
}
/**=====================
39.Table CSS Ends
==========================**/

132
public/assets/scss/theme/_task.scss Normal file
View File

@@ -0,0 +1,132 @@
/**=====================
87. task app CSS Start
==========================**/
.modal-open {
.datepickers-container {
z-index: 1075;
}
}
.date-details {
align-items: center;
> div {
+ div {
margin-left: 10px;
}
}
}
.taskadd {
table {
tr {
td {
border-top: none;
&:first-child {
padding-left: 30px;
}
&:last-child {
padding-right: 30px;
}
svg {
width: 18px;
height: 18px;
color: $semi-dark;
}
}
&:first-child {
td {
padding-top: 30px;
}
}
&:last-child {
td {
padding-bottom: 30px;
}
}
}
}
}
// responsive
@media only screen and (max-width: 1660px) {
.taskadd {
table {
tr {
td {
&:first-child {
min-width: 160px;
}
&:nth-child(3) {
min-width: 70px;
}
}
}
}
}
}
@media only screen and (max-width: 991px) {
.date-details {
display: block ! important;
margin-bottom: -10px;
.d-inline-block {
margin-bottom: 10px;
}
}
.taskadd {
table {
tr {
td {
&:first-child {
padding-left: 20px;
}
}
&:first-child {
td {
padding-top: 20px;
}
}
&:last-child {
td {
padding-bottom: 20px;
}
}
}
}
}
}
@media only screen and (max-width: 767px) {
.taskadd {
table {
tr {
td {
&:nth-child(2) {
min-width: 745px;
}
}
}
}
}
}
@media only screen and (max-width: 575px) {
.taskadd {
table {
tr {
td {
&:first-child {
padding-left: 15px;
}
}
&:first-child {
td {
padding-top: 15px;
}
}
&:last-child {
td {
padding-bottom: 15px;
}
}
}
}
}
}
/**=====================
87. task app CSS Ends
==========================**/

499
public/assets/scss/theme/_theme-customizer.scss Normal file
View File

@@ -0,0 +1,499 @@
/**=====================
59. Customizer CSS Start
==========================**/
.customizer-links{
position:fixed;
right:00px;
top:40%;
background-color:$white;
border-radius:8px;
// overflow:hidden;
z-index:3;
box-shadow:0 0 15px 3px rgba(176, 185, 189, 0.3);
transition:all 0.3s ease;
&.open{
right:330px;
border-radius: 8px 0 0 8px;
transition: all 0.3s ease;
}
.nav-link{
padding:0;
border-radius:0;
position:relative;
.settings{
i{
color:$primary-color;
font-size:24px;
padding:15px 17px;
display:inline-block;
cursor:pointer;
margin:0;
}
}
&.active{
.settings {
i{
color:$white;
background-color:$primary-color;
}
}
}
&+.nav-link{
border-top: 1px solid rgba($primary-color, 0.1);
}
span{
position: absolute;
right:-80px;
width: max-content;
text-align: right;
padding: 7px 10px;
display: block;
top: 8px;
border-radius: 5px;
transform: scale(0);
transition: all 0.3s ease;
opacity: 0;
color: $white;
background-color:$primary-color;
// box-shadow: 0 0 37px rgb(8 21 66 / 10%);
}
&:after{
content: "";
position: absolute;
top:17px;
left:-10px;
width:0;
height:0;
// border-top: 10px solid transparent;
// border-left: 15px solid $primary-color;
// border-bottom: 10px solid transparent;
}
&:hover{
span{
opacity:1;
right:68px;
transform: scale(1);
transition: all 0.3s ease;
}
&:after{
opacity: 1;
transform: scale(1);
border-top: 8px solid transparent;
border-left: 10px solid $primary-color;
border-bottom: 8px solid transparent;
transition: all 0.3s ease;
}
}
}
}
.customizer-contain{
direction: ltr;
position: fixed;
height:calc(100vh);
top:80px;
width:333px;
right:-335px;
background-color: $white;
z-index: 99;
transition: all 0.3s ease;
&.open{
right: 0px;
transition: all 0.3s ease;
box-shadow: 0 0 10px 1px rgba(68, 102, 242, 0.05);
}
li{
position: relative;
&.active{
&:before{
content: "";
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
left: 0;
top: 0;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
color: $dark-color;
box-shadow: 0 0 11px 5px rgb(226, 226, 226);
}
}
}
h6{
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5px;
color: #212529;
}
.customizer-header{
padding:15px 25px;
border-bottom: 1px solid $light-gray;
.icon-close{
position: absolute;
font-size: 18px;
cursor: pointer;
font-weight: 900;
right: 30px;
color: $primary-color;
}
h5{
font-weight: 700;
text-transform: uppercase;
color: #313131;
}
p{
color: #313131;
}
}
.customizer-body{
padding : 15px 25px;
max-height: calc(100vh - 170px);
overflow-y: scroll;
.layout-grid{
&.customizer-mix{
.color-layout{
height: 70px;
width: 80px;
border: 1px solid #f6f7fb;
border-radius: 5px;
display: inline-block;
margin-bottom: 7px;
margin-right: 3px;
}
}
}
.tab-pane{
> h6{
position: relative;
margin-top: 25px;
padding-top: 25px;
margin-bottom: 20px;
border-top: 1px solid #f3f3f3;
font-size: 15px;
&:before{
content: "";
position: absolute;
height: 3px;
width: 14px;
border-bottom: 2px dotted $dark-color;
bottom: -4px;
}
&:first-child{
border-top: 0;
padding-top: 0;
margin-top: 0;
}
}
.unlimited-color-layout{
display: flex;
align-items: center;
input{
height:40px;
width:40px;
border-radius:5px;
display:inline-block;
margin-right:3px;
border: 1px solid #b8b8b8;
padding:3px;
background-color: $light-background;
}
}
}
.nac-pills{
border: 1px solid #f1f1f1;
margin-bottom: 10px;
border-radius: 5px;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
.nav-item{
width: 33.33%;
text-align: center;
.nav-link{
border-radius: 5px;
&.active{
background-color: $primary-color;
color: $white;
}
}
}
.nav-link{
padding: 0.2rem 1rem;
}
}
li{
cursor: pointer;
opacity: 0.9;
&.active{
opacity: 1;
}
}
.fade{
&:not(.show) {
display: none;
}
}
.color-layout{
height: 40px;
width: 40px;
border-radius: 5px;
display: inline-block;
margin-bottom: 7px;
margin-right: 3px;
border: 1px solid #b8b8b8;
padding: 3px;
> div{
background-color: #24695c;
height: 100%;
width: 100%;
border-radius: 3px;
}
.body{
.contain{
position: absolute;
height: auto;
width: 100%;
li{
height: 1px;
width: 65%;
background-color: #24695c;
border-radius: 5px;
padding: 0;
margin-left: 10px;
margin-bottom: 4px;
&:before{
content: "";
position: absolute;
height: 1px;
width: 3px;
background-color: #24695c;
left: -6px;
border-radius: 5px;
}
}
}
}
&[data-attr="color-2"] {
div{
background-color: #d97f3d;
}
}
&[data-attr="color-3"] {
div {
background-color: #168eea;
}
}
&[data-attr="color-4"] {
div {
background-color: #665ed5;
}
}
&[data-attr="color-5"]{
div {
background-color: #3a9aa8;
}
}
&[data-attr="color-6"] {
div {
background-color: #7951aa;
}
}
}
> li {
.body{
.body{
ul{
background-color: #f6f7fb;
}
}
}
}
.dark{
> li {
background-color: #2f3c4e;
.body{
ul{
background-color: #2f3c4e;
}
}
}
}
.main-layout{
> li{
height: 70px;
width: 86px;
border: 1px solid $light-gray;
border-radius: 5px;
display: inline-block;
// &+li{
// margin-left: 7px;
// }
}
.box-layout {
padding-left: 20px;
padding-right: 20px;
margin-top: 16px;
.body {
.badge {
left: -14px;
}
}
}
}
.sidebar-type,.sidebar-setting{
> li{
height: 70px;
width: 86px;
border: 1px solid $light-gray;
border-radius: 5px;
display: inline-block;
&+li{
// margin-left: 7px;
}
}
}
.sidebar-type {
li {
&:first-child {
.body {
ul {
li {
&.bg-dark, &.sidebar {
width: 100%;
height: 10px;
display: block;
}
&.bg-light, &.body {
height: calc(100% - 10px);
}
}
}
}
}
}
}
.sidebar-bg-settings{
display: flex;
align-items: center;
justify-content: space-between;
li{
height: 100px;
width: 100%;
border: 1px solid $light-gray;
border-radius: 5px;
display: inline-block;
margin-right: 9px;
box-shadow: 0 0 11px -2px rgba(128, 128, 128, 0.40);
}
}
ul.layout-types{
margin-bottom:-20px;
li{
display:block;
width:100%;
height:auto;
text-align: center;
margin-bottom: 20px;
h6{
margin-top: 10px;
}
+li{
margin-left: unset;
}
}
}
}
.customizer-footer{
position: absolute;
bottom: 0;
padding: 25px;
width: 100%;
border-top: 1px solid $light-gray;
background-color: $white;
}
}
.layout-grid:not(.customizer-color){
li{
padding: 5px;
> .header{
height: 9px;
border-radius: 3px;
position: relative;
ul{
position: absolute;
top: -8px;
left: 5px;
>li{
display: inline-block;
width: 4px;
height: 4px;
border-radius: 5px;
top: -2px;
background-color: $danger-color;
margin-right: 1px;
padding: 0;
&:nth-child(2){
background-color: $warning-color;
}
&:nth-child(3){
background-color: $success-color;
}
}
}
}
> .body{
background-color: $light-gray;
height: calc(100% - 16px);
border-radius: 3px;
position: relative;
margin-top: 5px;
text-align: center;
line-height: 3.1;
ul{
height: 100%;
background-color: $white;
.sidebar{
width: 18px;
height: 100%;
border-radius: 3px;
display: inline-block;
margin-right: 3px;
padding: 0;
&.compact{
width: 12px;
&~.body {
width: calc(100% - 19px);
}
}
&.compact-icon{
width: 7px;
&~.body {
width: calc(100% - 14px);
}
}
}
.body{
width: calc(100% - 25px);
padding: 0;
margin: 0;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3px;
.badge{
position: absolute;
}
}
}
}
}
}
/**=====================
59.Customizer CSS Ends
==========================**/

528
public/assets/scss/theme/_timeline-v.scss Normal file
View File

@@ -0,0 +1,528 @@
/**=====================
42. Timeline CSS Start
==========================**/
.activity{
.media{
margin-bottom: 30px;
&:last-child{
margin-bottom: 0;
}
.gradient-round{
position: relative;
width: 53px;
height: 53px;
background-image: $gradient-primary;
border-radius: 100%;
top:-18px;
svg{
position: absolute;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 18px;
right: 0;
margin: 0 auto;
path, line, circle{
color: $white;
}
}
&.gradient-line-1{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 62px;
bottom: -77px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.small-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 19px;
bottom: -34px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.medium-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 53px;
bottom: -68px;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
.media-body{
h6{
font-weight: 600;
margin-bottom: 30px;
span{
font-weight: normal;
color: $light-text;
}
}
p{
width: 80%;
}
}
}
}
.timeline-small{
.media{
margin-bottom: 30px;
&:last-child{
margin-bottom: 0;
}
.timeline-round{
position: relative;
width: 53px;
height: 53px;
border-radius: 100%;
top:-18px;
svg{
position: absolute;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 18px;
right: 0;
margin: 0 auto;
path, line, circle{
color: $white;
}
}
&.timeline-line-1{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 62px;
bottom: -77px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.small-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 19px;
bottom: -34px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.medium-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 53px;
bottom: -68px;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
.media-body{
h6{
font-weight: 600;
margin-bottom: 30px;
span{
font-weight: normal;
color: $light-text;
}
}
p{
width: 80%;
}
}
}
}
.cd-container {
width:90%;
max-width:1170px;
margin:0 auto;
z-index:1;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
// header {
// height: 200px;
// line-height: 200px;
// text-align: center;
// background: $dark-color;
// h1 {
// color: $white;
// font-size: 18px;
// }
// }
@media only screen and (min-width: 1170px) {
// header {
// height: 300px;
// line-height: 300px;
// h1 {
// font-size: 24px;
// }
// }
#cd-timeline::before {
left: 50% !important;
margin-left: -2px;
}
.cd-timeline-block {
margin: 4em 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:nth-child(even) {
.cd-timeline-content {
float:right;
.cd-date {
left:auto;
right:122%;
text-align:right;
padding-right:15px;
}
}
.cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: $light-gray;
}
}
&:nth-child(odd){
.cd-timeline-content{
.cd-date{
padding-left:15px;
}
}
}
}
.cd-timeline-img {
width:50px;
height:50px;
left:50%;
margin-left: -30px;
> i{
font-size: 18px;
top: 50%;
left: 50%;
padding: 3px;
}
}
.cssanimations {
.cd-timeline-img {
&.is-hidden {
visibility: hidden;
}
&.bounce-in {
visibility: visible;
animation: cd-bounce-1 0.6s;
}
}
.cd-timeline-content {
&.is-hidden {
visibility: hidden;
}
&.bounce-in {
visibility: visible;
animation: cd-bounce-2 0.6s;
}
}
.cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
animation: cd-bounce-2-inverse 0.6s;
}
}
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
.cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
}
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color:$light-gray;
}
}
#cd-timeline {
position: relative;
padding: 2em 0;
}
#cd-timeline::before {
content: '';
position: absolute;
top: 0;
font-size: 1.5rem;
height: 100%;
width: 2px;
background: $light-gray;
left: -15px;
}
.cd-timeline-block {
position: relative;
margin: 30px 0;
&:after {
content: "";
display: table;
clear: both;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
border-radius: 4px;
i {
display: block;
position: relative;
left: 45%;
top: 44%;
margin-left: -12px;
margin-top: -12px;
font-size: 27px;
color: $white;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
transform: scale(0.5);
}
60% {
opacity: 1;
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
background-color:$light-background ;
border-radius: 4px;
padding: 30px;
border: 1px solid $light-gray;
p{
padding-top: 9px;
}
h4{
margin-bottom:0;
font-weight:700;
}
&:after {
content: "";
display: table;
clear: both;
}
audio{
width: 100%;
}
.cd-date {
font-weight:700;
font-size: 13px;
display: inline-block;
float: left;
padding: .8em 0 0;
opacity: .7;
}
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-left: 7px solid $light-gray;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content {
.cd-date {
font-size: 14px;
padding-bottom: 0;
}
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@-moz-keyframes cd-bounce-2 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
opacity: 1;
transform: translateX(20px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
transform: translateX(100px);
}
60% {
opacity: 1;
transform: translateX(-20px);
}
100% {
transform: translateX(0);
}
}
@media only screen and (max-width: 1169px){
.cd-timeline-block{
.cd-timeline-img{
left: -2px;
height: 30px;
width: 30px;
margin-left: -30px;
top: 14px;
z-index: 8;
> i{
font-size: 15px;
top: 16px;
left: 17px;
padding: 3px;
}
}
}
.landing-main{
#cd-timeline::before {
left: -39px;
}
.cd-timeline-block{
.cd-timeline-img{
left: -34px;
height: 50px;
width: 50px;
top: 1px;
z-index: 8;
> i{
font-size: 23px;
top: 21px;
left: 7px;
padding: 3px;
}
}
}
}
}
@media only screen and (max-width: 576px){
.cd-timeline-content {
padding: 15px;
h4{
font-size: 18px;
}
}
}
/**=====================
42. Timeline CSS Ends
==========================**/

200
public/assets/scss/theme/_timeliny.scss Normal file
View File

@@ -0,0 +1,200 @@
/**=====================
43. Timeline 2 CSS Start
==========================**/
@import "../theme/variables";
$timeliny_classname: "timeliny";
$timeliny_dots-radius: 0.6rem;
$timeliny_global-width: 100%;
$timeliny_max-inner-width: 1024px;
$timeliny_spacings: 5rem;
$timeliny_transition-time: 0.35s;
$timeliny_vertical-line-pos: 32%;
$timeliny_small-breakdown: 768px;
.#{$timeliny_classname} {
position: relative;
display: block;
padding: $timeliny_spacings * 2 0;
width: $timeliny_global-width;
border-top: 1px solid lighten($light-gray, 3%);
border-bottom: 1px solid lighten($light-gray, 3%);
text-rendering: optimizeLegibility;
color: $light-gray;
opacity: 0;
overflow: hidden;
cursor: move;
&.loaded {
opacity: 1;
}
&::before {
content: "";
position: absolute;
// background-color: $dark-gray;
background-color: rgba($primary-color, 0.08);
width: 100%;
height: 1px;
top: 50%;
left: 0;
}
.#{$timeliny_classname}-wrapper {
display: block;
margin: auto;
width: 100%;
max-width: $timeliny_max-inner-width;
}
.#{$timeliny_classname}-dot {
-webkit-transition: all $timeliny_transition-time ease-in-out;
-moz-transition: all $timeliny_transition-time ease-in-out;
transition: all $timeliny_transition-time ease-in-out;
display: block;
position: absolute;
top: 50%;
left: 0;
margin-top: -$timeliny_dots-radius;
width: $timeliny_dots-radius * 2;
height: $timeliny_dots-radius * 2;
border-radius: 50%;
border: 1px solid $dark-gray;
background-color: $white;
&::before {
-webkit-transition: all $timeliny_transition-time ease-in-out;
-moz-transition: all $timeliny_transition-time ease-in-out;
transition: all $timeliny_transition-time ease-in-out;
content: attr(data-year);
display: block;
position: absolute;
top: -$timeliny_spacings;
left: calc($timeliny_spacings / 4);
color: $dark-color;
font-family: $font-rubik, $font-serif;
font-size: 22px;
}
&::after {
-webkit-transition: all $timeliny_transition-time ease-in-out;
-moz-transition: all $timeliny_transition-time ease-in-out;
transition: all $timeliny_transition-time ease-in-out;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
content: attr(data-text);
display: block;
position: absolute;
width: calc($timeliny_max-inner-width / 4);
top: $timeliny_spacings + $timeliny_dots-radius;
left: calc($timeliny_spacings / 4);
color: $light-gray;
opacity: 0;
font-size: 0.9em;
@media (min-width: $timeliny_small-breakdown) {
width: calc($timeliny_max-inner-width / 3);
}
}
}
.#{$timeliny_classname}-timeline {
position: absolute;
top: 50%;
left: 0;
display: table;
width: 100%;
z-index: 5;
.#{$timeliny_classname}-timeblock {
display: table-cell;
position: relative;
&.active {
.#{$timeliny_classname}-dot {
border-color: $primary-color;
background-color: $primary-color;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.33);
&::before {
color: $dark-color;
}
&::after {
color: $dark-color;
opacity: 1;
background-color: $light-background;
border: 1px solid $light-gray;
padding: 10px;
border-radius: 5px;
}
}
}
&.inactive {
.#{$timeliny_classname}-dot {
cursor: move;
&::before {
color: $light-gray;
}
}
}
&:not(.inactive):not(.active) {
.#{$timeliny_classname}-dot:hover {
border-color: $light-gray;
background-color: $primary-color;
&::before {
color: $dark-color;
}
}
}
.#{$timeliny_classname}-dot:hover {
&::after {
color: $dark-color;
opacity: 1;
background-color: $white;
border: 1px solid $light-semi-gray;
padding: 10px;
border-radius: 5px;
}
}
}
}
.#{$timeliny_classname}-vertical-line {
position: absolute;
display: block;
z-index: 1;
left: calc($timeliny_vertical-line-pos / 2);
top: 0;
width: 1px;
height: 100%;
background-color: $primary-color;
@media (min-width: $timeliny_small-breakdown) {
left: $timeliny_vertical-line-pos;
}
&::before {
content: "";
position: absolute;
top: 0;
left: -7px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid $primary-color;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: -7px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid $primary-color;
}
}
}
.timeliny {
.timeliny-timeline {
.timeliny-timeblock.active {
.timeliny-dot::after {
background-color: #f7f6ff;
}
}
}
}
/**=====================
43. Timeline 2 CSS Ends
==========================**/

63
public/assets/scss/theme/_touchspin.scss Normal file
View File

@@ -0,0 +1,63 @@
/**=====================
20. Touchspin CSS Start
==========================**/
.bootstrap-touchspin {
input{
&.touchspin {
padding: 0 12px;
}
}
.input-group .btn{
padding:10px 20px;
}
.touchspin-vertical-tab {
.input-group {
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 1%;
vertical-align: middle;
display: table-cell;
.bootstrap-touchspin-down {
margin-top: -2px;
}
i {
position: absolute;
top: 4px;
left: 7px;
font-size: 10px;
font-weight: normal;
}
> .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 9px;
margin-left: -1px;
position: relative;
}
}
}
}
.input-group{
font-family: $font-rubik, $font-serif;
.btn{
border-radius: 0 !important;
}
}
.dropdown-basic{
.dropdown{
.dropbtn{
padding: 9px 30px;
}
.dropdown-content{
z-index: 9999;
}
}
}
}
/**=====================
20. Touchspin CSS Ends
==========================**/

141
public/assets/scss/theme/_tour.scss Normal file
View File

@@ -0,0 +1,141 @@
/**=====================
54. Tour CSS Start
==========================**/
.introjs-helperLayer {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
.introjs-tooltipReferenceLayer {
background-color: transparent;
}
.introjs-helperNumberLayer {
color: $white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
background: $danger-color;
background: linear-gradient(to bottom, $tour-color 0%, $tour-color 100%);
border: 3px solid $white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.introjs-arrow {
border: 12px solid $white;
&.top {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: $tour-color;
border-left-color: transparent;
}
&.top-right {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: $tour-color;
border-left-color: transparent;
}
&.top-middle {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: $tour-color;
border-left-color: transparent;
}
&.right {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: $tour-color;
}
&.right-bottom {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: $tour-color;
}
&.bottom {
border-top-color: $tour-color;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
&.left {
border-top-color: transparent;
border-right-color: $tour-color;
border-bottom-color: transparent;
border-left-color: transparent;
}
&.left-bottom {
border-top-color: transparent;
border-right-color: $tour-color;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
.introjs-tooltip {
background-color: $tour-color;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
color: $white;
border-color: $tour-color;
}
.introjs-button {
border: 1px solid $light-semi-gray;
text-shadow: 1px 1px 0 $white;
color: $theme-body-font-color !important;
background-color: $white;
background-image: linear-gradient($white, $white);
&:hover {
border-color: $light-semi-gray;
}
&:focus, &:active {
background-image: linear-gradient($light-gray, $light-semi-gray);
}
}
.introjs-skipbutton {
color: $tour-color;
}
.introjs-prevbutton {
&.introjs-fullbutton {
border: 1px solid $light-semi-gray;
}
}
.introjs-disabled {
color: $tour-color;
border-color: $light-semi-gray;
&:hover, &:focus {
color: $tour-color;
border-color: $light-semi-gray;
}
}
.introjs-bullets {
ul {
li {
a {
background: $light-gray;
&:hover {
background: $white;
}
&.active {
background: $white;
}
}
}
}
}
.introjs-progress {
background-color: $light-gray;
}
.introjs-progressbar {
background-color: $tour-color;
}
.introjs-hint:hover > .introjs-hint-pulse {
border: 5px solid rgba(60, 60, 60, 0.57);
}
.introjs-hint-pulse {
border: 5px solid rgba(60, 60, 60, 0.27);
background-color: rgba(136, 136, 136, 0.24);
}
.introjs-hint-dot {
border: 10px solid rgba(146, 146, 146, 0.36);
}
/**=====================
54. Tour CSS Ends
==========================**/

39
public/assets/scss/theme/_tree.scss Normal file
View File

@@ -0,0 +1,39 @@
/**=====================
50. Tree CSS Start
==========================**/
.jstree-default{
.jstree-clicked{
// background-color: lighten($primary-color , 42%);
background-color:rgba($primary-color,0.2);
box-shadow: none;
color:$primary-color ;
}
}
.vakata-context, .vakata-context ul{
background-color: $white;
border: none;
box-shadow: 0 0 2px 2px $light-semi-gray;
li{
a{
.vakata-contextmenu-sep{
display: none;
}
&:hover{
background-color: lighten($primary-color , 45%);
box-shadow: None;
}
}
}
.vakata-context-separator{
display: none;
}
}
.jstree-default {
.jstree-anchor{
font-weight:500;
}
}
/**=====================
50. Tree CSS Ends
==========================**/

331
public/assets/scss/theme/_user-profile.scss Normal file
View File

@@ -0,0 +1,331 @@
/**=====================
22. User profile css start
==========================**/
.user-profile{
.follow {
.follow-num {
font-size: 18px;
color: $theme-font-color;
font-family: $font-rubik, $font-serif;
font-weight: 600;
}
span {
color: $semi-dark;
}
ul.follow-list{
border-top: 1px solid $light-gray;
li{
display:inline-block;
padding-top:15px;
&:nth-child(n+2){
margin-left:15px;
padding-left:15px;
border-left: 1px solid $light-gray;
}
}
}
}
.profile-img-style {
padding:30px;
.img-container{
margin-top:30px;
}
.user-name {
font-size:18px;
color: $theme-font-color;
margin: 0;
font-weight: 600;
}
p {
line-height: 30px;
font-size: 14px;
color: $dark-gray;
margin-bottom: 0;
}
.media {
img {
width: 50px;
}
}
}
.like-comment {
a{
color: $dark-gray;
&:hover{
color: $danger-color;
}
}
span {
font-family: $font-rubik, $font-serif;
}
}
.social-media {
ul.user-list-social{
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin-right: auto;
margin-left:auto ;
padding-bottom:20px;
li{
&:nth-child(n+2){
margin-left:5px;
}
a{
padding:0;
width: 32px;
height: 32px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba($primary-color,0.08);
i{
font-size:14px;
color: $primary-color;
}
}
&:hover{
a{
background-color:$primary-color;
i{
color: $white;
}
}
}
}
}
}
.profile-header{
height:420px;
padding:30px;
display:flex !important;
// align-items: center;
.profile-img-wrrap{
display:none;
}
.userpro-box{
background-color:$white;
padding:30px;
max-width:380px;
margin-top:auto;
margin-bottom:auto;
text-align:center;
.img-wrraper{
position:relative ;
width:fit-content ;
margin:auto ;
}
.avatar{
width:100px;
height:100px;
max-width: 155px;
max-height: 155px;
border-radius: 50%;
overflow:hidden;
margin-left:auto;
margin-right:auto;
border:7px solid rgba($primary-color,0.08);
margin-bottom:15px;
img{
width:100%;
height:100%;
}
}
.icon-wrapper{
position: absolute;
right: 0;
bottom:0;
display:flex;
justify-content: center;
align-items: center;
height: 35px;
width: 35px;
border-radius: 50%;
background-color: $white;
cursor: pointer;
overflow: hidden;
margin: 0 auto;
font-size: 17px;
box-shadow: 0 0 6px 3px rgba(68, 102, 242, 0.1);
i{
color: $primary-color;
}
}
h4{
color: $theme-font-color;
font-weight: 600;
font-size: 20px;
}
h6{
font-size:14px;
text-transform: uppercase;
color: $light-text;
margin-bottom: 15px;
}
}
}
.profile-post{
padding:30px;
.post-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
.media{
align-items:center;
img{
width:60px;
}
h5{
color:$theme-font-color;
font-size:18px;
font-weight:600;
margin-bottom:3px;
}
h6{
color:$light-text;
font-size:14px;
margin-bottom:0;
}
}
.post-setting{
i{
color:$light-text;
font-size:22px;
}
}
}
.post-body{
p{
color:$light-text;
}
.post-react{
display: flex;
align-items: center;
margin-bottom:20px;
ul{
li{
display:inline-block;
&:nth-child(n+2){
margin-left:-20px;
}
img{
width:30px;
height:30px;
}
}
}
h6{
font-size:14px;
color:$light-font;
margin-bottom:0;
margin-left:15px;
}
}
.post-comment{
li{
display: inline-block;
color: $light-font;
label{
margin-bottom:0;
font-weight:500;
a{
color:$light-font;
display:flex;
align-items:center;
line-height:1;
svg{
width:14px;
height:14px;
}
span{
margin-left:10px;
}
}
}
&:nth-child(n+2){
margin-left:15px;
}
}
}
}
}
.post-about{
ul{
margin-bottom:20px;
li{
display:flex;
align-items:center;
.icon{
width:35px;
height:35px;
border-radius:5px;
background-color: rgba($primary-color,0.08);
display: flex;
align-items: center;
justify-content: center;
margin-right:15px;
svg{
width: 18px;
height: 18px;
color: $primary-color;
}
}
h5{
color:$theme-font-color;
text-transform:capitalize;
}
p{
font-size:12px;
line-height:1;
text-transform:capitalize;
}
&:nth-child(n+2){
margin-top:20px;
}
}
}
}
}
//Edit profile //
.edit-profile{
.profile-title{
border-bottom: 1px solid $light-gray;
margin-bottom: 15px;
padding-bottom: 20px;
.media{
align-items:center;
.media-body{
margin-left:25px;
}
}
}
.card {
.card-header {
h4{
font-weight:600;
}
}
.card-body{
h3{
font-weight:600;
}
}
}
.table {
> :not(:last-child) {
> :last-child {
> *{
border:1px solid $light-gray;
}
}
}
}
}
/**============================
22. User profile css Ends
==============================**/

306
public/assets/scss/theme/_variables.scss Normal file
View File

@@ -0,0 +1,306 @@
// General variables
$theme-font-color: #2b2b2b;
$theme-body-font-color: #242934;
$theme-body-sub-title-color: rgba($theme-body-font-color, 0.7);
// Theme colors variables
$primary-color: #24695c;
$secondary-color:#ba895d;
$success-color: #1b4c43;
$warning-color: #e2c636;
$danger-color: #d22d3d;
$light-color : #f4f4f4;
$light-gray : #e6edef;
$light-semi-gray :#efefef;
$dark-light :$theme-font-color;
$dark-gray : #898989;
$dark-color : #2c323f;
$gray-60 :#cccccc ;
$card-body-color : #f9f9fa;
$transparent-color: transparent;
$auth-bg-color:#fafafa;
$light : #fdfeff;
$semi-dark :#59667a;
$light-text: #999;
$light-background: #f5f7fb;
$light-font: #717171;
$light-semi-font: $semi-dark;
$light-chartist-grid-color: #f6f9fd;
$off-white: #ffebce;
$dark-primary: #448aff;
$pitch-color: #fe8a7d;
$light-pitch: #fecf8b;
$flower-pink: #fb6d9d;
$dark-sky: #536dfe;
$color-scarpa: #4c5667;
$color-fiord: #455a64;
$dark-blue: #00008B;
$black : #000;
$white:#fff;
$yellow:#f4c705;
$btn-bhome-bg-c:#ff6060;
$btn-search-bg-c:#ffd042;
$btn-opacity-down-primary:#F7F0FF;
// error page color end
// gradient colors
$gradient-primary: linear-gradient(#1693f8, #0d67e9);
//social colors
$fb: #50598e;
$twitter: #6fa2d8;
$google-plus: #c64e40;
$linkedin: #0077B5;
//error input color start
$light-body-bg-color:#fafdff;
//fonts
$font-montserrat:'Montserrat', sans-serif;
$font-roboto:'Roboto', sans-serif;
$font-rubik:'Rubik', sans-serif;
$font-nunito: Nunito;
$font-raleway: Raleway;
$font-serif: sans-serif;
$font-themify: themify;
$font-awesome: FontAwesome;
$font-ICO: IcoFont;
// dark layout variables
$dark-body-background: #202938;
$dark-card-background: #111727;
$dark-card-inbox: #323846;
$dark-small-font-color:#98a6ad;
$dark-all-font-color: rgba(255,255,255,0.7);
$light-all-font-color: rgba(255,255,255,0.2);
$sidebar-submenu-font-color:rgba(255,255,255,0.7);
$dark-border-color: $dark-body-background;
// $dark-card-border:#374558;
$dark-card-border: rgba($primary-color,0.2);
$dark-editor-document: #2b2b2b;
$bg-dark-color: #1f2533;
$dark-datatable-odd: #1f232b;
$dark-datatable-sorting: #1c212b;
$dark-datatable-sorting-even: #22262f;
$dark-even-hover-sorting: #191e27;
//General tag settings
$body-font-size: 14px;
$body-font-color: $theme-body-font-color;
$ul-padding-left: 0px;
$ul-padding-right: 0px;
$ancher-color: $primary-color;
$btn-focus-box-shadow: none;
$all-focus-outline-color: $primary-color;
$paragraph-font-size: 14px;
$paragraph-line-height: 1.7;
$paragraph-letter-spacing : inherit;
$code-tag-color: $primary-color;
$code-tag-bg-color: rgba($primary-color, 0.03);
$code-tag-padding: 3px;
$code-tag-margin: 0 3px;
$code-tag-border-radious: 2px;
$blockquote-padding : 15px;
$blockquote-border : 4px solid $light-gray;
$small-tag-padding: 10px;
$small-tag-color: $dark-color;
$pre-tag-bg-color: rgba($primary-color, 0.03);
$pre-tag-padding: 20px 0;
$list-group-active-bg-color: $primary-color;
$list-group-active-border-color: $primary-color;
$list-group-img-size: 40px;
$list-group-margin: 10px;
// Tables settings
$table-b-margin: 0px;
$table-heading-color: $theme-body-font-color;
$table-row-color: $theme-body-font-color;
$table-footer-font-weight: bold;
$table-inverse-color: $white;
$table-hover-color: $light;
$table-padding: 0.75rem;
$table-xl-padding: 1.25rem 2rem;
$table-xl-font: 120%;
$table-lg-padding: .9rem 2rem;
$table-lg-font: 110%;
$table-de-padding: .75rem 2rem;
$table-de-font: 100%;
$table-sm-padding: .5rem 2rem;
$table-sm-font: 90%;
$table-xs-padding: 0.2rem 2rem;
$table-xs-font: 80%;
$horizontal-border-color: #f2f4ff;
$horizontal-padding: .75rem 2rem;
$table-inverse-bg-color: #292b2c;
//According setting
$according-card-top-margin : 10px;
$according-btn-weight : 500;
$according-btn-color : $theme-body-font-color;
$according-card-header-padding : 1rem 1.25rem;
$according-card-header-icon : $font-ICO;
$according-open-icon : "\eb73";
$according-close-icon : "\eb7a";
//Alert settings
$alert-hover-color :$dark-color;
$alert-border-radious :0.15rem;
$alert-padding :15px;
$alert-msg-icon-size :16px;
//badge settings
$badge-padding :0.44em 0.7em;
$badge-svg-size :10px;
//form input settings
$form-group-margin-bottom : 1.25em;
$col-form-label-font-size : 14px;
$form-control-font-size : 14px;
$form-control-border-radious : 2px;
$form-control-border-color : $light-gray;
//breadcrumb setting
$breadcrumb-ancher-color : $white;
$breadcrumb-ancher-dark-color : $black;
//buttons setting
$btn-font-size : 14px;
$btn-padding : 0.375rem 1.75rem;
$btn-lg-font-size: 18px;
$btn-sm-font-size: 12px;
$btn-xs-font-size: 10px;
$btn-xs-padding: 0.2rem 0.7rem;
//Card settings
$card-padding :30px;
$card-margin-bottom :30px;
$card-border-color :1px solid $light-gray;
$card-border-radious :0;
$border-secondary:#ede7e4 ;
$common-shadow-color : rgba($light-font, 0.08);
$card-box-shadow : 0 25px 50px rgba(8,21,66,.06);
$card-header-font-weight : 600;
$card-header-bg-color : $white;
$card-header-font-transform : capitalize;
$card-header-span-size : 12px;
$card-header-span-color : $theme-body-sub-title-color;
$card-body-bg-color : $transparent-color;
// $card-body-bg-color : $white;
$card-footer-bg-color : $white;
//footer settings
$footer_bg_color : $white;
$footer_box_shadow : 0 0 20px 16px rgba(4,122,251,0.04);
$footer_link_align : right;
$footer_dark_color : $theme-font-color;
$footer_dark__txt_color : $white;
//form settings
$form-group-margin-bottom :20px;
$sm-form-margin-bottom : 14px;
$form-placeholder-color : $dark-gray;
$form-placeholder-font-size : 14px;
$form-placeholder-letter-spacing : 1px;
$form-placeholder-font-weight : 100;
$form-input-border-color : $light-semi-gray;
$form-input-bg-color : $white;
//Tour settings
$tour-color: $primary-color;
//sidabr main settings
$sidebar-width: 255px;
$sidebar-position: fixed;
$sidebar-background-color: $white;
$sidebar-shadow: 0 0 11px rgba(69, 110, 243, 0.13);
$sidebar-overflow: auto;
$sidebar-z-index: 9;
$sidebar-transition: 0.5s;
//sidebar profile settings
$sidebar-user-section-padding: 10px;
$sidebar-user-section-shadow: 3px 2px 7px -1px rgba(68, 102, 242, 0.13);
$sidebar-profile-edit-icon-size: 14px;
$sidebar-profile-name-txt-color : $primary-color;
$sidebar-profile-name-txt-transfer : uppercase;
$sidebar-profile-name-txt-weight : 600;
$sidebar-profile-name-letter-specing : 1.5px;
$sidebar-profile-name-marging : 3px;
$sidebar-profile-sub-title-font-size: 10px;
$sidebar-profile-sub-title-margin: 0px;
$sidebar-profile-img-shadow: 0 0 15px rgba(68, 102, 242, 0.3);
//Sidebar main menu setting
$sidebar-menu-padding: 15px;
$sidebar-menu-list-style: none;
$sidebar-menu-list-margin: 0;
$sidebar-icon-size: 14px;
$sidebar-icon-margin: 14px;
$sidebar-icon-stroke-width: 3px;
$sidebar-font-size: 14px;
$sidebar-letter-specing: 0.5px;
$sidebar-txt-transform: capitalize;
$sidebar-font-weight: 600;
$sidebar-font-color: $theme-body-font-color;
$sidebar-padding-top: 12px;
$sidebar-padding-bottom: 12px;
$sidebar-sub-header-padding: 15px;
$sidebar-sub-header-margin: 0;
$sidebar-heading-hover-padding: 5px;
$sidebar-hover-txt-color: $primary-color;
$sidebar-arrow-margin-top: 2px;
$sidebar-arrow-size: 15px;
$sidebar-arrow-color: $theme-body-font-color;
$sidebar-open-icon: "\f107";
$sidebar-close-icon:"\f105";
$sidebar-icon-font-family: $font-awesome;
$sidebar-height: calc(100vh - 355px);
// $sidebar-height: calc(100vh - 115px);
//Header settings
$main-header-position: fixed;
$main-header-top: 0;
$main-header-shadow: 0 0 20px rgba(25,124,207,0.08);
$bookmark-icon-color: #fa9f44;
//page settings
$page-body-padding : 0 15px 0 15px;
$page-body-bg-color: $light-gray;
$page-body-margin-bottom: 0px;
$page-header-padding : 30px;
$common-box-shadow: 2px 3.464px 8px 0px rgba( 22, 145, 248, 0.18 );
$page-title-font-size: 24px;
$page-title-margin-bottom: 0;
$page-title-font-weight: 600;
$page-title-text-tranform: capitalize;
$page-small-title-display: block;
$page-small-title-font-size: 12px;
$page-small-title-margin-bottom: 5px;
$page-small-title-text-transform: capitalize;
$page-small-title-text-color: $theme-body-sub-title-color;
$breadcrumb-size: 16px;
$breadcrumb-content: "/";
//main header left settings
$main-header-left-bg-color : $white;
$main-header-padding : 27px 22px;
$main-header-z-index : 9;
$main-header-right-padding: 24px 40px;
$main-header-right-nav-icon-size : 18px;
$main-header-right-nav-icon-color : $theme-font-color;
$main-header-right-nav-icon-align : middle;

18
public/assets/scss/theme/_wishlist.scss Normal file
View File

@@ -0,0 +1,18 @@
/**=====================
83. Wishlist CSS start
==========================**/
.wishlist{
table{
tr{
td{
svg{
color:$danger-color;
}
}
}
}
}
/**=====================
83. Wishlist CSS Ends
==========================**/