update
This commit is contained in:
264
static/admin/assets/scss/pages/_blog.scss
Normal file
264
static/admin/assets/scss/pages/_blog.scss
Normal file
@@ -0,0 +1,264 @@
|
||||
/**=====================
|
||||
46. Blog CSS start
|
||||
==========================**/
|
||||
.blog-box{
|
||||
img{
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.top-radius-blog{
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
h6{
|
||||
font-weight: 600;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.blog-details{
|
||||
padding-right: 20px;
|
||||
.blog-social{
|
||||
margin-top: 30px;
|
||||
li{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: $theme-body-sub-title-color;
|
||||
+li{
|
||||
padding-left: 20px;
|
||||
line-height: 1;
|
||||
padding-right: 0;
|
||||
}
|
||||
i{
|
||||
padding-right: 5px;
|
||||
font-weight: 300;
|
||||
}
|
||||
&:first-child{
|
||||
border-right: 1px solid gray;
|
||||
padding-right:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-details-main{
|
||||
hr{
|
||||
background-color: $gray-60;
|
||||
}
|
||||
.blog-social{
|
||||
margin:20px 0;
|
||||
li{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: $theme-body-sub-title-color;
|
||||
padding: 0 24px;
|
||||
border-right: 1px dotted;
|
||||
@media (max-width: 1676px) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
&:last-child{
|
||||
border-right: 0;
|
||||
}
|
||||
i{
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-bottom-details{
|
||||
margin: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.714;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.blog-date{
|
||||
color: $theme-body-sub-title-color;
|
||||
span{
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-box.blog-shadow{
|
||||
&: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: 20px;
|
||||
h4{
|
||||
color: $white;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.blog-social{
|
||||
li{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-list{
|
||||
.blog-details{
|
||||
.blog-social{
|
||||
margin-top: 0;
|
||||
}
|
||||
h6{
|
||||
margin-top: 0;
|
||||
color: gray;
|
||||
font-weight: 500;
|
||||
}
|
||||
hr{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
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{
|
||||
h6 {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 0.7px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
color: $theme-body-sub-title-color;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@media (max-width: 1570px) {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
margin-top:20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.single-blog-content-top{
|
||||
margin-top:20px;
|
||||
border-top:1px solid $light-semi-gray;
|
||||
}
|
||||
.blog-social,.comment-social{
|
||||
li{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-box{
|
||||
padding-top: 50px ;
|
||||
padding-bottom: 50px ;
|
||||
hr{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
li{
|
||||
margin-bottom: 30px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
ul{
|
||||
margin-left: 135px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
color: $theme-body-sub-title-color;
|
||||
text-align: justify;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h4{
|
||||
font-weight: 600;
|
||||
}
|
||||
.media{
|
||||
img{
|
||||
margin-right:30px;
|
||||
border-radius: 10px;
|
||||
height: 90px;
|
||||
padding: 7px;
|
||||
width: 90px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
}
|
||||
h6{
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
span{
|
||||
padding-left: 10px;
|
||||
font-size: 13px;
|
||||
color: $theme-body-sub-title-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-social{
|
||||
li{
|
||||
display: inline-block;
|
||||
color: $gray-60;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
&:first-child{
|
||||
border-right:1px solid $light-semi-gray;
|
||||
padding-right: 20px;
|
||||
}
|
||||
i{
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
46. Blog CSS ends
|
||||
==========================**/
|
||||
530
static/admin/assets/scss/pages/_bookmark-app.scss
Normal file
530
static/admin/assets/scss/pages/_bookmark-app.scss
Normal file
@@ -0,0 +1,530 @@
|
||||
/**=====================
|
||||
85. bookmark app CSS Start
|
||||
==========================**/
|
||||
.modal-bookmark {
|
||||
|
||||
.modal-body,
|
||||
.modal-header {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-wrap {
|
||||
.details-bookmark {
|
||||
.row {
|
||||
>div {
|
||||
+div {
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-bookmark {
|
||||
height: 700px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
>.main-title {
|
||||
color: var(--theme-deafult);
|
||||
font-weight: 500;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.todo-wrap {
|
||||
.left-bookmark {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-bookmark {
|
||||
a {
|
||||
text-transform: capitalize !important;
|
||||
color: var(--theme-deafult) !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&#index_var {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
input,
|
||||
select {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
border-color: #ced4da;
|
||||
}
|
||||
}
|
||||
|
||||
.select2 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0 !important;
|
||||
font-size: 11px;
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@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-color;
|
||||
position: relative;
|
||||
|
||||
h6 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
animation: displayTransition 1s;
|
||||
}
|
||||
|
||||
.hover-block {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
|
||||
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 {
|
||||
opacity: 1;
|
||||
animation: displayTransition 2s;
|
||||
}
|
||||
}
|
||||
.favourite-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.list-bookmark {
|
||||
.row {
|
||||
> div {
|
||||
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 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-block {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
opacity: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.title-bookmark {
|
||||
.hover-block {
|
||||
opacity: 1;
|
||||
animation: displayTransition 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card {
|
||||
.title-bookmark {
|
||||
border-top: none;
|
||||
|
||||
p,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h6 {
|
||||
position: relative;
|
||||
padding-right: 15px;
|
||||
margin-bottom: -5px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '-';
|
||||
right: 0;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.content-general {
|
||||
margin-top: 5px;
|
||||
|
||||
p {
|
||||
width: 68%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.card {
|
||||
.d-flex {
|
||||
justify-content: space-between;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
+li {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
>.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.bookmark-wrap {
|
||||
.left-bookmark {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-tabcontent {
|
||||
.details-bookmark {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.modal-bookmark {
|
||||
|
||||
.modal-body,
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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: 100%;
|
||||
}
|
||||
|
||||
.details-website {
|
||||
display: block;
|
||||
.title-bookmark {
|
||||
padding-left: 15px;
|
||||
.hover-block {
|
||||
position: relative;
|
||||
right: unset;
|
||||
text-align: left;
|
||||
top: unset;
|
||||
padding: 0;
|
||||
}
|
||||
.content-general {
|
||||
display: none;
|
||||
}
|
||||
p, h6 {
|
||||
display: block;
|
||||
}
|
||||
h6 {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-bookmark {
|
||||
|
||||
.modal-body,
|
||||
.modal-header {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
85. bookmark app CSS Ends
|
||||
==========================**/
|
||||
36
static/admin/assets/scss/pages/_cart.scss
Normal file
36
static/admin/assets/scss/pages/_cart.scss
Normal 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: 8px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-buttons{
|
||||
margin-top: 30px;
|
||||
.cart-btn{
|
||||
float: right;
|
||||
padding-right: 85px;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
82. cart CSS Ends
|
||||
==========================**/
|
||||
554
static/admin/assets/scss/pages/_chart.scss
Normal file
554
static/admin/assets/scss/pages/_chart.scss
Normal file
File diff suppressed because one or more lines are too long
378
static/admin/assets/scss/pages/_chat.scss
Normal file
378
static/admin/assets/scss/pages/_chat.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
/**=====================
|
||||
14. Chat CSS Start
|
||||
==========================**/
|
||||
.chat-box {
|
||||
.toogle-bar{
|
||||
display: none;
|
||||
}
|
||||
.chat-menu {
|
||||
max-width:340px;
|
||||
}
|
||||
.people-list {
|
||||
.search{
|
||||
position: relative;
|
||||
.form-control{
|
||||
background-color: $light-body-bg-color;
|
||||
border: 1px solid $light-color;
|
||||
&::placeholder{
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 17px;
|
||||
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: 500;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
color: $semi-dark;
|
||||
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-color;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
img {
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-shadow: 1px 1px 4px 1px $light-gray;
|
||||
}
|
||||
.chat-menu-icons{
|
||||
li{
|
||||
margin-right:24px;
|
||||
a i{
|
||||
color: $theme-body-sub-title-color;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-menu-icons{
|
||||
margin-left:auto;
|
||||
[dir="rtl"] & {
|
||||
margin-right: auto;
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.chat-msg-box {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
height: 560px;
|
||||
margin-bottom: 80px;
|
||||
.chat-user-img{
|
||||
margin-top: -35px;
|
||||
}
|
||||
.message-data {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.message-data-time {
|
||||
letter-spacing: 1px;
|
||||
font-size: 12px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
.message {
|
||||
color: $dark-color;
|
||||
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-color;
|
||||
border-radius: 10px;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.other-message {
|
||||
background-color: $light ;
|
||||
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 var(--theme-deafult);
|
||||
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;
|
||||
padding: 0.74rem 1.75rem;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-menu {
|
||||
border-left: 1px solid $light-color;
|
||||
.tab-pane {
|
||||
padding: 0 15px;
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
.about{
|
||||
.status{
|
||||
i{
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-profile {
|
||||
margin-top: 30px;
|
||||
.user-content{
|
||||
h5{
|
||||
margin: 25px 0;
|
||||
}
|
||||
hr{
|
||||
margin: 25px 0;
|
||||
}
|
||||
p{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.border-tab.nav-tabs .nav-item .nav-link.active, .border-tab.nav-tabs .nav-item .nav-link.show, .border-tab.nav-tabs .nav-item .nav-link:focus{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.image {
|
||||
position: relative;
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 55%;
|
||||
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: 14px;
|
||||
box-shadow: 1px 1px 3px 1px $light-color;
|
||||
}
|
||||
.avatar img {
|
||||
border-radius: 50%;
|
||||
border: 5px solid $light-color;
|
||||
}
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid #dee2e6;
|
||||
}
|
||||
.follow {
|
||||
margin-top: 0;
|
||||
.follow-num {
|
||||
font-size: 20px;
|
||||
color: $black;
|
||||
}
|
||||
span {
|
||||
color: $theme-font-color;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
.social-media a {
|
||||
color: $semi-dark;
|
||||
font-size: 15px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
.chat-profile-contact{
|
||||
p{
|
||||
font-size:14px;
|
||||
color:$semi-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: 500;
|
||||
height: 60px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.material-border{
|
||||
border-width:1px;
|
||||
border-color:var(--theme-deafult);
|
||||
}
|
||||
.nav-link.active {
|
||||
color: $black!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-history{
|
||||
.call-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 300px;
|
||||
}
|
||||
.total-time h2 {
|
||||
font-size: 50px;
|
||||
color: $light-semi-gray;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.receiver-img{
|
||||
margin-top: 55px;
|
||||
img{
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.call-icons{
|
||||
margin-bottom: 35px;
|
||||
ul{
|
||||
li {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
+ li{
|
||||
margin-left: 10px;
|
||||
}
|
||||
a {
|
||||
color: #999;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
14. Chat CSS Ends
|
||||
==========================**/
|
||||
222
static/admin/assets/scss/pages/_checkout.scss
Normal file
222
static/admin/assets/scss/pages/_checkout.scss
Normal file
@@ -0,0 +1,222 @@
|
||||
/**=====================
|
||||
84. Checkout CSS start
|
||||
==========================**/
|
||||
.checkout {
|
||||
.checkout-details {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 40px;
|
||||
.order-place{
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.order-box {
|
||||
.title-box {
|
||||
padding-bottom: 20px;
|
||||
color: #444444;
|
||||
font-size: 22px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
margin-bottom: 20px;
|
||||
|
||||
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;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
.count {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
width: 35%;
|
||||
float: right;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.shipping-class {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.shopping-checkout-option {
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
color: var(--theme-deafult);
|
||||
font-weight: 400;
|
||||
width: 35%;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.total {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.qty {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ededed;
|
||||
margin-bottom: 30px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: #444444;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
width: 35%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-paypal {
|
||||
width: 30%;
|
||||
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: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-class {
|
||||
.shopping-checkout-option {
|
||||
width: 46%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qty {
|
||||
li {
|
||||
span {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
li {
|
||||
.count {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.order-box {
|
||||
.sub-total {
|
||||
.shipping-class {
|
||||
.shopping-checkout-option {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.checkout {
|
||||
.checkout-details {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
.order-box {
|
||||
.sub-total {
|
||||
.shipping-class {
|
||||
.shopping-checkout-option {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.count {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
84. Checkout CSS ends
|
||||
==========================**/
|
||||
82
static/admin/assets/scss/pages/_comingsoon.scss
Normal file
82
static/admin/assets/scss/pages/_comingsoon.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
/**=====================
|
||||
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;
|
||||
|
||||
.comingsoon-inner {
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
color: $theme-body-sub-title-color;
|
||||
font-weight: 500;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
padding: 30px 0;
|
||||
border-top: 1px solid $light-color;
|
||||
border-bottom: 1px solid $light-color;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 36px;
|
||||
background: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
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
|
||||
==========================**/
|
||||
406
static/admin/assets/scss/pages/_contacts.scss
Normal file
406
static/admin/assets/scss/pages/_contacts.scss
Normal file
@@ -0,0 +1,406 @@
|
||||
/**=====================
|
||||
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);
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -320px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
span {
|
||||
a {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
right: 0;
|
||||
transition: .3s;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
animation: displayTransition 1s;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
height: 39px !important;
|
||||
border-color: #ced4da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#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: var(--theme-deafult);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-persons {
|
||||
p {
|
||||
font-family: $font-roboto, $font-serif;
|
||||
}
|
||||
|
||||
.profile-mail {
|
||||
padding: 30px 0;
|
||||
|
||||
.media {
|
||||
img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
h5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 5px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
+li {
|
||||
padding-left: 10px;
|
||||
margin-left: 5px;
|
||||
border-left: 2px solid $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-general {
|
||||
padding-top: 50px;
|
||||
|
||||
ul {
|
||||
padding-right: 20px;
|
||||
|
||||
li {
|
||||
color: $dark-gray;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&: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-color;
|
||||
height: 100%;
|
||||
|
||||
.nav-link,
|
||||
.show {
|
||||
|
||||
&.active,
|
||||
>.nav-link {
|
||||
background-color: rgba($primary-color, 0.05);
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $theme-body-font-color;
|
||||
padding: 0;
|
||||
|
||||
.media {
|
||||
.img-50 {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
+.nav-link {
|
||||
border-top: 1px solid $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.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-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
.email-general {
|
||||
.gender {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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
|
||||
==========================**/
|
||||
590
static/admin/assets/scss/pages/_dashboard_2.scss
Normal file
590
static/admin/assets/scss/pages/_dashboard_2.scss
Normal file
@@ -0,0 +1,590 @@
|
||||
/**=====================
|
||||
67. Dashboard 2 CSS Start
|
||||
==========================**/
|
||||
.widget-decor {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.balance-widget {
|
||||
background-image: url(../images/dashboard-2/balance-bg.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
.mobile-right-img {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
.left-mobile-img {
|
||||
margin-right: -20px;
|
||||
}
|
||||
.mobile-img {
|
||||
height: 130px;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 15px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
right: 0;
|
||||
.mobile-img {
|
||||
height: 100px;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
&.card-body {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
.purchase-btn {
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
.small-widget {
|
||||
overflow: hidden;
|
||||
h4 {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
i {
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 24px 15px;
|
||||
}
|
||||
.bg-gradient {
|
||||
width: 66px;
|
||||
height: 67px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
right: -12px;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -12px;
|
||||
transform: translateY(-50%) scaleX(-1);
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@media (max-width: 1399px) {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
.bg-gradient {
|
||||
svg {
|
||||
animation: tada 1.5s ease infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.appointment {
|
||||
.customer-table {
|
||||
@media (max-width:1470px) {
|
||||
height: 268px;
|
||||
}
|
||||
@media (max-width:1399px) {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-wrapper {
|
||||
margin: 0 -24px -17px -17px;
|
||||
}
|
||||
.categories-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
@media (max-width: 767px) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
li {
|
||||
gap: 10px;
|
||||
.bg-light {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
object-fit: contain;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
a {
|
||||
transition: 0.5s;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.bg-light {
|
||||
img {
|
||||
transition: 0.5s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
a {
|
||||
transition: 0.5s;
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.monthly-profit {
|
||||
margin-top: -10px;
|
||||
@media (max-width: 1584px) {
|
||||
margin: -10px -8px 0;
|
||||
}
|
||||
@media (max-width: 1520px) {
|
||||
margin: -10px -16px 0;
|
||||
}
|
||||
@media (max-width:1500px) {
|
||||
margin: -10px -14px 0;
|
||||
}
|
||||
@media (max-width:1472px) {
|
||||
margin: -10px -20px 0;
|
||||
}
|
||||
@media (max-width:1424px) {
|
||||
margin: -10px -25px 0;
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-legend-marker {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-datalabel-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: $font-rubik, $font-serif !important;
|
||||
fill: var(--chart-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.back-bar-container {
|
||||
position: absolute;
|
||||
width: calc(100% - 64px);
|
||||
bottom: -8px;
|
||||
margin: 0 auto !important;
|
||||
left: 28px;
|
||||
@media (max-width: 1199px) {
|
||||
bottom: 22px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
width: calc(100% - 34px);
|
||||
left: 18px;
|
||||
}
|
||||
@media (max-width: 327px) {
|
||||
bottom: 42px;
|
||||
}
|
||||
}
|
||||
.overview-card {
|
||||
.balance-data {
|
||||
right: 12px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 12px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
right: -40%;
|
||||
[dir="rtl"] & {
|
||||
left: -40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-container {
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-marker {
|
||||
stroke-width: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.purchase-card.discover {
|
||||
margin-top: 102px;
|
||||
img {
|
||||
width: 224px;
|
||||
margin: 0 auto;
|
||||
margin-top: -90px;
|
||||
@media (max-width: 1550px) {
|
||||
margin-top: -110px;
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
margin-top: -90px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
margin-top: -110px;
|
||||
}
|
||||
@media (max-width: 618px) {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.visitor-card {
|
||||
.card-header {
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.visitors-container {
|
||||
margin: 0 -12px -27px -17px;
|
||||
svg {
|
||||
.apexcharts-series {
|
||||
path {
|
||||
clip-path: inset(1% 0% 0% 0% round 3rem);
|
||||
}
|
||||
}
|
||||
.apexcharts-legend.apexcharts-align-left {
|
||||
.apexcharts-legend-series {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-order {
|
||||
.nav {
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
}
|
||||
.frame-box {
|
||||
border: 1px solid transparent;
|
||||
padding: 0;
|
||||
transition: 0.5s;
|
||||
&.active {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.recent-table {
|
||||
table {
|
||||
thead {
|
||||
background: var(--light2);
|
||||
th {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
td,th {
|
||||
padding: 12px 8px;
|
||||
vertical-align: middle;
|
||||
&:first-child {
|
||||
min-width: 157px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
@media (max-width: 1660px) {
|
||||
min-width: 97px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
min-width: 96px;
|
||||
}
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-left: 0;
|
||||
padding-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.product-content {
|
||||
h6 {
|
||||
a {
|
||||
color: var(--body-font-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.product-content {
|
||||
h6 {
|
||||
a {
|
||||
color: var(--theme-deafult);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.order-image {
|
||||
background: var(--light2);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.recent-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.font-success {
|
||||
svg {
|
||||
fill: $success-color;
|
||||
}
|
||||
}
|
||||
&.font-danger {
|
||||
svg {
|
||||
fill: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-activity {
|
||||
h5 {
|
||||
padding: 30px 0 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h6 {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
span {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notification {
|
||||
li {
|
||||
.recent-images {
|
||||
ul {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
li {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-images {
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
li {
|
||||
border: 1px dashed var(--recent-dashed-border);
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
.recent-img-wrap {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--light2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame-box {
|
||||
background: var(--recent-box-bg);
|
||||
border-radius: 10px;
|
||||
min-width: 76px;
|
||||
box-shadow: 2px 2px 2px var(--recent-border);
|
||||
@media (max-width: 575px) {
|
||||
min-width: 65px;
|
||||
}
|
||||
.frame-image {
|
||||
min-width: 62px;
|
||||
height: 62px;
|
||||
border-color: var(--recent-border) var(--white) var(--white) var(--recent-border);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
margin: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
@media (max-width: 575px) {
|
||||
min-width: 50px;
|
||||
height: 50px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
margin: 0 auto;
|
||||
@media (max-width: 575px) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.support-ticket-font {
|
||||
ul {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.new-update {
|
||||
.media {
|
||||
.media-body {
|
||||
|
||||
span,
|
||||
p {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $activity-dot-name,
|
||||
$activity-dot-color in (primary, $primary-color),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.activity-dot-#{$activity-dot-name} {
|
||||
min-width: 6px;
|
||||
height: 6px;
|
||||
background-color: $activity-dot-color;
|
||||
border-radius: 100%;
|
||||
outline: 5px solid rgba($activity-dot-color, 0.25);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// responsive
|
||||
@media only screen and (max-width: 1800px) and (min-width: 1400px) {
|
||||
.grid-ed-none {
|
||||
display: none !important;
|
||||
}
|
||||
.grid-ed-12 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1660px) and (min-width: 1400px) {
|
||||
.col-ed-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-ed-7 {
|
||||
width: 58%;
|
||||
}
|
||||
.col-ed-5 {
|
||||
width: 42%;
|
||||
}
|
||||
.col-ed-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-ed-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-ed-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-ed-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-ed-8 {
|
||||
width: 66.66%;
|
||||
}
|
||||
.col-ed-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1660px) and (min-width: 1200px) {
|
||||
.xl-30 {
|
||||
max-width: 30%;
|
||||
flex: 0 0 30%;
|
||||
}
|
||||
.xl-70 {
|
||||
max-width: 70%;
|
||||
flex: 0 0 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
.size-column {
|
||||
.col-6 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
67. Dashboard 2 CSS End
|
||||
==========================**/
|
||||
711
static/admin/assets/scss/pages/_dashboard_3.scss
Normal file
711
static/admin/assets/scss/pages/_dashboard_3.scss
Normal file
@@ -0,0 +1,711 @@
|
||||
/**=====================
|
||||
Dashboard 3 CSS Start
|
||||
==========================**/
|
||||
@keyframes hand-move {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.welcome-card {
|
||||
background-image: url(../images/dashboard-3/bg.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
color: $white;
|
||||
h4 {
|
||||
img {
|
||||
margin-top: -6px;
|
||||
animation: hand-move 5s infinite ease-in;
|
||||
}
|
||||
}
|
||||
p {
|
||||
width: 75%;
|
||||
@media (max-width:1830px) {
|
||||
width: 62%;
|
||||
}
|
||||
@media (max-width:991px) {
|
||||
width: 70%;
|
||||
}
|
||||
@media (max-width:480px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.welcome-img {
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -32px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
@media (max-width:1780px) {
|
||||
height: 180px;
|
||||
bottom: -28px;
|
||||
}
|
||||
@media (max-width:1700px) {
|
||||
bottom: -23px;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
height: 140px;
|
||||
bottom: -18px;
|
||||
}
|
||||
@media (max-width:480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-box {
|
||||
overflow: hidden;
|
||||
.card-body {
|
||||
padding: 25px 15px;
|
||||
@media (max-width: 1722px) {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
@media (max-width: 1660px) {
|
||||
padding: 16px 15px;
|
||||
}
|
||||
}
|
||||
&.widget-course {
|
||||
.card-body {
|
||||
@media (max-width: 1660px) {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
.course-icon {
|
||||
svg {
|
||||
animation: tada 1.5s ease infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-widget {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.course-icon {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
clip-path: polygon(40% 7.67949%, 43.1596% 6.20615%, 46.52704% 5.30384%, 50% 5%, 53.47296% 5.30384%, 56.8404% 6.20615%, 60% 7.67949%, 81.65064% 20.17949%, 84.50639% 22.17911%, 86.97152% 24.64425%, 88.97114% 27.5%, 90.44449% 30.6596%, 91.34679% 34.02704%, 91.65064% 37.5%, 91.65064% 62.5%, 91.34679% 65.97296%, 90.44449% 69.3404%, 88.97114% 72.5%, 86.97152% 75.35575%, 84.50639% 77.82089%, 81.65064% 79.82051%, 60% 92.32051%, 56.8404% 93.79385%, 53.47296% 94.69616%, 50% 95%, 46.52704% 94.69616%, 43.1596% 93.79385%, 40% 92.32051%, 18.34936% 79.82051%, 15.49361% 77.82089%, 13.02848% 75.35575%, 11.02886% 72.5%, 9.55551% 69.3404%, 8.65321% 65.97296%, 8.34936% 62.5%, 8.34936% 37.5%, 8.65321% 34.02704%, 9.55551% 30.6596%, 11.02886% 27.5%, 13.02848% 24.64425%, 15.49361% 22.17911%, 18.34936% 20.17949%);
|
||||
background: linear-gradient(310.31deg, #FF3364 14.71%, #FF7F9E 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
fill: $white;
|
||||
}
|
||||
&.warning {
|
||||
background: linear-gradient(297.08deg, #FF9E2A -4.53%, #FFA941 98.25%);
|
||||
}
|
||||
}
|
||||
.btn-light {
|
||||
background: var(--course-light-btn) !important;
|
||||
border: none;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
margin-top: 25px;
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.get-card {
|
||||
.card-header {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
.square-group {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: scaleX(-1);
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
.square-1 {
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
}
|
||||
.square-2 {
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.square-3 {
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
margin-left: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.square-4 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: -15px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
.square-5 {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
bottom: 22px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
.square-6, .square-7 {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
.square-6 {
|
||||
right: -23px;
|
||||
bottom: 5px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -23px;
|
||||
}
|
||||
}
|
||||
.square-7 {
|
||||
right: 8px;
|
||||
bottom: 45px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
.warning1 {
|
||||
background: #FFD497;
|
||||
}
|
||||
.warning {
|
||||
background: #FFA73B;
|
||||
}
|
||||
.primary {
|
||||
background: $primary-color;
|
||||
}
|
||||
.danger {
|
||||
background: #f54132;
|
||||
}
|
||||
.light {
|
||||
background: #E6E8EF;
|
||||
}
|
||||
.success {
|
||||
background: $success-color;
|
||||
}
|
||||
}
|
||||
.progress-chart-wrap {
|
||||
margin: -40px 0 -22px;
|
||||
[dir="rtl"] & {
|
||||
direction: ltr;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
margin-top: -18px;
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
margin: 0 auto;
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-datalabel-label {
|
||||
fill: var(--chart-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.get-card {
|
||||
.btn {
|
||||
margin-top: 15px;
|
||||
padding: 8px 15px;
|
||||
&:hover {
|
||||
svg {
|
||||
transform: translateX(5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
fill: $white;
|
||||
vertical-align: middle;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.default-datepicker {
|
||||
.datepicker-inline {
|
||||
.datepicker {
|
||||
width: auto;
|
||||
background: $white;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
|
||||
.datepicker--content {
|
||||
padding: 0;
|
||||
.datepicker--days {
|
||||
.datepicker--days-names {
|
||||
margin: 27px 0 0;
|
||||
padding: 15px 0;
|
||||
|
||||
.datepicker--day-name {
|
||||
color: $dark-editor-document;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--cells {
|
||||
.datepicker--cell-day {
|
||||
height: 35px;
|
||||
width: 14%;
|
||||
color: $dark-editor-document;
|
||||
|
||||
&.-other-month- {
|
||||
color: $dark-editor-document;
|
||||
opacity: 20%;
|
||||
}
|
||||
&.-weekend- {
|
||||
+ .-weekend- {
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--cell {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
z-index: 0;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&.-selected- {
|
||||
background: var(--theme-deafult);
|
||||
color: $white;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 13px 0 rgba($primary-color, 0.5);
|
||||
}
|
||||
|
||||
&.-current- {
|
||||
background-color: $success-color;
|
||||
border: none;
|
||||
color: $white;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid var(--white);
|
||||
background: $danger-color;
|
||||
right: -3px;
|
||||
top: -2px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.-focus- {
|
||||
color: $white;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-cell {
|
||||
.datepicker--cell-month {
|
||||
&.-current- {
|
||||
&.-selected- {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--nav {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
text-transform: capitalize;
|
||||
margin-top: 0;
|
||||
|
||||
.datepicker--nav-action {
|
||||
background-color: transparent;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
&[data-action="prev"] {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
path {
|
||||
stroke: var(--chart-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--nav-title {
|
||||
color: $dark-editor-document;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
@media (max-width:767px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: $dark-editor-document;
|
||||
@media (max-width:767px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.learning-wrap {
|
||||
margin: -24px -10px -24px -15px;
|
||||
}
|
||||
.activity-wrap {
|
||||
margin: -22px 0 -22px -28px;
|
||||
[dir="rtl"] & {
|
||||
margin: -22px -28px -22px 0;
|
||||
}
|
||||
}
|
||||
.upcoming-event-wrap {
|
||||
margin-bottom: -39px;
|
||||
margin-left: -24px;
|
||||
}
|
||||
.course-card {
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
width: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-wrapper {
|
||||
text-align: center;
|
||||
.course-icon-box {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
@media (max-width:767px) {
|
||||
padding: 0;
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 117px;
|
||||
height: 92px;
|
||||
background-color: var(--course-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
margin: 0 auto;
|
||||
box-shadow: -18px 15px 20px rgba(119, 119, 119, 0.25);
|
||||
@media (max-width: 1880px) {
|
||||
width: 112px;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
box-shadow: none;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
width: 92px;
|
||||
height: 82px;
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
@media (max-width:575px) {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrow-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% + 20px);
|
||||
height: 100%;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0;
|
||||
@media (max-width: 575px) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-main-card {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
@media (max-width: 1880px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
gap: 12px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.course-wrapper {
|
||||
&:last-child {
|
||||
.arrow-bg {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.schedule-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
@media (max-width:767px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
ul {
|
||||
column-count: 2;
|
||||
column-rule-style: solid;
|
||||
column-rule-color: var(--chart-text-color);
|
||||
column-gap: 20px;
|
||||
column-rule-width: 1px;
|
||||
@media (max-width:1712px) {
|
||||
column-gap: 14px;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
li {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
border-radius: 100%;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
padding: 3px;
|
||||
}
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
&.f-success {
|
||||
fill: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
> li {
|
||||
padding: 15px 20px;
|
||||
box-shadow: 4px 7px 17px 5px rgba(46, 35, 94, 0.05);
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
@media (max-width:1712px) {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 15px 0 0 15px;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
border-radius: 0 15px 15px 0;
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
&::before {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
img {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
&::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
img {
|
||||
border: 1px solid $warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.link-only {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $theme-body-sub-title-color;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.lessons-lists {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
img {
|
||||
transition: 0.5s;
|
||||
}
|
||||
+ li {
|
||||
border-top: 1px solid var(--chart-dashed-border);
|
||||
}
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.lesson-wrap {
|
||||
width: 50px;
|
||||
margin-bottom: -11px;
|
||||
margin-top: -6px;
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-datalabel-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// responsive
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.default-datepicker {
|
||||
.datepicker-inline {
|
||||
.datepicker {
|
||||
.datepicker--nav-title {
|
||||
font-size: 17px;
|
||||
|
||||
i {
|
||||
font-size: 17px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--content {
|
||||
.datepicker--days {
|
||||
.datepicker--cells {
|
||||
.datepicker--cell {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.default-datepicker {
|
||||
.datepicker-inline {
|
||||
.datepicker {
|
||||
.datepicker--content {
|
||||
.datepicker--days {
|
||||
.datepicker--cells {
|
||||
.datepicker--cell {
|
||||
&.-selected- {
|
||||
&:before {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--cell-day {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--days-names {
|
||||
margin: 13px 0 13px;
|
||||
|
||||
.datepicker--day-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--nav-title {
|
||||
i {
|
||||
margin-left: 15px;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
611
static/admin/assets/scss/pages/_dashboard_4.scss
Normal file
611
static/admin/assets/scss/pages/_dashboard_4.scss
Normal file
@@ -0,0 +1,611 @@
|
||||
/**=====================
|
||||
Dashboard 4 CSS Start
|
||||
==========================**/
|
||||
.widget-hover {
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
.currency-widget {
|
||||
.currency-icon-widget {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 2.66667px -2.66667px 2.66667px rgba(194, 128, 49, 0.1), inset -2.66667px 2.66667px 2.66667px rgba(255, 255, 255, 0.1);
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-top: 14px;
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
@media (max-width:1660px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
flex-wrap: unset;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.d-flex {
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
span {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
div[class*="bg-light-"] {
|
||||
color: $theme-body-font-color;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
width: 115px;
|
||||
@media (max-width:1660px) and (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
&.widget-currency {
|
||||
.card {
|
||||
.card-body {
|
||||
@media (max-width: 1199px) and (min-width: 768px) {
|
||||
flex-wrap: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
.currency-icon-widget {
|
||||
background-image: linear-gradient(to right, $warning-color 80% , rgba($warning-color, 0.2));
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
.currency-icon-widget {
|
||||
background-image: linear-gradient(to right, $primary-color 80% , rgba($primary-color, 0.2));
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
.currency-icon-widget {
|
||||
background-image: linear-gradient(to right, $success-color 80% , rgba($success-color, 0.2));
|
||||
}
|
||||
}
|
||||
&.height-equal {
|
||||
@media (max-width:1399px) {
|
||||
min-height: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency-chart-wrap {
|
||||
margin: -28px -10px -20px -20px;
|
||||
@media (max-width: 575px) {
|
||||
width: 50%;
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-tooltip-text-y-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tranaction-card {
|
||||
.header-top {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.crypto-main-card {
|
||||
background-image: linear-gradient(to bottom right, #5f3deb, #ad79ff);
|
||||
color: $white;
|
||||
.card-body {
|
||||
@media (max-width: 1199px) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
@media (max-width: 1660px) {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
}
|
||||
.deposit-wrap {
|
||||
> div {
|
||||
width: 65%;
|
||||
@media (max-width: 1660px) {
|
||||
width: 90%;
|
||||
}
|
||||
@media (max-width: 1536px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
width: 75%;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
width: 95%;
|
||||
}
|
||||
h5 {
|
||||
@media (max-width: 1660px) {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 55%;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 10px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
@media (max-width: 1660px) {
|
||||
width: 44%;
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
width: 52%;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.portfolio-card {
|
||||
.dropdown-toggle {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
.btn-white {
|
||||
color: $primary-color;
|
||||
background-color: $white;
|
||||
}
|
||||
.radial-progress-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
&.card-body {
|
||||
padding: 23px 20px;
|
||||
@media (max-width: 1199px) {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
}
|
||||
h6 {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.sale-details {
|
||||
margin: 10px 0;
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.radial-chart-wrap {
|
||||
width: 110px;
|
||||
margin-right: -25px;
|
||||
[dir="rtl"] & {
|
||||
margin-right: unset;
|
||||
margin-left: -25px;
|
||||
}
|
||||
@media (max-width: 1820px) {
|
||||
margin-right: -12px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: -12px;
|
||||
}
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-datalabel-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.transaction-table {
|
||||
table {
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
min-width: unset;
|
||||
@media (max-width: 1775px) {
|
||||
min-width: 130px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
tr,td {
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-tab {
|
||||
background: var(--light2);
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
&.nav-tabs {
|
||||
border: none;
|
||||
.nav-link {
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
color: var(--chart-text-color);
|
||||
&.active {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.market-chart-container {
|
||||
margin: -24px 0 -24px -15px;
|
||||
[dir="rtl"] & {
|
||||
margin: -24px -15px -24px 0;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.market-card {
|
||||
.balance-card {
|
||||
padding: 10px;
|
||||
}
|
||||
.custom-tab {
|
||||
@media (max-width:575px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-color: var(--light2);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.warning {
|
||||
svg {
|
||||
fill: $warning-color;
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
svg {
|
||||
fill: $success-color;
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
svg {
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
&.secondary {
|
||||
svg {
|
||||
fill: $secondary-color;
|
||||
}
|
||||
}
|
||||
&.dark-green {
|
||||
svg {
|
||||
fill: #1BA27A;
|
||||
}
|
||||
}
|
||||
&.light-blue {
|
||||
svg {
|
||||
fill: #038DE7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-table {
|
||||
tr {
|
||||
&:hover {
|
||||
td {
|
||||
&:first-child {
|
||||
h6 {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-icon {
|
||||
.social-circle {
|
||||
transform: scale(1.02);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
.currency-icon {
|
||||
svg {
|
||||
animation: tada 1.5s ease infinite;
|
||||
}
|
||||
}
|
||||
.badge-light-primary {
|
||||
background-color: var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency-table {
|
||||
.change-currency {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
&:nth-child(3) {
|
||||
min-width: 110px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
min-width: 115px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&.crypto-select {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 12px;
|
||||
right: 7px;
|
||||
width: 62px;
|
||||
background-position: right 0.25rem center;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
background-size: 8px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 7px;
|
||||
}
|
||||
&.warning {
|
||||
background-color: rgba($warning-color, 0.1) !important;
|
||||
color: $warning-color !important;
|
||||
}
|
||||
&.primary {
|
||||
background-color: rgba($primary-color, 0.1) !important;
|
||||
color: $primary-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-form {
|
||||
input {
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
&[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-box {
|
||||
text-align: center;
|
||||
background-image: url(../images/dashboard-4/bg-balance.png);
|
||||
background-position: right;
|
||||
background-size: cover;
|
||||
.balance-img {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
border: 2px solid var(--chart-border);
|
||||
border-left-color: $success-color;
|
||||
border-bottom-color: $success-color;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
img {
|
||||
background-color: var(--balance-profie-bg);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.edit-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--white);
|
||||
background-color: #DFDFF4;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-profile {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 50px;
|
||||
margin-top: 16px;
|
||||
@media (max-width: 1660px) {
|
||||
gap: 25px;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
+ li {
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -25px;
|
||||
top: 50%;
|
||||
height: 40px;
|
||||
transform: translateY(-50%);
|
||||
border: 1px dashed var(--recent-dashed-border);
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -25px;
|
||||
}
|
||||
@media (max-width: 1660px) {
|
||||
left: -16px;
|
||||
[dir="rtl"] & {
|
||||
right: -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.activity-card {
|
||||
.appointment-table {
|
||||
@media (max-width:1399px) {
|
||||
height: 180px;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
height: unset;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
&:nth-child(2) {
|
||||
min-width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.balance-icon-wrap {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
@media (max-width: 1660px) {
|
||||
width: 25px;
|
||||
min-width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.balance-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
@media (max-width: 1660px) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
svg {
|
||||
color: $white;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
@media (max-width: 1660px) {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
&.danger {
|
||||
.balance-icon-wrap {
|
||||
background-color: rgba($danger-color, 0.1);
|
||||
.balance-icon {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
.balance-icon-wrap {
|
||||
background-color: rgba($success-color, 0.1);
|
||||
.balance-icon {
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.portfolio-chart-container {
|
||||
margin-top: -56px;
|
||||
@media (max-width: 1399px) {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
.portfolio-table {
|
||||
.status {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
table {
|
||||
tr, td {
|
||||
border-style: dashed;
|
||||
}
|
||||
tr {
|
||||
td,th {
|
||||
&:first-child {
|
||||
@media (max-width: 1755px) {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@media (max-width: 1755px) {
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
321
static/admin/assets/scss/pages/_dashboard_5.scss
Normal file
321
static/admin/assets/scss/pages/_dashboard_5.scss
Normal file
@@ -0,0 +1,321 @@
|
||||
/**=====================
|
||||
Dashboard 5 CSS Start
|
||||
==========================**/
|
||||
.social {
|
||||
&-img {
|
||||
padding: 5px;
|
||||
background: var(--white);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&-widget {
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
.social-icons {
|
||||
min-width: 55px;
|
||||
height: 55px;
|
||||
background: var(--white);
|
||||
box-shadow: 0px 42.1092px 27.8569px rgba(41, 72, 152, 0.0303704), 0px 8.90772px 7.12618px rgba(41, 72, 152, 0.0196296), 0px 2.02448px 3.44162px rgba(41, 72, 152, 0.012037);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (max-width: 1399px) {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.social-content {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.social-chart {
|
||||
margin: -34px -42px -13px;
|
||||
width: 150px;
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-datalabel-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.follower-chart {
|
||||
margin: -20px 0 -20px -34px;
|
||||
@media (max-width: 717px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@keyframes wave-speaker {
|
||||
0% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
.mobile-app-card {
|
||||
.card-header {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
width: 68%;
|
||||
@media (max-width: 1693px) {
|
||||
width: 75%;
|
||||
}
|
||||
@media (max-width: 1316px) {
|
||||
width: 86%;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
width: 64%;
|
||||
}
|
||||
@media (max-width: 350px) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
margin-top: -10px;
|
||||
@media (max-width: 1199px) {
|
||||
margin-top: 26px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.wavy {
|
||||
width: 26px;
|
||||
margin-right: -37px;
|
||||
margin-top: -10px;
|
||||
animation: wave-speaker 2s ease infinite;
|
||||
}
|
||||
}
|
||||
.purchase-btn {
|
||||
padding: 10px 25px;
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
.subscriber-chart-container {
|
||||
margin: -22px -10px -24px;
|
||||
}
|
||||
.click-widgets {
|
||||
.card-body {
|
||||
padding: 28px 15px;
|
||||
}
|
||||
.click-chart {
|
||||
margin: -50px 0 -70px -20px;
|
||||
}
|
||||
}
|
||||
.follower-wrap {
|
||||
.card-body, .card-header {
|
||||
@media (max-width: 1693px) {
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.campaign-list {
|
||||
column-count: 2;
|
||||
column-gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
li {
|
||||
position: relative;
|
||||
+ li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: var(--chart-text-color);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -10px;
|
||||
opacity: 0.6;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.campaign-box {
|
||||
background: linear-gradient(180deg, var(--course-light-btn) 0%, rgba(242, 243, 247, 0) 100%);
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.campaign-table {
|
||||
table {
|
||||
tr {
|
||||
&:hover {
|
||||
td {
|
||||
&:nth-child(2) {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-icon {
|
||||
> div {
|
||||
border-left: 2px solid $fb-color;
|
||||
padding-left: 15px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.facebook {
|
||||
> div {
|
||||
border-left: 2px solid $fb-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $fb-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($fb-color, 0.1);
|
||||
border-color: $fb-color;
|
||||
color: $fb-color;
|
||||
}
|
||||
}
|
||||
.instagram {
|
||||
> div {
|
||||
border-left: 2px solid $insta-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $insta-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($insta-color, 0.1);
|
||||
border-color: $insta-color;
|
||||
color: $insta-color;
|
||||
}
|
||||
}
|
||||
.pinterest {
|
||||
> div {
|
||||
border-left: 2px solid $pintrest-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $pintrest-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($pintrest-color, 0.1);
|
||||
border-color: $pintrest-color;
|
||||
color: $pintrest-color;
|
||||
}
|
||||
}
|
||||
.plus-btn {
|
||||
width: 24px;
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--body-font-color);
|
||||
color: var(--body-font-color);
|
||||
&:hover {
|
||||
background-color: var(--body-font-color);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.twitter {
|
||||
> div {
|
||||
border-left: 2px solid $twitter-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $twitter-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($twitter-color, 0.1);
|
||||
border-color: $twitter-color;
|
||||
color: $twitter-color;
|
||||
}
|
||||
}
|
||||
.you-tube {
|
||||
> div {
|
||||
border-left: 2px solid $youtube-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $youtube-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($youtube-color, 0.1);
|
||||
border-color: $youtube-color;
|
||||
color: $youtube-color;
|
||||
}
|
||||
}
|
||||
.badge-light-primary, .badge-light-light {
|
||||
padding: 4px 12px;
|
||||
}
|
||||
tr {
|
||||
td,th {
|
||||
border-style: dashed;
|
||||
&:nth-child(5) {
|
||||
min-width: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-table {
|
||||
tr {
|
||||
td,th {
|
||||
&:nth-child(2) {
|
||||
min-width: 120px;
|
||||
}
|
||||
&:first-child {
|
||||
min-width: 110px;
|
||||
}
|
||||
&:nth-child(3), &:last-child {
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-container {
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-grid-row {
|
||||
stroke-width: 15px;
|
||||
stroke: var(--white);
|
||||
}
|
||||
.apexcharts-gridlines-vertical, .apexcharts-gridlines-horizontal {
|
||||
line, react {
|
||||
stroke-width: 15px;
|
||||
stroke: var(--white);
|
||||
}
|
||||
}
|
||||
.apexcharts-point-annotations {
|
||||
circle {
|
||||
outline: 25px solid #f0effd;
|
||||
border-radius: 100%;
|
||||
@media (max-width: 480px) {
|
||||
outline-width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
2031
static/admin/assets/scss/pages/_dashboard_default.scss
Normal file
2031
static/admin/assets/scss/pages/_dashboard_default.scss
Normal file
File diff suppressed because it is too large
Load Diff
763
static/admin/assets/scss/pages/_ecommerce.scss
Normal file
763
static/admin/assets/scss/pages/_ecommerce.scss
Normal file
@@ -0,0 +1,763 @@
|
||||
/**=====================
|
||||
33. Ecommerce CSS Start
|
||||
==========================**/
|
||||
|
||||
/**====== Product Start ======**/
|
||||
.toggle-data {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-block {
|
||||
ul {
|
||||
li {
|
||||
padding-top: 15px;
|
||||
opacity: 0.5;
|
||||
@media (max-width: 1500px) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collection-filter-block {
|
||||
svg {
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
stroke: var(--theme-deafult);
|
||||
fill: #e8e5ff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
opacity: 0.5;
|
||||
}
|
||||
li {
|
||||
&+li {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
ul.pro-services{
|
||||
li{
|
||||
svg{
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.qty-box {
|
||||
.btn {
|
||||
background-color: transparent !important;
|
||||
border-color: $light-gray !important;
|
||||
padding: 8px 12px;
|
||||
i {
|
||||
color: $dark-gray;
|
||||
}
|
||||
svg {
|
||||
width: 14px !important;
|
||||
stroke: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 0 4px;
|
||||
}
|
||||
.input-group {
|
||||
background-color: rgba($dark-color, 0.1);
|
||||
// width:100px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: rgba($dark-color, 0.1);
|
||||
color: $dark-color;
|
||||
max-width: 44px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
max-height: 37px;
|
||||
}
|
||||
}
|
||||
.product-social {
|
||||
li {
|
||||
a {
|
||||
color: $dark-gray;
|
||||
font-size: 15px;
|
||||
border: 1px solid $gray-60;
|
||||
border-radius: 100%;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 2.3;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
&:nth-child(n+2){
|
||||
margin-left:10px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-sidebar {
|
||||
.filter-section {
|
||||
.card {
|
||||
.card-header {
|
||||
padding: 16px 30px;
|
||||
border-radius: 5px;
|
||||
h6 {
|
||||
position: relative;
|
||||
.pull-right {
|
||||
i {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-wrapper {
|
||||
.product-sidebar {
|
||||
.filter-section {
|
||||
.card {
|
||||
.left-filter {
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
transition: 0.3s;
|
||||
min-width: 320px;
|
||||
|
||||
.product-filter {
|
||||
.irs-with-grid {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
.product-wrapper-grid {
|
||||
margin-left: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebaron {
|
||||
.product-sidebar {
|
||||
.filter-section {
|
||||
.card {
|
||||
.left-filter {
|
||||
z-index: 3;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
top: 53px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-none-productlist {
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.product-wrapper-grid {
|
||||
&.list-view {
|
||||
.product-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.product-img {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-product {
|
||||
padding: 15px 0;
|
||||
border-top: 1px solid $light-color;
|
||||
border-bottom: 1px solid $light-color;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.products-total {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grid-options {
|
||||
height: 33px;
|
||||
margin-left: 10px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
.line-grid {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.line-grid-1 {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.line-grid-2 {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.line-grid-3 {
|
||||
left: 36px;
|
||||
}
|
||||
|
||||
.line-grid-4 {
|
||||
left: 42px;
|
||||
}
|
||||
|
||||
.line-grid-5 {
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
.line-grid-6 {
|
||||
left: 66px;
|
||||
}
|
||||
|
||||
.line-grid-7 {
|
||||
left: 72px;
|
||||
}
|
||||
|
||||
.line-grid-8 {
|
||||
left: 78px;
|
||||
}
|
||||
|
||||
.line-grid-9 {
|
||||
left: 84px;
|
||||
}
|
||||
|
||||
.line-grid-10 {
|
||||
left: 103px;
|
||||
}
|
||||
|
||||
.line-grid-11 {
|
||||
left: 109px;
|
||||
}
|
||||
|
||||
.line-grid-12 {
|
||||
left: 115px;
|
||||
}
|
||||
|
||||
.line-grid-13 {
|
||||
left: 121px;
|
||||
}
|
||||
|
||||
.line-grid-14 {
|
||||
left: 127px;
|
||||
}
|
||||
|
||||
.line-grid-15 {
|
||||
left: 133px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.square-product-setting {
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
|
||||
a {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
padding: 7px;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-filter {
|
||||
.banner-product {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.color-selector {
|
||||
line-height: 0.9;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.white {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background-color: $theme-body-sub-title-color;
|
||||
}
|
||||
|
||||
&.black {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background-color: #ffb17a;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: #6fb866;
|
||||
}
|
||||
|
||||
&.pink {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background-color: #f2f896;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background-color: #63b4f2;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background-color: #ff647f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.new-products {
|
||||
margin-top: 20px;
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.owl-theme {
|
||||
.owl-nav {
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: -46px;
|
||||
right: 0;
|
||||
|
||||
button {
|
||||
&:focus {
|
||||
outline: $transparent-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
|
||||
&:focus {
|
||||
outline-color: $transparent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owl-nav [class*='owl-'] {
|
||||
&:hover {
|
||||
background-color: $transparent-color;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.owl-item {
|
||||
.item {
|
||||
.product-box {
|
||||
.product-details {
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
+.product-box {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drpdwn-product {
|
||||
.form-control {
|
||||
border: none;
|
||||
box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
|
||||
margin-bottom: 10px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-products {
|
||||
form {
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
|
||||
height: 50px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 30px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-box {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.product-details {
|
||||
padding: 15px 25px;
|
||||
|
||||
> a{
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
font-size: 20px;
|
||||
font-family: roboto;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $theme-body-font-color;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.rating {
|
||||
i {
|
||||
font-size: 16px;
|
||||
letter-spacing: 3px;
|
||||
color: #ffa800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal-header {
|
||||
.product-box {
|
||||
.product-details {
|
||||
padding: 25px 0;
|
||||
|
||||
h6 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 22px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-view {
|
||||
padding: 20px 0;
|
||||
border-top: 1px dotted $semi-dark;
|
||||
border-bottom: 1px dotted $semi-dark;
|
||||
}
|
||||
|
||||
.product-size {
|
||||
margin: 20px 0;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-qnty {
|
||||
fieldset {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.input-group {
|
||||
width: 35%;
|
||||
|
||||
.btn {
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: $semi-dark !important;
|
||||
border: 1px solid $semi-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-img {
|
||||
position: relative;
|
||||
|
||||
.product-hover {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba($black, 0.3);
|
||||
opacity: 0;
|
||||
border-radius: 100%;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
|
||||
padding: 10px 12px;
|
||||
background-color: $white;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
margin: 0 3px;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
color: $semi-dark;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-deafult);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.btn,
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.product-hover {
|
||||
opacity: 1;
|
||||
border-radius: 0%;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-page-main {
|
||||
padding: 30px;
|
||||
.owl-item {
|
||||
.item {
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 5px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
&.current {
|
||||
.item {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-slider {
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
@media (min-width: 1400px) {
|
||||
height: 520px;
|
||||
object-fit: cover;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-color{
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.product-page-details {
|
||||
h4 {
|
||||
color: $theme-body-font-color;
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.br-theme-fontawesome-stars {
|
||||
.br-widget {
|
||||
|
||||
a,
|
||||
a.br-selected:after,
|
||||
a.br-active:after {
|
||||
color: #ffa800 !important;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-top: 5px;
|
||||
color: var(--theme-deafult);
|
||||
|
||||
del {
|
||||
color: rgba($dark-color, 0.4);
|
||||
padding-left: 10px;
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-color {
|
||||
li {
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-page-main {
|
||||
p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/**====== Product Ends ======**/
|
||||
|
||||
.payment-opt {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin: 15px 15px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
33. Ecommerce CSS End
|
||||
==========================**/
|
||||
@media screen and (max-width: 1660px) and (min-width: 1200px) {
|
||||
|
||||
.owl-carousel .owl-item img {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
311
static/admin/assets/scss/pages/_email-application.scss
Normal file
311
static/admin/assets/scss/pages/_email-application.scss
Normal file
@@ -0,0 +1,311 @@
|
||||
/**=====================
|
||||
13. Email Application CSS Start
|
||||
==========================**/
|
||||
%email-mixin {
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.email-wrap {
|
||||
// margin-bottom:30px;
|
||||
.row {
|
||||
.col-xl-3 {
|
||||
&+.col-xl-3 {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.col-xl-6 {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
background-color: rgba(115,102,255,0.08);
|
||||
color: $primary-color;
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
content: "\f107";
|
||||
border: none;
|
||||
font-family: "FontAwesome";
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
-webkit-box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
border: none;
|
||||
padding: 0;
|
||||
.dropdown-item {
|
||||
color: #2b2b2b;
|
||||
opacity: 0.6;
|
||||
font-size: 13px;
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
background: $white;
|
||||
line-height: 19px;
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.email-app-sidebar {
|
||||
.media img {
|
||||
border: 2px solid $light-gray;
|
||||
}
|
||||
.main-menu {
|
||||
>li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
a {
|
||||
line-height: 39px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 3px;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.active>a {
|
||||
color: $black;
|
||||
}
|
||||
&:hover {
|
||||
background-color:#f5f6f9;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
a {
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
align-items: center;
|
||||
|
||||
> {
|
||||
.title {
|
||||
width: 100%;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.badge {
|
||||
align-self: center;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-left-aside {
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-right-aside {
|
||||
.email-body {
|
||||
.pr-0{
|
||||
@media (min-width: 1200px) {
|
||||
padding-right: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-right: 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.pl-0{
|
||||
@media (min-width: 1200px) {
|
||||
padding-left: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inbox {
|
||||
overflow: auto;
|
||||
@media (max-width: 1199.98px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.media {
|
||||
padding: 20px;
|
||||
|
||||
&.active {
|
||||
background-color: lighten($light-color, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radius-left {
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-mail {
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
padding: 13px 15px;
|
||||
margin: 20px 0 20px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 12px !important;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
margin-top: 5px;
|
||||
|
||||
h6 {
|
||||
margin-bottom: 2px;
|
||||
color: $theme-font-color;
|
||||
margin-top: 3px;
|
||||
|
||||
small {
|
||||
font-size: 12px;
|
||||
span {
|
||||
color: #777777;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $theme-body-sub-title-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-top {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
line-height: 49px;
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
padding: 13px 0;
|
||||
}
|
||||
}
|
||||
.email-wrapper {
|
||||
padding: 20px;
|
||||
hr {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.d-inline-block {
|
||||
width: 100%;
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 11px;
|
||||
float: left;
|
||||
}
|
||||
.right-download {
|
||||
float: right;
|
||||
}
|
||||
p {
|
||||
&+p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-bottom: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
.list-inline-item {
|
||||
padding-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.email-compose {
|
||||
.cke_contents.cke_reset {
|
||||
max-height: 178px;
|
||||
width: 100%;
|
||||
border: 1px solid $form-control-border-color;
|
||||
}
|
||||
|
||||
.email-top {
|
||||
h4 {
|
||||
padding: 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-border {
|
||||
// margin: -1px;
|
||||
.btn-middle {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions li {
|
||||
display: inline-block;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
13. Email Application CSS Ends
|
||||
==========================**/
|
||||
125
static/admin/assets/scss/pages/_errorpage.scss
Normal file
125
static/admin/assets/scss/pages/_errorpage.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
/**=====================
|
||||
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.6);
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
.maintenance-icons{
|
||||
li{
|
||||
i{
|
||||
color: $semi-dark;
|
||||
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: var(--theme-deafult);
|
||||
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: $theme-body-font-color;
|
||||
letter-spacing: 1px;
|
||||
font-weight: normal;
|
||||
line-height: 35px;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.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-color;
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
09. Error-page CSS Ends
|
||||
==========================**/
|
||||
|
||||
347
static/admin/assets/scss/pages/_faq.scss
Normal file
347
static/admin/assets/scss/pages/_faq.scss
Normal file
@@ -0,0 +1,347 @@
|
||||
//According settings
|
||||
/**=====================
|
||||
71. Faq CSS start
|
||||
==========================**/
|
||||
.knowledgebase-bg {
|
||||
height: 500px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
}
|
||||
|
||||
.knowledgebase-search {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 5%;
|
||||
|
||||
.form-inline {
|
||||
background-color: $white;
|
||||
width: 500px;
|
||||
padding: 12px 50px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e6e6e6;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
::placeholder {
|
||||
color: $gray-60;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
width: 20px;
|
||||
top: 17px;
|
||||
stroke: $gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-widgets {
|
||||
align-items: center;
|
||||
|
||||
.media-body {
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-right: 20px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.header-faq {
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.features-faq {
|
||||
&.card {
|
||||
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding: 20px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-image {
|
||||
img {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-project {
|
||||
&.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text-inherit {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-accordion.default-according {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.card {
|
||||
.btn-link {
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
position: relative;
|
||||
padding: 30px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.card-mb-faq {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin: 30px 0;
|
||||
|
||||
h6 {
|
||||
color: $light-text;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-form {
|
||||
position: relative;
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 9px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-btn {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navigation-option {
|
||||
ul {
|
||||
li {
|
||||
position: relative;
|
||||
padding: 8px 8px 8px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left: 40px;
|
||||
color: $theme-body-font-color;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 11px;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updates-faq {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid var(--theme-deafult);
|
||||
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;
|
||||
|
||||
+p {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updates-faq-main {
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1399.98px) {
|
||||
.faq-widgets {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.faq-accordion {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.faq-accordion.default-according {
|
||||
.card {
|
||||
.faq-header {
|
||||
padding: 20px !important;
|
||||
|
||||
svg {
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-option {
|
||||
ul {
|
||||
li {
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
a {
|
||||
svg {
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.xs-mt-search {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.xs-mt-search {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.faq-widgets {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.header-faq {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
margin-bottom: 0px;
|
||||
|
||||
.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
|
||||
==========================**/
|
||||
298
static/admin/assets/scss/pages/_file.scss
Normal file
298
static/admin/assets/scss/pages/_file.scss
Normal file
@@ -0,0 +1,298 @@
|
||||
/**=====================
|
||||
File Manager
|
||||
==========================**/
|
||||
|
||||
.file-sidebar,
|
||||
.file-content {
|
||||
.card {
|
||||
|
||||
.card-body,
|
||||
.card-header {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-sidebar {
|
||||
ul {
|
||||
li {
|
||||
&+li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.btn-light {
|
||||
&:hover {
|
||||
color: var(--theme-deafult) !important;
|
||||
|
||||
svg {
|
||||
stroke: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
opacity: 0.1;
|
||||
transform: rotate(-45deg);
|
||||
right: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager {
|
||||
>h6 {
|
||||
opacity: 0.6;
|
||||
font-weight: 400 !important;
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 0.9;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.files,
|
||||
.folder {
|
||||
h6 {
|
||||
opacity: 0.9;
|
||||
font-weight: 500 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-content {
|
||||
.ellips {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
border: 1px solid #f4f4f4;
|
||||
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: 500;
|
||||
}
|
||||
|
||||
.folder {
|
||||
.folder-box {
|
||||
border: 1px solid #f1f1f1;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
background-color: #f6f7fb;
|
||||
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 #f1f1f1;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
background-color: #f6f7fb;
|
||||
width: calc(25% - 15px);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.file-top {
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ececec;
|
||||
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;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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: 20px;
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
|
||||
.file-content .folder .folder-box,
|
||||
.file-content .files .file-box {
|
||||
width: calc(100%);
|
||||
}
|
||||
|
||||
.file-content {
|
||||
.btn-outline-primary {
|
||||
// margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
File Manager
|
||||
==========================**/
|
||||
425
static/admin/assets/scss/pages/_gallery.scss
Normal file
425
static/admin/assets/scss/pages/_gallery.scss
Normal 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;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
&:hover{
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
color: $dark-color;
|
||||
margin-top: 15px;
|
||||
font-size:18px;
|
||||
}
|
||||
p{
|
||||
color: lighten($dark-gray , 10%);
|
||||
}
|
||||
}
|
||||
.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
|
||||
==========================**/
|
||||
54
static/admin/assets/scss/pages/_helper.scss
Normal file
54
static/admin/assets/scss/pages/_helper.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
/**=====================
|
||||
15. Helper CSS start
|
||||
==========================**/
|
||||
|
||||
.border-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.helper-box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 25%;
|
||||
|
||||
&.helper-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-radius {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.fill-wrapper {
|
||||
background-color: $light-color;
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
gap: calc(13px + (22 - 13) * ((100vw - 320px) / (1200 - 320)));
|
||||
}
|
||||
}
|
||||
|
||||
.radius-wrapper {
|
||||
background-color: $light-semi-gray;
|
||||
}
|
||||
|
||||
.font-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
/**=====================
|
||||
15. Helper CSS end
|
||||
==========================**/
|
||||
55
static/admin/assets/scss/pages/_internationalization.scss
Normal file
55
static/admin/assets/scss/pages/_internationalization.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
/**=====================
|
||||
74. internationalization css start
|
||||
==========================**/
|
||||
.hdg_main{
|
||||
position: relative;
|
||||
}
|
||||
.main {
|
||||
.langChoice{
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 31px;
|
||||
padding: 10px 12px;
|
||||
background-color: $transparent-color;
|
||||
}
|
||||
}
|
||||
// responsive css
|
||||
@media (max-width: 991px) {
|
||||
.main{
|
||||
.langChoice {
|
||||
right: 20px;
|
||||
top: 11px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.main {
|
||||
.langChoice {
|
||||
top: 14px;
|
||||
padding: 4px 7px;
|
||||
}
|
||||
}
|
||||
.language-xs{
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.language-header{
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
.main {
|
||||
.langChoice {
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
top: 50px;
|
||||
width: 30%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
74. internationalization CSS end
|
||||
==========================**/
|
||||
282
static/admin/assets/scss/pages/_job-search.scss
Normal file
282
static/admin/assets/scss/pages/_job-search.scss
Normal file
@@ -0,0 +1,282 @@
|
||||
/**=====================
|
||||
72. Job CSS start
|
||||
==========================**/
|
||||
.filter-cards-view {
|
||||
.job-filter {
|
||||
&:first-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-animated {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.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-search {
|
||||
p {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.media {
|
||||
.media-body {
|
||||
h6 {
|
||||
margin-bottom: 3px;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: $light-text;
|
||||
font-weight: normal;
|
||||
|
||||
&.badge {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-description {
|
||||
margin-top: 30px;
|
||||
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-form {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.row {
|
||||
div[class^="col-"] {
|
||||
+div[class^="col-"] {
|
||||
.select2-container {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-select2 {
|
||||
~.select2-container {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.datepicker-here {
|
||||
font-size: 14px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
border-radius: 0.25rem !important;
|
||||
border-color: $light-semi-gray;
|
||||
height: 47px !important;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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: 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: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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: 15px;
|
||||
}
|
||||
|
||||
.media {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.media-body {
|
||||
h6 {
|
||||
.pull-right {
|
||||
float: none;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
span {
|
||||
+span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.m-r-20 {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.job-description {
|
||||
margin-top: 15px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-pagination {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.xl-mt-job {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.job-search {
|
||||
.job-description {
|
||||
.btn {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
72. Job CSS end
|
||||
==========================**/
|
||||
60
static/admin/assets/scss/pages/_jsgrid.scss
Normal file
60
static/admin/assets/scss/pages/_jsgrid.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
/**=====================
|
||||
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-color;
|
||||
}
|
||||
.jsgrid-pager-page{
|
||||
a{
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-pager-current-page{
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-selected-row{
|
||||
>.jsgrid-cell{
|
||||
background: $light-color;
|
||||
border-color: $auth-bg-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-header-row{
|
||||
> .jsgrid-header-cell{
|
||||
padding: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
31. JS datagrid CSS Ends
|
||||
==========================**/
|
||||
201
static/admin/assets/scss/pages/_kanban.scss
Normal file
201
static/admin/assets/scss/pages/_kanban.scss
Normal file
@@ -0,0 +1,201 @@
|
||||
/**=====================
|
||||
61. base_inputs CSS start
|
||||
==========================**/
|
||||
.jkanban-container {
|
||||
.btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.note {
|
||||
a {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-board-header {
|
||||
height: auto;
|
||||
width: auto;
|
||||
line-height: unset;
|
||||
background: $body-color;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
&.bg-info {
|
||||
&~.kanban-drag {
|
||||
background-color: rgba($info-color, 0.3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-warning {
|
||||
&~.kanban-drag {
|
||||
background-color: rgba($warning-color, 0.3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-success {
|
||||
&~.kanban-drag {
|
||||
background-color: rgba($success-color, 0.3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-container {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.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: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-item {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
p {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: inline-block;
|
||||
opacity: 0.4;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-box {
|
||||
border: 1px solid #efefef;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: inherit;
|
||||
background-color: $white;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&+.kanban-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 15px;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.jkanban-container .btn {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.kanban-container {
|
||||
.kanban-board {
|
||||
width: 320px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
.kanban-board .kanban-drag,
|
||||
.kanban-container .kanban-item .kanban-box {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.kanban-container .kanban-board {
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.jkanban-container {
|
||||
.card-body {
|
||||
padding: 20px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-board .kanban-drag,
|
||||
.kanban-container .kanban-item .kanban-box {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.kanban-container .kanban-board {
|
||||
width: 270px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
61. base_inputs CSS ends
|
||||
==========================**/
|
||||
100
static/admin/assets/scss/pages/_knowledgebase.scss
Normal file
100
static/admin/assets/scss/pages/_knowledgebase.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
/**=====================
|
||||
73. knowledgebase CSS start
|
||||
==========================**/
|
||||
.browse{
|
||||
.browse-articles{
|
||||
span{
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
&:nth-child(2){
|
||||
padding-left: 20px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
svg{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
vertical-align: text-top;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6{
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 1px solid $light;
|
||||
padding-left: 25px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 25px;
|
||||
}
|
||||
span{
|
||||
svg{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-top;
|
||||
top: 0;
|
||||
left: -30px;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
a{
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1366px){
|
||||
.browse{
|
||||
div[class^="col-"]{
|
||||
&:nth-child(3){
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 360px){
|
||||
.browse{
|
||||
.browse-articles{
|
||||
ul{
|
||||
li{
|
||||
a{
|
||||
span{
|
||||
&:nth-child(2){
|
||||
width: 158px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
73. knowledgebase CSS end
|
||||
==========================**/
|
||||
3225
static/admin/assets/scss/pages/_landing.scss
Normal file
3225
static/admin/assets/scss/pages/_landing.scss
Normal file
File diff suppressed because it is too large
Load Diff
100
static/admin/assets/scss/pages/_language.scss
Normal file
100
static/admin/assets/scss/pages/_language.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
/**=====================
|
||||
76. Language CSS start
|
||||
==========================**/
|
||||
.current_lang {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lang {
|
||||
&.selected {
|
||||
display: none;
|
||||
}
|
||||
span.lang-txt {
|
||||
display: inline-flex;
|
||||
margin-left: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
span {
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*more lang*/
|
||||
|
||||
.more_lang {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15);
|
||||
}
|
||||
.translate_wrapper.active .more_lang {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
top: 47px;
|
||||
right: 0;
|
||||
box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
&:before{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #fff;
|
||||
content: "";
|
||||
top: -7px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
&:after{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #bdc2c5;
|
||||
content: "";
|
||||
top: -7px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.more_lang {
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translateY(-0px);
|
||||
}
|
||||
.lang{
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
&:hover {
|
||||
background: var(--theme-deafult);
|
||||
color: $white;
|
||||
span {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.translate_wrapper {
|
||||
&.active {
|
||||
.more_lang{
|
||||
.lang {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
76. Language CSS end
|
||||
==========================**/
|
||||
95
static/admin/assets/scss/pages/_learning.scss
Normal file
95
static/admin/assets/scss/pages/_learning.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
/**=====================
|
||||
75. Learning CSS start
|
||||
==========================**/
|
||||
.learning-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.categories {
|
||||
padding: 30px 0;
|
||||
|
||||
.learning-header {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
padding: 10px 15px;
|
||||
|
||||
a {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upcoming-course {
|
||||
.media {
|
||||
+.media {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-accordion {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1366px) {
|
||||
.learning-comment {
|
||||
margin-left: -14px !important;
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.blog-box {
|
||||
.blog-details {
|
||||
.blog-social {
|
||||
li {
|
||||
&:first-child {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
+li {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.categories {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.upcoming-course {
|
||||
.media {
|
||||
+.media {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.categories {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.upcoming-course {
|
||||
.media {
|
||||
+.media {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
75. Learning CSS end
|
||||
==========================**/
|
||||
152
static/admin/assets/scss/pages/_login.scss
Normal file
152
static/admin/assets/scss/pages/_login.scss
Normal file
@@ -0,0 +1,152 @@
|
||||
/**=====================
|
||||
25. Authentication CSS Start
|
||||
==========================**/
|
||||
|
||||
.login-card {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
background: url('../images/login/login_bg.jpg');
|
||||
background-position: center;
|
||||
padding: 30px 12px;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-showcase {
|
||||
.btn {
|
||||
line-height: 1;
|
||||
padding: 10px 15px;
|
||||
margin: 0;
|
||||
|
||||
&+.btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-main {
|
||||
width: 450px;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 37px rgba(8, 21, 66, 0.05);
|
||||
margin: 0 auto;
|
||||
background-color: $white;
|
||||
|
||||
.theme-form {
|
||||
h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.checkbox label::before {
|
||||
background-color: $card-body-color;
|
||||
border: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.or {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 65%;
|
||||
height: 2px;
|
||||
background-color: #f3f3ff;
|
||||
top: 9px;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #f3f3ff;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid lighten($semi-dark, 35%);
|
||||
box-shadow: none !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-hide {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--theme-deafult);
|
||||
|
||||
&.show {
|
||||
&:before {
|
||||
content: "show";
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.needs-validation {
|
||||
.invalid-feedback {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.show-hide {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.invalid-tooltip {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
25. Authentication CSS Ends
|
||||
==========================**/
|
||||
89
static/admin/assets/scss/pages/_megaoption.scss
Normal file
89
static/admin/assets/scss/pages/_megaoption.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
/**=====================
|
||||
19. Mega option CSS Start
|
||||
==========================**/
|
||||
.mega-inline{
|
||||
margin-bottom: -30px;
|
||||
display: flex;
|
||||
.card{
|
||||
border: 1px solid #f3f3f3;
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
.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: $card-box-shadow;
|
||||
}
|
||||
.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: $card-box-shadow;
|
||||
}
|
||||
.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: none !important;
|
||||
}
|
||||
}
|
||||
.border-style{
|
||||
.card{
|
||||
box-shadow: none;
|
||||
border: 1px solid $light-gray !important;
|
||||
}
|
||||
}
|
||||
.offer-style{
|
||||
.card{
|
||||
box-shadow: none;
|
||||
border: 1px dashed $light-gray !important;
|
||||
}
|
||||
}
|
||||
.rating-star-wrapper{
|
||||
color: #797979;
|
||||
}
|
||||
/**=====================
|
||||
19. Mega option CSS Ends
|
||||
==========================**/
|
||||
166
static/admin/assets/scss/pages/_order-history.scss
Normal file
166
static/admin/assets/scss/pages/_order-history.scss
Normal file
@@ -0,0 +1,166 @@
|
||||
/**=====================
|
||||
76. Order History CSS start
|
||||
==========================**/
|
||||
.prooduct-details-box {
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.media {
|
||||
border: 1px solid $light-background;
|
||||
border-radius: 10px;
|
||||
padding: 15px 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rating {
|
||||
color: #ffaf45;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
a {
|
||||
color: gray;
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.order-history {
|
||||
.input-group {
|
||||
text-align: right;
|
||||
max-width: 300px;
|
||||
}
|
||||
table {
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
vertical-align: middle;
|
||||
border-top: none;
|
||||
background-color: $body-color;
|
||||
border: 1px solid $light-gray;
|
||||
padding: 1.25rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qty-box {
|
||||
width:120px;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
input {
|
||||
width: 44px;
|
||||
max-width: 44px;
|
||||
background-color:transparent;
|
||||
border: none !important;
|
||||
}
|
||||
.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;
|
||||
border: none;
|
||||
&.bootstrap-touchspin-down {
|
||||
border-right: 1px solid;
|
||||
[dir="rtl"] & {
|
||||
border-right: unset;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
}
|
||||
&.bootstrap-touchspin-up {
|
||||
border-left: 1px solid;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.order-history {
|
||||
table {
|
||||
width: 900px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
76. Order History CSS end
|
||||
==========================**/
|
||||
40
static/admin/assets/scss/pages/_page.scss
Normal file
40
static/admin/assets/scss/pages/_page.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
/**=====================
|
||||
32. pagination CSS Start
|
||||
==========================**/
|
||||
/*test Nav bar color */
|
||||
$page-name:theme,
|
||||
primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
info,
|
||||
dark,
|
||||
warning;
|
||||
$page-color:var(--theme-deafult),
|
||||
var(--theme-deafult),
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$info-color,
|
||||
$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;
|
||||
}
|
||||
&.active{
|
||||
.page-link{
|
||||
color: $white !important;
|
||||
background-color: nth($page-color, $i) !important;
|
||||
border-color: nth($page-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
32. pagination CSS Ends
|
||||
==========================**/
|
||||
192
static/admin/assets/scss/pages/_pricing.scss
Normal file
192
static/admin/assets/scss/pages/_pricing.scss
Normal file
@@ -0,0 +1,192 @@
|
||||
/**=====================
|
||||
34. Pricing CSS Start
|
||||
==========================**/
|
||||
.pricing-simple {
|
||||
box-shadow: 0 0 10px 5px rgba(68, 102, 242, 0.05);
|
||||
margin-bottom: 0 !important;
|
||||
.card-body {
|
||||
border-bottom: none;
|
||||
h3 {
|
||||
position: relative;
|
||||
margin-bottom: 38px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10px;
|
||||
background-color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
line-height: 0.9;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricingtable {
|
||||
text-align: center;
|
||||
padding-top:45px;
|
||||
padding-bottom:45px;
|
||||
border-radius: 10px;
|
||||
box-shadow: $card-hover-box-shadow;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height:100%;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
background-color: var(--theme-deafult);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -213px;
|
||||
z-index: -1;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pricingtable {
|
||||
&:after {
|
||||
background-color: var(--theme-deafult);
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
top: auto;
|
||||
bottom: -210px;
|
||||
right: auto;
|
||||
left: -160px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-transform:uppercase;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
color: $white;
|
||||
background-color: var(--theme-deafult);
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
padding: 45px 0 0;
|
||||
margin: 0 auto 25px;
|
||||
border-radius: 50%;
|
||||
.duration {
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
.amount {
|
||||
font-size: 58px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.currency {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-content {
|
||||
margin: 0 0 25px;
|
||||
display: inline-block;
|
||||
li {
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
margin: 0 0 20px;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
color: var(--theme-deafult);
|
||||
font-family: FontAwesome;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1470px){
|
||||
.pricing-block{
|
||||
>div{
|
||||
flex:50%;
|
||||
&:nth-child(n+3){
|
||||
margin-top:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.pricing-simple {
|
||||
.card-body {
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-block{
|
||||
>div{
|
||||
&:nth-child(n+2){
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.pricing-simple {
|
||||
.card-body {
|
||||
h1 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-block {
|
||||
> div{
|
||||
flex:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pricingtable{
|
||||
padding-top:30px;
|
||||
padding-bottom:30px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
34. Pricing CSS Ends
|
||||
==========================**/
|
||||
117
static/admin/assets/scss/pages/_progress.scss
Normal file
117
static/admin/assets/scss/pages/_progress.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
/**=====================
|
||||
Progress CSS Start
|
||||
==========================**/
|
||||
.progress-showcase {
|
||||
.progress {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sm-progress-bar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.lg-progress-bar {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.progress-wrapper {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.progress-btn {
|
||||
background-color: $light-chartist-grid-color;
|
||||
border-color: $light-chartist-grid-color;
|
||||
}
|
||||
|
||||
.small-progressbar {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -2px;
|
||||
right: -9px;
|
||||
background-color: $primary-color;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: -9px;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
right: -6px;
|
||||
font-weight: 700;
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-circle {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: -18px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: 14px solid $primary-color;
|
||||
border-radius: 70px;
|
||||
animation: heart 1s ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heart {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(.5);
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(.8);
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-b-space {
|
||||
.progress {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Progress CSS Ends
|
||||
==========================**/
|
||||
178
static/admin/assets/scss/pages/_projectlist.scss
Normal file
178
static/admin/assets/scss/pages/_projectlist.scss
Normal file
@@ -0,0 +1,178 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
vertical-align: -12px;
|
||||
float:right;
|
||||
[dir="rtl"] & {
|
||||
float:left;
|
||||
}
|
||||
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-semi-gray;
|
||||
border-radius: 5px;
|
||||
padding: 30px;
|
||||
background-color: lighten($light, 2%);
|
||||
margin-bottom: 30px;
|
||||
|
||||
h6 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.media-body {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
div {
|
||||
margin-bottom: 5px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
433
static/admin/assets/scss/pages/_social-app.scss
Normal file
433
static/admin/assets/scss/pages/_social-app.scss
Normal file
@@ -0,0 +1,433 @@
|
||||
/**=====================
|
||||
79. social app css start
|
||||
==========================**/
|
||||
.user-profile {
|
||||
.hovercard {
|
||||
.socialheader {
|
||||
background: url(../images/social-app/social-image.png);
|
||||
}
|
||||
|
||||
.user-image {
|
||||
.share-icons {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: -27px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
||||
.social-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-footer {
|
||||
>div {
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.market-tabs {
|
||||
.border-tab.nav-tabs .nav-item .nav-link.active {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
|
||||
.nav-link {
|
||||
height: 81px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-scoial {
|
||||
border-bottom: none;
|
||||
margin-bottom: 20px !important;
|
||||
margin-top: 20px;
|
||||
|
||||
li {
|
||||
a {
|
||||
font-weight: 600;
|
||||
|
||||
svg {
|
||||
circle {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-network {
|
||||
span {
|
||||
margin-bottom: 30px;
|
||||
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;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photos {
|
||||
margin-bottom: -15px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 70px;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-users-social {
|
||||
margin-bottom: 30px;
|
||||
svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-chat {
|
||||
margin-top: 30px;
|
||||
|
||||
span {
|
||||
span {
|
||||
font-weight: normal;
|
||||
color: $light-text;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-body {
|
||||
padding: 30px;
|
||||
border: 1px solid $light-color;
|
||||
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;
|
||||
}
|
||||
|
||||
.social-btngroup {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.likes-profile {
|
||||
h5 {
|
||||
span {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-group {
|
||||
margin-top: 30px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:nth-child(4) {
|
||||
margin-left: -22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-status {
|
||||
form {
|
||||
.form-group {
|
||||
.form-control-social {
|
||||
border: 1px solid $light-color;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.social-status {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #fff;
|
||||
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;
|
||||
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: 30px;
|
||||
}
|
||||
|
||||
.your-details {
|
||||
p {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-showcase {
|
||||
.friend-pic {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pepole-knows {
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.add-friend {
|
||||
h6 {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-log {
|
||||
.my-activity {
|
||||
+.my-activity {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
|
||||
span {
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
79. social app CSS end
|
||||
==========================**/
|
||||
132
static/admin/assets/scss/pages/_task.scss
Normal file
132
static/admin/assets/scss/pages/_task.scss
Normal 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
|
||||
==========================**/
|
||||
589
static/admin/assets/scss/pages/_timeline-v.scss
Normal file
589
static/admin/assets/scss/pages/_timeline-v.scss
Normal file
@@ -0,0 +1,589 @@
|
||||
/**=====================
|
||||
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%;
|
||||
border-radius: 15px;
|
||||
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: -88px;
|
||||
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 {
|
||||
margin-bottom: 30px;
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cd-container {
|
||||
width: 90%;
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cd-container::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1170px) {
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-content::before {
|
||||
top: 24px;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
border-color: transparent;
|
||||
border-right-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
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: $white;
|
||||
}
|
||||
}
|
||||
|
||||
#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-color;
|
||||
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: $light;
|
||||
border-radius: 4px;
|
||||
padding: 30px;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
|
||||
|
||||
p {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-date {
|
||||
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-color;
|
||||
}
|
||||
|
||||
@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: 7;
|
||||
|
||||
>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
|
||||
==========================**/
|
||||
193
static/admin/assets/scss/pages/_timeliny.scss
Normal file
193
static/admin/assets/scss/pages/_timeliny.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
/**=====================
|
||||
43. Timeline 2 CSS Start
|
||||
==========================**/
|
||||
$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-color, 3%);
|
||||
border-bottom: 1px solid lighten($light-color, 3%);
|
||||
text-rendering: optimizeLegibility;
|
||||
color: $light-color;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
cursor: move;
|
||||
&.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $dark-gray;
|
||||
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-color;
|
||||
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: var(--theme-deafult);
|
||||
background-color: var(--theme-deafult);
|
||||
box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.33);
|
||||
&::before {
|
||||
color: $dark-color;
|
||||
}
|
||||
&::after {
|
||||
color: $dark-color;
|
||||
opacity: 1;
|
||||
background-color: lighten($primary-color, 38%);
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
.#{$timeliny_classname}-dot {
|
||||
cursor: move;
|
||||
|
||||
&::before {
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.inactive):not(.active){
|
||||
.#{$timeliny_classname}-dot:hover {
|
||||
border-color: $dark-color;
|
||||
background-color: $dark-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: var(--theme-deafult);
|
||||
|
||||
@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 var(--theme-deafult);
|
||||
}
|
||||
&::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 var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/**=====================
|
||||
43. Timeline 2 CSS Ends
|
||||
==========================**/
|
||||
166
static/admin/assets/scss/pages/_user-profile.scss
Normal file
166
static/admin/assets/scss/pages/_user-profile.scss
Normal file
@@ -0,0 +1,166 @@
|
||||
/**=====================
|
||||
22. User profile css start
|
||||
==========================**/
|
||||
.user-profile {
|
||||
.ttl-info {
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid $light-color;
|
||||
}
|
||||
hr {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.hovercard {
|
||||
.cardheader {
|
||||
background: url(../images/other-images/bg-profile.png);
|
||||
background-size: cover;
|
||||
background-position: 10%;
|
||||
height: 470px;
|
||||
}
|
||||
.user-image {
|
||||
position: relative;
|
||||
height: 0;
|
||||
.avatar {
|
||||
margin-top: -80px;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
max-width: 155px;
|
||||
max-height: 155px;
|
||||
border-radius: 50%;
|
||||
border: 7px solid $white;
|
||||
}
|
||||
}
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 51%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding: 30px;
|
||||
.title {
|
||||
margin-bottom: 4px;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: $dark-color;
|
||||
vertical-align: middle;
|
||||
a {
|
||||
color: $theme-font-color;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $semi-dark;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.follow {
|
||||
margin-top: 20px;
|
||||
.follow-num {
|
||||
font-size: 20px;
|
||||
color: $theme-font-color;
|
||||
font-family: $font-rubik, $font-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
span {
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
.profile-img-style {
|
||||
padding: 30px;
|
||||
.img-container{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
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 {
|
||||
a {
|
||||
padding:0 15px;
|
||||
color: $semi-dark;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Edit profile //
|
||||
.edit-profile{
|
||||
.profile-title{
|
||||
.media{
|
||||
align-items:center;
|
||||
margin-bottom:30px;
|
||||
.media-body{
|
||||
margin-left:14px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**=====================
|
||||
22. User profile css Ends
|
||||
==========================**/
|
||||
|
||||
|
||||
|
||||
|
||||
19
static/admin/assets/scss/pages/_wishlist.scss
Normal file
19
static/admin/assets/scss/pages/_wishlist.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
/**=====================
|
||||
83. Wishlist CSS start
|
||||
==========================**/
|
||||
.wishlist{
|
||||
table{
|
||||
tr{
|
||||
td{
|
||||
svg{
|
||||
color: $dark-gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
83. Wishlist CSS Ends
|
||||
==========================**/
|
||||
Reference in New Issue
Block a user